/* ──────────────────────────────────────────────────────────────────────────
   Sub-app re-skin. Loaded after each app's own <style>, so these rules win.
   Strategy: (1) remap the colour variables every app already uses onto the
   light design tokens, (2) restyle the shared vocabulary (headings, tabs,
   cards, tables, inputs, buttons, pills) with the system components,
   (3) per-app corrections under body[data-app="…"].
   Functionality is untouched — no ids, no JS hooks, no layout ids change.
   ────────────────────────────────────────────────────────────────────────── */
@import url('/assets/css/system.css');

/* ── 1. variable remap ─────────────────────────────────────────────────── */
body[data-app] {
  --bg: var(--white); --surface: var(--white); --surface2: var(--offwhite); --surface-2: var(--offwhite); --surface-3: #ececf0;
  --panel: var(--white); --border: var(--line); --border-light: var(--line-strong); --line: rgba(0,0,0,.08); --rule: rgba(0,0,0,.12);
  --text: var(--ink); --dim: var(--ink-2); --text-dim: var(--ink-2); --muted: var(--ink-2); --text-muted: var(--ink-2);
  --primary: #c8102e; --primary-dim: #a90d27; --primary-glow: rgba(200,16,46,.18);
  --secondary: var(--good); --green: var(--good); --good: #1f9d55; --green-glow: rgba(31,157,85,.12);
  --accent: #9a6700; --amber: #b8860b; --red: var(--bad); --flag: var(--bad); --blue: #0066cc; --tg: #2aabee;
  --accent-light: #2997ff; --accent-glow: rgba(0,102,204,.12);
  --grid: rgba(0,0,0,.03);
  --font: var(--font-sans); --mono: var(--font-mono); --sans: var(--font-sans);
  font-family: var(--font-sans) !important; background: var(--white) !important; color: var(--ink) !important;
  padding-top: var(--nav-h); cursor: auto; display: block !important; min-height: 0; margin: 0;
}
body[data-app="txdot-dash"], body[data-app="checkbook"] { --accent: #0066cc; }
body[data-app] *, body[data-app] *::before, body[data-app] *::after { font-family: inherit; }
body[data-app] code, body[data-app] pre, body[data-app] .mono, body[data-app] kbd { font-family: var(--font-mono); }
body[data-app]::before, body[data-app]::after { display: none !important; }   /* old field-stripe backdrops */
body[data-app] #bgCanvas, body[data-app] #batter-cursor, body[data-app] #catch-counter { display: none !important; }

/* ── 2. shared vocabulary ──────────────────────────────────────────────── */
body[data-app] .app .wrap, body[data-app] .app .container, body[data-app] .app .page, body[data-app] .app .sheet-inner, body[data-app] .app main.container {
  width: min(100% - 2 * var(--gutter), var(--container)); max-width: var(--container); margin-inline: auto; padding-inline: 0;
}
body[data-app] .app .back, body[data-app] .app .back-link, body[data-app] .app .home-link, body[data-app] .app .topnav, body[data-app] .app .crumbs .home-link { display: none !important; }

/* the design system's .hero / .stat / .card names collide with app classes — reset them here */
body[data-app] .app .hero { min-height: 0; display: block; padding: 0; overflow: visible; isolation: auto; align-items: initial; }
body[data-app] .app .stats, body[data-app] .app .stat { display: revert; }

/* page head: the app's own h1 + subtitle become an editorial header */
body[data-app] .app h1 {
  font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.02;
  color: var(--ink); margin: clamp(40px, 6vw, 72px) 0 0; text-shadow: none; text-transform: none;
}
body[data-app] .app h1 span, body[data-app] .app h1 em, body[data-app] .app h1 .accent { color: var(--ink); font-style: normal; text-shadow: none; }
body[data-app] .app .sub, body[data-app] .app .lede, body[data-app] .app .hero > p, body[data-app] .app header .sub, body[data-app] .app .masthead .sub {
  font-size: var(--text-lg); line-height: 1.4; color: var(--ink-2); max-width: 64ch; margin: 14px 0 28px; font-family: var(--font-sans);
}
body[data-app] .app .sub b, body[data-app] .app .sub strong { color: var(--ink); font-weight: 600; }
body[data-app] .app h2 {
  font-family: var(--font-sans); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  margin: 36px 0 12px; text-transform: none; border: 0; padding: 0;
}
body[data-app] .app h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body[data-app] .app p, body[data-app] .app li { color: var(--ink-2); }
body[data-app] .app a { color: var(--link); }
body[data-app] .app .muted, body[data-app] .app .dim, body[data-app] .app .hint, body[data-app] .app .meta, body[data-app] .app .ts, body[data-app] .app .note { color: var(--ink-3); }

/* tabs → segmented control */
body[data-app] .app .tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(127,127,127,.12); border: 0; margin: 4px 0 22px; }
body[data-app] .app .tabs .tab-btn, body[data-app] .app .tabs .tab, body[data-app] .app .tabs button {
  min-height: 34px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-2);
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none; transition: background var(--dur-fast), color var(--dur-fast);
}
body[data-app] .app .tabs .tab-btn:hover, body[data-app] .app .tabs .tab:hover { color: var(--ink); background: rgba(127,127,127,.1); }
body[data-app] .app .tabs .tab-btn.active, body[data-app] .app .tabs .tab.active, body[data-app] .app .tabs .tab[aria-selected="true"], body[data-app] .app .tabs button.active {
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm);
}

