/* gost-ext 面板样式
 *
 * 四套主题共用一组变量，切换只换变量不换结构。
 * 运维界面的第一要务仍然是「一眼看出有没有事」——状态色饱和度拉满，
 * 其余一律压低，不让装饰抢走注意力。
 */

/* ═══════════════ 主题 ═══════════════ */
:root,[data-theme="dark"]{
  --bg:#0d0e12; --glow:rgba(91,140,255,.10);
  --side:rgba(16,18,24,.86); --head:rgba(16,18,24,.78);
  --card:#161922; --card2:#1c2029; --hover:#1f2430;
  --line:#242833; --line2:#333949;
  --t1:#e8eaf0; --t2:#a9b0c0; --t3:#6b7385;
  --primary:#5b8cff; --primary2:#8b5cf6; --on-primary:#fff;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --map:#0a0f1c;
  --sh:0 6px 24px rgba(0,0,0,.36);
  --sh-lg:0 18px 48px rgba(0,0,0,.5);
}
[data-theme="light"]{
  --bg:#f5f7fc; --glow:rgba(59,108,246,.09);
  --side:rgba(255,255,255,.88); --head:rgba(255,255,255,.82);
  --card:#fff; --card2:#f3f5fb; --hover:#eef1f9;
  --line:#e5e8f0; --line2:#cdd3e2;
  --t1:#141824; --t2:#4c556b; --t3:#8891a6;
  --primary:#3b6cf6; --primary2:#7c5cf6; --on-primary:#fff;
  --ok:#0ea472; --warn:#d98207; --bad:#e04a52;
  --map:#dfe6f2;
  --sh:0 4px 16px rgba(23,33,71,.07);
  --sh-lg:0 16px 44px rgba(23,33,71,.14);
}
[data-theme="blue"]{
  --bg:#061525; --glow:rgba(56,189,248,.13);
  --side:rgba(9,26,45,.86); --head:rgba(9,26,45,.78);
  --card:#0c2036; --card2:#123047; --hover:#163a56;
  --line:#1b3f5c; --line2:#28587c;
  --t1:#e6f1ff; --t2:#9fbcd8; --t3:#6a89a6;
  --primary:#38bdf8; --primary2:#22d3ee; --on-primary:#04263a;
  --ok:#2dd4bf; --warn:#fbbf24; --bad:#fb7185;
  --map:#04121f;
  --sh:0 6px 24px rgba(0,10,20,.45);
  --sh-lg:0 18px 48px rgba(0,10,20,.6);
}
[data-theme="purple"]{
  --bg:#110d1c; --glow:rgba(167,139,250,.13);
  --side:rgba(23,18,38,.86); --head:rgba(23,18,38,.78);
  --card:#1c1730; --card2:#251f3f; --hover:#2c2549;
  --line:#322a52; --line2:#453a70;
  --t1:#efe9ff; --t2:#b8aede; --t3:#8479ad;
  --primary:#a78bfa; --primary2:#f472b6; --on-primary:#1a1030;
  --ok:#4ade80; --warn:#fbbf24; --bad:#fb7185;
  --map:#0c0817;
  --sh:0 6px 24px rgba(0,0,0,.4);
  --sh-lg:0 18px 48px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--t1);background:var(--bg);
  background-image:
    radial-gradient(1000px 520px at 12% -8%,var(--glow),transparent 62%),
    radial-gradient(760px 420px at 92% 4%,var(--glow),transparent 58%);
  background-attachment:fixed;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",
       "PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--primary);text-decoration:none;cursor:pointer}
.hidden{display:none!important}
.mono,code{font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  font-variant-ligatures:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--t3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ═══════════════ 登录 ═══════════════ */
#login{display:flex;align-items:center;justify-content:center;height:100vh;padding:24px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:40px;width:390px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.lcard:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--primary2),transparent)}
.lcard .logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lcard h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.3px}
.lcard p{margin:0 0 28px;color:var(--t3);font-size:12.5px}

/* ═══════════════ 表单 ═══════════════ */
input,select,textarea{width:100%;padding:10px 13px;background:var(--card2);
  border:1px solid var(--line);border-radius:9px;color:var(--t1);
  font-size:14px;font-family:inherit;transition:border-color .16s,box-shadow .16s}
