/* Layout: Ant Design Pro "mix" layout — dark 48px header with the top-level menu, white 208px sider with the sub-menu, grey content with breadcrumb + page header + cards. */
:root{
  --primary:#1677ff; --primary-bg:#e6f4ff; --primary-border:#91caff; --primary-hover:#4096ff;
  --success:#52c41a; --success-bg:#f6ffed; --success-border:#b7eb8f; --success-text:#389e0d;
  --warning:#faad14; --warning-bg:#fffbe6; --warning-border:#ffe58f; --warning-text:#d48806;
  --error:#ff4d4f; --error-bg:#fff2f0; --error-border:#ffccc7; --error-text:#cf1322;
  --yellow:#fadb14; --yellow-bg:#feffe6; --yellow-border:#fffb8f; --yellow-text:#ad8b00;
  --orange:#fa8c16; --orange-bg:#fff7e6; --orange-border:#ffd591; --orange-text:#d46b08;
  --header:#001529; --header-text:rgba(255,255,255,.65); --header-active:#1677ff;
  --layout:#f5f5f5; --container:#ffffff; --sider:#ffffff;
  --text:rgba(0,0,0,.88); --text2:rgba(0,0,0,.65); --text3:rgba(0,0,0,.45); --text4:rgba(0,0,0,.25);
  --border:#d9d9d9; --split:#f0f0f0; --fill:#fafafa; --fill2:rgba(0,0,0,.04); --fill3:rgba(0,0,0,.06);
  --c-pub:#1677ff; --c-run:#faad14; --c-fail:#ff7875; --c-hid:#d9d9d9; --c-sol:#9254de; --c-rh:#13c2c2;
  --radius:8px; --radius-sm:6px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,'Liberation Mono',monospace;
  --shadow-card:0 1px 2px 0 rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02),0 2px 4px 0 rgba(0,0,0,.02);
  --shadow-pop:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --primary:#1668dc; --primary-bg:#111a2c; --primary-border:#15325b; --primary-hover:#3c89e8;
  --success:#49aa19; --success-bg:#162312; --success-border:#274916; --success-text:#6abe39;
  --warning:#d89614; --warning-bg:#2b2111; --warning-border:#594214; --warning-text:#e8b339;
  --error:#dc4446; --error-bg:#2c1618; --error-border:#5b2526; --error-text:#e86e6b;
  --yellow:#d8bd14; --yellow-bg:#2b2611; --yellow-border:#595014; --yellow-text:#e8d639;
  --orange:#d87a16; --orange-bg:#2b1d11; --orange-border:#593815; --orange-text:#e89a3c;
  --header:#001529; --header-text:rgba(255,255,255,.65); --header-active:#1668dc;
  --layout:#000000; --container:#141414; --sider:#141414;
  --text:rgba(255,255,255,.85); --text2:rgba(255,255,255,.65); --text3:rgba(255,255,255,.45); --text4:rgba(255,255,255,.25);
  --border:#424242; --split:#303030; --fill:#1d1d1d; --fill2:rgba(255,255,255,.08); --fill3:rgba(255,255,255,.12);
  --c-pub:#1668dc; --c-run:#d89614; --c-fail:#dc4446; --c-hid:#434343; --c-sol:#854eca; --c-rh:#13a8a8;
  --shadow-card:none; --shadow-pop:0 6px 16px 0 rgba(0,0,0,.32); color-scheme:dark }}
