:root{
  --bg:#e2e8f0;
  --card:#ffffff;
  --line:#64748b;
  --text:#0f172a;
  --mut:#475569;
  --accent:#2563eb;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif}
.top{padding:14px 16px;border-bottom:2px solid var(--line);background:var(--card)}
.muted{color:var(--mut);margin:0}
.small{font-size:12px}
.wrap{padding:12px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#cbd5e1;border-bottom:2px solid var(--line)}
.tab{padding:8px 16px;border-radius:8px;border:2px solid var(--line);background:#f1f5f9;color:var(--text);cursor:pointer;font-weight:700}
.tab.active{background:var(--accent);color:#fff;border-color:#1e3a8a}

.card{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:16px;margin:10px 0;box-shadow:3px 3px 0 rgba(0,0,0,.1)}
.hidden{display:none}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpiRow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:10px 0}
@media(max-width:980px){
  .row2,.grid2{grid-template-columns:1fr}
  .kpiRow{grid-template-columns:repeat(2,1fr)}
}

label{display:block;font-size:12px;color:var(--mut);margin-bottom:4px;font-weight:700}

input,select,textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:2px solid var(--line);
  background:#fff;
  color:#000;
}

table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid var(--line);padding:8px;font-size:13px}
th{background:#f1f5f9;text-align:left}

.kpi{border:2px solid var(--line);border-radius:12px;padding:12px;background:#fff}

.code{
  white-space:pre-wrap;
  background:#1e293b;
  color:#f8fafc;
  border:2px solid #000;
  padding:12px;
  border-radius:10px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:12px;
}