input:hover,select:hover{border-color:var(--line2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
label{display:block;font-size:12px;color:var(--t3);margin:16px 0 7px;font-weight:500}
label:first-child{margin-top:0}
button{padding:9px 17px;border:0;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-family:inherit;font-weight:500;white-space:nowrap;
  color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  transition:transform .14s,box-shadow .14s,opacity .14s}
button:hover{transform:translateY(-1px);
  box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 34%,transparent)}
button:active{transform:none}
button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--t2)}
button.ghost:hover{background:var(--hover);border-color:var(--line2);color:var(--t1);
  box-shadow:none}
button.danger{background:color-mix(in srgb,var(--bad) 16%,transparent);
  color:var(--bad);border:1px solid transparent}
button.danger:hover{background:var(--bad);color:#fff;box-shadow:none}
button.wide{width:100%}
button.sm{padding:5px 12px;font-size:12px;border-radius:7px}
.err{color:var(--bad);font-size:12px;min-height:18px;margin-bottom:8px}

/* ═══════════════ 布局 ═══════════════ */
#app{display:flex;height:100vh;overflow:hidden}
aside{width:228px;flex:0 0 228px;background:var(--side);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width .2s cubic-bezier(.4,0,.2,1),flex-basis .2s cubic-bezier(.4,0,.2,1)}
aside.mini{width:68px;flex-basis:68px}
.brand{display:flex;align-items:center;gap:11px;padding:0 20px;height:62px;
  flex:0 0 62px;overflow:hidden}
.brand b{font-size:16px;font-weight:650;letter-spacing:-.2px;white-space:nowrap}
.brand .bi{flex:0 0 30px;height:30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 3px 12px color-mix(in srgb,var(--primary) 40%,transparent)}
aside.mini .brand span,aside.mini .nav-t,aside.mini .navgrp{display:none}
nav{flex:1;padding:6px 10px;overflow-y:auto}
.navgrp{font-size:10.5px;color:var(--t3);padding:16px 12px 7px;
  letter-spacing:1.1px;text-transform:uppercase;font-weight:600}
nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--t2);font-size:13.5px;margin-bottom:3px;white-space:nowrap;
  position:relative;transition:background .15s,color .15s}
nav a:hover{background:var(--hover);color:var(--t1)}
nav a.on{color:var(--on-primary);font-weight:550;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 32%,transparent)}
nav a svg{flex:0 0 17px}
.side-f{padding:12px;border-top:1px solid var(--line)}
.side-f button{width:100%;padding:7px}

main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
header{height:62px;flex:0 0 62px;display:flex;align-items:center;gap:14px;
  padding:0 22px;border-bottom:1px solid var(--line);background:var(--head);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:20}
header h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.2px}
header .sub{color:var(--t3);font-size:12px}
header .sp{flex:1}
#view{flex:1;overflow-y:auto;padding:22px 24px 48px;scroll-behavior:smooth}

/* ═══════════════ 右上角用户菜单 ═══════════════ */
.avatar{width:30px;height:30px;border-radius:50%;color:#fff;flex:0 0 30px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 2px 10px color-mix(in srgb,var(--primary) 34%,transparent)}
.avatar.lg{width:42px;height:42px;flex:0 0 42px;font-size:17px}
.umenu{position:relative}
.ubtn{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;
  background:transparent;border:1px solid transparent;border-radius:24px;
  color:var(--t2);font-size:13px;box-shadow:none}
.ubtn:hover{background:var(--hover);border-color:var(--line);transform:none;box-shadow:none}
.ubtn .cv{transition:transform .18s}
.umenu.open .ubtn{background:var(--hover);border-color:var(--line)}
.umenu.open .cv{transform:rotate(180deg)}
.udrop{position:absolute;top:calc(100% + 9px);right:0;width:286px;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--sh-lg);overflow:hidden;z-index:60;
  animation:drop .16s cubic-bezier(.2,.9,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-8px) scale(.97)}
                to{opacity:1;transform:none}}
