/* ================================================================
 * Finboard v4 — Dark Neumorphic Finance Theme
 * DARK default + LIGHT MODE — Bloomberg Terminal meets premium watch UI
 * The Investors Centre — theinvestorscentre.co.uk
 * Design system: see DESIGN.md for full specification
 * ================================================================ */

/* ── Skip Link (accessibility) ───────────────────────────────── */
.finboard-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--fb-gold);
    color: #000;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.finboard-skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}

/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── 1. Variables ─────────────────────────────────────────────── */

/* LIGHT theme (default) */
:root {
    color-scheme: light dark;
    --fb-navy: #ffffff;
    --fb-bg: #f8f9fb;
    --fb-bg-card: #ffffff;
    --fb-bg-raised: #f1f3f7;
    --fb-bg-hover: #e8ebf0;
    --fb-bg-input: #ffffff;
    --fb-bg-inset: #e8ebf0;
    --fb-gold: #c4920a;
    --fb-gold-hover: #a87c08;
    --fb-gold-dim: rgba(196,146,10,0.06);
    --fb-gold-glow: rgba(196,146,10,0.1);
    --fb-green: #059669;
    --fb-green-dim: rgba(5,150,105,.06);
    --fb-red: #dc2626;
    --fb-red-dim: rgba(220,38,38,.06);
    --fb-border: rgba(0,0,0,0.10);
    --fb-border-strong: rgba(0,0,0,0.18);
    --fb-border-gold: rgba(196,146,10,0.2);
    --fb-text: #1a1d25;
    --fb-text-secondary: #4a5068;
    --fb-text-muted: #4a5060;
    --fb-text-link: #a87c08;
    --fb-shadow: 0 1px 4px rgba(0,0,0,.08);
    --fb-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --fb-shadow-gold: 0 0 16px rgba(196,146,10,.06);
    --fb-shadow-card: 0 2px 6px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06);
    /* Neumorphic shadow system — see DESIGN.md */
    --fb-neu-out: 6px 6px 14px rgba(0,0,0,.15), -6px -6px 14px rgba(255,255,255,.85);
    --fb-neu-out-sm: 3px 3px 8px rgba(0,0,0,.10), -3px -3px 8px rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.04);
    --fb-neu-in: inset 3px 3px 8px rgba(0,0,0,.12), inset -3px -3px 8px rgba(255,255,255,.8);
    --fb-neu-in-sm: inset 2px 2px 5px rgba(0,0,0,.1), inset -2px -2px 5px rgba(255,255,255,.75);
    --fb-neu-gold: 0 0 20px rgba(196,146,10,.1), 0 0 6px rgba(196,146,10,.06);
    --fb-neu-flat: 0 1px 2px rgba(0,0,0,.05);
    --fb-glass: rgba(255,255,255,0.7);
    --fb-glass-border: rgba(0,0,0,0.06);
    --fb-radius: 14px;
    --fb-radius-sm: 8px;
    --fb-radius-xs: 5px;
    --fb-radius-pill: 9999px;
    --fb-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fb-font-display: "Bricolage Grotesque", "DM Sans", -apple-system, sans-serif;
    --fb-font: var(--fb-font-body);
    --fb-transition: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
    --fb-transition-slow: 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
    --fb-max-width: 960px;
    --fb-sidebar-w: 300px;
    --fb-header-h: 60px;
}

/* DARK theme overrides */
[data-finboard-theme="dark"] .finboard,
[data-finboard-theme="dark"].finboard {
    --fb-navy: #151822;
    --fb-bg: #181c26;
    --fb-bg-card: #1e2230;
    --fb-bg-raised: #232838;
    --fb-bg-hover: #2a3042;
    --fb-bg-input: #151822;
    --fb-bg-inset: #13161e;
    --fb-gold: #E8A910;
    --fb-gold-hover: #f0bd3e;
    --fb-gold-dim: rgba(232,169,16,0.10);
    --fb-gold-glow: rgba(232,169,16,0.18);
    --fb-green: #10b981;
    --fb-green-dim: rgba(16,185,129,.08);
    --fb-red: #ef4444;
    --fb-red-dim: rgba(239,68,68,.08);
    --fb-border: rgba(255,255,255,0.06);
    --fb-border-strong: rgba(255,255,255,0.10);
    --fb-border-gold: rgba(232,169,16,0.25);
    --fb-text: #e8ecf4;
    --fb-text-secondary: #9ca3b4;
    --fb-text-muted: #6b7388;
    --fb-text-link: #E8A910;
    --fb-shadow: 0 2px 6px rgba(0,0,0,.4);
    --fb-shadow-lg: 0 8px 24px rgba(0,0,0,.45);
    --fb-shadow-gold: 0 0 20px rgba(232,169,16,.10);
    --fb-shadow-card: var(--fb-neu-out-sm);
    /* Neumorphic shadow system — dark mode (strengthened for visibility) */
    --fb-neu-out: 6px 6px 16px rgba(0,0,0,.6), -4px -4px 12px rgba(255,255,255,.05);
    --fb-neu-out-sm: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04);
    --fb-neu-in: inset 3px 3px 8px rgba(0,0,0,.55), inset -2px -2px 6px rgba(255,255,255,.04);
    --fb-neu-in-sm: inset 2px 2px 5px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.03);
    --fb-neu-gold: 0 0 24px rgba(232,169,16,.15), 0 0 8px rgba(232,169,16,.10);
    --fb-neu-flat: 0 1px 2px rgba(0,0,0,.2);
    --fb-glass: rgba(255,255,255,0.025);
    --fb-glass-border: rgba(255,255,255,0.06);
}

/* DARK theme — global scope for elements outside .finboard wrapper (nav bar, auth shell).
   Duplicates the dark overrides at the html level so CSS vars resolve correctly
   on elements that are direct children of <body>, like .finboard-community-bar. */
html[data-finboard-theme="dark"] {
    --fb-navy: #151822;
    --fb-bg: #181c26;
    --fb-bg-card: #1e2230;
    --fb-bg-raised: #232838;
    --fb-bg-hover: #2a3042;
    --fb-bg-input: #151822;
    --fb-bg-inset: #13161e;
    --fb-gold: #E8A910;
    --fb-gold-hover: #f0bd3e;
    --fb-gold-dim: rgba(232,169,16,0.10);
    --fb-gold-glow: rgba(232,169,16,0.18);
    --fb-green: #10b981;
    --fb-green-dim: rgba(16,185,129,.08);
    --fb-red: #ef4444;
    --fb-red-dim: rgba(239,68,68,.08);
    --fb-border: rgba(255,255,255,0.06);
    --fb-border-strong: rgba(255,255,255,0.10);
    --fb-border-gold: rgba(232,169,16,0.25);
    --fb-text: #e8ecf4;
    --fb-text-secondary: #9ca3b4;
    --fb-text-muted: #6b7388;
    --fb-text-link: #E8A910;
    --fb-shadow: 0 2px 6px rgba(0,0,0,.4);
    --fb-shadow-lg: 0 8px 24px rgba(0,0,0,.45);
    --fb-shadow-gold: 0 0 20px rgba(232,169,16,.10);
    --fb-shadow-card: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04);
    --fb-neu-out: 6px 6px 16px rgba(0,0,0,.6), -4px -4px 12px rgba(255,255,255,.05);
    --fb-neu-out-sm: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04);
    --fb-neu-in: inset 3px 3px 8px rgba(0,0,0,.55), inset -2px -2px 6px rgba(255,255,255,.04);
    --fb-neu-in-sm: inset 2px 2px 5px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.03);
    --fb-neu-gold: 0 0 24px rgba(232,169,16,.15), 0 0 8px rgba(232,169,16,.10);
    --fb-neu-flat: 0 1px 2px rgba(0,0,0,.2);
    --fb-glass: rgba(255,255,255,0.025);
    --fb-glass-border: rgba(255,255,255,0.06);
}

/* Force page background to match theme — scoped to community/auth pages only */
body.finboard-community-page,
body.finboard-auth-page { background: #f8f9fb !important; }

/* Dark mode body background override — scoped */
html[data-finboard-theme="dark"] body.finboard-community-page,
html[data-finboard-theme="dark"] body.finboard-auth-page {
    background: #181c26 !important;
}

/* ── Explicit data-attribute theme overrides (complement prefers-color-scheme)
   These ensure the JS toggle works regardless of system preference.         ── */
html[data-finboard-theme="light"] {
    --fb-bg: #f8f9fb;
    --fb-bg-card: #ffffff;
    --fb-bg-raised: #f1f3f7;
    --fb-bg-hover: #e8ebf0;
    --fb-gold: #c4920a;
    --fb-text: #1a1e28;
    --fb-text-secondary: #4a5068;
    --fb-text-muted: #5e6578;
    --fb-border: rgba(0,0,0,0.06);
    --fb-border-strong: rgba(0,0,0,0.14);
}
html[data-finboard-theme="light"] body.finboard-community-page,
html[data-finboard-theme="light"] body.finboard-auth-page {
    background: #f8f9fb !important;
}

/* ── 1b. Keyframe Animations ─────────────────────────────────── */
@keyframes finboard-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes finboard-slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes finboard-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes finboard-slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes finboard-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
@keyframes finboard-spin {
    to { transform: rotate(360deg); }
}
@keyframes finboard-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes finboard-correctGlow {
    0%   { box-shadow: 0 0 0 rgba(16,185,129,0); }
    50%  { box-shadow: 0 0 20px rgba(16,185,129,.3), 0 0 40px rgba(16,185,129,.1); }
    100% { box-shadow: 0 0 0 rgba(16,185,129,0); }
}
@keyframes finboard-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
@keyframes finboard-timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes finboard-timerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
@keyframes finboard-vote-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ── 2. Reset & Base ─────────────────────────────────────────── */

/* Prevent browser-default Times New Roman on orphaned Finboard elements
   (modals/tooltips teleported to body, inputs rendered outside wrapper). */
.finboard-mod-modal,
.finboard-mod-kebab__menu,
.finboard-search-modal,
.finboard-search-page__suggestions,
[class^="finboard-"],
[class*=" finboard-"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Neutralise hello-elementor theme's reset.css button rule:
     [type=button]:hover, [type=submit]:hover, button:hover,
     [type=button]:focus, [type=submit]:focus, button:focus {
         background-color: #c36;   ← theme-violating crimson
         color: #fff;
     }
   Every Finboard button (including modals + body-detached dropdowns)
   was flashing crimson on hover/focus.

   Use `:where()` for the scope selector so our rule has the SAME
   specificity as the theme's (0, 1, 1) — we win by source order
   because finboard-v4.css loads after the theme reset. `:where()`
   carries zero specificity, so per-button classes like
   `.finboard-theme-toggle:hover` (0, 2, 0) still win and keep
   their designed hover treatment. */
/* !important on the leak-neutraliser: reset.css has
 *   button:focus { background-color: #c36; color: #fff; }
 * at (0,1,1) and loads AFTER finboard-v4.css on staging, so a
 * zero-specificity :where() override ties on specificity but
 * loses the source-order tiebreak — which is what made feed
 * upvote buttons turn red after click (focus persists until the
 * user clicks elsewhere).
 *
 * Also covers :focus-visible and :active so a tap on mobile
 * (where :focus-visible is handled more aggressively by some
 * browsers) doesn't flash crimson either. Per-component hover
 * rules with a non-transparent explicit background (e.g.
 * .finboard-btn--primary, .finboard-like-btn--active) already
 * carry !important so they paint over this neutraliser. */
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="button"]:hover,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="button"]:focus,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="button"]:focus-visible,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="button"]:active,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="submit"]:hover,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="submit"]:focus,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="submit"]:focus-visible,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) [type="submit"]:active,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) button:hover,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) button:focus,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) button:focus-visible,
:where(.finboard, .finboard-mod-modal, .finboard-mod-kebab__menu, .finboard-search-modal, .finboard-search-page__suggestions, .finboard-toast, .finboard-confirm) button:active {
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Per-component colour rules that SHOULD win over the neutraliser
 * need !important on their background/color. Add a specific
 * safeguard for .finboard-post-action (used on feed topic cards:
 * comment / views / upvote / share) because it's the most-clicked
 * button and users noticed the :focus leak on it first. */
.finboard-post-action:focus,
.finboard-post-action:focus-visible,
.finboard-post-action:active {
    background-color: var(--fb-bg-raised, transparent) !important;
    color: var(--fb-text, inherit) !important;
    outline: 2px solid var(--fb-gold, #c4920a) !important;
    outline-offset: -2px !important;
}
.finboard-post-action--upvote.finboard-like-btn--active,
.finboard-like-btn--active {
    background-color: rgba(196, 146, 10, 0.14) !important;
    color: var(--fb-gold, #c4920a) !important;
}

.finboard {
    font-family: var(--fb-font);
    color: var(--fb-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    background: var(--fb-bg);
    position: relative;
}

/* Subtle noise texture overlay */
.finboard::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}
[data-finboard-theme="light"] .finboard::before { opacity: 0.012; }

.finboard *, .finboard *::before, .finboard *::after { box-sizing: inherit; }

/* Reset theme button styles that override finboard buttons.
   Wrap scope selector in :where() so this rule carries zero specificity
   — per-component button classes like .finboard-post-action (0,1,0)
   can then set their own padding / font-size without being clobbered
   by a generic element-level reset. Matches the pattern used further
   down for the #c36 hover-leak fix. */
:where(.finboard) button,
:where(.finboard) [type="button"],
:where(.finboard) [type="submit"],
:where(.finboard) [type="reset"] {
    font-size: inherit;
    padding: 0;
    margin: 0;
    font-family: var(--fb-font);
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    line-height: inherit;
}
/* Re-apply component padding after global reset. The .finboard-action-btn
   override was out-of-sync with the canonical action-button rule (5×8)
   and was leaking 5×10 specifically on the thread/comment row, which
   caused the "different size from feed's Save/Share/Report" inconsistency.
   Removed — the canonical rule elsewhere owns padding. */
.finboard .finboard-btn { padding: 8px 16px; }
.finboard .finboard-btn--primary:disabled { opacity: 0.4; background: var(--fb-bg-raised); color: var(--fb-text-muted); }

/* ── Button fortification vs hello-elementor's reset.css ─────────
 * reset.css ships with rules like
 *   [type="submit"]     { background: transparent; color: #c36; }
 *   [type="submit"]:hover { background: #c36; color: #fff; }
 * at (0,1,0) / (0,1,1). Those load AFTER finboard-v4.css on every
 * page, so single-class rules tie on specificity and lose on
 * source-order — producing a crimson flash on Save, Comment,
 * Follow, Revoke-session, etc.
 *
 * Strategy: duplicate the variant class (reads as two classes →
 * (0,2,0) specificity) AND use !important on the colour / background
 * / border so reset.css can never stomp them — even if the theme
 * author later adds a :hover rule with a third class-selector.
 * Covers every variant we render in-plugin (primary, secondary,
 * outline, ghost, danger, gold, hero). Hover variants live with
 * each variant's per-state rule further down the file; this block
 * pins the resting state.
 *
 * !important is a fortification pattern here, not a code smell —
 * the theme's reset is itself using selectors broad enough that no
 * per-component rule can beat it without this. Doubled-class raises
 * specificity so the properties without !important (padding,
 * border-radius, etc.) also resist theme overrides.
 */
/* ── Scroll offset for hash-anchor navigation ───────────────────
 * Clicking a reply in search results opens /community/thread/…/#finboard-dc-post-NNN
 * and the browser's default scroll-to-fragment lands with the
 * target element flush to the viewport top — which puts it behind
 * the 56px sticky .tic-header. 80px gives breathing room + matches
 * the same offset used by .finboard-broker-page__sidebar:top. Also
 * covers any future sticky community bar without per-element fuss.
 *
 * scroll-padding-top on :root applies to hash-anchor scrolls and
 * Element.scrollIntoView() alike. scroll-margin-top on the actual
 * target elements is belt-and-braces in case a parent overflow
 * scroller (e.g. a modal) takes precedence. */
:root, html {
    scroll-padding-top: 80px;
}
[id^="finboard-dc-post-"],
.finboard-comment[data-dc-post-id],
.finboard-stock-comment[data-dc-post-number] {
    scroll-margin-top: 80px;
}

.finboard-btn.finboard-btn--primary,
.finboard-btn.finboard-btn--primary:link,
.finboard-btn.finboard-btn--primary:visited {
    background: var(--fb-gold) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border-color: var(--fb-gold) !important;
}
.finboard-btn.finboard-btn--primary:hover,
.finboard-btn.finboard-btn--primary:focus,
.finboard-btn.finboard-btn--primary:focus-visible {
    background: var(--fb-gold-hover, #d9a00e) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border-color: var(--fb-gold-hover, #d9a00e) !important;
}
.finboard-btn.finboard-btn--secondary,
.finboard-btn.finboard-btn--secondary:link,
.finboard-btn.finboard-btn--secondary:visited {
    background: transparent !important;
    color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text) !important;
    border: 1px solid var(--fb-border) !important;
}
.finboard-btn.finboard-btn--secondary:hover,
.finboard-btn.finboard-btn--secondary:focus,
.finboard-btn.finboard-btn--secondary:focus-visible {
    background: var(--fb-bg-raised, rgba(255,255,255,.03)) !important;
    color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text) !important;
    border-color: var(--fb-border-strong, rgba(0,0,0,.2)) !important;
}
.finboard-btn.finboard-btn--outline,
.finboard-btn.finboard-btn--outline:link,
.finboard-btn.finboard-btn--outline:visited {
    background: transparent !important;
    color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text) !important;
    border: 1px solid var(--fb-border) !important;
}
.finboard-btn.finboard-btn--outline:hover,
.finboard-btn.finboard-btn--outline:focus,
.finboard-btn.finboard-btn--outline:focus-visible {
    background: var(--fb-bg-raised, #f1f3f7) !important;
    color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text) !important;
    border-color: var(--fb-border-strong, rgba(0,0,0,.2)) !important;
}
.finboard-btn.finboard-btn--ghost,
.finboard-btn.finboard-btn--ghost:link,
.finboard-btn.finboard-btn--ghost:visited {
    background: transparent !important;
    color: var(--fb-text-muted) !important;
    -webkit-text-fill-color: var(--fb-text-muted) !important;
    border: none !important;
}
.finboard-btn.finboard-btn--ghost:hover,
.finboard-btn.finboard-btn--ghost:focus,
.finboard-btn.finboard-btn--ghost:focus-visible {
    background: var(--fb-bg-raised, #f1f3f7) !important;
    color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text) !important;
}
.finboard-btn.finboard-btn--danger,
.finboard-btn.finboard-btn--danger:link,
.finboard-btn.finboard-btn--danger:visited {
    background: #ef4444 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid #ef4444 !important;
}
.finboard-btn.finboard-btn--danger:hover,
.finboard-btn.finboard-btn--danger:focus,
.finboard-btn.finboard-btn--danger:focus-visible {
    background: #dc2626 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #dc2626 !important;
}
.finboard-btn.finboard-btn--gold,
.finboard-btn.finboard-btn--gold:link,
.finboard-btn.finboard-btn--gold:visited {
    background: var(--fb-gold, #c4920a) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}
.finboard-btn.finboard-btn--gold:hover,
.finboard-btn.finboard-btn--gold:focus,
.finboard-btn.finboard-btn--gold:focus-visible {
    background: var(--fb-gold-hover, #d9a00e) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Catch-all: any .finboard-btn without a variant (or with an unknown
 * variant) gets the secondary treatment so it never renders with
 * the theme's #c36. Wrapped in :where() so the catch-all has
 * specificity (0,1,0) — the same as the theme's reset — and the
 * doubled-class variant rules above at (0,2,0) always win for
 * variants we explicitly handle. */
.finboard-btn:where(:not(.finboard-btn--primary):not(.finboard-btn--secondary):not(.finboard-btn--outline):not(.finboard-btn--ghost):not(.finboard-btn--danger):not(.finboard-btn--gold):not(.finboard-btn--hero)) {
    background: transparent !important;
    color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text) !important;
    border: 1px solid var(--fb-border) !important;
}

/* Override theme link styles */
.finboard a,
.finboard .page-content a,
.finboard .entry-content a,
.finboard .elementor-widget-container a {
    color: inherit;
    text-decoration: none;
    transition: color var(--fb-transition);
    -webkit-text-fill-color: currentColor;
}
.finboard a:hover { color: var(--fb-gold); }

/* ── Elementor kit override ─────────────────────────────────── */
/* Elementor's .elementor-kit-N sets h1-h4 to white, a:hover to white,
   and forces Roboto. These must be overridden inside .finboard. */
.finboard h1,
.finboard h2,
.finboard h3,
.finboard h4 {
    color: var(--fb-text) !important;
    font-family: var(--fb-font-display) !important;
}
.finboard h1 { font-size: 28px !important; font-weight: 700; line-height: 1.2; }
.finboard h2 { font-size: 20px !important; font-weight: 700; line-height: 1.25; }
.finboard h3 { font-size: 16px !important; font-weight: 600; line-height: 1.3; }
.finboard h4 { font-size: 14px !important; font-weight: 600; line-height: 1.35; }
.finboard a:hover,
.finboard a:focus {
    color: var(--fb-gold) !important;
    text-decoration: none !important;
}
.finboard a {
    text-decoration: none !important;
}

.finboard img { max-width: 100%; height: auto; }
.finboard ul, .finboard ol { list-style: none; margin: 0; padding: 0; }

/* Scrollbar styling */
.finboard,
.finboard * {
    scrollbar-width: thin;
    scrollbar-color: var(--fb-border-strong) transparent;
}
.finboard ::-webkit-scrollbar { width: 6px; height: 6px; }
.finboard ::-webkit-scrollbar-track { background: transparent; }
.finboard ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.finboard ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* Light mode scrollbars */
[data-finboard-theme="light"] .finboard,
[data-finboard-theme="light"] .finboard * {
    scrollbar-color: rgba(196,146,10,.12) transparent;
}
[data-finboard-theme="light"] .finboard ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); }
[data-finboard-theme="light"] .finboard ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.18); }

/* Smooth scroll for anchored navigation */
.finboard { scroll-behavior: smooth; }

/* Selection color on dark theme */
.finboard ::selection { background: rgba(232,169,16,.3); color: #fff; }
[data-finboard-theme="light"] .finboard ::selection { background: rgba(196,146,10,.25); color: #000; }

/* ── 3. Accessibility ────────────────────────────────────────── */
.finboard .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;
}
.finboard :focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}

/* ── 4. Main Layout — Feed + Sidebar Grid ────────────────────── */
.finboard-wrap {
    max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px);
    margin: 0 auto;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr var(--fb-sidebar-w);
    gap: 20px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.finboard-feed { min-width: 0; }
/* Sidebar sticks below the community bar (bar height ~52px + small gap) */
.finboard-sidebar {
    position: sticky;
    top: 60px;
}
.admin-bar .finboard-sidebar {
    top: 92px; /* 32px admin bar + 60px community bar */
}

/* ── 4b. Card — base neumorphic container used across all community pages ── */
.finboard-card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--fb-neu-out-sm);
    transition: box-shadow var(--fb-transition), border-color var(--fb-transition);
}
.finboard-card:hover {
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
    border-color: var(--fb-border-gold);
}
/* Light mode card accent */
[data-finboard-theme="light"] .finboard-card {
    border-top: 2px solid var(--fb-gold-dim);
    box-shadow: var(--fb-neu-out-sm);
}
[data-finboard-theme="light"] .finboard-card:hover {
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
}

/* ── 4c. Layout — main + sidebar grid for non-feed pages ── */
.finboard-layout {
    max-width: calc(var(--fb-max-width, 740px) + var(--fb-sidebar-w, 300px) + 24px);
    margin: 0 auto;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr var(--fb-sidebar-w, 300px);
    gap: 20px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.finboard-main { min-width: 0; }

/* ── 4d. Sidebar Profile Card ── */
.finboard-sidebar-profile { padding: 16px; }
.finboard-sidebar-profile__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.finboard-sidebar-profile__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fb-text);
    line-height: 1.3;
    font-family: var(--fb-font-display);
}
.finboard-sidebar-profile__equity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fb-text-muted);
}
.finboard-equity-icon { color: var(--fb-gold); }
.finboard-sidebar-heading {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fb-text);
    font-family: var(--fb-font-display);
}
.finboard-sidebar-links li { margin-bottom: 8px; }
.finboard-sidebar-links li:last-child { margin-bottom: 0; }
.finboard-sidebar-links a {
    color: var(--fb-text-muted);
    font-size: 13px;
    transition: color var(--fb-transition);
}
.finboard-sidebar-links a:hover { color: var(--fb-gold); }

/* ── 5. Community Navigation Bar ─────────────────────────────── */
.finboard-community__h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── 5. Community Navigation — Pill / Segment Control ─────── */
/* Community bar sticky positioning:
   The site header (Elementor) is position:static — it scrolls off screen.
   So the community bar sticks to top:0 (or top:32px when WP admin bar is present).
   --fb-header-h is kept for backwards compat but overridden here. */
/* ── Header Utility Bar (burger, bell, theme, avatar) ── */
.finboard-header-bar {
    background: var(--fb-bg);
    border-bottom: 1px solid var(--fb-border);
    padding: 6px 16px;
    position: sticky;
    top: 0;
    z-index: 91;
    width: 100%;
    box-sizing: border-box;
}
.admin-bar .finboard-header-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .finboard-header-bar { top: 46px; } }
.finboard-header-bar__inner {
    max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Allow flex children to shrink below content size */
}
.finboard-header-bar__spacer { flex: 1; }

/* Adjust community bar sticky to sit below header bar */
.finboard-header-bar + .finboard-community-bar {
    top: 44px; /* header bar height ~44px */
}
.admin-bar .finboard-header-bar + .finboard-community-bar {
    top: 76px; /* 44px bar + 32px admin bar */
}
@media (max-width: 782px) {
    .admin-bar .finboard-header-bar + .finboard-community-bar { top: 90px; }
}

/* ── Mobile site-nav toggle (burger menu) ── */
.finboard-site-menu-toggle {
    display: none; /* Hidden on desktop */
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--fb-bg-raised);
    border: 1px solid var(--fb-border);
    align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    color: var(--fb-text-muted);
    transition: all .15s ease;
}
.finboard-site-menu-toggle:hover { color: var(--fb-gold); border-color: var(--fb-border-gold); }
.finboard-site-menu-toggle[aria-expanded="true"] { background: var(--fb-bg-hover); color: var(--fb-gold); }

.finboard-site-menu-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: var(--fb-bg-card); border: 1px solid var(--fb-border-strong);
    border-top: none; border-radius: 0 0 var(--fb-radius) var(--fb-radius);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    padding: 8px 0; max-height: 70vh; overflow-y: auto;
}
/* Anchor dropdown to header bar */
.finboard-header-bar { position: -webkit-sticky; position: sticky; }
.finboard-site-menu-list { list-style: none; margin: 0; padding: 0; }
.finboard-site-menu-list li { margin: 0; }
.finboard-site-menu-list li a {
    display: block; padding: 10px 20px; font-size: 14px; font-weight: 500;
    color: var(--fb-text); text-decoration: none;
    transition: background .15s, color .15s;
}
.finboard-site-menu-list li a:hover { background: var(--fb-bg-hover); color: var(--fb-gold); }
.finboard-site-menu-list .sub-menu { padding-left: 16px; }
.finboard-site-menu-list .sub-menu li a { font-size: 13px; color: var(--fb-text-muted); padding: 8px 20px; }
.finboard-site-menu-list .sub-menu li a:hover { color: var(--fb-gold); }

[data-finboard-theme="light"] .finboard-site-menu-dropdown {
    background: #fff; border-color: rgba(0,0,0,.1);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
}
[data-finboard-theme="light"] .finboard-site-menu-list li a { color: #1a1d25; }
[data-finboard-theme="light"] .finboard-site-menu-list li a:hover { background: #f3f4f6; color: #c4920a; }
[data-finboard-theme="light"] .finboard-site-menu-list .sub-menu li a { color: #4a5068; }

/* Community bar user avatar */
.finboard-bar-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--fb-border); flex-shrink: 0;
    transition: border-color .15s ease; text-decoration: none;
}
.finboard-bar-avatar:hover { border-color: var(--fb-gold); }
.finboard-bar-avatar__img {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.finboard-bar-avatar__initials {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--fb-bg-raised); color: var(--fb-gold);
    font-weight: 700; font-size: 12px;
}

@media (max-width: 900px) {
    .finboard-site-menu-toggle { display: flex; }
}

.finboard-community-bar {
    background: var(--fb-bg);
    border-bottom: 1px solid var(--fb-border);
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 90;
    /* Needed for the mobile site-nav dropdown to anchor here. */
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    box-sizing: border-box;
}
/* When WP admin bar is present (logged-in admins), offset by admin bar height */
.admin-bar .finboard-community-bar {
    top: 32px;
}
@media (max-width: 782px) {
    /* WP admin bar is 46px on mobile */
    .admin-bar .finboard-community-bar {
        top: 46px;
    }
}
.finboard-community-bar__inner {
    max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 4px;
    background: var(--fb-bg-raised);
    border-radius: var(--fb-radius);
    border: 1px solid var(--fb-border);
}
.finboard-community-bar__inner::-webkit-scrollbar { display: none; }

.finboard-community-tab {
    position: relative;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-text-muted);
    white-space: nowrap;
    transition: color var(--fb-transition), background var(--fb-transition), box-shadow var(--fb-transition), opacity var(--fb-transition);
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: var(--fb-radius-sm);
    font-family: var(--fb-font);
    scroll-snap-align: start;
    min-height: 44px;
    text-decoration: none;
}
.finboard-community-tab:hover {
    color: var(--fb-text);
    background: var(--fb-bg-hover);
}
.finboard-community-tab.active,
.finboard-community-tab--active {
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
    box-shadow: 0 0 12px var(--fb-gold-glow), inset 0 0 0 1px rgba(232,169,16,.15);
}
.finboard-community-tab svg {
    width: 16px; height: 16px;
    opacity: .45;
    transition: opacity var(--fb-transition);
}
.finboard-community-tab:hover svg { opacity: .7; }
.finboard-community-tab.active svg,
.finboard-community-tab--active svg { opacity: 1; color: var(--fb-gold); }

/* Focus-visible for keyboard navigation */
.finboard-community-tab:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
    border-radius: var(--fb-radius-pill);
}

/* Disabled tab (e.g., Ask when Discourse is down) */
.finboard-community-tab--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto; /* allow native title tooltip */
    filter: grayscale(0.5);
}
.finboard-community-tab--disabled:hover { color: inherit !important; }
.finboard-community-tab--disabled svg { opacity: .3; }

/* Notification badge dot on tabs */
.finboard-community-tab__badge {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--fb-red);
    border-radius: 50%;
    border: 2px solid var(--fb-bg-raised);
    animation: finboard-pulse 2s ease-in-out infinite;
}
.finboard-community-tab__badge--count {
    width: auto;
    height: auto;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    border-radius: 8px;
    top: 2px;
    right: 2px;
}

/* Dark mode community bar — uses global html dark vars (no longer needs hardcoding). */
[data-finboard-theme="dark"] .finboard-community-bar {
    background: var(--fb-bg);
    border-bottom-color: var(--fb-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-finboard-theme="dark"] .finboard-community-bar__inner {
    background: rgba(21,24,34,.7);
    border-color: rgba(255,255,255,.04);
}
[data-finboard-theme="dark"] .finboard-community-tab {
    color: var(--fb-text-muted);
}
[data-finboard-theme="dark"] .finboard-community-tab:hover {
    color: var(--fb-text);
    background: var(--fb-bg-hover);
}
[data-finboard-theme="dark"] .finboard-community-tab.active,
[data-finboard-theme="dark"] .finboard-community-tab--active {
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
    box-shadow: 0 0 16px var(--fb-gold-glow), inset 0 0 0 1px rgba(232,169,16,.12);
}
[data-finboard-theme="dark"] .finboard-community-tab svg {
    opacity: .5;
}
[data-finboard-theme="dark"] .finboard-community-tab.active svg,
[data-finboard-theme="dark"] .finboard-community-tab--active svg {
    opacity: 1;
}

/* Light mode community bar — solid white for clean scroll */
[data-finboard-theme="light"] .finboard-community-bar {
    background: #fff;
    border-bottom-color: rgba(0,0,0,.08);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-finboard-theme="light"] .finboard-community-bar__inner {
    background: #f1f3f7;
    border-color: rgba(0,0,0,.06);
}
[data-finboard-theme="light"] .finboard-community-tab.active {
    background: rgba(196,146,10,.08);
    box-shadow: 0 0 12px rgba(196,146,10,.06), inset 0 0 0 1px rgba(196,146,10,.1);
}

/* Mobile: larger touch targets */
@media (max-width: 768px) {
    .finboard-community-bar { padding: 6px 10px; }
    .finboard-community-tab { padding: 8px 12px; min-height: 44px; font-size: 12px; }
    .finboard-community-tab span { display: none; }
    .finboard-community-tab svg { width: 20px; height: 20px; }
    .finboard-community-tab.active span { display: inline; }
}

/* Theme toggle button (inside community bar) */
.finboard-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--fb-radius-sm);
    background: transparent;
    border: none;
    color: var(--fb-text-muted);
    cursor: pointer;
    transition: all var(--fb-transition);
    margin-left: auto;
    flex-shrink: 0;
}
.finboard-theme-toggle:hover {
    background: var(--fb-bg-hover);
    color: var(--fb-gold);
}
.finboard-theme-toggle svg {
    width: 16px;
    height: 16px;
}

/* ── 6. Feed Controls — Sort Tabs, Post New, Topic Pills ─────── */
.finboard-feed-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-sort-tabs { display: flex; gap: 6px; }
.finboard-sort-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--fb-radius-pill);
    color: var(--fb-text-secondary, var(--fb-text));
    transition: all var(--fb-transition);
    cursor: pointer;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border-strong);
    box-shadow: var(--fb-neu-out-sm);
    font-family: var(--fb-font);
    letter-spacing: 0.2px;
}
.finboard-sort-btn:hover {
    color: var(--fb-text);
    background: var(--fb-bg-hover);
    border-color: var(--fb-border-gold);
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
    transform: translateY(-1px);
}
.finboard-sort-btn:active {
    box-shadow: var(--fb-neu-in-sm);
    transform: translateY(0);
}
.finboard-sort-btn--active,
.finboard-sort-btn.active {
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
    border-color: var(--fb-border-gold);
    font-weight: 700;
    box-shadow: var(--fb-neu-in-sm);
}

