:root { color-scheme: light; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #263039; background: #f5f7f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; border-radius: 5px; font-weight: 600; min-height: 38px; padding: 0 15px; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #14776d; outline-offset: 2px; }
.app-header { background: #fff; border-bottom: 1px solid #dbe2df; }
.header-inner { max-width: 1200px; min-height: 62px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product-mark { font-weight: 800; font-size: 20px; color: #146960; white-space: nowrap; }
.product-mark span { color: #28343b; font-size: 15px; font-weight: 650; padding-left: 9px; border-left: 1px solid #c5d4cf; margin-left: 8px; }
.header-actions { display: flex; gap: 16px; align-items: center; }
.env-label { color: #687579; font-size: 13px; white-space: nowrap; }
.subtle { background: none; border: 0; color: #495b60; padding: 0 4px; }
.subtle:hover { color: #08786b; }
.workspace { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
.page-heading, .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
h1 { font-size: 25px; font-weight: 690; margin: 0; }
h2 { font-size: 17px; font-weight: 680; margin: 0; }
.page-heading p { margin: 6px 0 0; color: #67757a; font-size: 13px; }
.secondary { background: #fff; border: 1px solid #b8c8c2; color: #146960; }
.secondary:hover { background: #edf5f2; }
.status-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #dae2df; margin-top: 27px; background: #fff; }
.proxy-band { margin-top: 0; border-top: 0; }
.metric { min-height: 100px; padding: 19px 20px; display: flex; flex-direction: column; justify-content: center; gap: 9px; border-right: 1px solid #e4eae7; }
.metric:last-child { border: 0; }
.metric-label { color: #6a777b; font-size: 13px; }
.metric strong { font-size: 17px; font-weight: 680; word-break: break-word; }
.state { display: inline-flex; align-items: center; gap: 8px; }
.state::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.state.online { color: #147869; }
.state.offline { color: #b05043; }
.state.waiting { color: #6b777b; }
.activity, .config-section { margin-top: 37px; }
.config-section { border-top: 1px solid #dbe2df; padding-top: 26px; }
.config-facts { display: flex; gap: 28px; padding: 16px 0 24px; flex-wrap: wrap; }
.config-facts > div { display: grid; gap: 5px; min-width: 175px; }
.config-facts strong { font-size: 14px; font-weight: 650; }
.config-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 19px; }
.config-form label { display: grid; gap: 8px; min-width: 0; color: #485c61; font-size: 13px; font-weight: 650; }
.config-form input { width: 100%; height: 41px; border: 1px solid #bdcdc6; border-radius: 5px; padding: 0 11px; color: #263039; }
.config-form input::placeholder { color: #839093; }
.config-actions { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; flex-wrap: wrap; }
.config-actions .primary { margin-top: 0; }
#config-feedback { color: #516267; font-size: 13px; }
.section-heading { margin-bottom: 14px; }
.section-heading span { color: #778487; font-size: 12px; }
.table-scroll { overflow-x: auto; border-block: 1px solid #dbe2df; background: #fff; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
th { background: #edf1ef; color: #536166; font-size: 12px; font-weight: 650; height: 42px; }
td { font-size: 13px; color: #35454b; vertical-align: top; padding-block: 14px; }
th, td { padding-inline: 13px; border-bottom: 1px solid #e8edeb; }
th:nth-child(1) { width: 95px; } th:nth-child(2) { width: 98px; } th:nth-child(3) { width: 190px; } th:nth-child(5) { width: 195px; }
tr:last-child td { border-bottom: 0; }
.time-cell { color: #768487; font-variant-numeric: tabular-nums; white-space: nowrap; }
.direction-cell { color: #17776c; white-space: nowrap; }
.action-cell { font-weight: 640; overflow-wrap: anywhere; }
.content-cell { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; }
.empty { text-align: center; color: #859295; padding: 44px 12px; }
details { max-width: 100%; }
summary { cursor: pointer; color: #4d6772; overflow-wrap: anywhere; }
pre { margin: 10px 0 0; color: #69797d; font: 11px/1.6 Consolas, monospace; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #edf2ef; }
.login-panel { background: #fff; border: 1px solid #d6e0db; width: min(100%, 390px); padding: 32px; border-radius: 6px; }
.login-panel h1 { margin: 30px 0 22px; font-size: 24px; }
.login-panel form { display: grid; gap: 10px; }
.login-panel label { font-size: 13px; font-weight: 650; color: #485c61; }
.login-panel input { border: 1px solid #bdcdc6; border-radius: 5px; height: 42px; padding: 0 11px; min-width: 0; }
.primary { border: 1px solid #116f64; background: #146f65; color: white; margin-top: 12px; }
.primary:hover { background: #0c5e55; }
@media (max-width: 700px) {
  .header-inner { min-height: 57px; padding: 0 16px; }
  .env-label { display: none; }
  .workspace { padding: 25px 16px 56px; }
  h1 { font-size: 22px; }
  .status-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 88px; border-bottom: 1px solid #e4eae7; padding: 14px; }
  .metric:nth-child(even) { border-right: 0; }
  .metric:nth-child(n+3) { border-bottom: 0; }
  .config-form { grid-template-columns: 1fr; }
  .config-facts { gap: 18px; }
  .config-facts > div { min-width: 135px; }
  .empty { text-align: left; padding-left: 16px; }
  table { min-width: 650px; }
}