/* cards & panels */
body[data-app] .app .card, body[data-app] .app .panel, body[data-app] .app .stat, body[data-app] .app .stat-box, body[data-app] .app .stat-card, body[data-app] .app .bet-card,
body[data-app] .app .pick-card, body[data-app] .app .bb-card, body[data-app] .app .hp-pick, body[data-app] .app .status-box, body[data-app] .app .preview, body[data-app] .app .result,
body[data-app] .app .step, body[data-app] .app .grid > div, body[data-app] .app .cards > div, body[data-app] .app .contracts-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--ink);
}
body[data-app] .app .card, body[data-app] .app .panel, body[data-app] .app .step, body[data-app] .app .bet-card, body[data-app] .app .pick-card, body[data-app] .app .hp-pick, body[data-app] .app .bb-card { padding: 22px 24px; }
body[data-app] .app .stat, body[data-app] .app .stat-box, body[data-app] .app .stat-card { background: var(--offwhite); border: 0; box-shadow: none; padding: 18px 20px; }
body[data-app] .app .stat .k, body[data-app] .app .stat-label, body[data-app] .app .stat-sub, body[data-app] .app .k, body[data-app] .app .label, body[data-app] .app .hp-statblk-lbl, body[data-app] .app .bb-block-lbl {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
body[data-app] .app .stat .v, body[data-app] .app .stat-val, body[data-app] .app .stat-value, body[data-app] .app .val, body[data-app] .app .v, body[data-app] .app .bb-block-val, body[data-app] .app .hp-statblk-val {
  font-family: var(--font-sans); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
body[data-app] .app .grid, body[data-app] .app .stat-grid, body[data-app] .app .stats, body[data-app] .app .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }

/* tables */
body[data-app] .app .tablewrap, body[data-app] .app .tablebox, body[data-app] .app .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
body[data-app] .app table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: transparent; color: var(--ink); font-family: var(--font-sans); }
body[data-app] .app th, body[data-app] .app td { padding: 12px 14px; border: 0; border-top: 1px solid var(--line); text-align: left; background: transparent; white-space: nowrap; }
body[data-app] .app th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-top: 0; background: var(--white); position: sticky; top: 0; }
body[data-app] .app tbody tr:hover td { background: var(--offwhite); }
body[data-app] .app .num, body[data-app] .app td.num, body[data-app] .app th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* forms & buttons */
body[data-app] .app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body[data-app] .app select, body[data-app] .app textarea {
  min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; box-shadow: none; color-scheme: light;
}
body[data-app] .app input:focus, body[data-app] .app select:focus, body[data-app] .app textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
body[data-app] .app label { color: var(--ink-2); font-size: 13px; }
body[data-app] .app button, body[data-app] .app .btn, body[data-app] .app a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border-radius: var(--r-pill); border: 0; background: var(--charcoal); color: #fff; font: inherit; font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none; text-decoration: none; -webkit-text-fill-color: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
body[data-app] .app button:hover, body[data-app] .app .btn:hover { background: #000; }
body[data-app] .app button:active, body[data-app] .app .btn:active { transform: scale(.97); }
body[data-app] .app button:disabled { opacity: .45; cursor: not-allowed; }
body[data-app] .app .ghost, body[data-app] .app .btn-ghost, body[data-app] .app button.mini, body[data-app] .app .hp-mini-btn, body[data-app] .app .filter-btn, body[data-app] .app .page-btn, body[data-app] .app .expand-btn {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); min-height: 36px; padding: 0 14px; font-size: 13px;
}
body[data-app] .app .ghost:hover, body[data-app] .app .btn-ghost:hover, body[data-app] .app .filter-btn:hover { background: rgba(127,127,127,.08); }
body[data-app] .app .filter-btn.active { background: var(--charcoal); color: #fff; box-shadow: none; }
body[data-app] .app .btn-primary, body[data-app] .app button.primary, body[data-app] .app #runBtn { background: var(--charcoal); color: #fff; }
body[data-app] .app .row, body[data-app] .app .controls, body[data-app] .app .filters, body[data-app] .app .actions, body[data-app] .app .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 22px; }