/* Light mode sort buttons — more defined borders */
[data-finboard-theme="light"] .finboard-sort-btn {
    border-color: rgba(0,0,0,.12);
}
[data-finboard-theme="light"] .finboard-sort-btn:hover {
    border-color: rgba(0,0,0,.2);
}
[data-finboard-theme="light"] .finboard-sort-btn--active,
[data-finboard-theme="light"] .finboard-sort-btn.active {
    border-color: var(--fb-border-gold);
}

.finboard-post-new-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--fb-radius-pill);
    background: var(--fb-gold);
    color: #0f0f17;
    transition: all var(--fb-transition);
    cursor: pointer;
    border: 2px solid transparent;
    font-family: var(--fb-font);
    -webkit-text-fill-color: #0f0f17;
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-post-new-btn:hover {
    background: var(--fb-gold-hover);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
    border-color: var(--fb-border-gold);
    transform: translateY(-1px);
    box-shadow: var(--fb-neu-out-sm), 0 4px 12px rgba(232,169,16,.25);
}
.finboard-post-new-btn svg { width: 14px; height: 14px; }

/* Topic filter pills */
.finboard-topic-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.finboard-topic-filters::-webkit-scrollbar { display: none; }
.finboard-topic-pill {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--fb-radius-pill);
    color: var(--fb-text);
    border: 1px solid var(--fb-border-strong);
    white-space: nowrap;
    transition: all var(--fb-transition);
    cursor: pointer;
    background: var(--fb-bg-card);
    font-family: var(--fb-font);
}
.finboard-topic-pill:hover {
    border-color: var(--fb-border-strong);
    color: var(--fb-text);
    background: var(--fb-bg-raised);
}
.finboard-topic-pill.active,
.finboard-topic-pill--active {
    background: var(--fb-gold);
    color: #0f0f17;
    border-color: var(--fb-gold);
    font-weight: 600;
    -webkit-text-fill-color: #0f0f17;
}

/* Topic-colored active pills — override generic gold when a topic is selected */
.finboard-topic-pill[href*="/topic/trading/"].active    { background: #15803d; border-color: #15803d; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/investing/"].active   { background: #2563eb; border-color: #2563eb; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/isas/"].active        { background: #7e22ce; border-color: #7e22ce; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/crypto/"].active      { background: #c2410c; border-color: #c2410c; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/pensions/"].active    { background: #4338ca; border-color: #4338ca; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/tax/"].active         { background: #dc2626; border-color: #dc2626; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/news/"].active        { background: #0e7490; border-color: #0e7490; color: #fff; -webkit-text-fill-color: #fff; }
.finboard-topic-pill[href*="/topic/general/"].active     { background: #4b5563; border-color: #4b5563; color: #fff; -webkit-text-fill-color: #fff; }

/* Light mode topic pills */
[data-finboard-theme="light"] .finboard-topic-pill:hover {
    border-color: rgba(0,0,0,.2);
    color: var(--fb-text);
    background: var(--fb-bg-raised);
}

/* ── 7. Post Card — Reddit-Style with Left Vote Column ───────── */
.finboard-post-card {
    display: flex;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    margin-bottom: 12px;
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition), transform var(--fb-transition);
    overflow: hidden;
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-post-card:hover {
    border-color: rgba(232,169,16,0.4);
    box-shadow: var(--fb-neu-out-sm), 0 0 20px rgba(232,169,16,.12), 0 0 6px rgba(232,169,16,.08);
    transform: translateY(-2px);
    cursor: pointer;
}

/* Left accent border by topic color */
.finboard-post-card[data-topic="trading"]    { border-left: 3px solid #15803d; }
.finboard-post-card[data-topic="investing"]  { border-left: 3px solid #2563eb; }
.finboard-post-card[data-topic="isas"]       { border-left: 3px solid #7e22ce; }
.finboard-post-card[data-topic="crypto"]     { border-left: 3px solid #c2410c; }
.finboard-post-card[data-topic="pensions"]   { border-left: 3px solid #4338ca; }
.finboard-post-card[data-topic="tax"]        { border-left: 3px solid #dc2626; }
.finboard-post-card[data-topic="news"]       { border-left: 3px solid #0e7490; }
.finboard-post-card[data-topic="general"]    { border-left: 3px solid #4b5563; }

/* Light mode post cards */
[data-finboard-theme="light"] .finboard-post-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);
    position: relative;
}
[data-finboard-theme="light"] .finboard-post-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06), var(--fb-neu-gold);
    border-color: rgba(196,146,10,.15);
}
/* Light mode: gold top accent line on hover */
[data-finboard-theme="light"] .finboard-post-card::after {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(196,146,10,.3), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fb-transition);
    border-radius: 1px;
}
[data-finboard-theme="light"] .finboard-post-card:hover::after {
    opacity: 1;
}

/* Vote column — interactive like + answer count */
.finboard-post-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    min-width: 52px;
    gap: 2px;
    background: var(--fb-bg-inset, var(--fb-glass));
    box-shadow: var(--fb-neu-in);
}

/* Hot/popular posts get gold left accent */
.finboard-post-card:has(.finboard-status--hot),
.finboard-post-card:has(.finboard-status--best) {
    border-left: 3px solid var(--fb-gold);
}

/* Upvote/like button in feed vote column */
.finboard-post-like-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    color: var(--fb-text-muted);
    opacity: .45;
    transition: all var(--fb-transition);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.finboard-post-like-btn:hover {
    opacity: 1;
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
    transform: translateY(-1px);
}
.finboard-post-like-btn:active {
    transform: translateY(0);
}
.finboard-post-like-btn.finboard-like-btn--active {
    color: var(--fb-gold);
    opacity: 1;
    animation: finboard-vote-pop 0.25s ease;
}
.finboard-post-like-btn.finboard-like-btn--static {
    cursor: default;
    opacity: .45;
    pointer-events: none;
}
.finboard-post-like-btn svg { width: 18px; height: 18px; }

/* Improved vote column touch targets */
.finboard-post-votes button {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Comment vote buttons (question detail page) */
.finboard-post-votes .finboard-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    color: var(--fb-text-muted);
    opacity: .5;
    transition: all var(--fb-transition);
    border-radius: 4px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.finboard-post-votes .finboard-vote-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,.05);
}
.finboard-post-votes .finboard-vote-btn--active.finboard-vote-btn--up,
.finboard-post-votes .finboard-vote-btn.upvoted {
    color: var(--fb-green);
    opacity: 1;
    animation: finboard-vote-pop 0.25s ease;
}
/* downvoted state removed — downvote UI no longer exists site-wide */
.finboard-post-votes .finboard-vote-btn svg { width: 16px; height: 16px; }

/* Like/vote count */
.finboard-post-votes .finboard-vote-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--fb-text);
    padding: 0;
    line-height: 1.2;
}
.finboard-post-like-btn.finboard-like-btn--active + .finboard-vote-count {
    color: var(--fb-gold);
}

/* Answer count indicator below the like */
.finboard-post-votes__answers {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--fb-text-muted);
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--fb-border);
    font-weight: 500;
    opacity: .7;
}
.finboard-post-votes__answers svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Type label below icon (Topic / Reply) */
.finboard-post-votes__label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fb-text-muted);
    margin-top: 4px;
    font-weight: 600;
    opacity: .7;
}

/* Static like icon (Discourse feed — no interactive button) */
.finboard-post-votes__like-icon {
    width: 18px;
    height: 18px;
    color: var(--fb-text-muted);
    opacity: .4;
}

/* Light mode vote column */
[data-finboard-theme="light"] .finboard-post-votes {
    background: rgba(0,0,0,.02);
}
[data-finboard-theme="light"] .finboard-post-like-btn:hover {
    background: rgba(196,146,10,.06);
}
[data-finboard-theme="light"] .finboard-post-votes .finboard-vote-btn:hover {
    background: rgba(0,0,0,.05);
}

/* Post body */
.finboard-post-body {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
}
.finboard-post-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--fb-text-muted);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

/* Topic tags */
.finboard-post-topic {
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}
.finboard-topic--trading { background: rgba(34,197,94,.1); color: #4ade80; }
.finboard-topic--investing { background: rgba(59,130,246,.1); color: #60a5fa; }
.finboard-topic--isas { background: rgba(168,85,247,.1); color: #c084fc; }
.finboard-topic--crypto { background: rgba(251,146,60,.1); color: #fb923c; }
.finboard-topic--pensions { background: rgba(129,140,248,.1); color: #818cf8; }
.finboard-topic--tax { background: rgba(239,68,68,.1); color: #fca5a5; }
.finboard-topic--news { background: rgba(34,211,238,.1); color: #22d3ee; }
.finboard-topic--general { background: rgba(156,163,175,.1); color: #9ca3af; }

.finboard-post-author {
    font-weight: 600;
    color: var(--fb-text);
    text-decoration: none;
    transition: color var(--fb-transition);
}
a.finboard-post-author:hover {
    color: var(--fb-gold);
}

/* News comment author link */
.finboard-news-comment__author {
    font-weight: 600;
    color: var(--fb-text);
    text-decoration: none;
    transition: color var(--fb-transition);
}
.finboard-news-comment__author:hover {
    color: var(--fb-gold);
}

/* Post title & preview */
.finboard-post-title {
    font-family: var(--fb-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--fb-text);
    margin-bottom: 4px;
    line-height: 1.35;
    cursor: pointer;
    letter-spacing: -0.01em;
}
.finboard-post-title:hover { color: var(--fb-gold); }
.finboard-post-title a { color: inherit; }
.finboard-post-title a:hover { color: var(--fb-gold); }
.finboard-post-preview {
    font-size: 12px;
    color: var(--fb-text-muted);
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post footer actions.
   Canonical action-row styling — kept in lockstep with .finboard-action-btn
   (thread/comment row) so Save / Share / Report / kebab look identical on
   every surface. Anchor-link aesthetic: muted at rest, GOLD on hover /
   active (matching the site's <a> behaviour). Equal height across every
   item — line-height:1 + explicit height keeps Save / Share / Report /
   kebab visually level even when their inner structure differs (icon +
   label vs icon-only vs count spans).
   Mobile rule further down tightens this to 10px / 32px tappable. */
.finboard-post-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 6px;
}
.finboard-post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;              /* explicit — so Save w/ text and Save w/o text are equal */
    padding: 0 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--fb-text-muted);
    border-radius: var(--fb-radius-sm);
    transition: color var(--fb-transition), background var(--fb-transition);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--fb-font);
    text-decoration: none;
    vertical-align: middle;
}
.finboard-post-action:hover,
.finboard-post-action:focus-visible {
    color: var(--fb-gold);
    background: var(--fb-gold-dim, rgba(232,169,16,0.08));
}
.finboard-post-action.is-active,
.finboard-post-action[aria-pressed="true"],
.finboard-post-action.finboard-action-btn--active {
    color: var(--fb-gold);
}
.finboard-post-action svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;   /* vertical centre — inline SVGs pick up text baseline */
}

/* Upvote button in actions row — hidden on desktop (vote column visible), shown on mobile */
.finboard-post-action--upvote { display: none; }
.finboard-post-action--upvote svg { width: 16px; height: 16px; }
.finboard-post-action--upvote .finboard-vote-count { font-size: 12px; font-weight: 600; }
.finboard-post-action--upvote.finboard-like-btn--active {
    color: var(--fb-gold);
}
.finboard-post-action--upvote.finboard-like-btn--active svg {
    fill: var(--fb-gold);
    stroke: var(--fb-gold);
}

/* ── Share Popover ── */
.finboard-share-popover {
    position: fixed;
    transform: translate(-50%, -100%);
    z-index: 10000;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow-lg);
    padding: 10px;
    min-width: 180px;
    animation: finboard-scaleIn 0.15s ease-out;
}
.finboard-share-popover__arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--fb-bg-card);
    border-right: 1px solid var(--fb-border-strong);
    border-bottom: 1px solid var(--fb-border-strong);
}
.finboard-share-popover__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fb-text-muted);
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--fb-border);
    margin-bottom: 6px;
}
.finboard-share-popover__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.finboard-share-popover__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--fb-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--fb-text);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--fb-font);
    transition: background var(--fb-transition), color var(--fb-transition);
    white-space: nowrap;
    width: 100%;
    text-align: left;
}
.finboard-share-popover__option:hover {
    background: var(--fb-gold-dim);
    color: var(--fb-gold);
}
.finboard-share-popover__option svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.finboard-share-popover__option:hover svg {
    opacity: 1;
}
[data-finboard-theme="light"] .finboard-share-popover {
    background: #fff;
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
[data-finboard-theme="light"] .finboard-share-popover__arrow {
    background: #fff;
    border-color: rgba(0,0,0,.12);
}

/* Post status badges */
.finboard-post-status {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.finboard-status--official {
    background: var(--fb-gold);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
}
.finboard-status--best { background: var(--fb-green-dim); color: #4ade80; }
.finboard-status--unanswered { background: rgba(251,191,36,.1); color: #fbbf24; }
.finboard-status--hot { background: var(--fb-red-dim); color: #fca5a5; }
.finboard-status--pinned { background: rgba(59,130,246,.12); color: #60a5fa; }
.finboard-status--locked {
    background: rgba(148,163,184,.12);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.finboard-status--locked svg { flex-shrink: 0; }
[data-finboard-theme="light"] .finboard-status--locked {
    background: rgba(100,116,139,.10);
    color: #475569;
}

/* ── 8. Badges ───────────────────────────────────────────────── */
.finboard-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: inline-block;
}
.finboard-badge--expert { background: rgba(168,85,247,.15); color: #c084fc; }
.finboard-badge--contributor { background: rgba(59,130,246,.12); color: #60a5fa; }
.finboard-badge--trusted { background: rgba(251,191,36,.12); color: #fbbf24; }
.finboard-badge--tic {
    background: var(--fb-gold);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
}
.finboard-badge--moderator { background: rgba(239,68,68,.12); color: #fca5a5; }
.finboard-badge--newcomer { background: rgba(189,189,189,.08); color: #aaa; }
.finboard-badge--seedling { background: rgba(34,197,94,.1); color: #4ade80; }
.finboard-badge--analyst {
    background: linear-gradient(135deg,rgba(232,169,16,.15),rgba(232,169,16,.1));
    color: var(--fb-gold);
}

/* Light mode badge color overrides — WCAG AA contrast on white */
[data-finboard-theme="light"] .finboard-badge--seedling { background: rgba(22,163,74,.10); color: #15803d; }
[data-finboard-theme="light"] .finboard-badge--trusted { background: rgba(180,130,10,.10); color: #92400e; }
[data-finboard-theme="light"] .finboard-badge--expert { background: rgba(126,58,194,.10); color: #7e22ce; }
[data-finboard-theme="light"] .finboard-badge--contributor { background: rgba(37,99,235,.08); color: #2563eb; }
[data-finboard-theme="light"] .finboard-badge--moderator { background: rgba(220,38,38,.08); color: #dc2626; }
[data-finboard-theme="light"] .finboard-badge--newcomer { background: rgba(107,114,128,.10); color: #4b5563; }
[data-finboard-theme="light"] .finboard-badge--analyst { background: rgba(196,146,10,.10); color: #92400e; }

/* Light mode status pill overrides */
[data-finboard-theme="light"] .finboard-status--best { background: rgba(22,163,74,.08); color: #15803d; }
[data-finboard-theme="light"] .finboard-status--unanswered { background: rgba(180,130,10,.08); color: #92400e; }
[data-finboard-theme="light"] .finboard-status--hot { background: rgba(220,38,38,.06); color: #dc2626; }

/* Light mode topic tag overrides */
[data-finboard-theme="light"] .finboard-topic--trading { color: #15803d; }
[data-finboard-theme="light"] .finboard-topic--investing { color: #2563eb; }
[data-finboard-theme="light"] .finboard-topic--isas { color: #7e22ce; }
[data-finboard-theme="light"] .finboard-topic--crypto { color: #c2410c; }
[data-finboard-theme="light"] .finboard-topic--pensions { color: #4338ca; }
[data-finboard-theme="light"] .finboard-topic--tax { color: #dc2626; }
[data-finboard-theme="light"] .finboard-topic--news { color: #0e7490; }
[data-finboard-theme="light"] .finboard-topic--general { color: #4b5563; }

/* ── 9. Sidebar ──────────────────────────────────────────────── */
.finboard-sidebar-card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--fb-neu-out-sm);
    transition: box-shadow var(--fb-transition), border-color var(--fb-transition);
}
.finboard-sidebar-card:hover {
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
    border-color: var(--fb-border-gold);
}
/* Light mode sidebar cards */
[data-finboard-theme="light"] .finboard-sidebar-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);
}
[data-finboard-theme="light"] .finboard-sidebar-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06), var(--fb-neu-gold);
    border-color: rgba(196,146,10,.15);
}

.finboard-sidebar-card h3 {
    font-family: var(--fb-font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--fb-text-muted);
    margin-bottom: 10px;
}
.finboard-sidebar-card h2 {
    font-family: var(--fb-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--fb-text);
    margin-bottom: 10px;
}

/* Profile card in sidebar */
.finboard-profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.finboard-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.finboard-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.finboard-profile-info { flex: 1; min-width: 0; }
.finboard-profile-name {
    font-family: var(--fb-font-display);
    font-weight: 600;
    font-size: 14px;
}

.finboard-profile-equity {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--fb-border);
    margin-top: 8px;
}
.finboard-equity-num {
    font-family: var(--fb-font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--fb-gold);
}
.finboard-equity-label {
    font-size: 11px;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Quick actions in sidebar */
.finboard-sidebar-actions { display: flex; flex-direction: column; gap: 6px; }
.finboard-sidebar-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--fb-radius-sm);
    transition: all var(--fb-transition);
    width: 100%;
    cursor: pointer;
    border: none;
    font-family: var(--fb-font);
    text-decoration: none;
}
.finboard-sidebar-action svg { width: 16px; height: 16px; flex-shrink: 0; }
.finboard-sidebar-action--primary {
    background: var(--fb-gold);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
}
.finboard-sidebar-action--primary:hover {
    background: var(--fb-gold-hover);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
}
.finboard-sidebar-action--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto; /* allow native title tooltip */
    filter: grayscale(0.5);
}
.finboard-sidebar-action--disabled:hover {
    background: inherit !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}
.finboard-sidebar-action--ghost {
    background: transparent;
    color: var(--fb-text-muted);
    border: 1px solid var(--fb-border);
}
.finboard-sidebar-action--ghost:hover {
    border-color: var(--fb-border-strong);
    color: var(--fb-text);
}
/* Quiz CTA — more eye-catching than default ghost */
.finboard-sidebar-action--ghost[href*="quiz"] {
    background: var(--fb-gold-dim);
    border-color: var(--fb-border-gold);
    color: var(--fb-gold);
}
.finboard-sidebar-action--ghost[href*="quiz"]:hover {
    background: rgba(232,169,16,.12);
    border-color: var(--fb-gold);
    color: var(--fb-gold);
}

/* Sidebar toggle (mobile/tablet) */
.finboard-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 50;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1e2230;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}
.finboard-sidebar-toggle:hover {
    background: #252b3a;
    border-color: rgba(232,169,16,.3);
    box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 12px rgba(232,169,16,.1);
    transform: scale(1.05);
}
.finboard-sidebar-toggle:active { transform: scale(0.95); }
.finboard-sidebar-toggle svg { width: 20px; height: 20px; color: #9ca3b4; }
.finboard-sidebar-toggle:hover svg { color: var(--fb-gold); }
[data-finboard-theme="light"] .finboard-sidebar-toggle {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
}
[data-finboard-theme="light"] .finboard-sidebar-toggle:hover {
    background: #f8f9fb;
    border-color: rgba(196,146,10,.25);
    box-shadow: 0 4px 20px rgba(0,0,0,.15), 0 0 8px rgba(196,146,10,.08);
}
[data-finboard-theme="light"] .finboard-sidebar-toggle svg { color: #4a5068; }
[data-finboard-theme="light"] .finboard-sidebar-toggle:hover svg { color: #c4920a; }
.finboard-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 149;
}
.finboard-sidebar-overlay.open { display: block; }

/* Contributors */
.finboard-contrib-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
}
.finboard-contrib-rank {
    font-family: var(--fb-font-display);
    font-weight: 700;
    color: var(--fb-gold);
    min-width: 18px;
}
.finboard-contrib-name { font-weight: 600; flex: 1; }
.finboard-contrib-count { color: var(--fb-text-muted); font-size: 11px; }

/* Equity table */
.finboard-equity-table { width: 100%; border-collapse: collapse; }
.finboard-equity-table tr td {
    padding: 6px 0;
    font-size: 12px;
    color: var(--fb-text-muted);
    border-bottom: 1px solid var(--fb-border);
    border-left: none;
    border-right: none;
    border-top: none;
}
/* Remove any theme table borders */
.finboard-equity-table,
.finboard-equity-table tr,
.finboard-equity-table td {
    border-collapse: collapse;
    border-color: var(--fb-border) !important;
    background: transparent !important;
}
.finboard-equity-table tr td:first-child { padding-right: 12px; }
.finboard-equity-table tr td:last-child { text-align: right; font-weight: 600; color: var(--fb-text); }
.finboard-equity-table tr:last-child td { border-bottom: none; }
.finboard-equity-table tr:hover td {
    color: var(--fb-gold) !important;
    transition: color var(--fb-transition);
}
/* Current user equity rank highlight */
.finboard-equity-table tr.finboard-equity-current td {
    color: var(--fb-gold) !important;
    font-weight: 700;
}
.finboard-equity-table tr.finboard-equity-current {
    background: var(--fb-gold-dim) !important;
    border-radius: 4px;
}

/* Trending */
.finboard-trending-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
}
.finboard-trending-num {
    font-family: var(--fb-font-display);
    color: var(--fb-gold);
    font-weight: 700;
    min-width: 16px;
}
.finboard-trending-title {
    flex: 1;
    color: var(--fb-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finboard-trending-title:hover { color: var(--fb-gold); cursor: pointer; }
.finboard-trending-count { color: var(--fb-text-muted); font-size: 10px; white-space: nowrap; }

/* ── 10. Join Banner (Guest CTA) ─────────────────────────────── */
.finboard-join-banner {
    background: linear-gradient(135deg, rgba(232,169,16,.08), rgba(232,169,16,.03));
    border: 1px solid rgba(232,169,16,.2);
    border-radius: var(--fb-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
}
.finboard-join-banner__text { flex: 1; }
.finboard-join-banner__text h2 {
    font-family: var(--fb-font-display) !important;
    font-size: 18px !important;
    font-weight: 700;
    margin-bottom: 4px;
}
.finboard-join-banner__text p {
    font-size: 13px;
    color: var(--fb-text-secondary, var(--fb-text-muted));
    margin: 0;
    line-height: 1.5;
}
.finboard-join-banner__btn {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--fb-radius-pill);
    background: var(--fb-gold);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
    transition: all var(--fb-transition);
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    font-family: var(--fb-font);
    display: inline-block;
    text-align: center;
}
.finboard-join-banner__btn:hover {
    background: var(--fb-gold-hover);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
}

/* Dark mode: join banner — elevated with gold warmth */
[data-finboard-theme="dark"] .finboard-join-banner {
    background: linear-gradient(135deg, #1e2230, #232838);
    border-color: rgba(232,169,16,.25);
}

/* Guest sidebar CTA */
.finboard-guest-cta {
    background: linear-gradient(135deg, rgba(232,169,16,.06), rgba(232,169,16,.02));
    border-color: rgba(232,169,16,.15);
}
.finboard-guest-cta h3 { color: var(--fb-gold) !important; }
.finboard-guest-cta p {
    font-size: 12px;
    color: var(--fb-text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Dark mode: guest CTA keeps dark gradient */
[data-finboard-theme="dark"] .finboard-guest-cta {
    background: linear-gradient(135deg, #12151c, #1a1e28);
}


/* ── 11. Buttons ─────────────────────────────────────────────── */
.finboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--fb-radius-sm);
    cursor: pointer;
    transition: all var(--fb-transition);
    font-family: var(--fb-font);
    border: 1px solid transparent;
    line-height: 1.4;
    letter-spacing: -0.01em;
    position: relative;
}

/* Primary gold button with shine */
.finboard-btn--primary,
a.finboard-btn--primary,
.finboard a.finboard-btn--primary {
    background: var(--fb-gold) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border-color: var(--fb-gold) !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(232,169,16,.15);
}
.finboard-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.15) 50%, transparent 75%);
    animation: finboard-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
.finboard-btn--primary:hover,
a.finboard-btn--primary:hover,
.finboard a.finboard-btn--primary:hover {
    background: var(--fb-gold-hover) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border-color: var(--fb-gold-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232,169,16,.25);
}
.finboard-btn--secondary {
    background: transparent;
    color: var(--fb-text);
    -webkit-text-fill-color: var(--fb-text);
    border: 1px solid var(--fb-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.finboard-btn--secondary:hover {
    border-color: var(--fb-border-strong);
    color: var(--fb-text);
    -webkit-text-fill-color: var(--fb-text);
    background: rgba(255,255,255,.03);
    transform: translateY(-1px);
}
.finboard-btn--ghost {
    background: transparent;
    color: var(--fb-text-muted);
    border: none;
    padding: 8px 14px;
}
.finboard-btn--ghost:hover {
    color: var(--fb-text);
    background: var(--fb-bg-raised);
}
.finboard-btn--danger {
    background: var(--fb-red-dim);
    color: var(--fb-red);
    border: 1px solid rgba(255,71,87,.15);
}
.finboard-btn--danger:hover {
    background: rgba(255,71,87,.15);
    box-shadow: 0 0 12px rgba(255,71,87,.1);
}
.finboard-btn--sm { padding: 6px 14px; font-size: 12px; }
.finboard-btn--pill { border-radius: var(--fb-radius-pill); }
.finboard-btn__icon { margin-right: 4px; vertical-align: middle; flex-shrink: 0; }
.finboard-btn:disabled,
.finboard-btn[disabled],
.finboard-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto; /* allow tooltip hover */
    filter: grayscale(0.6);
}
.finboard-btn--disabled:hover,
.finboard-btn:disabled:hover,
.finboard-btn[disabled]:hover {
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Hero CTA (broker page) */
.finboard-btn--hero,
a.finboard-btn--hero,
.finboard a.finboard-btn--hero {
    background: var(--fb-gold) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--fb-radius-pill);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(232,169,16,.25);
    letter-spacing: -0.01em;
}
.finboard-btn--hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.2) 50%, transparent 75%);
    animation: finboard-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}
.finboard-btn--hero:hover,
a.finboard-btn--hero:hover {
    background: var(--fb-gold-hover) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(232,169,16,.35);
}

/* Catch-all: gold-background = black text */
.finboard [style*="background"][style*="gold"],
.finboard-btn[class*="--primary"],
.finboard a[class*="--primary"],
.finboard button[class*="--primary"] { color: #000 !important; -webkit-text-fill-color: #000 !important; }


/* ── 12. Avatars ─────────────────────────────────────────────── */
.finboard-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    transition: box-shadow var(--fb-transition), transform var(--fb-transition);
    box-shadow: 0 0 0 2px rgba(0,0,0,.5);
}
.finboard-avatar:hover {
    box-shadow: 0 0 0 2px var(--fb-bg-card), 0 0 0 4px rgba(232,169,16,.25);
    transform: scale(1.05);
}
.finboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.finboard-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.finboard-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.finboard-avatar--xl { width: 72px; height: 72px; font-size: 28px; }


/* ── 13. Question / Post Detail Page ─────────────────────────── */
.finboard-question {
    max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px);
    margin: 0 auto;
    padding: 28px 16px;
    position: relative;
    z-index: 1;
}
/* Question content — centered narrower column within the full-width wrapper */
.finboard-question > *:not(.finboard-community-bar):not(.finboard-breadcrumb) {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.finboard-question__card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-top: 2px solid var(--fb-gold);
    border-radius: var(--fb-radius);
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--fb-shadow-card);
}
/* Gold top accent */
.finboard-question__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.25), transparent);
    pointer-events: none;
}
/* Shared breadcrumb component */
.finboard-breadcrumb {
    padding: 0 16px;
    margin-bottom: 0;
}
.finboard-breadcrumb__inner {
    max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fb-text-muted);
    padding: 10px 0;
}
.finboard-breadcrumb a {
    color: var(--fb-text-muted);
    text-decoration: none;
    transition: color var(--fb-transition);
}
.finboard-breadcrumb a:hover { color: var(--fb-gold); }
.finboard-breadcrumb__sep { opacity: .4; }
.finboard-breadcrumb__inner > span:last-child {
    color: var(--fb-text);
    font-weight: 500;
}

.finboard-question__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.finboard-question__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--fb-text);
    line-height: 1.3;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fb-border);
    letter-spacing: -0.03em;
}
.finboard-question__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--fb-text-muted);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.finboard-question__body {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--fb-text);
}
.finboard-question__body p { margin-bottom: 14px; }
.finboard-question__body p:last-child { margin-bottom: 0; }
.finboard-question__body a {
    color: var(--fb-gold);
    text-decoration: underline;
    text-decoration-color: rgba(232,169,16,.25);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--fb-transition);
}
.finboard-question__body a:hover { text-decoration-color: var(--fb-gold); }

/* Question author row */
.finboard-question__author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.finboard-question__author-name {
    font-weight: 600;
    color: var(--fb-text);
    transition: color var(--fb-transition);
}
.finboard-question__author-name:hover { color: var(--fb-gold); }
.finboard-question__date { color: var(--fb-text-muted); font-size: 12px; }

/* Question status */
.finboard-question__status {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.finboard-question__status--open,
.finboard-question__status--awaiting {
    background: rgba(232,169,16,.1);
    color: #E8A910;
    border: 1px solid rgba(232,169,16,.12);
}
.finboard-question__status--answered {
    background: var(--fb-green-dim);
    color: #00d4aa;
    border: 1px solid rgba(0,212,170,.12);
}
.finboard-question__status--closed {
    background: rgba(107,107,128,.08);
    color: #9ca3af;
    border: 1px solid rgba(107,107,128,.1);
}

/* Question topic tag */
.finboard-question__topic-tag {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Pinned answers */
.finboard-question__pinned {
    margin-bottom: 14px;
}
.finboard-question__pinned-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 14px;
    border-radius: var(--fb-radius) var(--fb-radius) 0 0;
}
.finboard-question__pinned--official .finboard-question__pinned-label {
    background: linear-gradient(135deg, var(--fb-gold), #c49a0a);
    color: #000;
    -webkit-text-fill-color: #000;
    box-shadow: 0 2px 8px rgba(232,169,16,.15);
}
.finboard-question__pinned--official .finboard-comment {
    border-color: var(--fb-border-gold);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 0 16px rgba(232,169,16,.04);
}
.finboard-question__pinned--best .finboard-question__pinned-label {
    background: linear-gradient(135deg, rgba(0,212,170,.20), rgba(0,212,170,.10));
    color: #00d4aa;
    font-size: 12px;
    padding: 10px 16px;
}
.finboard-question__pinned--best .finboard-comment {
    border-color: rgba(0,212,170,.25);
    border-left: 3px solid #00d4aa;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: var(--fb-shadow-card), 0 0 16px rgba(0,212,170,.06);
}

/* Answers section */
.finboard-question__answers-section {
    margin-top: 24px;
}
.finboard-question__answers-title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 18px;
    padding-top: 24px;
    padding-bottom: 12px;
    border-top: 2px solid var(--fb-border);
    border-bottom: 1px solid var(--fb-border);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Answer form */
.finboard-question__answer-form {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-top: 2px solid var(--fb-gold);
    border-radius: var(--fb-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--fb-shadow-card);
}
.finboard-question__answer-form h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    color: var(--fb-gold);
}
.finboard-question__answer-form textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.65;
    background: var(--fb-bg-input);
    color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    resize: vertical;
    min-height: 110px;
    font-family: var(--fb-font);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
    outline: none;
}
.finboard-question__answer-form textarea:focus {
    border-color: var(--fb-gold);
    box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 16px rgba(232,169,16,.05);
}
.finboard-question__answer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.finboard-question__answer-cta {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 18px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--fb-text-muted);
}
.finboard-question__answer-cta a { color: var(--fb-gold); font-weight: 600; }
.finboard-question__answer-cta a:hover { text-decoration: underline; }

.finboard-question__vote {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--fb-border);
    margin-top: 18px;
}


/* ── 14. Comments / Answers ──────────────────────────────────── */
.finboard-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-comments-header h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.finboard-comments-count {
    font-size: 13px;
    color: var(--fb-text-muted);
}

.finboard-comment {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    /* Left corners get extra radius so the vote column's rounded edge
     * reads as a distinct side-well, matching the discourse-topic view. */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-bottom: 16px;
    overflow: hidden;
    display: flex;
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
    box-shadow: var(--fb-shadow-card);
}
.finboard-comment:hover {
    border-color: var(--fb-border-strong);
}
.finboard-comment--deleted {
    opacity: .45;
}
.finboard-comment--pinned {
    position: relative;
    border-color: var(--fb-border-gold);
    background: linear-gradient(135deg, rgba(232,169,16,.03), rgba(232,169,16,.01));
}
.finboard-comment--pinned::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--fb-gold), rgba(232,169,16,.3));
    border-radius: 2px 0 0 2px;
}
.finboard-comment--best {
    border-color: rgba(0,212,170,.25);
    border-left: 3px solid #00d4aa;
    box-shadow: var(--fb-shadow-card), 0 0 16px rgba(0,212,170,.06);
}

/* Comment vote column */
.finboard-comment__vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    min-width: 50px;
    background: var(--fb-bg-raised);
    border-right: 1px solid var(--fb-border);
    flex-shrink: 0;
    /* Matches the parent .finboard-comment left-corner radius so the
     * vote well reads as a rounded side rather than a flat strip. The
     * parent's overflow:hidden would clip this too, but setting it
     * explicitly keeps the background paint inside the radius when
     * the parent's overflow is ever relaxed (e.g. mod kebab popouts). */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* Comment body */
.finboard-comment__body {
    flex: 1;
    padding: 14px 18px;
    min-width: 0;
}
.finboard-comment__header,
.finboard-comment__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}
.finboard-comment__author {
    font-weight: 600;
    color: var(--fb-text);
    font-size: 13px;
    letter-spacing: -0.01em;
}
.finboard-comment__time {
    color: var(--fb-text-muted);
    font-size: 11px;
}
.finboard-comment__content {
    font-size: 14px;
    line-height: 1.65;
    color: var(--fb-text);
    margin-bottom: 10px;
}
.finboard-comment__content p { margin-bottom: 10px; }
.finboard-comment__content p:last-child { margin-bottom: 0; }
.finboard-comment__deleted-text { color: var(--fb-text-muted); font-style: italic; }

/* Vote buttons (shared) */
.finboard-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    color: var(--fb-text-muted);
    opacity: .55;
    transition: all var(--fb-transition);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--fb-font);
}
.finboard-vote-btn:hover:not(:disabled):not(.finboard-vote-btn--disabled) {
    opacity: 1;
    background: rgba(255,255,255,.06);
}
/* Disabled state (FIN-010): probation, own-post, logged-out — users need a
   clear visual cue and tooltip instead of a silent click. */
