:root{--bg-start:#0f0c29;--bg-mid:#302b63;--bg-end:#24243e;--surface:rgba(255,255,255,.1);--surface-strong:rgba(26,23,57,.8);--text:#f7f8ff;--muted:#bac3db;--border:rgba(255,255,255,.2);--accent:#4f46e5;--accent2:#7c3aed;--accent3:#06b6d4;--shadow:0 16px 44px rgba(9,8,30,.26);--glass-blur:blur(10px);color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme=classic]{--bg-start:#f8fafc;--bg-mid:#f1f5f9;--bg-end:#e2e8f0;--surface:#fff;--surface-strong:#fff;--text:#18243a;--muted:#596b82;--border:#dbe4ed;--accent:#1e40af;--accent2:#3b82f6;--accent3:#0891b2;--shadow:0 8px 28px rgba(26,44,78,.1);--glass-blur:none;color-scheme:light}
:root[data-theme=soft]{--bg-start:#e0e7ff;--bg-mid:#faf8ff;--bg-end:#f8fafc;--surface:rgba(255,255,255,.62);--surface-strong:rgba(255,255,255,.85);--text:#28304e;--muted:#596380;--border:rgba(124,58,237,.18);--accent:#9273dc;--accent2:#a78bfa;--accent3:#5bc9b6;--shadow:0 16px 38px rgba(97,83,151,.14);--glass-blur:blur(10px);color-scheme:light}
body{background:linear-gradient(128deg,var(--bg-start),var(--bg-mid) 55%,var(--bg-end)) fixed;color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background .3s,color .3s}a{color:var(--accent3)}.card,.tile,.auth-card .card,.nav,.tot-upgrade{background:var(--surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);color:var(--text);transition:transform .25s,box-shadow .25s}.tile:hover,.card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(24,19,65,.32)}.nav{border-radius:0 0 16px 16px}.brand{color:var(--accent3)}.brand small,.muted,.tile p,.auth-brand p,.footer-link,.nav-user,.nav-links a,dl.meta dt{color:var(--muted)}.nav-links a.active,.nav-links a:hover{color:var(--text);border-color:var(--accent3)}.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 7px 22px rgba(79,70,229,.25);transition:transform .2s,box-shadow .2s}.btn:hover{background:linear-gradient(135deg,var(--accent2),var(--accent));transform:translateY(-2px);box-shadow:0 11px 28px rgba(79,70,229,.38)}.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}.field input,.field select{background:var(--surface-strong);color:var(--text);border-color:var(--border)}.field input:focus,.field select:focus{outline:2px solid var(--accent3)}.badge{background:rgba(79,70,229,.24);color:var(--text);border:1px solid var(--border)}.tot-theme-switcher{z-index:300;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface-strong);border:1px solid var(--border);box-shadow:var(--shadow)}.tot-theme-switcher button{border:0;border-radius:50%;width:30px;height:30px;background:transparent;color:var(--text);cursor:pointer;font-size:18px;transition:transform .2s,background .2s}.tot-theme-switcher button:hover{transform:scale(1.15)}.tot-theme-switcher button[aria-pressed=true]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}.auth-wrap~.tot-theme-switcher,body>.tot-theme-switcher{position:fixed;top:18px;right:18px}.tot-upgrade{padding:14px 18px;margin:0 0 14px;display:flex;justify-content:space-between;gap:15px;align-items:center}.tot-upgrade button{color:var(--text);cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 10px}@media(max-width:700px){.nav-inner{gap:.5rem}.nav-links{order:3;min-width:100%}.container{margin:1rem auto}.card{padding:1.25rem}}
html[data-theme=classic] .room,html[data-theme=soft] .room{background:var(--bg-start);color:var(--text)}html[data-theme=classic] .room-header,html[data-theme=classic] .room-tools,html[data-theme=soft] .room-header,html[data-theme=soft] .room-tools{background:var(--surface-strong);color:var(--text);border-color:var(--border)}html[data-theme=classic] .room-tools button,html[data-theme=classic] .room-tools input,html[data-theme=soft] .room-tools button,html[data-theme=soft] .room-tools input{background:var(--surface);color:var(--text);border-color:var(--border)}html[data-theme=classic] .room-header span,html[data-theme=soft] .room-header span{color:var(--muted)}

html[data-theme] .tot-ad{background:var(--surface-strong);color:var(--text);border-color:var(--border)}html[data-theme] .tot-ad-link{color:var(--text)!important}body{animation:page-in .32s ease both}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tot-ad,.tile,.card{will-change:transform}html[data-theme] .fi-badge:has(>span){transition:transform .2s}.fi-notification{backdrop-filter:blur(14px);background:var(--surface-strong)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow)!important}.fi-ta-row:has(.fi-badge-success) .fi-badge-success{box-shadow:0 0 12px rgba(16,185,129,.45)}@keyframes online-pulse{50%{box-shadow:0 0 0 9px rgba(16,185,129,0)}}.online-pulse{box-shadow:0 0 0 0 rgba(16,185,129,.45);animation:online-pulse 2s infinite;border-radius:100%}@keyframes skeleton{50%{opacity:.45}}.loading-skeleton{height:16px;border-radius:8px;background:var(--surface);animation:skeleton 1.1s infinite alternate}html[data-theme] .fi-sidebar-item-active a{box-shadow:0 8px 18px rgba(79,70,229,.22)}@media(prefers-reduced-motion:reduce){body,.fi-sidebar-item,.online-pulse,.loading-skeleton{animation:none!important}.tile,.card,.btn{transition:none!important}}

/* topbar theme fix */
html[data-theme] .topbar{background:color-mix(in srgb,var(--surface-strong) 92%,transparent);border-bottom:1px solid var(--border);color:var(--text)}
html[data-theme=dark] .topbar{background:rgba(15,23,42,.94)}
html[data-theme=classic] .topbar{background:rgba(255,255,255,.94)}
html[data-theme=soft] .topbar{background:rgba(255,253,248,.94)}
html[data-theme] .topbar .brand-text,html[data-theme] .topbar .brand-text *,html[data-theme] .topbar .user-chip,html[data-theme] .topbar .user-chip__name,html[data-theme] .topbar .primary-nav a,html[data-theme] .topbar .nav-more,html[data-theme] .topbar .nav-more summary,html[data-theme] .topbar .nav-toggle{color:var(--text)}
html[data-theme] .topbar .brand-text small,html[data-theme] .topbar .muted{color:var(--muted)}
html[data-theme] .topbar .primary-nav a:hover,html[data-theme] .topbar .primary-nav a.active,html[data-theme] .topbar .primary-nav a[aria-current]{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text)}
html[data-theme] .topbar .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
html[data-theme] .topbar .badge{color:var(--text)}
html[data-theme] .nav-more [role=menu],html[data-theme] .nav-more>div,html[data-theme] .nav-more ul{background:var(--surface-strong);color:var(--text);border-color:var(--border)}