/* 基础：重置、字体、按钮、表单、芯片、状态点、对话框、提示条。所有交互状态走 aria-* 属性（aria-current / aria-pressed / aria-selected）。 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 浏览器自带表面也走调色板：选区、光标、滚动条、数字 */
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text)}
input,textarea{caret-color:var(--accent)}
html{scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
.tb,.chip,.pill,.stat b{font-variant-numeric:tabular-nums}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
body.app{margin:0;min-height:100vh;background:var(--frame,var(--bg));color:var(--text);font-family:var(--body)}
:root[data-style=classic] body.app{background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
p,li{text-wrap:pretty}
:root:not([data-style=classic]) body.app h1,:root:not([data-style=classic]) body.app h2{text-transform:uppercase}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.kicker{font-family:var(--display);font-size:14px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;font-weight:600}
:root[data-style=classic] .kicker{letter-spacing:.06em}

/* 按钮：杂志风的主按钮是青柠底 + 硬阴影，按下时阴影收拢 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line-strong);background:var(--surface-solid);color:var(--text);
  border-radius:var(--r-ctl);padding:8px 16px;cursor:pointer;font-weight:500;line-height:1.25;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none!important}
.btn[aria-busy=true]{cursor:progress;opacity:.75}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 8%,var(--surface-solid));border-color:var(--danger)}
.btn.sm{padding:4px 11px;font-size:13px;border-radius:calc(var(--r-ctl) - 3px)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2);border-color:transparent}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.btn.primary{background:var(--lime);color:#2b1a0f;border:0;box-shadow:4px 4px 0 var(--lime-deep);font-family:var(--display);font-size:17px;letter-spacing:.4px;font-weight:600;padding:9px 20px}
:root:not([data-style=classic]) .btn.primary{text-transform:uppercase}
.btn.primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lime-deep)}
.btn.primary:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--lime-deep)}
:root[data-style=classic] .btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);font-family:var(--body);text-transform:none;font-size:15px}
:root[data-style=classic] .btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn.primary.sm{font-size:14px;padding:5px 13px;box-shadow:3px 3px 0 var(--lime-deep)}
.btn[aria-pressed=true]{background:var(--ink);color:var(--ink-text);border-color:var(--ink)}
.linkbtn{border:0;background:none;color:var(--accent);cursor:pointer;padding:2px 4px;border-radius:6px;font-size:13px}
.linkbtn:hover{text-decoration:underline;text-underline-offset:.2em}
.linkbtn:disabled{color:var(--muted);cursor:not-allowed;text-decoration:none}

/* 表单 */
input[type=text],input[type=search],input[type=number],input[type=url],select,textarea{border:1.5px solid var(--line-strong);background:var(--surface-solid);border-radius:var(--r-ctl);padding:8px 12px;min-width:0;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed;background:var(--surface-2)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea{width:100%;resize:vertical}
label.field{display:grid;gap:4px;font-size:13px;color:var(--muted)}
label.field>span{font-weight:600;color:var(--text);font-size:13.5px}
label.field small{font-size:12px;line-height:1.4}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.switch input{appearance:none;width:42px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--muted) 35%,transparent);position:relative;cursor:pointer;transition:background .15s;flex:none;border:0;padding:0}
.switch input::after{content:"";position:absolute;inset:3px auto 3px 3px;width:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.switch input:checked{background:var(--accent-2)}
.switch input:checked::after{transform:translateX(18px)}
.switch input:disabled{opacity:.5;cursor:not-allowed}

/* 芯片、状态点、徽标 */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted);white-space:nowrap}
.chip.ok{color:var(--st-done);background:color-mix(in srgb,var(--st-done) 15%,transparent)}
.chip.run{color:var(--st-run);background:color-mix(in srgb,var(--st-run) 17%,transparent)}
.chip.bad{color:var(--st-fail);background:color-mix(in srgb,var(--st-fail) 14%,transparent)}
.chip.unsure{color:var(--st-unsure);background:color-mix(in srgb,var(--st-unsure) 16%,transparent)}
.chip.accent{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--st-pend);flex:none;box-shadow:0 0 0 1px var(--line)}
.dot[data-s=done],.dot[data-s=ok],.dot[data-s=online]{background:var(--st-done)}
.dot[data-s=submitted],.dot[data-s=submitting],.dot[data-s=filling],.dot[data-s=ready],.dot[data-s=run],.dot[data-s=slow]{background:var(--st-run)}
.dot[data-s=failed],.dot[data-s=bad],.dot[data-s=offline]{background:var(--st-fail)}
.dot[data-s=unsure]{background:var(--st-unsure)}
.dot[data-s=run],.dot[data-s=submitted],.dot[data-s=slow]{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--st-run) 28%,transparent)}}

/* 表格 */
.tb{width:100%;border-collapse:collapse;font-size:13.5px}
.tb th,.tb td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:start}
.tb th{font-family:var(--display);font-size:14px;letter-spacing:.4px;color:var(--muted);font-weight:600}
.tb td.num,.tb th.num{text-align:end;font-variant-numeric:tabular-nums}

/* 提示条 + 对话框 */
.toast{position:fixed;inset-inline:0;bottom:22px;margin-inline:auto;width:max-content;max-width:min(92vw,640px);background:var(--ink);color:var(--ink-text);border-radius:14px;padding:10px 18px;
  font-size:14px;box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 25%,transparent);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);z-index:90}
.toast[data-show="1"]{opacity:1;transform:none}
.toast[data-k=bad]{background:var(--danger);color:#fff}
dialog{border:2px solid var(--ink);border-radius:var(--r-card);background:var(--surface-solid);color:var(--text);padding:0;max-width:min(92vw,480px);box-shadow:8px 8px 0 color-mix(in srgb,var(--ink) 30%,transparent)}
dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}
dialog .dlg{padding:22px 24px;display:grid;gap:14px}
dialog .dlg h3{font-size:22px}
dialog .dlg-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
:root[data-style=classic] dialog{border:1px solid var(--line-strong);box-shadow:0 20px 50px #0004}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 2026-10-29 样式全量修复：浏览器默认 small=smaller（13px 下约 10.8px）低于 11px 底线；强调/状态色文字提对比度 */
small{font-size:max(var(--fs-xs),.85em)}
.linkbtn{color:var(--accent-text)}
.btn.danger{color:var(--danger-text)}
.chip.ok{color:var(--st-done-text)}.chip.run{color:var(--st-run-text)}.chip.bad{color:var(--st-fail-text)}
.chip.accent{color:var(--accent-text)}