/* ==========================================================================
   QQ 机器人管理平台 — 样式（原生 CSS，零依赖，无构建步骤）
   视觉取向：暖中性护眼「纸面」浅色 + 柔和深灰蓝暗色，共用一套 CSS 变量；
             网格底纹 + 2px 直角细边框，层级靠边框 / 字重 / 留白表达。
   图标：assets/icons/*.svg 用 CSS mask 抠形状（background-color: currentColor），
         所以深浅主题切换时图标自动换色，不需要换图。
   断点：<768 手机（顶部栏）· 768~1023 平板（图标侧栏）· >=1024 桌面（固定侧栏）
   ========================================================================== */

/* ---------------------------------------------------------------- 主题变量 */
:root {
  color-scheme: light;

  /* 纸面与面板 */
  --paper: #f3f1e6;        /* 页面底色：暖米白 */
  --paper-2: #eae7d7;      /* 次级底色 */
  --panel: #fbfaf3;        /* 卡片底色 */
  --panel-2: #f6f4ea;      /* 卡片内嵌块 */
  --line: #d9d6c3;         /* 细边框 */
  --line-2: #c5c2aa;       /* 强边框 */
  --grid: rgba(88, 98, 78, 0.10);      /* 网格线（24px 主网格） */
  --grid-fine: rgba(88, 98, 78, 0.05); /* 6px 细网格 */

  /* 文字（对比度已核算：正文 12:1，次要 6.3:1，提示 4.3:1） */
  --ink: #2a2f27;
  --ink-2: #555a4e;
  --ink-3: #6e7365;

  /* 主色与语义色 */
  --accent: #3a7a55;                    /* 主色填充（白字 5.1:1） */
  --accent-hover: #356f4c;
  --accent-ink: #2c6042;                /* 主色文字（浅底 7.0:1） */
  --accent-soft: rgba(58, 122, 85, 0.10);
  --accent-line: rgba(58, 122, 85, 0.32);
  --on-accent: #ffffff;
  --ok: #2f6a4a;
  --warn: #96621a;
  --warn-soft: rgba(150, 98, 26, 0.12);
  --danger: #a43a31;
  --danger-line: #d3aca6;
  --danger-soft: rgba(164, 58, 49, 0.10);
  --danger-hover: rgba(164, 58, 49, 0.16);
  --btn-face: #f6f4ea;

  /* 徽章：协议端 / 状态 */
  --bp-napcat-ink: #2c5f80;
  --bp-napcat-line: #a8c4d4;
  --bp-napcat-bg: #eaf2f7;
  --bp-snow-ink: #6a4f8f;
  --bp-snow-line: #c6b6d8;
  --bp-snow-bg: #f2eef8;
  --bp-ok-line: #a9c4b3;
  --bp-ok-bg: #ecf4ef;
  --bp-warn-line: #d2b98e;
  --bp-warn-bg: #f8f2e5;

  /* 组件专用中性色 */
  --field-bg: #ffffff;
  --bar-bg: rgba(243, 241, 230, 0.97);  /* 手机顶部栏（半透明 + 模糊） */
  --log-bg: #23261f;
  --log-ink: #d6d9c9;
  --qr-bg: #ffffff;
  --qr-ink: #6e7365;
  --glow: rgba(58, 122, 85, 0.10);
  --shadow: rgba(42, 47, 39, 0.07);
  --shadow-2: rgba(42, 47, 39, 0.14);
  --shadow-3: rgba(42, 47, 39, 0.10);
  --mask: rgba(42, 47, 39, 0.42);
  --led-off: #b0ae9a;

  --radius: 3px;
  --radius-sm: 2px;
}

