/* Market Radar — design A2 (dark, grouped by the city you buy in). No inline styles anywhere: CSP is style-src 'self'. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }

:root {
  --bg: #0e1014; --bg-raised: #12151b; --bg-row: #1b1f27; --bg-input: #0e1014; --bg-tile: #20252e; --bg-avatar: #2a2f39;
  --line: #23272f; --line-soft: #1c2027; --line-input: #2c313b;
  --text: #e8eaef; --text-strong: #f2f3f6; --text-2: #cfd3da; --text-3: #b7bcc6; --muted: #8d93a0; --faint: #6b717d;
  --gold: #e3b552; --gold-hi: #f3cf7e; --gold-bg: #2a2416; --gold-ink: #1a1408;
  --green: #5fd39b; --green-hi: #7fe0a8; --green-bg: #16301f;
  --amber: #f0cc6a; --amber-bg: #3a3116;
  --red: #ff9d84; --red-hi: #ffb3a0; --red-bg: #3d1c16; --red-btn-bg: #2a1712; --red-line: #7a3a2a;
  --road: #f0a070; --api: #b7bcc6; --api-bg: #262a33; --api-text: #9aa1ad;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }
h1, h2, h3 { margin: 0; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; }
.nav { flex: 1 1 220px; max-width: 240px; min-width: 200px; padding: 20px 14px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; font-weight: 700; font-size: 17px; color: var(--text); text-decoration: none; }
.brand svg { flex: 0 0 26px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; color: var(--text-3); text-decoration: none; font-size: 15px; }
.nav-link:hover { background: #161a21; color: var(--text-strong); }
.nav-link.is-active { background: var(--bg-row); color: var(--text-strong); font-weight: 600; }
.nav-link.is-small { padding: 9px 12px; font-size: 14px; }
.nav-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nav-link.is-active .nav-count { color: var(--gold); }
.nav-sep { height: 1px; background: var(--line); margin: 12px 4px; }
.nav-label { padding: 4px 12px 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.nav-city { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-2); text-decoration: none; font-size: 14px; border-radius: 8px; }
.nav-city:hover { background: #161a21; }
.nav-city .age { margin-left: auto; font-size: 12px; color: var(--muted); }
.nav-status { margin-top: auto; padding: 14px 12px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--faint); }
.dot.fresh { background: var(--green); } .dot.aging { background: var(--amber); } .dot.stale { background: var(--red); } .dot.ok { background: #4cc38a; }

.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.page-title { font-size: 22px; font-weight: 700; }
.page-sub { font-size: 13px; color: var(--muted); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-3); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-avatar); display: grid; place-items: center; font-weight: 600; color: var(--gold); text-decoration: none; }
.avatar.is-large { width: 64px; height: 64px; font-size: 26px; font-weight: 700; }
.page-body { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- toolbar and badges ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 28px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-input); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.chip:hover { border-color: #3a404c; color: var(--text-strong); }
.chip.is-on { border-color: var(--gold); background: var(--gold-bg); color: var(--gold-hi); font-weight: 600; }
.vsep { width: 1px; height: 22px; background: var(--line-input); margin: 0 4px; }
.legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.search { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-input); background: var(--bg-input); color: var(--text); font: inherit; font-size: 13px; min-width: 160px; }
.select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-input); background: var(--bg-input); color: var(--text); font: inherit; font-size: 13px; }

.badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-weight: 700; font-size: 11px; letter-spacing: .2px; }
.badge.local-fresh { background: var(--green-bg); color: var(--green-hi); }
.badge.local-aging { background: var(--amber-bg); color: var(--amber); }
.badge.local-stale { background: var(--red-bg); color: var(--red); }
.badge.local-none { background: var(--bg-row); color: var(--faint); }
.badge.api { background: var(--api-bg); color: var(--api); }
.pill { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.pill.verified { background: var(--green-bg); color: var(--green-hi); }
.pill.unverified { background: var(--amber-bg); color: var(--amber); }
.pill.disagree { background: var(--red-bg); color: var(--red); }
.t-fresh { color: var(--green-hi); } .t-aging { color: var(--amber); } .t-stale { color: var(--red); } .t-none { color: var(--faint); } .t-api { color: var(--api-text); }

/* ---------- opportunity list (grouped by buy city) ---------- */
.board { display: flex; flex-wrap: wrap; flex: 1 1 auto; }
.board-list { flex: 999 1 520px; min-width: 0; overflow-x: auto; padding: 8px 0 24px; }
.group { min-width: 700px; }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 28px 10px; }
.group-head h2 { font-size: 16px; font-weight: 700; }
.group-note { font-size: 13px; }
.go-update.is-calm { border-color: var(--line-input); background: transparent; color: var(--text-2); font-weight: 500; }
.go-update { margin-left: auto; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--red-line); background: var(--red-btn-bg); color: var(--red-hi); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.row { display: grid; grid-template-columns: minmax(210px, 2fr) minmax(120px, 1.1fr) 96px 96px 170px; gap: 0 16px; align-items: center;
  margin: 0 16px; padding: 11px 12px; border-radius: 8px; color: inherit; text-decoration: none; cursor: pointer; border: 0; background: transparent; width: calc(100% - 32px); text-align: left; font: inherit; }
