:root{
  --bg1:#070b17; --bg2:#0b1220; --card:#0f172a; --muted:#9aa4b2; --text:#e5e7eb;
  --pri:#2563eb; --pri-strong:#1e40af; --ok:#16a34a; --warn:#f59e0b; --err:#ef4444;
  --border:#1f2937;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--text)}
.bg-hero{min-height:100vh;background:
  radial-gradient(1200px 600px at 10% -10%, #1b2a5a 0%, transparent 50%),
  radial-gradient(800px 500px at 110% 10%, #5b0d2f 0%, transparent 55%),
  linear-gradient(180deg, var(--bg1), var(--bg2));
  display:grid;place-items:center;
}
.bg-app{background:linear-gradient(180deg, var(--bg1), var(--bg2)); min-height:100vh}
.login-wrap{width:100%;max-width:420px;padding:24px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.glass{backdrop-filter: blur(6px); background:rgba(15,23,42,.75)}
.brand{text-align:center;margin-bottom:12px}
.logo-badge{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#ff0036,#8b39ff);font-weight:800}
.brand h1{font-size:22px;margin:12px 0 4px}
.muted{color:var(--muted)}

.form .field{margin-bottom:14px}
.form label{display:block;font-size:12px;margin-bottom:6px;color:var(--muted)}
.form input, .form select{width:100%;padding:12px 14px;border-radius:12px;background:#0b1220;color:var(--text);border:1px solid var(--border);outline:none}
.form.inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form.inline .field{flex:1}
.form.inline .field.grow{flex:2}
.checkbox{display:flex;align-items:center;gap:8px;color:var(--muted)}
.btn{display:inline-block;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;transition:.15s;background:#1f2937;color:var(--text)}
.btn.primary{background:var(--pri)}
.btn.primary:hover{background:var(--pri-strong)}
.btn.ghost{background:transparent;border:1px solid var(--border)}
.btn.danger{background:var(--err)}
.btn.success{background:var(--ok)}
.btn.w-100{width:100%}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(7,11,23,.6);backdrop-filter:blur(8px)}
.brand-mini{display:flex;align-items:center;gap:10px}
.actions{display:flex;align-items:center;gap:10px}
.user{color:var(--muted);font-size:14px}

.container{max-width:1100px;margin:24px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:1fr; gap:16px}
@media (min-width: 960px){ .grid{grid-template-columns:1fr 1fr} }
.kv{display:grid;gap:10px}
.kv .k{color:var(--muted);min-width:160px;display:inline-block}
.kv .v{font-weight:600}
.list{margin:0;padding-left:18px}
pre.json{background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto}

.table{display:grid;gap:4px}
.thead, .trow{display:grid;grid-template-columns:70px 1fr 160px 220px 1fr; gap:10px; align-items:center}
.thead{color:var(--muted);font-size:12px}
.trow{padding:10px;border:1px solid var(--border);border-radius:12px}
.inline-form{display:flex;gap:6px;align-items:center}
.text-right{text-align:right}
.alert{padding:10px 12px;border-radius:10px;margin:8px 0}
.alert.success{background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.4)}
.alert.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4)}
.mt{margin-top:12px}