.uhead{display:flex;align-items:center;gap:12px;padding:16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--primary) 12%,transparent),transparent)}
.uhead b{display:block;font-size:14px}
.uhead span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
.usec{padding:12px 14px;border-bottom:1px solid var(--line)}
.ulbl{font-size:10.5px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;
  font-weight:600;margin-bottom:9px}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thc{padding:0;height:auto;background:transparent;border:0;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.thc:hover{transform:none;box-shadow:none}
.thc i{width:100%;height:30px;border-radius:8px;border:2px solid transparent;
  transition:border-color .15s,transform .15s;display:block}
.thc:hover i{transform:translateY(-2px)}
.thc.on i{border-color:var(--primary)}
.thc span{font-size:10.5px;color:var(--t3)}
.thc.on span{color:var(--t1)}
.sw-dark{background:linear-gradient(135deg,#0d0e12 42%,#5b8cff)}
.sw-light{background:linear-gradient(135deg,#f5f7fc 42%,#3b6cf6)}
.sw-blue{background:linear-gradient(135deg,#061525 42%,#38bdf8)}
.sw-purple{background:linear-gradient(135deg,#110d1c 42%,#a78bfa)}
.uitem{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;
  font-size:13.5px;color:var(--t1);transition:background .13s}
.uitem:hover{background:var(--hover)}
.uitem.d{color:var(--bad)}
.uitem svg{flex:0 0 16px;color:var(--t3)}
.uitem.d svg{color:var(--bad)}

/* ═══════════════ 卡片 ═══════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:18px;overflow:hidden;box-shadow:var(--sh)}
.card>.hd{display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line)}
.card>.hd h3{margin:0;font-size:14.5px;font-weight:650;letter-spacing:-.1px}
.card>.hd .desc{color:var(--t3);font-size:12px}
.card>.hd .sp{flex:1}
.card>.bd{padding:20px}
.card>.bd.flush{padding:0}
.note{color:var(--t3);font-size:12px;line-height:1.9;margin:14px 0 0}
.note:first-child{margin-top:0}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:18px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;position:relative;overflow:hidden;box-shadow:var(--sh);
  transition:transform .18s,box-shadow .18s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--primary),var(--primary2))}
.stat .l{font-size:12px;color:var(--t3);margin-bottom:8px;font-weight:500}
.stat .n{font-size:31px;font-weight:680;line-height:1.05;letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.stat .x{font-size:11.5px;color:var(--t3);margin-top:6px}

/* ═══════════════ 表格 ═══════════════ */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 18px;text-align:left;font-size:13px;
  border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--card2);color:var(--t3);font-weight:600;font-size:11px;
  letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;
  position:sticky;top:0;z-index:1}
tbody tr{transition:background .13s}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
td .s{display:block;font-size:11px;color:var(--t3);margin-top:3px}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
  vertical-align:1px;position:relative}
.dot.up{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.dot.up:after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--ok);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.dot.down{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
.dot.stale,.dot.unknown{background:var(--t3);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--t3) 20%,transparent)}
.tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11.5px;
  line-height:18px;white-space:nowrap;font-weight:500}
.tag.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.tag.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.tag.dim{background:var(--card2);color:var(--t3)}
.tag.pri{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:var(--card2);border:1px solid var(--line);border-radius:6px;
  padding:2px 8px;font-size:11px;font-family:ui-monospace,monospace;color:var(--t2)}
.chip.add{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);
  border-color:transparent}
.chip.del{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);
  border-color:transparent}
.lat{font-family:ui-monospace,monospace;font-size:13px;font-variant-numeric:tabular-nums}
.bar{height:4px;border-radius:3px;background:var(--line);margin-top:6px;
  overflow:hidden;width:80px}
.bar i{display:block;height:100%;border-radius:3px;transition:width .4s}

/* ═══════════════ 视图切换 ═══════════════ */
.segbar{display:inline-flex;gap:3px;padding:4px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;margin-bottom:18px;
  box-shadow:var(--sh)}
.seg{background:transparent;border:0;color:var(--t2);padding:7px 20px;
  border-radius:9px;font-size:13.5px;box-shadow:none}
.seg:hover{background:var(--hover);color:var(--t1);transform:none;box-shadow:none}
.seg.on{color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 3px 12px color-mix(in srgb,var(--primary) 30%,transparent)}

/* ═══════════════ 2D 链路地图 ═══════════════ */
.map-card{margin-bottom:18px}
.map-wrap{position:relative;display:flex;background:var(--map)}
#map{flex:1;min-width:0;height:560px;background:var(--map);z-index:1}
.map-card:fullscreen{border-radius:0;margin:0;height:100vh;display:flex;
  flex-direction:column;background:var(--bg)}
.map-card:fullscreen .map-wrap{flex:1}
.map-card:fullscreen #map{height:100%}
.tile-light{filter:brightness(1.08) saturate(.92)}
.leaflet-container{background:var(--map);font:inherit}
.leaflet-popup-content-wrapper,.leaflet-tooltip{background:var(--card);
  color:var(--t1);border:1px solid var(--line2);border-radius:10px;
  box-shadow:var(--sh-lg);font-size:12px}
.leaflet-popup-content{margin:11px 14px;line-height:1.7}
.leaflet-popup-tip{background:var(--card);border:1px solid var(--line2)}
.leaflet-tooltip{padding:7px 11px}.leaflet-tooltip:before{display:none}
.leaflet-bar a{background:var(--card);color:var(--t1);border-color:var(--line2)}
.leaflet-bar a:hover{background:var(--hover)}
.mk{border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 4px rgba(0,0,0,.3);
  position:relative}
.mk.site-up{background:var(--ok)}
.mk.site-down{background:var(--bad)}
.mk.site-warn{background:var(--warn)}
.mk.master{background:var(--primary2)}
/* gost 网关：蓝色、加大、持续脉冲光环，强调它是流量发起方 */
.mk.gw{background:#5b8cff;border-width:3px;
  box-shadow:0 0 0 4px rgba(91,140,255,.28),0 0 16px rgba(91,140,255,.6)}
.mk.gw:after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid #5b8cff;animation:gwring 2s ease-out infinite}
.mk.gw.foc{box-shadow:0 0 0 5px rgba(91,140,255,.42),0 0 26px rgba(91,140,255,.95)}
@keyframes gwring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.4);opacity:0}}
/* 流动虚线：dashoffset 动画制造「从网关流向机房」的方向感 */
.flow{animation:flowdash 1s linear infinite}
.flow.down{animation-duration:2.6s;opacity:.6}
@keyframes flowdash{to{stroke-dashoffset:-16}}
.latchip{background:rgba(0,0,0,.62);color:#fff;font-size:10px;padding:1px 6px;
  border-radius:9px;text-align:center;white-space:nowrap;
  font-family:ui-monospace,monospace}

