:root {
  --bg: #0e0f14;
  --surface: #171922;
  --surface-2: #1f2230;
  --border: #2a2e3d;
  --text: #e8e6e1;
  --muted: #9a9488;
  --divine: #e6b765;
  --divine-dim: #8a6f3c;
  --exalted: #9fc3e8;
  --up: #6fb98a;
  --down: #d2766b;
  --warn: #c89b5a;
  --radius: 12px;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 78% -8%, rgba(230,183,101,0.06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--divine);
  outline-offset: 2px;
}
.note a, footer a, .research-notice a {
  color: var(--divine);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* --- header --- */
.topbar {
  border-bottom: 1px solid var(--border);
  background: rgba(15,16,20,0.7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: flex-start;
  max-width: 1520px; padding-top: 14px; padding-bottom: 14px;
}
.brand { font-family: "Cinzel", serif; font-weight: 600; font-size: 22px; letter-spacing: 0.06em; color: var(--text); }
.brand span { color: var(--divine); }
.tagline {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 13px; margin-left: 14px; letter-spacing: 0.02em;
}
.meta { color: var(--muted); font-size: 13px; text-align: right; }
.meta .mono { color: var(--text); }

/* --- eyebrow / section heading --- */
.eyebrow {
  font-family: "Cinzel", serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--divine-dim); margin: 36px 0 14px;
}

/* --- hero ratio --- */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;
  align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), #14151c);
  padding: 30px 32px; margin-top: 28px;
}
.hero-label { font-family: "Cinzel", serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-size: 13px; }
.hero-value { font-family: "IBM Plex Mono", monospace; font-size: 56px; font-weight: 600; line-height: 1.05; margin: 8px 0 4px; color: var(--divine); text-shadow: 0 0 28px rgba(230,183,101,0.25); }
.hero-value small { font-size: 20px; color: var(--muted); font-weight: 400; }
.hero-sub { color: var(--muted); font-size: 14px; }
.hero svg { width: 100%; height: 96px; }

/* --- stat row --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.stat { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; }
.stat .k { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.stat .v { font-family: "IBM Plex Mono", monospace; font-size: 26px; margin-top: 4px; }

/* --- panels --- */
.panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 6px 18px 14px; overflow-x: auto; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
}

/* --- list rows (movers, dislocations) --- */
.row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .name small { color: var(--muted); }
.row .val { font-family: "IBM Plex Mono", monospace; color: var(--text); }
.row .spark { width: 90px; flex: none; }
.up { color: var(--up); }
.down { color: var(--down); }

