:root {
  --bg:#0f1116; --panel:#151922; --panel-2:#1b2030; --stroke:#262b3a; --text:#e6e8ee; --muted:#9aa2b2;
  --primary:#5865F2; --danger:#e74c3c; --accent:#59d4a3; --gold:#f6c35b;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Topbar + taskbar */
.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--stroke);background:#0d1016f2;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand a{color:#dfe3ee;text-decoration:none}
.brand-mark{background:linear-gradient(135deg,#ff7a59,#fbd34b);color:#0b0e14;font-weight:900;padding:6px 8px;border-radius:8px}
.top-controls{display:flex;align-items:center;gap:16px}
.task-wrap{min-width:280px}
.taskbar{width:320px;height:8px;background:#1f2637;border-radius:6px;overflow:hidden}
.taskbar>span{display:block;height:100%;background:var(--accent);width:0%}
.tasklabel{font-size:12px;color:var(--muted);margin-top:4px}
.currencies{display:flex;gap:12px;color:var(--muted)} .currencies span::before{content:"• ";color:#3f4658}
.btn{border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;color:#fff;background:var(--panel-2)}
.btn-primary{background:var(--primary)} .btn-danger{background:var(--danger)}

/* Layout */
.layout{display:flex;min-height:calc(100vh - 60px)}
.sidenav{width:260px;border-right:1px solid var(--stroke);background:var(--panel);padding:14px 12px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.userbox{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.userbox img{width:32px;height:32px;border-radius:50%}
.userbox .name{font-weight:700}
.nav-section{margin-top:14px}
.nav-title{font-size:12px;text-transform:uppercase;color:var(--muted);margin:8px 6px}
.nav-item{display:block;padding:8px 10px;margin:2px 0;border-radius:6px;color:#cfd5e4;text-decoration:none;cursor:pointer}
.nav-item:hover{background:var(--panel-2)} .nav-item.is-active{background:#232a3d}
.content{flex:1;padding:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:10px;padding:14px}
.card-title{font-weight:700;margin-bottom:10px}
.kv div{display:flex;justify-content:space-between;margin:5px 0;color:#dfe3ee}
.list .row{display:flex;justify-content:space-between;padding:8px;border-radius:6px;background:var(--panel-2);margin:6px 0}
.list .label{color:#cfd5e4}
.bar{height:8px;background:#1f2637;border-radius:6px;overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,56px);gap:8px}
.slot{width:56px;height:56px;border:1px dashed var(--stroke);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.view{display:none}.view.is-visible{display:block}
@media (max-width:820px){.sidenav{display:none}.layout{display:block}}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-card{width:360px;background:var(--panel);border:1px solid var(--stroke);border-radius:10px;padding:16px}
.modal-title{font-weight:800;margin-bottom:10px}
.modal-card label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.modal-card input,.modal-card select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--stroke);background:#0f1220;color:#e6e8ee}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.error{color:#ff6b6b;margin-top:6px;min-height:18px}