:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1f232c; --border:#2a2f3a;
  --text:#e6e8ee; --muted:#8a93a6; --accent:#3b82f6; --accent-2:#22c55e;
  --danger:#ef4444; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.hamburger{background:none;border:0;color:var(--text);font-size:20px;cursor:pointer}
.spacer{flex:1}
.user-box{display:flex;align-items:center;gap:10px}
.user-name{font-weight:600}
.user-role{color:var(--muted);font-size:12px;border:1px solid var(--border);
  padding:2px 6px;border-radius:6px}
.logout{color:var(--danger)}

/* Layout */
.layout{display:flex;min-height:calc(100vh - 90px)}
.sidebar{width:240px;background:var(--panel);border-right:1px solid var(--border);padding:12px 0}
.sidebar nav{display:flex;flex-direction:column}
.nav-section{padding:14px 16px 6px;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em}
.nav-item{display:flex;align-items:center;gap:8px;padding:10px 16px;color:var(--text)}
.nav-item:hover{background:var(--panel-2);text-decoration:none}
.nav-item.active{background:var(--panel-2);border-left:3px solid var(--accent);padding-left:13px}
.nav-item.sub{padding-left:32px;font-size:13px;color:var(--muted)}
.nav-item small{color:var(--muted);margin-left:6px}
.ico{display:inline-block;width:14px;text-align:center;color:var(--muted)}

/* Content */
.content{flex:1;padding:20px 24px}
h1{margin:0 0 16px;font-size:22px}
h2{margin:0 0 12px;font-size:16px;color:var(--muted);font-weight:600}

/* Cards / Dashboard */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;transition:.15s}
.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card .ttl{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.card .val{font-size:24px;font-weight:700;margin:6px 0 4px}
.card .desc{color:var(--muted);font-size:12px}
.card a.cta{display:inline-block;margin-top:10px;font-size:13px}

/* Forms */
.form{max-width:380px;margin:60px auto;background:var(--panel);
  border:1px solid var(--border);padding:24px;border-radius:var(--radius)}
.form h1{text-align:center}
.form label{display:block;margin:10px 0 4px;color:var(--muted);font-size:12px}
.form input{width:100%;padding:10px;background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:8px}
.form button{width:100%;margin-top:14px;padding:10px;background:var(--accent);
  color:#fff;border:0;border-radius:8px;font-weight:600;cursor:pointer}
.form .err{color:var(--danger);font-size:13px;margin-top:8px;text-align:center}

/* Footer */
.footbar{padding:10px 16px;color:var(--muted);text-align:center;
  border-top:1px solid var(--border);background:var(--panel)}

@media (max-width:760px){
  .sidebar{position:fixed;z-index:9;height:100%}
  .content{padding:16px}
}