:root[data-theme="dark"]{
  --primary:#1668dc; --primary-bg:#111a2c; --primary-border:#15325b; --primary-hover:#3c89e8;
  --success:#49aa19; --success-bg:#162312; --success-border:#274916; --success-text:#6abe39;
  --warning:#d89614; --warning-bg:#2b2111; --warning-border:#594214; --warning-text:#e8b339;
  --error:#dc4446; --error-bg:#2c1618; --error-border:#5b2526; --error-text:#e86e6b;
  --yellow:#d8bd14; --yellow-bg:#2b2611; --yellow-border:#595014; --yellow-text:#e8d639;
  --orange:#d87a16; --orange-bg:#2b1d11; --orange-border:#593815; --orange-text:#e89a3c;
  --header:#001529; --header-text:rgba(255,255,255,.65); --header-active:#1668dc;
  --layout:#000000; --container:#141414; --sider:#141414;
  --text:rgba(255,255,255,.85); --text2:rgba(255,255,255,.65); --text3:rgba(255,255,255,.45); --text4:rgba(255,255,255,.25);
  --border:#424242; --split:#303030; --fill:#1d1d1d; --fill2:rgba(255,255,255,.08); --fill3:rgba(255,255,255,.12);
  --c-pub:#1668dc; --c-run:#d89614; --c-fail:#dc4446; --c-hid:#434343; --c-sol:#854eca; --c-rh:#13a8a8;
  --shadow-card:none; --shadow-pop:0 6px 16px 0 rgba(0,0,0,.32); color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--layout);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5714;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-hover)}
:focus-visible{outline:2px solid var(--primary-border);outline-offset:1px}
.mono{font-family:var(--mono)} .num{font-variant-numeric:tabular-nums}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
.muted{color:var(--text3)}