.finboard-vote-btn:disabled,
.finboard-vote-btn.finboard-vote-btn--disabled {
    opacity: .25;
    cursor: not-allowed;
    filter: grayscale(.8);
}
.finboard-vote-btn:disabled:hover,
.finboard-vote-btn.finboard-vote-btn--disabled:hover {
    background: none;
    opacity: .25;
}
/* Upvote — green. !important because some themes (Elementor / Hello
   Elementor) set a generic `a, button { color: inherit }` in a later
   cascade that was turning the active upvote red on the community feed. */
.finboard-vote-btn--active.finboard-vote-btn--up,
.finboard-post-votes .finboard-vote-btn--active.finboard-vote-btn--up {
    color: var(--fb-green, #10b981) !important;
    -webkit-text-fill-color: var(--fb-green, #10b981) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px rgba(0,212,170,.3));
    animation: finboard-vote-pop 0.25s ease;
}
.finboard-vote-btn--active.finboard-vote-btn--up svg,
.finboard-post-votes .finboard-vote-btn--active.finboard-vote-btn--up svg {
    color: var(--fb-green, #10b981) !important;
    stroke: var(--fb-green, #10b981) !important;
    fill: none;
}
.finboard-vote-btn--up:hover:not(:disabled):not(.finboard-vote-btn--disabled) {
    color: var(--fb-green, #10b981) !important;
    -webkit-text-fill-color: var(--fb-green, #10b981) !important;
}
/* Discourse like heart — red when active (explicit heart colour, not
   --fb-red, because it's semantically a "liked" indicator not a denial). */
.finboard-dc-like-btn.finboard-vote-btn--active {
    color: #e74c3c !important;
    -webkit-text-fill-color: #e74c3c !important;
    opacity: 1 !important;
    animation: finboard-vote-pop 0.25s ease;
}
.finboard-dc-like-btn:not([disabled]):hover {
    color: #e74c3c !important;
    -webkit-text-fill-color: #e74c3c !important;
    opacity: 0.8;
}
.finboard-like-error-tip {
    display: block;
    font-size: 10px;
    color: var(--fb-red, #e74c3c);
    text-align: center;
    margin-top: 4px;
    animation: finboard-fade-in 0.2s ease;
}
@keyframes finboard-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ── Review like button — gold active state ────────────────────────── */
.finboard-review-vote-btn--up.finboard-vote-btn--active {
    color: var(--fb-gold, #E8A910) !important;
    -webkit-text-fill-color: var(--fb-gold, #E8A910) !important;
    background: rgba(232, 169, 16, 0.12);
    border-color: var(--fb-gold, #E8A910);
    opacity: 1 !important;
    animation: finboard-vote-pop 0.25s ease;
}
.finboard-review-vote-btn--up.finboard-vote-btn--active svg,
.finboard-review-vote-btn--up.finboard-vote-btn--active path {
    fill: var(--fb-gold, #E8A910);
    stroke: var(--fb-gold, #E8A910);
}
/* Hover on an already-liked review button hints "click to unlike" */
.finboard-review-vote-btn--up.finboard-vote-btn--active:hover {
    opacity: 0.75 !important;
}
.finboard-vote-btn svg { width: 16px; height: 16px; pointer-events: none; }
.finboard-vote--busy { pointer-events: none; opacity: .25; }

.finboard-comment__score {
    font-size: 12px;
    font-weight: 700;
    color: var(--fb-text);
    padding: 2px 0;
    text-align: center;
}

/* Comment action buttons */
.finboard-comment__actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--fb-border);
    margin-top: 10px;
}
/* In lockstep with .finboard-post-action above — see comment there.
 * !important on background / border / color because reset.css ships
 * [type=button] { border: 1px solid #c36; background: transparent;
 * color: #c36 } at (0,1,0) which loads after finboard-v4.css and
 * ties with single-class selectors. Without !important, action
 * buttons on Discourse-sourced comment/reply rows (hotstocks, news)
 * rendered with a crimson outline that stayed even after click. */
.finboard-action-btn,
.finboard-action-btn:link,
.finboard-action-btn:visited {
    /* hello-elementor reset.css ships [type=button], button { display:
     * inline-block; padding: .5rem 1rem; font-size: 1rem; border: 1px solid
     * #c36; background: transparent; color: #c36; border-radius: 3px;
     * text-align: center; white-space: nowrap; } at specificity (0,1,0) —
     * the same as this single-class selector. It loads AFTER finboard-v4.css,
     * so every layout property we set below loses the tie-break unless we
     * mark it !important. Do not remove these unless reset.css also moves. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--fb-text-muted) !important;
    -webkit-text-fill-color: var(--fb-text-muted) !important;
    border-radius: var(--fb-radius-sm) !important;
    transition: color var(--fb-transition), background var(--fb-transition);
    cursor: pointer;
    background: none !important;
    border: none !important;
    font-family: var(--fb-font) !important;
    text-decoration: none !important;
    vertical-align: middle;
    text-transform: none !important;
    white-space: nowrap !important;
    text-align: center !important;
}
.finboard-action-btn:hover,
.finboard-action-btn:focus,
.finboard-action-btn:focus-visible,
.finboard-action-btn:active {
    color: var(--fb-gold) !important;
    -webkit-text-fill-color: var(--fb-gold) !important;
    background: var(--fb-gold-dim, rgba(232,169,16,0.08)) !important;
    border: none !important;
}
/* Inline SVG + text label side-by-side. Avoid `display: block` on the
 * SVG — combined with some theme resets it can cause the text to wrap
 * below the icon (reported on hotstocks / news comments). Keeping the
 * flex-item default keeps the icon and its adjacent text node on one
 * line inside the inline-flex button. */
.finboard-action-btn {
    flex-direction: row !important;
    white-space: nowrap;
}
.finboard-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.finboard-action-btn--reply:hover { color: var(--fb-gold); }
.finboard-action-btn--edit:hover { color: #60a5fa; }
.finboard-action-btn--delete:hover { color: var(--fb-red); }
.finboard-action-btn--report:hover { color: #fb923c; }
.finboard-action-btn--best:hover { color: var(--fb-green); }
.finboard-action-btn--official:hover { color: var(--fb-gold); }
.finboard-action-btn--mod:hover { color: var(--fb-red); }

/* Admin/moderator actions */
.finboard-action-btn--admin { color: var(--fb-gold); opacity: .7; font-size: 12px; }
.finboard-action-btn--admin:hover { opacity: 1; color: var(--fb-gold); }
.finboard-comment__admin-divider {
    color: var(--fb-border); font-size: 12px; margin: 0 2px; opacity: .5;
    user-select: none;
}

/* Upvote & bookmark buttons in thread comments */
.finboard-thread-upvote-btn,
.finboard-thread-bookmark-btn {
    display: inline-flex; align-items: center; gap: 3px;
    transition: color .15s, opacity .15s;
}
.finboard-thread-upvote-btn:hover { color: var(--fb-gold); }
.finboard-thread-bookmark-btn:hover { color: var(--fb-gold); }
.finboard-action-btn--active { color: var(--fb-gold) !important; }

/* Bookmark / Save button — inherits shape from .finboard-action-btn;
   only the colour treatment differs (active = gold, matching the
   anchor-link hover motif used across the action row). */
.finboard-dc-bookmark-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 10px !important;
    color: var(--fb-text-muted) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: color .15s, background .15s !important;
}
.finboard-dc-bookmark-btn:hover,
.finboard-dc-bookmark-btn:focus-visible {
    color: var(--fb-gold) !important;
    background: var(--fb-gold-dim, rgba(232,169,16,0.08)) !important;
}
.finboard-dc-bookmark-btn.finboard-action-btn--active {
    color: var(--fb-gold) !important;
}
.finboard-dc-bookmark-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Thread bookmark button — same treatment. */
.finboard-thread-bookmark-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 10px !important;
    color: var(--fb-text-muted) !important;
    background: none !important;
    border: none !important;
}
.finboard-thread-bookmark-btn:hover,
.finboard-thread-bookmark-btn:focus-visible {
    color: var(--fb-gold) !important;
    background: var(--fb-gold-dim, rgba(232,169,16,0.08)) !important;
}
.finboard-thread-bookmark-btn.finboard-action-btn--active { color: var(--fb-gold) !important; }

.finboard-action-btn--static {
    display: inline-flex; align-items: center; gap: 3px;
    cursor: default; opacity: .6;
}
.finboard-thread-upvote-count { font-size: 12px; font-weight: 600; min-width: 8px; }

/* Nested replies */
.finboard-replies {
    margin-left: 24px;
    border-left: 2px solid rgba(232,169,16,.08);
    padding-left: 0;
}
.finboard-replies .finboard-comment {
    border-radius: 0 var(--fb-radius) var(--fb-radius) 0;
    margin-bottom: 0;
    border-left: none;
    border-top: none;
}
.finboard-replies .finboard-comment + .finboard-comment {
    border-top: 1px solid var(--fb-border);
}
/* Deeper nested replies */
.finboard-replies--deep {
    margin-left: 20px;
    border-left: 1px solid var(--fb-border);
    padding-left: 0;
}
.finboard-replies--deep .finboard-comment {
    font-size: 13px;
}


/* ── 15. Compose / Reply Forms ───────────────────────────────── */
.finboard-compose {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: var(--fb-shadow-card);
}
.finboard-compose__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.finboard-compose__textarea,
.finboard-reply-form__textarea,
.finboard-edit-form__textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
    background: var(--fb-bg-input);
    color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    resize: vertical;
    min-height: 88px;
    font-family: var(--fb-font);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
    outline: none;
}
.finboard-compose__textarea:focus,
.finboard-reply-form__textarea:focus,
.finboard-edit-form__textarea:focus {
    border-color: var(--fb-gold);
    box-shadow:
        0 0 0 3px rgba(232,169,16,.1),
        0 0 16px rgba(232,169,16,.05);
}
.finboard-compose__footer,
.finboard-reply-form__footer,
.finboard-edit-form__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.finboard-compose__charcount {
    font-size: 11px;
    color: var(--fb-text-muted);
    margin-right: auto;
}
.finboard-charcount--warn { color: #E8A910; }
.finboard-charcount--over { color: var(--fb-red); }

/* Reply form */
.finboard-reply-form {
    background: var(--fb-bg);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    padding: 12px;
    margin: 10px 0;
}
.finboard-reply-form__textarea { min-height: 64px; font-size: 13px; }

/* Edit form */
.finboard-edit-form {
    background: var(--fb-bg);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    padding: 12px;
    margin: 10px 0;
}


/* ── 15b. Auth Shell ─────────────────────────────────────────── */
.finboard-auth-shell {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 28px 16px;
    background: var(--fb-bg) !important;
    color: var(--fb-text);
    font-family: var(--fb-font);
    width: 100%;
    margin: 0 auto;
    position: relative;
}
/* Premium background gradient for auth pages */
.finboard-auth-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(232,169,16,.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 100%, rgba(232,169,16,.02) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.finboard-auth-shell__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}
.finboard-auth-shell__logo-img {
    max-height: 72px;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(232,169,16,.1));
}
.finboard-auth-shell__logo-text {
    font-size: 13px;
    color: var(--fb-text-muted);
    -webkit-text-fill-color: var(--fb-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.finboard-auth-shell__card {
    width: 100%;
    max-width: 440px;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: 16px;
    padding: 40px 36px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 8px 32px rgba(0,0,0,.4),
        0 0 0 1px rgba(255,255,255,.03),
        var(--fb-shadow-gold);
}
/* Gold top glow on auth card */
.finboard-auth-shell__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.2), transparent);
    pointer-events: none;
}
.finboard-auth-shell__footer {
    text-align: center;
    margin-top: 28px;
    font-size: 13px;
    color: var(--fb-text-muted);
    -webkit-text-fill-color: var(--fb-text-muted);
    position: relative;
    z-index: 1;
}
.finboard-auth-shell__footer a,
.finboard.finboard-auth-shell .finboard-auth-shell__footer a {
    color: var(--fb-gold) !important;
    -webkit-text-fill-color: var(--fb-gold) !important;
    font-weight: 500;
    transition: color var(--fb-transition);
}
.finboard-auth-shell__footer a:hover,
.finboard.finboard-auth-shell .finboard-auth-shell__footer a:hover {
    color: var(--fb-gold-hover) !important;
    -webkit-text-fill-color: var(--fb-gold-hover) !important;
    text-decoration: underline;
}
.finboard-auth-shell .finboard-community-bar {
    width: 100%;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}


/* ── 16. Auth Forms (Login, Register, Forgot, Reset) ─────────── */
.finboard-auth {
    max-width: 420px;
    margin: 40px auto;
    padding: 0 16px;
}
.finboard-auth-card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 32px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--fb-shadow-card), var(--fb-shadow-gold);
}
.finboard-auth-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
    letter-spacing: -0.03em;
}
.finboard-auth-card .finboard-auth-sub {
    font-size: 13px;
    color: var(--fb-text-muted);
    text-align: center;
    margin-bottom: 24px;
}
.finboard-auth-field {
    margin-bottom: 16px;
}
.finboard-auth-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.finboard-auth-field input {
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
    background: var(--fb-bg-inset, var(--fb-bg-input));
    color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    font-family: var(--fb-font);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
    outline: none;
    box-shadow: var(--fb-neu-in-sm);
}
.finboard-auth-field input:focus {
    border-color: var(--fb-gold);
    box-shadow: var(--fb-neu-in-sm), 0 0 0 3px rgba(232,169,16,.1), var(--fb-neu-gold);
}
.finboard-auth-field input:hover { border-color: var(--fb-border-strong); }
.finboard-auth-submit {
    width: 100%;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    background: var(--fb-gold);
    color: #000;
    -webkit-text-fill-color: #000;
    border: none;
    border-radius: var(--fb-radius-sm);
    cursor: pointer;
    font-family: var(--fb-font);
    transition: all var(--fb-transition);
    margin-top: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(232,169,16,.15);
    letter-spacing: -0.01em;
}
.finboard-auth-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.15) 50%, transparent 75%);
    animation: finboard-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
.finboard-auth-submit:hover {
    background: var(--fb-gold-hover);
    color: #000;
    -webkit-text-fill-color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(232,169,16,.25);
}
.finboard-auth-submit:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.finboard-auth-footer {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--fb-text-muted);
}
.finboard-auth-footer a { color: var(--fb-gold); font-weight: 600; }
.finboard-auth-footer a:hover { text-decoration: underline; }
.finboard-auth-error,
.finboard-auth-success {
    padding: 12px 16px;
    border-radius: var(--fb-radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
}
.finboard-auth-error {
    background: var(--fb-red-dim);
    color: #ff8a94;
    border: 1px solid rgba(255,71,87,.15);
}
.finboard-auth-success {
    background: var(--fb-green-dim);
    color: #00d4aa;
    border: 1px solid rgba(0,212,170,.15);
}
/* Honeypot */
.finboard-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }


/* ── 17. Profile Page ────────────────────────────────────────── */
/* Profile now uses .finboard-wrap grid layout (same as feed/quiz/ratings).
   The .finboard-profile class is kept for profile-specific component styles. */
.finboard-profile { overflow-x: hidden; max-width: 100vw; }
.finboard-profile__header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    margin-bottom: 18px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--fb-shadow-card);
}
/* Gold accent line on profile header */
.finboard-profile__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.15), transparent);
    pointer-events: none;
}
.finboard-profile__avatar {
    width: 76px;
    height: 76px;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    position: relative;
    box-shadow:
        0 0 0 3px var(--fb-bg-card),
        0 0 0 5px rgba(232,169,16,.15),
        0 0 20px rgba(232,169,16,.08);
    transition: box-shadow var(--fb-transition-slow);
}
.finboard-profile__avatar:hover {
    box-shadow:
        0 0 0 3px var(--fb-bg-card),
        0 0 0 5px rgba(232,169,16,.3),
        0 0 24px rgba(232,169,16,.15);
}
.finboard-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.finboard-avatar-upload {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--fb-transition);
    color: #fff;
}
.finboard-profile__avatar:hover .finboard-avatar-upload { opacity: 1; }

/* ── Avatar Ring — badge-tier colored border ── */
.finboard-avatar-ring { overflow: visible; }
.finboard-avatar-ring img,
.finboard-avatar-ring > span:first-child {
    border-radius: 9999px;
    width: 100%;
    height: 100%;
}
.finboard-avatar-ring--seedling {
    box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px #15803d, 0 0 14px rgba(21,128,58,.2);
}
.finboard-avatar-ring--regular {
    box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px var(--fb-text-muted), 0 0 14px rgba(107,115,136,.15);
}
.finboard-avatar-ring--contributor {
    box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px #2563eb, 0 0 14px rgba(37,99,235,.2);
}
.finboard-avatar-ring--trusted {
    box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px #d97706, 0 0 14px rgba(217,119,6,.2);
}
.finboard-avatar-ring--expert {
    box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px #7e22ce, 0 0 14px rgba(126,34,206,.2);
}
.finboard-avatar-ring--analyst {
    box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px var(--fb-gold), 0 0 20px rgba(232,169,16,.25);
    animation: finboard-analyst-glow 3s ease-in-out infinite;
}
@keyframes finboard-analyst-glow {
    0%, 100% { box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px var(--fb-gold), 0 0 20px rgba(232,169,16,.2); }
    50%      { box-shadow: 0 0 0 3px var(--fb-bg-card), 0 0 0 5px var(--fb-gold), 0 0 32px rgba(232,169,16,.35); }
}

/* Badge icon overlay — bottom-right of avatar */
.finboard-avatar-ring__badge-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid var(--fb-bg-card);
    z-index: 2;
    padding: 0;
    line-height: 1;
}

.finboard-profile__info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.finboard-profile__name {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
    word-break: break-word;
}
.finboard-profile__joined { font-size: 12px; color: var(--fb-text-muted); margin-top: 3px; }
.finboard-profile__stats {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    font-size: 13px;
}
.finboard-profile__stat-value {
    font-weight: 700;
    color: var(--fb-gold);
    text-shadow: 0 0 8px rgba(232,169,16,.15);
}
.finboard-profile__stat-label { color: var(--fb-text-muted); margin-left: 4px; }

.finboard-profile__section {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--fb-shadow-card);
}
.finboard-profile__section h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fb-border);
    letter-spacing: -0.01em;
}

/* Profile completeness — container is auto-height; the progress bar is the strip */
.finboard-profile__completeness {
    margin: 12px 0;
}
.finboard-profile__completeness-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold), #f0bd3e);
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 8px rgba(232,169,16,.2);
}

/* Email verification banner */
.finboard-profile__verify-banner {
    background: rgba(232,169,16,.06);
    border: 1px solid rgba(232,169,16,.15);
    border-radius: var(--fb-radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.finboard-profile__verify-banner a { color: var(--fb-gold); font-weight: 600; cursor: pointer; }


/* ── 18. Broker Page ─────────────────────────────────────────── */
.finboard-broker {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.finboard-broker__hero {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 28px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--fb-shadow-card), var(--fb-shadow-gold);
}
/* Gold top accent */
.finboard-broker__hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.15), transparent);
    pointer-events: none;
}
.finboard-broker__logo {
    width: 84px;
    height: 84px;
    border-radius: var(--fb-radius);
    background: var(--fb-bg-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--fb-border);
}
.finboard-broker__logo img { max-width: 100%; max-height: 100%; }
.finboard-broker__info { flex: 1; }
.finboard-broker__name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}
.finboard-broker__tagline { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 10px; line-height: 1.5; }

/* Broker aggregate rating */
.finboard-broker-rating {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: var(--fb-shadow-card);
}
.finboard-broker-rating__aggregate {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-broker-rating__score {
    font-size: 44px;
    font-weight: 800;
    color: var(--fb-gold);
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: 0 0 24px rgba(232,169,16,.2);
}
.finboard-broker-rating__stars { display: flex; gap: 3px; }
.finboard-broker-rating__star {
    color: var(--fb-gold);
    font-size: 20px;
    filter: drop-shadow(0 0 4px rgba(232,169,16,.2));
}
.finboard-broker-rating__star--empty { color: var(--fb-border-strong); filter: none; }
.finboard-broker-rating__review-count {
    font-size: 12px;
    color: var(--fb-text-muted);
}

/* Star breakdown */
.finboard-star-breakdown { margin-bottom: 18px; }
.finboard-star-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
}
.finboard-star-row__label { width: 22px; text-align: right; color: var(--fb-text-muted); }
.finboard-star-row__bar {
    flex: 1;
    height: 6px;
    border-radius: 9999px;
    background: var(--fb-border);
    overflow: hidden;
}
.finboard-star-row__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold), #f0bd3e);
    border-radius: 9999px;
    transition: width 0.4s ease;
}
.finboard-star-row__count { width: 26px; color: var(--fb-text-muted); font-size: 11px; }

/* Sub-category averages */
.finboard-rating-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.finboard-rating-cat {
    padding: 12px;
    background: var(--fb-bg-raised);
    border-radius: var(--fb-radius-sm);
    text-align: center;
    border: 1px solid var(--fb-border);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
}
.finboard-rating-cat:hover {
    border-color: var(--fb-border-strong);
    box-shadow: 0 0 12px rgba(232,169,16,.04);
}
.finboard-rating-cat__label { font-size: 11px; color: var(--fb-text-muted); margin-bottom: 6px; }
.finboard-rating-cat__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--fb-gold);
    text-shadow: 0 0 8px rgba(232,169,16,.15);
}

/* Star input (for rating form) */
.finboard-star-input { display: flex; gap: 4px; }
.finboard-star-input__star {
    font-size: 24px;
    cursor: pointer;
    color: var(--fb-border-strong);
    transition: all var(--fb-transition);
    background: var(--fb-bg-card) !important;
    border: 1px solid var(--fb-border) !important;
    border-radius: var(--fb-radius-sm);
    padding: 8px 12px !important;
    line-height: 1;
    outline: none;
}
.finboard-star-input__star--active {
    color: var(--fb-gold);
    border-color: var(--fb-gold) !important;
    box-shadow: 0 0 8px rgba(232,169,16,.1);
}
.finboard-star-input__star:hover {
    color: var(--fb-gold-hover);
    border-color: var(--fb-gold-hover) !important;
    transform: scale(1.05);
}
.finboard-star-input__star:focus-visible {
    border-color: var(--fb-gold) !important;
    box-shadow: 0 0 0 2px rgba(232,169,16,.25);
}

/* Broker reviews list */
.finboard-broker-rating__review {
    background: rgba(255,255,255,.01);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 14px;
    transition: border-color var(--fb-transition);
}
.finboard-broker-rating__review:hover { border-color: var(--fb-border-strong); }
.finboard-broker-rating__review-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    min-width: 40px;
}
.finboard-broker-rating__review-body { flex: 1; min-width: 0; }
.finboard-broker-rating__review-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 8px;
}
.finboard-broker-rating__review-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--fb-text);
}

/* Rating form */
.finboard-rating-form {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: var(--fb-shadow-card);
}
.finboard-rating-form h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.finboard-rating-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-rating-form__row:last-of-type { border-bottom: none; }
.finboard-rating-form__label {
    font-size: 13px;
    font-weight: 500;
}


/* ── 19. Quiz ────────────────────────────────────────────────── */
.finboard-quiz {
    max-width: none;
    margin: 0 auto;
    padding: 28px 0;
    position: relative;
    z-index: 1;
}
.finboard-quiz__header {
    text-align: center;
    margin-bottom: 24px;
}
.finboard-quiz__header h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}
.finboard-quiz__header p { font-size: 13px; color: var(--fb-text-muted); }

.finboard-quiz__daily {
    background:
        linear-gradient(135deg, rgba(232,169,16,.12) 0%, rgba(232,169,16,.04) 50%, transparent 100%),
        var(--fb-bg-card);
    border: 1px solid rgba(232,169,16,.20);
    border-top: 3px solid var(--fb-gold);
    border-radius: var(--fb-radius);
    padding: 28px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--fb-shadow-card), 0 0 32px rgba(232,169,16,.08);
}
.finboard-quiz__daily::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.3), transparent);
    pointer-events: none;
}
.finboard-quiz__daily h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fb-gold);
    margin-bottom: 8px;
    text-shadow: 0 0 12px rgba(232,169,16,.15);
}
.finboard-quiz__daily p { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 14px; }

/* Topic cards */
.finboard-quiz__topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.finboard-quiz__topic-card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: all var(--fb-transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-quiz__topic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.06), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fb-transition);
}
.finboard-quiz__topic-card:hover {
    border-color: var(--fb-border-gold);
    transform: translateY(-3px);
    box-shadow: var(--fb-shadow-lg), var(--fb-neu-gold);
}
.finboard-quiz__topic-card:hover::before { opacity: 1; }
.finboard-quiz__topic-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.finboard-quiz__topic-card p { font-size: 11px; color: var(--fb-text-muted); line-height: 1.4; }

/* Difficulty buttons */
.finboard-quiz__difficulties {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}
.finboard-quiz__diff-btn {
    padding: 6px 14px !important;
    font-size: 10px !important;
    font-weight: 600;
    border-radius: var(--fb-radius-pill) !important;
    border: 1px solid var(--fb-border) !important;
    background: none !important;
    color: var(--fb-text-muted);
    cursor: pointer;
    transition: all var(--fb-transition);
    font-family: var(--fb-font);
    white-space: nowrap;
    line-height: 1.4;
}
.finboard-quiz__diff-btn:hover {
    border-color: var(--fb-border-strong);
    color: var(--fb-text);
    background: rgba(255,255,255,.02) !important;
}
.finboard-quiz__diff-btn--locked {
    opacity: .4;
    cursor: not-allowed;
}

