/* ─────────────────────────────────────────────────────────────
   NFarms · shared theme
   设计令牌沿用 zeroling-topology.html：深底、奶油色文字、发丝分隔
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#060607;
  --ink:#f7f0e4;
  --text:#e6e0d6;
  --sub:#9b958b;
  --faint:#5f5a53;
  --hair:rgba(255,255,255,.075);
  --hair-strong:rgba(255,255,255,.14);
  --line:#242835;
  --panel:rgba(255,255,255,.022);
  --panel-2:rgba(255,255,255,.04);
  --cream:#f6e8ce;
  --gold:#d9b489;
  --gold-soft:#e3b476;
  --rose:#c2a4b0;
  --sage:#a9bc9f;
  --slate:#9ba1a6;
  --warn:#e8b878;
  --danger:#e08a86;
  --ok:#9fc3a6;
  --radius:16px;
  --radius-sm:10px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(72% 34% at 42% 30%, rgba(236,199,155,.08), transparent 72%),
    radial-gradient(46% 26% at 67% 40%, rgba(208,166,150,.05), transparent 74%),
    radial-gradient(110% 70% at 50% 110%, rgba(120,112,120,.05), transparent 70%),
    var(--bg);
  color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(132% 92% at 50% 40%, transparent 40%, rgba(2,2,3,.55) 100%);
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 24px 36px, rgba(255,236,206,.55), transparent 1.4px),
    radial-gradient(1px 1px at 168px 92px, rgba(255,236,206,.4), transparent 1.4px),
    radial-gradient(1px 1px at 88px 188px, rgba(255,236,206,.5), transparent 1.4px),
    radial-gradient(1px 1px at 232px 214px, rgba(255,236,206,.32), transparent 1.4px),
    radial-gradient(1px 1px at 204px 24px, rgba(255,236,206,.42), transparent 1.4px);
  background-size:260px 260px;
  opacity:.42;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(217,180,137,.28);color:#fff}

.mono{font-family:var(--mono);font-variant-ligatures:none}
.muted{color:var(--sub)}
.faint{color:var(--faint)}
.wrap{position:relative;z-index:1}

/* ── 顶栏 ─────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:22px;
  padding:14px 28px;border-bottom:1px solid var(--hair);
  background:rgba(6,6,7,.58);backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{
  width:28px;height:28px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:#f7f4ec;color:#141210;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 26px -14px rgba(0,0,0,.9),0 0 24px -10px rgba(226,190,148,.6);
  font-family:var(--mono);font-size:13px;font-weight:700;
}
.brand-name{font-size:14.5px;font-weight:640;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand-name .dot{color:var(--gold)}
.brand-sub{font-size:10.5px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}

.topnav{display:flex;align-items:center;gap:2px;margin-left:6px;flex-wrap:wrap}
.topnav a{
  padding:7px 12px;border-radius:999px;font-size:13px;color:var(--sub);
  transition:color .18s,background .18s;
}
.topnav a:hover{color:var(--ink);background:rgba(255,255,255,.045)}
.topnav a.active{color:var(--ink);background:rgba(217,180,137,.1);box-shadow:inset 0 0 0 1px rgba(217,180,137,.18)}

.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.env-pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font-size:11px;color:var(--sub);border:1px solid var(--hair);background:rgba(255,255,255,.02);
  white-space:nowrap;
}
.env-pill i{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(159,195,166,.7)}
.env-pill.prod i{background:var(--gold);box-shadow:0 0 8px rgba(217,180,137,.7)}
.env-pill.warn i{background:var(--warn);box-shadow:0 0 8px rgba(232,184,120,.7)}

.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--hair);background:rgba(255,255,255,.02);color:var(--sub);cursor:pointer;
  transition:.18s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--hair-strong);background:rgba(255,255,255,.05)}
.avatar{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#2a2723,#181614);border:1px solid var(--hair-strong);
  color:var(--cream);font-size:11px;font-family:var(--mono);
}

/* ── 布局 ─────────────────────────────────────────────── */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:212px minmax(0,1fr);min-height:calc(100vh - 61px)}
.shell.solo{grid-template-columns:minmax(0,1fr)}
.shell.solo .main{margin:0 auto;width:100%}
.sidebar{
  position:sticky;top:61px;align-self:start;height:calc(100vh - 61px);
  padding:22px 14px 30px 22px;border-right:1px solid var(--hair);
  overflow:auto;scrollbar-width:thin;
}
.side-group{margin-bottom:22px}
.side-label{
  margin:0 0 8px;padding-left:10px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.side-nav{display:flex;flex-direction:column;gap:1px}
.side-nav a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  font-size:12.8px;color:var(--sub);transition:.16s;
}
.side-nav a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.side-nav a.active{color:var(--ink);background:rgba(217,180,137,.09);box-shadow:inset 0 0 0 1px rgba(217,180,137,.14)}
.side-nav a.active .dot{background:var(--gold);box-shadow:0 0 8px rgba(217,180,137,.8)}
.side-nav .dot{width:4px;height:4px;border-radius:50%;background:var(--faint);flex:none}
.main{padding:34px 36px 64px;min-width:0;max-width:1240px}
.main.wide{max-width:none}

