/* ============================================================
   wcb.css — World Class Broker shared stylesheet (single source)
   Design tokens + base + shared components:
   Header (mega-menu) · mobile drawer · bottom tabs · Ticker ·
   Footer · Toast · buttons · cursor cloud.
   Page-specific styles stay in each page's own <style>.
   ============================================================ */

:root{
  /* greens (V3 — deep & luxe) */
  --green-950:#04100A;--green-900:#071A11;--green-800:#0B281A;--green-700:#163C2C;--green-600:#236046;
  --hero-bg:linear-gradient(166.64deg,#0F3D29 0%,#08160F 71.43%); /* Figma 514:280 promo-hero — single source for hero backgrounds */
  /* neutrals */
  --cream:#ECE8DB;--cream-2:#F4F1E7;--surface:#fff;--border:#DDD8C6;--border-2:#CCC6AD;
  --ink:#1B2017;--ink-2:#4F5547;--ink-3:#8A988F;
  /* gold (V3 — warmer, more luxe) */
  --gold:#C9A227;--gold-bright:#E8C457;--gold-deep:#86600A;--gold-soft:#F7EFD6;
  /* luxe accents */
  --hair:rgba(201,162,39,.30);
  --gold-line:linear-gradient(90deg,transparent,rgba(201,162,39,.6),transparent);
  /* score graph: orange (low) -> green (full) */
  --orange:#E07B2E;--orange-soft:#FBEAD9;--score-lo:#E0712A;--score-mid:#C9A227;--score-hi:#2A7D54;
  /* status / accents */
  --up:#2A7D54;--up-soft:#E6F1EA;--down:#B42318;--down-soft:#FBEBE9;
  --warn:#C0341D;--warn-soft:#FBEBE9;--breaking:#C0341D;
  --recv:#2A7D54;--pay:#B42318;--risk:#B42318;
  --maroon:#7C1F1F;--rose-1:#FDEEF2;--rose-2:#F6E6F3;--rose-cta:#D6336C;
  --gold-t:#9A6A00;--forex-t:#1C4D38;--stock-t:#1E63C4;--crypto-t:#9A5B12;
  /* scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --fs-xs:12.5px;--fs-sm:14px;--fs-base:16px;--fs-lg:19px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:42px;
  --r:14px;--r-lg:18px;--pill:999px;--tap:44px;--hh:62px;
  /* type — whole site is sans-serif; --serif kept as a token name for headings */
  --serif:'IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --thai:'IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(7,21,14,.07),0 8px 22px rgba(7,21,14,.07);
  --shadow-lg:0 22px 54px rgba(7,21,14,.22);
}

/* ===== base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:74px}
body{font-family:var(--thai);background:#F8F8F8;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;word-break:break-word}
.serif{font-family:var(--serif)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ===== cursor cloud ===== */
#cursorCloud{position:fixed;left:0;top:0;width:26vmin;height:26vmin;min-width:200px;min-height:200px;pointer-events:none;z-index:4;opacity:0;transition:opacity .45s;will-change:transform;background:radial-gradient(circle at 50% 50%,rgba(40,120,60,.5),rgba(60,150,80,.14)55%,transparent 72%);filter:blur(26px);mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){#cursorCloud{display:none}}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);padding:0 18px;border-radius:10px;border:1.5px solid transparent;font-family:var(--thai);font-size:14px;font-weight:700;cursor:pointer;line-height:1;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--green-900)}.btn-gold:hover{background:var(--gold-bright)}
.btn-green{background:var(--green-900);color:#fff}.btn-green:hover{background:#0a2014}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-2)}.btn-outline:hover{border-color:var(--ink-3)}
.btn-outline.on-dark{color:#fff;border-color:rgba(255,255,255,.5)}.btn-outline.on-dark:hover{border-color:#fff}
.btn-sm{min-height:38px;padding:0 14px;font-size:13px}
.btn-block{width:100%}.btn:disabled{opacity:.55;cursor:default}

/* ============================================================
   UNIVERSAL PAGE LAYOUT  (canonical — pages must NOT redeclare)
   hero · breadcrumb · section head · ranking toolbar ·
   filter chips · broker link · rank-movement arrow.
   Page <style> keeps only page-specific rules + hero add-ons
   (e.g. .hero-cta, .hero-chips, .champ, .tldr-*).
   ============================================================ */
/* --- hero --- */
.hero{position:relative;background:var(--hero-bg);color:#fff;overflow:hidden;border-bottom:3px solid var(--gold)}
.hero .glow{position:absolute;width:55vw;height:55vw;right:-16vw;top:-24vw;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.2),transparent 64%);pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:30px 20px 36px;display:flex;flex-direction:column;gap:32px}
/* flex gap (32px) now governs hero spacing to match home/news — child margins removed below so they don't stack on the gap */
.crumb{font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:14px}
.crumb a:hover{color:var(--gold-bright)}.crumb b{color:#fff}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold-bright);font-weight:700;text-transform:uppercase}
.hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(28px,5vw,46px);line-height:1.4}
.hero h1 .gold{color:var(--gold-bright)}
.hero .sub{color:rgba(255,255,255,.78);font-size:15px;max-width:60ch}
.hero .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.6)}
.hero .meta b{color:var(--gold-bright);font-weight:600}
.hero .meta .byline{color:var(--gold-bright);font-weight:700;border-bottom:1px dashed rgba(227,190,74,.5)}
/* --- section + section head --- */
.section{padding:40px 0}
.shead{margin-bottom:16px;max-width:760px}
.s-eyebrow{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:9px;margin-bottom:9px}
.s-eyebrow::before{content:"";width:22px;height:2px;background:var(--gold)}
.shead h2{font-family:var(--serif);font-size:clamp(22px,3vw,28px);color:var(--green-900)}
.shead p{color:var(--ink-2);font-size:14.5px;margin-top:7px}
/* --- ranking toolbar (asset/filter left · year right) --- */
.rtoolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;margin:0 0 14px}
.rtoolbar .typechips{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto}
.tchip{border:1px solid var(--border-2);background:var(--surface);border-radius:9px;padding:8px 15px;font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer;min-height:38px;display:inline-flex;align-items:center;gap:6px;font-family:var(--thai)}
.tchip:hover{border-color:var(--green-600);color:var(--green-700)}
.tchip .e{font-size:14px}
.tchip[aria-selected="true"],.tchip[aria-pressed="true"]{background:var(--green-700);border-color:var(--green-700);color:#fff}
.yearctl{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.yearctl button{border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);font-family:var(--thai);font-weight:700;font-size:13px;padding:7px 13px;border-radius:9px;cursor:pointer;min-height:38px}
.yearctl button:hover{border-color:var(--green-600);color:var(--green-700)}
.yearctl button[aria-pressed="true"]{background:var(--green-700);border-color:var(--green-700);color:#fff}
.yearctl-mob{display:none} /* mobile-only combined year <select>, injected by wcb-components.js */
/* --- mobile table filter (Figma 684:2409): typechips → dropdown (left) · year → dropdown (right) --- */
.chips-mob{display:none} /* mobile-only asset <select>, injected by wcb-components.js */
.noresult{padding:36px;text-align:center;color:var(--ink-3);background:var(--surface);border:1px dashed var(--border);border-radius:12px;font-size:14px}
@media(max-width:640px){
  .rtoolbar{gap:8px}
  .rtoolbar .filters{flex:1 1 100%}
  /* replaced by the chips-mob <select> — 2-class specificity to beat each page's inline base `.typechips{display:flex}` */
  .rtoolbar .typechips,.rtoolbar .insts,.filterbar .typechips,.filterbar .insts{display:none}
  .chips-mob{display:block;flex:1 1 40%;min-width:0}
  .yearctl{display:flex;gap:8px;flex:1 1 40%;min-width:0}
  .yearctl button{display:none}
  .yearctl > select:not(.yearctl-mob){display:none}  /* hide older #yearMore — merged into the combined select */
  .yearctl .yearctl-mob{display:block;flex:1 1 0;min-width:0}
}
/* ===== generalized dropdown — every <select> uses this (class .wcb-select + legacy aliases) ===== */
.wcb-select,.rtt-select,.wcb-cmt-select,.yearctl select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:var(--thai);font-weight:600;font-size:13px;color:var(--ink-2);background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238A988F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--border-2);border-radius:9px;padding:8px 34px 8px 13px;min-height:38px;cursor:pointer}
.wcb-select:hover,.rtt-select:hover,.wcb-cmt-select:hover,.yearctl select:hover{border-color:var(--green-600)}
.wcb-select:focus-visible,.rtt-select:focus-visible,.wcb-cmt-select:focus-visible,.yearctl select:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px;border-color:var(--green-600)}
/* --- filter chips --- */
.filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.filters .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600}
.fchip{border:1.5px solid var(--border-2);background:var(--surface);border-radius:var(--pill);padding:8px 15px;font-family:var(--thai);font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer;min-height:38px}
.rtoolbar .fchip{border-radius:9px} /* ranking deposit filter chips squared to match year buttons */
.fchip:hover{border-color:var(--ink-3)}
.fchip.on{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.fcount{font-size:12.5px;color:var(--ink-3);margin-left:auto}
/* --- broker link (logo+name → review) --- */
.brk-link{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;cursor:pointer}
.brk-link:hover .t-nm,.brk-link:hover .bname,.brk-link:hover .t-nm *{color:var(--gold-deep);text-decoration:underline}
/* --- universal rank-movement arrow --- */
.mv{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mv.up{color:var(--up)}.mv.dn{color:var(--down)}.mv.fl{color:var(--ink-3)}

/* ============================================================
   HEADER  (mega-menu)
   ============================================================ */
/* static (does NOT follow scroll) — a fixed floating burger provides persistent menu access */
.wcb-topbar{position:relative;z-index:50;background:linear-gradient(166deg,#0a1f16 7%,#123725 44%,#0a1f16 81%);border-bottom:1px solid var(--gold)}
.wcb-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-line);pointer-events:none}
.wcb-topbar-in{display:flex;flex-direction:column;gap:12px;max-width:1400px;margin:0 auto;padding:20px 32px 16px}
/* shared icon (WCB.icon) + broker logo (WCB.brokerLogo) — single source */
.wcb-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.wcb-logo{position:relative;display:grid;place-items:center;width:var(--sz,48px);height:var(--sz,48px);border-radius:calc(var(--sz,48px)/4);overflow:hidden;flex:none}
.wcb-logo .init{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:800;font-size:calc(var(--sz,48px)*.29);border-radius:inherit}
.wcb-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.wcb-logo:has(img) .init{display:none}
.wcb-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.wcb-logo-img{height:40px;width:auto;display:block;flex:0 0 auto}
.wcb-seal{display:grid;place-items:center;flex:0 0 auto;height:40px}
.wcb-seal svg,.wcb-logomark{width:auto;height:40px;display:block}
.wcb-bt{display:flex;flex-direction:column;justify-content:center;line-height:1}
.wcb-bt .w{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:21px;letter-spacing:.2px;background:linear-gradient(180deg,#F8ECB4,#E8C457 45%,#C9A227);-webkit-background-clip:text;background-clip:text;color:transparent}
.wcb-bt .w em{font-style:normal}
.wcb-bt .b{font-family:var(--thai);font-size:10.5px;letter-spacing:5px;color:var(--gold);font-weight:600;margin-top:2px}
.wcb-spacer{flex:1}

/* desktop nav */
.wcb-nav{display:flex;align-items:center;gap:0}
.wcb-navitem{position:relative;flex:0 0 auto}
.wcb-navlink{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;background:none;border:none;cursor:pointer;font-family:var(--thai);color:rgba(255,255,255,.82);font-size:13px;font-weight:600;padding:0 8px;height:var(--hh);position:relative}
.wcb-navlink:hover{color:var(--gold-bright)}
.wcb-navlink .caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s;opacity:.7}
.wcb-navitem.on>.wcb-navlink{color:#fff}
.wcb-navitem.on>.wcb-navlink::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;background:var(--gold);border-radius:2px}
.wcb-navitem.open>.wcb-navlink .caret{transform:rotate(180deg)}
/* dropdown panel */
.wcb-drop{position:absolute;top:calc(var(--hh) - 6px);left:0;min-width:248px;background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--gold);border-radius:4px 4px 12px 12px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:60}
.wcb-navitem:hover>.wcb-drop,.wcb-navitem.open>.wcb-drop{opacity:1;visibility:visible;transform:none}
.wcb-drop a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:9px;color:var(--ink);font-size:13.5px;font-weight:600;min-height:0}
.wcb-drop a:hover{background:var(--cream-2);color:var(--green-900)}
.wcb-drop a .d{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.wcb-drop a.soon{color:var(--ink-3)}
.wcb-drop a .tag{font-size:10px;font-weight:700;color:var(--gold-deep);background:var(--gold-soft);border-radius:5px;padding:1px 6px;margin-left:6px;align-self:flex-start}

/* header actions */
.wcb-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wcb-world{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:var(--pill);padding:0 12px;height:38px;cursor:pointer;font-weight:600;font-size:13px;font-family:var(--thai)}
.wcb-world svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.wcb-userarea{display:flex;align-items:center}
.wcb-usermenu{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--pill);padding:4px 10px 4px 4px;cursor:pointer;color:#fff;min-height:38px;font-family:var(--thai)}
.wcb-usermenu .av{width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--green-900);display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 28px}
.wcb-usermenu .un{font-size:13px;font-weight:700;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcb-usermenu svg{width:14px;height:14px;stroke:rgba(255,255,255,.7);fill:none;stroke-width:2}
.wcb-burger{display:none;background:none;border:none;color:#fff;cursor:pointer;width:42px;height:42px;border-radius:9px;align-items:center;justify-content:center}
.wcb-burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- header row 1: logo + search + Login (Figma 312:48) ---- */
.wcb-hrow{display:flex;align-items:center;gap:16px;width:100%;justify-content:space-between}
.wcb-search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:44px;background:rgba(255,255,255,.06);border:1px solid rgba(197,160,46,.45);border-radius:10px;padding:0 16px}
.wcb-search svg{width:16px;height:16px;stroke:var(--gold);opacity:.8;fill:none;stroke-width:2;flex:none}
.wcb-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-family:var(--thai);font-size:14px}
.wcb-search input::placeholder{color:#9db3a6}
.wcb-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1.5px solid #f9ebbf;border-radius:10px;background:transparent;color:#f9ebbf;font-family:var(--thai);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;flex:none}
.wcb-login:hover{background:rgba(249,235,191,.12)}
/* ---- header row 2: flat pill nav ---- */
.wcb-pills{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.wcb-pill{display:inline-flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid #F9EBBF;border-radius:var(--pill);padding:7px 13px;color:#c7d6cc;font-family:var(--thai);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.wcb-pill:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--gold)}
.wcb-pill.on{background:rgba(255,255,255,.05);border-color:var(--gold);color:var(--gold);font-weight:700}
/* header dropdowns (desktop) — click to open; sourced from the same NAV as drawer + footer */
.wcb-navitem{position:relative;display:inline-flex}
.wcb-pill-dd{gap:5px;font-family:var(--thai)}
.wcb-pill-dd .caret{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .15s}
.wcb-navitem.open .wcb-pill-dd{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(201,162,39,.5)}
.wcb-navitem.open .wcb-pill-dd:not(.on) .caret{transform:rotate(180deg)}
.wcb-dd-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:264px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:60}
.wcb-navitem.open .wcb-dd-panel{display:block}
.wcb-dd-link{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;transition:background .12s}
.wcb-dd-link:hover{background:var(--cream-2)}
.wcb-dd-lb{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.wcb-dd-desc{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.wcb-dd-link.soon{opacity:.62}
.wcb-dd-link .tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--gold-deep);background:var(--gold-soft);border-radius:99px;padding:1px 7px;vertical-align:middle}
/* ---- floating burger (fixed, follows screen) ---- */
.wcb-fab{position:fixed;top:14px;right:14px;z-index:70;width:48px;height:48px;border-radius:14px;background:var(--green-800);border:1px solid var(--gold);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}
.wcb-fab:hover{background:var(--green-700)}
.wcb-fab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
body.wcb-scrolled .wcb-fab{display:flex}
body.wcb-drawer-open .wcb-fab{display:none}
/* in-header burger (mobile/tablet): sits in the header row at the top, scrolls away with it — same look as the fixed FAB */
.wcb-hburger{display:none;flex:none;margin-left:auto;width:44px;height:44px;border-radius:12px;background:var(--green-800);border:1px solid var(--gold);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.wcb-hburger:hover{background:var(--green-700)}
.wcb-hburger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
/* ---- responsive: ≤1024 header collapses to logo + in-header burger; search/Login/nav move into the drawer. The fixed FAB then takes over once you scroll past the header. ---- */
@media(max-width:1024px){ .wcb-pills{display:none} .wcb-search{display:none} .wcb-hrow .wcb-userarea{display:none} .wcb-hburger{display:inline-flex} }
@media(max-width:640px){ .wcb-topbar-in{padding:14px 16px} }

/* ===== mobile drawer ===== */
.wcb-scrim{position:fixed;inset:0;background:rgba(11,32,21,.55);z-index:58;opacity:0;visibility:hidden;transition:opacity .25s}
.wcb-scrim.open{opacity:1;visibility:visible}
.wcb-drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--surface);z-index:59;transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.wcb-drawer.open{transform:none}
@media(max-width:640px){.wcb-drawer{width:100vw;max-width:none}}
.wcb-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--green-800);color:#fff}
.wcb-drawer-head .wcb-bt .w{font-size:17px}
.wcb-drawer-close{width:36px;height:36px;border:none;background:rgba(255,255,255,.1);border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:0 0 36px}
.wcb-drawer-close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.wcb-drawer-body{flex:1;overflow:auto;padding:6px 0 calc(20px + env(safe-area-inset-bottom))}
.wcb-acc{border-bottom:1px solid var(--border)}
.wcb-acc-top{display:flex;align-items:center;gap:0;width:100%;text-align:left;background:none;border:none;font-family:var(--thai);font-size:15px;font-weight:700;color:var(--ink);padding:14px 18px;cursor:pointer;min-height:var(--tap)}
.wcb-acc-top.is-link{color:var(--ink)}
.wcb-acc-top .dw-ic{width:20px;height:20px;stroke:var(--green-700);fill:none;stroke-width:1.8;flex:none;margin-right:12px}
.wcb-acc-top .dw-lb{flex:1}
.wcb-acc-top[aria-current="page"] .dw-lb{color:var(--green-700)}
/* account block */
.wcb-drawer-account{padding:16px;background:var(--cream-2);border-bottom:1px solid var(--border)}
.dw-hi{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.dw-av{width:44px;height:44px;border-radius:50%;background:var(--cream-2);border:1px solid var(--border);color:var(--ink-3);display:grid;place-items:center;font-weight:800;font-size:18px;flex:none}
.dw-av.on{background:var(--green-700);border-color:var(--green-700);color:#fff;font-size:16px}
.dw-hi-t b{display:block;font-family:var(--serif);font-size:16px;color:var(--green-900)}
.dw-hi-t span{font-size:12px;color:var(--ink-3);line-height:1.4}
.dw-acct-btns{display:flex;gap:8px}.dw-acct-btns .btn{flex:1}
.dw-acct-in{display:flex;align-items:center;gap:11px}
.dw-who{flex:1;min-width:0}.dw-who b{display:block;font-size:14.5px;color:var(--ink)}.dw-who span{font-size:11.5px;color:var(--ink-3)}
.dw-logout{background:none;border:1px solid var(--border-2);border-radius:9px;padding:8px 12px;font-family:var(--thai);font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;flex:none}
.dw-quick{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--border);padding-top:8px}
.dw-quick a{padding:8px 2px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
/* search */
.wcb-drawer-search{padding:13px 16px;position:relative;border-bottom:1px solid var(--border)}
.wcb-drawer-search svg{position:absolute;left:28px;top:24px;width:17px;height:17px;stroke:var(--ink-3);fill:none;stroke-width:2}
.wcb-drawer-search input{width:100%;box-sizing:border-box;border:1px solid var(--border-2);border-radius:10px;padding:11px 12px 11px 38px;font-family:var(--thai);font-size:14px;background:var(--surface);color:var(--ink)}
.wcb-drawer-search input:focus{outline:none;border-color:var(--gold-deep)}
.wcb-acc-top .chev{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:2;transition:transform .2s;flex:0 0 18px}
.wcb-acc.open .wcb-acc-top .chev{transform:rotate(180deg)}
.wcb-acc-panel{display:none;padding:0 0 8px}
.wcb-acc.open .wcb-acc-panel{display:block}
.wcb-acc-panel a{display:flex;align-items:center;gap:8px;padding:11px 18px 11px 50px;font-size:14px;font-weight:600;color:var(--ink-2);min-height:var(--tap)}
.wcb-acc-panel a:hover{background:var(--cream-2);color:var(--green-900)}
.wcb-acc-panel a.soon{color:var(--ink-3)}
.wcb-acc-panel a .tag{font-size:10px;font-weight:700;color:var(--gold-deep);background:var(--gold-soft);border-radius:5px;padding:1px 6px}
.wcb-drawer-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}


/* ===== ticker tape ===== */
.wcb-ticker{background:var(--green-950);border-bottom:1px solid rgba(201,162,39,.2);overflow:hidden;height:38px}
.wcb-tt-track{display:flex;gap:30px;align-items:center;height:38px;white-space:nowrap;width:max-content;animation:wcb-tt 38s linear infinite}
.wcb-ticker:hover .wcb-tt-track{animation-play-state:paused}
@keyframes wcb-tt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.wcb-tt-track{animation:none}}
.wcb-tt-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.82)}
.wcb-tt-item .s{font-weight:700;color:#fff}
.wcb-tt-item .p,.wcb-tt-item .c{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.wcb-tt-item .c{font-size:11.5px}.wcb-tt-item .c.up{color:#6FD39B}.wcb-tt-item .c.down{color:#F0907F}

/* ============================================================
   FOOTER  (sitemap, mirrors nav)
   ============================================================ */
.wcb-foot{background:var(--green-900);color:rgba(255,255,255,.7);border-top:3px solid var(--gold)}
.wcb-foot-top{max-width:1180px;margin:0 auto;padding:34px 20px 30px;display:grid;grid-template-columns:1.45fr 3.3fr;gap:34px}
.wcb-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 20px}
.wcb-foot .fcol h4 a{color:var(--gold)}
.wcb-foot .fcol-flat h4 a{font-family:var(--serif);font-size:16px;font-weight:400} /* match .fcol-h (was inheriting .fl's 13px + h4 bold) */
.wcb-foot-brandcol .wcb-brand{margin-bottom:10px}
.wcb-foot .ftag{color:rgba(255,255,255,.6);font-size:13px;margin-top:4px;max-width:34ch;line-height:1.55}
.wcb-foot .social-ico{display:flex;gap:9px;margin-top:14px}
.wcb-foot .social-ico a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff}
.wcb-foot .social-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.wcb-foot h4{font-family:var(--serif);color:var(--gold);font-size:16px;margin-bottom:11px}
/* section heading — a real <button> so it can toggle the accordion on mobile; looks like an h4 */
.wcb-foot .fcol-h{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-family:var(--serif);color:var(--gold);font-size:16px;margin-bottom:11px;cursor:default}
.wcb-foot .fcol-chev{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto;display:none;transition:transform .2s}
.wcb-foot a.fl{display:block;color:rgba(255,255,255,.82);font-size:13px;padding:5px 0}
.wcb-foot a.fl:hover{color:#fff}
.wcb-riskbar{background:#0b2015;color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:12.5px;line-height:1.55}
.wcb-riskbar .wrap{max-width:1180px;margin:0 auto}.wcb-riskbar b{color:var(--gold)}
.wcb-copyr{background:#0b2015;color:rgba(255,255,255,.5);text-align:center;padding:14px 20px;font-size:12px;border-top:1px solid rgba(255,255,255,.08)}

/* ============================================================
   LUXE utilities + SCORE BAR (orange low -> green full)
   ============================================================ */
.wcb-gold-divider{height:1px;border:none;background:var(--gold-line);margin:0}
.wcb-eyebrow{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:9px}
.wcb-eyebrow::before{content:"";width:22px;height:2px;background:var(--gold)}
/* section heading */
.wcb-shead{margin-bottom:18px;max-width:760px}
.wcb-shead h2{font-family:var(--serif);font-size:clamp(22px,3vw,28px);color:var(--green-900);margin-top:9px}
.wcb-shead p{color:var(--ink-2);font-size:14.5px;margin-top:7px}
.wcb-shead.center{max-width:640px;margin-left:auto;margin-right:auto;text-align:center}
.wcb-shead.center .wcb-eyebrow::before{display:none}
/* score bar: full track is the orange->green gradient; an overlay hides the unfilled part,
   so low scores reveal only orange and high scores reveal into green */
.wcb-score{position:relative;height:8px;border-radius:99px;overflow:hidden;background:linear-gradient(90deg,var(--score-lo),var(--score-mid) 50%,#37A24A);box-shadow:inset 0 0 0 1px rgba(7,21,14,.06)}
.wcb-score::after{content:"";position:absolute;top:0;bottom:0;right:0;left:var(--v,50%);background:#E9EFEA}
.wcb-score.lg{height:11px}.wcb-score.ondark::after{background:rgba(255,255,255,.14)}
.wcb-scorewrap{display:flex;align-items:center;gap:10px}
.wcb-scorewrap .sv{font-family:var(--mono);font-weight:800;font-size:15px;color:var(--green-900);min-width:38px;text-align:right}
.wcb-scorewrap .wcb-score{flex:1}

/* ============================================================
   BYLINE  (E-E-A-T: updated + author/reviewer with portraits)
   ============================================================ */
.wcb-byline{margin-top:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wcb-byline .wb-upd{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.62)}
.wcb-byline .wb-upd .wb-clk{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.wcb-byline .wb-upd b{color:var(--gold-bright);font-weight:600}
.wcb-byline .wb-ago{color:rgba(255,255,255,.45)}
.wcb-byline .wb-people{display:flex;gap:12px;flex-wrap:nowrap}
.wcb-byline .wb-person{display:flex;align-items:center;gap:6px}
.wcb-byline .wb-av{width:22px;height:22px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:10px;flex:none;box-shadow:0 0 0 1.25px rgba(201,162,39,.45)}
.wcb-byline .wb-txt{line-height:1.2}
.wcb-byline .wb-r{display:block;font-size:9px;color:rgba(255,255,255,.5)}
.wcb-byline .wb-n{font-size:11.5px;font-weight:700;color:#fff;border-bottom:1px dashed rgba(227,190,74,.55)}
/* light-background variant (e.g. review summary card) */
.wcb-byline.on-light .wb-upd{color:var(--ink-3)}
.wcb-byline.on-light .wb-upd b{color:var(--gold-deep)}
.wcb-byline.on-light .wb-ago{color:var(--ink-3)}
.wcb-byline.on-light .wb-r{color:var(--ink-3)}
.wcb-byline.on-light .wb-n{color:var(--ink);border-bottom-color:var(--gold)}

/* byline + inline share row (article pages: News / Analysis) */
.wcb-byrow{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;margin-top:16px}
.wcb-byrow .wcb-byline{margin-top:0}
.wcb-share{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.wcb-share .sh-lbl{font-size:12px;font-weight:600;color:var(--ink-3);margin-right:2px}
.wcb-share button{width:38px;height:38px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.wcb-share button:hover{border-color:var(--gold);color:var(--green-900)}
.wcb-share button svg{width:17px;height:17px}
.wcb-share.on-dark .sh-lbl{color:rgba(255,255,255,.6)}
.wcb-share.on-dark button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.wcb-share.on-dark button:hover{background:rgba(255,255,255,.12);border-color:var(--gold-bright);color:#fff}

/* ============================================================
   BREADCRUMB · DISCLAIMER · CHIPS · MODAL SHELL
   ============================================================ */
/* breadcrumb */
/* default = light background (ink); every page uses this. Add .on-dark for a dark hero. */
.wcb-crumb{font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
.wcb-crumb a:hover{color:var(--gold-deep)}
.wcb-crumb b{color:var(--ink)}
.wcb-crumb .sep{opacity:.55;margin:0 3px}
.wcb-crumb.on-dark{color:rgba(255,255,255,.55)}
.wcb-crumb.on-dark a:hover{color:var(--gold-bright)}
.wcb-crumb.on-dark b{color:#fff}
/* legacy alias — kept so existing markup with .on-light stays explicit and correct */
.wcb-crumb.on-light{color:var(--ink-3)}
.wcb-crumb.on-light a:hover{color:var(--gold-deep)}
.wcb-crumb.on-light b{color:var(--ink)}

/* disclaimer (composable clauses · variants) */
.wcb-disc{font-size:12px;line-height:1.55}
.wcb-disc.box{display:flex;gap:9px;align-items:flex-start;background:var(--warn-soft);border:1px solid #f3c9c4;border-radius:12px;padding:13px 16px;color:var(--ink-2)}
.wcb-disc.box .ic{color:var(--warn);flex:none;font-size:15px;line-height:1.3}
.wcb-disc b{color:var(--ink)}
.wcb-disc.inline{display:inline-flex;gap:7px;align-items:flex-start;color:var(--risk);background:#FDECEA;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:600}
.wcb-disc.inline .ic{flex:none}
.wcb-disc.plain{color:var(--ink-3);font-weight:400}
.wcb-disc.on-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6)}
.wcb-disc.on-dark b{color:rgba(255,255,255,.85)}

/* internal-link chips */
.wcb-chips-title{font-family:var(--serif);font-size:22px;color:var(--green-900);margin-bottom:14px}
.wcb-chips{display:flex;gap:9px;flex-wrap:wrap}
.wcb-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--pill);padding:9px 15px;font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer}
.wcb-chip:hover{border-color:var(--gold);color:var(--green-900)}
.wcb-chip.strong{font-weight:700;color:var(--green-900)}
.wcb-chip .dot{width:12px;height:12px;border-radius:3px;flex:none}

/* modal shell */
.wcb-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.wcb-modal[hidden]{display:none}
.wcb-modal-scrim{position:absolute;inset:0;background:rgba(7,21,14,.55)}
.wcb-modal-card{position:relative;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);max-width:460px;width:100%;max-height:88vh;overflow:auto;padding:22px;border-top:3px solid var(--gold);animation:wcb-rise .24s}
.wcb-modal-card.wide{max-width:880px}
@keyframes wcb-rise{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.wcb-modal-card{animation:none}}
.wcb-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.wcb-modal-head h3{font-family:var(--serif);font-size:21px;color:var(--green-900)}
.wcb-modal-head p{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.wcb-modal-close{width:36px;height:36px;border:none;background:var(--cream-2);border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.wcb-modal-close svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2}
/* login modal content */
.wcb-slogins{display:flex;flex-direction:column;gap:8px}
.wcb-slogin{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);border:1px solid var(--border);background:#fff;border-radius:10px;cursor:pointer;font-family:var(--thai);font-size:14px;font-weight:700;color:var(--ink)}
.wcb-slogin:hover{background:var(--cream-2)}.wcb-slogin svg{width:18px;height:18px;flex:none}
.wcb-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-2);font-size:11px;font-weight:700}
.wcb-divider::before,.wcb-divider::after{content:"";flex:1;border-top:1px solid var(--border)}
.wcb-field{margin-bottom:12px}.wcb-field label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.wcb-field input{width:100%;min-height:var(--tap);border:1.5px solid var(--border);border-radius:10px;padding:0 12px;font-family:var(--thai);font-size:14px;color:var(--ink);background:#fff}
.wcb-field input:focus{outline:none;border-color:var(--gold-deep)}
.wcb-modal-fine{font-size:11px;color:var(--ink-2);margin-top:12px;line-height:1.5}

/* ============================================================
   COMMENTS  (unified: plain + rating · thumb-up · 1-level reply)
   ============================================================ */
.wcb-cmt{background:var(--cream-2);border-top:1px solid var(--border);padding:48px 0}
.wcb-cmt-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wcb-cmt-head h2{font-family:var(--serif);font-size:clamp(22px,3vw,28px);color:var(--green-900)}
.wcb-cmt-head .cnt{font-size:16px;color:var(--ink-3);font-weight:400}
.wcb-cmt-sub{font-size:13.5px;color:var(--ink-2);margin:6px 0 0}.wcb-cmt-sub b{color:var(--ink)}
.wcb-cmt-agg{display:flex;align-items:center;gap:10px;margin:10px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;width:max-content;max-width:100%}
.wcb-cmt-agg .big{font-family:var(--mono);font-weight:800;font-size:26px;color:var(--gold-deep);line-height:1}
.wcb-cmt-agg .of{font-size:12px;color:var(--ink-3)}
.wcb-cmt-agg .st{color:var(--gold)}.wcb-cmt-agg .st .e{color:var(--border-2)}
.wcb-cmt-agg .n{font-size:12.5px;color:var(--ink-2)}
.wcb-cmt-compose{margin:16px 0 18px}
.wcb-cmt-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 18px}
.wcb-cmt-gate svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.8;flex:none}
.wcb-cmt-gate span{font-size:14px;color:var(--ink-2);font-weight:600;flex:1;min-width:150px}
.wcb-cmt-editor{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.wcb-cmt-editor textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-2);border-radius:10px;padding:11px 13px;font-family:var(--thai);font-size:14.5px;resize:vertical;min-height:74px;color:var(--ink)}
.wcb-cmt-editor textarea:focus{outline:none;border-color:var(--gold-deep)}
.wcb-cmt-rate{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.wcb-cmt-rate .lbl{font-size:13px;font-weight:700;color:var(--ink-2)}
.wcb-stars{display:inline-flex;gap:3px}
.wcb-stars button{background:none;border:none;cursor:pointer;font-size:24px;line-height:1;color:var(--border-2);padding:0;min-height:0}
.wcb-stars button.on{color:var(--gold)}
.wcb-cmt-tools{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.wcb-cmt-hint{font-size:12px;color:var(--ink-3);flex:1;min-width:120px}
.wcb-cmt-warn{display:flex;gap:10px;align-items:flex-start;background:var(--gold-soft);border:1px solid #ecd9a8;border-radius:12px;padding:13px 16px;font-size:13.5px;color:var(--gold-deep);font-weight:600}
.wcb-cmt-warn svg{width:18px;height:18px;stroke:var(--gold-deep);fill:none;stroke-width:2;flex:none;margin-top:1px}
.wcb-cmt-list{display:grid;gap:12px}
.wcb-cmt-item{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.wcb-cmt-item.mine{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.wcb-cmt-av{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:14px;flex:none;position:relative;overflow:visible}
.wcb-cmt-av.sm{width:30px;height:30px;font-size:12px}
/* comment camp/broker (opt-in via data-broker — used on the ranking page) */
.wcb-cmt-badge{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:6px;border:2px solid var(--surface);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:8px}
.wcb-cmt-campof{display:inline-flex;align-items:center;gap:7px;margin:3px 0 6px;background:var(--cream-2);border:1px solid var(--border);border-radius:var(--pill);padding:3px 10px 3px 4px;max-width:100%}
.wcb-cmt-campof .cl{font-size:10.5px;font-weight:700;color:var(--ink-3);flex:none}
.wcb-cmt-campof .nm{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcb-cmt-campof .rk{font-size:10px;font-weight:800;color:var(--gold-deep);background:var(--gold-soft);border:1px solid #ecd9a8;border-radius:var(--pill);padding:1px 7px;flex:none}
.wcb-cmt-camprow{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.wcb-cmt-camprow .cl{font-size:12.5px;color:var(--ink-2);font-weight:600}
.wcb-cmt-camprow .chg{background:none;border:none;color:var(--gold-deep);font-family:var(--thai);font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.wcb-cmt-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--green-900);background:var(--cream-2);border:1px solid var(--border);border-radius:var(--pill);padding:3px 12px 3px 4px}
.wcb-cmt-chip .l{width:20px;height:20px;border-radius:6px;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:9px}
/* .wcb-cmt-select → generalized dropdown (see .wcb-select group above) */
.wcb-cmt-select:focus{outline:none;border-color:var(--gold-deep)}

/* ============================================================
   RANKING TRUST BLOCKS — Warning (danger signals) · Methodology
   Shared components: data-wcb="warning" / data-wcb="methodology"
   ============================================================ */
.wcb-redflags{background:var(--surface,#fff);border:2px solid var(--maroon);border-radius:var(--r-lg);padding:22px 24px;margin:24px 0}
.wcb-redflags .rf-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.wcb-redflags .rf-flag{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid #f2c9c3;display:grid;place-items:center;flex:none;font-size:16px;line-height:1}
.wcb-redflags .rf-head h3{font-family:var(--serif);font-size:clamp(18px,2.4vw,22px);color:var(--maroon);line-height:1.25}
.wcb-redflags .rf-head p{font-size:13px;color:var(--ink-2);margin-top:4px}
.wcb-redflags .rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wcb-redflags .rf-item{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--maroon);border-radius:var(--r);padding:14px 16px}
.wcb-redflags .rf-item .x{width:22px;height:22px;border-radius:6px;background:var(--rose-1,#FDECEA);color:var(--risk);display:grid;place-items:center;flex:none;font-size:11px;font-weight:800;margin-top:1px}
.wcb-redflags .rf-item b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.wcb-redflags .rf-item span{font-size:12.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:720px){.wcb-redflags .rf-grid{grid-template-columns:1fr}}

.wcb-howto{margin:24px 0}
.wcb-howto .ht-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.wcb-howto .ht-head::before{content:"";width:5px;height:26px;border-radius:3px;background:var(--gold);flex:none}
.wcb-howto .ht-head h3{font-family:var(--serif);font-size:clamp(19px,2.6vw,24px);color:var(--green-900)}
.wcb-howto .ht-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:6px 24px 20px;box-shadow:var(--shadow)}
.wcb-howto .ht-item{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border)}
.wcb-howto .ht-item:last-of-type{border-bottom:none}
.wcb-howto .ht-n{width:24px;height:24px;border-radius:50%;background:var(--cream-2);border:1px solid var(--border-2);color:var(--ink-2);display:grid;place-items:center;flex:none;font-family:var(--mono);font-weight:700;font-size:12px;margin-top:1px}
.wcb-howto .ht-item p{font-size:14px;color:var(--ink-2);line-height:1.6}.wcb-howto .ht-item p b{color:var(--ink)}
.wcb-howto .ht-note{display:flex;gap:8px;align-items:flex-start;border:1px dashed var(--border-2);border-radius:10px;padding:11px 14px;margin-top:14px;font-size:12px;color:var(--ink-3);line-height:1.55}
.wcb-howto .ht-note>span:first-child{flex:none}

.wcb-cmt-b{flex:1;min-width:0}
.wcb-cmt-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.wcb-cmt-name{font-weight:700;font-size:13.5px;color:var(--ink)}
.wcb-cmt-you{font-size:11px;font-weight:700;color:#fff;background:var(--green-700);padding:1px 8px;border-radius:99px}
.wcb-cmt-yr{font-size:11px;font-weight:600;color:var(--green-700);background:var(--cream);border:1px solid var(--border);padding:1px 8px;border-radius:99px}
.wcb-cmt-time{font-size:11.5px;color:var(--ink-3)}
.wcb-cmt-rowstars{color:var(--gold);font-size:13px;margin-bottom:3px}.wcb-cmt-rowstars .e{color:var(--border-2)}
.wcb-cmt-text{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.wcb-cmt-acts{display:flex;gap:16px;margin-top:8px}
.wcb-cmt-acts button{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--ink-3);font-size:12px;font-weight:700;font-family:var(--thai);min-height:30px;padding:0}
.wcb-cmt-acts button:hover{color:var(--gold-deep)}
.wcb-cmt-acts .like svg,.wcb-cmt-acts .reply svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.wcb-cmt-acts .like.on{color:var(--rose-cta)}.wcb-cmt-acts .like.on svg{fill:currentColor}
.wcb-cmt-replies{margin-top:10px;display:grid;gap:9px;border-left:2px solid var(--border);padding-left:12px}
.wcb-cmt-reply{display:flex;gap:9px}
.wcb-cmt-reply .wcb-cmt-text{font-size:13.5px}
.wcb-cmt-replybox{margin-top:9px;display:flex;gap:8px;align-items:flex-start}
.wcb-cmt-replybox textarea{flex:1;box-sizing:border-box;border:1px solid var(--border-2);border-radius:9px;padding:8px 11px;font-family:var(--thai);font-size:13.5px;resize:vertical;min-height:40px;color:var(--ink)}
.wcb-cmt-replybox textarea:focus{outline:none;border-color:var(--gold-deep)}
.wcb-cmt-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.wcb-cmt-pager .ps{display:flex;align-items:center;gap:5px;margin-right:auto;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.wcb-cmt-pager .ps .lab{font-weight:600}
.wcb-cmt-pager .ps button{min-width:34px;height:32px;border:1px solid var(--border-2);background:var(--surface);border-radius:8px;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--ink-2)}
.wcb-cmt-pager .ps button.on{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.wcb-cmt-pager .pg{display:flex;gap:5px;align-items:center}
.wcb-cmt-pager .pg button{min-width:36px;height:36px;border:1px solid var(--border-2);background:var(--surface);border-radius:9px;cursor:pointer;font-family:var(--thai);font-weight:700;font-size:13.5px;color:var(--ink-2)}
.wcb-cmt-pager .pg button[aria-current="true"]{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.wcb-cmt-pager .pg button:disabled{opacity:.4;cursor:default}
/* shared list pager (ranking tables) — same look as the comment pager */
.wcb-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;width:100%}
.wcb-pager:empty{display:none}
.wcb-pager .ps{display:flex;align-items:center;gap:5px;margin-right:auto;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.wcb-pager .ps .lab{font-weight:600}
.wcb-pager .ps button{min-width:34px;height:32px;border:1px solid var(--border-2);background:var(--surface);border-radius:8px;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--ink-2)}
.wcb-pager .ps button.on{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.wcb-pager .pg{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.wcb-pager .pg button{min-width:36px;height:36px;border:1px solid var(--border-2);background:var(--surface);border-radius:9px;cursor:pointer;font-family:var(--thai);font-weight:700;font-size:13.5px;color:var(--ink-2)}
.wcb-pager .pg button[aria-current="true"]{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.wcb-pager .pg button:disabled{opacity:.4;cursor:default}
.wcb-pager .gap{color:var(--ink-3)}

/* ============================================================
   CARDS  (BrokerIdentity · BrokerCard · ContentCard)
   ============================================================ */
/* BrokerIdentity — shared logo + name atom */
.wcb-bid{display:flex;align-items:center;gap:11px;min-width:0}
.wcb-bid-logo{width:42px;height:42px;border-radius:11px;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:12px;flex:none;position:relative;overflow:hidden;background:var(--bk,#2A6B4F)}
.wcb-bid-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7px;background:#fff}
.wcb-bid-nm{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--green-900)}
.wcb-bid-sub{font-size:11.5px;color:var(--ink-3)}

/* BrokerCard — affiliate broker strip (dark section) */
.wcb-bstrip{background:var(--green-900);color:#fff;padding:48px 0}
.wcb-bstrip h3{font-family:var(--serif);font-size:26px;color:#fff;text-align:center}
.wcb-bstrip .bsub{text-align:center;color:rgba(255,255,255,.66);font-size:14px;margin:8px auto 24px;max-width:50ch}
.wcb-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto;padding:0 20px}
.wcb-bcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:18px}
.wcb-bcard .bc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.wcb-bcard .bc-logo{width:42px;height:42px;border-radius:11px;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:13px;flex:none}
.wcb-bcard .bc-name{font-family:var(--serif);font-weight:700;font-size:16px;color:#fff}
.wcb-bcard .bc-stars{font-size:12px;color:var(--gold-bright);margin-top:2px}
.wcb-bcard .bc-feat{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.wcb-bcard .bc-feat span{font-size:11px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:3px 9px;border-radius:var(--pill)}
.wcb-bcard .bc-btns{display:flex;gap:8px}.wcb-bcard .bc-btns .btn{flex:1}
.wcb-bstrip .disc-note{text-align:center;font-size:11.5px;color:rgba(255,255,255,.5);margin:20px auto 0;max-width:1180px;padding:0 20px;line-height:1.6}

/* ContentCard — related article / news card */
/* .wcb-related — canonical wrapper for the "อ่านต่อ / เรื่องที่เกี่ยวข้อง" section
   (replaces the repeated inline: padding:32px 0 8px;border-top;margin-top:34px) */
.wcb-related{padding:0 0 40px;margin:0;border:0}
.wcb-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wcb-ccard{background:var(--surface);border:1px solid rgba(201,162,39,.28);border-radius:var(--r);overflow:hidden;cursor:pointer;box-shadow:var(--shadow);display:block}
.wcb-ccard:hover{border-color:var(--gold);transform:translateY(-3px);transition:.2s}
.wcb-ccard .thumb{height:96px;background:linear-gradient(135deg,var(--green-700),var(--green-900));position:relative;display:flex;align-items:flex-end;padding:10px}
.wcb-ccard .thumb .cat{background:var(--gold);color:var(--green-900);font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--pill)}
.wcb-ccard .cbody{padding:13px 15px}
.wcb-ccard .ct{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--green-900);line-height:1.3;margin-bottom:8px}
.wcb-ccard .cm{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
.wcb-ccard .cm .hot{color:var(--breaking);font-weight:700}
@media(max-width:980px){.wcb-bgrid,.wcb-cgrid{grid-template-columns:1fr}}

/* ===== toast ===== */
.wcb-toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:90vw}
.wcb-toast{background:var(--green-900);color:#fff;font-size:12.5px;font-weight:600;padding:11px 18px;border-radius:var(--pill);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);transition:.2s;text-align:center}
.wcb-toast.show{opacity:1;transform:none}

/* ============================================================
   REAL-TIME TESTING SET  (เปรียบเทียบ: Spread · EA · Slippage)
   Shared layout for wcb-compare-*.html — one template, three pages.
   ============================================================ */
/* LIVE badge — pulsing green dot + "อัปเดตล่าสุด" (on the dark hero) */
.rtt-live{display:inline-flex;align-items:center;gap:8px;background:rgba(42,125,84,.18);border:1px solid rgba(127,201,166,.5);color:#CFEFDD;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--pill);white-space:nowrap}
.rtt-live .dot{width:9px;height:9px;border-radius:50%;background:#57D08A;box-shadow:0 0 0 0 rgba(87,208,138,.7);animation:rttPulse 1.8s infinite}
.rtt-live b{color:#fff;font-weight:700}
@keyframes rttPulse{0%{box-shadow:0 0 0 0 rgba(87,208,138,.6)}70%{box-shadow:0 0 0 7px rgba(87,208,138,0)}100%{box-shadow:0 0 0 0 rgba(87,208,138,0)}}
@media(prefers-reduced-motion:reduce){.rtt-live .dot{animation:none}}
.rtt-heroline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rtt-heroline .sub{color:rgba(255,255,255,.8);font-size:15px;max-width:56ch}
/* trust strip in hero */
.rtt-trust{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.62)}
.rtt-trust .t{display:inline-flex;align-items:center;gap:7px}
.rtt-trust .t b{color:#fff;font-weight:600}
.rtt-trust .t svg{width:15px;height:15px;stroke:var(--gold-bright);fill:none;stroke-width:2;flex:none}

/* tab set — Spread · EA · Slippage (sticky under header) */
.rtt-tabsbar{background:var(--surface);border-bottom:1px solid var(--border);position:static}
.rtt-tabs{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.rtt-tabs::-webkit-scrollbar{display:none}
.rtt-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:14px 16px;font-family:var(--thai);font-weight:700;font-size:14px;color:var(--ink-3);border-bottom:3px solid transparent;text-decoration:none;white-space:nowrap;min-height:var(--tap)}
.rtt-tab:hover{color:var(--green-900)}
.rtt-tab .ic{font-size:16px}
.rtt-tab.on{color:var(--green-900);border-bottom-color:var(--gold)}
.rtt-tab .kicker{font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--cream-2);border:1px solid var(--border);border-radius:var(--pill);padding:1px 7px}

/* section B — explainer + summary + hook + methodology accordion */
main.rtt{padding:32px 0 8px}
.rtt-intro{display:flex;gap:14px;align-items:flex-start;background:var(--gold-soft);border:1px solid #ecd9a8;border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.rtt-intro .ii{font-size:22px;flex:none;line-height:1.2}
.rtt-intro p{font-size:14px;color:var(--ink-2)}.rtt-intro p b{color:var(--ink)}
.rtt-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.rtt-summary>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;text-align:center}
.rtt-summary span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:5px}
.rtt-summary b{font-family:var(--mono);font-size:20px;color:var(--green-900);font-variant-numeric:tabular-nums}
.rtt-summary b.lo{color:var(--recv)}.rtt-summary b.hi{color:var(--pay)}
.rtt-hook{display:flex;align-items:center;gap:10px;background:var(--cream-2);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--r);padding:12px 16px;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:16px}
.rtt-hook .z{font-size:18px;flex:none}.rtt-hook b{color:var(--pay)}
.rtt-acc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.rtt-acc>summary{list-style:none;cursor:pointer;padding:14px 18px;font-weight:700;font-size:14px;color:var(--green-900);display:flex;align-items:center;gap:9px;min-height:var(--tap)}
.rtt-acc>summary::-webkit-details-marker{display:none}
.rtt-acc>summary .tw{margin-left:auto;transition:transform .2s;color:var(--ink-3)}
.rtt-acc[open]>summary .tw{transform:rotate(90deg)}
.rtt-acc .body{padding:0 18px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.rtt-acc .body b{color:var(--ink)}
.rtt-acc .body ul{margin:6px 0 0;padding-left:20px}.rtt-acc .body li{margin:3px 0}

/* controls — filter chips (left) separate from sort (right) */
.rtt-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.rtt-fchips{display:flex;gap:7px;flex-wrap:wrap}
.rtt-fchip{border:1px solid var(--border-2);background:var(--surface);border-radius:var(--pill);padding:8px 14px;font-family:var(--thai);font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer;min-height:38px}
.rtt-fchip[aria-pressed="true"]{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.rtt-sortbox{margin-left:auto;display:flex;align-items:center;gap:9px}
.rtt-sortbox .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600}
/* --- mobile table filter (Figma 681:7232): filter chips scroll in one row · sort → full-width dropdown --- */
@media(max-width:640px){
  .rtt-controls{flex-direction:column;align-items:stretch;gap:10px}
  /* filter chips → mobile <select> (injected by wcb-components.js), same as the ranking pages */
  .rtt-controls .rtt-fchips{display:none}
  .rtt-controls .chips-mob{display:block;width:100%;flex:0 0 auto}
  .rtt-sortbox{margin-left:0;width:100%}
  .rtt-sortbox .lbl{display:none}                 /* drop "เรียงตาม" so the select spans edge-to-edge */
  .rtt-sortbox .rtt-select{flex:1 1 0;min-width:0}
}
/* .rtt-select → generalized dropdown (see .wcb-select group above) */
.rtt-showing{font-size:12px;color:var(--ink-3);margin:0 0 14px}.rtt-showing b{color:var(--green-900);font-weight:700}

/* main table — responsive: table on desktop, card list on mobile */
.rtt-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.rtt-tbl thead th{text-align:right;font-size:12px;color:var(--ink-3);font-weight:700;padding:13px 12px;white-space:nowrap;background:#F4F6F3;border-bottom:1px solid var(--border)}
.rtt-tbl thead th:first-child{border-top-left-radius:var(--r)}
.rtt-tbl thead th:last-child{border-top-right-radius:var(--r)}
.rtt-tbl thead th.l{text-align:left;padding-left:60px}
.rtt-help{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--cream-2);border:1px solid var(--border-2);color:var(--ink-3);font-size:10px;font-weight:800;cursor:help;margin-left:4px;vertical-align:middle}
.rtt-tbl tbody td{background:transparent;padding:14px 12px;border-bottom:1px solid var(--border);text-align:right;vertical-align:middle}
.rtt-tbl tbody tr:last-child td{border-bottom:none}
.rtt-tbl tbody tr:hover td{background:#F8F8F8}
.rtt-tbl tbody td:first-child{text-align:center}
.rtt-tbl tbody tr.top1 td{background:#FFFDF6}
.rtt-tbl tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r)}
.rtt-tbl tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r)}
.rtt-rank{font-family:var(--mono);font-weight:800;font-size:16px;color:var(--ink-3)}
.rtt-tbl tr.top1 .rtt-rank,.rtt-tbl tr.top2 .rtt-rank,.rtt-tbl tr.top3 .rtt-rank{color:var(--gold-deep)}
.rtt-rank .medal{display:block;font-size:12px;line-height:1}
/* broker cell */
.rtt-bk{display:flex;align-items:center;gap:10px}
.rtt-bk .logo{width:38px;height:38px;border-radius:10px;background:var(--bk,#333);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:11px;flex:none}
.rtt-bk .nm{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start}
.rtt-bk .nm b{font-family:var(--serif);font-size:15px;color:var(--green-900);line-height:1.15}
.rtt-bk .acct{font-size:10.5px;color:var(--ink-3);background:var(--cream-2);border:1px solid var(--border);padding:1px 7px;border-radius:var(--pill)}
/* hero metric cell (cost / return / slippage) */
.rtt-metric{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:120px}
.rtt-metric .v{font-family:var(--mono);font-weight:800;font-size:19px;color:var(--green-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.rtt-metric .v small{font-size:11px;font-weight:600;color:var(--ink-3)}
.rtt-metric .v.good{color:var(--recv)}.rtt-metric .v.bad{color:var(--pay)}
.rtt-bar{width:100%;height:7px;border-radius:99px;background:var(--cream-2);overflow:hidden}
.rtt-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.rtt-bar.good i{background:linear-gradient(90deg,#1d8a5e,#2A7D54)}
.rtt-bar.bad i{background:linear-gradient(90deg,#d9584a,#B42318)}
.rtt-num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.rtt-num.good{color:var(--recv)}.rtt-num.bad{color:var(--pay)}
.rtt-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--pill);white-space:nowrap}
.rtt-pill.good{background:var(--up-soft);color:var(--recv)}
.rtt-pill.warn{background:var(--gold-soft);color:var(--gold-deep)}
.rtt-pill.bad{background:var(--down-soft);color:var(--pay)}
.rtt-c-cta{white-space:nowrap}
.rtt-c-cta .bacts{display:inline-flex;gap:7px;justify-content:flex-end}
/* review button carries the broker name; fixed width + truncate so all rows align */
.rtt-c-cta .bacts .rv-btn{width:138px;max-width:138px;flex:none}
.rtt-c-cta .bacts .rv-btn .rv-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtt-updated{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Section D — Top-10 comparison bar chart */
.rtt-chart{display:grid;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.rtt-chart .cr{display:grid;grid-template-columns:130px 1fr 78px;align-items:center;gap:14px}
.rtt-chart .cl{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.rtt-chart .cl .r{font-family:var(--mono);color:var(--ink-3);font-size:12px}
.rtt-chart .ct{height:22px;border-radius:6px;background:var(--cream-2);overflow:hidden}
.rtt-chart .ct i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.rtt-chart .ct.good i{background:linear-gradient(90deg,#1d8a5e,#2A7D54)}
.rtt-chart .ct.bad i{background:linear-gradient(90deg,#d9584a,#B42318)}
.rtt-chart .cv{font-family:var(--mono);font-weight:800;font-size:14px;color:var(--green-900);text-align:right;font-variant-numeric:tabular-nums}

/* Section E — why results differ (icon cards) */
.rtt-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rtt-why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.rtt-why-card .wi{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;font-size:22px;margin-bottom:13px}
.rtt-why-card h3{font-family:var(--serif);font-size:18px;color:var(--green-900);margin-bottom:8px}
.rtt-why-card p{font-size:13.5px;color:var(--ink-2)}.rtt-why-card p b{color:var(--ink)}

@media(max-width:920px){
  .rtt-summary{grid-template-columns:repeat(2,1fr)}
  .rtt-why{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* table -> card list */
  .rtt-tbl thead{display:none}
  .rtt-tbl{border:none;border-radius:0;box-shadow:none;background:none}
  .rtt-tbl,.rtt-tbl tbody,.rtt-tbl tr,.rtt-tbl td{display:block;width:auto}
  .rtt-tbl tr{position:relative;background:var(--surface);border:1px solid rgba(201,162,39,.24);border-left:4px solid var(--bk,var(--border));border-radius:14px;padding:14px 16px;margin-bottom:12px}
  .rtt-tbl tr.top1,.rtt-tbl tr.top2,.rtt-tbl tr.top3{border-left-color:var(--gold)}
  .rtt-tbl tbody td{background:none;border:none!important;border-radius:0;padding:6px 0;text-align:right;display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
  .rtt-tbl tbody td::before{content:attr(data-label);font-size:12px;color:var(--ink-3);font-weight:600;text-align:left;flex:none}
  .rtt-tbl tbody td>*:last-child{min-width:0;text-align:right}
  .rtt-tbl .rtt-metric{min-width:0}
  .rtt-tbl tbody td:first-child{position:absolute;top:12px;right:14px;padding:0;width:auto}
  .rtt-tbl tbody td:first-child::before{display:none}
  .rtt-tbl .rtt-c-broker{padding-top:0;padding-right:44px}
  .rtt-tbl .rtt-c-broker::before{display:none}
  .rtt-tbl .rtt-metric{align-items:flex-end;flex:1}
  .rtt-tbl .rtt-c-cta{padding-top:12px}
  .rtt-tbl .rtt-c-cta::before{display:none}
  .rtt-tbl .rtt-c-cta .bacts{display:flex;width:100%}
  .rtt-tbl .rtt-c-cta .bacts .btn{flex:1}
  .rtt-tbl .rtt-c-cta .bacts .rv-btn{width:auto;max-width:none}
  .rtt-chart .cr{grid-template-columns:96px 1fr 62px;gap:10px}
  .rtt-chart{padding:16px}
}

/* ============================================================
   GOLD BROKERS SECTION  (data-wcb="gold-brokers")
   Brokers that trade XAU/USD — shared across asset + analysis pages.
   All rules scoped under .wcb-gbrk to avoid collisions with page CSS.
   ============================================================ */
.wcb-gbrk{padding:36px 0 8px}
.wcb-gbrk .brk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wcb-gbrk .bcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.wcb-gbrk .bcard.feat{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow)}
.wcb-gbrk .bcard .rk{position:absolute;top:-10px;left:16px;background:var(--green-900);color:#fff;font-family:var(--mono);font-weight:800;font-size:11px;padding:3px 9px;border-radius:var(--pill)}
.wcb-gbrk .bcard.feat .rk{background:var(--gold);color:var(--green-900)}
.wcb-gbrk .bcard .bh{display:flex;align-items:center;gap:11px;margin-bottom:12px;margin-top:4px}
.wcb-gbrk .blogo{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:800;font-size:13px;flex:none}
.wcb-gbrk .bcard .bn{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--green-900)}
.wcb-gbrk .bcard .sc{margin-left:auto;text-align:center;background:var(--gold-soft);border:1px solid #ecd9a8;border-radius:10px;padding:4px 10px}
.wcb-gbrk .bcard .sc .v{font-family:var(--mono);font-weight:800;font-size:17px;color:var(--gold-deep);line-height:1}
.wcb-gbrk .bcard .sc .l{font-size:9.5px;color:var(--ink-3);font-weight:600}
.wcb-gbrk .bspecs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.wcb-gbrk .bspec{background:var(--cream-2);border-radius:9px;padding:8px 10px}
.wcb-gbrk .bspec .l{font-size:10.5px;color:var(--ink-3);font-weight:600}
.wcb-gbrk .bspec .v{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:1px}
.wcb-gbrk .bspec .v.mono{font-family:var(--mono)}
.wcb-gbrk .lic-spec{position:relative}
.wcb-gbrk .lic-spec .v{display:flex;align-items:center;gap:6px}
.wcb-gbrk .lic-info{width:16px;height:16px;flex:none;border:none;background:none;padding:0;cursor:pointer;color:var(--green-700);display:inline-grid;place-items:center}
.wcb-gbrk .lic-info svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.wcb-gbrk .lic-info:hover{color:var(--gold-deep)}
.wcb-gbrk .lic-pop{position:absolute;top:calc(100% + 7px);left:0;z-index:30;min-width:160px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16);padding:11px 13px;display:none}
.wcb-gbrk .lic-pop.open{display:block}
.wcb-gbrk .lic-pop::before{content:"";position:absolute;top:-6px;left:14px;width:11px;height:11px;background:var(--surface);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.wcb-gbrk .lic-pop-h{font-size:10.5px;color:var(--ink-3);font-weight:700;margin-bottom:8px}
.wcb-gbrk .lic-chips{display:flex;gap:5px;flex-wrap:wrap}
.wcb-gbrk .lic-chips span{font-size:10.5px;font-weight:700;color:var(--green-700);background:var(--up-soft);border:1px solid #c5e2d2;padding:2px 7px;border-radius:6px}
.wcb-gbrk .bacts{display:flex;gap:8px;margin-top:auto}
.wcb-gbrk .bacts .btn{flex:1}
.wcb-gbrk .cta-mini{font-size:10.5px;color:var(--ink-3);margin-top:9px;display:flex;gap:5px;align-items:flex-start;line-height:1.4}
.wcb-gbrk .cta-mini svg{width:13px;height:13px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:980px){.wcb-gbrk .brk-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.wcb-gbrk .brk-grid{grid-template-columns:1fr}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1200px){
  .wcb-nav{display:none}
  .wcb-burger{display:flex}
  .wcb-world{display:none}
}
@media(max-width:980px){
  /* tablet: brand column stacks on top, link grid stays 4×2 (matches Figma) */
  .wcb-foot-top{grid-template-columns:1fr;gap:26px}
}
@media(max-width:760px){
  .wcb-world .lbl{display:none}
  .wcb-world{padding:0 10px}
  /* tablet portrait: 2 roomy columns before collapsing to accordions */
  .wcb-foot-cols{grid-template-columns:1fr 1fr;gap:20px}
}
@media(max-width:620px){
  .wcb-bt .w{font-size:17px}
  .wcb-logo-img{height:34px}
  .wcb-seal{height:34px}.wcb-seal svg{height:34px;width:auto}
  /* mobile: each section becomes a tap-to-expand accordion row */
  .wcb-foot-cols{grid-template-columns:1fr;gap:0}
  .wcb-foot-cols .fcol{border-top:1px solid rgba(255,255,255,.12)}
  .wcb-foot .fcol-h{cursor:pointer;margin:0;padding:14px 2px;font-size:15px}
  .wcb-foot .fcol-chev{display:block}
  .wcb-foot .fcol.open .fcol-chev{transform:rotate(180deg)}
  .wcb-foot .fcol-panel{display:none;padding:0 2px 12px}
  .wcb-foot .fcol.open .fcol-panel{display:block}
  .wcb-foot .fcol-flat h4{margin:0}
  .wcb-foot .fcol-flat h4 a{display:flex;align-items:center;min-height:24px;padding:14px 2px;font-size:15px} /* match mobile .fcol-h size */
  .wcb-foot a.fl{padding:7px 0}
}

/* COMMENTS component: hoisted from 8 pages' inline styles */
.cmt-band .cmt-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.cmt-head h2{font-family:var(--serif);font-size:clamp(22px,3vw,28px);color:var(--green-900)}
.cmt-head .cmt-count{font-size:16px;color:var(--ink-3);font-weight:400}
.cmt-sub{font-size:13.5px;color:var(--ink-2);margin:6px 0 18px}
.cmt-sub b{color:var(--ink)}
.cmt-compose{margin-bottom:18px}
.cmt-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 18px}
.cmt-gate svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.8;flex:none}
.cmt-gate span{font-size:14px;color:var(--ink-2);font-weight:600;flex:1;min-width:150px}
.cmt-editor{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.cmt-editor textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-2);border-radius:10px;padding:11px 13px;font-family:var(--thai);font-size:14.5px;resize:vertical;min-height:74px;color:var(--ink)}
.cmt-editor textarea:focus{outline:none;border-color:var(--gold-deep)}
.cmt-tools{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.cmt-hint{font-size:12px;color:var(--ink-3);flex:1;min-width:120px}
.cmt-warn{display:flex;gap:10px;align-items:flex-start;background:var(--gold-soft);border:1px solid #ecd9a8;border-radius:12px;padding:13px 16px;font-size:13.5px;color:var(--gold-deep);font-weight:600}
.cmt-warn svg{width:18px;height:18px;stroke:var(--gold-deep);fill:none;stroke-width:2;flex:none;margin-top:1px}
.cmt-list{display:grid;gap:12px}
.cmt-item{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.cmt-item.cmt-mine{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.cmt-av{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:14px;flex:none}
.cmt-b{flex:1;min-width:0}
.cmt-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.cmt-name{font-weight:700;font-size:13.5px;color:var(--ink)}
.cmt-you{font-size:11px;font-weight:700;color:#fff;background:var(--green-700);padding:1px 8px;border-radius:99px}
.cmt-yr{font-size:11px;font-weight:600;color:var(--green-700);background:var(--cream);border:1px solid var(--border);padding:1px 8px;border-radius:99px}
.cmt-time{font-size:11.5px;color:var(--ink-3)}
.cmt-text{font-size:14px;color:var(--ink-2)}
.cmt-band [hidden]{display:none!important}
.cmt-band{background:var(--cream-2);border-top:1px solid var(--border);padding:48px 0}
.cmt{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:16px;display:flex;gap:12px}
.cmt .av{width:40px;height:40px;border-radius:10px;flex:0 0 40px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;position:relative}
.cmt .av .badge{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:5px;border:2px solid #fff;display:grid;place-items:center;font-size:8px;font-weight:900;color:#fff}
.cmt .b{flex:1;min-width:0}
.cmt .camp{font-size:11px;color:var(--ink-2)}
.cmt .camp b{font-weight:800}
.cmt .clike{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--ink-2);font-size:11px;font-weight:700;font-family:var(--thai);min-height:30px;padding:0}
.cmt .clike svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.cmt .clike.on{color:var(--rose-cta)}
.cmt .clike.on svg{fill:currentColor}
.cmt .creply{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--ink-2);font-size:11px;font-weight:700;font-family:var(--thai);min-height:30px;padding:0}
.cmt .creply svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.cmt .crow{display:flex;gap:16px;margin-top:8px}
.cmt .txt{font-size:13.5px;margin-top:6px;line-height:1.55;overflow-wrap:anywhere}
.cmt .who{font-weight:800;font-size:14px}

/* ns component: hoisted duplicated rules into shared wcb.css */
.ns-col h4{font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--ink-2);margin-bottom:8px;text-transform:uppercase}
.ns-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px}
.ns-card .src{font-size:11px;font-weight:700;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.ns-card .hl{font-weight:700;font-size:13px;margin-top:4px;line-height:1.35}
.ns-card .sub{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.ns-card .tm{font-size:11px;color:var(--ink-3);margin-top:7px}
.ns-social{display:flex;gap:9px}
.ns-social .av{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px}
.ns-social .who{font-size:12px;font-weight:800}
.ns-social .handle{font-size:11px;color:var(--ink-3)}
.ns-social .q{font-size:12px;margin-top:3px;line-height:1.4}
.ns-meta{font-size:12px;color:var(--ink-2);line-height:1.7}
.ns-meta b{color:var(--ink)}
.ns-related{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.ns-related .r{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--ink-3);border-top:1px dashed var(--border);padding-top:5px}
.ns-related .r b{color:var(--ink);font-weight:600}
.ns-body{display:none;border-top:1px solid var(--border);background:var(--cream-2);padding:14px 16px}

/* composer component: hoisted duplicated rules into shared wcb.css */
.composer{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:16px;display:flex;gap:12px}
.composer .av{width:40px;height:40px;border-radius:10px;flex:0 0 40px;display:grid;place-items:center;background:var(--gold);color:var(--green-900);font-weight:800;font-size:14px}
.composer .grow{flex:1;min-width:0}
.composer textarea{width:100%;min-height:54px;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:10px;font-family:var(--thai);font-size:14px;color:var(--ink);background:#fff}
.composer textarea:focus{outline:none;border-color:var(--gold-deep)}
.composer .crow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.composer .hint{font-size:11px;color:var(--ink-2)}
.composer .hint b{color:var(--maroon)}
.composer .post{background:var(--rose-cta);color:#fff;border:none;border-radius:8px;padding:0 18px;min-height:40px;font-weight:800;font-size:14px;cursor:pointer;font-family:var(--thai)}
.composer.locked .editor{display:none}
.composer .lock{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%}
.composer.locked .lock{display:flex}
.composer .lock span{font-size:14px;color:var(--ink-2);font-weight:600}

/* rcard component: hoisted duplicated rules into shared wcb.css */
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:relative}
.rcard::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--bk,var(--green-600));opacity:.5}
.rcard.top1{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),var(--shadow-lg);background:linear-gradient(180deg,#FFFDF6,#fff)}
.rcard.top1 .rank{color:#fff;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin:0 auto;font-size:17px}
.rcard.top2 .rank{color:#fff;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin:0 auto;font-size:17px}
.rcard.top3 .rank{color:#fff;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin:0 auto;font-size:17px}
.rcard.top1 .rank{background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold) 60%,var(--gold-deep))}
.rcard.top2 .rank{background:linear-gradient(135deg,#B9C2C9,#8794A0)}
.rcard.top3 .rank{background:linear-gradient(135deg,#CD9A6A,#A66E3F)}
.rcard.open .nstoggle svg{transform:rotate(180deg)}
.rcard.open .ns-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:980px){
.rcard.open .ns-body{grid-template-columns:1fr}
}

/* trow component: hoisted duplicated rules into shared wcb.css */
.trow:last-child{border:none}
.trow>*{min-width:0}
.trow:hover{background:#F8F8F8}
.trow.rrk1{background:linear-gradient(90deg,#FFFDF6,#fff)}
.trow.rrk1 .rkn{color:#fff;border-radius:8px}
.trow.rrk2 .rkn{color:#fff;border-radius:8px}
.trow.rrk3 .rkn{color:#fff;border-radius:8px}
.trow.rrk1 .rkn{background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold) 60%,var(--gold-deep))}
.trow.rrk2 .rkn{background:linear-gradient(135deg,#B9C2C9,#8794A0)}
.trow.rrk3 .rkn{background:linear-gradient(135deg,#CD9A6A,#A66E3F)}

/* vote component: hoisted duplicated rules into shared wcb.css */
.vote-btn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border-radius:10px;cursor:pointer;font-family:var(--thai);font-size:13.5px;font-weight:800;border:1.5px solid var(--gold);background:#fff;color:var(--gold-deep)}
.vote-btn:hover{background:var(--gold-soft)}
.vote-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6}
.vote-btn .vc{font-variant-numeric:tabular-nums}
.vote-btn.voted{background:var(--green-900);color:#fff;border-color:var(--green-900);cursor:default}
.vote-btn.voted svg{fill:#fff}

/* weight component: hoisted duplicated rules into shared wcb.css */
.weight-table{width:100%;border-collapse:collapse;margin:16px 0;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.weight-table th{background:var(--green-900);color:#fff;text-align:left;padding:10px 12px;font-size:12.5px}
.weight-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13.5px}
.weight-table td:last-child{text-align:right;font-weight:800;color:var(--gold-deep);font-variant-numeric:tabular-nums}

/* t component: hoisted duplicated rules into shared wcb.css */
.t-rank{display:flex;flex-direction:column;align-items:center;gap:3px}
.t-rank .rkn{font-family:var(--serif);font-weight:800;font-size:15px;color:var(--ink-3);width:28px;height:28px;display:grid;place-items:center}
@media(max-width:640px){
.t-brk{grid-area:brk;min-width:0}
.t-cta{grid-area:cta}
}

/* social component: hoisted duplicated rules into shared wcb.css */
.social-ico a{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}
.social-ico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8}
.social-band{background:#F8F8F8;padding:48px 0}
.social-ico{display:flex;gap:10px;margin-top:14px}

/* pager component: hoisted duplicated rules into shared wcb.css */
.pager{display:flex;gap:6px;align-items:center}
.pager button{min-width:40px;height:40px;border:1px solid var(--border-2);background:#fff;border-radius:9px;cursor:pointer;font-family:var(--thai);font-weight:700;font-size:14px;color:var(--ink-2)}
.pager button[aria-current="true"]{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.pager button:disabled{opacity:.4;cursor:default}

/* slogin component: hoisted duplicated rules into shared wcb.css */
.slogin{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);border:1px solid var(--border);background:#fff;border-radius:10px;cursor:pointer;font-family:var(--thai);font-size:14px;font-weight:700;color:var(--ink)}
.slogin:hover{background:var(--cream-2)}
.slogin svg{width:18px;height:18px;flex:0 0 18px}

/* rtt component: hoisted duplicated rules into shared wcb.css */
.rtt-c-cta .bacts{justify-content:flex-end}
.rtt-c-cta .rtt-review{flex:0 0 150px;width:150px;justify-content:center;overflow:hidden}
.rtt-c-cta .rtt-review .rv-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* cfilter component: hoisted duplicated rules into shared wcb.css */
.cfilter{background:#fff;border:1px solid var(--border);border-radius:var(--pill);padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-family:var(--thai)}
.cfilter .dot{width:8px;height:8px;border-radius:50%}
.cfilter.active{background:var(--green-900);color:#fff;border-color:transparent}

/* ============================================================
   Generalized primitives — 2026-07-04 audit
   Byte-identical inline blocks hoisted from pages. Pages that
   need a size/context tweak keep a small local override (inline
   <style> loads after this file, so page rules win).
   ============================================================ */

/* internal-link chips: deposit / forex / cheapest ranking pages */
.ilinks{display:flex;gap:9px;flex-wrap:wrap}
.ichip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--pill);padding:9px 15px;font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer}
.ichip:hover{border-color:var(--gold);color:var(--green-900)}

/* board heading: 4 compare pages (cheapest overrides margin + h2 size locally) */
.board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 12px}
.board-head .title{display:flex;align-items:center;gap:12px}
.board-head .ic{width:40px;height:40px;border-radius:11px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;font-size:20px;flex:none}
.board-head h2{font-family:var(--serif);font-size:23px;color:var(--green-900)}
.board-head h2 small{display:block;font-family:var(--thai);font-size:12.5px;color:var(--ink-3);font-weight:400}

/* segmented control: home / ranking (cheapest overrides to a smaller size locally) */
.seg{display:inline-flex;background:var(--cream-2);border:1px solid var(--border-2);border-radius:11px;padding:3px}
.seg button{border:none;background:none;font-family:var(--thai);font-weight:600;font-size:13px;color:var(--ink-2);padding:8px 14px;border-radius:8px;cursor:pointer;min-height:38px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--green-700);box-shadow:var(--shadow)}

/* stat strip: home / ranking (mobile fine-tuning stays in each page's mobile media block) */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-top:-28px;position:relative;z-index:2;box-shadow:var(--shadow-lg)}
.stat{background:var(--surface);padding:18px 14px;text-align:center}
.stat .v{font-family:var(--serif);font-weight:800;font-size:26px;color:var(--green-900);line-height:1;font-variant-numeric:tabular-nums}
.stat .v .ic{color:var(--gold-deep)}
.stat .k{font-size:12.5px;color:var(--ink-2);margin-top:5px;font-weight:600}
@media(max-width:820px){.statbar{grid-template-columns:1fr 1fr}}
/* NOTE: .topic and .pill deferred — asset vs asset-review diverge too much
   (structural .tx wrapper, ellipsis, size deltas / dark-vs-light context)
   to share safely. Revisit if a third page needs the same card. */