/* Quiz viewport (active quiz) */
.finboard-quiz__viewport {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 28px;
    box-shadow: var(--fb-shadow-card);
    position: relative;
}
.finboard-quiz__viewport::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.08), transparent);
    pointer-events: none;
}
.finboard-quiz__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--fb-text-muted);
}
.finboard-quiz__progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 9999px;
    background: var(--fb-border);
    overflow: hidden;
}
.finboard-quiz__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold), #f0bd3e);
    border-radius: 9999px;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 6px rgba(232,169,16,.2);
}
.finboard-quiz__question {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.45;
    letter-spacing: -0.02em;
}
.finboard-quiz__options { display: flex; flex-direction: column; gap: 10px; }
.finboard-quiz__option-btn {
    display: block;
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    text-align: left;
    background: var(--fb-bg-raised);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    color: var(--fb-text);
    cursor: pointer;
    transition: all var(--fb-transition);
    font-family: var(--fb-font);
    position: relative;
    overflow: hidden;
}
.finboard-quiz__option-btn:hover {
    border-color: var(--fb-border-strong);
    background: var(--fb-bg-hover);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.finboard-quiz__option-btn--selected {
    border-color: var(--fb-gold) !important;
    background: rgba(232,169,16,.06) !important;
    transform: scale(1.02);
    box-shadow: 0 0 16px rgba(232,169,16,.08);
}
.finboard-quiz__option-btn.correct {
    border-color: var(--fb-green);
    background: var(--fb-green-dim);
    color: #00d4aa;
    box-shadow: 0 0 12px rgba(0,212,170,.1);
}
.finboard-quiz__option-btn--correct-glow { animation: finboard-correctGlow .6s ease; }
.finboard-quiz__option-btn.incorrect {
    border-color: var(--fb-red);
    background: var(--fb-red-dim);
    color: #ff8a94;
}
.finboard-quiz__option-btn--shake { animation: finboard-shake .5s ease; }
.finboard-quiz__option-btn.highlight-correct {
    border-color: var(--fb-green);
    background: var(--fb-green-dim);
    opacity: .65;
}
.finboard-quiz__option-btn:disabled { cursor: default; opacity: .8; }
.finboard-quiz__options--expired .finboard-quiz__option-btn {
    opacity: .45;
    pointer-events: none;
}


/* ── 20. News Feed ───────────────────────────────────────────── */
.finboard-news {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: var(--fb-bg);
    color: var(--fb-text);
    min-height: 100vh;
}
.finboard-news__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.finboard-news__header-left { flex: 1; min-width: 200px; }
.finboard-news__title { font-size: 22px; font-weight: 700; margin-bottom: 2px; letter-spacing: -0.01em; }
.finboard-news__subtitle { font-size: 13px; color: var(--fb-text-muted); margin: 0; }
.finboard-news__filters {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    /* overflow: visible so the ::before brand-colour dot on each pill
       doesn't get clipped, and so focus rings / tooltips on pills
       aren't cut by a scroll container. If the pill row overflows on
       narrow screens, flex-wrap handles it instead. */
    overflow: visible;
    flex-wrap: wrap;
    scrollbar-width: none;
}
.finboard-news__filters::-webkit-scrollbar { display: none; }
.finboard-news__filter {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--fb-radius-pill);
    color: var(--fb-text, #e2e8f0);
    /* Border opacity bumped from --fb-border-strong (rgba 0.10 on
       dark) because the card-bg pill on the page-bg was near-
       invisible — closes TODO #10 (ghost tabs on news page). */
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all var(--fb-transition);
    white-space: nowrap;
    background: var(--fb-bg-raised, var(--fb-bg-card));
    font-family: var(--fb-font);
    box-shadow: var(--fb-neu-out-sm);
    letter-spacing: 0.2px;
    opacity: 1;           /* defeat any ancestor opacity */
    backdrop-filter: none; /* defeat any inherited blur */
}
.finboard-news__filter:hover {
    color: var(--fb-text);
    background: var(--fb-bg-hover);
    border-color: rgba(232,169,16,0.4);
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
    transform: translateY(-1px);
}
.finboard-news__filter.active,
.finboard-news__filter--active {
    color: var(--fb-bg, #1a1e28);
    background: var(--fb-gold, #E8A910);
    border-color: var(--fb-gold, #E8A910);
    font-weight: 700;
    box-shadow: var(--fb-neu-in-sm);
    -webkit-text-fill-color: var(--fb-bg, #1a1e28);
}

/* Source-brand dot in front of each news-filter label so the pills read
   as proper branded filter buttons (Google blue, FT salmon, BBC red)
   instead of anonymous outlined rectangles. Uses ::before so no template
   change is needed — the data-source attribute on the button picks the
   colour. "All" filter has no dot so it reads as the neutral default. */
.finboard-news__filter[data-source]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 7px;
    vertical-align: middle;
    opacity: 0.85;
    transition: background .15s, opacity .15s;
}
.finboard-news__filter[data-source="all"]::before { display: none; }
.finboard-news__filter[data-source="google"]::before { background: #4285f4; }
.finboard-news__filter[data-source="ft"]::before     { background: #fda581; }
.finboard-news__filter[data-source="bbc"]::before    { background: #bb1919; }
/* Active pill: brand colours read less contrasty against the gold bg,
   so switch the dot to a darker neutral that pops on gold. */
.finboard-news__filter.active::before,
.finboard-news__filter--active::before {
    background: var(--fb-bg, #1a1e28) !important;
    opacity: 0.85;
}
/* News Accessibility — Focus Styles */
.finboard-news__filter:focus-visible,
.finboard-news-card:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}
.finboard-news-card__discuss-btn:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 1px;
}
.finboard-news__feed { /* container */ }
.finboard-news__empty { text-align: center; padding: 40px 20px; color: var(--fb-text-muted); }
.finboard-news__load-more-wrap { text-align: center; padding: 16px; }

/* ── News Cards ── */
.finboard-news-card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    margin-bottom: 10px;
    transition: border-color var(--fb-transition), transform var(--fb-transition), box-shadow var(--fb-transition);
    overflow: hidden;
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-news-card:hover {
    border-color: var(--fb-border-gold);
    transform: translateY(-2px);
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
}
.finboard-news-card__body { display: flex; gap: 12px; padding: 14px; }
.finboard-news-card__content { flex: 1; min-width: 0; }
.finboard-news-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.finboard-news-card__source {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .3px;
}
/* Dark mode source badges (default) — bright text on translucent bg for dark surfaces */
.finboard-news-card__source--google { background: rgba(66,133,244,.2); color: #93bbfc; }
.finboard-news-card__source--ft { background: rgba(255,166,133,.15); color: #fdb99b; }
.finboard-news-card__source--bbc { background: rgba(220,38,38,.15); color: #fca5a5; }
/* Light mode source badges — darker text on white surfaces */
[data-finboard-theme="light"] .finboard-news-card__source--google { background: rgba(0,76,151,.1); color: #0a6ebd; }
[data-finboard-theme="light"] .finboard-news-card__source--ft { background: rgba(224,168,126,.12); color: #b87a3e; }
[data-finboard-theme="light"] .finboard-news-card__source--bbc { background: rgba(187,25,25,.08); color: #bb1919; }
.finboard-news-card__time { color: var(--fb-text-muted); font-size: 11px; }
.finboard-news-card__title {
    font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 4px;
    color: var(--fb-text); letter-spacing: -0.01em;
}
.finboard-news-card__excerpt {
    font-size: 12px; color: var(--fb-text-muted); line-height: 1.5; margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.finboard-news-card__image {
    width: 120px; height: 80px; border-radius: var(--fb-radius-sm); overflow: hidden; flex-shrink: 0;
}
.finboard-news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.finboard-news-card:hover .finboard-news-card__image img { transform: scale(1.05); }
.finboard-news-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-top: 1px solid var(--fb-border); font-size: 12px;
}
.finboard-news-card__read-more { color: var(--fb-gold); font-weight: 600; font-size: 12px; }
.finboard-news-card__read-more:hover { text-decoration: underline; }
.finboard-news-card__discuss-btn {
    display: flex; align-items: center; gap: 4px; padding: 4px 8px;
    font-size: 11px; font-weight: 500; color: var(--fb-text-muted);
    border-radius: var(--fb-radius-sm); cursor: pointer; background: none;
    border: none; font-family: var(--fb-font); transition: all var(--fb-transition);
}
/* Double-up for specificity (0,2,0) — news cards can render outside the
   .finboard wrapper on some surfaces (RSS shortcode in post content, old
   caches), so the zero-specificity :where(.finboard) button reset doesn't
   always catch them and hello-elementor's reset.css flashes #c36 on hover.
   This rule's (0,2,0) beats the theme's [type="button"]:hover (0,1,1). */
.finboard-news-card__discuss-btn:hover,
.finboard-news-card__discuss-btn.finboard-news-card__discuss-btn:hover,
.finboard-news-card__discuss-btn:focus,
.finboard-news-card__discuss-btn.finboard-news-card__discuss-btn:focus {
    background: var(--fb-bg-raised, #f1f3f7) !important;
    color: var(--fb-gold, #c4920a) !important;
}
.finboard-news-card__discuss-btn svg { width: 14px; height: 14px; }
.finboard-news-card__comment-count { font-weight: 600; }
.finboard-news-card__discussion { padding: 12px 14px; border-top: 1px solid var(--fb-border); }
.finboard-news-card__compose { margin-top: 10px; }
.finboard-news-card__textarea {
    width: 100%; padding: 8px 12px; font-size: 13px; line-height: 1.5;
    background: var(--fb-bg-input); color: var(--fb-text); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm); resize: vertical; min-height: 60px;
    font-family: var(--fb-font); outline: none; transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
}
.finboard-news-card__textarea:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.1); }
.finboard-news-card__compose-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px;
}
.finboard-news-card__char-count { font-size: 11px; color: var(--fb-text-muted); margin-right: auto; }
.finboard-news-card__login-prompt { font-size: 13px; color: var(--fb-text-muted); padding: 8px 0; }
.finboard-news-card__login-prompt a { color: var(--fb-gold); font-weight: 600; }

@media (max-width: 600px) {
    .finboard-news-card__image { display: none; }
    .finboard-news__header { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════
 * Light Theme (when embedded in review pages)
 *
 * Overrides the dark `:root` variables for Finboard components
 * that live inside `.tic-page-wrapper` (Elementor review pages)
 * or have the `.finboard--light` modifier.
 * ═══════════════════════════════════════ */
.tic-page-wrapper .finboard,
.finboard.finboard--light {
    --fb-bg: #ffffff;
    --fb-bg-card: #f8f9fb;
    --fb-bg-raised: #f0f1f4;
    --fb-bg-hover: #e8e9ee;
    --fb-bg-input: #ffffff;
    --fb-border: rgba(0,0,0,.08);
    --fb-border-strong: rgba(0,0,0,.14);
    --fb-border-gold: rgba(196,146,10,.2);
    --fb-text: #1a1d25;
    --fb-text-muted: #5a5e6e;
    --fb-text-link: #c4920a;
    --fb-shadow: 0 2px 8px rgba(0,0,0,.06);
    --fb-shadow-lg: 0 12px 32px rgba(0,0,0,.1);
    --fb-shadow-gold: 0 4px 16px rgba(196,146,10,.12);
    --fb-shadow-card: 0 1px 4px rgba(0,0,0,.05);
    --fb-glass: rgba(0,0,0,0.02);
    --fb-gold: #c4920a;
    --fb-gold-hover: #a87c08;
    --fb-gold-dim: rgba(196,146,10,.1);

    color: var(--fb-text);
    background: var(--fb-bg);
    border-radius: var(--fb-radius);
}

/* Light theme link overrides */
.tic-page-wrapper .finboard a,
.finboard.finboard--light a {
    color: var(--fb-text-link) !important;
}
.tic-page-wrapper .finboard a:hover,
.finboard.finboard--light a:hover {
    color: var(--fb-gold-hover) !important;
}
.tic-page-wrapper .finboard a:visited,
.finboard.finboard--light a:visited {
    color: var(--fb-text-link) !important;
}

/* Light theme heading color */
.tic-page-wrapper .finboard h1,
.tic-page-wrapper .finboard h2,
.tic-page-wrapper .finboard h3,
.tic-page-wrapper .finboard h4,
.finboard.finboard--light h1,
.finboard.finboard--light h2,
.finboard.finboard--light h3,
.finboard.finboard--light h4 {
    color: var(--fb-text);
}

/* Light theme card borders visible */
.tic-page-wrapper .finboard-comment,
.tic-page-wrapper .finboard-news-card,
.tic-page-wrapper .finboard-section,
.finboard.finboard--light .finboard-comment,
.finboard.finboard--light .finboard-news-card,
.finboard.finboard--light .finboard-section {
    border-color: rgba(0,0,0,.1);
    background: #fff;
}

/* Light source badges — darker for contrast */
.tic-page-wrapper .finboard-news-card__source--google,
.finboard.finboard--light .finboard-news-card__source--google { background: rgba(0,76,151,.1); color: #0a6ebd; }
.tic-page-wrapper .finboard-news-card__source--ft,
.finboard.finboard--light .finboard-news-card__source--ft { background: rgba(224,168,126,.12); color: #b87a3e; }
.tic-page-wrapper .finboard-news-card__source--bbc,
.finboard.finboard--light .finboard-news-card__source--bbc { background: rgba(187,25,25,.08); color: #bb1919; }

/* Light filter active button */
.tic-page-wrapper .finboard-news__filter.active,
.tic-page-wrapper .finboard-news__filter--active,
.finboard.finboard--light .finboard-news__filter.active,
.finboard.finboard--light .finboard-news__filter--active {
    background: #c4920a;
    color: #fff;
    border-color: #c4920a;
    -webkit-text-fill-color: #fff;
}

/* Light textarea focus */
.tic-page-wrapper .finboard-news-card__textarea:focus,
.finboard.finboard--light .finboard-news-card__textarea:focus {
    border-color: #c4920a;
    box-shadow: 0 0 0 3px rgba(196,146,10,.12);
}

/* Light vote buttons */
.tic-page-wrapper .finboard-vote-btn,
.finboard.finboard--light .finboard-vote-btn {
    color: #5a5e6e;
}
.tic-page-wrapper .finboard-vote-btn:hover,
.finboard.finboard--light .finboard-vote-btn:hover {
    background: rgba(0,0,0,.04);
}

/* Light compose area */
.tic-page-wrapper .finboard-compose__textarea,
.finboard.finboard--light .finboard-compose__textarea {
    background: #fff;
    border-color: rgba(0,0,0,.12);
    color: #1a1d25;
}
.tic-page-wrapper .finboard-compose__textarea:focus,
.finboard.finboard--light .finboard-compose__textarea:focus {
    border-color: #c4920a;
    box-shadow: 0 0 0 3px rgba(196,146,10,.12);
}

/* Light badge styling */
.tic-page-wrapper .finboard-badge,
.finboard.finboard--light .finboard-badge {
    background: rgba(196,146,10,.1);
    color: #c4920a;
}

/* Light theme news titles — strong contrast */
.tic-page-wrapper .finboard-news-card__title,
.finboard.finboard--light .finboard-news-card__title {
    color: #111318;
    -webkit-text-fill-color: #111318;
}

/* Light theme news excerpts */
.tic-page-wrapper .finboard-news-card__excerpt,
.finboard.finboard--light .finboard-news-card__excerpt {
    color: #3d4250;
}

/* Light theme news timestamps */
.tic-page-wrapper .finboard-news-card__time,
.finboard.finboard--light .finboard-news-card__time {
    color: #6b7280;
}

/* Light theme discuss button */
.tic-page-wrapper .finboard-news-card__discuss-btn,
.finboard.finboard--light .finboard-news-card__discuss-btn {
    color: #6b7280;
}

/* Light theme news header/subtitle */
.tic-page-wrapper .finboard-news__title,
.finboard.finboard--light .finboard-news__title {
    color: #111318;
}
.tic-page-wrapper .finboard-news__subtitle,
.finboard.finboard--light .finboard-news__subtitle {
    color: #4b5563;
}

/* Light theme filter buttons (inactive).
   The legacy `.tic-page-wrapper` / `.finboard--light` selectors don't
   match when the user toggles theme — the modern switch sets
   `html[data-finboard-theme="light"]`. Without this selector the
   inactive pill inherits the dark-theme border (rgba 255/255/255 .18)
   which goes invisible on a light page — "no border on pills" bug. */
html[data-finboard-theme="light"] .finboard-news__filter,
.tic-page-wrapper .finboard-news__filter,
.finboard.finboard--light .finboard-news__filter {
    color: #374151;
    border-color: rgba(0,0,0,.22);
    background: #f3f4f6;
}
html[data-finboard-theme="light"] .finboard-news__filter:hover,
.tic-page-wrapper .finboard-news__filter:hover,
.finboard.finboard--light .finboard-news__filter:hover {
    background: #e5e7eb;
    border-color: rgba(0,0,0,.35);
}

/* Light theme load more button */
.tic-page-wrapper .finboard-news__load-more,
.finboard.finboard--light .finboard-news__load-more {
    color: #c4920a;
    border-color: rgba(196,146,10,.3);
    background: rgba(196,146,10,.04);
}
.tic-page-wrapper .finboard-news__load-more:hover,
.finboard.finboard--light .finboard-news__load-more:hover {
    background: rgba(196,146,10,.1);
}

/* Light theme community nav bar */
.finboard.finboard--light .finboard-community-bar {
    border-bottom-color: rgba(0,0,0,.08);
}
.finboard.finboard--light .finboard-community-tab {
    color: #4b5563;
}
.finboard.finboard--light .finboard-community-tab:hover {
    color: #111318;
}
.finboard.finboard--light .finboard-community-tab.active {
    color: #c4920a;
    border-bottom-color: #c4920a;
}

/* Light thread header */
.tic-page-wrapper .finboard-thread__title,
.finboard.finboard--light .finboard-thread__title {
    color: #1a1d25;
}
.tic-page-wrapper .finboard-thread__count,
.finboard.finboard--light .finboard-thread__count {
    color: #5a5e6e;
}


/* ── 21. Notifications ─────────────────────────────────────── */
.finboard-notif-bell {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--fb-border);
    cursor: pointer;
    color: var(--fb-text);
    transition: all var(--fb-transition);
    font-family: var(--fb-font);
}
.finboard-notif-bell:hover {
    background: var(--fb-bg-raised);
    color: var(--fb-gold);
    border-color: var(--fb-border-gold);
    box-shadow: 0 0 12px rgba(232,169,16,.08);
}
.finboard-notif-bell svg { width: 18px; height: 18px; }
.finboard-notif-bell__count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--fb-red);
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(255,71,87,.3);
}
.finboard-dm-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--fb-gold);
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 9px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(232,169,16,.25);
}
.finboard-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fb-gold);
    border: 2px solid var(--fb-bg);
    box-shadow: 0 0 6px rgba(232,169,16,.4);
}
.finboard-notif-dropdown {
    position: fixed;
    z-index: 300;
    width: 390px;
    max-height: 490px;
    display: flex;
    flex-direction: column;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow-lg);
    overflow: hidden;
    animation: finboard-fadeIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--fb-text);
    /* Position set dynamically by JS to anchor below the bell icon */
}
.finboard-notif-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--fb-border);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--fb-text);
}
.finboard-notif-dropdown__mark-all {
    background: none;
    border: none;
    color: var(--fb-gold);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--fb-font);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--fb-transition);
}
.finboard-notif-dropdown__mark-all:hover { background: var(--fb-gold-dim); }
.finboard-notif-dropdown__list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--fb-border-strong) transparent;
}
.finboard-notif-dropdown__item {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--fb-border);
    transition: background var(--fb-transition);
    cursor: pointer;
}
.finboard-notif-dropdown__item:hover { background: var(--fb-bg-hover); }
.finboard-notif-dropdown__item--unread {
    background: var(--fb-gold-dim);
    border-left: 3px solid var(--fb-gold);
}
.finboard-notif-dropdown__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background: var(--fb-bg-raised);
    border: 1px solid var(--fb-border);
}
.finboard-notif-dropdown__body { flex: 1; min-width: 0; }
.finboard-notif-dropdown__msg {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 2px;
    color: var(--fb-text);
    -webkit-text-fill-color: var(--fb-text);
}
.finboard-notif-dropdown__msg strong { font-weight: 600; color: var(--fb-text); }
.finboard-notif-dropdown__time {
    display: block;
    font-size: 11px;
    color: var(--fb-text-muted);
}
.finboard-notif-dropdown__count {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--fb-text-muted);
    background: var(--fb-bg-raised);
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
}
.finboard-notif-dropdown__empty,
.finboard-notif-dropdown__loading {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--fb-text-muted);
}

/* ── 22. (Removed -- replaced by Section 43 full-page messages) ── */

/* ── 23. Ask Question Form ────────────────────────────────── */
.finboard-ask-question {
    max-width: none;
    margin: 0;
    padding: 24px 0;
}
.finboard-ask-question__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.finboard-ask-question__desc {
    font-size: 14px;
    color: var(--fb-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.finboard-ask-question__field {
    margin-bottom: 16px;
}
.finboard-ask-question__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.finboard-ask-question__field select,
.finboard-ask-question__field input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    background: var(--fb-bg-input);
    color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    font-family: var(--fb-font);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
    outline: none;
}
.finboard-ask-question__field select:focus,
.finboard-ask-question__field input:focus {
    border-color: var(--fb-gold);
    box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 12px rgba(232,169,16,.05);
}
.finboard-ask-question__field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237a7a90' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.finboard-ask-question__field textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    background: var(--fb-bg-input);
    color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    font-family: var(--fb-font);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
    outline: none;
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}
.finboard-ask-question__field textarea:focus {
    border-color: var(--fb-gold);
    box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 12px rgba(232,169,16,.05);
}

/* ── 24. Alerts & Toasts ──────────────────────────────────── */
.finboard-alert {
    padding: 11px 16px;
    border-radius: var(--fb-radius-sm);
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(8px);
}
.finboard-alert--success {
    background: var(--fb-green-dim);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,.2);
    border-left: 3px solid #4ade80;
}
.finboard-alert--error {
    background: var(--fb-red-dim);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.2);
    border-left: 3px solid var(--fb-red);
}
.finboard-alert--warning {
    background: rgba(232,169,16,.06);
    color: var(--fb-gold);
    border: 1px solid rgba(232,169,16,.15);
    border-left: 3px solid var(--fb-gold);
}
.finboard-alert--info {
    background: rgba(59,130,246,.06);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,.2);
    border-left: 3px solid #60a5fa;
}

.finboard-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(10,10,15,.94);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    color: var(--fb-text);
    border: 1px solid var(--fb-border-gold);
    border-radius: var(--fb-radius);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--fb-shadow-lg), var(--fb-shadow-gold);
    z-index: 99999;
    opacity: 0;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.finboard-toast.show,
.finboard-toast.finboard-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    animation: finboard-slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.finboard-toast--success {
    border-color: rgba(16,185,129,.3);
    box-shadow: var(--fb-shadow-lg), 0 0 12px rgba(16,185,129,.15);
}
.finboard-toast--error {
    border-color: rgba(239,68,68,.35);
    box-shadow: var(--fb-shadow-lg), 0 0 12px rgba(239,68,68,.15);
}
.finboard-toast--warn {
    border-color: rgba(234,179,8,.45);
    box-shadow: var(--fb-shadow-lg), 0 0 12px rgba(234,179,8,.2);
}
.finboard-toast--permission {
    border-color: rgba(59,130,246,.45);
    box-shadow: var(--fb-shadow-lg), 0 0 12px rgba(59,130,246,.18);
    max-width: min(92vw, 560px);
    padding: 14px 44px 14px 20px;
    text-align: left;
    line-height: 1.45;
    pointer-events: auto;
}
.finboard-toast--info {
    border-color: rgba(59,130,246,.35);
    box-shadow: var(--fb-shadow-lg), 0 0 12px rgba(59,130,246,.15);
}
/* Let long/permission toasts be interacted with (X button + links). */
.finboard-toast--visible.finboard-toast--error,
.finboard-toast--visible.finboard-toast--warn,
.finboard-toast--visible.finboard-toast--permission,
.finboard-toast--visible.finboard-toast--info {
    pointer-events: auto;
}
.finboard-toast__msg { display: inline; }
.finboard-toast__links {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}
.finboard-toast__links a {
    color: var(--fb-gold, #E8A910);
    -webkit-text-fill-color: var(--fb-gold, #E8A910);
    font-weight: 600;
    text-decoration: underline;
    margin-right: 12px;
}
.finboard-toast__links a:hover { opacity: .85; }
.finboard-toast__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    background: transparent;
    color: inherit;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s, background .15s;
}
.finboard-toast__close:hover {
    opacity: 1;
    background: rgba(255,255,255,.08);
}
/* Position the close button correctly — anchor the toast so it can absorb it. */
.finboard-toast { position: fixed; }
.finboard-toast--error,
.finboard-toast--warn,
.finboard-toast--permission,
.finboard-toast--info {
    padding-right: 44px;
}

/* Confirm dialog overlay */
.finboard-confirm-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s ease;
}
.finboard-confirm-overlay--visible { opacity: 1; }
.finboard-confirm {
    background: var(--fb-bg-card, #1e2230); border: 1px solid var(--fb-border, #2d3348);
    border-radius: 12px; padding: 24px; max-width: 380px; width: 90%;
    box-shadow: 0 16px 48px rgba(0,0,0,.4);
    transform: scale(.95); transition: transform .2s ease;
}
.finboard-confirm-overlay--visible .finboard-confirm { transform: scale(1); }
.finboard-confirm__message {
    font-size: 15px; line-height: 1.5; color: var(--fb-text, #e2e4e9);
    margin: 0 0 20px;
}
.finboard-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }
.finboard-btn--danger {
    background: #ef4444; color: #fff; border: none; padding: 8px 18px;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.finboard-btn--danger:hover { background: #dc2626; }
[data-finboard-theme="light"] .finboard-confirm {
    background: #fff; border-color: rgba(0,0,0,.1);
    box-shadow: 0 16px 48px rgba(0,0,0,.15);
}
[data-finboard-theme="light"] .finboard-confirm__message { color: #1a1d25; }

/* ── 25. Load More ────────────────────────────────────────── */
.finboard-load-more {
    text-align: center;
    padding: 16px;
}
.finboard-load-more button {
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    background: var(--fb-bg-raised);
    color: var(--fb-text-muted);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-pill);
    cursor: pointer;
    font-family: var(--fb-font);
    transition: all var(--fb-transition);
}
.finboard-load-more button:hover {
    border-color: var(--fb-border-gold);
    color: var(--fb-gold);
    box-shadow: 0 0 12px rgba(232,169,16,.06);
}
.finboard-load-more button:disabled { opacity: .4; cursor: not-allowed; }

/* Empty state — warm and inviting, not dead */
.finboard-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--fb-text-muted);
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-empty svg,
.finboard-empty__icon {
    width: 48px; height: 48px; margin: 0 auto 16px;
    color: var(--fb-gold); opacity: .6;
}
.finboard-empty p { font-size: 15px; margin-bottom: 12px; line-height: 1.5; }
.finboard-empty .finboard-btn { margin-top: 8px; }

/* Placeholder / loading */
.finboard-placeholder {
    text-align: center;
    padding: 24px;
    color: var(--fb-text-muted);
    font-size: 13px;
}

/* ── 26. Thread / Discussion (embedded in article pages) ─── */
.finboard-thread {
    background: var(--fb-bg);
    border-radius: var(--fb-radius);
    padding: 0;
}
.finboard-thread__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.finboard-thread__header h3 {
    font-size: 16px;
    font-weight: 700;
}
.finboard-thread__sort {
    display: flex;
    gap: 2px;
}

/* ── 27. Mod Dropdown ─────────────────────────────────────── */
.finboard-mod-dropdown {
    position: relative;
    display: inline-block;
}
.finboard-mod-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 170px;
    background: rgba(10,10,15,.94);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius-sm);
    box-shadow: var(--fb-shadow-lg);
    z-index: 100;
    padding: 4px;
    animation: finboard-fadeIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.finboard-mod-dropdown.open .finboard-mod-dropdown__menu { display: block; }
.finboard-mod-dropdown__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    text-align: left;
    color: var(--fb-text-muted);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--fb-font);
    transition: all var(--fb-transition);
}
.finboard-mod-dropdown__item:hover { background: var(--fb-bg-hover); color: var(--fb-text); }
.finboard-mod-dropdown__item--danger:hover { color: var(--fb-red); }

/* ── 28. Broker CTA injection ─────────────────────────────── */
.finboard-broker-cta-inline {
    background: linear-gradient(135deg, rgba(232,169,16,.05), rgba(232,169,16,.01));
    border: 1px solid var(--fb-border-gold);
    border-radius: var(--fb-radius);
    padding: 14px 18px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.finboard-broker-cta-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232,169,16,.03), transparent);
    animation: finboard-shimmer 6s ease infinite;
}
.finboard-broker-cta-inline__text { flex: 1; font-size: 12px; color: var(--fb-text-muted); position: relative; }
.finboard-broker-cta-inline__text strong { color: var(--fb-text); font-weight: 600; }
.finboard-broker-cta-inline__btn {
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--fb-radius-pill);
    background: var(--fb-gold);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--fb-font);
    transition: all var(--fb-transition);
    position: relative;
    box-shadow: 0 2px 8px rgba(232,169,16,.2);
}
.finboard-broker-cta-inline__btn:hover {
    background: var(--fb-gold-hover);
    color: #0f0f17;
    -webkit-text-fill-color: #0f0f17;
    box-shadow: 0 4px 16px rgba(232,169,16,.3);
    transform: translateY(-1px);
}

/* Broker CTA card (rendered in comments) */
.finboard-broker-cta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(232,169,16,.05), rgba(232,169,16,.01));
    border: 1px solid var(--fb-border-gold);
    border-radius: var(--fb-radius-sm); padding: 10px 14px; margin-top: 10px;
}
.finboard-broker-cta__logo {
    width: 24px; height: 24px; border-radius: 4px; object-fit: contain; flex-shrink: 0;
    background: rgba(255,255,255,.06); padding: 2px;
}
.finboard-broker-cta__icon { color: var(--fb-gold); font-size: 16px; flex-shrink: 0; }
.finboard-broker-cta__text { font-size: 13px; color: var(--fb-text-muted); }
.finboard-broker-cta__text strong { color: var(--fb-text); font-weight: 600; }
.finboard-broker-cta__actions { display: flex; gap: 12px; margin-left: auto; }
.finboard-broker-cta__link,
.finboard-broker-cta__go {
    font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: color var(--fb-transition);
}
.finboard-broker-cta__link { color: var(--fb-gold); }
.finboard-broker-cta__link:hover { color: var(--fb-gold-hover); }
.finboard-broker-cta__go { color: var(--fb-text-muted); }
.finboard-broker-cta__go:hover { color: var(--fb-gold); }

/* Broker page — hero logo */
.finboard-broker-page__hero-logo { flex-shrink: 0; }
.finboard-broker-page__logo-img {
    width: 80px; height: 80px; border-radius: 14px; object-fit: contain;
    background: var(--fb-bg-raised); border: 1px solid var(--fb-border); padding: 8px;
}
/* Broker page — disclaimer */
.finboard-broker-page__disclaimer {
    font-size: 11px; color: var(--fb-text-muted); line-height: 1.5;
    margin-top: 12px; padding: 10px 14px;
    background: rgba(255,255,255,.02); border-radius: 6px; border: 1px solid var(--fb-border);
}
.finboard-broker-page__disclaimer p { margin: 0; }
/* Broker page — sidebar logo */
.finboard-broker-page__sidebar-logo {
    display: block; max-width: 120px; height: auto; margin: 0 auto 12px;
    object-fit: contain; border-radius: 6px;
}

/* ── 29. Header Avatar & Bells (in-page community header) ── */
.finboard-header-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fb-gold), #e6a800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    transition: box-shadow var(--fb-transition);
    overflow: hidden;
}
.finboard-header-avatar:hover { box-shadow: 0 0 0 2px var(--fb-gold), 0 0 12px rgba(232,169,16,.2); }
.finboard-header-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Duplicate news card block removed — canonical styles at section 22 above */

/* ── 31. Old Nav (news.php, broker-page.php) ───────────── */
.finboard-nav {
    background: var(--fb-bg); border-bottom: 1px solid var(--fb-border); padding: 0 16px; margin-bottom: 16px;
}
.finboard-nav__inner {
    max-width: var(--fb-max-width); margin: 0 auto;
    display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.finboard-nav__inner::-webkit-scrollbar { display: none; }
.finboard-nav__link {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px;
    font-size: 13px; font-weight: 500; color: var(--fb-text-muted);
    border-bottom: 2px solid transparent; white-space: nowrap;
    transition: all var(--fb-transition);
}
.finboard-nav__link:hover { color: var(--fb-text); }
.finboard-nav__link--active { color: var(--fb-gold); border-bottom-color: var(--fb-gold); font-weight: 600; }
.finboard-nav__link svg { width: 16px; height: 16px; opacity: .5; }
.finboard-nav__link--active svg { opacity: 1; }

/* ── 32. Auth BEM Classes (template class names) ───────── */
.finboard-auth__title {
    font-size: 24px; font-weight: 700; margin-bottom: 4px; text-align: center;
    color: var(--fb-text); -webkit-text-fill-color: var(--fb-text);
    letter-spacing: -0.02em;
}
.finboard-auth__subtitle {
    font-size: 13px; color: var(--fb-text-muted); -webkit-text-fill-color: var(--fb-text-muted);
    text-align: center; margin-bottom: 20px;
}
/* Google OAuth Button */
.finboard-oauth { margin-bottom: 16px; }
.finboard-oauth__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600;
    font-family: var(--fb-font); text-decoration: none; border-radius: var(--fb-radius-sm);
    transition: background var(--fb-transition), box-shadow var(--fb-transition); cursor: pointer;
}
.finboard-oauth__btn--google {
    background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: 2px solid #dadce0;
}
.finboard-oauth__btn--google:hover {
    background: #f7f8f8 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; box-shadow: 0 2px 8px rgba(0,0,0,.2); border-color: #bbb;
}
.finboard-oauth__btn--google:focus { outline: 2px solid var(--fb-gold); outline-offset: 2px; }
.finboard-oauth__btn--google:focus:not(:focus-visible) { outline: none; }
.finboard-oauth__icon { flex-shrink: 0; }
.finboard-oauth__divider {
    display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px;
    color: var(--fb-text-muted); -webkit-text-fill-color: var(--fb-text-muted);
}
.finboard-oauth__divider::before,
.finboard-oauth__divider::after {
    content: ''; flex: 1; height: 1px; background: var(--fb-border);
}

/* ── Auth Buttons (SSO + OAuth) ── */
.finboard-auth__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.finboard-auth__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--fb-font);
    text-decoration: none;
    border-radius: var(--fb-radius-sm);
    border: 2px solid transparent;
    transition: background var(--fb-transition), box-shadow var(--fb-transition), border-color var(--fb-transition);
    cursor: pointer;
}
.finboard-auth__btn-icon {
    flex-shrink: 0;
}
.finboard-auth__btn--discourse {
    background: var(--fb-gold);
    color: #000;
    -webkit-text-fill-color: #000;
    border-color: var(--fb-gold);
}
.finboard-auth__btn--discourse:hover {
    background: var(--fb-gold-hover);
    border-color: var(--fb-gold-hover);
    box-shadow: 0 4px 12px rgba(232,169,16,.3);
    color: #000;
    -webkit-text-fill-color: #000;
}
.finboard-auth__btn--google {
    background: #fff;
    color: #000;
    -webkit-text-fill-color: #000;
    border-color: #dadce0;
}
.finboard-auth__btn--google:hover {
    background: #f7f8f8;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    border-color: #bbb;
    color: #000;
    -webkit-text-fill-color: #000;
}
.finboard-auth__btn:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}
.finboard-auth__info {
    font-size: 12px;
    color: var(--fb-text-muted);
    text-align: center;
    line-height: 1.5;
    margin-top: 16px;
}
.finboard-auth__info a {
    color: var(--fb-gold);
}
.finboard-auth__links--secondary {
    margin-top: 8px;
    font-size: 13px;
}

/* Auth landing spinner */
.finboard-auth__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--fb-text-muted);
    font-size: 14px;
}
.finboard-auth__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--fb-border);
    border-top-color: var(--fb-gold);
    border-radius: 50%;
    animation: finboard-spin 0.8s linear infinite;
    margin-bottom: 16px;
}
@keyframes finboard-spin {
    to { transform: rotate(360deg); }
}

.finboard-auth__form { /* container */ }
.finboard-auth__label {
    display: block; font-size: 11px; font-weight: 600; color: var(--fb-text-muted);
    -webkit-text-fill-color: var(--fb-text-muted);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; margin-top: 14px;
}
.finboard-auth__input {
    width: 100%; padding: 11px 14px; font-size: 14px;
    background: var(--fb-bg-inset, var(--fb-bg-input)); color: var(--fb-text); -webkit-text-fill-color: var(--fb-text);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm); font-family: var(--fb-font);
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition); outline: none;
    box-shadow: var(--fb-neu-in-sm);
}
.finboard-auth__input::placeholder { color: var(--fb-text-muted); -webkit-text-fill-color: var(--fb-text-muted); }
.finboard-auth__input:focus { border-color: var(--fb-gold); box-shadow: var(--fb-neu-in-sm), 0 0 0 3px rgba(232,169,16,.1), var(--fb-neu-gold); }
.finboard-auth__input:hover { border-color: var(--fb-border-strong); }
.finboard-auth__input[aria-invalid="true"] { border-color: var(--fb-red); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
/* Fix browser autofill */
.finboard-auth__input:-webkit-autofill,
.finboard-auth__input:-webkit-autofill:hover,
.finboard-auth__input:-webkit-autofill:focus,
.finboard-auth-field input:-webkit-autofill,
.finboard-auth-field input:-webkit-autofill:hover,
.finboard-auth-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--fb-bg-input, #0a0a0f) inset !important;
    -webkit-text-fill-color: var(--fb-text, #f0f0f0) !important;
    caret-color: var(--fb-text, #f0f0f0) !important;
    border-color: var(--fb-border) !important;
    transition: background-color 5000s ease-in-out 0s;
}
select.finboard-auth__input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237a7a90' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
textarea.finboard-auth__input { resize: vertical; min-height: 100px; line-height: 1.6; }
.finboard-auth__hint { display: block; font-size: 11px; color: var(--fb-text-muted); -webkit-text-fill-color: var(--fb-text-muted); margin-top: 4px; }
.finboard-auth__checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 16px 0 20px; font-size: 13px; color: var(--fb-text-muted);
    -webkit-text-fill-color: var(--fb-text-muted);
}
.finboard-auth__checkbox-row input[type="checkbox"] {
    width: 18px; height: 18px; min-width: 18px; margin-top: 1px;
    accent-color: var(--fb-gold); cursor: pointer;
}
.finboard-auth__checkbox-label { line-height: 1.4; cursor: pointer; }
.finboard-auth__checkbox-label a {
    color: var(--fb-gold); -webkit-text-fill-color: var(--fb-gold);
    text-decoration: underline;
}
.finboard-auth__checkbox-label a:hover { color: var(--fb-gold-hover); -webkit-text-fill-color: var(--fb-gold-hover); }
.finboard-auth__links {
    text-align: center; margin-top: 16px; font-size: 13px;
    color: #a1a1aa; -webkit-text-fill-color: #a1a1aa;
}
.finboard-auth__links a,
.finboard .finboard-auth__links a,
.finboard-auth-shell .finboard-auth__links a {
    color: var(--fb-gold) !important;
    -webkit-text-fill-color: var(--fb-gold) !important;
    font-weight: 600;
    text-decoration: none;
}
.finboard-auth__links a:hover,
.finboard .finboard-auth__links a:hover,
.finboard-auth-shell .finboard-auth__links a:hover {
    color: var(--fb-gold-hover) !important;
    -webkit-text-fill-color: var(--fb-gold-hover) !important;
    text-decoration: underline;
}
.finboard-auth__links span {
    color: #a1a1aa; -webkit-text-fill-color: #a1a1aa;
}
.finboard-auth__sep { margin: 0 6px; opacity: .5; }

/* ── 33. Button & Badge Variants ───────────────────────── */
.finboard-btn--full { width: 100%; margin-top: 4px; }
.finboard-btn--outline {
    background: transparent; color: var(--fb-text); -webkit-text-fill-color: var(--fb-text);
    border: 1px solid var(--fb-border);
}
.finboard-btn--outline:hover { border-color: var(--fb-border-strong); color: var(--fb-text); -webkit-text-fill-color: var(--fb-text); background: var(--fb-bg-raised); }

/* ── 33b. Text Utilities ── */
.finboard-text--gold { color: var(--fb-gold); }
.finboard-text--primary { color: var(--fb-text); }
.finboard-text--muted { color: var(--fb-text-muted); }

/* ── 33c. Empty State ── */
.finboard-empty-state {
    color: var(--fb-text-muted);
    text-align: center;
    padding: 24px 0;
    font-size: 14px;
}

/* ── 33d. Sidebar CTA ── */
.finboard-sidebar-cta { text-align: center; padding: 24px 16px; }
.finboard-sidebar-cta__text { margin: 0 0 12px; color: var(--fb-text-muted); font-size: 14px; }

/* ── 33e. Broker List ── */
.finboard-broker-list__intro { margin-bottom: 16px; }
.finboard-broker-list__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--fb-text); letter-spacing: -0.01em; }
.finboard-broker-list__desc { margin: 0; color: var(--fb-text-muted); font-size: 14px; }
.finboard-broker-list__requirement { margin: 6px 0 0; color: var(--fb-text-muted); font-size: 12px; }
.finboard-broker-search { margin-bottom: 12px; }
.finboard-broker-search__input { width: 100%; padding: 10px 14px; font-size: 14px; }

