/* Shared design of the extrade sites: dark header and hero, signature yellow, light reading area (close to the old sites). */
:root {
  --ink: #021a33; --ink-2: #0a2747; --ink-3: #15365c; --paper: #ffffff; --soft: #f7f7f8; --line: #e3e7eb;
  --text: #1b2228; --muted: #5d6873; --y: #ffde02; --y-2: #f2c900; --ok: #12805c; --bad: #c0392b; --link: #0b62c4;
  --r: 12px; --sh: 0 1px 2px rgba(20, 25, 31, .06), 0 4px 16px rgba(20, 25, 31, .06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Thai", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 var(--font); color: var(--text); background: var(--paper); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--y); color: var(--ink); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* header */
.top { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 20; }
.top-i { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.logo { display: flex; align-items: center; margin-right: auto; }
.logo img { display: block; height: 40px; width: auto; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.burger span:first-child, .burger span:first-child::before, .burger span:first-child::after { position: absolute; left: 11px; width: 22px; height: 2px; background: #fff; content: ""; transition: transform .2s; }
.burger span:first-child { top: 21px; }
.burger span:first-child::before { left: 0; top: -7px; }
.burger span:first-child::after { left: 0; top: 7px; }
.nav-l { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav-g { position: relative; }
.nav-g summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; color: #e9edf1; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-g summary::-webkit-details-marker { display: none; }
.nav-g summary::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.nav-g summary:hover, .nav-g details[open] summary { background: var(--ink-3); color: #fff; }
.nav-g ul { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: #fff; border-radius: var(--r); box-shadow: var(--sh), 0 12px 32px rgba(0, 0, 0, .18); }
.nav-g li a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
.nav-g li a:hover, .nav-g li a[aria-current] { background: var(--soft); }
.nav-g li a[aria-current] { font-weight: 700; }
.disc-top { margin: 0; background: var(--ink-2); color: #c9d1d8; font-size: 12.5px; line-height: 1.45; padding: 6px 0; }
.disc-top a { color: var(--y); }

/* hero (home) */
.home .hero { margin: 0 -16px; padding: 32px 16px 0; background: linear-gradient(135deg, #042140 0%, #2f3970 100%); color: #fff; display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; border-radius: 0 0 var(--r) var(--r); }
.hero h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.1; margin: 0 0 14px; letter-spacing: -.01em; }
.hero h1::after { content: ""; display: block; width: 64px; height: 4px; background: var(--y); margin-top: 14px; border-radius: 2px; }
.hero .lead { color: #d5dce2; font-size: 18px; max-width: 46ch; }
.hero-t { padding-bottom: 32px; }
.hero-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { display: inline-block; padding: 9px 14px; border-radius: 999px; background: var(--ink-3); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid #2a4a74; }
.chip:hover { background: var(--y); color: var(--ink); border-color: var(--y); }
.hero-p img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 28px; }

/* page header */
.ph { padding: 24px 0 8px; }
.crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.ph h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; margin: 10px 0 10px; letter-spacing: -.01em; }
.lead { font-size: 18.5px; color: #36414b; margin: 0 0 10px; max-width: 70ch; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }

/* article */
.body { max-width: 780px; }
.body h2 { font-size: 26px; line-height: 1.25; margin: 40px 0 12px; scroll-margin-top: 80px; }
.body h3 { font-size: 20px; margin: 28px 0 8px; }
.body p, .body ul, .body ol { margin: 0 0 14px; }
.body li { margin: 4px 0; }
/* long formulas never widen the page on a phone (audit 11.11: scrollWidth up to 932 px at 390): inline code breaks anywhere,
   a code block scrolls inside its own box */
.body code { overflow-wrap: anywhere; word-break: break-word; }
.body pre { max-width: 100%; overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; }
.body pre code { overflow-wrap: normal; word-break: normal; white-space: inherit; }
.home .body { max-width: none; }
.toc { margin: 18px 0; background: var(--soft); border-radius: var(--r); padding: 12px 16px; max-width: 780px; }
.toc summary { font-weight: 700; cursor: pointer; }
.toc ol { margin: 8px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; font-size: 15.5px; }
.tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--soft); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
.box { border-radius: var(--r); padding: 14px 16px; margin: 18px 0; border-left: 4px solid var(--y-2); background: #fffbe0; }
.box-warn { border-color: var(--bad); background: #fdf0ee; }
.box-tip { border-color: var(--ok); background: #eef8f3; }
.box p:last-child { margin-bottom: 0; }

/* tools */
.tool { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 16px 0 24px; box-shadow: var(--sh); background: #fff; }
.tool-in { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.f { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: #34404a; }
.f input, .f select { font: inherit; font-size: 16px; font-weight: 500; padding: 9px 10px; border: 1px solid #c9d1d8; border-radius: 8px; background: #fff; color: var(--text); width: 100%; min-width: 0; }
.f input:focus, .f select:focus { outline: 2px solid var(--y-2); outline-offset: 1px; border-color: var(--y-2); }
.f small { font-weight: 400; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tool-out { background: var(--ink); color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.o { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid #1d3b60; padding-bottom: 8px; font-size: 15px; color: #c9d1d8; }
.o b { color: #fff; font-size: 17px; text-align: right; }
.o-big b { color: var(--y); font-size: 28px; line-height: 1.1; }
.tool-note { font-size: 13px; color: #aab5bf; margin: 4px 0 0; }
.tool-note a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.tool-rates .chart:empty { display: none; }
.tool .tbl { border-color: #2f3a44; background: #fff; color: var(--text); max-height: 260px; overflow-y: auto; }
.tool.bad .o b { opacity: .45; }
/* a required field left empty (a metal price, a rate without a source): the readout shows dashes and this line asks for it */
.tool-need { margin: 0; padding: 8px 12px; border: 1px dashed var(--y-edge, #c9a400); border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--y, #ffcc00); }
.tool-need[hidden] { display: none; }
.tool .tbl:has(tbody:empty) { display: none; }
.tool input[required]:invalid { border-color: var(--y-edge, #c9a400); box-shadow: 0 0 0 2px rgba(255, 204, 0, .28); }
.tool input::placeholder { color: var(--muted); font-weight: 400; }
.sim-chart { width: 100%; height: 140px; background: #0f1418; border-radius: 8px; }
.sim-chart path { fill: none; stroke: var(--y); stroke-width: 1.2; opacity: .55; vector-effect: non-scaling-stroke; }
.sim-chart .sim-base { stroke: #8795a1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
/* catalog tool charts (engine/calc.mjs svg* helpers) */
.chart { display: block; width: 100%; background: #0f1418; border-radius: 8px; }
.chart text { fill: #c9d1d8; font-size: 10px; font-family: var(--font); }
.chart.line, .chart.bars { height: 120px; }
.chart.bars { height: 90px; }
.chart .c1 { fill: var(--y); }
.chart .c2 { fill: #5b6b78; }
.chart .ln { fill: none; stroke: var(--y); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chart line { stroke: #8795a1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .mk-e { stroke: #c9d1d8; stroke-dasharray: 4 3; }
.chart .mk-s, .chart .lv-r { stroke: #e57368; }
.chart .mk-t, .chart .lv-s { stroke: #3fbf8f; }
.chart .lv-p { stroke: var(--y); stroke-width: 2; }
.chart .lv-x { stroke-dasharray: 3 3; }
.chart.tl rect.c0 { fill: #6fa8dc; } .chart.tl rect.c1 { fill: #3fbf8f; } .chart.tl rect.c2 { fill: var(--y); } .chart.tl rect.c3 { fill: #e57368; }
.chart.tl .tk { stroke: #2f3a44; }
.chart.tl .tt { font-size: 8px; fill: #8795a1; }
.chart.tl .now { stroke: #fff; stroke-width: 1.5; }
.tool-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.tool-acts .btn-s { padding: 9px 12px; }
.btn-s { font: inherit; font-weight: 700; padding: 10px 14px; border-radius: 8px; border: 0; background: var(--y); color: var(--ink); cursor: pointer; align-self: end; text-decoration: none; display: inline-block; }

/* partner block */
.btn { font: inherit; font-size: 18px; font-weight: 800; padding: 14px 26px; border-radius: 5px; border: 0; background: var(--y); color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--y-2); }
.btn:hover { background: #ffe94d; }
[hidden] { display: none !important; }

/* cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--text); background: #fff; transition: border-color .15s, box-shadow .15s; }
.cards a:hover { border-color: var(--y-2); box-shadow: var(--sh); }
.cards b { font-size: 16.5px; }
.cards span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.rel, .src { max-width: 780px; margin-top: 36px; }
.rel h2, .src h2 { font-size: 20px; }
.src ol { font-size: 14px; color: var(--muted); padding-left: 20px; }
.src a { word-break: break-word; }

/* legal block and footer */
.legal { margin: 40px 0 32px; padding: 18px 20px; border-radius: var(--r); background: var(--soft); font-size: 14.5px; color: #3c4750; max-width: 780px; }
.legal h2 { font-size: 15px; margin: 0 0 4px; color: var(--text); }
.legal p { margin: 0 0 12px; }
.legal p:last-child { margin: 0; }
.foot { background: var(--ink); color: #aab5bf; font-size: 14px; padding: 28px 0; }
.foot-l { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot a { color: #e2e7eb; }

/* secondary action button (after .btn-s, which it overrides) */
.btn-s.btn-g { background: var(--ink-3); color: #fff; }

@media (max-width: 959px) {
  .burger { display: block; }
  .nav { display: none; position: fixed; inset: 60px 0 0 0; background: var(--ink); overflow-y: auto; padding: 8px 16px 32px; }
  .nav.open { display: block; }
  .nav-l { flex-direction: column; }
  .nav-g ul { position: static; box-shadow: none; background: transparent; padding: 0 0 8px 8px; min-width: 0; }
  .nav-g li a { color: #e2e7eb; }
  .nav-g li a:hover, .nav-g li a[aria-current] { background: var(--ink-3); }
  .nav-g summary { font-size: 17px; padding: 12px 8px; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .home .hero { grid-template-columns: 1fr; padding-top: 22px; }
  .hero-p { order: -1; }
  .hero-p img { max-width: 210px; margin-bottom: 0; }
  .hero-t { padding-bottom: 22px; }
  .tool { grid-template-columns: 1fr; }
  .tool-out { order: -1; }
  .tool .tbl { max-height: 190px; }
  .tool-in { grid-template-columns: 1fr 1fr; gap: 10px; }
  .toc ol { columns: 1; }
  .body h2 { font-size: 23px; }
}
@media (max-width: 380px) { .tool-in { grid-template-columns: 1fr; } }
.foot-g { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 18px; }
.foot-h { color: #fff; font-weight: 700; margin: 0 0 8px; }
.foot-legal { border-top: 1px solid #2f3a44; padding-top: 14px; }
@media (max-width: 760px) { .foot-g { grid-template-columns: 1fr; } }
.search { position: relative; }
.search input { font: inherit; font-size: 15px; width: 200px; padding: 7px 10px; border-radius: 8px; border: 1px solid #3a4652; background: var(--ink-2); color: #fff; }
.search input::placeholder { color: #9aa6b1; }
.search input:focus { outline: 2px solid var(--y); border-color: var(--y); }
#q-res { position: absolute; right: 0; top: calc(100% + 6px); width: min(420px, 92vw); max-height: 70vh; overflow-y: auto; list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.2); z-index: 30; }
#q-res a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
#q-res a:hover { background: var(--soft); }
#q-res span { color: var(--muted); font-size: 13px; }
.q-none { padding: 8px 10px; color: var(--muted); }
@media (max-width: 959px) { .search input { width: 140px; } }
@media (max-width: 420px) { .search input { width: 110px; } }
.disc-top .wrap { display: block; }
.logo { flex-shrink: 0; }
.logo img { min-width: 150px; }
@media (min-width: 960px) { .search { order: 3; } .nav { order: 2; } }

/* ---------------------------------------------------------------------------------------------------------------------
   Visual examples (engine/viz, `::viz` in pages): inline SVG figures and step diagrams. Every colour is a custom property
   that falls back to the theme's own tokens, so the same drawing reads in the light and the dark scheme. */
.viz {
  --v-pl: var(--bg-0, var(--soft)); --v-gr: var(--edge, var(--line)); --v-tx: var(--text); --v-mu: var(--muted); --v-px: var(--head, var(--text));
  --v-up: var(--mint, var(--ok)); --v-dn: var(--red, var(--bad)); --v-acc: var(--y-t, #7a5f00); --v-hl: var(--y-tint, rgba(255, 222, 2, .2)); --v-hle: var(--y-deco, #e6c200);
  --v-l1: var(--link); --v-l2: #d9480f; --v-l3: var(--muted); --v-l4: #7b3fbf; --v-warn: #b25e00; --v-gold: #d4a514;
  margin: 22px 0 26px; padding: 0; max-width: 620px;
}
@supports (color: light-dark(#000, #fff)) {
  .viz { --v-l2: light-dark(#d9480f, #ff9f5a); --v-l4: light-dark(#7b3fbf, #c79bff); --v-warn: light-dark(#b25e00, #ffb547); --v-gold: light-dark(#c99a0e, #f2c94c); }
}
.viz-s { display: block; width: 100%; height: auto; font-family: var(--font); border: 1px solid var(--v-gr); border-radius: 10px; background: var(--v-pl); }
.viz figcaption { font-size: 14px; line-height: 1.5; color: var(--v-mu); margin-top: 8px; }
.viz-n { font-style: italic; }
.viz .v-t { fill: var(--v-tx); paint-order: stroke; stroke: var(--v-pl); stroke-width: 3px; stroke-linejoin: round; }
.viz .v-mu { fill: var(--v-mu); } .viz .v-acc { fill: var(--v-acc); } .viz .v-on { fill: var(--v-pl); stroke: none; }
.viz .v-ok-t { fill: var(--v-up); } .viz .v-bad-t { fill: var(--v-dn); } .viz .v-warn-t { fill: var(--v-warn); }
.viz .v-l1-t { fill: var(--v-l1); } .viz .v-l2-t { fill: var(--v-l2); } .viz .v-l4-t { fill: var(--v-l4); }
.viz .v-pl { fill: var(--v-pl); } .viz .v-gr { stroke: var(--v-gr); stroke-width: 1; opacity: .7; } .viz .v-gr2 { stroke: var(--v-gr); stroke-width: 1; stroke-dasharray: 3 3; }
/* candles: body filled, wick in the same colour; highlighted candles get an outline, faded ones are what may follow */
.viz .v-up .v-bd { fill: var(--v-up); stroke: var(--v-up); } .viz .v-dn .v-bd { fill: var(--v-dn); stroke: var(--v-dn); }
.viz .v-up .v-wk, .viz .v-up .v-ohlc { stroke: var(--v-up); stroke-width: 1.4; } .viz .v-dn .v-wk, .viz .v-dn .v-ohlc { stroke: var(--v-dn); stroke-width: 1.4; }
.viz .v-ohlc { stroke-width: 1.8 !important; }
.viz .v-k .v-bd { stroke: var(--v-px); stroke-width: 1.6; } .viz .v-k .v-wk { stroke-width: 2; }
.viz .v-fade { opacity: .45; }
.viz .v-hlb { fill: var(--v-hl); stroke: var(--v-hle); stroke-width: 1; stroke-dasharray: 4 3; } .viz .v-hlb2 { fill: none; stroke: var(--v-mu); stroke-width: 1; stroke-dasharray: 2 2; }
.viz .v-br { stroke: var(--v-mu); stroke-width: 1.2; fill: none; } .viz .v-ld { stroke: var(--v-mu); stroke-width: 1; stroke-dasharray: 2 2; }
.viz .v-tr, .viz .v-arr { stroke: var(--v-mu); stroke-width: 1.4; opacity: .8; } .viz .v-tr-h, .viz .v-arr-h { fill: var(--v-mu); opacity: .8; }
/* lines, levels and zones */
.viz .v-px { fill: none; stroke: var(--v-px); stroke-width: 2; stroke-linejoin: round; } .viz .v-area { fill: var(--v-l1); opacity: .07; }
.viz .v-l1, .viz .v-l2, .viz .v-l3, .viz .v-l4, .viz .v-ok-l, .viz .v-bad-l, .viz .v-tl, .viz .v-dv { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.viz .v-l1 { stroke: var(--v-l1); } .viz .v-l2 { stroke: var(--v-l2); } .viz .v-l3 { stroke: var(--v-l3); stroke-dasharray: 5 3; } .viz .v-l4 { stroke: var(--v-l4); }
.viz .v-ok-l { stroke: var(--v-up); } .viz .v-bad-l { stroke: var(--v-dn); } .viz .v-thick { stroke-width: 2.4; }
.viz .v-l1-sw { fill: var(--v-l1); } .viz .v-l2-sw { fill: var(--v-l2); } .viz .v-l3-sw { fill: var(--v-l3); } .viz .v-l4-sw { fill: var(--v-l4); } .viz .v-ok-l-sw { fill: var(--v-up); } .viz .v-bad-l-sw { fill: var(--v-dn); }
.viz .v-tl { stroke: var(--v-acc); stroke-width: 1.8; stroke-dasharray: 7 4; } .viz .v-dv { stroke: var(--v-acc); stroke-width: 2; }
.viz .v-lvl { stroke: var(--v-mu); stroke-width: 1; stroke-dasharray: 4 4; fill: none; } .viz .v-lvl-k { stroke: var(--v-acc); stroke-width: 1.6; }
.viz .v-tgl { stroke: var(--v-up); } .viz .v-tga { stroke: var(--v-up); stroke-width: 1.6; stroke-dasharray: 4 3; } .viz .v-tga-h { fill: var(--v-up); }
.viz .v-ms { stroke: var(--v-acc); stroke-width: 1.4; } .viz .v-ms-h { fill: var(--v-acc); } .viz .v-ms-t { fill: var(--v-acc); font-size: 12px; font-weight: 700; }
.viz .v-band { fill: var(--v-l1); opacity: .08; } .viz .v-fut { fill: var(--v-gr); opacity: .25; }
.viz .v-cloud-ok { fill: var(--v-up); opacity: .16; } .viz .v-cloud-bad { fill: var(--v-dn); opacity: .16; }
.viz .v-zone { fill: var(--v-hl); stroke: var(--v-hle); stroke-width: 1; stroke-dasharray: 3 3; }
.viz .v-zone-ok { fill: var(--v-up); opacity: .11; } .viz .v-zone-bad { fill: var(--v-dn); opacity: .11; } .viz .v-zone-warn { fill: var(--v-warn); opacity: .12; }
.viz .v-dot { fill: var(--v-pl); stroke: var(--v-acc); stroke-width: 2; } .viz .v-dot-ok { fill: var(--v-up); } .viz .v-dot-bad { fill: var(--v-dn); }
.viz .v-bo { fill: none; stroke: var(--v-acc); stroke-width: 2.2; }
.viz .v-h-ok { fill: var(--v-up); opacity: .75; } .viz .v-h-bad { fill: var(--v-dn); opacity: .75; }
.viz .v-vp { fill: var(--v-l1); opacity: .22; } .viz .v-vp-poc { fill: var(--v-acc); opacity: .55; }
/* bars, tiles and session rows */
.viz .v-bar { fill: var(--v-l1); } .viz .v-bar2 { fill: var(--v-gr); opacity: .55; } .viz .v-gold { fill: var(--v-gold); }
.viz .v-ok-f { fill: var(--v-up); opacity: .8; } .viz .v-bad-f { fill: var(--v-dn); opacity: .8; }
.viz .v-tile { fill: var(--v-pl); stroke: var(--v-gr); stroke-width: 1.4; } .viz .v-tile-ok { fill: var(--v-pl); stroke: var(--v-up); stroke-width: 2; } .viz .v-tile-bad { fill: var(--v-pl); stroke: var(--v-dn); stroke-width: 2; }
.viz .v-tile-ok-t { fill: var(--v-up); } .viz .v-tile-bad-t { fill: var(--v-dn); }
.viz .v-day { fill: var(--v-gr); opacity: .35; } .viz .v-ovl { fill: var(--v-hl); }
.viz .v-s1 { fill: var(--v-l4); opacity: .75; } .viz .v-s2 { fill: var(--v-l2); opacity: .75; } .viz .v-s3 { fill: var(--v-l1); opacity: .8; } .viz .v-s4 { fill: var(--v-up); opacity: .8; }
/* step diagrams (HTML) */
.viz-steps { list-style: none; margin: 0; padding: 14px 16px; border: 1px solid var(--v-gr); border-radius: 10px; background: var(--v-pl); counter-reset: none; }
.viz-steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 0 0 16px !important; }
.viz-steps li::before { content: none !important; }
.viz-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--v-gr); }
.viz-steps li:last-child { padding-bottom: 0 !important; }
.viz-st-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--v-acc); border: 2px solid var(--v-hle); background: var(--v-hl); }
.viz-st-t { padding-top: 4px; line-height: 1.45; color: var(--v-tx); }
@media (max-width: 760px) { .viz { margin: 18px -6px 22px; } .viz figcaption { font-size: 13.5px; padding: 0 6px; } .viz-steps { padding: 12px; } }

/* ===== practice terminal (engine/tools.mjs renderPractice, engine/client/tools.js term) =====
   Panels follow the page theme through its custom properties (light and dark), with fallbacks for themes that lack them;
   the chart is a dark display in both schemes (--chart-bg), like the tool readouts. */
.tool.tm {
  --tm-bg: var(--panel-2, #f2f5f9); --tm-panel: var(--panel, #fff); --tm-edge: var(--edge, #d3dce7); --tm-text: var(--text, #1b2228);
  --tm-muted: var(--muted, #5d6873); --tm-head: var(--head, #021a33); --tm-up: var(--mint-t, #12805c); --tm-dn: var(--red, #c0392b);
  --tm-mono: var(--mono, ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace); --tm-chart: var(--chart-bg, #0b1724);
  --tm-c-up: #26c281; --tm-c-dn: #f0524a; --tm-c-buy: #4ea3ff; --tm-c-sell: #ff8a7a; --tm-c-sl: #ff5a4a; --tm-c-tp: #2fd48f; --tm-c-po: #ffd21f;
  --tm-sell: #d23f31; --tm-buy: #1d6ed8;
  display: block; padding: 0; color: var(--tm-text); background: var(--tm-bg);
}
.tm :is(button, select, input) { font-family: inherit; }
.tm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* top bar: instrument, timeframes, server clock */
.tm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-bottom: 1px solid var(--tm-edge); }
.tm-sym select { font: 700 15px var(--tm-mono); padding: 6px 28px 6px 9px; border-radius: 6px; border: 1px solid var(--tm-edge); background-color: var(--tm-panel); color: var(--tm-head); }
.tm-tf { display: flex; border: 1px solid var(--tm-edge); border-radius: 6px; overflow: hidden; }
.tm-tf button { font: 600 12.5px var(--tm-mono); padding: 7px 10px; border: 0; border-right: 1px solid var(--tm-edge); background: var(--tm-panel); color: var(--tm-muted); cursor: pointer; }
.tm-tf button:last-child { border-right: 0; }
.tm-tf button[aria-pressed="true"] { background: var(--tm-head); color: var(--tm-panel); }
.tm-time { margin-left: auto; font: 12.5px var(--tm-mono); color: var(--tm-muted); white-space: nowrap; }
/* account line (MT-style): balance, equity, margin, free margin, margin level, floating P/L */
.tm-acc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--tm-edge); background: var(--tm-panel); }
.tm-acc > div { padding: 7px 10px; border-right: 1px solid var(--tm-edge); min-width: 0; }
.tm-acc > div:last-child { border-right: 0; }
.tm-acc span, .tm-info span { display: block; font: 600 10.5px var(--tm-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-acc b { display: block; font: 700 14.5px/1.3 var(--tm-mono); color: var(--tm-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tm-fl.up b, .tm .up { color: var(--tm-up); }
.tm-fl.dn b, .tm .dn { color: var(--tm-dn); }
.tm-lvl.mc { background: rgba(240, 160, 40, .16); }
.tm-lvl.mc b { color: #b86e00; }
.tm-lvl.so { background: rgba(214, 63, 49, .16); }
.tm-lvl.so b { color: var(--tm-dn); }
/* chart column and side column (quotes, ticket) */
.tm-main { display: grid; grid-template-columns: minmax(0, 1fr) 266px; }
.tm-cbox { padding: 10px; min-width: 0; }
.tm-side { border-left: 1px solid var(--tm-edge); background: var(--tm-panel); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
svg.tm-chart { display: block; width: 100%; height: auto; border-radius: 6px; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.tm-chart .bg { fill: var(--tm-chart); }
.tm-chart .gr { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.tm-chart .axl { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.tm-chart text { font-family: var(--tm-mono); font-size: 10.5px; }
.tm-chart .ax { fill: #8ea3b8; }
.tm-chart .cd line { stroke-width: 1; }
.tm-chart .cd.u line { stroke: var(--tm-c-up); }
.tm-chart .cd.u rect { fill: var(--tm-c-up); }
.tm-chart .cd.d line { stroke: var(--tm-c-dn); }
.tm-chart .cd.d rect { fill: var(--tm-c-dn); }
.tm-chart .nw { fill: #ffb547; }
.tm-chart .bid { stroke: #c9d6e3; stroke-width: 1; stroke-dasharray: 2 3; }
.tm-chart .ask { stroke: var(--tm-c-dn); stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; }
.tm-chart .tg { fill: #3a4f66; }
.tm-chart .tg.bid.u { fill: #138a5a; }
.tm-chart .tg.bid.d { fill: #b83a30; }
.tm-chart .tg.ask { fill: #6d2a25; }
.tm-chart .tgt { fill: #fff; font-weight: 600; }
.tm-chart .lv line { stroke-width: 1.3; }
.tm-chart .lv > rect:not(.tg) { fill: rgba(0, 13, 26, .86); stroke-width: 1; }
.tm-chart .lv text { fill: #fff; font-weight: 600; }
.tm-chart .lv.pe.buy line, .tm-chart .lv.pe.buy > rect { stroke: var(--tm-c-buy); }
.tm-chart .lv.pe.sell line, .tm-chart .lv.pe.sell > rect { stroke: var(--tm-c-sell); }
.tm-chart .lv.pe line { stroke-dasharray: 7 3; }
.tm-chart .lv.pe .tg { fill: #33506e; }
.tm-chart .lv.psl line, .tm-chart .lv.psl > rect { stroke: var(--tm-c-sl); }
.tm-chart .lv.psl .tg { fill: #a5342a; }
.tm-chart .lv.ptp line, .tm-chart .lv.ptp > rect { stroke: var(--tm-c-tp); }
.tm-chart .lv.ptp .tg { fill: #13804f; }
.tm-chart .lv.po line, .tm-chart .lv.po > rect { stroke: var(--tm-c-po); }
.tm-chart .lv.po line, .tm-chart .lv.pend line { stroke-dasharray: 4 3; }
.tm-chart .lv.po .tg { fill: #8a6d00; }
.tm-chart .lv.off line { opacity: .45; }
.tm-chart .hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: ns-resize; touch-action: none; stroke-dasharray: none; }
.tm-chart .tr { stroke-width: 1.3; stroke-dasharray: 1 3; }
.tm-chart .tr.buy, .tm-chart .ta.buy { stroke: var(--tm-c-buy); fill: var(--tm-c-buy); }
.tm-chart .tr.sell, .tm-chart .ta.sell { stroke: var(--tm-c-sell); fill: var(--tm-c-sell); }
.tm-chart .tr { fill: none; }
.tm-chart .tx { fill: #e8eef4; }
/* controls under the chart and the status line */
.tm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tool.tm .tm-ctl .btn-s { padding: 8px 10px; font-size: 13.5px; }
.tm-play { min-width: 96px; }
.tm-spd select { font: 600 13px var(--tm-mono); padding: 7px 8px; border-radius: 8px; border: 1px solid var(--tm-edge); background-color: var(--tm-panel); color: var(--tm-head); }
.tm-msg { margin: 8px 0 0; padding: 7px 10px; min-height: 34px; border-left: 3px solid var(--tm-edge); background: var(--tm-panel); font: 13px/1.4 var(--tm-mono); color: var(--tm-text); border-radius: 0 6px 6px 0; }
.tm-msg.hot { border-left-color: var(--tm-dn); background: rgba(214, 63, 49, .12); color: var(--tm-head); font-weight: 700; }
/* one-click quotes: Sell at bid, Buy at ask, volume and spread between them */
.tm-q { display: grid; grid-template-columns: 1fr minmax(64px, auto) 1fr; grid-template-rows: auto auto; gap: 4px 6px; }
.tm-sell, .tm-buy { grid-row: 1 / 3; border: 0; border-radius: 7px; cursor: pointer; color: #fff; padding: 7px 9px; display: flex; flex-direction: column; justify-content: center; gap: 1px; text-align: left; min-width: 0; }
.tm-sell { grid-column: 1; background: var(--tm-sell); }
.tm-buy { grid-column: 3; background: var(--tm-buy); text-align: right; }
.tm-sell:hover { filter: brightness(1.08); }
.tm-buy:hover { filter: brightness(1.1); }
.tm-sell small, .tm-buy small { font: 700 10.5px var(--tm-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.tm-sell b, .tm-buy b { font: 600 13px/1.1 var(--tm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-sell em, .tm-buy em { font-style: normal; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.tm-sell sup, .tm-buy sup { font-size: 11px; vertical-align: 9px; margin-left: 1px; }
.tm-vol { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tm-vol span, .tm-spr small { font: 600 10px var(--tm-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--tm-muted); }
.tm-vol input { width: 66px; font: 700 15px var(--tm-mono); text-align: center; padding: 5px 4px; border-radius: 6px; border: 1px solid var(--tm-edge); background: var(--tm-bg); color: var(--tm-head); }
.tm-spr { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; }
.tm-spr b { font: 700 13px var(--tm-mono); color: var(--tm-head); }
.tm-spr.wide b { color: var(--tm-dn); }
/* order ticket */
.tm-ticket { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.tm-ticket .f { font-size: 11px; }
.tool.tm .tm-ticket .f input, .tool.tm .tm-ticket .f select { padding: 7px 8px; font-size: 14.5px; }
.tm-ticket .f:has(select), .tm-op, .tm-place, .tm-info, .tm-h { grid-column: 1 / -1; }
.tm-h { margin: 0; font: 700 11px var(--tm-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tm-muted); }
.tool.tm .tm-place { width: 100%; }
.tm-info span { white-space: normal; text-overflow: clip; }
.tm-info > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px dashed var(--tm-edge); }
.tm-info b { font: 700 13px var(--tm-mono); color: var(--tm-head); text-align: right; white-space: nowrap; }
.tm-risk.dn b { color: var(--tm-dn); }
/* tabs and their panes (the page renderer wraps each bare <table> in .tbl) */
.tm-tabs { display: flex; gap: 2px; padding: 0 10px; border-top: 1px solid var(--tm-edge); border-bottom: 1px solid var(--tm-edge); overflow-x: auto; scrollbar-width: none; background: var(--tm-panel); }
.tm-tab { font: 600 13px var(--tm-mono); padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tm-muted); cursor: pointer; white-space: nowrap; }
.tm-tab[aria-selected="true"] { color: var(--tm-head); border-bottom-color: var(--y-deco, #f2c900); }
.tm-tab i { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--tm-bg); border: 1px solid var(--tm-edge); }
.tm-pane { padding: 10px; }
.tool.tm .tbl { margin: 0; max-height: 230px; }
.tm-pane table { font: 13px var(--tm-mono); font-variant-numeric: tabular-nums; }
.tool.tm .tm-pane th, .tool.tm .tm-pane td { padding: 6px 8px; white-space: nowrap; vertical-align: middle; font-size: 12.5px; }
.tm-pane td.buy { color: var(--tm-c-buy); font-weight: 700; }
.tm-pane td.sell { color: var(--tm-dn); font-weight: 700; }
.tm-pane .tm-pl { font-weight: 700; }
.tm-in { width: 92px; font: 13px var(--tm-mono); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--tm-edge); background: var(--tm-panel); color: var(--tm-head); }
.tm-acts { text-align: right; }
.tm-x { font: 700 13px var(--tm-mono); width: 28px; height: 28px; margin-left: 4px; border-radius: 6px; border: 1px solid var(--tm-edge); background: var(--tm-panel); color: var(--tm-head); cursor: pointer; }
.tm-x:hover { border-color: var(--tm-dn); color: var(--tm-dn); }
.tm-empty { color: var(--tm-muted); white-space: normal !important; font-family: var(--font, sans-serif); }
svg.tm-eq { display: block; width: 100%; height: 120px; background: var(--tm-chart); border-radius: 6px; }
.tm-eq path { fill: none; vector-effect: non-scaling-stroke; }
.tm-eq .eq { stroke: #ffd21f; stroke-width: 1.8; }
.tm-eq .bal { stroke: #8ea3b8; stroke-width: 1.2; stroke-dasharray: 4 3; }
.tm-eq .base { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.tm-legend { margin: 6px 0 10px; font: 12px var(--tm-mono); color: var(--tm-muted); display: flex; align-items: center; gap: 6px; }
.tm-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid #ffd21f; }
.tm-legend i.bal { border-top: 2px dashed #8ea3b8; margin-left: 10px; }
.tm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tm-stats > div { padding: 8px 10px; border: 1px solid var(--tm-edge); border-radius: 8px; background: var(--tm-panel); }
.tm-stats span { display: block; font-size: 12px; color: var(--tm-muted); line-height: 1.3; }
.tm-stats b { font: 700 15px var(--tm-mono); color: var(--tm-head); }
.tm-stats .up b { color: var(--tm-up); }
.tm-stats .dn b { color: var(--tm-dn); }
.tm-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tm-set .f > span { min-height: 2.7em; display: flex; align-items: flex-end; } /* two-line labels keep the fields in line */
.tm-hint { font-size: 13px; color: var(--tm-muted); margin: 10px 0; }
.tool.tm > .tool-note { margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--tm-edge); font-size: 12.5px; color: var(--tm-muted); }
@media (max-width: 760px) {
  /* quotes above the chart, the ticket under it */
  .tm-main { display: flex; flex-direction: column; }
  .tm-side { display: contents; }
  .tm-q { order: -1; padding: 8px 8px 0; }
  .tm-ticket { padding: 10px 8px; border-top: 1px solid var(--tm-edge); background: var(--tm-panel); }
  .tm-cbox { padding: 8px; }
  /* the account line stays under the sticky header while the page scrolls */
  .tm-acc { position: sticky; top: 64px; z-index: 6; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
  .tm-acc > div { padding: 5px 8px; }
  .tm-acc > div:nth-child(3) { border-right: 0; }
  .tm-acc > div:nth-child(-n+3) { border-bottom: 1px solid var(--tm-edge); }
  .tm-acc b { font-size: 13px; }
  .tm-time { margin-left: 0; width: 100%; order: 3; }
  .tm-tf button { padding: 7px 8px; }
  .tm-ctl .btn-s { flex: 1 1 auto; }
  .tm-set { grid-template-columns: 1fr 1fr; }
  .tm-sw { display: none; }
}

/* ---- tool cards (audit 12.11) ----
   C5: on cards with a table or chart the readout sits above the form and scrolls away while the reader types further down.
   A copy of the main figure (.tool-pin, first child of the form, kept equal by the page script) stays pinned under the
   sticky header on phones (--pin-top: the header height, set by the page script); on wider screens the readout is beside the
   form, so the copy is hidden. */
.tool-pin { display: none; }
@media (max-width: 760px) {
  .tool-pin { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; grid-column: 1 / -1; position: sticky; top: var(--pin-top, 64px); z-index: 5;
    margin: -16px -16px 2px; padding: 9px 16px; background: var(--panel, #fff); color: var(--muted, #5b6875); border-bottom: 1px solid var(--edge-2, var(--line));
    box-shadow: 0 6px 14px rgba(0, 0, 0, .14); font-size: 13px; }
  .tool-pin b { color: var(--head, var(--ink)); font-family: var(--mono, inherit); font-size: 20px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
}
/* C1: a rates card without a free official feed for the site currency says so first, with the official publisher's link */
.tool-warn { margin: 0; padding: 10px 12px; border: 1px solid var(--y-edge, #c9a400); border-radius: 8px; background: var(--cta-bg, rgba(255, 204, 0, .08)); font-size: 14px; line-height: 1.45; }
.tool-warn a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

/* Theme t7 "Night Desk": trading-terminal look in two schemes that follow the visitor's system setting.
   Light: grey paper canvas with a navy chart grid, white framed panels, navy text, yellow as fill and amber for small yellow text.
   Dark: deep navy canvas with a faint chart grid, framed panels, mint as the single accent.
   Both: monospaced figures and labels, a watchlist-style contents rail, order-ticket tools. The header bar, the risk strip,
   the tool readout and the footer stay dark in both schemes ("islands": they get the dark tokens, see below).
   Every colour is a custom property: light values here, dark values in the prefers-color-scheme block and on the islands. */
:root:has(> body.theme-t7) { color-scheme: light dark; }
.theme-t7 {
  /* surfaces and text (light) */
  --bg: #edf1f6; --bg-0: #f6f8fb; --panel: #ffffff; --panel-2: #f2f5f9; --edge: #d3dce7; --edge-2: #b6c4d5; --edge-3: #e1e7ee;
  --text: #1c2b3b; --muted: #4d6076; --head: #021a33; --lead: #33475c; --body-bg: #ffffff;
  /* accents (light): --y is the brand fill, --y-t is yellow as readable text (AA on the light surfaces) */
  --y: #ffde02; --y-2: #f2c900; --y-t: #7a5f00; --y-deco: #e6c200; --mint: #13a067; --mint-t: #087046; --red: #c43d2f;
  --link: #0a4d9e; --link-u: #e6c200; --link-h: #021a33;
  --y-tint: rgba(255, 222, 2, .16); --y-edge: rgba(201, 163, 0, .55); --y-ring: rgba(242, 201, 0, .4);
  --red-tint: rgba(196, 61, 47, .06); --red-edge: rgba(196, 61, 47, .4); --mint-tint: rgba(19, 160, 103, .07); --mint-edge: rgba(19, 160, 103, .4);
  --badge-bg: #ffde02; --badge-fg: #021a33; --badge-edge: #e6c200; --th-bg: #021a33; --th-fg: #ffde02;
  --zebra: rgba(2, 26, 51, .025); --row-h: rgba(255, 222, 2, .14); --field-h: #7f95ad; --o-line: #d3dce7;
  --focus: #021a33; --focus-halo: rgba(255, 222, 2, .8);
  --sh: 0 1px 2px rgba(2, 26, 51, .06), 0 6px 18px rgba(2, 26, 51, .07); --sh-lg: 0 18px 40px rgba(2, 26, 51, .12); --sh-pop: 0 18px 40px rgba(2, 26, 51, .22);
  --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23021a33' stroke-opacity='.05'/%3E%3C/svg%3E");
  /* hero (light): white-to-grey stage, yellow glow behind the character, amber price line */
  --hero-bg: radial-gradient(55% 75% at 80% 55%, rgba(255, 222, 2, .18), transparent 70%), linear-gradient(160deg, #ffffff, #e5ecf4 72%);
  --hero-grid: rgba(2, 26, 51, .055); --hero-line-op: .75; --halo: rgba(255, 222, 2, .42); --floor: rgba(2, 26, 51, .3);
  --fig-filter: drop-shadow(0 16px 22px rgba(2, 26, 51, .16));
  --hero-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffde02' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23ffde02' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 150 L60 138 L110 146 L170 118 L230 126 L290 96 L350 104 L410 80 L470 92 L530 64 L590 74 L650 50 L710 58 L800 30 V200 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 150 L60 138 L110 146 L170 118 L230 126 L290 96 L350 104 L410 80 L470 92 L530 64 L590 74 L650 50 L710 58 L800 30' fill='none' stroke='%23b08c00' stroke-opacity='.75' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --cta-bg: linear-gradient(135deg, rgba(255, 222, 2, .3), rgba(255, 222, 2, .08));
  /* constants: always-dark surfaces (header, risk strip, charts) and the brand navy used by the base styles */
  --ink: #021a33; --ink-2: #01111f; --ink-3: #0f355e; --top-bg: rgba(1, 17, 31, .94); --nav-fg: #cfdbe7; --disc-bg: #010c17; --disc-fg: #b6c4d2;
  --chart-bg: #000d1a; --mint-ring: rgba(61, 220, 151, .18); --foot-fg: #9fb2c5; --foot-a: #dbe5ef; --foot-u: rgba(255, 255, 255, .25);
  --line: var(--edge); --soft: var(--panel-2); --paper: var(--bg);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", monospace;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
  background: var(--bg) var(--grid-img);
  color: var(--text); color-scheme: light dark;
}
/* dark tokens: the whole page in a dark system scheme ... */
@media (prefers-color-scheme: dark) {
  .theme-t7 {
    --bg: #021a33; --bg-0: #01111f; --panel: #05223f; --panel-2: #0a2d51; --edge: #1a4069; --edge-2: #275486; --edge-3: #12345a;
    --text: #dbe5ef; --muted: #9db0c4; --head: #ffffff; --lead: #c4d2df; --body-bg: rgba(5, 34, 63, .92);
    --y-t: #ffde02; --y-deco: #ffde02; --mint: #3ddc97; --mint-t: #3ddc97; --red: #ff7a6b;
    --link: #ffe25a; --link-u: rgba(255, 226, 90, .45); --link-h: #ffffff;
    --y-tint: rgba(255, 222, 2, .07); --y-edge: rgba(255, 222, 2, .38); --y-ring: rgba(255, 222, 2, .18);
    --red-tint: rgba(255, 122, 107, .08); --red-edge: rgba(255, 122, 107, .45); --mint-tint: rgba(61, 220, 151, .08); --mint-edge: rgba(61, 220, 151, .4);
    --badge-bg: transparent; --badge-fg: #ffde02; --badge-edge: rgba(255, 222, 2, .5); --th-bg: #0a2d51; --th-fg: #ffde02;
    --zebra: rgba(255, 255, 255, .025); --row-h: rgba(255, 222, 2, .07); --field-h: #3a6aa0; --o-line: #1c3d63;
    --focus: #ffde02; --focus-halo: rgba(255, 222, 2, .25);
    --sh: 0 10px 26px rgba(0, 0, 0, .35); --sh-lg: 0 20px 44px rgba(0, 0, 0, .35); --sh-pop: 0 18px 40px rgba(0, 0, 0, .45);
    --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23ffffff' stroke-opacity='.035'/%3E%3C/svg%3E");
    --hero-bg: radial-gradient(120% 90% at 85% 10%, rgba(255, 222, 2, .10), transparent 55%), linear-gradient(160deg, #06284a, #021a33 65%);
    --hero-grid: rgba(255, 255, 255, .04); --hero-line-op: .6; --halo: rgba(255, 222, 2, .16); --floor: rgba(0, 0, 0, .65);
    --fig-filter: drop-shadow(0 0 18px rgba(255, 222, 2, .14)) drop-shadow(0 18px 26px rgba(0, 0, 0, .45));
    --hero-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffde02' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ffde02' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 150 L60 138 L110 146 L170 118 L230 126 L290 96 L350 104 L410 80 L470 92 L530 64 L590 74 L650 50 L710 58 L800 30 V200 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 150 L60 138 L110 146 L170 118 L230 126 L290 96 L350 104 L410 80 L470 92 L530 64 L590 74 L650 50 L710 58 L800 30' fill='none' stroke='%23ffde02' stroke-opacity='.55' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --cta-bg: linear-gradient(135deg, rgba(255, 222, 2, .12), rgba(255, 222, 2, .02));
  }
}
/* ... and the islands that stay dark in both schemes (same values as above) */
.theme-t7 :is(.top, .disc-top, .tool-out, .foot) {
  --bg: #021a33; --bg-0: #01111f; --panel: #05223f; --panel-2: #0a2d51; --edge: #1a4069; --edge-2: #275486; --edge-3: #12345a;
  --text: #dbe5ef; --muted: #9db0c4; --head: #ffffff; --lead: #c4d2df;
  --y-t: #ffde02; --y-deco: #ffde02; --mint: #3ddc97; --mint-t: #3ddc97; --red: #ff7a6b;
  --link: #ffe25a; --link-u: rgba(255, 226, 90, .45); --link-h: #ffffff;
  --th-bg: #0a2d51; --th-fg: #ffde02; --zebra: rgba(255, 255, 255, .025); --row-h: rgba(255, 222, 2, .07); --o-line: #1c3d63;
  --focus: #ffde02; --focus-halo: rgba(255, 222, 2, .25); --sh-pop: 0 18px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
.theme-t7 a { color: var(--link); text-decoration-color: var(--link-u); }
.theme-t7 a:hover { color: var(--link-h); text-decoration-color: var(--y-deco); }
.theme-t7 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
.theme-t7 ::selection { background: var(--y); color: var(--ink); }

/* header: terminal top bar with a yellow status line (dark in both schemes; the logo is a white wordmark) */
.theme-t7 .top { background: var(--top-bg); backdrop-filter: blur(8px); border-top: 3px solid var(--y); border-bottom: 1px solid var(--edge); }
.theme-t7 .top-i { min-height: 62px; }
.theme-t7 .nav-g summary { color: var(--nav-fg); font-size: 14px; border-radius: 6px; padding: 7px 10px; }
.theme-t7 .nav-g summary::after { border-top-color: var(--y); }
.theme-t7 .nav-g summary:hover, .theme-t7 .nav-g details[open] summary, .theme-t7 .nav-g:hover > details > summary { background: var(--panel-2); color: var(--head); box-shadow: inset 0 0 0 1px var(--edge-2); }
.theme-t7 .nav-g ul { top: 100%; margin-top: 8px; background: var(--panel); border: 1px solid var(--edge-2); border-top: 2px solid var(--y); border-radius: 10px; box-shadow: var(--sh-pop); }
.theme-t7 .nav-g ul::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.theme-t7 .nav-g li a { color: var(--text); border-radius: 6px; position: relative; padding-left: 22px; }
.theme-t7 .nav-g li a::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 1px; background: var(--edge-2); }
.theme-t7 .nav-g li a:hover, .theme-t7 .nav-g li a[aria-current] { background: var(--panel-2); color: var(--head); }
.theme-t7 .nav-g li a:hover::before, .theme-t7 .nav-g li a[aria-current]::before { background: var(--y); }
.theme-t7 .search input { border: 1px solid var(--edge); border-radius: 6px; color: var(--head); font-family: var(--mono); font-size: 13.5px; padding-left: 30px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffde02' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 9px 50%; }
.theme-t7 .search input::placeholder { color: var(--muted); }
.theme-t7 #q-res { background: var(--panel); border: 1px solid var(--edge-2); box-shadow: var(--sh-pop); }
.theme-t7 #q-res a { color: var(--text); }
.theme-t7 #q-res a:hover { background: var(--panel-2); }
.theme-t7 #q-res span, .theme-t7 .q-none { color: var(--muted); }
.theme-t7 .disc-top { background: var(--disc-bg); color: var(--disc-fg); border-bottom: 1px solid var(--edge); font-family: var(--mono); font-size: 12px; letter-spacing: .01em; }
.theme-t7 .disc-top .wrap::before { content: "\25B2"; color: var(--y); margin-right: 8px; font-size: 10px; }

/* home hero: headline over a faint price line; the character is a full-body cut-out standing on the hero floor */
.theme-t7.theme-t7 .home .hero { margin: 24px 0 0; padding: 48px 44px; border-radius: 18px; border: 1px solid var(--edge); grid-template-columns: 1.25fr .75fr; gap: 40px; position: relative; overflow: hidden; isolation: isolate;
  background: var(--hero-bg); color: var(--text); box-shadow: var(--sh); }
.theme-t7 .hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: -1; opacity: var(--hero-line-op); background: var(--hero-line) no-repeat bottom / 100% 100%; }
.theme-t7 .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 79px, var(--hero-grid) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, var(--hero-grid) 79px 80px); }
.theme-t7 .hero-t { padding: 0; }
.theme-t7 .hero h1 { color: var(--head); font-size: clamp(32px, 4.3vw, 54px); line-height: 1.07; letter-spacing: -.02em; font-weight: 700; }
.theme-t7 .hero h1::after { width: 64px; height: 5px; background: linear-gradient(90deg, var(--y) 0 60%, var(--mint) 60%); border-radius: 2px; margin-top: 20px; }
.theme-t7 .hero .lead { color: var(--lead); font-size: 18.5px; max-width: 48ch; }
.theme-t7 .chip { background: var(--panel); color: var(--head); border: 1px solid var(--edge-2); font-family: var(--mono); font-size: 13.5px; border-radius: 6px; }
.theme-t7 .chip:hover { background: var(--y); color: var(--ink); border-color: var(--y); }
/* the picture runs to the bottom edge of the hero (cancels its bottom padding), so the feet stand just above the edge */
.theme-t7 .hero-p { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; position: relative; isolation: isolate; margin: -20px 0 -48px; padding-bottom: 14px; }
.theme-t7 .hero-p::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 4%; width: 320px; height: 320px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--halo), transparent); }
.theme-t7 .hero-p::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 6px; width: 200px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--floor), transparent); }
.theme-t7 .hero-p img { width: auto; height: clamp(340px, 29vw, 410px); max-width: none; margin: 0; filter: var(--fig-filter); }

/* page header */
.theme-t7 .ph { padding: 34px 0 20px; }
.theme-t7 .crumbs { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.theme-t7 .crumbs a { color: var(--muted); }
.theme-t7 .crumbs span[aria-hidden] { color: var(--y-t); }
.theme-t7 .ph h1 { color: var(--head); font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -.02em; font-weight: 700; max-width: 26ch; }
.theme-t7 .ph h1::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 18px; background: linear-gradient(90deg, var(--y) 0 60%, var(--mint) 60%); border-radius: 2px; }
.theme-t7 .lead { color: var(--lead); max-width: 70ch; }
.theme-t7 .meta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 14px; display: inline-block; padding: 5px 10px; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); }
.theme-t7 .meta::before { content: "\25CF"; color: var(--mint); margin-right: 8px; }

/* article: one framed panel */
.theme-t7 .body { counter-reset: sec; background: var(--body-bg); border: 1px solid var(--edge); border-radius: 16px; padding: 10px 36px 30px; margin: 8px 0 0; box-shadow: var(--sh); }
.theme-t7 .body h2 { counter-increment: sec; color: var(--head); font-size: 25px; letter-spacing: -.01em; margin: 44px -36px 16px; padding: 14px 36px 14px; border-top: 1px solid var(--edge); background: linear-gradient(90deg, var(--y-tint), transparent 60%); display: flex; gap: 14px; align-items: baseline; scroll-margin-top: 90px; }
.theme-t7 .body > h2:first-child { margin-top: 0; border-top: 0; border-radius: 16px 16px 0 0; }
.theme-t7 .body h2::before { content: counter(sec, decimal-leading-zero); font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--badge-fg); background: var(--badge-bg); border: 1px solid var(--badge-edge); border-radius: 5px; padding: 2px 7px; flex: none; transform: translateY(-3px); }
.theme-t7 .body h3 { color: var(--head); font-size: 19px; }
.theme-t7 .body h3::before { content: "\203A  "; color: var(--mint-t); font-family: var(--mono); }
.theme-t7 .body strong { color: var(--head); }
.theme-t7 .body ul { list-style: none; padding-left: 4px; }
.theme-t7 .body ul > li { position: relative; padding-left: 22px; }
.theme-t7 .body ul > li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border: 2px solid var(--y-deco); border-radius: 2px; transform: rotate(45deg); }
.theme-t7 .body ol > li::marker { font-family: var(--mono); color: var(--y-t); font-size: .9em; }
.theme-t7 .body code { font-family: var(--mono); background: var(--bg-0); border: 1px solid var(--edge); border-radius: 4px; padding: 0 5px; color: var(--mint-t); }
.theme-t7 .body pre { background: var(--bg-0); border: 1px solid var(--edge); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.theme-t7 .body pre code { border: 0; padding: 0; background: none; border-radius: 0; }

/* contents: watchlist rail */
.theme-t7 .toc { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sh); }
.theme-t7 .toc summary { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.theme-t7 .toc ol { list-style: none; counter-reset: toc; padding: 0; }
.theme-t7 .toc li { counter-increment: toc; font-size: 15px; padding: 5px 0; }
.theme-t7 .toc a { color: var(--text); text-decoration: none; display: flex; gap: 10px; }
.theme-t7 .toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--y-t); padding-top: 2px; }
.theme-t7 .toc a:hover { color: var(--link-h); }
.theme-t7 .home .toc { max-width: none; margin-top: 18px; }
.theme-t7 .home .body > :is(p, ul, ol) { max-width: 880px; }
.theme-t7 .home .toc ol { columns: 3; }
@media (min-width: 1100px) {
  .theme-t7 main.wrap:not(.home) { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 28px; align-items: start; max-width: 1180px; }
  .theme-t7 main.wrap:not(.home) > * { grid-column: 2; min-width: 0; max-width: 830px; }
  .theme-t7 main.wrap:not(.home) > .ph { grid-column: 1 / -1; max-width: none; }
  .theme-t7 main.wrap:not(.home) > .toc { grid-column: 1; grid-row: 2 / span 6; position: sticky; top: 92px; margin-top: 8px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .theme-t7 main.wrap:not(.home) > .toc ol { columns: 1; }
  .theme-t7 main.wrap:not(.home) > .toc li { border-top: 1px solid var(--edge); padding: 8px 0; font-size: 14px; line-height: 1.4; }
}

/* tables: data grid with a navy (light) or panel (dark) header row in yellow mono */
.theme-t7 .tbl { border: 1px solid var(--edge-2); border-radius: 10px; background: var(--bg-0); }
.theme-t7 table { font-variant-numeric: tabular-nums; font-size: 15px; }
.theme-t7 th { background: var(--th-bg); color: var(--th-fg); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--edge-2); }
.theme-t7 td { border-bottom: 1px solid var(--edge-3); color: var(--text); }
.theme-t7 tbody tr:nth-child(even) td { background: var(--zebra); }
.theme-t7 tbody tr:hover td { background: var(--row-h); }
.theme-t7 td:first-child { color: var(--head); font-weight: 700; border-right: 1px solid var(--edge-3); }

/* callouts */
.theme-t7 .box { background: var(--y-tint); border: 1px solid var(--y-edge); border-left: 4px solid var(--y-deco); border-radius: 10px; color: var(--text); }
.theme-t7 .box-warn { background: var(--red-tint); border-color: var(--red-edge); border-left-color: var(--red); }
.theme-t7 .box-tip { background: var(--mint-tint); border-color: var(--mint-edge); border-left-color: var(--mint); }

/* tools: order-ticket panel; the readout (.tool-out) is a dark display in both schemes */
.theme-t7 .tool { background: var(--panel-2); border: 1px solid var(--edge-2); border-radius: 14px; box-shadow: var(--sh-lg); overflow: clip; margin: 20px 0 28px; }
.theme-t7 .body .tool { margin-left: -12px; margin-right: -12px; }
.theme-t7 .tool-in { padding: 20px; gap: 14px; }
.theme-t7 .f { color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.theme-t7 .f input, .theme-t7 .f select { background-color: var(--panel); border: 1px solid var(--edge-2); border-radius: 8px; color: var(--head); font-family: var(--mono); font-size: 16px; padding: 10px 11px; text-transform: none; letter-spacing: 0; }
.theme-t7 .f select option { background: var(--panel); color: var(--head); }
.theme-t7 .f input:hover, .theme-t7 .f select:hover { border-color: var(--field-h); }
.theme-t7 .f input:focus, .theme-t7 .f select:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo); }
.theme-t7 .f small { color: var(--muted); font-family: var(--font); text-transform: none; letter-spacing: 0; }
.theme-t7 .tool-out { background: var(--bg-0); color: var(--text); border-left: 1px solid var(--edge-2); padding: 20px; position: relative; }
.theme-t7 .tool-need { color: var(--text); background: var(--y-tint); border-color: var(--y-edge); margin-right: 18px; }
.theme-t7 .tool-out::before { content: ""; position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-ring); }
.theme-t7 .o { border-bottom: 1px dashed var(--o-line); color: var(--muted); font-size: 14.5px; }
.theme-t7 .o b { color: var(--head); font-family: var(--mono); font-size: 16px; font-weight: 600; }
.theme-t7 .o-big { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0 14px; border-bottom: 1px solid var(--edge-2); }
.theme-t7 .o-big span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.theme-t7 .o-big b { color: var(--y); font-size: 40px; text-align: left; font-weight: 700; text-shadow: 0 0 28px var(--focus-halo); }
.theme-t7 .tool-note { color: var(--muted); }
.theme-t7 .tool .tbl { background: var(--bg-0); color: var(--text); border-color: var(--edge); }
.theme-t7 .btn-s { border-radius: 8px; }
.theme-t7 .btn-s.btn-g { background: var(--panel); color: var(--head); box-shadow: inset 0 0 0 1px var(--edge-2); }
.theme-t7 .chart, .theme-t7 .sim-chart { background: var(--chart-bg); border: 1px solid var(--edge); }

/* partner block */
.theme-t7 div:has(> .cta-t) { background: var(--cta-bg); border: 1px solid var(--y-edge); border-radius: 14px; padding: 20px 22px; margin: 24px 0; }
.theme-t7 .cta-t { color: var(--head); font-size: 20px; font-weight: 800; margin-top: 0; }
.theme-t7 .btn { border-radius: 8px; color: var(--ink); box-shadow: 0 0 0 4px var(--y-ring); }
.theme-t7 .btn:hover { background: var(--y-2); }
.theme-t7 .cta-n { color: var(--muted); font-size: 13px; }

/* related tiles, sources, legal */
.theme-t7 .rel h2, .theme-t7 .src h2 { color: var(--head); font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.theme-t7 .rel h2::before, .theme-t7 .src h2::before { content: "// "; color: var(--y-t); }
.theme-t7 .cards a { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; color: var(--text); position: relative; padding-right: 40px; }
.theme-t7 .cards a::after { content: "\2197"; position: absolute; right: 14px; top: 12px; color: var(--y-t); font-size: 17px; transition: transform .15s; }
.theme-t7 .cards a:hover { border-color: var(--y-deco); background: var(--panel-2); box-shadow: var(--sh-lg); }
.theme-t7 .cards a:hover::after { transform: translate(2px, -2px); }
.theme-t7 .cards b { color: var(--head); }
/* a calculator card's example line: the tool's own first result (layout prints <i class="ex"> from page.example) */
.theme-t7 .cards .ex { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--mint-t); }
.theme-t7 .cards span { color: var(--muted); }
.theme-t7 .src ol { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.theme-t7 .legal { background: var(--bg-0); border: 1px solid var(--edge); border-left: 4px solid var(--y-deco); border-radius: 12px; color: var(--lead); }
.theme-t7 .legal h2 { color: var(--head); font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.theme-t7 .foot { background: var(--bg-0); border-top: 3px solid var(--y); color: var(--foot-fg); }
.theme-t7 .foot a { color: var(--foot-a); text-decoration-color: var(--foot-u); }
.theme-t7 .foot a:hover { color: var(--y); }
.theme-t7 .foot-h { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--y); }
.theme-t7 .foot-legal { border-top-color: var(--edge); }

/* hover menus: closed <details> hides its content via ::details-content, so reveal it on hover/focus */
@media (min-width: 960px) and (hover: hover) {
  .theme-t7 .nav-g:is(:hover, :focus-within) > details::details-content { content-visibility: visible; }
  .theme-t7 .nav-g:is(:hover, :focus-within) > details > ul { display: block; }
}
@media (max-width: 959px) {
  /* a backdrop filter would make the header the containing block of the fixed menu panel */
  .theme-t7 .top { backdrop-filter: none; }
  .theme-t7 .top-i { min-height: 60px; }
  .theme-t7 .nav { background: var(--bg-0); top: 64px; }
  .theme-t7 .nav-g summary { border-bottom: 1px solid var(--edge); border-radius: 0; }
  .theme-t7 .nav-g ul { border: 0; box-shadow: none; margin: 0; }
}
@media (max-width: 760px) {
  .theme-t7.theme-t7 .home .hero { grid-template-columns: 1fr; padding: 22px 18px 26px; margin-top: 14px; gap: 10px; border-radius: 14px; }
  .theme-t7 .disc-top { font-family: var(--font); font-size: 12.5px; }
  .theme-t7 .hero::before { height: 34%; }
  /* headline across the top; below it the lead and links on the left, the character standing on the right, feet on the hero floor */
  .theme-t7.theme-t7 .home .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "l p" "a p"; grid-template-rows: auto auto 1fr; column-gap: 6px; row-gap: 0; }
  .theme-t7 .hero-t { display: contents; }
  .theme-t7 .hero h1 { grid-area: h; }
  .theme-t7 .hero .lead { grid-area: l; font-size: 16.5px; line-height: 1.55; margin-bottom: 0; }
  .theme-t7 .hero-a { grid-area: a; align-self: start; flex-direction: column; align-items: flex-start; }
  .theme-t7 .hero-p { grid-area: p; order: 0; margin: -8px -10px -26px 0; padding-bottom: 10px; }
  .theme-t7 .hero-p::before { width: 220px; height: 220px; top: 0; }
  .theme-t7 .hero-p::after { width: 130px; height: 18px; bottom: 4px; }
  .theme-t7 .hero-p img { height: min(320px, 80vw); margin: 0; }
  /* phones: a compact hero (smaller headline, lead and character) so the page and its first tool start higher (audit 11.11) */
  .theme-t7.theme-t7 .home .hero { padding: 16px 14px 14px; margin-top: 10px; }
  .theme-t7 .hero h1 { font-size: 25px; line-height: 1.15; margin-bottom: 8px; }
  .theme-t7 .hero h1::after { margin-top: 10px; height: 4px; width: 48px; }
  .theme-t7 .hero .lead { font-size: 14.5px; line-height: 1.45; }
  .theme-t7 .hero-a { margin-top: 10px; gap: 6px; }
  .theme-t7 .hero-p { margin: -4px -8px -14px 0; padding-bottom: 6px; }
  .theme-t7 .hero-p::before { width: 150px; height: 150px; }
  .theme-t7 .hero-p::after { width: 90px; height: 12px; }
  .theme-t7 .hero-p img { height: min(190px, 48vw); }
  /* tighter page header so a tool's readout fits in the first screen */
  .theme-t7 .ph { padding: 20px 0 12px; }
  .theme-t7 .ph h1::before { margin-bottom: 12px; }
  .theme-t7 .meta { margin-top: 8px; }
  .theme-t7 .body > .tool:first-child { margin-top: 12px; }
  .theme-t7 .body { padding: 4px 16px 20px; border-radius: 12px; margin: 0 -6px; }
  .theme-t7 .body h2 { margin: 36px -16px 14px; padding: 12px 16px; font-size: 22px; }
  .theme-t7 .body .tool { margin-left: -10px; margin-right: -10px; }
  .theme-t7 .tool-out { border-left: 0; border-bottom: 1px solid var(--edge-2); padding: 16px; }
  .theme-t7 .tool-in { padding: 16px; }
  .theme-t7 .o-big b { font-size: 32px; }
  /* contents become one swipeable row so the page (and any tool) starts higher */
  .theme-t7 .toc { padding: 10px 12px; }
  .theme-t7 .toc ol, .theme-t7 .home .toc ol { columns: auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .theme-t7 .toc li { flex: none; white-space: nowrap; padding: 0; }
  .theme-t7 .toc a { border: 1px solid var(--edge-2); border-radius: 6px; padding: 5px 10px; background: var(--bg-0); font-size: 14px; }
  /* simple results stay pinned under the header while the inputs scroll */
  .theme-t7 .tool-out:not(:has(.tbl, .chart, .sim-chart)) { position: sticky; top: 64px; z-index: 5; }
  .theme-t7 .tool-out .o { font-size: 13.5px; padding-bottom: 5px; }
}

/* Thai script: no tracking on small labels, slightly larger field labels */
.theme-t7:lang(th) :is(.f, .o-big span, th, .toc summary, .crumbs, .meta, .nav-g summary, .legal h2, .foot-h, .rel h2, .src h2) { letter-spacing: 0; }
.theme-t7:lang(th) .f { font-size: 13.5px; }

/* ---- character scenes in page headers (one scene per section, all at one scale; tools/scene-assets.mjs) ---- */
body.theme-t7 .ph.ph-has-scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
body.theme-t7 .ph-scene { display: block; width: auto; height: auto; max-height: 300px; max-width: 260px; object-fit: contain; align-self: end; filter: drop-shadow(0 18px 14px rgba(2, 26, 51, .18)); }
@media (max-width: 760px) {
  /* phones: the heading keeps the full width; the scene stands in the lower right corner next to the lead */
  body.theme-t7 .ph.ph-has-scene { display: block; position: relative; }
  body.theme-t7 .ph.ph-has-scene .lead, body.theme-t7 .ph.ph-has-scene .meta { padding-right: 36%; }
  body.theme-t7 .ph-scene { position: absolute; right: 0; bottom: 0; max-height: 170px; max-width: 34%; }
}

/* phones: the contents row scrolls inside itself and never widens the page */
@media (max-width: 760px) { .theme-t7 .toc { max-width: 100%; min-width: 0; overflow: hidden; } .theme-t7 .toc ol { overflow-x: auto; max-width: 100%; } .theme-t7 main, .theme-t7 .body { min-width: 0; max-width: 100%; } }

/* ---- third menu level: all pages of a section under its hub (filled by engine/client/app.js) ---- */
.theme-t7 .nav-hub { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.theme-t7 .nav-hub > a { flex: 1 1 0; min-width: 0; }
.theme-t7 .nav-more { flex: none; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--edge); background: transparent; color: inherit; font: 700 16px/1 var(--mono, monospace); cursor: pointer; }
.theme-t7 .nav-sub { display: none; list-style: none; margin: 0; padding: 6px; }
.theme-t7 .nav-sub a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 14px; text-decoration: none; }
@media (min-width: 960px) and (hover: hover) {
  .theme-t7 .nav-more { display: none; }
  .theme-t7 .nav-hub > .nav-sub { position: absolute; left: 100%; top: -8px; width: 320px; max-height: min(70vh, 560px); overflow-y: auto; background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--sh); z-index: 40; }
  .theme-t7 .nav-hub:hover > .nav-sub, .theme-t7 .nav-hub:focus-within > .nav-sub { display: block; }
}
@media (max-width: 959px), (hover: none) {
  .theme-t7 .nav-hub.open > .nav-sub { display: block; flex-basis: 100%; padding-left: 12px; max-height: 50vh; overflow-y: auto; }
}
/* header and menu partner buttons */
.theme-t7 .hdr-cta { flex: none; }
.theme-t7 .btn-hdr { font-size: 14px; padding: 9px 14px; box-shadow: none; white-space: nowrap; }
.theme-t7 .btn-nav { width: 100%; margin-top: 10px; }
@media (min-width: 960px) { .theme-t7 .nav-l > li[class^="k"] { display: none; } }
/* phones and tablets: the header button becomes a full-width row right under the header bar (still inside the sticky header) */
@media (max-width: 959px) { .theme-t7 .top-i { flex-wrap: wrap; } .theme-t7 .hdr-cta { order: 10; flex-basis: 100%; padding-bottom: 8px; } .theme-t7 .hdr-cta > div { display: block; } .theme-t7 .btn-hdr { width: 100%; padding: 9px 12px; font-size: 15px; } .theme-t7 .hdr-cta > [hidden] { display: none !important; } }

/* ---- header fit (audit 12.11, C7): from 960 px the bar is ONE line and never wider than the screen ----
   Wide screens: the bar may use up to 1400 px and the group labels are a little tighter; the search box gives way first. */
@media (min-width: 960px) {
  .theme-t7 :is(.top, .disc-top) .wrap { max-width: 1400px; }
  .theme-t7 .top-i { gap: 12px; flex-wrap: nowrap; }
  /* last resort for a font wider than the one measured: the search shrinks first, then labels end in an ellipsis (no overflow) */
  .theme-t7 .nav { min-width: 0; flex: 0 .001 auto; }
  .theme-t7 .nav-l { gap: 2px; }
  .theme-t7 .nav-g { min-width: 0; }
  .theme-t7 .nav-g summary { padding: 7px 8px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
  .theme-t7 .nav-g summary::after { margin-left: 5px; }
  .theme-t7 .search { flex: 0 1 180px; min-width: 130px; }
  .theme-t7 .search input { width: 100%; }
  /* the lists of the right-hand groups open leftwards, and so do their flyouts: no list runs past the screen edge */
  .theme-t7 .nav-g:nth-child(n+5) > details > ul { left: auto; right: 0; }
  .theme-t7 .nav-g:nth-child(n+5) .nav-hub > .nav-sub { left: auto; right: 100%; }
}
/* Where the eight labels, the search and the partner button still do not fit, the menu folds into the burger (owner: never a
   two-line menu): a panel under the bar with every group open in four columns, so the hover script has nothing to toggle.
   Fold widths by site language, measured 12.11 with the button shown (Segoe UI; 40-80 px kept spare for other fonts):
   one line needs ~1140 px (th, id), ~1200-1240 px (en, vi, fr, pt), ~1290-1310 px (uz, es) - so every site folds below
   1280 px, uz and es also below 1366 px. The same rules twice: the two ranges differ only in the selector prefix. */
@media (min-width: 960px) and (max-width: 1279px) {
  .theme-t7 .top { backdrop-filter: none; }
  .theme-t7 .burger { display: block; order: 4; flex: none; margin-right: -6px; }
  .theme-t7 .nav { display: none; position: fixed; inset: 66px 0 auto 0; max-height: calc(100vh - 66px); overflow-y: auto; padding: 22px 16px 28px; background: var(--bg-0); border-bottom: 3px solid var(--y); box-shadow: var(--sh-pop); }
  .theme-t7 .nav.open { display: block; }
  .theme-t7 .nav-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; max-width: 1368px; margin: 0 auto; }
  .theme-t7 .nav-g > details > summary, .theme-t7 .nav-g:hover > details > summary, .theme-t7 .nav-g > details[open] > summary { padding: 0 0 8px; border-bottom: 1px solid var(--edge); border-radius: 0; background: none; box-shadow: none; color: var(--y); font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; cursor: default; }
  .theme-t7 .nav-g summary::after { content: none; }
  .theme-t7 .nav-g details::details-content { content-visibility: visible; }
  .theme-t7 .nav-g > details > ul { position: static; display: block; min-width: 0; margin: 6px 0 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .theme-t7 .nav-g ul::before { content: none; }
  .theme-t7 .nav-more { display: inline-block; }
  .theme-t7 .nav-hub > .nav-sub, .theme-t7 .nav-hub:hover > .nav-sub, .theme-t7 .nav-hub:focus-within > .nav-sub { display: none; position: static; width: auto; max-height: 40vh; margin: 0; padding: 2px 0 6px 12px; border: 0; box-shadow: none; background: transparent; }
  .theme-t7 .nav-hub.open > .nav-sub { display: block; flex-basis: 100%; }
  body.theme-t7.nav-open { overflow: hidden; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  .theme-t7:is(:lang(uz), :lang(es)) .top { backdrop-filter: none; }
  .theme-t7:is(:lang(uz), :lang(es)) .burger { display: block; order: 4; flex: none; margin-right: -6px; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav { display: none; position: fixed; inset: 66px 0 auto 0; max-height: calc(100vh - 66px); overflow-y: auto; padding: 22px 16px 28px; background: var(--bg-0); border-bottom: 3px solid var(--y); box-shadow: var(--sh-pop); }
  .theme-t7:is(:lang(uz), :lang(es)) .nav.open { display: block; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; max-width: 1368px; margin: 0 auto; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-g > details > summary, .theme-t7:is(:lang(uz), :lang(es)) .nav-g:hover > details > summary, .theme-t7:is(:lang(uz), :lang(es)) .nav-g > details[open] > summary { padding: 0 0 8px; border-bottom: 1px solid var(--edge); border-radius: 0; background: none; box-shadow: none; color: var(--y); font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; cursor: default; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-g summary::after { content: none; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-g details::details-content { content-visibility: visible; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-g > details > ul { position: static; display: block; min-width: 0; margin: 6px 0 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-g ul::before { content: none; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-more { display: inline-block; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-hub > .nav-sub, .theme-t7:is(:lang(uz), :lang(es)) .nav-hub:hover > .nav-sub, .theme-t7:is(:lang(uz), :lang(es)) .nav-hub:focus-within > .nav-sub { display: none; position: static; width: auto; max-height: 40vh; margin: 0; padding: 2px 0 6px 12px; border: 0; box-shadow: none; background: transparent; }
  .theme-t7:is(:lang(uz), :lang(es)) .nav-hub.open > .nav-sub { display: block; flex-basis: 100%; }
  body.theme-t7:is(:lang(uz), :lang(es)).nav-open { overflow: hidden; }
}

/* ---- marks: official logos, flags and coin icons (engine/marks.mjs, registry data/sources/logos.json) ----
   A `::marks` row is a line of chips at the top of a page (icon + name); hub and related cards carry the same icons left of the
   title. Logos sit on a white plate in both schemes so a dark wordmark stays visible on the dark canvas; flags, coins and own
   symbols are discs. Level C (state level) chips show the own symbol, a dashed frame and the name as a link. */
.theme-t7 .body ul.marks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.theme-t7 .body ul.marks > li { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 13px 5px 5px; min-height: 36px; box-sizing: border-box;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--panel); box-shadow: var(--sh);
  font-family: var(--mono); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--head); letter-spacing: .02em; }
.theme-t7 .body ul.marks > li::before { content: none; }
.theme-t7 .body ul.marks > li.mk-c { border-style: dashed; box-shadow: none; }
.theme-t7 .body ul.marks > li.mk-c a { color: var(--link); }
.theme-t7 .marks img, .theme-t7 .cm img { display: block; flex: none; }
.theme-t7 .mk-r { border-radius: 50%; box-shadow: 0 0 0 1px var(--edge); }
.theme-t7 .mk-t { border-radius: 6px; background: #fff; padding: 2px; box-shadow: 0 0 0 1px var(--edge); }
/* a chip that is only a wordmark (Visa, Mastercard): the plate is the chip */
.theme-t7 .body ul.marks > li:has(> .sr) { padding-right: 5px; }
/* cards: icons in a column left of the title and the lead; two icons of a pair overlap */
.theme-t7 .cards a.has-mk { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start; }
.theme-t7 .cards a.has-mk > b, .theme-t7 .cards a.has-mk > span:not(.cm) { grid-column: 2; }
.theme-t7 .cm { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; align-self: start; padding-top: 1px; }
.theme-t7 .cm-n .mk-r + .mk-r { margin-left: -9px; }
.theme-t7 .cm-n img + .mk-t, .theme-t7 .cm-n .mk-t + img { margin-left: 4px; }
.theme-t7 .cm-n img:first-child { position: relative; z-index: 1; }
.theme-t7 .cm .mk-r { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--edge); }

/* ---- hub and related cards (audit 12.11, C9): no card is a bare text box ----
   A card with marks (flags, coins, logos from engine/marks.mjs) keeps them. Every other card gets a section icon on a tile
   left of the title, the lead runs full width below (yellow tile and navy icon in light, yellow on a tinted tile in dark: the
   colours of the numbered H2 badges). On a hub the
   icon is the hub's own section (its menu item carries data-sec and aria-current); elsewhere it is a page icon. The icons
   are 24x24 stroke drawings used as masks, so they take the theme colour. */
.theme-t7 { --ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l5 5v15H6z'/%3E%3Cpath d='M14 2v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E");
  --ic-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M8 19h.01M12 19h.01M16 15v4'/%3E%3C/svg%3E");
  --ic-candles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v4M7 15v6M17 3v3M17 18v3'/%3E%3Crect x='5' y='7' width='4' height='8' rx='1'/%3E%3Crect x='15' y='6' width='4' height='12' rx='1'/%3E%3C/svg%3E");
  --ic-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-5 3 3 5-6'/%3E%3C/svg%3E");
  --ic-crypto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z'/%3E%3Cpath d='M10 8h3a2 2 0 0 1 0 4h-3zm0 4h3.5a2 2 0 0 1 0 4H10z'/%3E%3C/svg%3E");
  --ic-fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15l-4-4M20 16H5l4 4'/%3E%3C/svg%3E");
  --ic-energy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3Cpath d='M12 18a3 3 0 0 1-3-3'/%3E%3C/svg%3E");
  --ic-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.8-1.4 1.8-2 3-2s2.2.6 3 2M15 10h3M15 14h2'/%3E%3C/svg%3E");
  --ic-platform: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4M6 13l3-3 3 2 5-5'/%3E%3C/svg%3E");
  --ic-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18'/%3E%3C/svg%3E");
  --ic-glossary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v15H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h14'/%3E%3Cpath d='m9 13 2.5-6.5L14 13M10 11h3'/%3E%3C/svg%3E");
  --ic-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20l1.5-5h6l1.5 5zM12 20l1.5-5h6l1.5 5zM7.5 15 9 10h6l1.5 5z'/%3E%3C/svg%3E");
  --ic-stocks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 17v-5M10 17V7M14 17v-7M18 17V4'/%3E%3C/svg%3E");
  --ic-crescent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
  --ic-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Cpath d='M7 6l9-3 1 3M16 13h2'/%3E%3C/svg%3E");
  --ic-savings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E");
  --ic-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18l-9-6zM5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18'/%3E%3C/svg%3E");
  --ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.4 8.3 8 9.5 4.6-1.2 8-4.5 8-9.5V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --ic-risk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
  --ic-learn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h6a4 4 0 0 1 4 4v11a3 3 0 0 0-3-3H2zM22 5h-6a4 4 0 0 0-4 4v11a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  --ic-mind: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2v.1h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --ic-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E");
  --ic-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E");
  --ic-tax: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-2.5-1.5L14 21l-2-1.5-2 1.5-2.5-1.5L5 21z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
  --ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
  --card-ic: var(--ic-doc); }
.theme-t7:has(:is(.nav-hub[data-sec$="calculators"]) > a[aria-current]) { --card-ic: var(--ic-calc); }
.theme-t7:has(:is(.nav-hub[data-sec="candlestick-patterns"]) > a[aria-current]) { --card-ic: var(--ic-candles); }
.theme-t7:has(:is(.nav-hub[data-sec="chart-patterns"], .nav-hub[data-sec="technical-analysis"]) > a[aria-current]) { --card-ic: var(--ic-line); }
.theme-t7:has(:is(.nav-hub[data-sec="crypto-cfds"]) > a[aria-current]) { --card-ic: var(--ic-crypto); }
.theme-t7:has(:is(.nav-hub[data-sec="currencies"], .nav-hub[data-sec="forex-pairs"], .nav-hub[data-sec$="exchange-control"]) > a[aria-current]) { --card-ic: var(--ic-fx); }
.theme-t7:has(:is(.nav-hub[data-sec="energies"]) > a[aria-current]) { --card-ic: var(--ic-energy); }
.theme-t7:has(:is(.nav-hub[data-sec="exness"]) > a[aria-current]) { --card-ic: var(--ic-account); }
.theme-t7:has(:is(.nav-hub[data-sec="platforms"]) > a[aria-current]) { --card-ic: var(--ic-platform); }
.theme-t7:has(:is(.nav-hub[data-sec="fundamental-analysis"]) > a[aria-current]) { --card-ic: var(--ic-globe); }
.theme-t7:has(:is(.nav-hub[data-sec="glossary"]) > a[aria-current]) { --card-ic: var(--ic-glossary); }
.theme-t7:has(:is(.nav-hub[data-sec$="gold"], .nav-hub[data-sec="metals"]) > a[aria-current]) { --card-ic: var(--ic-gold); }
.theme-t7:has(:is(.nav-hub[data-sec="indices"], .nav-hub[data-sec$="-stocks"], .nav-hub[data-sec="pk-psx"], .nav-hub[data-sec="th-set"], .nav-hub[data-sec="ma-bourse"], .nav-hub[data-sec="br-b3-funds"], .nav-hub[data-sec="uz-savings-markets"]) > a[aria-current]) { --card-ic: var(--ic-stocks); }
.theme-t7:has(:is(.nav-hub[data-sec*="islamic"]) > a[aria-current]) { --card-ic: var(--ic-crescent); }
.theme-t7:has(:is(.nav-hub[data-sec="payments"], .nav-hub[data-sec$="money-local"]) > a[aria-current]) { --card-ic: var(--ic-wallet); }
.theme-t7:has(:is(.nav-hub[data-sec="personal-finance"], .nav-hub[data-sec$="savings"], .nav-hub[data-sec="br-renda-fixa"]) > a[aria-current]) { --card-ic: var(--ic-savings); }
.theme-t7:has(:is(.nav-hub[data-sec="uz-credit"]) > a[aria-current]) { --card-ic: var(--ic-bank); }
.theme-t7:has(:is(.nav-hub[data-sec*="regulation"]) > a[aria-current]) { --card-ic: var(--ic-shield); }
.theme-t7:has(:is(.nav-hub[data-sec="risk-management"]) > a[aria-current]) { --card-ic: var(--ic-risk); }
.theme-t7:has(:is(.nav-hub[data-sec="trading-basics"]) > a[aria-current]) { --card-ic: var(--ic-learn); }
.theme-t7:has(:is(.nav-hub[data-sec="trading-psychology"]) > a[aria-current]) { --card-ic: var(--ic-mind); }
.theme-t7:has(:is(.nav-hub[data-sec="trading-strategies"]) > a[aria-current]) { --card-ic: var(--ic-target); }
.theme-t7:has(:is(.nav-hub[data-sec$="rates-economy"], .nav-hub[data-sec="br-rates"]) > a[aria-current]) { --card-ic: var(--ic-percent); }
.theme-t7:has(:is(.nav-hub[data-sec="br-taxes"]) > a[aria-current]) { --card-ic: var(--ic-tax); }
.theme-t7:has(:is(.nav-hub[data-sec^="la-"]) > a[aria-current]) { --card-ic: var(--ic-pin); }
.theme-t7 .cards a:not(.has-mk) { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-content: start; padding-right: 36px; }
.theme-t7 .cards a:not(.has-mk) > b { grid-column: 2; align-self: center; }
.theme-t7 .cards a:not(.has-mk) > span { grid-column: 1 / -1; margin-top: 8px; }
.theme-t7 .cards a:not(.has-mk)::before { content: ""; grid-column: 1; grid-row: 1; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--badge-edge); background: var(--badge-bg) linear-gradient(var(--y-tint), var(--y-tint)); }
.theme-t7 .cards a:not(.has-mk) > b::before { content: ""; position: absolute; left: 23px; top: 21px; width: 20px; height: 20px; background: var(--badge-fg);
  -webkit-mask: var(--card-ic) center / contain no-repeat; mask: var(--card-ic) center / contain no-repeat; }
.theme-t7 .cards a:not(.has-mk):hover::before { border-color: var(--y-deco); }