.row:hover { background: #161a21; }
.row.is-selected { background: var(--bg-row); }
.row.is-dim { opacity: .62; }
.row-head { cursor: default; padding-top: 4px; padding-bottom: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.row-head:hover { background: transparent; }
.row-head .profit, .row-head .num { font-family: inherit; font-size: 11px; font-weight: 500; color: var(--muted); }
.pay-inline { display: none; }
.item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tier { flex: 0 0 38px; height: 38px; border-radius: 8px; background: var(--bg-tile); border: 1px solid var(--line-input); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--gold); }
.tier.is-small { flex-basis: 32px; height: 32px; font-size: 11px; border-radius: 6px; }
.item-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: 12px; color: var(--muted); }
.dest { font-size: 14px; color: var(--text-2); }
.road { font-size: 12px; color: var(--road); }
.num { text-align: right; font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.profit { text-align: right; font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--green); }
.profit.is-muted { color: var(--muted); }
.sources { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sources span { display: flex; align-items: center; gap: 6px; }
.empty { margin: 40px 28px; padding: 28px; border: 1px dashed var(--line-input); border-radius: 12px; color: var(--text-3); max-width: 640px; }
.empty h2 { font-size: 17px; margin-bottom: 8px; color: var(--text); }

.detail { flex: 1 1 300px; max-width: 370px; border-left: 1px solid var(--line); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-raised);
  position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; }
.detail-title { font-size: 18px; font-weight: 700; }
.detail-profit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.detail-profit .big { font-family: var(--mono); font-size: 26px; font-weight: 600; color: var(--green); }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: #d6d9df; }
.section-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.divided { border-top: 1px solid var(--line); padding-top: 14px; }
.src-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; font-size: 13px; align-items: center; }
.src-grid .label { color: var(--text-2); }
.src-grid .sub { color: var(--muted); }
.fineprint { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---------- buttons and forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line-input);
  background: transparent; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: #3a404c; color: var(--text-strong); }
.btn-primary { border: 0; background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.btn-primary:hover { background: var(--gold-hi); color: var(--gold-ink); }
.btn-danger { border-color: var(--red-line); color: var(--red-hi); background: var(--red-btn-bg); }
.btn-block { width: 100%; }
.btn-left { justify-content: flex-start; text-align: left; }

.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.auth-card.is-wide { max-width: 620px; }
.auth-card .brand { padding: 0 0 6px; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.card h1 { font-size: 21px; }
.card h2 { font-size: 16px; font-weight: 700; }
.card p { margin: 0; color: var(--text-3); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-3); }
.field input, .field select, .field textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-input); background: var(--bg-input);
  color: var(--text); font: inherit; font-size: 14px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field.has-error input { border-color: var(--red-line); }