.finboard-broker-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    text-decoration: none;
    transition: border-color var(--fb-transition), transform var(--fb-transition), box-shadow var(--fb-transition);
    margin-bottom: 10px;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-broker-list-item:hover {
    border-color: var(--fb-border-gold);
    transform: translateY(-2px);
    box-shadow: var(--fb-neu-out-sm), var(--fb-neu-gold);
}
/* Top 3 brokers get a gold accent */
.finboard-broker-list-item:nth-child(-n+3) {
    border-left: 3px solid var(--fb-gold);
}
.finboard-broker-list-item:nth-child(-n+3) .finboard-broker-list-item__rank {
    color: var(--fb-gold);
    font-weight: 800;
}
.finboard-broker-list-item__rank {
    flex-shrink: 0; width: 28px; font-size: 14px; font-weight: 700;
    color: var(--fb-text-muted); text-align: center;
}
.finboard-broker-list-item__icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
    background: var(--fb-bg-raised); display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: var(--fb-gold); overflow: hidden;
    border: 1px solid var(--fb-border);
}
.finboard-broker-list-item__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.finboard-broker-list-item__info { flex: 1; min-width: 0; }
.finboard-broker-list-item__name { display: block; font-size: 15px; font-weight: 600; color: var(--fb-text); }
.finboard-broker-list-item__reviews { display: block; font-size: 12px; color: var(--fb-text-muted); margin-top: 2px; }
.finboard-broker-list-item__rating { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.finboard-broker-list-item__stars { display: flex; align-items: center; gap: 3px; }
.finboard-broker-list-item__score { font-size: 14px; font-weight: 700; color: var(--fb-gold); }
.finboard-broker-list-item__no-rating { font-size: 13px; color: var(--fb-text-muted); }
.finboard-broker-list-item__arrow { flex-shrink: 0; color: var(--fb-text-muted); }

/* Speciality Tags */
.finboard-broker__specialities { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.finboard-broker__spec-tag {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: var(--fb-radius-pill);
    background: var(--fb-gold-dim); color: var(--fb-gold);
    text-transform: uppercase; letter-spacing: .3px;
}

/* ── 33f. Pagination ── */
.finboard-community__pagination {
    display: flex; gap: 4px; justify-content: center; padding: 16px 0;
}

/* ── 33g. Guest CTA ── */
.finboard-sidebar-action--center { justify-content: center; }
.finboard-guest-cta__login {
    font-size: 11px; color: var(--fb-text-muted); margin-top: 8px; text-align: center;
}
.finboard-guest-cta__login a { color: var(--fb-gold); font-weight: 600; }
.finboard-guest-cta__login a:hover { text-decoration: underline; }

.finboard-badge--quiz { background: rgba(34,197,94,.1); color: #4ade80; }
.finboard-badge--activity { background: rgba(59,130,246,.12); color: #60a5fa; }

/* Stars system */
.finboard-stars { display: flex; gap: 2px; }
.finboard-star { font-size: 18px; color: var(--fb-border-strong); }
.finboard-star--full { color: var(--fb-gold); }
.finboard-star--half { color: var(--fb-gold); }
.finboard-star--empty { color: var(--fb-border-strong); }

/* Broker Stars Embed (inline shortcode) */
.finboard-broker-stars {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fb-text);
    font-family: var(--fb-font);
}
.finboard-broker-stars--empty { font-size: 13px; color: var(--fb-text-muted); }
.finboard-broker-stars--empty a { color: var(--fb-gold); text-decoration: none; }
.finboard-broker-stars--empty a:hover { text-decoration: underline; }
.finboard-broker-stars__stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; }
.finboard-broker-stars__avg { font-weight: 600; color: var(--fb-text); }
.finboard-broker-stars__count { font-weight: 400; color: var(--fb-text-muted); font-size: 13px; }
.finboard-broker-stars-link { text-decoration: none !important; }
.finboard-broker-stars-link:hover .finboard-broker-stars__avg { color: var(--fb-gold); }
.finboard-broker-stars__cta {
    display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600;
    color: var(--fb-gold); text-decoration: none; white-space: nowrap;
}
.finboard-broker-stars__cta:hover { text-decoration: underline; }

/* Discourse discussion link on reviews */
.finboard-broker-rating__discuss-link {
    display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
    color: var(--fb-gold); text-decoration: none;
}
.finboard-broker-rating__discuss-link:hover { text-decoration: underline; }

/* ── Discourse Feed Extras ─────────────────────────────────── */

/* Tiny avatar in post card header */
.finboard-avatar--xs {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}

/* Stat-only action (views, likes) — not clickable */
.finboard-post-action--stat {
    cursor: default;
    opacity: 0.7;
}
.finboard-post-action--stat svg {
    width: 14px;
    height: 14px;
}

/* Pinned badge */
.finboard-status--pinned {
    background: var(--fb-gold-dim);
    color: var(--fb-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Solved badge */
.finboard-status--best svg {
    width: 12px;
    height: 12px;
    vertical-align: -2px;
    margin-right: 2px;
}

/* Sidebar links list */
.finboard-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.finboard-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fb-text);
    text-decoration: none;
    transition: background 0.15s;
}
.finboard-sidebar-link:hover {
    background: var(--fb-bg-hover);
    color: var(--fb-gold);
    text-decoration: none;
}
.finboard-sidebar-link svg {
    flex-shrink: 0;
    stroke: var(--fb-text-muted);
}
.finboard-sidebar-link:hover svg {
    stroke: var(--fb-gold);
}

/* Community Rating Bar (money page embed) */
.rp-community-rating-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: linear-gradient(135deg, rgba(0,212,170,.05) 0%, rgba(232,169,16,.05) 100%);
    border-left: 3px solid var(--fb-gold); font-size: 13px; margin-bottom: 2px;
}
.rp-cr-label {
    display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
    color: var(--fb-gold); white-space: nowrap;
}
.rp-cr-label svg { flex-shrink: 0; color: var(--fb-gold); }
.rp-community-rating-bar .finboard-broker-stars { font-size: 13px; }
.rp-community-rating-bar .finboard-broker-stars__stars { font-size: 15px; }

/* Review Page Navigation Bar */
.finboard-review-nav {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius); padding: 10px 14px; margin-bottom: 20px;
    font-family: var(--fb-font);
}
.finboard-review-nav__link {
    display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 500;
    color: var(--fb-text-muted); text-decoration: none !important;
    border-radius: 6px; background: var(--fb-bg);
    border: 1px solid transparent; transition: all var(--fb-transition); white-space: nowrap;
}
.finboard-review-nav__link:hover {
    color: var(--fb-text); border-color: var(--fb-border);
    background: var(--fb-bg-card);
}
.finboard-review-nav__link--active {
    color: var(--fb-gold); border-color: var(--fb-border-gold);
    background: var(--fb-gold-dim);
}
.finboard-review-nav__link--broker {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
    color: var(--fb-text); border: 1px solid var(--fb-border);
}
.finboard-review-nav__link--broker:hover {
    border-color: var(--fb-border-gold); color: var(--fb-gold);
}
.finboard-review-nav__link-badge {
    display: inline-block; padding: 1px 5px; font-size: 10px; font-weight: 700;
    line-height: 1.4; color: #000; background: var(--fb-gold); border-radius: 4px;
}
.finboard-review-nav__link--discussion {
    display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--fb-text);
}
.finboard-review-nav__link--discussion svg { opacity: 0.6; flex-shrink: 0; }
.finboard-review-nav__link--discussion:hover svg { opacity: 1; }
.finboard-review-nav__link-count {
    display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700;
    line-height: 1.4; color: #fff; background: rgba(232,169,16,.25); border-radius: 8px;
    min-width: 18px; text-align: center;
}
.finboard-review-nav__link-sep {
    width: 1px; height: 20px; background: var(--fb-border);
    flex-shrink: 0; align-self: center; margin: 0 4px;
}

/* Broker Summary Card (review page embed) */
.finboard-broker-summary {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: 14px; padding: 28px; font-family: var(--fb-font);
    color: var(--fb-text); max-width: 560px; margin: 0 auto;
}
.finboard-broker-summary--empty { text-align: center; padding: 32px 24px; }
.finboard-broker-summary__empty-text { color: var(--fb-text-muted); font-size: 14px; margin: 8px 0 20px; }
.finboard-broker-summary__header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
    padding-bottom: 16px; border-bottom: 1px solid var(--fb-border);
}
.finboard-broker-summary__icon { color: var(--fb-gold); flex-shrink: 0; }
.finboard-broker-summary__title {
    font-size: 16px; font-weight: 700; color: var(--fb-text); margin: 0; letter-spacing: -0.01em;
}
.finboard-broker-summary__overall { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.finboard-broker-summary__score { display: flex; align-items: baseline; gap: 3px; }
.finboard-broker-summary__score-number {
    font-size: 42px; font-weight: 800; line-height: 1;
    color: var(--fb-gold); letter-spacing: -0.02em;
}
.finboard-broker-summary__score-max { font-size: 16px; font-weight: 400; color: var(--fb-text-muted); }
.finboard-broker-summary__stars-wrap { display: flex; flex-direction: column; gap: 4px; }
.finboard-broker-summary__stars { display: flex; gap: 2px; font-size: 22px; line-height: 1; }
.finboard-broker-summary__stars .finboard-star--full { color: var(--fb-gold); }
.finboard-broker-summary__stars .finboard-star--half { color: var(--fb-gold); }
.finboard-broker-summary__stars .finboard-star--empty { color: var(--fb-border-strong); }
.finboard-broker-summary__count { font-size: 13px; color: var(--fb-text-muted); }

/* Sub-category bars */
.finboard-broker-summary__categories {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;
    padding-bottom: 20px; border-bottom: 1px solid var(--fb-border);
}
.finboard-broker-summary__cat { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: 12px; }
.finboard-broker-summary__cat-label { font-size: 13px; font-weight: 500; color: var(--fb-text-muted); white-space: nowrap; }
.finboard-broker-summary__cat-bar { height: 8px; background: var(--fb-bg); border-radius: 4px; overflow: hidden; }
.finboard-broker-summary__cat-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.finboard-broker-summary__cat-fill--high { background: linear-gradient(90deg, var(--fb-gold), var(--fb-gold-hover)); }
.finboard-broker-summary__cat-fill--mid  { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
.finboard-broker-summary__cat-fill--low  { background: linear-gradient(90deg, var(--fb-red), #ff6659); }
.finboard-broker-summary__cat-score { font-size: 13px; font-weight: 700; color: var(--fb-text); text-align: right; }

/* Review snippets */
.finboard-broker-summary__reviews { margin-bottom: 20px; }
.finboard-broker-summary__reviews-heading { font-size: 14px; font-weight: 600; color: var(--fb-text); margin: 0 0 12px; }
.finboard-broker-summary__review {
    padding: 12px 14px; background: var(--fb-bg);
    border: 1px solid var(--fb-border); border-radius: 10px; margin-bottom: 8px;
}
.finboard-broker-summary__review:last-child { margin-bottom: 0; }
.finboard-broker-summary__review-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.finboard-broker-summary__review-author { display: flex; align-items: center; gap: 6px; }
.finboard-broker-summary__review-name { font-size: 13px; font-weight: 600; color: var(--fb-text); }
.finboard-broker-summary__review-stars { display: flex; gap: 1px; font-size: 13px; line-height: 1; }
.finboard-broker-summary__review-stars .finboard-star--full { color: var(--fb-gold); }
.finboard-broker-summary__review-stars .finboard-star--empty { color: var(--fb-border-strong); }
.finboard-broker-summary__review-text { font-size: 13px; line-height: 1.5; color: var(--fb-text-muted); margin: 0 0 6px; }
.finboard-broker-summary__review-date { font-size: 11px; color: var(--fb-text-muted); }

/* CTAs */
.finboard-broker-summary__actions { display: flex; gap: 10px; }
.finboard-broker-summary__actions .finboard-btn { flex: 1; text-align: center; font-size: 13px; padding: 10px 16px; }

/* Avatar xs size */
.finboard-avatar--xs { width: 28px; height: 28px; border-radius: 50%; }
/* Badge sm variant */
.finboard-badge--sm { font-size: 10px; padding: 1px 6px; }
/* Star sm variant */
.finboard-star--sm { font-size: 13px; }

/* Page Discussion Section (money page embed) */
.finboard-page-discussion-section { position: relative; overflow: hidden; }
.finboard-page-discussion-intro { margin-bottom: 24px; text-align: center; }
.finboard-page-discussion-intro h2 {
    margin-bottom: 8px; font-size: 22px; font-weight: 700; color: var(--fb-text);
}
.finboard-page-discussion-intro p {
    color: var(--fb-text-muted); font-size: 14px; line-height: 1.6;
    max-width: 580px; margin: 0 auto;
}
.finboard-page-discussion-intro strong { color: var(--fb-gold); }

.finboard-page-discussion-section .finboard-thread {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius); padding: 20px;
}
.finboard-page-discussion-section .finboard-thread__header {
    padding-bottom: 12px; border-bottom: 1px solid var(--fb-border); margin-bottom: 16px;
}
.finboard-page-discussion-section .finboard-thread__sort {
    margin-bottom: 16px; padding: 3px; background: var(--fb-bg-raised);
    border-radius: var(--fb-radius-pill); border: 1px solid var(--fb-border);
    display: inline-flex; gap: 2px;
}
.finboard-page-discussion-section .finboard-sort-btn {
    box-shadow: none; border: 1px solid transparent; padding: 6px 16px; font-size: 12px;
}
.finboard-page-discussion-section .finboard-sort-btn:hover {
    box-shadow: none; transform: none;
}
.finboard-page-discussion-section .finboard-sort-btn--active {
    background: var(--fb-bg-card); border-color: var(--fb-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.finboard-page-discussion-section .finboard-compose {
    border: 1px solid var(--fb-border); border-radius: 10px;
    padding: 16px; margin-bottom: 20px; background: var(--fb-bg);
}
.finboard-page-discussion-section .finboard-compose__textarea {
    background: var(--fb-bg-card); border-color: var(--fb-border);
}
.finboard-page-discussion-section .finboard-empty {
    text-align: center; padding: 32px 16px; color: var(--fb-text-muted); font-size: 14px;
}
.finboard-page-discussion-section .finboard-login-cta {
    text-align: center; padding: 24px 16px; background: var(--fb-bg);
    border: 1px solid var(--fb-border); border-radius: 10px; margin-bottom: 20px;
}

/* ── 34. Broker Page (broker-page.php) ─────────────────── */
.finboard-broker-page { background: var(--fb-bg); color: var(--fb-text); }
.finboard-main { max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px); margin: 0 auto; padding: 0 16px; }
.finboard-broker-page__hero {
    background: var(--fb-bg-card); border-bottom: 1px solid var(--fb-border);
    padding: 24px 16px; margin-bottom: 20px;
}
.finboard-broker-page__hero-inner {
    max-width: 960px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: 20px;
}
.finboard-broker-page__hero-info { flex: 1; }
.finboard-broker-page__breadcrumb {
    display: flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--fb-text-muted); margin-bottom: 8px;
}
.finboard-broker-page__breadcrumb a { color: var(--fb-text-muted); }
.finboard-broker-page__breadcrumb a:hover { color: var(--fb-gold); }
.finboard-broker-page__title { font-size: 24px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.finboard-broker-page__hero-rating { display: flex; align-items: center; gap: 12px; }
.finboard-broker-page__score { font-size: 36px; font-weight: 800; color: var(--fb-gold); line-height: 1; }
.finboard-broker-page__hero-stars { display: flex; flex-direction: column; gap: 2px; }
.finboard-broker-page__review-count { font-size: 12px; color: var(--fb-text-muted); }
.finboard-broker-page__hero-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }

.finboard-broker-page__layout {
    display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start;
}
.finboard-broker-page__content { min-width: 0; }
.finboard-broker-page__sidebar { position: sticky; top: 80px; }
.finboard-broker-page__sidebar-card {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius); padding: 16px; margin-bottom: 10px;
}
.finboard-broker-page__sidebar-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--fb-text-muted); margin-bottom: 10px;
}
.finboard-broker-page__sidebar-rating { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.finboard-broker-page__sidebar-score { font-size: 28px; font-weight: 800; color: var(--fb-gold); }
.finboard-broker-page__sidebar-out-of { font-size: 14px; color: var(--fb-text-muted); }
.finboard-broker-page__sidebar-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.finboard-broker-page__sidebar-count { font-size: 12px; color: var(--fb-text-muted); }
.finboard-broker-page__stat-row {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px solid var(--fb-border); font-size: 12px;
}
.finboard-broker-page__stat-row:last-child { border-bottom: none; }
.finboard-broker-page__stat-label { color: var(--fb-text-muted); }
.finboard-broker-page__stat-value { font-weight: 600; color: var(--fb-text); }
.finboard-broker-page__sidebar-brokers { display: flex; flex-direction: column; gap: 4px; }
.finboard-broker-page__sidebar-broker-link {
    display: block; padding: 6px 0; font-size: 12px; font-weight: 500; color: var(--fb-text);
    border-bottom: 1px solid var(--fb-border); transition: color var(--fb-transition);
}
.finboard-broker-page__sidebar-broker-link:last-child { border-bottom: none; }
.finboard-broker-page__sidebar-broker-link:hover { color: var(--fb-gold); }

/* Broker features */
.finboard-broker-page__features { margin-top: 16px; }
.finboard-broker-page__features-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.finboard-broker-page__feature-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px;
}
.finboard-broker-page__feature-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.finboard-broker-page__feature-label { min-width: 110px; color: var(--fb-text-muted); }
.finboard-broker-page__feature-bar {
    flex: 1; height: 8px; border-radius: 9999px; background: var(--fb-border); overflow: hidden;
}
.finboard-broker-page__feature-fill { height: 100%; background: var(--fb-gold); border-radius: 9999px; transition: width .4s ease; }
.finboard-broker-page__feature-score { font-weight: 600; min-width: 24px; text-align: right; }
.finboard-broker-page__discuss-intro { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 12px; }

/* Section generic */
.finboard-section {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius);
    padding: 20px; margin-bottom: 16px;
}
.finboard-section__title {
    font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--fb-border);
}

/* ── 35. Broker Rating Form & Reviews ──────────────────── */
.finboard-broker-rating__summary {
    display: flex; flex-direction: column; align-items: center; min-width: 100px;
}
.finboard-broker-rating__overall { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.finboard-broker-rating__out-of { font-size: 16px; color: var(--fb-text-muted); }
.finboard-broker-rating__breakdown { flex: 1; min-width: 0; }
.finboard-broker-rating__bar-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.finboard-broker-rating__bar-label { width: 28px; text-align: right; color: var(--fb-text-muted); white-space: nowrap; }
.finboard-broker-rating__bar-track { flex: 1; height: 8px; border-radius: 9999px; background: var(--fb-border); overflow: hidden; }
.finboard-broker-rating__bar-fill { height: 100%; background: var(--fb-gold); border-radius: 9999px; transition: width .4s ease; }
.finboard-broker-rating__bar-count { width: 24px; color: var(--fb-text-muted); font-size: 11px; }
.finboard-broker-rating__subcategories { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.finboard-broker-rating__sub-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.finboard-broker-rating__sub-label { min-width: 80px; color: var(--fb-text-muted); }
.finboard-broker-rating__sub-score { font-weight: 600; min-width: 20px; }
.finboard-broker-rating__sub-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--fb-border); overflow: hidden; }
.finboard-broker-rating__sub-fill { height: 100%; background: var(--fb-gold); border-radius: 2px; }

.finboard-broker-rating__form-section { margin-top: 16px; }
.finboard-broker-rating__form-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.finboard-broker-rating__cta {
    background: var(--fb-bg-raised); border-radius: var(--fb-radius-sm);
    padding: 14px; font-size: 13px; color: var(--fb-text-muted);
    border: 1px solid var(--fb-border);
}
.finboard-broker-rating__cta a { color: var(--fb-gold); font-weight: 600; }
.finboard-broker-rating__form { /* form container */ }
.finboard-broker-rating__field { margin-bottom: 12px; }
.finboard-broker-rating__field-label {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--fb-text);
}
.finboard-broker-rating__reviews-section { margin-top: 16px; }
.finboard-broker-rating__reviews-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.finboard-broker-rating__reviews-list { /* container */ }
.finboard-broker-rating__review-author { display: flex; align-items: center; gap: 6px; flex: 1; }
.finboard-broker-rating__review-name { font-weight: 600; font-size: 13px; color: var(--fb-text); }
.finboard-broker-rating__review-name:hover { color: var(--fb-gold); }
.finboard-broker-rating__review-stars { display: flex; align-items: center; gap: 4px; }
.finboard-broker-rating__review-date { font-size: 11px; color: var(--fb-text-muted); }
.finboard-broker-rating__review-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.finboard-broker-rating__review-score { font-size: 12px; font-weight: 700; color: var(--fb-text); min-width: 20px; text-align: center; }
.finboard-review-vote-btn {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 22px;
    font-size: 10px; color: var(--fb-text-muted); opacity: .65; cursor: pointer;
    background: none; border: none; border-radius: 4px; transition: all var(--fb-transition);
}
.finboard-review-vote-btn:hover { opacity: 1; background: rgba(255,255,255,.05); }

/* ── 35b. Verified Platform Representative ─────────────── */
.finboard-badge--platform-rep {
    background: rgba(59,130,246,.1);
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
[data-finboard-theme="light"] .finboard-badge--platform-rep {
    background: rgba(37,99,235,.08);
    color: #2563eb;
}

/* Official Response Card */
.finboard-official-response {
    margin-top: 12px;
    padding: 16px;
    background: rgba(59,130,246,.04);
    border: 1px solid rgba(59,130,246,.15);
    border-left: 3px solid #3b82f6;
    border-radius: var(--fb-radius-sm);
}
.finboard-official-response--compose { background: transparent; border: 1px dashed rgba(59,130,246,.2); border-left: 3px dashed #3b82f6; }
.finboard-official-response__header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.finboard-official-response__logo {
    width: 24px; height: 24px; border-radius: 4px; object-fit: contain;
}
.finboard-official-response__meta {
    display: flex; flex-direction: column; gap: 1px;
}
.finboard-official-response__name { font-size: 13px; font-weight: 600; color: var(--fb-text); display: flex; align-items: center; gap: 6px; }
.finboard-official-response__time { font-size: 11px; color: var(--fb-text-muted); }
.finboard-official-response__body {
    font-size: 14px; line-height: 1.6; color: var(--fb-text);
}
.finboard-official-response__form { margin-top: 10px; }
.finboard-official-response__textarea { width: 100%; margin-bottom: 8px; }
.finboard-official-response__form-actions { display: flex; gap: 8px; }
.finboard-official-response__view-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--fb-gold); font-weight: 500; }

/* Platform Profile Page */
.finboard-platform-profile {
    max-width: calc(var(--fb-max-width) + var(--fb-sidebar-w) + 24px);
    margin: 0 auto;
    padding: 28px 16px;
    position: relative;
    z-index: 1;
}
.finboard-platform-profile > *:not(.finboard-community-bar):not(.finboard-breadcrumb) {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.finboard-platform-profile__header {
    display: flex; align-items: center; gap: 20px; margin-bottom: 24px;
    padding: 24px; background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius); box-shadow: var(--fb-neu-out-sm);
}
.finboard-platform-profile__logo {
    width: 80px; height: 80px; border-radius: var(--fb-radius-sm);
    object-fit: contain; background: var(--fb-bg-raised); padding: 8px;
}
.finboard-platform-profile__info { flex: 1; }
.finboard-platform-profile__name { font-size: 24px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finboard-platform-profile__description { font-size: 14px; color: var(--fb-text-muted); line-height: 1.5; margin: 8px 0; }
.finboard-platform-profile__links { display: flex; gap: 12px; margin-top: 8px; }
.finboard-platform-profile__links a {
    font-size: 13px; color: var(--fb-gold); font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
}
.finboard-platform-profile__links a:hover { color: var(--fb-gold-hover); }
.finboard-platform-profile__section { margin-bottom: 24px; }
.finboard-platform-profile__section-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--fb-text); }
.finboard-platform-profile__reps { display: flex; flex-wrap: wrap; gap: 12px; }
.finboard-platform-profile__rep {
    padding: 12px 16px; background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm); box-shadow: var(--fb-neu-flat);
}
.finboard-platform-profile__rep-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.finboard-platform-profile__rep-info { display: flex; flex-direction: column; }
.finboard-platform-profile__rep-name { font-size: 14px; font-weight: 600; color: var(--fb-text); }
.finboard-platform-profile__rep-title { font-size: 12px; color: var(--fb-text-muted); }
.finboard-platform-profile__responses { display: flex; flex-direction: column; gap: 12px; }
.finboard-platform-profile__cta { text-align: center; margin-top: 24px; }

/* Platform Rep Section on Broker Page */
.finboard-platform-rep-section .finboard-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.finboard-platform-rep-section__intro {
    font-size: 14px;
    color: var(--fb-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.finboard-platform-rep-section__intro a {
    color: var(--fb-gold);
    font-weight: 500;
}
.finboard-platform-rep-section__desc {
    font-size: 14px;
    color: var(--fb-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Platform Affiliation on Profile */
.finboard-profile__platform-affiliation {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-top: 12px;
    background: rgba(59,130,246,.04);
    border: 1px solid rgba(59,130,246,.12);
    border-radius: var(--fb-radius-sm);
}
.finboard-profile__platform-logo {
    width: 32px; height: 32px; border-radius: 4px; object-fit: contain;
}
.finboard-profile__platform-name { font-weight: 600; color: var(--fb-text); margin-left: 6px; }
.finboard-profile__platform-role { font-size: 12px; color: var(--fb-text-muted); display: block; }

/* Application Form */
.finboard-platform-apply { max-width: 500px; }
.finboard-platform-apply__title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.finboard-platform-apply__desc { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 16px; line-height: 1.5; }
.finboard-platform-apply__field { margin-bottom: 14px; }
.finboard-platform-apply__label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--fb-text); margin-bottom: 4px;
}

/* ── 36. Profile Extras (template classes) ─────────────── */
.finboard-profile__meta-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.finboard-profile__equity { font-weight: 700; color: var(--fb-gold); font-size: 13px; }
.finboard-profile__investors { font-size: 13px; color: var(--fb-text-muted); font-weight: 600; }
.finboard-profile__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Double-up the class to get specificity (0,2,0) — hello-elementor's
   reset.css has `[type="submit"] { background: transparent; color: #c36 }`
   at (0,1,0) loaded AFTER finboard-v4.css, so a single-class rule loses
   on source-order. `.finboard-btn--gold.finboard-btn--gold` reads as
   two classes and wins decisively. Mirrors the pattern used elsewhere
   for brand-colour buttons that need to survive the theme reset. */
.finboard-btn--gold,
.finboard-btn--gold.finboard-btn--gold {
    background: var(--fb-gold, #c4920a); color: #fff; border: none; font-weight: 600;
    border-radius: var(--fb-radius-sm); transition: all var(--fb-transition);
    box-shadow: 0 2px 8px var(--fb-gold-glow, rgba(232,169,16,.2));
}
.finboard-btn--gold:hover,
.finboard-btn--gold.finboard-btn--gold:hover {
    background: var(--fb-gold-hover, #d9a00e); color: #fff;
    box-shadow: 0 4px 16px var(--fb-gold-glow, rgba(232,169,16,.3));
    transform: translateY(-1px);
}
/* Invest/Divest Button */
.finboard-invest-btn {
    transition: all var(--fb-transition);
    position: relative;
    overflow: hidden;
}
.finboard-invest-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(232,169,16,.2), transparent);
    opacity: 0;
    transition: opacity var(--fb-transition);
}
.finboard-invest-btn:hover::after { opacity: 1; }
.finboard-invest-btn--active {
    background: var(--fb-bg-raised);
    color: var(--fb-text-muted);
    border: 1px solid var(--fb-border);
}
/* Following Badge (for feed post cards) */
.finboard-post-card__following-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; color: var(--fb-gold);
    padding: 1px 6px; border-radius: var(--fb-radius-pill);
    background: var(--fb-gold-dim);
}
.finboard-profile__section-title {
    font-size: 14px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-profile__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.finboard-profile__badge-item { /* inherits from .finboard-badge */ }
.finboard-profile__ratings-list { display: flex; flex-direction: column; gap: 6px; }
.finboard-profile__rating-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 0;
    border-bottom: 1px solid var(--fb-border); font-size: 13px;
}
.finboard-profile__rating-item:last-child { border-bottom: none; }
.finboard-profile__rating-broker { font-weight: 600; color: var(--fb-text); flex: 1; }
.finboard-profile__rating-broker:hover { color: var(--fb-gold); }
.finboard-profile__rating-stars { color: var(--fb-gold); font-size: 14px; white-space: nowrap; }
.finboard-profile__rating-date { font-size: 11px; color: var(--fb-text-muted); }
.finboard-profile__comments-list { display: flex; flex-direction: column; gap: 6px; }
.finboard-profile__comment-item { padding: 8px 0; border-bottom: 1px solid var(--fb-border); }
.finboard-profile__comment-item:last-child { border-bottom: none; }
.finboard-profile__comment-link { font-weight: 600; font-size: 13px; color: var(--fb-text); display: block; margin-bottom: 2px; }
.finboard-profile__comment-link:hover { color: var(--fb-gold); }
.finboard-profile__comment-excerpt { font-size: 12px; color: var(--fb-text-muted); line-height: 1.5; margin-bottom: 2px; }
.finboard-profile__comment-date { font-size: 11px; color: var(--fb-text-muted); }
.finboard-profile__completeness { margin-bottom: 12px; }
.finboard-profile__progress-label { font-size: 12px; color: var(--fb-text-muted); margin-bottom: 6px; }
.finboard-profile__progress-bar { height: 8px; border-radius: 9999px; background: var(--fb-border); overflow: hidden; }
.finboard-profile__progress-fill { height: 100%; background: var(--fb-gold); border-radius: 9999px; transition: width .4s ease; }
.finboard-profile__completeness-hint { font-size: 12px; color: var(--fb-text-muted); margin-top: 6px; }
.finboard-profile__knowledge { font-size: 13px; color: var(--fb-text-muted); margin-top: 4px; }
.finboard-profile__knowledge strong { color: var(--fb-gold); }
.finboard-profile__bio { font-size: 14px; color: var(--fb-text-muted); margin: 8px 0 0; line-height: 1.5; }

/* ── 37. Thread Extras ─────────────────────────────────── */
.finboard-thread__title { font-size: 16px; font-weight: 700; display: inline; }
.finboard-thread__count { font-size: 13px; font-weight: 400; color: var(--fb-text-muted); margin-left: 8px; }
.finboard-thread__user-info { display: flex; align-items: center; gap: 6px; }
.finboard-thread__sort { display: flex; gap: 2px; align-items: center; margin-bottom: 12px; }
.finboard-equity-score { font-size: 12px; color: var(--fb-gold); font-weight: 600; }
.finboard-sort-label { font-size: 12px; color: var(--fb-text-muted); margin-right: 4px; }
.finboard-login-cta {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius);
    padding: 16px; margin-bottom: 16px; text-align: center;
}
.finboard-login-cta__text { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 10px; }
.finboard-login-cta__text a { color: var(--fb-gold); font-weight: 600; }
.finboard-login-cta .finboard-btn { margin: 0 4px; }

