*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
::selection{background:var(--primary-soft);color:var(--text)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-6)}
.mono{font-family:var(--font-mono);font-variant-ligatures:none}
.muted{color:var(--muted)}
.t2{color:var(--text-2)}

/* ---------- 顶栏 ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(10,12,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:var(--space-6);height:64px}
.brand{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.brand-mark{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(150deg,var(--primary) 0%,#12a06a 100%);
  display:grid;place-items:center;color:var(--primary-ink);
  font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:-.5px;
}
.brand-name{font-size:var(--fs-14);font-weight:600;letter-spacing:.02em}
.brand-name em{font-style:normal;color:var(--muted);font-weight:400;margin-left:6px;font-size:var(--fs-12)}
.nav-links{display:flex;align-items:center;gap:var(--space-5);margin-left:var(--space-4)}
.nav-links a{display:inline-flex;align-items:center;height:32px;padding:0 2px;font-size:var(--fs-13);color:var(--text-2);transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-links a.on{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:var(--radius-sm);
  font-size:var(--fs-13);font-weight:500;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--primary-ink);font-weight:600}
.btn-primary:hover{background:#2fd391}
.btn-ghost{color:var(--text-2);border:1px solid var(--line)}
.btn-ghost:hover{color:var(--text);border-color:#33404c;background:var(--surface-2)}
.btn-quiet{color:var(--text-2);padding:0 10px}
.btn-quiet:hover{color:var(--text);background:var(--surface-2)}
.btn-sm{height:30px;padding:0 12px;font-size:var(--fs-12)}
.btn-lg{height:46px;padding:0 22px;font-size:var(--fs-14)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-danger-ghost{color:var(--danger);border:1px solid rgba(255,109,109,.28)}
.btn-danger-ghost:hover{background:var(--danger-soft)}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:22px;padding:0 8px;border-radius:var(--radius-sm);
  font-size:var(--fs-11);font-weight:500;letter-spacing:.02em;white-space:nowrap;
  border:1px solid var(--line);color:var(--text-2);background:var(--surface-2);
}
.tag-ok{color:var(--primary);border-color:rgba(51,227,156,.28);background:var(--primary-soft)}
.tag-warn{color:var(--warn);border-color:rgba(242,179,61,.28);background:var(--warn-soft)}
.tag-off{color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ---------- 面板 ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.panel-head{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--line-soft);
}
.panel-title{font-size:var(--fs-14);font-weight:600}
.panel-head .spacer{margin-left:auto}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:var(--fs-11);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  padding:10px var(--space-5);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:14px var(--space-5);border-bottom:1px solid var(--line-soft);font-size:var(--fs-13);color:var(--text-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.015)}
td.num{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-12)}

/* ---------- 输入 ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:var(--fs-12);color:var(--text-2)}
.input{
  height:44px;padding:0 14px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-size:var(--fs-14);transition:border-color .18s,box-shadow .18s;
  width:100%;
}
.input::placeholder{color:#5D6B78}
.input:focus{outline:none;border-color:var(--primary-dim);box-shadow:0 0 0 3px var(--primary-soft)}

/* ---------- 代码块 ---------- */
.code{
  background:#07090B;border:1px solid var(--line);border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.9;
  padding:var(--space-4);overflow:auto;
}
.code .c-dim{color:#7F8D9B}
.code .c-key{color:#7FD8FF}
.code .c-str{color:var(--primary)}
.code .c-fn{color:#E7C07B}

/* ---------- 提示条 ---------- */
.hint{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--radius-md);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-12);color:var(--text-2);line-height:1.6;
}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line-soft);padding:var(--space-7) 0 var(--space-6);margin-top:var(--space-9)}
.foot-in{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:10px;min-width:120px}
.foot-col h4{margin:0 0 4px;font-size:var(--fs-11);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.foot-col a{display:block;padding:3px 0;font-size:var(--fs-13);color:var(--text-2)}
.foot-col a:hover{color:var(--text)}
.foot-note{margin-left:auto;text-align:right;font-size:var(--fs-12);color:var(--muted);line-height:1.9}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media(max-width:760px){
  .panel{overflow-x:auto}
  .panel table{min-width:820px}
  td,th{white-space:nowrap}
  .wrap{padding:0 var(--space-4)}
  .nav-links{display:none}
  .nav-in{height:60px;gap:var(--space-4)}
}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}