/* header */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;height:48px;background:var(--header);display:flex;align-items:stretch;padding:0 16px 0 0;color:#fff}
.logo{width:208px;flex:none;display:flex;align-items:center;gap:10px;padding-left:20px;font-size:16px;font-weight:600;color:#fff;white-space:nowrap}
.logo-mark{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,#1677ff,#69b1ff);display:grid;place-items:center;flex:none}
.logo-mark i{width:10px;height:10px;border-radius:50%;border:2.2px solid #fff}
.logo small{font-weight:400;color:var(--header-text);font-size:14px}
.nav{display:flex;align-items:stretch;gap:0;min-width:0}
.nav button{border:0;background:transparent;color:var(--header-text);padding:0 20px;font-size:14px;display:flex;align-items:center;gap:8px;transition:color .2s,background .2s}
.nav button .ic{font-size:16px}
.nav button:hover{color:#fff}
.nav button[aria-current="page"]{background:var(--header-active);color:#fff}
.nav .cnt{min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:#ff4d4f;color:#fff;font-size:12px;line-height:18px;text-align:center;box-shadow:0 0 0 1px var(--header)}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:4px;white-space:nowrap}
.hd-item{border:0;background:transparent;color:var(--header-text);height:48px;padding:0 12px;display:flex;align-items:center;gap:8px;font-size:14px}
.hd-item:hover{background:rgba(255,255,255,.08);color:#fff}
.hd-status{display:flex;align-items:center;gap:8px;border-radius:14px;padding:3px 12px;font-size:13px;color:#fff;background:rgba(255,255,255,.1)}
.hd-status.warn{background:rgba(250,173,20,.18);color:#ffd666}
.hd-status.bad{background:rgba(255,77,79,.2);color:#ff9c9e}
.avatar{width:24px;height:24px;border-radius:50%;background:#1677ff;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}

/* badge status dot */
.bd{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);flex:none;position:relative;vertical-align:middle}
.bd.warning{background:var(--warning)} .bd.error{background:var(--error)} .bd.default{background:var(--text4)} .bd.processing{background:var(--primary)}
.hd-status .bd::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid currentColor;animation:ripple 1.2s infinite ease-in-out}
.bd{color:var(--success)} .bd.processing{color:var(--primary)} .bd.error{color:var(--error)} .bd.warning{color:var(--warning)}
@keyframes ripple{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.bd::after{animation:none!important}}

/* body */
.bodyw{display:flex;min-height:calc(100vh - 48px)}
.sider{width:208px;flex:none;background:var(--sider);border-right:1px solid var(--split);position:sticky;top:48px;height:calc(100vh - 48px);overflow-y:auto;padding:4px 0 24px}
.menu-grp{padding:16px 24px 6px;font-size:12px;color:var(--text3)}
.mi{display:flex;align-items:center;gap:10px;width:calc(100% - 8px);margin:4px 4px;height:40px;padding:0 16px 0 24px;border:0;border-radius:var(--radius);background:transparent;color:var(--text);text-align:left;font-size:14px;transition:background .2s}
.mi .ic{font-size:14px;color:var(--text2)}
.mi:hover{background:var(--fill2)}
.mi[aria-current="true"]{background:var(--primary-bg);color:var(--primary)}
.mi[aria-current="true"] .ic{color:var(--primary)}
.mi .bd{margin-left:auto}
.mi .meta{margin-left:auto;font-size:12px;color:var(--text3);font-family:var(--mono)}
.mi[aria-current="true"] .meta{color:var(--primary)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.crumb{padding:16px 24px 0;font-size:14px;color:var(--text3);display:flex;gap:8px;flex-wrap:wrap}
.crumb span:last-child{color:var(--text)}
.ph{padding:8px 24px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph h1{margin:0;font-size:20px;font-weight:600;line-height:32px}
.ph .sub{color:var(--text3);font-size:14px}
.ph .extra{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.content{padding:0 24px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.foot{margin-top:auto;padding:24px;text-align:center;color:var(--text3);font-size:14px}

/* card */
.card{background:var(--container);border-radius:var(--radius);box-shadow:var(--shadow-card);border:1px solid var(--split);min-width:0}
.card-hd{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 24px;border-bottom:1px solid var(--split);font-size:16px;font-weight:600}
.card-hd .extra{margin-left:auto;font-weight:400;font-size:14px;display:flex;align-items:center;gap:12px}
.card-bd{padding:24px}
.card-bd.flush{padding:0}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-svc{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sec-title{font-size:14px;color:var(--text3);margin:4px 0 -4px;display:flex;align-items:center;gap:8px}

/* statistic */
.stat{display:flex;gap:16px;align-items:flex-start;padding:20px 24px}
.stat-ic{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;font-size:22px;flex:none}
.stat-t{color:var(--text3);font-size:14px}
.stat-v{font-size:30px;line-height:38px;font-weight:600;font-variant-numeric:tabular-nums}
.stat-v small{font-size:14px;font-weight:400;color:var(--text3);margin-left:6px}
.stat-f{margin-top:6px;font-size:13px;color:var(--text3);border-top:1px solid var(--split);padding-top:8px}

/* tag */
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;font-size:12px;line-height:20px;border-radius:4px;border:1px solid var(--border);background:var(--fill);color:var(--text);white-space:nowrap}
.tag.success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}
.tag.warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}
.tag.error{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}
.tag.processing{background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary)}
.tag.yellow{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow-text)}
.tag.orange{background:var(--orange-bg);border-color:var(--orange-border);color:var(--orange-text)}
.tag.sol{color:var(--c-sol);border-color:color-mix(in srgb,var(--c-sol) 40%,transparent);background:color-mix(in srgb,var(--c-sol) 8%,transparent)}
.tag.rh{color:var(--c-rh);border-color:color-mix(in srgb,var(--c-rh) 40%,transparent);background:color-mix(in srgb,var(--c-rh) 8%,transparent)}

/* alert */
.alert{display:flex;gap:10px;align-items:flex-start;padding:9px 16px;border-radius:var(--radius);border:1px solid;font-size:14px}
.alert .ic{font-size:16px;margin-top:3px}
.alert.warning{background:var(--warning-bg);border-color:var(--warning-border)} .alert.warning>.ic{color:var(--warning)}
.alert.success{background:var(--success-bg);border-color:var(--success-border)} .alert.success>.ic{color:var(--success)}
.alert.info{background:var(--primary-bg);border-color:var(--primary-border)} .alert.info>.ic{color:var(--primary)}
.alert .msg{font-weight:500} .alert .desc{color:var(--text2);margin-top:2px}
.alert.big{padding:16px 20px} .alert.big .msg{font-size:16px}
.alert .right{margin-left:auto;color:var(--text3);font-size:13px;display:flex;align-items:center;gap:8px;white-space:nowrap}

/* button / segmented / switch / input */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:4px 15px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--container);color:var(--text);font-size:14px;box-shadow:0 2px 0 rgba(0,0,0,.02);transition:all .2s;white-space:nowrap}
.btn:hover{color:var(--primary-hover);border-color:var(--primary-hover)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 0 rgba(5,145,255,.1)}
.btn.primary:hover{background:var(--primary-hover);color:#fff}
.btn.danger{color:var(--error);border-color:var(--error)}
.btn.link{border-color:transparent;background:transparent;box-shadow:none;color:var(--primary);padding:4px 6px}
.btn.sm{height:24px;padding:0 7px;font-size:13px;border-radius:4px}
.btn.lg{height:40px;font-size:16px;padding:6px 15px;border-radius:var(--radius)}
.segm{display:inline-flex;padding:2px;background:var(--fill3);border-radius:var(--radius-sm);gap:2px}
.segm button{border:0;background:transparent;height:28px;padding:0 11px;border-radius:4px;color:var(--text2);font-size:14px}
.segm button:hover{color:var(--text)}
.segm button[aria-pressed="true"]{background:var(--container);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02),0 2px 4px rgba(0,0,0,.02)}
.switch{width:44px;min-width:44px;height:22px;border-radius:11px;background:var(--text4);border:0;position:relative;transition:background .2s;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,35,11,.2);transition:left .2s}
.switch[aria-checked="true"]{background:var(--primary)}
.switch[aria-checked="true"]::after{left:24px}
.switch.sm{width:28px;min-width:28px;height:16px} .switch.sm::after{width:12px;height:12px} .switch.sm[aria-checked="true"]::after{left:14px}
.input{display:inline-flex;align-items:center;gap:6px;height:32px;padding:4px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--container);min-width:0}
.input:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(5,145,255,.1)}
.input input{border:0;outline:0;background:transparent;font:inherit;color:var(--text);width:100%;min-width:0}
.input .ic{color:var(--text4)}

/* tabs */
.tabs{display:flex;gap:32px;padding:0 24px;border-bottom:1px solid var(--split);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:12px 0;font-size:14px;color:var(--text);position:relative;white-space:nowrap}
.tabs button:hover{color:var(--primary-hover)}
.tabs button[aria-selected="true"]{color:var(--primary)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}
.tabs .n{margin-left:4px;color:var(--text3)} .tabs button[aria-selected="true"] .n{color:var(--primary)}

/* table */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{background:var(--fill);color:var(--text);font-weight:600;text-align:left;padding:12px 16px;border-bottom:1px solid var(--split);white-space:nowrap;position:relative}
th:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;height:1.6em;transform:translateY(-50%);width:1px;background:var(--split)}
td{padding:12px 16px;border-bottom:1px solid var(--split);white-space:nowrap;vertical-align:top}
tbody tr{transition:background .2s}
tbody tr:hover>td{background:var(--fill)}
tbody tr.click{cursor:pointer}
td.r,th.r{text-align:right}
.sym{font-weight:600}
.addr{font-family:var(--mono);font-size:12px;color:var(--text3)}
.ellip{white-space:normal;min-width:280px;max-width:460px;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbl-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 24px}
.pager{margin-left:auto;display:flex;gap:8px;align-items:center}
.pager button{min-width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text)}
.pager button:hover{background:var(--fill2)}
.pager button[aria-current="true"]{border-color:var(--primary);color:var(--primary);font-weight:600;background:var(--container)}
.pager button:disabled{color:var(--text4);cursor:not-allowed;background:transparent}
.empty{padding:40px;text-align:center;color:var(--text3)}

/* descriptions */
.desc-t{display:grid;grid-template-columns:repeat(var(--cols,2),max-content minmax(0,1fr));border:1px solid var(--split);border-radius:var(--radius);overflow:hidden}
.desc-t>div{padding:12px 16px;border-bottom:1px solid var(--split);font-size:14px}
.desc-t>.k{background:var(--fill);color:var(--text2);border-right:1px solid var(--split);white-space:nowrap}
.desc-t>.v{border-right:1px solid var(--split);font-variant-numeric:tabular-nums;min-width:0}
.desc-l{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:14px;margin:0}
.desc-l dt{color:var(--text3)} .desc-l dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

/* service card */
.svc{display:flex;flex-direction:column;cursor:pointer;transition:box-shadow .2s,border-color .2s;text-align:left;width:100%;padding:0;font-size:14px}
.svc:hover{box-shadow:var(--shadow-pop);border-color:transparent}
.svc-top{display:flex;align-items:center;gap:10px;padding:16px 20px 12px}
.svc-ic{width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;font-size:18px;flex:none;background:var(--primary-bg);color:var(--primary)}
.svc.warning .svc-ic{background:var(--warning-bg);color:var(--warning)}
.svc.error .svc-ic{background:var(--error-bg);color:var(--error)}
.svc-name{font-weight:600;font-size:15px}
.svc-sub{color:var(--text3);font-size:12px;margin-top:1px}
.svc-top .tag{margin-left:auto}
.svc-head{padding:0 20px;font-size:14px}
.svc-head small{color:var(--text3);font-size:13px}
.svc-kv{padding:10px 20px 4px;font-size:13px}
.svc-kv .desc-l{font-size:13px}
.svc-foot{padding:10px 20px 14px;margin-top:auto}
.progress{height:8px;border-radius:4px;background:var(--fill3);overflow:hidden;margin:10px 20px 0}
.progress i{display:block;height:100%;background:var(--success);border-radius:4px}
.strip{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}
.strip i{height:16px;border-radius:2px;background:var(--success);opacity:.85}
.strip i.warning{background:var(--warning)} .strip i.error{background:var(--error)} .strip i.none{background:var(--fill3);opacity:1}
.strip.lg i{height:32px}
.strip-cap{display:flex;justify-content:space-between;font-size:12px;color:var(--text3);margin-top:4px}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 20px 26px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:4px;top:14px;bottom:0;border-left:2px solid var(--split)}
.tl li:last-child::before{display:none}
.tl .dot{position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--success);background:var(--container)}
.tl .dot.warning{border-color:var(--warning)} .tl .dot.error{border-color:var(--error)}
.tl time{display:block;color:var(--text3);font-size:12px;font-family:var(--mono)}