/* ── 页头 ─────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);margin-bottom:18px}
.crumb a:hover{color:var(--sub)}
.crumb .sep{opacity:.5}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.eyebrow::before{content:'';width:14px;height:1px;background:var(--gold);opacity:.6}
h1{margin:0 0 8px;font-size:30px;font-weight:650;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
h2{margin:0;font-size:17px;font-weight:620;letter-spacing:-.01em;color:var(--ink)}
h3{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.lede{margin:0;max-width:64ch;color:var(--sub);font-size:13.5px}
.head-actions{display:flex;gap:9px;flex-wrap:wrap}

/* ── 按钮 / 徽章 ──────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 14px;border-radius:999px;border:1px solid var(--hair-strong);
  background:rgba(255,255,255,.025);color:var(--text);font-size:12.5px;cursor:pointer;
  transition:.18s;white-space:nowrap;
}
.btn:hover{border-color:rgba(217,180,137,.4);background:rgba(255,255,255,.05);color:var(--ink)}
.btn.primary{background:var(--cream);border-color:var(--cream);color:#171410;font-weight:600}
.btn.primary:hover{background:#fff;border-color:#fff}
.btn.ghost{border-color:transparent;background:none;color:var(--sub)}
.btn.ghost:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
  font-size:10.5px;letter-spacing:.02em;border:1px solid var(--hair);color:var(--sub);
  background:rgba(255,255,255,.02);white-space:nowrap;
}
.badge i{width:4px;height:4px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok);border-color:rgba(159,195,166,.24);background:rgba(159,195,166,.06)}
.badge.warn{color:var(--warn);border-color:rgba(232,184,120,.24);background:rgba(232,184,120,.06)}
.badge.danger{color:var(--danger);border-color:rgba(224,138,134,.24);background:rgba(224,138,134,.06)}
.badge.info{color:var(--gold);border-color:rgba(217,180,137,.24);background:rgba(217,180,137,.06)}

/* ── 卡片 / 网格 ──────────────────────────────────────── */
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:17px 18px;border:1px solid var(--hair);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  transition:border-color .2s,transform .2s,background .2s;overflow:hidden;
}
.card::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;
  background:var(--tone,var(--gold));opacity:.35;
}
a.card:hover{border-color:rgba(217,180,137,.3);transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.card .k{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3{font-size:14.5px}
.card p{margin:0;color:var(--sub);font-size:12.5px;line-height:1.55}
.card .meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;font-size:11px;color:var(--faint)}
.card .ico{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  border:1px solid var(--hair);background:rgba(255,255,255,.03);
  font-family:var(--mono);font-size:11px;color:var(--tone,var(--gold));
}
.tone-gold{--tone:var(--gold)}
.tone-rose{--tone:var(--rose)}
.tone-sage{--tone:var(--sage)}
.tone-slate{--tone:var(--slate)}
.tone-cream{--tone:var(--cream)}

/* ── 面板 ─────────────────────────────────────────────── */
.panel{border:1px solid var(--hair);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.panel-h .hgroup{display:flex;align-items:center;gap:10px}
.panel-h p{margin:2px 0 0;font-size:11.5px;color:var(--faint)}
.panel-b{padding:18px}
.panel-b.tight{padding:0}
.panel + .panel{margin-top:16px}

/* ── KPI ──────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.kpi{padding:14px 16px;border:1px solid var(--hair);border-radius:var(--radius-sm);background:var(--panel)}
.kpi .label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.kpi .v{font-family:var(--mono);font-size:23px;color:var(--ink);letter-spacing:-.02em;margin-top:4px}
.kpi .v small{font-size:11px;color:var(--faint);letter-spacing:0;margin-left:4px}
.kpi .d{font-size:11px;color:var(--sub);margin-top:2px}
.kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--danger)}

/* ── 列表 ─────────────────────────────────────────────── */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--hair);transition:background .15s;
}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(255,255,255,.022)}
.row .grow{min-width:0;flex:1}
.row .t{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r{display:flex;align-items:center;gap:8px;flex:none;color:var(--sub);font-size:11.5px}
.row .num{font-family:var(--mono);font-size:11px;color:var(--faint);width:24px;flex:none}

/* ── 表格 ─────────────────────────────────────────────── */
.table-wrap{overflow:auto}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{
  text-align:left;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:10px 14px;border-bottom:1px solid var(--hair);white-space:nowrap;
}
table.t td{padding:11px 14px;border-bottom:1px solid var(--hair);color:var(--text);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr:hover td{background:rgba(255,255,255,.02)}
table.t td.mono{font-family:var(--mono);font-size:11.5px;color:var(--sub)}
table.t td.num{font-family:var(--mono);text-align:right;color:var(--sub)}
.nowrap{white-space:nowrap}

/* ── 表单 ─────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;letter-spacing:.04em;color:var(--faint)}
input[type=text],input[type=search],input[type=number],input[type=password],select,textarea{
  width:100%;padding:9px 12px;border-radius:10px;
  border:1px solid var(--hair-strong);background:rgba(255,255,255,.025);color:var(--ink);
  outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
}
input:focus,select:focus,textarea:focus{border-color:rgba(217,180,137,.5);background:rgba(255,255,255,.04);box-shadow:0 0 0 3px rgba(217,180,137,.09)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:110px;font-family:var(--mono);font-size:12px;line-height:1.65}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.check{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sub)}
.check input{width:14px;height:14px;accent-color:var(--gold)}

/* ── 分段 / 筛选 ──────────────────────────────────────── */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:5px 11px;border-radius:999px;border:1px solid var(--hair);
  background:none;color:var(--sub);font-size:11.5px;cursor:pointer;transition:.16s;
}
.chip:hover{color:var(--ink);border-color:var(--hair-strong)}
.chip.active{color:var(--ink);background:rgba(217,180,137,.1);border-color:rgba(217,180,137,.28)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{flex:1}
.search-inline{position:relative;min-width:220px}
.search-inline input{padding-left:32px}
.search-inline svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:13px;height:13px;stroke:var(--faint);fill:none;stroke-width:1.8;pointer-events:none}

/* ── 代码 / 预格式 ────────────────────────────────────── */
.code{
  position:relative;margin:0;padding:14px 16px;border-radius:12px;
  border:1px solid var(--hair);background:rgba(0,0,0,.32);
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:#cfc8bc;
  overflow:auto;white-space:pre-wrap;word-break:break-word;
}
.code .copy{position:absolute;right:8px;top:8px}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;font-size:12px}
.kv dt{color:var(--faint)}
.kv dd{margin:0;color:var(--text);font-family:var(--mono);font-size:11.5px}

