:root{
  --bg:#0b0c10;
  --panel:#111318;
  --surface:#161a22;
  --muted:#8b93a7;
  --text:#eef1f7;
  --primary:#4c8dff;
  --primary-700:#2f6df0;
  --success:#2ec27e;
  --danger:#ff5252;
  --warning:#f6c445;
  --border:#243043;
  --card:#121620;
  --highlight:#1b2130;
  --shadow:0 6px 18px rgba(0,0,0,.35);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at -10% -20%, #11141d 0%, transparent 50%),
             radial-gradient(1000px 600px at 120% -30%, #0e1320 0%, transparent 55%),
             radial-gradient(800px 500px at 50% 120%, #141a28 0%, #0b0c10 70%);
}

/* Topbar */
.admin-topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:14px 22px; 
  background:linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--panel);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}
.admin-topbar .brand{font-weight:700; letter-spacing:.3px}
.admin-topbar .brand span{color:var(--primary)}
.admin-topbar .nav{display:flex; gap:8px}
.admin-topbar .nav a{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px;
}
.admin-topbar .nav a:hover{background:var(--highlight); color:var(--text)}
.admin-topbar .nav a.active{background:var(--primary); color:#fff}
.admin-topbar .spacer{flex:1}

/* Layout */
.admin-container{max-width:1200px; margin:24px auto; padding:0 22px}
.page-title{margin:8px 0 18px; font-size:22px}
.actions-row{margin:16px 0; display:flex; gap:10px; flex-wrap:wrap}

/* Cards / metrics */
.cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--card);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.metric .label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px}
.metric .value{font-size:28px; font-weight:700; margin-top:6px}

/* Tables */
.table-responsive{overflow:auto; border:1px solid var(--border); border-radius:var(--radius);}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border);}
.table thead th{position:sticky; top:0; background:var(--surface); text-align:left; font-weight:600}
.table tbody tr{background:transparent}
.table tbody tr:hover{background:var(--highlight)}
.table tbody tr:last-child td{border-bottom:none}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.ellipsis{max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Forms */
.form{display:grid; gap:12px}
.form .row{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px}
.label{display:block; color:var(--muted); margin-bottom:6px}
.input, textarea, select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text)}
.input::placeholder, textarea::placeholder{color:#9aa3b5}
fieldset{border:1px solid var(--border); border-radius:var(--radius)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; border:1px solid transparent; background:var(--highlight); color:var(--text); text-decoration:none; cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:6px 10px; font-size:12px; border-radius:8px}
.btn-primary{background:var(--primary); color:#fff}
.btn-outline{background:transparent; border-color:var(--border);}
.btn-danger{background:var(--danger); color:#fff}
.btn-success{background:var(--success); color:#032014}
.btn-warning{background:var(--warning); color:#3d2c00}

/* Badges */
.badge{display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:var(--surface); color:var(--muted)}
.badge.success{background:rgba(46,194,126,.18); color:#a7f0cb; border-color:rgba(46,194,126,.35)}
.badge.danger{background:rgba(255,82,82,.15); color:#ffc0c0; border-color:rgba(255,82,82,.35)}
.badge.warn{background:rgba(246,196,69,.15); color:#ffe5a3; border-color:rgba(246,196,69,.35)}
.badge.info{background:rgba(76,141,255,.18); color:#cfe0ff; border-color:rgba(76,141,255,.35)}

/* Alerts */
.alert{padding:10px 12px; border-radius:10px; border:1px solid var(--border);}
.alert.ok{background:rgba(46,194,126,.15); border-color:rgba(46,194,126,.35)}
.alert.err{background:rgba(255,82,82,.15); border-color:rgba(255,82,82,.35)}

/* Auth */
.auth-wrap{display:grid; place-items:center; min-height:100vh; padding:32px}
.auth-card{width:100%; max-width:380px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.auth-card h2{margin:0 0 8px}
.auth-card .sub{color:var(--muted); margin-bottom:16px}

/* Utilities */
.muted{color:var(--muted)}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:18px}
.row-inline{display:flex; gap:10px; flex-wrap:wrap}
.hr{height:1px; background:var(--border); margin:14px 0}