/* pills, badges, chips */
body[data-app] .app .pill, body[data-app] .app .badge, body[data-app] .app .chip, body[data-app] .app .hp-chip, body[data-app] .app .hr-chip, body[data-app] .app .result-badge, body[data-app] .app .hp-tier-badge,
body[data-app] .app .bb-badge, body[data-app] .app .streak-badge, body[data-app] .app .nav-badge, body[data-app] .app .contract-chip, body[data-app] .app .selected-tag, body[data-app] .app .sheet-id {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: rgba(127,127,127,.12); color: var(--ink-2); border: 0; text-transform: none; font-family: var(--font-sans);
}
body[data-app] .app .pill.bet, body[data-app] .app .bet, body[data-app] .app .win, body[data-app] .app .good, body[data-app] .app .pos, body[data-app] .app .hit { color: #157a40; }
body[data-app] .app .pill.bet, body[data-app] .app .pill.good { background: rgba(31,157,85,.14); }
body[data-app] .app .pill.lean, body[data-app] .app .lean, body[data-app] .app .warm { color: #8a5a00; }
body[data-app] .app .pill.lean { background: rgba(240,160,32,.16); }
body[data-app] .app .pill.pass, body[data-app] .app .pass, body[data-app] .app .loss, body[data-app] .app .neg, body[data-app] .app .miss, body[data-app] .app .cold { color: var(--bad); }
body[data-app] .app .pending, body[data-app] .app .push { color: var(--ink-3); }

/* banners */
body[data-app] .app .banner, body[data-app] .app .odds-note, body[data-app] .app .config-warn, body[data-app] .app .info, body[data-app] .app .note.warn, body[data-app] .app .warnings {
  padding: 12px 16px; border-radius: var(--r-md); background: var(--offwhite); color: var(--ink-2); font-size: var(--text-sm); border: 0; margin: 12px 0 18px;
}
body[data-app] .app .banner.warn { background: rgba(240,160,32,.12); color: #7a4b00; }
body[data-app] .app .banner.good, body[data-app] .app .banner.ok, body[data-app] .app .success { background: rgba(31,157,85,.12); color: #157a40; }
body[data-app] .app .err, body[data-app] .app .error, body[data-app] .app .failure { background: rgba(208,52,44,.08); color: #8a1f1a; padding: 12px 16px; border-radius: var(--r-md); border: 0; }
body[data-app] .app .progress { color: var(--ink-3); font-size: var(--text-sm); }
body[data-app] .app .foot, body[data-app] .app .footer { color: var(--ink-3); font-size: 12px; border-top: 1px solid var(--line); padding: 18px 0; margin-top: 32px; }
body[data-app] .app hr, body[data-app] .app .hp-rule { border: 0; border-top: 1px solid var(--line); }

/* ── 3. per-app corrections ────────────────────────────────────────────── */

/* MLB Edge Finder */
body[data-app="mlb"] .app .hp-section-title, body[data-app="mlb"] .app .section-hdr { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 26px 0 10px; }
body[data-app="mlb"] .app .hp-headline, body[data-app="mlb"] .app .hp-pick-matchup { color: var(--ink); }
body[data-app="mlb"] .app .tier-A { color: #157a40; } body[data-app="mlb"] .app .tier-B { color: #0b5fb8; } body[data-app="mlb"] .app .tier-C { color: var(--ink-2); }
body[data-app="mlb"] .app .bt-table td, body[data-app="mlb"] .app .bt-table th { white-space: nowrap; }

/* HitProp analyzer */
body[data-app="hitprop"] .app .pick-rank { color: var(--ink-3); font-weight: 700; }
body[data-app="hitprop"] .app .pick-name { color: var(--ink); font-weight: 600; font-size: 1.05rem; }
body[data-app="hitprop"] .app .pick-score { color: var(--ink); font-weight: 700; }
body[data-app="hitprop"] .app .bb-section, body[data-app="hitprop"] .app .bb-grid { gap: 14px; }
body[data-app="hitprop"] .app .hot { color: #b2460b; }

/* NRFI / HR: hero pick and board */
body[data-app="hrhitter"] .app .hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 18px 0; }
body[data-app="hrhitter"] .app .card.pick { box-shadow: inset 0 0 0 1.5px rgba(31,157,85,.5), var(--shadow-sm); background: #fff; }
body[data-app="hrhitter"] .app .card.value { box-shadow: inset 0 0 0 1.5px rgba(0,102,204,.45), var(--shadow-sm); background: #fff; }
body[data-app="hrhitter"] .app .card .who { color: var(--ink-2); font-size: 13px; }
body[data-app="nrfi"] .app .bar { background: rgba(127,127,127,.15); border-radius: 4px; }
body[data-app="nrfi"] .app .bar > * { border-radius: 4px; }
body[data-app="nrfi"] .app .nrfi { color: #157a40; } body[data-app="nrfi"] .app .yrfi { color: var(--bad); }
body[data-app="nrfi"] .app .edge, body[data-app="hrhitter"] .app .edge { font-weight: 600; color: var(--ink); }

/* Wicks tracker */
body[data-app="wicks"] .app .btn-tg { background: #2aabee; color: #fff; }
body[data-app="wicks"] .app .btn-join, body[data-app="wicks"] .app .btn-notify { background: var(--charcoal); color: #fff; }
body[data-app="wicks"] .app .pulse { background: var(--good); }
body[data-app="wicks"] .app .ok-msg { color: #157a40; }
body[data-app="wicks"] .app .aaa { color: var(--ink-2); }

/* Calendars (hogs / huskers) — a product page */
body[data-app="hogs"] .app .page, body[data-app="huskers"] .app .page { max-width: 820px; text-align: center; padding-bottom: 60px; }
body[data-app="hogs"] .app .hero, body[data-app="huskers"] .app .hero { padding: clamp(36px, 6vw, 64px) 0 12px; }
body[data-app="hogs"] .app .hero-emoji, body[data-app="huskers"] .app .hero-emoji { font-size: 56px; filter: none; animation: none; margin-bottom: 8px; }
body[data-app="hogs"] .app .hero h1, body[data-app="huskers"] .app .hero h1 { margin: 8px auto 0; }
body[data-app="hogs"] .app .hero p, body[data-app="huskers"] .app .hero p { margin: 16px auto 0; max-width: 48ch; }
body[data-app="hogs"] .app .preview-card, body[data-app="huskers"] .app .preview-card { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; margin: 36px auto; background: #fff; max-width: 720px; }
body[data-app="hogs"] .app .preview-label { display: none; }
body[data-app="hogs"] .app .preview-fade { background: linear-gradient(transparent, #fff); }
body[data-app="hogs"] .app .buttons, body[data-app="huskers"] .app .buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0; }
body[data-app="hogs"] .app .btn, body[data-app="huskers"] .app .btn { min-height: 50px; padding: 0 24px; font-size: 16px; border-radius: var(--r-pill); font-weight: 600; }
body[data-app="hogs"] .app .btn svg, body[data-app="huskers"] .app .btn svg { width: 18px; height: 18px; }
body[data-app="hogs"] .app .btn-apple, body[data-app="huskers"] .app .btn-apple { background: var(--charcoal); color: #fff; }
body[data-app="hogs"] .app .btn-google, body[data-app="huskers"] .app .btn-google { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
body[data-app="hogs"] .app .features, body[data-app="huskers"] .app .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 40px 0 20px; }
body[data-app="hogs"] .app .feature, body[data-app="huskers"] .app .feature { background: var(--offwhite); border: 0; border-radius: var(--r-lg); padding: 20px 14px; }
body[data-app="hogs"] .app .feature-icon, body[data-app="huskers"] .app .feature-icon { font-size: 26px; margin-bottom: 8px; }
body[data-app="hogs"] .app .feature-text, body[data-app="huskers"] .app .feature-text { color: var(--ink); font-size: 14px; font-weight: 500; }
body[data-app="hogs"] .app .note, body[data-app="huskers"] .app .note { color: var(--ink-3); font-size: 13px; margin-top: 24px; }

/* Engineering landing: two tool cards, each opening its tool as a normal page */
body[data-app="engineering"] .app .tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 8px 0 56px; }
body[data-app="engineering"] .app .tool { display: flex; flex-direction: column; gap: 10px; padding: 28px; color: var(--ink); text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
body[data-app="engineering"] .app .tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
body[data-app="engineering"] .app .tool h2 { margin: 0; font-size: var(--text-xl); }
body[data-app="engineering"] .app .tool p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
body[data-app="engineering"] .app .tool .link { margin-top: auto; padding-top: 8px; }

/* AUTO_MYMAPS builder (/kmzsplit/, Vite bundle: its own vars + a few hard-coded darks) */
body[data-app="kmzsplit"] { --card: var(--white); --accent: #0066cc; --accent-hover: #0052a3; }
body[data-app="kmzsplit"] .app main.container { padding-block: 0 64px; }
body[data-app="kmzsplit"] .app header h1 { margin-bottom: 0; }
body[data-app="kmzsplit"] .app .card h2 { margin: 0 0 14px; font-size: 1.05rem; }
body[data-app="kmzsplit"] .app label { color: var(--ink); font-weight: 500; }
body[data-app="kmzsplit"] .app .check { color: var(--ink); font-weight: 400; }
body[data-app="kmzsplit"] .app .hint, body[data-app="kmzsplit"] .app .notes { color: var(--ink-3); }
body[data-app="kmzsplit"] .app input[type="file"] { color: var(--ink-2); }
body[data-app="kmzsplit"] .app input[type="text"], body[data-app="kmzsplit"] .app input[type="number"] { background: var(--white); border-color: var(--line-strong); color: var(--ink); }
body[data-app="kmzsplit"] .app button { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
body[data-app="kmzsplit"] .app button:hover:not(:disabled) { background: rgba(127,127,127,.08); }
body[data-app="kmzsplit"] .app button.primary { background: var(--charcoal); color: #fff; box-shadow: none; }
body[data-app="kmzsplit"] .app button.primary:hover:not(:disabled) { background: #000; }
body[data-app="kmzsplit"] .app .status { color: var(--ink-3); }
body[data-app="kmzsplit"] .app .status.ok { color: #157a40; }
body[data-app="kmzsplit"] .app .status.warn { color: #8a5a00; }
body[data-app="kmzsplit"] .app .status.err { color: var(--bad); }
body[data-app="kmzsplit"] .app .outputs li { border-color: var(--line); color: var(--ink); }
body[data-app="kmzsplit"] .app .outputs .meta { color: var(--ink-3); }
body[data-app="kmzsplit"] .app .log { background: var(--offwhite); border: 1px solid var(--line); color: var(--ink-2); border-radius: var(--r-md); }

/* AUTO_MYMAPS builder */
body[data-app="kmz-splitter"] .app header { padding: 0; margin: 0; border: 0; background: transparent; }
body[data-app="kmz-splitter"] .app .card-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
body[data-app="kmz-splitter"] .app .card-sub { color: var(--ink-2); font-size: var(--text-sm); }
body[data-app="kmz-splitter"] .app .field-label { color: var(--ink); font-size: 13px; font-weight: 500; }
body[data-app="kmz-splitter"] .app .filedrop { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--offwhite); color: var(--ink-2); }
body[data-app="kmz-splitter"] .app .filedrop.drag, body[data-app="kmz-splitter"] .app .filedrop.has-file { border-color: var(--link); background: rgba(0,102,204,.05); }
body[data-app="kmz-splitter"] .app .fd-main { color: var(--ink); font-weight: 500; }
body[data-app="kmz-splitter"] .app .progress-track { background: rgba(127,127,127,.15); border-radius: 4px; }
body[data-app="kmz-splitter"] .app .progress-bar { background: var(--link); border-radius: 4px; }
body[data-app="kmz-splitter"] .app .btn-download { background: var(--charcoal); color: #fff; }
body[data-app="kmz-splitter"] .app .status-title { color: var(--ink); font-weight: 600; }
body[data-app="kmz-splitter"] .app .spinner { border-color: rgba(0,0,0,.1); border-top-color: var(--ink); }

/* OSP basemap builder — drafting-sheet metaphor kept, in daylight */
body[data-app="osp-basemap"] .app .sheet { background: var(--white); border: 0; box-shadow: none; padding: 0; margin: 0; }
body[data-app="osp-basemap"] .app .masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px; border: 0; padding: 0 0 22px; margin: 0; }
body[data-app="osp-basemap"] .app .step { margin: 18px 0; }
body[data-app="osp-basemap"] .app .step h2 { margin: 0 0 14px; }
body[data-app="osp-basemap"] .app .step h2 .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--charcoal); color: #fff; font-size: 12px; margin-right: 8px; }
body[data-app="osp-basemap"] .app .map { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; }
body[data-app="osp-basemap"] .app .status { border-radius: var(--r-pill); padding: 5px 12px; font-size: 12px; font-weight: 600; background: rgba(127,127,127,.12); color: var(--ink-2); border: 0; }
body[data-app="osp-basemap"] .app .status.ok, body[data-app="osp-basemap"] .app .status.live { background: rgba(31,157,85,.14); color: #157a40; }
body[data-app="osp-basemap"] .app .status.wait { background: rgba(240,160,32,.16); color: #8a5a00; }
body[data-app="osp-basemap"] .app .drop { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--offwhite); }
body[data-app="osp-basemap"] .app .drop-title { color: var(--ink); }
body[data-app="osp-basemap"] .app .log { background: var(--charcoal); color: #d2d2d7; border-radius: var(--r-md); font-family: var(--font-mono); font-size: 12px; }
body[data-app="osp-basemap"] .app .titleblock, body[data-app="osp-basemap"] .app .tb-cell { border-color: var(--line); }
body[data-app="osp-basemap"] .app .chip { background: rgba(127,127,127,.12); }

/* Conway checkbook */
body[data-app="checkbook"] .app header { background: transparent; border: 0; padding: 0; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
body[data-app="checkbook"] .app header h1 { font-size: var(--text-3xl); }
body[data-app="checkbook"] .app header .sub { margin-bottom: 24px; }
body[data-app="checkbook"] .app .filters label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
body[data-app="checkbook"] .app .panel h2 { margin: 0 0 14px; font-size: 1.1rem; }
body[data-app="checkbook"] .app .panel canvas { max-width: 100%; }
body[data-app="checkbook"] .app .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 800px) { body[data-app="checkbook"] .grid2 { grid-template-columns: 1fr; } }
body[data-app="checkbook"] .app .card .k { font-size: 11px; } body[data-app="checkbook"] .app .card .v { font-size: 1.5rem; }
body[data-app="checkbook"] .app .flag { color: var(--bad); }
body[data-app="checkbook"] .app .tabs .tab.active { background: var(--white); color: var(--ink); }

/* TxDOT dashboard */
body[data-app="txdot-dash"] .app .header { background: transparent; border: 0; position: static; backdrop-filter: none; box-shadow: none; }
body[data-app="txdot-dash"] .app .header-inner { align-items: end; flex-wrap: wrap; gap: 16px; padding: clamp(32px, 5vw, 56px) 0 20px; }
body[data-app="txdot-dash"] .app .brand { align-items: end; gap: 16px; }
body[data-app="txdot-dash"] .app .brand-icon { display: none; }
body[data-app="txdot-dash"] .app .brand h1 { margin: 0; }
body[data-app="txdot-dash"] .app .brand p { color: var(--ink-2); font-size: var(--text-md); margin-top: 8px; }
body[data-app="txdot-dash"] .app .header-actions { gap: 8px; flex-wrap: wrap; }
body[data-app="txdot-dash"] .app .btn { min-height: 38px; font-size: 13px; }
body[data-app="txdot-dash"] .app .btn-primary { background: var(--charcoal); }
body[data-app="txdot-dash"] .app .filter-bar, body[data-app="txdot-dash"] .app .table-toolbar { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
body[data-app="txdot-dash"] .app .search-input, body[data-app="txdot-dash"] .app .filter-input, body[data-app="txdot-dash"] .app .filter-select, body[data-app="txdot-dash"] .app .form-input, body[data-app="txdot-dash"] .app .picker-search { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
body[data-app="txdot-dash"] .app .contractor-name { color: var(--ink); font-weight: 600; }
body[data-app="txdot-dash"] .app .modal-overlay { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-app="txdot-dash"] .app .modal-overlay > div, body[data-app="txdot-dash"] .app .modal { background: var(--white); color: var(--ink); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
body[data-app="txdot-dash"] .app .modal-header { border-bottom: 1px solid var(--line); }
body[data-app="txdot-dash"] .app .freq-option { background: var(--offwhite); border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink); }
body[data-app="txdot-dash"] .app .freq-option.selected { border-color: var(--link); background: rgba(0,102,204,.06); }
body[data-app="txdot-dash"] .app .toast { background: var(--charcoal); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
body[data-app="txdot-dash"] .app .picker-results { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: var(--r-md); }
body[data-app="txdot-dash"] .app .selected-tag { background: rgba(0,102,204,.1); color: #0b5fb8; }
body[data-app="txdot-dash"] .app .success-msg { color: #157a40; }
body[data-app="txdot-dash"] .app .footer { border-top: 1px solid var(--line); }

/* React apps (arbit, horse) keep their dark product UI, presented in a framed
   panel on the light page — like a device screenshot on a product page. */
body[data-app="arbit"], body[data-app="horse"] { background: var(--white) !important; }
body[data-app="arbit"] .app .top { position: static; background: transparent; border: 0; padding: clamp(32px, 5vw, 56px) 0 16px; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; align-items: center; }
body[data-app="arbit"] .app .top .tab { background: transparent; color: var(--ink-2); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
body[data-app="arbit"] .app .top .tab.active { background: var(--charcoal); color: #fff; box-shadow: none; }
body[data-app="arbit"] .app #root, body[data-app="horse"] .app #root {
  width: min(100% - 2 * var(--gutter), var(--container)); margin: 0 auto 48px; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #0c0f14; color-scheme: dark; min-height: 60vh;
}
body[data-app="horse"] .app #root { margin-top: clamp(32px, 5vw, 56px); background: #020617; }
body[data-app="arbit"] .app #root *, body[data-app="horse"] .app #root * { font-family: var(--font-sans); }
body[data-app="arbit"] .app #root button, body[data-app="horse"] .app #root button { min-height: 0; border-radius: 8px; }

/* framed-tool pages: keep their own controls' colours inside the frame */
body[data-app="arbit"] .app #root input, body[data-app="arbit"] .app #root select, body[data-app="horse"] .app #root input, body[data-app="horse"] .app #root select { color-scheme: dark; background: #181c25; color: #e8eaf0; border-color: #2a2f3d; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body[data-app] h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  body[data-app] .sub, body[data-app] .lede { font-size: var(--text-md); }
  body[data-app] th, body[data-app] td { padding: 10px 10px; }
  body[data-app] .tabs { max-width: 100%; overflow-x: auto; }
}

/* ── shell protection: the app's own element rules must not restyle the nav ─ */
body[data-app] .nav button, body[data-app] .nav-mobile button, body[data-app] .nav .btn, body[data-app] .nav-mobile .btn, body[data-app] .footer a {
  font-family: var(--font-sans); -webkit-text-fill-color: currentColor; text-shadow: none; letter-spacing: 0; text-transform: none;
}
body[data-app] .nav-menu > button { background: transparent; border: 0; color: inherit; padding: 8px 0; min-height: 0; border-radius: 0; box-shadow: none; font-size: 13px; font-weight: 500; }
body[data-app] .nav-burger { background: transparent; border: 0; border-radius: 0; padding: 0; min-height: 0; box-shadow: none; color: inherit; }
body[data-app] .nav a, body[data-app] .nav-mobile a, body[data-app] .nav-panel a { color: inherit; text-decoration: none; }
body[data-app] .nav-cta, body[data-app] .nav-mobile-cta { box-shadow: none; border: 0; text-shadow: none; min-height: 32px; }
body[data-app] .nav-mobile-cta { min-height: 48px; }
body[data-app] .nav-light .nav-logo, body[data-app] .nav-light .nav-links a { color: var(--charcoal); }
body[data-app] .footer p, body[data-app] .footer span { color: var(--ink-2); font-size: 12px; }
body[data-app] .footer h4 { color: var(--ink); font-size: 12px; margin: 0 0 10px; }

/* MLB / hitprop text cards */
body[data-app] .app .bet-title, body[data-app] .app .game-title, body[data-app] .app .hp-headline { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-bottom: 8px; }
body[data-app] .app .bet-meta, body[data-app] .app .meta, body[data-app] .app .odds, body[data-app] .app .hp-reasons, body[data-app] .app .hp-risks, body[data-app] .app .hp-yday { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
body[data-app] .app .bet-meta strong { color: var(--ink); }
body[data-app] .app .ev { color: #157a40; font-weight: 600; }
body[data-app] .app .bet-card { border-left: 0; }
body[data-app] .app .bet-card.best { border-left: 0; box-shadow: 0 0 0 1.5px var(--good), var(--shadow-sm); }
body[data-app] .app .odds { color: var(--ink); font-weight: 500; }

body[data-app="osp-basemap"] .app .masthead .sub { text-transform: none; letter-spacing: 0; }
body[data-app] .app code { background: rgba(127,127,127,.12); color: var(--ink); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
body[data-app="kmz-splitter"] .app .card-title::before { display: none; }
body[data-app] .nav, body[data-app] .nav * , body[data-app] .footer, body[data-app] .footer * { box-sizing: border-box; }
body[data-app] .nav-light .nav-cta { color: #fff; -webkit-text-fill-color: #fff; }
body[data-app] .nav-mobile-cta { color: var(--charcoal); -webkit-text-fill-color: var(--charcoal); }
body[data-app] .nav-logo .mark { background: #c8102e; }
body[data-app="txdot-dash"] .app .search-input { padding-left: 36px; }
body[data-app] .app .app-head { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
body[data-app="arbit"] .app .top { padding-top: 0; }
body[data-app="horse"] .app #root { margin-top: 0; }
body[data-app="osp-basemap"] .app .sheet::before, body[data-app="osp-basemap"] .app .sheet::after, body[data-app="osp-basemap"] .app .sheet-inner::before, body[data-app="osp-basemap"] .app .sheet-inner::after { display: none; }
body[data-app] .app .tabs .tab-btn, body[data-app] .app .tabs .tab, body[data-app] .app .tabs button { white-space: nowrap; flex: 0 0 auto; }
body[data-app] .app .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

/* ── 3D hero scenes (HR Edge Finder, MLB Edge Finder) ─────────────────── */
.hr-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; margin: 8px 0 32px; aspect-ratio: 2 / 1; max-height: 560px;
  background: radial-gradient(70% 60% at 30% 20%, rgba(255,236,205,.10), transparent 60%), radial-gradient(60% 50% at 85% 10%, rgba(214,228,255,.08), transparent 60%),
              linear-gradient(180deg, #000 0%, #07080c 55%, #111318 100%); box-shadow: var(--shadow-lg); }
.hr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }
.hr3d-stage { position: absolute; inset: 0; }
.hr3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: pointer; }
.hr3d-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.hr3d-overlay { position: absolute; inset: 0; pointer-events: none; color: #f5f5f7; }
.hr3d-title { position: absolute; left: clamp(20px, 4%, 48px); bottom: clamp(20px, 5%, 44px); max-width: 60%; opacity: 0; transform: translateY(10px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.is-done .hr3d-title { opacity: 1; transform: none; }
.hr3d-h { font-size: clamp(2rem, 4.4vw, 3.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.hr3d-d { margin-top: 10px; font-size: clamp(.95rem, 1.3vw, 1.1rem); color: rgba(245,245,247,.7); font-variant-numeric: tabular-nums; }
.hr3d-d strong { color: #fff; font-weight: 600; }
body[data-app] .app .hr3d-replay { position: absolute; right: 16px; bottom: 16px; pointer-events: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; }
body[data-app] .app .is-done .hr3d-replay { opacity: 1; }
body[data-app] .app .hr3d-replay:hover { background: rgba(255,255,255,.24); }
.hr3d-hint { position: absolute; right: 18px; bottom: 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.hr3d-canvas:focus-visible { outline: 2px solid #2997ff; outline-offset: -4px; }
.hr3d-canvas { cursor: grab; } .hr3d-canvas:active { cursor: grabbing; }

/* phones: the scene gets a square stage on top and the copy sits beneath it,
   so the type never covers the ball and the ball fills the width */
@media (max-width: 700px) {
  .hr-hero { aspect-ratio: auto; max-height: none; border-radius: var(--r-lg); display: flex; flex-direction: column; }
  .hr3d-stage { position: relative; inset: auto; width: 84%; margin: 0 auto; aspect-ratio: 1 / 1; }   /* gutters stay scrollable */
  .hr3d-overlay { position: relative; inset: auto; padding: 4px 20px 20px; pointer-events: auto; }
  .hr3d-title { position: static; max-width: none; }
  .hr3d-h { font-size: 1.7rem; }
  .hr3d-d { font-size: .95rem; margin-top: 8px; }
  body[data-app] .app .hr3d-replay { position: static; margin-top: 14px; opacity: 1; }
  .hr3d-hint { position: static; display: block; margin-top: 12px; }
}

/* ── OSP basemap builder: dark working surface + step navigator ─────────── */
body[data-app="osp-basemap"] {
  --bg: #0b0b0d; --surface: #161618; --surface2: #1e1e21; --panel: #161618; --border: rgba(255,255,255,.12); --line: rgba(255,255,255,.1); --rule: rgba(255,255,255,.16);
  --text: #f5f5f7; --dim: #a1a1a6; --text-dim: #a1a1a6; --muted: #a1a1a6; --grid: rgba(255,255,255,.035);
  --accent: #ffd60a; --secondary: #30d158; --blue: #2997ff;
  background: #0b0b0d !important; color: #f5f5f7 !important; color-scheme: dark;
}
body[data-app="osp-basemap"] .app h1, body[data-app="osp-basemap"] .app h2, body[data-app="osp-basemap"] .app h3, body[data-app="osp-basemap"] .app .card-title { color: #f5f5f7; }
body[data-app="osp-basemap"] .app p, body[data-app="osp-basemap"] .app li, body[data-app="osp-basemap"] .app label, body[data-app="osp-basemap"] .app .sub, body[data-app="osp-basemap"] .app .note, body[data-app="osp-basemap"] .app .map-hint, body[data-app="osp-basemap"] .app .preview-meta { color: #a1a1a6; }
body[data-app="osp-basemap"] .app .step, body[data-app="osp-basemap"] .app .card, body[data-app="osp-basemap"] .app .panel, body[data-app="osp-basemap"] .app .preview, body[data-app="osp-basemap"] .app .result, body[data-app="osp-basemap"] .app .geo-results { background: #161618; border-color: rgba(255,255,255,.1); box-shadow: none; color: #f5f5f7; }
body[data-app="osp-basemap"] .app .step h2 .num { background: #fff; color: #1d1d1f; }
body[data-app="osp-basemap"] .app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body[data-app="osp-basemap"] .app select, body[data-app="osp-basemap"] .app textarea { background: #0b0b0d; color: #f5f5f7; border-color: rgba(255,255,255,.18); }
body[data-app="osp-basemap"] .app input::placeholder { color: #6e6e73; }
body[data-app="osp-basemap"] .app button, body[data-app="osp-basemap"] .app .btn { background: #fff; color: #1d1d1f; }
body[data-app="osp-basemap"] .app button:hover { background: #e8e8ed; }
body[data-app="osp-basemap"] .app .ghost, body[data-app="osp-basemap"] .app button.mini.ghost { background: transparent; color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
body[data-app="osp-basemap"] .app .ghost:hover { background: rgba(255,255,255,.08); }
body[data-app="osp-basemap"] .app .chip, body[data-app="osp-basemap"] .app .sheet-id, body[data-app="osp-basemap"] .app .status { background: rgba(255,255,255,.1); color: #d2d2d7; }
body[data-app="osp-basemap"] .app .status.ok, body[data-app="osp-basemap"] .app .status.live { background: rgba(48,209,88,.16); color: #30d158; }
body[data-app="osp-basemap"] .app .status.wait { background: rgba(255,214,10,.14); color: #ffd60a; }
body[data-app="osp-basemap"] .app .failure, body[data-app="osp-basemap"] .app .err { background: rgba(255,69,58,.14); color: #ff6961; }
body[data-app="osp-basemap"] .app .map { border-color: rgba(255,255,255,.12); }
body[data-app="osp-basemap"] .app .drop { background: #0b0b0d; border-color: rgba(255,255,255,.22); }
body[data-app="osp-basemap"] .app .drop-title { color: #f5f5f7; }
body[data-app="osp-basemap"] .app .log { background: #000; color: #a1a1a6; }
body[data-app="osp-basemap"] .app .titleblock, body[data-app="osp-basemap"] .app .tb-cell { border-color: rgba(255,255,255,.14); }
body[data-app="osp-basemap"] .app .geo-hit:hover { background: rgba(255,255,255,.06); }
body[data-app="osp-basemap"] .app a { color: #2997ff; }
body[data-app="osp-basemap"] .app .tabs { background: rgba(255,255,255,.08); }
body[data-app="osp-basemap"] .app .tabs .tab.active, body[data-app="osp-basemap"] .app .tabs .tab[aria-selected="true"] { background: #2a2a2e; color: #fff; }
body[data-app="osp-basemap"] .app .leaflet-control-zoom a { background: #161618; color: #f5f5f7; border-color: rgba(255,255,255,.12); }
body[data-app="osp-basemap"] .app .leaflet-control-attribution { background: rgba(0,0,0,.6); color: #a1a1a6; }
body[data-app="osp-basemap"] .footer { background: #0b0b0d; color: #a1a1a6; border-top-color: rgba(255,255,255,.1); }
body[data-app="osp-basemap"] .footer h4 { color: #f5f5f7; } body[data-app="osp-basemap"] .footer a { color: #a1a1a6; }
body[data-app="osp-basemap"] .footer p, body[data-app="osp-basemap"] .footer span { color: #a1a1a6; }

/* step navigator */
body[data-app] .app .stepnav { position: sticky; top: var(--nav-h); z-index: 40; margin: 0 0 14px; padding: 8px 0; background: rgba(11,11,13,.82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(255,255,255,.08); }
body[data-app] .app .stepnav-inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
body[data-app] .app .stepnav-inner::-webkit-scrollbar { display: none; }
body[data-app] .app .stepnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #a1a1a6; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
body[data-app] .app .stepnav a .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1); color: #f5f5f7; font-size: 12px; font-weight: 600; }
body[data-app] .app .stepnav a:hover { color: #fff; background: rgba(255,255,255,.06); }
body[data-app] .app .stepnav a.active { color: #1d1d1f; background: #fff; }
body[data-app] .app .stepnav a.active .n { background: #1d1d1f; color: #fff; }
body[data-app="osp-basemap"] .app .step { scroll-margin-top: calc(var(--nav-h) + 64px); }
body[data-app="osp-basemap"] .app .sheet, body[data-app="osp-basemap"] .app .sheet-inner { background: transparent; }
body[data-app] .nav:not(.nav-light) .nav-cta { color: var(--charcoal); -webkit-text-fill-color: var(--charcoal); background: #fff; }
body[data-app="osp-basemap"] .app h1 span, body[data-app="osp-basemap"] .app h1 .accent, body[data-app="osp-basemap"] .app .sheet-id b { color: #ffd60a; }
/* 8-ball inside app pages: keep its own dark typography and button */
body[data-app] .app .eightball .eb-h { color: #fff; margin: 8px 0 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
body[data-app] .app .eightball .eb-sub, body[data-app] .app .eightball .eb-answer-sub { color: rgba(245,245,247,.68); }
body[data-app] .app .eightball .eb-eyebrow, body[data-app] .app .eightball .eb-hint { color: rgba(255,255,255,.5); }
body[data-app] .app .eightball .eb-answer-title { color: #fff; }
body[data-app] .app .eightball .eb-shake { min-height: 46px; padding: 0 24px; background: #fff; color: #1d1d1f; font-size: 16px; font-weight: 600; }
body[data-app] .app .eightball .eb-link { color: #2997ff; }
body[data-app] .app .eightball.light .eb-h, body[data-app] .app .eightball.light .eb-answer-title { color: var(--ink); }
body[data-app] .app .eightball.light .eb-sub, body[data-app] .app .eightball.light .eb-answer-sub { color: var(--ink-2); }
body[data-app] .app .eightball.light .eb-eyebrow { color: var(--accent); }
body[data-app] .app .eightball.light .eb-hint { color: var(--ink-3); }
body[data-app] .app .eightball.light .eb-shake { background: var(--charcoal); color: #fff; }
body[data-app] .app .eightball.light .eb-link { color: var(--link); }
body[data-app] .app .hr-hero + .eightball { margin-top: 24px; }