/* CloudServer UI v2 unified auth layer: TaskHub section 8 + CC Switch */
:root{color-scheme:light;--bg:#f6f7f9;--card:#ffffff;--surface:#ffffff;--panel:#ffffff;--fg:#16181d;--ink:#16181d;--muted:#5b6370;--line:#e3e7ec;--border:#e3e7ec;--accent:#4f46e5;--accent-strong:#4338ca;--on-accent:#ffffff;--coral:#4338ca;--clay:#4338ca;--soft:#f1f3f6;--err:#dc2626;--danger:#dc2626;--focus:#4338ca;--text:#16181d;--surface-2:#f1f3f6;--bg-hover:#eef0f4;--border-strong:#d4d9e0;--accent-soft:color-mix(in srgb,var(--accent) 10%,var(--surface));--accent-faint:color-mix(in srgb,var(--accent) 5%,var(--surface));--glass:color-mix(in srgb,var(--surface) 88%,transparent);--glass-strong:color-mix(in srgb,var(--surface) 95%,transparent);--glass-border:color-mix(in srgb,var(--border) 78%,transparent);--shadow-glass:0 18px 48px -24px rgba(22,24,29,.24);--r-xs:10px;--r-sm:12px;--r-md:16px;--r-lg:20px;--r-pill:999px;--shadow-card:0 1px 2px rgba(22,24,29,.04),0 10px 28px -18px rgba(22,24,29,.16)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0e1013;--card:#171a20;--surface:#171a20;--panel:#171a20;--fg:#eceef2;--ink:#eceef2;--muted:#99a2b0;--line:#2b313c;--border:#2b313c;--accent:#8b93ff;--accent-strong:#a5adff;--on-accent:#0e1013;--coral:#a5adff;--clay:#a5adff;--soft:#20242c;--err:#f87171;--danger:#f87171;--focus:#a5adff;--text:#eceef2;--surface-2:#20242c;--bg-hover:#262b34;--border-strong:#3a4250;--accent-soft:color-mix(in srgb,var(--accent) 16%,var(--surface));--accent-faint:color-mix(in srgb,var(--accent) 7%,var(--surface));--glass:color-mix(in srgb,var(--surface) 82%,transparent);--glass-strong:color-mix(in srgb,var(--surface) 90%,transparent);--glass-border:color-mix(in srgb,var(--border) 78%,transparent);--shadow-glass:0 18px 48px -24px rgba(0,0,0,.6);--shadow-card:0 1px 2px rgba(0,0,0,.35),0 12px 32px -18px rgba(0,0,0,.6)}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#0e1013;--card:#171a20;--surface:#171a20;--panel:#171a20;--fg:#eceef2;--ink:#eceef2;--muted:#99a2b0;--line:#2b313c;--border:#2b313c;--accent:#8b93ff;--accent-strong:#a5adff;--on-accent:#0e1013;--coral:#a5adff;--clay:#a5adff;--soft:#20242c;--err:#f87171;--danger:#f87171;--focus:#a5adff;--text:#eceef2;--surface-2:#20242c;--bg-hover:#262b34;--border-strong:#3a4250;--accent-soft:color-mix(in srgb,var(--accent) 16%,var(--surface));--accent-faint:color-mix(in srgb,var(--accent) 7%,var(--surface));--glass:color-mix(in srgb,var(--surface) 82%,transparent);--glass-strong:color-mix(in srgb,var(--surface) 90%,transparent);--glass-border:color-mix(in srgb,var(--border) 78%,transparent);--shadow-glass:0 18px 48px -24px rgba(0,0,0,.6)}}
body{background:radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 32rem),radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--accent-strong) 8%,transparent),transparent 30rem),var(--bg)!important}
.auth,.account{width:min(520px,calc(100% - 28px));margin:8vh auto}
.card,.panel{background:var(--glass)!important;border:1px solid var(--glass-border)!important;border-radius:var(--r-md)!important;box-shadow:var(--shadow-glass),var(--shadow-card)!important;backdrop-filter:blur(20px) saturate(1.08);-webkit-backdrop-filter:blur(20px) saturate(1.08)}
.eyebrow{color:var(--accent-strong)!important;font-weight:800}
input{background:var(--soft)!important;border-color:var(--line)!important;color:var(--ink)!important;border-radius:var(--r-xs)!important}
button{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;border-radius:var(--r-xs)!important}
.quiet,.btn,.linkbtn{background:var(--soft)!important;border-color:var(--line)!important;color:var(--ink)!important}
.danger{background:color-mix(in srgb,var(--danger) 12%,var(--surface))!important;border-color:color-mix(in srgb,var(--danger) 46%,var(--border))!important;color:var(--danger)!important}
.error{background:color-mix(in srgb,var(--danger) 10%,var(--surface))!important;color:var(--danger)!important}
:where(a,button,input):focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px!important}
.theme-toggle{position:fixed;right:16px;bottom:16px;width:44px;height:44px;padding:0;border-radius:var(--r-pill)!important;background:var(--glass-strong)!important;border:1px solid var(--glass-border)!important;box-shadow:var(--shadow-glass)!important}
main,.auth,.account{animation:uiAuthIn .18s ease-out both}
@keyframes uiAuthIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){main,.auth,.account{animation:none!important}}