/* ── 进度 / 指标条 ────────────────────────────────────── */
.meter{height:4px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--tone,var(--gold));opacity:.85}
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{position:relative;padding:0 0 18px 20px;border-left:1px solid var(--hair)}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-3px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--tone,var(--gold));box-shadow:0 0 8px color-mix(in srgb,var(--tone,var(--gold)) 60%,transparent)}
.tl-item .t{font-size:12.5px;color:var(--ink)}
.tl-item .s{font-size:11px;color:var(--faint);margin-top:2px}

/* ── 提示 ─────────────────────────────────────────────── */
.note{
  display:flex;gap:10px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(217,180,137,.18);background:rgba(217,180,137,.05);
  color:var(--sub);font-size:12px;line-height:1.6;
}
.note strong{color:var(--cream);font-weight:600}
.note.warn{border-color:rgba(232,184,120,.22);background:rgba(232,184,120,.05)}
.note.danger{border-color:rgba(224,138,134,.22);background:rgba(224,138,134,.05)}

/* ── 工具页布局 ───────────────────────────────────────── */
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.tool-out{
  min-height:120px;padding:14px 16px;border-radius:12px;border:1px solid var(--hair);
  background:rgba(0,0,0,.28);font-family:var(--mono);font-size:12px;line-height:1.75;
  white-space:pre-wrap;word-break:break-word;color:#d8d1c5;
}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.result{padding:10px 12px;border:1px solid var(--hair);border-radius:10px;background:rgba(255,255,255,.02)}
.result .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.result .v{font-family:var(--mono);font-size:13px;color:var(--ink);margin-top:3px;word-break:break-all}
.result .v.sm{font-size:11.5px}