/* 深色：柔和深灰蓝（不是纯黑），正文 >= 7:1，网格底纹一起变淡 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #171b21;
  --paper-2: #1e232b;
  --panel: #1c212a;
  --panel-2: #232a34;
  --line: #2c3440;
  --line-2: #3c4655;
  --grid: rgba(150, 175, 210, 0.085);
  --grid-fine: rgba(150, 175, 210, 0.04);

  --ink: #e9edf3;        /* 正文 14.7:1 */
  --ink-2: #b6c0ce;      /* 次要 9.4:1 */
  --ink-3: #949fae;      /* 提示 6.4:1 */

  --accent: #2f7a55;
  --accent-hover: #388c62;
  --accent-ink: #7ec9a1; /* 主色文字 8.9:1 */
  --accent-soft: rgba(126, 201, 161, 0.12);
  --accent-line: rgba(126, 201, 161, 0.35);
  --on-accent: #f4fbf7;  /* 主色填充上的文字 4.9:1 */
  --ok: #6fc294;
  --warn: #e0aa55;
  --warn-soft: rgba(224, 170, 85, 0.14);
  --danger: #e78c81;
  --danger-line: #7a423c;
  --danger-soft: rgba(231, 140, 129, 0.12);
  --danger-hover: rgba(231, 140, 129, 0.20);
  --btn-face: #232a34;

  --bp-napcat-ink: #9ec8e2;
  --bp-napcat-line: #39586d;
  --bp-napcat-bg: #1b2833;
  --bp-snow-ink: #c3b0e0;
  --bp-snow-line: #4c3f66;
  --bp-snow-bg: #241f31;
  --bp-ok-line: #3a6a52;
  --bp-ok-bg: #182a22;
  --bp-warn-line: #6b5430;
  --bp-warn-bg: #2a2218;

  --field-bg: #151a21;
  --bar-bg: rgba(23, 27, 33, 0.97);
  --log-bg: #10141a;
  --log-ink: #c8d3cd;
  /* 二维码永远白底黑码，暗色下不反色，否则手机扫不出来 */
  --qr-bg: #ffffff;
  --qr-ink: #6e7365;      /* 白底里的提示文字也固定住，不能用浅色 */
  --glow: rgba(126, 201, 161, 0.10);
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-2: rgba(0, 0, 0, 0.50);
  --shadow-3: rgba(0, 0, 0, 0.40);
  --mask: rgba(6, 9, 13, 0.62);
  --led-off: #5a6270;
}

* { box-sizing: border-box; }

/* html 也上底色，避免手机上过度滚动（overscroll）露出白边 */
html { background: var(--paper); }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  color: var(--ink);
  font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background-color: var(--paper);
  /* 网格底纹：纯 CSS 渐变，24px 主网格 + 6px 细网格（深色主题下由变量变淡） */
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to right, var(--grid-fine) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(to bottom, var(--grid-fine) 0 1px, transparent 1px 6px);
  background-attachment: fixed;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: .01em; }
code, .mono, .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 图标（mask）
   用法：<span class="ico" style="--icon:url(/assets/icons/bots.svg)"></span>
   形状由 mask 抠出、颜色由 background-color: currentColor 提供，
   所以图标永远跟着所在位置的文字颜色走（深浅主题都不用换图）。 */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  vertical-align: -0.14em;   /* 行内文字里也能对齐基线 */
}
.ico.lg { width: 1.4em; height: 1.4em; }

/* ---------------------------------------------------------------- 登录页 */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  isolation: isolate;
}
/* 纯 CSS 背景：柔和径向光晕 + 竖向渐变，不再用位图 */
.login-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 50% -6%, var(--glow), transparent 72%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
/* 极淡的方块底纹（grid.svg 平铺，透明度 0.05，只留一点手感） */
.login-wrap::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/icons/grid.svg") 0 0 / 30px 30px repeat;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 78%);
}
.login-theme { position: fixed; top: 14px; right: 14px; z-index: 2; }
.login-card {
  width: 100%;
  max-width: 384px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.login-card .logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; margin-bottom: 4px;
}
.login-card .logo .ico { width: 26px; height: 26px; color: var(--accent); }
.login-card p.sub { color: var(--ink-3); margin: 0 0 20px; font-size: 12.5px; }
.login-card .foot-hint { margin-top: 16px; font-size: 12px; color: var(--ink-3); }

