:root{
  --bg:#0b0f1a;
  --panel:#121826;
  --panel-2:#161d2e;
  --border:#232b3d;
  --text:#e7ebf3;
  --muted:#8b93a7;
  --accent:#6d5bf0;
  --green:#22c55e;
  --red:#ef4444;
  --sidebar-w:220px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;}
a{color:inherit;text-decoration:none;}

.shell{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);background:var(--panel);border-right:1px solid var(--border);
  padding:16px 12px;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.brand .logo{width:34px;height:34px;border-radius:8px;background:#1a2332;color:#f4b400;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;}
.brand .name{font-weight:700;font-size:15px;line-height:1.2;}
.brand .sub{font-size:10px;color:var(--muted);letter-spacing:.06em;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--muted);font-size:13.5px;margin-bottom:2px;cursor:pointer;}
.nav-item:hover{background:var(--panel-2);color:var(--text);}
.nav-item.active{background:var(--accent);color:#fff;}
.nav-item .ic{width:16px;text-align:center;}

.main{margin-left:var(--sidebar-w);flex:1;padding:16px 22px 40px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.topbar-left{display:flex;align-items:center;gap:14px;}
.page-title{font-size:19px;font-weight:700;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);padding:6px 12px;border-radius:8px;}
.user-chip .role{font-size:10px;color:var(--muted);}
.btn{background:var(--accent);color:#fff;border:none;padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer;font-size:13px;}
.btn.secondary{background:var(--panel-2);border:1px solid var(--border);color:var(--text);}
.btn.danger{background:var(--red);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.icon-btn{background:var(--panel);border:1px solid var(--border);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:16px;}
.panel h3{margin:0 0 14px;font-size:13px;letter-spacing:.03em;color:#c7cde0;display:flex;justify-content:space-between;align-items:center;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;color:var(--muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--border);font-size:11.5px;}
td{padding:9px 6px;border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
.delta{font-size:11px;margin-top:2px;}
.up{color:var(--green);} .down{color:var(--red);}

.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.form-control{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:7px;font-size:13.5px;}
.form-control:focus{outline:none;border-color:var(--accent);}
select.form-control{appearance:none;}

.badge{padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:700;display:inline-block;}
.badge-green{background:#22c55e33;color:#22c55e;}
.badge-red{background:#ef444433;color:#ef4444;}
.badge-amber{background:#f59e0b33;color:#f59e0b;}
.badge-muted{background:#8b93a733;color:#8b93a7;}

.role-super{background:#6d5bf033;color:#a99bff;}
.role-admin{background:#3b82f633;color:#60a5fa;}
.role-cm{background:#22c55e33;color:#22c55e;}
.role-mkt{background:#f59e0b33;color:#fbbf24;}
.role-viewer{background:#8b93a733;color:#8b93a7;}

.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;}
.alert-error{background:#ef444422;border:1px solid #ef444455;color:#fca5a5;}
.alert-success{background:#22c55e22;border:1px solid #22c55e55;color:#86efac;}

/* Login page */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.login-card{width:360px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:30px;}
.login-card h1{font-size:20px;margin:14px 0 4px;text-align:center;}
.login-card .sub{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:22px;}
.login-logo{width:52px;height:52px;border-radius:12px;background:#1a2332;color:#f4b400;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto;font-size:15px;}

.empty-state{text-align:center;padding:40px 20px;color:var(--muted);}
.empty-state .ic{font-size:34px;margin-bottom:10px;}

.pill-tabs{display:flex;gap:4px;background:var(--panel-2);border-radius:7px;padding:3px;}
.pill-tabs a{padding:5px 12px;border-radius:5px;font-size:11.5px;color:var(--muted);}
.pill-tabs a.active{background:var(--accent);color:#fff;}

@media (max-width:900px){
  .sidebar{display:none;}
  .main{margin-left:0;}
}