.field-error { color: var(--red); font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: 0 0 18px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 12px 14px; border-radius: 8px; font-size: 14px; border: 1px solid var(--line-input); background: var(--bg-row); color: var(--text-2); }
.notice.ok { border-color: #24563a; background: var(--green-bg); color: var(--green-hi); }
.notice.warn { border-color: #5a4a1e; background: var(--amber-bg); color: var(--amber); }
.notice.err { border-color: var(--red-line); background: var(--red-bg); color: var(--red-hi); }
.links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: var(--mono); font-size: 15px; }
.codes span { padding: 8px 10px; border: 1px solid var(--line-input); border-radius: 6px; text-align: center; }

/* ---------- profile ---------- */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.profile-head h1 { font-size: 24px; }
.status { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.status.active { background: var(--green-bg); color: var(--green-hi); }
.status.pending { background: var(--amber-bg); color: var(--amber); }
.status.suspended, .status.expired, .status.rejected { background: var(--red-bg); color: var(--red); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cards .card.is-full { grid-column: 1 / -1; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kv { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.kv div { display: flex; justify-content: space-between; gap: 10px; }
.kv dt { color: var(--text-3); margin: 0; }
.kv dd { margin: 0; text-align: right; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.setting input[type=number], .setting select { width: 120px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-input); background: var(--bg-input); color: var(--text); font: inherit; text-align: right; }
.setting input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); }
.list-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.list-row .btn { margin-left: auto; padding: 6px 10px; font-size: 13px; }

/* ---------- prose pages ---------- */
.prose { max-width: 760px; color: var(--text-2); line-height: 1.65; }
.prose h1 { font-size: 24px; color: var(--text); margin-bottom: 6px; }
.prose h2 { font-size: 17px; color: var(--text); margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.footer { padding: 18px 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 14px; }
.footer a { color: var(--muted); }

.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---------- phones (390 px) ---------- */
@media (max-width: 760px) {
  .nav { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; gap: 4px; }
  .brand { padding: 4px 8px; width: 100%; }
  .nav-sep, .nav-label, .nav-city, .nav-status { display: none; }
  .nav-link { padding: 8px 10px; font-size: 14px; }
  .page-head, .toolbar { padding-left: 16px; padding-right: 16px; }
  .page-body { padding: 18px 16px 32px; }
  .group { min-width: 0; }
  .group-head { padding: 16px 16px 8px; }
  .row { grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 8px; width: calc(100% - 16px); }
  .row .dest { grid-column: 1; }
  .row .num { display: none; }
  .row-head { display: none; }
  .row .pay-inline { display: inline; }
  .row .profit { grid-row: 1; grid-column: 2; }
  .row .sources { grid-column: 1 / -1; flex-direction: row; gap: 12px; }
  .detail { max-width: none; border-left: 0; border-top: 1px solid var(--line); position: static; max-height: none; }
  .legend { margin-left: 0; }
}

/* ---------- expandable rows (crafting) ---------- */
details.card { padding: 6px 6px 14px; gap: 10px; }
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { background: var(--bg-row); }
details.card > :not(summary) { margin: 0 14px; }
.row.is-static { margin: 0; width: 100%; }
details > summary.go-update { list-style: none; }
details > summary.go-update::-webkit-details-marker { display: none; }
.card ul, .notice ul { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); font-size: 14px; }
.card details summary { cursor: pointer; color: var(--text-2); padding: 6px 0; }

/* ---------- admin ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); }
.tile .label { font-size: 12px; color: var(--muted); }
.tile .value { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.value.gold { color: var(--gold-hi); } .value.green { color: var(--green); } .value.red { color: var(--red); }
.count-pill { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: 12px; font-weight: 700; }
.nav-status-col { flex-direction: column; align-items: stretch; gap: 8px; }
.admin-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.admin-main { flex: 999 1 520px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.admin-aside { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.admin-aside h2 { font-size: 16px; margin-top: 6px; }
.signup { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.signup .item { flex: 1 1 320px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.field-inline select, .input-sm { padding: 8px; border-radius: 8px; border: 1px solid var(--line-input); background: var(--bg-input); color: var(--text); font: inherit; font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.data { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
table.data.compact { min-width: 0; font-size: 13px; }
table.data th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; background: var(--bg-raised); padding: 10px 12px; font-weight: 600; }
table.data td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.pre { white-space: pre-wrap; }
.explain { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-3); max-width: 920px; }
.explain p { margin: 0; }
.explain b { color: var(--text); }