:root{
  --border:#ddd; --muted:#666; --bg:#fff;
  --danger:#b00020; --ok:#0a7; --ink:#111;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.hidden{display:none !important}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 14px;z-index:10}
main{padding:14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:#fff;padding:10px 12px;border-radius:12px;font-size:14px;cursor:pointer}
.btnPrimary{border:1px solid var(--ink);background:var(--ink);color:#fff}
.btnDanger{border:1px solid var(--danger);background:var(--danger);color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}
.pill{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;white-space:nowrap}
.card{border:1px solid var(--border);border-radius:14px;padding:12px;margin-top:10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.code{font-weight:800}
hr{border:none;border-top:1px solid var(--border);margin:12px 0}
.tableWrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:880px}
th,td{border-bottom:1px solid #eee;padding:10px;text-align:left;vertical-align:top}
th{position:sticky;top:0;background:#fafafa;z-index:5;font-size:12px}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.option{border:1px solid var(--border);border-radius:12px;padding:10px;margin:8px 0;cursor:pointer}
.optionSelected{border-color:var(--ink)}
.stickyBar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);padding:10px 14px}