/* 三个登录页签（密码 / 验证码 / 注册）：复用 .tabs .tab，只压一下间距 */
.login-tabs { margin-bottom: 2px; }
.login-tabs .tab { flex: 1 1 auto; justify-content: center; padding: 9px 8px; font-size: 12.5px; }
/* 页签下方那行小字：验证码由「SakuraRealm机器人服务」发送（产品要求固定文案） */
.login-note {
  font-size: 12px; color: var(--ink-3);
  padding: 9px 0 16px; margin-top: 2px;
  border-bottom: 1px solid var(--line); margin-bottom: 16px;
}

/* 输入框 + 按钮并排（获取验证码 / 校验创建码）：按钮不收缩，输入框吃掉剩余宽度 */
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row > input { flex: 1 1 auto; min-width: 0; }
.input-row > .btn { flex: 0 0 auto; }
/* 提示文字的成功 / 失败配色（创建码校验结果用） */
.hint.ok { color: var(--ok); }
.hint.err { color: var(--danger); }

/* ---------------------------------------------------------------- 布局骨架 */
.shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
  width: 224px;
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  background: var(--panel);
  border-right: 2px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 6px 14px; font-weight: 600; font-size: 14.5px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.brand .ico { width: 24px; height: 24px; color: var(--accent); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-2);
  font: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; width: 100%;
}
.nav-item .ico { width: 20px; height: 20px; opacity: .92; }
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
  font-weight: 600;
}
.nav-item.active .ico { opacity: 1; }
/* 手机上的短标签：默认不显示，<768 时替换掉长标签 */
.nav-lbl-sm { display: none; }
.side-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.who { font-size: 12px; color: var(--ink-3); padding: 0 4px; word-break: break-all; }
.who b { color: var(--ink-2); font-weight: 600; }
.theme-btn { justify-content: flex-start; }
.theme-lbl { white-space: nowrap; }

.main {
  flex: 1;
  min-width: 0;
  padding: 24px 30px 64px;
  max-width: 1240px;
}

/* ---------------------------------------------------------------- 页头 / 横幅 */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { font-size: 19px; }
.page-head .desc { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 顶部横幅：纯 CSS 渐变 + 极淡 grid.svg 底纹（不再用位图） */
.banner {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  background: linear-gradient(100deg, var(--panel) 32%, var(--panel-2) 100%);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.banner::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: url("/assets/icons/grid.svg") right -6px top -6px / 30px 30px repeat;
  opacity: 0.06;
}
.banner > * { position: relative; z-index: 1; }
.banner h1 { font-size: 19px; margin-bottom: 3px; }
.banner .desc { color: var(--ink-2); font-size: 12.5px; }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--btn-face); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--paper-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .52; cursor: not-allowed; }
.btn.primary {
  background: var(--accent); border-color: var(--accent-ink); color: var(--on-accent);
}
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.btn.danger:hover { background: var(--danger-hover); }
.btn.sm { min-height: 30px; padding: 4px 9px; font-size: 12px; }
.btn.block { width: 100%; }
.btn .ico { width: 16px; height: 16px; }
.copy-btn { min-height: 26px; padding: 3px 6px; opacity: .75; }
.copy-btn:hover { opacity: 1; }

/* ---------------------------------------------------------------- 表单 */
input, select, textarea {
  width: 100%; min-height: 38px; padding: 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  font: inherit; font-size: 13.5px; outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
label.field { display: block; margin-bottom: 13px; }
label.field .lbl { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }

/* ---------------------------------------------------------------- 卡片 */
.card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 17px;
}
.card h3 {
  font-size: 13px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 7px;
}
.card h3 .ico { width: 17px; height: 17px; color: var(--accent-ink); }
.card h3.mt, .card h3 + h3 { margin-top: 18px; }
.card.flat { background: var(--panel-2); }

