:root {
  --bg: #070b16;
  --panel: #10172a;
  --panel-2: #0d1425;
  --text: #dbe7ff;
  --muted: #8fa4d4;
  --primary: #27d2ff;
  --secondary: #8d4bff;
  --success: #2bd576;
  --danger: #ff5470;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial;background:radial-gradient(circle at top left,#17243d,var(--bg));color:var(--text)}
a{color:var(--primary);text-decoration:none}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:250px;background:linear-gradient(180deg,#10182f,#0b1224);padding:20px;border-right:1px solid #1c2943;position:sticky;top:0;height:100vh}
.sidebar h2{font-size:1rem;color:#fff;margin:0 0 20px}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.sidebar nav a{background:#15203b;padding:10px 12px;border-radius:10px;color:#c5d9ff}
.sidebar nav a:hover{background:#1d2c50}
.content{flex:1;padding:24px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #223255;padding:18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);margin-bottom:16px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric h3{margin:0;font-size:1rem;color:var(--muted)} .metric p{margin:8px 0 0;font-size:1.5rem;font-weight:700}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #233252;text-align:left}
th{color:#96b2e6;font-weight:600}
input,select,textarea,button{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2c3f66;background:#0b1429;color:var(--text)}
button{background:linear-gradient(90deg,var(--secondary),var(--primary));border:none;font-weight:700;cursor:pointer}
button:hover{opacity:.9}
.btn-secondary{background:#1f2f4f}
.actions{display:flex;gap:10px;flex-wrap:wrap}.actions>*{width:auto}
.flash{padding:12px;border-radius:10px;margin-bottom:14px}.flash.success{background:rgba(43,213,118,.2)}.flash.error{background:rgba(255,84,112,.2)}
.badge{padding:4px 8px;border-radius:999px;font-size:.8rem;background:#1e2d4c}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.login-box{max-width:460px;margin:7vh auto}
small{color:var(--muted)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:210px}}
@media(max-width:760px){.app-shell{flex-direction:column}.sidebar{width:100%;height:auto;position:relative}.row,.grid-2,.grid-4{grid-template-columns:1fr}}