/* ── 38. Quiz Extras ───────────────────────────────────── */
.finboard-quiz__select { /* container */ }
.finboard-quiz__results {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius);
    padding: 24px; text-align: center;
}
.finboard-quiz__results-summary { margin-bottom: 20px; }
.finboard-quiz__results-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.finboard-quiz__results-score { font-size: 32px; font-weight: 800; color: var(--fb-gold); margin-bottom: 6px; }
.finboard-quiz__results-equity { font-size: 14px; color: #4ade80; font-weight: 600; margin-bottom: 4px; }
.finboard-quiz__results-badge { font-size: 14px; margin-bottom: 4px; }
.finboard-quiz__results-retake { font-size: 13px; color: var(--fb-text-muted); font-style: italic; margin-bottom: 4px; }
.finboard-quiz__results-link { margin-top: 12px; }
.finboard-quiz__results-link a { color: var(--fb-gold); font-weight: 600; text-decoration: none; }
.finboard-quiz__results-link a:hover { text-decoration: underline; }
.finboard-quiz__results-review { text-align: left; margin-top: 20px; border-top: 1px solid var(--fb-border); padding-top: 16px; }
.finboard-quiz__result { margin-bottom: 16px; padding: 12px; border-radius: var(--fb-radius-sm); border: 1px solid var(--fb-border); }
.finboard-quiz__result--correct { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.04); }
.finboard-quiz__result--wrong { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.04); }
.finboard-quiz__result-q { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.finboard-quiz__result-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.finboard-quiz__result-options li { font-size: 13px; padding: 6px 10px; border-radius: 4px; }
.finboard-quiz__result-opt--correct { background: var(--fb-green-dim); color: #4ade80; font-weight: 600; }
.finboard-quiz__result-opt--wrong { background: var(--fb-red-dim); color: #f87171; text-decoration: line-through; }
.finboard-quiz__submitting { font-size: 14px; color: var(--fb-text-muted); padding: 20px; text-align: center; }
.finboard-quiz__section-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.finboard-quiz__section-desc { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 14px; }
.finboard-quiz__daily-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.finboard-quiz__daily-reward { font-size: 11px; color: var(--fb-gold); font-weight: 600; }
.finboard-quiz__daily-desc { font-size: 13px; color: var(--fb-text-muted); margin-bottom: 12px; }
.finboard-quiz__daily-done { font-size: 13px; color: var(--fb-text); }
.finboard-quiz__daily-next { font-size: 12px; color: var(--fb-text-muted); margin-top: 4px; }
.finboard-quiz__login-prompt { font-size: 13px; color: var(--fb-text-muted); }
.finboard-quiz__login-prompt a { color: var(--fb-gold); font-weight: 600; }

/* ── Quiz Layout: Main + Leaderboard Sidebar ── */
.finboard-quiz__layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}
.finboard-quiz__main { min-width: 0; }
@media (max-width: 768px) {
    .finboard-quiz__layout { grid-template-columns: 1fr; }
    .finboard-quiz__leaderboard { order: -1; }
}

/* ── Quiz Leaderboard Sidebar ── */
.finboard-quiz__leaderboard {
    /* Leaderboard flows with the page — no sticky. */
}

/* Streak Badge */
.finboard-quiz__streak {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(232,169,16,.08), rgba(232,169,16,.03));
    border: 1px solid rgba(232,169,16,.15);
    border-radius: var(--fb-radius);
    margin-bottom: 12px;
}
.finboard-quiz__streak-fire { font-size: 24px; }
.finboard-quiz__streak-count {
    font-size: 28px; font-weight: 800; color: var(--fb-gold);
    font-variant-numeric: tabular-nums;
}
.finboard-quiz__streak-label {
    font-size: 13px; color: var(--fb-text-muted); font-weight: 500;
}

/* Leaderboard Sections */
.finboard-quiz__lb-section {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-quiz__lb-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; margin: 0 0 10px;
    color: var(--fb-text); text-transform: uppercase; letter-spacing: .3px;
}
.finboard-quiz__lb-title svg { color: var(--fb-gold); flex-shrink: 0; }
.finboard-quiz__lb-list { display: flex; flex-direction: column; gap: 2px; }

/* Leaderboard Item */
.finboard-quiz__lb-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: var(--fb-radius-sm);
    font-size: 13px; transition: background var(--fb-transition);
}
.finboard-quiz__lb-item:hover { background: var(--fb-bg-hover); }
.finboard-quiz__lb-rank {
    width: 24px; text-align: center; font-size: 14px; flex-shrink: 0;
}
.finboard-quiz__lb-name {
    flex: 1; font-weight: 500; color: var(--fb-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finboard-quiz__lb-score {
    font-weight: 700; color: var(--fb-gold); white-space: nowrap; font-size: 12px;
}
.finboard-quiz__lb-empty {
    padding: 12px; text-align: center; color: var(--fb-text-muted); font-size: 12px;
}
/* .finboard-quiz__lb-loading class retired — quiz.php now renders
   finboard-skeleton-row placeholders instead (closes TODO #8). */

.finboard-quiz__topics-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px;
}
.finboard-quiz__topic-card { position: relative; overflow: hidden; }
.finboard-quiz__topic-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.finboard-badge--quiz {
    display: inline-block; font-size: 10px; padding: 2px 8px;
    border-radius: var(--fb-radius-pill); background: var(--fb-green-dim);
    color: #4ade80; font-weight: 600; margin-bottom: 4px;
}
.finboard-quiz__topic-progress {
    font-size: 11px;
    color: var(--fb-text-muted);
    margin-bottom: 10px;
    padding: 4px 10px;
    background: var(--fb-bg-raised);
    border-radius: var(--fb-radius-pill);
    display: inline-block;
    font-weight: 600;
}
/* Quiz topic progress bar */
.finboard-quiz__topic-bar {
    width: 100%;
    height: 4px;
    background: var(--fb-bg-raised);
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}
.finboard-quiz__topic-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold), var(--fb-gold-hover));
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    min-width: 0;
}
.finboard-quiz__topic-card--badged { border-color: rgba(34,197,94,.2); }
.finboard-quiz__difficulty-btns { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.finboard-quiz__diff-btn--done { background: var(--fb-green-dim) !important; color: #4ade80; border-color: rgba(34,197,94,.2) !important; }
.finboard-quiz__diff-btn--perfect { background: rgba(34,197,94,.15) !important; color: #22c55e; border-color: rgba(34,197,94,.3) !important; cursor: default; opacity: .85; }
.finboard-quiz__diff-btn--cooldown { background: rgba(232,169,16,.06) !important; color: var(--fb-gold); border-color: rgba(232,169,16,.15) !important; cursor: not-allowed; opacity: .7; }
.finboard-quiz__diff-score { font-size: 9px; margin-left: 4px; opacity: .7; }
.finboard-quiz__diff-lock { font-size: 10px; margin-left: 2px; }
.finboard-quiz__viewport-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.finboard-quiz__timer { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.finboard-quiz__timer-track { flex: 1; height: 10px; background: var(--fb-bg-raised); border-radius: 9999px; overflow: hidden; position: relative; }
.finboard-quiz__timer-bar {
    width: 100%; height: 100%; background: #22c55e; border-radius: 9999px;
    transition: background-color .4s ease; box-shadow: 0 0 6px rgba(34,197,94,.3);
}
.finboard-quiz-timer--urgent { animation: finboard-timerPulse .6s ease infinite; }
.finboard-quiz-timer--critical {
    animation: finboard-timerPulse .3s ease infinite, finboard-timerShake .15s ease infinite;
    height: 12px !important;
}
.finboard-quiz__timer-text {
    font-size: 15px; font-weight: 800; color: var(--fb-text); min-width: 24px; text-align: center;
    font-variant-numeric: tabular-nums; transition: all .2s ease;
}
.finboard-quiz-timer-text--urgent { color: var(--fb-red); transform: scale(1.2); font-size: 17px; }
.finboard-quiz__label { font-size: 12px; color: var(--fb-text-muted); }

/* ── 39. TIC Header -- User Area, Notifications, Login/Join ── */
.tic-header { background: var(--fb-bg); border-bottom: 1px solid var(--fb-border); position: sticky; top: 0; z-index: 200; width: 100%; box-sizing: border-box; }
.tic-header-inner { display: flex; align-items: center; gap: 12px; max-width: 1280px; margin: 0 auto; padding: 0 16px; height: 56px; min-width: 0; }
.tic-logo { flex-shrink: 1; min-width: 0; overflow: hidden; }
.tic-logo img { height: 36px; width: auto; max-width: 100%; }

/* User area */
.tic-user-area { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

/* Notification bell */
.tic-notif-bell {
    position: relative; background: none; border: none; cursor: pointer;
    color: #fff; padding: 10px; border-radius: 50%;
    transition: color var(--fb-transition), background var(--fb-transition);
}
.tic-notif-bell:hover { color: var(--fb-gold); background: var(--fb-bg-hover); }
.tic-notif-count {
    position: absolute; top: 0; right: 0; background: var(--fb-red);
    color: #fff; font-size: 10px; font-weight: 700; min-width: 16px;
    height: 16px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; padding: 0 4px; line-height: 1;
    box-shadow: 0 0 6px rgba(255,71,87,.3);
}

/* Notification dropdown */
.tic-notif-dropdown {
    position: absolute; top: 100%; right: 16px; width: 340px; max-height: 420px;
    overflow-y: auto; background: rgba(10,10,15,.94);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius); box-shadow: var(--fb-shadow-lg); z-index: 210;
    animation: finboard-fadeIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tic-notif-dropdown__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--fb-border);
    font-size: 13px; color: var(--fb-text);
}
.tic-notif-dropdown__mark-all {
    background: none; border: none; color: var(--fb-gold); cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 0;
}
.tic-notif-dropdown__mark-all:hover { text-decoration: underline; }

/* User avatar in header */
.tic-user-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    border: 2px solid transparent; transition: border-color var(--fb-transition);
}
.tic-user-avatar:hover { border-color: var(--fb-gold); }
.tic-user-avatar__img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* Community nav link highlight */
.tic-nav-community { color: var(--fb-gold) !important; font-weight: 600; }

/* Join & Login buttons in header */
.tic-btn-join,
a.tic-btn-join,
.tic-header a.tic-btn-join {
    background: var(--fb-gold) !important; color: #000 !important; font-weight: 700;
    padding: 6px 16px; border-radius: var(--fb-radius-pill); font-size: 13px;
    transition: background var(--fb-transition);
    -webkit-text-fill-color: #000 !important;
    box-shadow: 0 2px 8px rgba(232,169,16,.15);
}
.tic-btn-join:hover { background: var(--fb-gold-hover); color: #000 !important; -webkit-text-fill-color: #000; }
.tic-btn-login {
    background: transparent; color: var(--fb-text) !important; font-weight: 600;
    padding: 6px 14px; border-radius: var(--fb-radius-pill); font-size: 13px;
    border: 1px solid var(--fb-border-strong);
    transition: border-color var(--fb-transition), color var(--fb-transition);
    -webkit-text-fill-color: var(--fb-text);
}
.tic-btn-login:hover { border-color: var(--fb-gold); color: var(--fb-gold) !important; -webkit-text-fill-color: var(--fb-gold); }

/* TIC Header main navigation */
.tic-nav { display: flex; align-items: center; flex: 1; min-width: 0; }
.tic-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.tic-nav > ul > li { position: relative; }
.tic-nav > ul > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px; font-size: 13px; font-weight: 500;
    color: var(--fb-text); white-space: nowrap;
    transition: color var(--fb-transition);
    -webkit-text-fill-color: var(--fb-text);
}
.tic-nav > ul > li > a:hover { color: var(--fb-gold) !important; -webkit-text-fill-color: var(--fb-gold); }
.tic-arrow { display: inline-block; width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; }

/* TIC Dropdown menus */
.tic-dropdown {
    display: none; position: absolute; top: 100%; left: 0; min-width: 260px;
    background: rgba(10,10,15,.96); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius); box-shadow: var(--fb-shadow-lg); z-index: 220;
    padding: 8px 0; list-style: none; margin: 0;
    animation: finboard-fadeIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tic-nav > ul > li:hover > .tic-dropdown { display: block; }
.tic-dropdown li a {
    display: block; padding: 8px 16px; font-size: 13px;
    color: var(--fb-text); transition: background var(--fb-transition);
    -webkit-text-fill-color: var(--fb-text);
}
.tic-dropdown li a:hover { background: var(--fb-bg-hover); color: var(--fb-gold) !important; -webkit-text-fill-color: var(--fb-gold); }
.tic-dropdown-divider { height: 1px; background: var(--fb-border); margin: 6px 0; }
.tic-dropdown-heading { padding: 6px 16px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fb-text-muted); }
.tic-more a { color: var(--fb-gold) !important; -webkit-text-fill-color: var(--fb-gold) !important; font-weight: 600; }

/* TIC CTA buttons */
.tic-ctas-desktop { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tic-ctas-mobile { display: none; }
.tic-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: var(--fb-radius-pill); font-size: 12px; padding: 7px 14px; white-space: nowrap; transition: all var(--fb-transition); border: none; cursor: pointer; text-decoration: none; line-height: 1.3; }
.tic-btn-hot {
    background: #ef4444; color: #fff !important; -webkit-text-fill-color: #fff;
}
.tic-btn-hot:hover { background: #dc2626; color: #fff !important; -webkit-text-fill-color: #fff; opacity: 0.9; }
.tic-btn-broker {
    background: var(--fb-gold); color: #000 !important; -webkit-text-fill-color: #000;
}
.tic-btn-broker:hover { background: var(--fb-gold-hover); color: #000 !important; -webkit-text-fill-color: #000; opacity: 0.9; }

/* Create / Ask button */
.tic-btn-create {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 600;
    color: var(--fb-text) !important; -webkit-text-fill-color: var(--fb-text);
    border: 1px solid var(--fb-border-strong); border-radius: var(--fb-radius-pill);
    background: transparent; transition: all var(--fb-transition); white-space: nowrap;
}
.tic-btn-create:hover { border-color: var(--fb-gold); color: var(--fb-gold) !important; -webkit-text-fill-color: var(--fb-gold); }
.tic-btn-create svg { flex-shrink: 0; }

/* Icon buttons (DM, Bell) */
.tic-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: none; border: none; cursor: pointer;
    color: #fff; padding: 0;
    transition: color var(--fb-transition), background var(--fb-transition);
}
.tic-icon-btn:hover { color: var(--fb-gold); background: var(--fb-bg-hover); }

/* Avatar button in header */
.tic-avatar-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    border: 2px solid transparent; background: none; cursor: pointer; padding: 0;
    transition: border-color var(--fb-transition);
}
.tic-avatar-btn:hover { border-color: var(--fb-gold); }
.tic-avatar-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Avatar dropdown */
.tic-avatar-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); right: 16px;
    width: 220px; background: rgba(10,10,15,.96);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fb-border-strong); border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow-lg); z-index: 220; padding: 8px 0;
    animation: finboard-fadeIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tic-avatar-dropdown[style*="display: block"] { display: block; }
.tic-avatar-dropdown__user {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid var(--fb-border);
}
.tic-avatar-dropdown__user img { width: 36px; height: 36px; border-radius: 50%; }
.tic-avatar-dropdown__name { font-size: 14px; font-weight: 600; color: var(--fb-text); }
.tic-avatar-dropdown__equity { font-size: 11px; color: var(--fb-gold); }
.tic-avatar-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; font-size: 13px; color: var(--fb-text) !important;
    -webkit-text-fill-color: var(--fb-text); transition: background var(--fb-transition);
}
.tic-avatar-dropdown a:hover { background: var(--fb-bg-hover); color: var(--fb-gold) !important; -webkit-text-fill-color: var(--fb-gold); }
.tic-avatar-dropdown a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--fb-text-muted); }
.tic-avatar-dropdown__divider { height: 1px; background: var(--fb-border); margin: 4px 0; }
.tic-logout-link { color: var(--fb-red) !important; -webkit-text-fill-color: var(--fb-red) !important; }
.tic-logout-link:hover { background: var(--fb-red-dim) !important; color: var(--fb-red) !important; -webkit-text-fill-color: var(--fb-red) !important; }
.tic-logout-link svg { color: var(--fb-red) !important; }

/* Mobile toggle — no `margin-left:auto` here because .tic-user-area
 * already carries it; a second one would try to push the burger past
 * the end of the container and off the viewport. flex-shrink:0 so
 * the burger never compresses to a useless 2-3px sliver. */
.tic-mobile-toggle {
    display: none; flex-direction: column; gap: 5px; padding: 8px;
    background: none; border: none; cursor: pointer;
    flex-shrink: 0;
}
.tic-mobile-toggle span { display: block; width: 20px; height: 2px; background: var(--fb-text); border-radius: 1px; transition: all .2s; }

/* ── 40. SVG Icons (inline helpers) ────────────────────── */
.finboard-icon { display: inline-flex; align-items: center; justify-content: center; }
.finboard-icon svg { width: 1em; height: 1em; }

/* ── 41. Image Upload ──────────────────────────────────── */
.finboard-image-upload {
    border: 2px dashed var(--fb-border-strong);
    border-radius: 10px;
    transition: border-color .18s;
}
.finboard-image-upload--dragover {
    border-color: var(--fb-gold);
    background: var(--fb-gold-dim);
}
.finboard-image-upload__label {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px; cursor: pointer; color: var(--fb-text-muted);
    font-size: 13px; text-align: center; transition: color .18s;
}
.finboard-image-upload__label:hover { color: var(--fb-gold); }
.finboard-image-upload__label svg { color: var(--fb-text-muted); }
.finboard-image-upload__label:hover svg { color: var(--fb-gold); }
.finboard-image-upload__hint { font-size: 11px; color: var(--fb-text-muted); opacity: .7; }
.finboard-image-upload__preview { position: relative; padding: 12px; }
.finboard-image-upload__preview img {
    max-width: 100%; max-height: 200px; border-radius: 8px;
    object-fit: contain; display: block; margin: 0 auto;
}
.finboard-image-upload__remove {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
    border-radius: 50%; background: var(--fb-red); color: #fff;
    border: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: transform .12s;
}
.finboard-image-upload__remove:hover { transform: scale(1.1); }

/* Upload progress overlay (used on avatar, images) */
.finboard-upload-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(0,0,0,.7); border-radius: inherit;
    display: flex; align-items: center; justify-content: center;
}
.finboard-upload-overlay__inner {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.finboard-upload-overlay__text {
    color: #fff; font-size: 12px; font-weight: 600;
}
.finboard-upload-overlay__bar {
    width: 80px; height: 4px; background: rgba(255,255,255,.2);
    border-radius: 4px; overflow: hidden;
}
.finboard-upload-overlay__fill {
    height: 100%; width: 0; background: var(--fb-gold);
    border-radius: 4px; transition: width .15s ease;
}

/* ── 42. Post Image (feed display + inline thumbnails) ─── */
.finboard-post-image {
    display: inline-block; margin-top: 10px; max-height: 400px; overflow: hidden; border-radius: 8px;
}
.finboard-post-image img {
    max-width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px;
    cursor: pointer; transition: opacity .18s;
}
.finboard-post-image img:hover { opacity: .9; }
.finboard-post-image--expanded { max-height: none; }
.finboard-post-image--expanded img { max-height: none; object-fit: contain; }

/* Inline image thumbnails inside post content */
.finboard-comment__content .finboard-post-image {
    display: block; margin: 12px 0; max-width: 480px;
}
.finboard-comment__content .finboard-post-image img {
    width: 100%; height: auto; max-height: 360px; object-fit: contain;
    border: 1px solid var(--fb-border); background: var(--fb-bg);
}
.finboard-comment__content a > .finboard-post-image {
    cursor: pointer;
}

/* Attachment icon in post meta / feed */
.finboard-comment__attachment {
    display: inline-flex; align-items: center; color: var(--fb-gold); opacity: .7;
}
.finboard-status--attachment {
    display: inline-flex; align-items: center; color: var(--fb-gold); font-size: 11px; gap: 2px;
}

/* ── 43. Messages / DM Inbox ───────────────────────────── */
.finboard-messages {
    display: flex; gap: 0; min-height: 500px; border-radius: var(--fb-radius);
    overflow: hidden; background: var(--fb-bg-card); border: 1px solid var(--fb-border);
}
.finboard-convo-list {
    width: 320px; flex-shrink: 0;
    border-right: 1px solid var(--fb-border);
    overflow-y: auto; max-height: 600px;
}
.finboard-convo-list__header {
    padding: 16px; border-bottom: 1px solid var(--fb-border);
    font-size: 16px; font-weight: 700; color: var(--fb-text);
}
.finboard-convo-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    cursor: pointer; transition: background .12s;
    border-bottom: 1px solid var(--fb-border); text-decoration: none;
}
.finboard-convo-item:hover,
.finboard-convo-item--active {
    background: var(--fb-bg-hover);
}
.finboard-convo-item:active { background: var(--fb-bg-raised); }
.finboard-convo-item__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--fb-gold-dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--fb-gold); flex-shrink: 0;
}
.finboard-convo-item__info { flex: 1; min-width: 0; }
.finboard-convo-item__name {
    font-size: 14px; font-weight: 600; color: var(--fb-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finboard-convo-item__preview {
    font-size: 12px; color: var(--fb-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.finboard-convo-item__meta { flex-shrink: 0; text-align: right; }
.finboard-convo-item__time { font-size: 11px; color: var(--fb-text-muted); }
.finboard-convo-item__unread {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--fb-gold); color: #000; font-size: 11px; font-weight: 700;
    padding: 0 5px; margin-top: 4px;
    box-shadow: 0 0 8px rgba(232,169,16,.25);
}

/* Message Thread */
.finboard-msg-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.finboard-msg-thread__header {
    padding: 14px 16px; border-bottom: 1px solid var(--fb-border);
    display: flex; align-items: center; gap: 10px;
}
.finboard-msg-thread__user {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit; flex: 1; min-width: 0;
}
.finboard-msg-thread__user:hover { text-decoration: none; }
.finboard-msg-thread__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--fb-gold-dim); color: var(--fb-gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0; overflow: hidden;
}
.finboard-msg-thread__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.finboard-msg-thread__user-info { display: flex; flex-direction: column; min-width: 0; }
.finboard-msg-thread__name { font-size: 15px; font-weight: 600; color: var(--fb-text); line-height: 1.3; }
.finboard-msg-thread__status { font-size: 11px; color: var(--fb-text-muted); line-height: 1.3; }
.finboard-msg-thread__body {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 8px; max-height: 480px;
}
.finboard-msg-bubble {
    max-width: 75%; padding: 12px 16px; border-radius: 18px;
    font-size: 14px; line-height: 1.5; word-wrap: break-word;
}
.finboard-msg-bubble--sent {
    align-self: flex-end;
    background: var(--fb-gold); color: #000;
    border-bottom-right-radius: 4px;
}
.finboard-msg-bubble--received {
    align-self: flex-start;
    background: var(--fb-bg-raised); color: var(--fb-text);
    border-bottom-left-radius: 4px;
}
.finboard-msg-bubble__time { font-size: 10px; opacity: .6; margin-top: 4px; display: block; }
.finboard-msg-bubble__sender {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-gold);
    margin-bottom: 4px;
}
.finboard-msg-bubble__body { display: block; }

/* Compose Area */
.finboard-msg-compose {
    padding: 12px 16px; border-top: 1px solid var(--fb-border);
    display: flex; gap: 8px; align-items: flex-end;
}
.finboard-msg-compose__input {
    flex: 1; background: var(--fb-bg-input);
    border: 1px solid var(--fb-border); border-radius: 20px;
    padding: 10px 16px; color: var(--fb-text); font-size: 14px;
    resize: none; max-height: 100px; outline: none; font-family: inherit;
    transition: border-color var(--fb-transition);
}
.finboard-msg-compose__input:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.08); }
.finboard-msg-compose__send {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--fb-gold); color: #000; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .12s;
    box-shadow: 0 2px 8px rgba(232,169,16,.2);
}
.finboard-msg-compose__send:hover { transform: scale(1.05); }
.finboard-msg-compose__send:disabled { opacity: .5; cursor: not-allowed; }

/* Date separator */
.finboard-msg-date-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.finboard-msg-date-sep::before,
.finboard-msg-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fb-border);
}
.finboard-msg-date-sep span {
    white-space: nowrap;
}

/* New message slide-up animation */
@keyframes finboard-msgSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.finboard-msg-bubble--new {
    animation: finboard-msgSlideUp 0.2s ease-out;
}
.finboard-msg-bubble--error {
    background: var(--fb-red, #e74c3c) !important;
    opacity: 0.8;
}
.finboard-msg-bubble--error .finboard-msg-bubble__time {
    color: rgba(255,255,255,.8) !important;
    opacity: 1 !important;
}
.finboard-msg-retry {
    display: block;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.finboard-msg-retry:hover { background: rgba(255,255,255,.35); }

/* Chat loading spinner */
.finboard-msg-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 60px 0;
}
.finboard-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--fb-border);
    border-top-color: var(--fb-gold);
    border-radius: 50%;
    animation: finboard-spin 0.7s linear infinite;
}
@keyframes finboard-spin { to { transform: rotate(360deg); } }

/* Empty state */
.finboard-messages__empty {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px; color: var(--fb-text-muted);
    font-size: 14px; text-align: center;
}
.finboard-messages__empty svg { margin-bottom: 12px; opacity: .5; }

/* People You May Know */
.finboard-suggested-users {
    border-top: 1px solid var(--fb-border);
}
.finboard-suggested-users__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fb-text-muted);
}
.finboard-suggested-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background var(--fb-transition);
    border-bottom: 1px solid var(--fb-border);
}
.finboard-suggested-user:last-child { border-bottom: none; }
.finboard-suggested-user:hover { background: var(--fb-bg-hover); }
.finboard-suggested-user__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fb-gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--fb-gold);
    flex-shrink: 0;
    overflow: hidden;
}
.finboard-suggested-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.finboard-suggested-user__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.finboard-suggested-user__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finboard-suggested-user__reason {
    font-size: 11px;
    color: var(--fb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finboard-suggested-user__msg-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--fb-border);
    background: transparent;
    color: var(--fb-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--fb-transition);
}
.finboard-suggested-user__msg-btn:hover {
    background: var(--fb-gold-dim);
    color: var(--fb-gold);
    border-color: var(--fb-border-gold);
}
.finboard-suggested-user__msg-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── 44. Spacing Utilities ─────────────────────────────── */
.finboard-mt-sm { margin-top: 8px; }
.finboard-mt-md { margin-top: 16px; }
.finboard-mt-lg { margin-top: 24px; }
.finboard-mb-sm { margin-bottom: 8px; }
.finboard-mb-md { margin-bottom: 16px; }

/* ── 45. Top Contributor Badge (small variant) ─────────── */
.finboard-badge--xs { font-size: 9px; padding: 1px 5px; }

/* ── 47. Hot Stocks -- Live Prices + Discussion ────────── */
.finboard-stocks { width: 100%; }

/* Search */
.finboard-stocks__search { margin-bottom: 20px; }
.finboard-stocks__search-wrap { position: relative; }
.finboard-stocks__search-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--fb-text-muted); pointer-events: none;
}
.finboard-stocks__search-input {
    width: 100%; padding: 12px 48px 12px 16px;
    background: var(--fb-bg-card); color: var(--fb-text);
    border: 1px solid var(--fb-border); border-radius: var(--fb-radius);
    font-size: 14px; transition: border-color .2s, box-shadow .2s;
}
.finboard-stocks__search-input:focus {
    outline: none; border-color: var(--fb-gold);
    box-shadow: 0 0 0 3px var(--fb-gold-dim);
}
.finboard-stocks__search-input::placeholder { color: var(--fb-text-muted); }
.finboard-stocks__search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: rgba(10,10,15,.96); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm); margin-top: 4px;
    box-shadow: var(--fb-shadow-lg); max-height: 320px; overflow-y: auto;
}
.finboard-stocks__search-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; background: none; border: none; color: var(--fb-text);
    cursor: pointer; font-size: 14px; text-align: left;
    transition: background .15s;
}
.finboard-stocks__search-item:hover { background: var(--fb-bg-hover); }
.finboard-stocks__search-ticker { font-weight: 600; color: var(--fb-gold); min-width: 72px; }
.finboard-stocks__search-name { flex: 1; color: var(--fb-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finboard-stocks__search-market {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    padding: 2px 8px; border-radius: var(--fb-radius-pill);
    background: var(--fb-bg-raised); color: var(--fb-text-muted);
}
/* Comment-count badge on search rows — same gold accent as the
 * trending list so users learn the "this ticker has discussion"
 * cue regardless of whether they spot it in trending or search. */
.finboard-stocks__search-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--fb-radius-pill);
    background: rgba(196,146,10,.12);
    color: var(--fb-gold, #c4920a);
    flex-shrink: 0;
}
.finboard-stocks__search-comments svg { flex-shrink: 0; }
.finboard-stocks__search-empty { padding: 16px; text-align: center; color: var(--fb-text-muted); }

/* Market Movers */
.finboard-stocks__movers {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
.finboard-stocks__movers-col {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius); padding: 16px; overflow: hidden;
}
.finboard-stocks__movers-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--fb-text);
}
.finboard-stocks__movers-title svg { width: 18px; height: 18px; }
.finboard-stocks__movers-title--gain svg { color: var(--fb-green); }
.finboard-stocks__movers-title--lose svg { color: var(--fb-red); }
.finboard-stocks__movers-list { display: flex; flex-direction: column; gap: 4px; }
.finboard-stocks__mover-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: none; border: none; color: var(--fb-text);
    cursor: pointer; border-radius: var(--fb-radius-sm); font-size: 13px;
    transition: background .15s;
}
.finboard-stocks__mover-item:hover { background: var(--fb-bg-hover); }
.finboard-stocks__mover-ticker { font-weight: 600; min-width: 60px; }
.finboard-stocks__mover-price { flex: 1; text-align: right; color: var(--fb-text-muted); }
.finboard-stocks__mover-change { font-weight: 600; min-width: 72px; text-align: right; }
.finboard-stocks__change--up { color: var(--fb-green); }
.finboard-stocks__change--down { color: var(--fb-red); }

/* Trending Discussions */
.finboard-stocks__trending {
    background: var(--fb-bg-card); border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius); padding: 16px; margin-bottom: 24px;
}
.finboard-stocks__section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--fb-text);
}
.finboard-stocks__section-title svg { width: 18px; height: 18px; color: var(--fb-gold); }
.finboard-stocks__trending-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: none; border: none; color: var(--fb-text);
    cursor: pointer; border-radius: var(--fb-radius-sm); width: 100%;
    transition: background .15s;
}
.finboard-stocks__trending-item:hover { background: var(--fb-bg-hover); }
.finboard-stocks__trending-left { display: flex; align-items: center; gap: 10px; }
.finboard-stocks__trending-ticker { font-weight: 700; font-size: 14px; }
.finboard-stocks__trending-right { display: flex; align-items: center; gap: 12px; }
.finboard-stocks__trending-name { color: var(--fb-text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.finboard-stocks__trending-price { color: var(--fb-text-muted); font-size: 13px; }
.finboard-stocks__trending-change { font-weight: 600; font-size: 13px; }
.finboard-stocks__trending-comments { font-size: 12px; color: var(--fb-text-muted); }

/* Enhanced Mover Cards (compact grid) */
.finboard-stocks__movers-grid { display: flex; flex-direction: column; gap: 4px; }
.finboard-stock-mover {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: none; border: none; color: var(--fb-text);
    cursor: pointer; border-radius: var(--fb-radius-sm); width: 100%;
    font-family: var(--fb-font); transition: all var(--fb-transition);
}
.finboard-stock-mover:hover { background: var(--fb-bg-hover); transform: translateX(2px); }
.finboard-stock-mover__info { display: flex; flex-direction: column; gap: 1px; }
.finboard-stock-mover__ticker { font-weight: 700; font-size: 13px; color: var(--fb-text); }
.finboard-stock-mover__name { font-size: 11px; color: var(--fb-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.finboard-stock-mover__data { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.finboard-stock-mover__price { font-size: 13px; color: var(--fb-text); font-weight: 500; }
.finboard-stock-mover__change { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.finboard-stock-mover__change--up { color: var(--fb-green); background: rgba(5,150,105,.1); }
.finboard-stock-mover__change--down { color: var(--fb-red); background: rgba(220,38,38,.1); }

/* Sparkline Chart */
.finboard-stock__sparkline {
    width: 100%; height: 60px; margin: 12px 0 16px;
    border-radius: var(--fb-radius-sm); overflow: hidden;
    background: var(--fb-bg-raised);
}
.finboard-stock__sparkline svg {
    width: 100%; height: 100%; display: block;
}

/* Enhanced Detail Data Grid (2x4) */
.finboard-stock__detail-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--fb-border);
    border-radius: var(--fb-radius-sm); overflow: hidden;
    margin-bottom: 16px;
}
.finboard-stock__metric {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; background: var(--fb-bg-raised);
}
.finboard-stock__metric-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--fb-text-muted); font-weight: 600;
}
.finboard-stock__metric-value {
    font-size: 14px; font-weight: 600; color: var(--fb-text);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .finboard-stock__detail-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sector Badge */
.finboard-stock__sector-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .3px; background: var(--fb-gold-dim); color: var(--fb-gold);
}

/* Pill-style trade buttons */
.finboard-trade-btn--pill {
    border-radius: var(--fb-radius-pill);
    padding: 8px 20px;
    font-size: 13px;
}

/* Loading & Empty */
.finboard-stocks__loading { padding: 20px; text-align: center; color: var(--fb-text-muted); font-size: 13px; }
.finboard-stocks__empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--fb-text-muted);
    font-size: 13px;
    line-height: 1.6;
}
.finboard-stocks__empty-icon {
    display: block;
    margin: 0 auto 12px;
    width: 40px;
    height: 40px;
    opacity: .35;
    color: var(--fb-text-muted);
}
.finboard-stocks__error { padding: 16px; text-align: center; color: var(--fb-red); font-size: 13px; }

/* Ticker Detail Panel */
.finboard-stock-detail {
    position: relative; background: var(--fb-bg-card);
    border: 1px solid var(--fb-border); border-radius: var(--fb-radius);
    padding: 20px; margin-bottom: 20px;
    animation: finboard-fadeIn 200ms ease;
}
.finboard-stock-detail__close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; color: var(--fb-text-muted);
    font-size: 24px; cursor: pointer; line-height: 1; transition: color .15s;
}
.finboard-stock-detail__close:hover { color: var(--fb-text); }

/* Detail Header */
.finboard-stock-detail__header {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
/* The JS renders ticker + name + sector-badge inside a single
 * .__header-top <div>. Without gap / flex, the three inline spans
 * rendered as one smooshed string (e.g. "BTCGrayscale Bitcoin Mini
 * Trust ETFCOMMODITY CONTRACTS BROKERS & DEALERS"). */
.finboard-stock-detail__header-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}
.finboard-stock-detail__ticker { font-size: 22px; font-weight: 800; color: var(--fb-gold); }
.finboard-stock-detail__name {
    font-size: 15px; color: var(--fb-text-muted); font-weight: 400;
    /* Truncate absurdly long names (e.g. "Grayscale Bitcoin Mini
     * Trust ETF") so the sector badge still has room to render on
     * narrow viewports instead of getting pushed off the row. */
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Sector pill: Polygon returns SIC descriptions like
 * "COMMODITY CONTRACTS BROKERS & DEALERS" — render as a small muted
 * pill to the right of the name instead of as inline body text. */
.finboard-stock-detail__sector-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: var(--fb-radius-pill);
    background: var(--fb-bg-raised, rgba(255,255,255,.04));
    color: var(--fb-text-muted, #9ca3af);
    border: 1px solid var(--fb-border, rgba(255,255,255,.06));
    /* Cap length so a 40-char SIC code doesn't blow the header out. */
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    flex-shrink: 0;
}
.finboard-stock-detail__price { font-size: 22px; font-weight: 700; color: var(--fb-text); }
.finboard-stock-detail__change { font-size: 14px; font-weight: 600; }
.finboard-stock-detail__loading { font-size: 13px; color: var(--fb-text-muted); }

/* Price Grid */
.finboard-stock-detail__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; padding: 14px; background: var(--fb-bg-raised);
    border-radius: var(--fb-radius-sm); margin-bottom: 20px;
}
.finboard-stock-detail__stat { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.finboard-stock-detail__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--fb-text-muted); font-weight: 500;
}

