/* ===== Vexriano — shared stylesheet ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;450;500;600;700&display=swap');
:root{
  --bg:#0d0818; --bg2:#150f28; --panel:#1c1330; --panel2:#251a3d;
  --line:#3a2a5c; --text:#f0ecfb; --muted:#a99cc7;
  --gold:#a855f7; --gold2:#7c3aed; --gold-rgb:168,85,247; --gold2-rgb:124,58,237;
  --green:#22c55e; --red:#ef4444;
  --blue:#3b82f6; --radius:14px; --maxw:1160px;
  --body-glow:#2a1650;
  /* Tells the browser to render its OWN native UI chrome (a <select>'s dropdown option
     list, scrollbars, form-control focus rings, etc.) in dark colors -- without this, a
     dark-styled <select> box still opens a plain white options list, since that popup is
     drawn by the OS/browser, not by this stylesheet. select option{...} below is a fallback
     for the rare browser that ignores color-scheme. */
  color-scheme: dark;
}
/* ---- accent switch: "gold" restores the original navy/gold identity; default (no attribute) is the new purple ---- */
:root[data-accent="gold"]{
  --bg:#0b1020; --bg2:#0e1428; --panel:#131a2e; --panel2:#182b44;
  --line:#243154; --text:#e6ebf5; --muted:#9aa6c0;
  --gold:#f5c451; --gold2:#e0a92e; --gold-rgb:245,196,81; --gold2-rgb:224,169,46;
  --body-glow:#16203e;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,var(--body-glow) 0%,var(--bg) 55%);
  color:var(--text);line-height:1.6;min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.btn{
  display:inline-block;padding:12px 22px;border-radius:10px;font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#11161f;
  border:none;cursor:pointer;transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(var(--gold-rgb),.25);color:#11161f}
.btn:active{opacity:.85;transform:translateY(0)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.green{background:linear-gradient(135deg,#34d399,#16a34a);color:#06210f}

/* ---- shared touch-target sizing for small inline admin action buttons (approve/reject/edit/delete
       icon buttons that would otherwise render ~27-33px with almost no gap between neighbors) ---- */
.btn-touch{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;margin:4px 6px 4px 0}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--text);white-space:nowrap;flex:0 0 auto}
.brand .dot{width:32px;height:32px;object-fit:contain;display:block;flex:0 0 auto}
.menu{display:flex;gap:14px;align-items:center;justify-content:center;flex:1 1 auto;
  /* min-width:0 lets this flex item shrink below its content's natural minimum width instead
     of forcing the row to overflow. NOT paired with overflow-x:auto -- setting overflow-x
     without an explicit overflow-y forces overflow-y to compute as 'auto' too (a CSS spec
     quirk), which made this row start CLIPPING anything that visually extends below it --
     every "Market ▾"/"Live ▾"/etc. dropdown panel is position:absolute;top:100%, so they all
     silently stopped opening the moment overflow-x:auto was added here. The real fix for nav
     overflow is grouping items into dropdowns (see the Market/Live/Products/Company submenu
     IIFEs in assets/site.js) -- that alone keeps the row well within normal viewport widths,
     and html,body{overflow-x:hidden} (below) is still the page-level safety net if it doesn't.
     justify-content was briefly flex-start (a centered row that overflows shows its MIDDLE,
     not its start, which was silently hiding "Home" during an earlier overflow bug) -- back
     to center now that the item count is down to ~7 top-level entries (Home, 4 dropdown
     groups, P2P, Vault) and comfortably fits without needing to scroll/clip at all. */
  min-width:0}
.menu a{color:var(--muted);font-weight:600;display:inline-flex;align-items:center;white-space:nowrap;padding:12px 4px}
.menu a:hover,.menu a.active{color:var(--text)}
.menu-head,.menu-foot{display:none}   /* drawer chrome — only shown inside the mobile drawer */
.menu .drawer-only{display:none}      /* cloned CTA (Login/Dashboard...) — drawer only, hidden in desktop menu */
.nav-cta{display:flex;gap:12px;align-items:center;flex:0 0 auto}
.nav-cta .btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;line-height:1}
.burger{display:none;background:transparent;border:1px solid var(--line);color:var(--text);
  width:44px;height:44px;border-radius:10px;font-size:22px;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto}
.burger:hover{border-color:var(--gold);color:var(--gold)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none}
.nav-backdrop.show{display:block}

/* ---- shared compact nav-icon dropdown: Downloads menu ("⬇️") + Preferences menu ("⚙️"),
   both a .theme-toggle-sized trigger inside a .nav-dl wrapper in .nav-inner (assets/site.js).
   Anchored right:0 (not left:0) since both triggers sit near the far-right of the nav --
   opening the panel rightward would push most of it off-screen. ---- */
.nav-dl{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.nav-dl.open>.theme-toggle{color:var(--gold);border-color:var(--gold)}
.nav-dl-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;gap:22px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:80;min-width:240px;max-width:calc(100vw - 32px)}
.nav-dl.open .nav-dl-panel{display:flex}
.nav-dl-col{flex:1;min-width:160px}
.nav-dl-col h5{margin:0 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.nav-dl-col a{display:block;padding:8px 9px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600;margin-bottom:2px}
.nav-dl-col a:hover{background:rgba(var(--gold2-rgb),.14);color:var(--gold)}
.nav-dl-col a small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;margin-top:2px}
.nav-dl-empty{color:var(--muted);font-size:12.5px;padding:6px 2px}
.nav-pref-btn{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:8px}
.nav-pref-btn:hover{border-color:var(--gold);color:var(--gold)}
.nav-pref-selects{display:flex;gap:8px}
.nav-pref-selects select{flex:1;min-width:0;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 6px;font-size:13px}
/* Fallback for browsers that ignore the color-scheme declared on :root above -- explicit
   dark background/text on every <option> site-wide (form fields, admin selects, this one). */
select option{background:var(--panel);color:var(--text)}
@media(max-width:860px){
  .nav-dl-panel{position:fixed;top:auto;bottom:74px;left:12px;right:12px;max-width:none;flex-direction:column;gap:14px}
}

/* hero */
.hero{padding:84px 0 60px;text-align:center;position:relative;overflow:hidden}
/* Animated "steady growth" equity curve behind the hero text */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.hero .container{position:relative;z-index:1}
/* ---- client dashboard: compact welcome + tab menu ---- */
.dash-welcome{display:flex;align-items:center;gap:12px;margin:0 0 16px;min-width:0}
.dash-welcome > div:last-child{min-width:0;overflow-wrap:anywhere}
.dw-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:18px;color:#170a2e;background:linear-gradient(135deg,var(--gold),var(--green))}
.tf-btn.active{border-color:var(--gold);color:var(--gold)}
.dash-welcome .dw-hi{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.dash-welcome .dw-name{font-size:20px;font-weight:900;line-height:1.15;background:linear-gradient(135deg,var(--gold),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.dash-welcome .dw-mail{font-size:13px;color:var(--muted);margin-top:2px}
.dash-layout{display:flex;gap:24px;align-items:flex-start}
.dash-main{flex:1;min-width:0}
.dash-tabs{display:flex;flex-direction:column;gap:5px;flex:0 0 210px;position:sticky;top:80px}
.dash-tabs .dtab{padding:11px 14px;border-radius:9px;color:var(--muted);font-weight:700;font-size:14px;white-space:nowrap;border:1px solid transparent;display:flex;align-items:center;gap:6px}
.dash-tabs .dtab:hover{color:var(--text);background:var(--panel)}
.dash-tabs .dtab.active{color:var(--text);background:var(--panel);border-color:var(--line)}
.tab-badge{background:#ef4444;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-left:auto}
.dpanel[hidden]{display:none}
/* Settings drop-down sub-menu, nested under the sidebar tab */
.dtab-group{display:flex;flex-direction:column;border-radius:9px}
.dtab-parent{cursor:pointer}
.dtab-group.submenu-open .dtab-parent{color:var(--text);background:var(--panel);border-color:var(--line)}
.dtab-caret{margin-left:auto;transition:transform .25s ease,color .25s ease;color:var(--muted);font-size:11px}
.dtab-group.submenu-open .dtab-caret{transform:rotate(180deg);color:var(--gold)}
.dtab-submenu{
  display:flex;flex-direction:column;gap:3px;overflow:hidden;
  max-height:0;opacity:0;
  margin:0 0 0 14px;padding:0 6px;
  border-left:2px solid var(--line);
  transition:max-height .32s ease,opacity .25s ease,margin .32s ease,padding .32s ease;
}
.dtab-group.submenu-open .dtab-submenu{
  max-height:640px;opacity:1;
  margin:4px 0 6px 14px;padding:8px 6px;
  border-left:2px solid var(--gold);
  background:var(--panel2);
  border-radius:0 0 10px 10px;
}
.dtab-sub{
  padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap;
  display:flex;align-items:center;gap:9px;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.dtab-sub::before{content:'';width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--muted);opacity:.6;transition:background .15s ease,box-shadow .15s ease}
.dtab-sub:hover{color:var(--text);background:var(--panel);transform:translateX(3px)}
.dtab-sub:hover::before{background:var(--gold)}
.dtab-sub.active{color:var(--gold);background:var(--panel);font-weight:800}
.dtab-sub.active::before{background:var(--gold);box-shadow:0 0 6px rgba(var(--gold-rgb),.8)}
@media(max-width:820px){
  .dtab-group{width:100%}
  .dtab-submenu{margin-left:8px}
}
/* individual collapsible sub-settings inside the admin Settings tab */
.settings-sub{border:1px solid var(--line);border-radius:12px;background:var(--panel2);margin-bottom:12px;padding:0 18px}
.settings-sub summary{cursor:pointer;font-weight:700;font-size:15px;padding:14px 0;list-style:none;color:var(--text);user-select:none}
.settings-sub summary::-webkit-details-marker{display:none}
.settings-sub summary::before{content:'▸';display:inline-block;width:14px;transition:transform .15s ease;color:var(--muted)}
.settings-sub[open] summary::before{transform:rotate(90deg)}
.settings-sub summary:hover::before{color:var(--gold)}
.settings-sub>form,.settings-sub>div{padding:0 0 18px}
@media(max-width:820px){
  /* THE actual root cause behind "every card is cut off on mobile", confirmed against real
     device screenshots across dashboard.php's Settings/Associate/Trading-Profile/KYC/Bank
     sections and more: switching .dash-layout to flex-direction:column here means its CROSS
     axis is now horizontal (width) -- and .dash-layout's own align-items:flex-start (set once,
     at the top of this file, for the desktop side-by-side layout) was NEVER overridden for
     this column state. flex-start on the cross axis means "shrink-wrap to content, don't
     stretch" -- so .dash-main (which holds every single card on the page) was sizing itself to
     whatever its widest child's natural/preferred width was, completely independent of the
     actual viewport, and every card inside inherited that oversized container. .dash-main's
     own flex:1 (see its base rule above) does NOT help here either -- flex-grow only applies
     along the flex container's MAIN axis, which is vertical once direction is column, so it
     was never affecting width at all in this state. Every other mobile-fit fix made this
     round (min-width:0, flex-wrap, etc.) was necessary but not sufficient without this: they
     were all fixing children of a parent that itself was never constrained to the screen. */
  .dash-layout{flex-direction:column;gap:14px;align-items:stretch}
  .dash-main{width:100%}
  .dash-tabs{flex-direction:row;flex:none;position:static;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line);padding-bottom:4px}
}

/* password show/hide eye toggle */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:42px}
.pw-eye{position:absolute;right:2px;top:50%;transform:translateY(-50%);background:transparent;border:0;cursor:pointer;font-size:17px;line-height:1;opacity:.75;min-width:40px;min-height:40px;display:grid;place-items:center}
.pw-eye:hover{opacity:1}
.tag{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.5px;margin-bottom:22px}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;font-weight:900;letter-spacing:-1px}
.hero h1 .grad{background:linear-gradient(135deg,var(--gold),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{max-width:720px;margin:20px auto 30px;color:var(--muted);font-size:19px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* sections */
section{padding:64px 0}
.section-head{text-align:center;max-width:740px;margin:0 auto 44px}
.section-head h2{font-size:clamp(26px,4vw,40px);font-weight:800}
.section-head p{color:var(--muted);margin-top:12px;font-size:17px}
.eyebrow{color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px}

/* ---- Discussion / comments (blog-post.php, signals.php -- same component, duplicated
   markup in both) -- icon-bubble heading to match the .card .ico treatment used elsewhere,
   and a dashed-border empty-state box (instead of a bare paragraph floating in whitespace)
   for the "log in to comment" prompt and the "no comments yet" message -- the two commonly
   render back-to-back for an anonymous visitor on a fresh page, so consistent boxes read as
   a deliberate pair rather than orphaned text. */
.discuss-head{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.discuss-head .di-ico{width:38px;height:38px;border-radius:10px;background:rgba(var(--gold-rgb),.12);
  display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.discuss-head h2,.discuss-head h3{margin:0;font-size:20px}
.discuss-empty{background:var(--bg2);border:1px dashed var(--line);border-radius:var(--radius);
  padding:22px 20px;text-align:center;color:var(--muted);font-size:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.discuss-empty:last-child{margin-bottom:0}
.discuss-empty .de-ico{font-size:24px;opacity:.85}
.discuss-empty a{color:var(--gold);font-weight:700;text-decoration:none}
.discuss-empty a:hover{text-decoration:underline}

/* grid cards */
.grid{display:grid;gap:22px;align-items:stretch}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;transition:.2s;display:flex;flex-direction:column}
.card:hover{border-color:#33457a;transform:translateY(-3px)}
.card:active,.plan:active,.tcard:active{transform:scale(.98)}
.card .ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:22px;
  background:rgba(var(--gold-rgb),.12);margin-bottom:16px}
.card h3{font-size:19px;margin-top:28px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
/* Dashboard's row of action cards (dashboard.php, .dash-action-grid): each card's description
   paragraph wraps to a different number of lines (e.g. "View / Print Statement" vs "View /
   Print Annual Summary"), so the buttons below them landed at different heights within the
   same row -- .grid's align-items:stretch already stretches the wrapping <div> in each cell to
   match its row's tallest sibling, but a plain block <div> doesn't propagate that extra height
   into its own children, so the .card inside just sat at its natural content height with blank
   space left over below it. Making the wrapper a flex column and letting .card grow to fill it
   (.card is already display:flex;flex-direction:column from the base rule above) lets
   margin-top:auto on the button push it to the bottom of every card uniformly, regardless of
   how many lines its own paragraph wrapped to -- scoped to this one grid, not .card/.grid
   generally, which are reused all over the site in places this shouldn't apply. */
.dash-action-grid > div{display:flex;flex-direction:column}
.dash-action-grid .card{flex:1}
.dash-action-grid .card .btn{margin-top:auto}
/* Pricing cards (products.php): each card is a subgrid of the SAME 9 row-tracks its parent
   .price-cards defines, so e.g. row 6 (the price line) sizes to the tallest price line across
   all 3 cards and every card's price line lands on that same shared height -- regardless of
   how many lines the description/feature-list/notes above and below it wrap to. A plain
   margin-top:auto can only pin a card's whole trailing block to its bottom; it can't align one
   specific line against a sibling card whose trailing block has a different internal height
   (e.g. only the EA card has an extra "$X/month" line). Falls back gracefully to each card
   sizing independently (the old, unaligned-but-not-broken look) in a browser too old to
   support subgrid -- 9 rows: icon, h3, tagline, description, features, price, fx-note,
   ea-only-note, buttons; see products.php's grid-row:N on each element. */
.price-cards{grid-template-rows:repeat(9,auto)}
.price-card{display:grid;grid-template-rows:subgrid;grid-row:span 9;row-gap:0}
/* vault.php's Free/Lite/Pro tier cards -- plain flex column, NOT the subgrid technique
   above. Subgrid was tried here first but Pro's much taller feature content (several
   titled .vault-part groups vs. Free/Lite's flat list) forced the shared "features" row
   track to Pro's height, leaving a large empty gap between Free/Lite's shorter content
   and the price/button row that followed. Flex + margin-top:auto on the price block
   (see vault.php) pushes price/button to the bottom of whichever card is tallest
   instead, with no gap -- cards still end up equal height via the parent .grid's
   align-items:stretch, just without a mid-card dead zone. */
.vault-price-card{display:flex;flex-direction:column}

/* Dashboard Settings tab (dashboard.php #tab-settings): every card is forced to the SAME fixed
   height (not just capped) so the whole grid reads as a tidy, uniform wall of tiles -- a short
   card (Change Password) ends up with blank space below its content, a long one (Notifications,
   Face ID) scrolls internally, both deliberate trade-offs for uniform-length boxes over
   variable-height masonry. Plain CSS Grid (the base .grid.g3 columns), not multi-column --
   masonry's whole point is letting card heights vary, the opposite of what's wanted here. */
#tab-settings .grid.g3 .card{height:340px;overflow-y:auto}

/* pricing */
.price{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.plan{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;text-align:center;position:relative;
  display:flex;flex-direction:column}
.plan .btn{margin-top:auto;align-self:stretch;justify-content:center}
.plan.pop{border-color:var(--gold);box-shadow:0 12px 40px rgba(var(--gold-rgb),.12)}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#11161f;font-weight:800;font-size:12px;padding:4px 12px;border-radius:999px}
.plan h3{font-size:20px}
.plan .amt{font-size:42px;font-weight:900;margin:10px 0}
.plan .amt span{font-size:16px;color:var(--muted);font-weight:600}
.plan ul{list-style:none;text-align:left;margin:18px 0 24px}
.plan li{padding:8px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.plan li::before{content:"✓";color:var(--green);font-weight:900;margin-right:10px}

/* steps */
.steps{counter-reset:s;display:grid;gap:18px}
.step{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.step .num{counter-increment:s;flex:0 0 44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--green));color:#170a2e;font-weight:900;
  display:grid;place-items:center;font-size:18px}
.step .num::before{content:counter(s)}
.step h4{font-size:17px;margin-bottom:4px}
.step p{color:var(--muted);font-size:15px}
code,.kbd{background:#140b26;border:1px solid var(--line);border-radius:6px;padding:2px 8px;
  font-family:Consolas,monospace;color:#d8b4fe;font-size:14px}
.note{background:rgba(59,130,246,.08);border:1px solid #2a3f6b;border-left:4px solid var(--blue);
  border-radius:10px;padding:16px 18px;color:#c7d3ee;margin:18px 0}
.warn{background:rgba(239,68,68,.08);border:1px solid #5a2a2a;border-left:4px solid var(--red);
  border-radius:10px;padding:16px 18px;color:#f3c9c9;margin:18px 0}

/* widgets */
.tv-wrap{background:var(--panel);border:1px solid rgba(var(--gold-rgb),.28);border-radius:var(--radius);
  padding:14px;overflow:hidden}
.tv-wrap+.tv-wrap{margin-top:24px}
/* ---- Live-trading teaser box (performance.php / performance.html -- identical markup in
   both) -- an icon bubble on the left balances the button on the right so the row doesn't
   read as lopsided text trailing off into empty card space; below ~700px it switches to a
   centered, stacked layout with a full-width button instead of letting the button dangle
   flush-left under the paragraph once it wraps off the row. */
.live-teaser{display:flex;align-items:center;gap:20px;padding:26px 30px}
.live-teaser-ico{width:52px;height:52px;border-radius:14px;background:rgba(var(--gold-rgb),.12);
  display:grid;place-items:center;font-size:24px;flex:0 0 auto}
.live-teaser-body{flex:1 1 auto;min-width:220px}
.live-teaser-body h3{margin:6px 0 4px}
.live-teaser-body p{color:var(--muted);margin:0}
.live-teaser>.btn{white-space:nowrap;flex:0 0 auto}
@media(max-width:700px){
  .live-teaser{flex-direction:column;text-align:center;padding:28px 24px}
  .live-teaser-body{min-width:0}
  .live-teaser>.btn{width:100%;text-align:center}
}
/* Fixed-height panel with its own internal scrollbar, so a growing list scrolls in place
   instead of stretching the whole admin page taller as more rows accumulate (clients, orders, transactions, licenses, etc.). */
.tbl-scroll{max-height:480px;overflow-y:auto}
.tbl-scroll table thead th{position:sticky;top:0;background:var(--panel);z-index:2}

/* ===== Forex trading sessions graph ===== */
.fxs-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.fxs-clock{font-size:15px;color:var(--muted)}
.fxs-clock b{color:var(--gold);font-size:18px;font-variant-numeric:tabular-nums}
.fxs-open-now{font-size:14px;color:var(--muted)}
.fxs-open-now b{color:var(--green)}
.fxs-row{display:flex;align-items:center;gap:14px;margin:9px 0}
.fxs-label{width:140px;flex:0 0 140px;font-size:14px}
.fxs-label .nm{font-weight:700;color:var(--text)}
.fxs-label .hr{display:block;font-size:12px;color:var(--muted)}
.fxs-track{position:relative;flex:1;height:30px;background:#140b26;border:1px solid var(--line);
  border-radius:7px;overflow:hidden}
.fxs-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;opacity:.9}
.fxs-bar span{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:11px;
  font-weight:700;color:#170a2e;white-space:nowrap}
.fxs-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;z-index:6;
  box-shadow:0 0 8px rgba(255,255,255,.8)}
.fxs-status{flex:0 0 78px;text-align:right}
.fxs-ruler{position:relative;flex:1;height:18px}
.fxs-ruler span{position:absolute;transform:translateX(-50%);font-size:11px;color:#6b7795;font-variant-numeric:tabular-nums}
.fxs-note{color:#6b7795;font-size:12px;margin-top:14px;text-align:center}
@media(max-width:680px){.fxs-label{width:96px;flex:0 0 96px}.fxs-status{flex:0 0 60px}}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:40px;color:var(--muted)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.foot-grid a{color:var(--muted);display:block;padding:8px 4px}
/* defensive guard against an unusually long admin-entered account label overflowing its tv-wrap row */
#mt5_account_name{max-width:220px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.foot-grid a:hover{color:var(--gold)}
.disc{font-size:13px;color:#6b7795;margin-top:24px;border-top:1px solid var(--line);padding-top:18px}

/* admin/login */
.auth{max-width:380px;margin:80px auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px}
.auth h2{text-align:center;margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea,.bm-search-input{width:100%;padding:11px 12px;background:#140b26;border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-size:16px}
.field textarea{font-family:inherit;resize:vertical}
/* 16px is the iOS Safari auto-zoom-on-focus threshold — every text input sitewide (including
   the header search box) must stay at/above it on every viewport, not just narrow ones, since
   iPad portrait widths (768-1024px) fall outside the old max-width:760px mobile-only fix. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0px 1000px #140b26 inset;-webkit-text-fill-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}
/* This had no light-theme variant -- Chrome's autofill highlight was forcing the DARK theme's
   #140b26 field color inset-shadow onto every autofilled input even on a light-themed page,
   the exact "unmatched background" pattern as the select-dropdown fix above, just for
   Chrome autofill instead of native <option> lists. Matches .field input's own light-theme
   background (#f6f2fc, set further down) so an autofilled field looks identical to a
   manually-typed one. */
[data-theme="light"] input:-webkit-autofill,[data-theme="light"] input:-webkit-autofill:hover,[data-theme="light"] input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0px 1000px #f6f2fc inset;-webkit-text-fill-color:var(--text);
}
/* Native date/time pickers on the dark theme — make the calendar icon visible & clickable */
input[type="date"],input[type="month"],input[type="time"],input[type="datetime-local"],input[type="week"]{color-scheme:dark}
[data-theme="light"] input[type="date"],[data-theme="light"] input[type="month"],[data-theme="light"] input[type="time"],[data-theme="light"] input[type="datetime-local"],[data-theme="light"] input[type="week"]{color-scheme:light}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);opacity:.95;cursor:pointer}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator{filter:none}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:#0e1530;color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
tr:hover td{background:#0e1530}
.pill{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;display:inline-block}
.pill.ok{background:rgba(34,197,94,.15);color:#86efac}
.pill.exp{background:rgba(239,68,68,.15);color:#fca5a5}
/* Neutral "still in progress" state -- distinct from .exp (red = something's actually wrong,
   e.g. an expired license) so a normal pending status (a referral that hasn't converted yet,
   a fee that's partway through its payment schedule) doesn't read as an error. */
.pill.pending{background:rgba(245,196,81,.15);color:#f5c451}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-weight:600}
.flash.ok{background:rgba(34,197,94,.12);color:#86efac;border:1px solid #1f5132}
.flash.err{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid #5a2a2a}

/* ===== scroll reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:26px 18px;
  display:flex;flex-direction:column;justify-content:center}
.stat .num{font-size:36px;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:6px}

/* ===== testimonials ===== */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column}
.tcard .stars{color:var(--gold);margin-bottom:10px;letter-spacing:2px}
.tcard p{color:var(--muted)}
.tcard .who{display:flex;align-items:center;gap:10px;margin-top:auto}
.tcard .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--green));
  display:grid;place-items:center;color:#170a2e;font-weight:800}
.tcard .who b{display:block} .tcard .who span{color:var(--muted);font-size:13px}

/* ===== FAQ accordion ===== */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:0 18px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details>p{color:var(--muted);padding:0 0 16px;margin:0}

/* ===== payment badges ===== */
.paybadges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.paybadges .pb{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;color:var(--muted);font-weight:700;font-size:14px}

/* ===== checkout trust row ===== */
.trust-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.trust-row .ti{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}

/* ===== LIGHT THEME ===== */
:root[data-theme="light"]{
  --bg:#f3eefb; --bg2:#faf8fd; --panel:#ffffff;
  --line:#e6def5; --text:#170a2e; --muted:#6b5b8a; --gold2:#9333ea;
  color-scheme: light;
}
:root[data-theme="light"][data-accent="gold"]{
  --bg:#eef1f7; --bg2:#f7f9fc; --panel:#ffffff;
  --line:#e3e8f0; --text:#0b1020; --muted:#566074; --gold2:#c98f12;
  --gold-rgb:245,196,81; --gold2-rgb:201,143,18;
}
[data-theme="light"] body{background:radial-gradient(1200px 600px at 80% -10%,#ffffff 0%,var(--bg) 55%);color:var(--text)}
[data-theme="light"] header.nav{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
[data-theme="light"] .menu a{color:var(--muted)}
[data-theme="light"] .menu a:hover,[data-theme="light"] .menu a.active{color:var(--text)}
[data-theme="light"] .card,[data-theme="light"] .plan,[data-theme="light"] .stat,[data-theme="light"] .tcard,[data-theme="light"] .step,[data-theme="light"] .faq details,[data-theme="light"] .auth{background:#ffffff;border-color:var(--line)}
[data-theme="light"] .btn.ghost{color:var(--text);border-color:var(--line)}
[data-theme="light"] table{background:#ffffff}
[data-theme="light"] th{background:var(--bg);color:var(--gold2)}
[data-theme="light"] tr:hover td{background:var(--bg2)}
[data-theme="light"] code,[data-theme="light"] .kbd{background:var(--bg);color:var(--gold2);border-color:var(--line)}
[data-theme="light"] .note{color:#1e3a6b}
[data-theme="light"] .warn{color:#7a1f1f}
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea{background:#f6f2fc;color:var(--text);border-color:var(--line)}
[data-theme="light"][data-accent="gold"] .field input,[data-theme="light"][data-accent="gold"] .field select,[data-theme="light"][data-accent="gold"] .field textarea{background:#f1f4fa}
/* flip common hard-coded dark fills (inputs, tiles) */
[data-accent="gold"] [style*="#140b26"]{background:#0a0f1f !important}
[data-theme="light"] [style*="#140b26"]{background:#f6f2fc !important;color:#170a2e !important}
[data-theme="light"][data-accent="gold"] [style*="#140b26"]{background:#f1f4fa !important;color:#0b1020 !important}
[data-theme="light"] [style*="#0e1530"]{background:#faf5ff !important}
/* keep market widgets on dark cards so TradingView (dark) stays readable */
[data-theme="light"] .tv-wrap{background:#150f28;border-color:rgba(245,196,81,.3)}
[data-theme="light"][data-accent="gold"] .tv-wrap{background:#0e1428;border-color:rgba(245,196,81,.3)}
[data-theme="light"] .buybar{background:rgba(255,255,255,.97)}
[data-theme="light"] .buybar .bp{color:var(--text)}

/* theme toggle button */
.theme-toggle{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;width:44px;height:44px;cursor:pointer;font-size:17px;display:inline-grid;place-items:center;flex:0 0 auto}
.theme-toggle:hover{border-color:var(--gold)}
.theme-toggle.floating{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9000;background:var(--panel);box-shadow:0 6px 20px rgba(0,0,0,.35)}

.push-enable-banner{position:fixed;left:0;right:0;bottom:0;z-index:99998;background:var(--panel);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;box-shadow:0 -8px 24px rgba(0,0,0,.3)}

/* ===== site-wide search (icon that expands into a keyword search box) ===== */
.bm-search{position:relative;display:flex;align-items:center;flex:0 0 auto}
.bm-search-btn{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;width:44px;height:44px;cursor:pointer;font-size:16px;display:inline-grid;place-items:center;flex:0 0 auto;z-index:2}
.bm-search-btn:hover{border-color:var(--gold);color:var(--gold)}
.bm-search.open .bm-search-btn{border-color:var(--gold);color:var(--gold)}
.bm-search-box{width:0;opacity:0;overflow:hidden;transition:width .22s ease,opacity .18s ease;margin-left:0}
.bm-search.open .bm-search-box{width:240px;opacity:1;margin-left:8px}
.bm-search-input{width:100%;padding:9px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:16px}
.bm-search-input:focus{outline:none;border-color:var(--gold)}
.bm-search-panel{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:8px;display:none;max-height:70vh;overflow-y:auto;z-index:2000}
.bm-search.open .bm-search-panel.has-results{display:block}
.bm-search-cat{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 10px 4px}
.bm-search-item{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--text)}
.bm-search-item:hover,.bm-search-item.active{background:var(--panel2);color:var(--text)}
.bm-search-item .t{font-weight:700;font-size:13.5px;display:block}
.bm-search-item .d{color:var(--muted);font-size:12px;display:block;margin-top:2px;line-height:1.4}
.bm-search-empty{padding:16px 10px;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:640px){
  .bm-search.open .bm-search-box{width:150px}
  .bm-search-panel{position:fixed;left:16px;right:16px;top:70px;width:auto;max-width:none}
}

/* ===== "Market" nav submenu — desktop only. assets/site.js groups Analysis/News/
   Correlation/Results into this dropdown above the 860px drawer breakpoint, and
   un-groups them below it, so the mobile drawer always sees the original flat links. ===== */
.menu-drop{position:relative}
.menu-drop .drop-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:180px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:500}
/* Invisible hover bridge covering the 14px visual gap above the panel — without it, the
   mouse crosses a dead zone moving from the toggle down to the panel and :hover drops,
   snapping the panel closed before a sub-link can be clicked. Pure CSS fix, no JS timers. */
.menu-drop .drop-panel::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.menu-drop:hover .drop-panel,.menu-drop.open .drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu-drop .drop-panel a{padding:8px 14px;border-radius:8px;white-space:nowrap;display:block}
.menu-drop .drop-panel a:hover{background:var(--panel2)}

/* ===== mobile / Android compatibility ===== */
/* overflow-x:hidden lives on html ONLY, not body -- per spec, body's own overflow normally
   propagates up to the viewport (html) when html itself specifies no overflow, so a single
   html-level rule is enough to stop stray horizontal scroll. Declaring it on BOTH html and
   body (as this used to) suppresses that propagation and makes body become its OWN separate
   scroll container nested inside html's -- two independent scrolling boxes instead of one,
   which is what was intermittently breaking header.nav's position:sticky (it would stick
   relative to whichever box the browser picked, and "unstick" when that didn't match the
   one actually being scrolled) -- the "menu bar hiding while scrolling" bug. */
html{overflow-x:hidden}
body{max-width:100%}
img,svg,iframe,canvas,video{max-width:100%}
@media(max-width:760px){
  /* tables scroll instead of breaking the page width */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 16px inputs prevent mobile auto-zoom on focus */
  .field input,.field select,input[type=text],input[type=email],input[type=password],input[type=number]{font-size:16px}
  .hero{padding-left:0;padding-right:0}
}
@media(max-width:860px){
  /* tighten header so it never overflows on small screens */
  .nav-inner{gap:10px}
  .nav-cta{gap:8px}
  /* lift floating widgets above the sticky bottom buy bar */
  #bmcb-btn{bottom:80px !important}
  #bmcb-win{bottom:146px !important}
  .bm-contact{bottom:146px !important}
  .bm-toast{display:none !important}
}

/* ===== animated hero background ===== */
.hero{position:relative;z-index:0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(38% 38% at 20% 30%, rgba(var(--gold-rgb),.18), transparent 60%),
   radial-gradient(38% 38% at 80% 20%, rgba(34,197,94,.16), transparent 60%),
   radial-gradient(40% 40% at 60% 85%, rgba(59,130,246,.14), transparent 60%);
  filter:blur(8px);animation:heroFloat 18s ease-in-out infinite alternate}
@keyframes heroFloat{0%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2%) scale(1.05)}100%{transform:translate(-2%,2%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* ===== live BTC chip in header ===== */
.btc-chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--text);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.btc-chip .b{color:#f7931a;font-weight:900}
.btc-chip .c.up{color:#22c55e}.btc-chip .c.down{color:#ef4444}
@media(max-width:1040px){.btc-chip{display:none}}

/* ===== gallery + lightbox ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery figure{margin:0}
.gallery img{width:100%;height:210px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;transition:.2s;background:#170a2e}
.gallery img:hover{transform:translateY(-3px);border-color:var(--gold)}
.gallery figcaption{color:var(--muted);font-size:13px;margin-top:8px;text-align:center}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;place-items:center;z-index:10000;padding:24px}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .x{position:absolute;top:8px;right:16px;color:#fff;font-size:34px;cursor:pointer;line-height:1;padding:12px;min-width:44px;min-height:44px;display:grid;place-items:center}
@media(max-width:860px){.gallery{grid-template-columns:1fr}}

/* ===== calculator cards (equal height, aligned buttons/results) ===== */
.calc-card{display:flex;flex-direction:column}
.calc-card > button{margin-top:auto}
.calc-out{background:linear-gradient(135deg,#10204a,var(--bg2));border:1px solid var(--gold);border-radius:12px;padding:18px;margin-top:14px;text-align:center}
.calc-out .big{font-size:30px;font-weight:900;color:var(--gold)}
.calc-out .lbl{color:var(--muted);font-size:13px}

/* ===== live pulse dot ===== */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px;vertical-align:middle;animation:livePulse 1.4s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* ===== mobile sticky buy bar ===== */
.buybar{display:none}

@media(max-width:860px){
  .g3,.g4,.g2,.price{grid-template-columns:1fr}
  /* The fixed 340px card height above exists to align cards against their ROW-mates -- with
     only one column here, there's nothing to align against, so it'd just force unnecessary
     scrollboxes on cards that would otherwise read fine at their natural height. Still caps
     the genuinely long ones (Notifications) so they can't eat the whole viewport. */
  #tab-settings .grid.g3 .card{height:auto;max-height:60vh}
  /* Grid/flex items default to min-width:auto (their content's own natural minimum), NOT 0 --
     the classic gotcha where a single-column grid still gets forced wider than the viewport
     because some child (a fixed-width input, an unbreakable row of buttons) refuses to shrink
     below its intrinsic size. overflow-x:hidden on body then hides the excess rather than
     showing a scrollbar, which is what "every card's right edge is cut off" on a phone
     actually was -- confirmed against real device screenshots, not theoretical. This is the
     general-purpose fix; specific offenders (e.g. dashboard.php's Settings-tab inputs that
     had a literal inline style="width:200px") were also fixed at the source. */
  .grid > *,.card,.field{min-width:0}
  .card{padding:20px}
  /* Dashboard's row of action cards (Account Statement, Annual Payment Summary, P2P, Messages,
     Calls, Activity History) collapses to one full-width column here — a short heading/button
     left-aligned
     against all that empty space reads as "off-center", especially inside the installed
     Android app, which always renders at this same narrow width. Scoped to this one grid
     (not .g2 generally, which is reused all over admin.php's forms/tables where centering
     would break things) via the dash-action-grid class on dashboard.php's wrapping div. */
  .dash-action-grid > div{text-align:center}
  .dash-action-grid .card{align-items:center}
  .stats,.testi{grid-template-columns:repeat(2,1fr)}
  .testi{grid-template-columns:1fr}
  /* CRITICAL: backdrop-filter makes the header a containing block for position:fixed,
     which traps the drawer inside the 66px bar. Remove it on mobile so the fixed
     drawer sizes against the viewport (full height). Use a solid bar instead. */
  header.nav{background:rgba(11,16,32,.98);backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-theme="light"] header.nav{background:rgba(255,255,255,.98)}
  /* When the drawer is open, lift the whole header (and the drawer inside it)
     ABOVE the body-level backdrop (z-index 9998) so drawer links are tappable.
     Sticky creates a stacking context that would otherwise trap the drawer below it. */
  body.menu-open header.nav{z-index:10000}
  .menu{display:none}
  .nav-cta{display:none}              /* declutter: its links move into the drawer */
  .burger{display:inline-flex !important;z-index:60}
  /* ===== attractive app-style slide-in drawer ===== */
  .menu.open{display:flex !important;position:fixed;top:0;right:0;bottom:0;left:auto;width:86%;max-width:340px;
    z-index:9999;flex:0 0 auto;flex-direction:column;gap:2px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    align-items:stretch;justify-content:flex-start;      /* override desktop centering */
    background:linear-gradient(180deg,#13213f 0%,#0b1122 55%);padding:0 0 18px;
    border-left:1px solid rgba(var(--gold2-rgb),.45);box-shadow:-22px 0 60px rgba(0,0,0,.7);
    border-top-left-radius:18px;border-bottom-left-radius:18px;animation:bmSlide .26s cubic-bezier(.22,1,.36,1)}
  [data-theme="light"] .menu.open{background:linear-gradient(180deg,#ffffff,#eef1f7)}
  /* hide the bar's brand/toggle/burger while the drawer covers them (no duplicate/peek) */
  body.menu-open .brand,body.menu-open .theme-toggle,body.menu-open .burger,body.menu-open .bm-search{opacity:0;pointer-events:none}
  /* drawer header: brand + close button, sticky at top */
  .menu.open .menu-head{display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;padding:16px 16px 14px;margin-bottom:8px;
    background:linear-gradient(180deg,#16264a,rgba(22,38,74,0));border-bottom:1px solid rgba(255,255,255,.08)}
  [data-theme="light"] .menu.open .menu-head{background:#fff;border-bottom-color:rgba(0,0,0,.08)}
  .menu-head .mh-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--text)}
  .menu-head .mh-brand .dot{width:28px;height:28px;object-fit:contain;display:block;flex:0 0 auto}
  .menu-close{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;
    color:var(--text);font-size:23px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s}
  .menu-close:hover,.menu-close:active{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold2-rgb),.12)}
  /* nav rows: icon tile + label + chevron */
  .menu.open>a{display:flex !important;align-items:center;gap:13px;
    padding:12px 14px;margin:0 10px;border-radius:12px;font-size:15.5px;font-weight:600;text-align:left;
    color:var(--text) !important;border:0;transition:background .15s,transform .1s}
  .menu.open>a::before{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
  .menu.open>a::after{content:"\203A";margin-left:auto;font-size:20px;font-weight:700;opacity:.3}
  [data-theme="light"] .menu.open>a{color:#170a2e !important}
  [data-theme="light"] .menu.open>a::before{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
  .menu.open>a:hover,.menu.open>a:active{background:rgba(var(--gold2-rgb),.12);color:var(--gold) !important}
  .menu.open>a:active{transform:scale(.99)}
  .menu.open>a.active{color:var(--gold) !important;background:linear-gradient(90deg,rgba(var(--gold2-rgb),.18),rgba(var(--gold2-rgb),.02))}
  .menu.open>a.active::before{background:rgba(var(--gold2-rgb),.22);border-color:rgba(var(--gold2-rgb),.5)}
  .menu.open>a.active::after{opacity:.85}
  /* per-item emoji icons */
  .menu.open>a[href^="index"]::before{content:"\1F3E0"}
  .menu.open>a[href^="products"]::before{content:"\1F6CD"}
  .menu.open>a[href^="performance"]::before{content:"\1F4C8"}
  .menu.open>a[href^="analysis"]::before{content:"\1F4CA"}
  .menu.open>a[href^="news"]::before{content:"\1F4F0"}
  .menu.open>a[href^="correlation"]::before{content:"\1F517"}
  .menu.open>a[href^="signals"]::before{content:"\1F4E1"}
  .menu.open>a[href^="account-manager"]::before{content:"\1F91D"}
  .menu.open>a[href^="contact"]::before{content:"\2709"}
  .menu.open>a[href^="setup"]::before{content:"\2699"}
  /* Logged-in drawer items -- exact-match hrefs (not prefix) for the dashboard.php#tab links
     so they don't also get caught by the [href="dashboard.php"] gold-CTA rule below. */
  .menu.open>a[href^="p2p-market"]::before{content:"\1F504"}
  .menu.open>a[href="dashboard.php#products"]::before{content:"\1F6CD"}
  .menu.open>a[href="dashboard.php#signals"]::before{content:"\1F4E1"}
  .menu.open>a[href="dashboard.php#wallet"]::before{content:"\1F4B0"}
  .menu.open>a[href^="messages"]::before{content:"\1F4AC"}
  .menu.open>a[href^="group-chat"]::before{content:"\1F465"}
  .menu.open>a[href^="call-log"]::before{content:"\1F4DE"}
  .menu.open>a[href="dashboard.php#referrals"]::before{content:"\1F381"}
  .menu.open>a[href="dashboard.php#associate"]::before{content:"\1F91D"}
  .menu.open>a[href="dashboard.php#profile"]::before{content:"\1F464"}
  .menu.open>a[href="dashboard.php#settings"]::before{content:"\2699"}
  .menu.open>a[href^="partnership"]::before{content:"\1F91D"}
  .menu.open>a[href^="roadmap"]::before{content:"\1F5FA"}
  .menu.open>a[href^="app.php"]::before{content:"\1F4F2"}
  /* cloned Login -> highlighted gold button -- exact match on "dashboard.php" only, NOT a
     prefix match, so it doesn't also catch the dashboard.php#wallet/#profile/#settings tab
     links above (an earlier [href^="dashboard"] prefix rule did, silently painting them as
     the big gold CTA button instead of a normal drawer row). */
  .menu.open>a[href^="login"],.menu.open>a[href^="signup"],.menu.open>a[href^="logout"],.menu.open>a[href="dashboard.php"]{justify-content:center;margin:12px 12px 4px;padding:13px 16px;font-weight:800;border-radius:12px;
    background:linear-gradient(135deg,var(--gold),var(--gold2));color:#170a2e !important;box-shadow:0 8px 20px rgba(var(--gold2-rgb),.28)}
  .menu.open>a[href^="login"]::before,.menu.open>a[href^="login"]::after,.menu.open>a[href^="signup"]::before,.menu.open>a[href^="signup"]::after,.menu.open>a[href^="logout"]::before,.menu.open>a[href^="logout"]::after,.menu.open>a[href="dashboard.php"]::before,.menu.open>a[href="dashboard.php"]::after{display:none}
  .menu.open>a[href^="login"]:hover,.menu.open>a[href^="login"]:active,.menu.open>a[href^="signup"]:hover,.menu.open>a[href^="signup"]:active,.menu.open>a[href^="logout"]:hover,.menu.open>a[href^="logout"]:active,.menu.open>a[href="dashboard.php"]:hover,.menu.open>a[href="dashboard.php"]:active{filter:brightness(1.06);color:#170a2e !important;transform:none}
  /* footer quick-contact */
  .menu.open .menu-foot{display:block;margin:10px 16px 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
  [data-theme="light"] .menu.open .menu-foot{border-top-color:rgba(0,0,0,.08)}
  .menu-foot .mf-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
  .menu-foot .mf-links{display:flex;gap:8px}
  .menu-foot .mf-links a{flex:1;justify-content:center;padding:11px 8px;border-radius:11px;font-size:13px;font-weight:700;
    display:flex;align-items:center;gap:6px;color:var(--text) !important;border:1px solid var(--line);text-align:center}
  .menu-foot .mf-links a.wa{background:rgba(37,211,102,.13);border-color:rgba(37,211,102,.4)}
  .menu-foot .mf-links a.tg{background:rgba(34,158,217,.13);border-color:rgba(34,158,217,.4)}
  @keyframes bmSlide{from{transform:translateX(105%)}to{transform:none}}
  /* full-screen drawer on phones (covers the bar entirely — no peek) */
  @media(max-width:560px){
    .menu.open{width:100%;max-width:none;border-radius:0;border-left:0}
  }
  /* sticky buy bar */
  .buybar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9000;background:rgba(14,20,40,.97);
    backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 14px;gap:12px;align-items:center;justify-content:space-between}
  .buybar .bp{font-weight:800;font-size:14px;color:var(--text)}
  .buybar .bp small{display:block;color:#86efac;font-weight:700;font-size:12px}
  body:not([data-nobuybar]){padding-bottom:66px}
}

/* ============================================================
   ===============  PREMIUM OVERHAUL (v3)  ====================
   ============================================================ */

/* ---- 1. Typography ---- */
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.1px}
h1,h2,h3,.hero h1,.section-head h2,.plan .amt,.stat .num,.brand,.amt,.calc-out .big,.menu-head .mh-brand{
  font-family:"Space Grotesk","Inter",system-ui,sans-serif;letter-spacing:-.3px}
.hero h1{letter-spacing:-1.5px}
.eyebrow{font-weight:600;letter-spacing:1.4px;text-transform:uppercase;font-size:12px}

/* ---- 2. Custom scrollbar + selection + focus ---- */
::selection{background:rgba(var(--gold-rgb),.28);color:#fff}
[data-theme="light"] ::selection{color:#170a2e}
*{scrollbar-width:thin;scrollbar-color:#2c3a63 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2c3a63,#1c2748);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold2),#8a6a15);background-clip:padding-box}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}

/* ---- skip-to-content link: hidden off-screen until keyboard-focused ---- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:99999;
  background:var(--panel);color:var(--text);border:2px solid var(--gold);
  padding:10px 18px;border-radius:8px;font-weight:700;font-size:14px;
  transition:top .15s ease;text-decoration:none;
}
.skip-link:focus{
  top:12px;outline:2px solid var(--gold);outline-offset:2px;
}

/* ---- 3. Subtle noise texture over the whole page (adds depth) ---- */
body::after{content:"";position:fixed;inset:0;z-index:9996;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
[data-theme="light"] body::after{opacity:.05;mix-blend-mode:multiply}

/* ---- 4. Glass gradient-border cards (premium depth) ---- */
.card,.plan,.stat,.tcard{
  border:1px solid transparent;border-radius:16px;
  background:
    linear-gradient(180deg,var(--panel),var(--bg2)) padding-box,
    linear-gradient(140deg,rgba(var(--gold-rgb),.42),rgba(34,197,94,.15) 42%,rgba(59,130,246,.14)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -26px rgba(0,0,0,.8);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s}
[data-theme="light"] .card,[data-theme="light"] .plan,[data-theme="light"] .stat,[data-theme="light"] .tcard{
  background:
    linear-gradient(180deg,#ffffff,#f6f8fc) padding-box,
    linear-gradient(140deg,rgba(201,143,18,.5),rgba(34,197,94,.22) 42%,rgba(59,130,246,.18)) border-box;
  box-shadow:0 18px 40px -28px rgba(15,30,70,.5)}
.card:hover,.plan:hover,.stat:hover,.tcard:hover{border-color:transparent;transform:translateY(-5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--gold-rgb),.16)}
.plan.pop{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(var(--gold-rgb),.28), 0 0 0 1px rgba(var(--gold-rgb),.35)}

/* ---- 5. Premium buttons: shine sweep + glow ---- */
.btn{position:relative;overflow:hidden;font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;letter-spacing:.2px}
.btn:not(.ghost){box-shadow:0 8px 22px -8px rgba(var(--gold-rgb),.55)}
.btn.green:not(.ghost){box-shadow:0 8px 22px -8px rgba(34,197,94,.55)}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-22deg);transition:left .65s ease}
.btn:hover::after{left:150%}

/* ---- 6. Hero: moving grid overlay on top of existing aurora ---- */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 78%);
  animation:gridPan 22s linear infinite}
@keyframes gridPan{to{background-position:46px 46px}}

/* ---- 7. Scroll progress bar ---- */
#bm-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9990;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--green));box-shadow:0 0 12px rgba(var(--gold-rgb),.7)}

/* ---- 8. Skeleton shimmer for TradingView widgets while loading ---- */
.tv-wrap{position:relative}
.tv-wrap.tv-loading::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(100deg,rgba(255,255,255,.02) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.02) 70%);
  background-size:200% 100%;animation:shimmer 1.25s linear infinite}
.tv-wrap.tv-loading::after{content:"Loading live data…";position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.4px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---- 8b. Skeleton shimmer for individual live stat values (BTC / MT5 widgets) ---- */
.skeleton{color:transparent!important;border-radius:6px;display:inline-block;min-width:80px;
  background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 70%)!important;
  background-size:200% 100%;animation:shimmer 1.25s linear infinite}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}

/* ---- 8c. Comparison table: highlighted "Most Popular" column ---- */
.cmp-table td.pop-col{background:rgba(var(--gold-rgb),.07)}
.cmp-table th.pop-col{background:rgba(var(--gold-rgb),.20);color:var(--gold)}

/* ---- 9. Testimonials polish (avatars + quote mark) ---- */
.tcard{position:relative;overflow:hidden}
.tcard::before{content:"\201C";position:absolute;top:-14px;right:14px;font-family:Georgia,serif;font-size:96px;line-height:1;
  color:var(--gold);opacity:.10}
.tcard .stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:8px}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard .who .av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;color:#170a2e;font-family:"Space Grotesk",sans-serif;
  background:linear-gradient(135deg,var(--gold),var(--green));box-shadow:0 6px 16px -6px rgba(var(--gold-rgb),.6)}
.tcard .who b{display:block;font-size:15px}
.tcard .who span{color:var(--muted);font-size:12.5px}

/* ---- 10. Bento feature grid (opt-in .bento) ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;grid-auto-flow:dense}
.bento>*{margin:0}
.bento>:nth-child(1){grid-column:span 2;grid-row:span 2;
  background:
    linear-gradient(150deg,#16224a,var(--bg2)) padding-box,
    linear-gradient(140deg,rgba(var(--gold-rgb),.6),rgba(34,197,94,.2)) border-box;
  display:flex;flex-direction:column;justify-content:center}
.bento>:nth-child(1) .ico{width:60px;height:60px;font-size:30px;border-radius:16px}
.bento>:nth-child(1) h3{font-size:clamp(22px,3vw,28px)}
.bento>:nth-child(1) p{font-size:16px;max-width:46ch}

/* ---- 11. Reveal / parallax on scroll ---- */
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---- 12. App-like bottom tab bar (mobile) ---- */
#bm-tabbar{display:none}
@media(max-width:860px){
  #bm-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9200;
    background:rgba(12,18,36,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
    justify-content:space-around;align-items:stretch}
  [data-theme="light"] #bm-tabbar{background:rgba(255,255,255,.94)}
  #bm-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);font-size:10.5px;font-weight:700;padding:4px 2px;border-radius:12px;transition:.15s;position:relative}
  #bm-tabbar a .ti{font-size:20px;line-height:1;transition:transform .15s}
  #bm-tabbar a:active{background:rgba(var(--gold-rgb),.10)}
  #bm-tabbar a.active{color:var(--gold)}
  #bm-tabbar a.active .ti{transform:translateY(-2px) scale(1.08)}
  #bm-tabbar a.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;
    border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gold),var(--green))}
  /* make room above the tab bar; replaces the old buy bar */
  body:not([data-nobuybar]){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .buybar{display:none !important}
  /* lift floating widgets above the tab bar */
  #bmcb-btn{bottom:78px !important}
  #bmcb-win{bottom:150px !important}
  .bm-contact{bottom:150px !important}
  .theme-toggle.floating{bottom:78px !important}
  .push-enable-banner{bottom:66px !important}
}

/* ---- 13. Snap carousel for testimonials on mobile ---- */
@media(max-width:760px){
  .testi{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 2px 14px;margin:0 -22px;padding-left:22px;padding-right:22px}
  .testi::-webkit-scrollbar{display:none}
  .testi>.tcard{flex:0 0 84%;scroll-snap-align:center}
  .bento{grid-template-columns:1fr}
  .bento>:nth-child(1){grid-column:auto;grid-row:auto}
}

/* ---- 15. Advanced chat (p2p-trade.php + messages.php, driven by assets/site.js's
   window.initChatEnhancer) — one shared stylesheet section since both pages' chat markup is
   identical (.chat-msg/.bubble/.chat-box base styles stay page-local, matching how they
   already were before this feature; only the NEW classes below live here). ---- */
.presence-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--muted);border:2px solid var(--panel)}
.presence-dot.online{background:#34d399}
.chat-avatar{position:relative}
/* Inline text variant for contexts with no circular avatar to anchor a corner dot to (e.g.
   p2p-market.php's ad rows, which show a poster's name as plain text) -- only ever rendered
   when actually online, so it reads as a positive signal rather than cluttering every row
   with an offline/last-seen state that adds little value in a listing context. */
.online-tag{color:#34d399;font-size:11px;font-weight:700;margin-left:2px}
.date-sep{display:flex;justify-content:center;margin:14px 0}
.date-sep span{background:var(--panel2,var(--panel));color:var(--muted);font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;border:1px solid var(--line)}
.reply-quote{border-left:3px solid var(--gold);background:rgba(255,255,255,.04);padding:6px 10px;border-radius:8px;font-size:12.5px;color:var(--muted);margin-bottom:4px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edited-tag{font-size:11px;color:var(--muted);font-style:italic;margin-left:4px}
.reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.reaction-pill{background:var(--panel2,rgba(255,255,255,.06));border:1px solid var(--line);border-radius:12px;padding:1px 7px;font-size:13px}
.msg-ticks{font-size:11px;margin-top:2px;text-align:right;color:var(--muted)}
.msg-ticks.tick-read{color:#3b82f6}
.deleted-bubble{font-style:italic;color:var(--muted);background:transparent!important;border:1px dashed var(--line)!important}
/* Always visible, inline in the timestamp row -- NOT hover-revealed. An earlier version hid
   it until :hover on the bubble, which doesn't reliably fire on touch devices (confirmed
   unreachable on the Android app in practice), so it's now just a small permanent button
   instead of a cleverer-looking one nobody could actually find. */
.who{display:flex;align-items:center;gap:6px}
.msg-actions-btn{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1;cursor:pointer;flex-shrink:0;padding:0}
.msg-actions-btn:hover,.msg-actions-btn:active{background:rgba(255,255,255,.16);color:var(--text)}
.chat-msg{position:relative}
.chat-link-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(var(--gold-rgb),.12);color:var(--gold);padding:1px 8px;border-radius:10px;text-decoration:none;font-size:13px}
/* @mention highlight inside a rendered chat bubble (group chat only) */
.mention{color:var(--gold);font-weight:700}
/* composer @mention-autocomplete dropdown, anchored above the message input */
.mention-suggest{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);max-height:180px;overflow-y:auto;z-index:60}
.mention-suggest-item{display:block;width:100%;text-align:left;background:transparent;border:0;padding:9px 12px;color:var(--text);font-size:14px;cursor:pointer}
.mention-suggest-item:hover{background:rgba(var(--gold2-rgb),.14);color:var(--gold)}
/* pinned group description shown under the group name in the chat header */
.chat-head-topic{color:var(--muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
/* voice-message bubble: <audio> + its playback-speed cycle button */
.voice-wrap{display:flex;align-items:center;gap:6px;margin-top:6px}
.audio-speed-btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 8px;font-size:11.5px;font-weight:700;cursor:pointer;flex:0 0 auto}
.audio-speed-btn:hover{border-color:var(--gold);color:var(--gold)}
.typing-indicator{padding:4px 20px;font-size:12px;color:var(--muted);font-style:italic}
.reply-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 20px;border-top:1px solid var(--line);background:rgba(255,255,255,.03);font-size:13px}
.reply-banner-content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-banner-label{font-weight:700;color:var(--gold)}
.reply-banner button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px}
.chat-action-menu{position:absolute;z-index:9500;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.4);padding:8px;min-width:170px;max-height:min(60vh,380px);overflow-y:auto}
.chat-action-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.chat-action-menu button:hover{background:rgba(255,255,255,.06)}
.quick-reactions{display:flex;gap:2px;padding:4px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.quick-react-btn{background:none;border:none;font-size:19px;padding:4px;cursor:pointer;border-radius:6px;flex:1}
.quick-react-btn:hover{background:rgba(255,255,255,.08)}
.chat-modal{position:fixed;inset:0;z-index:9600;background:rgba(8,4,16,.7);display:flex;align-items:center;justify-content:center;padding:20px}
.chat-modal-inner{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.exit-modal{position:fixed;inset:0;z-index:9700;background:rgba(8,4,16,.72);display:none;align-items:center;justify-content:center;padding:20px}
.exit-modal.open{display:flex}
.exit-modal-inner{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 26px;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(0,0,0,.5);position:relative;text-align:center}
.exit-modal-inner .em-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center}
.exit-modal-inner .em-close:hover{border-color:var(--gold);color:var(--gold)}
.exit-modal-inner h3{margin:6px 0 10px;font-size:21px}
.exit-modal-inner p{color:var(--muted);margin-bottom:20px;font-size:14px}
.exit-modal-inner .em-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:480px){.exit-modal-inner{padding:22px 18px}}
.chat-modal-inner input[type=text]{width:100%;padding:11px 14px;border-radius:10px;background:#140b26;border:1px solid var(--line);color:var(--text);font-size:14px}
[data-theme="light"] .chat-modal-inner input[type=text]{background:#f6f2fc;color:var(--text)}
.chat-forward-results{max-height:220px;overflow-y:auto;margin-top:10px}
.chat-forward-row{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px}
.chat-forward-row:hover{background:rgba(255,255,255,.06)}
.chat-search-row{display:flex;align-items:center;gap:8px;padding:8px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.chat-search-row input{flex:1;padding:8px 12px;border-radius:8px;background:#140b26;border:1px solid var(--line);color:var(--text);font-size:13px}
[data-theme="light"] .chat-search-row input{background:#f6f2fc;color:var(--text)}
.search-count{font-size:12px;color:var(--muted);white-space:nowrap}
.chat-msg.search-match .bubble{outline:1px solid rgba(var(--gold-rgb),.4)}
.chat-msg.search-current .bubble{outline:2px solid var(--gold)}
.unread-badge{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#11161f;font-size:11px;font-weight:800;padding:1px 7px;border-radius:10px;min-width:18px;text-align:center}
.nav-unread-badge{background:var(--gold);color:#11161f;font-size:10px;font-weight:800;border-radius:9px;padding:0 5px;margin-left:4px;vertical-align:middle}
@keyframes msgEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.msg-enter{animation:msgEnter .25s ease-out}
/* Chat bubble "tail" -- a small triangle pointing toward whichever side sent it, same visual
   idea as every mainstream chat app. Purely decorative (::after), layered on top of each
   page's own pre-existing .bubble background/border-radius rather than replacing them. */
.chat-msg:not(.mine) .bubble{position:relative}
.chat-msg:not(.mine) .bubble::after{content:"";position:absolute;left:-6px;bottom:0;width:12px;height:14px;background:inherit;border-bottom-right-radius:12px;clip-path:polygon(100% 0,0 100%,100% 100%)}
.chat-msg.mine .bubble{position:relative}
.chat-msg.mine .bubble::after{content:"";position:absolute;right:-6px;bottom:0;width:12px;height:14px;background:inherit;border-bottom-left-radius:12px;clip-path:polygon(0 0,100% 100%,0 100%)}

/* ---- 15.5 Chat safety/trust batch: block/report, pin, transcript export, media gallery,
   global search, draft auto-save, jump-to-bottom, unread divider (p2p-trade.php +
   messages.php, driven by assets/site.js's window.initChatEnhancer extensions). ---- */
.chat-safety-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 20px;background:rgba(245,196,81,.1);color:#f5c451;border-bottom:1px solid rgba(245,196,81,.3);font-size:12.5px}
.chat-safety-banner button{background:none;border:none;color:inherit;cursor:pointer;font-size:15px;flex-shrink:0}
.pinned-bar{padding:7px 20px;border-bottom:1px solid var(--line);background:rgba(var(--gold-rgb),.06);font-size:12.5px;cursor:pointer;position:relative}
.pinned-list{position:absolute;left:12px;right:12px;top:100%;z-index:400;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.4);padding:6px;max-height:220px;overflow-y:auto}
.pinned-row{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinned-row:hover{background:rgba(255,255,255,.06)}
.pinned-tag{font-size:12px}
.chat-msg.pinned .bubble{border:1px solid rgba(var(--gold-rgb),.35)}
.chat-box-wrap{position:relative}
.jump-to-bottom-pill{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#140b26;border:none;border-radius:20px;padding:7px 16px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.35);z-index:50}
.unread-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#f5c451;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.unread-divider::before,.unread-divider::after{content:"";flex:1;height:1px;background:rgba(245,196,81,.35)}
.chat-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:340px;overflow-y:auto}
.chat-media-cell{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.chat-media-cell img,.chat-media-cell video{width:100%;height:100%;object-fit:cover;display:block}
.chat-media-file{width:100%;height:100%;display:grid;place-items:center;font-size:28px}
/* Shimmer placeholder while a gallery thumbnail's actual bytes are still loading over the
   network -- the one spot in this server-rendered app where there's a real loading gap to
   cover (initial chat history itself is rendered synchronously by PHP, so it never needs one). */
@keyframes bmShimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skeleton-media{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);background-size:400px 100%;animation:bmShimmer 1.4s ease infinite}
.skeleton-row{height:44px;border-radius:10px;margin-bottom:6px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);background-size:400px 100%;animation:bmShimmer 1.4s ease infinite}
.global-search-row{position:relative;margin-bottom:22px}
.global-search-row input{width:100%;padding:11px 14px;border-radius:12px;background:#140b26;border:1px solid var(--line);color:var(--text);font-size:14px}
[data-theme="light"] .global-search-row input{background:#f6f2fc;color:var(--text)}
.global-search-results{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:300;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.4);padding:8px;max-height:360px;overflow-y:auto}
.global-search-result{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--text)}
.global-search-result:hover{background:rgba(255,255,255,.06)}
.gsr-context{font-size:11px;color:var(--gold);font-weight:700;margin-bottom:2px}
.gsr-text{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsr-at{font-size:11px;color:var(--muted);margin-top:2px}

/* ---- 15.6 Group text chat + star/delete-for-me/mute/archive (group-chat.php, config.php's
   PART N, driven by chat_render_message_html()'s $senderNames/$viewerEmail params and their
   window.initChatEnhancer JS mirror). ---- */
.star-tag{font-size:12px}
.chat-system-msg{text-align:center;color:var(--muted);font-size:12px;margin:4px 0;padding:0 20px}
.chat-system-msg span{background:rgba(255,255,255,.05);border-radius:10px;padding:4px 12px;display:inline-block}

/* ---- 16. Call UI polish (VexCall in assets/site.js) ---- */
/* Control row -- default (desktop/tablet) is the same centered, wrapping horizontal row this
   always was. On a short mobile viewport that row used to sit inside the overlay's normal
   vertically-centered flex flow, which could push it down into the same bottom-right band the
   FIXED-position local-video PiP is pinned to -- the two would then silently overlap, hiding
   whichever buttons wrapped onto the second row. Taking the controls out of that document flow
   entirely below (position:fixed, anchored to the left edge, independent of video/timer/etc
   content height) removes the collision at its root instead of just nudging pixels around. */
.vex-controls-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;justify-content:center}
@media(max-width:700px){
  .vex-controls-row{
    /* top/bottom (not top:50%+transform) on purpose -- position:fixed combined with a
       transform AND overflow-y:auto is a known WebKit/iOS Safari rendering hazard (the
       scrollable area can clip or fail to paint some of its own children unpredictably).
       Anchoring both edges sizes the column without needing a transform at all, and
       justify-content:center keeps the buttons visually centered in that band regardless of
       how many are showing. This was the actual cause of the CC button (and potentially
       others) not rendering on iPhone. */
    position:fixed;left:10px;top:70px;bottom:100px;
    flex-direction:column;flex-wrap:nowrap;justify-content:center;
    gap:8px;margin-top:0;overflow-y:auto;padding:4px;z-index:100002;
  }
  /* Reserves clearance on the left for the fixed button column above, so the video content
     never renders underneath it either -- both overrides need !important since the properties
     they're replacing were set inline from JS-generated markup, which otherwise always wins
     over external CSS regardless of media query or selector specificity. */
  .vex-call-overlay{padding-left:86px!important}
  #vexRemoteVideo{max-width:calc(100vw - 106px)!important}
  /* G5: collapsed by default on mobile -- #vexBtnMoreControls ("•••") toggles the .open class.
     display:contents on desktop (below, outside this media query) makes the wrapper invisible
     to layout there, so this only changes anything on a narrow viewport. */
  .vex-controls-secondary{display:none;flex-direction:column;gap:8px}
  .vex-controls-secondary.open{display:flex}
  #vexBtnMoreControls{display:flex}
  /* G4: mirrors the left-column rules above onto the right edge when the user prefers it there. */
  .vex-call-overlay.vex-controls-right{padding-left:20px!important;padding-right:86px!important}
  .vex-call-overlay.vex-controls-right .vex-controls-row{left:auto!important;right:10px}
}
.vex-controls-secondary{display:contents}
#vexBtnMoreControls{display:none}
.vex-quality-dot{position:absolute;top:18px;left:18px;display:flex;align-items:flex-end;gap:2px;padding:4px 6px;border-radius:8px;background:rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.vqb-bar{width:3px;border-radius:1px;background:#4b4b5e}
.vqb-bar:nth-child(1){height:6px}
.vqb-bar:nth-child(2){height:9px}
.vqb-bar:nth-child(3){height:12px}
.vex-quality-good .vqb-bar{background:#34d399}
.vex-quality-fair .vqb-bar:nth-child(1),.vex-quality-fair .vqb-bar:nth-child(2){background:#f5c451}
.vex-quality-poor .vqb-bar:nth-child(1){background:#ef4444}
.vgc-quality-badge{position:absolute;top:6px;left:6px;display:flex;align-items:flex-end;gap:2px;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.4);z-index:2}
.vgc-quality-badge .vqb-bar{width:2px;background:#4b4b5e}
.vgc-quality-badge .vqb-bar:nth-child(1){height:5px}
.vgc-quality-badge .vqb-bar:nth-child(2){height:8px}
.vgc-quality-badge .vqb-bar:nth-child(3){height:11px}
.vgc-quality-badge.vex-quality-good .vqb-bar{background:#34d399}
.vgc-quality-badge.vex-quality-fair .vqb-bar:nth-child(1),.vgc-quality-badge.vex-quality-fair .vqb-bar:nth-child(2){background:#f5c451}
.vgc-quality-badge.vex-quality-poor .vqb-bar:nth-child(1){background:#ef4444}
/* Small KYC-verified checkmark, reused wherever a caller/callee/participant's name is shown
   (call-log.php rows + search results, the incoming-ring modals, and the in-call overlays) --
   one class so it always looks the same regardless of which of those contexts renders it. */
.vex-verified-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;border-radius:50%;background:#34d399;color:#0d0818;font-size:10px;font-weight:900;vertical-align:middle}
/* One in-call reaction: starts near the bottom, floats up with a slight random horizontal
   drift (--vex-fly-drift, set per-instance in JS), fading out over the same 2.2s the element
   itself is removed after -- purely decorative/transient, never persisted beyond the poll. */
.vex-reaction-fly{position:absolute;bottom:18vh;font-size:38px;line-height:1;animation:vexReactionFly 2.2s ease-out forwards;pointer-events:none}
@keyframes vexReactionFly{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  15%{transform:translate(0,-6vh) scale(1);opacity:1}
  100%{transform:translate(var(--vex-fly-drift,0px),-48vh) scale(1);opacity:0}
}
@media(prefers-reduced-motion:reduce){.vex-reaction-fly{animation:none;opacity:0}}
/* Screen-share pointer -- a single click-to-point marker at an exact (already-computed-in-JS)
   viewport position, unlike the reaction's own randomized float. Fades in place, no drift. */
.vex-pointer-dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#f5c451;box-shadow:0 0 0 4px rgba(245,196,81,.35);animation:vexPointerFade 2.2s ease-out forwards;pointer-events:none}
@keyframes vexPointerFade{
  0%{transform:scale(.4);opacity:0}
  12%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:0}
}
@media(prefers-reduced-motion:reduce){.vex-pointer-dot{animation:none;opacity:0}}
/* Live-caption subtitle line -- one line, auto-cleared by JS a few seconds after the last
   caption arrives (from either side), classic video-call CC placement just above the controls. */
.vex-caption-bar{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:100003;background:rgba(8,4,16,.82);color:#fff;padding:8px 16px;border-radius:10px;font-size:14px;max-width:88vw;text-align:center}
#vexBtnCaption.active,.vgc-caption-btn.active{background:var(--gold);color:#140b26;font-weight:700}
#vexBtnDataSaver.active,#vgcBtnDataSaver.active{background:var(--gold);color:#140b26}
#vexBtnNoiseSuppress.active,#vgcBtnNoiseSuppress.active{background:var(--gold);color:#140b26}
#vgcBtnRaiseHand.active{background:var(--gold);color:#140b26}
#vexBtnRecord.active{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}
#vexBtnBlur.active{background:var(--gold);color:#140b26}
/* W2-2: speaking indicator -- a soft pulsing glow around whoever's currently talking, read from
   getStats()'s audioLevel in the same 4s poll that already drives the quality dot, no separate
   signaling needed (see startQualityMonitor()/startGroupQualityMonitor() in assets/site.js). */
@keyframes vex-speaking-pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}
.vex-speaking-indicator.vex-speaking{border-radius:12px;animation:vex-speaking-pulse 1.4s ease-out infinite}
.vgc-tile.vgc-speaking{outline:2px solid #34d399}
/* W2-3: raised-hand badge on a group-call tile -- shown/hidden per poll by updateHandRaiseBadges(). */
.vgc-hand-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:2}
/* H3: E2E encryption trust badge -- always-true for a WebRTC call by spec, pure UI. Sits below
   the quality dot on VexCall's overlay (position:fixed, so this positions relative to it) so it
   never collides with the REC indicator sharing that same top row; VexGroupCall's overlay has
   no dot in that corner at all, so it sits at the very top-left there instead. */
.vex-e2e-badge{position:absolute;top:52px;left:18px;font-size:14px;opacity:.7;cursor:default}
.vex-e2e-badge.vgc-e2e-badge{top:14px;left:14px}
/* W3-1: persistent recording indicator next to the 1:1 quality dot. */
.vex-rec-indicator{position:absolute;top:18px;left:56px;display:none;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;background:rgba(239,68,68,.9);color:#fff;font-size:11px;font-weight:700}
.vex-rec-indicator .vex-rec-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:vex-rec-blink 1.2s ease-in-out infinite}
@keyframes vex-rec-blink{0%,100%{opacity:1}50%{opacity:.25}}
/* W3-1: recording consent banner -- fixed+transform, deliberately WITHOUT overflow-y:auto (see
   the doc comment on the mobile .vex-controls-row fix above for exactly why that combination is
   a WebKit/iOS rendering hazard; this banner never scrolls so it's not at risk). */
.vex-record-request-banner{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:100005;display:none;align-items:center;gap:10px;padding:10px 16px;background:rgba(245,196,81,.14);border:1px solid rgba(245,196,81,.4);border-radius:12px;font-size:13px;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vex-record-request-banner span{color:var(--text)}
.vex-record-request-banner button{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;white-space:nowrap}
/* R6: shown to whoever is NOT the one who placed the hold -- same fixed+transform positioning
   as the request banners above (no overflow-y:auto involved, so not the WebKit hazard). */
.vex-hold-banner{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:100005;display:none;align-items:center;padding:10px 16px;background:rgba(239,68,68,.85);color:#fff;border-radius:12px;font-size:13px;font-weight:700;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#vexBtnHold.active{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}
/* Host-only per-participant controls (E2 promote / E3 remove) -- top-right corner of each
   non-local tile, hidden by default and shown/hidden by updateHostControls() based on the
   viewer's own current role, never baked in at tile-creation time. */
.vgc-host-controls{position:absolute;top:6px;right:6px;display:none;gap:4px;z-index:2}
.vgc-host-controls button{width:22px;height:22px;border-radius:50%;border:none;font-size:11px;padding:0;line-height:1;cursor:pointer}
.vgc-promote-btn{background:rgba(245,196,81,.85);color:#140b26}
.vgc-remove-btn{background:rgba(239,68,68,.85);color:#fff}
.vgc-caption-bar{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:100003;background:rgba(8,4,16,.82);color:#fff;padding:8px 16px;border-radius:10px;font-size:14px;max-width:88vw;text-align:center}
/* Post-call touchpoint quick-tags (F1, associates only) -- same pill language as the rest of
   the product's quick-action chips (quick-reactions, favorites strip). */
.vex-touchpoint-tag{padding:6px 12px;border-radius:20px;background:#140b26;border:1px solid var(--line);color:var(--text);font-size:12px;cursor:pointer}
.vex-touchpoint-tag:hover{background:var(--gold);color:#140b26;border-color:var(--gold)}
.vex-chat-drawer{position:fixed;right:16px;bottom:110px;width:min(320px,90vw);max-height:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:100003;flex-direction:column;overflow:hidden}
.vex-chat-drawer-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:280px}
.vex-chat-drawer-msg{align-self:flex-start;background:rgba(255,255,255,.06);padding:7px 12px;border-radius:12px;font-size:13px;max-width:85%;word-wrap:break-word}
.vex-chat-drawer-msg.mine{align-self:flex-end;background:var(--gold);color:#140b26}
.vex-chat-drawer-send{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.vex-chat-drawer-send input{flex:1;padding:8px 12px;border-radius:20px;background:#140b26;border:1px solid var(--line);color:var(--text);font-size:13px}
[data-theme="light"] .vex-chat-drawer-send input{background:#f6f2fc;color:var(--text)}
.vex-chat-drawer-send button{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#140b26;border:none;font-size:15px;flex-shrink:0}
.vex-rating-prompt{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 24px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:100003;flex-direction:column;align-items:center;color:var(--text)}
.vex-star{background:none;border:none;font-size:28px;color:rgba(255,255,255,.25);cursor:pointer;padding:0 3px}
.vex-star.filled{color:var(--gold)}
/* Shared live editor drawer (screen-share teaching use case) -- same fixed bottom-right panel
   position as .vex-chat-drawer, sized a bit larger since it's holding a whole text/code
   surface rather than a message list. */
.vex-editor-drawer{position:fixed;right:16px;bottom:110px;width:min(420px,92vw);height:min(360px,50vh);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:100003;flex-direction:column;overflow:hidden}
.vex-editor-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.vex-editor-header button{background:var(--gold);color:#140b26;border:none;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.vex-editor-request-banner{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(245,196,81,.12);border-bottom:1px solid rgba(245,196,81,.3);font-size:12.5px}
.vex-editor-request-banner span{flex:1;min-width:0}
.vex-editor-request-banner button{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 8px;font-size:12px;cursor:pointer;white-space:nowrap}
#vexEditorTextarea{flex:1;width:100%;height:100%;border:none;resize:none;background:#0d0818;color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;padding:12px;outline:none}
[data-theme="light"] #vexEditorTextarea{background:#f6f2fc;color:var(--text)}
#vexEditorTextarea:read-only{opacity:.7;cursor:not-allowed}
/* Small-mesh group call tile grid (window.VexGroupCall) -- up to 4 tiles, auto-fitting into a
   2x2 layout at most; a voice-only call shows initial-avatar circles instead of video since
   there's no video track to render. */
.vgc-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:12px;max-width:820px;width:100%;justify-content:center}
.vgc-tile{position:relative;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);cursor:pointer}
/* Spotlight/pin: click a tile to make it the large "speaker view" one -- a flex-wrap layout
   with the pinned tile forced to a full row (order:0, flex-basis:100%) and the rest shrunk to
   a filmstrip that wraps below it, no DOM restructuring needed. */
.vgc-grid.vgc-spotlight{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;max-width:820px}
.vgc-grid.vgc-spotlight .vgc-tile{flex:0 0 96px;height:72px;aspect-ratio:auto;order:1}
.vgc-grid.vgc-spotlight .vgc-tile.vgc-pinned{flex:1 1 100%;height:min(50vh,420px);order:0;outline:2px solid var(--gold)}
.vgc-grid-voice .vgc-tile{background:var(--panel)}
.vgc-tile video{width:100%;height:100%;object-fit:cover}
.vgc-avatar{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#140b26;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px}
.vgc-label{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
/* Subtle animated backdrop + a soft pulse around the caller name while ringing/connecting --
   purely decorative, stops mattering once media actually arrives since the video frame fills
   the same space. Same "float a couple of soft radial gradients" idea as .hero::before. */
#vexCallName{position:relative;display:inline-block}
.vex-call-connecting #vexCallName::before{content:"";position:absolute;inset:-14px -24px;z-index:-1;border-radius:20px;
  background:radial-gradient(circle,rgba(var(--gold-rgb),.16),transparent 70%);animation:vexPulse 1.8s ease-in-out infinite}
@keyframes vexPulse{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}

/* ---- 14. Respect reduced-motion ---- */
@media(prefers-reduced-motion:reduce){
  .hero::after,.btn::after,.tv-wrap.tv-loading::before{animation:none}
  .reveal{transition:none;opacity:1;transform:none}
  .msg-enter{animation:none}
  .vex-call-connecting #vexCallName::before{animation:none}
  *{scroll-behavior:auto}
}