/* ── 拓扑图 ───────────────────────────────────────────── */
.topo-wrap{position:relative;border:1px solid var(--hair);border-radius:var(--radius);background:radial-gradient(60% 60% at 50% 40%,rgba(217,180,137,.05),transparent 70%),rgba(0,0,0,.22);overflow:hidden}
.topo-svg{display:block;width:100%;height:auto;min-height:420px}
.topo-node{cursor:pointer}
.topo-node rect{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.12);transition:.18s}
.topo-node:hover rect,.topo-node.sel rect{fill:rgba(217,180,137,.09);stroke:rgba(217,180,137,.5)}
.topo-node text{fill:var(--text);font-size:11px;font-family:var(--sans)}
.topo-node .sub{fill:var(--faint);font-size:9px;font-family:var(--mono)}
.topo-edge{stroke:rgba(255,255,255,.13);stroke-width:1;fill:none}
.topo-edge.hot{stroke:rgba(217,180,137,.55)}
.topo-legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--hair);font-size:11px;color:var(--faint)}
.topo-legend span{display:inline-flex;align-items:center;gap:6px}
.topo-legend i{width:5px;height:5px;border-radius:50%;background:var(--ok)}

/* ── 空状态 / 加载 ────────────────────────────────────── */
.empty{padding:36px 18px;text-align:center;color:var(--faint);font-size:12.5px}
.empty b{display:block;color:var(--sub);font-size:13px;font-weight:550;margin-bottom:4px}

/* ── 搜索面板 ─────────────────────────────────────────── */
.palette{position:fixed;inset:0;z-index:80;display:none;place-items:start center;padding-top:12vh;background:rgba(3,3,4,.62);backdrop-filter:blur(6px)}
.palette.open{display:grid}
.palette-box{width:min(560px,92vw);border:1px solid var(--hair-strong);border-radius:16px;background:#0b0b0d;box-shadow:0 40px 90px -40px #000;overflow:hidden}
.palette-box input{width:100%;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:14px 16px;background:none;font-size:14px}
.palette-list{max-height:52vh;overflow:auto;padding:6px}
.palette-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:12.5px;color:var(--sub);cursor:pointer}
.palette-item:hover,.palette-item.on{background:rgba(217,180,137,.08);color:var(--ink)}
.palette-item .p{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.palette-empty{padding:22px;text-align:center;color:var(--faint);font-size:12px}

/* ── 页脚 ─────────────────────────────────────────────── */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:11px;color:var(--faint);
}
.foot a:hover{color:var(--sub)}

