:root{--bg0:#0c1022;--bg1:#0f162e;--bg2:#121a35;--bg3:#172343;--bd1:#213159;--t0:#e6eefc;--t1:#b7c4e3;--t2:#8ea0c8;--brand:#7aa2ff}
*{box-sizing:border-box}html,body{height:100%}html{color-scheme:dark}
body{margin:0;background:radial-gradient(1000px 600px at 0% -10%,rgba(34,211,238,.10),transparent 60%),radial-gradient(900px 700px at 120% -10%,rgba(122,162,255,.12),transparent 55%),var(--bg0);color:var(--t0);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;line-height:1.5}
.flex{display:flex}.grid{display:grid}.flex-1{flex:1 1 auto}.min-h-screen{min-height:100vh}
.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.w-64{width:16rem}.p-6{padding:1.5rem}.p-4{padding:1rem}.p-3{padding:.75rem}.p-2{padding:.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.mb-3{margin-bottom:.75rem}.mb-2{margin-bottom:.5rem}.mt-2{margin-top:.5rem}
.gap-6{grid-gap:1.5rem}@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sidebar{background:linear-gradient(180deg, rgba(122,162,255,.12), transparent 30%),var(--bg2);border-right:1px solid var(--bd1)}
.surface{background:var(--bg2);border:1px solid var(--bd1);border-radius:12px}
.tile{display:block;padding:1.25rem;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),var(--bg2);border:1px solid var(--bd1)}
.text-2xl{font-size:1.5rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-subtle{color:var(--t2)}
.sidebar .brand{font-weight:800}.sidebar .brand-badge{display:inline-block;padding:.15rem .4rem;border-radius:999px;background:rgba(122,162,255,.12);color:#c7d6ff;font-size:.7rem;border:1px solid rgba(122,162,255,.35)}
.sidebar nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;color:var(--t1);text-decoration:none}
.sidebar nav a .icon{width:18px;height:18px;opacity:.95}
.sidebar nav a:hover{background:var(--bg3);color:#fff}
.sidebar nav a.active{background:linear-gradient(180deg, rgba(122,162,255,.28), rgba(122,162,255,.12));color:#fff;border:1px solid rgba(122,162,255,.4)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:linear-gradient(90deg, rgba(122,162,255,.18), rgba(34,211,238,.12) 55%, rgba(12,16,34,.3));border-bottom:1px solid var(--bd1);border-left:1px solid var(--bd1);position:sticky;top:0;z-index:30}
.topbar .title{font-weight:800;letter-spacing:.04em}
.quick-actions{display:flex;gap:.5rem}
.quick-actions .btn, .quick-actions .btn-ghost{padding:.45rem .7rem}
label{display:block;font-size:.9rem;color:var(--t2);margin-bottom:.35rem}
input,textarea,select{width:100%;background:var(--bg1);color:var(--t0);border:1px solid var(--bd1);border-radius:10px;padding:.6rem .8rem;accent-color:var(--brand)}
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(122,162,255,.6);box-shadow:0 0 0 3px rgba(122,162,255,.35)}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--t0);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px var(--bg1) inset, 0 0 0 3px rgba(122,162,255,.0);
  border-color: var(--bd1);
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border-radius:10px;color:#fff;border:1px solid transparent;background:linear-gradient(180deg,#7aa2ff,#4f6ae6);cursor:pointer}
.btn-rose{background:linear-gradient(180deg,#ef4444,#b91c1c)}
.btn-ghost{background:transparent;border-color:var(--bd1);color:var(--t0)}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--bd1)}
.table th{color:var(--t2);font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.02)}
.badge{display:inline-block;padding:.15rem .45rem;border-radius:999px;font-size:.75rem;border:1px solid var(--bd1);color:var(--t1)}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login-card{width:100%;max-width:420px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),var(--bg2);border:1px solid var(--bd1);border-radius:16px;padding:1.5rem}
.login-title{font-weight:800;margin-bottom:.35rem}
.alert{padding:.75rem;border-radius:10px;border:1px solid}.alert-bad{background:rgba(239,68,68,.08);border-color:#ef4444;color:#fecaca}.alert-good{background:rgba(16,185,129,.08);border-color:#10b981;color:#bbf7d0}.alert-info{background:rgba(245,158,11,.08);border-color:#eab308;color:#fde68a}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.6);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:50}
.modal{width:100%;max-width:640px;background:var(--bg2);border:1px solid var(--bd1);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--bd1)}
.modal .content{padding:1rem 1.25rem}
.modal footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;border-top:1px solid var(--bd1)}
.modal-backdrop.show{display:flex}