:root{
  --bg:#0b1220; --panel:#0f1a30; --card:#111f3a; --text:#e8eefc;
  --muted:#a9b7d6; --line:#1f2e55; --primary:#4f8cff; --good:#2dd4bf; --warn:#fbbf24; --bad:#fb7185;
  --radius:16px;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Arial;background:linear-gradient(180deg,#070b14,#0b1220);color:var(--text)}
a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:280px;background:rgba(15,26,48,.9);border-right:1px solid var(--line);backdrop-filter: blur(8px);padding:16px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:10px 8px;margin-bottom:12px}
.logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#7c3aed);display:grid;place-items:center;font-weight:800;box-shadow:var(--shadow)}
.title{font-weight:800}
.sub{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:8px}
.navitem,.navsub{padding:12px 12px;border-radius:14px;border:1px solid transparent;display:flex;gap:10px;align-items:center}
.navitem:hover,.navsub:hover{background:rgba(79,140,255,.12);border-color:rgba(79,140,255,.25)}
.navitem.danger:hover{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.25)}
.ico{width:22px;text-align:center}
.navgroup{margin-top:6px;padding-top:8px;border-top:1px dashed rgba(169,183,214,.25)}
.navgroup-title{font-size:12px;color:var(--muted);padding:6px 10px;margin-bottom:6px;display:flex;gap:10px;align-items:center}
.navsub{margin-left:10px}
.main{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(11,18,32,.75);backdrop-filter: blur(8px);position:sticky;top:0;z-index:5}
.topbar-title{font-weight:800}
.topbar-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.iconbtn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:12px;padding:10px 12px;font-size:16px}
.pill{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.content{padding:18px}
.flash{margin:14px 18px 0;border-radius:14px;padding:12px 14px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.flash.success{border-color:rgba(45,212,191,.35)}
.flash.error{border-color:rgba(251,113,133,.35)}
.grid{display:grid;gap:14px}
.grid.cards{grid-template-columns:repeat(12,1fr)}
.card{background:rgba(17,31,58,.8);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.h1{font-size:20px;font-weight:900;margin:0 0 10px}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.input,select,textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:12px 12px;outline:none}
textarea{min-height:90px;resize:vertical}
.btn{border:1px solid rgba(79,140,255,.35);background:rgba(79,140,255,.18);color:var(--text);border-radius:14px;padding:10px 12px;font-weight:700}
.btn:hover{background:rgba(79,140,255,.25)}
.btn.bad{border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.14)}
.btn.good{border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.14)}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:var(--muted);font-size:12px;text-align:left;padding:0 10px}
.table td{padding:12px 10px;background:rgba(255,255,255,.04);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.table tr td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}
.table tr td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}
@media (max-width: 980px){
  .sidebar{position:fixed;left:-300px;transition:.2s;z-index:10}
  .sidebar.open{left:0}
  .col-6,.col-4{grid-column:span 12}
}
/* =========================
   AUTH (LOGIN) SCREEN
   ========================= */
.auth-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.auth-shell{
  width:min(980px,100%);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
}
.auth-left{
  background:linear-gradient(135deg, rgba(79,140,255,.18), rgba(124,58,237,.14));
  border:1px solid rgba(79,140,255,.25);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.auth-left:before{
  content:"";
  position:absolute; inset:-40px;
  background:radial-gradient(circle at 20% 20%, rgba(79,140,255,.35), transparent 45%),
             radial-gradient(circle at 80% 30%, rgba(124,58,237,.28), transparent 50%),
             radial-gradient(circle at 60% 90%, rgba(45,212,191,.18), transparent 55%);
  filter: blur(2px);
  opacity:.9;
}
.auth-left > *{position:relative}
.auth-badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(169,183,214,.22);
  background:rgba(255,255,255,.04);
}
.auth-big{
  font-size:34px;
  font-weight:900;
  letter-spacing:.2px;
  margin:14px 0 8px;
}
.auth-desc{color:var(--muted);line-height:1.5;max-width:46ch}
.auth-feats{margin-top:18px;display:grid;gap:10px}
.auth-feat{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(169,183,214,.18);
  background:rgba(255,255,255,.03);
}
.auth-feat .ico{width:22px;margin-top:1px}

.auth-card{
  background:rgba(17,31,58,.85);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.auth-title{font-size:18px;font-weight:900;margin:0 0 10px}
.lbl{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
.alert{border-radius:14px;padding:12px 14px;border:1px solid var(--line);background:rgba(255,255,255,.05);margin-bottom:12px}
.alert.error{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.12)}
.auth-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px}
.btn.full{width:100%;justify-content:center}

@media (max-width: 980px){
  .auth-shell{grid-template-columns: 1fr}
}