/* ── Toast ────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:90;opacity:0;pointer-events:none;transition:.22s var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast span{display:block;padding:9px 16px;border-radius:999px;border:1px solid var(--hair-strong);background:#111013;color:var(--ink);font-size:12px;box-shadow:0 20px 50px -24px #000}

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none;position:fixed;inset:61px 0 0 0;z-index:35;background:rgba(8,8,10,.94);height:auto;border-right:0;padding:18px 20px 40px}
  .sidebar.open{display:block}
  .main{padding:24px 20px 56px}
  .topnav{display:none}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .topbar{padding:11px 16px;gap:10px}
  .brand-sub{display:none}
  .kpis,.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  h1{font-size:24px}
  .page-head{margin-bottom:20px}
  .main{padding:20px 16px 48px}
  .panel-h,.row{padding-left:14px;padding-right:14px}
  .top-actions .env-pill{display:none}
  /* 390px 宽度放不下"品牌 + 搜索 + 时钟 + 个人 + 头像"：次要信息先让位，避免整页横向溢出 */
  .top-actions .clock,.top-actions .avatar{display:none}
  .top-actions{gap:7px}
  .top-actions .btn.sm{padding:5px 9px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── 布局扩展：hero / 分栏 / 段落标题 ─────────────────── */
.hero{padding:20px 0 30px;border-bottom:1px solid var(--hair);margin-bottom:26px}
.hero h1{font-size:clamp(30px,4.4vw,46px);max-width:24ch;letter-spacing:-.035em}
.hero .lede{max-width:60ch;font-size:14.5px;margin-top:12px}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:11px;color:var(--faint)}
.hero-meta b{color:var(--sub);font-weight:550;font-family:var(--mono)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 12px}
.section-title h2{font-size:15px}
.section-title .more{font-size:11.5px;color:var(--faint)}
.section-title .more:hover{color:var(--gold)}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.split,.split.even{grid-template-columns:1fr}}