/* chart */
.chart-box{position:relative}
#chart{width:100%;height:auto;display:block}
#chart text{fill:var(--text3);font-size:12px;font-family:var(--font)}
#chart .hit{cursor:pointer}
#chart .hit:hover~.hl,#chart .hit:hover{fill:var(--fill2)}
.legend{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text2);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%}
.tip{position:absolute;pointer-events:none;background:var(--container);box-shadow:var(--shadow-pop);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;min-width:140px;z-index:5}
.tip b{display:block;margin-bottom:4px;font-size:13px}
.tip div{display:flex;align-items:center;gap:6px;line-height:20px}
.tip div span:last-child{margin-left:auto;padding-left:16px;font-variant-numeric:tabular-nums}
.tip i{width:6px;height:6px;border-radius:50%}

/* drawer */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--container);z-index:41;display:flex;flex-direction:column;box-shadow:-6px 0 16px rgba(0,0,0,.08),-9px 0 28px rgba(0,0,0,.05)}
.dr-hd{display:flex;align-items:center;gap:12px;padding:16px 24px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--split);font-size:16px;font-weight:600}
.dr-hd .x{border:0;background:transparent;width:24px;height:24px;border-radius:4px;color:var(--text3);font-size:16px;display:grid;place-items:center;padding:0}
.dr-hd .x:hover{background:var(--fill2);color:var(--text)}
.dr-bd{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.dr-ft{padding:10px 24px;border-top:1px solid var(--split);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.coin-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.coin-h h2{margin:0;font-size:22px;font-weight:600}
.copy{display:flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--text3);word-break:break-all}
.copy .ic{color:var(--primary);cursor:pointer;flex:none}
.quote{border-left:3px solid var(--primary);background:var(--fill);padding:12px 16px;color:var(--text2);line-height:1.75;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.typo{font-size:14px;line-height:1.8;color:var(--text)}
.typo h4{font-size:16px;font-weight:600;margin:20px 0 8px}
.typo h4:first-child{margin-top:0}
.typo p{margin:0 0 10px;color:var(--text2)}
.typo b{color:var(--text)}
.divider{display:flex;align-items:center;gap:16px;color:var(--text);font-weight:500;font-size:15px}
.divider::after{content:"";flex:1;border-top:1px solid var(--split)}

/* login */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;background-color:var(--layout);background-image:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 60%),radial-gradient(900px 500px at 100% 110%,color-mix(in srgb,#722ed1 14%,transparent),transparent 60%);padding:72px 16px 32px}
.login-top{text-align:center;margin-bottom:32px}
.login-top .t{display:flex;align-items:center;justify-content:center;gap:12px;font-size:33px;font-weight:600}
.login-top .t .logo-mark{width:40px;height:40px;border-radius:10px}
.login-top .t .logo-mark i{width:15px;height:15px;border-width:3px}
.login-top .d{margin-top:10px;color:var(--text3);font-size:14px}
.login-row{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.lcard{width:min(368px,100%)}
.lcard .tabs{padding:0;justify-content:center;margin-bottom:24px}
.fi{margin-bottom:24px}
.fi .input{width:100%;height:40px;font-size:16px;padding:6px 11px;border-radius:var(--radius)}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:24px}
.otp input{height:48px;border:1px solid var(--border);border-radius:var(--radius);text-align:center;font-size:20px;font-family:var(--mono);background:var(--container);color:var(--text);width:100%}
.otp input:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 2px rgba(5,145,255,.1)}
.lcard .btn.lg{width:100%}
.lcard .hint{color:var(--text3);font-size:13px;margin-top:16px;line-height:1.7}
.login-ft{margin-top:auto;padding-top:48px;color:var(--text3);font-size:14px}
.step-lbl{color:var(--text3);font-size:12px;text-align:center;margin-bottom:8px;font-family:var(--mono)}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .logo{width:auto;padding:0 16px} .logo small{display:none}
  .bodyw{flex-direction:column}
  .sider{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--split);display:flex;overflow-x:auto;padding:6px 8px;gap:4px;scrollbar-width:none}
  .sider::-webkit-scrollbar{display:none}
  .menu-grp{display:none}
  .mi{width:auto;margin:0;height:34px;padding:0 12px;white-space:nowrap;flex:none}
  .mi .bd,.mi .meta{margin-left:6px}
  .g2,.g3{grid-template-columns:1fr}
  .hd-clock{display:none}
}
@media (max-width:640px){
  .hd{flex-wrap:wrap;height:auto;padding:0}
  .logo{height:48px}
  .hd-right{height:48px}
  .hd-user span:last-child{display:none}
  .nav{order:3;width:100%;height:44px;background:rgba(255,255,255,.04)}
  .nav button{flex:1;justify-content:center;padding:0 8px}
  .sider{top:auto}
  .crumb{padding:12px 16px 0} .ph{padding:6px 16px 12px} .content{padding:0 16px 16px}
  .card-hd{padding:0 16px} .card-bd{padding:16px} .stat{padding:16px}
  .g4{grid-template-columns:1fr 1fr} .stat{flex-direction:column;gap:8px} .stat-v{font-size:24px}
  .desc-t{--cols:1!important}
  .tabs{padding:0 16px;gap:24px}
}