/* Trade Affiliate Buttons */
.finboard-stock-detail__trade { display: flex; gap: 12px; margin-bottom: 12px; }
.finboard-trade-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--fb-radius-sm);
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: transform .15s, box-shadow .15s; flex: 1; justify-content: center;
}
.finboard-trade-btn:hover { transform: translateY(-1px); }
.finboard-trade-btn svg { width: 16px; height: 16px; }
.finboard-trade-btn--buy {
    background: var(--fb-green); color: #fff;
    box-shadow: 0 2px 8px rgba(0,212,170,.3);
}
.finboard-trade-btn--buy:hover { box-shadow: 0 4px 16px rgba(0,212,170,.4); color: #fff; }
.finboard-trade-btn--sell {
    background: var(--fb-red); color: #fff;
    box-shadow: 0 2px 8px rgba(255,71,87,.3);
}
.finboard-trade-btn--sell:hover { box-shadow: 0 4px 16px rgba(255,71,87,.4); color: #fff; }
.finboard-stock-detail__disclaimer {
    padding: 10px 14px; margin-bottom: 16px;
    background: rgba(232,169,16,.04); border: 1px solid rgba(232,169,16,.12);
    border-radius: var(--fb-radius-sm); font-size: 11px;
    color: var(--fb-text-muted); line-height: 1.5;
}
.finboard-stock-detail__disclaimer strong { color: var(--fb-gold); }
.finboard-stock-detail__disclaimer a { color: var(--fb-gold); text-decoration: underline; }

/* Discussion Section */
.finboard-stock-detail__discussion { border-top: 1px solid var(--fb-border); padding-top: 16px; }
.finboard-stock-detail__discussion h4 {
    font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--fb-text);
}
.finboard-stock-detail__compose { margin-bottom: 16px; }
.finboard-stocks__textarea {
    width: 100%; padding: 10px 14px; background: var(--fb-bg-input);
    border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm);
    color: var(--fb-text); font-size: 14px; resize: vertical; min-height: 72px;
    font-family: inherit; transition: border-color .2s;
}
.finboard-stocks__textarea:focus {
    outline: none; border-color: var(--fb-gold);
    box-shadow: 0 0 0 3px var(--fb-gold-dim);
}
.finboard-stocks__textarea::placeholder { color: var(--fb-text-muted); }
.finboard-stock-detail__compose-actions {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
.finboard-stock-detail__char-count { font-size: 12px; color: var(--fb-text-muted); }
.finboard-stocks__login-cta {
    padding: 14px; text-align: center; color: var(--fb-text-muted); font-size: 13px;
    background: var(--fb-bg-raised); border-radius: var(--fb-radius-sm);
}
.finboard-stocks__login-cta a { color: var(--fb-gold); text-decoration: underline; }

/* Stock Comment — inherits the card shell from .finboard-comment
 * (display:flex, overflow:hidden, border-radius). The edge-to-edge
 * vote column + no border-bottom is specific to the hot-stocks
 * detail panel where comments stack flush against each other. On
 * news / broker / discourse-topic surfaces we want the canonical
 * card look (border all around, padded body) — so these overrides
 * are scoped to .finboard-stock-detail__comments only. The shared
 * renderer (Finboard_Stocks::render_discourse_stock_post) emits
 * .finboard-stock-comment on every surface, but only the detail
 * panel picks up these overrides.
 *
 * Replies nest under their parent via .finboard-stock-replies; the
 * --reply modifier tightens spacing and font-size. Also scoped to
 * the detail panel so news / broker replies match the canonical
 * thread look. */
.finboard-stock-detail__comments .finboard-stock-comment {
    padding: 0;
    gap: 0;
    border-bottom: none;
}
.finboard-stock-detail__comments .finboard-stock-comment:last-child { border-bottom: none; }

.finboard-stock-replies {
    margin-left: 28px; padding-left: 14px;
    border-left: 2px solid var(--fb-border);
}
.finboard-stock-detail__comments .finboard-stock-comment--reply { padding: 0; font-size: 13px; }
.finboard-stock-detail__comments .finboard-stock-comment--reply .finboard-comment__content { font-size: 13px; }

/* Stock reply form */
.finboard-stock-reply-form {
    margin: 8px 0 4px 0; padding-left: 14px;
    border-left: 2px solid var(--fb-gold);
}
.finboard-stock-reply-form__textarea {
    width: 100%; padding: 8px 12px; background: var(--fb-bg-input);
    border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm);
    color: var(--fb-text); font-size: 13px; resize: vertical; min-height: 56px;
    font-family: inherit; transition: border-color .2s;
}
.finboard-stock-reply-form__textarea:focus { outline: none; border-color: var(--fb-gold); }
.finboard-stock-reply-form__footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px;
}
.finboard-stock-reply-form__footer .finboard-compose__charcount { margin-right: auto; font-size: 11px; }
.finboard-stock-detail__load-more { display: block; width: 100%; margin-top: 12px; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (max-width: 900px) ─────────────────────────── */
@media (max-width: 900px) {
    .finboard-wrap,
    .finboard-layout {
        grid-template-columns: 1fr;
    }
    .finboard-sidebar {
        position: fixed;
        top: 0;
        right: -300px;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: 150;
        background: var(--fb-bg-card);
        border-left: 1px solid var(--fb-border-strong);
        overflow-y: auto;
        padding: 20px;
        transition: right .3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -8px 0 32px rgba(0,0,0,.5);
    }
    .finboard-sidebar.open { right: 0; }
    .finboard-sidebar-toggle { display: flex; }

    /* The off-canvas sidebar lives at right:-300px on mobile which
     * extends the document's scrollable area by ~300px unless we
     * clip it. `overflow-x: clip` on :root avoids creating a scroll
     * container (overflow:hidden would) but still confines fixed-
     * positioned elements to the viewport. Prevents the broker list
     * rendering inside a horizontally-scrollable body on Pixel 7 /
     * other narrow mobile viewports. */
    html, body { overflow-x: clip; }

    .finboard-broker__hero { flex-direction: column; text-align: center; }
    .finboard-broker-page__hero-inner { flex-direction: column; text-align: center; }
    .finboard-broker-page__hero-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .finboard-broker-page__layout { grid-template-columns: 1fr; }
    .finboard-broker-page__sidebar { position: static; }
    .finboard-profile__header { flex-direction: column; text-align: center; }
    .finboard-profile__meta-row { justify-content: center; }
    .finboard-profile__stats { justify-content: center; }
    .finboard-news-card__image { width: 80px; height: 60px; }

    /* Header — compact on tablet/mobile */
    .tic-ctas-desktop { display: none; }
    .tic-user-area .tic-btn-login,
    .tic-user-area .tic-btn-join { display: none; }
    .tic-notif-dropdown { right: 0; width: 300px; }

    /* Mobile nav */
    .tic-nav {
        display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
        background: var(--fb-bg-card); z-index: 210; flex-direction: column;
        overflow-y: auto; padding: 16px;
    }
    .tic-nav--open { display: flex; }
    .tic-nav > ul { flex-direction: column; gap: 0; }
    .tic-nav > ul > li > a { padding: 12px 0; font-size: 15px; }
    .tic-dropdown {
        position: static; display: none; box-shadow: none; border: none;
        background: transparent; padding: 0 0 0 16px; min-width: 0;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .tic-dropdown-open > .tic-dropdown { display: block; }
    .tic-dropdown li a { padding: 8px 0; }
    .tic-mobile-toggle { display: flex; }
    .tic-ctas-mobile {
        display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
        padding-top: 16px; border-top: 1px solid var(--fb-border);
    }
    .tic-ctas-mobile .tic-btn { width: 100%; justify-content: center; padding: 10px 16px; font-size: 14px; }
    .tic-btn-create span { display: none; }
    .tic-btn-create { padding: 6px; width: 36px; height: 36px; justify-content: center; border-radius: 50%; }

    /* Mobile header fit — the logo + compact user icons + burger all
     * need to land inside 375px (iPhone SE) without the burger
     * falling off the edge. CCM-Templator's Menu-V2.css pins
     * .tic-logo / .tic-logo img to 180px via !important; we override
     * with .tic-header .tic-logo (0,2,0) which wins on specificity
     * regardless of !important order. Only height is set — width
     * flows from the image's intrinsic 768×251 aspect ratio. No
     * width/max-width caps so nothing fights the image's natural
     * size; browser picks the right proportional width. */
    .tic-header { overflow-x: clip; }
    .tic-header .tic-header-inner { padding: 0 10px !important; gap: 6px !important; }
    .tic-header .tic-logo img {
        height: 45px !important;
        width: auto !important;      /* undo CCM's width:180px !important so aspect ratio holds */
        max-width: none !important;  /* undo CCM's max-width:180px !important */
    }
    .tic-header .tic-user-area { gap: 2px !important; min-width: 0; flex-shrink: 1; }
    .tic-header .tic-user-area .tic-btn,
    .tic-header .tic-user-area .tic-notif-bell,
    .tic-header .tic-user-area .tic-msg-link { padding: 6px !important; }
    .tic-header .tic-mobile-toggle { margin-left: 0 !important; flex-shrink: 0 !important; padding: 6px !important; }
}

/* Very narrow viewports (iPhone SE @ 375) — hide the create (+) and
 * messages icons from the user-area so logo + bell + avatar + burger
 * fit without overflow. Create / messages stay one tap away via the
 * drawer's Community nav that opens from the burger. */
@media (max-width: 420px) {
    .tic-header .tic-user-area .tic-btn-create,
    .tic-header .tic-user-area .tic-msg-link { display: none !important; }
}

/* ── Mobile (max-width: 768px) — Messages ──────────────── */
@media (max-width: 768px) {
    .finboard-messages {
        flex-direction: column; min-height: auto;
    }
    .finboard-convo-list {
        width: 100%; border-right: none;
        border-bottom: 1px solid var(--fb-border); max-height: none;
    }
    .finboard-convo-list--hidden { display: none; }
    .finboard-msg-thread--hidden,
    .finboard-msg-thread--hidden-mobile { display: none; }
    .finboard-msg-thread__back { display: inline-flex; }
    .finboard-msg-thread__body { max-height: 60vh; }
}
@media (min-width: 769px) {
    .finboard-msg-thread__back { display: none; }
}

/* ── Mobile (max-width: 640px) ─────────────────────────── */
@media (max-width: 640px) {
    .finboard-community-tab span { display: none; }
    .finboard-community-tab { padding: 10px 12px; }

    .finboard-post-title { font-size: 14px; }
    .finboard-post-preview { display: none; }
    .finboard-post-votes,
    .finboard-comment__vote { min-width: 40px; padding: 8px 4px; }
    .finboard-post-like-btn { width: 26px; height: 24px; }
    .finboard-post-like-btn svg { width: 14px; height: 14px; }
    .finboard-post-votes__answers { font-size: 9px; }
    .finboard-vote-btn { min-width: 44px; min-height: 44px; width: auto; height: auto; }

    .finboard-join-banner { flex-direction: column; text-align: center; }
    .finboard-join-banner__btn { width: 100%; text-align: center; }

    .finboard-notif-dropdown { width: 100%; right: 0; left: 0; border-radius: 0; }

    .finboard-msg-panel { width: 100%; right: -100%; }

    .finboard-broker-rating__aggregate { flex-direction: column; text-align: center; }
    .finboard-broker-rating__subcategories { grid-template-columns: 1fr; }
    .finboard-rating-categories { grid-template-columns: 1fr 1fr; }
    .finboard-news-card__image { display: none; }
    .finboard-news-card__body { flex-direction: column; }

    /* Hot Stocks responsive */
    .finboard-stocks__movers { grid-template-columns: 1fr; }
    .finboard-stock-detail__header { flex-direction: column; gap: 4px; }
    .finboard-stock-detail__grid { grid-template-columns: 1fr 1fr; }
    .finboard-stock-detail__trade { flex-direction: column; }

    /* Money-page embed responsive */
    .rp-community-rating-bar {
        flex-wrap: wrap; gap: 4px; padding: 6px 12px; font-size: 12px;
    }
    .rp-community-rating-bar .finboard-broker-stars { font-size: 12px; }
    .rp-community-rating-bar .finboard-broker-stars__stars { font-size: 14px; }
    .finboard-page-discussion-section .finboard-thread { padding: 14px; }
    .finboard-page-discussion-section .finboard-compose { padding: 12px; }
    .finboard-page-discussion-intro h2 { font-size: 18px; }
    .finboard-page-discussion-intro p { font-size: 13px; }

    /* Review nav — tablet */
    .finboard-review-nav { padding: 8px 10px; gap: 4px; }
    .finboard-review-nav__link { padding: 4px 10px; font-size: 11px; }

    /* Broker summary — tablet */
    .finboard-broker-summary { padding: 20px; }
    .finboard-broker-summary__score-number { font-size: 34px; }
    .finboard-broker-summary__cat { grid-template-columns: 110px 1fr 28px; gap: 8px; }
    .finboard-broker-summary__review-top { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Small Mobile (max-width: 480px) ───────────────────── */
@media (max-width: 480px) {
    .finboard-post-actions { flex-wrap: wrap; }
    /* Mobile canonical action-button style — kept in lockstep across the
       two class names so Save / Share / Report / kebab look identical on
       feed, topic-detail, news-comment, and hotstocks surfaces. Bumps
       height from desktop 28px to 32px for tap-target compliance. */
    .finboard-post-action,
    .finboard-action-btn,
    .finboard-dc-bookmark-btn,
    .finboard-thread-bookmark-btn {
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 10px;
        gap: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .finboard-post-action svg,
    .finboard-action-btn svg,
    .finboard-dc-bookmark-btn svg,
    .finboard-thread-bookmark-btn svg { width: 13px; height: 13px; display: block; }
    .finboard-feed-controls { flex-wrap: wrap; }
    .finboard-sort-tabs { flex-wrap: wrap; }

    .finboard-quiz__topics { grid-template-columns: 1fr; }
    .finboard-quiz__difficulties { flex-direction: column; align-items: stretch; }

    .finboard-comment__actions { gap: 1px; }

    .finboard-broker-rating__review { flex-direction: column; }
    .finboard-broker-rating__review-vote { flex-direction: row; gap: 8px; }

    .finboard-auth-card { padding: 20px; }

    /* Rating bar — mobile */
    .rp-community-rating-bar { flex-direction: column; align-items: flex-start; }
    .finboard-page-discussion-section .finboard-thread { padding: 10px; border-radius: 8px; }

    /* Broker summary — mobile */
    .finboard-broker-summary { padding: 16px; border-radius: 10px; }
    .finboard-broker-summary__overall { flex-direction: column; align-items: flex-start; gap: 10px; }
    .finboard-broker-summary__score-number { font-size: 36px; }
    .finboard-broker-summary__cat { grid-template-columns: 1fr 32px; gap: 6px; }
    .finboard-broker-summary__cat-label { grid-column: 1 / -1; margin-bottom: -4px; }
    .finboard-broker-summary__actions { flex-direction: column; }

    /* Review nav — mobile */
    .finboard-review-nav { padding: 8px; border-radius: 8px; gap: 3px; }
    .finboard-review-nav__link { padding: 4px 8px; font-size: 10px; }
    .finboard-review-nav__link-badge { font-size: 9px; padding: 1px 4px; }
    .finboard-review-nav__link-count { font-size: 9px; padding: 1px 5px; }
    .finboard-review-nav__link--discussion svg { width: 12px; height: 12px; }
}

/* ── Print ─────────────────────────────────────────────── */
/* ── Legal Pages ── */
.finboard-legal {
    color: var(--fb-text);
    line-height: 1.7;
    padding: 0 4px;
}
.finboard-legal__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--fb-gold);
    margin: 0 0 4px;
}
.finboard-legal__updated {
    font-size: 13px;
    color: var(--fb-text-muted);
    margin: 0 0 20px;
}
.finboard-legal h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--fb-text);
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-legal p {
    margin: 0 0 12px;
    font-size: 14px;
}
.finboard-legal ul {
    margin: 0 0 14px;
    padding-left: 20px;
}
.finboard-legal li {
    font-size: 14px;
    margin-bottom: 4px;
}
.finboard-legal a {
    color: var(--fb-gold);
    text-decoration: underline;
}
.finboard-legal a:hover {
    color: #ffe066;
}
.finboard-legal__table-wrap {
    overflow-x: auto;
    margin: 0 0 16px;
}
.finboard-legal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.finboard-legal__table th,
.finboard-legal__table td {
    padding: 8px 10px;
    text-align: left;
    border: 1px solid var(--fb-border);
}
.finboard-legal__table th {
    background: var(--fb-bg-raised);
    font-weight: 600;
    color: var(--fb-text);
}
.finboard-legal__table td {
    color: var(--fb-text-muted);
}

@media print {
    .finboard-sidebar,
    .finboard-sidebar-toggle,
    .finboard-sidebar-overlay,
    .finboard-msg-panel,
    .finboard-msg-overlay,
    .finboard-notif-dropdown,
    .finboard-notif-bell,
    .finboard-toast { display: none !important; }
}


/* ================================================================
 * LIGHT MODE — Component-Specific Overrides (Sections 11+)
 * ================================================================ */

/* ── Light: Auth pages ────────────────────────────────────────── */
[data-finboard-theme="light"] .finboard-auth-shell {
    background: #f8f9fb !important;
}
[data-finboard-theme="light"] .finboard-auth-shell::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(196,146,10,.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 100%, rgba(196,146,10,.02) 0%, transparent 60%);
}
[data-finboard-theme="light"] .finboard-auth-shell__card {
    box-shadow: 0 8px 32px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
[data-finboard-theme="light"] .finboard-auth-shell__logo-img {
    filter: invert(1) drop-shadow(0 0 20px rgba(196,146,10,.08));
}
[data-finboard-theme="light"] .finboard-auth-field input:-webkit-autofill,
[data-finboard-theme="light"] .finboard-auth-field input:-webkit-autofill:hover,
[data-finboard-theme="light"] .finboard-auth-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1a1d25 !important;
    caret-color: #1a1d25 !important;
}

/* ── Light: Vote columns ──────────────────────────────────────── */
[data-finboard-theme="light"] .finboard-comment__vote {
    background: rgba(0,0,0,.02);
}
[data-finboard-theme="light"] .finboard-vote-btn:hover {
    background: rgba(0,0,0,.05);
}

/* ── Light: Replies border ────────────────────────────────────── */
[data-finboard-theme="light"] .finboard-replies {
    border-left-color: rgba(196,146,10,.12);
}

/* ── Light: Toast notifications ───────────────────────────────── */
[data-finboard-theme="light"] .finboard-toast {
    background: #ffffff;
    color: #1a1d25;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
[data-finboard-theme="light"] .finboard-toast--success {
    background: #f0fdf4;
    border-color: rgba(5,150,105,.2);
    color: #166534;
}
[data-finboard-theme="light"] .finboard-toast--error {
    background: #fef2f2;
    border-color: rgba(220,38,38,.2);
    color: #991b1b;
}

/* ── Light: Notification dropdown ─────────────────────────────── */
[data-finboard-theme="light"] .finboard-notif-bell {
    background: #f1f3f7;
    border-color: rgba(0,0,0,.08);
    color: #4a5068;
}
[data-finboard-theme="light"] .finboard-notif-bell:hover {
    background: #e8ebf0;
    color: #c4920a;
    border-color: rgba(196,146,10,.2);
}
[data-finboard-theme="light"] .finboard-notif-dropdown {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    color: #1a1d25;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
[data-finboard-theme="light"] .finboard-notif-dropdown__header {
    color: #1a1d25;
    border-bottom-color: rgba(0,0,0,.08);
}
[data-finboard-theme="light"] .finboard-notif-dropdown__mark-all {
    color: #c4920a;
}
[data-finboard-theme="light"] .finboard-notif-dropdown__mark-all:hover {
    background: rgba(196,146,10,.08);
}
[data-finboard-theme="light"] .finboard-notif-dropdown__item {
    border-bottom-color: rgba(0,0,0,.06);
}
[data-finboard-theme="light"] .finboard-notif-dropdown__item:hover {
    background: #f3f4f6;
}
[data-finboard-theme="light"] .finboard-notif-dropdown__item--unread {
    background: rgba(196,146,10,.06);
}
[data-finboard-theme="light"] .finboard-notif-dropdown__icon {
    background: #f3f4f6;
    border-color: rgba(0,0,0,.08);
    color: #4a5068;
}
[data-finboard-theme="light"] .finboard-notif-dropdown__msg {
    color: #4a5068;
}
[data-finboard-theme="light"] .finboard-notif-dropdown__msg strong {
    color: #1a1d25;
}
[data-finboard-theme="light"] .finboard-notif-dropdown__time {
    color: #6b7388;
}
[data-finboard-theme="light"] .finboard-notif-dropdown__empty {
    color: #6b7388;
}

/* ── Light: Profile avatar ring ───────────────────────────────── */
[data-finboard-theme="light"] .finboard-profile__avatar {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(196,146,10,.12);
}

/* ── Light: Pinned answers ────────────────────────────────────── */
[data-finboard-theme="light"] .finboard-comment--pinned {
    background: linear-gradient(135deg, rgba(196,146,10,.03), rgba(196,146,10,.01));
}

/* ── Light: Quiz option hover ─────────────────────────────────── */
[data-finboard-theme="light"] .finboard-quiz__option-btn:hover {
    background: var(--fb-bg-raised);
}

/* ── Light: Broker list items ─────────────────────────────────── */
[data-finboard-theme="light"] .finboard-broker-list-item:hover {
    background: var(--fb-bg-raised);
}

/* ── Light: Message bubbles ───────────────────────────────────── */
[data-finboard-theme="light"] .finboard-msg-bubble--self {
    background: rgba(196,146,10,.06);
}

/* ── Light: DM thread ───────────────────────────────────────── */
[data-finboard-theme="light"] .finboard-messages {
    background: #fff;
    border-color: rgba(0,0,0,.1);
}
[data-finboard-theme="light"] .finboard-convo-list {
    border-right-color: rgba(0,0,0,.08);
}
[data-finboard-theme="light"] .finboard-convo-item:hover,
[data-finboard-theme="light"] .finboard-convo-item--active {
    background: rgba(0,0,0,.03);
}
[data-finboard-theme="light"] .finboard-msg-bubble--received {
    background: #f3f4f6;
    color: #1a1d25;
}
[data-finboard-theme="light"] .finboard-msg-bubble--sent {
    background: #c4920a;
    color: #fff;
}
[data-finboard-theme="light"] .finboard-msg-compose__input {
    background: #fff;
    border-color: rgba(0,0,0,.12);
    color: #1a1d25;
}
[data-finboard-theme="light"] .finboard-convo-item__avatar {
    background: rgba(196,146,10,.08);
}

/* ── Light: Avatar shadow ─────────────────────────────────────── */
[data-finboard-theme="light"] .finboard-avatar {
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}

/* ── Light: Secondary & ghost button bg ───────────────────────── */
[data-finboard-theme="light"] .finboard-btn--secondary:hover {
    background: rgba(0,0,0,.03);
}
[data-finboard-theme="light"] .finboard-btn--ghost:hover {
    background: var(--fb-bg-raised);
}
[data-finboard-theme="light"] .finboard-sidebar-action--ghost:hover {
    background: rgba(0,0,0,.02);
}

/* ── Display font on key headings (Sections 11+) ─────────────── */
.finboard-community__title,
.finboard-community__section-title,
.finboard h1,
.finboard h2 { font-family: var(--fb-font-display); }
.finboard-auth-card h2 { font-family: var(--fb-font-display); }
.finboard-profile__name { font-family: var(--fb-font-display); }
.finboard-broker__name { font-family: var(--fb-font-display); }
.finboard-question__title { font-family: var(--fb-font-display); }
.finboard-question__answers-title { font-family: var(--fb-font-display); }
.finboard-sidebar-card h2 { font-family: var(--fb-font-display); }
.finboard-thread__title { font-family: var(--fb-font-display); }
.finboard-profile__section h3 { font-family: var(--fb-font-display); }
.finboard-broker-rating h3 { font-family: var(--fb-font-display); }
.finboard-rating-form h3 { font-family: var(--fb-font-display); }
.finboard-quiz__header h1,
.finboard-quiz__header h2 { font-family: var(--fb-font-display); }
.finboard-legal__title { font-family: var(--fb-font-display); }
.finboard-news__header h1,
.finboard-news__header h2 { font-family: var(--fb-font-display); }

/* ── Staggered card entrance animation ────────────────────────── */
.finboard-post-card {
    animation: finboard-fadeIn 0.3s ease both;
}
.finboard-post-card:nth-child(2) { animation-delay: 0.04s; }
.finboard-post-card:nth-child(3) { animation-delay: 0.08s; }
.finboard-post-card:nth-child(4) { animation-delay: 0.12s; }
.finboard-post-card:nth-child(5) { animation-delay: 0.16s; }

/* ── Theme toggle icon swap ───────────────────────────────────── */
/* Light mode (default): show moon icon (click to go dark) */
.finboard-theme-toggle .finboard-icon-moon { display: block; }
.finboard-theme-toggle .finboard-icon-sun { display: none; }
/* Dark mode: show sun icon (click to go light) */
[data-finboard-theme="dark"] .finboard-theme-toggle .finboard-icon-sun { display: block; }
[data-finboard-theme="dark"] .finboard-theme-toggle .finboard-icon-moon { display: none; }

/* ── Staff Badge ──────────────────────────────────────────────── */
.finboard-badge--staff {
    background: rgba(59,130,246,.12);
    color: #93c5fd;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--fb-radius-pill);
    font-weight: 600;
}
[data-finboard-theme="light"] .finboard-badge--staff,
.finboard-badge--staff {
    background: rgba(59,130,246,.08);
    color: #2563eb;
}
[data-finboard-theme="dark"] .finboard-badge--staff {
    background: rgba(59,130,246,.12);
    color: #93c5fd;
}

/* ── "Have Your Say" CTA heading ─────────────────────────────── */
.finboard-broker-rating__cta-heading {
    text-align: center;
    padding: 24px 16px 16px;
}
.finboard-broker-rating__cta-heading h3 {
    font-family: var(--fb-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--fb-text);
    margin: 0 0 6px;
}
.finboard-broker-rating__cta-heading p {
    color: var(--fb-text-muted);
    font-size: 14px;
    margin: 0;
}

/* ── Messaging conversation avatar images ────────────────────── */
.finboard-convo-item__avatar img.finboard-convo-avatar-img,
img.finboard-convo-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
 * UX DELIGHT PACKAGE — Cathedral Build Step 14
 * ═══════════════════════════════════════════════════════════ */

/* ── 1. Equity Animation (+1/-1 float) ───────────────────── */
.finboard-equity-anim {
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    z-index: 100;
    animation: finboard-equity-float 1.5s ease-out forwards;
}
.finboard-equity-anim--up   { color: var(--fb-gold); }
.finboard-equity-anim--down { color: var(--fb-red); }

@keyframes finboard-equity-float {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* Accessible announce region for equity changes. */
.finboard-equity-live[aria-live] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ── 2. Skeleton Loading ─────────────────────────────────── */
.finboard-skeleton {
    background: var(--fb-bg-inset);
    border-radius: var(--fb-radius-sm, 8px);
    animation: finboard-shimmer 1.5s linear infinite;
    position: relative;
    overflow: hidden;
}
.finboard-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    animation: finboard-shimmer-slide 1.5s linear infinite;
}
.finboard-skeleton--text  { height: 14px; width: 80%; margin-bottom: 8px; border-radius: 4px; }
.finboard-skeleton--title { height: 20px; width: 60%; margin-bottom: 12px; }
.finboard-skeleton--avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.finboard-skeleton--card {
    height: 100px;
    margin-bottom: 12px;
    border-radius: var(--fb-radius-md, 14px);
}

@keyframes finboard-shimmer-slide {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* Container-level aria-busy styling. */
[aria-busy="true"] .finboard-skeleton { display: block; }
[aria-busy="false"] .finboard-skeleton { display: none; }

/* ── Leaderboard skeleton rows ─────────────────────────────── */
.finboard-skeleton--leaderboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}
.finboard-skeleton-row {
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: finboard-skeleton-shimmer 1.4s linear infinite;
}
.finboard-skeleton-row:nth-child(1) { width: 90%; }
.finboard-skeleton-row:nth-child(2) { width: 75%; }
.finboard-skeleton-row:nth-child(3) { width: 85%; }
.finboard-skeleton-row:nth-child(4) { width: 70%; }
.finboard-skeleton-row:nth-child(5) { width: 80%; }
@keyframes finboard-skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.finboard-skeleton-timeout {
    margin-top: 12px;
    font-size: 13px;
    color: var(--fb-text-muted, #9ca3af);
}
.finboard-skeleton-timeout a {
    color: var(--fb-gold, #E8A910);
    text-decoration: underline;
}

/* ── 3. Stale Content Banner ─────────────────────────────── */
.finboard-stale-banner {
    background: var(--fb-gold);
    color: var(--fb-bg);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--fb-radius-sm, 8px);
    margin-bottom: 12px;
}
.finboard-stale-banner__dismiss {
    background: none;
    border: none;
    color: var(--fb-bg);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    opacity: .7;
}
.finboard-stale-banner__dismiss:hover { opacity: 1; }

/* ── 4. Active Dots (online status) ──────────────────────── */
.finboard-active-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fb-green);
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}
.finboard-active-dot--online {
    background: var(--fb-green);
    animation: finboard-pulse-dot 1.5s ease-in-out infinite;
}
.finboard-active-dot--recent { background: var(--fb-text-muted); }
.finboard-active-dot--offline { display: none; }

@keyframes finboard-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .6; transform: scale(1.2); }
}

/* ── 5. Markdown Preview ─────────────────────────────────── */
.finboard-md-preview {
    padding: 12px 16px;
    background: var(--fb-bg-inset);
    border-radius: var(--fb-radius-sm, 8px);
    border: 1px solid var(--fb-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fb-text-secondary);
    min-height: 48px;
    max-height: 300px;
    overflow-y: auto;
}
.finboard-md-preview:empty::before {
    content: 'Preview appears here';
    color: var(--fb-text-muted);
    font-style: italic;
}
.finboard-md-preview h1, .finboard-md-preview h2, .finboard-md-preview h3 {
    color: var(--fb-text);
    margin: 8px 0 4px;
}
.finboard-md-preview code {
    background: var(--fb-bg-hover);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.finboard-md-preview blockquote {
    border-left: 3px solid var(--fb-gold);
    margin: 8px 0;
    padding-left: 12px;
    color: var(--fb-text-secondary);
}

/* ── 6. Bookmark Button — legacy class, still used inside feed action rows.
 *      Inherits the canonical .finboard-post-action size + shape so it
 *      stays in lockstep with Share / Report / Reply (was previously a
 *      44px tap target on feed cards which read as "full-height",
 *      inconsistent with the 28px pills around it). Only the colour
 *      treatment (gold on active/hover) is bookmark-specific. */
.finboard-bookmark-btn:hover,
.finboard-bookmark-btn--active {
    color: var(--fb-gold);
}
.finboard-bookmark-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}

/* ── 7. Welcome Tour Overlay ─────────────────────────────── */
.finboard-tour-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.finboard-tour-card {
    background: var(--fb-bg-raised);
    border-radius: var(--fb-radius-md, 14px);
    padding: 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--fb-neu-out), 0 0 40px rgba(232,169,16,.1);
    text-align: center;
}
.finboard-tour-card h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--fb-gold);
    margin: 0 0 12px;
}
.finboard-tour-card p {
    color: var(--fb-text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.finboard-tour-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.finboard-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fb-text-muted);
}
.finboard-tour-dot--active {
    background: var(--fb-gold);
}
.finboard-tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.finboard-tour-skip {
    color: var(--fb-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
}
.finboard-tour-skip:hover { color: var(--fb-text-secondary); }
.finboard-tour-next {
    background: var(--fb-gold);
    color: var(--fb-bg);
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.finboard-tour-next:hover { background: var(--fb-gold-hover); }

/* ── 8. Broker Comparison ────────────────────────────────── */
.finboard-broker-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.finboard-broker-compare__col {
    background: var(--fb-bg-raised);
    border-radius: var(--fb-radius-md, 14px);
    padding: 20px;
    box-shadow: var(--fb-neu-out);
}
.finboard-broker-compare__col h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--fb-text);
    margin: 0 0 16px;
}
.finboard-compare-bar {
    margin-bottom: 10px;
}
.finboard-compare-bar__label {
    font-size: 12px;
    color: var(--fb-text-secondary);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}