/* ── 工具页表单 ───────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form .inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.form .hint{font-size:11px;color:var(--faint);line-height:1.55}
.swatch{height:120px;border-radius:12px;border:1px solid var(--hair-strong);background:#000}
.grid-pos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:96px}
.grid-pos button{height:26px;border:1px solid var(--hair);border-radius:6px;background:rgba(255,255,255,.02);cursor:pointer;color:var(--faint);font-size:10px}
.grid-pos button.active{border-color:rgba(217,180,137,.45);background:rgba(217,180,137,.12);color:var(--ink)}
.ascii-t{font-size:11px}
.ascii-t td,.ascii-t th{padding:5px 9px!important}
.mono-input{font-family:var(--mono);font-size:12px}
.canvas-wrap{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.3);display:grid;place-items:center;min-height:200px}
.canvas-wrap canvas{max-width:100%;height:auto;display:block}

/* ── 控制台：拓扑与日志 ───────────────────────────────── */
.topo-detail{min-height:196px}
.logbox{height:340px;overflow:auto;display:flex;flex-direction:column}
.logbox .row{padding:6px 18px}
.logbox .row .badge{min-width:52px;justify-content:center;text-transform:uppercase;font-size:9.5px;letter-spacing:.08em}
.logbox .s{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:11px;color:var(--sub)}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.step .n{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair-strong);font-family:var(--mono);font-size:10.5px;color:var(--sub)}
.step.done .n{border-color:rgba(159,195,166,.4);color:var(--ok);background:rgba(159,195,166,.08)}
.step .b{min-width:0;flex:1}
.step .t{font-size:12.5px;color:var(--ink)}
.step .s{font-size:11px;color:var(--faint);word-break:break-word}
.step .r{margin-left:auto;display:flex;align-items:center;flex:none}
.seg{display:inline-flex;border:1px solid var(--hair);border-radius:999px;padding:2px;gap:2px;background:rgba(255,255,255,.02)}
.seg button{border:0;background:none;padding:5px 11px;border-radius:999px;font-size:11.5px;color:var(--sub);cursor:pointer}
.seg button.active{background:rgba(217,180,137,.12);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(217,180,137,.22)}
.gauge{display:flex;flex-direction:column;gap:6px}
.gauge .g-h{display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
.gauge .g-h b{color:var(--text);font-family:var(--mono);font-weight:500}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mini .m{padding:9px 10px;border:1px solid var(--hair);border-radius:9px}
.mini .m .k{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mini .m .v{font-family:var(--mono);font-size:13px;color:var(--ink);margin-top:2px}
.heat{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:8px}
.heat i{aspect-ratio:1;border-radius:2px;background:rgba(217,180,137,.08)}

/* ── 商城 / 外卖 / 房产 / 身份 ─────────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.product{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.thumb{height:118px;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,18,16,.72);background:linear-gradient(135deg,#d9b489,#a9865e)}
.thumb.tone-sage{background:linear-gradient(135deg,#a9bc9f,#6f8468)}
.thumb.tone-rose{background:linear-gradient(135deg,#c2a4b0,#8e6f7c)}
.thumb.tone-slate{background:linear-gradient(135deg,#9ba1a6,#666d73)}
.p-b{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.p-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.p-h h3{font-size:13.5px;margin:0}
.p-h b{font-family:var(--mono);font-size:12.5px;color:var(--gold);white-space:nowrap}
.p-m{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--faint);font-family:var(--mono)}
.product .actions{margin-top:auto}

.receipt{max-width:260px;margin:0 auto;padding:18px 16px;border:1px dashed rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.03);font-family:var(--mono);font-size:11px;color:var(--sub)}
.receipt .r-h{text-align:center;color:var(--ink);font-size:13px;letter-spacing:.04em;margin-bottom:4px}
.receipt .r-s{text-align:center;color:var(--faint);font-size:10px;margin-bottom:12px}
.receipt .r-line{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dotted rgba(255,255,255,.08)}
.receipt .r-total{display:flex;justify-content:space-between;gap:8px;padding:10px 0 6px;color:var(--ink);font-size:12px}

.menu-list{display:flex;flex-direction:column}
.mi{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair)}
.mi:last-child{border-bottom:0}
.mi b{display:block;font-size:12.5px;color:var(--ink);font-weight:550}
.mi span{display:block;font-size:11px;color:var(--faint)}
.mi .mono{color:var(--gold);font-size:12px}

.qr{width:220px;height:220px;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);gap:1px;padding:10px;margin:0 auto;background:#f7f0e4;border-radius:8px}
.qr i{background:transparent}
.qr i.on{background:#141210}
.qr-meta{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:10.5px;color:var(--faint)}

.house-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.house{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.h-img{height:130px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(217,180,137,.28),rgba(80,90,100,.2));font-family:var(--mono);font-size:11px;color:var(--sub);letter-spacing:.1em}
.h-b{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.h-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.h-h h3{font-size:13.5px;margin:0}
.h-h b{font-family:var(--mono);font-size:12.5px;color:var(--gold);white-space:nowrap}
.h-m{display:flex;gap:12px;align-items:center;font-size:10.5px;color:var(--faint);font-family:var(--mono);flex-wrap:wrap}
.house .actions{margin-top:auto}

.auth-wrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;align-items:center;min-height:calc(100vh - 220px)}
.auth-card{border:1px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.03);padding:28px;box-shadow:0 30px 80px -50px rgba(0,0,0,.9);width:100%;max-width:420px;justify-self:start}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-brand b{display:block;font-size:14px;color:var(--ink)}
.auth-brand span span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.auth-card h1{margin:0 0 6px;font-size:24px;letter-spacing:-.02em}
.auth-links{display:flex;gap:8px;justify-content:center;margin-top:16px;font-size:11px;color:var(--faint)}
.auth-links a:hover{color:var(--ink)}
.auth-side{max-width:420px}
.shell.auth{min-height:100vh;display:block}
.shell.auth .main{margin:0 auto;width:100%;max-width:1080px;padding-top:64px}
.shell.auth .foot{margin-top:40px}
@media (max-width:1100px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .house-grid{grid-template-columns:1fr}
  .auth-wrap{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-card{justify-self:center}
}
@media (max-width:680px){
  .product-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .form .two,.form .three{grid-template-columns:1fr}
  .mini{grid-template-columns:1fr}
  .logbox{height:260px}
}

/* ── 可访问性与工具类（重构补充） ─────────────────────── */
/* 筛选/切换用 hidden 属性而不是内联 display，状态可被读屏感知 */
[hidden]{display:none!important}

/* 顶栏时钟：等宽数字，宽度固定，秒跳变不推动右侧按钮 */
.clock{font-size:11px;min-width:58px;text-align:right;font-variant-numeric:tabular-nums}

/* 数据桥状态（/assets/live.js）：实时 / 未连接 / 连接中 */
#live-src{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;color:var(--faint);white-space:nowrap}
#live-src::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--faint);flex:none}
#live-src[data-state="wait"]{color:var(--warn)}
#live-src[data-state="wait"]::before{background:var(--warn)}
#live-src[data-state="ok"]{color:var(--ok)}
#live-src[data-state="ok"]::before{background:var(--ok);box-shadow:0 0 8px rgba(159,195,166,.7)}
#live-src[data-state="off"]{color:var(--danger)}
#live-src[data-state="off"]::before{background:var(--danger)}
/* 取数失败时 KPI 数字降级显示，避免把"需登录"当成真实数字读 */
.kpi .v[data-state="off"]{color:var(--faint);font-size:18px}

/* 工具条里的搜索按钮不要折行（"搜索（按 /）" 在窄列会被拆成两行） */
.toolbar .icon-btn{white-space:nowrap;flex:none}

/* 键盘焦点：只在键盘操作时出现，鼠标点击不闪边框 */
:where(a,button,summary,[role="button"],input,select,textarea):focus{outline:none}
:where(a,button,summary,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;
}
.palette-box input:focus-visible{outline-offset:-3px}

/* 跳到主内容：平时移出屏幕，聚焦时才出现 */
.skip-link{
  position:fixed;left:12px;top:12px;z-index:100;
  transform:translateY(-200%);transition:transform .16s var(--ease);
  padding:9px 14px;border-radius:10px;border:1px solid var(--hair-strong);
  background:#111013;color:var(--ink);font-size:12px;
}
.skip-link:focus-visible{transform:none}

/* 仅供读屏的文字 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 间距工具：代替散落在正文里的 style="margin-top:14px" */
.mt-1{margin-top:6px}
.mt-2{margin-top:10px}
.mt-3{margin-top:14px}
.mt-4{margin-top:18px}
.mb-1{margin-bottom:6px}
.mb-2{margin-bottom:10px}
.mb-3{margin-bottom:14px}
.text-muted{color:var(--sub)}
.text-faint{color:var(--faint)}

/* 打印：去掉背景与固定层，保留正文 */
@media print{
  body{background:#fff;color:#111}
  body::before,body::after,#stars,.topbar,.sidebar,.palette,#toast,.foot .links,.skip-link{display:none!important}
  .main{padding:0}
  .panel,.card,.row{border-color:#ccc;background:none;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}