/* runtime-only additions */
.spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:48px;text-align:center;color:var(--text3)}
.msg-toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;background:var(--container);box-shadow:var(--shadow-pop);border-radius:var(--radius);padding:9px 16px;display:flex;gap:8px;align-items:center;font-size:14px}
.msg-toast .ic{font-size:16px} .msg-toast.ok .ic{color:var(--success)} .msg-toast.err .ic{color:var(--error)}
.typo ul{margin:0 0 10px;padding-left:20px;color:var(--text2)}
.hd-user{position:relative}
.menu-pop{position:absolute;right:8px;top:44px;background:var(--container);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:4px;min-width:160px;z-index:35}
.menu-pop button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;padding:8px 12px;border-radius:4px;color:var(--text);font-size:14px;text-align:left}
.menu-pop button:hover{background:var(--fill2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.err-inline{color:var(--error);font-size:13px;margin:-12px 0 16px}
.dr-bd>*{flex-shrink:0}

/* 设置 › 币筛选条件：表单行、数字输入、确认弹窗、保存条 */
.rule-list{display:flex;flex-direction:column}
.rule{display:grid;grid-template-columns:52px minmax(0,1fr) 240px;gap:16px;align-items:start;padding:18px 24px;border-bottom:1px solid var(--split)}
.rule:last-child{border-bottom:0}
.rule.off .rule-main,.rule.off .rule-val{opacity:.45}
.rule.dirty{background:color-mix(in srgb,var(--warning-bg) 70%,transparent)}
.rule-sw{padding-top:2px}
.rule-name{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rule-desc{color:var(--text3);font-size:13px;margin-top:4px;line-height:1.6;max-width:62ch}
.rule-meta{font-size:12px;color:var(--text3);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.rule-meta b{font-weight:500;color:var(--text2)}
.rule-val{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.numin{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--container);height:32px;overflow:hidden}
.numin:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(5,145,255,.1)}
.numin .af{display:flex;align-items:center;padding:0 10px;background:var(--fill);color:var(--text2);font-size:13px;white-space:nowrap}
.numin .af.pre{border-right:1px solid var(--border)} .numin .af.suf{border-left:1px solid var(--border)}
.numin input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-family:var(--mono);font-size:13.5px;color:var(--text);padding:0 10px;text-align:right}
.numin input:disabled{color:var(--text4)}
.val-hint{font-size:12px;color:var(--text3);text-align:right}
.val-err{font-size:12px;color:var(--error);text-align:right}
.sub-rule{margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--fill);display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.sub-rule .numin{width:190px;margin-left:auto}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:13px;cursor:pointer;background:var(--container);user-select:none}
.chk input{accent-color:var(--primary);margin:0}
.chk.on{border-color:var(--primary);background:var(--primary-bg);color:var(--primary)}
.locked{font-size:12px;color:var(--text3);display:inline-flex;align-items:center;gap:4px;padding-top:4px}
.stage{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:600}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text2)}
.flow .arrow{color:var(--text4)}
.flow .step{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--fill);border:1px solid var(--split)}
.savebar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px;background:var(--container);border:1px solid var(--split);border-radius:var(--radius);box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.savebar .msg{display:flex;align-items:center;gap:8px;font-size:14px}
.savebar .right{margin-left:auto;display:flex;gap:8px}
.modal-wrap{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.45)}
.modal{width:min(560px,100%);background:var(--container);border-radius:var(--radius);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;max-height:90vh}
.modal-hd{padding:16px 24px;font-size:16px;font-weight:600;border-bottom:1px solid var(--split);display:flex;align-items:center;gap:10px}
.modal-bd{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal-ft{padding:10px 24px;border-top:1px solid var(--split);display:flex;justify-content:flex-end;gap:8px}
/* 二次验证弹窗（admin.js stepUp） */
.modal.su{width:min(400px,100%)}
.modal.su .modal-hd .ic{color:var(--primary);font-size:18px}
.su-desc{margin:0;color:var(--text2);font-size:14px;line-height:1.7}
.modal.su .otp{margin:14px 0 18px}
.modal.su .btn.lg{width:100%}
.modal.su .hint{color:var(--text3);font-size:13px;margin-top:12px;line-height:1.7}
.modal.su .err-inline{margin:0}
.diff{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 12px;font-size:13.5px;align-items:center}
.diff .from{color:var(--text3);text-decoration:line-through;font-family:var(--mono)}
.diff .to{font-family:var(--mono);font-weight:600}
.diff .arr{color:var(--text4)}
textarea.note{width:100%;min-height:64px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font:inherit;font-size:13px;background:var(--container);color:var(--text);resize:vertical}
@media (max-width:900px){.rule{grid-template-columns:44px minmax(0,1fr)} .rule-val{grid-column:2} .val-hint,.val-err{text-align:left} .chips{justify-content:flex-start} .sub-rule .numin{margin-left:0;width:100%}}