/* QoderUnlock 发卡台 —— 视觉复刻 D:\PP\img 三张「租户台」截图。
   ── 所有色值/尺寸都不是猜的：_qwork/ui/probe*.py 逐像素实测，规格书见 _qwork/ui/spec{1,2,3}.md
   ── 页面底 #05070F · 卡片 #101219 · 表头 #171920 · 行分隔 #1C1E25 · 控件底 #1C1E25/边 #303239
   ── 行悬停 #16181E · 卡描边 #26272E · 主字 #E8ECF8 · 次字 #8B93AD · 弱说明 #5F687E · 极弱 #626B85
   ── ok #34D399(底 #152D2B) · accent #6EE7FF(底 #1B2C35) · 主按钮横渐变 #72E1FF→#A293FB + 深色字 #05070F
   ── 几何：容器左右内边距 11 · 顶栏两行共 85(第二行 tab 高 40) · 统计卡 147×83 gap 16
            表头高 34 / 表行高 41 / 主次按钮高 31、29 / 标签 24×24 与胶囊 26 / 下拉 38
   ── 表格**无竖分隔线**；卡片不用阴影，只用 1px 同色系描边。 */
:root{
  /* 表面色直接写实测绝对值（不用 rgba 叠底）：rgba(255,255,255,.045) 叠在 #05070F 上会被
     Chrome 预乘截断成 #0F1119，比参照图的 #101219 每通道低 1；写死绝对值才逐像素一致。 */
  --bg:#05070f;
  --card:#101219;
  --card-2:#1e2027;                    /* 次要按钮底 */
  --card-3:#171920;                    /* 表头底 */
  --hover:#16181e;                     /* 行悬停 */
  --field:#1c1e25;                     /* 输入框/下拉底 */
  --line:#26272e;                      /* 卡描边 */
  --line-2:#1c1e25;                    /* 行分隔 */
  --line-3:#303239;                    /* 控件描边 */
  --line-h:#23252b;                    /* 表头下边线 */
  --tx:#e8ecf8;--tx-2:#8b93ad;--tx-3:#5f687e;--tx-4:#626b85;
  --sub:#647392;                       /* 顶栏副标题那种偏蓝的弱字 */
  --accent:#6ee7ff;--accent-d:#a78bfa;
  --ok:#34d399;--warn:#fbbf24;--bad:#fb7185;--vio:#c4b5fd;
  /* 标签底色是**半透明**的：实测同一枚胶囊在普通行里是 #152D2B、在悬停行里变 #1A3330
     （把 #152D2B 当实色写死就复现不出这个联动）。反解 alpha：
     rgba(52,211,153,.14) over #101219 = #152D2B ✓ / over #16181E = #1A322F ≈ #1A3330 ✓ */
  /* 标签底色用**半透明**：实测同一枚胶囊在普通行是 #152D2B、悬停行变 #1A3330（rgba 叠底才会联动）
     中性标签同理用 灰字色 14% 叠底，不用写死的 --line-2（否则悬停行里它不变、与参照图不一致）*/
  --accent-bg:rgba(110,231,255,.12);--ok-bg:rgba(52,211,153,.14);
  --neutral-bg:rgba(139,147,173,.14);
  --warn-bg:rgba(251,191,36,.13);--bad-bg:rgba(251,113,133,.12);--vio-bg:rgba(196,181,253,.12);
  --orange:#fb923c;--orange-d:#f97316;
  --grad:linear-gradient(90deg,#72e1ff 0%,#a293fb 100%);        /* 主按钮（实测左右两端）*/
  --grad-num:linear-gradient(90deg,#72e0ff 0%,#88bdfd 100%);    /* 指标卡数字的渐变文字 */
  --mono:ui-monospace,"SF Mono",Consolas,"Roboto Mono",monospace;
  --r:12px;   /* 卡圆角：参照图角部偏移曲线 8,6,4,3,2,1,1,0 → 12px */
}
/* 浅色主题是本工程自己加的（参照图只有深色）*/
[data-theme=light]{--bg:#f3ecdc;--card:#fffdf5;--card-2:#f6f0e2;--card-3:#f0e9da;--hover:#f0e9da;
--field:#fffdf7;--line:rgba(122,101,72,.25);--line-2:rgba(122,101,72,.13);--line-3:rgba(122,101,72,.22);
--line-h:rgba(122,101,72,.18);--tx:#3d3527;--tx-2:#6e6250;--tx-3:#8a7a60;--tx-4:#97876c;--sub:#8a7a60;
--accent:#0d7f8c;--accent-d:#7a5cc0;--accent-bg:rgba(13,127,140,.10);--ok:#0f7a52;--ok-bg:rgba(15,122,82,.12);
--warn:#9a6a00;--warn-bg:rgba(154,106,0,.12);--bad:#b23b52;--bad-bg:rgba(178,59,82,.12);
--vio:#6b52b8;--vio-bg:rgba(107,82,184,.12);
--grad:linear-gradient(90deg,#0d7f8c 0%,#7a5cc0 100%);--grad-num:linear-gradient(90deg,#0d7f8c,#3f6fbe);}
[data-theme=light] header{background:var(--bg)}
[data-theme=light] .activation-flow{background:linear-gradient(90deg,rgba(13,127,140,.08),rgba(122,92,192,.08))}
[data-theme=light] select option{background:#fffdf7;color:#3d3527}
[data-theme=light] .modal{background:rgba(40,32,20,.45)}
[data-theme=light] .btn.orange,[data-theme=light] .btn.pri{color:#fffdf7}
[data-theme=light] .tier{background:linear-gradient(135deg,#e2d9c6,#cfc4ab);color:#4a4030}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);min-height:100vh;-webkit-font-smoothing:antialiased;
font:13px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,
"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1440px;margin:0 auto;padding:0 10px 90px}

/* ================= 顶栏（两行：品牌行 + 导航行，合计 85px，实心底色无玻璃效果）================= */
header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid #1c1d25}
.hd{max-width:1440px;margin:0 auto;padding:4px 10px 0;height:36px;display:flex;align-items:center;gap:14px}
/* 顶栏总高 = 36(.hd) + 8(nav margin) + 40(nav) = 84 → 底线正好落在 y84（图 1 实测）*/
.brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.brand h1{font-size:20px;font-weight:700;margin:0;line-height:1;white-space:nowrap;
background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .sub{font-size:13.5px;color:var(--sub);font-weight:400;white-space:nowrap}
.nav{max-width:1440px;margin:8px auto 0;padding:0 10px;height:40px;display:flex;align-items:center;gap:8px;
overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.tab{height:40px;padding:0 16px;cursor:pointer;font-size:13px;font-weight:500;color:var(--tx-2);
white-space:nowrap;border:1px solid transparent;border-radius:6px;user-select:none;
display:inline-flex;align-items:center;gap:5px}
.tab .ti{width:15px;height:15px;flex:none;display:inline-block;color:var(--tx-2)}
.tab .ti svg{width:15px;height:15px;display:block}
.tab:hover{color:var(--tx)}
.tab.on{background:var(--card);border-color:var(--line);color:var(--accent);font-weight:600}
.tab.on .ti{color:#eff1f2}   /* 激活态图标为白色（实测 #EFF1F2）*/
.grow{flex:1}
.hdr-right{display:flex;align-items:center;gap:15px}
.tier{display:inline-flex;align-items:center;height:26px;padding:0 15px;border-radius:8px;font-size:12.5px;
font-weight:500;color:#fff;background:linear-gradient(135deg,#373c49 0%,#21242d 100%)}
.uname{font-size:13px;color:var(--tx-2)}
.hdbtn{height:27px;padding:0 10px;border:0;border-radius:6px;background:#14161d;color:var(--tx);
font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.hdbtn:hover{background:var(--card-2)}
.hdbtn .dot{width:12px;height:12px;border-radius:50%;background:#fff;flex:none}
.exita{font-size:13px;color:var(--tx-4);text-decoration:underline;cursor:pointer;background:none;border:0;
font-family:inherit;padding:0}
.exita:hover{color:var(--tx-2)}

/* ================= 卡片 ================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:16px 0;overflow:hidden}
.stats+.activation-flow{margin-top:14px}
section[data-panel]>.card:first-child,section[data-panel]>.stats:first-child{margin-top:0}
.card>.ch{padding:12px 18px;border-bottom:1px solid var(--line-2);
/* 激活码卡：标题行与筛选工具栏合成一个卡头（图 3 的卡头 98px 内部没有分隔线）*/
.card>.ch.nobd{border-bottom:0;padding-bottom:6px}display:flex;align-items:center;
gap:10px;flex-wrap:wrap}
.card>.ch h2{font-size:14px;margin:0;font-weight:600}   /* 实测：参照卡标题 4 字墨宽 57px → 14px */
.card>.ch .sub,.sub2{color:var(--tx-3);font-size:13px}
.card>.cb{padding:16px 18px}

/* ================= 统计卡（3 张，147×83，只有 数字+标签，没有图标）================= */
/* 图 1 里统计卡是紧贴顶栏底线下的（卡顶 y85 = 底线 y84 + 1），所以上边距为 0 */
.stats{display:flex;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 19px;
min-width:150px;height:84px;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center}
.stat .n{font-size:24px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;
letter-spacing:-.2px}
.stat .n.g{background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lb{font-size:13px;color:var(--tx-3);margin-top:6px;font-weight:400}

/* ================= 横幅卡（左侧渐变按钮 + 右侧说明）================= */
.banner{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px 18px;border-radius:var(--r);   /* 参照横幅卡 67 高 = 16+34+16 */
border:1px solid var(--line);margin:0 0 14px;background:var(--card)}
.banner .tip{font-size:13px;color:var(--tx-3)}
.banner .tip b{color:var(--tx-2);font-weight:500}
.activation-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r);
border:1px solid var(--line);margin:0 0 14px;background:linear-gradient(90deg,var(--accent-bg),var(--vio-bg));color:var(--tx-2)}
.activation-flow b{color:var(--accent);font-weight:600;margin-right:6px}
.activation-flow i{font-style:normal;color:var(--tx-4)}

/* ================= 按钮（主/次 31，小 29，微 26；圆角 4–5）================= */
.btn{height:28px;padding:0 14px;border:1px solid var(--line-3);border-radius:5px;background:var(--card-2);
color:var(--tx);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;display:inline-flex;
align-items:center;gap:6px;justify-content:center;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{height:34px;border-radius:6px;background:var(--grad);   /* 参照实测 34 */border-color:transparent;color:#05070f;font-weight:600}
.btn.pri:hover{filter:brightness(1.06);color:#05070f}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#05070f;font-weight:600;
box-shadow:0 0 12px rgba(251,146,60,.45)}   /* 参照图 3：橙按钮下缘有一圈橙色辉光 */
.btn.orange:hover{background:var(--orange-d);border-color:var(--orange-d);color:#05070f}
.btn.ok{border-color:var(--ok);color:var(--ok)}
.btn.ok:hover{background:var(--ok-bg)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{height:28px;padding:0 11px;font-size:13px;border-radius:4px}
.btn.xs{height:26px;padding:0 9px;font-size:12px;border-radius:4px}
.btn.wide{min-width:164px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-3);color:var(--tx)}
.badge-n{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 5px;border-radius:999px;
background:var(--orange);color:#05070f;font-size:11px;font-weight:700;text-align:center}

/* ================= 标签：类型=24×24 方块，状态=26 高胶囊 ================= */
.chip-sq{width:24px;height:24px;border-radius:4px;background:var(--accent-bg);color:var(--accent);
display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.chip-sq.d{background:var(--vio-bg);color:var(--vio)}
.chip-sq.n{background:var(--warn-bg);color:var(--warn)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;
font-weight:600;white-space:nowrap}
.pill.tiny{height:22px;padding:0 8px;font-size:12px}
.pill.stock,.pill.unsynced,.pill.neutral{color:var(--tx-2);background:var(--neutral-bg)}
.pill.bound,.pill.active,.pill.accent{color:var(--accent);background:var(--accent-bg)}
.pill.redeemed,.pill.ok,.pill.synced{color:var(--ok);background:var(--ok-bg)}
.pill.recycled,.pill.fail,.pill.disabled{color:var(--bad);background:var(--bad-bg)}
.pill.expired,.pill.bound-only{color:var(--warn);background:var(--warn-bg)}
.pill.vio{color:var(--vio);background:var(--vio-bg)}
.badge-result{font-weight:600}
.badge-result.ok{color:var(--ok)}
.badge-result.fail{color:var(--bad)}

/* ================= 表格（表头 34 / 行 41 / 无竖线）================= */
table{width:100%;border-collapse:collapse;font-size:13px}
/* 行高不写死：参照图三张图行高分别是 41/37/44，而表头都是 34 —— 行高是内容 + padding 撑出来的
   （图 1 行里有 24px 类型方块 → 41；图 3 有 26px 按钮 → 44；图 2 只有文字 → 37）
   这里换成同一套机制：本工程 42 / 44 / 35.5，误差 ≤2px */
th,td{padding:9px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
th{height:35px;padding-top:0;padding-bottom:0}   /* 34 纯色带 + 1px 底线 = 图 1/2/3 实测 */
th{height:35px;background:var(--card-3);color:var(--tx-2);font-size:12.5px;font-weight:600;white-space:nowrap;
border-bottom:1px solid var(--line-h)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--hover)}
td.nw,th.nw{white-space:nowrap}
.mono{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.dim{color:var(--tx-4)}
.scrollx{overflow-x:auto}
.scrollx table{min-width:640px}
/* 号池表用参照图的列宽比例（实测 99/137/98/103/89/155/201/307 = 1189）*/
#poolTable{table-layout:fixed}
#poolTable td{padding-top:8px;padding-bottom:8px}   /* 图 1 号池行步进 41 = 1+24+2×8（th 不受影响，保持 35）*/
#poolTable th,#poolTable td{overflow:hidden;text-overflow:ellipsis}
#poolTable col.c1{width:18%}#poolTable col.c2{width:10%}#poolTable col.c3{width:10%}
#poolTable col.c4{width:8%}#poolTable col.c5{width:8%}#poolTable col.c6{width:10%}
#poolTable col.c7{width:18%}#poolTable col.c8{width:18%}
/* 兑换码表固定布局，保证最右操作按钮不会被裁掉。 */
#actTable{table-layout:fixed}
/* nowrap 必须写：只有 overflow:hidden+ellipsis 而没 nowrap 时，26 字符机器码会换行 → 行高 45 变 58（真踩到过）*/
#actTable th,#actTable td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#actTable col.k1{width:21%}#actTable col.k2{width:7%}#actTable col.k3{width:6%}
#actTable col.k4{width:7%}#actTable col.k5{width:8%}#actTable col.k6{width:14%}
#actTable col.k7{width:15%}#actTable col.k8{width:15%}#actTable col.k9{width:7%}
/* 码后面那枚独立小按钮（参照图 3：(104,140)×22 的方按钮）*/
.iconbtn{width:36px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line-3);border-radius:4px;background:var(--card-2);color:var(--tx-2);
cursor:pointer;font-family:inherit;flex:none}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:12px;height:12px}
/* 带放大镜的搜索框（参照图 3 搜索框左侧有一枚放大镜）*/
.sbox{position:relative;display:inline-flex;align-items:center}
.sbox svg{position:absolute;left:9px;width:13px;height:13px;color:var(--tx-3);pointer-events:none}
.sbox input{padding-left:28px;min-width:210px}
/* 卡头右侧的「更多选项」折叠链接（不占正文一整行，保证卡底停在主按钮下方）*/
.foldlink{font-size:12.5px;color:var(--tx-3);cursor:pointer;user-select:none;white-space:nowrap}
.foldlink:hover{color:var(--accent)}
.foldlink .arw{font-size:10px}

/* ================= 表单（下拉/输入 38 高、4 圆角、底 #1C1E25 边 #303239）================= */
input[type=text],input[type=password],input[type=number],select,textarea{height:36px;padding:0 12px;
border:1px solid var(--line-3);border-radius:4px;font-size:13px;font-family:inherit;outline:none;
background:var(--field);color:var(--tx)}
textarea{height:auto;min-height:120px;padding:10px 12px;font-family:var(--mono);font-size:12px;line-height:1.6;
width:100%}
input::placeholder,textarea::placeholder{color:var(--tx-3)}
input:focus,select:focus,textarea:focus{border-color:var(--accent-d);box-shadow:0 0 0 2px rgba(167,139,250,.18)}
select option{background:#0b0f1d;color:var(--tx)}
input[type=checkbox]{accent-color:var(--accent-d);width:15px;height:15px;cursor:pointer;vertical-align:middle}
label.f{display:block;font-size:13px;color:var(--tx-2);font-weight:500;margin:10px 0 5px}
label.row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 18px;
border-bottom:1px solid var(--line-2)}
/* 工具栏里的控件比表单里的矮一档（参照图工具栏控件实测 32 高）*/
.toolbar input[type=text],.toolbar select{height:32px}
select.sm{height:36px;padding:0 10px;font-size:13px}   /* 参照图里下拉一律 36 高（号池卡头实测 y491-526）*/
#p_kind{width:96px}#a_kind{width:104px}
.btn.big{height:36px;border-radius:6px;padding:0 16px;font-size:13.5px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filterrow>.f{margin-right:14px}   /* 参照：标签与下拉间距 ≈19px */
.hint{font-size:13px;color:var(--tx-3);margin-top:6px;line-height:1.7}
.msg{padding:8px 12px;border-radius:4px;font-size:13px;margin-top:10px;display:none}
.msg.err{display:block;background:var(--bad-bg);color:var(--bad)}
.msg.ok{display:block;background:var(--ok-bg);color:var(--ok)}

.issue-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;align-items:end}
.issue-grid label.f{margin-top:0}
.issue-summary{margin-top:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;
background:var(--bg);color:var(--tx-2)}
.issue-actions{margin-top:12px}
.issue-actions .foldlink{margin-left:auto}
.code-scopes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 18px 10px;border-bottom:1px solid var(--line-2)}
.code-scopes .scope{height:30px;padding:0 12px;border:1px solid var(--line-3);border-radius:999px;
background:var(--card-2);color:var(--tx-2);font-family:inherit;cursor:pointer}
.code-scopes .scope.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.code-scopes .scope b{margin-left:4px;font-family:var(--mono)}
.code-scopes>span{color:var(--tx-3);font-size:12.5px;margin-left:4px}

/* 开关（图 3「脱敏展示」：外面套一层 88×28 的胶囊容器）*/
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:12.5px;
height:28px;padding:0 10px 0 5px;border:1px solid var(--line-3);border-radius:999px;background:var(--card-2)}
.switch input{display:none}
.switch .track{width:36px;height:20px;border-radius:999px;background:var(--line-3);position:relative;flex:none}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:#fff;opacity:.72}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{left:18px;opacity:1;background:#05070f}

/* ================= 分页（贴左下角：「‹ 上一页 | 第 1 / 8 页 · 共 77 条 | 下一页 ›」）================= */
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-start;padding:10px 18px;
color:var(--tx-3);font-size:13px;border-top:1px solid var(--line-2);min-height:41px}
.pager .pinfo{font-family:var(--mono);font-size:12.5px}
.pager:empty{display:none}
.pbtn{height:28px;padding:0 8px;border:1px solid var(--line-3);border-radius:4px;background:var(--card-2);
color:var(--tx);font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.pbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pbtn:disabled{background:var(--card-3);color:var(--tx-4);border-color:var(--line-2);cursor:not-allowed}

/* 查询区一行 = 标签列 + 控件（参照图 2：标签宽 75，控件统一从 x≈97 起）*/
.qrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.qrow:last-child{margin-bottom:0}
.qrow .ql{width:75px;flex:none;font-size:13px;color:var(--tx-2)}
.qrow input[type=text]{flex:1;min-width:200px}

/* ================= 折叠区 / 条目勾选区 / 图表 ================= */
.foldhead{display:flex;align-items:center;gap:8px;padding:10px 0;cursor:pointer;user-select:none;
color:var(--tx-2);font-size:13px;font-weight:500}
.foldhead:hover{color:var(--tx)}
.foldhead .arw{font-size:10px;color:var(--tx-3)}
.formhr{height:1px;background:var(--line-2);margin:14px 0}
.entries{border:1px solid var(--line-2);border-radius:4px;background:var(--bg);max-height:140px;overflow:auto}
/* 条目区高度随条目数长（参照图只有一两个条目，卡才 193 高）；这里封顶 140 并滚动 */
.entries label{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13px;cursor:pointer;
border-bottom:1px solid var(--line-2)}
.entries label:last-child{border-bottom:0}
.entries label:hover{background:var(--hover)}
.entries .meta{color:var(--tx-3);font-size:12.5px}
.entries .mono{margin-left:auto;color:var(--tx-2)}
.empty{padding:10px 0;font-size:13px;color:var(--tx-3)}
/* 参照图 2 里「动作」列是灰字（带下划线）。本工程的动作就是事件名、点不了，
   所以只给灰字不给可点感的实下划线，仅用极淡的虚下划线标记这是「动作」列 */
.alink{color:var(--tx-2);border-bottom:1px dashed rgba(139,147,173,.35)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding:6px 0}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;align-items:center;min-width:14px}
.bars .b i{display:block;width:100%;background:var(--grad);border-radius:3px 3px 0 0}
.bars .b u{display:block;width:100%;background:var(--bad-bg);border-radius:0 0 3px 3px}
.bars .b em{font-style:normal;font-size:10px;color:var(--tx-3);margin-top:4px}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--tx-3);margin-top:4px}
.legend b{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:4px}
.trendrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.trendrow:last-child{border-bottom:0}
.codebox{background:var(--bg);border:1px dashed var(--line);border-radius:4px;padding:10px 12px;
max-height:280px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:2}
.codebox .c{display:block;cursor:pointer}
.codebox .c:hover{color:var(--accent)}
.kpi{display:flex;gap:12px;flex-wrap:wrap;margin:0;padding:0 18px 16px}
.kpi>div{background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:12px 16px;
min-width:132px;flex:1}
.kpi .n{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .n.gold{background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .l{font-size:12.5px;color:var(--tx-3);margin-top:2px}
.copycode{cursor:pointer;border-bottom:1px dashed transparent}
.copycode:hover{color:var(--accent);border-bottom-color:var(--accent)}
.selinfo{font-size:13px;color:var(--tx-2)}

/* ================= 弹窗 / 提示 ================= */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;
z-index:50;padding:20px}
.modal.on{display:flex}
.modal .box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px;width:100%;
max-width:460px}
.modal h3{margin:0 0 6px;font-size:16px}
.toast{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;z-index:60;
align-items:flex-end}
.toast div{padding:9px 14px;border-radius:6px;font-size:13px;font-weight:500;background:var(--card-2);
border:1px solid var(--line);animation:tin .18s ease;max-width:min(420px,80vw)}
.toast div.ok{border-color:var(--ok);color:var(--ok)}
.toast div.err{border-color:var(--bad);color:var(--bad)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================= 登录 ================= */
.login{max-width:400px;margin:11vh auto}
.login .cb{padding:26px}
.login h2{margin:0 0 4px;font-size:20px;color:var(--accent)}

@media(max-width:860px){
  .hd{height:auto;flex-wrap:wrap;padding:8px 11px;gap:8px}
  .nav{order:3;width:100%;padding-top:4px}
  .brand .sub{display:none}
  .hdr-right{gap:8px}
  .issue-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
}