/* Shared stylesheet for the generated pages. System fonts only, so pages render instantly. */
:root { --bg: #E8EBEE; --surface: #F8F9FA; --sunk: #DFE3E7; --ink: #14181D; --muted: #59626D; --line: #C9CFD6; --accent: #1D4ED8; --accent-ink: #fff;
  --display: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace }
@media (prefers-color-scheme: dark) { :root { --bg: #0F1216; --surface: #171B21; --sunk: #12161B; --ink: #E5E8EC; --muted: #97A1AD; --line: #2A3139; --accent: #7FA4FF; --accent-ink: #0B1020; color-scheme: dark } }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px }
a { color: var(--accent) }
header.band { background: var(--surface); border-bottom: 1px solid var(--line) }
header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-block: 12px }
.logo { font: 700 1.6rem/1 var(--display); text-transform: uppercase; color: var(--ink); text-decoration: none } .logo span { color: var(--accent) }
nav { display: flex; gap: 4px 18px; flex-wrap: wrap } nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem } nav a:hover { color: var(--accent) }
main { padding-block: 16px 56px }
.crumbs { font-size: .85rem; color: var(--muted); margin: 0 0 6px } .crumbs a { color: var(--muted) }
h1 { font: 700 2rem/1.1 var(--display); text-transform: uppercase; margin: 0 0 14px; text-wrap: balance }
h2 { font: 700 1.3rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 28px 0 10px }
.lead { font-size: 1.05rem; max-width: 72ch } .hint { color: var(--muted); font-size: .85rem }
.two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px } .box p { margin: 0 0 10px }
.lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.big { font: 500 2.2rem/1.1 var(--mono) } .kg { color: var(--muted); font-size: .6em } td .kg { font-size: .85em }
dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 12px 0 0 }
dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) } dd { margin: 0; font-family: var(--mono) }
.btn { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 6px 12px; text-decoration: none; color: var(--ink); font-size: .9rem }
.btn:hover { border-color: var(--ink) } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; padding: 9px 16px }
.btn.wide { display: block; text-align: center; margin-bottom: 8px } .buy1 { border-color: var(--accent); color: var(--accent); font-weight: 600; white-space: nowrap }
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 9px 12px; background: var(--sunk); border-bottom: 1px solid var(--line); white-space: nowrap }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top } tr:last-child td { border-bottom: 0 }
td a { color: inherit; text-decoration: none } td a:hover b { color: var(--accent); text-decoration: underline }
.num { text-align: right; font-family: var(--mono); white-space: nowrap } .mono { font-family: var(--mono); white-space: nowrap }
td small { display: block; color: var(--muted); font-size: .75rem }
.chip { font: .72rem var(--mono); background: var(--sunk); color: var(--muted); padding: 1px 6px; border-radius: 3px; white-space: nowrap }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 }
.pills a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .92rem }
.pills a:hover { border-color: var(--accent); color: var(--accent) } .pills span { font-family: var(--mono); color: var(--muted); font-size: .8rem }
.reports { padding-left: 18px } .reports li { margin-bottom: 4px }
footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem } footer .wrap { padding-block: 14px 24px } footer p { margin: 4px 0; max-width: 80ch }
@media (max-width: 700px) { .two { grid-template-columns: minmax(0, 1fr) } .hm { display: none } h1 { font-size: 1.6rem } td, th { padding: 8px 9px } }