.tag { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.tag.confirmed { color: var(--up); border-color: rgba(111,185,138,0.4); }
.tag.low_confidence { color: var(--warn); border-color: rgba(200,155,90,0.4); }

/* --- market table --- */
.toolbar { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.search { flex: 1; }
input[type="search"] {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: #0b0c11; color: var(--text);
  font-family: inherit; font-size: 14px;
}
input[type="search"]:focus { outline: 2px solid var(--divine-dim); outline-offset: 1px; }
input[type="number"], input[type="text"] {
  padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: #0b0c11; color: var(--text); font: inherit;
}
input:focus { outline: 2px solid var(--divine-dim); outline-offset: 1px; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-family: "IBM Plex Mono", monospace; }

.spark-line { fill: none; stroke: var(--divine); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-line.exalted { stroke: var(--exalted); }
.spark-area { fill: rgba(230,183,101,0.10); stroke: none; }

.empty, .errbox { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 40px; margin-top: 40px; text-align: center; }
.empty h2 { font-family: "Cinzel", serif; letter-spacing: 0.06em; }
.empty code { background: #0b0c11; border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 13px; }

footer { color: var(--muted); font-size: 13px; padding: 40px 0; text-align: center; }
.legal-note { margin-top: 8px; font-size: 11px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* --- simple nav / forms added in V5 foundation --- */
.nav { display: inline-flex; gap: 12px; margin-left: 18px; font-size: 13px; }
.nav a { color: var(--muted); border: 1px solid transparent; padding: 4px 8px; border-radius: 999px; }
.nav a:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }

.form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; margin: 14px 0; }
.form-grid label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.form-grid input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #0b0c11; color: var(--text); }
.form-grid button, button {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.form-grid button:hover, button:hover { border-color: var(--divine-dim); }
button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 980px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.loop-card { border: 1px solid rgba(111,185,138,0.35); border-radius: var(--radius); background: rgba(111,185,138,0.05); padding: 14px 16px; margin-bottom: 12px; }
.loop-card .profit { color: var(--up); font-family: "IBM Plex Mono", monospace; font-size: 22px; }
.warnbox { border: 1px solid rgba(200,155,90,0.4); background: rgba(200,155,90,0.08); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; color: var(--text); }
.inline-form { display: inline; }

/* --- accounts: nav, banner, auth, metrics (added for account-only build) --- */
.topbar-inner { gap: 16px; }
.brandwrap { display: flex; flex: 0 0 auto; align-items: center; min-width: 0; }
.market-switcher {
  display: flex; align-items: center; gap: 7px; margin-left: 8px;
  white-space: nowrap;
}
.market-switcher label {
  color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em;
}
.market-switcher select {
  max-width: 220px; color: var(--divine);
  border-color: rgba(230,183,101,.28);
}
.navlink { color: var(--muted); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.navlink:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
.navlink.nav-primary { color: var(--divine); border-color: rgba(230,183,101,0.28); }
.nav-logout { display: inline-flex; }
.link-button {
  appearance: none;
  background: none;
  cursor: pointer;
  font: inherit;
}
.navuser { color: var(--muted); font-size: 13px; padding: 4px 6px; }
.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--divine-dim); color: var(--divine); font-size: 12px; letter-spacing: 0.04em; }

.banner { background: rgba(230,183,101,0.07); border-bottom: 1px solid var(--border); color: var(--divine); font-size: 13px; }
.banner .wrap { padding-top: 10px; padding-bottom: 10px; }
.research-notice {
  margin: 28px 0 0; padding: 10px 2px;
  border-top: 1px solid rgba(200,155,90,.30);
  border-bottom: 1px solid rgba(200,155,90,.18);
  color: var(--muted); font-size: 12px; line-height: 1.45;
}
.research-notice strong { color: var(--text); }
.research-notice a { color: var(--divine); margin-left: 5px; }

.metabar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; margin-top: 18px; }
.metabar a { color: var(--muted); }
.metabar a:hover { color: var(--text); }
.metabar .mono { color: var(--text); }

.authbox { max-width: 420px; margin: 56px auto; }
.authbox h2 { font-family: "Cinzel", serif; letter-spacing: 0.06em; margin: 0 0 4px; }
.authbox label { display: block; color: var(--muted); font-size: 13px; margin: 12px 0 5px; }
.authbox input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: #0b0c11; color: var(--text); font-family: inherit; font-size: 14px; }
.authbox input:focus { outline: 2px solid var(--divine-dim); outline-offset: 1px; }
.authbox button { margin-top: 16px; width: 100%; }
.authbox .alt { margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; }
.authbox .alt a { color: var(--divine); }
.formerror { border: 1px solid rgba(210,118,107,0.45); background: rgba(210,118,107,0.08); color: var(--text); border-radius: 10px; padding: 10px 12px; margin: 6px 0 4px; font-size: 14px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: #0b0c11; color: var(--text); font-family: inherit; font-size: 13px; }
select:focus { outline: 2px solid var(--divine-dim); outline-offset: 1px; }

/* --- Confidence tiers (loop trust labels) --- */
.conf-tag {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); white-space: nowrap;
}
.conf-tag.conf-verified   { color: #7fcf9e; border-color: #2f6b47; background: rgba(111,185,138,0.08); }
.conf-tag.conf-high       { color: #d9b45a; border-color: #6b5720; background: rgba(217,180,90,0.08); }
.conf-tag.conf-research   { color: var(--muted); }
.conf-tag.conf-quarantined{ color: #d2766b; border-color: #6b332c; background: rgba(210,118,107,0.08); }

.loop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.loop-card { border-left: 3px solid var(--border); }
.loop-card.conf-verified    { border-left-color: #6fb98a; }
.loop-card.conf-high        { border-left-color: #d9b45a; }
.loop-card.conf-research    { border-left-color: var(--border); }
.loop-card.conf-quarantined { border-left-color: #d2766b; opacity: 0.85; }

/* v22 — opportunity-first product surface */
.product-intro {
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 36px; align-items: end;
  margin: 28px 0 2px; padding: 34px 36px;
  border: 1px solid rgba(230,183,101,.26); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(230,183,101,.10), rgba(23,25,34,.94) 52%);
}
.product-intro .eyebrow { margin: 0 0 12px; }
.product-intro h1, .opportunity-hero h1 {
  margin: 0; max-width: 780px; font-family: "Cinzel", serif;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: .015em;
}
.product-intro p, .opportunity-hero p { color: var(--muted); max-width: 760px; margin: 14px 0 0; }
.intro-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.intro-actions span { color: var(--muted); font-size: 12px; }
.primary-cta {
  display: inline-flex; padding: 13px 18px; border-radius: 10px;
  color: #111217; background: var(--divine); font-weight: 700;
}
.primary-cta:hover { background: #f0c979; transform: translateY(-1px); }

.secondary-cta {
  display: inline-flex; justify-content: center; padding: 11px 16px;
  border: 1px solid rgba(230,183,101,.34); border-radius: 10px;
  color: var(--divine); font-weight: 600;
}
.secondary-cta:hover { border-color: var(--divine); background: rgba(230,183,101,.07); }

.opportunity-landing {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px;
  margin: 24px 0 12px; padding: 22px 26px 16px;
  border: 1px solid rgba(230,183,101,.26); border-radius: var(--radius);
  background:
    radial-gradient(560px 180px at 88% 0, rgba(230,183,101,.09), transparent 72%),
    var(--surface);
}
.opportunity-landing h1 {
  margin: 5px 0 0; font-family: "Cinzel", serif;
  font-size: clamp(27px, 3.2vw, 38px); line-height: 1.08; letter-spacing: .015em;
}
.opportunity-landing p {
  max-width: 760px; margin: 9px 0 0; color: var(--muted); font-size: 14px;
}
.opportunity-landing-actions {
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  min-width: 220px;
}
.opportunity-status {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 16px;
  padding-top: 12px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px;
}
.opportunity-status strong { color: var(--text); font-weight: 600; }
.opportunity-status a { margin-left: auto; color: var(--divine); }

.opportunity-hero {
  padding: 30px 32px; margin: 0 0 16px;
  border: 1px solid rgba(230,183,101,.26); border-radius: var(--radius);
  background: radial-gradient(700px 240px at 85% 0, rgba(230,183,101,.10), transparent 70%), var(--surface);
}
.opportunity-hero h1 { font-size: clamp(28px, 3.5vw, 44px); margin-top: 8px; }
.opportunity-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.opportunity-stats span { border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; color: var(--muted); font-size: 12px; }
.opportunity-stats strong { color: var(--text); font-family: "IBM Plex Mono", monospace; }
.opportunity-controls {
  position: static; padding: 13px 15px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(23,25,34,.96);
}
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.filter-grid label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.filter-grid input, .filter-grid select { width: 100%; margin-top: 5px; text-transform: none; letter-spacing: 0; }
.primary-filter-grid { grid-template-columns: minmax(220px, 1.2fr) minmax(190px, .8fr) minmax(190px, .8fr); }
.advanced-filters { margin-top: 10px; border-top: 1px solid var(--border); }
.advanced-filters > summary {
  display: flex; align-items: center; gap: 9px; padding: 10px 1px 0;
  cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600;
}
.advanced-filters > summary span { color: var(--muted); font-size: 12px; font-weight: 400; }
.advanced-filter-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  padding-top: 12px;
}
.advanced-filter-note {
  display: flex; justify-content: space-between; gap: 14px;
  padding-top: 10px; color: var(--muted); font-size: 12px;
}
.advanced-filter-note a { color: var(--divine); white-space: nowrap; }
.opportunity-results-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  margin: 17px 2px 11px;
}
.opportunity-results-heading h2 {
  margin: 0; font: 600 22px/1.2 "Cinzel", serif; letter-spacing: .025em;
}
.opportunity-results-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.results-meta {
  display: grid; grid-template-columns: auto auto; justify-content: end;
  color: var(--muted); font-size: 13px; text-align: right;
}
.results-meta strong { color: var(--text); font-family: "IBM Plex Mono", monospace; }
.results-meta small {
  grid-column: 1 / -1; color: var(--muted); font-size: 11px;
}

.loop-list-help {
  display: grid; gap: 2px;
  margin: 0 0 14px; padding: 13px 15px;
  border: 1px solid rgba(230,183,101,.28); border-radius: 10px;
  background: rgba(230,183,101,.07);
}
.loop-list-help strong { color: var(--text); }
.loop-list-help span { color: var(--muted); font-size: 13px; }

details.loop-card {
  padding: 0; overflow: clip; background: var(--surface);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
details.loop-card:hover { border-color: rgba(230,183,101,.48); transform: translateY(-1px); }
details.loop-card[open] {
  background: linear-gradient(180deg, rgba(111,185,138,.055), var(--surface));
  border-color: rgba(230,183,101,.42);
}
.loop-summary {
  display: grid; grid-template-columns: 58px 120px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; cursor: pointer; list-style: none;
}
.loop-summary::-webkit-details-marker { display: none; }
.loop-summary:focus-visible { outline: 2px solid var(--divine); outline-offset: -3px; }
.loop-number {
  width: 52px; height: 52px; display: grid; place-content: center; text-align: center;
  border: 1px solid rgba(230,183,101,.34); border-radius: 10px;
  background: rgba(230,183,101,.07);
}
.loop-number span {
  color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
}
.loop-number strong {
  color: var(--divine); font: 600 17px/1.1 "IBM Plex Mono", monospace;
}
.loop-profit { display: flex; flex-direction: column; }
.loop-card .loop-profit .profit { font-size: 24px; }
.summary-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.loop-route { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.loop-route strong { line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }
.loop-route > span { color: var(--muted); font-size: 12px; }
.loop-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.expand-control {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid rgba(230,183,101,.44); border-radius: 8px;
  background: rgba(230,183,101,.08); color: var(--divine);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.expand-close { display: none; }
.expand-chevron { font-size: 18px; line-height: 1; transition: transform .16s ease; }
details.loop-card[open] .expand-open { display: none; }
details.loop-card[open] .expand-close { display: inline; }
details.loop-card[open] .expand-chevron { transform: rotate(180deg); }
.loop-body { padding: 0 18px 18px; border-top: 1px solid var(--border); }
.loop-head { padding-top: 14px; flex-wrap: wrap; }
.execution-callout, .trust-line {
  margin-top: 12px; padding: 12px 14px; border-radius: 9px; background: rgba(11,12,17,.72);
  color: var(--muted); font-size: 13px;
}
.execution-callout { border: 1px solid rgba(111,185,138,.25); color: var(--text); }

.loop-calculator {
  margin-top: 14px; padding: 18px;
  border: 1px solid rgba(230,183,101,.34); border-radius: 12px;
  background: radial-gradient(620px 220px at 100% 0, rgba(230,183,101,.09), transparent 65%), rgba(11,12,17,.76);
}
.calculator-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.loop-calculator .eyebrow { margin: 0 0 4px; }
.calculator-heading h3 { margin: 0; font: 600 22px/1.25 "Cinzel", serif; }
.calculator-heading p { max-width: 760px; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.calculator-heading p strong { color: var(--text); }
.calculator-local-note {
  flex: none; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted); font-size: 11px;
}
.calculator-start {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px;
  align-items: center; margin-top: 16px; padding: 14px;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(23,25,34,.72);
}
.calculator-step-number {
  display: grid; place-content: center; min-height: 52px;
  border: 1px solid rgba(230,183,101,.36); border-radius: 9px;
  color: var(--divine); font: 600 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.calculator-start label { display: grid; gap: 6px; color: var(--text); font-size: 13px; }
.input-with-unit {
  display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr);
  align-items: stretch; overflow: hidden; border: 1px solid var(--border);
  border-radius: 9px; background: #0b0c11;
}
.input-with-unit input {
  min-width: 0; width: 100%; border: 0; border-right: 1px solid var(--border);
  border-radius: 0; background: transparent; font-family: "IBM Plex Mono", monospace;
}
.input-with-unit input:focus { outline-offset: -2px; }
.input-with-unit strong {
  display: flex; align-items: center; padding: 8px 10px;
  color: var(--muted); font-size: 12px; overflow-wrap: anywhere;
}
.start-input { max-width: 560px; }
.calculator-progress {
  display: grid; grid-template-columns: minmax(220px, auto) minmax(160px, 1fr);
  align-items: center; gap: 16px; padding: 13px 2px 9px;
}
.calculator-progress > div:first-child { display: grid; gap: 2px; }
.calculator-progress strong { font-size: 13px; }
.calculator-progress span { color: var(--muted); font-size: 11px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.progress-track .progress-fill {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: var(--divine); transition: width .16s ease;
}
.calculator-trades {
  display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.calculator-trade {
  padding: 14px; border: 1px solid var(--border);
  border-radius: 10px; background: rgba(23,25,34,.72);
}
.trade-heading {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-bottom: 11px;
}
.trade-heading strong { font-size: 15px; }
.trade-number {
  padding: 3px 7px; border-radius: 6px; background: rgba(230,183,101,.10);
  color: var(--divine); font: 600 11px "IBM Plex Mono", monospace;
  text-transform: uppercase; letter-spacing: .04em;
}
.quote-entry-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: end; gap: 8px;
}
.quote-field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.quote-field .input-with-unit { text-transform: none; letter-spacing: 0; }
.quote-arrow { align-self: center; color: var(--divine); font-size: 22px; text-align: center; }
.trade-step-result {
  margin-top: 9px; padding: 8px 10px; border-radius: 7px;
  background: rgba(11,12,17,.62); font: 12px "IBM Plex Mono", monospace;
}
.optional-checks { margin-top: 9px; }
.optional-checks > summary, .research-comparison > summary, .evidence-drawer > summary {
  cursor: pointer; color: var(--divine); font-size: 12px;
}
.optional-check-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 0 7px;
}
.optional-check-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.optional-check-grid input { width: 100%; }

.final-result {
  margin-top: 12px; padding: 16px; border: 2px solid var(--border);
  border-radius: 11px; background: rgba(15,16,20,.92);
}
.final-result.result-incomplete { border-style: dashed; }
.final-result.result-caution { border-color: rgba(230,183,101,.62); }
.final-result.result-positive { border-color: rgba(111,185,138,.72); background: rgba(111,185,138,.07); }
.final-result.result-warning, .final-result.result-negative { border-color: rgba(210,118,107,.72); background: rgba(210,118,107,.06); }
.final-result.result-neutral { border-color: rgba(159,195,232,.5); }
.final-result-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.final-result-header > div { display: grid; gap: 3px; }
.final-result-label {
  color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
}
.result-title { font: 600 19px/1.3 "Cinzel", serif; }
.result-verdict {
  flex: none; padding: 5px 9px; border: 1px solid currentColor;
  border-radius: 999px; color: var(--muted); font-size: 11px;
}
.result-positive .result-verdict { color: var(--up); }
.result-caution .result-verdict { color: var(--divine); }
.result-warning .result-verdict, .result-negative .result-verdict { color: var(--down); }
.result-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 13px;
}
.result-metrics > div {
  display: grid; gap: 2px; padding: 11px;
  border: 1px solid var(--border); border-radius: 8px; background: rgba(11,12,17,.62);
}
.result-metrics span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.result-metrics strong { font: 600 22px "IBM Plex Mono", monospace; }
.result-metrics small { color: var(--muted); }
.result-route {
  margin-top: 10px; padding: 9px 11px; border-radius: 7px;
  background: rgba(11,12,17,.62); font: 12px "IBM Plex Mono", monospace;
  overflow-wrap: anywhere;
}
.result-checks { margin-top: 8px; font-size: 12px; }
.result-disclaimer { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.research-comparison { margin-top: 11px; }
.calculator-result {
  margin-top: 8px; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: rgba(15,16,20,.72);
}
.evidence-drawer {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 9px; background: rgba(11,12,17,.48);
}
.evidence-table { min-width: 780px; margin-top: 8px; }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.show-more { display: block; width: 100%; margin: 14px 0; border-color: rgba(230,183,101,.3); color: var(--divine); }
.worksheet-controls {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px; align-items: end; margin: 14px 0;
}
.worksheet-controls label, .scratch-leg label {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em;
}
.worksheet-controls input, .scratch-leg input { width: 100%; margin-top: 5px; }
.scratch-legs { display: grid; gap: 8px; }
.scratch-leg {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1.2fr)) repeat(4, minmax(95px, 1fr)) auto;
  gap: 8px; align-items: end; padding: 10px;
  border: 1px solid var(--border); border-radius: 9px; background: rgba(11,12,17,.55);
}
.worksheet-result {
  margin-top: 12px; padding: 12px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(11,12,17,.72);
}
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.method-card { padding: 18px; }
.method-card h2 { margin: 0 0 8px; font-family: "Cinzel", serif; font-size: 18px; }
.method-card ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.method-liquidity-note h2 {
  margin: 0 0 7px; font-family: "Cinzel", serif; font-size: 19px;
}
.method-liquidity-note p { margin: 6px 0; color: var(--muted); }

@media (max-width: 860px) {
  .product-intro { grid-template-columns: 1fr; padding: 26px 24px; }
  .opportunity-landing { grid-template-columns: 1fr; }
  .opportunity-landing-actions { flex-direction: row; justify-content: flex-start; min-width: 0; }
  .opportunity-status { grid-column: 1; }
  .opportunity-status a { margin-left: 0; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .primary-filter-grid { grid-template-columns: 1fr 1fr; }
  .primary-filter-grid label:first-child { grid-column: 1 / -1; }
  .loop-summary { grid-template-columns: 58px 90px minmax(0, 1fr); }
  .loop-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .calculator-heading { flex-direction: column; gap: 10px; }
  .calculator-local-note { align-self: flex-start; }
  .method-grid { grid-template-columns: 1fr; }
  .scratch-leg { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .filter-grid { grid-template-columns: 1fr; }
  .primary-filter-grid { grid-template-columns: 1fr; }
  .primary-filter-grid label:first-child { grid-column: auto; }
  .opportunity-landing-actions { flex-direction: column; }
  .opportunity-results-heading { align-items: flex-start; flex-direction: column; }
  .results-meta { justify-content: start; text-align: left; }
  .advanced-filter-note { flex-direction: column; }
  .loop-summary { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .loop-number { width: 46px; height: 46px; }
  .loop-route { grid-column: 1 / -1; }
  .loop-route strong { white-space: normal; }
  .loop-badges { gap: 6px; }
  .expand-control { width: 100%; justify-content: space-between; }
  .loop-body { padding: 0 12px 14px; }
  .loop-calculator { padding: 14px; }
  .calculator-start { grid-template-columns: 1fr; }
  .calculator-step-number { min-height: 0; padding: 7px; }
  .calculator-progress { grid-template-columns: 1fr; gap: 8px; }
  .quote-entry-grid { grid-template-columns: 1fr; }
  .quote-arrow { transform: rotate(90deg); }
  .optional-check-grid, .result-metrics { grid-template-columns: 1fr; }
  .final-result-header { flex-direction: column; }
  .result-verdict { align-self: flex-start; }
  .worksheet-controls { grid-template-columns: 1fr; }
  .scratch-leg { grid-template-columns: 1fr; }
  .wrap { padding-left: 14px; padding-right: 14px; }
  .hero, .opportunity-hero, .product-intro { padding: 22px 18px; }
}

.panel.locked { border-style: dashed; }
details.quarantine { margin-top: 14px; }
details.quarantine > summary {
  cursor: pointer; color: var(--muted); font-size: 13px; padding: 10px 2px;
  letter-spacing: 0.02em;
}
details.quarantine > summary:hover { color: var(--text); }


/* Keep desktop navigation compact; on narrow screens the navigation becomes
   its own horizontally scrollable row instead of clipping the entire header. */
header .wrap, .topbar { flex-wrap: nowrap; }
.navlink { white-space: nowrap; }
.tagline, .brand-tagline { white-space: nowrap; }
.topbar .nav { margin-left: auto; }
nav { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
@media (max-width: 1440px) {
  .topbar .wrap { flex-wrap: wrap; align-items: center; }
  .topbar .nav { order: 3; width: 100%; margin-left: 0; padding-top: 8px; }
  .market-switcher { margin-left: auto; }
}