:root{
  --bg:#0b0f14; --card:#111723; --muted:#94a3b8; --text:#e6edf3;
  --brand:#3b82f6; --border:#243144; --input:#0b1220; --shadow: rgba(0,0,0,.2);
}
:root[data-theme="light"]{
  --bg:#f6f8fb; --card:#ffffff; --muted:#475569; --text:#0f172a;
  --brand:#2563eb; --border:#e2e8f0; --input:#f8fafc; --shadow: rgba(2,6,23,.08);
}
*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji");
  background: var(--bg); color: var(--text);
}
header{
  position:sticky; top:0; z-index:10; background: var(--card);
  border-bottom:1px solid var(--border); padding: 16px 12px;
}
.wrap{max-width:1100px; margin:0 auto; padding:0 12px}
.hstack{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
h1{margin:0; font-size: clamp(20px, 2.6vw, 28px)}
.sub{color:var(--muted); font-size:14px}
.btn{
  background: var(--brand); color:white; border:none; padding:10px 14px;
  border-radius:12px; font-weight:600; cursor:pointer; transition:.18s transform,.18s box-shadow;
  box-shadow:0 6px 20px var(--shadow);
}
.btn:active{ transform: translateY(1px) }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }
.btn.secondary{ background:#1f2937; color:#e5e7eb; border:1px solid var(--border) }
:root[data-theme="light"] .btn.secondary{ background:#e2e8f0; color:#0f172a }
.switch{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted);
  border:1px solid var(--border); padding:8px 10px; border-radius:999px; background:var(--card)
}
.switch input{ accent-color: var(--brand) }
main{ padding: 18px 0 40px }
.card{
  background: var(--card); border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow: 0 10px 30px var(--shadow); margin: 12px 0;
}
.section-title{ margin: 2px 0 12px; font-size: 18px }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
@media (max-width: 780px){ .grid2{ grid-template-columns: 1fr } }
input[type="file"], input[type="text"], input[type="date"], select{
  width:100%; background:var(--input); color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; outline:none;
}
label{ font-size:12px; color:var(--muted); display:block; margin: 4px 0 6px }
table{ width:100%; border-collapse: collapse; font-size:14px }
thead th{
  position:sticky; top:0; background:var(--card); color:var(--muted);
  text-align:left; padding:12px; border-bottom:1px solid var(--border);
  cursor:pointer; user-select:none
}
tbody td{ padding:10px 12px; border-bottom:1px dashed var(--border) }
tbody tr:hover{ background:var(--input) }
.count{ color:var(--muted); font-size:13px }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--input); font-size:12px }
.hidden{ display:none !important }