:root{--bg:#f5f6fb;--card:#fff;--ink:#1c2033;--mut:#6b7190;--pri:#f57c3d;--pri2:#ff9f5a;--line:#e8eaf3;--r:16px}
@media(prefers-color-scheme:dark){:root{--bg:#12141f;--card:#1b1e2e;--ink:#eef0fa;--mut:#9aa0bd;--line:#2a2e44}}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 "Inter",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
.muted{color:var(--mut)}.logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:800}
/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 15% 10%,#ffd9bf,transparent 40%),radial-gradient(circle at 90% 90%,#cfe3ff,transparent 40%),var(--bg)}
.auth-card{display:grid;grid-template-columns:1fr 1fr;width:min(940px,100%);background:var(--card);border-radius:24px;overflow:hidden;box-shadow:0 20px 60px #1c203322}
.auth-hero{padding:48px;background:linear-gradient(160deg,var(--pri),#d9531e);color:#fff}.auth-hero h1{font-size:28px;margin:20px 0 8px}.auth-hero ul{list-style:none;padding:0;margin-top:28px;line-height:2.1}
.auth-form{padding:44px}.auth-form h2{margin:0}.auth label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px}
.auth input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:inherit}.auth input:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 4px #f57c3d22}
.auth .row{display:flex;gap:8px}.auth .row .btn{width:auto;margin:0;white-space:nowrap}
.auth .btn{display:block;width:100%;margin-top:22px;padding:13px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:700;font-size:16px;cursor:pointer;transition:.2s}
.auth .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #f57c3d55}.auth .btn.ghost{background:#f57c3d18;color:var(--pri)}.auth .btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.tabs{display:flex;gap:6px;background:var(--bg);padding:5px;border-radius:12px;margin-top:20px}.tab{flex:1;padding:9px;border:0;border-radius:9px;background:none;color:var(--mut);font-weight:600;cursor:pointer}.tab.on{background:var(--card);color:var(--pri);box-shadow:0 2px 8px #0001}
.fine{font-size:12px;color:var(--mut);margin-top:20px}.toast{position:fixed;top:18px;right:18px;padding:12px 18px;border-radius:12px;color:#fff;z-index:99;box-shadow:0 8px 24px #0003}.toast.ok{background:#1faa6b}.toast.err{background:#e5484d}
/* app shell */
.side{position:fixed;inset:0 auto 0 0;width:250px;background:var(--card);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;z-index:10;transition:.25s}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:22px}.side nav{flex:1;overflow:auto}
.side a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;margin-bottom:2px}.side a:hover{background:var(--bg)}.side a.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:600}.side .out{color:#e5484d}
.main{margin-left:250px}.top{display:flex;align-items:center;gap:14px;padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.top h1{font-size:20px;margin:0;flex:1}
.user{display:flex;align-items:center;gap:10px}.user img,.av{width:38px;height:38px;border-radius:50%;object-fit:cover}.av{display:grid;place-items:center;background:var(--pri);color:#fff;font-weight:700}.user a{font-size:13px;text-decoration:none}
.burger{display:none;border:0;background:none;font-size:22px;color:var(--ink)}.content{padding:28px}
.hello{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px}.hello h2{margin:0}
.switch{display:flex;align-items:center;gap:10px;background:var(--card);padding:10px 16px;border-radius:var(--r);border:1px solid var(--line);cursor:pointer}.switch input{display:none}.switch i{width:42px;height:24px;border-radius:99px;background:#c9cde0;position:relative;transition:.2s}.switch i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+i{background:#e5484d}.switch input:checked+i:after{left:21px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.stat{display:block;padding:22px;border-radius:var(--r);color:#fff;text-decoration:none;box-shadow:0 10px 24px #0002;transition:.2s}.stat:hover{transform:translateY(-3px)}.stat small{opacity:.9;font-size:13px}.stat strong{display:block;font-size:36px;line-height:1.2}
.c1{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.c2{background:linear-gradient(135deg,#f59e0b,#f97316)}.c3{background:linear-gradient(135deg,#ef4444,#f43f5e)}.c4{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.c5{background:linear-gradient(135deg,#14b8a6,#0d9488)}.c6{background:linear-gradient(135deg,#22c55e,#16a34a)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}.panel h3{margin-top:0}
.bar{display:grid;grid-template-columns:120px 1fr 40px;gap:12px;align-items:center;margin:12px 0}.bar div{height:10px;background:var(--bg);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--pri2));border-radius:9px}.bar b{text-align:right}
@media(max-width:820px){.auth-card{grid-template-columns:1fr}.auth-hero{padding:28px}.auth-form{padding:28px}.side{transform:translateX(-100%)}.side.open{transform:none}.main{margin-left:0}.burger{display:block}.user b,.user a{display:none}.content{padding:16px}}
/* app feel */
.install-btn{border:0;border-radius:99px;padding:8px 14px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:700;cursor:pointer}.install-btn[hidden]{display:none}
.tabbar{display:none}html{-webkit-tap-highlight-color:transparent}body{overscroll-behavior-y:none}
@media(max-width:820px){
 .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--mut);text-decoration:none;gap:2px}.tabbar a span{font-size:20px}.tabbar a.on{color:var(--pri);font-weight:700}
 .main{padding-bottom:76px}.top{padding-top:calc(12px + env(safe-area-inset-top))}.side{padding-bottom:80px}
}

/* mobile login: form first, intro text after the form */
@media(max-width:820px){
 .auth{align-items:start;padding:12px}
 .auth-card{display:flex;flex-direction:column;border-radius:20px}
 .auth-form{order:1;padding:24px 20px}
 .auth-hero{order:2;padding:24px 20px}
 .auth-hero h1{font-size:22px;margin:14px 0 6px}
 .auth-hero ul{margin-top:14px;line-height:1.9}
}
.auth .lnk{margin:12px 0 0;font-size:13px;text-align:right}.auth .lnk a,.auth .fine a{color:var(--pri);text-decoration:none;font-weight:600}.auth .ph{margin:18px 0 0;font-size:18px}
.auth [hidden]{display:none!important}
/* never scroll sideways on phones */
html,body{max-width:100%}body{overflow-x:clip}.main,.content{min-width:0;max-width:100%}
.content select,.content input,.content textarea{max-width:100%;min-width:0}
.card,.panel,.stat{min-width:0}.card h3,.meta div{overflow-wrap:anywhere}
.cards{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.toolbar input{min-width:0}
@media(max-width:820px){.toolbar{flex-wrap:wrap}.toolbar input{flex:1 1 100%}}

/* normal page scrolling: no nested scroll areas; lock background only while a popup is open */
html{overflow-y:auto;-webkit-overflow-scrolling:touch}body{min-height:100vh;overscroll-behavior-y:auto}
html:has(dialog[open]),body:has(dialog[open]){overflow:hidden}dialog .db{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.side nav{overscroll-behavior:contain}

/* logout icon always visible in the top bar (also on phones / in the app) */
.user a.lo{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#e5484d1a;color:#e5484d;text-decoration:none;font-size:19px;line-height:1}.user a.lo:hover{background:#e5484d;color:#fff}
@media(max-width:820px){.user a.lo{display:grid}.top{gap:10px}.top h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}