.finboard-compare-bar__track {
    height: 8px;
    background: var(--fb-bg-inset);
    border-radius: 4px;
    overflow: hidden;
}
.finboard-compare-bar__fill {
    height: 100%;
    background: var(--fb-gold);
    border-radius: 4px;
    transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 9. Toast Notification — see primary block above (section 24) ── */

/* ── Vote button accessibility (44px min touch target) ──── */
.finboard-vote-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Similar Questions Suggestions ───────────────────────── */
.finboard-similar-questions {
    margin-top: 8px;
    padding: 12px;
    background: var(--fb-bg-inset);
    border-radius: var(--fb-radius-sm, 8px);
    border: 1px solid var(--fb-border);
}
.finboard-similar-questions__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.finboard-similar-questions__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.finboard-similar-questions__item {
    padding: 6px 0;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-similar-questions__item:last-child { border-bottom: none; }
.finboard-similar-questions__item a {
    color: var(--fb-gold);
    text-decoration: none;
    font-size: 14px;
}
.finboard-similar-questions__item a:hover {
    text-decoration: underline;
}
.finboard-similar-questions__empty {
    color: var(--fb-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* ── Mobile responsive for UX delight components ─────────── */
@media (max-width: 640px) {
    .finboard-tour-card {
        padding: 24px;
        max-width: 95%;
    }
    .finboard-broker-compare {
        grid-template-columns: 1fr;
    }
    .finboard-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
 * 9. Broker Comparison Modal
 * ═══════════════════════════════════════════════════════════ */
#finboard-compare-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    padding: 24px;
}
/* Every direct child of the modal is content INSIDE the card shell, so
 * we wrap all of them in a single .finboard-compare__shell div (set by
 * the JS builder). That shell is the one that gets sized / scrolled;
 * previously each top-level sibling was styled as its own card, which
 * meant the header, swipe hint and table-wrap all fought for the
 * 720×80vh slot and rendered stacked in the footer. */
.finboard-compare__shell {
    background: var(--fb-bg, #1a1e28);
    border: 1px solid var(--fb-border-strong, rgba(255,255,255,.08));
    border-radius: var(--fb-radius-md, 12px);
    max-width: 720px;
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.finboard-compare__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.finboard-compare__header h3 {
    font-family: var(--fb-font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--fb-text, #e8ecf4);
    margin: 0;
}
.finboard-compare__close {
    background: none;
    border: none;
    color: var(--fb-text-muted, #5e6578);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.finboard-compare__close:hover { color: var(--fb-text, #e8ecf4); }

.finboard-compare__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.finboard-compare__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fb-text-secondary, #9ca3b4);
}
.finboard-compare__legend-item small {
    color: var(--fb-text-muted, #5e6578);
}
.finboard-compare__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.finboard-compare__category {
    margin-bottom: 16px;
}
.finboard-compare__cat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fb-text-muted, #5e6578);
    margin-bottom: 8px;
}
.finboard-compare__bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.finboard-compare__bar-name {
    font-size: 12px;
    color: var(--fb-text-secondary, #9ca3b4);
    min-width: 90px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.finboard-compare__bar-track {
    flex: 1;
    height: 20px;
    background: var(--fb-bg-inset, #151822);
    border-radius: var(--fb-radius-sm, 8px);
    overflow: hidden;
}
.finboard-compare__bar-fill {
    height: 100%;
    border-radius: var(--fb-radius-sm, 8px);
    transition: width 0.5s ease;
}
.finboard-compare__bar-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--fb-text, #e8ecf4);
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.finboard-compare__empty {
    text-align: center;
    padding: 32px;
    color: var(--fb-text-muted, #5e6578);
}

/* Compare button on broker list — floats bottom-right as a pill.
 * position: fixed (not sticky) so it's pinned to the VIEWPORT rather
 * than its containing block; on mobile, a sticky button gets lost
 * below the fold until the user scrolls to the end of the list,
 * defeating the whole point of the affordance.
 * Doubled #id for specificity and !important on colour so
 * reset.css's #c36 leak can't paint it red on hover/focus. */
#finboard-compare-btn,
#finboard-compare-btn#finboard-compare-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 250;
    background: var(--fb-gold, #c4920a) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border: none !important;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(196,146,10,.32), 0 2px 6px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .15s ease;
}
#finboard-compare-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}
#finboard-compare-btn:disabled {
    opacity: 0;
    pointer-events: none;
    cursor: not-allowed;
    transform: translateY(20px);
}
#finboard-compare-btn:not(:disabled) {
    opacity: 1;
    transform: translateY(0);
}
#finboard-compare-btn:hover:not(:disabled),
#finboard-compare-btn:focus:not(:disabled),
#finboard-compare-btn:focus-visible:not(:disabled) {
    background: var(--fb-gold-hover, #d9a00e) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(196,146,10,.42), 0 3px 8px rgba(0,0,0,.1);
}

/* Comparison checkbox + wrapper layout */
.finboard-broker-list-item-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 8px;
}
.finboard-broker-list-item-wrap .finboard-broker-list-item {
    flex: 1;
    min-width: 0;
}
/* Checkbox cell — wider tap target, clearer "selected" state with
 * a tiny gold checkmark badge in the corner so users can see at a
 * glance which brokers are queued for comparison. */
.finboard-compare-check-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--fb-bg-raised, #f1f3f7);
    border: 1px solid var(--fb-border, rgba(0,0,0,.08));
    border-right: none;
    border-radius: var(--fb-radius-sm, 8px) 0 0 var(--fb-radius-sm, 8px);
    transition: background .15s ease, border-color .15s ease;
    position: relative;
}
.finboard-compare-check-label:hover {
    background: var(--fb-bg-hover, rgba(196,146,10,.04));
    border-color: var(--fb-gold, #c4920a);
}
.finboard-compare-check-label:has(:checked) {
    background: rgba(196, 146, 10, 0.12);
    border-color: var(--fb-gold, #c4920a);
    box-shadow: inset 3px 0 0 var(--fb-gold, #c4920a);
}
/* Custom checkbox: hide the native input chrome, render a clear
 * box / check ourselves so it's consistent across browsers and
 * matches the brand. accent-color was inconsistent across themes. */
.finboard-compare-check {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid var(--fb-border-strong, rgba(0,0,0,.2));
    border-radius: 5px;
    display: grid;
    place-items: center;
    transition: background .15s ease, border-color .15s ease;
    position: relative;
}
.finboard-compare-check:hover {
    border-color: var(--fb-gold, #c4920a);
}
.finboard-compare-check:focus-visible {
    outline: 2px solid var(--fb-gold, #c4920a);
    outline-offset: 2px;
}
.finboard-compare-check:checked {
    background: var(--fb-gold, #c4920a);
    border-color: var(--fb-gold, #c4920a);
}
.finboard-compare-check:checked::after {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
/* When label is present, card loses left border-radius */
.finboard-broker-list-item-wrap .finboard-card.finboard-broker-list-item {
    border-radius: 0 var(--fb-radius-sm, 8px) var(--fb-radius-sm, 8px) 0;
    /* The wrap owns vertical spacing via its own margin-bottom — strip
     * the card's own margin-bottom so it doesn't inflate the flex-
     * container's stretched height and leave the checkbox label
     * hanging 10px below the card. */
    margin-bottom: 0;
}

@media (max-width: 600px) {
    #finboard-compare-modal > * {
        padding: 16px;
        max-height: 92vh;
    }
    .finboard-compare__bar-name {
        min-width: 60px;
        font-size: 11px;
    }
}

/* Modal header: pinned at the top of the shell with a bottom border;
 * scroll region sits beneath so the header / X stay visible while
 * the comparison table scrolls. */
.finboard-compare__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fb-border, rgba(0,0,0,.08));
    background: var(--fb-bg, #f8f9fb);
    margin-bottom: 0;
    flex-shrink: 0;
}
.finboard-compare-table-wrap {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Comparison Table Layout ─────────────────────────────────
 * Desktop: standard grid of N columns shrinking to fit.
 * Mobile: table becomes a horizontally-scrollable strip with
 * a fixed first column ("Category") so the labels stay anchored
 * while the broker columns scroll under the user's thumb. A
 * pulsing 'Swipe →' affordance fades out after the first scroll
 * (handled JS-side) so users see immediately that this is
 * scrollable rather than truncated. */
.finboard-compare-table { width: 100%; border-collapse: separate; }
.finboard-compare-table__header .finboard-compare-table__cell {
    background: var(--fb-bg-raised);
    font-weight: 700;
}
.finboard-compare-table__row {
    display: grid; gap: 1px; background: var(--fb-border);
    border-radius: var(--fb-radius-sm); overflow: hidden; margin-bottom: 1px;
}
.finboard-compare-table__cell {
    padding: 12px 16px; background: var(--fb-bg-card);
    display: flex; flex-direction: column; gap: 4px;
}
.finboard-compare-table__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--fb-text-muted); font-weight: 600;
}
.finboard-compare-table__bar {
    height: 6px; border-radius: 3px; background: var(--fb-bg-raised);
    overflow: hidden;
}
.finboard-compare-table__bar-fill {
    height: 100%; border-radius: 3px; background: var(--fb-gold);
    transition: width .5s ease;
}
.finboard-compare-table__cta {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 20px 20px; justify-content: center;
    border-top: 1px solid var(--fb-border, rgba(0,0,0,.08));
}

/* Mobile: side-scroll the table inside its own scroll-container
 * with the category label column "frozen" via position:sticky. */
@media (max-width: 720px) {
    .finboard-compare-table-wrap {
        padding: 12px 0 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        position: relative;
    }
    .finboard-compare-table {
        min-width: max-content;
        padding: 0 12px 12px;
    }
    .finboard-compare-table__row {
        /* Override the inline grid-template-columns:repeat(N,1fr)
         * — on mobile we want a fixed first column ("Category")
         * and 160px per broker so the row is wider than the
         * viewport and forces horizontal scrolling. */
        grid-template-columns: 110px repeat(var(--fb-cmp-cols, 2), 160px) !important;
    }
    .finboard-compare-table__cell {
        padding: 10px 12px;
        scroll-snap-align: start;
    }
    .finboard-compare-table__cell:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--fb-bg-raised, #f1f3f7);
        box-shadow: 2px 0 6px rgba(0,0,0,.06);
    }
    .finboard-compare-table__cta {
        flex-direction: column; align-items: stretch; padding: 12px 16px 16px;
    }
    /* Scroll affordance — small "Swipe →" hint under the modal
     * header that fades when user has scrolled. */
    .finboard-compare__scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 0;
        font-size: 11px;
        color: var(--fb-text-muted, #6b7280);
        background: linear-gradient(180deg, rgba(196,146,10,.08), transparent);
        border-bottom: 1px solid var(--fb-border, rgba(0,0,0,.06));
        transition: opacity .3s ease;
    }
    .finboard-compare__scroll-hint::after {
        content: '→';
        font-size: 14px;
        color: var(--fb-gold, #c4920a);
        animation: finboard-cmp-swipe 1.6s ease-in-out infinite;
    }
    .finboard-compare__scroll-hint--scrolled { opacity: 0; pointer-events: none; }
}
.finboard-compare__scroll-hint { display: none; }
@media (max-width: 720px) {
    .finboard-compare__scroll-hint { display: flex; }
}
@keyframes finboard-cmp-swipe {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════════════
 * 10. Profile Settings Tab
 * ═══════════════════════════════════════════════════════════ */

/* Tab Navigation */
.finboard-profile__tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 24px;
    padding: 4px;
    background: var(--fb-bg-raised, rgba(255,255,255,.04));
    border-radius: 10px;
    border: 1px solid var(--fb-border, rgba(255,255,255,.08));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.finboard-profile__tabs::-webkit-scrollbar { display: none; }
.finboard-profile__tab {
    padding: 10px 22px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--fb-text-secondary, #9ca3b4);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.finboard-profile__tab:hover {
    color: var(--fb-text, #e8ecf4);
    background: var(--fb-bg-card, rgba(255,255,255,.06));
}
.finboard-profile__tab--active {
    color: var(--fb-gold, #E8A910);
    background: var(--fb-bg-card, rgba(255,255,255,.08));
    border-color: var(--fb-gold, #E8A910);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Profile Stats Grid */
.finboard-profile__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.finboard-profile__stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    background: var(--fb-bg-raised);
    border: 1px solid var(--fb-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--fb-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.finboard-profile__stat-card:hover {
    border-color: var(--fb-gold);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    text-decoration: none;
    color: var(--fb-text);
}
.finboard-profile__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fb-gold);
    line-height: 1.2;
}
.finboard-profile__stat-label {
    font-size: 0.8rem;
    color: var(--fb-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Profile Subsection Title */
.finboard-profile__subsection-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

/* Profile Quiz Progress */
.finboard-profile__quiz-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.finboard-profile__quiz-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.finboard-profile__quiz-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fb-gold);
    line-height: 1.2;
}
.finboard-profile__quiz-stat-label {
    font-size: 0.75rem;
    color: var(--fb-text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Profile Activity Items */
.finboard-profile__activity-list { display: flex; flex-direction: column; gap: 0; }
.finboard-profile__activity-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fb-border);
    transition: background 0.15s ease;
}
.finboard-profile__activity-item:last-child { border-bottom: none; }
.finboard-profile__activity-item:hover { background: var(--fb-bg-raised); }
.finboard-profile__activity-item--unlisted { opacity: 0.7; border-left: 3px solid var(--fb-yellow, #f59e0b); }
.finboard-profile__activity-link {
    font-weight: 600;
    color: var(--fb-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.finboard-profile__activity-link:hover { color: var(--fb-gold); }
.finboard-profile__activity-excerpt {
    font-size: 13px;
    color: var(--fb-muted, #6b7280);
    margin: 4px 0 0;
    line-height: 1.4;
}
.finboard-profile__activity-time {
    font-size: 11px;
    color: var(--fb-muted, #6b7280);
    display: block;
    margin-top: 4px;
}
.finboard-badge--sm { font-size: 10px; padding: 1px 6px; border-radius: 4px; }

/* Section description */
.finboard-profile__section-desc {
    font-size: 13px;
    color: var(--fb-text-muted, #5e6578);
    margin: -8px 0 16px;
}

/* Edit Profile Form */
.finboard-edit-profile { max-width: 520px; }
.finboard-edit-profile__field { margin-bottom: 16px; }
.finboard-edit-profile__field label {
    display: block; font-size: 12px; font-weight: 600; color: var(--fb-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.finboard-edit-profile__field textarea.finboard-auth__input {
    resize: vertical; min-height: 72px;
}
.finboard-edit-profile__char-count {
    display: block; text-align: right; font-size: 11px; color: var(--fb-text-muted);
    margin-top: 4px;
}

/* Notification Preferences */
.finboard-notif-prefs {
    background: var(--fb-bg-raised);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.finboard-notif-pref-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--fb-radius-sm);
    transition: background var(--fb-transition);
}
.finboard-notif-pref-row:hover {
    background: var(--fb-bg-hover);
}
.finboard-notif-pref-row__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    font-size: 14px;
    flex-shrink: 0;
}
.finboard-notif-pref-row__label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--fb-text);
    min-width: 0;
}
.finboard-notif-pref-row__select {
    background: var(--fb-bg-input);
    color: var(--fb-text);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-family: var(--fb-font);
    width: 150px;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3b4' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition);
}
.finboard-notif-pref-row__select:focus {
    outline: none;
    border-color: var(--fb-gold);
    box-shadow: 0 0 0 3px rgba(232,169,16,.08);
}
.finboard-notif-pref-row__select option {
    background: var(--fb-bg-card);
    color: var(--fb-text);
}

/* Light mode notification preferences */
[data-finboard-theme="light"] .finboard-notif-prefs {
    background: #f8f9fb;
    border-color: rgba(0,0,0,.08);
}
[data-finboard-theme="light"] .finboard-notif-pref-row:hover {
    background: rgba(0,0,0,.03);
}
[data-finboard-theme="light"] .finboard-notif-pref-row__icon {
    background: #fff;
    border-color: rgba(0,0,0,.08);
}
[data-finboard-theme="light"] .finboard-notif-pref-row__select {
    background-color: #fff;
    color: #1a1d25;
    border-color: rgba(0,0,0,.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5e6e' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
}
[data-finboard-theme="light"] .finboard-notif-pref-row__select:focus {
    border-color: #c4920a;
    box-shadow: 0 0 0 3px rgba(196,146,10,.1);
}
[data-finboard-theme="light"] .finboard-notif-pref-row__select option {
    background: #fff;
    color: #1a1d25;
}

/* Save status */
.finboard-profile__save-status {
    font-size: 13px;
    margin-left: 12px;
    display: inline-block;
}
.finboard-profile__save-status--ok { color: var(--fb-green, #10b981); }
.finboard-profile__save-status--err { color: var(--fb-red, #ef4444); }

/* GDPR Cards */
.finboard-gdpr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .finboard-gdpr-actions { grid-template-columns: 1fr; }
}
.finboard-gdpr-card {
    background: var(--fb-bg-raised, #1e2230);
    border: 1px solid var(--fb-border, rgba(255,255,255,.04));
    border-radius: var(--fb-radius-sm, 8px);
    padding: 20px;
}
.finboard-gdpr-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fb-text, #e8ecf4);
    margin: 0 0 8px;
}
.finboard-gdpr-card p {
    font-size: 13px;
    color: var(--fb-text-secondary, #9ca3b4);
    line-height: 1.5;
    margin: 0 0 16px;
}
.finboard-gdpr-card--danger {
    border-color: rgba(239, 68, 68, 0.2);
}

/* Danger button */
.finboard-btn--danger {
    background: var(--fb-red, #ef4444);
    color: #fff;
    border: none;
    font-weight: 700;
}
.finboard-btn--danger:hover {
    background: #dc2626;
}
.finboard-btn--danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Delete Confirmation Modal */
.finboard-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}
.finboard-modal__content {
    background: var(--fb-bg, #1a1e28);
    border: 1px solid var(--fb-border-strong, rgba(255,255,255,.08));
    border-radius: var(--fb-radius-md, 12px);
    padding: 32px;
    max-width: 440px;
    width: 100%;
}
.finboard-modal__content h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fb-text, #e8ecf4);
    margin: 0 0 12px;
}
.finboard-modal__content p {
    font-size: 14px;
    color: var(--fb-text-secondary, #9ca3b4);
    line-height: 1.5;
    margin: 0 0 16px;
}
.finboard-modal__content input {
    margin-bottom: 16px;
}
.finboard-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ================================================================
 * Phase 3: Component Polish — Focus, Hover, Active States
 * ================================================================ */

/* ── Global Focus-Visible Ring ── */
.finboard button:focus-visible,
.finboard a:focus-visible,
.finboard input:focus-visible,
.finboard select:focus-visible,
.finboard textarea:focus-visible,
.finboard [role="tab"]:focus-visible,
.finboard [role="button"]:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
    border-radius: var(--fb-radius-xs);
}
/* Suppress default outline when focus-visible is active */
.finboard button:focus:not(:focus-visible),
.finboard a:focus:not(:focus-visible) {
    outline: none;
}

/* ── Feed Topic Title Link — Hover ── */
.finboard-post-title:hover {
    color: var(--fb-gold) !important;
    transition: color var(--fb-transition);
}

/* Feed action-row pill micro-interaction. Sizing/padding come from
   the canonical .finboard-post-action block near line 1280 — this
   block is purely for the active-state + click-press animation. */
.finboard-post-action:active {
    transform: scale(0.96);
}
.finboard-post-action--saved,
.finboard-post-action--saved:hover {
    color: var(--fb-gold);
}

/* ── Vote Buttons — Enhanced ── */
.finboard-vote-btn {
    transition: color var(--fb-transition), opacity var(--fb-transition), transform 0.1s;
}
.finboard-vote-btn:active {
    transform: scale(0.85);
}
.finboard-vote-btn:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 1px;
}

/* ── Sort Pills — Focus + Aria ── */
.finboard-sort-btn {
    transition: all var(--fb-transition);
}
.finboard-sort-btn:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}

/* ── Breadcrumb — Improved Contrast ── */
.finboard-breadcrumb {
    padding: 6px 16px;
}
.finboard-breadcrumb__inner {
    font-size: 13px;
    color: var(--fb-text-secondary);
}
.finboard-breadcrumb__inner a {
    color: var(--fb-text-secondary);
    text-decoration: none;
    transition: color var(--fb-transition);
}
.finboard-breadcrumb__inner a:hover {
    color: var(--fb-gold);
}
.finboard-breadcrumb__inner a:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
    border-radius: 3px;
}
.finboard-breadcrumb__sep {
    opacity: 0.5;
    margin: 0 2px;
}

/* ── Badge Pills — Enhanced on Profile ── */
.finboard-profile .finboard-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--fb-radius-xs);
    letter-spacing: 0.5px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.finboard-profile .finboard-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--fb-shadow);
}

/* ── Empty State — Subtle Entrance Animation ── */
.finboard-empty {
    animation: finboard-fadeIn 0.3s ease-out;
}
.finboard-empty svg {
    animation: finboard-emptyPulse 2s ease-in-out infinite;
}
@keyframes finboard-emptyPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* ── Share Popover — Button Active State ── */
.finboard-share-btn--open,
.finboard-share-btn[aria-expanded="true"] {
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
}

/* ── Community Tab — Focus ── */
.finboard-community-tab:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: -2px;
    border-radius: var(--fb-radius-xs);
}

/* ── Post Card — Enhanced Click Feedback ── */
.finboard-post-card {
    transition: border-color var(--fb-transition), box-shadow var(--fb-transition), transform 0.15s;
}
.finboard-post-card:active {
    transform: translateY(0) !important;
    box-shadow: var(--fb-neu-in-sm) !important;
}

/* ── Broker List Item — Enhanced Hover ── */
.finboard-broker-list-item {
    transition: border-color var(--fb-transition), transform 0.15s;
}
.finboard-broker-list-item:hover {
    border-color: var(--fb-border-gold);
    transform: translateY(-1px);
}

/* ── CTA Buttons — Pressed State ── */
.finboard-btn--primary:active,
.finboard-btn--gold:active {
    transform: scale(0.97);
    box-shadow: var(--fb-neu-in-sm);
}

/* ── Toast — Progress Bar (auto-dismiss indicator) ── */
.finboard-toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--fb-gold);
    border-radius: 0 0 var(--fb-radius-sm) var(--fb-radius-sm);
    animation: finboard-toastProgress 3s linear forwards;
}
@keyframes finboard-toastProgress {
    from { width: 100%; }
    to { width: 0; }
}

/* ── Quiz Option Button — Focus ── */
.finboard-quiz__option-btn:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}

/* ── Input Fields — Focus Enhancement ── */
.finboard input[type="text"]:focus,
.finboard input[type="email"]:focus,
.finboard input[type="password"]:focus,
.finboard input[type="search"]:focus,
.finboard textarea:focus,
.finboard select:focus {
    border-color: var(--fb-gold);
    box-shadow: var(--fb-neu-in-sm), 0 0 0 3px var(--fb-gold-dim);
    outline: none;
}

/* ── Profile Completeness Bar — Enhanced ── */
.finboard-profile__progress-bar {
    background: var(--fb-bg-inset, var(--fb-bg-hover));
    border-radius: var(--fb-radius-pill);
    overflow: hidden;
    box-shadow: var(--fb-neu-in-sm);
}
.finboard-profile__progress-fill {
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Skeleton Loading (utility class for future use) ── */
.finboard-skeleton {
    background: linear-gradient(90deg, var(--fb-bg-card) 25%, var(--fb-bg-hover) 50%, var(--fb-bg-card) 75%);
    background-size: 200% 100%;
    animation: finboard-skeleton 1.5s ease-in-out infinite;
    border-radius: var(--fb-radius-sm);
}
@keyframes finboard-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Equity Rank Progress (sidebar) ── */
.finboard-rank-progress {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fb-border);
}
.finboard-rank-progress__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.finboard-rank-progress__equity {
    font-family: var(--fb-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--fb-gold);
}
.finboard-rank-progress__bar {
    height: 6px;
    background: var(--fb-bg-inset, var(--fb-bg-hover));
    border-radius: var(--fb-radius-pill);
    overflow: hidden;
    box-shadow: var(--fb-neu-in-sm);
    margin-bottom: 6px;
}
.finboard-rank-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold), var(--fb-gold-hover));
    border-radius: var(--fb-radius-pill);
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.finboard-rank-progress__next {
    font-size: 11px;
    color: var(--fb-text-muted);
}
.finboard-rank-progress__max {
    font-size: 12px;
    font-weight: 600;
    color: var(--fb-gold);
    text-align: center;
    margin-top: 4px;
}

/* Equity table — achieved/current row indicators */
.finboard-equity-table__threshold {
    text-align: right;
    font-family: var(--fb-font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.finboard-equity-table__check {
    width: 20px;
    text-align: center;
}
.finboard-equity-achieved {
    opacity: 0.5;
}
.finboard-equity-current {
    opacity: 1;
}
.finboard-equity-current td {
    font-weight: 600;
}

/* ================================================================
 * Knowledge Progression — Gamification Styles
 * ================================================================ */

/* ── Knowledge Paths (Quiz Page) ── */
.finboard-paths {
    margin-bottom: 24px;
}
.finboard-paths__title {
    font-family: var(--fb-font-display);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}
.finboard-path-card {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--fb-neu-out-sm);
    transition: border-color var(--fb-transition);
}
.finboard-path-card:hover {
    border-color: var(--fb-border-gold);
}
.finboard-path-card--complete {
    border-color: var(--fb-green);
}
.finboard-path-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.finboard-path-card__name {
    font-family: var(--fb-font-display);
    font-size: 15px;
    font-weight: 700;
}
.finboard-path-card__pct {
    font-family: var(--fb-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--fb-gold);
}
.finboard-path-card__bar {
    height: 5px;
    background: var(--fb-bg-inset, var(--fb-bg-hover));
    border-radius: var(--fb-radius-pill);
    overflow: hidden;
    box-shadow: var(--fb-neu-in-sm);
    margin-bottom: 10px;
}
.finboard-path-card__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-gold), var(--fb-gold-hover));
    border-radius: var(--fb-radius-pill);
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.finboard-path-card--complete .finboard-path-card__fill {
    background: linear-gradient(90deg, var(--fb-green), #34d399);
}
.finboard-path-card__topics {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.finboard-path-topic {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fb-text-secondary);
    padding: 3px 0;
}
.finboard-path-topic--done {
    color: var(--fb-green);
}
.finboard-path-topic__check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--fb-border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.finboard-path-topic--done .finboard-path-topic__check {
    background: var(--fb-green);
    border-color: var(--fb-green);
}
.finboard-path-card__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--fb-border);
    font-size: 12px;
    color: var(--fb-text-muted);
}
.finboard-path-card__badge--earned {
    color: var(--fb-gold);
    font-weight: 600;
}

/* ── Topic Expertise Tags ── */
.finboard-expertise-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(232,169,16,.1);
    color: var(--fb-gold);
    vertical-align: middle;
}
.finboard-expertise-tag svg {
    width: 10px;
    height: 10px;
}

/* ── Daily Streak Flame ── */
.finboard-streak {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    font-family: var(--fb-font-display);
}
.finboard-streak svg {
    filter: drop-shadow(0 0 3px currentColor);
}

/* ── Milestone Toast Variant ── */
.finboard-toast--milestone {
    border-color: var(--fb-border-gold) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 20px rgba(232,169,16,.1) !important;
}
.finboard-toast--milestone .finboard-toast__icon {
    color: var(--fb-gold);
    font-size: 16px;
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(232,169,16,.3));
}

/* ── Profile Expertise Section ── */
.finboard-profile-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.finboard-profile-expertise__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--fb-radius-xs);
    background: var(--fb-gold-dim);
    border: 1px solid var(--fb-border-gold);
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-gold);
}

/* ── Path Badges on Profile ── */
.finboard-path-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
/* ── Badge Icon Images ── */
.finboard-badge-icon {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    flex-shrink: 0;
}
.finboard-badge-icon--sm {
    width: 20px;
    height: 20px;
}
.finboard-badge-icon--md {
    width: 28px;
    height: 28px;
}
.finboard-badge-icon--lg {
    width: 40px;
    height: 40px;
}
/* Badge icon in equity table */
.finboard-equity-table__icon {
    width: 28px;
    padding-right: 6px;
}
.finboard-equity-table__icon img {
    width: 22px;
    height: 22px;
}
/* Badge icon in sidebar profile rank */
.finboard-profile-rank {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Badge icon in profile header meta row */
.finboard-profile__meta-row .finboard-badge-icon {
    margin-right: 2px;
}

.finboard-path-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--fb-radius-xs);
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.2);
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-green);
}

/* ================================================================
 * MOBILE UI/UX OVERHAUL — Consolidated Mobile Styles
 * Extends/overrides scattered media queries above.
 * 3 breakpoints: 900px (tablet), 640px (mobile), 400px (small mobile)
 * ================================================================ */

/* ── Tablet (max-width: 900px) — Extensions ── */
@media (max-width: 900px) {
    /* Community nav bar — horizontal scroll */
    .finboard-community-bar__inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        padding: 4px;
    }
    .finboard-community-bar__inner::-webkit-scrollbar { display: none; }

    /* Profile — centred stacking */
    .finboard-profile__actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .finboard-profile__actions .finboard-btn {
        flex: 1 1 auto;
        min-width: 120px;
        text-align: center;
        justify-content: center;
    }

    /* Badge images — smaller on tablet */
    .finboard-badge-icon--lg { width: 32px; height: 32px; }

    /* Knowledge path cards — stack */
    .finboard-path-card__topics { gap: 2px; }

    /* Milestone toast — wider */
    .finboard-toast {
        left: 16px;
        right: 16px;
        transform: translateY(100px);
        max-width: none;
        width: auto;
    }
    .finboard-toast.show {
        transform: translateY(0);
    }
}

/* ── Mobile (max-width: 640px) — Major Layout Changes ── */
@media (max-width: 640px) {

    /* ── Page-level padding ── */
    .finboard-wrap,
    .finboard-layout {
        padding: 0 8px;
    }
    .finboard { padding-left: 0; padding-right: 0; }

    /* ── Community Nav Bar — Touch Optimised ── */
    .finboard-community-bar {
        padding: 4px 8px;
    }
    .finboard-community-tab {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 12px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    .finboard-community-tab svg {
        width: 18px;
        height: 18px;
    }
    /* Active tab — stronger indicator on mobile */
    .finboard-community-tab.active,
    .finboard-community-tab--active {
        box-shadow: 0 0 12px var(--fb-gold-glow), inset 0 0 0 1.5px rgba(232,169,16,.2);
    }

    /* ── Feed Cards — Compact Mobile Layout ── */
    .finboard-post-card {
        padding: 12px;
        border-radius: var(--fb-radius-sm);
        margin-bottom: 8px;
    }
    /* Hide vote column on mobile, show inline */
    .finboard-post-votes {
        display: none;
    }
    .finboard-post-body {
        width: 100%;
    }
    .finboard-post-title {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 4px;
    }
    .finboard-post-header {
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 6px;
    }
    .finboard-post-preview {
        display: none;
    }
    /* Actions — icons only on mobile */
    .finboard-post-actions {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    /* Show upvote button on mobile (vote column is hidden) */
    .finboard-post-action--upvote { display: flex; }
    .finboard-post-action {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 12px;
        flex-shrink: 0;
        border-radius: var(--fb-radius-xs);
    }

    /* ── Sort Pills — Full Width ── */
    .finboard-feed-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .finboard-sort-tabs {
        width: 100%;
        justify-content: stretch;
    }
    .finboard-sort-btn {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        font-size: 13px;
        min-height: 40px;
    }

    /* ── Topic Filter Pills ── */
    .finboard-topic-pills {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .finboard-topic-pill {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* ── Profile — Mobile Optimised ── */
    .finboard-profile__header {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }
    .finboard-profile__avatar {
        margin: 0 auto;
    }
    .finboard-profile__info {
        text-align: center;
    }
    .finboard-profile__name { font-size: 22px; }
    .finboard-profile__meta-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    .finboard-profile__actions {
        flex-direction: column;
        width: 100%;
    }
    .finboard-profile__actions .finboard-btn {
        width: 100%;
        justify-content: center;
    }
    /* Badge images smaller on mobile */
    .finboard-badge-icon--md { width: 22px; height: 22px; }
    .finboard-badge-icon--sm { width: 16px; height: 16px; }

    /* Profile tabs — full width segments */
    .finboard-profile__tabs {
        width: 100%;
    }
    .finboard-profile__tab {
        flex: 1;
        text-align: center;
        padding: 12px 8px;
        min-height: 44px;
    }

    /* Completeness bar */
    .finboard-profile__completeness {
        padding: 0 12px;
    }

    /* ── Breadcrumb — Compact ── */
    .finboard-breadcrumb {
        padding: 4px 12px;
    }
    .finboard-breadcrumb__inner {
        font-size: 11px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Broker Pages ── */
    .finboard-broker-page__hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .finboard-broker-page__hero-actions .finboard-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Quiz — Touch Targets ── */
    .finboard-quiz__option-btn {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 14px;
    }

    /* ── Knowledge Path Cards ── */
    .finboard-path-card {
        padding: 12px;
    }
    .finboard-path-card__header {
        flex-direction: column;
        gap: 4px;
    }

    /* ── News Cards ── */
    .finboard-news-card {
        padding: 12px;
    }

    /* ── Equity Ranks Table — Compact ── */
    .finboard-equity-table__icon img {
        width: 18px;
        height: 18px;
    }
    .finboard-rank-progress__equity { font-size: 12px; }

    /* ── Share Popover → Bottom Sheet ── */
    .finboard-share-popover {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        border-radius: var(--fb-radius) var(--fb-radius) 0 0;
        max-width: none;
        width: 100%;
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform-origin: bottom center;
        z-index: 300;
    }
    .finboard-share-popover::before {
        display: none; /* Hide the arrow on mobile */
    }
    .finboard-share-popover__option {
        min-height: 44px;
        padding: 12px;
        font-size: 15px;
    }

    /* ── Toast — Full Width Bottom ── */
    .finboard-toast {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(0) translateY(100px) !important;
        max-width: none !important;
        width: auto !important;
        border-radius: var(--fb-radius-sm);
        font-size: 13px;
        padding: 10px 16px;
    }
    .finboard-toast.show {
        transform: translateX(0) translateY(0) !important;
    }

    /* ── Widget Builder — Stacked ── */
    .fwb-type-cards {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .fwb-layout {
        grid-template-columns: 1fr !important;
    }
    .fwb-type-card {
        flex-direction: row !important;
        padding: 12px 16px !important;
        gap: 10px;
    }
    .fwb-type-card__icon { width: 24px; height: 24px; }
    .fwb-type-card__desc { display: none; }
    .fwb-code__pre { font-size: 11px; }

    /* ── Sidebar Overlay — Better Backdrop ── */
    .finboard-sidebar-overlay {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

/* ── Touch Interactions (all mobile sizes) ── */
@media (hover: none) and (pointer: coarse) {
    /* Active/pressed states for touch devices */
    .finboard-post-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    .finboard-btn:active,
    .finboard-sort-btn:active,
    .finboard-post-action:active,
    .finboard-community-tab:active {
        opacity: 0.7;
        transform: scale(0.95);
        transition: all 0.1s;
    }
    .finboard-vote-btn:active {
        transform: scale(0.8);
        transition: transform 0.1s;
    }
    /* Larger vote buttons for touch */
    .finboard-vote-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Remove hover styles that linger on touch */
    .finboard-post-card:hover {
        transform: none;
        border-color: var(--fb-border);
    }
}

/* ── Small Mobile (max-width: 400px) — Fine Tuning ── */
@media (max-width: 400px) {
    .finboard-community-tab {
        padding: 10px 10px;
        font-size: 11px;
    }
    .finboard-post-card { padding: 10px; }
    .finboard-post-title { font-size: 14px; }
    .finboard-post-action { padding: 4px 8px; font-size: 11px; }
    .finboard-post-header { font-size: 11px; }

    .finboard-profile__name { font-size: 20px; }
    .finboard-badge { font-size: 8px; padding: 1px 4px; }

    .finboard-sort-btn { padding: 6px 8px; font-size: 12px; }

    .finboard-broker-summary__cat { grid-template-columns: 1fr 28px; }

    /* Sidebar equity table — more compact */
    .finboard-equity-table { font-size: 11px; }
    .finboard-equity-table__icon img { width: 16px; height: 16px; }
}

/* ── Pending Posts Banner ── */
.finboard-pending-posts {
    background: var(--fb-bg-card);
    border: 1px solid rgba(232,169,16,.2);
    border-left: 3px solid var(--fb-gold);
    border-radius: var(--fb-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: var(--fb-neu-out-sm);
}
.finboard-pending-posts__header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-gold);
    margin-bottom: 10px;
}
.finboard-pending-posts__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fb-border);
    font-size: 13px;
}
.finboard-pending-posts__item:last-child {
    border-bottom: none;
}
.finboard-pending-posts__title {
    flex: 1;
    color: var(--fb-text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.finboard-pending-posts__status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.finboard-pending-posts__time {
    font-size: 11px;
    color: var(--fb-text-muted);
    flex-shrink: 0;
}
.finboard-pending-posts__note {
    font-size: 11px;
    color: var(--fb-text-muted);
    margin: 8px 0 0;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════
 * Styled tooltip — opt-in via data-fb-tooltip="…"
 *
 * Drop-in replacement for the native title= tooltip: no ~700ms
 * delay, keyboard-accessible (focus-visible), brand-coloured,
 * and safe to layer on top of a native title for screen-reader
 * fallback. Works on any element; set tabindex="0" on non-
 * interactive hosts (like <time>) to let keyboard users reach it.
 * Dark + light theme via the --fb-tooltip-* tokens.
 * Closes TODO #18.
 * ═══════════════════════════════════════════════════════ */

.finboard [data-fb-tooltip] {
    position: relative;
}
.finboard [data-fb-tooltip]:hover::after,
.finboard [data-fb-tooltip]:focus-visible::after {
    content: attr(data-fb-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--fb-tooltip-bg, #1a1e28);
    color: var(--fb-tooltip-fg, #fff);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: finboard-tooltip-fade-in 120ms ease-out forwards;
}
.finboard [data-fb-tooltip]:hover::before,
.finboard [data-fb-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: var(--fb-tooltip-bg, #1a1e28);
    z-index: 1000;
    pointer-events: none;
}
@keyframes finboard-tooltip-fade-in {
    to { opacity: 1; }
}

/* Light-theme token overrides. */
.finboard[data-theme="light"] {
    --fb-tooltip-bg: #2a2f3a;
    --fb-tooltip-fg: #fff;
}