/* 右侧网关列表：这套系统的中心是 gost 节点，把它固定在视野里 */
.gpanel{width:250px;flex:0 0 250px;border-left:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow-y:auto;display:flex;flex-direction:column;z-index:2}
.gp-h{font-size:10.5px;color:var(--t3);letter-spacing:1.1px;text-transform:uppercase;
  font-weight:600;padding:15px 16px 9px}
.gp-i{margin:0 10px 9px;padding:12px 13px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--card2);transition:.15s}
.gp-i:hover{border-color:var(--line2);transform:translateX(-2px)}
.gp-i.on{border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 11%,var(--card2))}
.gp-t{display:flex;align-items:center;font-size:13px}
.gp-s{font-size:11px;color:var(--t3);margin-top:3px}
.gp-l{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.gp-l .tag{font-size:10.5px;padding:1px 7px;line-height:16px}
.gp-f{margin-top:auto;padding:12px}

.mlegend{display:flex;gap:18px;flex-wrap:wrap;padding:13px 20px;
  border-top:1px solid var(--line);font-size:12px;color:var(--t3);align-items:center}
.mlegend i{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:7px;vertical-align:0}
.mlegend .ln{display:inline-block;width:22px;height:2px;margin-right:7px;
  vertical-align:4px;border-radius:2px}

/* ═══════════════ 线路明细 ═══════════════ */
/* 行高按 5 条网段固定，行数不同也不会一行高一行矮 */
.linktb td{vertical-align:top;padding-top:14px;padding-bottom:14px}
.linktb tr.lrow{height:150px}
.linktb td.gw{border-right:1px solid var(--line);
  background:color-mix(in srgb,var(--primary) 5%,transparent);vertical-align:top}
.linktb td.gw b{font-size:13.5px}
.nets{cursor:default}
.net{display:block;font-family:ui-monospace,monospace;font-size:11.5px;
  color:var(--t2);line-height:20px;white-space:nowrap}
.net.more{color:var(--primary);font-weight:600;cursor:help}
.netpop{width:auto;min-width:280px;max-width:460px}
.netgrid{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:340px;overflow:auto}
.netgrid .net{line-height:19px}
.riskn{width:100%;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11px;color:var(--warn)}

/* ═══════════════ 弹窗 ═══════════════ */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
  align-items:center;justify-content:center;z-index:900;padding:26px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:fade .16s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.box{background:var(--card);border:1px solid var(--line2);border-radius:16px;
  width:540px;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:var(--sh-lg);animation:rise .2s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.box.wide{width:min(1180px,94vw)}
.box.full{width:min(1180px,94vw);height:90vh}
.box>h3{margin:0;padding:18px 24px;font-size:15.5px;font-weight:650;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.box>.bd{padding:22px 24px;overflow:auto;flex:1 1 auto;min-height:0}
.box>.ft{padding:15px 24px;border-top:1px solid var(--line);display:flex;
  gap:10px;justify-content:flex-end;align-items:center;flex:0 0 auto}
.box>.ft .sp{flex:1}
pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:18px;margin:0;overflow:auto;font-size:12.5px;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;tab-size:2;height:100%}
.kv{display:grid;grid-template-columns:124px 1fr;gap:13px 18px;margin:0}
.kv dt{color:var(--t3);font-size:12px;padding-top:1px}
.kv dd{margin:0;font-size:13px;word-break:break-all}
.warnbox{background:color-mix(in srgb,var(--warn) 10%,transparent);
  border-left:3px solid var(--warn);border-radius:8px;padding:13px 16px;
  font-size:12.5px;color:var(--warn);line-height:1.85;margin-bottom:18px}
.actions{display:flex;flex-direction:column;gap:8px}

/* ═══════════════ 开关 ═══════════════ */
.sw{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 40px}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:var(--line2);border-radius:22px;
  cursor:pointer;transition:background .2s}
.sw i:after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.28)}
.sw input:checked+i{background:var(--ok)}
.sw input:checked+i:after{transform:translateX(18px)}
.sw input:disabled+i{opacity:.5;cursor:wait}

