:root, [data-theme="dark"] {
    --bg: #0b0f14;
    --bg-side: #0e141b;
    --panel: #121920;
    --panel-2: #161e27;
    --border: #212c38;
    --border-strong: #2c3a49;
    --text: #d9e2ec;
    --text-dim: #8595a8;
    --text-faint: #5c6b7e;
    --accent: #38bdf8;
    --accent-soft: rgba(56,189,248,.12);
    --ok: #34d399;
    --ok-soft: rgba(52,211,153,.12);
    --warn: #fbbf24;
    --warn-soft: rgba(251,191,36,.12);
    --danger: #f87171;
    --danger-soft: rgba(248,113,113,.12);
    --orange: #fb923c;
    --orange-soft: rgba(251,146,60,.12);
    --chart-grid: #1c2733;
    --shadow: 0 1px 3px rgba(0,0,0,.4);
    --input-bg: #0e141b;
    --scrollbar: #2a3746;
  }
  [data-theme="light"] {
    --bg: #f2f5f8;
    --bg-side: #ffffff;
    --panel: #ffffff;
    --panel-2: #f6f8fa;
    --border: #e3e8ee;
    --border-strong: #cfd7e0;
    --text: #1c2733;
    --text-dim: #5b6b7d;
    --text-faint: #8b98a8;
    --accent: #0284c7;
    --accent-soft: rgba(2,132,199,.10);
    --ok: #059669;
    --ok-soft: rgba(5,150,105,.10);
    --warn: #d97706;
    --warn-soft: rgba(217,119,6,.10);
    --danger: #dc2626;
    --danger-soft: rgba(220,38,38,.10);
    --orange: #ea580c;
    --orange-soft: rgba(234,88,12,.10);
    --chart-grid: #e8edf2;
    --shadow: 0 1px 3px rgba(16,24,40,.08);
    --input-bg: #f6f8fa;
    --scrollbar: #c8d0da;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%; }
  body {
    font-family: -apple-system, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 13px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
  ::-webkit-scrollbar { width:8px; height:8px; }
  ::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:4px; }
  ::-webkit-scrollbar-track { background:transparent; }

  /* ---------- 布局 ---------- */
  .app { display:flex; min-height:100vh; }
  .side {
    width: 208px; flex-shrink:0; background:var(--bg-side);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  }
  .brand {
    display:flex; align-items:center; gap:10px;
    padding:18px 18px 16px; border-bottom:1px solid var(--border);
  }
  .brand .logo {
    width:28px; height:28px; border-radius:7px; background:var(--accent);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .brand .name { font-size:14px; font-weight:650; letter-spacing:.02em; }
  .brand .sub { font-size:10px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; }
  .nav { padding:12px 10px; display:flex; flex-direction:column; gap:2px; flex:1; }
  .nav-item {
    display:flex; align-items:center; gap:10px; padding:9px 12px;
    border-radius:7px; color:var(--text-dim); cursor:pointer;
    font-size:13px; border:1px solid transparent; user-select:none;
    transition: background .15s, color .15s;
  }
  .nav-item svg { width:16px; height:16px; flex-shrink:0; }
  .nav-item:hover { background:var(--panel-2); color:var(--text); }
  .nav-item.active {
    background:var(--accent-soft); color:var(--accent); font-weight:600;
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .side-foot {
    padding:14px 16px; border-top:1px solid var(--border);
    font-size:11px; color:var(--text-faint); display:flex; flex-direction:column; gap:4px;
  }

  .main { flex:1; min-width:0; display:flex; flex-direction:column; }
  .topbar {
    height:56px; display:flex; align-items:center; gap:16px;
    padding:0 24px; border-bottom:1px solid var(--border);
    background: var(--bg-side); position:sticky; top:0; z-index:20;
  }
  .topbar h1 { font-size:15px; font-weight:650; }
  .topbar .crumb { color:var(--text-faint); font-size:12px; }
  .topbar .spacer { flex:1; }
  .live {
    display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim);
    padding:5px 11px; border:1px solid var(--border); border-radius:20px;
  }
  .live .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); }
  .icon-btn {
    width:32px; height:32px; border-radius:7px; border:1px solid var(--border);
    background:var(--panel); color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover { color:var(--text); border-color:var(--border-strong); }
  .avatar {
    width:30px; height:30px; border-radius:50%; background:var(--accent-soft);
    color:var(--accent); display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:650;
  }
  .content { padding:22px 24px 40px; max-width:1440px; width:100%; margin:0 auto; }

  /* ---------- 视图 ---------- */
  .view { display:none; }
  .view.active { display:block; animation: fadein .18s ease; }
  @keyframes fadein { from { opacity:0; transform:translateY(3px);} to { opacity:1; transform:none;} }

  /* ---------- 卡片与网格 ---------- */
  .grid { display:grid; gap:14px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); margin-bottom:14px; }
  .cols-2 { grid-template-columns: 1.6fr 1fr; margin-bottom:14px; }
  .cols-2b { grid-template-columns: 1fr 1fr; margin-bottom:14px; }
  .charts-grid { grid-template-columns: 1fr 1fr; }
  .card {
    background:var(--panel); border:1px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow);
  }
  .card-pad { padding:16px 18px; }
  .card-head {
    display:flex; align-items:center; gap:10px;
    padding:13px 18px; border-bottom:1px solid var(--border);
  }
  .card-head .t { font-size:13px; font-weight:650; }
  .card-head .s { font-size:11px; color:var(--text-faint); }
  .card-head .spacer { flex:1; }
  .kpi .label {
    font-size:11px; color:var(--text-dim); letter-spacing:.06em;
    text-transform:uppercase; display:flex; align-items:center; gap:7px;
  }
  .kpi .value { font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-.01em; }
  .kpi .value small { font-size:13px; font-weight:500; color:var(--text-dim); margin-left:3px; }
  .kpi .delta { font-size:11px; color:var(--text-faint); margin-top:3px; }
  .kpi .delta b { color:var(--ok); font-weight:600; }
  .sdot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .sdot.ok { background:var(--ok); box-shadow:0 0 6px color-mix(in srgb, var(--ok) 70%, transparent); }
  .sdot.off { background:var(--danger); box-shadow:0 0 6px color-mix(in srgb, var(--danger) 70%, transparent); }
  .sdot.busy { background:var(--warn); }

  /* ---------- 警告列表 ---------- */
  .warn-list { display:flex; flex-direction:column; }
  .warn-item {
    display:flex; gap:12px; padding:11px 18px; border-bottom:1px solid var(--border);
    align-items:flex-start;
  }
  .warn-item:last-child { border-bottom:none; }
  .warn-item .bar { width:3px; align-self:stretch; border-radius:2px; }
  .warn-item .body { flex:1; min-width:0; }
  .warn-item .ttl { font-size:12.5px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .warn-item .desc { font-size:12px; color:var(--text-dim); margin-top:1px; }
  .warn-item .time { font-size:11px; color:var(--text-faint); white-space:nowrap; }
  .sev {
    font-size:10px; padding:1px 7px; border-radius:10px; font-weight:650; letter-spacing:.04em;
  }
  .sev.red { background:var(--danger-soft); color:var(--danger); }
  .sev.orange { background:var(--orange-soft); color:var(--orange); }
  .sev.yellow { background:var(--warn-soft); color:var(--warn); }

  /* ---------- 表格 ---------- */
  table { width:100%; border-collapse:collapse; font-size:12.5px; }
  th {
    text-align:left; font-size:11px; color:var(--text-faint); font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    padding:9px 14px; border-bottom:1px solid var(--border); background:var(--panel-2);
    white-space:nowrap;
  }
  td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tbody tr.rowlink { cursor:pointer; }
  tbody tr.rowlink:hover { background:var(--panel-2); }
  .mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size:12px; }
  .tag {
    font-size:10.5px; padding:1px 8px; border-radius:10px; font-weight:600;
    background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim);
    white-space:nowrap;
  }
  .tag.ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
  .tag.off { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
  .tag.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }

  /* ---------- 进度条 ---------- */
  .meter { display:flex; align-items:center; gap:8px; min-width:120px; }
  .meter .track { flex:1; height:5px; background:var(--panel-2); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
  .meter .fill { height:100%; border-radius:3px; }
  .meter .pct { font-size:11.5px; color:var(--text-dim); width:34px; text-align:right; }

  /* ---------- 图表 ---------- */
  .chart-box { padding:8px 6px 4px; height:172px; }
  svg.chart { display:block; width:100%; height:auto; }
  .legend { display:flex; gap:16px; padding:0 14px 10px; font-size:11.5px; color:var(--text-dim); flex-wrap:wrap; }
  .legend .li { display:flex; align-items:center; gap:6px; }
  .legend .sw { width:10px; height:3px; border-radius:2px; }
  .donut-wrap { display:flex; align-items:center; gap:22px; padding:16px 18px; }
  .donut {
    width:132px; height:132px; border-radius:50%; position:relative; flex-shrink:0;
  }
  .donut::after {
    content:""; position:absolute; inset:26px; border-radius:50%; background:var(--panel);
  }
  .donut .center {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; z-index:1;
  }
  .donut .center b { font-size:20px; font-weight:700; }
  .donut .center span { font-size:10px; color:var(--text-faint); }
  .donut-legend { display:flex; flex-direction:column; gap:9px; font-size:12px; }
  .donut-legend .li { display:flex; align-items:center; gap:9px; }
  .donut-legend .sw { width:9px; height:9px; border-radius:3px; }
  .donut-legend .v { margin-left:auto; color:var(--text-dim); padding-left:18px; }

  /* ---------- 服务器详情 ---------- */
  .detail-head {
    display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap;
  }
  .detail-head .title { font-size:19px; font-weight:700; letter-spacing:-.01em; }
  .chips { display:flex; gap:8px; flex-wrap:wrap; }
  .chip {
    font-size:11.5px; color:var(--text-dim); background:var(--panel);
    border:1px solid var(--border); border-radius:14px; padding:3px 11px;
  }
  .chip b { color:var(--text); font-weight:600; }
  .back-link {
    display:inline-flex; align-items:center; gap:6px; color:var(--text-dim);
    font-size:12px; cursor:pointer; margin-bottom:12px; user-select:none;
  }
  .back-link:hover { color:var(--accent); }

  /* ---------- 切换服务器搜索 ---------- */
  .srv-switch { position:relative; width:250px; }
  .srv-switch input {
    width:100%; background:var(--input-bg); border:1px solid var(--border);
    border-radius:7px; padding:7px 11px; font-size:12.5px; color:var(--text);
    outline:none;
  }
  .srv-switch input:focus { border-color:var(--accent); }
  .srv-switch input::placeholder { color:var(--text-faint); }
  .srv-menu {
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:var(--panel); border:1px solid var(--border-strong);
    border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.4);
    max-height:300px; overflow-y:auto; z-index:40; display:none;
  }
  .srv-menu.show { display:block; }
  .srv-opt {
    display:flex; align-items:center; gap:8px; padding:8px 12px;
    cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--border);
  }
  .srv-opt:last-child { border-bottom:none; }
  .srv-opt:hover { background:var(--panel-2); }
  .srv-opt .ip { margin-left:auto; color:var(--text-faint); font-size:11px; }
  .srv-opt.disabled { opacity:.45; cursor:not-allowed; }
  .srv-opt.current { background:var(--accent-soft); }
  .srv-empty { padding:14px; text-align:center; color:var(--text-faint); font-size:12px; }

  .mount { display:flex; flex-direction:column; gap:9px; padding:14px 18px; }
  .mount .row { display:flex; align-items:center; gap:12px; font-size:12.5px; }
  .mount .path { width:90px; color:var(--text-dim); font-family:ui-monospace, Consolas, monospace; font-size:12px; }
  .mount .track { flex:1; height:6px; background:var(--panel-2); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
  .mount .fill { height:100%; }
  .mount .info { width:130px; text-align:right; color:var(--text-dim); font-size:11.5px; }

  /* ---------- 开关 ---------- */
  .switch { position:relative; display:inline-block; width:34px; height:19px; flex-shrink:0; }
  .switch input { display:none; }
  .switch .sl { position:absolute; inset:0; background:var(--border-strong); border-radius:12px; transition:.2s; cursor:pointer; }
  .switch .sl::after {
    content:""; position:absolute; width:15px; height:15px; border-radius:50%;
    background:#fff; top:2px; left:2px; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .switch input:checked + .sl { background:var(--ok); }
  .switch input:checked + .sl::after { left:17px; }

  /* ---------- 命令台 ---------- */
  .cmd-layout { display:grid; grid-template-columns:280px 1fr; gap:14px; }
  .srv-pick { display:flex; flex-direction:column; max-height:560px; }
  .srv-pick .tools {
    display:flex; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border);
    align-items:center;
  }
  .pick-list { overflow-y:auto; flex:1; }
  .pick-item {
    display:flex; align-items:center; gap:10px; padding:9px 14px;
    border-bottom:1px solid var(--border); cursor:pointer; user-select:none;
    font-size:12.5px;
  }
  .pick-item:hover { background:var(--panel-2); }
  .pick-item.disabled { opacity:.45; cursor:not-allowed; }
  .pick-item input { accent-color:var(--accent); cursor:pointer; }
  .pick-item .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pick-item .ip { color:var(--text-faint); font-size:11px; }

  textarea.cmd-input {
    width:100%; min-height:96px; resize:vertical; background:var(--input-bg);
    border:1px solid var(--border); border-radius:8px; color:var(--text);
    font-family:ui-monospace, "SF Mono", Consolas, monospace; font-size:12.5px;
    padding:12px 14px; line-height:1.6; outline:none;
  }
  textarea.cmd-input:focus { border-color:var(--accent); }
  .btn {
    display:inline-flex; align-items:center; gap:7px; padding:8px 16px;
    border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
    border:1px solid var(--border); background:var(--panel-2); color:var(--text);
    transition:.15s; user-select:none;
  }
  .btn:hover { border-color:var(--border-strong); }
  .btn.primary { background:var(--accent); border-color:var(--accent); color:#04141d; }
  .btn.primary:hover { filter:brightness(1.08); }
  .btn.primary:disabled { opacity:.5; cursor:not-allowed; filter:none; }
  .btn.ghost { background:transparent; }

  .cmd-results { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
  .cmd-result { border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--panel); }
  .cmd-result .rh {
    display:flex; align-items:center; gap:10px; padding:9px 14px;
    background:var(--panel-2); border-bottom:1px solid var(--border); font-size:12.5px;
  }
  .cmd-result .rh .nm { font-weight:650; }
  .cmd-result .rh .spacer { flex:1; }
  .cmd-result pre {
    padding:12px 16px; font-family:ui-monospace, Consolas, monospace; font-size:12px;
    line-height:1.7; color:var(--text-dim); white-space:pre-wrap; word-break:break-all;
    max-height:260px; overflow-y:auto;
  }
  .cmd-result pre .ps { color:var(--ok); }
  .cmd-form { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
  .cmd-form .grow { flex:1; min-width:300px; }
  .cmd-actions { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
  select.inp, input.inp {
    background:var(--input-bg); border:1px solid var(--border); color:var(--text);
    border-radius:7px; padding:7px 11px; font-size:12.5px; outline:none;
  }
  select.inp:focus, input.inp:focus { border-color:var(--accent); }
  .hint { font-size:11.5px; color:var(--text-faint); }

  /* ---------- 设置 ---------- */
  .form-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:11px 0; border-bottom:1px dashed var(--border); }
  .form-row:last-child { border-bottom:none; }
  .form-row .fl { width:210px; font-size:12.5px; }
  .form-row .fl .sub { font-size:11px; color:var(--text-faint); }
  .form-row .fc { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .form-row input.inp { width:110px; }
  .unit { font-size:12px; color:var(--text-dim); }
  .code-block {
    background:var(--input-bg); border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; font-family:ui-monospace, Consolas, monospace; font-size:12px;
    color:var(--text-dim); word-break:break-all; line-height:1.7; position:relative;
  }
  .copy-btn {
    position:absolute; top:8px; right:8px; font-size:11px; padding:3px 10px;
    border-radius:6px; border:1px solid var(--border-strong); background:var(--panel);
    color:var(--text-dim); cursor:pointer;
  }
  .copy-btn:hover { color:var(--accent); border-color:var(--accent); }
  .copy-btn.sm { position:static; margin-left:7px; padding:1px 7px; font-size:10px; line-height:1.5; vertical-align:1px; }
  .copy-ico {
    border:none; background:transparent; padding:2px; margin-left:5px; cursor:pointer;
    color:var(--text-faint); vertical-align:-1px; display:inline-flex; line-height:0; border-radius:4px;
  }
  .copy-ico:hover { color:var(--accent); background:var(--panel); }
  .ss-list {
    position:absolute; top:calc(100% + 4px); left:0; min-width:100%; z-index:30;
    background:var(--panel); border:1px solid var(--border-strong); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.18); max-height:260px; overflow:auto; padding:4px;
  }
  .ss-item {
    padding:7px 10px; border-radius:6px; cursor:pointer; font-size:12.5px;
    display:flex; justify-content:space-between; gap:16px; white-space:nowrap;
  }
  .ss-item:hover { background:rgba(127,127,127,.14); color:var(--accent); }
  .ss-ip { color:var(--text-faint); font-size:11px; }
  .ss-empty { color:var(--text-faint); cursor:default; }
  th.sortable { cursor:pointer; user-select:none; }
  th.sortable:hover { color:var(--accent); }
  .sort-i { font-size:9px; margin-left:3px; color:var(--text-faint); }
  th.sortable:hover .sort-i { color:var(--accent); }
  .section-title {
    font-size:12px; font-weight:650; color:var(--text-dim); letter-spacing:.08em;
    text-transform:uppercase; margin:26px 0 12px; display:flex; align-items:center; gap:10px;
  }
  .section-title::after { content:""; flex:1; height:1px; background:var(--border); }

  .empty-tip { padding:24px; text-align:center; color:var(--text-faint); font-size:12.5px; }
  .foot-note { margin-top:18px; font-size:11.5px; color:var(--text-faint); display:flex; gap:16px; flex-wrap:wrap; }

  @media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .cols-2, .cols-2b, .charts-grid { grid-template-columns: 1fr; }
    .cmd-layout { grid-template-columns: 1fr; }
    .side { width:64px; }
    .brand .name, .brand .sub, .nav-item span, .side-foot { display:none; }
  }


/* ==== 登录 / 分页 / toast ==== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{width:340px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:34px 30px;text-align:center;box-shadow:var(--shadow)}
.login-logo{font-size:22px;font-weight:750;letter-spacing:.02em}
.login-sub{font-size:10px;color:var(--text-faint);letter-spacing:.14em;margin:6px 0 24px;text-transform:uppercase}
.login-input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 14px;font-size:13px;outline:none;margin-bottom:12px}
.login-input:focus{border-color:var(--accent)}
.login-btn{width:100%;justify-content:center;padding:10px 16px}
.login-err{margin-top:12px;color:var(--danger);font-size:12px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px;border-top:1px solid var(--border)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border-strong);border-radius:10px;padding:10px 20px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:99}
.srv-switch input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:7px;padding:7px 11px;font-size:12.5px;color:var(--text);outline:none}

.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(1.1)}

.btn.danger-outline{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.danger-outline:hover{background:var(--danger-soft);filter:none}