/* polymarkets.co.il — Redesign v2.0 */
/* Polymarket-inspired dark portal, RTL Hebrew */

/* #601: the Heebo/Plex @import that lived here was a hidden SERIAL render-blocker
   (fetched only after style.css arrives). Heebo now comes from the per-lang
   Google-Fonts <link> in template.php (_lang_font_url default). Do NOT re-add. */

:root {
    --font-body: 'Heebo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bg: #15191D;
    --bg-surface: #1E2428;
    --bg-card: #1E2428;
    --bg-hover: #262C34;
    --bg-input: #1E2428;
    --border: #242B32;
    --border-light: #2E353D;
    --text: #E5E7EB;
    --text-strong: #FFFFFF;
    --text-secondary: #7B8996;
    --text-muted: #5C6370;
    --accent: #315EFF;
    --accent-hover: #5478FF;
    --accent-soft: rgba(49,94,255,0.12);
    --accent-glow: rgba(49,94,255,0.25);
    --green: #3DB468;
    --green-hover: #35A05C;
    --green-soft: rgba(61,180,104,0.15);
    --green-bg: rgba(61,180,104,0.08);
    --red: #CB3131;
    --red-hover: #B02828;
    --red-soft: rgba(203,49,49,0.15);
    --red-bg: rgba(203,49,49,0.08);
    /* Polymarket-matched YES/NO action-button palette (#1319, dark theme).
       Sampled from Polymarket's live dark design tokens: buy/yes green = green-600
       (#2bae4c, their --btn-green-bg); no/sell red = #eb5757 (trade component).
       Scoped to the yes/no BUY buttons only — NOT --green/--red (odds, prob-bars,
       affiliate CTAs keep their shades per the operator green/red rule ~line 10840). */
    --yes: #2bae4c;              /* solid buy/yes fill (white text) */
    --yes-hi: #2fbb53;           /* brighter — hover/active feedback on dark */
    --yes-soft: rgba(43,174,76,0.16);  /* unselected/default tint bg */
    --yes-text: #3fd06b;         /* readable green text on soft/dark */
    --no: #eb5757;               /* solid no/sell fill (white text) */
    --no-hi: #f87275;            /* brighter — hover/active feedback */
    --no-soft: rgba(235,87,87,0.15);
    --no-text: #ff6b6b;          /* readable red text on soft/dark */
    --yellow: #F59E0B;
    --yellow-soft: rgba(245,158,11,0.12);
    --radius: 15px;
    --radius-sm: 7px;
    --radius-lg: 15px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --transition: 150ms ease;
    --max-width: 1360px;
    --header-h: 56px;
    --subnav-h: 48px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 15px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    direction: rtl;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ═══ HEADER ═══════════════════════════════════════ */
.site-header {
    background: var(--bg);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    height: var(--header-h);
    gap: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.logo-img-sm { width: 30px; height: 30px; }
.logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.logo-flag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.logo-flag img {
    width: 24px;
    height: auto;
    border-radius: 2px;
}
.flag-icon {
    display: inline-block;
    vertical-align: middle;
}

/* ── Global scrollbars: thin, always-transparent track, half-opacity thumb that goes
   full on hover. Element rules that hide their scrollbar (subnav/chips/tabs) are more
   specific and still win. ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(154, 160, 166, 0.45) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(154, 160, 166, 0.45);
    border-radius: 8px;
    transition: background .15s ease;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(154, 160, 166, 0.95); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Topbar language switcher — plain globe icon, no bg/border, no outline */
.hdr-lang-btn {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    color: var(--text-muted, #9aa0a6);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}
.hdr-lang-btn:hover { color: var(--text, #fff); }
.hdr-lang-btn:focus,.hdr-lang-btn:active{outline:none;box-shadow:none;background:transparent}
.hdr-lang-btn i { font-size: 18px; }
/* Hide globe on mobile — language picker still reachable from drawer */
@media (max-width: 768px) { .hdr-lang-btn { display: none !important; } }

/* ═══ Language picker modal ═══ */
.lang-modal-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    animation: lmFadeIn .2s ease;
}
@keyframes lmFadeIn { from{opacity:0} to{opacity:1} }
.lang-modal-box {
    background: linear-gradient(165deg,#1a1f2e 0%,#141820 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    width: 100%; max-width: 480px;
    padding: 28px 24px 24px; position: relative;
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.lang-modal-x {
    position: absolute; top: 10px; inset-inline-end: 12px;
    background: none; border: none; color: #8b949e;
    font-size: 24px; cursor: pointer; padding: 4px 10px; line-height: 1;
}
.lang-modal-x:hover { color: #e6edf3; }
.lang-modal-title {
    font-size: 17px; font-weight: 700;
    color: #e6edf3; margin: 0 0 18px; text-align: center;
}
.lang-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: 8px;
}
.lang-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    text-decoration: none; color: #e6edf3;
    transition: all .15s ease;
}
.lang-opt:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
    transform: translateY(-1px);
}
.lang-opt-active {
    background: rgba(88,166,255,.1);
    border-color: rgba(88,166,255,.3);
}
.lang-opt-flag { display: inline-flex; flex-shrink: 0; }
.lang-opt-flag img { width: 24px; height: auto; border-radius: 2px; }
.lang-opt-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lang-opt-body strong { font-size: 13px; font-weight: 600; }
.lang-opt-body small { font-size: 11px; color: #8b949e; }

/* ═══ Per-category SEO intro + FAQ (predictions/category pages) ═══ */
.cat-seo-intro { margin: 0 0 28px; }
.cat-seo-h1 {
    font-size: 26px; font-weight: 700; line-height: 1.25;
    color: var(--text, #e6edf3); margin: 0 0 14px;
}
.cat-seo-body {
    color: var(--text-secondary, #b6bfcc);
    font-size: 15px; line-height: 1.7;
}
.cat-seo-body p { margin: 0 0 12px; }
.cat-seo-body strong { color: var(--text, #e6edf3); }
.cat-seo-body a { color: var(--accent, #58a6ff); text-decoration: none; }
.cat-seo-body a:hover { text-decoration: underline; }

/* #1296 S1(item 1): MOBILE-ONLY — sink the topic/category DESCRIPTION BELOW the market grid so
   phone users hit the markets first. VISUAL only (CSS order) — the HTML source order is unchanged
   (intro stays first in the DOM on every breakpoint), so crawlers/answer-engines that read raw HTML
   still see the h1+intro before the grid — Karim's SEO guard (#1296 thread). Desktop is untouched.
   #1323 fix: the H1 is now emitted as its OWN direct child of .page-main (the .cat-seo-h1 /
   .pred-topic-head heading), so ONLY the body block moves — the H1 stays on top. The movable
   targets are the body-only blocks: .cat-seo-intro/.topic-seo-intro sections now wrap the body
   alone, and .pred-topic-desc is a standalone paragraph. The head (H1 + count), nav rail and
   filter bar stay at the top; only the description sinks below the grid, above the FAQ.
   Scope: /predictions/<slug>/ + /category/<slug>/ only; market.php / topic pillar / compare untouched. */
@media (max-width: 760px) {
    .page-main { display: flex; flex-direction: column; }
    .page-main > .cat-seo-intro,
    .page-main > .topic-seo-intro,
    .page-main > .pred-topic-desc { order: 1; }
    .page-main > .cat-seo-faq,
    .page-main > .topic-seo-faq { order: 2; }
}

.cat-seo-faq { margin: 40px 0 24px; }
.cat-seo-faq-heading {
    font-size: 20px; font-weight: 700; color: var(--text, #e6edf3);
    margin: 0 0 16px;
}
.cat-seo-faq-list { display: flex; flex-direction: column; gap: 8px; }
.cat-seo-faq-item {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 14px 16px;
    transition: background .15s ease;
}
.cat-seo-faq-item:hover { background: rgba(255,255,255,.05); }
.cat-seo-faq-item summary {
    cursor: pointer; font-weight: 600;
    color: var(--text, #e6edf3); list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cat-seo-faq-item summary::-webkit-details-marker { display: none; }
.cat-seo-faq-item summary::after {
    content: "+"; color: #8b949e; font-size: 18px; line-height: 1; flex-shrink: 0;
    transition: transform .15s ease;
}
.cat-seo-faq-item[open] summary::after { content: "−"; }
.cat-seo-faq-ans {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: var(--text-secondary, #b6bfcc);
    font-size: 14px; line-height: 1.65;
}
.cat-seo-faq-ans p { margin: 0 0 8px; }
.cat-seo-faq-ans p:last-child { margin-bottom: 0; }

.header-search {
    max-width: 480px;
    width: 480px;
    position: relative;
    margin-inline: auto;
    flex-shrink: 1;
}

.header-search input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 8px 14px 8px 40px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    height: 40px;
    transition: border-color var(--transition);
}

.header-search input::placeholder { color: var(--text-muted); }
.header-search input:focus { border-color: var(--accent); }

.header-search .search-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.header-nav a {
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    white-space: nowrap;
}

.header-nav a:hover { color: var(--text); background: var(--bg-hover); }
.header-nav a.active { color: var(--text); background: var(--bg-hover); }

.header-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition);
    flex-shrink: 0;
}

.header-cta:hover { background: var(--accent-hover); }

/* ═══ CATEGORY TABS (Sub-nav) ══════════════════════ */
.subnav {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--header-h-real, var(--header-h));
    z-index: 999;
}

.subnav-inner {
    display: flex;
    align-items: center;
    height: var(--subnav-h);
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.subnav-inner::-webkit-scrollbar { display: none; }

.subnav a {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 0;
    white-space: nowrap;
    transition: color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -.005em;
}

.subnav a:hover { color: #E5E5E5; background: none; }
.subnav a.active { color: #E5E5E5; background: none; }
.subnav a.hot { color: #E5E5E5; font-weight: 600; }
.subnav a.hot::before { display: none; }
.subnav a i { font-size: 13px; opacity: 0.85; }
.subnav a:hover i { opacity: 1; }
.subnav a.hot i { color: #FF6B2B; opacity: 1; }

/* ═══ LAYOUT (Main + Sidebar) ══════════════════════ */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    padding: 24px 0;
}

.page-main { min-width: 0; }

.page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-section {
    overflow: hidden;
}

.sidebar-header {
    padding: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color var(--transition);
    cursor: pointer;
}

.sidebar-item:last-child { border-bottom: none; }
.sidebar-item:hover { color: var(--accent); }

.sidebar-item .rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-item .item-info { flex: 1; min-width: 0; }

.sidebar-item .item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-item .item-odds {
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    flex-shrink: 0;
}

.sidebar-item .item-odds.yes { color: var(--green); }
.sidebar-item .item-odds.no { color: var(--red); }

.sidebar-link {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    text-align: center;
    border-top: 1px solid var(--border);
    transition: background var(--transition);
}

.sidebar-link:hover { background: var(--bg-hover); }

/* ═══ SECTION HEADERS ══════════════════════════════ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 580;
    color: #E5E5E5;
}
/* Generic page H1 (when section-title is used as the H1 outside .gsec-intro) */
h1.section-title{
    font-size: clamp(28px, 4.5vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #f5f7fa;
    margin: 8px 0 14px;
}
@media(max-width:560px){
    h1.section-title{ font-size: clamp(24px, 7vw, 32px); }
}

.section-link {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.section-link:hover { color: var(--text-strong); text-decoration: underline; }

/* ═══ MARKET CARDS ═════════════════════════════════ */
.markets-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.market-card {
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    transition: all var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.market-card:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Share / open-on-Polymarket icon button (market cards) */
.market-card .mc-share {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #8b949e);
    font-size: 11px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    z-index: 2;
    pointer-events: none;
}
.market-card:hover .mc-share,
body.training-active .market-card .mc-share {
    opacity: 1;
    pointer-events: auto;
}
.market-card .mc-share:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: scale(1.05);
}
/* Card action icons: bookmark + open-on-Polymarket — bare icons, last items in the footer row */
.mc-foot-end { display: inline-flex; align-items: center; gap: 8px; }
.mc-acts { display: inline-flex; align-items: center; gap: 8px; opacity: 0.8; }
.mc-act { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.mc-act:hover { opacity: 1; color: var(--text-primary, #fff); }
.mc-bm.on { color: var(--accent, #1652f0); }
.market-card .mc-title {
    color: inherit;
    text-decoration: none;
}
.market-card .mc-title:hover {
    color: inherit;
}

.market-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.market-card-top {
    display: flex;
    flex-direction: column;
}

.market-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
    padding: 12px 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 52px;
}

.market-card-body { margin-top: auto; padding: 8px 14px 0; }

/* YES/NO Outcome Buttons (Polymarket-style) */
.outcome-buttons {
    display: flex;
    gap: 8px;
}

.outcome-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.outcome-btn.yes {
    background: var(--yes-soft);
    color: var(--yes-text);
}

.outcome-btn.yes:hover {
    background: var(--yes);
    color: #fff;
}

.outcome-btn.no {
    background: var(--no-soft);
    color: var(--no-text);
}

.outcome-btn.no:hover {
    background: var(--no);
    color: #fff;
}

.outcome-btn .label { font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 12px; }
.outcome-btn .price { font-size: 14px; }

/* Multi-outcome cards */
.outcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.outcome-row:last-child { border-bottom: none; }

.outcome-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

.outcome-pct {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--accent);
    margin-inline-start: 12px;
}

.outcome-bar-track {
    width: 100px;
    height: 4px;
    background: var(--bg-hover);
    border-radius: 2px;
    overflow: hidden;
    margin-inline-start: 12px;
}

.outcome-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width 0.4s ease;
}

.market-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 14px 12px;
    margin-top: auto;
}

.market-vol {
    font-family: 'Inter', 'Heebo', sans-serif;
    font-size: 11.5px;
}

/* ═══ 4-COL MARKET GRID + NEW CARD CLASSES ═══════ */
.markets-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;       /* all cards equal height (binary Yes/No no longer shorter) */
    gap: 14px;
}

.mc-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
/* #128: on the esports/sports-shell grid, let cards SHRINK to their track. Grid tracks are
   minmax(0,1fr) (shrinkable) but the wide sports cards keep min-width:auto, so they forced the
   4-col grid past the container -> desktop horizontal overflow (esports only; home cards are narrow). */
.sports-shell .markets-grid > * { min-width: 0; }

/* Small inline thumbnail for cards */
.mc-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.mc-header {
    display: flex;
    align-items: start;   /* title top-aligned against the side thumbnail */
    gap: 10px;
    margin-bottom: auto;  /* push the body/footer down for even card heights */
}

.mc-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.mc-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mc-body { margin-top: 0; }
.mc-footer { margin-top: auto; }  /* pin volume row to bottom; cards equal-height via grid stretch */

/* Half-circle gauge (inline in header) */
.mc-semi {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    margin-inline-start: auto;   /* push the chances gauge to the END of the header row */
    margin-inline-end: 0;
}
/* #32 (operator): on the binary card only — title fills the width and the half-circle gauge sits flush
   at the row END against the title. The row is CENTER-aligned so the market TITLE stays vertically
   MIDDLE (operator: keep the title middle, NOT bottom). Only the % number is seated at the half-circle's
   bottom line — that's handled inside the gauge by .mc-semi-pct, independent of this row alignment.
   Scoped to .mc-binary so the multi-outcome / h2h cards keep their original alignment. */
.mc-binary .mc-header { align-items: center; }
.mc-binary .mc-header .mc-title { flex: 1 1 auto; }   /* title fills available width (min-width:0 + wrap = no overflow) */
/* #1302 (operator): multi-outcome + h2h cards — vertically CENTER the title against the side
   thumbnail so it's symmetric with the image (was top-aligned via the default .mc-header,
   which looked off-centre on 1-line titles). Matches the .mc-binary treatment above. */
.mc-multi .mc-header, .mc-h2h-card .mc-header { align-items: center; }
.mc-semi-svg {
    width: 56px;
    height: auto;
    display: block;
}
.mc-semi-bg {
    stroke: var(--border);
    stroke-width: 10;
}
.mc-semi-fill {
    stroke: var(--green);
    stroke-width: 10;
    transition: stroke-dashoffset 0.6s ease;
}
.mc-semi-pct {
    position: absolute;
    bottom: 15px;   /* #32: seat the % bottom ON the half-circle's bottom line (was 12px = dipped 3px below it) */
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 800;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--green);
    line-height: 1;
    white-space: nowrap;
}
.mc-semi-lbl {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: -2px;
}
/* Larger gauge for hero */
.mc-semi-lg {
    width: 80px;
}
.mc-semi-lg .mc-semi-svg { width: 80px; }
.mc-semi-lg .mc-semi-pct { font-size: 18px; bottom: 10px; }
.mc-semi-lg .mc-semi-lbl { font-size: 9px; }

.mc-btns { display: flex; gap: 8px; }
.mc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition);
}
.mc-btn.yes { background: var(--yes-soft); color: var(--yes-text); }
.mc-btn.yes:hover { background: var(--yes); color: #fff; }
.mc-btn.no { background: var(--no-soft); color: var(--no-text); }
.mc-btn.no:hover { background: var(--no); color: #fff; }
.mc-btn-label { font-family: 'Heebo', sans-serif; font-size: 12px; font-weight: 600; }
.mc-btn-price { font-family: 'Inter', 'Heebo', sans-serif; font-size: 14px; }

.mc-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.mc-opt:last-of-type { border-bottom: none; }
.mc-opt-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mc-opt-name {
    font-size: 10.5px;
    color: var(--text);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* multi-outcome option pct + Yes/No chips (moved out of inline _mc_card_css) */
.mc-opt-pct{font-weight:700;font-size:12px;flex:none;margin-inline-start:6px}
.mc-opt-yn{display:inline-flex;gap:5px;flex:none;margin-inline-start:8px}
.mc-yn{font-size:11px;font-weight:700;padding:4px 11px;border-radius:7px}
.mc-yn.y{background:var(--yes-soft,rgba(43,174,76,.16));color:var(--yes-text,#3fd06b)}
.mc-yn.n{background:var(--no-soft,rgba(235,87,87,.15));color:var(--no-text,#ff6b6b)}
.mc-opt-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.mc-pill {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Inter', 'Heebo', sans-serif;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.mc-pill.yes { background: var(--yes-soft); color: var(--yes-text); }
.mc-pill.no { background: var(--no-soft); color: var(--no-text); }
.mc-more { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Head-to-head (2 named options) */
.mc-h2h { display: flex; flex-direction: column; }
.mc-h2h-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.mc-h2h-row:last-child { border-bottom: none; }
.mc-h2h-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mc-h2h-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-h2h-pct {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--accent);
    flex-shrink: 0;
}

.mc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 4px;
}
.mc-vol { font-family: 'Inter', 'Heebo', sans-serif; font-size: 11px; }

.market-tag {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

/* ═══ FEATURED/HERO MARKET ═════════════════════════ */
.featured-market {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.featured-market:hover { border-color: var(--border-light); }

.featured-info { display: flex; flex-direction: column; gap: 12px; }

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--yellow-soft);
    color: var(--yellow);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}

.featured-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

.featured-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.featured-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.featured-meta .val {
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--text-secondary);
    font-weight: 500;
}

.featured-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.featured-odds-display {
    text-align: center;
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.featured-pct {
    font-size: 56px;
    font-weight: 800;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--green);
    line-height: 1;
}

.featured-pct-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.featured-btns {
    display: flex;
    gap: 10px;
}

.featured-btns .outcome-btn {
    padding: 12px;
    font-size: 15px;
}

/* ═══ FEATURED CAROUSEL ══════════════════════════════ */
.featured-carousel {
    position: relative;
    margin-bottom: 20px;
}

.featured-track {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.featured-slide {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fadeSlide 0.4s ease;
}

.featured-slide.active {
    display: block;
    position: relative;
}

/* Hero icon — sits inline on a flex row with the title (no more absolute float that
   wasted space and mis-aligned in RTL). Logical flow = correct on LTR + RTL. */
.hero-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.hero-headtext {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.hero-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero small circular icon */
.hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.hero-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hero-content {
    padding: 20px 24px;   /* symmetric now that the icon is inline, not an absolute float */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-tags {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.hero-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    text-decoration: none;
}
.hero-title:hover { color: var(--accent); }

/* Multi-outcome hero options */
.hero-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
}

.hero-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.hero-opt:last-of-type { border-bottom: none; }

.hero-opt-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.hero-opt-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.hero-opt-pct {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--text);
    min-width: 50px;
    text-align: start;
}

.hero-opt-more {
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 6px;
}

/* Binary hero */
.hero-binary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
}

.hero-chance {
    flex-shrink: 0;
}

.hero-btns {
    display: flex;
    gap: 10px;
    flex: 1;
}
.hero-btns .mc-btn {
    padding: 12px 0;
    font-size: 14px;
}

/* Hero split layout (content + chart) */
.hero-split {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
}
.hero-left {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hero-chart-wrap {
    flex: 1;
    min-height: 140px;
    position: relative;
}
.hero-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.hero-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}
.hero-chart-legend .hcl-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hero-chart-legend .hcl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hero-chart-legend strong {
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--text);
}

/* Hero footer */
.hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

.featured-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.featured-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}

.featured-dots .dot:hover { background: var(--text-muted); }
.featured-dots .dot.active { background: var(--accent); width: 24px; border-radius: 5px; }

/* #100426: carousel control bar (prev / dots / next / pause) — keyboard-reachable a11y controls */
.featured-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.featured-nav .featured-dots { margin-top: 0; }
.fc-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--border);
    border: 1px solid transparent;
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), color var(--transition);
}
.fc-ctrl:hover { background: var(--text-muted); color: var(--text-strong, #fff); }
[dir="rtl"] .featured-nav .fc-prev i,
[dir="rtl"] .featured-nav .fc-next i { transform: scaleX(-1); }
/* Visible keyboard focus for all carousel controls (WCAG 2.4.7) */
.featured-nav .fc-ctrl:focus-visible,
.featured-dots .dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ═══ NEWS/CONTENT CARDS ═══════════════════════════ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.news-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all var(--transition);
}

.news-card:hover { border-color: var(--border-light); background: var(--bg-card); }

.news-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 2px;
}

.news-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
}

.news-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
}

.news-card-excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: auto;
}

.news-card .linked-market {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-top: 4px;
}

.linked-market .lm-title {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 500;
}

.linked-market .lm-odds {
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 700;
    color: var(--green);
    font-size: 13px;
}

/* Phones: news cards -> compact list rows (thumbnail + tag/title/excerpt), same as guides */
@media (max-width: 560px){
    .news-grid{ grid-template-columns: 1fr; gap: 9px; }
    .news-card{
        display: grid; grid-template-columns: 96px 1fr; align-items: stretch;
        padding: 0; gap: 0; overflow: hidden; min-height: 92px;
        background: #181D21; border-radius: 12px;
    }
    .news-card-img{
        grid-column: 1; grid-row: 1 / span 99;
        width: 96px; height: 100%; margin: 0; border-radius: 0; object-fit: cover;
    }
    .news-card-tag{ grid-column: 2; padding: 11px 13px 0; }
    .news-card-title{ grid-column: 2; padding: 2px 13px 0; font-size: 14.5px; line-height: 1.3;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .news-card-excerpt{ grid-column: 2; padding: 4px 13px 0; -webkit-line-clamp: 2; font-size: 12px; }
    .news-card-meta{ grid-column: 2; padding: 5px 13px 11px; margin-top: 4px; }
    .news-card .linked-market{ display: none; }
}

/* ═══ GUIDE/CONTENT CARDS ══════════════════════════ */
.content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.content-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all var(--transition);
    color: var(--text);
    overflow: hidden;
}
.content-card-num {
    display: inline-block;
    font: 700 11px/1 var(--font-body);
    letter-spacing: .08em;
    color: var(--text-dim, var(--text-secondary));
    opacity: .7;
    margin-bottom: 2px;
}
.content-card-has-hero .content-card-num {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    padding: 4px 8px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    opacity: 1;
    margin: 0;
}

.content-card:hover { border-color: var(--border-light); background: var(--bg-card); color: var(--text); }

.content-card h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.content-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Guide hero image — 16:7, blends into card bg via multiply */
.content-card-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--border);
}
.content-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-card);
    mix-blend-mode: multiply;
}

.content-card .meta {
    margin-top: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.tag {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

/* ═══ CATEGORY PILLS ═══════════════════════════════ */
.categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
    white-space: nowrap;
}

.category-pill:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.category-pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.category-pill .cat-emoji { font-size: 16px; }

/* ═══ PREDICTIONS PAGE ═════════════════════════════ */
.predictions-categories-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.predictions-cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s;
}
.predictions-cat-card:hover {
    border-color: var(--border-light);
}
.predictions-cat-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
}
.predictions-cat-emoji {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.predictions-cat-info { flex: 1; min-width: 0; }
.predictions-cat-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}
.predictions-cat-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}
.predictions-subtopics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px;
}
.predictions-subtopic-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.predictions-subtopic-pill:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
/* Phones: tighten the (already list-style) topic cards */
@media (max-width: 560px){
    .predictions-cat-link{ padding: 14px; gap: 12px; }
    .predictions-cat-emoji{ width: 40px; height: 40px; font-size: 22px; }
    .predictions-cat-name{ font-size: 15.5px; }
    .predictions-cat-desc{ font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .predictions-subtopics{ padding: 0 14px 12px; gap: 6px; }
    .predictions-subtopic-pill{ padding: 4px 10px; font-size: 11.5px; }
}
/* #458 predictions topic head: clean vertical stack (title -> meta -> desc).
   Replaces the fragile .section-header flex (h1 + right-floated count) that
   squished + broke on mobile. Symmetric at every width. */
.pred-topic-head { margin: 4px 0 18px; }
.pred-topic-title {
    margin: 0;
    font-size: clamp(26px, 4.2vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #f5f7fa;
}
/* inline (not flex) so the flag stays attached to the first line of the title
   and the whole thing wraps naturally on narrow screens */
.pred-topic-emoji {
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 12px;
    font-size: 30px;
    line-height: 1;
}
.pred-topic-emoji .emoji-flag { width: 30px; height: 30px; vertical-align: middle; }
.pred-topic-name { vertical-align: middle; }
.pred-topic-meta { margin-top: 10px; }
.pred-count {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.pred-topic-desc {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 62ch;
}
.pred-topic-head--intro { margin-top: 0; }
@media (max-width: 560px){
    .pred-topic-head { margin: 2px 0 14px; }
    .pred-topic-title { font-size: clamp(22px, 6.5vw, 30px); }
    .pred-topic-emoji { font-size: 24px; margin-inline-end: 9px; }
    .pred-topic-emoji .emoji-flag { width: 24px; height: 24px; }
    .pred-topic-meta { margin-top: 8px; }
    .pred-topic-desc { font-size: 13.5px; margin-top: 10px; }
}

/* #458 subtopic chip rail: ONE tidy horizontally-scrolling row, never wraps.
   Deliberately quieter/smaller than the global category nav pills so it reads
   as "browse siblings", not a second site nav. Breadcrumb owns the up-hierarchy. */
.pred-rail-wrap { position: relative; margin-bottom: 22px; }
.pred-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block-end: 2px;
    scroll-padding-inline: 4px;
}
.pred-rail::-webkit-scrollbar { display: none; }
.pred-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pred-chip:hover { color: var(--text); border-color: var(--border-light); }
.pred-chip.active {
    color: #fff;
    font-weight: 600;
    background: var(--accent, #315EFF);
    border-color: var(--accent, #315EFF);
}
/* edge-fade cue that more chips scroll off-end; flips side in RTL */
.pred-rail-wrap::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    background: linear-gradient(to var(--rail-fade, left), var(--bg), transparent);
}
/* fade only while there's more to scroll (JS sets .is-scrollable / .at-scroll-end) */
.pred-rail-wrap.is-scrollable::after { opacity: 1; }
.pred-rail-wrap.is-scrollable.at-scroll-end::after { opacity: 0; }
[dir="rtl"] .pred-rail-wrap { --rail-fade: right; }

/* Desktop scroll cue: a small round arrow, shown only when the chips overflow and
   hidden at scroll-end (mirrors the header sub-nav pattern). Mobile = touch-scroll. */
.pred-rail-arrow { display: none; }
@media (min-width: 769px){
    .pred-rail-wrap.is-scrollable .pred-rail-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        padding: 0;
        z-index: 3;
        cursor: pointer;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: var(--bg);
        color: var(--text-secondary);
        transition: color .15s ease, border-color .15s ease;
    }
    .pred-rail-wrap.is-scrollable.at-scroll-end .pred-rail-arrow { display: none; }
    .pred-rail-arrow:hover { color: var(--text); border-color: var(--accent, #315EFF); }
    /* keep the last chip clear of the arrow overlay */
    .pred-rail-wrap.is-scrollable .pred-rail { padding-inline-end: 36px; }
}
[dir="rtl"] .pred-rail-arrow svg { transform: scaleX(-1); }

/* #458 predictions breadcrumb: keep the FULL path on mobile (don't drop the root,
   which made politics="predictions > politics" vs ukraine="politics > ukraine"
   look inconsistent). One line, scrolls if it overflows. */
@media (max-width: 560px){
    .breadcrumbs-predictions ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .breadcrumbs-predictions ol::-webkit-scrollbar { display: none; }
    .breadcrumbs-predictions li { display: inline-flex !important; }
    .breadcrumbs-predictions li:not(:first-child)::before { display: inline-flex !important; }
}

/* ═══ MARKET PAGE ══════════════════════════════════ */
.market-page-header {
    padding: 24px 0;
}

.market-page-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0;
}

.market-page-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.market-page-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.market-page-meta .meta-val {
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 600;
    color: var(--text);
}

.market-page-meta .meta-poly-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 6px 12px;
    background: var(--accent, #2d9cdb);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space: nowrap;
}
.market-page-meta .meta-poly-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45,156,219,0.35);
    opacity: 0.95;
}
.market-page-meta .meta-poly-pill i {
    font-size: 11px;
}
body.training-active .market-page-meta .meta-poly-pill { display: none; }
@media (max-width: 640px) {
    .market-page-meta .meta-poly-pill span { display: none; }
    .market-page-meta .meta-poly-pill { padding: 6px 9px; }
}

/* ======= Drill-down pane (per-outcome detail view) ======= */
.drill-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
    z-index: 998;
}
.drill-backdrop.open { opacity: 1; pointer-events: auto; }
.drill-pane {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0;
    width: min(480px, 100vw);
    background: var(--bg, #13171f);
    color: var(--text, #fff);
    z-index: 999;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -12px 0 32px rgba(0,0,0,0.4);
    pointer-events: none;
    visibility: hidden;
}
.drill-pane.open { transform: translateX(0); pointer-events: auto; visibility: visible; }
[dir="rtl"] .drill-pane { transform: translateX(-100%); box-shadow: 12px 0 32px rgba(0,0,0,0.4); }
[dir="rtl"] .drill-pane.open { transform: translateX(0); }

.drill-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.drill-back, .drill-action {
    width: 36px; height: 36px;
    background: transparent; border: none;
    color: var(--text, #fff);
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer;
    font-size: 15px;
}
.drill-back:hover, .drill-action:hover { background: rgba(255,255,255,0.06); }
.drill-mini-title {
    flex: 1; font-weight: 600; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drill-header-actions { display: flex; align-items: center; gap: 4px; }

.drill-body {
    flex: 1; overflow-y: auto;
    padding: 16px 14px 100px 14px;
}

.drill-option-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.drill-option-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.drill-option-title { font-size: 18px; font-weight: 700; flex: 1; }

.drill-chance-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.drill-chance-wrap { display: flex; align-items: baseline; gap: 6px; }
.drill-chance {
    font-size: 28px; font-weight: 700; color: var(--accent, #2d9cdb);
    line-height: 1;
}
.drill-chance-label { font-size: 14px; color: var(--text-secondary, #8a9099); }
.drill-polymarket {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text, #fff);
    font-size: 12px; font-weight: 600;
    text-decoration: none;
}
.drill-polymarket:hover { background: rgba(255,255,255,0.1); }
.drill-polymarket i { font-size: 10px; opacity: .7; }

.drill-chart-wrap {
    position: relative; height: 200px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px; margin-bottom: 10px;
    overflow: hidden;
}
#drill-chart { width: 100%; height: 100%; display: block; }
.drill-chart-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(19,23,31,0.6);
}

.drill-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 16px; font-size: 12px;
    color: var(--text-secondary, #8a9099);
}
.drill-intervals { display: flex; gap: 2px; }
.drill-intervals button {
    background: transparent; border: none; color: var(--text-secondary, #8a9099);
    padding: 6px 10px; font-size: 12px; font-weight: 600;
    border-radius: 6px; cursor: pointer;
    font-family: inherit;
}
.drill-intervals button:hover { background: rgba(255,255,255,0.06); color: var(--text, #fff); }
.drill-intervals button.active { background: var(--accent, #2d9cdb); color: #fff; }

.drill-order-book {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0;
    margin-bottom: 16px;
}
.drill-order-book summary {
    list-style: none; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; font-weight: 600; font-size: 15px;
}
.drill-order-book summary::-webkit-details-marker { display: none; }
.drill-order-book[open] summary i { transform: rotate(180deg); }
.drill-order-book summary i { transition: transform .2s ease; font-size: 12px; opacity: .6; }
.drill-order-book-body {
    padding: 0 16px 14px 16px;
    font-size: 13px; color: var(--text-secondary, #8a9099);
}

.drill-rules h3 {
    font-size: 15px; font-weight: 600; margin: 0 0 8px 0;
}
.drill-rules p { font-size: 13px; line-height: 1.5; color: var(--text-secondary, #8a9099); margin: 0; }

.drill-sticky-buy {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; gap: 8px; padding: 12px 14px;
    background: var(--bg, #13171f);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    /* #949 (operator QA miss): the order-book rows/spread are position:relative/sticky with
       z-index 1-2, so they painted OVER the opaque buy bar ("buttons dirty with OB text").
       Force the bar above all order-book content. */
    z-index: 12;
}
/* #949 design-system: the sticky drill Buy Yes/No match the app's canonical solid green/red
   (same as the row buttons' active/hover fill #359A5E / #CB3131) + shared 8px radius + 700. */
.drill-buy {
    flex: 1; padding: 12px 0; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: 'Inter','Heebo',sans-serif; color: #fff;
    transition: filter .15s;
}
.drill-buy.yes { background: var(--yes); }
.drill-buy.yes:hover { filter: brightness(1.08); }
.drill-buy.no { background: var(--no); }
.drill-buy.no:hover { filter: brightness(1.08); }

body.drill-open { overflow: hidden; }

/* Desktop: inline below clicked row (≥768px) */
@media (min-width: 768px) {
    .drill-pane {
        position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
        width: min(520px, 92vw);
        max-height: 85vh;
        transform: translate(-50%, -50%) scale(0.96);
        border-radius: 6px;
        opacity: 0;
        transition: transform .2s ease, opacity .2s ease;
    }
    .drill-pane.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    [dir="rtl"] .drill-pane { transform: translate(-50%, -50%) scale(0.96); }
    [dir="rtl"] .drill-pane.open { transform: translate(-50%, -50%) scale(1); }
}

/* ======= Inline row-expand mode (Polymarket-style) ======= */
/* Overrides all the modal/slide-in positioning when pane is inserted in the row list */
.drill-pane.inline {
    position: static !important;
    width: 100% !important;
    max-height: 0;
    transform: none !important;
    opacity: 0;
    box-shadow: none !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    margin: 4px 0 8px 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
    box-sizing: border-box;
    pointer-events: none;
    visibility: hidden;
}
.drill-pane.inline.open {
    max-height: 800px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.drill-pane.inline .drill-header { display: none; }
.drill-pane.inline .drill-option-header { display: none; }
.drill-pane.inline .drill-body {
    padding: 14px 14px 14px 14px;
    overflow: visible;
}
.drill-pane.inline .drill-sticky-buy { display: none; }
.drill-pane.inline .drill-chart-wrap { height: 240px; }
[dir="rtl"] .drill-pane.inline { transform: none !important; }

/* ======= #850 Mobile drill modal — stacked chart + collapsible order-book card ======= */
/* Desktop keeps the tab UI; the mobile card chrome is hidden outside the mobile modal */
.drill-obcard-head, .drill-ob-side-tabs { display: none; }
@media (max-width: 767px) {
    /* Modal must clear the mobile bottom bars (referral bar 1002, bottom nav 1001) but stay
       UNDER the trade sheet (backdrop 1300 / sheet 1310) so Buy opens on top of it */
    .drill-pane:not(.inline) { z-index: 1150; }
    /* OPAQUE modal — beats the sport-polish `.drill-pane{background:transparent!important}`
       (that rule is for the borderless INLINE pane; the isolated modal must not see-through) */
    .drill-pane.open:not(.inline) { background: var(--bg, #15191D) !important; }
    .drill-backdrop { z-index: 1140; }
    /* One stacked page like Polymarket mobile: no Order Book/Graph tabs, both panes visible */
    .drill-pane:not(.inline) .drill-tabs { display: none; }
    .drill-pane:not(.inline) .drill-tab-pane { display: block; }
    /* Order book = bordered rounded card (design-system border), collapsed until tapped */
    .drill-pane:not(.inline) .drill-obcard {
        border: 1px solid var(--border, rgba(255,255,255,0.08));
        border-radius: 10px; margin-top: 14px; overflow: hidden;
        background: var(--bg-card, rgba(255,255,255,0.02));
    }
    .drill-pane:not(.inline) .drill-obcard-head {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        width: 100%; padding: 13px 14px; background: none; border: none;
        color: var(--text, #fff); font: inherit; font-size: 14.5px; font-weight: 700;
        cursor: pointer; text-align: start;
    }
    .drill-pane:not(.inline) .drill-obcard.open .drill-obcard-head .mdr-acc-caret { transform: rotate(225deg); }
    .drill-pane:not(.inline) .drill-obcard:not(.open) .drill-ob-side-tabs,
    .drill-pane:not(.inline) .drill-obcard:not(.open) .drill-ob { display: none; }
    /* Yes/No book side tabs inside the card (Polymarket's Trade Yes | Trade No) */
    .drill-pane:not(.inline) .drill-obcard.open .drill-ob-side-tabs {
        display: flex; gap: 0;
        border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    }
    .drill-ob-side-tabs button {
        flex: 1; background: none; border: none; border-radius: 0; padding: 10px 0;
        color: var(--text-secondary, #8a9099); font: inherit; font-size: 13.5px; font-weight: 700;
        cursor: pointer; border-bottom: 2px solid transparent;
    }
    .drill-ob-side-tabs button.active { color: var(--text, #fff); border-bottom-color: var(--accent, #2d9cdb); }
    /* Sticky buy bar clears the home-indicator on notched phones */
    .drill-pane:not(.inline) .drill-sticky-buy { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Active row marker — subtle highlight on the row that owns the open pane */
.outcome-row-item.outcome-row-active {
    background: rgba(255,255,255,0.02);
}
[dir="rtl"] .outcome-row-item.outcome-row-active { background: rgba(255,255,255,0.02); }

/* ======= Drill tabs (Order Book / Graph / Resolution) — Polymarket-style ======= */
.drill-tabs-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 0 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 14px;
}
.drill-tabs { display: flex; gap: 22px; }
.drill-tab {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    font: 600 14px/1 'Inter','Heebo',sans-serif;
    color: var(--text-muted, #6b7280); letter-spacing: -.005em;
    position: relative; padding-bottom: 6px;
    transition: color .15s ease;
}
.drill-tab:hover { color: var(--text-secondary, #aab1ba); }
.drill-tab.active { color: var(--text, #fff); font-weight: 700; }
.drill-tab.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -14px;
    height: 2px; background: var(--text, #fff); border-radius: 2px;
}

.drill-tab-pane { display: none; }
.drill-tab-pane.active { display: block; }

/* Watermark in chart area */
.drill-watermark {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 12px/1 'Inter','Heebo',sans-serif;
    color: rgba(255,255,255,0.25);
}
.drill-watermark i { font-size: 11px; }

/* Chance row tweaks for new layout */
.drill-tab-pane[data-pane="graph"] .drill-chance-row {
    border: 0; padding: 0 0 8px 0; margin: 0;
}
.drill-tab-pane[data-pane="graph"] .drill-chance {
    color: #2d9cdb; font-size: 22px; font-weight: 700; letter-spacing: -.015em;
}
.drill-tab-pane[data-pane="graph"] .drill-chance-label {
    color: #2d9cdb; font-size: 14px; font-weight: 600;
}

/* Chart Y-axis tick labels (right side) */
.drill-chart-wrap { position: relative; padding-inline-end: 0; }
.drill-chart-yaxis {
    position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: 36px;
    pointer-events: none;
}
.drill-yaxis-tick {
    position: absolute; inset-inline-end: 4px;
    font: 500 10.5px/1 'Inter','Heebo',monospace;
    color: rgba(255,255,255,0.4);
}

/* Bottom toolbar polish: vol + intervals on same row */
.drill-meta-row {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 6px;
}
.drill-vol {
    font: 600 13px/1 'Inter','Heebo',sans-serif;
    color: var(--text, #fff);
}
.drill-intervals { gap: 4px; }
.drill-intervals button {
    padding: 5px 10px; min-width: auto;
    font: 600 11.5px/1 'Inter','Heebo',sans-serif;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    border: 0; cursor: pointer;
    transition: background .15s, color .15s;
}
.drill-intervals button:hover { background: rgba(255,255,255,0.06); color: var(--text, #fff); }
.drill-intervals button.active {
    background: rgba(255,255,255,0.10);
    color: var(--text, #fff);
}

/* ======= Order book ladder ======= */
.drill-ob {
    display: flex; flex-direction: column; gap: 0;
    font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
    font-size: 12.5px;
}
.drill-ob-loading, .drill-ob-empty {
    display: flex; align-items: center; justify-content: center;
    padding: 28px 12px; color: var(--text-muted, #6b7280); font-size: 13px;
    font-family: 'Inter','Heebo',sans-serif;
}
.drill-ob-head {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
    padding: 6px 8px; font: 600 10.5px/1 'Inter','Heebo',sans-serif;
    color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* #101674: the cells below are direction:ltr (the numeral-safety rule at style.css:6949), so
   their alignment does NOT mirror - `end` on a ltr element is right in he too. The header spans
   inherited the page direction, so in he/ar col1 and col3 mirrored away from their own numbers.
   Same footing as the cells: the whole header row reads LTR, like the price chart. */
.drill-ob-head span { direction: ltr; }
.drill-ob-head span:nth-child(2),
.drill-ob-head span:nth-child(3) { text-align: end; }
.drill-ob-section { display: flex; flex-direction: column; }
.drill-ob-row {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
    padding: 5px 8px; align-items: center;
}
.drill-ob-bar {
    position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
    z-index: 0; pointer-events: none;
    opacity: .18;
}
.drill-ob-row.bid .drill-ob-bar { background: #3FB950; }
.drill-ob-row.ask .drill-ob-bar { background: #F85149; }
.drill-ob-row.bid .drill-ob-price { color: #3FB950; }
.drill-ob-row.ask .drill-ob-price { color: #F85149; }
.drill-ob-price, .drill-ob-size, .drill-ob-total {
    position: relative; z-index: 1;
    font: 500 12.5px/1 'IBM Plex Mono', monospace;
}
.drill-ob-size, .drill-ob-total { text-align: end; color: var(--text, #fff); }
.drill-ob-total { color: var(--text-muted, #aab1ba); }
.drill-ob-spread {
    text-align: center; padding: 6px 0;
    font: 600 11.5px/1 'Inter','Heebo',sans-serif;
    color: var(--text-muted, #6b7280); letter-spacing: .03em;
    background: rgba(255,255,255,0.03);
    margin: 2px 0;
}

/* Resolution tab — clean rules text */
.drill-tab-pane[data-pane="resolution"] .drill-rules { padding-top: 4px; }
.drill-tab-pane[data-pane="resolution"] .drill-rules-text {
    font-size: 13.5px; line-height: 1.55; color: var(--text-secondary, #aab1ba);
    margin: 0;
}

/* Polymarket external link pill in tabs row */
.drill-tabs-row .drill-polymarket {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(45,156,219,0.10);
    color: #2d9cdb;
    font: 600 11.5px/1 'Inter','Heebo',sans-serif;
    text-decoration: none;
    border: 1px solid rgba(45,156,219,0.20);
}
.drill-tabs-row .drill-polymarket:hover { background: rgba(45,156,219,0.18); }
.drill-tabs-row .drill-polymarket i { font-size: 10px; }

/* Hide outcome row hover effects when disabled on single-outcome events */
.outcome-row-item { cursor: default; }
.outcome-row-item[onclick] { cursor: pointer; transition: background .15s ease; }
.outcome-row-item[onclick]:hover { background: rgba(255,255,255,0.03); }

.market-header-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.market-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.market-header-cats {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    margin-bottom: 4px;
}

.market-header-cats span {
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: capitalize;
}

.market-header-cats .cat-sep {
    color: var(--text-muted);
    margin: 0 4px;
    font-size: 10px;
}

.market-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-inline-start: auto;
    align-self: center;
}

.market-header-actions button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition);
}

.market-header-actions button:hover {
    color: var(--text);
}

/* #1322 (operator) — mobile regular-market header/meta polish, RTL-correct (logical only).
   1) V-CENTER the image/title/icons row: the title's trailing margin-bottom skewed the
      flex centering (title drifted up/down vs image+icons); zero it so the row centers clean.
   2) TIDY the share/embed icon cluster: tighter square boxes + an even, slightly-larger gap.
   3) LIVE-DOT: pull it closer to the deadline text before it with a NEGATIVE logical
      inline-start margin (cuts into the flex gap); logical so it mirrors correctly in RTL.
   Scoped to .market-header-top/.market-page-meta so the shared global .live-dot
   (imw-meta embed widget) and other icon uses are untouched. */
.market-header-top .market-page-title { margin-bottom: 0; }
.market-page-meta .live-dot { margin-inline-start: -4px; }
@media (max-width: 768px) {
    .market-header-actions .mha-icons { gap: 10px; }
    .market-header-actions .mha-icons button { width: 32px; height: 32px; font-size: 14px; }
}

/* Trade Panel (Polymarket-style) */
.trade-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.trade-panel-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.trade-outcome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: border-color var(--transition);
}

.trade-outcome:hover { border-color: var(--border-light); }

.trade-outcome-info { flex: 1; }

.trade-outcome-name {
    font-size: 15px;
    font-weight: 600;
}

.trade-outcome-price {
    font-size: 32px;
    font-weight: 800;
    font-family: 'Inter', 'Heebo', sans-serif;
}

.trade-outcome-price.yes-price { color: var(--green); }
.trade-outcome-price.no-price { color: var(--red); }

.trade-btn {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}

.trade-btn.buy-yes { background: var(--yes); }
.trade-btn.buy-yes:hover { background: var(--yes-hi); }
.trade-btn.buy-no { background: var(--no); }
.trade-btn.buy-no:hover { background: var(--no-hi); }

/* ═══ PROBABILITY BAR ══════════════════════════════ */
.prob-bar {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    height: 6px;
    background: var(--bg-hover);
}

.prob-bar .yes-fill {
    background: var(--green);
    transition: width 0.4s ease;
}

.prob-bar .no-fill {
    background: var(--red);
    transition: width 0.4s ease;
}

/* ═══ CTA BUTTONS ══════════════════════════════════ */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff !important;
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
}

.cta-btn:hover { background: var(--accent-hover); }

.cta-btn-outline {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent) !important;
}

.cta-btn-outline:hover { background: var(--accent-soft); }

/* ═══ LOAD MORE (category/topic bottom) ═══ */
.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}
.load-more-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent) !important;
}

/* ═══ CATEGORY SEO REFERRAL CTA (above grid) ═══════════ */
.cat-seo-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    margin: 0 0 20px 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(255,107,53,.2);
}
.cat-seo-cta:hover {
    background: #ff7d4d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,107,53,.32);
    color: #fff !important;
}
body.training-active .cat-seo-cta { display: none; }
@media (max-width: 768px) {
    .cat-seo-cta { padding: 12px 16px; font-size: 14px; }
}

/* ═══ CTA BANNER ═══════════════════════════════════ */
.cta-banner {
    background: linear-gradient(135deg, #15244a 0%, #1d3068 100%);
    border: 1px solid color-mix(in srgb, var(--accent, #1652f0) 60%, var(--border));
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    margin: 32px 0;
    box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(22,82,240,.12);
}

.cta-banner h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.cta-banner p { color: var(--text-secondary); margin-bottom: 20px; font-size: 14px; }

.affiliate-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; display: block; }

/* ═══ ARTICLE / GUIDE PAGES ════════════════════════ */
.article-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 20px;
}

.article-container h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 12px;
}

.article-meta {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 0 28px;
    border: 1px solid var(--border);
}
.article-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg);
}

.article-body {
    font-size: 16px;
    line-height: 1.8;
}

.article-body h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 16px;
    color: var(--text);
    line-height: 1.3;
}

.article-body h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 32px 0 12px;
    line-height: 1.35;
}

.article-body p { margin-bottom: 14px; color: var(--text); }

.article-body ul, .article-body ol {
    margin: 14px 0;
    padding-inline-start: 24px;
}

.article-body li { margin-bottom: 6px; }

.article-body blockquote {
    border-inline-start: 3px solid var(--accent);
    padding: 14px 18px;
    margin: 20px 0;
    background: var(--bg-surface);
    /* #101674: flat against the accent bar, rounded on the far edge - both follow the bar. */
    border-radius: 0;
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-style: italic;
}

.article-body strong { color: var(--text); font-weight: 600; }

.article-body code {
    background: var(--bg-surface);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'Inter', 'Heebo', sans-serif;
    font-size: 13px;
}

/* ═══ GUIDE CALLOUT BOXES ═════════════════════════ */
.info-box, .warning-box, .success-box, .example-box {
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.7;
    position: relative;
}
.info-box::before, .warning-box::before, .success-box::before, .example-box::before {
    font-size: 16px;
    margin-inline-end: 8px;
}

.info-box {
    background: rgba(49,94,255,0.08);
    border-inline-start: 4px solid var(--accent);
    color: var(--text);
}
.info-box::before { content: "💡"; }

.warning-box {
    background: rgba(245,158,11,0.08);
    border-inline-start: 4px solid var(--yellow);
    color: var(--text);
}
.warning-box::before { content: "⚠️"; }

.success-box {
    background: rgba(61,180,104,0.08);
    border-inline-start: 4px solid var(--green);
    color: var(--text);
}
.success-box::before { content: "✅"; }

.example-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.example-box::before { content: "📝"; }

.info-box strong, .warning-box strong, .success-box strong, .example-box strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--text);
}

/* Guide table */
.guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
.guide-table th, .guide-table td {
    padding: 10px 14px;
    text-align: start;
    border-bottom: 1px solid var(--border);
}
.guide-table th {
    background: var(--bg-surface);
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.guide-table td { color: var(--text-secondary); }
.guide-table tr:hover td { background: var(--bg-hover); }

@media (max-width: 768px) {
    .info-box, .warning-box, .success-box, .example-box {
        padding: 14px 16px;
        font-size: 13px;
        margin: 14px 0;
    }
    .guide-table { font-size: 12px; display: block; overflow-x: auto; }
    .guide-table th, .guide-table td { padding: 8px 10px; white-space: nowrap; }
}

/* Inline market widget in articles */
.inline-market-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.imw-header { display: flex; align-items: center; gap: 12px; }
.imw-img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.imw-title { font-size: 15px; font-weight: 600; color: var(--text); }
.imw-title:hover { color: var(--accent); }
.imw-meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.imw-chart-wrap { height: 120px; position: relative; }
.imw-chart { width: 100%; height: 100%; }
.imw-binary {}
.imw-gauge { height: 6px; border-radius: 3px; background: var(--red-soft); overflow: hidden; margin-bottom: 10px; }
.imw-gauge-fill { height: 100%; border-radius: 3px; background: var(--green); }
.imw-actions { display: flex; gap: 8px; }
.imw-opt { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.imw-opt:last-child { border-bottom: none; }
.imw-opt-name { font-size: 13px; font-weight: 500; color: var(--text); }
.imw-opt-pct { font-size: 14px; font-weight: 700; font-family: 'Inter', 'Heebo', sans-serif; color: var(--accent); }
.imw-link { font-size: 12px; color: var(--accent); text-align: center; padding-top: 8px; border-top: 1px solid var(--border); }

/* ═══ FAQ ══════════════════════════════════════════ */
.faq-list { list-style: none; }

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    overflow: hidden;
}

.faq-q {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    transition: background var(--transition);
}

.faq-q:hover { background: var(--bg-hover); }
.faq-q::after { content: '+'; font-size: 18px; color: var(--text-muted); transition: transform 0.2s; }
.faq-item.open .faq-q::after { content: '\2212'; }

.faq-a {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.faq-item.open .faq-a { padding: 0 16px 14px; max-height: 500px; }

/* ═══ BREADCRUMBS — minimal: Home › Section › Page ═════════ */
.breadcrumbs {
    margin: 14px auto 18px;
    max-width: var(--max-width);
    padding: 0 24px;
}
/* All context modifiers (.breadcrumbs-article / -news) inherit the same max-width
   now that .article-layout aligns to the parent .container width. */
.breadcrumbs-article, .breadcrumbs-news { max-width: var(--max-width); }

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;                         /* uniform horizontal rhythm */
    list-style: none;
    margin: 0; padding: 0;
    font: 500 13px/1.45 var(--font-body);
    color: var(--text-muted, #7B8996);
}
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;                         /* same gap between separator and label */
    min-width: 0;
}
.breadcrumbs li:not(:first-child)::before {
    content: '\203A';                 /* › single right-pointing angle */
    color: var(--text-muted, #7B8996);
    opacity: .55;
    font-size: 14px;
    line-height: 1;
}
.breadcrumbs a {
    color: var(--text-muted, #7B8996);
    text-decoration: none;
    transition: color .15s ease;
}
.breadcrumbs a:hover { color: var(--accent, #315EFF); }
.breadcrumbs .active {
    color: var(--text, #E5E7EB);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
@media (max-width: 560px){
    .breadcrumbs { margin: 10px auto 12px; padding: 0 14px; }
    .breadcrumbs ol { font-size: 12px; gap: 6px; }
    .breadcrumbs li { gap: 6px; }
    /* hide all but last 2 levels on phone for compactness */
    .breadcrumbs li:not(:nth-last-child(-n+2)) { display: none; }
    .breadcrumbs li:nth-last-child(2)::before { display: none; }
}

/* ═══ FOOTER ═══════════════════════════════════════ */
.site-footer {
    background: transparent;
    border-top: 1px solid var(--border);
    padding: 40px 0 20px;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: 28px;
    margin-bottom: 32px;
    align-items: start;
}

.footer-brand .logo { margin-bottom: 12px; }

.footer-brand p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 260px;
}

.footer-col h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 3px 0;
    transition: color var(--transition);
}

.footer-col a:hover { color: var(--text); }

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    text-align: center;
}

.disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto 8px;
}

.copyright { font-size: 12px; color: var(--text-secondary); }

/* ═══ Footer social icons ═════════════════════════ */
.footer-social{display:flex;align-items:center;gap:8px;margin-top:14px}
.footer-social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-secondary);
  text-decoration:none;
  transition:all .2s ease;
}
.footer-social-link:hover{
  background:rgba(49,94,255,.12);
  border-color:rgba(49,94,255,.32);
  color:var(--accent);
  transform:translateY(-1px);
}
.footer-social-link svg{display:block}

/* ═══ Footer language switcher (Polymarket-style) ═══ */
.footer-langs{
  border-top:1px solid var(--border);
  padding-top:22px;margin-top:8px;margin-bottom:22px;
}
.footer-langs-title{
  font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);
  margin:0 0 12px;
}
/* All-flags row: every language is its emoji flag (still an hreflang link).
   Flex-wrap row, evenly gapped, centered — wraps gracefully on mobile. */
.footer-langs-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:center;
}
.footer-langs-list li{display:inline-flex}
.footer-lang-name{
  /* native name kept for a11y + SEO link text, but visually hidden (flag is the UI) */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.footer-lang-flag{font-size:22px;line-height:1;display:block}
.footer-lang{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:30px;border-radius:7px;padding:0;
  color:var(--text-secondary);text-decoration:none;
  border:1px solid transparent;
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.footer-lang:hover{
  transform:translateY(-2px);
  border-color:var(--border);
  background:var(--bg-hover,rgba(255,255,255,.05));
}
.footer-lang-active{
  border-color:var(--accent);
  background:rgba(49,94,255,.1);
}
@media(max-width:640px){
  .footer-langs-list{gap:7px}
  .footer-lang{width:36px;height:29px}
  .footer-lang-flag{font-size:21px}
}

/* ═══ HOW IT WORKS ═════════════════════════════════ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
}

.step-num {
    width: 40px;
    height: 40px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
}

.step-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.step-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* ═══ LOADING / EMPTY STATES ═══════════════════════ */
.loading { text-align: center; padding: 48px 0; color: var(--text-secondary); }

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-secondary); }

/* ═══ 404 PAGE ═════════════════════════════════════ */
.error-page { text-align: center; padding: 100px 20px; }
.error-page h1 { font-size: 80px; font-weight: 800; color: var(--accent); margin-bottom: 12px; }
.error-page p { font-size: 16px; color: var(--text-secondary); margin-bottom: 24px; }

/* #23: 404 v2 - recovery layout */
.error-page-v2 { text-align: start; max-width: 880px; margin: 0 auto; padding: 60px 20px 80px; }
.error-page-v2 .breadcrumb { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; }
.error-page-v2 .breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.error-page-v2 .breadcrumb a:hover { color: var(--accent); }
.error-page-v2 .breadcrumb span { margin: 0 8px; }
.error-hero { text-align: center; padding: 24px 0 36px; }
.error-hero h1 { font-size: 56px; font-weight: 800; color: var(--accent); margin-bottom: 14px; line-height: 1.1; }
.error-hero .lead { font-size: 17px; color: var(--text-secondary); max-width: 640px; margin: 0 auto; line-height: 1.55; }
.error-search { margin: 32px auto; max-width: 580px; }
.error-search form { display: flex; gap: 8px; }
.error-search input[type=search],
.error-search input[name=q] { flex: 1; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; background: var(--bg); color: var(--text-primary); }
.error-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.error-search button { padding: 14px 22px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; font-size: 16px; }
.error-search button:hover { filter: brightness(1.06); }
.error-popular,
.error-categories { margin-top: 40px; padding: 24px; background: var(--bg-elev, var(--bg)); border: 1px solid var(--border); border-radius: 10px; }
.error-popular h2,
.error-categories h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.popular-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.popular-list li a { display: block; padding: 12px 14px; border-radius: 8px; color: var(--text-primary); text-decoration: none; border: 1px solid var(--border); background: var(--bg); }
.popular-list li a:hover { border-color: var(--accent); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.cat-grid a { display: block; padding: 14px 12px; border-radius: 8px; text-align: center; color: var(--text-primary); text-decoration: none; border: 1px solid var(--border); background: var(--bg); font-weight: 500; }
.cat-grid a:hover { border-color: var(--accent); color: var(--accent); }
.error-suggest { margin: 16px 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 200, 0, 0.08); border: 1px solid rgba(255, 200, 0, 0.3); font-size: 15px; }
.error-suggest a { color: var(--accent); font-weight: 600; }
.error-footer { text-align: center; margin-top: 40px; }
.error-footer .cta-btn { display: inline-block; padding: 14px 28px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
@media (max-width: 600px) {
    .error-hero h1 { font-size: 40px; }
    .error-search form { flex-direction: column; }
    .error-search button { width: 100%; }
}

/* ═══ RESPONSIVE ═══════════════════════════════════ */
@media (max-width: 1200px) {
    .page-layout { grid-template-columns: 1fr 280px; }
    .markets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .page-layout { grid-template-columns: 1fr; }
    .page-sidebar { order: 2; }
    .featured-market { grid-template-columns: 1fr; }
    .markets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: repeat(2, 1fr); }
    .header-search { max-width: 320px; }
}

@media (max-width: 768px) {
    :root { --header-h: 52px; --subnav-h: 34px; }
    .container { padding: 0 14px; }

    /* ── Header: clean mobile layout ── */
    .header-inner { gap: 8px; }
    .header-search { display: none; }
    .header-nav { display: none; }
    .hdr-wallet { display: none; }
    .hdr-deposit { display: none; }
    .logo-text { font-size: 14px; }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: none;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-size: 18px;
    }

    /* ── Subnav: smaller text, more scroll room ── */
    .subnav a { font-size: 13px; padding: 4px 8px; }

    /* ── Page layout ── */
    .page-layout { gap: 16px; padding: 16px 0; }

    /* ── Market page header ── */
    .market-page-header { padding: 16px 0; }
    .market-page-title { font-size: 20px; }
    .market-header-icon { width: 40px; height: 40px; }
    .market-header-top { gap: 10px; }
    .market-page-meta { gap: 12px; flex-wrap: wrap; font-size: 12px; }
    .market-header-actions button { width: 30px; height: 30px; font-size: 13px; }

    /* ── Key facts: 2-col, compact ── */
    .key-facts { gap: 8px; }

    /* ── Chart: shorter ── */
    .chart-section { padding: 16px 0; }
    .chart-canvas-wrap { height: 200px; }
    .chart-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
    .chart-intervals button { padding: 6px 10px; font-size: 12px; }

    /* ── Outcome rows: mobile-friendly ── */
    .outcome-row-item { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
    .outcome-row-name { font-size: 13px; }
    .outcome-row-pct { font-size: 18px; min-width: auto; }
    .outcome-buy { min-width: auto; padding: 8px 14px; font-size: 12px; }

    /* ── Trade panel: mobile sizing ── */
    .tp { padding: 16px; border-radius: var(--radius-sm); }
    .tp-amount-input { font-size: 28px; }
    .tp-outcomes { gap: 6px; }
    .tp-outcome { padding: 10px 6px; font-size: 13px; }
    .tp-presets button { padding: 8px 4px; font-size: 12px; }
    .tp-cta { padding: 14px; font-size: 15px; }

    /* ── Market cards grid ── */
    .markets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .news-grid { grid-template-columns: 1fr; }
    .content-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; }

    /* ── Market card sizing ── */
    .mc-content { padding: 12px; }
    .mc-title { font-size: 13px; -webkit-line-clamp: 2; }
    .mc-thumb { width: 32px; height: 32px; }
    .mc-footer { font-size: 11px; }
    .mc-btn { padding: 6px 8px; font-size: 11px; }
    .mc-semi-svg { width: 60px; }
    .mc-semi-pct { font-size: 20px; }

    /* ── Article ── */
    .article-container h1 { font-size: 24px; }

    /* ── Featured section ── */
    .featured-title { font-size: 18px; }
    .featured-pct { font-size: 40px; }

    /* ── Footer: 2-col on tablet ── */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-brand { grid-column: span 2; }
    .footer-bottom { text-align: center; }
    .disclaimer { font-size: 11px; }

    /* ── Hero section ── */
    .hero-title { font-size: 18px; }
    .hero-icon { width: 36px; height: 36px; }
    .hero-split { flex-direction: column; }
    .hero-left { max-width: none; }
    .hero-chart-wrap { min-height: 120px; }

    /* ── Sidebar sections on mobile ── */
    .sidebar-section { margin-top: 8px; }

    /* ── Bottom bar compact ── */
    .dm-bar-text span { display: none; }
    .dm-bar-inner { gap: 10px; }
    .dm-bar-btn { padding: 8px 16px; font-size: 12px; }

    /* ── Training modal bottom-sheet ── */
    .dm-modal { padding: 20px; margin: 10px; }
    .tm-label { display: none; }
    .header-user-name { display: none; }
    .header-user-balance { font-size: 11px; }
    .header-user-pill { padding: 4px 10px; font-size: 12px; margin-inline-start: 6px; }
    .training-banner-inner { flex-direction: column; }
    .training-banner-content h3 { font-size: 17px; }
    .training-banner-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }

    /* ── Header: minimal ── */
    .logo-text { font-size: 13px; }
    .hdr-icon-btn { width: 32px; height: 32px; font-size: 13px; }
    .hdr-user-avatar { width: 28px; height: 28px; font-size: 12px; }

    /* ── Market cards: single column on phones ── */
    .markets-grid { grid-template-columns: minmax(0, 1fr); }
    .content-grid { grid-template-columns: 1fr; }

    /* ── Market page ── */
    .market-page-title { font-size: 18px; }
    .market-header-icon { width: 36px; height: 36px; }

    /* ── Outcome rows: stack vertically ── */
    .outcome-row-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .outcome-row-info { margin-bottom: 0; }
    .outcome-row-pct { align-self: flex-start; font-size: 20px; }
    .outcome-buy {
        width: 100%;
        text-align: center;
        /* taller button + label nudged ~5px up (top<bottom padding) */
        padding: 10px 10px 20px;
        font-size: 13px;
        min-width: auto;
    }

    /* ── Key facts: 2-col tight ── */
    .key-facts { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .fact-card { padding: 10px; }
    .fact-value { font-size: 16px; }
    .fact-label { font-size: 10px; }

    /* ── Trade panel: phone-optimized ── */
    .tp-header-title { font-size: 13px; }
    .tp-amount-input { font-size: 24px; }
    .tp-summary-value { font-size: 22px; }

    /* ── Featured ── */
    .featured-btns { flex-direction: column; }
    .outcome-buttons { flex-direction: column; }

    /* ── Footer: single column ── */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-brand { grid-column: span 1; }

    /* ── Chart ── */
    .chart-canvas-wrap { height: 160px; }
    .chart-legend { font-size: 11px; gap: 10px; }
    .chart-intervals { flex-wrap: wrap; }
}

.mobile-menu-btn { display: none; }

/* ═══ MOBILE BOTTOM NAV (Polymarket-style) ═════════ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: rgba(21,25,29,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: flex-start;
}
.mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    text-decoration: none;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.1;
}
.mob-nav-item i { font-size: 22px; line-height: 1; }
.mob-nav-item span {
    font-size: 10px;
    font-family: 'Inter','Inter Fallback',sans-serif;
}
/* Screen-reader-only labels for non-Portfolio items (icon-only UX) */
.mob-nav-item .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.mob-nav-item:hover { color: var(--text-secondary); }
.mob-nav-item.active { color: #fff; }
.mob-nav-item.active i { color: var(--accent); }
.mob-nav-port #mob-nav-port-amt {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 10px;
}

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
    /* Add bottom padding so content isn't hidden behind bottom nav */
    body { padding-bottom: 64px; }
    /* Hide the floating bottom bar when bottom nav is visible */
    .dm-bar { bottom: 60px; }
}

/* ═══ GUIDE PAGE — Prev / Next nav cards ═══ */
.guide-pn{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
    margin:48px 0 0;
}
.guide-pn-spacer{ display:block; }
.guide-pn-card{
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; border-radius:14px;
    background:var(--bg-card,#0f1218); border:1px solid var(--border,rgba(255,255,255,.08));
    text-decoration:none; color:inherit;
    transition:transform .15s ease, border-color .15s ease, background .15s ease;
    min-height:78px;
}
.guide-pn-card:hover{
    transform:translateY(-1px);
    border-color:var(--accent,#315EFF);
    background:var(--bg-hover,#161a22);
}
.guide-pn-prev{ text-align:start; }
.guide-pn-next{ text-align:end; flex-direction:row-reverse; }
.guide-pn-body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.guide-pn-label{
    font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-dim,#6B7280);
}
.guide-pn-title{
    font-size:14px; font-weight:600; line-height:1.35; color:var(--text-primary,#E6E8EB);
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.guide-pn-arrow{
    flex:0 0 36px; width:36px; height:36px; border-radius:50%;
    background:rgba(49,94,255,.10); color:var(--accent,#315EFF);
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, transform .15s ease;
}
.guide-pn-card:hover .guide-pn-arrow{ background:rgba(49,94,255,.20); }
.guide-pn-prev:hover .guide-pn-arrow{ transform:translateX(-2px); }
.guide-pn-next:hover .guide-pn-arrow{ transform:translateX(2px); }
[dir="rtl"] .guide-pn-prev .guide-pn-arrow svg{ transform:scaleX(-1); }
[dir="rtl"] .guide-pn-next .guide-pn-arrow svg{ transform:scaleX(-1); }
[dir="rtl"] .guide-pn-prev:hover .guide-pn-arrow{ transform:translateX(2px); }
[dir="rtl"] .guide-pn-next:hover .guide-pn-arrow{ transform:translateX(-2px); }
@media (max-width:560px){
    .guide-pn{ grid-template-columns:1fr; gap:10px; }
    .guide-pn-card{ min-height:64px; padding:12px 14px; }
}

/* ═══ GUIDE PAGE — Prev / Next IMAGE CARDS (lobby style) ═══ */
.gpn-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
    margin:48px 0 0;
}
.gpn{
    position:relative; display:block;
    aspect-ratio: 16 / 9;
    min-height: 160px;
    border-radius:16px; overflow:hidden;
    text-decoration:none; color:#fff;
    border:1px solid var(--border);
    background:#15191D; isolation:isolate;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
}
.gpn:hover{
    transform:translateY(-3px) scale(1.005);
    box-shadow:0 24px 50px rgba(0,0,0,.42);
    border-color:var(--border-light);
}
.gpn-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:scale(1.04);
    transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .35s;
    z-index:0;
}
.gpn:hover .gpn-img{ transform:scale(1.10); filter:brightness(.92) saturate(1.08); }
.gpn-veil{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,
        rgba(15,18,22,0) 30%,
        rgba(15,18,22,.55) 65%,
        rgba(15,18,22,.95) 100%);
}
.gpn-label{
    position:absolute; top:14px; inset-inline-start:14px; z-index:3;
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px 6px 8px; border-radius:999px;
    font:700 11px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase;
    color:#fff; background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.15);
}
.gpn-next .gpn-label{ inset-inline-start:auto; inset-inline-end:14px; padding:6px 8px 6px 12px; flex-direction:row-reverse; }
.gpn-arrow{
    width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--accent,#315EFF); color:#fff;
}
[dir="rtl"] .gpn-prev .gpn-arrow svg, [dir="rtl"] .gpn-next .gpn-arrow svg{ transform:scaleX(-1); }
.gpn-title{
    position:absolute; bottom:14px; inset-inline:14px; z-index:3;
    font:800 17px/1.32 var(--font-body); color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.6);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
@media (max-width:640px){
    .gpn-grid{ grid-template-columns:1fr; gap:10px; }
    .gpn{ aspect-ratio: 16 / 8; min-height:120px; }
    .gpn-title{ font-size:15px; }
}

/* ═══ GUIDE PAGE — Related guides v2 (image cards, smarter ordering) ═══ */
.related-guides h2{ margin-bottom:18px; }
.rg-grid{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;
}
@media (max-width:1024px){ .rg-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .rg-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } }
.rg-card{
    position:relative; display:block;
    aspect-ratio: 4 / 3;
    border-radius:14px; overflow:hidden;
    text-decoration:none; color:#fff;
    border:1px solid var(--border); background:#15191D; isolation:isolate;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
}
.rg-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.42); border-color:var(--border-light); }
.rg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform .6s; z-index:0; }
.rg-card:hover .rg-img{ transform:scale(1.10); }
.rg-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(15,18,22,0) 35%, rgba(15,18,22,.6) 70%, rgba(15,18,22,.95) 100%);
}
.rg-pill{
    position:absolute; top:10px; inset-inline-start:10px; z-index:3;
    padding:3px 9px; border-radius:999px;
    font:700 10px/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase;
    backdrop-filter:blur(8px); border:1px solid transparent;
}
.rg-pill-beginner{ background:rgba(61,180,104,.22); color:#7DD3A0; border-color:rgba(61,180,104,.4); }
.rg-pill-advanced{ background:rgba(49,94,255,.22); color:#5DB8FF; border-color:rgba(49,94,255,.4); }
.rg-pill-master  { background:rgba(168,85,247,.22); color:#C99CFF; border-color:rgba(168,85,247,.45); }
.rg-body{ position:absolute; bottom:0; inset-inline:0; z-index:2; padding:12px 14px 14px; }
.rg-title{ margin:0; font:700 14px/1.32 var(--font-body); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ═══ GUIDE PAGE — Mobile "Visit Polymarket" floating CTA ═══ */
/* HIDDEN PER OWNER REQUEST (Apr 26) — keep markup + styles intact for future re-enable */
.guide-poly-bar { display: none !important; }

body.is-guide-page .mobile-bottom-nav,
body.is-guide-page .dm-bar,
body.is-guide-page .training-banner { display: none !important; }

@media (max-width: 768px) {
    /* body.is-guide-page padding-bottom no longer needed since the floating bar is hidden */

    .guide-poly-bar {
        /* display intentionally none above; styles preserved for re-enable */
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 1002;
        padding: 12px 14px;
        background: linear-gradient(135deg, #2C9956 0%, #3DB468 100%);
        color: #fff;
        text-decoration: none;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(61,180,104,.35), 0 2px 8px rgba(0,0,0,.25);
        -webkit-tap-highlight-color: transparent;
        animation: gpb-rise .35s cubic-bezier(.2,.9,.3,1.2);
    }
    .guide-poly-bar:active { transform: scale(.985); }

    .gpb-logo {
        flex: 0 0 36px;
        width: 36px; height: 36px;
        border-radius: 10px;
        background: rgba(255,255,255,.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 17px;
        color: #fff;
        letter-spacing: .5px;
    }
    .gpb-text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        min-width: 0;
    }
    .gpb-text strong {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        letter-spacing: .1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gpb-sub {
        font-size: 11.5px;
        font-weight: 500;
        color: rgba(255,255,255,.85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gpb-arrow {
        flex: 0 0 32px;
        width: 32px; height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,.2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform .18s ease, background .18s ease;
    }
    .guide-poly-bar:hover .gpb-arrow { background: rgba(255,255,255,.3); transform: translateX(2px); }

    /* RTL: flip arrow direction */
    [dir="rtl"] .guide-poly-bar:hover .gpb-arrow { transform: translateX(-2px); }
    [dir="rtl"] .gpb-arrow svg { transform: scaleX(-1); }
}

@keyframes gpb-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══ UTILITIES ════════════════════════════════════ */
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mono { font-family: 'Inter', 'Heebo', sans-serif; }

/* ═══ NEWS ARTICLE 3-COLUMN LAYOUT ═══════════════ */
.news-article-layout {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 240px;
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px;
}

.news-article-main {
    min-width: 0;
}

.article-headline {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 12px;
}

.article-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Left Rail (TOC + Share) ── */
.news-left-rail { position: relative; }

.left-rail-sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* #100689: pin the rail so it tracks the long article instead of sitting at the top
       and leaving a dead empty column beside the lower half of the read (the "bottom gap"). */
    position: sticky;
    align-self: start;
    top: calc(var(--header-h-real, var(--header-h, 56px)) + 18px);
    max-height: calc(100vh - var(--header-h-real, var(--header-h, 56px)) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.rail-toc {
    padding: 0;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.toc-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.toc-list { list-style: none; }
.toc-list li { margin-bottom: 1px; }

.toc-list a {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 0;
    border-inline-start: 2px solid transparent;
    transition: all var(--transition);
    line-height: 1.35;
}

.toc-list a:hover { color: var(--text); }
.toc-list a.active { color: var(--accent); border-inline-start-color: var(--accent); padding-inline-start: 8px; }
.toc-list .toc-h3 { display: none; }

.rail-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.rail-share {
    padding: 0;
}

.share-btns {
    display: flex;
    gap: 6px;
}

.share-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    transition: all var(--transition);
    cursor: pointer;
}

.share-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.rail-market-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    transition: all var(--transition);
}

.rail-market-link:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.rail-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.rail-cta:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* ── Right Rail ── */
.news-right-rail { position: relative; }

.right-rail-sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* #100689: sticky so the sidebar follows the scroll — kills the empty right-column gap
       below a short sidebar on a long article, and keeps the markets/guides/training useful
       throughout the read. Internal scroll only if it outgrows the viewport. */
    position: sticky;
    align-self: start;
    top: calc(var(--header-h-real, var(--header-h, 56px)) + 18px);
    max-height: calc(100vh - var(--header-h-real, var(--header-h, 56px)) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* ── Old 2-col layout (guides still use it) ── */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 56px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
.article-layout .article-main{ max-width: 880px; }

.article-layout .article-main { min-width: 0; }
.article-layout .article-toc-wrap { position: relative; }

.article-toc {
    align-self: start;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* ═══ PRICE CHART ═════════════════════════════════ */
.chart-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 24px 0;
    margin-top: 0;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.chart-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-intervals {
    display: flex;
    gap: 4px;
}

.chart-intervals button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.chart-intervals button:hover { border-color: var(--text-muted); color: var(--text); }
.chart-intervals button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.chart-canvas-wrap {
    position: relative;
    height: 260px;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

.chart-summary {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}

.chart-summary .cs-val {
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 600;
    color: var(--text);
}

/* Chart Legend (Polymarket-style colored dots) */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.chart-legend-item strong {
    color: var(--text);
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 600;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Chart Footer (volume + intervals) */
.chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.chart-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ═══ OUTCOME ROWS (Polymarket-style) ════════════ */
.outcomes-list {
    margin-top: 24px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}

.outcome-row-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    transition: background var(--transition);
}
.outcome-row-item:last-of-type { border-bottom: 0; }
.outcome-row-item:hover { background: rgba(255,255,255,0.015); }

.outcome-row-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.outcome-row-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.outcome-row-name { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.3; letter-spacing: -.005em; }
.outcome-row-vol { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
.outcome-row-buys { display: flex; gap: 8px; flex-shrink: 0; }
.outcome-resolved { opacity: 0.5; }
.resolved-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    background: var(--green-soft); color: var(--green); font-weight: 600; margin-inline-end: 6px;
}
.outcome-hidden { display: none; }
.outcome-show-more {
    width: 100%; padding: 12px; text-align: center; font-size: 13px; font-weight: 600;
    color: var(--accent); background: var(--accent-soft); border: none; border-radius: var(--radius-sm);
    cursor: pointer; margin-top: 8px; transition: all var(--transition);
}
.outcome-show-more:hover { background: var(--accent); color: #fff; }
.outcome-closed-note {
    text-align: center; padding: 12px; font-size: 12px; color: var(--text-muted);
    border-top: 1px solid var(--border); margin-top: 4px;
}
.outcome-closed-note i { margin-inline-start: 4px; color: var(--green); }

.outcome-row-pct {
    font-size: 30px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--text);
    min-width: 80px;
    text-align: center;
    letter-spacing: -.02em;
    line-height: 1;
}

.outcome-buy {
    padding: 11px 22px;
    border-radius: 8px;   /* #949 design-system: unified buy-button radius */
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    white-space: nowrap;
    transition: all var(--transition);
    text-align: center;
    min-width: 130px;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Polymarket-style tinted Yes/No buttons. Active row gets a brighter green. */
.outcome-buy.yes {
    background: var(--yes-soft);
    color: var(--yes-text);
}
.outcome-buy.yes:hover {
    background: var(--yes);
    color: #fff;
}
.outcome-row-active .outcome-buy.yes {
    background: var(--yes);
    color: #fff;
}

.outcome-buy.no {
    background: var(--no-soft);
    color: var(--no-text);
}
.outcome-buy.no:hover {
    background: var(--no);
    color: #fff;
}
.outcome-row-active .outcome-buy.no {
    background: var(--no-soft);
    color: var(--no-text);
}

/* ═══ READING PROGRESS BAR ════════════════════════ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1100;
    pointer-events: none;
    background: transparent;
}

.reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--green));
    width: 0;
    transition: width 80ms ease;
    /* #101674: the bar grows from the inline start, so the cap rounds on the leading edge. */
    border-radius: 0;
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
}

/* ═══ LIVE PULSE DOT ══════════════════════════════ */
.live-dot {
    width: 6px;
    height: 6px;
    background: var(--green);
    border-radius: 50%;
    display: inline-block;
    margin-inline-start: 6px;
    animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34,197,94,0); } }

/* ═══ KEY FACTS PANEL ═════════════════════════════ */
.key-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: 10px;
    margin-top: 20px;
}

.fact-card {
    background: var(--bg-surface);
    border: none;
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
}

.fact-card .fact-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.fact-card .fact-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Inter', 'Heebo', sans-serif;
    color: var(--text);
}

.fact-card .fact-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ═══ MARKET NARRATIVE SECTION ════════════════════ */
.market-story {
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 24px 0;
    margin-top: 0;
}

.market-story h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-story .story-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
}

.market-story .story-content p { margin-bottom: 12px; }

/* ═══ RELATED POSTS ═══════════════════════════════ */
.related-post-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 8px;
    transition: all var(--transition);
    color: inherit;
}

.related-post-card:hover { border-color: var(--accent); background: var(--bg-card); }

.related-post-card .rp-icon {
    width: 36px;
    height: 36px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 16px;
    flex-shrink: 0;
}

.related-post-card .rp-info { flex: 1; min-width: 0; }
.related-post-card .rp-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.related-post-card .rp-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ═══ MOMENTUM INDICATOR ══════════════════════════ */
.momentum {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', 'Heebo', sans-serif;
}

.momentum.up { color: var(--green); }
.momentum.down { color: var(--red); }

/* ═══ ARTICLE BODY IMPROVEMENTS ═══════════════════ */
/* Anchor/TOC jump offset: keep targets clear of the sticky header (56px) + sticky
   category subnav (~44px). Covers every anchorable element (headings + any [id]) so
   TOC clicks, in-content links, and on-load #hash jumps all land accurately. */
.article-body :where(h2, h3, h4, [id]) { scroll-margin-top: 120px; }

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.article-body th, .article-body td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: start;
}

.article-body th {
    background: var(--bg-surface);
    font-weight: 600;
    font-size: 13px;
}

.article-body img {
    border-radius: var(--radius);
    margin: 20px 0;
}

/* ═══ RESPONSIVE: TOC & CHART ═════════════════════ */
@media (max-width: 1100px) {
    .news-article-layout { grid-template-columns: 1fr 220px; }
    .news-left-rail { display: none; }
}
@media (max-width: 768px) {
    .news-article-layout { grid-template-columns: 1fr; }
    .news-right-rail { display: none; }
    .article-headline { font-size: 22px; }
}
@media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-layout .article-toc-wrap { display: none; }
}

@media (max-width: 768px) {
    .chart-summary { flex-wrap: wrap; gap: 12px; }
    .article-price-chart { padding: 16px; }
    .article-price-chart .apc-canvas-wrap { height: 200px; }
}

/* ═══ INLINE ARTICLE CHART (AI-generated) ═════════ */
.article-price-chart {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin: 24px 0;
}

.article-price-chart .apc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.article-price-chart .apc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-price-chart .apc-title i {
    color: var(--accent);
    font-size: 12px;
}

.article-price-chart .apc-canvas-wrap {
    height: 220px;
    position: relative;
}

.article-price-chart .apc-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.article-price-chart .apc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-secondary);
}

.article-price-chart .apc-event-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-price-chart .apc-event-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.article-price-chart .apc-event-tag .dot.up { background: var(--green); }
.article-price-chart .apc-event-tag .dot.down { background: var(--red); }
.article-price-chart .apc-event-tag .dot.neutral { background: var(--accent); }

/* Post prev/next navigation */
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.post-nav-link { display:flex; flex-direction:column; padding:12px 16px; border-radius:8px; background:var(--card-bg); border:1px solid var(--border); text-decoration:none; transition:border-color 0.2s; }
.post-nav-link:hover { border-color:var(--accent); }
.post-nav-next { text-align:end; }
.post-nav-label { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.post-nav-title { font-size:14px; font-weight:600; color:var(--text-primary); }
@media (max-width:640px) { .post-nav { grid-template-columns:1fr; } }

/* ═══ PORTFOLIO/CASH HEADER DISPLAY (Polymarket-style stacked, centered) ═══ */
.hdr-wallet {
    display: flex;
    align-items: center;
    gap: 4px;                 /* PM: gap-x-1 */
    flex-shrink: 0;
    cursor: pointer;
}
.hdr-wallet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    height: 44px;             /* PM: h-11 */
    padding: 4px 10px;        /* PM: py-1 px-2.5 */
    border-radius: 7px;       /* PM: rounded-sm (~7.2px) */
    transition: background var(--transition);
}
.hdr-wallet-item:hover { background: var(--bg-hover); }   /* PM: per-block hover */
.hdr-wallet-label {
    font-size: 12px;          /* PM: text-xs */
    font-weight: 500;
    color: var(--text-secondary);   /* PM: muted, not blue */
    white-space: nowrap;
    line-height: 16px;
}
.hdr-wallet-value {
    font-size: 16px;          /* PM: text-heading-lg */
    font-weight: 600;
    color: #3DB468;           /* PM green rgb(61,180,104) */
    letter-spacing: -0.18px;
    line-height: 20px;
    font-family: var(--font-display);
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* ═══ SITEWIDE LTR ISOLATION FOR PRICES / NUMBERS / CURRENCY ═══════════════
   Forces LTR rendering for any element containing money/percent/number values
   even on RTL pages. Prevents currency symbols from being mis-positioned. */
.num, .money, .price, .pct, .ltr-num,
.tp-out-price, .tp-shares-input, .tp-sum-val, .tp-sum-mini,
.tp-stepper input, .outcome-row-pct, .outcome-buy,
.meta-val, .item-odds, .ham-row-pct,
.avm-balance-value, .mdr-wallet-value,
.chart-meta, .interval-active,
.balance-val, .pos-amount, .balance-val,
.pos-pct, .pos-pnl, .pos-shares, .pos-avg, .pos-now,
.tp-balance, .tp-cash-hint,
    .ms-row b, .tp-amount-cur, .tp-amount-input, .tp-limit-price, .tp-stepper-suffix,
    .drill-ob-price, .drill-ob-size, .drill-ob-total, .tp-sel-side {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
[dir="rtl"] .num, [dir="rtl"] .money, [dir="rtl"] .price,
[dir="rtl"] .tp-out-price, [dir="rtl"] .outcome-row-pct,
[dir="rtl"] .meta-val, [dir="rtl"] .hdr-wallet-value {
    unicode-bidi: isolate;
}
/* #105 (operator-directed, RTL market-form $/input alignment): RTL-ONLY.
   The amount-wrap is forced direction:ltr in the base (market.php inline) which mis-aligned
   the $/input on RTL pages; un-force it in RTL so the wrap flows naturally and the $ sits at
   the row END. Keep only the NUMBER inputs ltr (digits read correctly), aligned to logical start.
   LTR (default) form is untouched - every selector here is [dir="rtl"]-scoped. */
[dir="rtl"] .tp-amount-wrap { direction: rtl; }
[dir="rtl"] .tp-shares-input,
[dir="rtl"] .tp-amount-input { direction: ltr; text-align: start; }
.hdr-deposit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.hdr-deposit:hover { background: var(--green-hover); }
.hdr-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}
.hdr-icon-btn:hover { color: var(--text); border-color: var(--border-light); }
.hdr-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #7C3AED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* ═══ AVATAR DROPDOWN (Polymarket-style) ═══════════════ */
.hdr-avatar-wrap { position: relative; display: inline-flex; }
.hdr-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 260px;
    background: var(--bg-surface, #1a1d21);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
    padding: 8px;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    font-size: 14px;
}
.hdr-avatar-wrap.open .hdr-avatar-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.avm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 12px;
}
.avm-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #7C3AED 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 16px;
    flex-shrink: 0;
}
.avm-meta { min-width: 0; }
.avm-name { font-weight: 600; color: var(--text); font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avm-email { color: var(--text-muted); font-size: 12px; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avm-balance {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    margin: 0 2px 6px;
}
.avm-balance-label { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.avm-balance-value { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.avm-divider { height: 1px; background: var(--border, rgba(255,255,255,.06)); margin: 6px -8px; }
.avm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    background: none; border: none;
    width: 100%;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-align: start;
    font-family: inherit;
}
.avm-item i { width: 16px; text-align: center; font-size: 14px; opacity: .8; }
.avm-item:hover { background: rgba(255,255,255,.06); color: var(--text); }
.avm-item.avm-logout { color: #f87171; }
.avm-item.avm-logout:hover { background: rgba(248,113,113,.08); color: #fca5a5; }

/* Mobile: account menu becomes a full-width bottom sheet (slides up), so it can never
   overflow to the sides (e.g. long IT/DE labels) and feels like a native app sheet.
   CSS-only backdrop via the giant box-shadow; close-on-outside JS already handles taps. */
@media (max-width: 768px) {
    .hdr-avatar-menu {
        position: fixed;
        inset-inline: 0;
        left: 0; right: 0;
        bottom: 0; top: auto;
        width: 100%; min-width: 0; max-width: none;
        max-height: 85vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px 20px 0 0;
        border: 1px solid var(--border, rgba(255,255,255,.08));
        border-bottom: none;
        /* clear the mobile bottom nav (48px) + safe area so the Logout row is always reachable */
        padding: 6px 14px calc(64px + env(safe-area-inset-bottom, 0px));
        transform: translateY(110%);
        transition: transform .3s cubic-bezier(.2,.9,.3,1), opacity .2s ease, visibility .3s;
        box-shadow: 0 -10px 44px rgba(0,0,0,.5);   /* real clickable backdrop = .avm-backdrop (no box-shadow overlay) */
        z-index: 1310;   /* above .sheet-backdrop(1300) + bottom nav(1001), like the trade sheet */
        font-size: 15px;
    }
    .hdr-avatar-wrap.open .hdr-avatar-menu { transform: translateY(0); }
    /* dedicated backdrop just under the sheet */
    .avm-backdrop.open { display: block; z-index: 1300; }
    /* Scroll-lock the page behind the open sheet (#102297).
       MUST target <html>, not just <body>. Line ~5272 below puts overflow-x:clip on the ROOT
       on mobile, and a root with non-visible overflow stops body's overflow from propagating
       to the viewport - so body{overflow:hidden} makes the body BOX hidden and locks nothing
       (measured: the page still scrolled 0->900 behind the open sheet). This is why
       body.tp-sheet-open and body.drawer-open are also dead. The locks on this site that DO
       work - html.gwy-lock, html.pp-lock - all target the root, and so does this one.
       Mobile-only ON PURPOSE: template.php adds the class on every viewport, including for the
       desktop dropdown, which must keep scrolling. */
    html.avm-sheet-open, body.avm-sheet-open { overflow: hidden; overscroll-behavior: none; }
    /* grab handle */
    .hdr-avatar-menu::before {
        content: ''; display: block; width: 40px; height: 4px; border-radius: 999px;
        background: rgba(255,255,255,.2); margin: 6px auto 12px;
    }
    /* roomier, app-like rows; long labels WRAP instead of overflowing sideways */
    .avm-head { padding: 4px 6px 14px; }
    .avm-avatar { width: 50px; height: 50px; font-size: 20px; }
    .avm-name { font-size: 16px; }
    .avm-email { font-size: 13px; }
    .avm-item { padding: 14px 12px; font-size: 15.5px; border-radius: 12px; white-space: normal; line-height: 1.25; }
    .avm-item i { width: 24px; font-size: 17px; }
    .avm-divider { margin: 8px -14px; }
    .hdr-avatar-menu .avm-wallet { padding: 14px; }
    .hdr-avatar-menu .avm-deposit { padding: 14px; font-size: 15px; }
}
/* Mobile header helpers - element ORDER is owned by the single template.php inline rule
   (hamburger -> logo -> gap -> theme -> avatar); only non-order helpers kept here. */
@media (max-width: 768px) {
    .header-inner { flex-wrap: nowrap; }
    .logo { flex: 1 1 auto; min-width: 0; }
    .header-nav { flex: 0 0 auto; }
    .header-search { display: none; }
    .hdr-actions { flex: 0 0 auto; gap: 4px; }
    .mobile-menu-btn { flex: 0 0 auto; }
}
.hdr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ═══ TRAINING MODE MODAL — Premium Bottom Sheet ════ */
.tm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tm-overlay.active {
    opacity: 1;
    visibility: visible;
}
.tm-modal {
    background: #1A1F24;
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    padding: 0;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.tm-overlay.active .tm-modal {
    transform: scale(1) translateY(0);
}
.tm-modal-header {
    position: relative;
    padding: 30px 28px 18px;
    text-align: center;
    background:
      radial-gradient(80% 100% at 50% 0%, rgba(49,94,255,.18) 0%, rgba(124,58,237,.06) 45%, transparent 75%),
      linear-gradient(180deg, rgba(49,94,255,0.05) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}
.tm-modal-header::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg, transparent, rgba(49,94,255,.4), rgba(124,58,237,.4), transparent);
}
.tm-modal-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.tm-modal-close:hover { background: var(--border); color: var(--text); }
.tm-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #7C3AED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 32px rgba(49,94,255,0.3);
}
.tm-modal-icon svg { width: 28px; height: 28px; }
.tm-modal-title {
    font-size: 23px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -.015em;
    line-height: 1.2;
}
.tm-modal-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 340px;
    margin: 0 auto;
}
.tm-modal-body { padding: 4px 24px 22px; }
.tm-modal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.tm-stat {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%),
      var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 8px 12px;
    text-align: center;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tm-stat::before{
    content:"";
    position:absolute;inset:0 0 auto 0;height:2px;
    background:linear-gradient(90deg, transparent, currentColor, transparent);
    opacity:.55;
}
.tm-stat--cash{color:#22c55e}
.tm-stat--markets{color:#3b82f6}
.tm-stat--risk{color:#a855f7}
.tm-stat:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 6px 20px -8px rgba(0,0,0,.4);
}
.tm-stat-icon{
    width:30px;height:30px;margin:0 auto 7px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:color-mix(in srgb, currentColor 14%, transparent);
    color:currentColor;
    font-size:13px;
}
.tm-stat-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    letter-spacing:-.01em;
    line-height:1.1;
}
.tm-stat-label {
    font-size: 12.5px;
    color: var(--text);
    opacity:.78;
    margin-top: 5px;
    font-weight: 600;
    letter-spacing:.01em;
    line-height:1.25;
}
.tm-modal-cta {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, #5B6CF0 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(49,94,255,0.3);
}
.tm-modal-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(49,94,255,0.4);
}
.tm-modal-login {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.tm-modal-login a {
    color: var(--accent);
    font-weight: 600;
}
/* Unified header training modal: [Log in] + [Start Training] side-by-side */
.tm-modal-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;width:100%}
.tm-modal-actions .tm-modal-cta{width:100%;padding:13px 14px;font-size:14.5px;gap:7px}
.tm-modal-cta-login{
  background:rgba(255,255,255,.05) !important;
  color:#e6edf3 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
.tm-modal-cta-login:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.22) !important;
  transform:translateY(-1px);
}
.tm-modal-learn{
  display:block;text-align:center;margin-top:14px;
  font-size:13px;font-weight:600;color:var(--text-secondary);
  text-decoration:none;letter-spacing:.01em;
  transition:color .2s;
}
.tm-modal-learn:hover{color:var(--accent)}
.tm-modal-learn span{display:inline-block;transition:transform .2s;margin-inline-start:4px}
.tm-modal-learn:hover span{transform:translateX(3px)}
[dir=rtl] .tm-modal-learn:hover span{transform:translateX(-3px)}
@media(max-width:480px){
  .tm-modal-actions{grid-template-columns:1fr;gap:8px}
  .tm-modal-actions .tm-modal-cta{padding:12px}
}
.tm-modal-footer {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
}
.tm-feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    opacity:.85;
}
.tm-feature i {
    color: #22c55e;
    font-size: 10px;
    width:16px;height:16px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(34,197,94,.14);
}

/* Mobile bottom-sheet variant */
@media (max-width: 768px) {
    .tm-overlay {
        align-items: flex-end;
    }
    .tm-modal {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 90vh;
        overflow-y: auto;
        transform: translateY(100%);
    }
    .tm-overlay.active .tm-modal {
        transform: translateY(0);
    }
    .tm-modal-header::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-light);
        border-radius: 2px;
        margin: 0 auto 16px;
    }
    .tm-modal-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .tm-stat { padding: 12px 6px 10px; border-radius: 12px; }
    .tm-stat-icon { width: 26px; height: 26px; font-size: 12px; margin-bottom: 5px; }
    .tm-stat-value { font-size: 17px; }
    .tm-stat-label { font-size: 11.5px; margin-top: 3px; }
    .tm-modal-title { font-size: 20px; }
    .tm-modal-desc { font-size: 13.5px; }
    .tm-modal-footer { gap: 6px 10px; padding: 12px 14px 16px; }
    .tm-feature { font-size: 11.5px; }
}

/* ═══ MOBILE OVERRIDES (must come AFTER all base rules) ═══ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    /* Sidebar flows below main content, not hidden */
    .page-sidebar {
        order: 2 !important;
        display: flex !important;
    }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
    /* Header: compact, only logo + menu btn */
    .hdr-wallet { display: none !important; }
    .hdr-deposit { display: none !important; }
    .header-search { display: none !important; }
    .header-nav { display: none !important; }
    .mobile-menu-btn { display: flex !important; }
    .mobile-bottom-nav { display: flex !important; }
    /* training-mode toggle is too wide for the compact mobile header — it lives in the
       drawer (.mdr-ctrl .mdr-tm) on mobile instead (owner 2026-06-13) */
    #header-auth .tm-toggle, .header-nav .tm-toggle, .hdr-actions .tm-toggle { display: none !important; }
    .hdr-actions { gap: 4px; }
    .hdr-icon-btn { width: 34px; height: 34px; font-size: 14px; }
    .hdr-user-avatar { width: 30px; height: 30px; font-size: 12px; }

    /* Container: tighter padding */
    .container { padding: 0 14px; }
    body { padding-bottom: 60px; }

    /* Page layout: single column, less gap */
    .page-layout { gap: 12px; padding: 12px 0; }

    /* Market page header: compact */
    .market-page-header { padding: 14px 0; }
    .market-page-title { font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
    .market-header-icon { width: 36px; height: 36px; }
    .market-header-top { gap: 10px; flex-wrap: nowrap; }
    .market-header-actions button { width: 36px; height: 36px; font-size: 15px; }
    .market-page-meta { gap: 10px; flex-wrap: wrap; font-size: 11px; }

    /* Key facts: 2-col, compact */
    .key-facts { gap: 6px; margin-top: 14px; }
    .fact-card { padding: 10px; }
    .fact-card .fact-value { font-size: 16px; }
    .fact-card .fact-label { font-size: 10px; }

    /* Chart: shorter, responsive */
    .chart-section { padding: 14px 0; }
    .chart-canvas-wrap { height: 180px; }
    .chart-footer { flex-direction: column; gap: 8px; align-items: stretch; }
    .chart-intervals { flex-wrap: wrap; gap: 4px; }
    .chart-intervals button { padding: 6px 10px; font-size: 11px; min-height: 32px; }
    .chart-meta { font-size: 11px; flex-wrap: wrap; }
    .chart-legend { max-height: 60px; overflow-y: auto; font-size: 11px; gap: 6px; }
    .chart-summary { flex-wrap: wrap; gap: 10px; font-size: 11px; }

    /* Outcome rows: touch-friendly */
    .outcome-row-item {
        padding: 12px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .outcome-row-info { gap: 8px; }
    .outcome-row-img { width: 32px; height: 32px; }
    .outcome-row-name { font-size: 13px; }
    .outcome-row-vol { font-size: 10px; }
    .outcome-row-pct { font-size: 18px; min-width: 40px; }
    .outcome-buy {
        min-width: auto;
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 16px;
        min-height: 36px;
    }

    /* Trade panel: full-width on mobile */
    .tp {
        padding: 16px;
        border-radius: var(--radius);
    }
    .tp-header-icon { width: 32px; height: 32px; }
    .tp-header-title { font-size: 13px; }
    .tp-tabs { margin-bottom: 12px; }
    .tp-tab { font-size: 14px; }
    .tp-outcomes { gap: 6px; }
    .tp-outcome { padding: 10px 6px; font-size: 13px; min-height: 44px; }
    .tp-amount-input { font-size: 28px; }
    .tp-presets button { padding: 8px 4px; font-size: 12px; min-height: 36px; }
    .tp-summary-value { font-size: 22px; }
    .tp-cta { padding: 14px; font-size: 15px; min-height: 48px; }
    .tp-affiliate-btn { padding: 14px; font-size: 14px; min-height: 48px; }
    .tp-training-btn { padding: 12px; font-size: 13px; min-height: 44px; }

    /* Market story sections */
    .market-story { padding: 16px 0; }
    .market-story h2 { font-size: 16px; }
    .market-story .story-content { font-size: 14px; line-height: 1.8; }

    /* Market cards: 2-col on tablet-phone */
    .markets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mc-content { padding: 10px; }
    .mc-title { font-size: 12px; }
    .mc-thumb { width: 28px; height: 28px; }
    .mc-btn { padding: 6px 4px; font-size: 11px; }
    .mc-semi { width: 48px; }
    .mc-semi-svg { width: 48px; }
    .mc-semi-pct { font-size: 12px; bottom: 14px; } /* #32: seat % on the half-circle bottom line (was 16px = floated 2px above it); matches desktop baseline */

    /* Featured / Hero */
    .featured-title { font-size: 16px; }
    .featured-pct { font-size: 36px; }
    .featured-btns { flex-direction: column; }
    .hero-split { flex-direction: column; }
    .hero-left { max-width: none; }
    .hero-title { font-size: 16px; }
    .hero-icon { width: 32px; height: 32px; }
    .hero-chart-wrap { min-height: 100px; }

    /* Content grid */
    .content-grid { grid-template-columns: 1fr; gap: 10px; }
    .content-card { padding: 14px; }
    .content-card h3 { font-size: 14px; }

    /* Subnav: scrollable categories */
    .subnav-inner { gap: 0; padding: 0 4px; }
    .subnav a { font-size: 12px; padding: 6px 10px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-brand { grid-column: span 2; }
    .disclaimer { font-size: 11px; }

    /* News article */
    .news-article-layout { grid-template-columns: 1fr; padding: 16px 14px; gap: 16px; }
    .news-left-rail { display: none; }
    .news-right-rail { display: none; }
    .article-headline { font-size: 20px; }

    /* Bottom bar offset */
    .dm-bar { bottom: 60px; }
    .dm-bar-text span { display: none; }
    .dm-bar-inner { gap: 8px; }
    .dm-bar-btn { padding: 8px 14px; font-size: 12px; }

    /* Training modal: bottom-sheet */
    .dm-modal { padding: 16px; margin: 8px; }
    .tm-label { display: none; }
    .header-user-name { display: none; }
    .header-user-balance { font-size: 11px; }
    .training-banner-inner { flex-direction: column; }
    .training-banner-btn { width: 100%; justify-content: center; }

    /* Section headers */
    .section-title { font-size: 16px; }
    .section-header { margin-bottom: 10px; }

    /* Breadcrumbs */
    .breadcrumb { font-size: 11px; padding: 8px 0; }
    .breadcrumb a { padding: 2px 4px; }
}

/* ── Small phone (≤480px) ── */
@media (max-width: 480px) {
    .container { padding: 0 10px; }

    /* Market cards: single column */
    .markets-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
    .markets-grid { grid-auto-rows: auto !important; }   /* mobile: cards size to content, no stretched gap */
    .content-grid { grid-template-columns: 1fr !important; }

    /* Outcome rows: fully stacked */
    .outcome-row-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
        padding: 14px 12px;
    }
    .outcome-row-info { margin-bottom: 0; }
    .outcome-row-pct { align-self: flex-start; font-size: 20px; }
    .outcome-buy {
        width: 100%;
        text-align: center;
        padding: 10px;
        font-size: 13px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Market page header */
    .market-page-title { font-size: 16px; }
    .market-header-icon { width: 32px; height: 32px; }

    /* Key facts: 2-col tight */
    .key-facts { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .fact-card { padding: 8px; }
    .fact-card .fact-value { font-size: 14px; }

    /* Trade panel */
    .tp-amount-input { font-size: 24px; }
    .tp-summary-value { font-size: 20px; }

    /* Chart */
    .chart-canvas-wrap { height: 150px; }
    .chart-legend { font-size: 10px; gap: 4px; }

    /* Footer: single column */
    .footer-grid { grid-template-columns: 1fr; gap: 16px; }
    .footer-brand { grid-column: span 1; }

    /* Logo */
    .logo-text { font-size: 13px; }

    /* Featured */
    .featured-pct { font-size: 32px; }
    .outcome-buttons { flex-direction: column; }

    /* Hero */
    .hero-chart-wrap { min-height: 80px; }
    .hero-options { font-size: 12px; }
    .hero-opt { padding: 6px 0; gap: 6px; }
}

/* Tabular numbers — consistent alignment for prices/balances/PnL */
.mono,
.pf-card-value, .pf-avail-val, .pf-side-badge, .pf-price-cell, .pf-value-cell, .pf-value-pos, .pf-value-neg,
.mc-btn-price, .mc-vol,
.imw-opt-pct, .hero-opt-pct, .hero-opt-bid, .hero-opt-ask,
.tp-amount-input, .tp-to-win, .tp-to-win-val,
[class*="-price"], [class*="-pnl"], [class*="-value"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "cv11" 1;
}

/* Trade panel — order type toggle (Market / Limit) */
.tp-ordertype{display:flex;gap:4px;background:var(--bg-card,#1A1D22);border:1px solid var(--border,#2a2f36);border-radius:8px;padding:3px;margin:10px 0 14px}
.tp-ot{flex:1;padding:7px 10px;background:transparent;border:none;color:var(--text-secondary,#8b97a4);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border-radius:6px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.tp-ot:hover{color:var(--text,#fff)}
.tp-ot.active{background:var(--bg-hover,#262C34);color:var(--text,#fff);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.tp-ot i{font-size:11px;opacity:.75}

/* Live price indicator */
.tp-live-ind{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--text-muted,#6b7380);text-transform:uppercase;letter-spacing:.5px;padding:0 8px}
.tp-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green,#3db468);box-shadow:0 0 0 0 rgba(61,180,104,.7);animation:tp-live-pulse 2s infinite}
.tp-live-ind.stale .tp-live-dot{background:var(--text-muted,#6b7380);animation:none}
@keyframes tp-live-pulse{
    0%{box-shadow:0 0 0 0 rgba(61,180,104,.7)}
    70%{box-shadow:0 0 0 6px rgba(61,180,104,0)}
    100%{box-shadow:0 0 0 0 rgba(61,180,104,0)}
}

/* Limit price input section */
.tp-limit-section{margin:0 0 12px;padding:10px 12px;background:var(--bg-card,#1A1D22);border:1px solid var(--border,#2a2f36);border-radius:8px}
.tp-limit-label{display:block;font-size:11px;color:var(--text-muted,#6b7380);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.tp-limit-section .tp-amount-input{width:100%;padding:8px 12px;background:var(--bg-input,#13161B);border:1px solid var(--border,#2a2f36);border-radius:6px;color:var(--text,#fff);font-size:15px;font-weight:700;font-family:'Inter','Heebo',sans-serif;text-align:center;outline:none;font-variant-numeric:tabular-nums}
.tp-limit-section .tp-amount-input:focus{border-color:var(--accent,#2d9cdb)}
.tp-limit-hint{font-size:11px;color:var(--text-muted,#6b7380);margin-top:4px;text-align:center}

/* ═════════════════════════════════════════════════════════════
   Inter Fallback — Polymarket-matched font stack
   Uses local system font with size-adjust to match Inter metrics
   ═════════════════════════════════════════════════════════════ */
@font-face{
    font-family:'Inter Fallback';
    src:local('Arial');
    size-adjust:107%;
    ascent-override:90%;
    descent-override:22%;
    line-gap-override:0%;
}

/* Global base: Inter for English, Heebo primary for Hebrew with Inter fallback */
body{font-family:'Inter','Inter Fallback','Heebo',sans-serif}
body.lang-he,body[dir="rtl"]{font-family:'Heebo','Inter','Inter Fallback',sans-serif}
/* Numbers/amounts always use Inter stack — matches Polymarket */
.mono,[class*="-price"],[class*="-pnl"],[class*="-value"],
.pf-card-value,.pf-avail-val,.pf-side-badge,.pf-price-cell,.pf-value-cell,.pf-value-pos,.pf-value-neg,
.mc-btn-price,.mc-vol,.tp-amount-input,.tp-to-win,.tp-to-win-val,
.hdr-wallet-value,.imw-opt-pct,.hero-opt-pct{
    font-family:'Inter','Inter Fallback',sans-serif !important;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1,"cv11" 1;
}

/* ═════════════════════════════════════════════════════════════
   Mobile header polish — RTL spacing, flag dedup
   ═════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    /* Flag BEFORE sitename — show, and make it the first visual item in .logo */
    .logo-flag{display:inline-flex;order:0}
    .logo-flag img{width:20px;border-radius:3px}
    .logo-text{order:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .header-inner{gap:6px;padding:0;border:none}
    .site-header{border:none;box-shadow:none}
    .logo{gap:6px;min-width:0;flex:1;display:inline-flex;flex-direction:row;align-items:center}
    [dir="rtl"] .header-inner{flex-direction:row}
    .lang-switcher{margin-inline:4px}
    .lang-switcher .lang-current{padding:6px 8px;font-size:12px;gap:4px;border-radius:6px}
    .hdr-icon-btn,.mobile-menu-btn{width:36px;height:36px;flex-shrink:0;border-radius:6px;border:none}
    .mobile-menu-btn{margin-inline-start:2px;background:none}
    /* Subnav stays visible on mobile too — categories/news/guides scroll horizontally */
    .subnav{display:block}
    /* Make room in RTL — swap order so hamburger is on trailing edge */
    [dir="rtl"] .mobile-menu-btn{order:10}
    [dir="rtl"] .lang-switcher{order:8}
    [dir="rtl"] .hdr-actions{order:7}
    [dir="rtl"] .logo{order:1}
}
/* ═══ Global 6px button radius (mobile + desktop), no border on notif icon ═══ */
button,.btn,.hdr-icon-btn,.hdr-deposit,.mobile-menu-btn,.subnav-arrow{border-radius:6px}
.hdr-icon-btn{border:none}
.subnav{border-bottom:1px solid var(--border)}

/* ═══ Polymarket-style button polish — square corners + subtle shadow ═══ */
.hdr-poly-cta,.hdr-deposit,.tm-toggle{
    border-radius:6px !important;
    box-shadow:0 1px 2px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.04) inset;
}
.hdr-poly-cta:hover,.hdr-deposit:hover,.tm-toggle:hover{
    box-shadow:0 2px 6px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.06) inset;
}
.hdr-poly-cta:active,.hdr-deposit:active,.tm-toggle:active{
    box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}

/* ═══ Hide leftover desktop auth pair (now in mobile drawer only) ═══ */
.hdr-auth-pair{display:none !important}

/* ═══ Mobile drawer auth pair (login + signup buttons) ═══ */
.mdr-auth-pair{
    display:flex;gap:8px;
    padding:14px 16px 8px;
    border-top:1px solid var(--border);
    margin-top:8px;
}
.mdr-auth-btn{
    flex:1;padding:11px 14px;
    border-radius:6px;border:none;
    font-size:14px;font-weight:700;font-family:inherit;
    cursor:pointer;text-align:center;
    transition:transform .08s ease,box-shadow .15s ease,background .15s ease;
    box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.mdr-auth-login{
    background:var(--bg-card);color:var(--text);
    border:1px solid var(--border);
}
.mdr-auth-login:hover{background:var(--bg-card-hover,var(--bg-card));border-color:var(--text-muted)}
.mdr-auth-signup{
    background:var(--accent);color:#fff;
}
.mdr-auth-signup:hover{background:var(--accent-hover,var(--accent));filter:brightness(1.05)}
.mdr-auth-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}

/* ═════════════════════════════════════════════════════════════
   Mobile drawer — full-height slide-in with all nav
   ═════════════════════════════════════════════════════════════ */
#mobile-drawer{
    position:fixed;top:0;bottom:0;inset-inline-end:0;
    width:min(88vw,340px);
    background:var(--bg-surface,#15191D);
    z-index:1000;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-8px 0 32px rgba(0,0,0,.5);
    display:flex;flex-direction:column;
    border-inline-start:1px solid var(--border);
}
[dir="rtl"] #mobile-drawer{transform:translateX(-100%)}
#mobile-drawer.open{transform:translateX(0)}
#mobile-drawer-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:999;opacity:0;pointer-events:none;
    transition:opacity .28s;
    backdrop-filter:blur(3px);
}
#mobile-drawer-backdrop.open{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden}

.mdr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.mdr-head-brand{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.mdr-close{background:none;border:none;color:var(--text-secondary);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px}
.mdr-close:hover{background:var(--bg-hover);color:var(--text)}
.mdr-wallet{display:flex;gap:10px;padding:14px 18px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.mdr-wallet-item{flex:1}
.mdr-wallet-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.mdr-wallet-value{font-size:18px;font-weight:800;color:var(--text);margin-top:2px;font-variant-numeric:tabular-nums;font-family:'Inter','Inter Fallback',sans-serif}
.mdr-deposit{margin:14px 18px;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer}
.mdr-section{padding:8px 0;border-bottom:1px solid var(--border)}
.mdr-section-label{padding:8px 18px 4px;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.mdr-link{display:flex;align-items:center;gap:12px;padding:12px 18px;color:var(--text);text-decoration:none;font-size:15px;font-weight:500;transition:background .12s}
.mdr-link i{width:20px;text-align:center;color:var(--text-secondary);font-size:14px}
.mdr-link:hover,.mdr-link:active{background:var(--bg-hover)}
.mdr-link.active{color:var(--accent)}
.mdr-link.active i{color:var(--accent)}
.mdr-lang{padding:12px 18px;border-bottom:1px solid var(--border)}
.mdr-lang-title{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:8px}
.mdr-lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mdr-lang-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text);text-decoration:none;font-size:12px;font-weight:600;justify-content:center}
.mdr-lang-btn.active{background:var(--accent-soft,rgba(45,156,219,.12));color:var(--accent);border-color:var(--accent)}
.mdr-foot{padding:12px 18px;color:var(--text-muted);font-size:11px;text-align:center;margin-top:auto}

/* ═════════════════════════════════════════════════════════════
   Bottom sheet — trade panel on mobile
   ═════════════════════════════════════════════════════════════ */
.sheet-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:1200;opacity:0;pointer-events:none;
    transition:opacity .25s;
    backdrop-filter:blur(2px);
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.avm-backdrop{display:none}   /* avatar sheet backdrop: mobile only (desktop menu is a dropdown) */

@media(max-width:768px){
    /* Trade panel as bottom sheet — sits above mobile bottom nav (z:1001) */
    .tp{
        position:fixed;left:0;right:0;bottom:0;
        /* #949 (operator): market form uses the FULL viewport height (was clipped at 85vh).
           dvh so the mobile URL bar doesn't clip it. */
        max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
        background:var(--bg-surface,#1E2428);
        border-top:1px solid var(--border);
        border-radius:18px 18px 0 0;
        box-shadow:0 -8px 32px rgba(0,0,0,.5);
        transform:translateY(100%);
        transition:transform .3s cubic-bezier(.32,.72,0,1);
        z-index:1210;
        padding:8px 18px 28px;
        margin:0 !important;
    }
    .tp.sheet-open{transform:translateY(0)}
    .tp::before{
        content:'';display:block;width:40px;height:4px;
        background:var(--border-light,#3a3f46);border-radius:2px;
        margin:6px auto 12px;
    }
    .tp-mobile-close{
        position:absolute;top:12px;inset-inline-end:14px;
        background:none;border:none;color:var(--text-secondary);
        font-size:20px;cursor:pointer;padding:4px 10px;
        border-radius:6px;display:flex !important;
    }
    .tp-mobile-close:hover{background:var(--bg-hover)}
    /* Sticky CTA above bottom sheet — tap to open */
    /* Sits ABOVE the site-wide mobile bottom nav (z-index 1001) */
    .tp-cta-bar{
        display:flex;position:fixed;left:0;right:0;
        bottom:calc(64px + env(safe-area-inset-bottom));
        z-index:1050;background:var(--bg-surface);
        border-top:1px solid var(--border);
        box-shadow:0 -8px 24px rgba(0,0,0,.35);
        padding:10px 14px;
        gap:10px;
    }
    .tp-cta-bar button{
        flex:1;padding:13px;border:none;border-radius:8px;   /* #949 design-system: unified 8px + 700 */
        font-size:15px;font-weight:700;cursor:pointer;
        font-family:'Inter','Heebo',sans-serif;
        /* #534: never break to two lines - long outcome names ellipsize */
        min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .tp-cta-bar .cta-yes{background:var(--yes);color:#fff}   /* #1319: PM-matched solid green/red */
    .tp-cta-bar .cta-no{background:var(--no);color:#fff}
    body.tp-sheet-open{overflow:hidden}
    body.tp-sheet-open .mobile-bottom-nav{display:none !important}
    body.tp-sheet-open .tp-cta-bar{display:none !important}
    /* Subnav: base CSS already handles horizontal scroll + pill styling for all sizes */
}
.tp-mobile-close{display:none}
.tp-cta-bar{display:none}

/* ═════════════════════════════════════════════════════════════
   Global mobile overflow guard — catch every stray wide child
   ═════════════════════════════════════════════════════════════ */
html, body { max-width: 100vw; }
@media (max-width: 768px){
    html, body { overflow-x: hidden; overflow-x: clip; }
    body > * { max-width: 100vw; }
    /* Common wide offenders */
    img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
    pre, code, textarea { max-width: 100%; overflow-x: auto; word-break: break-word; }
    table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Force flex children to shrink */
    .container, .page-layout, .market-main, .page-main, .featured-market, .hero-content,
    .hero-split, .hero-left, .hero-right, .market-page-header, .chart-section,
    .outcome-row-item, .outcome-row-info, .tp-affiliate, .featured-slide {
        min-width: 0;
    }
    /* Long titles shouldn't push layout */
    .market-page-title, .hero-title, .card-title, .outcome-row-name,
    .mc-name, .market-card-name, .mt-title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Prevent horizontal scroll on known carousels/rails from bleeding past viewport */
    .carousel-track, .markets-grid, .featured-slides, .chart-intervals,
    .subnav-inner, .outcomes-list, .content-grid {
        max-width: 100%;
    }
    /* Fix flex rows that use gap > viewport */
    .header-inner, .mdr-head, .mdr-wallet, .mdr-section { max-width: 100%; }
    /* Anything fixed should respect viewport */
    .dm-bar, .tp-cta-bar, .mobile-bottom-nav, #mobile-drawer { max-width: 100vw; }
    /* Prevent body horizontal scroll bounce from sheets */
    body.tp-sheet-open, body.drawer-open { overflow: hidden; }
}

/* ═════════════════════════════════════════════════════════════
   Hero chart legend
   ═════════════════════════════════════════════════════════════ */
.hero-chart-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:10px;min-height:18px}
.hcl-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary,#9ca3af);font-family:'Inter','Inter Fallback',sans-serif}
.hcl-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.hcl-item b{color:var(--text-primary,#e6edf3);font-weight:700;font-variant-numeric:tabular-nums}
.hero-chart-wrap{position:relative;height:180px;width:100%}
.hero-chart-wrap canvas{max-width:100%;height:100% !important}
@media(max-width:768px){
    .hero-chart-wrap{height:140px}
    .hcl-item{font-size:11px}
}

/* ═════════════════════════════════════════════════════════════
   Portfolio mobile — cards replace table
   ═════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    .pf-root{padding:16px 12px 80px !important}
    .pf-top{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
    .pf-card{padding:16px}
    .pf-card-value{font-size:28px !important}
    .pf-avail-val{font-size:16px !important}
    .pf-btns{gap:8px}
    .pf-btn{padding:10px 8px;font-size:13px}
    .pf-tabs{gap:0;overflow-x:auto;white-space:nowrap}
    .pf-tab{flex-shrink:0;padding:10px 14px;font-size:13px}
    .pf-toolbar{gap:6px;flex-wrap:wrap}
    .pf-search{padding:8px 12px 8px 32px;font-size:13px}
    .pf-tool-btn{padding:7px 10px;font-size:12px}

    /* Transform table rows into cards */
    .pf-table,.pf-table tbody,.pf-table tr,.pf-table td{display:block;width:100%}
    .pf-table thead{display:none}
    .pf-table tr{
        background:var(--bg-card);border:1px solid var(--border);
        border-radius:12px;padding:12px;margin-bottom:10px;
        display:grid;grid-template-columns:1fr auto;gap:8px 12px;
    }
    .pf-table tr:hover td{background:transparent}
    .pf-table td{padding:0;border:none;font-size:13px}
    .pf-table td.pf-td-market{grid-column:1 / -1;border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:4px}
    .pf-table td::before{
        content:attr(data-label);
        display:block;
        font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;
        font-weight:700;margin-bottom:2px;
    }
    .pf-table td.pf-td-market::before{display:none}
    .pf-table td.pf-td-action{grid-column:1 / -1;padding-top:8px;border-top:1px solid var(--border);margin-top:4px}
    .pf-table td.pf-td-action::before{display:none}
    .pf-sell-btn{width:100%;padding:10px;font-size:14px}
    .pf-market-icon{width:40px;height:40px}
    .pf-market-title{font-size:14px;-webkit-line-clamp:2}
    /* Strip inner pill/cell bgs on mobile — they double up against the row card.
       NOTE: .pf-side-badge intentionally KEEPS its desktop bg/padding/radius (operator: the colored
       Yes/No tag must stay tidy like desktop on mobile) — do not re-add a strip for it here. */
    .pf-pnl-pill,.pf-pnl-pill.pos,.pf-pnl-pill.neg{background:transparent!important;padding:0;border-radius:0}
    .pf-status-pill,.pf-status-pill.open,.pf-status-pill.closed,.pf-status-pill.resolved{background:transparent!important;padding:0;border-radius:0}
}

/* ═════════════════════════════════════════════════════════════
   v8.9 — Market page polish: back button, unified mobile padding,
   option card flex-row layout with 50/50 buttons, hide visual
   breadcrumbs (schema kept in JSON-LD)
   ═════════════════════════════════════════════════════════════ */

/* Hide any legacy visual breadcrumb blocks — schema.org JSON-LD is kept */
.market-main .breadcrumbs,
.page-main > .breadcrumbs,
.page-main .breadcrumb,
.market-page-header + .breadcrumbs { display: none !important; }

/* Return button row (replaces visual breadcrumbs on market pages) */
.market-back-row { margin: 10px 0 6px; }
.market-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: all var(--transition);
}
.market-back-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-light); }
.market-back-btn svg { flex-shrink: 0; }
[dir="rtl"] .market-back-btn svg { transform: scaleX(-1); }

/* ── Option cards: FLEX ROWS layout (NOT column stack) ── */
/* Even on mobile, keep horizontal flex — name left, % right, buttons below in 50/50 row */
@media (max-width: 768px) {
    .outcome-row-item {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info  pct"
            "btns  btns";
        row-gap: 10px; column-gap: 10px;
        padding: 12px 14px !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: start !important;
    }
    .outcome-row-info {
        grid-area: info;
        display: flex; align-items: center; gap: 10px;
        min-width: 0;
    }
    .outcome-row-img { width: 34px !important; height: 34px !important; }
    .outcome-row-name {
        font-size: 14px !important;
        font-weight: 700;
        line-height: 1.3;
    }
    .outcome-row-vol {
        font-size: 11px !important;
        color: var(--text-muted);
        margin-top: 2px;
    }
    /* Chance: 2× bigger, right-aligned, prominent */
    .outcome-row-pct {
        grid-area: pct;
        font-size: 28px !important;
        font-weight: 800;
        min-width: auto !important;
        align-self: center;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
        font-family: 'Inter','Inter Fallback','Heebo',sans-serif;
    }
    /* Buy YES / BUY NO row — 50/50 split, full width */
    .outcome-buy {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 10px 8px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        min-height: 40px;
        min-width: 0 !important;
        width: 100% !important;
    }
    .outcome-buy.yes { grid-area: btns; }
    .outcome-buy.no  { grid-area: btns; }
    /* Create the 2-col button row by giving them the same area but side-by-side via wrapping */
    .outcome-row-item > .outcome-buy.yes,
    .outcome-row-item > .outcome-buy.no {
        grid-column: auto;
    }
    /* Switch to a clean 2-column row for the buttons */
    .outcome-row-item {
        grid-template-columns: 1fr auto !important;
    }
    .outcome-buy.yes { grid-area: btns; justify-self: stretch; }
    .outcome-buy.no  { grid-area: btns; justify-self: stretch; }
    /* Use a nested flex wrapper trick — since markup places two buttons after pct,
       restack them in a 2-col grid spanning full width */
    .outcome-row-item {
        grid-template-areas:
            "info info"
            "pct  pct"
            "btny btnn" !important;
    }
    .outcome-row-info { grid-area: info; }
    .outcome-row-pct {
        grid-area: pct;
        justify-self: start;
        font-size: 30px !important;
        margin-top: 4px;
    }
    .outcome-buy.yes { grid-area: btny; }
    .outcome-buy.no  { grid-area: btnn; }
}

/* Container & header padding unified on mobile — less hugging edges,
   content matches header gutters */
@media (max-width: 768px) {
    :root { --mobile-gutter: 14px; }
    .container { padding: 0 var(--mobile-gutter) !important; }
    .site-header .container { padding: 0 var(--mobile-gutter) !important; }
    .subnav .container { padding: 0 var(--mobile-gutter) !important; }
    .page-layout { padding: 12px 0 !important; }
    .market-page-header { padding: 10px 0 14px !important; }
    /* Guides / content pages: remove excessive inner padding */
    .guide-container, .article-container, .content-container,
    .news-article-layout, .blog-article { padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }
    .guide-body, .article-body, .content-body { padding: 0 !important; }
    /* Header top row — no overflow */
    .site-header { padding: 8px 0 2px !important; overflow: hidden; }
    .header-inner { gap: 4px !important; padding: 0 !important; }
    .logo-text { max-width: 100%; }
    .hdr-wallet-block { gap: 6px !important; padding: 0 6px !important; }
    .hdr-wallet-item { min-width: 0; }
}

@media (max-width: 480px) {
    :root { --mobile-gutter: 12px; }
    .outcome-row-pct { font-size: 26px !important; }
    .outcome-row-name { font-size: 13px !important; }
}

/* Remove the fully-stacked !important that was killing the flex-row layout */
@media (max-width: 480px) {
    .outcome-row-item {
        flex-direction: row !important;
        align-items: start !important;
    }
    .outcome-row-pct { align-self: center !important; }
}

/* Tags row before title on market page — already in markup, just polish */
@media (max-width: 768px) {
    .market-header-cats {
        font-size: 11px;
        margin-bottom: 4px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .4px;
        font-weight: 600;
    }
    .market-header-cats .cat-sep { margin: 0 4px; opacity: .5; }
}

/* Portfolio position card — expandable slide-down for details */
.pf-pos-card { position: relative; cursor: pointer; }
.pf-pos-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
    opacity: 0;
}
.pf-pos-card.expanded .pf-pos-expand {
    max-height: 400px;
    opacity: 1;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.pf-pos-expand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    font-size: 12px;
}
.pf-pos-expand-grid .lbl { color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; font-size: 10px; }
.pf-pos-expand-grid .val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-pos-chevron {
    display: inline-flex;
    transition: transform .2s;
    color: var(--text-muted);
    font-size: 12px;
}
.pf-pos-card.expanded .pf-pos-chevron { transform: rotate(180deg); }


/* ═══ Referral-only mode overrides ═══
   When body.referral-only is set, dm-bar + training-banner are NOT in DOM.
   Remove the mobile bottom padding that was reserved for them. */
body.referral-only { padding-bottom: 0 !important; }
@media (max-width: 768px){
    body.referral-only { padding-bottom: 0 !important; }
    /* Ensure main content doesn't have extra bottom space */
    body.referral-only main,
    body.referral-only .page-main { padding-bottom: env(safe-area-inset-bottom, 0) !important; }
}
/* In case the pill gets too long in some langs, constrain and center */
.hdr-poly-cta { white-space: nowrap; max-width: 220px; }
@media (max-width: 400px){
    .hdr-poly-cta { font-size: 11px; padding: 6px 10px; gap: 6px; max-width: 160px; }
    .hdr-poly-cta-text { overflow: hidden; text-overflow: ellipsis; }
}

/* ═══════════════════════════════════════════════════════════════
   v9.3 — Top bar, new nav, subnav scroll, home hero, training page
   ═══════════════════════════════════════════════════════════════ */

/* Top bar (training product promo) */
.site-topbar{background:linear-gradient(90deg,#0e1a2b 0%,#0d1726 40%,#0e1a2b 100%);border-bottom:1px solid rgba(49,94,255,.14);font-size:13px;color:#cbd5e1}
.site-topbar-inner{display:flex;align-items:center;gap:12px;padding:8px 0;min-height:36px}
.site-topbar-icon{color:#315EFF;flex-shrink:0}
.site-topbar-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-topbar-cta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#315EFF 0%,#3b82f6 100%);color:#fff !important;text-decoration:none;font-weight:700;padding:5px 12px;border-radius:999px;font-size:12px;flex-shrink:0;box-shadow:0 1px 6px rgba(49,94,255,.3);transition:filter .15s,transform .15s}
.site-topbar-cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.site-topbar-close{background:none;border:none;color:#6b7280;font-size:20px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0;transition:color .15s}
.site-topbar-close:hover{color:#e6edf3}
@media(max-width:640px){.site-topbar-text{font-size:12px;white-space:normal;line-height:1.3}.site-topbar-inner{gap:8px;padding:6px 0}.site-topbar-cta{font-size:11px;padding:4px 10px}}

/* Header nav — single training-mode toggle (no duplicate link) */
.header-nav .tm-toggle{margin-inline-start:4px}
@media(max-width:768px){
    /* Compact toggle on mobile: hide label, keep icon + switch */
    .header-nav .tm-toggle .tm-label{display:none}
    .header-nav .tm-toggle{padding:6px 8px;gap:6px}
}

/* Subnav (Polymarket-style) — clean horizontal pill row, native scroll, no arrow.
   Identical look on desktop + mobile; pinned News/Guides sit alongside category pills.
   Horizontal padding from .container (24px desktop, --mobile-gutter mobile). */
.subnav-inner{display:flex;align-items:center;gap:6px;padding-block:6px;min-width:0;overflow-x:auto;flex-wrap:nowrap;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-pinned{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.subnav-pin,.subnav-scroll a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:600;line-height:1.1;transition:background .15s,color .15s;white-space:nowrap;flex-shrink:0}
.subnav-pin:hover,.subnav-scroll a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.subnav-pin i,.subnav-scroll a i{font-size:13px;opacity:.8}
.subnav-pin:hover i,.subnav-scroll a:hover i{opacity:1}
.subnav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e53935;color:#fff;font-size:10px;font-weight:800;font-family:'IBM Plex Mono',monospace;line-height:1;margin-inline-start:2px;box-shadow:0 0 0 2px rgba(229,57,53,.25)}
.subnav-sep{color:var(--border-light);font-weight:300;font-size:18px;flex-shrink:0;opacity:.5;margin:0 2px}
.subnav-scroll-wrap{display:inline-flex;flex:0 0 auto;min-width:0}
.subnav-scroll{display:inline-flex;align-items:center;gap:2px}
.subnav-scroll a.hot{color:#f8b131}
.subnav-scroll a.hot i{color:#FF6B2B;opacity:1}
.subnav-scroll a.active{color:#e6edf3;background:rgba(255,255,255,.06)}
/* Inline divider between categories and hot topics inside subnav-scroll */
.subnav-divider{display:inline-block;width:1px;height:18px;background:var(--border-light);opacity:.45;margin:0 8px;flex-shrink:0;align-self:center}
/* Hot topic pills (5x), share scroll with categories */
.subnav-scroll .subnav-hot{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.04);color:#e6edf3;font-size:12.5px;font-weight:600;white-space:nowrap;flex-shrink:0;border:1px solid rgba(255,255,255,.06);transition:background .15s,border-color .15s}
.subnav-scroll .subnav-hot:hover{background:rgba(49,94,255,.10);border-color:rgba(49,94,255,.30);color:#fff}
.subnav-scroll .subnav-hot .snh-emoji{font-size:13px;line-height:1;display:inline-flex;align-items:center;flex:0 0 auto}
/* #1296 S4: guarantee every tag-pill is the SAME height + its content centered, so a pill with an
   emoji (or the first-in-row) can't sit taller/off-centre vs a text-only one. */
.subnav-scroll .subnav-hot{box-sizing:border-box;min-height:26px;justify-content:center;line-height:1.1}
@media(max-width:640px){
    .subnav-divider{height:14px;margin:0 5px}
    .subnav-scroll .subnav-hot{padding:5px 9px;font-size:11.5px;gap:4px;min-height:24px}
}
/* Desktop subnav scroll-arrow (owner: "desktop needs arrows to show").
   Hidden by default; .subnav.is-scrollable (set by JS when categories overflow)
   reveals it on desktop only. Mobile keeps native touch-scroll. */
/* the wrap is the real scroll container (inner never scrolled — intermediate
   overflow:visible broke it); scrollbar hidden, arrow/native both drive it. */
.subnav-scroll-wrap{overflow-x:auto;max-width:100%;scrollbar-width:none;-ms-overflow-style:none}
.subnav-scroll-wrap::-webkit-scrollbar{display:none}
.subnav-fade{display:none !important}
.subnav-arrow{display:none}
@media(min-width:769px){
    .subnav.is-scrollable .subnav-arrow{
        display:inline-flex;align-items:center;justify-content:center;
        position:sticky;inset-inline-end:0;flex:0 0 auto;z-index:6;
        width:28px;height:28px;padding:0;cursor:pointer;
        border:1px solid var(--border-color,rgba(128,128,128,.28));border-radius:50%;
        background:var(--bg,#0d0d0d);color:var(--text-secondary,#9aa0a6);
        transition:color .15s,border-color .15s;
    }
    .subnav.is-scrollable.at-scroll-end .subnav-arrow{display:none}
    .subnav-arrow:hover{color:var(--text-primary,#fff);border-color:var(--accent,#1652f0)}
}
[dir=rtl] .subnav-arrow svg{transform:scaleX(-1)}
@media(max-width:640px){
    .subnav-inner{gap:4px;padding-block:5px}
    .subnav-pin,.subnav-scroll a{padding:6px 10px;font-size:12.5px;gap:5px}
    .subnav-pin i,.subnav-scroll a i{font-size:12px}
    .subnav-sep{display:none}
}

/* Home hero H1 */
.home-hero{padding:24px 0 16px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.04)}
.home-hero-h1{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.15;margin:0 0 10px;background:linear-gradient(135deg,#e6edf3 0%,#8b949e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.015em}
.home-hero-intro{font-size:clamp(14px,1.5vw,16px);line-height:1.55;color:var(--text-secondary);margin:0 0 16px;max-width:680px}
.home-hero-lang-subtitle{font-size:clamp(14px,1.4vw,16px);font-weight:600;color:var(--accent,#315EFF);margin:-4px 0 10px;letter-spacing:.2px}
.home-hero-training-chip{font-size:13px;color:var(--text-secondary);margin:14px 0 0;max-width:680px;padding:8px 12px;border-radius:10px;background:rgba(49,94,255,.06);border:1px solid rgba(49,94,255,.14);display:inline-flex;align-items:center;gap:8px;line-height:1.45}
.home-hero-training-chip i{color:var(--accent,#315EFF);font-size:13px;flex:0 0 auto}
.home-hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
/* market-button look: less rounded + 3D press, like the Yes/No buy/sell buttons */
.home-hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:auto;padding:10px 18px;border-radius:9px;font-size:14px;font-weight:700;line-height:1.25;text-align:center;text-wrap:balance;white-space:normal;overflow-wrap:anywhere;text-decoration:none;transition:filter .15s,transform .08s,box-shadow .08s;box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.22)}
.home-hero-btn:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.22)}
.home-hero-btn i{font-size:14px;flex-shrink:0}
.home-hero-btn>span{min-width:0;overflow-wrap:anywhere}  /* #523: labels wrap INSIDE the button; a single long token can never overflow */
.hhc-cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}  /* stretch = both buttons equal height when one wraps to 2 lines */
.home-hero-btn-train{background:#359A5E;color:#fff !important}
.home-hero-btn-train:hover{filter:brightness(1.07)}
/* #100426: white text on the light end (#3b82f6) fell to ~3.7:1 (below AA). Anchored to brand #315EFF -> darker #244fd6 so the whole surface keeps white text >=5:1 (AA). */
.home-hero-btn-primary{background:linear-gradient(135deg,#315EFF 0%,#244fd6 100%);color:#fff !important;box-shadow:0 3px 18px rgba(49,94,255,.35),inset 0 -4px 0 0 rgba(0,0,0,.18)}
.home-hero-btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 6px 22px rgba(49,94,255,.45)}
.home-hero-btn-secondary{background:rgba(255,255,255,.06);color:var(--text) !important;border:1px solid rgba(255,255,255,.12)}
.home-hero-btn-secondary:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
@media(max-width:560px){
  .home-hero{padding:14px 0 10px}
  .home-hero-h1{font-size:23px;margin-bottom:8px}
  .home-hero-intro{font-size:14px;margin-bottom:12px;line-height:1.5}
  .home-hero-btn{padding:11px 14px;font-size:13px;flex:1 1 auto;justify-content:center}
  .home-hero-training-chip{font-size:12px;padding:7px 10px;margin-top:10px}
}

/* Hot Topics pill row — surfaces SEO topic landers (incl. iran-israel, israel-hezbollah, etc.) */
.home-hot-topics{margin:14px 0 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hht-eyebrow{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);flex:0 0 auto;white-space:nowrap}
.hht-eyebrow i{font-size:12px}
.hht-pills{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.hht-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font:600 13px/1 var(--font-body);text-decoration:none;transition:all .15s;white-space:nowrap}
.hht-pill:hover{background:rgba(49,94,255,.1);border-color:rgba(49,94,255,.4);color:var(--text);transform:translateY(-1px)}
.hht-emoji{font-size:14px;line-height:1}
.hht-name{line-height:1}
.hht-pill.hht-all{background:transparent;border-style:dashed;color:var(--text-secondary);font-weight:500}
.hht-pill.hht-all:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:768px){
  .home-hot-topics{margin:10px 0 14px;flex-direction:column;align-items:flex-start;gap:8px}
  .hht-pills{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .hht-pills::-webkit-scrollbar{display:none}
  .hht-pill{scroll-snap-align:start;font-size:12.5px;padding:7px 11px}
}

/* ── Homepage top grid: featured carousel + sidebar (breaking news + hot topics) ── */
.home-top-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin:0 0 12px}
.home-top-main{min-width:0}
.home-top-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px}
@media(max-width:1024px){
  .home-top-grid{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
}
@media(max-width:820px){
  .home-top-grid{grid-template-columns:1fr;gap:16px}
  .home-top-aside{position:static;top:auto}
}

/* Sidebar cards (Breaking news + Hot topics) */
.hsa-card{background:var(--bg-surface);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 0 12px;overflow:hidden}
.hsa-card-head{padding:2px 16px 10px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:6px}
.hsa-card-title{display:inline-flex;align-items:center;gap:7px;font:700 13px/1 var(--font-body);color:var(--text);letter-spacing:.01em}
.hsa-card-title i{color:var(--accent);font-size:13px}
.hsa-list{list-style:none;padding:0;margin:0}
.hsa-row{border-bottom:1px solid rgba(255,255,255,.04)}
.hsa-row:last-child{border-bottom:none}
.hsa-row-link{display:flex;align-items:center;gap:10px;padding:10px 16px;text-decoration:none;color:var(--text);transition:background .12s}
.hsa-row-link:hover{background:rgba(255,255,255,.03);color:var(--text)}
.hsa-num{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:rgba(49,94,255,.10);color:var(--accent);display:flex;align-items:center;justify-content:center;font:700 12px/1 'IBM Plex Mono',monospace}
.hsa-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.hsa-title-line{font:600 13.5px/1.35 var(--font-body);color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hsa-meta{font:500 11.5px/1 var(--font-body);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px}
.hsa-flame{color:#ff7a18;font-size:11px}
.hsa-chev{flex:0 0 auto;color:var(--text-secondary);opacity:.6;font-size:13px}
.hsa-row-link:hover .hsa-chev{opacity:1;color:var(--accent)}
.hsa-cta-all{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:10px 16px;font:600 12.5px/1 var(--font-body);color:var(--text);text-decoration:none;border-top:1px solid rgba(255,255,255,.05)}
.hsa-cta-all:hover{background:rgba(255,255,255,.04);color:var(--text-strong)}

/* ── #1368 hero-row refinements ────────────────────────────────────────────── */
/* Hot-topics: circular topic thumbnail + the market's leading ("hottest") option. */
.hsa-thumb{flex:0 0 auto;width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--bg-card);border:1px solid rgba(255,255,255,.06)}
.hsa-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hsa-meta{flex-wrap:wrap;gap:4px 8px}
.hsa-opt{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 7px;border-radius:999px;background:rgba(61,180,104,.10);color:var(--text-secondary);font:600 11px/1.2 var(--font-body);overflow:hidden}
.hsa-opt b{color:#3db468;font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.hsa-vol{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* Full-width "All markets" with category tabs */
.home-all-markets{margin:24px 0 0}
.ham-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ham-head .section-title{margin:0 0 4px}
.ham-sub{margin:0;font:500 13px/1.4 var(--font-body);color:var(--text-secondary)}
.ham-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ham-tabs::-webkit-scrollbar{height:0}
.ham-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font:600 13px/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:all .15s;flex:0 0 auto}
.ham-tab:hover{background:rgba(255,255,255,.04);color:var(--text);border-color:rgba(255,255,255,.18)}
.ham-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ham-tab-emoji{font-size:14px;line-height:1}
.ham-tab-label{line-height:1}
@media(max-width:768px){
  .ham-tabs{gap:6px}
  .ham-tab{padding:7px 11px;font-size:12.5px}
}

/* Training page */
.page-training .training-hero{padding:48px 0 32px;text-align:center}
.training-hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(49,94,255,.12);color:#315EFF;font-size:12px;font-weight:700;margin-bottom:18px;letter-spacing:.02em}
.training-hero-h1{font-size:clamp(28px,4.5vw,46px);font-weight:800;line-height:1.1;margin:0 auto 16px;max-width:820px;background:linear-gradient(135deg,#e6edf3 0%,#8b949e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}
.training-hero-sub{font-size:clamp(15px,1.8vw,18px);line-height:1.6;color:var(--text-secondary);max-width:680px;margin:0 auto 24px}
.training-hero-ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.training-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;background:linear-gradient(135deg,#3fb950 0%,#2ea043 100%);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 3px 18px rgba(63,185,80,.35);transition:transform .15s,filter .15s}
.training-cta-primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.training-cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text) !important;text-decoration:none;font-size:15px;font-weight:700;border:1px solid rgba(255,255,255,.12);transition:background .15s,transform .15s}
.training-cta-secondary:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.training-hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:18px;justify-content:center;font-size:13.5px;color:var(--text-secondary)}
.training-hero-points li{display:inline-flex;align-items:center;gap:6px}
.training-hero-points i{color:#3fb950}
.training-h2{font-size:clamp(22px,2.8vw,28px);font-weight:800;text-align:center;margin:0 0 24px;color:var(--text)}
.training-how{padding:40px 0}
.training-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto}
.training-step{background:var(--bg-surface);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:22px;text-align:start}
.training-step-num{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#315EFF,#3b82f6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin-bottom:12px;font-family:'IBM Plex Mono',monospace}
.training-step h3{font-size:16px;font-weight:700;margin:0 0 8px}
.training-step p{font-size:14px;line-height:1.55;color:var(--text-secondary);margin:0}
.training-who{padding:40px 0 20px}
.training-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto}
.training-who-card{background:var(--bg-surface);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:22px;text-align:center}
.training-who-icon{width:48px;height:48px;border-radius:12px;background:rgba(49,94,255,.1);color:#315EFF;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px}
.training-who-card h3{font-size:15px;font-weight:700;margin:0 0 8px}
.training-who-card p{font-size:13.5px;line-height:1.55;color:var(--text-secondary);margin:0}
.training-cta-banner{margin:40px auto 48px;max-width:900px;padding:36px 24px;text-align:center;background:linear-gradient(135deg,rgba(49,94,255,.1) 0%,rgba(63,185,80,.06) 100%);border:1px solid rgba(49,94,255,.2);border-radius:18px}
.training-cta-banner h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin:0 0 8px}
.training-cta-banner p{font-size:15px;color:var(--text-secondary);margin:0 0 18px}
@media(max-width:768px){.training-steps,.training-who-grid{grid-template-columns:1fr}}

/* ============================================================
   GUIDES — readability pass + chapter-break component
   Override earlier .article-body rules for long-form comfort.
   ============================================================ */
.article-body{
    font-size:17.5px;
    line-height:1.72;
    color:#E6EAEE;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    letter-spacing:.005em;
}
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote{max-width:68ch}
.article-body p{margin:0 0 18px;color:#E6EAEE}
.article-body li{margin-bottom:8px;color:#E6EAEE}
.article-body strong{color:#FFFFFF;font-weight:600}
.article-body h2{
    font-size:30px;font-weight:800;line-height:1.25;
    margin:28px 0 18px;letter-spacing:-.015em;
    color:#FFFFFF;
}
.article-body h3{
    font-size:21px;font-weight:700;line-height:1.3;
    margin:32px 0 12px;letter-spacing:-.01em;
    color:#F4F6F8;
}
.article-body h4{font-size:17px;font-weight:700;margin:20px 0 8px;color:#F4F6F8}
.article-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(49,94,255,.35);transition:border-color .15s}
.article-body a:hover{border-bottom-color:var(--accent)}
.article-body blockquote{color:#D5DBE1;font-style:normal}
.article-body table{font-size:14.5px}
.article-body code{font-size:.88em;color:#F4F6F8}

/* Chapter break — Option A: ghost outline number */
.pm-chapter-break{
    display:flex;justify-content:center;align-items:center;
    margin:72px 0 24px;
    position:relative;
}
.pm-chapter-stack{
    position:relative;text-align:center;
    padding:24px 36px 18px;
    line-height:1;
}
.pm-chapter-num{
    font-family:'Heebo',sans-serif;
    font-size:128px;font-weight:900;line-height:.9;
    color:transparent;
    -webkit-text-stroke:1.5px #2E353D;
    letter-spacing:-.05em;
    user-select:none;
    background:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(49,94,255,.04) 100%);
    -webkit-background-clip:text;background-clip:text;
}
.pm-chapter-label{
    position:absolute;left:50%;bottom:8px;
    transform:translateX(-50%);
    font-size:12px;font-weight:700;
    letter-spacing:.28em;text-transform:uppercase;
    color:var(--accent);
    background:var(--bg);
    padding:4px 14px;
    white-space:nowrap;
}
/* H2 directly after a chapter-break: tighten top margin, center text */
.pm-chapter-break + h2{
    margin-top:0;text-align:center;
    font-size:clamp(24px,3.2vw,34px);
    max-width:720px;margin-left:auto;margin-right:auto;
    letter-spacing:-.02em;
}
@media(max-width:640px){
    .article-body{font-size:16.5px;line-height:1.68}
    .article-body h2{font-size:25px}
    .article-body h3{font-size:19px}
    .pm-chapter-break{margin:56px 0 18px}
    .pm-chapter-num{font-size:92px}
    .pm-chapter-label{font-size:11px;letter-spacing:.22em;padding:3px 10px}
    .pm-chapter-break + h2{font-size:22px}
}


/* ═══════════════════════════════════════════════════════════════════
   PRICING / THANK-YOU / ACCOUNT — premium subscription pages
   ═══════════════════════════════════════════════════════════════════ */

.pricing-container{max-width:1080px;margin:0 auto;padding:48px 20px 80px}
.pricing-hero{text-align:center;margin-bottom:48px}
.pricing-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);background:rgba(49,94,255,.08);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.pricing-title{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px;color:var(--text)}
.pricing-sub{max-width:600px;margin:0 auto 28px;font-size:17px;line-height:1.55;color:var(--text-muted)}
.pricing-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px;gap:0}
.pt-btn{background:transparent;border:none;color:var(--text-muted);font:600 14px/1 var(--font-body);padding:9px 18px;border-radius:999px;cursor:pointer;transition:all .2s}
.pt-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(49,94,255,.3)}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px}
.pcard{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.pcard:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.pcard-featured{border-color:var(--accent);background:linear-gradient(180deg,rgba(49,94,255,.03),transparent)}
.pcard-featured:hover{border-color:var(--accent)}
.pcard-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font:700 11px/1 var(--font-body);letter-spacing:.05em;padding:6px 12px;border-radius:999px;text-transform:uppercase}
.pcard-flag-best{background:#16a34a}
.pcard-head{margin-bottom:20px}
.pcard-name{font:700 22px/1.2 var(--font-body);margin:0 0 6px;color:var(--text)}
.pcard-tagline{font:14px/1.5 var(--font-body);color:var(--text-muted);margin:0;min-height:42px}
.pcard-price{display:flex;align-items:baseline;gap:6px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.pcard-amt{font:800 38px/1 var(--font-body);color:var(--text);letter-spacing:-.02em}
.pcard-per{font:500 14px/1 var(--font-body);color:var(--text-muted)}
.pcard-feats{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-feats li{display:flex;align-items:flex-start;gap:10px;font:14px/1.5 var(--font-body);color:var(--text)}
.pcard-feats li i{color:#16a34a;font-size:13px;margin-top:3px;flex-shrink:0}
.pcard-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:10px;font:700 15px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background .15s,transform .1s}
.pcard-cta:hover{background:var(--accent-hover,#0078d4)}
.pcard-cta:active{transform:scale(.98)}
.pcard-cta:disabled{opacity:.6;cursor:wait}
.pcard:not(.pcard-featured) .pcard-cta{background:var(--text);color:var(--bg)}
.pcard:not(.pcard-featured) .pcard-cta:hover{opacity:.85}

.pricing-faq{max-width:720px;margin:0 auto}
.pricing-faq h2{font:700 24px/1.2 var(--font-body);margin:0 0 24px;text-align:center}
.pricing-faq details{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:10px}
.pricing-faq summary{cursor:pointer;font:600 15px/1.4 var(--font-body);color:var(--text);list-style:none}
.pricing-faq summary::-webkit-details-marker{display:none}
.pricing-faq summary::after{content:'+';float:inline-end;font-weight:300;font-size:20px;color:var(--text-muted)}
.pricing-faq details[open] summary::after{content:'−'}
.pricing-faq details p{margin:12px 0 0;font:15px/1.6 var(--font-body);color:var(--text-muted)}

@media(max-width:768px){
    .pricing-grid{grid-template-columns:1fr;gap:16px}
    .pricing-container{padding:32px 16px 60px}
}

/* ─── PRICING PIVOT 2026-04: free hero, top-ups, AI Coach, training merged ─── */
.pricing-hero-free{background:linear-gradient(180deg,rgba(49,94,255,.05),transparent);border:1px solid var(--border);border-radius:18px;padding:56px 28px 44px;margin-bottom:56px}
.pricing-hero-cta{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.phero-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font:700 16px/1 var(--font-body);padding:14px 22px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;transition:background .15s,transform .1s}
.phero-btn:hover{background:var(--accent-hover,#0078d4)}
.phero-btn:active{transform:scale(.98)}
.phero-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);font:600 15px/1 var(--font-body);padding:14px 18px;border-radius:10px;text-decoration:none;border:1px solid var(--border)}
.phero-btn-ghost:hover{background:var(--surface-2);border-color:var(--border-strong)}
.phero-note{display:block;font:500 13px/1.4 var(--font-body);color:var(--text-muted);margin-bottom:24px}
.pricing-free-feats{list-style:none;padding:0;margin:8px auto 0;max-width:640px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;text-align:initial}
.pricing-free-feats li{display:flex;align-items:flex-start;gap:8px;font:14px/1.5 var(--font-body);color:var(--text)}
.pricing-free-feats li i{color:#16a34a;font-size:13px;margin-top:3px;flex-shrink:0}

.pricing-section-head{text-align:center;margin:0 auto 28px;max-width:640px}
.pricing-section-head h2{font:800 30px/1.15 var(--font-body);margin:0 0 10px;letter-spacing:-.02em;color:var(--text)}
.pricing-section-head p{font:15px/1.55 var(--font-body);color:var(--text-muted);margin:0}

.pricing-topup{margin-bottom:64px}
.pricing-grid-4{grid-template-columns:repeat(4,1fr)}
.pcard-life{border-color:#16a34a;background:linear-gradient(180deg,rgba(22,163,74,.04),transparent)}
.pcard-life:hover{border-color:#16a34a}
.pcard-life .pcard-flag{background:#16a34a}
.pcard-soon{position:absolute;top:14px;inset-inline-end:14px;background:rgba(255,255,255,.06);color:var(--text-muted);font:700 10px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--border)}
.pcard-cta-soon{background:var(--surface-2)!important;color:var(--text-muted)!important;cursor:not-allowed!important;opacity:.85}
.pcard-cta-soon:hover{background:var(--surface-2)!important;opacity:.85}
.pricing-fineprint{text-align:center;margin:18px auto 0;font:13px/1.5 var(--font-body);color:var(--text-muted);max-width:560px}

.pricing-ai{margin-bottom:64px}
.pcard-ai{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(49,94,255,.04));border:1.5px solid var(--border);border-radius:18px;padding:36px}
.pcard-ai-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:#a78bfa;background:rgba(167,139,250,.12);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.pcard-ai-title{font:800 32px/1.15 var(--font-body);margin:0 0 12px;letter-spacing:-.02em;color:var(--text)}
.pcard-ai-sub{font:15px/1.55 var(--font-body);color:var(--text-muted);margin:0 0 16px}
.pcard-ai-price{font:800 26px/1 var(--font-body);color:var(--text);margin-bottom:20px;letter-spacing:-.02em}
.pcard-ai-form{display:flex;gap:8px;flex-wrap:wrap}
.pcard-ai-form input[type=email]{flex:1;min-width:200px;padding:13px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font:14px/1 var(--font-body)}
.pcard-ai-form input[type=email]:focus{outline:none;border-color:var(--accent)}
.pcard-ai-form button{display:inline-flex;align-items:center;gap:7px;padding:13px 18px;background:#a78bfa;color:#fff;border:none;border-radius:10px;font:700 14px/1 var(--font-body);cursor:pointer;transition:background .15s}
.pcard-ai-form button:hover{background:#8b5cf6}
.pcard-ai-thanks{margin:14px 0 0;color:#16a34a;font:600 14px/1.4 var(--font-body);display:flex;align-items:center;gap:8px}
.pcard-ai-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;align-self:center}
.pcard-ai-feats li{display:flex;align-items:flex-start;gap:10px;font:14px/1.5 var(--font-body);color:var(--text)}
.pcard-ai-feats li i{color:#a78bfa;font-size:13px;margin-top:3px;flex-shrink:0}

/* "How it works" steps (training section, kept) */
.training-page .training-how{margin:0 0 64px}
.training-h2{font:800 30px/1.15 var(--font-body);margin:0 0 28px;text-align:center;letter-spacing:-.02em;color:var(--text)}
.training-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.training-step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;text-align:initial}
.training-step-num{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font:800 16px/1 var(--font-body);margin-bottom:14px}
.training-step h3{font:700 17px/1.3 var(--font-body);margin:0 0 8px;color:var(--text)}
.training-step p{font:14px/1.55 var(--font-body);color:var(--text-muted);margin:0}

@media(max-width:768px){
    .pricing-grid-4{grid-template-columns:1fr}
    .pcard-ai{grid-template-columns:1fr;gap:22px;padding:26px 22px}
    .training-steps{grid-template-columns:1fr;gap:14px}
    .pricing-free-feats{grid-template-columns:1fr;gap:8px}
    .pricing-hero-free{padding:36px 18px 30px}
    .pricing-hero-cta{flex-direction:column;align-items:stretch}
    .phero-btn,.phero-btn-ghost{justify-content:center}
}

/* THANK-YOU */
.thanks-container{max-width:600px;margin:0 auto;padding:80px 20px}
.thanks-card{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:48px 32px}
.thanks-icon{font-size:56px;color:#16a34a;margin-bottom:18px}
.thanks-h1{font:800 32px/1.15 var(--font-body);margin:0 0 12px;color:var(--text);letter-spacing:-.02em}
.thanks-lead{font:17px/1.55 var(--font-body);color:var(--text-muted);margin:0 0 28px}
.thanks-ctas{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.thanks-cta-primary{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:10px;font:700 16px/1 var(--font-body);text-decoration:none;cursor:pointer}
.thanks-cta-primary:hover{background:var(--accent-hover,#0078d4)}
.thanks-cta-secondary{padding:12px;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;font:600 14px/1 var(--font-body);text-decoration:none;text-align:center}
.thanks-cta-secondary:hover{background:var(--surface-2)}

/* ACCOUNT */
.account-container{max-width:680px;margin:0 auto;padding:48px 20px 80px}
.account-h1{font:800 32px/1.15 var(--font-body);margin:0 0 28px;letter-spacing:-.02em}
.account-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px}
.account-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
.account-row:last-of-type{border-bottom:none}
.account-label{font:500 14px/1 var(--font-body);color:var(--text-muted)}
.account-val{font:600 14px/1 var(--font-body);color:var(--text)}
.account-tier{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.account-tier-free{background:rgba(255,255,255,.06);color:var(--text-muted)}
.account-tier-pro{background:rgba(49,94,255,.14);color:#315EFF}
.account-tier-premium{background:rgba(124,58,237,.14);color:#a78bfa}
.account-tier-lifetime{background:linear-gradient(90deg,rgba(245,158,11,.16),rgba(217,70,239,.16));color:#fbbf24}
.account-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.account-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:10px;font:600 15px/1 var(--font-body);text-decoration:none;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text)}
.account-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.account-btn-primary:hover{background:var(--accent-hover,#0078d4)}
.account-btn-ghost{background:transparent;color:var(--text-muted)}
.account-btn-ghost:hover{background:var(--surface-2)}
.account-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 4px;padding-top:18px;border-top:1px solid var(--border)}
.account-stat{background:var(--surface-2,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:10px;padding:12px 10px;min-width:0}
.account-stat-label{font:600 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.account-stat-val{font:800 17px/1.15 var(--font-body);color:var(--text);font-feature-settings:"tnum"}
.account-stat-val.is-up{color:#22C55E}
.account-stat-val.is-down{color:#EF4444}
@media (max-width:560px){.account-stats{grid-template-columns:repeat(2,1fr)}.account-stat-val{font-size:15.5px}}
.account-toast{margin-top:14px;padding:10px 14px;border-radius:10px;font:600 13.5px/1.4 var(--font-body);text-align:center}
.account-toast-ok{background:rgba(34,197,94,.12);color:#22C55E;border:1px solid rgba(34,197,94,.3)}
.account-toast-err{background:rgba(239,68,68,.12);color:#EF4444;border:1px solid rgba(239,68,68,.3)}
.account-confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100}
.account-confirm-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:min(420px,92vw);z-index:1101;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.account-confirm-msg{font:500 14.5px/1.5 var(--font-body);color:var(--text);margin:0 0 18px}
.account-confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.account-confirm-actions .account-btn{flex:0 0 auto;padding:10px 18px;font-size:13.5px}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE GUIDES FEATURE — prominent learn block
   ═══════════════════════════════════════════════════════════════════ */
.home-guides-feature{background:linear-gradient(180deg,rgba(49,94,255,.04),transparent);border:1px solid var(--border);border-radius:16px;padding:28px;margin-top:32px}
.home-guides-feature-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.hgf-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.hgf-title{font:800 26px/1.15 var(--font-body);margin:0 0 6px;letter-spacing:-.015em;color:var(--text)}
.hgf-sub{font:14.5px/1.55 var(--font-body);color:var(--text-muted);margin:0;max-width:560px}
.hgf-allbtn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid var(--border);border-radius:999px;font:600 14px/1 var(--font-body);color:var(--text);background:var(--surface);text-decoration:none;transition:all .15s}
.hgf-allbtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.hgf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hgf-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 16px 14px;text-decoration:none;color:var(--text);transition:all .15s;overflow:hidden;display:flex;flex-direction:column;min-height:140px}
.hgf-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(49,94,255,.08)}
.hgf-card-has-hero{padding-top:0}
.hgf-card-hero{position:relative;width:calc(100% + 32px);margin:0 -16px 14px;aspect-ratio:16/7;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--border)}
.hgf-card-hero img{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface);transform:scale(1.02);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s}
.hgf-card:hover .hgf-card-hero img{transform:scale(1.08);filter:brightness(1.05) saturate(1.05)}
.hgf-card-has-hero{padding-inline:16px}
.hgf-card-has-hero .hgf-card-title,.hgf-card-has-hero .hgf-card-desc,.hgf-card-has-hero .hgf-card-meta{padding-inline:0}
.hgf-card-has-hero .hgf-num{position:absolute;bottom:8px;top:auto;inset-inline-end:12px;font:900 44px/1 'Inter','Heebo',sans-serif;font-stretch:condensed;letter-spacing:-.04em;color:rgba(255,255,255,.85);text-shadow:0 2px 12px rgba(0,0,0,.55);opacity:1;transition:transform .35s cubic-bezier(.2,.8,.2,1),color .25s;transform-origin:bottom right;pointer-events:none}
[dir="rtl"] .hgf-card-has-hero .hgf-num,[lang="he"] .hgf-card-has-hero .hgf-num{transform-origin:bottom left}
.hgf-card:hover .hgf-card-has-hero .hgf-num,.hgf-card-has-hero:hover .hgf-num{color:#fff;transform:scale(1.12)}
.hgf-num{position:absolute;top:10px;inset-inline-end:12px;font:800 28px/1 var(--font-body);color:var(--text-muted);opacity:.16;letter-spacing:-.03em}
.hgf-card-title{font:900 19px/1.22 var(--font-body);margin:0 0 8px;color:var(--text);letter-spacing:-.018em;padding-inline-end:32px}
.hgf-card-desc{font:13.5px/1.5 var(--font-body);color:var(--text-muted);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}
.hgf-card-meta{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--font-body);color:var(--accent)}
.hgf-card-meta i{font-size:11px}
/* #104 ask#4 tier 2: "more guides" compact grid */
.hgf-more{margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}
.hgf-more-head{font:700 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.hgf-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hgf-more-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);transition:all .15s}
.hgf-more-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(49,94,255,.07)}
.hgf-more-card .gcard-pill{position:static;align-self:flex-start;backdrop-filter:none}
.hgf-more-title{font:800 14.5px/1.3 var(--font-body);margin:0;color:var(--text);letter-spacing:-.01em;padding-inline-end:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hgf-more-meta{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--font-body);color:var(--text-muted)}
.hgf-more-meta i{font-size:10px}
.hgf-more-go{position:absolute;top:14px;inset-inline-end:14px;color:var(--accent);opacity:.7;transition:transform .15s,opacity .15s}
.hgf-more-card:hover .hgf-more-go{opacity:1;transform:translateX(2px)}
[dir="rtl"] .hgf-more-card:hover .hgf-more-go{transform:translateX(-2px)}
@media(max-width:900px){
    .hgf-grid{grid-template-columns:repeat(2,1fr)}
    .hgf-more-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
    .hgf-more-grid{grid-template-columns:1fr}
    .home-guides-feature{padding:18px 14px;margin-top:22px;border-radius:14px}
    .hgf-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .hgf-card{padding:14px 12px 12px;min-height:auto}
    .hgf-card-title{font-size:16.5px;font-weight:900;letter-spacing:-.014em;padding-inline-end:26px}
    .hgf-card-desc{font-size:12.5px;-webkit-line-clamp:2;margin-bottom:8px}
    .hgf-card-meta{font-size:11.5px}
    .hgf-num{font-size:22px;top:8px;inline-end:10px}
    .hgf-title{font-size:21px}
    .hgf-sub{font-size:13.5px}
    .home-guides-feature-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}
    .hgf-allbtn{font-size:13px;padding:9px 14px}
}

/* ═══ Auth modal (login + signup) ═══════════════════════ */
.auth-modal-overlay{position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
.auth-modal-overlay.active{display:flex;opacity:1;visibility:visible}
.auth-modal-box{position:relative;width:100%;max-width:440px;background:linear-gradient(165deg,#1a1f2e 0%,#141820 100%);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 24px 24px;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:authModalIn .22s ease}
@keyframes authModalIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.auth-modal-x{position:absolute;top:10px;inset-inline-end:12px;background:none;border:none;color:#8b949e;font-size:26px;cursor:pointer;padding:4px 10px;line-height:1;font-family:inherit}
.auth-modal-x:hover{color:#e6edf3}
.auth-modal-title{font-size:22px;font-weight:800;text-align:center;margin:4px 0 4px;letter-spacing:-.3px;color:var(--text)}
.auth-modal-sub{text-align:center;color:var(--text-secondary);font-size:13.5px;margin-bottom:20px;line-height:1.45}
.auth-modal-tabs{display:flex;margin-bottom:16px;border-bottom:1px solid var(--border);border-radius:0}
.auth-modal-tab{flex:1;padding:11px;text-align:center;font-size:14.5px;font-weight:700;color:var(--text-muted);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font-family:inherit;transition:all .15s;border-radius:0}
.auth-modal-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.auth-modal-tab:focus{outline:none}
/* Training-mode banner inside auth modal (shown when source='tm-toggle') */
.auth-modal-tm-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 14px;background:linear-gradient(135deg,rgba(63,185,80,.13),rgba(34,102,255,.10));border:1px solid rgba(63,185,80,.22);border-radius:12px}
.auth-modal-tm-icon{width:36px;height:36px;border-radius:9px;background:rgba(63,185,80,.18);display:flex;align-items:center;justify-content:center;color:#3fb950;font-size:16px;flex:none}
.auth-modal-tm-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.auth-modal-tm-text strong{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.25}
.auth-modal-tm-text span{font-size:11.5px;color:var(--text-secondary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.auth-modal-oauth{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.auth-modal-oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:10px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.auth-modal-oauth-btn:hover{border-color:var(--text-muted)}
.auth-modal-oauth-btn[aria-disabled="true"]{opacity:.78;cursor:not-allowed}
.auth-modal-oauth-icon{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center}
.auth-modal-oauth-soon{margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--text-muted);padding:3px 8px;background:rgba(255,255,255,.04);border-radius:20px}
.auth-modal-oauth-g{background:#fff;color:#1f1f1f;border-color:#e2e2e2}
.auth-modal-oauth-x{background:#000;color:#fff;border-color:#222}
.auth-modal-divider{display:flex;align-items:center;gap:12px;margin:10px 0 14px;color:var(--text-muted);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.auth-modal-divider:before,.auth-modal-divider:after{content:"";flex:1;height:1px;background:var(--border)}
.auth-modal-form{display:flex;flex-direction:column;gap:12px}
.auth-modal-field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
.auth-modal-field input{width:100%;padding:11px 13px;background:var(--bg-card);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:14.5px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.auth-modal-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,102,255,.15)}
.auth-modal-field input::placeholder{color:var(--text-muted)}
.auth-modal-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.auth-modal-consent{display:flex;flex-direction:column;gap:8px;padding:2px 0;margin-top:2px}
.auth-modal-consent-row{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.45;color:var(--text-secondary);cursor:pointer}
.auth-modal-consent-row input[type="checkbox"]{margin-top:2px;width:15px;height:15px;accent-color:var(--accent);flex:none;cursor:pointer}
.auth-modal-consent-row a{color:var(--text);text-decoration:underline;text-decoration-color:var(--text-muted)}
.auth-modal-submit{width:100%;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter .15s,transform .05s;margin-top:4px}
.auth-modal-submit:hover{filter:brightness(1.07)}
.auth-modal-submit:active{transform:translateY(1px)}
.auth-modal-submit:disabled{opacity:.55;cursor:not-allowed}
.auth-modal-error{color:#ff6b6b;font-size:12.5px;text-align:center;display:none;padding:8px 11px;background:rgba(255,77,79,.09);border-radius:8px}
.auth-modal-bonus{display:flex;align-items:center;gap:10px;padding:12px;background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.18);border-radius:10px;margin-top:14px}
.auth-modal-bonus-icon{font-size:22px;flex:none}
.auth-modal-bonus-text{font-size:12.5px;color:var(--text-secondary);line-height:1.45}
.auth-modal-bonus-text strong{color:#3fb950;font-weight:700}
.auth-modal-verify{display:none;text-align:center;padding:24px 16px}
.auth-modal-verify.active{display:block}
.auth-modal-verify-icon{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;background:rgba(34,102,255,.14);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:26px}
.auth-modal-verify-title{font-size:18px;font-weight:800;margin-bottom:6px}
.auth-modal-verify-email{color:var(--accent);font-weight:600;word-break:break-all;margin:6px 0}
.auth-modal-verify-body{font-size:13px;color:var(--text-secondary);line-height:1.55;margin:0 0 16px}
.auth-modal-verify-resend{background:transparent;color:var(--text-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600}
.auth-modal-verify-resend:hover{color:var(--text);border-color:var(--text-muted)}
@media (max-width:560px){
    .auth-modal-overlay{padding:16px 8px;align-items:flex-start}
    .auth-modal-box{padding:22px 18px 20px;border-radius:14px;max-width:100%}
    .auth-modal-title{font-size:20px}
    .auth-modal-sub{font-size:13px;margin-bottom:16px}
}

/* ═══ Header Login / Register pair (always visible when logged out) ═══ */
.hdr-auth-pair{display:inline-flex;gap:6px;align-items:center}
.hdr-auth-btn{font-family:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;line-height:1.1}
.hdr-auth-login{background:transparent;border:1px solid var(--border);color:var(--text)}
.hdr-auth-login:hover{background:var(--bg-hover);border-color:var(--text-muted)}
.hdr-auth-signup{background:var(--accent);border:1px solid var(--accent);color:#fff}
.hdr-auth-signup:hover{filter:brightness(1.08)}
@media(max-width:768px){
    .hdr-auth-pair{gap:4px}
    .hdr-auth-btn{padding:6px 10px;font-size:12px}
    .hdr-auth-login{display:none}
}
@media(max-width:480px){
    .hdr-auth-btn{padding:5px 9px;font-size:11.5px}
}

/* ═══ Mobile bottom nav: support 5 items + active state per route ═══ */
.mobile-bottom-nav .mob-nav-item.is-news i,
.mobile-bottom-nav .mob-nav-item.is-guides i{font-size:21px}
.mob-nav-item .mob-nav-lbl{font-size:10px;margin-top:2px;color:inherit;font-family:'Inter','Inter Fallback',sans-serif;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mob-nav-item.is-portfolio .mob-nav-lbl{font-weight:700;color:#e6edf3}
@media(max-width:380px){
    .mob-nav-item{min-width:0;padding:2px 4px}
    .mob-nav-item .mob-nav-lbl{font-size:9.5px}
    .mob-nav-item i{font-size:20px}
}

/* ═══ Similar markets section (market detail page) ═══ */
.similar-markets-section{margin:32px 0 24px;padding-top:24px;border-top:1px solid var(--border)}
.similar-markets-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.similar-markets-title{font-size:20px;font-weight:800;color:var(--text);margin:0;display:flex;align-items:center}
.similar-markets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.similar-markets-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.similar-markets-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:520px){.similar-markets-grid{grid-template-columns:1fr;gap:10px}.similar-markets-title{font-size:17px}}

/* ═══ Logout confirmation modal ═══════════════════════ */
.logout-modal-overlay{position:fixed;inset:0;z-index:10003;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px 16px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.logout-modal-overlay.active{display:flex;opacity:1;visibility:visible}
.logout-modal-box{position:relative;width:100%;max-width:380px;background:linear-gradient(165deg,#1a1f2e 0%,#141820 100%);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px 24px 22px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:authModalIn .22s ease}
.logout-modal-x{position:absolute;top:8px;inset-inline-end:10px;background:none;border:none;color:#8b949e;font-size:24px;cursor:pointer;padding:4px 9px;line-height:1;font-family:inherit}
.logout-modal-x:hover{color:#e6edf3}
.logout-modal-icon{width:54px;height:54px;border-radius:12px;background:rgba(229,57,53,.14);display:inline-flex;align-items:center;justify-content:center;color:#e57373;font-size:22px;margin-bottom:14px}
.logout-modal-title{font-size:18px;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:-.2px}
.logout-modal-sub{font-size:13.5px;color:var(--text-secondary);line-height:1.5;margin:0 0 20px}
.logout-modal-actions{display:flex;gap:10px}
.logout-modal-cancel,.logout-modal-confirm{flex:1;padding:11px 14px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s,background .15s,border-color .15s}
.logout-modal-cancel{background:transparent;border:1px solid var(--border);color:var(--text)}
.logout-modal-cancel:hover{background:rgba(255,255,255,.05);border-color:var(--text-muted)}
.logout-modal-confirm{background:#cb3131;border:1px solid #cb3131;color:#fff}
.logout-modal-confirm:hover{filter:brightness(1.08)}
@media(max-width:480px){.logout-modal-box{padding:24px 18px 20px;max-width:100%}.logout-modal-title{font-size:17px}}

/* ═══════════════════════════════════════════════════════════════════
   TRAINING / PRICING PAGE v2 (2026-04 polish)
   ═══════════════════════════════════════════════════════════════════ */
.training-page .pricing-container{max-width:1120px}

/* Hero v2 — radial accent glow + bigger type */
.training-hero-v2{position:relative;overflow:hidden;padding:64px 32px 48px;border-radius:22px;background:radial-gradient(120% 80% at 50% 0%,rgba(49,94,255,.10) 0%,rgba(63,185,80,.05) 35%,transparent 65%),linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.08)}
.training-hero-v2 .thero-glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:520px;height:520px;background:radial-gradient(closest-side,rgba(49,94,255,.18),transparent 70%);pointer-events:none;filter:blur(20px)}
.training-hero-v2 .pricing-eyebrow{position:relative;background:rgba(49,94,255,.12);color:var(--accent);border:1px solid rgba(49,94,255,.22)}
.training-hero-v2 .pricing-title{position:relative;font-size:clamp(34px,5.4vw,58px);background:linear-gradient(160deg,#ffffff 0%,#cbd5e1 70%,#8b949e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;max-width:880px;margin-inline:auto;letter-spacing:-.025em}
.training-hero-v2 .pricing-sub{position:relative;font-size:clamp(15.5px,1.7vw,18.5px);max-width:680px;margin-inline:auto;line-height:1.55}

/* Hero CTA buttons (override globals) */
.training-hero-v2 .pricing-hero-cta{position:relative;gap:14px;margin-top:30px;margin-bottom:14px}
.training-hero-v2 .phero-btn{padding:16px 28px;font-size:16px;border-radius:8px;background:linear-gradient(135deg,#3fb950 0%,#2ea043 100%);box-shadow:0 4px 18px rgba(63,185,80,.32),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .12s,filter .12s,box-shadow .15s}
.training-hero-v2 .phero-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 22px rgba(63,185,80,.42)}
.training-hero-v2 .phero-btn:active{transform:translateY(0)}
.training-hero-v2 .phero-btn-ghost{padding:16px 22px;font-size:15px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.training-hero-v2 .phero-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.training-hero-v2 .phero-or{font-size:13px;color:var(--text-muted);font-weight:500;align-self:center}
.training-hero-v2 .phero-note{position:relative;margin-bottom:32px}

/* Hero stats trio */
.thero-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px;margin:0 auto 28px}
.thero-stat{display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;backdrop-filter:blur(6px);text-align:initial;transition:transform .15s,border-color .15s,background .15s}
.thero-stat:hover{transform:translateY(-2px);border-color:rgba(49,94,255,.25);background:rgba(49,94,255,.04)}
.thero-stat-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,rgba(49,94,255,.18),rgba(63,185,80,.10));color:#3fb950;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.thero-stat:nth-child(1) .thero-stat-icon{color:#fbbf24;background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(251,191,36,.05))}
.thero-stat:nth-child(2) .thero-stat-icon{color:#315EFF;background:linear-gradient(135deg,rgba(49,94,255,.18),rgba(49,94,255,.05))}
.thero-stat:nth-child(3) .thero-stat-icon{color:#3fb950;background:linear-gradient(135deg,rgba(63,185,80,.18),rgba(63,185,80,.05))}
.thero-stat-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.thero-stat-value{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1}
.thero-stat-label{font-size:12.5px;color:var(--text-muted);font-weight:500;line-height:1.3}

/* Free feats list — tighter, 2-col grid */
.training-hero-v2 .pricing-free-feats{position:relative;max-width:720px;margin:0 auto;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.06);grid-template-columns:repeat(2,1fr);gap:10px 28px}
.training-hero-v2 .pricing-free-feats li{font-size:14px;color:var(--text)}
.training-hero-v2 .pricing-free-feats li i{color:#3fb950}

/* How-it-works step cards v2 — icon + number */
.training-steps-v2{max-width:1000px;margin:0 auto}
.training-steps-v2 .training-step{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:26px 24px;transition:transform .15s,border-color .15s,box-shadow .2s}
.training-steps-v2 .training-step:hover{transform:translateY(-3px);border-color:rgba(49,94,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.training-steps-v2 .training-step-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.training-steps-v2 .training-step-num{width:34px;height:34px;background:linear-gradient(135deg,#315EFF,#3b82f6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;font-family:'IBM Plex Mono',monospace;margin-bottom:0;box-shadow:0 4px 12px rgba(49,94,255,.35)}
.training-steps-v2 .training-step-icon{width:38px;height:38px;border-radius:10px;background:rgba(49,94,255,.08);color:#315EFF;display:flex;align-items:center;justify-content:center;font-size:17px}
.training-steps-v2 .training-step h3{font-size:17.5px;font-weight:800;margin:0 0 8px;color:var(--text);letter-spacing:-.01em}
.training-steps-v2 .training-step p{font-size:14.5px;line-height:1.6}

/* Top-up cards v2 — better price block w/ multiplier badge */
.pcard-topup{padding:24px 22px;transition:transform .15s,border-color .15s,box-shadow .2s}
.pcard-topup:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.pcard-topup .pcard-soon{font-size:9.5px;padding:4px 8px;background:rgba(255,255,255,.04)}
.pcard-topup .pcard-flag{font-size:10.5px;padding:5px 11px;box-shadow:0 4px 12px rgba(49,94,255,.3)}
.pcard-topup .pcard-name{font-size:20px;letter-spacing:-.015em}
.pcard-topup .pcard-tagline{font-size:13.5px;min-height:38px}
.pcard-price-v2{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.06)}
.pcard-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pcard-price-row-label{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pcard-price-row-pay{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.pcard-price-row-get .pcard-price-row-get-amt{font-size:28px;font-weight:800;color:#3fb950;letter-spacing:-.015em}
.pcard-mult{display:inline-flex;align-self:flex-start;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(63,185,80,.12);color:#3fb950;margin-top:4px}
.pcard-featured .pcard-mult{background:rgba(49,94,255,.14);color:#315EFF}
.pcard-life .pcard-mult{background:rgba(245,158,11,.14);color:#fbbf24}
.pcard-topup .pcard-feats li{font-size:13.5px}
.pcard-topup .pcard-cta-soon{padding:11px 14px;font-size:13.5px}

/* AI Coach v2 — premium glow */
.pcard-ai-v2{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(49,94,255,.05));border:1.5px solid rgba(167,139,250,.18);padding:42px 38px}
.pcard-ai-v2 .pcard-ai-glow{position:absolute;top:-100px;right:-100px;width:380px;height:380px;background:radial-gradient(closest-side,rgba(167,139,250,.16),transparent 70%);pointer-events:none;filter:blur(25px)}
.pcard-ai-v2 .pcard-ai-left,.pcard-ai-v2 .pcard-ai-feats{position:relative}
.pcard-ai-v2 .pcard-ai-title{font-size:clamp(26px,3.4vw,36px);background:linear-gradient(135deg,#a78bfa 0%,#315EFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pcard-ai-v2 .pcard-ai-sub{font-size:15.5px;line-height:1.6;max-width:520px}
.pcard-ai-v2 .pcard-ai-form input[type=email]{padding:14px 16px;border-radius:8px}
.pcard-ai-v2 .pcard-ai-form button{padding:14px 18px;border-radius:8px;background:linear-gradient(135deg,#a78bfa,#7c3aed);box-shadow:0 4px 14px rgba(124,58,237,.35)}
.pcard-ai-v2 .pcard-ai-form button:hover{filter:brightness(1.08)}

/* FAQ — slightly softer dividers */
.training-page .pricing-faq{max-width:760px}
.training-page .pricing-faq h2{font-size:28px;letter-spacing:-.015em;margin-bottom:28px}
.training-page .pricing-faq details{transition:border-color .15s,background .15s;background:rgba(255,255,255,.02)}
.training-page .pricing-faq details:hover{border-color:rgba(49,94,255,.2)}
.training-page .pricing-faq details[open]{border-color:rgba(49,94,255,.25);background:rgba(49,94,255,.03)}
.training-page .pricing-faq summary{padding:4px 0}
.training-page .pricing-faq details p{line-height:1.65;color:var(--text-secondary)}

/* Section headers — bigger */
.training-page .pricing-section-head h2{font-size:clamp(26px,3.2vw,32px);letter-spacing:-.015em}
.training-page .pricing-section-head p{font-size:15.5px;line-height:1.55}

/* Mobile */
@media(max-width:768px){
    .training-hero-v2{padding:42px 20px 32px;border-radius:18px}
    .training-hero-v2 .pricing-title{font-size:clamp(28px,8vw,36px)}
    .training-hero-v2 .pricing-hero-cta{flex-direction:column;align-items:stretch;gap:10px}
    .training-hero-v2 .phero-btn,.training-hero-v2 .phero-btn-ghost{justify-content:center;width:100%}
    .training-hero-v2 .phero-or{display:none}
    .thero-stats{grid-template-columns:1fr;gap:10px;max-width:100%}
    .thero-stat{padding:14px 16px}
    .training-hero-v2 .pricing-free-feats{grid-template-columns:1fr;gap:8px}
    .training-steps-v2{grid-template-columns:1fr;gap:12px}
    .pcard-ai-v2{padding:28px 22px}
    .pcard-ai-v2 .pcard-ai-glow{width:240px;height:240px;right:-80px;top:-80px}
}
@media(max-width:480px){
    .training-hero-v2 .pricing-title{font-size:28px}
    .training-hero-v2 .pricing-sub{font-size:14.5px}
    .pcard-price-row-pay{font-size:22px}
    .pcard-price-row-get .pcard-price-row-get-amt{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY PASS — match Polymarket's tighter scale (2026-04)
   Polymarket uses Inter at ~13–14.5px body / lighter weights.
   These overrides come last so they win the cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* Body baseline — tighten paragraph + lead text site-wide */
body{font-size:14px;letter-spacing:-.003em}
p{font-size:14px;line-height:1.55}

/* Article / guide content — keep readable but smaller than 17.5px */
.article-body{font-size:15.5px;line-height:1.68;letter-spacing:0}
.article-body p,.article-body li{font-size:15.5px}
.article-body h2{font-size:26px;font-weight:700}
.article-body h3{font-size:19px;font-weight:700}
.article-body h4{font-size:16px}

/* Pricing/training: smaller paragraphs to match Polymarket */
.pricing-sub{font-size:15px;line-height:1.55}
.pricing-section-head p{font-size:14.5px;line-height:1.5}
.training-step p{font-size:13.5px;line-height:1.55}
.thero-stat-label{font-size:12px}
.thero-stat-value{font-size:17px}
.pricing-free-feats li{font-size:13px}
.pcard-feats li{font-size:13px}
.pcard-tagline{font-size:13px}
.pricing-faq summary{font-size:14.5px;font-weight:600}
.pricing-faq details p{font-size:14px;line-height:1.6}
.pricing-fineprint{font-size:12.5px}

/* Card titles — slightly less heavy/big */
.pcard-name{font-size:18px;font-weight:700}
.pcard-amt{font-size:32px;font-weight:700}
.pcard-ai-title{font-size:clamp(22px,3vw,28px);font-weight:700}
.pcard-ai-sub{font-size:14.5px;line-height:1.6}
.pcard-ai-feats li{font-size:13.5px}

/* Market cards (mc-*) — already small but normalize weights */
.mc-title{font-size:12.5px;font-weight:500;line-height:1.35}
.mc-meta{font-size:11.5px}
/* binary Yes/No cards: reserve title-row height on desktop so the buttons aren't stuck at the top */
@media(min-width:769px){ .mc-binary .mc-header{ min-height: 48px } }
/* binary Yes/No cards (desktop): the lone Yes/No button row sits CENTERED inside the
   card. Free space is split evenly above + below the body (equal auto margins on
   .mc-body), so the buttons are balanced rather than stuck at the bottom; the volume
   footer stays pinned at the bottom and the title at the top. Boxes are already
   equal-height via .markets-grid grid-auto-rows:1fr; this only places the content.
   Mobile is untouched. */
@media(min-width:769px){
  .mc-binary .mc-header{ margin-bottom: 0; }
  .mc-binary .mc-body{ margin-top: auto; margin-bottom: auto; }
  .mc-binary .mc-footer{ margin-top: 0; }
}
/* mobile: bump title + option-row text +1px (were too small) — title + option rows only */
@media(max-width:768px){
  .mc-title{font-size:13.5px}
  .mc-opt-name{font-size:11.5px}
  .mc-h2h-name{font-size:12px}
  .market-card .mc-opt-pct{font-size:13px}
  .mc-h2h-pct{font-size:13px}
}

/* Home sections / generic h2 — Polymarket uses 18–22px section heads */
.home-section-title,.section-title,.training-h2,.pricing-section-head h2{font-size:clamp(20px,2.4vw,24px);font-weight:700;letter-spacing:-.012em}
.home-hero h1{font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:-.018em}

/* Subnav already smaller (13/500) above. Mobile + extra-narrow */
@media(max-width:768px){
    body,p{font-size:13.5px}
    .subnav a{font-size:12.5px;padding:4px 9px}
    .article-body{font-size:15px;line-height:1.65}
    .article-body p,.article-body li{font-size:15px}
    .pricing-sub{font-size:14.5px}
    .training-step p{font-size:13px}
}
@media(max-width:480px){
    .subnav a{font-size:12px;padding:3px 8px}
    body,p{font-size:13.5px}
}

/* Buttons — Polymarket favors 600 weight at 13–14px */
.btn,button{letter-spacing:-.003em}
.phero-btn,.phero-btn-ghost,.pcard-cta{font-size:14.5px;font-weight:600}
.hdr-poly-cta{font-size:13.5px;font-weight:600}
.hdr-deposit{font-size:13.5px;font-weight:600}
.tm-toggle{font-size:13px;font-weight:600}

/* Polymarket uses softer text-secondary — keep our tokens but reduce p heaviness */
.pricing-section-head p,.pcard-tagline,.thero-stat-label,.training-step p{color:var(--text-muted)}

/* ═══ pm-event-chart shortcode ═══════════════════════════════════ */
.pm-event-chart{
    margin: 28px 0;
    padding: 18px 18px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pm-event-chart-head{
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pm-event-chart-title{
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}
.pm-event-chart-canvas-wrap{
    position: relative;
    width: 100%;
    height: 320px;
}
@media (max-width: 640px){
    .pm-event-chart-canvas-wrap{ height: 260px; }
    .pm-event-chart{ padding: 14px 12px 10px; }
}
.pm-event-chart-source{
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-dim, #6B7280);
    text-align: end;
    opacity: 0.75;
    letter-spacing: 0.02em;
}
.pm-event-chart-source a{
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.18);
    text-underline-offset: 2px;
}
.pm-event-chart-source a:hover{ color: var(--text-secondary); opacity: 1; }
.pm-event-chart-source::before{ content: "Source: "; opacity: 0.65; }
:lang(he) .pm-event-chart-source::before{ content: "מקור: "; }
:lang(ar) .pm-event-chart-source::before{ content: "المصدر: "; }

/* ═══ GUIDE LOBBY v3 — full-bleed image + reveal-on-hover ═══════════════ */
/* v4 hero — big, impressive intro band with gradient backdrop */
.gsec-intro{
    position: relative;
    padding: 56px 28px 40px;
    margin: 12px 0 28px;
    border-radius: 20px;
    background:
        radial-gradient(900px 360px at 12% 14%, rgba(49,94,255,.18), transparent 65%),
        radial-gradient(800px 380px at 92% 86%, rgba(168,85,247,.14), transparent 60%),
        linear-gradient(180deg, #131820 0%, #0F141A 100%);
    border: 1px solid var(--border);
    overflow: hidden;
    isolation: isolate;
}
.gsec-intro::before{
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
}
.gsec-intro > *{ position: relative; z-index: 1; }
.gsec-intro .section-title{
    font: 800 clamp(32px, 4.4vw, 54px)/1.05 var(--font-body);
    letter-spacing: -.02em;
    background: linear-gradient(180deg, #fff 0%, #C7D3E0 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin: 0 0 14px;
    max-width: 24ch;
}
.gsec-intro .section-subtitle{
    font: 500 clamp(15px, 1.6vw, 18px)/1.55 var(--font-body);
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0;
}
[dir="rtl"] .gsec-intro .section-title{ background: linear-gradient(180deg, #fff 0%, #C7D3E0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 768px){
    .gsec-intro{ padding: 36px 18px 28px; border-radius: 16px; }
    .gsec-intro .section-title{ font-size: clamp(26px, 7vw, 36px); }
}
/* legacy reset */
.gsec-intro.gsec-intro-legacy{ padding-bottom: 8px; }

.gsec{ margin: 32px 0 0; padding: 0; }
.gsec + .gsec{ margin-top: 40px; }
.gsec-header{
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.gsec-ico{
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 18px;
}
.gsec-title{ font: 700 22px/1.2 var(--font-body); color: var(--text); letter-spacing: -.01em; margin: 0; }
.gsec-count{ font: 600 12.5px/1 var(--font-body); color: var(--text-muted); margin: 4px 0 0; }

.gsec-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1024px){ .gsec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .gsec-grid{ grid-template-columns: 1fr; gap: 12px; } }

/* card — image fills, gradient veil reveals content */
.gcard{
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border: 1px solid var(--border);
    background: #15191D;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s, border-color .25s;
}
.gcard:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 28px 60px rgba(0,0,0,.46);
    border-color: var(--border-light);
}

.gcard-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.04);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .35s;
    z-index: 0;
}
.gcard:hover .gcard-img{
    transform: scale(1.12);
    filter: brightness(.92) saturate(1.1);
}

.gcard-veil{
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(15,18,22,0) 30%,
        rgba(15,18,22,.55) 62%,
        rgba(15,18,22,.95) 100%);
    transition: opacity .35s;
}

/* level pill — top-start corner */
.gcard-pill{
    position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font: 700 10.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
}
.gcard-pill::before{
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.gcard-pill-beginner{ background: rgba(61,180,104,.22); color: #7DD3A0; border-color: rgba(61,180,104,.4); }
.gcard-pill-advanced{ background: rgba(49,94,255,.22);  color: #5DB8FF; border-color: rgba(49,94,255,.4); }
.gcard-pill-master  { background: rgba(168,85,247,.22); color: #C99CFF; border-color: rgba(168,85,247,.45); }

/* circular ordinal badge — top-end corner */
.gcard-num{
    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0,0,0,.55); color: #fff;
    font: 900 16px/1 var(--font-body); letter-spacing: -.03em;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s;
    pointer-events: none;
}
.gcard:hover .gcard-num{
    transform: scale(1.08) rotate(-4deg);
    background: var(--accent);
    border-color: var(--accent);
}

/* content slides up + desc reveals on hover */
.gcard-content{
    position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
    padding: 16px 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
    transform: translateY(18px);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.gcard:hover .gcard-content{ transform: translateY(0); }

.gcard-title{
    font: 900 26px/1.18 var(--font-body); margin: 0;
    color: #fff; letter-spacing: -.022em;
    text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.gcard-desc{
    font: 12.5px/1.5 var(--font-body); color: rgba(255,255,255,.82);
    margin: 0;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .35s;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.gcard:hover .gcard-desc{ max-height: 80px; opacity: 1; }

.gcard-cta{
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px;
    font: 600 12px/1 var(--font-body); color: #fff;
    transform: translateY(8px); opacity: 0;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.gcard-cta::after{
    content: "→"; display: inline-block; transition: transform .25s;
}
[dir="rtl"] .gcard-cta::after{ content: "←"; }
.gcard:hover .gcard-cta{ transform: translateY(0); opacity: 1; }
.gcard:hover .gcard-cta::after{ transform: translateX(-4px); }
[dir="rtl"] .gcard:hover .gcard-cta::after{ transform: translateX(4px); }

/* mobile: tidy + compact, no hover-reveal (touch) → always show title */
@media (max-width: 768px){
    .gsec{ margin-top: 24px; }
    .gsec-header{ margin-bottom: 14px; padding-bottom: 12px; }
    .gsec-title{ font-size: 18px; }
    .gsec-ico{ width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
    .gsec-count{ font-size: 11.5px; }

    .gcard{ aspect-ratio: 4 / 3; border-radius: 12px; }
    .gcard-veil{
        background: linear-gradient(180deg,
            rgba(15,18,22,0) 35%,
            rgba(15,18,22,.7) 70%,
            rgba(15,18,22,.96) 100%);
    }
    .gcard-pill{ top: 8px; inset-inline-start: 8px; padding: 3px 8px; font-size: 9.5px; }
    .gcard-num{ width: 34px; height: 34px; font-size: 13px; top: 8px; inset-inline-end: 8px; }
    .gcard-content{ padding: 10px 12px 12px; transform: none; }
    .gcard-title{ font-size: 20px; line-height: 1.18; font-weight: 900; letter-spacing: -.018em; }
    .gcard-desc, .gcard-cta{ display: none; }
}
/* Phones: switch image tiles -> compact list rows (thumb + always-visible title/desc).
   Hover-reveal doesn't exist on touch, so content must show by default. */
@media (max-width: 560px){
    .gsec-grid{ grid-template-columns: 1fr; gap: 9px; }
    .gcard{ aspect-ratio: auto; min-height: 90px; border-radius: 12px; background: #181D21; }
    .gcard:hover{ transform: none; box-shadow: none; }
    .gcard-img{
        width: 94px; right: auto; height: 100%; transform: none;
        border-start-start-radius: 12px; border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 12px;
    }
    .gcard:hover .gcard-img{ transform: none; filter: none; }
    .gcard-veil{ display: none; }
    .gcard-content{
        position: static; transform: none; height: 100%;
        margin-inline-start: 94px; padding: 11px 14px;
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
    }
    .gcard-pill{ top: 7px; inset-inline-start: 7px; padding: 2px 6px; font-size: 8px; }
    .gcard-num{
        top: 8px; inset-inline-end: 10px; width: 22px; height: 22px; font-size: 11px;
        background: transparent; border: 0; color: var(--text-muted); font-weight: 800;
    }
    .gcard-title{
        font: 700 14.5px/1.25 var(--font-body); color: var(--text); letter-spacing: -.01em;
        text-shadow: none; margin: 0; padding-inline-end: 24px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .gcard-desc{
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        max-height: none; opacity: 1; margin: 0;
        font: 12px/1.45 var(--font-body); color: var(--text-secondary);
    }
    .gcard-cta{ display: none; }
    .gcard-read .gcard-img{ filter: grayscale(.5) brightness(.78); }
    .gcard-read::after{ top: auto; bottom: 8px; inset-inline-end: 8px; width: 19px; height: 19px; font-size: 10px; }
}

/* Touch tablets (>560px, no hover): the image tiles keep their look but reveal the
   description + CTA by default, since there's no hover to trigger them. */
@media (hover: none) and (min-width: 561px){
    .gcard-content{ transform: none; }
    .gcard-desc{ max-height: 80px; opacity: 1; }
    .gcard-cta{ transform: none; opacity: 1; }
}

/* M2: mark-as-read state — dim + checkmark on cards user has opened */
.gcard-read .gcard-img{ filter: grayscale(.6) brightness(.7); }
.gcard-read .gcard-veil{ opacity: .85; }
.gcard-read::after{
    content: "\2713"; /* check */
    position: absolute; top: 10px; inset-inline-end: 60px; z-index: 4;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(61,180,104,.95); color: #fff;
    font: 900 14px/1 var(--font-body);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.gcard-read:hover .gcard-img{ filter: grayscale(.2) brightness(.9); }

/* M3: signup gate modal */
.pm-gate-overlay{
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
    display: grid; place-items: center;
    animation: pm-gate-fade .25s ease-out;
}
@keyframes pm-gate-fade{ from{opacity:0} to{opacity:1} }
.pm-gate{
    background: var(--surface, #1a1f24);
    border: 1px solid var(--border, #2a2f35);
    border-radius: 16px;
    max-width: 440px; width: calc(100% - 32px);
    padding: 28px 24px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    text-align: center;
    color: var(--text, #fff);
    position: relative;
}
.pm-gate-title{ font: 800 22px/1.25 var(--font-body); margin: 0 0 10px; }
.pm-gate-body{ font: 14px/1.55 var(--font-body); color: var(--text-muted, #aab); margin: 0 0 18px; }
.pm-gate-cta{
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 12px 16px; margin-bottom: 8px;
    background: var(--accent, #315EFF); color: #fff;
    border: 0; border-radius: 10px;
    font: 700 14px/1 var(--font-body); cursor: pointer;
    text-decoration: none;
}
.pm-gate-cta:hover{ filter: brightness(1.1); }
.pm-gate-skip{
    display: inline-block; padding: 8px;
    background: transparent; color: var(--text-muted, #aab);
    border: 0; cursor: pointer;
    font: 500 13px/1 var(--font-body);
    text-decoration: underline;
}

/* ──── 3-option choice gate ──── */
.pm-gate-choice{
    max-width: 920px;
    text-align: center;
    padding: 32px 28px 22px;
}
.pm-gate-close{
    position: absolute; top: 12px; inset-inline-end: 12px;
    width: 32px; height: 32px;
    background: transparent; border: 0; border-radius: 8px;
    color: var(--text-muted, #aab); font-size: 22px; line-height: 1;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pm-gate-close:hover{ background: rgba(255,255,255,.06); color: var(--text, #fff); }
.pm-gate-choice .pm-gate-title{ font-size: 24px; margin-bottom: 8px; }
.pm-gate-choice .pm-gate-body{ font-size: 15px; margin-bottom: 24px; }
.pm-gate-options{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 16px;
}
.pm-gate-opt{
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px;
    padding: 22px 18px;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border, #2a2f35);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text, #fff);
    text-align: start;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    cursor: pointer;
}
.pm-gate-opt:hover{
    border-color: var(--accent, #6ea8ff);
    transform: translateY(-2px);
    background: rgba(110,168,255,.04);
}
.pm-gate-opt-icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(110,168,255,.12); color: var(--accent, #6ea8ff);
    margin-bottom: 4px;
}
.pm-gate-opt-icon svg{ width: 22px; height: 22px; }
.pm-gate-opt-account .pm-gate-opt-icon{ background: rgba(61,180,104,.12); color: #3db468; }
.pm-gate-opt-train   .pm-gate-opt-icon{ background: rgba(255,180,0,.14);  color: #ffb400; }
.pm-gate-opt-poly    .pm-gate-opt-icon{ background: rgba(110,168,255,.14); color: #6ea8ff; }
.pm-gate-opt-label{
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; color: var(--text-muted, #9aa3b2);
}
.pm-gate-opt-title{
    font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--text, #fff);
}
.pm-gate-opt-body{
    font-size: 13.5px; line-height: 1.5; color: var(--text-muted, #aab);
    flex: 1; min-height: 60px;
}
.pm-gate-opt-cta{
    margin-top: 4px;
    font-size: 13.5px; font-weight: 700;
    color: var(--accent, #6ea8ff);
}
.pm-gate-opt-account .pm-gate-opt-cta{ color: #3db468; }
.pm-gate-opt-train   .pm-gate-opt-cta{ color: #ffb400; }

@media (max-width: 760px){
    .pm-gate-choice{ max-width: 480px; padding: 24px 18px 16px; }
    .pm-gate-options{ grid-template-columns: 1fr; gap: 10px; }
    .pm-gate-opt{ flex-direction: row; align-items: center; gap: 14px; padding: 16px 14px; }
    .pm-gate-opt-icon{ width: 40px; height: 40px; margin-bottom: 0; flex-shrink: 0; }
    .pm-gate-opt-label, .pm-gate-opt-cta{ display: none; }
    .pm-gate-opt-title{ font-size: 15px; }
    .pm-gate-opt-body{ font-size: 13px; min-height: 0; -webkit-line-clamp: 2; }
    .pm-gate-opt-text{ flex: 1; }
}


/* ═══ NEW COMPONENTS — pm-kpi-grid / pm-feature-table / pm-market-card / pm-trade-sim / pm-quiz ═══ */

/* pm-kpi-grid */
.pm-kpi-grid{display:grid;gap:14px;margin:24px 0;grid-template-columns:repeat(auto-fit,minmax(min(100%, 160px), 1fr))}
.pm-kpi-grid-2{grid-template-columns:repeat(2,1fr)}
.pm-kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.pm-kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.pm-kpi-cell{padding:18px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(49,94,255,.06),rgba(63,185,80,.04));border:1px solid var(--border,rgba(255,255,255,.08));position:relative;overflow:hidden}
.pm-kpi-cell::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:3px;height:100%;background:var(--accent,#315EFF)}
.pm-kpi-val{font-size:26px;font-weight:800;line-height:1.1;color:var(--text-primary,#E6E8EB);letter-spacing:-.02em}
.pm-kpi-lbl{font-size:12px;font-weight:600;color:var(--text-dim,#6B7280);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.pm-kpi-trend{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-secondary)}
.pm-kpi-trend.pos{background:rgba(63,185,80,.12);color:#3FB950}
.pm-kpi-trend.neg{background:rgba(248,81,73,.12);color:#F85149}
.pm-kpi-sub{margin-top:4px;font-size:11px;color:var(--text-dim,#6B7280);font-style:italic}
@media (max-width:560px){.pm-kpi-grid-3,.pm-kpi-grid-4{grid-template-columns:repeat(2,1fr)}}

/* pm-feature-table */
.pm-ft-wrap{margin:24px 0;border-radius:12px;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.08))}
.pm-ft{width:100%;border-collapse:collapse;font-size:14px;background:var(--bg-card,#0f1218)}
.pm-ft thead th{background:rgba(49,94,255,.08);color:var(--text-primary);font-weight:700;text-align:start;padding:12px 14px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));font-size:13px;letter-spacing:.02em}
.pm-ft th.pm-ft-rowhead{background:rgba(49,94,255,.12)}
.pm-ft tbody td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-secondary);vertical-align:middle}
.pm-ft tbody tr:last-child td{border-bottom:none}
.pm-ft tbody tr:hover{background:rgba(49,94,255,.03)}
.pm-ft tbody td:first-child{font-weight:600;color:var(--text-primary)}
.pm-ft-yes{color:#3FB950;text-align:center;width:60px}
.pm-ft-no{color:#F85149;text-align:center;width:60px}
.pm-ft-na{color:var(--text-dim,#6B7280);text-align:center;width:60px}
.pm-ft-yes svg, .pm-ft-no svg{display:inline-block;vertical-align:middle}

/* pm-market-card */
.pm-mc{display:flex;align-items:center;gap:16px;padding:14px 18px;margin:24px 0;border-radius:14px;background:var(--bg-card,#0f1218);border:1px solid var(--border,rgba(255,255,255,.08));text-decoration:none;color:inherit;transition:all .15s ease;position:relative}
.pm-mc:hover{border-color:var(--accent,#315EFF);transform:translateY(-1px);background:var(--bg-hover,#161a22)}
.pm-mc-img{flex:0 0 56px;width:56px;height:56px;border-radius:10px;object-fit:cover;background:#1a1f29}
.pm-mc-img-ph{display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(135deg,rgba(49,94,255,.15),rgba(63,185,80,.1))}
.pm-mc-body{flex:1;min-width:0}
.pm-mc-title{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.3;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pm-mc-meta{display:flex;gap:14px;font-size:12px;color:var(--text-dim,#6B7280);flex-wrap:wrap}
.pm-mc-meta b{color:var(--text-secondary);font-weight:600}
.pm-mc-price{flex:0 0 auto;text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pm-mc-oc{font-size:10px;font-weight:700;color:var(--text-dim,#6B7280);text-transform:uppercase;letter-spacing:.08em}
.pm-mc-pct{font-size:22px;font-weight:800;color:#3FB950;line-height:1}
.pm-mc-cta{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--accent,#315EFF);padding:8px 14px;border-radius:8px;background:rgba(49,94,255,.1);white-space:nowrap}
@media (max-width:560px){.pm-mc{flex-wrap:wrap}.pm-mc-cta{width:100%;text-align:center;margin-top:4px}}

/* pm-trade-sim */
.pm-ts{margin:24px 0;padding:18px;border-radius:14px;background:linear-gradient(135deg,rgba(49,94,255,.04),rgba(63,185,80,.03));border:1px solid var(--border,rgba(255,255,255,.08))}
.pm-ts-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pm-ts-icon{font-size:18px}
.pm-ts-title{font-size:14px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}
.pm-ts-market{font-size:12px;color:var(--text-dim,#6B7280);margin-inline-start:auto;font-style:italic}
.pm-ts-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:14px;align-items:end}
.pm-ts-field{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--text-dim,#6B7280);text-transform:uppercase;letter-spacing:.04em}
.pm-ts-field input{padding:10px 12px;border-radius:8px;background:var(--bg-card,#0f1218);border:1px solid var(--border,rgba(255,255,255,.1));color:var(--text-primary);font-size:16px;font-weight:700;width:100%;-moz-appearance:textfield}
.pm-ts-field input:focus{outline:none;border-color:var(--accent,#315EFF)}
.pm-ts-field input::-webkit-outer-spin-button,.pm-ts-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pm-ts-out{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;padding-inline-start:8px;border-inline-start:2px solid rgba(255,255,255,.06)}
.pm-ts-out>div{display:flex;flex-direction:column;gap:2px}
.pm-ts-k{font-size:10px;font-weight:600;color:var(--text-dim,#6B7280);text-transform:uppercase;letter-spacing:.05em}
.pm-ts-out b{font-size:16px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pm-ts-good{color:#3FB950 !important}
.pm-ts-bad{color:#F85149 !important}
.pm-ts-note{margin-top:12px;font-size:11px;color:var(--text-dim,#6B7280);text-align:center;font-style:italic;opacity:.7}
@media (max-width:640px){.pm-ts-grid{grid-template-columns:1fr 1fr}.pm-ts-out{grid-column:1/-1;border-inline-start:0;border-block-start:2px solid rgba(255,255,255,.06);padding-inline-start:0;padding-block-start:10px}}

/* pm-quiz — TEMPORARILY HIDDEN per owner request (May 10, 2026).
   To re-enable: remove the next line. Source HTML is preserved. */
.pm-q { display: none !important; }

.pm-q{margin:24px 0;padding:20px;border-radius:14px;background:var(--bg-card,#0f1218);border:1px solid var(--border,rgba(255,255,255,.08));border-inline-start:3px solid #FFB454}
.pm-q-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#FFB454;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.pm-q-icon{font-size:14px}
.pm-q-q{font-size:16px;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:14px}
.pm-q-opts{display:flex;flex-direction:column;gap:8px}
.pm-q-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--bg-hover,#161a22);border:1px solid var(--border,rgba(255,255,255,.08));color:var(--text-primary);text-align:start;cursor:pointer;font-size:14px;line-height:1.4;font-family:inherit;transition:all .15s ease;width:100%}
.pm-q-opt:hover:not(:disabled){border-color:var(--accent,#315EFF);background:rgba(49,94,255,.06)}
.pm-q-opt:disabled{cursor:default;opacity:.65}
.pm-q-opt.good{border-color:#3FB950;background:rgba(63,185,80,.1);color:#fff;opacity:1}
.pm-q-opt.bad{border-color:#F85149;background:rgba(248,81,73,.1);color:#fff;opacity:1}
.pm-q-opt.reveal{border-color:#3FB950;background:rgba(63,185,80,.06);opacity:1}
.pm-q-opt-mark{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;opacity:.4}
.pm-q-opt.good .pm-q-opt-mark,.pm-q-opt.reveal .pm-q-opt-mark{opacity:1;background:#3FB950;border-color:#3FB950}
.pm-q-opt.good .pm-q-opt-mark::before,.pm-q-opt.reveal .pm-q-opt-mark::before{content:"✓";display:block;color:#fff;font-size:12px;font-weight:900;text-align:center;line-height:14px}
.pm-q-opt.bad .pm-q-opt-mark{opacity:1;background:#F85149;border-color:#F85149}
.pm-q-opt.bad .pm-q-opt-mark::before{content:"✕";display:block;color:#fff;font-size:11px;font-weight:900;text-align:center;line-height:14px}
.pm-q-result{margin-top:14px;padding:10px 14px;border-radius:8px;font-weight:700;font-size:14px}
.pm-q-result.good{background:rgba(63,185,80,.1);color:#3FB950}
.pm-q-result.bad{background:rgba(248,81,73,.1);color:#F85149}
.pm-q-explain{margin-top:10px;padding:10px 14px;border-radius:8px;background:rgba(49,94,255,.06);color:var(--text-secondary);font-size:13px;line-height:1.5}
.pm-q-explain b{color:var(--accent,#315EFF)}

/* ═══ Leaderboard ═══ */
.lb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 14px;border-bottom:1px solid var(--border)}
.lb-tab{background:transparent;border:0;color:var(--text-secondary);font:600 14px/1 var(--font-body);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;border-radius:0;transition:color .15s ease, border-color .15s ease}
.lb-tab:hover{color:var(--text)}
.lb-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.lb-board{display:flex;flex-direction:column;gap:6px;margin-bottom:48px}
.lb-row{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card,#1a1d22)}
.lb-rank{font:800 18px/1 'IBM Plex Mono','Inter',monospace;color:var(--text-secondary);text-align:center;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.lb-name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-meta{color:var(--text-secondary);font-size:12px;direction:ltr;unicode-bidi:isolate}
.lb-pnl{font:800 15px/1 'IBM Plex Mono','Inter',monospace;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.lb-pnl.pos{color:#3FB950}
.lb-pnl.neg{color:#F85149}
.lb-empty{padding:40px 16px;text-align:center;color:var(--text-secondary);border:1px dashed var(--border);border-radius:12px;background:var(--card,#1a1d22)}
@media(max-width:640px){
    .lb-row{grid-template-columns:36px 1fr auto;gap:10px;padding:10px 12px}
    .lb-meta{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   TRAINING / PRICING — tidy redesign (trn-*) · one calm surface, design-system vars
   ════════════════════════════════════════════════════════════════════════════ */
.trn-page{color:var(--text)}
.trn-page *{box-sizing:border-box}
.trn-wrap{max-width:1080px;padding-top:8px;padding-bottom:40px}
.trn-sec{margin:0 0 56px}
.trn-sec:last-child{margin-bottom:8px}

/* shared eyebrow + section head */
.trn-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--text-secondary);padding:5px 12px;border-radius:999px;
    background:var(--bg-hover);border:1px solid var(--border)}
.trn-eyebrow i{font-size:11px}
.trn-eyebrow--ok{color:#3FB950;background:rgba(63,185,80,.10);border-color:rgba(63,185,80,.22)}
.trn-eyebrow--gold{color:#E3B341;background:rgba(227,179,65,.10);border-color:rgba(227,179,65,.22)}
.trn-eyebrow--soon{color:var(--accent);background:var(--accent-soft);border-color:rgba(49,94,255,.22)}
.trn-head{text-align:center;max-width:680px;margin:0 auto 28px}
.trn-head h2{font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin:14px 0 8px;color:var(--text-strong)}
.trn-head p{font-size:15.5px;line-height:1.55;color:var(--text-secondary);margin:0}

/* buttons */
.trn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:var(--radius-sm);
    font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;line-height:1;
    transition:filter .15s ease,transform .05s ease,background .15s ease,border-color .15s ease}
.trn-btn i{font-size:13px}
.trn-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.trn-btn--primary:hover{filter:brightness(1.08);color:#fff}
.trn-btn--primary:active{transform:scale(.99)}
.trn-btn--lg{padding:16px 34px;font-size:16px;border-radius:var(--radius)}
.trn-btn--pkg{width:100%;background:var(--bg-hover);color:var(--text);border-color:var(--border)}
.trn-btn--pkg:hover{border-color:var(--accent);color:var(--text)}

/* checklist (shared free + package + ai) */
.trn-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.trn-checks li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:var(--text)}
.trn-checks li i{color:#3FB950;font-size:11px;margin-top:4px;flex-shrink:0}
.trn-checks--sm li{font-size:13px;gap:8px}

/* generic card */
.trn-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px}

/* ── HERO ──────────────────────────────────────────────── */
.trn-hero{text-align:center;padding:24px 0 8px}
.trn-hero-title{font-size:clamp(28px,4.4vw,46px);font-weight:800;line-height:1.18;letter-spacing:-.02em;margin:16px 0 14px;color:var(--text-strong)}
.trn-hero-sub{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--text-secondary);max-width:680px;margin:0 auto 24px}
.trn-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.trn-hero{}
.trn-hero .trn-hero-cta{justify-content:center}
.trn-hero-cta--center{justify-content:center}
.trn-hero-note{display:block;font-size:13px;color:var(--text-muted);margin-top:12px}

/* hero stat trio */
.trn-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:680px;margin:34px auto 0}
.trn-stat{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.trn-stat-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent);font-size:15px;margin-bottom:2px}
.trn-stat-val{font:800 24px/1 'IBM Plex Mono','Inter',monospace;color:var(--text-strong)}
.trn-stat-lbl{font-size:12px;color:var(--text-secondary);font-weight:600;text-align:center}

/* ── FREE BASELINE + HOW (2-col) ──────────────────────── */
.trn-grid2{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;align-items:stretch}
.trn-free-amt{font:800 44px/1 'IBM Plex Mono','Inter',monospace;color:var(--text-strong);margin:16px 0 4px}
.trn-free-cap{font-size:13px;color:var(--text-secondary);margin:0 0 20px}
.trn-how-title{font-size:20px;font-weight:800;line-height:1.25;margin:14px 0 18px;color:var(--text-strong)}
.trn-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.trn-step{display:flex;gap:14px;align-items:flex-start}
.trn-step-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font:800 14px/1 'IBM Plex Mono','Inter',monospace;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(49,94,255,.22)}
.trn-step-body h3{font-size:15.5px;font-weight:700;margin:4px 0 5px;color:var(--text)}
.trn-step-body p{font-size:13.5px;line-height:1.5;color:var(--text-secondary);margin:0}

/* ── PACKAGES ─────────────────────────────────────────── */
.trn-pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.trn-pkg{position:relative;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:24px 20px 20px;transition:border-color .15s ease,transform .15s ease}
.trn-pkg:hover{border-color:var(--border-light);transform:translateY(-2px)}
.trn-pkg--featured{border-color:var(--accent)}
.trn-pkg--gold{border-color:rgba(227,179,65,.45)}
.trn-pkg-flag{position:absolute;top:-10px;inset-inline-start:20px;padding:4px 11px;border-radius:999px;font-size:10.5px;
    font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:#fff}
.trn-pkg--gold .trn-pkg-flag{background:#E3B341;color:#1b1500}
.trn-pkg-top{margin-bottom:16px}
.trn-pkg-name{font-size:18px;font-weight:800;margin:0 0 3px;color:var(--text-strong)}
.trn-pkg-tag{font-size:12.5px;color:var(--text-secondary);margin:0}
.trn-pkg-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.trn-pkg-pay{font:800 32px/1 'IBM Plex Mono','Inter',monospace;color:var(--text-strong)}
.trn-pkg-mult{font-size:11px;font-weight:800;color:#E3B341;padding:3px 8px;border-radius:999px;
    background:rgba(227,179,65,.10);border:1px solid rgba(227,179,65,.22);direction:ltr;unicode-bidi:isolate}
.trn-pkg-get{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 12px;margin-bottom:18px;border-radius:var(--radius-sm);
    background:var(--bg);border:1px solid var(--border)}
.trn-pkg-get-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.trn-pkg-get-amt{font:800 19px/1 'IBM Plex Mono','Inter',monospace;color:#3FB950;direction:ltr;unicode-bidi:isolate}
.trn-pkg .trn-checks{flex:1;margin-bottom:18px}
.trn-fineprint{margin:24px auto 0;max-width:620px;text-align:center;font-size:12.5px;color:var(--text-secondary);
    padding:12px 16px;border-radius:var(--radius-sm);background:var(--bg-surface);border:1px dashed var(--border)}
.trn-fineprint i{color:#E3B341;margin-inline-end:6px}

/* ── AI COACH ─────────────────────────────────────────── */
.trn-ai{display:grid;grid-template-columns:1.25fr 1fr;gap:0;padding:0;overflow:hidden}
.trn-ai-body{padding:30px}
.trn-ai-title{font-size:clamp(22px,2.6vw,28px);font-weight:800;line-height:1.25;margin:14px 0 10px;color:var(--text-strong)}
.trn-ai-sub{font-size:14.5px;line-height:1.55;color:var(--text-secondary);margin:0 0 16px}
.trn-ai-price{display:inline-block;font:800 18px/1 'IBM Plex Mono','Inter',monospace;color:var(--text);
    padding:7px 14px;border-radius:var(--radius-sm);background:var(--bg-hover);border:1px solid var(--border);
    margin-bottom:18px;direction:ltr;unicode-bidi:isolate}
.trn-ai-form{display:flex;gap:8px;flex-wrap:wrap}
.trn-ai-form input{flex:1;min-width:200px;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
    background:var(--bg-input);color:var(--text);font-size:14px;outline:none;transition:border-color .15s ease}
.trn-ai-form input::placeholder{color:var(--text-muted)}
.trn-ai-form input:focus{border-color:var(--accent)}
.trn-ai-form button{padding:12px 22px;border-radius:var(--radius-sm);border:1px solid var(--accent);font-size:14px;font-weight:700;
    background:var(--accent);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:filter .15s ease}
.trn-ai-form button:hover{filter:brightness(1.08)}
.trn-ai-thanks{margin-top:12px;color:#3FB950;font-weight:600;font-size:14px}
.trn-ai-feats{padding:30px;background:var(--bg);border-inline-start:1px solid var(--border);justify-content:center}

/* ── FAQ ──────────────────────────────────────────────── */
.trn-faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.trn-faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);overflow:hidden;
    transition:border-color .15s ease}
.trn-faq-item[open]{border-color:var(--border-light)}
.trn-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:16px 20px;font-size:15px;font-weight:700;color:var(--text);user-select:none}
.trn-faq-item summary::-webkit-details-marker{display:none}
.trn-faq-item summary i{font-size:13px;color:var(--text-secondary);transition:transform .2s ease;flex-shrink:0}
.trn-faq-item[open] summary i{transform:rotate(45deg);color:var(--accent)}
.trn-faq-a{padding:0 20px 18px;font-size:14px;line-height:1.6;color:var(--text-secondary)}

/* ── FINAL CTA ────────────────────────────────────────── */
.trn-final{text-align:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:44px 28px}
.trn-final-title{font-size:clamp(24px,3.4vw,36px);font-weight:800;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px;color:var(--text-strong)}
.trn-final-sub{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--text-secondary);max-width:600px;margin:0 auto 22px}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:920px){
    .trn-grid2{grid-template-columns:1fr}
    .trn-pkg-grid{grid-template-columns:repeat(2,1fr)}
    .trn-ai{grid-template-columns:1fr}
    .trn-ai-feats{border-inline-start:0;border-top:1px solid var(--border)}
}
@media (max-width:560px){
    .trn-sec{margin-bottom:40px}
    .trn-stats{grid-template-columns:1fr;max-width:340px}
    .trn-pkg-grid{grid-template-columns:1fr}
    .trn-hero-cta{flex-direction:column}
    .trn-btn{width:100%}
    .trn-ai-body,.trn-ai-feats{padding:24px}
}

/* ═══ MARKET TABS PANEL (Rules | Market Context | Market Review) ═══ */
.market-tabs-panel{
    margin-top:32px;
    padding-top:20px;
    border-top:1px solid var(--border);
    background:none;
}
.market-tabs-bar{
    display:flex;
    gap:22px;
    align-items:center;
    margin-bottom:14px;
    border-bottom:1px solid var(--border);
}
.market-tabs-bar .mt-tab{
    background:none;border:0;padding:6px 0 10px;
    font-size:14px;font-weight:600;
    color:var(--text-secondary,#9aa1ac);
    cursor:pointer;position:relative;
    font-family:inherit;
    transition:color .12s ease;
    line-height:1.2;
}
.market-tabs-bar .mt-tab:hover{color:var(--text,#fff);}
.market-tabs-bar .mt-tab.active{color:var(--text,#fff);font-weight:700;}
.market-tabs-bar .mt-tab.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;
    height:2px;background:var(--text,#fff);
    border-radius:2px;
}
.market-tabs-panel .mt-pane{display:none;padding-top:6px;}
.market-tabs-panel .mt-pane.active{display:block;}
.market-tabs-panel .mt-clamp{
    font-size:13.5px;line-height:1.65;color:var(--text);
    max-height:8.5em;overflow:hidden;position:relative;
    transition:max-height .2s ease;
}
.market-tabs-panel .mt-clamp.expanded{max-height:none;}
.market-tabs-panel .mt-clamp::after{
    content:"";position:absolute;inset-inline:0;bottom:0;height:42px;
    background:linear-gradient(180deg,transparent,var(--bg,#0d1117) 90%);
    pointer-events:none;
}
.market-tabs-panel .mt-clamp.expanded::after,
.market-tabs-panel .mt-clamp.no-fade::after{display:none;}
.market-tabs-panel .mt-clamp p{margin:0 0 10px;}
.market-tabs-panel .mt-clamp h3{
    font-size:13.5px;font-weight:700;margin:14px 0 6px;color:var(--text);
}
.market-tabs-panel .mt-clamp ul{margin:0 0 10px;padding-inline-start:18px;}
.market-tabs-panel .mt-clamp li{margin-bottom:4px;line-height:1.6;}
.market-tabs-panel .mt-clamp a{color:var(--accent,#6ea8ff);}
.market-tabs-panel .mt-toggle{
    margin-top:6px;background:none;border:0;padding:2px 0;
    color:var(--accent,#6ea8ff);font-size:12.5px;font-weight:600;
    cursor:pointer;font-family:inherit;
}
.market-tabs-panel .mt-toggle:hover{text-decoration:underline;}
.market-tabs-panel .mt-meta{
    margin-top:12px;font-size:11.5px;color:var(--text-secondary);
    display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;
}
.market-tabs-panel .mt-meta a{color:var(--accent,#6ea8ff);}
.market-tabs-panel .mt-sources{align-items:center;}
.market-tabs-panel .mt-src{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--bg-surface,#1a1f2a);
    padding:2px 7px;border-radius:999px;
    color:var(--text);font-size:11.5px;
    text-decoration:none;
    border:1px solid var(--border);
    line-height:1.5;
}
.market-tabs-panel .mt-src:hover{border-color:var(--accent,#6ea8ff);}
.market-tabs-panel .mt-src img{width:12px;height:12px;border-radius:2px;flex-shrink:0;}
.market-tabs-panel .mt-src-label{font-weight:600;color:var(--text);font-size:11.5px;}
@media (max-width:600px){
    .market-tabs-panel{margin-top:24px;padding-top:14px;}
    .market-tabs-bar{gap:16px;}
    .market-tabs-bar .mt-tab{font-size:13px;}
    .market-tabs-panel .mt-clamp{font-size:13px;line-height:1.6;max-height:7.5em;}
}


/* ============================================================
   Guide page v3 — byline, prev/next, author box, more-guides
   ============================================================ */
.article-byline{
    display:flex; align-items:center; gap:12px;
    margin: 14px 0 22px;
    padding: 10px 12px;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
}
.article-byline-link{
    display:flex; align-items:center; gap:12px;
    text-decoration:none; color:inherit;
}
.article-byline-link:hover .article-byline-name{ color: var(--accent, #6ea8ff); }
.article-byline-avatar{
    width:44px; height:44px; border-radius:50%; object-fit:cover;
    border: 2px solid var(--border);
    flex-shrink:0;
}
.article-byline-text{ display:flex; flex-direction:column; line-height:1.3; }
.article-byline-by{ font-size:12px; color: var(--text-muted, #9aa3b2); }
.article-byline-name{ font-size:15px; font-weight:700; color: var(--text); transition: color .15s ease; }
.article-byline-role{ font-size:12px; color: var(--text-muted, #9aa3b2); }

/* Prev / Next */
.article-prev-next{
    display:grid; grid-template-columns: 1fr 1fr; gap:14px;
    margin: 48px 0 28px;
}
.apn-card{
    display:flex; align-items:center; gap:12px;
    padding: 14px 16px;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration:none; color:inherit;
    transition: border-color .15s ease, transform .15s ease;
    min-height: 72px;
}
.apn-card:hover{ border-color: var(--accent, #6ea8ff); transform: translateY(-1px); }
.apn-empty{ background:transparent; border-color:transparent; pointer-events:none; }
.apn-prev{ text-align: start; }
.apn-next{ flex-direction: row-reverse; text-align: end; }
.apn-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.apn-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-muted, #9aa3b2); font-weight:600; }
.apn-title{ font-size:14.5px; font-weight:600; color: var(--text); line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.apn-arrow{ font-size:22px; color: var(--text-muted, #9aa3b2); flex-shrink:0; }
.apn-card:hover .apn-arrow{ color: var(--accent, #6ea8ff); }
[dir="rtl"] .apn-prev .apn-arrow{ transform: scaleX(-1); }
[dir="rtl"] .apn-next .apn-arrow{ transform: scaleX(-1); }

/* Author box (bottom) */
.article-author-box{
    margin: 32px 0;
    padding: 22px;
    background: linear-gradient(180deg, rgba(110,168,255,.06), transparent), var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.aab-head{ display:flex; gap:16px; align-items:center; margin-bottom: 14px; }
.aab-avatar{
    width:80px; height:80px; border-radius:50%; object-fit:cover;
    border: 3px solid var(--border);
    flex-shrink:0;
}
.aab-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.aab-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--accent, #6ea8ff); font-weight:700; }
.aab-name{ font-size:20px; font-weight:800; color: var(--text); line-height:1.2; }
.aab-role{ font-size:13px; color: var(--text-muted, #9aa3b2); }
.aab-bio{ font-size:14.5px; line-height:1.65; color: var(--text); margin: 0 0 14px; }
.aab-social{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.aab-social-link{
    display:inline-flex; align-items:center; gap:5px;
    padding: 6px 12px; font-size:12.5px; font-weight:600;
    background: rgba(110,168,255,.1); color: var(--accent, #6ea8ff);
    border: 1px solid rgba(110,168,255,.25);
    border-radius: 999px; text-decoration:none;
    transition: background .15s ease;
}
.aab-social-link:hover{ background: rgba(110,168,255,.2); }
.aab-archive{
    display:inline-block; font-size:13px; font-weight:600;
    color: var(--text-muted, #9aa3b2); text-decoration:none;
    transition: color .15s ease;
}
.aab-archive:hover{ color: var(--accent, #6ea8ff); }

/* More Guides */
.more-guides{ margin: 48px 0 32px; }
.more-guides-h2{ font-size: 22px; font-weight:800; margin: 0 0 18px; }
.more-guides-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mg-card{
    display:flex; flex-direction:column;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden; text-decoration:none; color:inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.mg-card:hover{ border-color: var(--accent, #6ea8ff); transform: translateY(-2px); }
.mg-thumb{ display:block; aspect-ratio: 16/9; overflow:hidden; background: var(--bg-deep, #0d1118); }
.mg-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .25s ease; }
.mg-card:hover .mg-thumb img{ transform: scale(1.04); }
.mg-body{ display:flex; flex-direction:column; gap:6px; padding: 14px; }
.mg-pill{
    display:inline-block; align-self:flex-start;
    font-size: 10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(110,168,255,.12); color: var(--accent, #6ea8ff);
}
.mg-pill-beginner{ background: rgba(61,180,104,.12); color: #3db468; }
.mg-pill-intermediate{ background: rgba(255,180,0,.12); color: #ffb400; }
.mg-pill-advanced{ background: rgba(255,93,93,.12); color: #ff5d5d; }
.mg-pill-master{ background: rgba(186,104,255,.12); color: #ba68ff; }
.mg-title{ font-size: 15px; font-weight: 700; color: var(--text); line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.mg-excerpt{ font-size: 13px; color: var(--text-muted, #9aa3b2); line-height:1.45;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.more-guides-all{
    display:inline-block; margin-top: 14px;
    font-size: 14px; font-weight: 600;
    color: var(--accent, #6ea8ff); text-decoration:none;
}
.more-guides-all:hover{ text-decoration: underline; }

@media (max-width: 900px){
    .more-guides-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 560px){
    .article-prev-next{ grid-template-columns: 1fr; gap: 10px; }
    .more-guides-grid{ grid-template-columns: 1fr; }
    .aab-head{ flex-direction: column; align-items: flex-start; gap: 10px; }
    .aab-avatar{ width:64px; height:64px; }
    .aab-name{ font-size:18px; }
    .article-byline{ width:100%; }
}

/* ============================================================
   Author profile page (/author/{slug}/)
   ============================================================ */
.author-profile{ max-width: 920px; margin: 24px auto; padding: 0 8px; }
.author-profile-head{
    display:flex; align-items:center; gap: 22px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(110,168,255,.08), transparent), var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 18px;
    margin-bottom: 22px;
}
.author-profile-avatar{
    width: 160px; height: 160px; border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--border);
    flex-shrink: 0;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.author-profile-meta{ display:flex; flex-direction:column; gap: 6px; min-width: 0; }
.author-profile-eyebrow{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent, #6ea8ff); font-weight: 700; }
.author-profile-name{ font-size: 32px; font-weight: 800; margin: 2px 0; line-height: 1.2; }
.author-profile-role{ font-size: 16px; color: var(--text-muted, #9aa3b2); margin-bottom: 8px; }
.author-profile-social{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.author-profile-bio{ padding: 0 4px; margin-bottom: 28px; }
.author-profile-bio p{ font-size: 16px; line-height: 1.7; color: var(--text); margin: 0; }
.author-profile-section{ padding: 0 4px; margin-bottom: 28px; }
.author-profile-section h2{ font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.author-profile-tags{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.author-profile-tags li{
    padding: 6px 14px; font-size: 13px; font-weight: 600;
    background: rgba(110,168,255,.1); color: var(--accent, #6ea8ff);
    border: 1px solid rgba(110,168,255,.25);
    border-radius: 999px;
}
.author-profile-list{ list-style: disc; padding-inline-start: 22px; margin: 0; }
.author-profile-list li{ font-size: 14.5px; line-height: 1.65; color: var(--text); margin-bottom: 6px; }

@media (max-width: 640px){
    .author-profile-head{ flex-direction: column; align-items: flex-start; padding: 18px; }
    .author-profile-avatar{ width: 112px; height: 112px; }
    .author-profile-name{ font-size: 24px; }
}

/* ============================================================
   Guide hero (combined: pill + h1 + lede + byline/meta + image)
   ============================================================ */
.guide-hero{
    display:grid; grid-template-columns: 1fr;
    gap: 18px;
    margin: 12px 0 28px;
    align-items: center;
}
.guide-hero.guide-hero-has-img{
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.guide-hero-text{ display:flex; flex-direction:column; gap: 10px; min-width:0; }
.guide-hero-pill{ align-self: flex-start; margin: 0; }
.guide-hero-title{
    font-size: 30px; font-weight: 800; line-height: 1.25;
    margin: 0;
    color: var(--text);
}
.guide-hero-lede{
    font-size: 15.5px; line-height: 1.55;
    color: var(--text-muted, #9aa3b2);
    margin: 0;   /* no truncation — show the full lede under the title (owner) */
}
.guide-hero-meta{
    display:flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-muted, #9aa3b2);
    margin-top: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border);   /* light divider under the byline/meta row */
}
/* name, read-time, date all sit on the same baseline; the "By" label rides above the name */
.guide-hero-meta-item, .guide-hero-name, .guide-hero-sep{ line-height: 1.2; }
.guide-hero-sep{ align-self: flex-end; }
.guide-hero-byline{
    display:inline-flex; align-items:center; gap: 8px;
    text-decoration: none; color: inherit;
    transition: color .15s ease;
}
.guide-hero-byline:hover .guide-hero-name{ color: var(--accent, #6ea8ff); }
.guide-hero-avatar{
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.guide-hero-byline-text{ display:flex; flex-direction: column; line-height: 1.2; }
.guide-hero-by{ font-size: 11px; color: var(--text-muted, #9aa3b2); }
.guide-hero-name{ font-size: 13.5px; font-weight: 700; color: var(--text); transition: color .15s ease; }
.guide-hero-meta-item{ font-size: 13px; color: var(--text-muted, #9aa3b2); }
.guide-hero-sep{ color: var(--text-muted, #9aa3b2); opacity: .6; }
.guide-hero-figure{
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--bg-deep, #0d1118);
    border: 1px solid var(--border);
}
.guide-hero-img{
    width: 100%; height: 100%; object-fit: cover; display:block;
}

@media (max-width: 900px){
    .guide-hero.guide-hero-has-img{ grid-template-columns: 1fr; }
    .guide-hero-figure{ order: -1; aspect-ratio: 16/9; }
    .guide-hero-title{ font-size: 24px; }
}
@media (max-width: 560px){
    .guide-hero{ gap: 14px; margin-bottom: 22px; }
    .guide-hero-title{ font-size: 22px; line-height: 1.3; }
    .guide-hero-lede{ font-size: 14px; -webkit-line-clamp: 2; }
    .guide-hero-meta{ font-size: 12px; gap: 6px; }
    .guide-hero-avatar{ width: 32px; height: 32px; }
    .guide-hero-figure{ border-radius: 12px; }
}

/* Hide legacy article-hero figure (replaced by guide-hero-figure) */
.is-guide-page .article-hero{ display:none; }

/* ============================================================
   Guide hub hero v5 (refined) — owner: 'h1 not designed' fix
   ============================================================ */
.gsec-intro{
    padding: 64px 36px 56px;
    margin: 16px 0 32px;
    border-radius: 22px;
    min-height: 220px;
    display: flex; flex-direction: column; justify-content: center;
    background:
        radial-gradient(900px 380px at 12% 14%, rgba(49,94,255,.22), transparent 65%),
        radial-gradient(800px 380px at 92% 86%, rgba(168,85,247,.18), transparent 60%),
        linear-gradient(180deg, #131820 0%, #0F141A 100%);
    border: 1px solid var(--border);
    overflow: hidden; isolation: isolate;
    position: relative;
}
.gsec-intro::after{
    /* subtle accent line */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(49,94,255,.5), rgba(168,85,247,.5), transparent);
    z-index: 1;
}
.gsec-intro .section-title{
    font: 800 clamp(34px, 5vw, 56px)/1.05 var(--font-body) !important;
    letter-spacing: -.025em !important;
    background: linear-gradient(135deg, #ffffff 0%, #B8C5D6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin: 0 0 14px !important;
    max-width: 22ch;
    text-shadow: none;
}
.gsec-intro .section-subtitle{
    font: 500 clamp(15px, 1.6vw, 19px)/1.55 var(--font-body) !important;
    color: rgba(229,231,235,.78) !important;
    max-width: 60ch;
    margin: 0 !important;
}
@media (max-width: 768px){
    .gsec-intro{ padding: 44px 22px 36px; min-height: 0; }
    .gsec-intro .section-title{ font-size: clamp(28px, 7vw, 38px) !important; }
}

/* ============================================================
   gcard-read tick — move to bottom-end so it doesn't fight
   the gcard-num order badge in the top corner
   ============================================================ */
.gcard-read::after{
    content: "\2713";
    position: absolute;
    top: auto !important; bottom: 12px;
    inset-inline-end: 12px !important; inset-inline-start: auto !important;
    z-index: 4;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #3DB468, #2A9954); color: #fff;
    font: 900 16px/1 var(--font-body);
    border: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 14px rgba(61,180,104,.45);
}
@media (max-width: 560px){
    .gcard-read::after{ width: 26px; height: 26px; bottom: 8px; font-size: 14px; }
}

/* ============================================================
   Owner directive: 'font not fully white, but headings keep white'
   Body text is off-white (--text now #E5E7EB), headings stay #FFF.
   ============================================================ */
h1, h2, h3, h4, h5, h6 { color: var(--text-strong, #FFFFFF); }
.guide-hero-title,
.guide-hero-name,
.aab-name,
.author-profile-name,
.mg-title,
.section-title,
.gcard-title,
.market-page-title,
.featured-title { color: var(--text-strong, #FFFFFF); }

/* pm-feature-table caption (used when `first` is demoted from rowhead) */
.pm-ft-caption{
    caption-side: top;
    text-align: start;
    font: 700 14px/1.3 var(--font-body);
    color: var(--text-strong, #FFFFFF);
    padding: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

/* ============================================================
   Post-content section refinement (after main article body)
   Owner: 'refine content after main content, sidebars'
   ============================================================ */

/* Visual separator between body and post-content stack */
.article-prev-next{
    margin: 56px 0 32px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}
.article-author-box{
    margin: 0 0 36px;       /* tighter top because prev/next has bottom-margin */
    padding: 26px 28px;
    border-radius: 18px;
}
.article-author-box .aab-head{ margin-bottom: 16px; gap: 18px; }
.article-author-box .aab-name{ font-size: 21px; }
.article-author-box .aab-bio{ font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 16px; }

.more-guides{ margin: 0 0 48px; }
.more-guides-h2{
    font-size: 24px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.more-guides-grid{ gap: 18px; }
.mg-card{ border-radius: 16px; }
.mg-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.mg-body{ padding: 16px 16px 18px; gap: 7px; }
.mg-title{ font-size: 16px; font-weight: 700; }
.more-guides-all{
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--accent);
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease;
}
.more-guides-all:hover{
    border-color: var(--accent);
    background: rgba(110,168,255,.08);
    text-decoration: none;
}

/* Sidebar (TOC + All Guides) refinement
   NOTE (May 10, 2026): the legacy `.article-toc` sticky rule was removed —
   the sidebar variant has been using `.rail-toc` for a while, and the only
   element with class="article-toc" today is the inline in-content TOC
   (styled below under `.article-body .article-toc`). Keeping this comment
   so future readers don't re-introduce the sticky rule and break the
   in-content TOC by pinning it to the viewport. */
.article-toc .toc-title{
    font: 700 11px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.article-toc .toc-list{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.article-toc .toc-list a{
    display: block;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease;
    border-inline-start: 2px solid transparent;
}
.article-toc .toc-list a:hover{
    color: var(--text-strong, #fff);
    background: rgba(110,168,255,.06);
}
.article-toc .toc-list a.active,
.article-toc .toc-list a[aria-current="true"]{
    color: var(--accent);
    border-inline-start-color: var(--accent);
    background: rgba(110,168,255,.10);
    font-weight: 600;
}

/* Desktop: pin the TOC sidebar so it stays in view while reading. Scrollspy active
   state is driven by app.js initTOC(). Scoped to .article-toc-wrap (sidebar wrapper)
   NOT bare .article-toc, so the inline in-content TOC is never pinned. Wrapper is
   already display:none <=1024px. align-self:start lets sticky engage inside the grid;
   internal scroll handles sidebars taller than the viewport. */
@media (min-width: 1025px) {
    .article-layout > .article-toc-wrap {
        position: sticky;
        top: 108px;
        align-self: start;
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .article-layout > .article-toc-wrap::-webkit-scrollbar { width: 6px; }
    .article-layout > .article-toc-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
}

.article-toc-wrap .sidebar-section{
    margin-top: 18px;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 16px 12px;
}
.article-toc-wrap .sidebar-header{
    font: 700 11px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.article-toc-wrap .sidebar-item{
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease;
}
.article-toc-wrap .sidebar-item:hover{
    color: var(--text-strong, #fff);
    background: rgba(110,168,255,.06);
}
.article-toc-wrap .sidebar-item.active,
.article-toc-wrap .sidebar-item[style*="bg-hover"]{
    background: rgba(110,168,255,.10) !important;
    color: var(--accent) !important;
    font-weight: 600;
}
.article-toc-wrap .sidebar-link{
    display: inline-block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
}
.article-toc-wrap .sidebar-link::after{ content: ' \2192'; }

@media (max-width: 768px){
    .article-prev-next{ margin: 36px 0 24px; padding-top: 22px; }
    .article-author-box{ padding: 18px; margin-bottom: 28px; }
    .article-author-box .aab-name{ font-size: 19px; }
    .more-guides-h2{ font-size: 21px; margin-bottom: 16px; padding-bottom: 12px; }
}

/* ============================================================
   Contextual markets-strip — used on guides, author, faq,
   editorial-policy, methodology, about, authors-hub pages to
   surface live trending markets (was 0 across most of the site).
   ============================================================ */
.markets-strip{
    margin: 36px 0 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.markets-strip-head{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.markets-strip-h2{
    font-size: 22px; font-weight: 800; margin: 0;
    color: var(--text-strong, #fff);
}
.markets-strip-all{
    font-size: 13.5px; font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.markets-strip-all:hover{ text-decoration: underline; }
.markets-strip-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}
@media (max-width: 768px){
    .markets-strip{ margin: 28px 0 24px; padding-top: 22px; }
    .markets-strip-h2{ font-size: 19px; }
    .markets-strip-grid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
}
@media (max-width: 480px){
    .markets-strip-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Bot-tutorial series — pm-code-tabs (Python/Rust/Node.js)
   LTR-enforced even inside RTL pages
   ============================================================ */
.pm-code-tabs{
    direction: ltr; unicode-bidi: embed;
    margin: 22px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-deep, #0d1118);
}
.pm-code-tabs .pmct-bar{
    display: flex;
    background: var(--bg-surface, #161b24);
    border-bottom: 1px solid var(--border);
    padding: 0 4px;
    direction: ltr;
}
.pm-code-tabs .pmct-tab{
    background: transparent;
    border: 0;
    padding: 10px 18px;
    color: var(--text-muted, #9aa3b2);
    font: 600 12.5px/1 var(--font-body);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.pm-code-tabs .pmct-tab:hover{ color: var(--text-strong, #fff); }
.pm-code-tabs .pmct-tab.active{
    color: var(--accent, #6ea8ff);
    border-bottom-color: var(--accent, #6ea8ff);
}
.pm-code-tabs .pmct-panel{
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed;
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    font: 13px/1.6 ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    color: #e5e7eb;
    background: var(--bg-deep, #0d1118);
}
.pm-code-tabs .pmct-panel code{
    font-family: inherit;
    background: transparent;
    padding: 0;
    direction: ltr;
}
/* Standalone <pre>/<code> outside tabs — always LTR */
pre[dir="ltr"], pre[dir="ltr"] code{ direction: ltr !important; text-align: left !important; }
[dir="rtl"] pre, [dir="rtl"] code{ direction: ltr; text-align: left; unicode-bidi: embed; }

/* ============================================================
   Bot-tutorial series — pm-vps-affiliates
   ============================================================ */
.pm-aff-section{ margin: 32px 0; }
.pm-aff-heading{ font-size: 24px; font-weight: 800; margin: 0 0 10px; color: var(--text-strong, #fff); }
.pm-aff-blurb{ font-size: 15px; line-height: 1.65; color: var(--text); margin: 0 0 22px; }
.pm-aff-disclosure{
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(154,163,178,.06);
    border-inline-start: 3px solid var(--text-muted, #9aa3b2);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-muted, #9aa3b2);
    line-height: 1.5;
}
.pm-aff-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}
.pm-aff-card{
    position: relative;
    padding: 22px 20px 24px;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex; flex-direction: column;
}
.pm-aff-primary{
    border: 2px solid var(--accent, #6ea8ff);
    background: linear-gradient(180deg, rgba(110,168,255,.08), transparent), var(--bg-surface, #161b24);
    box-shadow: 0 8px 26px rgba(110,168,255,.12);
}
.pm-aff-badge{
    position: absolute; top: -10px; inset-inline-start: 16px;
    padding: 4px 10px;
    background: var(--accent, #6ea8ff);
    color: #0d1118;
    font: 800 10.5px/1 var(--font-body);
    letter-spacing: .08em;
    border-radius: 999px;
}
.pm-aff-name{ font-size: 19px; font-weight: 800; margin: 0 0 4px; color: var(--text-strong, #fff); }
.pm-aff-tag{ font-size: 13.5px; color: var(--text-muted, #9aa3b2); margin: 0 0 14px; }
.pm-aff-procon{ display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 12px; }
.pm-aff-pros, .pm-aff-cons{ font-size: 13px; line-height: 1.5; }
.pm-aff-pros strong, .pm-aff-cons strong{ display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #9aa3b2); margin-bottom: 4px; }
.pm-aff-pros ul, .pm-aff-cons ul{ list-style: none; padding: 0; margin: 0; }
.pm-aff-pros li{ padding-inline-start: 16px; position: relative; color: var(--text); }
.pm-aff-pros li::before{ content: "+"; position: absolute; inset-inline-start: 0; color: #3db468; font-weight: 800; }
.pm-aff-cons li{ padding-inline-start: 16px; position: relative; color: var(--text-muted, #9aa3b2); }
.pm-aff-cons li::before{ content: "-"; position: absolute; inset-inline-start: 0; color: #c97a7a; font-weight: 800; }
.pm-aff-best{ font-size: 13px; color: var(--text); margin: 6px 0 14px; }
/* grid CTA = same market YES button (.outcome-buy.yes) as the callout, 1:1 */
.pm-aff-cta{
    display: block;
    margin-top: auto;
    min-height: 40px;
    padding: 10px 16px;
    background: #359A5E;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 9px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.05);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pm-aff-cta:hover{ transform: translateY(-1px); filter: brightness(1.08);
    box-shadow: 0 6px 15px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.07); }
.pm-aff-cta-pending{
    display: inline-block; margin-top: auto;
    padding: 10px 16px;
    background: rgba(154,163,178,.08); color: var(--text-muted, #9aa3b2);
    border-radius: 8px; text-align: center; font-size: 13px;
}

/* ===== TradingVPS recommendation banner — standard on-site section surface (#189 v4)
   Operator: "make the entire section more like our other sections design." Uses the
   same surface tokens as .market-card / .example-box (var(--bg-surface) + var(--border)
   + var(--radius)); green accents tie it to the market buy-form button. ===== */
.pm-aff-callout{
    position: relative;
    margin: 28px 0;
    padding: 22px 22px 20px;
    border-radius: var(--radius);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
/* ── Head: tag ribbon on top, then logo aligned to title+subtitle ──
   All text elements are PARENT-SCOPED (.pm-aff-callout …) so they beat the
   guide-body typography (.article-body h3/p — specificity 0,1,1) that was
   injecting 32px top-margins + wrong sizes and breaking the alignment. (#189) */
.pm-aff-callout .pm-aff-callout-tag{
    display: inline-flex; align-items: center; gap: 6px;
    font: 800 10px/1 var(--font-body);
    text-transform: uppercase; letter-spacing: .12em; color: var(--accent, #5bb7ff);
    padding: 5px 11px; border-radius: 999px; margin: 0 0 15px;
    border: 1px solid color-mix(in srgb, var(--accent, #5bb7ff) 45%, transparent);
    background: color-mix(in srgb, var(--accent, #5bb7ff) 12%, transparent);
}
.pm-aff-callout-head{ display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.pm-aff-callout-logo{
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    color: var(--accent, #5bb7ff); background: color-mix(in srgb, var(--accent, #5bb7ff) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #5bb7ff) 30%, transparent);
}
.pm-aff-callout-headtext{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-aff-callout .pm-aff-callout-title{ margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--text-strong, #fff); }
.pm-aff-callout .pm-aff-callout-sub{ margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--accent, #5bb7ff); }
.pm-aff-callout .pm-aff-callout-blurb{ margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--text); }
.pm-aff-callout-foot{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
/* CTA = pixel-identical to the market YES button (.outcome-buy.yes, "sport polish"
   block ~line 10153): solid #359A5E, white text, radius 9px, padding 10px 16px,
   min-height 40px, the same box-shadow + inset hairline, same hover lift. Operator
   #189 v5 — match the literal market YES button, not raw tokens. */
.pm-aff-callout-cta{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 10px 16px; border-radius: 9px; white-space: nowrap;
    background: #359A5E; color: #fff; text-decoration: none;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.05);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pm-aff-callout-cta:hover{ transform: translateY(-1px); filter: brightness(1.08);
    box-shadow: 0 6px 15px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.07); }
/* .article-body a (line ~5506) forces accent color + a border-bottom underline on these
   <a> buttons, overriding their own color → unreadable light-blue text + stray underline.
   These higher-specificity overrides restore the intended button text. (#189) */
/* guide-typography.css .article-body a (0,1,1) is a link-CHIP: it forces font-weight:500,
   border-radius:2px, an underline, and a blue hover background — all of which leaked onto the
   in-page CTA (the v5 side-by-side missed it because the clone sat OUTSIDE .article-body).
   Re-assert the market-YES-button geometry here so the REAL in-page button matches 1:1. (#189) */
.article-body a.pm-aff-callout-cta, .article-body a.pm-aff-callout-cta:hover{ color: #fff; border-bottom: 0; text-decoration: none; border-radius: 9px; font-weight: 700; background: #359A5E; }
.article-body a.pm-aff-cta, .article-body a.pm-aff-cta:hover{ color: #fff; border-bottom: 0; text-decoration: none; border-radius: 9px; font-weight: 700; background: #359A5E; }
/* #206: the green callout-CTA rule above (0,2,1) defeats the .pm-btn3d--red modifier (0,1,0),
   so an AFFILIATE callout-CTA (TradingVPS, per #100 = RED) was rendering green. Re-assert red
   only when the --red modifier is present (0,3,1) - the plain green #189 coupon CTA is untouched. */
.article-body a.pm-aff-callout-cta.pm-btn3d--red, .article-body a.pm-aff-callout-cta.pm-btn3d--red:hover{ background: var(--red,#CB3131); }
/* plain, unboxed disclosure inside the callout (the boxed one stays for the comparison grid) */
.pm-aff-callout .pm-aff-disclosure{
    flex: 1 1 200px; margin: 0; padding: 0;
    background: none; border: none; border-radius: 0;
    font-size: 11.5px; line-height: 1.45; color: var(--text-muted, #9aa3b2);
}

/* ── CONFLICT-PROOFING (#189) ─────────────────────────────────────────────
   Every banner element below uses a semantic tag (h2/h3/h4/p/ul/li/strong)
   that lives inside .article-body, so the guide-typography rules
   (.article-body h2/h3/h4/p/ul/li/strong — specificity 0,1,1) override the
   component's single-class rules (0,1,0) and inject large margins, oversized
   fonts and list padding. These PARENT-SCOPED re-assertions (0,2,0) win and
   pin the component to its intended values so nothing leaks in. */
.pm-aff-callout .pm-aff-regions{ margin: 9px 2px 0; font-size: 12px; line-height: 1.5; }
.pm-aff-section .pm-aff-heading{ margin: 0 0 10px; padding: 0; border: 0; font-size: 24px; font-weight: 800; line-height: 1.25; }
.pm-aff-section .pm-aff-blurb{ margin: 0 0 22px; font-size: 15px; line-height: 1.65; }
.pm-aff-section .pm-aff-disclosure{ font-size: 12.5px; line-height: 1.5; }
.pm-aff-card .pm-aff-name{ margin: 0 0 4px; font-size: 19px; font-weight: 800; line-height: 1.2; }
.pm-aff-card .pm-aff-tag{ margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; }
.pm-aff-card .pm-aff-best{ margin: 6px 0 14px; font-size: 13px; line-height: 1.5; }
.pm-aff-card .pm-aff-regions{ margin: 11px 0 0; font-size: 12px; line-height: 1.5; }
.pm-aff-card .pm-aff-procon ul{ margin: 0; padding: 0; }
.pm-aff-card .pm-aff-procon li{ margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.pm-aff-card .pm-aff-pros strong, .pm-aff-card .pm-aff-cons strong{ font-size: 11px; font-weight: 700; }

@media (max-width: 560px){
    .pm-aff-section .pm-aff-heading{ font-size: 20px; }
    .pm-aff-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   /authors/ hub page — grid of author cards
   ============================================================ */
.authors-page{ max-width: 920px; margin: 24px auto; padding: 0 8px; }
.authors-page h1{ font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin: 8px 0 14px; color: var(--text-strong, #fff); }
.authors-page .page-intro{ font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 28px; }

.authors-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 22px 0 32px;
}
.author-card{
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(110,168,255,.06), transparent), var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 16px;
    align-items: start;
}
.author-card .author-avatar{
    width: 120px; height: 120px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.author-card .author-meta{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.author-card .author-meta h2{
    font-size: 22px; font-weight: 800; margin: 0;
    color: var(--text-strong, #fff);
}
.author-card .author-role{
    font-size: 14px; color: var(--accent, #6ea8ff);
    font-weight: 600; margin: 0 0 6px;
    text-transform: uppercase; letter-spacing: .04em;
}
.author-card .author-bio{
    font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0 0 6px;
}
.author-card .author-expertise{
    list-style: none; padding: 0; margin: 6px 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.author-card .author-expertise li{
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    background: rgba(110,168,255,.10); color: var(--accent, #6ea8ff);
    border: 1px solid rgba(110,168,255,.25); border-radius: 999px;
}
.author-card .author-credentials{
    font-size: 13px; line-height: 1.55;
    color: var(--text-muted, #9aa3b2);
    margin: 6px 0;
}
.author-card .author-credentials strong{ color: var(--text); }
.author-card .author-social{
    list-style: none; padding: 0; margin: 8px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.author-card .author-social li{ margin: 0; }
.author-card .author-social a{
    display: inline-block;
    padding: 5px 11px; font-size: 12.5px; font-weight: 600;
    background: rgba(110,168,255,.10); color: var(--accent, #6ea8ff);
    border: 1px solid rgba(110,168,255,.25); border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease;
}
.author-card .author-social a:hover{ background: rgba(110,168,255,.2); }

@media (max-width: 600px){
    .author-card{
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }
    .author-card .author-avatar{
        width: 88px; height: 88px;
    }
}

/* ============================================================
   /bots/ — Polymarket Bot Tutorial hub
   Mobile-native components: snap-scroll, sticky bar, bottom sheet
   ============================================================ */
.bot-hero {
    margin: 16px 0 30px;
    padding: 32px 28px 36px;
    background:
        radial-gradient(900px 380px at 12% 14%, rgba(49,94,255,.20), transparent 65%),
        radial-gradient(800px 380px at 92% 86%, rgba(168,85,247,.16), transparent 60%),
        linear-gradient(180deg, #131820 0%, #0F141A 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    position: relative;
}
.bot-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(49,94,255,.5), rgba(168,85,247,.5), transparent);
    z-index: 1;
}
.bot-hero-text { position: relative; z-index: 2; }
.bot-hero-eyebrow {
    display: inline-block;
    font: 700 11px/1 var(--font-body);
    letter-spacing: .12em;
    color: var(--accent);
    background: rgba(49,94,255,.12);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.bot-hero-title {
    font: 800 clamp(28px, 5vw, 48px)/1.12 var(--font-body) !important;
    letter-spacing: -.025em !important;
    background: linear-gradient(135deg, #ffffff 0%, #B8C5D6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin: 0 0 14px !important;
    max-width: 22ch;
}
.bot-hero-lede {
    font: 500 clamp(15px, 1.6vw, 17px)/1.6 var(--font-body);
    color: rgba(229,231,235,.85);
    margin: 0 0 22px;
    max-width: 60ch;
}
.bot-hero-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.bot-hero-stat { display: flex; flex-direction: column; gap: 2px; }
.bot-hero-stat strong { font-size: 22px; font-weight: 800; color: var(--text-strong, #fff); line-height: 1; }
.bot-hero-stat span { font-size: 12px; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
/* refined CTA on the bot hub hero - matches the blue/purple hero gradient */
.bot-hero .cta-btn{
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; font-size: 15px; font-weight: 800; border: none;
    background: linear-gradient(135deg, #315EFF, #7c5cff);
    color: #fff; border-radius: 12px;
    box-shadow: 0 6px 20px rgba(49,94,255,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bot-hero .cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(49,94,255,.50); background: linear-gradient(135deg, #315EFF, #7c5cff); }
/* refined CTA on the dev-guide "build a bot" banner */
.guide-bot-banner .gbb-cta{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; font-weight: 800; border: none; color: #fff;
    background: linear-gradient(135deg, var(--accent, #2d7ff9), #7c5cff);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(45,127,249,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.guide-bot-banner .gbb-cta:hover{ transform: translateY(-1px); box-shadow: 0 7px 20px rgba(45,127,249,.45); }
.bot-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 22px;
    background: var(--accent);
    color: #0d1118 !important;
    font: 700 14.5px var(--font-body);
    border-radius: 12px;
    text-decoration: none;
    transition: filter .15s ease, transform .15s ease;
}
.bot-hero-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

.bot-section-h { font-size: 22px; font-weight: 800; margin: 36px 0 6px; color: var(--text-strong, #fff); }
.bot-section-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; }

.bot-phases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.bot-phase {
    display: block;
    padding: 18px 16px;
    background: linear-gradient(180deg, rgba(49,94,255,.06), transparent), var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
}
.bot-phase:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.bot-phase-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.bot-phase-name { font-size: 15px; font-weight: 800; color: var(--text-strong, #fff); margin-bottom: 3px; }
.bot-phase-meta { font-size: 12px; color: var(--text-muted); }

.bot-vps-section { margin: 32px 0; }

.bot-all-section { margin: 36px 0; }
.bot-phase-block { margin-bottom: 32px; }
.bot-phase-block-h {
    display: flex; align-items: center; gap: 12px;
    font: 700 17px var(--font-body);
    color: var(--text-strong, #fff);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.bot-phase-block-icon { font-size: 22px; }
.bot-phase-block-count {
    margin-left: auto;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 999px;
}

.bot-chapter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bot-chapter-link {
    display: grid;
    grid-template-columns: 60px 1fr 24px;
    gap: 14px; align-items: center;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
}
.bot-chapter-link:hover { border-color: var(--accent); background: var(--bg-hover); text-decoration: none; }
.bot-chapter-num {
    font: 700 11px var(--font-body);
    color: var(--accent);
    text-align: center;
    letter-spacing: .04em;
    background: rgba(49,94,255,.10);
    padding: 6px 0;
    border-radius: 8px;
}
.bot-chapter-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bot-chapter-title { font-size: 14.5px; font-weight: 700; color: var(--text-strong, #fff); line-height: 1.35; }
.bot-chapter-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.bot-chapter-meta { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.bot-chapter-arrow { color: var(--text-muted); font-size: 20px; transition: transform .15s ease, color .15s ease; }
.bot-chapter-link:hover .bot-chapter-arrow { color: var(--accent); transform: translateX(3px); }

.bot-pill { display: inline-block; font: 700 9.5px var(--font-body); text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.bot-pill-beginner { background: rgba(61,180,104,.18); color: #7DD3A0; }
.bot-pill-intermediate { background: rgba(245,158,11,.18); color: #FFC158; }
.bot-pill-advanced { background: rgba(49,94,255,.22); color: #5DB8FF; }
.bot-pill-master { background: rgba(186,104,255,.22); color: #C99CFF; }

.bot-mob-bar { display: none; }
.bot-mob-sheet { display: none; }

@media (max-width: 768px) {
    .bot-hero { padding: 24px 20px 28px; border-radius: 18px; }
    .bot-hero-stats { gap: 18px; }
    .bot-hero-stat strong { font-size: 18px; }

    .bot-phases {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding: 4px 0 12px;
        margin: 0 -16px 6px;
        padding-left: 16px;
        padding-right: 16px;
        -webkit-overflow-scrolling: touch;
    }
    .bot-phases::-webkit-scrollbar { height: 0; }
    .bot-phase { flex: 0 0 180px; scroll-snap-align: start; }

    .bot-phase-block-h { font-size: 15px; }
    .bot-chapter-link { grid-template-columns: 48px 1fr 20px; gap: 10px; padding: 12px 14px; }
    .bot-chapter-num { font-size: 10px; padding: 5px 0; }
    .bot-chapter-title { font-size: 13.5px; }
    .bot-chapter-desc { font-size: 12px; }

    .bot-mob-bar {
        display: grid;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: rgba(21,25,29,.95); backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        padding: 10px 14px;
        grid-template-columns: 48px 1fr;
        gap: 10px;
        z-index: 90;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .bot-mob-fab {
        width: 48px; height: 48px;
        border-radius: 12px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 20px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .bot-mob-cta {
        display: flex; align-items: center; justify-content: center;
        padding: 12px;
        background: var(--accent);
        color: #0d1118 !important;
        border-radius: 12px;
        font: 700 14px var(--font-body);
        text-decoration: none;
    }

    .bot-mob-sheet {
        display: block;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--bg-surface);
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        padding: 12px 18px 22px;
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
        box-shadow: 0 -16px 40px rgba(0,0,0,.5);
        transform: translateY(0);
        transition: transform .3s ease-out;
        max-height: 78%;
        overflow-y: auto;
        z-index: 100;
    }
    .bot-mob-sheet.hidden { transform: translateY(110%); }
    .bot-mob-sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 999px; margin: 4px auto 14px; }
    .bot-mob-sheet h3 { font-size: 16px; font-weight: 800; color: var(--text-strong, #fff); margin-bottom: 14px; }
    .bot-mob-sheet-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .bot-mob-sheet-chip {
        display: block;
        padding: 12px 14px;
        background: var(--bg-deep);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        text-decoration: none;
        font: 600 14px var(--font-body);
    }
    .bot-mob-sheet-chip:hover { background: var(--bg-hover); text-decoration: none; }
    .bot-mob-sheet-close {
        width: 100%;
        padding: 12px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        font: 600 13px var(--font-body);
        cursor: pointer;
    }

    body.is-bots-page { padding-bottom: 80px; }
}

/* /bots/ hub refinements (post-feedback): flat list with phase eyebrows */
.bot-phase-eyebrow {
    list-style: none;
    margin: 28px 0 10px;
    padding: 8px 0 8px;
    font: 700 11px var(--font-body);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.bot-phase-eyebrow:first-child { margin-top: 8px; }
.bot-phase-eyebrow-icon { font-size: 16px; opacity: .8; }

/* Mobile sticky CTA only (no FAB, no sheet) */
.bot-mob-cta-only { display: none; }
@media (max-width: 768px) {
    .bot-mob-cta-only {
        display: flex; align-items: center; justify-content: center;
        position: fixed; bottom: 12px; left: 12px; right: 12px;
        padding: 14px;
        background: var(--accent);
        color: #0d1118 !important;
        border-radius: 14px;
        font: 700 14px var(--font-body);
        text-decoration: none;
        z-index: 90;
        box-shadow: 0 8px 22px rgba(49,94,255,.30);
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   Top header nav (May 3, 2026 restructure):
   - News / Guides / Bots / Markets links in top bar
   - Search becomes icon-only button → opens modal
   - Subnav row = market categories only (pins moved up)
   ============================================================ */
.hdr-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    color: var(--text);
    text-decoration: none;
    font: 600 13.5px var(--font-body);
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.hdr-nav-link:hover { background: var(--bg-hover); color: var(--text-strong, #fff); text-decoration: none; }
.hdr-nav-link i { font-size: 13px; opacity: .8; }
.hdr-nav-link-accent {
    background: rgba(49,94,255,.10);
    color: var(--accent);
}
.hdr-nav-link-accent:hover { background: rgba(49,94,255,.20); color: var(--text-strong, #fff); }

/* Hide nav text on small viewports — show icons only */
@media (max-width: 1100px) {
    .hdr-nav-link span { display: none; }
    .hdr-nav-link { padding: 8px 10px; }
    .hdr-nav-link i { font-size: 16px; opacity: 1; }
}
@media (max-width: 720px) {
    /* On phone, top nav links hide entirely; mobile drawer covers nav */
    .hdr-nav-link { display: none; }
}

/* Right-side cluster: search + lang + actions + mobile burger.
   Wrapping these in .hdr-end ensures they stay together at the
   logical end of the header, even when .header-nav is hidden. */
.hdr-end {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* Search trigger button (icon-only, replaces the always-open input) */
.hdr-search-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted, #9aa0a6);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: color .15s ease;
    flex: 0 0 auto;
}
.hdr-search-btn:hover { color: var(--text); }

@media (max-width: 560px) {
    /* Tighten cluster on small phones */
    .hdr-end { gap: 4px; }
    .hdr-search-btn { width: 34px; height: 34px; font-size: 14px; }
}

/* Root fix 2026-06: ALL body <style> blocks were relocated into this stylesheet
   (see the "Relocated from inline body <style>" section at the end of the file),
   so the page body now contains zero <style>. The old `style{display:none}`
   safety-net hack is therefore removed — there is nothing left to hide, and a
   blanket rule on <style> is itself an anti-pattern. Keep the body free of
   <style>: add new CSS here or via $seo['head_css'] in page_header(). */

/* Site-search modal */
.ssm-overlay[hidden] { display: none !important; }
.ssm-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: start center;
    padding: 60px 16px;
    overflow-y: auto;
    animation: ssm-fadein .18s ease-out;
}
@keyframes ssm-fadein { from { opacity: 0; } to { opacity: 1; } }
.ssm-shell {
    width: 100%;
    max-width: 640px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    overflow: hidden;
}
.ssm-input-row { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.ssm-icon { color: var(--text-muted); font-size: 18px; margin-inline-end: 14px; }
.ssm-input {
    flex: 1; background: transparent; border: 0;
    color: var(--text); font: 500 17px var(--font-body);
    outline: none;
}
.ssm-input::placeholder { color: var(--text-muted); }
.ssm-close {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 26px; cursor: pointer; line-height: 1; padding: 0 4px;
}
.ssm-close:hover { color: var(--text-strong, #fff); }
.ssm-shortcuts {
    display: flex; gap: 14px; padding: 8px 20px;
    font: 500 11.5px var(--font-body); color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.ssm-shortcuts kbd {
    display: inline-block; padding: 2px 6px;
    background: var(--bg-deep); border: 1px solid var(--border);
    border-radius: 5px; font: 600 10.5px var(--font-body);
    color: var(--text); margin-inline-end: 4px;
}
.ssm-lang-note { margin-left: auto; font-style: italic; }
.ssm-results { max-height: 60vh; overflow-y: auto; }
.ssm-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ssm-section:last-child { border-bottom: 0; }
.ssm-section-h {
    padding: 6px 20px;
    font: 700 11px var(--font-body);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-muted);
}
.ssm-result {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    color: var(--text); text-decoration: none;
    transition: background .12s ease;
}
.ssm-result:hover { background: var(--bg-hover); text-decoration: none; }
.ssm-result i { color: var(--accent); width: 18px; text-align: center; flex-shrink: 0; }
.ssm-result strong { color: var(--text-strong, #fff); font-weight: 600; font-size: 14px; }
.ssm-result span { font-size: 13px; line-height: 1.4; }
.ssm-meta { color: var(--text-muted); font-weight: 500; }
.ssm-empty { padding: 20px; color: var(--text-muted); font-size: 13px; text-align: center; }
.ssm-empty a { color: var(--accent); }

/* --- Global tabbed search v2 (tabs + chips + rich rows + see-all) --- */
.ssm-tabs { display: flex; gap: 6px; padding: 10px 14px 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.ssm-tabs[hidden] { display: none; }
.ssm-tab { background: transparent; border: 0; cursor: pointer; color: var(--text-muted); font: 600 13.5px var(--font-body); padding: 7px 13px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 5px; transition: background .12s, color .12s; }
.ssm-tab:hover { color: var(--text); background: var(--bg-hover); }
.ssm-tab.is-active { color: var(--text-strong, #fff); background: var(--bg-hover); font-weight: 700; }
.ssm-tab-n { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ssm-tab.is-active .ssm-tab-n { color: var(--accent); }
.ssm-tab-n:empty { display: none; }
.ssm-chips { display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.ssm-chips[hidden] { display: none; }
.ssm-chip { background: var(--bg-deep, rgba(255,255,255,.04)); border: 1px solid var(--border); color: var(--text); font: 500 13px var(--font-body); padding: 5px 13px; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s; }
.ssm-chip:hover { background: var(--bg-hover); border-color: var(--accent); }
.ssm-row { gap: 12px; align-items: center; }
.ssm-ic { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--bg-deep, rgba(255,255,255,.05)); overflow: hidden; }
.ssm-ic i { color: var(--accent); width: auto; font-size: 15px; }
.ssm-ic-img { background: transparent; }
.ssm-ic-img img { width: 100%; height: 100%; object-fit: cover; }
.ssm-rmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ssm-rt { color: var(--text-strong, #fff); font: 600 14px/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ssm-rs { color: var(--text-muted); font: 500 12px/1.35 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #101674: the percentage badge sits at the ROW's inline end, and its two lines line up with
   the modal edge - so both the flex cross-axis and the text follow the inline end. This block
   used to disagree with itself: align-items:flex-end IS logical on a column flex (the cross
   axis is the inline axis) so it already mirrored, while text-align:right did not. */
.ssm-rpct { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: end; }
.ssm-rpct b { color: var(--text-strong, #fff); font: 700 14px var(--font-body); }
.ssm-rpct small { color: var(--text-muted); font: 500 11px var(--font-body); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssm-row.is-sel { background: var(--bg-hover); }
.ssm-seeall { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-top: 1px solid var(--border); color: var(--accent); font: 600 14px var(--font-body); text-decoration: none; }
.ssm-seeall[hidden] { display: none; }
.ssm-seeall:hover { background: var(--bg-hover); text-decoration: none; }


@media (max-width: 560px) {
    .ssm-overlay { padding: 0; }
    .ssm-shell { border-radius: 0; max-width: 100%; }  /* #68: dropped min-height:100vh - it forced the shell taller than the bottom-sheet rules (max-height:86vh) so its top overflowed off the screen */
    .ssm-input { font-size: 16px; } /* Prevents iOS auto-zoom on focus */
}

/* ============================================================
   Inline article TOC (used inside .article-body). Authors emit:
     <div class="article-toc">
       <h3>What's inside</h3>
       <ol><li><a href="#case-1">...</a></li></ol>
     </div>
   ============================================================ */
.article-body .article-toc {
    margin: 24px 0 32px;
    padding: 22px 26px;
    background: linear-gradient(180deg, rgba(49,94,255,.05), transparent), var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--accent);
    border-radius: 14px;
}
.article-body .article-toc h3 {
    margin: 0 0 14px;
    font: 700 14px/1.2 var(--font-body);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
}
.article-body .article-toc ol {
    margin: 0; padding: 0; list-style: none;
    counter-reset: toc-item;
}
.article-body .article-toc ol li {
    counter-increment: toc-item;
    margin: 0; padding: 0;
}
.article-body .article-toc ol li + li { margin-top: 6px; }
.article-body .article-toc ol a {
    display: block;
    padding: 8px 12px 8px 38px;
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    font: 500 14.5px/1.45 var(--font-body);
    position: relative;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
[dir="rtl"] .article-body .article-toc ol a { padding: 8px 38px 8px 12px; }
.article-body .article-toc ol a::before {
    content: counter(toc-item, decimal-leading-zero);
    position: absolute; inset-inline-start: 8px; top: 50%; transform: translateY(-50%);
    font: 700 11.5px var(--font-body);
    color: var(--accent);
    background: rgba(49,94,255,.10);
    padding: 3px 7px;
    border-radius: 6px;
    min-width: 22px; text-align: center;
}
.article-body .article-toc ol a:hover {
    background: var(--bg-hover);
    color: var(--text-strong, #fff);
    text-decoration: none;
    transform: translateX(2px);
}
[dir="rtl"] .article-body .article-toc ol a:hover { transform: translateX(-2px); }

@media (max-width: 640px) {
    .article-body .article-toc { padding: 18px 20px; margin: 20px 0 24px; }
    .article-body .article-toc h3 { font-size: 13px; margin-bottom: 10px; }
    .article-body .article-toc ol a { padding: 7px 10px 7px 36px; font-size: 13.5px; }
    [dir="rtl"] .article-body .article-toc ol a { padding: 7px 36px 7px 10px; }
}

/* ============================================================
   Article sources block (citations + verification trail)
   ============================================================ */
.article-body .article-sources {
    margin: 36px 0 24px;
    padding: 24px 26px;
    background: var(--bg-deep, #0d1118);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.article-body .article-sources h3 {
    margin: 0 0 14px;
    font: 800 16px/1.2 var(--font-body);
    color: var(--text-strong, #fff);
    display: flex; align-items: center; gap: 10px;
}
.article-body .article-sources h3::before {
    content: ""; display: inline-block;
    width: 18px; height: 18px;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'><path d='M21 6.5C19 5 16 4 12 4S5 5 3 6.5v13C5 18 8 17 12 17s7 1 9 2.5z'/><path d='M12 4v13'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'><path d='M21 6.5C19 5 16 4 12 4S5 5 3 6.5v13C5 18 8 17 12 17s7 1 9 2.5z'/><path d='M12 4v13'/></svg>") center/contain no-repeat;
}
.article-body .article-sources ul {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 6px;
}
.article-body .article-sources li {
    margin: 0; padding: 0;
    font: 500 13.5px/1.5 var(--font-body);
    color: var(--text-muted);
    position: relative;
    padding-inline-start: 18px;
}
.article-body .article-sources li::before {
    content: "›"; position: absolute; inset-inline-start: 4px; top: 0;
    color: var(--accent); font-weight: 700;
}
[dir="rtl"] .article-body .article-sources li::before { content: "‹"; }
.article-body .article-sources li a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.15);
    transition: color .15s ease, border-color .15s ease;
}
.article-body .article-sources li a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
}

/* ============================================================
   Editorial note / methodology block
   ============================================================ */
.article-body .editorial-note {
    margin: 24px 0;
    padding: 20px 24px;
    background: rgba(245,158,11,.06);
    border: 1px solid rgba(245,158,11,.18);
    border-inline-start: 3px solid #F59E0B;
    border-radius: 12px;
}
.article-body .editorial-note h3 {
    margin: 0 0 8px;
    font: 700 14px/1.3 var(--font-body);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #FFC158;
}
.article-body .editorial-note p {
    margin: 0;
    font: 500 14px/1.6 var(--font-body);
    color: var(--text);
}

/* ============================================================
   Investigation / case-section refinements
   ============================================================ */
.article-body hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 36px 0;
    opacity: .6;
}

/* ============================================================
   RTL-aware arrow helper. In RTL languages (HE/AR/FA) a forward
   pointing "→" arrow should visually mirror to "←" so that
   "Visit Polymarket →" reads correctly right-to-left.
   Authors use: <span class="rtl-flip-arrow">&rarr;</span>
   ============================================================ */
.rtl-flip-arrow { display: inline-block; }
[dir="rtl"] .rtl-flip-arrow { transform: scaleX(-1); }

/* Inline affiliate link (created by prose-to-link surgery in guides).
   Subtle underline that signals it's a clickable link without ugly blue. */
.pm-inline-link {
    color: var(--accent, #5DB8FF);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition: opacity .15s ease;
}
.pm-inline-link:hover { opacity: .8; }
.pm-inline-link strong { color: inherit; font-weight: 700; }

/* ============================================================
   May 13, 2026: mobile native-app polish pass
   - Safe-area insets on sticky bottom CTAs (iPhone home-bar)
   - Bottom-sheet modal variant (replaces center modals on phones)
   - Skeleton loading shimmer
   - Quick-amount chip row for trade panel
   - Numeric inputmode safeguards (no iOS zoom)
   ============================================================ */

/* Safe-area helpers (apply to any sticky bottom bar / CTA / sheet) */
.has-safe-bottom         { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.has-safe-top            { padding-top: calc(16px + env(safe-area-inset-top)); }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .guide-poly-bar, .bot-mob-bar, .bot-mob-cta-only {
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
}

/* Skeleton loading shimmer — wrap repeating skeleton cards with .pm-skeleton */
.pm-skeleton {
    background: linear-gradient(90deg,
        var(--bg-surface, #161b24) 0%,
        rgba(255,255,255,.05) 50%,
        var(--bg-surface, #161b24) 100%);
    background-size: 200% 100%;
    animation: pm-skel 1.2s infinite linear;
    border-radius: 10px;
}
@keyframes pm-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pm-skeleton-card {
    height: 124px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}
.pm-skeleton-card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: pm-skel 1.2s infinite linear;
}
.pm-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
    margin-top: 18px;
}

/* Bottom-sheet modal variant. The existing center-modal wrappers add a
   `.pm-sheet-mobile` class on small screens to slide up from the bottom. */
@media (max-width: 768px) {
    /* Auth modal (lib/template.php #auth-modal) */
    .auth-modal-overlay.show, .auth-modal-overlay[aria-hidden="false"] {
        align-items: flex-end !important;
    }
    .auth-modal-box {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 22px 22px 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        animation: pm-sheet-up .25s ease-out;
    }
    .auth-modal-box::before {
        content: ""; display: block; width: 40px; height: 4px;
        background: rgba(255,255,255,.18); border-radius: 999px;
        margin: 0 auto 14px;
    }

    /* Lang switcher modal */
    .lang-modal-box, .pm-modal-box, .ssm-shell {
        border-radius: 22px 22px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .ssm-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .ssm-shell {
        max-height: 92vh;
        animation: pm-sheet-up .25s ease-out;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ssm-shell::before {
        content: ""; display: block; width: 40px; height: 4px;
        background: rgba(255,255,255,.18); border-radius: 999px;
        margin: 6px auto 8px;
    }
}
@keyframes pm-sheet-up {
    from { transform: translateY(100%); opacity: .4; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Quick-amount chip row for trade panel (market.php trade) */
.tp-quick-amounts {
    display: flex; gap: 6px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}
.tp-quick-chip {
    flex: 1 1 auto;
    min-width: 56px;
    padding: 8px 10px;
    background: var(--bg-surface, #161b24);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font: 600 13.5px var(--font-body, system-ui);
    cursor: pointer;
    transition: all .12s ease;
}
.tp-quick-chip:hover    { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.tp-quick-chip.is-active { background: var(--accent); color: #0d1118; border-color: var(--accent); }
@media (max-width: 480px) {
    .tp-quick-chip { padding: 10px 8px; font-size: 13px; }
}

/* Numeric inputs: force 16px on mobile to prevent iOS zoom-on-focus */
@media (max-width: 768px) {
    input[type="number"], input[type="text"][inputmode],
    input[type="email"], input[type="password"], input[type="search"] {
        font-size: 16px !important;
    }
}

/* Payout-front: bigger amount + payout display in trade panel */
.tp-payout-display {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(49,94,255,.06), transparent), var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 12px;
}
.tp-payout-label  { font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
                    text-transform: uppercase; color: var(--text-muted); }
.tp-payout-value  { font-size: 32px; font-weight: 800; line-height: 1.1;
                    color: var(--green, #3dB468); font-variant-numeric: tabular-nums; }
.tp-payout-sub    { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 480px) {
    .tp-payout-value { font-size: 28px; }
}
/* ════════════════════════════════════════════════════════════
   HEADER V2 — minimal row 1 + ticker + secondary mega-menus
   appended to style.css · 2026-06-06
   ════════════════════════════════════════════════════════════ */

/* row 1: hide wallet + standalone notif from header — they live in the avatar dropdown now */
.site-header .hdr-actions > .hdr-wallet,
.site-header .hdr-actions > #hdr-notif-btn,
.site-header .hdr-actions > .hdr-deposit {
    display: none !important;
}
/* Desktop, logged-in (training-active): show the Portfolio + Cash wallet in the top bar
   instead of the training-mode toggle (training is auto-on for members). Mobile keeps the
   wallet hidden - it lives in the bottom nav + drawer there. */
@media (min-width: 769px) {
    body.training-active .site-header .hdr-actions > .hdr-wallet { display: flex !important; }
    body.training-active .site-header .hdr-actions > .tm-toggle { display: none !important; }
}
/* keep .header-nav minimal — its links moved into the row 3 mega-menus */
.site-header .header-nav { gap: 0 !important; }
.site-header .header-nav:empty { flex: 1 1 0 !important; }

/* row 1 actions spacing tighten */
.hdr-end { gap: 8px; }

/* ─────────────── ROW 2 · PRICE TICKER ─────────────── */
.pm-ticker {
    background: #08090b;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 5px 0;
    overflow: hidden;
    position: relative;
}
.pm-ticker-track {
    display: inline-flex;
    gap: 28px;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-size: 11.5px;
    color: #aab2c0;
    padding-inline-start: 24px;
    direction: ltr;
    animation: pmTickerScroll 60s linear infinite;
    will-change: transform;
}
@keyframes pmTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.pm-ticker:hover .pm-ticker-track { animation-play-state: paused; }
.pm-ticker .tk-i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pm-ticker .tk-i .u {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pm-ticker .tk-i .px { color: #d1d5db; }
.pm-ticker .tk-i .d { font-weight: 700; }
.pm-ticker .tk-i .d.up { color: var(--green); }
.pm-ticker .tk-i .d.dn { color: var(--red); }
.pm-ticker .tk-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 5px var(--green);
    flex-shrink: 0;
}
.pm-ticker .tk-dot.dn { background: var(--red); box-shadow: 0 0 5px var(--red); }
.pm-ticker .tk-dot.live {
    background: var(--red);
    box-shadow: 0 0 6px var(--red);
    animation: pmTickerPulse 1.5s infinite;
}
@keyframes pmTickerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@media (max-width: 768px) {
    .pm-ticker { padding: 4px 0; }
    .pm-ticker-track { font-size: 10.5px; gap: 22px; }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pm-ticker-track { animation: none; }
}

/* ─────────────── ROW 3 · SUBNAV END (mega-menu dropdowns) ─────────────── */
.subnav-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
    min-width: 0;
}
.subnav-scroll-wrap { flex: 1 1 auto; min-width: 0; }
.subnav-end {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--border);
    margin-inline-start: 4px;
}
.snm-wrap {
    position: relative;
}
.snm-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    position: relative;
}
.snm-btn:hover,
.snm-wrap.open .snm-btn {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.snm-btn .snm-caret {
    font-size: 9px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.snm-wrap.open .snm-btn .snm-caret { transform: rotate(180deg); }
.snm-btn .subnav-badge { margin-inline-start: 2px; }
.snm-btn > i { font-size: 13px; opacity: 0.85; }

/* mega panel — anchored to subnav, opens downward */
.snm-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 360px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 1100;
    animation: snmFadeIn 0.12s ease;
}
/* opacity-only fade: leaves `transform` free for the JS viewport-edge clamp
   (snmEdgeFix) so a translateX nudge isn't overridden by the open animation. */
@keyframes snmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.snm-wrap.open .snm-panel { display: block; }
.snm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.snm-col { display: flex; flex-direction: column; gap: 2px; }
.snm-h {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding: 0 8px;
}
.snm-i {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}
.snm-i i {
    width: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.snm-i:hover {
    background: rgba(255,255,255,0.06);
}
.snm-i:hover i { color: var(--text); }

/* hide the secondary dropdowns on mobile — mobile drawer has the full structure */
@media (max-width: 880px) {
    .subnav-end { display: none !important; }
}

/* ─────────────── AVATAR MENU · WALLET BLOCK ─────────────── */
.hdr-avatar-menu .avm-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.hdr-avatar-menu .avm-wallet:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: var(--border-light);
}
.hdr-avatar-menu .avm-wallet-col { display: flex; flex-direction: column; gap: 2px; }
.hdr-avatar-menu .avm-wallet-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hdr-avatar-menu .avm-wallet-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--green);
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    direction: ltr;
    unicode-bidi: isolate;
}
.hdr-avatar-menu .avm-wallet-val-dim { color: var(--text); }

.hdr-avatar-menu .avm-deposit {
    width: 100%;
    padding: 10px;
    background: var(--green);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    transition: background var(--transition);
    margin-bottom: 4px;
}
.hdr-avatar-menu .avm-deposit:hover { background: var(--green-hover); }
.hdr-avatar-menu .avm-deposit i { font-size: 13px; }

.hdr-avatar-menu .avm-notif-badge {
    margin-inline-start: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'IBM Plex Mono', monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ════ HEADER V2.1 — mobile top-bar order: hamburger > flag+name > (gap) > toggle > search ════ */
@media (max-width: 768px) {
    .header-inner { display: flex; align-items: center; gap: 8px; }
    /* flatten .hdr-end so its children participate in .header-inner ordering */
    .hdr-end { display: contents; }
    .mobile-menu-btn { order: 1 !important; margin: 0 !important; }
    [dir="rtl"] .mobile-menu-btn { order: 1 !important; }
    .header-inner .logo { order: 2 !important; margin-inline-end: auto; }
    .header-inner .header-nav { display: none; }
    #header-auth { order: 3 !important; }
    .hdr-search-btn { order: 4 !important; }
    /* keep training pill compact on mobile */
    #header-auth .tm-toggle .tm-label { display: none; }
}

/* ════ HEADER V2.2 — mega menus in ROW 1 (header-nav) ════ */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.header-nav .snm-wrap { position: relative; }
.header-nav .snm-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 13px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
    position: relative;
}
.header-nav .snm-btn:hover,
.header-nav .snm-wrap.open .snm-btn { background: rgba(255,255,255,0.06); color: var(--text-strong); }
.header-nav .snm-btn > i:first-child { font-size: 13px; opacity: 0.85; }
.header-nav .snm-caret { font-size: 9px; color: var(--text-muted); transition: transform .15s; }
.header-nav .snm-wrap.open .snm-caret { transform: rotate(180deg); }
.header-nav .snm-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 1200;
    animation: snmFadeIn 0.12s ease;
}
.header-nav .snm-wrap.open .snm-panel { display: block; }
.snm-panel-mega { min-width: 560px; }
.snm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.snm-cnt {
    margin-inline-start: auto;
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 4px;
}
/* row-1 nav hidden on mobile — drawer covers it */
@media (max-width: 880px) {
    .header-nav { display: none !important; }
}
/* keep panels on-screen near viewport edge */
/* edge handling now via JS .snm-flip (viewport-measured) */
.snm-panel.snm-flip { inset-inline-start: auto !important; inset-inline-end: 0 !important; }

/* ════ DRAWER V2.3 — control-panel: quick tiles + accordions ════ */
.mdr-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px 4px;
}
.mdr-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-strong);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.mdr-tile i { font-size: 16px; opacity: 0.95; }
.mdr-tile .subnav-badge { position: absolute; top: 8px; inset-inline-end: 8px; }
.mdr-tile-mkt    { background: linear-gradient(135deg, rgba(49,94,255,0.22), rgba(49,94,255,0.06)); }
.mdr-tile-news   { background: linear-gradient(135deg, rgba(203,49,49,0.22),  rgba(203,49,49,0.06)); }
.mdr-tile-guides { background: linear-gradient(135deg, rgba(61,180,104,0.22), rgba(61,180,104,0.06)); }
.mdr-tile-train  { background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(124,58,237,0.07)); }
.mdr-tile:active { transform: scale(0.98); }

/* accordions */
.mdr-acc-h {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    padding: 10px 4px 6px;
    cursor: pointer;
    color: inherit;
}
.mdr-acc-caret { font-size: 10px; color: var(--text-muted); transition: transform .15s; }
.mdr-acc.open .mdr-acc-caret { transform: rotate(180deg); }
.mdr-acc .mdr-acc-b { display: none; }
.mdr-acc.open .mdr-acc-b { display: block; }

/* ════ HOVERFIX V2.4 — bridge the 10px gap + bigger hit area ════ */
/* invisible bridge: panel keeps hover alive across the visual gap */
.header-nav .snm-panel::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
/* also widen each wrap's hover zone slightly */
.header-nav .snm-wrap { padding-bottom: 6px; margin-bottom: -6px; }
/* panel slightly closer (8px visual) */
.header-nav .snm-panel { top: calc(100% + 8px); }

/* ════ OUTCOME GROUPS V2.5 — Spreads/Totals/Props sections (Polymarket-style) ════ */
.outcome-group {
    margin-top: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.outcome-group-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    user-select: none;
}
.outcome-group-h::-webkit-details-marker { display: none; }
.outcome-group-h:hover { background: var(--bg-hover); }
.outcome-group-h > i:first-child { color: var(--text-secondary); font-size: 13px; width: 18px; text-align: center; }
.og-label { flex: 1; }
.og-count {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 999px;
}
.og-chev { font-size: 11px; color: var(--text-muted); transition: transform .15s; }
.outcome-group[open] .og-chev { transform: rotate(180deg); }
.og-list { border-top: 1px solid var(--border); }
.og-list .outcome-row-item { border-radius: 0; border-inline: 0; border-top: 0; }
.og-list .outcome-row-item:last-child { border-bottom: 0; }

/* ── Mobile sub-market rows (Over/Under, Spreads, multi-outcome) — authoritative.
   Title gets its own full-width row (no truncation); the % sits inline at the end;
   Yes/No render as equal-width green/red buttons in one row below, mini-card style.
   Prevents long sports labels from pushing buttons off-screen (owner Jun-16). ── */
@media (max-width:768px){
  .outcome-row-item, .og-list .outcome-row-item{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    align-items:center !important; gap:8px 10px !important; padding:12px 14px !important;
  }
  .outcome-row-item .outcome-row-info{ flex:1 1 auto !important; min-width:0 !important; }
  .outcome-row-item .outcome-row-name{
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
    font-size:14px !important; line-height:1.35 !important;
  }
  .outcome-row-item .outcome-row-pct{
    flex:0 0 auto !important; align-self:center !important; min-width:0 !important;
    font-size:16px !important; text-align:end !important;
  }
  .outcome-row-item .outcome-row-buys{
    flex:1 1 100% !important; width:100% !important; display:flex !important; gap:8px !important; margin-top:2px !important;
  }
  .outcome-row-item .outcome-row-buys .outcome-buy{
    flex:1 1 0 !important; min-width:0 !important; width:auto !important;
    padding:11px 6px !important; font-size:13px !important; border-radius:8px !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  /* brand-consistent tints (match the refined trade panel green/red) */
  .outcome-buy.yes{ background:var(--yes-soft); color:var(--yes-text); }
  .outcome-buy.no{ background:var(--no-soft); color:var(--no-text); }
}

/* ════ WORLD CUP HUB V1 ════ */
.page-worldcup .wc-hero {
    padding: 28px 0 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.wc-h1 { display:flex; align-items:center; gap:10px; font-size: 32px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 8px; line-height: 1.15; }
.wc-h1-emoji { font-size: .92em; line-height: 1; flex: none; }
.wc-sub { font-size: 15px; color: var(--text-secondary); max-width: 640px; margin: 0 0 18px; line-height: 1.5; }
/* hero row: stat chips at the start, the Polymarket CTA pushed to the end on desktop; wraps on mobile */
.wc-hero-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.wc-hero-cta { margin-inline-start: auto; }
/* #96: "View on Polymarket" CTA aligned to the site style (same as the #97 market-header link):
   an underlined LINK in CTA orange (#f0820f), NOT a gradient button - distinct from the green/red
   trade semantics so the affiliate link never reads as a trade action. Underline = border-bottom of
   the whole component (continuous under icon+label), weight 400. */
.wc-poly-btn{
    display:inline-flex; align-items:center; gap:5px; margin-top:4px;
    padding:6px 4px 3px; white-space:nowrap;
    background:none; color:#f0820f; font-weight:400; font-size:14px;
    text-decoration:none; border-bottom:2px solid currentColor;
    transition:color .15s ease, border-bottom-width .15s ease;
}
.wc-poly-btn:hover{ color:#ff9a3d; border-bottom-width:3px; }
.wc-poly-btn i{ font-size:12px; }
.wcx-hero .wc-poly-btn{ margin-top:10px; }
@media (max-width:560px){ .wc-poly-btn{ padding:6px 4px 3px; font-size:13px; } }
.wc-stats { display: flex; gap: 9px; flex-wrap: wrap; }
.wc-stat { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:6px 13px; white-space:nowrap; }
.wc-stat b { color: var(--green); font-family: 'IBM Plex Mono', monospace; font-weight: 800; }
.wc-stat i { font-size: 11px; }
.wc-live-dot { color: var(--red); font-size: 9px; animation: pmTickerPulse 1.5s infinite; }
@media (max-width:640px){ .wc-hero-cta { margin-inline-start: 0; display: flex; justify-content: flex-start; } .wc-stats { gap: 7px; } }

.wc-secnav {
    position: sticky; top: 0; z-index: 40;
    display: flex; gap: 6px; overflow-x: auto;
    padding: 10px 0; margin-bottom: 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}
.wc-secnav::-webkit-scrollbar { display: none; }
.wc-secnav a {
    padding: 7px 13px; border-radius: 999px; white-space: nowrap;
    background: var(--bg-surface); border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 600; color: var(--text);
    display: inline-flex; align-items: center; gap: 6px;
}
.wc-secnav a:hover { background: var(--bg-hover); border-color: var(--border-light); }
/* In-page TOC variant: not sticky (the global .wcx-subnav is the single sticky WC bar). */
.wc-secnav--jump { position: static; z-index: auto; margin: 6px 0 14px; }
.wc-cnt { font-size: 10px; color: var(--text-muted); font-family: 'IBM Plex Mono', monospace; }

.wc-section { margin: 26px 0; }
.wc-sec-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wc-sec-h h2 { font-size: 19px; font-weight: 800; color: var(--text-strong); }
.wc-all { font-size: 12.5px; color: var(--accent); }

.wc-winner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wc-team {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: 12px;
    transition: background var(--transition), border-color var(--transition);
}
.wc-team:hover { background: var(--bg-hover); border-color: var(--border-light); }
.wc-team img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wc-team-flag { width: 27px; height: 20px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.wc-team-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.wc-team-pct { font-size: 16px; font-weight: 800; color: var(--green); font-family: 'IBM Plex Mono', monospace; }

.wc-groups-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wc-group-card {
    display: flex; gap: 12px; padding: 12px;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
}
.wc-group-card:hover { background: var(--bg-hover); border-color: var(--border-light); }
.wc-group-letter {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 900;
}
.wc-group-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wc-group-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text); }
.wc-group-row b { color: var(--green); font-family: 'IBM Plex Mono', monospace; }

.wc-empty {
    padding: 26px; text-align: center; color: var(--text-secondary);
    background: var(--bg-surface); border: 1px dashed var(--border-light); border-radius: 12px;
    font-size: 14px;
}
/* #1296 S4: keep WC's distinguishing yellow but match the 600 weight of the sibling pills so the
   sizing stays equal (700 made it visibly heavier/wider than its neighbours). */
.subnav-wc { color: #f5c542 !important; font-weight: 600 !important; }

@media (max-width: 880px) {
    .wc-winner-grid { grid-template-columns: 1fr 1fr; }
    .wc-groups-grid { grid-template-columns: 1fr 1fr; }
    .wc-h1 { font-size: 24px; }
}

/* ════ HOMEPAGE VARIANT A V1 (2026-06-06) ════ */
/* hero = one utility row: H1 + 1-line tagline + single CTA */
.home-hero-compact {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0 12px !important;
    margin: 0 0 14px !important;
    border-bottom: 1px solid var(--border);
    text-align: start !important;
}
.home-hero-compact .home-hero-h1 {
    font-size: 20px !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 !important;
    white-space: nowrap;
    line-height: 1.3;
}
.hhc-tagline {
    flex: 1;
    min-width: 120px;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hhc-cta {
    flex-shrink: 0;
    font-size: 13px !important;
    padding: 9px 16px !important;
    margin: 0 !important;
}
@media (max-width: 768px) {
    .home-hero-compact { flex-wrap: wrap; gap: 8px; padding: 12px 0 10px !important; }
    .home-hero-compact .home-hero-h1 { font-size: 18px !important; white-space: normal; width: 100%; }
    .hhc-tagline { display: none; } /* intro lives in the bottom SEO block */
    /* mobile: keep both side by side, just smaller text that WRAPS (2 lines) so nothing overflows */
    .hhc-cta-row { width: 100%; gap: 8px; }
    .hhc-cta-row .hhc-cta { flex: 1 1 0; width: auto; min-width: 0; justify-content: center; font-size: 12px !important; line-height: 1.2 !important; padding: 9px 8px !important; }
}

/* training strip (out of hero) */
.train-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(124,58,237,0.13), rgba(49,94,255,0.07));
    border: 1px solid rgba(124,58,237,0.35);
    border-radius: 12px;
    padding: 10px 16px;
    margin: 22px 0;
    font-size: 13.5px;
}
.train-strip .ts-ic { font-size: 18px; flex-shrink: 0; }
.train-strip .ts-tx { flex: 1; color: var(--text); min-width: 0; }
.train-strip .ts-tx b { color: var(--text-strong); }
.train-strip .ts-btn {
    flex-shrink: 0;
    background: #7C3AED;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12.5px;
    padding: 7px 14px;
    white-space: nowrap;
}
.train-strip .ts-btn:hover { background: #8B5CF6; color: #fff; }
@media (max-width: 640px) {
    .train-strip { flex-wrap: wrap; }
    .train-strip .ts-btn { width: 100%; text-align: center; }
}

/* bottom SEO block (hero intro relocated) */
.home-seo-block {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 26px 0;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.75;
}
.home-seo-block h2 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.home-seo-block p { margin: 0; }

/* flow: tighter section rhythm + even top-grid columns */
.page-home .mt-8 { margin-top: 28px !important; }
.page-home .home-top-grid { align-items: stretch; }
.page-home .home-all-markets.mt-8 { margin-top: 24px !important; }

/* ════ MOBILE NATIVE V2.6 — iOS-grouped drawer + bottom-sheet modals + aligned stickies ════ */
@media (max-width: 880px) {
    /* iOS-style grouped sections: inset rounded cards, labels outside */
    #mobile-drawer .mdr-section {
        margin: 6px 12px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        padding: 0;
    }
    #mobile-drawer .mdr-acc-h {
        padding: 13px 16px;
        min-height: 46px;
    }
    #mobile-drawer .mdr-section-label {
        font-size: 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    #mobile-drawer .mdr-link {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        border-top: 1px solid var(--border);
        border-radius: 0;
        margin: 0;
        font-size: 15px;
        position: relative;
    }
    #mobile-drawer .mdr-link:active { background: var(--bg-hover); }
    /* iOS chevron at the line end */
    #mobile-drawer .mdr-link::after {
        content: 'ƒA';
        position: absolute;
        inset-inline-end: 14px;
        color: var(--text-muted);
        font-size: 18px;
        transform: scaleX(var(--chev-flip, 1));
    }
    [dir='rtl'] #mobile-drawer .mdr-link::after { --chev-flip: -1; }
    #mobile-drawer .mdr-link i { width: 24px; margin-inline-end: 10px; text-align: center; }
    /* quick tiles get the same inset margins */
    #mobile-drawer .mdr-quick { padding: 12px 12px 2px; }
    /* lang grid + foot aligned with cards */
    #mobile-drawer .mdr-lang { margin: 0 12px 12px; }

    /* ── Bottom-sheet modals (native feel) ── */
    .ssm-overlay .ssm-shell,
    .lang-modal-overlay .lang-modal-box {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 86vh !important;
        animation: sheetUp 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    /* grab handle */
    .ssm-overlay .ssm-shell::before,
    .lang-modal-overlay .lang-modal-box::before {
        content: '';
        display: block;
        width: 38px; height: 4px;
        border-radius: 2px;
        background: var(--border-light);
        margin: 2px auto 12px;
    }
    /* ticker slightly tighter on phones */
    .pm-ticker { padding: 3px 0; }
    /* sticky offsets consistent: WC pills sit right under the header */
    .wc-secnav { top: var(--header-h-real, var(--header-h, 56px)); }
}
@keyframes sheetUp {
    from { transform: translateY(40%); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
}

/* V2.6b: drawer is a flex column — stop sections from being crushed */
#mobile-drawer .mdr-section,
#mobile-drawer .mdr-quick,
#mobile-drawer .mdr-lang,
#mobile-drawer .mdr-wallet,
#mobile-drawer .mdr-auth-pair { flex-shrink: 0; }

/* ════ GUIDES: hide content images + captions (no images yet) — 2026-06-07 ════ */
.article-body img,
.article-body figure,
.article-body figcaption,
.article-body .img-caption,
.article-body .guide-fig,
.article-body picture { display: none !important; }
/* keep author byline avatars (not content images) */
.article-body .guide-hero-avatar,
.article-body .aab-avatar { display: inline-block !important; }
/* gate modal "view on Polymarket" arrow — flip in RTL (2026-06-08) */
[dir="rtl"] .tpg-arrow{transform:scaleX(-1);}
/* ════ MOBILE HEADER: one row, search+CTA moved to drawer (2026-06-08) ════ */
@media (max-width: 768px){
  .header-inner{flex-wrap:nowrap;}
  .hdr-search-btn{display:none !important;}
  .hdr-poly-cta{display:none !important;}
  .hdr-end{flex-shrink:0;gap:6px;margin-inline-start:auto;}
  .logo{min-width:0;overflow:hidden;}
  .logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
.mdr-search{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);margin:12px 16px 6px;padding:11px 14px;background:var(--bg-surface,#1E2428);border:1px solid var(--border,#242B32);border-radius:12px;color:var(--muted,#9aa6b2);font-size:15px;cursor:pointer;text-align:start;}
.mdr-search i{font-size:15px;flex-shrink:0;}
/* ════ MARKET OPTION ROWS — tidy mobile layout, Yes/No buttons KEPT (2026-06-09) ════
   Line 1: [name over vol] ........ [chance]. Line 2: [Yes][No] buy buttons full-width. */
@media (max-width: 768px){
  .outcome-row-item{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    align-items:center !important; gap:8px 10px !important; padding:12px 6px !important;
  }
  .outcome-row-info{
    flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important;
  }
  .outcome-row-info > div{ min-width:0; }
  .outcome-row-name{ font-size:15px !important; font-weight:600 !important; line-height:1.25 !important; white-space:normal; overflow-wrap:anywhere; }
  .outcome-row-vol{ font-size:11px !important; margin-top:2px !important; }
  .outcome-row-pct{
    font-size:13.5px !important; font-weight:700 !important;
    min-width:auto !important; width:auto !important; text-align:end !important;
    align-self:center !important; margin-inline-start:auto !important; flex-shrink:0 !important; padding-inline-start:8px;
  }
  /* Yes/No buttons restored — full-width on their own line under the name/chance */
  .outcome-row-buys{ display:flex !important; gap:8px !important; flex:1 0 100% !important; margin-top:4px !important; }
  .outcome-buy{ flex:1 1 0 !important; min-width:0 !important; }
  .outcome-row-img{ width:30px !important; height:30px !important; }
}
/* ════ Resolved-markets toggler on market page (2026-06-09) ════ */
.outcomes-resolved-section{margin-top:14px;border-top:1px solid var(--border)}
.outcomes-resolved-summary{display:flex;align-items:center;gap:8px;padding:14px 4px;cursor:pointer;list-style:none;font-weight:600;font-size:14px;color:var(--text)}
.outcomes-resolved-summary::-webkit-details-marker{display:none}
.outcomes-resolved-summary::marker{content:""}
.resolved-toggle-label{color:var(--text)}
.resolved-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.resolved-chevron{margin-inline-start:auto;color:var(--text-secondary);transition:transform .2s ease}
.outcomes-resolved-section[open] .resolved-chevron{transform:rotate(180deg)}
.outcomes-resolved-list{padding-top:2px}
.outcomes-resolved-section .outcome-row-item.outcome-resolved{opacity:.72}

/* order book: stacked shares+amount per level, LTR (2026-06-09) */
.drill-ob-lvl{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25;z-index:1;position:relative}
.drill-ob-lvl .drill-ob-size{color:var(--text)}
.drill-ob-lvl .drill-ob-total{color:var(--text-muted);font-size:11px}
.drill-ob-bar{right:0 !important;left:auto !important}
/* CSS-drawn carets — FA-independent so they never tofu (2026-06-09) */
.mdr-acc-caret,.snm-caret,.resolved-chevron{
  display:inline-block;width:7px;height:7px;border:0;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease;box-sizing:border-box;flex-shrink:0;
}
.resolved-chevron{margin-inline-start:auto}
.snm-wrap.open .snm-btn .snm-caret,
.header-nav .snm-wrap.open .snm-caret,
.mdr-acc.open .mdr-acc-caret,
.outcomes-resolved-section[open] .resolved-chevron{transform:rotate(225deg)}
/* ════ News post live-market grid + chart-on-top widgets (2026-06-10) ════ */
.news-mkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:14px;margin:20px 0}
.news-mkt-grid .inline-market-widget{margin:0;display:flex;flex-direction:column}
.news-mkt-grid .imw-chart-wrap{height:100px}
.news-mkt-grid .imw-title{font-size:13.5px;line-height:1.3;display:block}
.news-mkt-grid .imw-opt{padding:4px 0}
.news-mkt-grid .imw-link{margin-top:auto}
.inline-market-widget .imw-chart-wrap{margin-bottom:10px}
@media(max-width:768px){.news-mkt-grid{grid-template-columns:1fr}}
/* ════ Worldcup hub: news & analysis cards (2026-06-10) ════ */
.wc-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 240px), 1fr));gap:14px}
.wc-news-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.wc-news-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.wc-news-card img{width:100%;height:120px;object-fit:cover;display:block}
.wc-news-body{padding:12px 14px}
.wc-news-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.35}
.wc-news-meta{font-size:11.5px;color:var(--text-muted);margin-top:6px}
/* worldcup intro + guide pills (2026-06-10) */
.wc-intro{font-size:15px;line-height:1.7;color:var(--text-secondary);max-width:860px;margin:18px auto 6px;text-align:center}
.wc-guides-strip{display:flex;flex-wrap:wrap;gap:10px}
.wc-guide-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .15s}
.wc-guide-pill:hover{border-color:var(--accent)}
.wc-sec-all{margin-inline-start:auto;font-size:13px;color:var(--accent);text-decoration:none;font-weight:600}
.wc-sec-all:hover{text-decoration:underline}
/* ════ HOME CONTENT ROW: news/blog/storylines cards, h-scroll (2026-06-10) ════ */
.home-content-row{margin-top:34px}
.hcr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hcr-track{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scroll-snap-type:x proximity}
.hcr-card{flex:0 0 330px;display:flex;gap:0;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;scroll-snap-align:start;transition:border-color .15s,transform .15s}
.hcr-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.hcr-img{flex:0 0 40%;aspect-ratio:1/1;display:block;background:var(--bg-hover)}
.hcr-img img{width:100%;height:100%;object-fit:cover;display:block}
.hcr-body{flex:1 1 60%;display:flex;flex-direction:column;gap:6px;padding:12px 14px;min-width:0}
.hcr-cat{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.hcr-title{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hcr-date{margin-top:auto;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
@media(max-width:768px){
  .hcr-track{scroll-snap-type:x mandatory;margin-inline:-14px;padding-inline:14px}
  .hcr-card{flex:0 0 83%}
}
/* ════ MOBILE FOOTER ACCORDION (2026-06-10) ════ */
@media(max-width:768px){
  .footer-grid{display:block}
  .footer-brand{text-align:center;padding-bottom:20px}
  .footer-brand .logo{justify-content:center}
  .footer-brand p{margin-inline:auto;text-align:center}  /* center the 260px-max tagline block, not just its text */
  /* Symmetric vertical spacing for the social-links block: top gap (margin-top)
     == bottom gap (margin-bottom + brand padding-bottom) so the bottom border
     isn't visually tighter than the top. (operator: balance top/bottom padding) */
  .footer-social{justify-content:center;display:flex;gap:12px;margin-top:20px;margin-bottom:6px}
  .footer-social-link{width:42px;height:42px}
  .site-footer .footer-col{border-top:1px solid var(--border);margin:0}
  .site-footer .footer-col h4{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .site-footer .footer-col h4::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .18s;opacity:.55}
  .site-footer .footer-col.open h4::after{transform:rotate(225deg)}
  .site-footer .footer-col a{display:none;padding:9px 2px;font-size:14px}
  .site-footer .footer-col.open a{display:block}
  .footer-langs{border-top:1px solid var(--border);margin-top:0;padding-top:0}
  .footer-langs-title{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;margin:0;cursor:pointer}
  .footer-langs-title::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .18s;opacity:.55}
  .footer-langs.open .footer-langs-title::after{transform:rotate(225deg)}
  .footer-langs-list{display:none}
  .footer-langs.open .footer-langs-list,
  .footer-langs-details[open] .footer-langs-list{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding-bottom:14px}
}
/* ════ MOBILE CONTROL-PANEL BOTTOM SHEET (2026-06-10) ════ */
#mobile-drawer.mdr-sheet{position:fixed;inset-inline:0;inset-block-end:0;inset-block-start:auto;width:auto;max-width:none;height:auto;max-height:88vh;overflow-y:auto;transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.72,.35,1);border-start-start-radius:20px;border-start-end-radius:20px;border:1px solid var(--border);border-block-end:0;background:var(--bg-surface);padding-inline:16px;padding-block:0 max(18px,env(safe-area-inset-bottom));z-index:1200}
#mobile-drawer.mdr-sheet.open{transform:translateY(0)}
.mdr-grab{display:flex;justify-content:center;padding:10px 0 4px;cursor:grab;touch-action:none}
.mdr-grab span{width:42px;height:5px;border-radius:999px;background:var(--border-light)}
.mdr-sheet .mdr-search{margin:8px 0 12px;width:100%}
.mdr-quick8{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mdr-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;aspect-ratio:1/0.82;background:transparent;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text);-webkit-tap-highlight-color:transparent;transition:background .15s}
.mdr-t:hover{background:var(--bg-card)}
.mdr-t i{font-size:20px;color:var(--accent)}
/* distinct icon colour per primary tile so the menu reads vibrant + organized */
.mdr-quick8 .mdr-t:nth-child(1) i{color:#315EFF}  /* Markets  - blue   */
.mdr-quick8 .mdr-t:nth-child(2) i{color:#F5A623}  /* News     - amber  */
.mdr-quick8 .mdr-t:nth-child(3) i{color:#B06BFF}  /* Guides   - purple */
.mdr-quick8 .mdr-t:nth-child(4) i{color:#3FB950}  /* Training - green  */
.mdr-quick8 .mdr-t:nth-child(5) i{color:#2EC4B6}  /* Portfolio- teal (#100716: WC slot removed) */
.mdr-t span{font-size:11px;font-weight:600;text-align:center;line-height:1.15;padding:0 4px}
.mdr-t:active{transform:scale(.96)}
.mdr-t-train i{color:#3fb950}
.mdr-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;scrollbar-width:none}
.mdr-chips::-webkit-scrollbar{display:none}
/* #1296 S4: inline-flex + centred so the FIRST chip (🔥 Trending — the only emoji chip) centres its
   content the same as the plain-text chips instead of reading left-heavy/off. */
.mdr-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 14px;border-radius:999px;background:transparent;border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.mdr-row4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;margin-top:14px;padding-top:16px;border-top:1px solid var(--border)}
.mdr-m{display:flex;align-items:center;gap:9px;padding:11px 13px;background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .15s}
.mdr-m:hover{background:var(--bg-card)}
.mdr-m i{color:var(--text-secondary);font-size:14px}
.mdr-ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mdr-tm{flex:1 1 auto;justify-content:space-between;max-width:none}
.mdr-tm .tm-label{display:inline!important}
/* desktop: hide leftover news col3 (categories dup) */
.snm-col-hide{display:none}
/* post-quiz CTA in guides (2026-06-10) */
.quiz-cta{margin:22px 0;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--bg-card)}
.quiz-cta-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px}
.quiz-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.quiz-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:700;text-decoration:none}
.quiz-cta-train{background:linear-gradient(135deg,#238636,#2ea043);color:#fff}
.quiz-cta-pm{background:var(--bg-hover);color:var(--text);border:1px solid var(--border)}
.quiz-cta-pm:hover{border-color:var(--accent);color:var(--accent)}
/* ════ BOTTOM SHEET overflow + RTL + polish fixes (2026-06-10) ════ */
#mobile-drawer.mdr-sheet{width:auto;min-width:0;max-width:100vw;box-sizing:border-box;overflow-x:hidden;overscroll-behavior:contain;box-shadow:0 -16px 48px rgba(0,0,0,.35);border-inline-start:0;display:block}
[dir="rtl"] #mobile-drawer.mdr-sheet{transform:translateY(105%)}
[dir="rtl"] #mobile-drawer.mdr-sheet.open{transform:translateY(0)}
#mobile-drawer.mdr-sheet > *{min-width:0;max-width:100%}
.mdr-sheet .mdr-chips{margin-inline:-16px;padding-inline:16px;overflow-x:auto;overflow-y:hidden}
.mdr-sheet .mdr-wallet{border:1px solid var(--border);border-radius:12px;margin:0 0 12px;background:var(--bg-card)}
.mdr-sheet .mdr-auth-pair{padding:0;margin:0 0 12px}
.mdr-sheet .mdr-lang{padding:12px 0 4px;border-bottom:0}
.mdr-sheet .mdr-quick8 span{overflow:hidden;max-width:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
@media (max-width:768px){ body{overflow-x:clip} }

/* ════ BOTTOM SHEET v3 - full element polish, logical properties only (2026-06-11) ════ */
/* grab: bigger hit area */
.mdr-sheet .mdr-grab{padding-block:12px 8px;cursor:grab}
.mdr-sheet .mdr-grab span{width:44px;height:5px;background:var(--border-light);opacity:.9}
/* search: pill, comfy tap height, muted icon */
.mdr-sheet .mdr-search{min-height:46px;border-radius:12px;margin-block:0 12px;margin-inline:0;width:100%;padding-block:11px;padding-inline:14px;color:var(--text-secondary);font-size:14.5px;font-family:inherit;text-align:start}
.mdr-sheet .mdr-search i{color:var(--text-muted)}
.mdr-sheet .mdr-search:active{background:var(--bg-hover)}
/* visitor trade CTA (mdr-deposit): full-width card button, sheet-aligned */
.mdr-sheet .mdr-deposit{margin-block:0 12px;margin-inline:0;width:100%;min-height:46px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#3b82f6);font-size:14.5px}
/* wallet card */
.mdr-sheet .mdr-wallet{padding-block:12px;padding-inline:16px;border-radius:12px;margin-block:0 12px;margin-inline:0}
/* auth pair: kill old drawer chrome */
.mdr-sheet .mdr-auth-pair{padding:0;margin-block:0 12px;margin-inline:0;border-block-start:0}
.mdr-sheet .mdr-auth-btn{min-height:44px;border-radius:10px;font-size:14px}
/* quick tiles: badge pinned to corner, label never wraps off */
.mdr-sheet .mdr-quick8{gap:9px;margin-block-end:12px;padding:0}
.mdr-sheet .mdr-t{border-radius:13px;-webkit-tap-highlight-color:transparent}
.mdr-sheet .mdr-t i{font-size:19px}
.mdr-sheet .mdr-t span{font-size:10.5px;padding-inline:5px}
.mdr-sheet .mdr-t .subnav-badge{position:absolute;inset-block-start:7px;inset-inline-end:9px;margin:0}
.mdr-sheet .mdr-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* chips: comfy height, snap, edge-bleed kept; active feedback */
.mdr-sheet .mdr-chips{gap:8px;padding-block:2px 12px;margin-block-end:4px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.mdr-sheet .mdr-chip{min-height:38px;display:inline-flex;align-items:center;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.mdr-sheet .mdr-chip:active{background:var(--bg-hover)}
/* content rows: consistent height + press state */
.mdr-sheet .mdr-row4{gap:9px;margin-block-end:12px}
.mdr-sheet .mdr-m{min-height:46px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.mdr-sheet .mdr-m i{width:18px;text-align:center;flex-shrink:0}
.mdr-sheet .mdr-m:active{background:var(--bg-hover)}
/* settings strip: separator + toggle at inline-end, proper tap size */
.mdr-sheet .mdr-ctrl{border-block-start:1px solid var(--border);padding-block:10px 2px;margin-block-end:4px;justify-content:space-between}
.mdr-sheet .pm-theme-toggle{width:38px;height:38px;border-radius:10px}
/* language block: title + grid aligned to sheet inset (kill old 12px drawer margins) */
.mdr-sheet .mdr-lang-title{margin-block:6px 8px;margin-inline:0;text-align:start}
.mdr-sheet .mdr-lang-grid{margin:0;gap:7px;padding-block-end:4px}
.mdr-sheet .mdr-lang-btn{min-height:38px;border-radius:9px;font-size:12.5px}
.mdr-sheet .mdr-lang-btn:active{background:var(--bg-hover)}
/* old side-drawer leftovers that must not leak into the sheet */
.mdr-sheet .mdr-quick, .mdr-sheet .mdr-acc-h{padding:0}

/* ==== PM-style match cards (screenshot-matched, 2026-06-11) ==== */
.match-card{display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:border-color .15s, transform .15s}
.match-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.mtc-head{display:flex;align-items:center;gap:10px;min-width:0}
.mtc-img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0}
.mtc-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtc-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtc-meta{display:flex;gap:8px;font-size:11.5px;color:var(--text-muted)}
.mtc-btns{display:flex;gap:8px}
.mtc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding-block:8px;padding-inline:10px;border-radius:10px;background:var(--bg-hover);border:1px solid var(--border);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.mtc-code{font-size:11.5px;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}
.mtc-px{font-size:13.5px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.mtc-btn.mtc-lead{background:#1f6b46;border-color:#1f6b46}
.mtc-btn.mtc-lead .mtc-code,.mtc-btn.mtc-lead .mtc-px{color:#fff}
.match-card:active{transform:scale(.99)}
:root:not([data-theme="dark"]) .mtc-btn:not(.mtc-lead){background:#f4f5f6;box-shadow:0 1px 1px rgba(0,0,0,.08)}
:root:not([data-theme="dark"]) .mtc-btn.mtc-lead{background:#1f6b46;border-color:#1f6b46}

/* team-pair buy buttons (PM-style codes instead of Yes/No) 2026-06-11 */
.orb-team .outcome-buy{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ==== Market sidebar component polish (2026-06-11) ==== */
/* market sidebar Stats/Learn: clean — no box/bg/radius, just smooth low-opacity dividers (owner Jun-16) */
.page-sidebar .sidebar-section{background:transparent;border:0;border-radius:0;padding:14px 2px;margin-bottom:0;border-top:1px solid rgba(255,255,255,.05)}
.page-sidebar .sidebar-header{display:flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.02em;border-bottom:0;padding-bottom:6px;margin-bottom:4px}
.page-sidebar .sidebar-header i{color:var(--accent);font-size:12px}
.mkt-stats{display:flex;flex-direction:column}
.ms-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-secondary);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ms-row:last-child{border-bottom:0}
.ms-row b{color:var(--text);font-variant-numeric:tabular-nums;font-size:12.5px}
.ms-news{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;font-size:12.5px;color:var(--text);border-bottom:1px solid rgba(255,255,255,.05);text-decoration:none;transition:var(--transition)}
.ms-news:last-child{border-bottom:0}
.ms-news:hover{color:var(--accent)}
.ms-news .ms-arr{font-size:9px;color:var(--text-muted);flex:none}
[dir="ltr"] .ms-news .ms-arr{transform:scaleX(-1)}
.ms-news:hover .ms-arr{color:var(--accent)}
/* RTL: flip directional arrows that had no flip rule (arrow-direction sweep) */
[dir="rtl"] .post-nav-link .fa-arrow-left,
[dir="rtl"] .post-nav-link .fa-arrow-right{transform:scaleX(-1)}
[dir="rtl"] .trn-btn--primary .fa-arrow-right-long{transform:scaleX(-1)}
[dir="rtl"] .drill-back .fa-chevron-left{transform:scaleX(-1)}

/* ==== Markets megamenu v3 (2026-06-11): balanced PM-style columns ==== */
.snm-grid-mkt{display:grid;grid-template-columns:1.5fr 1.1fr;gap:22px;min-width:620px}
.snm-cats2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.snm-i.snm-feat{background:rgba(45,156,219,.10);border:1px solid rgba(45,156,219,.30);border-radius:8px}
.snm-hot{display:flex;justify-content:space-between;gap:8px}
.snm-hot-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-family:'IBM Plex Mono',monospace;font-size:11px}
.snm-hot-p{font-weight:800;font-size:11.5px;font-variant-numeric:tabular-nums;direction:ltr}
.snm-hot-p.up{color:var(--green)}
.snm-hot-p.dn{color:var(--red)}

/* ==== MEGAMENU v4 - magazine scale (2026-06-12) ==== */
.snm-panel-mega{min-width:760px;padding:22px 24px;border-radius:16px}
.snm-grid-mkt{grid-template-columns:1.4fr 1.1fr;gap:26px;min-width:0}
.snm-panel-mega .snm-h{font-size:11.5px;letter-spacing:.09em;margin-bottom:8px}
.snm-panel-mega .snm-i{font-size:14px;padding:8px 10px;border-radius:9px}
.snm-panel-mega .snm-i i{font-size:13px;width:20px}
.snm-cats2 .snm-i{font-size:13.5px}
/* WC hero card */
.snm-wchero{display:block;background:linear-gradient(135deg,rgba(45,156,219,.16),rgba(63,182,139,.10));border:1px solid rgba(45,156,219,.35);border-radius:13px;padding:13px 15px;text-decoration:none;color:var(--text)}
.snm-wchero:hover{border-color:var(--accent)}
.snm-wctitle{display:block;font-weight:800;font-size:14.5px;margin-bottom:9px}
.snm-wcrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;color:var(--text)}
.snm-wcrow b{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.snm-wcflag{width:18px;height:18px;border-radius:3px}
/* rich hot rows */
.snm-hotrow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;text-decoration:none;color:var(--text);min-width:0}
.snm-hotrow:hover{background:var(--bg-hover,rgba(255,255,255,.04))}
.snm-hotrow img,.snm-hotph{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none;background:var(--bg-secondary)}
.snm-hott{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.snm-hotpx{flex:none;text-align:center;font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;direction:ltr}
.snm-hotpx small{display:block;font-size:10.5px;font-weight:700}
.snm-hotpx.up{color:var(--green)} .snm-hotpx.dn{color:var(--red)}
@media (max-width:1100px){.snm-panel-mega{min-width:640px}.snm-grid-mkt{grid-template-columns:1fr 1fr;gap:18px}.snm-grid-mkt .snm-col:last-child{grid-column:1/-1}}

/* megamenu v4.1: RTL/overflow hardening - grid children MUST min-width:0 */
/* overflow-x hidden keeps the RTL hardening; overflow-y auto + viewport-capped
   max-height lets a tall mega panel scroll on short screens instead of spilling
   off the bottom edge (task #50: desktop dropdown clipped by window height). */
.snm-panel-mega{max-width:min(780px,calc(100vw - 24px));max-height:calc(100vh - 76px);overflow-x:hidden;overflow-y:auto}
.snm-grid-mkt .snm-col{min-width:0}
.snm-hotrow{min-width:0;max-width:100%}
.snm-hott{overflow-wrap:anywhere;word-break:break-word;unicode-bidi:plaintext;text-align:start}
.snm-wchero,.snm-wcrow{min-width:0}
.snm-wcrow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.snm-i{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==== rev3 (#4098): desktop mega-menu tinted icon-chips ====
   Turns the flat category glyphs into per-category tinted rounded chips (app-shelf look).
   Scoped to the DESKTOP .snm-panel-mega only (hidden on mobile). :has() is a progressive
   enhancement - browsers without it keep the existing flat icon, no regression. Boxes are
   symmetric so RTL needs no mirroring. */
.snm-panel-mega .snm-i i{
    width:26px;height:26px;line-height:26px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:var(--text-secondary);
    transition:background var(--transition),color var(--transition);
}
.snm-panel-mega .snm-i:hover i{transform:none}
/* per-category tint: soft bg + saturated glyph, keyed off the FA icon already in markup */
.snm-panel-mega .snm-i:has(.fa-chart-column) i{background:rgba(49,94,255,.14);color:#5b7bff}
.snm-panel-mega .snm-i:has(.fa-fire-flame-curved) i{background:rgba(249,115,22,.15);color:#f97316}
.snm-panel-mega .snm-i:has(.fa-landmark) i{background:rgba(99,102,241,.15);color:#818cf8}
.snm-panel-mega .snm-i:has(.fa-bitcoin) i{background:rgba(245,158,11,.15);color:#f59e0b}
.snm-panel-mega .snm-i:has(.fa-futbol) i{background:rgba(34,197,94,.15);color:#4ade80}
.snm-panel-mega .snm-i:has(.fa-temperature-half) i{background:rgba(27,163,255,.15);color:#1BA3FF}
.snm-panel-mega .snm-i:has(.fa-check-to-slot) i{background:rgba(49,94,255,.14);color:#5b7bff}
.snm-panel-mega .snm-i:has(.fa-earth-americas) i{background:rgba(20,184,166,.15);color:#2dd4bf}
.snm-panel-mega .snm-i:has(.fa-flag) i{background:rgba(239,68,68,.15);color:#f87171}
.snm-panel-mega .snm-i:has(.fa-money-bill-trend-up) i{background:rgba(16,185,129,.15);color:#34d399}
.snm-panel-mega .snm-i:has(.fa-microchip) i{background:rgba(139,92,246,.15);color:#a78bfa}
.snm-panel-mega .snm-i:has(.fa-gamepad) i{background:rgba(236,72,153,.15);color:#f472b6}
.snm-panel-mega .snm-i:has(.fa-chart-line) i{background:rgba(14,165,233,.15);color:#38bdf8}
.snm-panel-mega .snm-i:has(.fa-globe) i{background:rgba(249,115,22,.15);color:#fb923c}
.snm-panel-mega .snm-i:has(.fa-flask) i{background:rgba(6,182,212,.15);color:#22d3ee}
.snm-panel-mega .snm-i:has(.fa-star) i{background:rgba(234,179,8,.15);color:#facc15}
/* guides / learn column */
.snm-panel-mega .snm-i:has(.fa-book) i{background:rgba(49,94,255,.14);color:#5b7bff}
.snm-panel-mega .snm-i:has(.fa-seedling) i{background:rgba(34,197,94,.15);color:#4ade80}
.snm-panel-mega .snm-i:has(.fa-bolt) i{background:rgba(245,158,11,.15);color:#f59e0b}
.snm-panel-mega .snm-i:has(.fa-chess) i{background:rgba(139,92,246,.15);color:#a78bfa}
.snm-panel-mega .snm-i:has(.fa-sack-dollar) i{background:rgba(16,185,129,.15);color:#34d399}
.snm-panel-mega .snm-i:has(.fa-wallet) i{background:rgba(27,163,255,.15);color:#1BA3FF}
.snm-panel-mega .snm-i:has(.fa-coins) i{background:rgba(234,179,8,.15);color:#facc15}
.snm-panel-mega .snm-i:has(.fa-piggy-bank) i{background:rgba(236,72,153,.15);color:#f472b6}
.snm-panel-mega .snm-i:has(.fa-spell-check) i{background:rgba(20,184,166,.15);color:#2dd4bf}
.snm-panel-mega .snm-i:has(.fa-code) i{background:rgba(49,94,255,.14);color:#5b7bff}
.snm-panel-mega .snm-i:has(.fa-database) i{background:rgba(14,165,233,.15);color:#38bdf8}
.snm-panel-mega .snm-i:has(.fa-key) i{background:rgba(245,158,11,.15);color:#f59e0b}

/* hot titles: uniform 2-line rows */
.snm-hott{min-height:calc(1.3em * 2)}

/* ==== GATEWAY (P0.10) - layered eligibility overlay ==== */
html.gwy-lock{overflow:hidden}
#gwy-overlay{position:fixed;inset:0;z-index:99999;background:rgba(8,11,16,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.gwy-card{background:var(--bg-card,#171e29);border:1px solid var(--border,#27313f);border-radius:16px;max-width:430px;width:100%;padding:26px 24px;text-align:center;color:var(--text,#e9edf3)}
.gwy-brand{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted,#8b96a5);margin-bottom:14px}
.gwy-card h2{font-size:19px;margin:0 0 16px}
.gwy-intro{font-size:13.5px;color:var(--text-secondary,#aab2c0);line-height:1.6;margin-bottom:14px;text-align:start}
.gwy-intro a{color:var(--accent,#2d9cdb)}
.gwy-btns{display:flex;gap:10px;justify-content:center}
.gwy-yes{background:var(--accent,#2d9cdb);color:#fff;border:0;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;max-width:240px}
.gwy-yes:disabled{opacity:.45;cursor:not-allowed}
.gwy-no{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border,#27313f);border-radius:10px;padding:11px 22px;font-size:14px;color:var(--text-muted,#8b96a5);text-decoration:none}
.gwy-chk{display:flex;gap:10px;align-items:flex-start;text-align:start;font-size:13px;color:var(--text,#e9edf3);margin:0 0 10px;cursor:pointer;line-height:1.45}
.gwy-chk input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent,#2d9cdb);flex:none}
.gwy-foot{font-size:11px;color:var(--text-muted,#8b96a5);line-height:1.5;margin-top:14px;text-align:start}
@media(max-width:480px){.gwy-card{padding:20px 16px}}

/* ═══ P0.11-P0.13 affiliate disclosure ═══ */
.cta-disclosure{
  font-size:10.5px;line-height:1.45;color:var(--text-secondary);
  opacity:.78;margin:7px 0 0;max-width:640px;
}
.cta-banner .cta-disclosure{margin-left:auto;margin-right:auto}
.site-footer .disclosure-long{
  font-size:12px;line-height:1.65;color:var(--text-secondary);
  max-width:860px;margin:0 auto 12px;text-align:start;
  border-top:1px solid var(--border-color,rgba(255,255,255,.08));
  padding-top:14px;
}

/* #1501 — 18+ / responsible-play disclosure line near money CTAs (HE only, per operator).
   ONE small muted line - must not compete with the trade CTA (CTA hierarchy).
   Logical CSS only (RTL-safe); the 18+ badge stays LTR via dir="ltr". */
.disclosure-strip{
  display:flex;align-items:center;gap:6px;
  /* #100426: was color:var(--text-secondary) + opacity:.85 -> ~3.9:1 (below AA).
     Dropped the opacity + fixed grey #828e9b keeps this small (10.5px) legal
     line at ~5.3:1 on the dark surfaces it renders on (>=AA 4.5:1). */
  font-size:10.5px;line-height:1.45;color:#828e9b;
  text-align:start;max-width:620px;
}
.disclosure-strip .disclosure-age{
  flex:0 0 auto;font-weight:700;font-size:10px;letter-spacing:.02em;
  color:#828e9b;border:1px solid var(--border,#242B32);
  border-radius:4px;padding:0 5px;line-height:1.5;white-space:nowrap;
  unicode-bidi:isolate;
}
.disclosure-strip--hero{margin:10px auto 0;justify-content:center;text-align:center;}
.disclosure-strip--topup{margin:8px auto 0;justify-content:center;text-align:center;}
.disclosure-strip--modal{margin:10px 0 0;}
.disclosure-strip--footer{margin:0 auto 8px;justify-content:center;text-align:center;}
@media (max-width:600px){
  .disclosure-strip{font-size:10px;gap:5px;align-items:flex-start;}
}

/* ============================================================
   FAQ Hub (/faq/) — categorized support-page layout.
   PHP emits: .faq-hub > .faq-intro, .faq-toc, .faq-category
              (h2 + .faq-cat-summary + .faq-list > details.faq-item
               > summary + .faq-answer), .cta-banner
   ============================================================ */
.article-container.faq-hub { max-width: 820px; }

.faq-hub h1 {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    margin: 8px 0 12px;
}

.faq-hub .faq-intro {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 720px;
}

/* TOC: category chips at top */
.faq-hub .faq-toc {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 0 0 36px;
}
.faq-hub .faq-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 8px 18px;
}
.faq-hub .faq-toc li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.faq-hub .faq-toc a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faq-hub .faq-toc a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.faq-hub .faq-toc-count {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Each category section */
.faq-hub .faq-category {
    margin: 0 0 40px;
    scroll-margin-top: 80px;
}
.faq-hub .faq-category h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.011em;
    margin: 0 0 6px;
    color: var(--text-strong, #fff);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-light);
}
.faq-hub .faq-cat-summary {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 16px;
    font-style: italic;
}

/* List of <details> items */
.faq-hub .faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
}

/* Each Q/A as native <details><summary> */
.faq-hub .faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color .15s, background .15s;
    margin: 0;
}
.faq-hub .faq-item:hover {
    border-color: var(--border-light);
}
.faq-hub .faq-item[open] {
    border-color: var(--accent);
    background: var(--bg-card);
}
.faq-hub .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
    user-select: none;
    transition: color .15s;
}
.faq-hub .faq-item summary::-webkit-details-marker { display: none; }
.faq-hub .faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    font-weight: 500;
    transition: transform .2s, background .15s, color .15s;
}
.faq-hub .faq-item:hover summary { color: var(--text-strong, #fff); }
.faq-hub .faq-item[open] summary { color: var(--text-strong, #fff); }
.faq-hub .faq-item[open] summary::after {
    content: '\2212'; /* − */
    background: var(--accent-soft);
    color: var(--accent);
    transform: rotate(180deg);
}

.faq-hub .faq-answer {
    padding: 0 18px 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.faq-hub .faq-answer a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    transition: border-color .15s;
}
.faq-hub .faq-answer a:hover {
    border-bottom-color: var(--accent);
}

/* Bottom CTA banner */
.faq-hub .cta-banner {
    margin: 40px 0 0;
    padding: 28px 24px;
    background: linear-gradient(135deg, var(--accent-soft), rgba(49,94,255,0.04));
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius);
    text-align: center;
}
.faq-hub .cta-banner h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--text-strong, #fff);
}
.faq-hub .cta-banner p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 16px;
}
.faq-hub .cta-banner .cta-btn {
    display: inline-block;
    padding: 11px 22px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.faq-hub .cta-banner .cta-btn:hover {
    background: var(--accent-hover);
}
.faq-hub .cta-banner .cta-btn:active { transform: scale(.98); }

/* Mobile tuning */
@media (max-width: 640px) {
    .faq-hub h1 { font-size: 26px; }
    .faq-hub .faq-intro { font-size: 15px; margin-bottom: 22px; }
    .faq-hub .faq-toc { padding: 14px 16px; margin-bottom: 28px; }
    .faq-hub .faq-toc ul { grid-template-columns: 1fr; gap: 6px; }
    .faq-hub .faq-category { margin-bottom: 32px; }
    .faq-hub .faq-category h2 { font-size: 20px; }
    .faq-hub .faq-item summary { padding: 14px 16px; font-size: 14.5px; gap: 12px; }
    .faq-hub .faq-answer { padding: 0 16px 16px; font-size: 14px; }
    .faq-hub .cta-banner { padding: 22px 18px; }
    .faq-hub .cta-banner h3 { font-size: 17.5px; }
}

/* RTL polish (HE, AR, FA, UR) */
[dir="rtl"] .faq-hub .faq-item summary::after { transform: scaleX(-1); }
[dir="rtl"] .faq-hub .faq-item[open] summary::after { transform: rotate(180deg) scaleX(-1); }

/* ═══ pm-chart: interactive SVG price charts (chart-lab engine) ═══ */
.pmc{display:block}
.pmc-wrap{position:relative;height:240px;touch-action:pan-y}
.pmc-wrap svg{width:calc(100% - 34px);height:100%;display:block;cursor:crosshair}/* leave a right gutter so the line ends before the % (chances) axis instead of under it */
/* lightweight-charts engine (pm-chart-lw.js): canvas fills the wrap; legend/ranges/tip reuse .pmc-* */
.pmc-lw .pmc-wrap{height:230px}
.pmc-lw .pmc-lwbox{position:absolute;inset:0}
.pmc-lw .pmc-lwbox canvas{cursor:crosshair}
@media(max-width:560px){.pmc-lw .pmc-wrap{height:200px}}
.pmc-wrap.pmc-empty::after{content:attr(data-empty);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px}
.pmc-grid{stroke:var(--border-color,rgba(128,128,128,.14));stroke-width:1;opacity:.55}
.pmc-cross{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.pmc-dot{stroke:var(--bg-card,#fff);stroke-width:2.5}
.pmc-yaxis{position:absolute;top:0;bottom:0;inset-inline-end:2px;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--text-muted);pointer-events:none;font-variant-numeric:tabular-nums}
.pmc-xaxis{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;padding-inline-end:34px}/* match the plot's right gutter so dates align with the line */
.pmc-tip{position:absolute;top:0;left:0;background:#15181f;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:8px 10px;font-size:12px;pointer-events:none;white-space:nowrap;opacity:0;transform:translateX(-50%);transition:opacity .1s;z-index:5;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.pmc-tip.on{opacity:1}
.pmc-tip .t{color:rgba(255,255,255,.55);font-size:10px;margin-bottom:3px}
.pmc-tip .r{display:flex;gap:9px;align-items:center;margin-top:2px}
.pmc-tip .r i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.pmc-tip .r span{color:rgba(255,255,255,.85);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.pmc-tip .r b{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-size:13px;padding-inline-start:6px}
.pmc-legend{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:10px}
.pmc-lg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;user-select:none;transition:opacity .15s}
.pmc-lg.off{opacity:.32}
.pmc-lg:hover{color:var(--text)}
.pmc-lg i{width:9px;height:9px;border-radius:50%;display:inline-block}
.pmc-lg b{color:var(--text);font-variant-numeric:tabular-nums}
/* #98: emphasize the leading outcome in the chart legend (front-runner reads at a glance) */
.pmc-lg-lead{font-weight:800;color:var(--text)}
.pmc-lg-lead i{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
/* #99427: always-on right-endpoint labels (sport/esports match charts). The label IS the readout,
   so the top legend + hover tooltip are dropped for these charts. Labels overlay the plot pinned
   to the right, each vertically at its line's endpoint (JS collision-avoids overlaps). */
.pmc-has-endlabels .pmc-legend{display:none}
.pmc-has-endlabels .pmc-lwbox canvas{cursor:default}
.pmc-endlabels{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;direction:ltr}
.pmc-elabel{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap;padding:2px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--bg-card,#1E2428) 78%,transparent);color:var(--text,#E5E7EB);
  font-variant-numeric:tabular-nums;max-width:60%}
.pmc-elabel i{width:8px;height:8px;border-radius:50%;flex:none}
.pmc-elabel span{overflow:hidden;text-overflow:ellipsis}
.pmc-elabel b{color:var(--text-strong,#fff);font-weight:800}
.pmc-el-lead b{color:var(--text-strong,#fff)}
.pmc-el-lead i{box-shadow:0 0 0 3px color-mix(in srgb,var(--text-strong,#fff) 16%,transparent)}
@media(max-width:560px){.pmc-elabel{font-size:10.5px;padding:1px 4px;max-width:64%}.pmc-elabel i{width:7px;height:7px}}
.pmc-ranges{display:flex;gap:4px;margin-top:10px;justify-content:flex-end}
.pmc-ranges button{font-size:11.5px;font-weight:700;color:#fff;opacity:.6;padding:5px 11px;border-radius:6px;border:none;background:none;cursor:pointer;transition:opacity .12s;font-family:inherit}
.pmc-ranges button:hover{opacity:.85}
.pmc-ranges button.active{background:none;color:#fff;opacity:1}
.pmc-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent}
.pmc-spin{width:22px;height:22px;border:2.5px solid var(--border-color,#ccc);border-top-color:var(--accent,#315EFF);border-radius:50%;animation:pmcspin .7s linear infinite}
@keyframes pmcspin{to{transform:rotate(360deg)}}
@media(max-width:560px){.pmc-wrap{height:190px}.pmc-ranges{justify-content:center}.pmc-tip .r span{max-width:120px}}

/* ═══ nav-redesign step 4: globe language pattern ═══ */
.mdr-lang-row{display:flex;align-items:center;gap:10px;width:100%;padding:13px 4px;background:none;border:none;border-radius:10px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-align:start}
.mdr-lang-row:hover{background:var(--bg-hover,var(--bg-secondary))}
.mdr-lang-row i{font-size:16px;color:var(--text-secondary)}
.mdr-lang-row b{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text-secondary);font-size:13px}
.footer-langs-details summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;user-select:none}
.footer-langs-details summary::-webkit-details-marker{display:none}
.footer-langs-details summary::after{content:"\25BE";color:var(--text-muted);font-size:12px}
.footer-langs-details[open] summary::after{content:"\25B4"}
.footer-langs-details .footer-langs-list{padding-top:12px}

/* ═══ nav step 6: Bots & Tools mega (4-col) + WC top link ═══ */
.snm-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.snm-cnt-hot{color:#2ECC71!important;border-color:rgba(46,204,113,.4)!important}
.snm-toplink{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
.snm-toplink:hover{background:var(--bg-hover,var(--bg-secondary));color:var(--text)}
.snm-toplink i{color:var(--accent)}
@media(max-width:1150px){.snm-toplink span{display:none}}
@media(max-width:980px){.snm-grid-4{grid-template-columns:1fr 1fr}}

/* ═══ membership-first: guest chip (header) ═══ */
.hdr-guest{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border-color,var(--border));color:var(--text);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s}
[dir="rtl"] .hdr-guest{padding:5px 6px 5px 12px}
.hdr-guest:hover{border-color:var(--accent)}
.hdr-guest-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7C5CFF,#315EFF);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.hdr-guest-caret{font-size:9px;color:var(--text-muted)}
@media(max-width:760px){.hdr-guest-txt{display:none}.hdr-guest{padding:4px 8px 4px 5px}}

/* ═══ WC group standings table ═══ */
.wcx-pos{display:inline-flex;width:18px;height:18px;border-radius:5px;background:var(--bg-secondary);color:var(--text-muted);font-size:10.5px;font-weight:800;align-items:center;justify-content:center;margin-inline-end:2px}
.wcx-q .wcx-pos{background:rgba(46,204,113,.16);color:#2ECC71}
.wcx-stand td b{font-variant-numeric:tabular-nums}


/* === nav step 5: mega-footer (6 cols incl brand) === */
.footer-grid{grid-template-columns:1.25fr 1fr 1fr 1fr 1fr 1fr}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}


/* === nav 2+3: personal panel (end-edge slide, guest variant) === */
#pp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:10090}
#pp-backdrop.open{opacity:1;pointer-events:auto}
#pp-panel{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(360px,88vw);background:var(--bg-card);border-inline-end:1px solid var(--border-color,var(--border));box-shadow:0 0 60px rgba(0,0,0,.45);z-index:10091;transform:translateX(-110%);transition:transform .26s ease;display:flex;flex-direction:column}
[dir="rtl"] #pp-panel{transform:translateX(110%)}
#pp-panel.open{transform:none!important}
html.pp-lock{overflow:hidden}
.pp-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--border-color,var(--border))}
.pp-av{width:34px;height:34px;font-size:14px}
.pp-title{font-weight:800;font-size:15px;color:var(--text)}
.pp-x{margin-inline-start:auto;background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;padding:2px 8px;line-height:1}
.pp-body{padding:18px 16px;display:flex;flex-direction:column;gap:11px;overflow-y:auto}
.pp-hook{display:flex;gap:11px;align-items:flex-start;background:var(--bg-secondary);border:1px solid var(--border-color,var(--border));border-radius:12px;padding:13px}
.pp-hook i{color:var(--accent);font-size:18px;margin-top:2px}
.pp-hook p{font-size:13px;line-height:1.55;color:var(--text-secondary);margin:0}
.pp-cta{display:block;width:100%;padding:13px;border-radius:11px;border:none;background:linear-gradient(135deg,#315EFF,#3b82f6);color:#fff;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit}
.pp-login{display:block;width:100%;padding:12px;border-radius:11px;border:1px solid var(--border-color,var(--border));background:var(--bg-secondary);color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
.pp-perks{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.pp-perks span{font-size:12.5px;color:var(--text-secondary)}
.pp-perks i{color:#2ECC71;margin-inline-end:7px;font-size:11px}



/* === pm-chart RTL fix: time axis is universal LTR; labels must match the curve === */
.pmc-wrap,.pmc-xaxis{direction:ltr}
.pmc-yaxis{inset-inline-end:auto;right:2px;direction:ltr}

/* === subscribe widget (Phase 8.A) — weekly brief opt-in on guides/blog/faq === */
/* Weekly-brief subscribe widget — real theme tokens (adapts light/dark), icon + body layout */
.subw{display:flex;gap:16px;align-items:flex-start;margin:28px 0 8px;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--bg-card)}
.subw-ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.subw-body{flex:1;min-width:0}
.subw-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.subw-head b{font-size:1.02rem;color:var(--text-strong)}
.subw-head span{font-size:.86rem;color:var(--text-secondary)}
.subw-form{display:flex;gap:8px;flex-wrap:wrap}
.subw-form input[type=email]{flex:1 1 220px;min-width:0;padding:10px 13px;border:1px solid var(--border);border-radius:9px;background:var(--bg-input);color:var(--text);font-size:.92rem}
.subw-form input[type=email]::placeholder{color:var(--text-muted)}
.subw-form input[type=email]:focus{outline:none;border-color:var(--accent)}
.subw-form button{padding:10px 20px;border:none;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;white-space:nowrap}
.subw-form button:hover{background:var(--accent-hover)}
.subw-form button:disabled{opacity:.55;cursor:default}
.subw-hp{position:absolute !important;inset-inline-start:-9999px !important;width:1px;height:1px;opacity:0}
.subw-msg{font-size:.88rem;margin-top:8px;display:none}
.subw-msg.ok{display:block;color:var(--green)}
.subw-msg.err{display:block;color:var(--red)}
.subw-priv{font-size:.76rem;color:var(--text-muted);margin:10px 0 0}
.page-subscribe-wrap .subw{padding:26px 24px}
.page-subscribe-wrap .subw-head b{font-size:1.25rem}
.subw-bigicon{font-size:2.4rem}
@media (max-width:560px){.subw{flex-direction:column;gap:12px}.subw-ic{display:none}.subw-form button{flex:1 1 100%}}

/* === /widgets showcase (Phase 8.C) === */
.wdg-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.wdg-grid{grid-template-columns:1fr}}
.wdg-card{border:1px solid var(--border-color,#e4e7ec);border-radius:14px;padding:18px;background:var(--card-bg,var(--bg-secondary,#f8f9fb))}
.wdg-card h2{font-size:1.05rem;margin:0 0 12px}
.wdg-demo{margin-bottom:12px;min-height:120px}
.wdg-code{background:var(--bg-primary,#0f1822);color:var(--text-secondary,#9fb0c3);border:1px solid var(--border-color,#2c3f54);border-radius:9px;padding:10px 12px;font-size:.74rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-all;direction:ltr;text-align:left}
.wdg-copy{margin-top:10px;font-size:.85rem}

/* === ask-the-guides widget (Phase 8.D) === */
.askw-form input[type=text]{flex:1 1 220px;min-width:0;padding:10px 13px;border:1px solid var(--border-color,#d0d5dd);border-radius:9px;background:var(--bg-primary,#fff);color:var(--text-primary,#101828);font-size:.92rem}
.askw-form input[type=text]:focus{outline:none;border-color:var(--pm-blue,#1652F0)}
.askw-out{margin-top:10px}
.askw-ans{font-size:.92rem;line-height:1.65;color:var(--text-primary,#101828);background:var(--bg-primary,#fff);border:1px solid var(--border-color,#e4e7ec);border-radius:9px;padding:12px 14px}
.askw-thinking{font-size:.88rem;color:var(--text-secondary,#667085);animation:askp 1.4s infinite}
.askw-err{font-size:.88rem;color:var(--pm-red,#d92d20)}
.askw-src{font-size:.8rem;color:var(--text-secondary,#667085);margin-top:8px}
.askw-src a{color:var(--pm-blue,#1652F0);text-decoration:none}
.askw-src a:hover{text-decoration:underline}
@keyframes askp{0%,100%{opacity:1}50%{opacity:.45}}

/* === odds format toggle + alt display (Phase 3.C) === */
.odds-toggle-slot{display:flex;justify-content:flex-end;margin:0 0 8px}
.odds-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-secondary,#667085)}
.odds-toggle select{font-size:.78rem;padding:3px 6px;border:1px solid var(--border-color,#d0d5dd);border-radius:7px;background:var(--bg-primary,#fff);color:var(--text-primary,#101828)}
.odds-alt{font-size:.78em;opacity:.75;margin-inline-start:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-btn .odds-alt,.tp-outcome .odds-alt{display:inline-block}

/* === lang flag-as-switcher (owner Jun 14): header flag opens lang modal === */
.logo-lockup{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-flag-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;line-height:0;border-radius:3px;transition:transform .12s,box-shadow .12s}
.logo-flag-btn:hover{transform:scale(1.06);box-shadow:0 0 0 2px var(--accent,#1652F0)}
.logo-flag-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent,#1652F0)}

/* RTL fix: guide/bot hub card thumbnail must sit on the RIGHT on RTL mobile. The base
   mobile rule uses physical right:auto (leaving the image at left:0 from inset:0) while
   .gcard-content uses logical margin-inline-start -> they diverge in RTL and the thumb got
   stuck on the left. agent2-lb Jun 17. */
@media (max-width: 560px){
  [dir="rtl"] .gcard-img{ right: 0; left: auto; }
}

/* ===== TradingVPS coupon — clean code chip (redesign #189) ===== */
.pm-aff-coupon{ margin: 16px 0 0; }
.pm-aff-coupon-main{
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; text-align: center;
  background: color-mix(in srgb, #56d6a0 9%, transparent);
  border: 1px solid color-mix(in srgb, #56d6a0 32%, transparent);
}
.pm-aff-coupon-label{
  flex: 0 0 auto; min-width: 0;
  font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #7ce9bd;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-aff-coupon-label i{ font-size: 13px; flex: 0 0 auto; }
/* the copy button — elevated, solid-bordered so it clearly reads as a button */
.pm-aff-coupon-code{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #121823, #0a0e15);
  border: 1.5px solid #56d6a0;
  color: #fff; font-family: var(--font-mono, ui-monospace, monospace);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px -9px color-mix(in srgb, #56d6a0 85%, transparent);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.pm-aff-coupon-code:hover{ border-color: #6fe3b0; transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, #56d6a0 16%, transparent), 0 8px 20px -8px color-mix(in srgb, #56d6a0 85%, transparent); }
.pm-aff-coupon-code:active{ transform: translateY(0); }
.pm-aff-coupon-code.copied{ border-color: #6fe3b0; background: color-mix(in srgb, #56d6a0 20%, #0a0e15); }
.pm-aff-coupon-use{ font: 700 9px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: #8fb6a8; white-space: nowrap; }
.pm-aff-coupon-val{ font-weight: 800; font-size: 15px; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.pm-aff-coupon-code i{ color: #6fe3b0; font-size: 13px; flex: 0 0 auto; }
.pm-aff-regions{ font-size: 12px; line-height: 1.5; color: var(--text-muted, #9aa3b2); margin: 10px 2px 0; text-align: center; }
[dir="rtl"] .pm-aff-coupon-code{ direction: ltr; }
/* inside the narrow comparison card: stack + shrink the chip so it never overflows the column */
.pm-aff-card .pm-aff-coupon-main{ flex-direction: column; }
.pm-aff-card .pm-aff-coupon-code{ width: 100%; justify-content: center; gap: 8px; padding: 9px 10px; }
.pm-aff-card .pm-aff-coupon-use{ font-size: 8.5px; letter-spacing: .08em; }
.pm-aff-card .pm-aff-coupon-val{ font-size: 13px; letter-spacing: 0; }
@media (max-width: 560px){
  /* head/text overrides are PARENT-SCOPED (0,2,0) so they beat the conflict-proof
     base rules (also 0,2,0, but these come later) AND the guide-body typography. */
  .pm-aff-callout{ padding: 16px 14px 14px; margin: 22px 0; border-radius: var(--radius, 15px); }
  .pm-aff-callout-head{ gap: 11px; margin-bottom: 11px; }
  .pm-aff-callout-logo{ width: 42px; height: 42px; font-size: 17px; border-radius: 11px; }
  .pm-aff-callout .pm-aff-callout-title{ font-size: 18px; }
  .pm-aff-callout .pm-aff-callout-sub{ font-size: 12.5px; }
  .pm-aff-callout .pm-aff-callout-blurb{ font-size: 12.75px; line-height: 1.5; margin-bottom: 12px; }
  .pm-aff-callout-foot{ flex-direction: column; align-items: stretch; gap: 9px; }
  .pm-aff-callout-cta{ width: 100%; padding: 13px; }
  /* in the column foot, flex-basis:200px would become 200px of HEIGHT → dead space; reset it */
  .pm-aff-callout .pm-aff-disclosure{ flex: 0 0 auto; font-size: 11px; }
  .pm-aff-coupon{ margin-top: 14px; }
  .pm-aff-coupon-main{ gap: 10px; padding: 11px 12px; }
  .pm-aff-coupon-label{ font-size: 13px; }
  .pm-aff-coupon-code{ width: 100%; justify-content: center; padding: 11px; }
  .pm-aff-coupon-val{ font-size: 15px; }
  /* operator #189 v4: text below the coupon code — smaller, centered, more gap above */
  .pm-aff-callout .pm-aff-regions, .pm-aff-card .pm-aff-regions{ font-size: 11px; line-height: 1.55; margin-top: 14px; text-align: center; }
}


/* ═══ Sport market polish (cleaner, Polymarket-style) — appended 2026-06 ═══ */
.market-tabs-bar .mt-tab.active::after,
.drill-tab.active::after { border-radius: 0 !important; }
.outcome-buy {
    min-height: 40px; padding: 10px 16px !important; border-radius: 9px !important;
    font-weight: 700; border: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.05);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.outcome-buy.yes, .outcome-row-active .outcome-buy.yes { background: var(--yes) !important; color: #fff !important; }
.outcome-buy.no,  .outcome-row-active .outcome-buy.no  { background: var(--no) !important; color: #fff !important; }
.outcome-buy:hover { transform: translateY(-1px); filter: brightness(1.08);
    box-shadow: 0 6px 15px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.07); }
.drill-tabs-row .drill-polymarket { background: transparent !important; border-color: rgba(255,255,255,.12) !important; color: var(--text-secondary,#9aa1ac) !important; }
.drill-tabs-row .drill-polymarket:hover { background: rgba(255,255,255,.05) !important; }
.resolved-chevron, .mdr-acc-caret, .snm-caret { background: transparent !important; box-shadow: none !important; }


/* ═══ Match-page polish v2 — correct classes (.ssm-tab, .tp-outcome, drill) ═══ */
/* active market-type tab: square + transparent (clean underline, not a rounded pill) */
.ssm-tab { border-radius: 0 !important; }
.ssm-tab.is-active { background: transparent !important; border-radius: 0 !important; box-shadow: inset 0 -2px 0 var(--text, #fff) !important; }
.ssm-tab:hover { background: rgba(255,255,255,.05) !important; }
/* outcome / moneyline buttons: a bit taller + soft shadow + hover lift */
.tp-outcome { min-height: 46px !important; border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important; }
.tp-outcome:hover { transform: translateY(-1px); filter: brightness(1.07);
  box-shadow: 0 6px 15px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.07) !important; }
/* tidy the expand panes: transparent, no weird bg behind chart/book/total */
.drill-pane, .drill-tab-pane, .drill-ob-section { background: transparent !important; }
.spx-cattabs, .ssm-tabs, .tp-tabs { background: transparent !important; }


/* ═══ Match-page tidy v3 (safe, additive) ═══ */
.tp-outcomes { gap: 8px !important; }
/* moneyline buttons full colour: the selected pick fills solid green (like the buy-form CTA) */
.tp-outcome.active, .tp-outcome.is-active, .tp-outcome[aria-pressed="true"], .tp-outcome.selected {
  background: var(--yes) !important; color: #fff !important; border-color: var(--yes) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px rgba(43,174,76,.40) !important; }
/* selected NO side fills red (market.php marks it .active-no) */
.tp-outcome.active-no, .tp-outcome.is-active.no, .tp-outcome.selected.no {
  background: var(--no) !important; color: #fff !important; border-color: var(--no) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px rgba(235,87,87,.40) !important; }
.tp-outcome.active *, .tp-outcome.is-active *, .tp-outcome[aria-pressed="true"] * { color: #fff !important; }
.drill-ob-row:hover { background: rgba(255,255,255,.04) !important; }
.drill-ob-row:hover { background: rgba(255,255,255,.04) !important; }
.drill-watermark { opacity: .5 !important; }


/* ═══ Amount input + $ : font-size -4px (per owner) ═══ */
.tp-amount-cur, .tp-amount-input { font-size: 24px !important; }
@media (max-width: 600px) { .tp-amount-cur, .tp-amount-input { font-size: 20px !important; } }


/* === WC (.wcx-/.wcb-/.wccal-) styles relocated from wc_css() body <style> into <head> (root fix: a body <style> was being swept into the mobile drawer and rendered as raw text). DO NOT re-add a body <style>. === */
.wcx-mktblock{margin:24px 0}
.wcx-mktblock-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.wcx-mktblock-head h2{font-size:18px;display:flex;align-items:center;gap:9px;margin:0;color:var(--text)}
.wcx-mktblock-head .wcx-mktlink{margin:0;white-space:nowrap}
.wcx-cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;align-items:start}
.wcx-cols2 .wcx-col{min-width:0}
.wcx-cols2 .wcx-col>.wcx-sec-t:first-child{margin-top:8px}
.wcx-fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:0 14px}
.wcx-fxgrid .wcx-day{grid-column:1/-1}
.wcx-mktblock{max-width:100%;overflow-x:clip}
.wcx-mktblock .wcx-scroll,.wcx-mktblock .wcx-tbl{max-width:100%}
@media(max-width:780px){.wcx-cols2{grid-template-columns:1fr;gap:4px}}
.wcx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:16px 0}
.wcx-gcard{background:var(--bg-card);border:1px solid var(--border);border-radius:13px;padding:14px 16px;display:block;text-decoration:none;color:inherit}
.wcx-gcard h3{font-size:14px;margin-bottom:9px;color:var(--text)}
.wcx-gcard:hover{border-color:var(--accent)}
.wcx-trow{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--text)}
.wcx-trow img{width:20px;height:20px;object-fit:contain}
.wcx-trow .px{margin-inline-start:auto;font-weight:700;font-variant-numeric:tabular-nums}
.wcx-tbl{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}
.wcx-tbl th{font-size:11px;color:var(--text-muted);text-align:end;padding:6px 8px;border-bottom:1px solid var(--border)}
.wcx-tbl th:first-child{text-align:start}
.wcx-tbl td{padding:8px;border-bottom:1px solid var(--border);text-align:end;font-variant-numeric:tabular-nums;color:var(--text)}
.wcx-tbl td:first-child{text-align:start}
.wcx-team{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:600}
.wcx-team img{width:22px;height:22px;object-fit:contain}
.wcx-team:hover span{color:var(--accent)}
/* group table: fixed columns so the 3 % columns line up across rows (esp. mobile),
   long team names truncate instead of wrapping + shifting row heights */
.wcx-grp-tbl{table-layout:fixed}
.wcx-grp-tbl th:not(:first-child),.wcx-grp-tbl td:not(:first-child){width:62px}
.wcx-grp-tbl .wcx-team{max-width:100%}
.wcx-grp-tbl .wcx-team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:inline-block;max-width:100%}
@media(max-width:560px){.wcx-grp-tbl th:not(:first-child),.wcx-grp-tbl td:not(:first-child){width:50px}}
.wcx-fx{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:11px;margin-bottom:8px;text-decoration:none;color:var(--text);font-size:13px}
.wcx-fx:hover{border-color:var(--accent)}
.wcx-fx-t{display:flex;align-items:center;gap:7px;font-weight:600;min-width:0}
.wcx-fx-t img{width:20px;height:20px;object-fit:contain}
.wcx-fx-t.home{flex-direction:row-reverse;text-align:end}
.wcx-fx-mid{color:var(--text-muted);font-size:12px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:2px}
.wcx-fx-g{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.04em}
.wcx-win,.wccal-win{color:var(--success,#22c55e);font-weight:900;font-size:.9em;margin-inline-start:3px}
.wccal-vs.done{font-weight:800;color:var(--text)}
.wcx-flagimg{width:20px;height:20px;border-radius:3px;object-fit:cover}
.wcx-hero{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:16px}
.wcx-groups-nav{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.wcx-gn-item{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:6px 12px;text-decoration:none;transition:all .15s ease;white-space:nowrap}
.wcx-gn-item:hover{border-color:var(--accent);color:var(--text)}
.wcx-gn-active{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:560px){.wcx-groups-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.wcx-groups-nav::-webkit-scrollbar{display:none}}
.wcx-hero h1{font-size:20px;display:flex;align-items:center;gap:10px;color:var(--text)}
.wcx-hero h1 img{width:38px;height:38px;object-fit:contain}
.wcx-h1flag{width:34px;height:34px;border-radius:5px}
.wcx-hero p{color:var(--text-secondary);font-size:13.5px;margin-top:8px;line-height:1.6}
.wcx-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.wcx-kpi{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--text-muted);text-decoration:none;display:inline-block;transition:border-color .15s,transform .1s}
a.wcx-kpi:hover{border-color:var(--accent,#2d7ff9);transform:translateY(-1px)}
.wcx-kpi b{display:block;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.wcx-sec-t{font-size:15px;font-weight:700;margin:20px 0 10px;color:var(--text)}
.wcx-day{font-size:11.5px;font-weight:800;color:var(--text-muted);margin:12px 0 6px;letter-spacing:.04em}
.wcx-crumb{font-size:12px;color:var(--text-muted);margin-bottom:12px}
.wcx-crumb a{color:var(--text-muted)}
.wcx-proj{font-size:10px;font-weight:800;color:var(--accent);background:rgba(49,94,255,.10);border-radius:6px;padding:2px 7px;vertical-align:middle;margin-inline-start:6px;text-transform:uppercase;letter-spacing:.04em}
.wcx-mlpx{font-style:normal;font-size:11px;font-weight:800;color:var(--accent);background:rgba(49,94,255,.10);border-radius:6px;padding:1px 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wcx-mlpx.draw{color:var(--text-muted);background:var(--bg-secondary);font-weight:700}
.wcx-mktw{margin:14px 0}
.wcx-rank td:nth-child(2){width:38%}
.wcx-rankbar{display:block;height:7px;border-radius:4px;background:var(--bg-secondary);overflow:hidden;min-width:60px}
.wcx-rankbar span{display:block;height:100%;background:var(--accent);border-radius:4px}
.wcx-mktlink{font-size:12px;margin:-6px 0 16px}
.wcx-mktlink a{color:var(--accent);text-decoration:none;font-weight:700}
.wcx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wcx-lines{min-width:480px}
.wcx-lines th{text-align:center}
.wcx-lines td{text-align:center}
.wcx-lines td:first-child{text-align:start;white-space:nowrap}
.wcx-dash{color:var(--text-muted)}
.wcx-stand tbody tr:nth-child(odd){background:var(--bg-secondary)}
.wcx-stand td,.wcx-stand th{padding:9px 8px}
.wcx-q td:first-child{box-shadow:inset 3px 0 0 #2ECC71}
[dir="rtl"] .wcx-q td:first-child{box-shadow:inset -3px 0 0 #2ECC71}
.wcx-navrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.wcx-navrow a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.wcx-navrow a:hover{border-color:var(--accent);color:var(--accent)}
.wcx-navc{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--accent,#2d7ff9) 14%,transparent);color:var(--accent,#2d7ff9);font-size:10.5px;font-weight:800;line-height:1}
@media(max-width:640px){.wcx-navrow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.wcx-navrow::-webkit-scrollbar{display:none}.wcx-navrow a{flex:0 0 auto}}
/* auto-fill market grid: 4-up at full width, 3-up beside the 318px sidebar, all
   at the homepage item width (~236px min). Owner Jun 14: 3 a row with sidebar. */
.wcx-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px;margin:6px 0 18px}
@media(max-width:560px){.wcx-cardgrid{grid-template-columns:1fr 1fr;gap:9px}}
@media(max-width:380px){.wcx-cardgrid{grid-template-columns:1fr}}
/* creative sidebar cards */
.wcx-sb{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px;margin:0 0 14px}
.wcx-sb-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 11px;display:flex;align-items:center;gap:7px}
.wcx-sb-pick{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:8px;border-radius:10px;transition:background .15s}
.wcx-sb-pick:hover{background:var(--bg-hover,rgba(125,125,125,.08))}
.wcx-sb-pick .wcx-flagimg{width:30px;height:22px}
.wcx-sb-pick-nm{font-weight:700;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcx-sb-pick-px{font-weight:800;color:var(--accent);font-size:15px}
.wcx-sb-row{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px;border-radius:8px;text-decoration:none;color:var(--text)}
.wcx-sb-row:hover{background:var(--bg-hover,rgba(125,125,125,.08))}
.wcx-sb-row .wcx-flagimg{width:22px;height:16px}
.wcx-sb-pimg{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--bg-secondary)}
.wcx-pflag{width:17px;height:12px;border-radius:2px;object-fit:cover;flex:0 0 auto}
.mc-opt-pimg{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* rich player hero: photo + country pill + name + KPIs (mobile: stack/center) */
.wcx-phero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#2d7ff9) 13%,transparent),var(--bg-card))}
.wcx-phero-top{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.wcx-phero-img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid color-mix(in srgb,var(--accent,#2d7ff9) 42%,transparent);box-shadow:0 4px 16px rgba(0,0,0,.3);flex:0 0 auto;background:var(--bg-secondary)}
.wcx-phero-ph{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;background:var(--bg-secondary);flex:0 0 auto}
.wcx-phero-id{min-width:0}
.wcx-phero-id h1{margin:0 0 7px}
.wcx-phero-nat{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:4px 12px;text-decoration:none}
.wcx-phero-nat:hover{border-color:var(--accent,#2d7ff9)}
.wcx-phero-flag{width:22px;height:16px;border-radius:3px;object-fit:cover}
.wcx-thero-flag{width:96px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.3);flex:0 0 auto}
@media(max-width:560px){.wcx-phero-top{flex-direction:column;text-align:center;gap:10px}.wcx-thero-flag{width:84px;height:56px}}
.wcx-pimg{border-radius:50%;object-fit:cover}
.wcx-h1pimg{width:54px;height:54px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-inline-end:10px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.wcx-sb-row b{margin-inline-start:auto;color:var(--text-muted);font-weight:700}
.wcx-sb-links{display:flex;flex-direction:column;gap:2px}
.wcx-sb-fact{font-size:13px;color:var(--text-muted);line-height:1.55}
.wcx-sb-cta{display:block;text-align:center;margin-top:8px;padding:9px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;font-size:13px;text-decoration:none}
/* visual stage bracket (R16 -> Champion), pure CSS, horizontal-scroll on mobile */
.wcb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 22px;padding-bottom:10px}
.wcb{display:flex;gap:14px;min-width:min-content;align-items:flex-start}
.wcb-col{flex:0 0 226px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column}
.wcb-champ{border-color:color-mix(in srgb,#f5a524 55%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,#f5a524 12%,transparent),var(--bg-card))}
.wcb-h{font-size:13px;font-weight:800;color:var(--text);display:flex;flex-direction:column;gap:5px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.wcb-chip{font-size:10.5px;font-weight:700;color:var(--accent,#2d7ff9);text-decoration:none}
.wcb-teams{display:flex;flex-direction:column;gap:4px}
.wcb-team{display:flex;align-items:center;gap:8px;padding:6px;border-radius:9px;text-decoration:none;color:var(--text);font-size:13px;transition:background .15s}
.wcb-team:hover{background:var(--bg-hover,rgba(125,125,125,.08))}
.wcb-team .wcx-flagimg{width:22px;height:16px;flex:0 0 auto}
.wcb-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.wcb-px{font-weight:800;color:var(--accent,#2d7ff9);font-variant-numeric:tabular-nums}
.wcb-team.champ{background:color-mix(in srgb,#f5a524 16%,transparent);padding:10px}
.wcb-team.champ .wcb-nm{font-weight:800}
.wcb-trophy{font-size:15px}
@media(max-width:560px){.wcb-col{flex-basis:190px}}
.wcx-cols{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:22px;align-items:start}
.wcx-side{position:sticky;top:calc(var(--header-h-real,64px) + 12px);display:flex;flex-direction:column;gap:2px;min-width:0}
.wcx-side .wcx-gcard{margin:0 0 12px}
.wcx-side .wcx-sec-t{margin:6px 0 8px}
.wcx-main{min-width:0}
@media(max-width:920px){.wcx-cols{grid-template-columns:1fr}.wcx-side{position:static}}
/* #232: WC entity pages (player/team) render their market cards in the sidebar'd
   .wcx-main column, so the global 4-up .markets-grid is too cramped there. 3-up on
   desktop; single column on mobile (<=768px), always. grid-template-columns is
   writing-direction-agnostic -> RTL (he/ar) safe as-is. Scoped (0,3,0) beats the
   global .markets-grid (0,1,0) cascade without !important. */
.page-wcx .wcx-main .markets-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:768px){.page-wcx .wcx-main .markets-grid{grid-template-columns:minmax(0,1fr)}}
.wcx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.wcx-pair>div{min-width:0}
@media(max-width:860px){.wcx-pair{grid-template-columns:1fr}}
@media(max-width:480px){
  .wcx-tbl{font-size:12px}
  .wcx-tbl td,.wcx-tbl th{padding:7px 5px}
  .wcx-rank td:nth-child(2){width:30%}
  .wcx-rankbar{min-width:40px}
  .wcx-hero{padding:14px}
  .wcx-hero h1{font-size:17px}
  .wcx-kpi{padding:6px 10px}
}
.wcx-mktw .wcx-trow{padding:7px 0}
.wcx-mkt-team{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-width:0;flex:0 0 38%}
.wcx-mkt-team img{width:20px;height:20px;object-fit:contain}
.wcx-mkt-bar{flex:1;height:7px;border-radius:99px;background:var(--bg-secondary);overflow:hidden}
.wcx-mkt-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#315EFF,#3b82f6)}
.wcx-chartcard{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:14px 14px 8px;margin:14px 0}
.wcx-chart{width:100%;height:170px;display:block}
.wcx-lgs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.wcx-lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.wcx-lg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.wcx-lg b{color:var(--text);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .wcx-tbl{font-size:12px}
  .wcx-tbl th{font-size:9.5px;padding:5px 4px}
  .wcx-tbl td{padding:7px 4px}
  .wcx-team img{width:18px;height:18px}
  .wcx-fx{padding:9px 10px;gap:6px;font-size:12px}
  .wcx-fx-t{flex-wrap:wrap}
  .wcx-mlpx{font-size:10px;padding:1px 5px}
  .wcx-chart{height:130px}
  .wcx-mkt-team{flex-basis:46%}
}

/* ════════════════════════════════════════════════════════════════════════
   Relocated from inline body <style> blocks (root fix 2026-06: a <style> in
   <body> was being rendered as raw CSS text inside the WC mobile menu).
   ALL of these rules now live here in <head> via style.css. DO NOT re-add a
   body <style> anywhere in lib/ or pages/. — see docs/AGENT-BROADCAST.md
   ════════════════════════════════════════════════════════════════════════ */

/* [1] Header icon-button normalisation (was inline in page_header header markup) */
.header-inner .hdr-search-btn,.header-inner .pm-theme-toggle,.header-inner .hdr-lang-btn,.header-inner .odds-btn{background:none!important;border:none!important;box-shadow:none!important;width:34px!important;height:34px!important;padding:0!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;font-size:17px!important}
.header-inner .hdr-search-btn i,.header-inner .pm-theme-toggle i,.header-inner .hdr-lang-btn i,.header-inner .odds-btn i{font-size:17px!important;line-height:1!important;display:block!important}
.header-inner .hdr-odds{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:34px!important;height:34px!important;margin:0!important;vertical-align:middle!important}
.header-inner .hdr-end{gap:2px}
.header-inner .pm-theme-toggle,.pm-theme-toggle{display:none!important}
@media(max-width:768px){.site-header .header-inner>.mobile-menu-btn{order:-1!important;display:inline-flex!important}.site-header{padding-top:6px!important;padding-bottom:1px!important}}

/* [2] World-Cup context subnav (was inline in $wcNavInject). Scoped to .pm-wcnav
   on <body> so it only takes effect inside the /worldcup/ area, exactly as the
   old inline block did (it was only emitted there). */
body.pm-wcnav .subnav{display:none!important}
body.pm-wcnav #mobile-bottom-nav{display:none!important}
/* Stick directly UNDER the sticky .site-header (top:0/z-index:1000), mirroring the
   regular .subnav. Old top:0/z-index:90 made this bar slide under the header and
   vanish on scroll. Now: top=real header height, z-index just below the header. */
.wcx-subnav{position:sticky;top:var(--header-h-real,var(--header-h,56px));z-index:999;background:var(--bg);border-bottom:1px solid var(--border)}
@media(max-width:768px){.wcx-subnav{display:none}}
.wcx-subnav-in{display:flex;gap:6px;align-items:center;height:52px;overflow-x:auto;scrollbar-width:none}
.wcx-subnav-in::-webkit-scrollbar{display:none}
.wcx-subnav a,.wcx-subnav button{flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-family:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;line-height:1;transition:color .15s,background .15s,border-color .15s}
.wcx-subnav a.wcx-hot{color:#FFCF33;font-weight:700}
.wcx-subnav a:hover,.wcx-subnav button:hover{color:var(--text);background:var(--bg-card);border-color:var(--border)}
.wcx-subnav a.wcx-hot:hover{color:#FFCF33;background:rgba(255,207,51,.10);border-color:rgba(255,207,51,.35)}
#wcx-mobbar button.mob-nav-item{background:none;border:none;cursor:pointer;font:inherit}

/* [3] WC markets index — resolved <details> + jump nav (was inline in pages/wc-markets.php) */
.wcm-resolved>summary{cursor:pointer;list-style:none}
.wcm-resolved>summary::-webkit-details-marker{display:none}
.wcm-resolved>summary .wcm-cnt{margin-inline-start:auto}
.wcm-resolved[open]>summary{margin-bottom:14px}
.wcm-stat{margin-top:10px;font-size:14px;color:var(--text-muted)}
.wcm-stat b{color:var(--text);font-size:17px}
.wcm-stat a{color:var(--accent,#2d7ff9);text-decoration:none;font-weight:700}
.wcm-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 26px}
.wcm-jump-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.wcm-seeall{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--accent,#2d7ff9);text-decoration:none}
@media(max-width:640px){.wcm-jump{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:8px 16px;position:sticky;top:0;z-index:30;background:var(--bg,var(--bg-page));border-bottom:1px solid var(--border)}.wcm-jump::-webkit-scrollbar{display:none}.wcm-jump a{flex:0 0 auto}.wcm-jump-lbl{flex:0 0 auto}.wcm-seeall{display:none}}
.wcm-jump a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:7px 13px;text-decoration:none;transition:border-color .15s}
.wcm-jump a:hover{border-color:var(--accent)}
.wcm-jump a span{background:color-mix(in srgb,var(--accent,#2d7ff9) 14%,transparent);color:var(--accent,#2d7ff9);border-radius:999px;padding:1px 7px;font-size:11px}
.wcm-sec{margin:0 0 34px;scroll-margin-top:80px}
.wcm-h{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--text);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.wcm-h-ic{font-size:22px}
.wcm-h .wcm-cnt{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:2px 10px}

/* [4] Referral-mode header CTA + notification dropdown + dual modal/bar + training
   toggle/banner (was the big inline body <style> at the end of page_footer). */
.hdr-actions-ref{display:flex;align-items:center;gap:10px}
.hdr-notif-wrap{position:relative}
.hdr-icon-btn{position:relative;background:none;border:none;color:var(--text-secondary);width:34px;height:34px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s}
.hdr-icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.hdr-notif-count{position:absolute;top:1px;inset-inline-end:1px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hdr-notif-menu{display:none;position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:330px;max-width:88vw;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.45);z-index:1300;overflow:hidden}
.hdr-notif-menu.open{display:block}
.hnm-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.hnm-title{font-size:14px;font-weight:800;color:var(--text)}
.hnm-mark{background:none;border:none;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.hnm-list{max-height:380px;overflow-y:auto}
.hnm-empty{padding:28px 14px;text-align:center;color:var(--text-muted);font-size:13px}
.hnm-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);text-decoration:none}
.hnm-item:last-child{border-bottom:0}
.hnm-item:hover{background:var(--bg-hover)}
.hnm-ic{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.hnm-ic.buy,.hnm-ic.win{background:var(--green-soft,rgba(61,180,104,.16));color:var(--green,#3db468)}
.hnm-ic.sell{background:rgba(148,163,184,.16);color:var(--text-muted)}
.hnm-ic.lose{background:var(--red-soft,rgba(203,49,49,.16));color:var(--red,#cb3131)}
.hnm-body{flex:1;min-width:0}
.hnm-t{font-size:13px;font-weight:700;color:var(--text)}
.hnm-sub{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.hnm-amt{font-size:12.5px;font-weight:700;flex-shrink:0}
.hnm-amt.buy,.hnm-amt.win{color:var(--green,#3db468)}
.hnm-amt.lose{color:var(--red,#cb3131)}
.hnm-amt.sell{color:var(--text-secondary)}
@media(max-width:768px){
  .hdr-notif-menu{position:fixed;top:calc(var(--header-h,56px) + 6px);inset-inline-end:8px;inset-inline-start:8px;width:auto;max-width:none}
  .hnm-list{max-height:min(70vh,420px)}
}
.hdr-poly-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,#315EFF 0%,#3b82f6 100%);
  color:#fff !important;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 2px 14px rgba(49,94,255,.32),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  border:1px solid rgba(255,255,255,.12);
  position:relative;overflow:hidden;
}
.hdr-poly-cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.hdr-poly-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(49,94,255,.44),inset 0 1px 0 rgba(255,255,255,.22);filter:brightness(1.08)}
.hdr-poly-cta:hover::before{transform:translateX(100%)}
.hdr-poly-cta-dot{
  width:8px;height:8px;border-radius:50%;background:#3db468;
  box-shadow:0 0 0 2px rgba(61,180,104,.3),0 0 10px rgba(61,180,104,.6);
  animation:polyCtaPulse 2.4s ease-in-out infinite;flex-shrink:0;
}
@keyframes polyCtaPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(.85)}}
.hdr-poly-cta svg{opacity:.9;transition:transform .2s ease}
.hdr-poly-cta:hover svg{transform:translate(2px,-2px)}
[dir=rtl] .hdr-poly-cta:hover svg{transform:translate(-2px,-2px)}
@media(max-width:640px){.hdr-poly-cta{padding:7px 12px;font-size:11.5px;gap:6px}.hdr-poly-cta-text{max-width:110px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:420px){.hdr-poly-cta svg{display:none}}
.mdr-poly-cta{
  background:linear-gradient(135deg,#315EFF 0%,#3b82f6 100%) !important;
  color:#fff !important;border:none;border-radius:10px;padding:12px 18px;
  font-weight:700;font-size:14px;margin:12px 16px;
  box-shadow:0 2px 12px rgba(49,94,255,.28);
}
.mdr-poly-cta:hover{filter:brightness(1.08)}
.tm-toggle{display:inline-flex;align-items:center;gap:7px;padding:6px 8px;border-radius:10px;background:transparent;border:none;box-shadow:none;color:#8b949e;font-size:13px;font-weight:500;cursor:pointer;transition:color .15s;font-family:inherit;white-space:nowrap}
.tm-toggle:hover{background:transparent;color:#e6edf3}
.tm-toggle i{font-size:13px}
.tm-label{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.tm-switch{width:32px;height:18px;border-radius:9px;background:rgba(255,255,255,.1);position:relative;transition:all .3s;flex-shrink:0}
.tm-knob{position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:#6b7280;transition:all .3s cubic-bezier(.4,.2,.2,1)}
body.training-active .tm-toggle{background:transparent;border-color:transparent;color:#3fb950}
body.training-active .tm-switch{background:rgba(59,185,80,.2)}
body.training-active .tm-knob{inset-inline-start:16px;background:#3fb950;box-shadow:0 0 8px rgba(59,185,80,.5)}
@media(max-width:768px){
  .header-inner .mobile-menu-btn{order:1 !important;margin:0 !important}
  .header-inner .logo{order:2 !important;margin-inline-end:0 !important}
  .header-inner .hdr-search-btn{display:none !important}
  .header-inner .hdr-lang-btn{display:none !important}
  .header-inner .hdr-odds{display:none !important}
  .header-inner .pm-theme-toggle{order:8 !important;margin-inline-start:auto !important}
  .header-inner #header-auth,.header-inner .hdr-actions{order:9 !important;margin-inline-start:auto !important}
}
.header-user-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.15);text-decoration:none;color:#e6edf3;font-size:13px;transition:all .2s;margin-inline-start:8px}
.header-user-pill:hover{background:rgba(88,166,255,.14);border-color:rgba(88,166,255,.3)}
.header-user-balance{color:#58a6ff;font-weight:600;font-family:'IBM Plex Mono',monospace}
.header-user-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-user-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#58a6ff,#3b82f6);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.dm-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:dmFadeIn .2s ease}
@keyframes dmFadeIn{from{opacity:0}to{opacity:1}}
.dm-modal{background:linear-gradient(165deg,#1a1f2e 0%,#141820 100%);border:1px solid rgba(255,255,255,.08);border-radius:16px;width:100%;max-width:400px;padding:28px;position:relative;animation:dmSlideUp .3s cubic-bezier(.2,.8,.3,1);box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset}
@keyframes dmSlideUp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.dm-modal-x{position:absolute;top:12px;inset-inline-end:14px;background:none;border:none;color:#6b7280;font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .15s;z-index:1}
.dm-modal-x:hover{color:#e6edf3}
.dm-modal-head{text-align:center;margin-bottom:24px}
.dm-modal-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(88,166,255,.12),rgba(59,130,246,.06));border:1px solid rgba(88,166,255,.15);display:inline-flex;align-items:center;justify-content:center;color:#58a6ff;margin-bottom:14px}
.dm-modal-head h3{font-size:18px;font-weight:700;color:#e6edf3;margin:0 0 6px}
.dm-modal-head p{font-size:13px;color:#8b949e;margin:0}
.dm-modal-opts{display:flex;flex-direction:column;gap:10px}
.dm-opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .2s;text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;text-align:start;width:100%}
.dm-opt:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);transform:translateY(-1px)}
.dm-opt-badge{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.dm-opt-real .dm-opt-badge{background:linear-gradient(135deg,rgba(248,177,49,.12),rgba(248,177,49,.05));color:#f8b131;border:1px solid rgba(248,177,49,.15)}
.dm-opt-train .dm-opt-badge{background:linear-gradient(135deg,rgba(59,185,80,.12),rgba(59,185,80,.05));color:#3fb950;border:1px solid rgba(59,185,80,.15)}
.dm-opt-body{flex:1;display:flex;flex-direction:column;gap:2px}
.dm-opt-body strong{font-size:14px;font-weight:600;color:#e6edf3}
.dm-opt-body span{font-size:12px;color:#8b949e}
.dm-opt-arr{color:#6b7280;flex-shrink:0;transition:transform .2s}
.dm-opt:hover .dm-opt-arr{transform:translateX(3px)}
.dm-bar{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:rgba(13,17,23,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 0;transition:transform .4s cubic-bezier(.4,0,.2,1);border-top:1px solid rgba(255,255,255,.05)}
.dm-bar.dm-init{transition:none}
.dm-bar.dismissed{transform:translateY(100%);pointer-events:none}
.dm-bar-glow{position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(88,166,255,.4) 25%,rgba(59,185,80,.35) 50%,rgba(248,177,49,.3) 75%,transparent 95%);animation:glowPulse 3s ease-in-out infinite alternate}
@keyframes glowPulse{0%{opacity:.5}100%{opacity:1}}
.dm-bar-inner{display:flex;align-items:center;gap:16px}
.dm-bar-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.dm-bar-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(88,166,255,.1),rgba(59,130,246,.06));border:1px solid rgba(88,166,255,.12);display:flex;align-items:center;justify-content:center;color:#58a6ff;flex-shrink:0}
.dm-bar-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.dm-bar-text strong{font-size:13px;color:#e6edf3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-bar-text span{font-size:11px;color:#8b949e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-bar-btn{background:linear-gradient(135deg,#238636,#2ea043);color:#fff;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all .2s;font-family:inherit}
.dm-bar-btn:hover{background:linear-gradient(135deg,#2ea043,#3fb950);transform:translateY(-1px);box-shadow:0 4px 16px rgba(46,160,67,.2)}
.dm-bar-close{background:none;border:none;color:#6b7280;font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .15s}
.dm-bar-close:hover{color:#e6edf3}
.training-banner{background:linear-gradient(135deg,#0d1117 0%,#161b22 50%,#0d1117 100%);border-top:1px solid rgba(255,255,255,.05);padding:44px 0}
.training-banner-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;text-align:center}
.training-banner-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(88,166,255,.1),rgba(59,130,246,.06));border:1px solid rgba(88,166,255,.12);display:flex;align-items:center;justify-content:center;font-size:22px;color:#58a6ff;flex-shrink:0}
.training-banner-content h3{font-size:20px;font-weight:700;color:#e6edf3;margin:0 0 6px}
.training-banner-content p{font-size:13px;color:#8b949e;margin:0;max-width:420px}
.training-banner-btn{background:linear-gradient(135deg,#238636,#2ea043);color:#fff;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;transition:all .2s;font-family:inherit}
.training-banner-btn:hover{background:linear-gradient(135deg,#2ea043,#3fb950);transform:translateY(-1px);box-shadow:0 6px 20px rgba(46,160,67,.2)}
[dir=rtl] .dm-arr,[dir=rtl] .dm-opt-arr{transform:scaleX(-1)}
[dir=rtl] .dm-opt:hover .dm-opt-arr{transform:scaleX(-1) translateX(-3px)}
@media(max-width:768px){
    .dm-bar-text span{display:none}
    .dm-bar-inner{gap:10px}
    .dm-bar-btn{padding:8px 16px;font-size:12px}
    .dm-modal{padding:20px;margin:10px}
    .tm-label{display:none}
    .header-user-name{display:none}
    .header-user-balance{font-size:11px}
    .header-user-pill{padding:4px 10px;font-size:12px;margin-inline-start:6px}
    .training-banner-inner{flex-direction:column}
    .training-banner-content h3{font-size:17px}
    .training-banner-btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANONICAL SITEWIDE BUTTON SYSTEM  (added 2026-06 — design-system pass)
   Reference: the market BUY button (.tp-cta) — flat color + inset-bottom 3D
   shadow, brightness hover, translateY press.
     · GREEN  (#359A5E) = OUR internal / first-party CTAs (training, signup,
                           add-credit, portfolio actions, in-page confirms)
     · RED    (--red #CB3131) = AFFILIATE / "redirect to Polymarket" buttons
                           (operator rule: the Polymarket-redirect buttons get
                           the RED "No" treatment, NOT green; green is reserved
                           for our own internal CTAs)
   Reusable classes: .pm-btn3d (base mechanics) + .pm-btn3d--green /
   .pm-btn3d--red (color). Existing site classes are retargeted below so the
   whole site is consistent without touching every page template.
   ═══════════════════════════════════════════════════════════════════════════ */
.pm-btn3d{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:none;border-radius:8px;
    font-family:inherit;font-weight:700;line-height:1.25;cursor:pointer;
    text-decoration:none;text-align:center;color:#fff;
    box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.22);
    transition:filter .15s ease,transform .08s ease,box-shadow .08s ease;
}
.pm-btn3d:hover{filter:brightness(1.06)}
.pm-btn3d:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.22)}
.pm-btn3d:disabled,.pm-btn3d[disabled],.pm-btn3d.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.pm-btn3d--green{background:#359A5E;color:#fff !important}
.pm-btn3d--red{background:var(--red,#CB3131);color:#fff !important}

/* ── GREEN: our internal / first-party CTAs ─────────────────────────────────
   auth signup (modal + drawer), training-modal confirm, add-credit, header
   deposit when logged-in flows route in-page. */
.hdr-auth-signup,.mdr-auth-signup,.tm-modal-cta,.pm-addcredit-confirm,
.auth-modal-submit,.auth-modal-btn-primary{
    background:#359A5E !important;color:#fff !important;border:none !important;
    box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.22) !important;
    transition:filter .15s ease,transform .08s ease,box-shadow .08s ease !important;
}
.hdr-auth-signup:hover,.mdr-auth-signup:hover,.tm-modal-cta:hover,
.pm-addcredit-confirm:hover,.auth-modal-submit:hover,.auth-modal-btn-primary:hover{
    filter:brightness(1.06);background:#359A5E !important;
}
.hdr-auth-signup:active,.mdr-auth-signup:active,.tm-modal-cta:active,
.pm-addcredit-confirm:active,.auth-modal-submit:active,.auth-modal-btn-primary:active{
    transform:translateY(2px) !important;box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.22) !important;
}
.hdr-auth-signup:disabled,.mdr-auth-signup:disabled,.tm-modal-cta:disabled,
.pm-addcredit-confirm:disabled,.auth-modal-submit:disabled{opacity:.5;cursor:not-allowed}

/* ── RED: affiliate / redirect-to-Polymarket buttons ────────────────────────
   These open tracker.polymarkets.co.il (or, in referral-only mode, route to
   the affiliate). Operator rule: red, not green. */
.hdr-poly-cta,.mdr-poly-cta,.mdr-poly-cta.mdr-deposit,
.dm-bar-btn,.training-banner-btn,.hdr-deposit{
    background:var(--red,#CB3131) !important;
    background-image:none !important;
    color:#fff !important;border:none !important;
    box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.22) !important;
    transition:filter .15s ease,transform .08s ease,box-shadow .08s ease !important;
}
.hdr-poly-cta:hover,.mdr-poly-cta:hover,.dm-bar-btn:hover,
.training-banner-btn:hover,.hdr-deposit:hover{
    background:var(--red,#CB3131) !important;background-image:none !important;
    filter:brightness(1.06) !important;transform:none !important;
    box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.22) !important;
}
.hdr-poly-cta:active,.mdr-poly-cta:active,.dm-bar-btn:active,
.training-banner-btn:active,.hdr-deposit:active{
    transform:translateY(2px) !important;
    box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.22) !important;
}
/* keep the affiliate CTA's live-dot visible on red */
.hdr-poly-cta-dot{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px rgba(255,255,255,.5)}
/* neutralize the old blue/green box-shadow glow on hover for these */
.hdr-poly-cta:hover{box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.22) !important}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD-CREDIT MODAL  (global, reuses .tm-overlay / .tm-modal chrome + sheet)
   Slider snaps to the four live top-up tiers. Confirm = GREEN internal CTA.
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-modal-box{max-width:460px}
.ac-body{padding:18px 24px 22px}
.ac-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--bg-card,#11161c);border:1px solid var(--border);border-radius:14px;
    padding:16px 18px;margin-bottom:18px}
.ac-readout-col{min-width:0}
.ac-readout-col--price{text-align:end}
.ac-readout-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    color:var(--text-muted);margin-bottom:4px}
.ac-readout-paper{font-size:26px;font-weight:800;color:#3DB468;line-height:1;
    font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.ac-readout-price{font-size:22px;font-weight:800;color:var(--text);line-height:1;
    font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.ac-slider-wrap{margin:6px 2px 20px}
.ac-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;
    background:linear-gradient(90deg,#359A5E var(--ac-fill,33%),var(--border) var(--ac-fill,33%));
    outline:none;cursor:pointer;margin:0}
.ac-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
    border-radius:50%;background:#359A5E;border:3px solid #fff;cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .1s}
.ac-slider::-webkit-slider-thumb:active{transform:scale(1.1)}
.ac-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#359A5E;
    border:3px solid #fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ac-slider::-moz-range-track{height:8px;border-radius:99px;background:var(--border)}
.ac-slider::-moz-range-progress{height:8px;border-radius:99px;background:#359A5E}
.ac-ticks{display:flex;justify-content:space-between;gap:6px;margin-top:14px}
.ac-tick{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:transparent;border:1px solid var(--border);border-radius:10px;
    padding:8px 4px;cursor:pointer;font-family:inherit;transition:all .15s;min-width:0}
.ac-tick:hover{border-color:var(--text-muted)}
.ac-tick.is-active{border-color:#359A5E;background:rgba(53,154,94,.12)}
.ac-tick-paper{font-size:12.5px;font-weight:800;color:var(--text);white-space:nowrap;
    font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.ac-tick-price{font-size:11px;font-weight:600;color:var(--text-muted);
    font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.ac-tick.is-active .ac-tick-price{color:#3DB468}
.pm-addcredit-confirm{width:100%;padding:14px;font-size:15px;border-radius:10px;margin-top:2px}
.ac-soon{margin-top:10px;text-align:center;font-size:13px;font-weight:700;color:#3DB468}
.ac-footer{justify-content:center;text-align:center}
.ac-footer .tm-feature{font-size:11.5px;color:var(--text-muted)}
[dir=rtl] .ac-slider{transform:scaleX(-1)}
[dir=rtl] .ac-slider::-webkit-slider-thumb{transform:scaleX(-1)}
@media (max-width:768px){
    .ac-modal-box{max-height:100dvh}
    .ac-readout-paper{font-size:23px}
    .ac-readout-price{font-size:20px}
    .ac-tick-paper{font-size:11.5px}
}

/* #97 (operator): MOBILE FIX — "View on Polymarket" header button was rendering full-width
   on phones. The sports hero sets `.spx-hero-actions .mh-poly-btn{flex-basis:100%}` (inline in
   market.php) which makes the link a full-row flex item; on a narrow screen that reads as a
   full-width button. Below 560px, force the link back to content-width and keep it END-aligned
   (inline-end => right in LTR, auto-flips left in RTL). Lives in style.css so the market.php
   trading-branch stays untouched. */
@media (max-width:560px){
    .spx-hero-actions .mh-poly-btn,
    .market-header-actions .mh-poly-btn{
        flex-basis:auto!important;
        flex-grow:0!important;
        width:auto!important;
        max-width:max-content!important;
        margin-inline-start:auto!important;
        justify-content:center!important;
    }
}

/* #251 (Elena/operator): SPORTS-MATCH page DESKTOP — the "View on Polymarket" header link
   was rendering FULL WIDTH. The inline market.php rule `.spx-hero-actions .mh-poly-btn{flex-basis:100%}`
   makes the link a full-row flex item, so its border-bottom underline stretched across the whole
   header row instead of hugging the icon+label. Restore natural content-width + keep it END-aligned
   (margin-inline-start:auto => inline-end in LTR, auto-flips to inline-start/left in RTL he/ar), so it
   sits inline with the share/bookmark icons like the other header controls. Desktop only — the
   market.php <=768px rule already content-widths + leads the link on mobile. CSS-only; market.php
   (HOT surface, #246) untouched; !important beats the inline rule. */
@media (min-width:769px){
    .spx-hero-actions .mh-poly-btn{
        flex-basis:auto!important;
        flex-grow:0!important;
        width:auto!important;
        max-width:max-content!important;
        margin-inline-start:auto!important;
    }
}

/* ============================================================================
   Market-page section headers — UNIFIED weight + size (operator request).
   The "Order Book" header (.market-ob-head, defined inline in market.php at
   font-weight:700/15px) is the reference. Bring every other section/pane title
   in line: lighter weight (500) + identical desktop size (15px), and -2px on
   mobile (13px <=560px). Lives in style.css (market.php is divergent / cannot
   be deployed) — !important beats the inline rules. Headers normalized:
     .market-ob-head        -> Positions + Order Book
     .drill-tab(.active)    -> Order Book / Graph / Resolution drill tabs
     .similar-markets-title -> Similar markets
     #my-orders-section .sidebar-header -> Open orders
   ========================================================================== */
.market-ob-head,
.drill-tab,
.drill-tab.active,
.similar-markets-title,
#my-orders-section .sidebar-header {
    font-weight: 500 !important;
    font-size: 15px !important;
}
@media (max-width: 560px) {
    .market-ob-head,
    .drill-tab,
    .drill-tab.active,
    .similar-markets-title,
    #my-orders-section .sidebar-header {
        font-size: 13px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUTH MODAL → 1:1 visual twin of the market trade-form (.trade-panel/.tp)
   All overrides live HERE (shared style.css), !important to beat the inline
   #auth-modal rules above + market.php's inline .tp palette. Palette source:
   pages/market.php inline <style> (.tp* @ lines ~414-556) + :root tokens.
   Reference tokens: panel #181D21 / border var(--border #242B32) / radius 15px;
   inputs transparent+1px border, focus var(--accent); tabs active=var(--text)
   underline; CTA green #359A5E + inset 0 -4px 0 rgba(0,0,0,.22), hover bright.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Desktop: center the box with margin:auto (mobile bottom-sheet untouched —
   the <=768px rules above already win via flex-end + margin:0 !important). */
@media (min-width:769px){
  .auth-modal-overlay{align-items:center !important}
  .auth-modal-box{margin:auto !important}
}

/* (2) Panel surface → exact trade-panel card (.tp): flat #181D21, var(--border),
   15px radius. Drop the old gradient + translucent white border + heavy shadow. */
.auth-modal-box{
  background:#181D21 !important;
  border:1px solid var(--border) !important;
  border-radius:15px !important;
  box-shadow:0 24px 80px rgba(0,0,0,.55) !important;
}
.auth-modal-x{color:var(--text-muted) !important}
.auth-modal-x:hover{color:var(--text) !important}
.auth-modal-title{color:var(--text) !important}
.auth-modal-sub{color:var(--text-secondary) !important}

/* (3) Tabs → .tp-tab: muted label, active = var(--text) with a var(--text)
   underline (trade-form uses the text colour, not accent, for the active tab). */
.auth-modal-tabs{border-bottom:1px solid var(--border) !important}
.auth-modal-tab{color:var(--text-muted) !important;border-bottom:2px solid transparent !important}
.auth-modal-tab:hover{color:var(--text) !important}
.auth-modal-tab.active{color:var(--text) !important;border-bottom-color:var(--text) !important}

/* (4) Inputs → 1:1 with trade-form fields: transparent surface inside a
   1px var(--border) box, 8px radius, var(--text), focus = var(--accent) ring +
   border (matches .tp-stepper/.tp-limit-section input focus). */
.auth-modal-field input{
  background:transparent !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  color:var(--text) !important;
  font-family:inherit !important;
}
.auth-modal-field input::placeholder{color:var(--text-muted) !important}
.auth-modal-field input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(49,94,255,.15) !important; /* var(--accent) #315EFF @ .15 */
}
.auth-modal-field label{color:var(--text-secondary) !important}

/* (5a) Secondary / OAuth buttons → .tp-outcome look: var(--border) fill,
   var(--text), inset bottom shadow, brightens on hover. (Google/X keep their
   brand fills via .auth-modal-oauth-g/-x which override these.) */
.auth-modal-oauth-btn{
  background:var(--border) !important;
  color:var(--text) !important;
  border:none !important;
  border-radius:9px !important;
  box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.18) !important;
  transition:background .15s,color .15s,transform .08s,box-shadow .08s !important;
}
.auth-modal-oauth-btn:hover{background:var(--bg-hover) !important;color:#fff !important}
.auth-modal-oauth-btn:active{transform:translateY(2px) !important;box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.18) !important}
.auth-modal-oauth-g{background:#fff !important;color:#1f1f1f !important;border:1px solid #e2e2e2 !important;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.10) !important}
.auth-modal-oauth-x{background:#000 !important;color:#fff !important;border:1px solid #222 !important;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.30) !important}

/* (5b) Primary submit already routed to the green .tp-cta system above
   (line ~10580: #359A5E + inset 0 -4px 0 rgba(0,0,0,.22) + brightness hover),
   so it's a 1:1 twin of the trade-form buy button. Only normalise its shape to
   match .tp-cta (9px radius, 13px pad) without re-touching the green. */
.auth-modal-submit{border-radius:9px !important;padding:13px !important;font-weight:600 !important}

/* (5c) Verify-panel resend → secondary trade-form chip styling. */
.auth-modal-verify-resend{
  background:var(--border) !important;border:none !important;border-radius:9px !important;
  color:var(--text-secondary) !important;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.18) !important;
}
.auth-modal-verify-resend:hover{background:var(--bg-hover) !important;color:#fff !important}

/* (6) Dividers / hairlines → trade-form var(--border). */
.auth-modal-divider:before,.auth-modal-divider:after{background:var(--border) !important}

/* ==== #949/#848: Desktop option-button symmetry (Polymarket parity) ====
   One FIXED width for every buy button, so each pair is the same total width
   and every row's buttons start on the same x line (operator: symmetric start,
   2 or 3 buttons alike). Buttons stay SEPARATE rounded pills with the base 8px
   gap - NOT joined (operator correction 2026-07-06). Desktop only - mobile
   keeps its flex:1 full-width buttons (mobile gets logic changes, no widths). */
@media (min-width:769px){
  .outcome-row-item .outcome-row-buys .outcome-buy{ flex:0 0 132px; min-width:132px; }
}

/* ==== #1303: Mobile brand wordmark — allow up to 2 rows for long-title langs ====
   Operator override (from #1296): on mobile the localized wordmark (nav.brand,
   e.g. "Polymarket Bahasa Indonesia", "Полимаркет на русском", "פולימרקט בעברית")
   was one nowrap row that GREW past the header and shoved the actions off-screen
   (the brand lockup was flex-shrink:0). Two parts:
   1) let the lockup YIELD width (min-width:0 + shrink) so it stops pushing the
      flag/lang/hamburger aside — it now gives space back to the wordmark instead;
   2) allow the wordmark to WRAP to a natural 2-line max so the full title shows.
   - Wraps only where a break opportunity exists (all long titles have spaces), so
     SHORT/single-word langs (en "PolymarketsCoil", zh, ko) stay on ONE row.
   - line-clamp:2 caps at 2 rows (ellipsis beyond); 2×15px×1.15 ≈ 35px still fits
     inside the 36px header row → header height stays stable, no push/overlap.
   - RTL-safe: no physical props; .logo already mirrors via [dir=rtl] order rules.
   - Desktop (>768px) untouched: the lockup keeps flex-shrink:0 / nowrap there.
   Overrides the two single-line .logo-text rules above (source-order win). */
@media (max-width:768px){
  .logo-lockup{ min-width:0; flex-shrink:1; }
  .logo{ min-width:0; }
  .logo-text{
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
    font-size:13px;
    line-height:1.15;
    word-break:normal;
    overflow-wrap:normal;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET ACTION BUTTON — full state set + mobile tactile  (#1319)
   Polymarket-matched yes/no colours live in the --yes/--no tokens (top of file).
   This block adds the button states the yes/no buy buttons were missing —
   pressed(active), focus-visible ring, disabled, selected — and a physical
   press feel on touch (mobile = tactile). Families: .mc-btn (cards) ·
   .outcome-btn · .trade-btn · .outcome-buy · .drill-buy. (.tp-outcome/.tp-cta
   carry a matching inline set in market.php; .spx-btn is handled in sports.css.)
   ═══════════════════════════════════════════════════════════════════════════ */
.mc-btn, .outcome-btn, .trade-btn, .outcome-buy, .drill-buy{
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
/* PRESSED — tactile depress (also fires on desktop mousedown, like Polymarket) */
.mc-btn:active, .outcome-btn:active, .trade-btn:active, .outcome-buy:active, .drill-buy:active{
    transform: translateY(1px) scale(.985);
}
.trade-btn:active, .drill-buy:active{ filter: brightness(.96); }
/* FOCUS-VISIBLE — keyboard a11y ring, colour-matched to the side */
.mc-btn:focus-visible, .outcome-btn:focus-visible, .trade-btn:focus-visible,
.outcome-buy:focus-visible, .drill-buy:focus-visible{
    outline: 2px solid var(--yes); outline-offset: 2px;
}
.mc-btn.no:focus-visible, .outcome-btn.no:focus-visible, .outcome-buy.no:focus-visible,
.trade-btn.buy-no:focus-visible, .drill-buy.no:focus-visible{ outline-color: var(--no); }
/* DISABLED */
.mc-btn.is-disabled, .outcome-btn:disabled, .outcome-btn.is-disabled,
.trade-btn:disabled, .trade-btn.is-disabled, .outcome-buy:disabled, .outcome-buy.is-disabled,
.drill-buy:disabled, .drill-buy.is-disabled{
    opacity: .45; cursor: not-allowed; filter: saturate(.55); pointer-events: none; box-shadow: none;
}
/* SELECTED / pressed-state — persistent solid fill for the soft-default buttons */
.mc-btn.yes.is-selected, .mc-btn.yes[aria-pressed="true"],
.outcome-btn.yes.is-selected, .outcome-btn.yes[aria-pressed="true"]{ background: var(--yes); color:#fff; }
.mc-btn.no.is-selected, .mc-btn.no[aria-pressed="true"],
.outcome-btn.no.is-selected, .outcome-btn.no[aria-pressed="true"]{ background: var(--no); color:#fff; }

/* MOBILE = PHYSICAL: coarse pointers get a firm press + no latched :hover fill */
@media (hover: none), (pointer: coarse){
    /* neutralise the sticky :hover fill that latches after a tap on touch */
    .mc-btn.yes:hover{ background: var(--yes-soft); color: var(--yes-text); }
    .mc-btn.no:hover { background: var(--no-soft);  color: var(--no-text); }
    .outcome-btn.yes:hover{ background: var(--yes-soft); color: var(--yes-text); }
    .outcome-btn.no:hover { background: var(--no-soft);  color: var(--no-text); }
    .outcome-buy.yes:hover{ background: var(--yes-soft); color: var(--yes-text); }
    .outcome-buy.no:hover { background: var(--no-soft);  color: var(--no-text); }
    .trade-btn.buy-yes:hover{ background: var(--yes); }
    .trade-btn.buy-no:hover { background: var(--no); }
    .drill-buy:hover{ filter: none; }
    /* tap = firm physical depress + a solid colour flash (the "press-down" feel) */
    .mc-btn:active, .outcome-btn:active, .outcome-buy:active{
        transform: translateY(1px) scale(.955); filter: brightness(1.05);
    }
    .mc-btn.yes:active, .outcome-btn.yes:active, .outcome-buy.yes:active{ background: var(--yes); color:#fff; }
    .mc-btn.no:active,  .outcome-btn.no:active,  .outcome-buy.no:active{ background: var(--no);  color:#fff; }
    .trade-btn:active, .drill-buy:active{ transform: translateY(2px) scale(.965); filter: brightness(.92); box-shadow: none; }
}

/* ═══ #533 paper-trade plugin: paper badge + option chips + authed personal panel ═══ */
.tp-paper-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:5px;padding:1px 6px;margin-inline-start:8px;vertical-align:middle;opacity:.85;white-space:nowrap}
button.mc-yn{font-family:inherit;border:0;cursor:pointer;line-height:inherit} /* chips were spans; keep the visual, add the affordance */
button.mc-yn:hover{filter:brightness(1.15)}
.mc-h2h-row[onclick]{cursor:pointer}
.mc-h2h-row[onclick]:hover{background:var(--bg-hover)}
#pp-panel.pp-authed .tp-paper-badge{margin-inline-start:auto;margin-inline-end:8px}
.ppa-stats{display:flex;gap:10px;margin-block-end:14px}
.ppa-stat{flex:1;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ppa-lbl{font-size:11px;color:var(--text-muted)}
.ppa-stat b{font-size:16px;font-weight:700}
.ppa-up{color:var(--yes-text,#3fd06b)}
.ppa-down{color:var(--no-text,#ff6b6b)}
.ppa-sec{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-block-end:6px}
#ppa-positions{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow-y:auto;margin-block-end:14px}
.ppa-pos{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text)}
.ppa-pos:hover{background:var(--bg-hover)}
.ppa-pos-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ppa-pos-v{font-weight:600;font-size:13px;white-space:nowrap}
.ppa-empty{color:var(--text-muted);font-size:13px;padding:6px 0}
.ppa-cta{display:block;text-align:center;text-decoration:none}

/* ═══ #99770 founder UX pass: one-tap header entry points + wallet count-up ═══ */
/* Discoverable one-tap links to the Training app + Portfolio (logged-in desktop only).
   Hidden by default so guests never see them; mobile uses the bottom-nav + drawer. */
.hdr-quick{display:none;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  color:var(--text,#E5E7EB);background:transparent;border:1px solid var(--line,#242B32);
  text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.hdr-quick i{font-size:14px;color:var(--accent2,#1BA3FF)}
.hdr-quick:hover{background:var(--card,#1E2428);border-color:var(--accent,#315EFF);color:var(--text-strong,#fff)}
.hdr-quick:hover i{color:var(--text-strong,#fff)}
@media (min-width:769px){body.training-active .site-header .hdr-actions > .hdr-quick{display:inline-flex}}
/* count-up flash: the balance pulses accent-green while counting up on add/claim */
.wallet-counting{color:#4ade80!important;transition:color .25s}

/* ═══ #102223 — ONE "Training Mode" entry in the desktop top bar ═══
   The label used to render twice on row 1: the nav entry AND the actions-row pill
   (guest) / one-tap app link (logged-in). The nav entry is now a dropdown carrying
   BOTH links (app + program), identical for guest and logged-in, so the actions-row
   copies were removed from template.php. This panel is a short 2-item list, so it
   drops the 360px base min-width. Logical properties only (RTL-safe he/ar/fa/ur). */
.header-nav .snm-panel-train{min-width:232px;padding:8px}
.header-nav .snm-panel-train .snm-i{font-size:13.5px;padding:9px 10px}
.header-nav .snm-panel-train .snm-i-app{font-weight:600;color:var(--text-strong,#fff)}
.header-nav .snm-panel-train .snm-i-app i{color:var(--accent2,#1BA3FF)}

/* ═══ #102223 — "the training program" block on /training/ ═══
   4 cards describing the #300 app (guided path · daily quests · equity curve ·
   Analyze My Play). Logical properties only; collapses 4 → 2 → 1 like trn-pkg-grid. */
.trn-prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.trn-prog-card{display:flex;flex-direction:column;gap:9px;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;
  transition:border-color .15s,transform .15s}
.trn-prog-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.trn-prog-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:15px}
.trn-prog-title{font-size:16px;font-weight:800;margin:2px 0 0;color:var(--text-strong)}
.trn-prog-desc{font-size:13.5px;line-height:1.5;color:var(--text-secondary);margin:0}
@media (max-width:900px){.trn-prog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.trn-prog-grid{grid-template-columns:1fr}}