:root{color-scheme:light;--surface:#fff;--canvas:#f5f7fb;--ink:#202b43;--subtle:#64748b;--line:#e4e9f1;--inset:#f6f8fc;--accent:#2d5deb}
:root[data-theme=dark]{color-scheme:dark;--surface:#17243a;--canvas:#0c1525;--ink:#e3ebf8;--subtle:#a2b2ca;--line:#30415a;--inset:#111c30;--accent:#779aff}
:root{color:var(--ink);background:var(--canvas)}
header,.card,.btn.secondary,.login-wrap,input,select{background:var(--surface);border-color:var(--line);color:var(--ink)}
p,.muted,.note,.stat .label,.endpoint,.legend,.chart-labels,.model-name small,.login-bottom,.link-btn,footer,.crumb,.crumb-current{color:var(--subtle)}
.card,.key-box,.tag,.setting,.model,.chart,.guide-step{border-color:var(--line)}
.key-box,.guide-step code,.demo,.model-icon{background:var(--inset);color:var(--subtle)}
.key-box code,.endpoint code,.guide-step code,.reward{color:var(--accent)}
.tag{color:var(--subtle)}
.checkin{background:linear-gradient(140deg,var(--surface) 45%,var(--inset))}
.reward small,.day{color:var(--subtle)}
.day span{background:var(--surface);border-color:var(--line)}
.primary .label,.primary .note{color:#e0e9ff}
.login-form .brand{color:var(--ink)}
.theme-control{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:var(--subtle)}
.theme-control select{padding:7px 9px;font-size:14px;min-height:36px}
.login-theme{display:flex;justify-content:flex-end;margin-bottom:28px}
.top-actions{gap:12px;flex-wrap:wrap}header{height:auto;min-height:82px;gap:16px;padding-top:12px;padding-bottom:12px}
.top-actions .demo{white-space:nowrap}
.notice{margin-bottom:24px;border:1px solid var(--line);border-radius:9px;background:var(--inset);padding:14px 18px;color:var(--subtle);font-size:14px;line-height:1.7}
.admin-context{font-size:14px;line-height:1.8}.admin-context strong{display:block;color:#e3ebf8}
:root[data-theme=dark] .badge{background:#173e38;color:#9ce3c6}
:root[data-theme=dark] .gift,:root[data-theme=dark] .avatar,:root[data-theme=dark] .day.done span{background:#263c68;color:#a9c2ff;border-color:#3b5688}
:root[data-theme=dark] .callout{background:#1b2c49;border-color:#31476d;color:#b5c9ed}
:root[data-theme=dark] .callout strong{color:#c9dbff}
:root[data-theme=dark] .bar{background:#354f7e}
:root[data-theme=dark] .bar.current{background:#8aabff}
:root[data-theme=dark] .login-form .demo-entry{background:#263c68;color:#c0d1ff}
:root[data-theme=dark] .login-bottom button{color:#9ab8ff}
:root[data-theme=dark] .switch:not(.on){background:#4d607b}
:root[data-theme=dark] #toast{background:#dbe7fc;color:#12203b}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:1100px){header{align-items:flex-start;flex-direction:column}.top-actions{width:100%}}
@media(max-width:700px){header{min-height:70px;justify-content:center}.theme-control{margin-left:auto}.top-actions .avatar{display:none}.setting{flex-wrap:wrap}.save-row{align-items:flex-start;flex-wrap:wrap}.login-theme{margin-bottom:25px}footer{flex-wrap:wrap}.theme-control span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}