:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --card:#ffffff;
  --muted:#64748b;
  --text:#0b1220;
  --border:#e5e7eb;
  --soft:#f8fafc;
  --btn:#111827;
  --btnText:#ffffff;
  --accent:#2563eb;
  --ok:#16a34a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial}
body{background:var(--soft);color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px, calc(100% - 32px));margin:0 auto}
.grid{display:grid}
.row{display:flex;align-items:center}

.topbar{background:var(--panel);color:#fff}
.topbar-inner{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{color:#e2e8f0;padding:6px 8px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 30px rgba(2,6,23,.04);
}
.card.subtle{background:#fff;border:1px dashed var(--border);box-shadow:none}

.kpi{font-size:30px;font-weight:800;margin-top:6px}
.small{font-size:13px;color:var(--muted)}
.link{font-weight:600}

.form{display:flex;flex-direction:column;gap:10px}
.form-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  background:#fff;
}
.input:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.12)}

.btn{
  background:var(--btn);
  color:var(--btnText);
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.secondary{background:#e5e7eb;color:#111827}
.btn.small{padding:7px 10px;border-radius:10px;font-weight:700;font-size:13px}

.badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:700;
}
.badge.muted{color:#475569;background:#f1f5f9}
.badge.ok{color:var(--ok);background:#ecfdf5;border-color:#bbf7d0}

.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid var(--border);
  font-size:13px;
}

.alert{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:14px;
  padding:12px;
  color:#9a3412;
}
.alert.success{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#065f46;
}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.table thead th{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.table tbody tr:hover{background:#fafafa}

code{background:#0b1220;color:#e2e8f0;padding:4px 6px;border-radius:8px;display:inline-block;max-width:100%;overflow:auto}

/* responsive */
@media (max-width: 900px){
  .topbar-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width: 720px){
  .grid{grid-template-columns:1fr !important}
  .form-inline{flex-direction:column;align-items:stretch}
}