.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ---------------------------------------------------------------- 账号卡片 */
.acc-card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 11px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.acc-card:hover {
  border-color: var(--line-2);
  box-shadow: 4px 4px 0 var(--shadow);
}
.acc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acc-name { font-weight: 600; font-size: 14.5px; }
.acc-meta { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.acc-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.acc-ico { width: 22px; height: 22px; opacity: .85; }

/* ---------------------------------------------------------------- 资源进度条 */
.meters { display: flex; flex-direction: column; gap: 7px; }
.meter { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; }
.meter .ico { width: 15px; height: 15px; opacity: .9; }
.meter-track {
  height: 8px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 1px;
  overflow: hidden;
}
.meter-fill { height: 100%; background: var(--accent); transition: width .3s; }
.meter-fill.warn { background: var(--warn); }
.meter-fill.danger { background: var(--danger); }
.meter-val {
  font-size: 11.5px; color: var(--ink-2);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.meter-val.warn { color: var(--warn); font-weight: 600; }
.meter-val.danger { color: var(--danger); font-weight: 600; }

/* 概览页的完整资源面板 */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.res-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.res-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.res-head .ico { width: 17px; height: 17px; color: var(--accent-ink); }
.res-head .res-alloc { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.res-big {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.res-sub { font-size: 11.5px; color: var(--ink-3); }
.res-item .meter { grid-template-columns: 1fr; gap: 0; }
.res-item .meter-track { height: 10px; }
.enforce {
  display: inline-block; font-size: 10.5px; padding: 0 5px;
  border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--ink-3); background: var(--panel);
}
.enforce.soft { border-style: dashed; }

/* ---------------------------------------------------------------- 徽章 / 状态 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 2px; font-size: 11.5px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--panel-2);
}
.badge.napcat { color: var(--bp-napcat-ink); border-color: var(--bp-napcat-line); background: var(--bp-napcat-bg); }
.badge.snowluma { color: var(--bp-snow-ink); border-color: var(--bp-snow-line); background: var(--bp-snow-bg); }
.badge.ok { color: var(--ok); border-color: var(--bp-ok-line); background: var(--bp-ok-bg); }
.badge.warn { color: var(--warn); border-color: var(--bp-warn-line); background: var(--bp-warn-bg); }
.badge.err { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }

.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.state .led { width: 8px; height: 8px; border-radius: 1px; background: var(--ink-3); flex: 0 0 auto; }
.state.on .led { background: var(--ok); }
.state.off .led { background: var(--led-off); }
.state.warn .led { background: var(--warn); }
.state.err .led { background: var(--danger); }

/* ---------------------------------------------------------------- 详情页 */
.detail-head {
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 15px 17px; margin-bottom: 16px;
}
.detail-head .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.detail-head h1 { font-size: 18px; margin: 6px 0 8px; }
.pills { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.tabs {
  display: flex; gap: 2px; margin-bottom: 16px; flex-wrap: nowrap;
  border-bottom: 2px solid var(--line); overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 13px; min-height: 40px;
  border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  background: none; color: var(--ink-2); font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab .ico { width: 15px; height: 15px; opacity: .9; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }

.kv { display: grid; grid-template-columns: 120px 1fr; gap: 7px 14px; font-size: 13px; }
.kv .k { color: var(--ink-3); }
.kv .v { color: var(--ink); word-break: break-word; }
.kv .v.copyable {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 0;
}
.kv .v.copyable .ellipsis { min-width: 0; }

/* 二维码：白底黑码，任何主题都不反色 */
.qr-box {
  display: grid; place-items: center;
  padding: 12px; background: var(--qr-bg);
  border: 2px solid var(--line); border-radius: var(--radius);
  width: fit-content;
}
.qr-box img { width: 224px; height: 224px; image-rendering: pixelated; display: block; }
.qr-empty {
  width: 224px; height: 224px; display: grid; place-items: center;
  color: var(--qr-ink); text-align: center; font-size: 12.5px; padding: 12px;
}

/* 日志 */
.logs {
  background: var(--log-bg); border: 2px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 12px 13px; color: var(--log-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6;
  max-height: 440px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
}

/* 内嵌远程桌面（SnowLuma 唯一保留的 iframe） */
.embed-wrap { position: relative; }
iframe.embed {
  width: 100%; height: 70vh; min-height: 380px;
  border: 2px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--log-bg); display: block;
}
.embed-placeholder {
  border: 2px dashed var(--line-2); border-radius: var(--radius-sm);
  background: var(--panel-2); padding: 26px 18px; text-align: center;
  color: var(--ink-3); font-size: 12.5px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* ---------------------------------------------------------------- 表格 */
.table-wrap { border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--ink-3); font-weight: 500; font-size: 11.5px; background: var(--panel-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel-2); }
td .row { gap: 6px; }

/* ---------------------------------------------------------------- 空态 / 提示 */
.empty {
  text-align: center; padding: 46px 18px;
  color: var(--ink-3); border: 2px dashed var(--line-2);
  border-radius: var(--radius); background: var(--panel-2); font-size: 13px;
}
.empty .ico { width: 34px; height: 34px; opacity: .7; margin-bottom: 10px; }

/* ---------------------------------------------------------------- 弹窗 / toast */
.modal-mask {
  position: fixed; inset: 0; z-index: 60;
  background: var(--mask);
  display: grid; place-items: center; padding: 18px;
  overflow-y: auto;
}
.modal {
  background: var(--panel); border: 2px solid var(--line-2);
  border-radius: var(--radius); padding: 20px;
  width: 100%; max-width: 420px;
  box-shadow: 5px 5px 0 var(--shadow-2);
}
.modal h3 {
  font-size: 14px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
}
.modal h3 .ico { width: 17px; height: 17px; color: var(--accent-ink); }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

#toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 13px; font-size: 12.5px;
  background: var(--panel); border: 2px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-3);
  max-width: 380px; word-break: break-word;
}
.toast .ico { margin-top: 2px; opacity: .95; }
.toast.ok { border-color: var(--bp-ok-line); }
.toast.ok .ico { color: var(--ok); }
.toast.err { border-color: var(--danger-line); color: var(--danger); }
.toast.err .ico { color: var(--danger); }
.toast.warn { border-color: var(--bp-warn-line); }
.toast.warn .ico { color: var(--warn); }

.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; display: inline-block; opacity: .8;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 关于 / 致谢 */
.about-lead { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.about-lead b { color: var(--ink); }
.credit-desc { margin: 0 0 12px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.credit .kv { font-size: 12.5px; }
.credit .kv a { word-break: break-all; }
.credit-role {
  margin-left: auto; font-size: 11px; font-weight: 400;
  color: var(--ink-3); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 0 5px;
}
.about-foot {
  margin: 22px 0 4px; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 12px; text-align: center;
}
/* 关于页的项目品牌图标：PNG / SVG 都用 <img>，不能走 mask（mask 只适合单色图标） */
.brand-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; flex: none; }

/* ---------------------------------------------------------------- 用量（token 统计）
   大数字卡 + 占比条 + 纯内联 SVG 趋势图；颜色全部走变量，深浅主题自动适配 */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); padding: 12px 13px;
}
.kpi-lbl { font-size: 12px; color: var(--ink-3); }
.kpi-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px; font-weight: 600; line-height: 1.25; margin-top: 2px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* 模型 / provider 的横条：条宽按组内最大值归一，右侧给 token 数与占比 */
.bar-list { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: flex; flex-direction: column; gap: 5px; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.bar-head .ellipsis { min-width: 0; }
.bar-head .hint, .bar-head .mono { white-space: nowrap; }

/* 趋势图：SVG 只画线，横轴标签用 HTML 排一行，手机上等比缩小也不会把字压糊 */
.spark-wrap { display: flex; flex-direction: column; gap: 6px; }
.spark { width: 100%; height: auto; display: block; }
.spark-line {
  fill: none; stroke: var(--accent-ink); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.spark-area { fill: var(--accent-soft); stroke: none; }
.spark-axis { stroke: var(--line-2); stroke-width: 1; }
.spark-dot { fill: var(--accent-ink); }
.spark-axis-lbl {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- 日志页
   表格复用 .table-wrap / table / td[data-label]，这里只补详情列的折行与字号 */
.log-detail { word-break: break-word; font-size: 12.5px; }

/* ---------------------------------------------------------------- 管理：默认限额 / 结果弹窗 */
.defaults-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
/* 只读信息弹窗（应用到所有账号的结果 / 删除账号的清理报告 / 账号详情） */
.modal-body { max-height: 58vh; overflow-y: auto; font-size: 12.5px; }

/* 大弹窗：账号详情信息量大，放宽到 920px 并给小节标题一点层级 */
.modal.wide { max-width: 920px; }
.modal.wide .modal-body { max-height: 72vh; }
.modal-body h4 {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin: 18px 0 9px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}
.modal-body h4:first-child { margin-top: 0; }
.modal-body h4 .ico { width: 16px; height: 16px; color: var(--accent-ink); }

/* 「已停机」提示块：红色边框 + 左侧粗线，深浅主题都用变量 */
.danger-block {
  border: 1px solid var(--danger-line);
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.7;
}
.danger-block .hint { color: var(--danger); opacity: .88; }
.danger-block .ico { width: 15px; height: 15px; vertical-align: -0.16em; }

/* 批量生成的创建码：等宽字体 + 自适应多列，方便直接选中复制 */
.codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 12px; max-height: 260px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); padding: 10px 12px; font-size: 12.5px;
}

/* ---------------------------------------------------------------- 管理：宿主机监控
   图标 + 名称 + 进度条 + 读数 四列对齐；网络 / 温度没有「总量」，中间那列留空只给读数 */
.host-list { display: flex; flex-direction: column; gap: 10px; }
.host-item { display: flex; flex-direction: column; gap: 3px; }
.host-line {
  display: grid; grid-template-columns: 16px 40px minmax(24px, 1fr) auto;
  align-items: center; gap: 8px;
}
.host-line .ico { width: 15px; height: 15px; opacity: .9; color: var(--accent-ink); }
.host-lbl { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.host-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.host-val.warn { color: var(--warn); font-weight: 600; }
.host-val.danger { color: var(--danger); font-weight: 600; }
.host-sub { font-size: 11.5px; color: var(--ink-3); padding-left: 24px; word-break: break-word; }

/* SSH 终端配置里的勾选行；勾选框不继承输入框那套 38px 最小高度 */
.check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.check-row input[type="checkbox"] {
  width: 15px; height: 15px; min-height: 0; flex: none; margin: 0;
  accent-color: var(--accent);
}

/* ---------------------------------------------------------------- Web SSH 终端
   大弹窗：宽 980px、终端区 70vh；滚动交给 xterm 自己，外层只保证不被挤破。
   宽度写成 vw 而不是 width:100% —— .modal-mask 是 grid + place-items:center，
   其中 100% 会退回内容的最大宽度，而 xterm 的画布是固定像素宽，会把弹窗撑出屏幕。 */
.modal.terminal { width: min(980px, calc(100vw - 40px)); max-width: 980px; }
.modal.terminal .modal-body { max-height: none; overflow-y: visible; }
.term-host {
  height: 70vh; min-height: 240px;
  background: var(--log-bg); border: 2px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 6px;
  overflow: hidden;              /* xterm 内部自带滚动，外层别出现第二条滚动条 */
}
.term-host .xterm { height: 100%; }
.term-host .xterm-viewport { overflow-y: auto; }
/* 「测试连接」回显的 uname 输出：跟日志区同一套底色 */
.shell-out {
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--log-bg); color: var(--log-ink);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all;
  max-height: 160px; overflow: auto;
}

/* ---------------------------------------------------------------- 工具类 */
.hint { color: var(--ink-3); font-size: 12.5px; }
.hint-block {
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  padding: 9px 11px; font-size: 12.5px; color: var(--ink-2);
  border-radius: var(--radius-sm);
}
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.hidden { display: none !important; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   平板：768 ~ 1023 —— 侧栏收成图标栏
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 68px; flex: 0 0 68px; padding: 14px 8px; align-items: center; }
  .brand { justify-content: center; padding: 4px 0 12px; }
  .brand .brand-txt { display: none; }
  .nav { width: 100%; }
  .nav-item { justify-content: center; padding: 8px 0; }
  .nav-item .nav-lbl, .nav-item .nav-lbl-sm { display: none; }
  .nav-item .ico { width: 22px; height: 22px; }
  .side-foot { width: 100%; align-items: center; }
  .who { display: none; }
  .side-foot .btn { width: 100%; padding: 6px 0; justify-content: center; }
  .theme-lbl { display: none; }   /* 68px 宽放不下字，只留图标 */
  .main { padding: 20px 20px 56px; }
  .kv { grid-template-columns: 108px 1fr; }
}

/* ==========================================================================
   手机：< 768 —— 侧栏变顶部栏，内容单列
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 14px; }

  .shell { flex-direction: column; }

  /* 顶部栏：两行网格（第一行 品牌 + 主题/退出，第二行 等宽导航）
     用 grid 而不是绝对定位，保证任何宽度下都不会横向溢出 */
  .sidebar {
    width: 100%; flex: none; height: auto;
    position: sticky; top: 0; z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand foot"
      "nav nav";
    align-items: center;
    gap: 7px 8px;
    padding: 8px 12px 9px;
    border-right: none; border-bottom: 2px solid var(--line);
    background: var(--bar-bg);
    backdrop-filter: blur(6px);
  }
  .brand {
    grid-area: brand; min-width: 0;
    padding: 0; margin: 0; border-bottom: none;
    font-size: 14px;
  }
  .brand .ico { width: 22px; height: 22px; }
  .brand-txt { display: inline; }
  .side-foot {
    grid-area: foot; position: static;
    margin: 0; padding: 0; border-top: none;
    flex-direction: row; align-items: center; gap: 6px;
  }
  .who { display: none; }
  .side-foot .btn { min-height: 44px; padding: 4px 10px; }

  /* 导航项等宽、横向不溢出：手机上换短标签 */
  .nav {
    grid-area: nav;
    display: flex; flex-direction: row; gap: 6px; width: 100%;
  }
  .nav-item {
    flex: 1 1 0; min-width: 0;
    min-height: 44px; padding: 6px 4px;
    justify-content: center; font-size: 12.5px; gap: 5px;
  }
  .nav-item .ico { width: 18px; height: 18px; }
  /* 管理员有 5 个导航项：手机上一行放不下"图标 + 短标签"，只留文字，靠 on 态描边区分 */
  .nav.dense .nav-item .ico { display: none; }
  .nav.dense .nav-item { font-size: 12.5px; padding: 6px 2px; }
  .nav-lbl { display: none; }
  .nav-lbl-sm {
    display: inline; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  .main { padding: 14px 13px 52px; max-width: none; }

  .banner { padding: 14px; gap: 12px; }
  .banner h1, .page-head h1 { font-size: 17px; }
  .banner .desc, .page-head .desc { font-size: 12.5px; }
  .banner .btn, .page-head .actions, .page-head .actions .btn { width: 100%; }
  .page-head { align-items: stretch; }
  .page-head .actions { width: 100%; }

  .grid.two, .grid.cards { grid-template-columns: 1fr; }
  .grid.cards { gap: 12px; }

  .acc-foot .btn { flex: 1 1 0; }
  .acc-card { padding: 13px; }

  .detail-head .top { flex-direction: column; }
  .detail-head .top .actions, .detail-head .top .actions .btn { width: 100%; }
  .detail-head h1 { font-size: 16.5px; }
  .pills { gap: 6px; }

  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv .k { font-size: 11.5px; margin-top: 7px; }
  .kv .v { margin-bottom: 2px; }

  .res-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .res-item { padding: 9px 10px; }
  .res-big { font-size: 13.5px; }

  /* 用量页：大数字卡单列堆叠、默认限额输入单列，避免横向溢出 */
  .kpi-grid { grid-template-columns: 1fr; gap: 9px; }
  .kpi { padding: 10px 11px; }
  .kpi-val { font-size: 20px; }
  .bar-head { font-size: 12px; }
  .spark-axis-lbl { font-size: 10.5px; }
  .defaults-grid { grid-template-columns: 1fr; }
  .modal-body { max-height: 50vh; }
  /* 趋势图在窄屏上按比例缩，最多 130px 高，别把页面撑太长 */
  .spark { max-height: 130px; }

  .card { padding: 13px; }
  .qr-box img, .qr-empty { width: 190px; height: 190px; }

  .modal { max-width: none; }
  .modal .grid-2 { grid-template-columns: 1fr; }
  .modal .actions { flex-direction: column-reverse; }
  .modal .actions .btn { width: 100%; min-height: 44px; }

  /* 登录页三页签与验证码输入行：窄屏竖排，按钮吃满整行，触摸目标 >=44px */
  .login-tabs .tab { font-size: 12px; padding: 8px 4px; }
  .login-note { font-size: 11.5px; padding-bottom: 12px; margin-bottom: 14px; }
  .input-row { flex-direction: column; align-items: stretch; }
  .input-row > .btn { width: 100%; }
  .modal.wide .modal-body { max-height: 64vh; }
  .codes { grid-template-columns: 1fr; max-height: 220px; }

  /* 宿主机监控：小屏收窄标签列、小字不再缩进，读数靠右也不会横向溢出 */
  .host-line { grid-template-columns: 16px 34px minmax(20px, 1fr) auto; gap: 6px; }
  .host-sub { padding-left: 0; }
  /* SSH 终端：小屏弹窗吃满宽度（宽度算式在 .modal.terminal 里统一处理），终端区矮一点；
     横滚交给 xterm 内部 */
  .term-host { height: 60vh; min-height: 220px; }
  .check-row { min-height: 44px; }

  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px; font-size: 13px; }
  .tab { min-height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 14px; }

  .logs { font-size: 11.5px; max-height: 320px; }
  iframe.embed { height: 62vh; min-height: 300px; }

  #toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { max-width: none; }

  /* 表格 → 卡片式堆叠（配合 td[data-label]） */
  .table-wrap { border: none; background: none; overflow: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    border: 2px solid var(--line); border-radius: var(--radius);
    background: var(--panel); padding: 10px 12px; margin-bottom: 10px;
  }
  tbody tr:hover td { background: transparent; }
  td {
    border-bottom: 1px solid var(--line);
    padding: 7px 0; display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px;
  }
  td:last-child { border-bottom: none; padding-bottom: 0; }
  td::before {
    content: attr(data-label);
    flex: 0 0 74px; color: var(--ink-3); font-size: 11.5px; padding-top: 2px;
  }
  td:not([data-label])::before { display: none; }
  td.actions-cell { padding-top: 9px; }
  td.actions-cell::before { content: none; }
  td.actions-cell .row { flex: 1; }
  td.actions-cell .btn { flex: 1 1 auto; }
  td .row { width: 100%; }
}

/* 超窄屏微调 */
@media (max-width: 400px) {
  .nav-item { font-size: 12px; padding: 6px 3px; gap: 4px; }
  .res-grid { grid-template-columns: 1fr; }
}

/* 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}