:root{
  --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb; --accent:#22c55e; --accent-2:#06b6d4; --danger:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';background:linear-gradient(180deg,#0b1220,#0f172a);color:var(--text);}
a{color:var(--accent-2);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:1rem}
.card{background:rgba(17,24,39,.72);backdrop-filter:saturate(180%) blur(8px);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.input, select, textarea{width:100%;padding:.65rem .8rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0b1220;color:var(--text);outline:none}
.input:focus, select:focus, textarea:focus{border-color:var(--accent)}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(90deg,var(--accent),#16a34a);color:#052e16;font-weight:700;cursor:pointer}
.btn.sec{background:linear-gradient(90deg,#334155,#1f2937);color:#e5e7eb}
.btn.danger{background:linear-gradient(90deg,#ef4444,#b91c1c);color:#fff}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.6rem;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.table th{color:#a3a3a3;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.badge{padding:.2rem .5rem;border-radius:999px;background:#0b1220;border:1px solid rgba(255,255,255,.08);font-size:.75rem;color:var(--muted)}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;background:rgba(17,24,39,.85);border-right:1px solid rgba(255,255,255,.06);padding:1rem 1rem 4rem;overflow:auto}
.main{margin-left:260px;padding:1.2rem}
.brand{display:flex;gap:.6rem;align-items:center}
.brand img{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,.08)}
.nav a{display:block;padding:.6rem .8rem;border-radius:10px;color:#e5e7eb;margin:.2rem 0}
.nav a.active,.nav a:hover{background:#0b1220;border:1px solid rgba(255,255,255,.08)}
.footer{text-align:center;margin-top:2rem;color:var(--muted)}
.kpi{display:flex;gap:.6rem;align-items:center;padding:.8rem;border-radius:14px;background:#0b1220;border:1px solid rgba(255,255,255,.06)}
.kpi strong{font-size:1.2rem}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem}
.logo-lg{width:72px;height:72px;border-radius:16px;border:1px solid rgba(255,255,255,.08)}
h1,h2,h3{margin:.2rem 0 .4rem}
small,h6{color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:700px){.form-row{grid-template-columns:1fr}}
.toast{position:fixed;right:1rem;bottom:1rem;background:#0b1220;border:1px solid rgba(255,255,255,.1);padding:.6rem 1rem;border-radius:12px}