@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--blue:#3478f6;--blue2:#2563eb;--ink:#14243d;--muted:#8090a8;--line:#e8edf5;--bg:#f4f7fc;--white:#fff;--green:#10b981;--orange:#f59e0b;--shadow:0 12px 34px rgba(30,64,120,.07)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app{min-height:100dvh}.side{position:fixed;inset:0 auto 0 0;width:248px;background:#fff;border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 34px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#4c8bff,#2463e9);color:white;display:grid;place-items:center;font-weight:800;font-size:21px;box-shadow:0 7px 16px #3478f633}.brand b{display:block;font-size:15px}.brand small,.user-mini small{display:block;color:#91a0b6;font-size:11px;margin-top:3px}.side-caption{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#9aa8bd;padding:0 12px 12px}.side nav{display:grid;gap:5px}.nav{border:0;background:transparent;text-align:left;padding:13px 14px;border-radius:12px;color:#61738f;display:flex;gap:13px;align-items:center;font-weight:600}.nav span{font-size:18px;width:18px;text-align:center}.nav.active,.nav:hover{background:#edf4ff;color:var(--blue)}.side-bottom{margin-top:auto}.server-state{display:flex;align-items:center;gap:8px;color:#7586a0;font-size:11px;padding:13px 10px;border-bottom:1px solid var(--line)}.server-state i,.online i{width:7px;height:7px;background:#25c58a;border-radius:50%;display:inline-block}.user-mini{display:flex;align-items:center;gap:10px;padding:15px 5px 0}.user-mini b{font-size:12px}.user-mini>div:nth-child(2){min-width:0;flex:1}.user-mini button{border:0;background:none;color:#8494aa}.avatar{width:34px;height:34px;border-radius:50%;background:#e8efff;color:#3478f6;display:grid;place-items:center;font-size:11px;font-weight:800}.main{margin-left:248px;min-height:100dvh;display:flex;flex-direction:column}.top{height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;position:sticky;top:0;z-index:5}.crumb{font-size:12px;color:#99a7ba}.crumb span{padding:0 12px;color:#c3ccda}.crumb b{color:#243854}.top-right{display:flex;align-items:center;gap:18px}.online{display:flex;align-items:center;gap:8px;background:#f5f8fc;border-radius:20px;padding:9px 13px;color:#7888a1;font-size:11px}.icon-button{border:0;background:transparent;color:#74849b;font-size:20px}.screen{padding:34px 38px;flex:1;max-width:1500px;width:100%;margin:auto}.screen-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1.3px;color:#91a0b7;font-weight:800;text-transform:uppercase}.screen h1{font-size:27px;margin:8px 0 5px;letter-spacing:-.7px}.screen-head p{margin:0;color:#8b9ab0;font-size:12px}.btn{border:0;border-radius:11px;padding:12px 17px;font-weight:700;font-size:12px}.primary{background:var(--blue);color:#fff;box-shadow:0 7px 16px #3478f62b}.primary:hover{background:var(--blue2)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat,.panel,.list-card{background:#fff;border:1px solid #edf1f7;border-radius:16px;box-shadow:var(--shadow)}.stat{padding:19px}.stat label{color:#8797ad;font-size:11px}.stat strong{display:block;font-size:29px;margin:10px 0 4px;letter-spacing:-1px}.stat small{color:#8e9cb0;font-size:10px}.stat .accent{color:var(--green)}.grid-two{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}.panel{padding:22px;margin-bottom:16px}.panel h2{font-size:15px;margin:0 0 5px}.panel p{font-size:11px;color:#94a2b6;margin:0}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.ring-wrap{display:grid;place-items:center;padding:10px}.ring{width:142px;height:142px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) var(--progress,0%),#edf1f8 0)}.ring:before{content:'';position:absolute;width:112px;height:112px;background:#fff;border-radius:50%}.ring div{position:relative;text-align:center}.ring strong{display:block;font-size:26px}.ring small{font-size:10px;color:#91a0b6}.muted{color:#91a0b6}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.search{flex:1;min-width:180px}.field,input,select,textarea{width:100%;border:1px solid #e2e8f1;border-radius:10px;padding:11px 12px;background:#fff;color:#263b59;outline:none}.field:focus,input:focus,select:focus,textarea:focus{border-color:#8bb4ff;box-shadow:0 0 0 3px #3478f614}.search input{background:#fff}.list{display:grid;gap:10px}.list-card{padding:15px 16px;display:flex;align-items:center;gap:13px}.list-main{min-width:0;flex:1}.list-main b{display:block;font-size:13px}.list-main small{display:block;color:#91a0b6;font-size:10px;margin-top:5px}.pill{display:inline-flex;padding:6px 9px;border-radius:30px;font-size:10px;font-weight:700;background:#edf4ff;color:#3478f6;white-space:nowrap}.pill.green{background:#e9fbf4;color:#0b9b70}.pill.orange{background:#fff4e8;color:#d97706}.pill.gray{background:#f0f3f7;color:#718096}.row-actions{display:flex;gap:7px}.task-status{width:auto;max-width:118px;padding:8px 7px;font-size:10px;flex-shrink:0}.small-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;color:#63748e;font-size:11px}.empty{padding:42px 18px;text-align:center;color:#91a0b6}.empty b{display:block;color:#425675;margin-bottom:7px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px}.modal-backdrop{position:absolute;inset:0;background:#0e1b32a6;backdrop-filter:blur(3px)}.modal-card{position:relative;width:min(520px,100%);background:#fff;border-radius:18px;padding:22px;max-height:90dvh;overflow:auto;box-shadow:0 25px 80px #07152b55}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-head h2{font-size:18px;margin:0}.modal-card form{display:grid;gap:13px}.modal-card label,.auth-form label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#60728d}.modal-card textarea{min-height:84px;resize:vertical}.modal-card .btn{margin-top:5px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#14243d;color:#fff;padding:12px 18px;border-radius:12px;z-index:50;font-size:12px;transition:.2s;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}footer{padding:15px 38px;color:#9aa7ba;font-size:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between}.bottom-nav{display:none}.mobile-only{display:none}
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 15% 10%,#e6efff,transparent 40%),var(--bg)}.auth-card{width:min(440px,100%);background:#fff;padding:28px;border-radius:22px;box-shadow:0 20px 70px #1d3f7417}.auth-card .brand{padding:0 0 22px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f2f5fa;border-radius:10px;padding:4px;margin-bottom:22px}.auth-tabs button{border:0;background:transparent;padding:10px;border-radius:8px;color:#71819a;font-size:11px;font-weight:700}.auth-tabs button.selected{background:#fff;color:var(--blue);box-shadow:0 2px 8px #1c376011}.auth-form{display:grid;gap:13px}.auth-form h1{font-size:23px;margin:0}.auth-form p{margin:-7px 0 5px;color:#91a0b6;font-size:11px}.full{width:100%;margin-top:4px}.auth-foot{display:flex;justify-content:space-between;gap:10px;margin-top:20px;color:#9aa7ba;font-size:10px}.link-btn{border:0;background:none;color:var(--blue);font-size:11px;font-weight:700}
@media(max-width:900px){.side{width:210px}.main{margin-left:210px}.screen{padding:26px 22px}.stats{grid-template-columns:repeat(2,1fr)}.grid-two{grid-template-columns:1fr}}
@media(max-width:640px){body{font-size:13px}.side{display:none}.main{margin:0;padding-bottom:72px}.top{height:58px;padding:0 16px}.mobile-only{display:block}.crumb{font-size:10px}.top-right{gap:10px}.online{padding:7px 9px;font-size:9px}.top-right .avatar{width:30px;height:30px}.screen{padding:22px 15px}.screen-head{align-items:flex-start;margin-bottom:18px}.screen h1{font-size:23px}.screen-head p{font-size:11px;max-width:230px}.screen-head>.btn{padding:10px 12px;font-size:10px;white-space:nowrap}.screen-head>.btn span{display:none}.stats{gap:9px;margin-bottom:12px}.stat{padding:14px;border-radius:13px}.stat strong{font-size:25px;margin:8px 0 2px}.stat label{font-size:10px}.panel{padding:16px;border-radius:14px;margin-bottom:12px}.panel h2{font-size:14px}.panel p{font-size:10px}.ring{width:125px;height:125px}.ring:before{width:98px;height:98px}.list-card{padding:13px 12px;gap:9px}.list-main b{font-size:12px}.list-main small{font-size:9px}.pill{font-size:9px;padding:5px 7px}.row-actions .small-btn{padding:7px}.toolbar{gap:7px}.toolbar>.btn{padding:10px}.bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:20;bottom:0;left:0;right:0;padding:7px 5px calc(7px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 25px #1b3b6b0b}.bottom-nav button{border:0;background:none;color:#8a99af;display:grid;justify-items:center;gap:3px;font-size:9px;font-weight:700;padding:4px 0}.bottom-nav button span{font-size:18px}.bottom-nav button.active{color:var(--blue)}footer{padding:12px 15px;font-size:9px}footer span{display:none}.two{grid-template-columns:1fr 1fr}.modal{padding:10px;align-items:end}.modal-card{border-radius:18px 18px 10px 10px;padding:19px;max-height:88dvh}.auth-card{padding:22px}.auth-form h1{font-size:21px}}


/* Auth tabs: registration spans both top tabs */
.auth-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto auto!important;align-items:center!important}
.auth-tabs button[data-auth="login"]{grid-column:1!important;grid-row:1!important}
.auth-tabs button[data-auth="bootstrap"]{grid-column:2!important;grid-row:1!important}
.auth-tabs button[data-auth="register"]{grid-column:1/3!important;grid-row:2!important;justify-self:stretch!important;width:100%!important;margin:4px 0 0!important}


/* Dark theme palette */
html[data-theme="dark"]{
 --ink:#e7edf7;--muted:#9aa9bf;--line:#29364a;--bg:#101827;--white:#172235;
 --shadow:0 12px 34px rgba(0,0,0,.22);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .side,
html[data-theme="dark"] .top,
html[data-theme="dark"] .bottom-nav{background:#172235;border-color:var(--line)}
html[data-theme="dark"] .stat,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .list-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .modal-card{background:#172235;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .auth-wrap{background:radial-gradient(circle at 15% 10%,#1c2d49,transparent 40%),var(--bg)}
html[data-theme="dark"] .auth-tabs{background:#101827}
html[data-theme="dark"] .auth-tabs button.selected{background:#24334a;color:#8db5ff}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .small-btn{background:#101827;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .nav{color:#aab8cc}
html[data-theme="dark"] .nav.active,
html[data-theme="dark"] .nav:hover{background:#24334a;color:#8db5ff}
html[data-theme="dark"] .online{background:#101827;color:#b5c2d5}
html[data-theme="dark"] .ring:before{background:#172235}
html[data-theme="dark"] .crumb b{color:var(--ink)}
html[data-theme="dark"] .icon-button{color:#c0cce0}