:root{
  --bg:#0b1220;
  --bg2:#111827;
  --panel:#172033;
  --line:#2a3852;
  --text:#eef4ff;
  --muted:#9fb0cf;
  --primary:#2563eb;
  --primary2:#3b82f6;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}
h1,h2,h3,p{margin:0}
a{color:#93c5fd;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
.stack{display:grid;gap:12px}
input,select,textarea,button{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg2);
  color:var(--text);
}
textarea{min-height:90px;resize:vertical}
button{cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));font-weight:700}
.btn-secondary{background:#334155}
.btn-danger{background:linear-gradient(135deg,#991b1b,var(--danger))}
.notice{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.25);
  color:#fde68a;
}
.login-body{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 30%),
    linear-gradient(145deg,#08111e,#0e1727 45%,#142036 100%);
}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:100%;
  max-width:540px;
  background:rgba(23,32,51,.96);
  border:1px solid var(--line);
  border-radius:24px;
  padding:30px;
}
.portal-card{max-width:950px}
.brand{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.logo{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  font-size:28px;font-weight:900;
}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:var(--bg2);border-right:1px solid var(--line);padding:20px}
.menu{display:grid;gap:10px;margin-top:20px}
.menu button{background:#192338;text-align:left}
.menu button.active,.menu button:hover{background:#22304d}
.main{padding:24px}
.top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--panel);padding:16px;border-radius:18px;border:1px solid var(--line);margin-bottom:20px
}
.pages .page{display:none}.pages .page.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
.kpi,.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}
.kpi span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.kpi strong{font-size:28px}
.card h3{margin-bottom:12px}
.list-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.list-card p{margin-top:8px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.actions button{width:auto;padding:9px 12px;background:#243247}
.actions .danger{background:#7f1d1d}
.actions .success{background:#166534}
.actions .warning{background:#a16207}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.green{background:rgba(22,163,74,.15);color:#86efac;border:1px solid rgba(22,163,74,.35)}
.yellow{background:rgba(245,158,11,.15);color:#fde68a;border:1px solid rgba(245,158,11,.35)}
.red{background:rgba(220,38,38,.15);color:#fca5a5;border:1px solid rgba(220,38,38,.35)}
.portal-grid,.portal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.mini{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px}
.mini span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.mini strong{font-size:24px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .grid2,.portal-grid,.portal-stats{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){.kpis{grid-template-columns:1fr}}