:root { --bg:#0b0f1a; --panel:#0f1629; --muted:#9bb1d1; --primary:#6ee7ff; --accent:#8b5cf6; --ok:#22c55e; --warn:#f59e0b; --error:#ef4444; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: radial-gradient(1200px 1200px at 80% -10%, rgba(110,231,255,.08), transparent 40%), radial-gradient(900px 900px at -10% 40%, rgba(139,92,246,.10), transparent 50%), var(--bg); color: #e6eefc; }
a { color: var(--primary); text-decoration: none; }
.container { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.card { width: 100%; max-width: 420px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 24px; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.logo-mark { display:block; max-width: 200px; height:auto; margin: 0 auto 12px; }
h1,h2,h3 { margin: 0 0 8px; letter-spacing:.2px; }
.subtle { color: var(--muted); font-size: 14px; }
.input { width: 100%; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e6eefc; outline: none; }
.input:focus { border-color: rgba(110,231,255,.5); box-shadow: 0 0 0 4px rgba(110,231,255,.08); }
.row { display: grid; gap: 12px; }
.btn { width: 100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: linear-gradient(180deg, rgba(110,231,255,.15), rgba(139,92,246,.12)); color:#e6eefc; font-weight: 600; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(110,231,255,.15); }
.btn.secondary { background: rgba(255,255,255,.04); }
.grid-bg::before {
  content:""; position: fixed; inset:-2px;
  background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/36px 36px,
              linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/36px 36px;
  mask: radial-gradient(600px 600px at 50% -20%, rgba(0,0,0,.55), transparent 60%);
  pointer-events:none;
}
.alert { margin-top: 12px; background: rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.alert.error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.topbar { position: sticky; top:0; z-index: 10; backdrop-filter: blur(6px); background: rgba(11,15,26,.6); border-bottom: 1px solid rgba(255,255,255,.06); }
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100dvh; }
.sidebar { border-right:1px solid rgba(255,255,255,.06); padding: 18px; background: rgba(255,255,255,.02); }
.menu a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#cfe0ff; }
.menu a:hover, .menu a.active { background: rgba(110,231,255,.10); color:#fff; }
.content { padding: 24px; }
.kpis { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.kpi { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding: 16px; border-radius: 14px; }
.footer { margin-top: 20px; font-size: 12px; color: var(--muted); text-align:center; }
@media (max-width: 960px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }