:root{
  --bg:#0d0f14;
  --surface:#121622;
  --surface-2:#161c2a;
  --text:#f5f7ff;
  --muted:#b8c0d9;
  --primary:#dc3545;
  --border:rgba(255,255,255,.12);
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";background:radial-gradient(1200px 700px at 10% -10%, rgba(220,53,69,.25), transparent 60%), var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}

.layout{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{border-right:1px solid var(--border);padding:20px;position:sticky;top:0;height:100vh;background:rgba(0,0,0,.18);backdrop-filter: blur(10px)}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand img{height:40px}
.brand .t{font-weight:800;letter-spacing:.3px}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.nav a{padding:12px 12px;border:1px solid transparent;border-radius:14px;color:rgba(255,255,255,.86)}
.nav a:hover{border-color:var(--border);background:rgba(255,255,255,.04)}
.nav a.active{border-color:rgba(220,53,69,.55);background:rgba(220,53,69,.10)}
.main{padding:28px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.card{border:1px solid var(--border);background:rgba(255,255,255,.04);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .p{padding:18px}
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.h1{font-size:26px;margin:0}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-weight:700;cursor:pointer}
.btn.primary{border-color:rgba(220,53,69,.65);background:linear-gradient(135deg, rgba(220,53,69,.95), rgba(255,77,94,.85))}
.btn.danger{border-color:rgba(220,53,69,.65);background:rgba(220,53,69,.12)}
.btn.small{padding:8px 10px;border-radius:12px;font-size:13px}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7);text-align:left;padding:0 10px}
.table td{padding:12px 10px;background:rgba(255,255,255,.04);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.table tr td:first-child{border-left:1px solid var(--border);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid var(--border);border-top-right-radius:14px;border-bottom-right-radius:14px}

.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field label{font-size:13px;color:rgba(255,255,255,.85)}
.input, textarea, select{padding:12px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);outline:none}
textarea{min-height:110px;resize:vertical}
.input:focus, textarea:focus, select:focus{border-color:rgba(220,53,69,.55)}
.alert{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.05)}
.alert.success{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.10)}
.alert.error{border-color:rgba(220,53,69,.45);background:rgba(220,53,69,.12)}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .grid-3{grid-template-columns:1fr}
}