/* ═══════════════ 悬停操作菜单 ═══════════════ */
/* 表格外层有横向滚动容器，绝对定位会被裁掉，所以挂 body 上用 fixed */
#pop{position:relative;z-index:800}
.amenu{position:fixed;top:-9999px;left:-9999px;width:352px;background:var(--card);
  border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh-lg);
  overflow:hidden;animation:drop .13s ease-out}
.amenu .ah{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--primary) 10%,transparent),transparent)}
.amenu .ah b{font-size:13.5px}
.amenu .ah .sp{flex:1}
.amenu .ah .lb{font-size:11px;color:var(--t3)}
.amenu .ab{padding:7px}
.arow{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:9px;
  cursor:pointer;color:var(--t1);transition:background .13s}
.arow:hover{background:var(--hover)}
.arow.d:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.arow .ai{flex:0 0 30px;height:30px;border-radius:9px;
  background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);
  display:flex;align-items:center;justify-content:center}
.arow.d .ai{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.arow .at{flex:1;min-width:0}
.arow .at b{display:block;font-size:13px;font-weight:550}
.arow .at span{display:block;font-size:11.5px;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .ax{flex:0 0 auto}

/* ═══════════════ 授权列表 ═══════════════ */
.glist{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.grow{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--card2);transition:background .13s}
.grow:hover{background:var(--hover)}
.grow:last-child{border-bottom:0}
.grow .gi{flex:1;min-width:0}
.grow .gi b{font-size:13.5px}
.grow .gi span{display:block;font-size:11.5px;color:var(--t3);margin-top:3px}

#toast{position:fixed;top:22px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--line2);border-radius:11px;
  padding:11px 22px;font-size:13px;z-index:1000;display:none;box-shadow:var(--sh-lg);
  animation:drop .18s ease-out}
.empty{text-align:center;padding:52px 20px;color:var(--t3);font-size:13px}