/* css/base.css — reset + 基础组件(按钮4款/卡片/输入/开关/分段/胶囊/等级/Toast/Modal/空状态)
 * 修改记录:
 *  2026-10-10 06:20:00  P1 初建:骨架(新壳/主题/状态树/组件)   版本 v2.0.0-p1
 */
*{box-sizing:border-box}html,body{margin:0}body{font:var(--fs-md)/1.55 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary)}h1,h2,h3,h4{margin:0}button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
html.theme-anim *{transition:background-color .25s,border-color .25s,color .25s,fill .25s,stroke .25s!important}
.btn{height:36px;padding:0 16px;border-radius:var(--r-md);font:600 var(--fs-sm) var(--font);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--btn-bg);color:var(--on-primary);box-shadow:var(--sh-1)}.btn-primary:not(:disabled):hover{filter:brightness(1.08)}
.btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text)}.btn-secondary:not(:disabled):hover{border-color:var(--primary-bd);color:var(--primary)}
.btn-ghost{background:transparent;color:var(--text-2)}.btn-ghost:not(:disabled):hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.btn-sm{height:28px;padding:0 10px;font-size:var(--fs-xs)}.btn-icon{width:32px;padding:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s4)}
.card h3{font-size:var(--fs-lg);margin-bottom:var(--s3)}.card h4{font-size:var(--fs-xs);color:var(--text-2);margin:var(--s4) 0 var(--s2);text-transform:uppercase;letter-spacing:.04em}
input[type=number],input[type=text],input[type=email],select,textarea{height:32px;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:0 10px;font:inherit;background:var(--surface);color:var(--text)}
textarea{height:auto;padding:8px 10px}input[type=number]{font-family:var(--mono);width:80px}
.field{display:flex;flex-direction:column;gap:4px;margin:var(--s3) 0;font-size:var(--fs-sm)}.field input,.field select,.field textarea{width:100%}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-md);padding:3px}.seg button{border:0;background:none;padding:5px 14px;border-radius:8px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer}.seg button.on{background:var(--surface);color:var(--primary);font-weight:600;box-shadow:var(--sh-1)}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:var(--fs-xs);border:1px solid var(--border-strong);color:var(--text-2)}.chip.on{background:var(--primary-50);border-color:var(--primary-bd);color:var(--primary)}
.grade{display:inline-block;min-width:18px;padding:0 5px;border-radius:4px;font:600 11px/18px var(--mono);text-align:center;border:1px solid currentColor}.g-a{color:var(--grade-a)}.g-b{color:var(--grade-b)}.g-c{color:var(--grade-c)}.g-d{color:var(--grade-d)}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--text-2)}
.hint{font-size:var(--fs-xs);color:var(--text-3)}.mono{font-family:var(--mono)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s2);color:var(--text-2);min-height:280px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--s6);background:var(--surface-2)}
.empty .ico{font-size:36px;line-height:1;opacity:.85}.empty b{color:var(--text);font-size:var(--fs-lg)}
.badge{display:inline-block;font-size:11px;padding:0 6px;border-radius:999px;background:var(--warning-bg);color:var(--warning);font-weight:600;line-height:18px}
#toasts{position:fixed;right:24px;max-width:min(420px,calc(100vw - 32px));top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}
.toast{background:var(--toast-bg);color:var(--toast-fg);padding:10px 16px;border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:var(--fs-sm);max-width:360px;pointer-events:auto;animation:tin .2s ease-out;border-left:4px solid var(--primary)}
.toast.success{border-left-color:var(--success)}.toast.warning{border-left-color:var(--warning)}.toast.error{border-left-color:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:150;padding:var(--s4)}
.modal.open{display:flex}.modal-box{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:var(--s5);width:100%;max-width:420px;position:relative;max-height:90vh;overflow:auto}
.modal-box h3{margin-bottom:var(--s2)}.modal-close{position:absolute;right:10px;top:8px}
.hidden{display:none!important}

/* ===== P5 工具类(替代内联样式,2026-10-10 14:20) ===== */
.u-full{width:100%}.mw-full{max-width:100%}.ta-c{text-align:center}.w-40p{width:40%}.fs-sm{font-size:var(--fs-sm)}
.c-start{color:var(--grade-a)}.c-end{color:var(--danger)}.row-8{display:flex;gap:8px}.my-6{margin:6px 0}
.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mb-4{margin-bottom:4px}.mb-14{margin-bottom:14px}
.qr-img{max-width:280px;width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}
.w-40{width:40px} .w-42{width:42px} .w-44{width:44px} .w-46{width:46px} .w-48{width:48px} .w-50{width:50px} .w-52{width:52px} .w-54{width:54px} .w-56{width:56px} .w-58{width:58px} .w-60{width:60px} .w-62{width:62px} .w-64{width:64px} .w-66{width:66px} .w-68{width:68px} .w-70{width:70px} .w-72{width:72px} .w-74{width:74px} .w-76{width:76px} .w-78{width:78px} .w-80{width:80px} .w-82{width:82px} .w-84{width:84px} .w-86{width:86px} .w-88{width:88px} .w-90{width:90px} .w-92{width:92px} .w-94{width:94px} .w-96{width:96px} .w-98{width:98px} .w-100{width:100px} .w-102{width:102px} .w-104{width:104px} .w-106{width:106px} .w-108{width:108px} .w-110{width:110px} .w-112{width:112px} .w-114{width:114px} .w-116{width:116px} .w-118{width:118px} .w-120{width:120px}
.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}