/* Shell-level theme: reuses the dashboard's CSS variables (defined in dashboard.css) and adds auth screens + the bottom tab bar. Auto dark/light via prefers-color-scheme, with a manual .light override the dashboard already toggles on . */ @media (prefers-color-scheme: light) { :root:not(.dark):not(.light) { color-scheme: light; } } [hidden] { display: none !important; } body { min-height: 100vh; } /* Auth screens */ .auth-wrap { display: grid; place-items: center; min-height: 100vh; padding: 24px; } .auth-card { width: min(420px, 100%); padding: 28px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .auth-card h1 { font-size: 1.5rem; margin-bottom: 6px; } .auth-card p.sub { color: var(--muted); margin-bottom: 20px; font-size: .92rem; } .auth-card label { display: grid; gap: 6px; margin-bottom: 14px; font-size: .82rem; font-weight: 700; color: var(--muted); } .auth-card .primary { width: 100%; min-height: 44px; margin-top: 6px; } .auth-links { margin-top: 16px; display: flex; justify-content: space-between; font-size: .85rem; } .auth-links a { color: #60a5fa; cursor: pointer; text-decoration: none; } .auth-msg { margin-top: 14px; min-height: 1.2em; font-size: .88rem; } .auth-msg.err { color: #fca5a5; } .auth-msg.ok { color: #86efac; } .strength { height: 6px; border-radius: 4px; background: var(--panel2); overflow: hidden; margin-top: -8px; margin-bottom: 14px; } .strength > i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; } /* Bottom tab bar */ .tabbar { position: sticky; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--panel) 96%, transparent); border-top: 1px solid var(--line); } .tabbar button { display: grid; gap: 2px; place-items: center; padding: 10px 4px; border: 0; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 700; } .tabbar button.active { color: #60a5fa; } .tabbar button:disabled { opacity: .4; } .tabbar .tab-ico { font-size: 1.15rem; line-height: 1; } .tab-badge { font-size: .58rem; font-weight: 800; color: #facc15; }