/* terminal.css — built assets; two-step gcloud deploy trims upload via .gcloudignore */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#000000;--ink1:#0b0c0e;--ink2:#14171c;--ink3:#1c2028;--ink4:#262b35;
  --b:rgba(255,255,255,.07);--b2:rgba(255,255,255,.12);
  --border:var(--b);--border2:var(--b2);
  --t:#e8e8e8;--t2:#a3a3a3;--t3:#6b6b6b;
  --text:var(--t);--text2:var(--t2);--text3:var(--t3);
  --gr:#00ff88;--rd:#ff4d6a;
  --cred:#f5c842;--cred-dim:rgba(245,200,66,.12);
  --usdc:#2775ca;--usdc-dim:rgba(39,117,202,.12);
  --green:#00ff88;--green-dim:rgba(0,255,136,.07);
  --red:#ff4d6a;--red-dim:rgba(255,77,106,.1);
  --purple:#8b5cf6;--clang:#00d4ff;--daily:#e879f9;--clang-dim:rgba(0,212,255,.12);--daily-dim:rgba(232,121,249,.08);--purple-dim:rgba(139,92,246,.12);
  /* Electric cyan — nav, focus, primary accents */
  --el:#00f0ff;--eld:rgba(0,240,255,.14);
  --electric:var(--el);--electric2:var(--el);--electric-dim:var(--eld);
  /* Market-detail / Polymarket UI */
  --md-accent:var(--usdc);
  --mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--pixel:'VT323',monospace;
  --chat-w:420px;--hdr-h:100px;--tabs-h:42px;
  --pred-filter-bar-h:46px;--pred-summary-h:0px;
  --sort-bar-h:46px;
  --filter-bar-h:50px;
  --section-gap:10px;
  --side-gap:10px;
  /* Global action column buttons — adjust here to change all pages */
  --action-btn-width:72px;
  --action-btn-font-size:10px;
  --action-btn-font-weight:700;
  --action-btn-letter-spacing:.04em;
  --action-btn-padding:5px 10px;
  /* Action column width — roughly widest button, centered header + buttons */
  --action-col-width:80px;
  /* Disabled/unclickable button tints — very faded, no border for global use */
  --disabled-yes-bg:rgba(0,255,136,.08);
  --disabled-no-bg:rgba(255,77,106,.08);
  /* Market detail chart.js reads these from documentElement */
  --md-chart-pm:var(--usdc);
  --md-chart-sim:#f59e0b;
  /* Prediction grid cards — per-outcome Yes button tints (matches terminal.js CHART_RGB) */
  --chart-c1:#22c55e;--chart-c2:#3b82f6;--chart-c3:#f97316;--chart-c4:#a855f7;--chart-c5:#ec4899;--chart-c6:#eab308;
}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:13px}
/* Global button hover — subtle brightness lift for any <button> or [role=button] that doesn't define its own :hover. Specific overrides still win. */
button:not(:disabled):hover,[role="button"]:not([aria-disabled="true"]):hover{filter:brightness(1.12);transition:filter .15s ease}
/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md.
   Site-wide scrollbar hide. Scroll behavior preserved; only the visible bar is removed across Firefox + Chromium + WebKit. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent}
body.terminal-page{zoom:1.1}

/* Global: clickable buttons get pointer cursor */
button:not(:disabled):not([disabled]), input[type="submit"]:not(:disabled), input[type="button"]:not(:disabled), input[type="reset"]:not(:disabled) { cursor: pointer; }

/* Global: disabled buttons — no pointer cursor, heavily faded, no border */
button:disabled, button[disabled], input:disabled, input[disabled], select:disabled, button.disabled, input.disabled {
  cursor: default !important;
  pointer-events: none;
  opacity: 0.4;
  border: none !important;
  border-color: transparent !important;
}

/* Entity links — inherit color, no underline */
a.entity-link{text-decoration:none;color:inherit}
a.entity-link:hover{opacity:.8}
.c-agent{color:var(--electric2)}
.c-daily{color:var(--daily);font-family:var(--mono)}
.c-event{color:var(--purple);font-family:var(--mono)}
.c-yes{color:var(--green)!important;font-weight:700}
.c-no{color:var(--red)!important;font-weight:700}
/* Operator dashboard: sidebar + main shell (all pages using _dashboard-sidebar.ejs) */
.terminal-dash-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  align-items: stretch;
}
.shell--dash-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
body.terminal-page > .hdr:first-of-type {
  flex-shrink: 0;
  width: 100%;
}
.terminal-dash-wrap.terminal-dash-wrap--with-top-hdr {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  height: calc(100vh - var(--hdr-h));
  height: calc(100dvh - var(--hdr-h));
  max-height: calc(100vh - var(--hdr-h));
  max-height: calc(100dvh - var(--hdr-h));
}
/* Sidebar rail: stretch; flex column + nav-fill in _dashboard-sidebar.ejs */
.terminal-dash-wrap .dash-sidebar-v2._dashboard-sidebar {
  position: relative;
  z-index: 40;
  align-self: stretch;
  margin-top: 0;
  flex-shrink: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
}
.terminal-dash-wrap.terminal-dash-wrap--with-top-hdr .dash-sidebar-v2._dashboard-sidebar {
  margin-top: 0;
}
.terminal-dash-wrap:not(.terminal-dash-wrap--with-top-hdr) .dash-sidebar-v2._dashboard-sidebar {
  margin-top: var(--hdr-h);
  height: calc(100% - var(--hdr-h));
  max-height: calc(100% - var(--hdr-h));
}
/* shell--dash-body: shell-wide dashboard layout — scroll on > .main only */
.shell.shell--dash-body {
  overflow: hidden;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr var(--chat-w);
  grid-template-rows: 0 0 minmax(0, 1fr) 0;
  grid-row-gap: 0;
}
.shell.shell--dash-body:has(#ctabs[style*="display:none"]):has(.chat-tab-fill[style*="display:none"]) {
  grid-template-rows: 0 0 minmax(0, 1fr) 0;
  grid-row-gap: 0;
}
.terminal-dash-wrap.terminal-dash-wrap--with-top-hdr > .shell.shell--dash-body {
  height: 100%;
  max-height: 100%;
}
.shell.shell--dash-body > .main {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.shell.shell--dash-body .main > .g-panel.active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
/* Legacy: no shell--dash-body — entire shell scrolls */
.terminal-dash-wrap > .shell.shell--dash-main:not(.shell--dash-body) {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - var(--hdr-h));
  max-height: calc(100dvh - var(--hdr-h));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.terminal-dash-wrap.terminal-dash-wrap--with-top-hdr > .shell.shell--dash-main:not(.shell--dash-body) {
  max-height: 100%;
}
/* Sidebar middle section scrolls with global thin scrollbar */
.dashboard-sidebar .nav-fill.dash-sidebar-body,
.dashboard-sidebar .dash-sidebar-body {
  -ms-overflow-style: auto;
}
@media (max-width: 900px) {
  .terminal-dash-wrap .dash-sidebar-v2._dashboard-sidebar {
    display: none;
  }
  .terminal-dash-wrap > .shell.shell--dash-main {
    max-height: none;
  }
}
/* Refer page: gold EARN pill on first hero card only */
.airdrop-page .ad-hero-card {
  position: relative;
}
body.terminal-page[data-terminal-page="refer"] .airdrop-page .ad-hero-earn-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #ffd700;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.25;
  z-index: 2;
  font-family: var(--sans, system-ui, sans-serif);
}
/* Public Polymarket-style profiles (/@handle, /agent/:handle): document scroll like wallets */
html:has(body.terminal-page[data-terminal-page="public-profile"]){
  overflow-y:auto;
  overflow-x:hidden;
  height:auto;
  min-height:100%;
}
body.terminal-page[data-terminal-page="public-profile"]{
  overflow-y:auto;
  overflow-x:hidden;
  min-height:100vh;
  height:auto;
}
body.terminal-page[data-terminal-page="public-profile"] .shell{
  height:auto;
  min-height:100vh;
  overflow:visible;
  grid-template-rows:var(--hdr-h) 0 minmax(0,1fr) 30px;
  grid-row-gap:0;
}
body.terminal-page[data-terminal-page="public-profile"] .main{
  overflow:visible;
  min-height:0;
}
.shell{display:grid;grid-template-rows:var(--hdr-h) var(--tabs-h) 1fr 30px;grid-template-columns:1fr var(--chat-w);height:100vh}
/* Collapse tabs row when both ctabs and chat-tab-fill are hidden (global pages) — removes blank gap */
.shell:has(#ctabs[style*="display:none"]):has(.chat-tab-fill[style*="display:none"]){grid-template-rows:var(--hdr-h) 0 1fr 0;grid-row-gap:0}
/* Airdrop: ensure no empty block below header (not the dashboard inner shell) */
.terminal-page[data-terminal-page="airdrop"] .shell:not(.shell--dash-main),
.terminal-page[data-terminal-page="refer"] .shell:not(.shell--dash-main),
.terminal-page[data-terminal-page="skills-browse"] .shell:not(.shell--dash-main){grid-template-rows:var(--hdr-h) 0 1fr 0;grid-row-gap:0}
/* Leaderboard: no phantom tab row / footer grid gap (footer is position:fixed) */
body.terminal-page[data-terminal-page="leaderboard"] .shell{grid-template-rows:var(--hdr-h) 0 1fr 0;grid-row-gap:0}
body.terminal-page[data-terminal-page="activity"] .shell{grid-template-rows:auto 0 1fr 0;grid-row-gap:0}
body.terminal-page[data-terminal-page="leaderboard"] .main.lb-main-shell{flex:1 1 auto;min-height:0;padding-bottom:0}
/* Dashboard grid rows: .shell.shell--dash-body (operator dashboard section above) */
.terminal-page{display:flex;flex-direction:column;height:100%;overflow:hidden;overflow-x:hidden}
html:has(body.terminal-page){overflow-x:hidden}
body.terminal-page{overflow-x:hidden}
/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
body.terminal-page::-webkit-scrollbar,
html:has(body.terminal-page)::-webkit-scrollbar{width:0;height:0;display:none}
body.terminal-page::-webkit-scrollbar-track,
html:has(body.terminal-page)::-webkit-scrollbar-track{background:transparent}
body.terminal-page::-webkit-scrollbar-thumb,
html:has(body.terminal-page)::-webkit-scrollbar-thumb{background:transparent}
.terminal-page .terminal-top-nav{flex-shrink:0}
.terminal-page .shell{flex:1;min-height:0;height:auto}
/* Dashboard inner shell: must fill .terminal-dash-wrap band (generic rule above uses height:auto) */
.terminal-page .shell.shell--dash-body{height:100%;min-height:0}

/* Top nav (layout.ejs) — always visible, above header */
.terminal-top-nav{display:flex;align-items:stretch;padding:0 12px;background:var(--ink1);border-bottom:1px solid var(--border2);min-height:42px}
.terminal-top-nav .hdr-tab{display:flex;align-items:center;padding:0 16px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.terminal-top-nav .hdr-tab:hover{color:var(--text)}
.terminal-top-nav .hdr-tab.on{color:var(--electric2);border-bottom-color:var(--electric);text-shadow:0 0 6px rgba(0,240,255,.12)}

/* HEADER — Polymarket-style row1 + row2 (sticky) */
.hdr{grid-column:1/3;grid-row:1;display:flex;flex-direction:column;align-items:stretch;padding:0;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:200;flex-shrink:0;min-height:var(--hdr-h);isolation:isolate}
.hdr::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--electric) 30%,var(--cred) 50%,var(--electric) 70%,transparent);opacity:.55;pointer-events:none}
.hdr-row-1{display:flex;align-items:center;gap:16px;padding:8px 24px;min-height:60px;box-sizing:border-box;flex-wrap:nowrap}
.hdr-mobile-menu-btn{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:8px;background:transparent;border:none;border-radius:8px;cursor:pointer;flex-shrink:0}
/* Guests: hamburger next to Log in (desktop + mobile). Authed: never show — use avatar menu. */
.terminal-page .hdr--guest .hdr-mobile-menu-btn{display:flex}
.terminal-page .hdr--authed .hdr-mobile-menu-btn{display:none!important}
.hdr-mobile-menu-btn span{display:block;width:18px;height:2px;background:var(--text);border-radius:1px}
.hdr-search-icon-btn{display:none;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--ink3);cursor:pointer;flex-shrink:0;font-size:18px;line-height:1;color:var(--text2)}
.hdr-row-1-search-wrap{flex:1;min-width:0;max-width:720px;margin:0 auto}
.hdr-search-inner{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:var(--ink);border:1px solid var(--border);box-sizing:border-box}
.hdr-search-prefix{color:var(--text3);font-size:14px;user-select:none}
.hdr-row-1-search-wrap input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;margin:0}
.hdr-search-clear{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:var(--ink3);color:var(--text2);cursor:pointer;font-size:16px;line-height:1}
.hdr-source-wrap{flex-shrink:0}
.hdr-source-select{font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--ink2);color:var(--text);cursor:pointer;font-family:inherit;max-width:140px}
.hdr-pred-count{font-size:11px;color:var(--text3);font-family:var(--mono);white-space:nowrap;flex-shrink:0}
.hdr-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hdr-deposit-btn{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:6px 14px;border-radius:10px;background:#2563eb;color:#fff;text-decoration:none;flex-shrink:0;border:none;cursor:pointer;font-family:inherit}
.hdr-deposit-btn:hover{filter:brightness(1.08)}
.hdr-skills-btn{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:6px 14px;border-radius:10px;background:rgba(167,139,250,.14);color:#c4b5fd;border:1px solid rgba(167,139,250,.45);text-decoration:none;flex-shrink:0;cursor:pointer;font-family:var(--mono);letter-spacing:.04em;transition:background .14s,border-color .14s,color .14s}
.hdr-skills-btn:hover{background:rgba(167,139,250,.24);border-color:rgba(167,139,250,.7);color:#fff}
/* Header icon cluster: outline gift + bell (Polymarket-style, no filled chip) */
.hdr-icon-link{display:inline-flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;color:#9ca3af;flex-shrink:0;text-decoration:none;border-radius:4px;transition:color .15s ease;box-shadow:none}
.hdr-icon-link:hover{color:#d1d5db}
.hdr-icon-svg{width:20px;height:20px;display:block;flex-shrink:0}
.hdr-bell-inner{position:relative;display:inline-flex;align-items:center;justify-content:center}
.hdr-icon-notify-dot{position:absolute;top:0;right:0;width:6px;height:6px;background:#ef4444;border-radius:50%;box-shadow:0 0 0 1px rgba(10,10,10,.9)}
.hdr-icon-notify-dot[hidden]{display:none!important}
.hdr-bell-btn{margin:0}
/* hdr-row-2: parent flex row. Do NOT scroll here — inner cat cluster owns
   horizontal scroll. Letting both scroll caused the More button + last pills
   to slide off the viewport right when content overflowed. */
.hdr-row-2{position:relative;display:flex;align-items:center;gap:12px;padding:0 16px 4px;min-height:32px;box-sizing:border-box;overflow:visible}
.hdr-row-2-divider{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
.hdr-quick-cluster{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* hdr-cat-cluster: flexes to fill, owns the horizontal scroll for category
   pills. min-width:0 lets it shrink below intrinsic width so More button
   stays pinned to the right. Right-edge fade hints there's more to scroll. */
.hdr-cat-cluster{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%)}
.hdr-cat-cluster::-webkit-scrollbar{display:none;width:0;height:0}
.hdr-cat-cluster .g-pill{flex-shrink:0}
.hdr-cat-nav-primary{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:nowrap}
.hdr-more-dropdown{position:absolute;z-index:80;right:24px;margin-top:4px;min-width:200px;max-height:min(70vh,420px);overflow-y:auto;padding:6px;border-radius:10px;border:1px solid var(--border);background:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.hdr-more-item{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:13px;border-radius:6px;font-family:inherit}
.hdr-more-item:hover{background:var(--ink3)}
.hdr-more-cnt{color:var(--text3);font-size:11px;margin-left:4px}
.pred-page-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:start;
  width:100%;
  min-width:0;
}
.pred-page-main{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.main--predictions-page #panel-predictions{
  flex:1;
  min-width:0;
  min-height:0;
}
.main--predictions-page .pred-card-grid-host{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* 2026-05-01 (Team S — Skeleton cards):
   Server-rendered placeholders that paint immediately on the first HTML
   response, before /api/terminal/{predictions,events} settle. Replaced the
   "BOOTING AGENTS..." full-panel splash. Real cards land via
   renderPredictionCardGrid → grid.innerHTML = sectionsHtml, which wipes the
   skeleton grid wholesale. */
.pred-skeleton-grid{
  /* Mirror the live grid's auto-fill template (terminal.css L812-L819) so
     skeletons land in the same column count as the real cards — no shift. */
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
  margin:0;
  padding:0;
  box-sizing:border-box;
  width:100%;
}
@media (max-width:499px){
  .pred-skeleton-grid{grid-template-columns:1fr}
}
.pred-card-skeleton{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  margin:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--ink2);
  min-height:200px;
  position:relative;
  overflow:hidden;
  pointer-events:none;
  cursor:default;
}
.pred-card-skeleton .pred-card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}
.pred-card-skeleton .pred-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
}
.pred-card-skeleton-thumb{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:10px;
  background:var(--ink3,#1a1a22);
}
.pred-card-skeleton-title{
  flex:1 1 auto;
  height:14px;
  border-radius:4px;
  background:var(--ink3,#1a1a22);
}
.pred-card-skeleton-row{
  display:flex;
  gap:8px;
}
.pred-card-skeleton-pill{
  flex:1 1 0;
  height:32px;
  border-radius:8px;
  background:var(--ink3,#1a1a22);
}
.pred-card-skeleton-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  gap:10px;
}
.pred-card-skeleton-meta{
  height:10px;
  width:40%;
  border-radius:4px;
  background:var(--ink3,#1a1a22);
}
.pred-card-skeleton-meta--short{width:25%}
/* Subtle shimmer sweep — kept low-contrast against the card background so
   the placeholders read as "loading" without strobing on slow networks. */
.skeleton-shimmer{
  position:relative;
  overflow:hidden;
}
.skeleton-shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 65%,
    transparent 100%
  );
  transform:translateX(-100%);
  animation:pred-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes pred-skeleton-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@media (prefers-reduced-motion:reduce){
  .skeleton-shimmer::after{animation:none;opacity:.5}
}
@media (min-width:768px){
  /* Explicit modifier avoids :has() races when sidebar visibility toggles during async tag fetch. */
  .main--predictions-page .pred-page-cols{grid-template-columns:minmax(0,1fr)}
  .main--predictions-page .pred-page-cols.pred-page-cols--with-sidebar{
    grid-template-columns:220px minmax(0,1fr);
  }
}
/* Fill viewport under header so #panel-predictions gets a bounded height and overflow-y:auto scrolls. */
.main--predictions-page > .pred-page-cols{
  flex:1;
  min-height:0;
  align-self:stretch;
  align-items:stretch;
}
.terminal-cat-sidebar{display:none;padding:12px 10px 20px;position:sticky;top:5.5rem;max-height:calc(100vh - 6rem);overflow-y:auto;border-right:1px solid rgba(255,255,255,.06);font-size:13px;box-sizing:border-box}
.terminal-cat-sidebar.is-visible,
.terminal-cat-sidebar.is-pending{display:block}
/* 2026-05-01 (Chris — Team SB): skeleton placeholder rows shown on every
   category page until the live tag bundle resolves. Keeps the column
   visibly populated from first paint per Q7=a. */
.term-sb-inner--skeleton{display:flex;flex-direction:column;gap:2px;max-width:220px}
.term-sb-skeleton-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--text2);pointer-events:none}
.term-sb-skeleton-bar{display:inline-block;width:118px;max-width:100%;height:11px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.10),rgba(255,255,255,.04));background-size:200% 100%;animation:termSbShimmer 1.4s linear infinite}
.term-sb-skeleton-row:nth-child(2n) .term-sb-skeleton-bar{width:96px}
.term-sb-skeleton-row:nth-child(3n) .term-sb-skeleton-bar{width:140px}
.term-sb-skeleton-row:nth-child(4n) .term-sb-skeleton-bar{width:78px}
@keyframes termSbShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.term-sb-mobile-fab{display:none}
.term-sb-drawer-backdrop{display:none}
@media (max-width:767px){
  .main--predictions-page .pred-page-cols{grid-template-columns:minmax(0,1fr)}
  .terminal-cat-sidebar.is-visible{display:none!important;position:fixed;left:0;top:4.5rem;bottom:0;width:min(280px,88vw);z-index:120;background:var(--ink);border-right:1px solid var(--border);box-shadow:8px 0 32px rgba(0,0,0,.5);max-height:none}
  body.term-sb-drawer-open .terminal-cat-sidebar.is-visible{display:block!important}
  .term-sb-mobile-fab{display:inline-flex;position:fixed;bottom:72px;left:12px;z-index:119;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--ink2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(0,0,0,.35)}
  .term-sb-drawer-backdrop{display:block;position:fixed;inset:0;z-index:118;background:rgba(0,0,0,.45)}
  .term-sb-drawer-backdrop[hidden]{display:none!important}
}
.hdr-cat-cluster .g-pill.hdr-cat-link{border:none;background:transparent;box-shadow:none;color:var(--text2);font-weight:500;padding:6px 4px;border-radius:0;border-bottom:2px solid transparent}
.hdr-cat-cluster .g-pill.hdr-cat-link:hover{color:var(--text)}
.hdr-cat-cluster .g-pill.hdr-cat-link.on{color:var(--electric2);border-bottom-color:var(--electric);background:transparent}
.terminal-page .hdr-row-2 .hdr-cat-cluster .g-pill.hdr-cat-link.on{
  background:transparent;
  border:none;
  border-bottom:2px solid var(--electric);
  border-radius:0;
  box-shadow:none;
  color:var(--electric2);
}
.term-sb-inner{display:flex;flex-direction:column;gap:2px;max-width:220px}
.term-sb-subhdr{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text3);margin:8px 0 4px;letter-spacing:.04em}
.term-sb-toggles{display:flex;gap:6px;margin-bottom:8px;flex-wrap:nowrap}
.term-sb-toggles--wrap{flex-wrap:wrap}
.term-sb-toggle{font-size:11px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--ink2);color:var(--text2);cursor:pointer;font-family:inherit}
.term-sb-toggle.is-on{border-color:rgba(0,240,255,.45);color:var(--electric2)}
.term-sb-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--text2);text-decoration:none}
.term-sb-row:hover{background:var(--ink3);color:var(--text)}
.term-sb-row.is-active{background:rgba(0,240,255,.1);color:var(--electric2)}
.term-sb-label{min-width:0}
.term-sb-count{color:var(--text3);font-variant-numeric:tabular-nums;font-size:12px;flex-shrink:0}
.term-sb-count-shimmer{display:inline-block;min-width:2.75rem;height:0.8rem;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.12),rgba(255,255,255,.06));background-size:200% 100%;animation:term-sb-count-shimmer 1s ease-in-out infinite;vertical-align:middle}
@keyframes term-sb-count-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){
  .term-sb-count-shimmer{animation:none;background:rgba(255,255,255,.08)}
}
.pred-quick-sparse-hint{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--text2);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pred-quick-sparse-hint[hidden]{display:none!important}
.pred-quick-sparse-hint .pred-quick-sparse-msg{flex:1;min-width:0}
.pred-quick-sparse-hint .pred-quick-sparse-clear{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--electric2);border-radius:6px;padding:4px 10px;font:inherit;cursor:pointer;white-space:nowrap}
.pred-quick-sparse-hint .pred-quick-sparse-clear:hover{border-color:var(--electric2)}
.term-sb-err{color:var(--text3);padding:8px;font-size:12px}
.term-sb-sport-lab{display:flex;align-items:center;gap:6px;min-width:0}
.term-sb-sport-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.term-sb-sport-row{text-align:left;width:100%;border:none;cursor:pointer;font:inherit}
.term-sb-sport-branch{margin-bottom:0}
.term-sb-sport-parent-row{display:flex;align-items:stretch;gap:4px;width:100%}
.term-sb-sport-main{flex:1;min-width:0}
/* Sports taxonomy — dark terminal (scoped; avoids Polymarket-gray chip look) */
.term-sb-inner--sports .term-sb-row,
.term-sb-inner--sports button.term-sb-sport-row{
  background:transparent;
  color:rgba(212,212,212,.92);
  border:none;
  box-shadow:none;
}
.term-sb-inner--sports .term-sb-row:hover,
.term-sb-inner--sports button.term-sb-sport-row:hover{
  background:rgba(0,229,255,.08);
  color:var(--text);
}
.term-sb-inner--sports .term-sb-row.is-active,
.term-sb-inner--sports button.term-sb-sport-row.is-active{
  background:rgba(0,229,255,.12);
  color:var(--electric2);
  box-shadow:inset 3px 0 0 var(--electric);
}
.term-sb-inner--sports .term-sb-count{color:var(--text3)}
.term-sb-sport-tree{list-style:none;margin:0;padding:0}
.term-sb-sport-top{margin-top:2px}
.term-sb-sport-top:first-child{margin-top:0}
.term-sb-sport-children-list{
  list-style:none;
  margin:2px 0 6px 0;
  padding:0;
}
.term-sb-sport-child-li{margin-top:2px}
.term-sb-sport-chev{
  flex-shrink:0;
  width:26px;
  min-height:32px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--text2);
  cursor:pointer;
  padding:0;
  font:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.term-sb-sport-chev:hover{
  background:rgba(0,229,255,.08);
  color:var(--electric2);
}
.term-sb-sport-chev .term-sb-chevron{
  display:block;
  transition:transform 150ms ease;
  opacity:.6;
}
.term-sb-sport-chev.is-expanded .term-sb-chevron{
  transform:rotate(90deg);
  opacity:.9;
}
button.term-sb-all{width:100%;border:none;cursor:pointer;font:inherit;text-align:left}
.cat-sidebar-inner{max-width:220px}
.cat-sidebar-hdr{font-weight:700;text-transform:capitalize;margin-bottom:10px;color:var(--text);font-size:12px;letter-spacing:.04em}
.cat-sidebar-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--text2);text-decoration:none}
.cat-sidebar-row:hover{background:var(--ink3);color:var(--text)}
.cat-sidebar-row.on{background:rgba(0,240,255,.1);color:var(--electric2)}
.cat-sidebar-all{font-weight:500}
.cat-sidebar-cnt{color:var(--text3);font-variant-numeric:tabular-nums;font-size:12px;flex-shrink:0}
.cat-sidebar-modes,.cat-sidebar-timeframes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cat-sidebar-mode,.cat-sidebar-tf{font-size:11px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--ink2);color:var(--text2);cursor:pointer;font-family:inherit;text-decoration:none}
.cat-sidebar-mode.on,.cat-sidebar-tf.on{border-color:rgba(0,240,255,.45);color:var(--electric2)}
.hdr-more-btn{margin-left:auto;flex-shrink:0;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--ink3);color:var(--text2);cursor:pointer;font-family:inherit}
.hdr-more-btn[hidden]{display:none!important}
.logo-wrap{display:flex;align-items:center;gap:10px;padding-right:20px;border-right:1px solid var(--border);margin-right:0;flex-shrink:0}
.logo-img{width:32px;height:32px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;image-rendering:pixelated;flex-shrink:0}
.logo-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.logo-name{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.logo-name span{color:var(--electric)}
.hdr-tabs{display:flex;align-items:stretch;height:100%;padding:0 4px;flex:1;min-width:0;gap:0}
.hdr-tabs-left{display:flex;align-items:stretch;flex:1;min-width:0;flex-wrap:wrap}
.hdr-tab{display:flex;align-items:center;padding:0 16px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;text-decoration:none}
.hdr-tab:hover{color:var(--text)}
.hdr-tab.on{color:var(--electric2);border-bottom-color:var(--electric);text-shadow:0 0 6px rgba(0,240,255,.12)}
.logo-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15}
.hdr-viewing-sublbl{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:0.01em;white-space:nowrap;max-width:min(42vw,220px);overflow:hidden;text-overflow:ellipsis}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:20px;border-left:1px solid var(--border);flex:0 0 auto;min-width:min(100%,max-content)}
.cred-badge{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--cred);background:var(--cred-dim);border:1px solid rgba(245,200,66,.25);border-radius:6px;padding:4px 10px;text-shadow:0 0 8px rgba(245,200,66,.4)}
.agent-pill{display:flex;align-items:center;gap:7px;background:var(--green-dim);border:1px solid rgba(0,255,136,.18);border-radius:20px;padding:5px 12px 5px 8px;font-size:11px;font-weight:500;color:var(--green);cursor:pointer}
.agent-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(0,255,136,.6);animation:pulse 2s ease infinite;flex-shrink:0}
.hdr-logout-form{margin:0;padding:0}
.hdr-logout-btn{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;padding:5px 12px;background:var(--ink3);color:var(--text2);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:inherit;transition:all .15s}
.hdr-logout-btn:hover{background:var(--ink4);border-color:var(--border2);color:var(--text)}
.hdr-login-btn{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;padding:5px 12px;text-decoration:none}

/* Profile dropdown (header) */
.hdr-profile-wrap{position:relative}
.hdr-profile-btn{display:flex;align-items:center;gap:4px;background:var(--ink3);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;font-family:inherit;transition:all .14s}
.hdr-profile-btn:hover{border-color:var(--border2);color:var(--text)}
.hdr-profile-drop{position:absolute;top:100%;right:0;margin-top:4px;min-width:200px;max-width:min(320px,96vw);max-height:min(72vh,520px);overflow-y:auto;background:var(--ink2);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:500;padding:6px 0}
.hdr-profile-sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:4px 0}
.hdr-profile-opt.on{color:var(--electric2)}
html.terminal-oled-dim body.terminal-page{filter:brightness(0.88) contrast(1.02)}
.hdr-profile-drop[hidden]{display:none}
.hdr-profile-action-row{display:flex;gap:6px;padding:6px 8px 8px}
.hdr-profile-action{flex:1;padding:8px 10px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.04em;font-family:var(--mono);cursor:pointer;transition:background .12s,border-color .12s,color .12s;text-align:center}
.hdr-profile-action-deposit{background:rgba(0,240,255,.1);border:1px solid rgba(0,240,255,.4);color:var(--electric)}
.hdr-profile-action-deposit:hover{background:rgba(0,240,255,.18);border-color:rgba(0,240,255,.6);color:#fff}
.hdr-profile-action-withdraw{background:rgba(255,255,255,.04);border:1px solid var(--border2);color:var(--text)}
.hdr-profile-action-withdraw:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.hdr-profile-opt{display:block;width:100%;text-align:left;padding:8px 12px;font-size:11.5px;color:var(--text2);text-decoration:none;background:transparent;border:none;cursor:pointer;font-family:inherit;transition:background .12s}
.hdr-profile-opt:hover{background:var(--ink3);color:var(--text)}
.hdr-profile-logout{margin:0;padding:0;border-top:1px solid var(--border);margin-top:4px;padding-top:4px}
.hdr-profile-drop .hdr-profile-logout-btn{width:100%;margin-top:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.hdr-avatar{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,240,255,.15);
  border:1px solid rgba(0,240,255,.35);
  font-size:13px;font-weight:700;font-family:inherit;
  color:var(--electric,#e6edf3);
  cursor:pointer;flex-shrink:0;padding:0;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.hdr-avatar:hover{background:rgba(0,240,255,.22);border-color:rgba(0,240,255,.5);box-shadow:0 0 12px rgba(0,240,255,.2)}
.m-drawer-avatar{cursor:default}
.hdr-wallet-totals{display:flex;flex-direction:column;align-items:stretch;gap:2px;flex-shrink:0;justify-content:center;text-decoration:none;color:inherit}
.hdr-wallet-totals--link{padding:4px 10px;background:var(--ink3);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .12s ease, background .12s ease}
.hdr-wallet-totals--link:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.04)}
.hdr-wallet-totals--link:focus-visible{outline:2px solid rgba(0,240,255,.5);outline-offset:2px}
.hdr-wallet-totals--link .hdr-total-pill{display:inline-flex;align-items:baseline;gap:6px;padding:0;background:transparent;border:none;border-radius:0;font-size:10px;justify-content:space-between}
.hdr-total-pill{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px;background:var(--ink3);border:1px solid var(--border);border-radius:6px;font-size:10px;justify-content:space-between}
.hdr-total-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.03em}
.hdr-total-val{font-family:var(--mono);font-weight:600;white-space:nowrap;color:#fff}
.hdr-total-portfolio{color:#fff}
.hdr-total-cash{color:#fff}
.hdr-wallet-totals .hdr-usdc{color:#fff}
.m-hdr-wallet-totals{gap:5px}
.m-hdr-total-pill{padding:2px 6px;font-size:9px}
.m-hdr-total-pill .hdr-total-label{font-size:8px}
.m-hdr-total-pill .hdr-total-val{font-size:10px}
.m-drawer-wallet-totals{flex-direction:row;flex-wrap:wrap;gap:6px;width:100%}
.hdr-total-pill--stack{flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px}
.hdr-usdc{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--usdc);white-space:nowrap;flex-shrink:0}
.m-hdr-balances{display:flex;align-items:center;gap:6px;flex-shrink:0}
.m-hdr-usdc{font-size:10px;padding:3px 7px;background:rgba(0,240,255,.08);border:1px solid rgba(0,240,255,.22);border-radius:5px}
.m-drawer-user{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.m-drawer-user-balances{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.m-drawer-cred-inline{font-family:var(--mono);font-size:11px;color:var(--cred)}
.m-drawer-cred-label{font-size:9px;color:var(--text2);margin-left:2px}

/* Profile / History pages */
.terminal-profile-body{max-width:560px;padding:16px 20px 32px}
.terminal-profile-row{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}
.terminal-profile-k{flex:0 0 120px;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.terminal-profile-v{font-size:13px;color:var(--text)}
.terminal-profile-mono{font-family:var(--mono);font-size:12px}
.terminal-profile-section{margin-top:20px;padding-top:8px}
.terminal-profile-section-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.terminal-profile-connect-x{display:inline-flex;align-items:center;padding:8px 14px;background:var(--ink3);border:1px solid var(--border);border-radius:8px;color:var(--electric2);text-decoration:none;font-size:12px;font-weight:600}
.terminal-profile-connect-x:hover{border-color:rgba(0,240,255,.4)}
.terminal-profile-logout-form{margin-top:28px;padding-top:16px;border-top:1px solid var(--border)}
.terminal-profile-logout-page-btn{font-size:12px;font-weight:600;padding:8px 16px;background:var(--ink3);color:var(--text2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:inherit}
.terminal-profile-logout-page-btn:hover{background:var(--ink4);color:var(--text)}
.terminal-history-wrap{padding:12px 16px 32px;min-height:120px}
.terminal-history-loading,.terminal-history-empty{font-size:13px;color:var(--text3);padding:12px}
.terminal-history-table-wrap{overflow-x:auto}
.terminal-history-tbl{width:100%;border-collapse:collapse;font-size:12px}
.terminal-history-tbl th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text3);font-weight:600}
.terminal-history-tbl td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;color:var(--text2)}
.terminal-history-tbl td:first-child{max-width:280px}

/* Agent switcher dropdown (header) */
.agent-switcher-wrap{position:relative}
.agent-switcher-btn{display:flex;align-items:center;gap:5px;background:var(--ink3);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;font-family:inherit;transition:all .14s}
.agent-switcher-btn:hover{border-color:var(--border2);color:var(--text)}
.agent-switcher-current{font-family:var(--mono);color:var(--electric2)}
.agent-switcher-arrow{font-size:8px;opacity:.7}
.agent-switcher-drop{position:absolute;top:100%;right:0;margin-top:4px;min-width:180px;background:var(--ink2);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:110;padding:6px 0}
.agent-switcher-drop[hidden]{display:none}
.agent-switcher-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11.5px;color:var(--text2);text-decoration:none;transition:background .12s}
.agent-switcher-opt:hover{background:var(--ink3);color:var(--text)}
.agent-switcher-opt.on{color:var(--electric2)}
.agent-switcher-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0}
.agent-switcher-dot.on{background:var(--electric2);box-shadow:0 0 6px rgba(0,240,255,.5)}
.agent-switcher-handle{font-family:var(--mono);font-size:10px;color:var(--text3);margin-left:4px}
.wb-viewing-label{font-size:10px;color:var(--text3);margin-top:4px;line-height:1.3}

/* CONTENT TABS — My Agent sub-tabs */
.ctabs{grid-column:1;grid-row:2;display:flex;align-items:stretch;background:var(--ink2);border-bottom:1px solid var(--border);padding:0 12px}
.ctab{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:11.5px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .14s;white-space:nowrap}
.ctab:hover{color:var(--text)}.ctab.on{color:var(--electric2);border-bottom-color:var(--electric);text-shadow:0 0 6px rgba(0,240,255,.12)}
.ctab.ctab-btn{margin-left:auto;background:var(--ink3);border:1px solid var(--border);border-radius:8px;padding:6px 14px;margin-top:6px;margin-bottom:6px;border-bottom:2px solid transparent}
.ctab.ctab-btn:hover{background:var(--ink4);border-color:var(--border2)}
.ctab.ctab-btn.on{background:var(--electric-dim);border-color:rgba(0,240,255,.3);color:var(--electric2)}
.ctab-badge{font-size:9px;font-weight:700;background:var(--electric-dim);color:var(--electric2);border-radius:10px;padding:1px 5px;letter-spacing:.03em}
.ctab-badge.cred{background:var(--cred-dim);color:var(--cred)}
.ctab-badge.live{background:rgba(0,255,136,.15);color:var(--green)}
/* Profile Messages button — top right of profile card (mobile) / header (desktop), teal */
.profile-messages-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;border:1px solid rgba(0,240,255,.35);background:var(--electric-dim);color:var(--electric2);transition:background .13s,border-color .13s;width:auto;flex-shrink:0;font-family:inherit}
.profile-messages-btn:hover{background:rgba(0,240,255,.15);border-color:rgba(0,240,255,.5);box-shadow:0 0 8px rgba(0,240,255,.3)}
.profile-messages-btn .ctab-badge{font-size:9px;font-weight:700;background:var(--electric);color:var(--ink);border-radius:10px;padding:1px 5px;letter-spacing:.03em}
.hdr-wallet-btn{display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--electric,#e6edf3);background:rgba(0,240,255,.12);border:1px solid rgba(0,240,255,.35);border-radius:14px;padding:5px 12px;cursor:pointer;font-family:inherit;flex-shrink:0;transition:all .12s}
.hdr-wallet-btn:hover{background:rgba(0,240,255,.2);box-shadow:0 0 10px rgba(0,240,255,.25)}
.hdr-wallet-btn.connected{color:var(--text,#e4e4e7);border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.15)}
.hdr-login-primary{font-weight:700}
.hdr-privy-chrome{display:flex;align-items:center;gap:0.75rem;flex-wrap:nowrap}
.m-hdr-privy-wrap{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex-shrink:0;margin-left:auto;max-width:min(58vw,220px)}
.m-hdr-login-fallback{font-size:11px;padding:4px 10px}
.m-drawer-privy-chrome{display:block}
/** Stale-session logout: dim page only — never block header (users must reach Log out / nav). */
body.privy-stale-clearing{opacity:.97}
body.privy-stale-clearing .hdr{opacity:1}
/* Desktop: show header Messages, hide profile card Messages */
@media (min-width:768px){.profile-card-messages-btn{display:none!important}}
a.profile-messages-btn{text-decoration:none}
/* Mobile: hide header Messages (hdr is hidden anyway; profile card shows Messages) */
@media (max-width:767px){.hdr-messages-btn{display:none!important}}
.chat-tab-fill{grid-column:2;grid-row:2;background:var(--ink);border-bottom:1px solid var(--border2);border-left:1px solid var(--border2);display:flex;align-items:center;padding:0 14px}
.chat-tab-label{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.05em;text-transform:uppercase}

/* MAIN */
.main{grid-column:1;grid-row:3;display:flex;flex-direction:column;background:var(--ink1);overflow:hidden}

/* ── MY AGENT PANEL ── */
.agent-panel{display:none;flex:1;min-height:0;overflow:hidden;flex-direction:column}
.agent-panel.active{display:flex}

/* ── GLOBAL PAGES (Predictions, Clangs, Agents, Posts, Activity) ── */
.g-panel{display:none;flex:1;overflow:hidden;flex-direction:column}
.g-panel.active{display:flex}
.g-hero{flex-shrink:0;padding:16px 20px;background:var(--ink2);border-bottom:1px solid var(--border);position:relative;overflow:hidden;background:rgba(0,240,255,.03);border:1px solid rgba(0,240,255,.15);border-radius:12px;margin:0 var(--side-gap)}
.g-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.45) 40%,rgba(0,229,160,.35) 60%,transparent);pointer-events:none}
.g-hero-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.g-hero-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1px solid var(--border2);background:var(--ink3);background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.2);border-radius:10px}
.g-hero-label{flex:1}
.g-hero-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.g-hero-sub{font-size:11.5px;color:var(--text2);margin-top:3px}
.g-hero-live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);font-weight:600;margin-left:auto;flex-shrink:0}
.g-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(0,255,136,.6);animation:pulse 2s ease infinite}
.g-stats{display:grid;flex-shrink:0;border-bottom:1px solid var(--border);border:1px solid rgba(0,240,255,.12);border-radius:10px;overflow:hidden;background:rgba(0,240,255,.08);margin:0 var(--side-gap)}
.g-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px;border-right:1px solid var(--border)}
.g-stat:last-child{border-right:none}
.g-stat-val{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--text)}
.g-stat-val.cred{color:var(--cred)}.g-stat-val.usdc{color:var(--usdc);text-shadow:0 0 10px rgba(39,117,202,.35)}.g-stat-val.green{color:var(--green);text-shadow:0 0 10px rgba(0,255,136,.5)}.g-stat-val.electric{color:var(--electric2);text-shadow:none}
.pred-currency-tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.g-hero--with-currency .pred-currency-venue-row{margin-top:12px}
.pred-currency-venue-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;width:100%}
.pred-currency-venue-row .pred-currency-tabs{margin-top:0;flex:1;min-width:min(100%,220px)}
.venue-pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.venue-pill{font-family:var(--mono);font-size:12px;font-weight:600;padding:7px 16px;border-radius:22px;border:1px solid var(--border);color:var(--text2);background:var(--ink3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.venue-pill:hover{color:var(--text);border-color:var(--border2)}
.venue-pill.on{color:var(--electric2);border-color:rgba(0,240,255,.55);background:rgba(0,240,255,.14);box-shadow:0 0 12px rgba(0,240,255,.18)}
#sub-predictions>.pred-currency-tabs{margin-bottom:10px}
.pred-currency-tabs--clang{margin-top:2px}
.pred-currency-tab{font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 14px;border-radius:8px;border:1px solid var(--border);color:var(--text2);text-decoration:none;background:var(--ink3);transition:color .12s,border-color .12s,background .12s;cursor:pointer}
.pred-currency-tab:hover{color:var(--text);border-color:var(--border2)}
.pred-currency-tab.on{color:var(--electric2);border-color:rgba(0,240,255,.35);background:var(--electric-dim);box-shadow:0 0 10px rgba(0,240,255,.12)}
#sub-predictions .pred-pool.cell-usdc{color:var(--usdc)}
#panel-predictions .cell-cred.cell-pred-pool,#panel-predictions .global-pred-row:not(.pred-card) .cell-cred.cell-pred-pool{color:var(--usdc)}
.g-stat-label{font-size:9.5px;color:var(--text3);margin-top:2px;letter-spacing:.05em;text-transform:uppercase}
.g-stat-sub{font-size:9px;margin-top:2px}.g-stat-sub.up{color:var(--green)}.g-stat-sub.dn{color:var(--red)}.g-stat-sub.dim{color:var(--text3)}
.g-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--ink2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.g-entity-row{display:flex;align-items:center;gap:8px;padding:6px 16px 10px;background:var(--ink2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.g-entity-label{font-size:12px;color:var(--text3);margin-right:2px}
.g-pill{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;cursor:pointer;border:1px solid var(--border);color:var(--text2);transition:all .14s}
.g-pill:hover{color:var(--text);border-color:var(--border2)}
.g-pill.on{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.g-pill.on.daily{color:var(--daily);background:var(--daily-dim);border-color:rgba(232,121,249,.3)}
.g-pill.on.event{color:var(--purple);background:var(--purple-dim);border-color:rgba(139,92,246,.3)}
.g-pill.on.open{color:var(--electric2);background:var(--electric-dim);border-color:rgba(0,240,255,.25)}
.g-pill.on.clang{color:var(--clang);background:var(--clang-dim);border-color:rgba(0,153,255,.25)}
.g-divider{width:1px;height:20px;background:var(--border2);margin:0 2px}
.g-search{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;flex:1;max-width:240px;margin-left:auto}
.g-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.g-search input::placeholder{color:var(--text3)}
.g-count{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
.g-content{flex:1;overflow-y:auto}
/* List containers: no padding so action column aligns to far right (match agents page) */
.pred-tbl .desktop-only,.clang-tbl .desktop-only,.agents-tbl .desktop-only{display:flex;flex-direction:column;width:100%;min-width:0;padding:0}
.pred-tbl #gPredList,.clang-tbl #gClangList,.agents-tbl #gAgentList{flex:1;min-width:0;padding:0}
.tbl-hdr{display:grid;padding:0 16px;background:var(--ink2);border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:2}
.th{display:flex;align-items:center;justify-content:center;gap:4px;font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;padding:7px 0;cursor:pointer;user-select:none;transition:color .12s;white-space:nowrap}
.th:hover{color:var(--text2)}.th.on{color:var(--cred);text-shadow:0 0 8px rgba(245,200,66,.4)}
.th.left{justify-content:flex-start}
/* Action column: centered header + buttons, fixed width globally */
.global-pred-hdr .th:last-child,.clang-tbl .tbl-hdr .th:last-child,.agents-tbl .tbl-hdr .th:last-child,.clang-table-hdr .th:last-child,.friend-table-hdr .th:last-child{justify-content:center;text-align:center}
.bet-actions,.agent-actions-col,.agent-actions-stack,.clang-action-stack,.clang-action-btns{justify-content:center;align-items:center}
.clang-row .row-actions,.friend-row .row-actions{justify-content:center;align-items:center}
.clang-tbl .clang-row > *:last-child,.agents-tbl .agent-row .agent-actions-col{display:flex;justify-content:center;align-items:center}
.sort-ico{font-size:9px;opacity:.2;transition:opacity .12s}.th:hover .sort-ico{opacity:.5}.th.on .sort-ico{opacity:1;color:var(--cred)}
/* Global predictions page — 9 columns: dot | Market | Open | Live | Staked | Volume | Odds | Status | Action */
.global-pred-hdr,.global-pred-row:not(.pred-card){display:grid;grid-template-columns:12px 1fr 70px 70px 70px 90px 70px var(--action-col-width);align-items:center;gap:8px;padding:0 20px}
.global-pred-hdr{background:var(--ink2);border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:2}
/* Predictions — card grid (global page) */
.pred-global-mkts .pred-legacy-table,.pred-global-mkts .pred-legacy-mobile{display:none!important}
.g-pred-sort-hdr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 16px;background:var(--ink2);border-bottom:1px solid var(--border2);z-index:4}
.g-pred-sort-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.g-sort-chip{font-size:11px;font-family:var(--mono);padding:6px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--ink3);color:var(--text2);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.g-sort-chip:hover{color:var(--text);border-color:rgba(0,212,170,.35)}
.g-sort-chip.on{color:var(--electric2);border-color:rgba(0,240,255,.35);background:rgba(0,240,255,.06)}
.g-sort-chip .sort-ico{font-size:10px;opacity:.85;margin-left:2px}
.pred-card-grid-host{padding:12px 12px 44px;min-height:0;flex:1}
/* Loading affordance for the predictions infinite-scroll sentinel.
   terminal.js sets data-loading=1 on #gPredInfiniteSentinel during page-2 fetches
   so users get visible feedback that more cards are coming instead of staring at
   blank space below the last row. */
#gPredInfiniteSentinel{position:relative;height:1px}
#gPredInfiniteSentinel[data-loading]{height:48px}
#gPredInfiniteSentinel[data-loading]::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:18px;height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  border:2px solid rgba(0,240,255,.18);
  border-top-color:var(--electric2,#00f0ff);
  animation:predSentinelSpin .8s linear infinite;
}
@keyframes predSentinelSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #gPredInfiniteSentinel[data-loading]::after{animation:none;border-top-color:rgba(0,240,255,.6)}
}
.main--predictions-page .g-content.pred-global-mkts{padding-bottom:44px}
/* Header V2 Part 3: #panel-predictions scrolls so quick filters + categories can stick under title/carousel */
.main--pred-sticky-toolbar #panel-predictions{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  min-height:0;
}
.main--pred-sticky-toolbar #panel-predictions .g-content.pred-global-mkts{
  flex:0 1 auto;
  overflow:visible;
  min-height:0;
}
#panel-predictions .pred-markets-sticky-bars{
  position:sticky;
  top:0;
  z-index:25;
  flex-shrink:0;
  background-color:var(--ink1);
  background:var(--ink1);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.42);
  isolation:isolate;
}
.pred-active-filter-bar{padding:10px 20px 8px;font-size:12px;color:var(--text3);border-bottom:1px solid rgba(255,255,255,.06);background:var(--ink1)}
.pred-active-filter-bar-inner{font-family:var(--mono);letter-spacing:.02em}
.hdr-row-2 .pred-quick-pill{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .14s}
.hdr-row-2 .pred-quick-pill:hover{color:var(--text);border-color:var(--border2);background:var(--ink3)}
.hdr-row-2 .pred-quick-pill.on{color:var(--electric2);border-color:rgba(0,240,255,.45);background:rgba(0,240,255,.08)}
/** Category chips (second row): active = same electric cyan as Trending */
.terminal-page .hdr-row-2 .hdr-cat-cluster .g-pill.on{
  color:var(--electric2);
  border-color:rgba(0,240,255,.45);
  background:rgba(0,240,255,.08);
  box-shadow:0 0 10px rgba(0,240,255,.12);
}
#panel-predictions .pred-markets-sticky-bars .pred-toolbar{border-bottom:1px solid var(--border)}
#panel-predictions .pred-markets-sticky-bars .pred-toolbar:last-child{border-bottom:none}
#panel-predictions .pred-page-title{margin:0;padding:14px 16px 6px;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2}
/* Notification bar (below header on Predictions) */
.terminal-notification-bar{background:rgba(0,0,0,.92);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;padding:6px 16px;margin:0 var(--side-gap) 0}
.terminal-notification-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.terminal-notification-bar-msg{margin:0;font-size:12px;color:var(--text2);line-height:1.35;display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.terminal-nb-cta{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--electric2);cursor:pointer;text-decoration:none}
a.terminal-nb-cta{color:var(--electric2)}
.terminal-nb-cta:hover{text-decoration:underline;text-underline-offset:2px}
.terminal-notification-bar-dismiss{flex-shrink:0;width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--text3);font-size:18px;line-height:1;cursor:pointer}
.terminal-notification-bar-dismiss:hover{color:var(--text);background:rgba(255,255,255,.06)}
.pred-tx-yes{color:#22c55e;font-weight:600}
.pred-tx-no{color:#ef4444;font-weight:600}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Predictions toolbar (no hero) */
#panel-predictions .pred-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:10px 16px;background:var(--ink1);border-bottom:1px solid var(--border);flex-shrink:0}
#panel-predictions .pred-toolbar--filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:flex-start}
#panel-predictions .pred-filters-left{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;flex:1 1 320px;min-width:0}
#panel-predictions .pred-quick-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
#panel-predictions .pred-source-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#panel-predictions .pred-source-select{flex-shrink:0;min-width:120px;max-width:170px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--ink3);color:var(--text2);font-size:12px;font-family:inherit;font-weight:600;cursor:pointer}
#panel-predictions .pred-source-select:disabled{opacity:.45;cursor:not-allowed}
#panel-predictions .pred-toolbar-divider{width:1px;height:16px;background:var(--border);flex-shrink:0;align-self:center}
#panel-predictions .pred-toolbar-divider--v{align-self:center}
#panel-predictions .pred-toolbar-search.pred-search-wrap.pred-search-wrap--inline{flex:1 1 240px;min-width:240px;max-width:360px;margin-left:auto}
@media (max-width:900px){
  #panel-predictions .pred-toolbar--filters-row{flex-direction:column;align-items:stretch;gap:12px}
  #panel-predictions .pred-filters-left{flex-direction:column;align-items:stretch;flex:1 1 auto}
  #panel-predictions .pred-toolbar-divider--v{width:100%;height:1px;align-self:stretch}
  #panel-predictions .pred-toolbar-search.pred-search-wrap.pred-search-wrap--inline{margin-left:0;max-width:none;min-width:0;flex:1 1 auto}
  #panel-predictions .pred-toolbar--cats{flex-direction:column;align-items:flex-start;gap:8px}
}
#panel-predictions .pred-toolbar-search.pred-search-wrap{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 10px;border-radius:10px;background:var(--ink);border:1px solid var(--border);box-sizing:border-box}
#panel-predictions .pred-toolbar-search .pred-search-prefix{font-family:var(--mono);font-size:13px;color:var(--text3);user-select:none}
#panel-predictions .pred-toolbar-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:13px;margin:0}
#panel-predictions .pred-search-clear{flex-shrink:0;width:26px;height:26px;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--ink3);color:var(--text3);font-size:16px;line-height:1;cursor:pointer;font-family:inherit;display:none;align-items:center;justify-content:center}
#panel-predictions .pred-search-clear:hover{color:var(--electric2);border-color:rgba(0,240,255,.35)}
#panel-predictions .pred-toolbar-count{font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0;white-space:nowrap}
#panel-predictions .pred-toolbar-venue{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#panel-predictions .pred-toolbar--quick{align-items:center;gap:8px}
#panel-predictions .pred-toolbar-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-right:6px;flex-shrink:0}
#panel-predictions .pred-quick-pill{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;transition:all .14s}
#panel-predictions .pred-quick-pill:hover{color:var(--text);border-color:var(--border2);background:var(--ink3)}
#panel-predictions .pred-quick-pill.on{color:var(--electric2);border-color:rgba(0,240,255,.45);background:rgba(0,240,255,.08);box-shadow:0 0 10px rgba(0,240,255,.12)}
#panel-predictions .pred-toolbar--cats{gap:6px}
#panel-predictions .pred-toolbar--cats .g-pill{margin:0}
#panel-predictions .pred-toolbar--cats .pred-toolbar-label{flex-shrink:0}
.pred-cat-block{margin-bottom:28px}
.pred-cat-block:last-child{margin-bottom:16px}
.pred-cat-block.is-empty{display:none}
#panel-predictions .section-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;margin-top:36px;flex-wrap:wrap;row-gap:6px}
#panel-predictions .pred-cat-block:first-child .section-header{margin-top:0}
#panel-predictions .section-title{font-size:18px;font-weight:600;color:#fff;letter-spacing:-.02em;margin:0}
#panel-predictions .section-count{font-family:'JetBrains Mono',var(--mono);font-size:12px;color:var(--text3)}
#panel-predictions .section-arrow{color:#444;font-size:18px;margin-left:2px;line-height:1}
/* Predictions grid: fill row width (Polymarket-style auto-fill) */
#panel-predictions .market-grid.pred-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
  margin-bottom:8px;
  padding:0;
  box-sizing:border-box;
  width:100%;
}
@media (max-width:499px){
  #panel-predictions .market-grid.pred-card-grid{grid-template-columns:1fr}
}
/* Browser-native lazy rendering: off-screen cards skip layout/paint until near viewport, so initial render is cheap and scroll feels like cards appear as you approach them. contain-intrinsic-size reserves space so scrollbar math stays stable. */
#gPredGrid .market-card.pred-card{
  content-visibility:auto;
  contain-intrinsic-size:0 220px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  gap:0;
  min-height:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--ink2);
  color:var(--text);
  box-shadow:none;
  cursor:pointer;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease,background .2s ease;
  position:relative;
  overflow:hidden;
}
/* Card hover: lift + glow. `:where()` keeps specificity equal to the base
   .market-card.pred-card rule so hover always wins the cascade against
   later-defined non-hover rules. Also covers the virtualization wrapper
   case where pointer enters the cell before the card. */
#gPredGrid .market-card.pred-card:hover,
#gPredGrid .pred-virt-cell:hover > .market-card.pred-card,
#gPredGrid .market-card.pred-card:focus-within{
  background:var(--ink3);
  border-color:var(--cat,var(--border2));
  box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb,var(--cat,var(--border2)) 35%,transparent);
  transform:translateY(-1px);
}
/* Virtualization cell needs to be a real layout box (not display:contents)
   so :hover registers on the wrapper. */
#gPredGrid .pred-virt-cell{display:block;min-width:0}
/* Category color is tag-only. Card background/border stay uniform. */
#gPredGrid .market-card.pred-card[data-cat-color] .pred-card-cat-pill,
#gPredGrid .market-card.pred-card[data-cat-color] .pred-cat-pill{
  background:color-mix(in srgb,var(--cat) 14%,transparent);
  color:var(--cat);
  border:1px solid color-mix(in srgb,var(--cat) 30%,transparent);
}
#panel-predictions .pred-card.expanded{
  border-color:#22c55e!important;
  box-shadow:0 0 0 1px rgba(34,197,94,.35),0 6px 20px rgba(0,0,0,.1)!important;
}
#gPredGrid .pred-card-body,
#panel-predictions .pred-card .pred-card-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  z-index:1;
  flex:1;
  min-height:0;
  background:transparent;
}
#panel-predictions .pred-card-head{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  flex-shrink:0;
}
#panel-predictions .pred-card-thumb{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:6px;
  object-fit:cover;
  background:var(--ink4);
  flex-shrink:0;
}
/* Polymarket parity: thumbnail fixed 40×40 — never fill card width (overrides any stray flex/img rules) */
#gPredGrid .pred-card-thumb,
#gPredGrid .pred-card img.pred-card-thumb,
#panel-predictions .pred-card .pred-card-thumb,
#panel-predictions .pred-card-head img{
  width:40px!important;
  height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  min-width:40px!important;
  flex:0 0 40px!important;
  object-fit:cover;
  border-radius:6px;
  display:block;
  align-self:flex-start;
}
#panel-predictions .pred-card-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
  min-width:0;
}
#panel-predictions .pred-event-outcome-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
#panel-predictions .pred-card-outcome-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:6px;
  align-items:center;
  padding:0;
}
#panel-predictions .pred-card-outcome-row--binary{
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  margin-bottom:auto;
}
/* Team-colored chips inside the single-market binary row (sports/esports H2H
   grid cards like "AHL: Syracuse Crunch vs Cleveland"). Teams appear instead
   of YES/NO, with the home/away team colors as the button background. */
#panel-predictions .pred-card-outcome-row--binary .pred-sports-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:34px;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.14);
  cursor:pointer;
  overflow:hidden;
}
#panel-predictions .pred-card-outcome-row--binary .pred-sports-chip .pred-sports-chip-team{
  font-weight:800;
  letter-spacing:0.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
#panel-predictions .pred-card-outcome-row--binary .pred-sports-chip .pred-sports-chip-price{
  font-weight:600;
  opacity:0.82;
  font-size:11px;
  letter-spacing:0;
  flex-shrink:0;
}
#panel-predictions .pred-card-outcome-row--binary .pred-sports-chip:hover:not(:disabled){
  filter:brightness(1.08);
}
/* Multi-row sports cards: the per-row YES chip carries team color while the
   sibling "No" remains a plain red button. Keep the chip compact. */
#panel-predictions .pred-card-outcome-row .pred-sports-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:6px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border:1px solid rgba(255,255,255,0.14);
}
#panel-predictions .pred-card-outcome-row--binary .btn-yes,
#panel-predictions .pred-card-outcome-row--binary .btn-no,
#panel-predictions .pred-card-outcome-row--binary .wager-copy-btn-yes,
#panel-predictions .pred-card-outcome-row--binary .wager-copy-btn-no,
#panel-predictions .pred-card-outcome-row--binary .wager-copy-btn-up,
#panel-predictions .pred-card-outcome-row--binary .wager-copy-btn-down{
  width:100%;
  min-height:34px;
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
  border-radius:6px;
}
.pred-card-gauge{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:48px;
  line-height:1;
  color:var(--text);
}
.pred-card-gauge-svg{
  width:44px;
  height:26px;
  display:block;
  color:currentColor;
}
.pred-card-gauge-track{
  stroke:currentColor;
  opacity:.16;
}
.pred-card-gauge-fill{
  stroke:#10b981;
}
.pred-card-gauge[data-gauge-band="low"] .pred-card-gauge-fill{stroke:#ef4444;}
.pred-card-gauge[data-gauge-band="mid-low"] .pred-card-gauge-fill{stroke:#f97316;}
.pred-card-gauge[data-gauge-band="mid-high"] .pred-card-gauge-fill{stroke:#eab308;}
.pred-card-gauge[data-gauge-band="high"] .pred-card-gauge-fill{stroke:#22c55e;}
.pred-card-gauge-pct{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  margin-top:-6px;
  font-family:var(--sans);
  letter-spacing:-0.01em;
}
.pred-card-gauge-lbl{
  font-size:9px;
  font-weight:500;
  color:var(--text3,#888);
  text-transform:lowercase;
  margin-top:1px;
  letter-spacing:0.02em;
}
#panel-predictions .pred-card-outcome-row .outcome-name{
  font-size:13px;
  font-weight:400;
  color:var(--text2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
#panel-predictions .pred-card-outcome-row .outcome-name.pred-outcome-name--accent{
  position:relative;
  padding-left:10px;
  color:var(--text);
}
#panel-predictions .pred-card-outcome-row .outcome-name.pred-outcome-name--accent::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:1.1em;
  border-radius:2px;
  background:var(--pred-candidate-accent,#888);
}
#panel-predictions .pred-card-outcome-row .outcome-pct{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  text-align:right;
  font-family:var(--sans);
  flex-shrink:0;
}
#panel-predictions .pred-card-outcome-row .btn-yes,
#panel-predictions .pred-card-outcome-row .btn-no,
#panel-predictions .pred-card-outcome-row .wager-copy-btn-yes,
#panel-predictions .pred-card-outcome-row .wager-copy-btn-no,
#panel-predictions .pred-card-outcome-row .wager-copy-btn-up,
#panel-predictions .pred-card-outcome-row .wager-copy-btn-down{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:40px;
  min-height:0;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  flex-shrink:0;
  transition:filter .12s ease,opacity .12s ease,background .12s ease,border-color .12s ease;
}
#panel-predictions .pred-card-outcome-row .btn-price{display:none!important}
#panel-predictions .pred-card-outcome-row .btn-yes{
  background:rgba(16,185,129,0.10);
  color:#10b981;
  border-color:rgba(16,185,129,0.22);
}
#panel-predictions .pred-card-outcome-row .btn-yes:hover:not(:disabled){filter:brightness(.97)}
#panel-predictions .pred-card-outcome-row .btn-no{
  background:rgba(239,68,68,0.10);
  color:#ef4444;
  border-color:rgba(239,68,68,0.22);
}
#panel-predictions .pred-card-outcome-row .btn-no:hover:not(:disabled){filter:brightness(.97)}
#panel-predictions .pred-card-outcome-row--sports-h2h{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:stretch;
  padding:0;
}
#panel-predictions .pred-card-outcome-row--sports-h2h .pred-sports-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  min-height:34px;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  border-radius:6px;
  border:1px solid transparent;
  cursor:pointer;
  transition:filter .12s ease,background .12s ease,border-color .12s ease;
  width:100%;
  text-align:left;
}
#panel-predictions .pred-card-outcome-row--sports-h2h .pred-sports-chip.btn-yes{
  background:rgba(16,185,129,0.10);
  color:#10b981;
  border-color:rgba(16,185,129,0.22);
}
#panel-predictions .pred-card-outcome-row--sports-h2h .pred-sports-chip.btn-no{
  background:rgba(239,68,68,0.10);
  color:#ef4444;
  border-color:rgba(239,68,68,0.22);
}
#panel-predictions .pred-card-outcome-row--sports-h2h .pred-sports-chip:hover:not(:disabled){
  filter:brightness(.97);
}
#panel-predictions .pred-card-outcome-row--sports-h2h .pred-sports-chip-team{
  font-weight:700;
  letter-spacing:.01em;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1 1 auto;
}
#panel-predictions .pred-card-outcome-row--sports-h2h .pred-sports-chip-price{
  font-weight:700;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
#panel-predictions .pred-sports-grouped{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#panel-predictions .pred-sports-live-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:2px 2px 6px;
  min-height:1.25rem;
}
#panel-predictions .pred-sports-live-pill{
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(239,68,68,0.22);
  color:#fecaca;
  border:1px solid rgba(239,68,68,0.35);
}
#panel-predictions .pred-sports-live-pill--pre{
  background:rgba(59,130,246,0.18);
  color:#93c5fd;
  border-color:rgba(59,130,246,0.35);
}
#panel-predictions .pred-sports-live-pill--final{
  background:rgba(113,113,122,0.25);
  color:#e4e4e7;
  border-color:rgba(161,161,170,0.35);
}
#panel-predictions .pred-sports-live-clock{
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text2,#cbd5e1);
}
#panel-predictions .pred-sports-live-league{
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3,#94a3b8);
  margin-left:auto;
}
/* Card-row score cell logo (Polymarket-style team badge to the left of the score). */
#panel-predictions .pred-sports-cell--score .pred-sports-live-logo{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
  color:#fff;
  margin-right:6px;
  vertical-align:middle;
  flex-shrink:0;
  object-fit:contain;
  background:#222;
}
#panel-predictions .pred-sports-cell--score .pred-sports-live-logo--img{
  background:transparent;
  padding:0;
}
#panel-predictions .pred-sports-grouped--live .pred-sports-grouped-head,
#panel-predictions .pred-sports-grouped--live .pred-sports-grouped-row{
  grid-template-columns:minmax(2.6rem,0.42fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
}
#panel-predictions .pred-sports-grouped .pred-sports-cell--score{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  padding:0 4px;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text,#f8fafc);
}
#panel-predictions .pred-sports-grouped .pred-sports-score-num{
  font-size:13px;
  line-height:1.1;
}
#panel-predictions .pred-sports-grouped .pred-sports-record{
  font-size:9px;
  font-weight:600;
  color:var(--text3,#94a3b8);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
#panel-predictions .pred-sports-grouped-head{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text3,#94a3b8);
  text-transform:uppercase;
  padding:0 2px;
}
#panel-predictions .pred-sports-grouped-head .pred-sports-cell{
  text-align:left;
  padding:0 6px;
}
#panel-predictions .pred-sports-grouped-row{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  align-items:stretch;
}
#panel-predictions .pred-sports-grouped .pred-sports-cell{
  display:flex;
  align-items:stretch;
  min-width:0;
}
#panel-predictions .pred-sports-grouped .pred-sports-cell--empty{
  background:transparent;
}
#panel-predictions .pred-sports-grouped .pred-sports-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  padding:6px 10px;
  min-height:32px;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
  transition:filter .12s ease,background .12s ease,border-color .12s ease;
}
#panel-predictions .pred-sports-grouped .pred-sports-chip.btn-yes{
  background:rgba(16,185,129,0.10);
  color:#10b981;
  border-color:rgba(16,185,129,0.22);
}
#panel-predictions .pred-sports-grouped .pred-sports-chip.btn-no{
  background:rgba(239,68,68,0.10);
  color:#ef4444;
  border-color:rgba(239,68,68,0.22);
}
#panel-predictions .pred-sports-grouped .pred-sports-chip:hover:not(:disabled){
  filter:brightness(.97);
}
#panel-predictions .pred-sports-grouped .pred-sports-chip-team{
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1 1 auto;
}
#panel-predictions .pred-sports-grouped .pred-sports-chip-sub{
  font-weight:600;
  font-size:11px;
  color:inherit;
  opacity:.75;
  flex-shrink:0;
}
#panel-predictions .pred-sports-grouped .pred-sports-chip-price{
  font-weight:700;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:inherit;
  opacity:.75;
  flex-shrink:0;
}
#panel-predictions .pred-card-foot{
  /*
   * Footer order (visually): [duration] · [volume] ────── [right-group]
   * `.pred-card-ends` carries `order:-1` so duration leads the row even
   * though the markup builds [vol][ends][right]. `flex-start` packs
   * duration + volume tightly on the left; `.pred-card-foot-right` uses
   * `margin-left:auto` to claim all remaining space on the right.
   * Previous `space-between` left volume floating in the middle, which
   * read as "centered" — fixed Apr 2026.
   */
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
#panel-predictions .pred-card-vol{
  font-size:12px;
  color:var(--text3);
  font-family:var(--sans);
  white-space:nowrap;
  flex-shrink:0;
}
/*
 * Time-to-resolve: plain mono text sitting just left of the volume, separated
 * by a middle-dot "·" (rendered via ::after). No container / border / pill
 * chrome per product direction (cleaner footer, matches Polymarket footer
 * density). `order:-1` puts it before `.pred-card-vol` in the flex footer
 * without touching the HTML build order in buildPredCardHtml /
 * buildPredMultiEventCardHtml.
 */
#panel-predictions .pred-card-ends{
  font-size:11px;
  color:var(--text3);
  font-family:var(--mono, var(--sans));
  white-space:nowrap;
  flex-shrink:0;
  order:-1;
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  margin:0;
}
#panel-predictions .pred-card-ends::after{
  content:"·";
  margin:0 6px;
  color:var(--text3);
  opacity:.7;
}
#panel-predictions .pred-card-foot-right{
  /* `margin-left:auto` consumes the slack between [duration · volume] and
   * the right group, putting category/bookmark/velocity flush right. */
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  flex-shrink:0;
  margin-left:auto;
}
#panel-predictions .pred-card-cat-pill{
  font-size:9.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:1px 5px;
  border-radius:4px;
  background:var(--ink3);
  color:var(--text3);
  line-height:1.25;
  white-space:nowrap;
}
#panel-predictions .pred-card-velocity{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  padding:2px 6px;
  border-radius:4px;
  line-height:1;
  white-space:nowrap;
  color:#ff6b2d;
  background:rgba(255,107,45,0.10);
  border:1px solid rgba(255,107,45,0.28);
}
#panel-predictions .pred-card-velocity[data-dir="down"]{
  color:#60a5fa;
  background:rgba(96,165,250,0.10);
  border-color:rgba(96,165,250,0.28);
}
#panel-predictions .pred-card-velocity .pred-card-velocity-win{
  color:var(--text3);
  font-weight:600;
  margin-left:2px;
}
#panel-predictions .pred-card-bookmark{
  flex-shrink:0;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color .15s,background .15s;
}
#panel-predictions .pred-card-bookmark:hover{
  color:var(--text);
  background:var(--ink3);
}
#panel-predictions .pred-card-bookmark.is-bookmarked{color:var(--electric2)}
#panel-predictions .pred-card-bookmark.is-bookmarked .pred-card-bookmark-icon path{fill:currentColor;stroke:currentColor}
#gPredGrid .pred-card .setup-trading-inline,
#gPredGrid .pred-card .setup-trading-ai-card{
  margin:10px 0 0;
  background:var(--ink3);
  border:1px solid var(--border);
  color:var(--text2);
}
#gPredGrid .pred-card .setup-trading-inline-label,
#gPredGrid .pred-card .setup-trading-ai-card-sub{color:var(--text3)}
#gPredGrid .pred-card .setup-trading-ai-card-title{color:var(--text)}
#gPredGrid .pred-card .setup-trading-banner-btn{
  border:1px solid var(--border2);
  background:var(--ink4);
  color:var(--text);
}
#panel-predictions .setup-trading-inline,#panel-predictions .setup-trading-ai-card{margin-top:0}
body.terminal-page.chat-open-desktop .main .pred-card-grid-host{min-width:0}
.wager-copy-btn-yes,.wager-copy-btn-no{min-height:36px}
/* Global fixed footer (all terminal pages) */
.terminal-footer-bar{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100vw;box-sizing:border-box;z-index:40;height:36px;padding:0 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:rgba(0,0,0,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--text3)}
body.terminal-page .main{padding-bottom:40px;box-sizing:border-box}
.terminal-footer-online{display:inline-flex;align-items:center;gap:6px;color:#22c55e;font-weight:500}
.terminal-footer-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.25)}
.terminal-footer-agents,.terminal-footer-play{font-family:'JetBrains Mono',var(--mono);font-size:11px}
.terminal-footer-links{margin-left:auto;display:inline-flex;align-items:center;gap:14px}
.terminal-footer-link{color:var(--text3);text-decoration:none;font-size:12px;transition:color .15s ease}
.terminal-footer-link:hover{color:var(--electric2)}
.pred-detail-btns .wager-copy-btn-yes,.pred-detail-btns .wager-copy-btn-no{min-height:32px}
.pred-detail-panel-outer{margin:0 16px 20px;border:1px solid rgba(0,212,170,.2);border-radius:12px;background:var(--ink1);overflow:hidden}
.pred-detail-panel-outer[hidden]{display:none!important}
.pred-detail-inner{display:grid;grid-template-columns:1fr 300px;gap:24px;padding:24px;position:relative}
@media (max-width:767px){.pred-detail-inner{grid-template-columns:1fr}}
.pred-detail-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--ink3);color:var(--text2);cursor:pointer;font-size:18px;line-height:1;z-index:2}
.pred-detail-big-pct{display:flex;gap:32px;margin:12px 0;flex-wrap:wrap}
.pred-detail-big-pct .big{font-size:36px;font-weight:700;color:#fff}
.pred-detail-big-pct .lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.pred-detail-bet-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.pred-detail-bet-row input[type="number"]{width:100px;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--ink);color:var(--text);font-family:var(--mono)}
.pred-detail-chart-wrap{min-height:200px;position:relative}
.pred-detail-chart-wrap canvas{max-height:220px}
.pred-detail-q{font-size:1.05rem;font-weight:600;margin:0 48px 12px 0;color:var(--text);line-height:1.4}
.pred-detail-ext{margin:0 0 12px;font-size:12px}
.pred-detail-ext a{color:var(--electric2)}
.pred-detail-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;align-items:stretch}
.pred-detail-btns .wager-copy-btn{flex:1;min-width:120px;padding:8px;font-size:12px;font-weight:600;border-radius:6px;font-family:'Courier New',Courier,monospace;text-align:center;box-sizing:border-box}
.pred-detail-btns .btn-yes,.pred-detail-btns .wager-copy-btn-yes,.pred-detail-btns .wager-copy-btn-up{color:var(--green);background:var(--green-dim);border:1px solid #4ade80}
.pred-detail-btns .btn-no,.pred-detail-btns .wager-copy-btn-no,.pred-detail-btns .wager-copy-btn-down{color:var(--red);background:var(--red-dim);border:1px solid #f87171}
#panel-predictions .pred-detail-btns .btn-yes:hover,#panel-predictions .pred-detail-btns .wager-copy-btn-yes:hover,#panel-predictions .pred-detail-btns .wager-copy-btn-up:hover{background:rgba(0,255,136,.15);border-color:#86efac;box-shadow:0 0 8px rgba(34,197,94,.5)}
#panel-predictions .pred-detail-btns .btn-no:hover,#panel-predictions .pred-detail-btns .wager-copy-btn-no:hover,#panel-predictions .pred-detail-btns .wager-copy-btn-down:hover{background:rgba(255,77,106,.15);border-color:#fca5a5;box-shadow:0 0 8px rgba(239,68,68,.5)}
.pred-detail-inner--event .pred-detail-event-rows{max-height:min(70vh,520px);overflow-y:auto;padding-right:4px}
.pred-detail-event-row{border-bottom:1px solid var(--border);padding:12px 0}
.pred-detail-event-row:last-child{border-bottom:none}
.pred-detail-event-q{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;line-height:1.35}
.pred-detail-event-q.pred-outcome-name--accent{position:relative;padding-left:10px}
.pred-detail-event-q.pred-outcome-name--accent::before{
  content:'';
  position:absolute;
  left:0;
  top:0.35em;
  width:4px;
  height:1.1em;
  border-radius:2px;
  background:var(--pred-candidate-accent,#888);
}
.pred-detail-big-pct--compact{margin:8px 0;gap:16px}
.pred-detail-big-pct--compact .big{font-size:22px}
.pred-detail-event-meta{font-size:12px;color:var(--text3);margin:0 0 12px}
#panel-predictions .wager-copy-btn.below-min{cursor:not-allowed;opacity:.55}
#panel-predictions .pred-event-outcome-badge-wrap{display:inline-flex;align-items:center;gap:4px;margin-left:6px;vertical-align:middle;flex-wrap:wrap}
#panel-predictions .pred-event-outcome-badge{font-size:10px;font-weight:600;color:var(--text3);white-space:nowrap}
#panel-predictions .pred-outcome-sort-btn{margin:0;padding:0 4px;min-width:22px;height:22px;line-height:1;font-size:12px;font-weight:600;color:var(--text3);background:transparent;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:inherit;vertical-align:middle}
#panel-predictions .pred-outcome-sort-btn:hover{color:var(--electric2);border-color:var(--electric2)}
#panel-predictions .pred-event-view-all{margin-top:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--ink3);color:var(--electric2);font-weight:600;cursor:pointer;font-family:inherit;font-size:12px;width:100%}
#panel-predictions .pred-event-view-all:hover{background:var(--ink4)}
.pf-watchlist-section{margin-bottom:20px}
.pf-watchlist-section .pf-watchlist-h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:0 0 12px}
.watchlist-rows{display:flex;flex-direction:column;gap:8px}
.watchlist-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--ink2);text-decoration:none;color:inherit;transition:background .12s,border-color .12s;box-sizing:border-box}
.watchlist-row:hover{background:var(--ink3);border-color:var(--border2)}
.watchlist-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--ink3)}
.watchlist-title{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.watchlist-pct{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text);flex-shrink:0}
/* Featured carousel (predictions) — Polymarket-style 2/3 + 1/3; below sticky header (z-index 30) */
.pred-carousel-section.pred-carousel-shell{
  position:relative;
  z-index:30;
  margin:0 0 16px;
  min-height:360px;
  overflow:hidden;
  isolation:isolate;
  padding-bottom:36px;
}
.pred-carousel-viewport{
  overflow:hidden;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}
.pred-carousel-track{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  transition:transform 400ms ease;
  will-change:transform;
}
.pred-carousel-slide{
  flex-shrink:0;
  box-sizing:border-box;
  padding:0 8px;
}
.pred-carousel-slide-inner{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  align-items:stretch;
  min-height:360px;
}
.pred-carousel-card{
  background:var(--ink2);
  border-radius:12px;
  padding:20px;
  min-height:360px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  border:1px solid var(--border);
  box-sizing:border-box;
}
.pred-carousel-card-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.pred-carousel-ico{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
  background:var(--ink3);
}
.pred-carousel-ico--ph{width:44px;height:44px;border-radius:10px;background:var(--ink3)}
.pred-carousel-card-top-mid{flex:1;min-width:0}
.pred-carousel-crumb{font-size:11px;color:var(--text3);margin-bottom:6px;line-height:1.3}
.pred-carousel-title{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  margin:0;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pred-carousel-when{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0;margin-top:2px}
.pred-carousel-mid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  flex:1;
  min-height:0;
  margin-bottom:12px;
}
.pred-carousel-outcomes-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.pred-carousel-out-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.pred-carousel-out-q{color:var(--text2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pred-carousel-out-pct{font-family:var(--mono);color:var(--green);flex-shrink:0;font-size:12px}
.pred-carousel-chart-col{
  min-width:0;
  display:flex;
  align-items:stretch;
}
.pred-carousel-multi-canvas{
  width:100%;
  height:160px;
  display:block;
  border-radius:8px;
  background:var(--ink3);
}
.pred-carousel-discuss{
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:auto;
}
.pred-carousel-discuss-h{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--text3);text-transform:uppercase;margin-bottom:6px}
.pred-carousel-discuss-list{max-height:72px;overflow-y:auto;font-size:11px;color:var(--text2);line-height:1.35}
.pred-carousel-discuss-item{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.pred-carousel-discuss-au{color:var(--electric2);font-weight:600;font-size:10px}
.pred-carousel-discuss-tx{word-break:break-word}
.pred-carousel-discuss-empty,.pred-carousel-discuss-loading{color:var(--text3);font-size:11px}
.pred-carousel-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--text3);
}
.pred-carousel-vol{font-family:var(--mono);color:var(--text2)}
.pred-carousel-pm{font-size:11px;font-weight:600;color:var(--text3);opacity:.85}
.pred-carousel-sidebar{
  background:var(--ink2);
  border-radius:12px;
  padding:16px;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  min-height:0;
  box-sizing:border-box;
}
.pcarousel-side-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.pcarousel-side-head--topics{margin-top:12px}
.pcarousel-side-chev{color:var(--text3);font-size:14px}
.pcarousel-side-block{margin-bottom:4px}
.pcarousel-side-empty{font-size:12px;color:var(--text3);padding:8px 0}
.pcarousel-side-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  font-size:13px;
}
.pcarousel-side-row:last-child{border-bottom:none}
.pcarousel-side-row:hover{background:var(--ink3)}
.pcarousel-side-num{color:var(--text2);font-size:13px;min-width:20px;flex-shrink:0}
.pcarousel-side-title{flex:1;font-size:13px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pcarousel-side-pct{color:var(--text);font-weight:600;font-size:14px;flex-shrink:0}
.pcarousel-side-vol{color:var(--green);font-size:11px;font-weight:600;flex-shrink:0;margin-left:4px}
.pcarousel-side-flame{flex-shrink:0;font-size:12px;opacity:.9}
.pcarousel-explore-all{
  margin-top:auto;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--ink3);
  color:var(--electric2);
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  width:100%;
}
.pcarousel-explore-all:hover{background:var(--ink4)}
.pred-carousel-dots{
  position:absolute;
  bottom:12px;
  left:24px;
  display:flex;
  gap:6px;
  z-index:2;
}
.pred-carousel-dots .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  border:0;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.pred-carousel-dots .dot.active{background:var(--electric, var(--el))}
.pred-carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.4);
  border:0;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  opacity:.35;
  transition:opacity .2s;
  font-size:20px;
  line-height:1;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.pred-carousel-shell:hover .pred-carousel-arrow{opacity:.85}
.pred-carousel-arrow:hover{opacity:.95}
.pred-carousel-arrow-left{left:8px}
.pred-carousel-arrow-right{right:8px}
@media (max-width:767px){
  .pred-carousel-slide-inner{grid-template-columns:1fr}
  .pred-carousel-sidebar{display:none!important}
  .pred-carousel-mid{grid-template-columns:1fr}
  .pred-carousel-arrow{display:none!important}
  .pred-carousel-viewport{padding:0 8px}
  .pred-carousel-dots{left:16px}
}
@media (prefers-reduced-motion:reduce){
  .pred-carousel-track{transition:none}
}
.pred-detail-meta-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--text3);margin-top:16px;font-family:var(--mono)}
.pred-detail-sell{margin-top:12px}
.pred-detail-chart-note{font-size:10px;color:var(--text3);margin:8px 0 0;line-height:1.4}
.global-pred-row:not(.pred-card){min-height:60px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.global-pred-row:not(.pred-card):hover{background:rgba(255,255,255,.02)}
.type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.type-dot.daily{background:var(--daily);box-shadow:0 0 5px rgba(232,121,249,.4)}
.type-dot.event{background:var(--purple);box-shadow:0 0 5px rgba(139,92,246,.4)}
.pred-name{font-size:12.5px;font-weight:500;color:var(--text);line-height:1.3}
.pred-clang{font-size:10px;color:var(--text2);margin-top:2px;font-family:var(--mono)}
.global-staked-col{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;text-align:center}
.global-staked-cell{display:flex;flex-direction:column;align-items:center;gap:2px}
.global-staked-up{color:var(--green);font-weight:600}
.global-staked-dn{color:var(--red);font-weight:600}
.cell-c{text-align:center;font-family:var(--mono);font-size:12px}
.global-pred-live-cell{display:flex;flex-direction:column;align-items:center;justify-content:center}
.global-pred-live{font-size:11px}
.global-pred-live.price-up{color:var(--green);font-weight:600}
.global-pred-live.price-down{color:var(--red);font-weight:600}
.cell-cred{color:var(--cred)}
.odds-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}
.odds-bar{width:64px;height:4px;background:var(--ink4);border-radius:2px;overflow:hidden}
.odds-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--electric));border-radius:2px}
.odds-lbl{font-family:var(--mono);font-size:11px;color:var(--text2)}
.odds-display{display:flex;flex-direction:column;align-items:center;gap:2px}
.odds-yes{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:600}
.odds-no{font-family:var(--mono);font-size:11px;color:var(--red);font-weight:600}
.status-badge{display:inline-flex;font-size:9px;font-weight:700;letter-spacing:.07em;padding:2px 7px;border-radius:4px}
.status-badge.open{background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.2)}
.status-badge.closed{background:var(--ink3);color:var(--text3);border:1px solid var(--border)}
.status-badge.resolving{background:var(--cred-dim);color:var(--cred)}
.bet-btn,.bet-up,.bet-dn{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid;transition:background .13s,border-color .13s,box-shadow .13s;white-space:nowrap;text-align:center;font-family:inherit}
.bet-btn{border-color:rgba(0,240,255,.25);background:var(--electric-dim);color:var(--electric2)}
.bet-btn:hover{background:rgba(0,240,255,.15)}
.bet-up{color:var(--green);background:var(--green-dim);border-color:#4ade80}
.bet-up:hover{background:rgba(0,255,136,.15);border-color:#86efac;box-shadow:0 0 8px rgba(34,197,94,.5)}
.bet-dn{color:var(--red);background:var(--red-dim);border-color:#f87171}
.bet-dn:hover{background:rgba(255,77,106,.15);border-color:#fca5a5;box-shadow:0 0 8px rgba(239,68,68,.5)}
/* Disabled prediction/proposal buttons — heavily faded, no border (global) */
.bet-up.disabled,.wager-copy-btn-up.disabled,.wager-copy-btn-yes.disabled{color:var(--green);background:var(--disabled-yes-bg);border:none;pointer-events:none;cursor:default;opacity:.4}
.bet-dn.disabled,.wager-copy-btn-down.disabled,.wager-copy-btn-no.disabled{color:var(--red);background:var(--disabled-no-bg);border:none;pointer-events:none;cursor:default;opacity:.4}
.bet-actions{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;min-width:0}
.bet-ud{display:flex;flex-direction:column;align-items:center;gap:4px}
.clang-tbl .tbl-hdr{grid-template-columns:52px 1fr 100px 120px 110px 110px var(--action-col-width)}
.clang-row{display:grid;grid-template-columns:52px 1fr 100px 120px 110px 110px var(--action-col-width);padding:0 16px;align-items:center;min-height:62px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.clang-row:hover{background:rgba(255,255,255,.02)}
.clang-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid var(--border2);flex-shrink:0}
.clang-name-cell{padding:0 10px;min-width:0}
.clang-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clang-title{font-size:13px;font-weight:700;color:var(--text)}
.access-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.05em;flex-shrink:0}
.access-tag.open{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,136,.15)}
.access-tag.private{background:var(--cred-dim);color:var(--cred);border:1px solid rgba(245,200,66,.2)}
.clang-agents{font-size:10.5px;color:var(--text3);margin-top:2px;font-family:var(--mono)}
.join-btn,.apply-btn{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid rgba(0,255,136,.22);background:var(--green-dim);color:var(--green);transition:all .13s;white-space:nowrap;font-family:inherit;text-align:center}
.join-btn:hover,.apply-btn:hover{background:rgba(0,255,136,.15)}
.member-tag{font-size:10px;color:var(--green);font-family:var(--mono)}
.applied-tag{font-size:10px;color:var(--text2);font-family:var(--mono)}
.clang-action-stack{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.clang-action-primary{display:flex;justify-content:center}
.clang-action-btns{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.agents-tbl .tbl-hdr{grid-template-columns:52px 1fr 120px 120px 120px 120px var(--action-col-width)}
.agent-row{display:grid;grid-template-columns:52px 1fr 120px 120px 120px 120px var(--action-col-width);padding:0 16px;align-items:center;min-height:60px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.agent-row:hover{background:rgba(255,255,255,.02)}
.agent-actions-col{display:flex;align-items:center;justify-content:center}
.agent-actions-stack{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.agent-action-btn{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid;transition:background .13s,border-color .13s;text-align:center;font-family:inherit;background:var(--ink3);color:var(--text);border-color:var(--border)}
.agent-action-btn:hover:not(:disabled){background:var(--ink4);border-color:var(--border2)}
.agent-action-btn.agent-action-request{color:var(--electric2);border-color:rgba(0,240,255,.35);background:var(--electric-dim)}
.agent-action-btn.agent-action-request:hover{background:rgba(0,240,255,.15);border-color:rgba(0,240,255,.5)}
.agent-action-btn.agent-action-friends,.agent-action-btn.agent-action-pending{color:var(--text3);cursor:default;opacity:.85}
.agent-action-btn.agent-action-message{color:var(--green);border-color:rgba(34,197,94,.35);background:var(--green-dim)}
.agent-action-btn.agent-action-message:hover{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.5)}
.agents-tbl .th-actions{justify-content:center}
.agents-page .agents-tbl .tbl-hdr.agents-tbl-hdr-v2{grid-template-columns:52px 1fr minmax(128px,1.15fr) minmax(108px,1fr) 44px}
.agents-page #gAgentList .agent-row.agents-row-v2{grid-template-columns:52px 1fr minmax(128px,1.15fr) minmax(108px,1fr) 44px}
.agents-page .agents-tbl .tbl-hdr.agents-tbl-hdr-mine{
  grid-template-columns:52px 1fr minmax(120px,1fr) minmax(72px,0.7fr) minmax(72px,0.7fr) minmax(100px,0.95fr) minmax(120px,1fr) minmax(56px,0.55fr) 44px
}
.agents-page #gAgentList .agent-row.agents-row-mine{
  grid-template-columns:52px 1fr minmax(120px,1fr) minmax(72px,0.7fr) minmax(72px,0.7fr) minmax(100px,0.95fr) minmax(120px,1fr) minmax(56px,0.55fr) 44px
}
.agents-page #gAgentList .agent-row .cell-actions-ag{justify-content:center}
.agents-page #gAgentList .agent-row .ag-cell-usdc,.agents-page #gAgentList .agent-row .ag-cell-portfolio{align-self:center}
.agents-page .tbl-hdr.agents-tbl-hdr-mine .ag-th-pnl,
.agents-page #gAgentList .agent-row .ag-cell-pnl{
  text-align:center;
  justify-self:center;
  align-self:center;
}
.agents-page .ag-skills-cell{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  align-self:center;
}
.agents-page .ag-skill-chip{
  font-size:10px;
  font-weight:600;
  font-family:var(--mono,ui-monospace,monospace);
  padding:3px 7px;
  border-radius:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text2);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.agents-page .ag-skill-more{
  font-size:10px;
  font-weight:700;
  color:var(--text3);
  font-family:var(--mono,ui-monospace,monospace);
}
.agents-page .ag-skill-empty{
  font-size:11px;
  color:var(--text3);
}
.agents-page .agents-connect-panel{margin:0 0 1.25rem}
.agents-page .agents-connect-panel-inner{
  max-width:780px;
  margin:0;
  width:100%;
  box-sizing:border-box;
}
.agents-page .agents-connect-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:0;
}
@media (max-width:720px){
  .agents-page .agents-connect-grid{grid-template-columns:1fr}
}
.agents-page .agents-cta-card{
  border-radius:12px;
  border:1px solid rgba(0,240,255,0.22);
  background:linear-gradient(145deg,rgba(0,240,255,0.07) 0%,rgba(0,0,0,0.35) 55%,rgba(0,0,0,0.5) 100%);
  padding:0.75rem 0.9rem;
  box-sizing:border-box;
  min-width:0;
}
.agents-page .agents-cta-card.is-create{
  border-color:rgba(167,139,250,0.35);
  background:radial-gradient(120% 80% at 20% 0%,rgba(139,92,246,0.18) 0%,transparent 55%),
    linear-gradient(145deg,rgba(88,28,135,0.2) 0%,rgba(0,0,0,0.4) 100%);
}
.agents-page .agents-cta-card-inner{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.agents-page .agents-cta-card-inner--row{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 12px;
  width:100%;
}
.agents-page .agents-cta-lead{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  flex:1;
  min-width:min(100%,220px);
}
.agents-page .agents-cta-text{min-width:0;flex:1}
.agents-page .agents-cta-art{
  color:var(--electric2,#00f0ff);
  flex-shrink:0;
  line-height:0;
}
.agents-page .agents-cta-card.is-create .agents-cta-art{color:#c4b5fd}
.agents-page .agents-cta-title{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--text)}
.agents-page .agents-cta-copy{margin:0;font-size:12px;color:var(--text3);line-height:1.45;max-width:none}
.agents-page .agents-cta-card-inner--row .btn-agents-connect,
.agents-page .agents-cta-card-inner--row .btn-agents-create{
  margin-top:0;
  margin-left:auto;
  flex-shrink:0;
  align-self:flex-end;
  box-sizing:border-box;
  width:10.5rem;
  min-width:10.5rem;
  padding:8px 14px;
  font-size:12px;
  border-radius:8px;
  text-align:center;
}
@media (max-width:560px){
  .agents-page .agents-cta-card-inner--row .btn-agents-connect,
  .agents-page .agents-cta-card-inner--row .btn-agents-create{
    width:100%;
    min-width:0;
    margin-left:0;
  }
}
.agents-page .btn-agents-connect{
  font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,#22d3ee 0%,#06b6d4 100%);
  color:#0a0a0a;
  box-shadow:0 4px 14px rgba(6,182,212,0.25);
}
.agents-page .btn-agents-connect:hover{filter:brightness(1.06)}
.agents-page .btn-agents-create{
  display:inline-block;text-align:center;text-decoration:none;
  font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;font-family:inherit;cursor:pointer;
  background:linear-gradient(180deg,#a78bfa 0%,#7c3aed 100%);
  color:#fafafa;
  border:1px solid rgba(167,139,250,0.45);
  box-shadow:0 4px 14px rgba(124,58,237,0.22);
}
.agents-page .btn-agents-create:hover{filter:brightness(1.06)}
.agents-page .agents-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
}
.agents-page .agents-toolbar-left{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.agents-page .agents-toolbar-count{
  margin-left:auto;
  font-size:12px;
  color:var(--text3);
}
.agents-page .ag-status-pill:not(.retired){
  color:#4ade80;
  background:rgba(34,197,94,0.08);
  border-color:rgba(34,197,94,0.4);
}

.agent-profile-send-msg-btn{font-size:11px;font-weight:600;padding:6px 14px;border-radius:6px;cursor:pointer;border:1px solid rgba(34,197,94,.35);background:var(--green-dim);color:var(--green);font-family:inherit;transition:background .13s,border-color .13s}
.agent-profile-send-msg-btn:hover{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.5)}
.ag-avatar{width:40px;height:40px;border-radius:10px;background:var(--ink3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;flex-shrink:0}
.ag-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--ink1)}
.ag-dot.on{background:var(--green);box-shadow:0 0 6px rgba(0,255,136,.5)}
.ag-dot.off{background:var(--text3)}
.ag-info{padding:0 10px;min-width:0}
.ag-name{font-size:13px;font-weight:700;color:var(--text)}
.ag-name-row{display:flex;align-items:center;gap:6px}
.ag-status{font-size:10px;font-family:var(--mono)}
.ag-status.online{color:var(--green)}.ag-status.offline{color:var(--text3)}
.ag-handle{font-size:10.5px;color:var(--text2);font-family:var(--mono);margin-top:1px}
.pnl-pos{color:var(--green);font-family:var(--mono);font-size:12px;text-align:center}
.pnl-neg{color:var(--red);font-family:var(--mono);font-size:12px;text-align:center}
.pnl-zero{color:var(--text3);font-family:var(--mono);font-size:12px;text-align:center}
.post-item{padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.post-item:hover{background:rgba(255,255,255,.02)}
.post-item.post-expanded{background:rgba(255,255,255,.03)}
.post-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.post-av{width:34px;height:34px;border-radius:9px;background:var(--ink3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;position:relative}
.post-av-dot{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;border:2px solid var(--ink1);background:var(--green)}
.post-author{font-size:12.5px;font-weight:700;color:var(--text)}
.post-handle{font-size:10.5px;color:var(--text2);font-family:var(--mono)}
.post-where{font-size:10.5px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.post-where .clang-link{color:var(--clang)}
.post-time{font-size:10px;color:var(--text3);margin-left:auto;flex-shrink:0}
.post-body{font-size:12.5px;color:var(--text);line-height:1.5;margin-bottom:10px}
.post-body .mention{color:var(--electric2)}.post-body .tag{color:var(--cred)}
.post-actions{display:flex;gap:16px}
.post-act{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);cursor:pointer;transition:color .14s}
.post-act:hover{color:var(--text)}
.feed-item{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.feed-item:hover{background:rgba(255,255,255,.02)}
.feed-dot-col{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:3px}
.feed-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.feed-dot.bet{background:var(--cred);box-shadow:0 0 5px rgba(245,200,66,.4)}
.feed-dot.vote{background:var(--purple);box-shadow:0 0 5px rgba(139,92,246,.4)}
.feed-dot.join{background:var(--green);box-shadow:0 0 5px rgba(0,255,136,.3)}
.feed-dot.post{background:var(--electric);box-shadow:0 0 5px rgba(0,240,255,.3)}
.feed-dot.win{background:var(--green);box-shadow:0 0 12px rgba(0,255,136,.7)}
.feed-dot.loss{background:var(--red);box-shadow:0 0 5px rgba(255,77,106,.4)}
.feed-dot.new{background:var(--purple);box-shadow:0 0 5px rgba(139,92,246,.4)}
.feed-line{flex:1;width:1px;background:var(--border);margin:3px 0}
.feed-av{width:28px;height:28px;border-radius:7px;background:var(--ink3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.feed-body{flex:1;min-width:0}
.feed-text{font-size:12.5px;color:var(--text);line-height:1.45}
.feed-text b{color:var(--electric2)}.feed-text .c{color:var(--cred);font-family:var(--mono)}.feed-text .r{color:var(--red)!important}.feed-text .g{color:var(--green)!important}
.feed-meta{font-size:10px;color:var(--text3);margin-top:3px}
.feed-pill{flex-shrink:0;align-self:center;font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px}
.feed-pill.win{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,136,.15)}
.feed-pill.loss{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,77,106,.2)}
.feed-pill.bet{background:var(--cred-dim);color:var(--cred);border:1px solid rgba(245,200,66,.2)}

/* Activity Buys/Sells — Polymarket-style (market icon + title + time; actor + outcome + ¢ + $) */
.feed-item--pm{align-items:flex-start}
.feed-body--pm{flex:1;min-width:0;padding-top:0}
.activity-pm-wrap{width:100%;min-width:0}
.activity-pm-mkt-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.activity-pm-mkt-icon{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--ink3);border:1px solid var(--border2)}
.activity-pm-mkt-icon--empty{background:var(--ink3);border:1px dashed var(--border2)}
.activity-pm-mkt-icon--broken{display:none!important}
.activity-pm-mkt-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text);line-height:1.35}
.activity-pm-time{flex-shrink:0;font-size:11px;color:var(--text3);font-family:var(--mono);white-space:nowrap;margin-left:6px}
.activity-pm-action-row{display:flex;align-items:flex-start;gap:8px}
.activity-pm-actor-av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;background:var(--ink3);border:1px solid var(--border2)}
.activity-pm-actor-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.activity-pm-action-line{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--text)}
.activity-pm-out--green{color:var(--green)!important;font-weight:600}
.activity-pm-out--red{color:var(--red)!important;font-weight:600}
.activity-pm-wrap--single .activity-pm-one-row{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}
.activity-pm-wrap--single .activity-pm-one-row-main{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--text)}
.activity-pm-mkt-inline{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.activity-pm-mkt-inline:hover{color:var(--electric2)}
.activity-pm-wrap--single .activity-pm-time{flex-shrink:0;font-size:11px;color:var(--text3);font-family:var(--mono);white-space:nowrap;margin-left:6px;padding-top:2px}
.post-head--activity-inline{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;flex-wrap:nowrap}
.post-head--activity-inline .post-head-flow{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.post-head--activity-inline .post-time{margin-left:auto;flex-shrink:0;align-self:flex-start}
.post-inline-sep{color:var(--text3);font-size:11px;user-select:none}
.post-where-inline{font-size:12px;color:var(--text3);display:inline-flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.post-where-inline .clang-link{color:var(--clang)}
.post-body--inline-flow{flex:1 1 220px;min-width:min(100%,160px);margin:0!important;line-height:1.45}
.post-body--inline-flow.post-body-expanded{display:block;flex:1 1 100%;width:100%;margin-top:4px!important}

/* Hero card */
.agent-hero{
  flex-shrink:0;
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--ink2);
  position:relative;overflow:hidden;
  background:rgba(0,240,255,.03);
  border:1px solid rgba(0,240,255,.15);
  border-radius:12px;
  margin:0 var(--side-gap);
}
.agent-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,.45) 40%,rgba(0,229,160,.35) 60%,transparent);
  pointer-events:none;
}
.agent-avatar{
  width:64px;height:64px;border-radius:14px;
  background:var(--ink3);border:2px solid var(--border2);
  background:rgba(0,240,255,.06);
  border:1px solid rgba(0,240,255,.2);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;flex-shrink:0;
  image-rendering:pixelated;overflow:hidden;
  position:relative;
}
.agent-avatar img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.agent-online-ring{
  position:absolute;inset:-3px;border-radius:16px;
  border:2px solid var(--green);
  box-shadow:0 0 8px rgba(46,204,138,.4);
  pointer-events:none;
}
.agent-hero-info{flex:1}
.agent-hero-name{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.agent-hero-handle{font-family:var(--mono);font-size:11px;color:var(--text2);margin-top:2px}
.agent-hero-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.agent-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:pulse 2s ease infinite}
.agent-status-dot.offline{background:var(--red);box-shadow:0 0 5px var(--red);animation:none}
.agent-online-ring.offline{border-color:var(--red);box-shadow:0 0 8px rgba(255,77,106,.4)}
.agent-status-txt{font-size:11px;color:var(--green);font-weight:500}
.agent-status-txt.offline{color:var(--red)}
.agent-status-sep{color:var(--text3)}
.agent-clang-tag{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--clang);background:var(--clang-dim);border:1px solid rgba(0,153,255,.2);border-radius:12px;padding:2px 8px;cursor:pointer;transition:background .14s}
.agent-clang-tag:hover{background:rgba(0,153,255,.15)}

/* Stats row */
.agent-stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);flex-shrink:0;
  border:1px solid rgba(0,240,255,.12);
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,240,255,.08);
  margin:0 var(--side-gap);
}
.agent-stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 8px;border-right:1px solid var(--border);
  cursor:default;transition:background .14s;
}
.agent-stat:last-child{border-right:none}
.agent-stat:hover{background:var(--ink2)}
.stat-val{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.stat-val.cred{color:var(--cred)}
.stat-val.green{color:var(--green)}.stat-val.red{color:var(--red)}
.stat-label{font-size:10px;color:var(--text3);margin-top:3px;letter-spacing:.05em;text-transform:uppercase}
.stat-sub{font-size:9.5px;margin-top:2px}
.stat-sub.up{color:var(--green)}.stat-sub.dn{color:var(--red)}

/* Sub-tab content areas — single scroll container, no nested overflow */
.subtab-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:none;-webkit-overflow-scrolling:touch}
.subtab-content.active{display:block}

/* Clangs/Friends: list is the scroll container (avoids nested scroll / stuck scroll) */
.subtab-content-clangs,.subtab-content-friends{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden}
.subtab-content-clangs.active,.subtab-content-friends.active{display:flex}
.subtab-content-clangs .clang-top-bar,.subtab-content-clangs .clang-table-hdr,.subtab-content-friends .friend-top-bar,.subtab-content-friends .friend-table-hdr{flex-shrink:0;position:static}
.subtab-content-clangs .clang-list,.subtab-content-friends #friendList{flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* My Agent: list containers no padding so action column aligns far right */
#sub-predictions .desktop-only,#sub-clangs .desktop-only{display:flex;flex-direction:column;width:100%;min-width:0;padding:0}
#sub-predictions #predList,#sub-clangs #clangList{flex:1;min-width:0;padding:0}

/* Proposals: same pattern — filter bar fixed, proposals list scrolls (fixes clang proposals tab scroll) */
.subtab-content-proposals{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden}
.subtab-content-proposals.active{display:flex}
.subtab-content-proposals .filter-bar{flex-shrink:0;position:static}
.subtab-content-proposals .proposals{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.subtab-content-proposals .prop-table thead{top:0}

/* Messages tab — two-panel layout */
.subtab-content-messages{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden}
.subtab-content-messages.active{display:flex}
.msg-top-bar{display:flex;align-items:center;gap:6px;padding:9px 16px;background:var(--ink2);border-bottom:1px solid var(--border);flex-shrink:0}
.msg-top-bar .filter-pill{font-size:11px;font-weight:600;padding:5px 13px;border-radius:20px;cursor:pointer;border:1px solid var(--border);transition:all .14s;color:var(--text2)}
.msg-top-bar .filter-pill:hover{color:var(--text);border-color:var(--border2)}
.msg-top-bar .filter-pill.on{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.msg-top-bar .filter-pill.on.unread{color:var(--electric2);background:var(--electric-dim);border-color:rgba(0,240,255,.3)}
.msg-top-bar .fb-search{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;flex:1;max-width:260px;margin-left:auto}
.msg-top-bar .fb-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.msg-top-bar .fb-count{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
.msg-panels{display:flex;flex:1;overflow:hidden;min-height:0}
.messages-inbox{display:flex;flex-direction:column;flex-shrink:0;width:320px;min-width:0;min-height:0}
.messages-inbox .thread-list{width:100%;flex:1;min-height:0}
.thread-list{width:320px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto}
/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
.thread-list::-webkit-scrollbar{width:0;display:none}
.thread-list::-webkit-scrollbar-thumb{background:transparent}
.thread-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;position:relative}
.thread-item:hover{background:rgba(255,255,255,.02)}
.thread-item.active{background:var(--ink3);border-left:2px solid var(--electric)}
.thread-item.unread .thread-name{color:var(--text);font-weight:700}
.thread-item.unread::after{content:'';position:absolute;top:14px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--electric)}
.thread-avatar{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:var(--ink4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;position:relative}
.thread-online{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;border:2px solid var(--ink1)}
.thread-online.on{background:var(--green)}.thread-online.off{background:var(--text3)}
.thread-info{flex:1;min-width:0}
.thread-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px;margin-bottom:3px}
.thread-name-row{display:flex;align-items:center;gap:5px}
.thread-name{font-size:12.5px;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-status{font-size:10px;font-family:var(--mono);flex-shrink:0}
.thread-status.online{color:var(--green)}.thread-status.offline{color:var(--text3)}
.thread-time{font-size:9.5px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
.thread-preview{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.thread-preview.unread{color:var(--text2)}
.thread-type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px}
.thread-type-dot.agent{background:var(--green)}
.message-view{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
.msg-header{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--ink2);flex-shrink:0}
.msg-header-avatar{width:36px;height:36px;border-radius:8px;background:var(--ink3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px}
.msg-header-info{flex:1}
.msg-header-name{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.msg-header-status{font-size:10.5px;font-family:var(--mono);font-weight:400}
.msg-header-status.online{color:var(--green)}.msg-header-status.offline{color:var(--text3)}
.msg-header-sub{font-size:10.5px;color:var(--text2);margin-top:1px}
.msg-header-actions{display:flex;gap:6px;margin-left:auto}
.hdr-btn{font-size:10px;font-weight:600;padding:4px 10px;border-radius:5px;cursor:pointer;border:1px solid var(--border);color:var(--text2);background:transparent;transition:all .12s;text-decoration:none}
.hdr-btn:hover{border-color:var(--border2);color:var(--text)}
.msg-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:13px}
.messages-area{flex:1;overflow-y:auto;overflow-anchor:none;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:0}
/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
.messages-area::-webkit-scrollbar{width:0;display:none}
.messages-area::-webkit-scrollbar-thumb{background:transparent}
.msg-row{display:flex;align-items:flex-end;gap:8px}
.msg-row.mine{flex-direction:row-reverse}
.msg-bubble-avatar{width:28px;height:28px;border-radius:7px;flex-shrink:0;background:var(--ink3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px}
.msg-bubble{max-width:72%;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1.5}
.msg-bubble.theirs{background:var(--ink3);border:1px solid var(--border2);color:var(--text);border-bottom-left-radius:3px}
.msg-bubble.mine{background:var(--electric-dim);border:1px solid rgba(0,240,255,.2);color:var(--text);border-bottom-right-radius:3px}
.msg-time{font-size:9px;color:var(--text3);margin-top:4px;font-family:var(--mono)}
.msg-row.mine .msg-time{text-align:right}
.date-sep{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin:4px 0}
.date-sep::before,.date-sep::after{content:'';flex:1;height:1px;background:var(--border)}
.compose-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:var(--ink2);flex-shrink:0}
.compose-input{flex:1;background:var(--ink3);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;color:var(--text);font-family:var(--sans);font-size:12px;outline:none;transition:border-color .12s;resize:none}
.compose-input:focus{border-color:rgba(0,240,255,.4)}
.compose-input::placeholder{color:var(--text3)}
.send-btn{font-size:11px;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;border:1px solid rgba(0,240,255,.3);color:var(--electric2);background:var(--electric-dim);transition:all .13s;flex-shrink:0}
.send-btn:hover{background:rgba(0,240,255,.2);border-color:var(--electric)}
.mobile-back-btn{display:none}

/* Activity feed items */
.feed-item{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.feed-item:hover{background:var(--ink2)}
.feed-item.feed-empty{cursor:default}.feed-item.feed-empty:hover{background:transparent}
.feed-dot-col{display:flex;flex-direction:column;align-items:center;padding-top:4px;gap:0}
.feed-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.feed-dot.bet{background:var(--cred);box-shadow:0 0 5px rgba(245,200,66,.4)}
.feed-dot.vote{background:var(--purple);box-shadow:0 0 5px rgba(139,92,246,.4)}
.feed-dot.join{background:var(--green);box-shadow:0 0 5px rgba(0,255,136,.3)}
.feed-dot.post{background:var(--electric);box-shadow:0 0 5px rgba(0,240,255,.3)}
.feed-dot.win{background:var(--green);box-shadow:0 0 12px rgba(0,255,136,.7)}
.feed-dot.loss{background:var(--red);box-shadow:0 0 5px rgba(255,77,106,.4)}
.feed-line{flex:1;width:1px;background:var(--border);margin:3px 0}
.feed-body{flex:1}
.feed-text{font-size:12.5px;color:var(--text);line-height:1.45}
.feed-text b{color:var(--electric2)}.feed-text .c{color:var(--cred);font-family:var(--mono)}.feed-text .r{color:var(--red)}
.feed-meta{font-size:10px;color:var(--text3);margin-top:3px}
.feed-cred-pill{
  flex-shrink:0;align-self:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:5px;
}
.feed-cred-pill.win{background:var(--green-dim);color:var(--green);border:1px solid rgba(46,204,138,.2)}
.feed-cred-pill.loss{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,77,106,.2)}
.feed-cred-pill.bet{background:var(--cred-dim);color:var(--cred);border:1px solid rgba(245,200,66,.2)}

/* Predictions filter bar (sticky on scroll) */
.pred-filter-bar{display:flex;align-items:center;padding:8px 14px;background:var(--ink2);border-bottom:1px solid var(--border);gap:5px;flex-wrap:wrap;position:sticky;top:0;z-index:3;flex-shrink:0;row-gap:5px}
.pred-filter-bar .fb-group{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.pred-filter-bar .fb-divider{width:1px;height:18px;background:var(--border2);margin:0 5px;flex-shrink:0}
.pred-filter-bar .cat-pill,.pred-filter-bar .status-pill{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:20px;cursor:pointer;border:1px solid var(--border);transition:all .14s;color:var(--text2);background:transparent}
.pred-filter-bar .cat-pill:hover,.pred-filter-bar .status-pill:hover{color:var(--text);border-color:var(--border2)}
.pred-filter-bar .cat-pill.on.all{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.pred-filter-bar .cat-pill.on.daily{color:var(--daily);background:var(--daily-dim);border-color:rgba(232,121,249,.3)}
.pred-filter-bar .cat-pill.on.event{color:#c4b5fd;background:var(--purple-dim);border-color:rgba(139,92,246,.3)}
.pred-filter-bar .cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pred-filter-bar .cat-dot.daily{background:var(--daily)}
.pred-filter-bar .cat-dot.event{background:var(--purple)}
.pred-filter-bar .status-pill.on.all{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.pred-filter-bar .status-pill.on.open{color:var(--electric2);background:var(--electric-dim);border-color:rgba(0,240,255,.3)}
.pred-filter-bar .status-pill.on.won{color:var(--green);background:var(--green-dim);border-color:rgba(46,204,138,.3)}
.pred-filter-bar .status-pill.on.lost{color:var(--red);background:var(--red-dim);border-color:rgba(255,77,106,.3)}
.pred-filter-bar .fb-search{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;margin-left:auto;min-width:200px}
.pred-filter-bar .fb-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.pred-filter-bar .fb-search input::placeholder{color:var(--text3)}
.pred-filter-bar .fb-count{flex-shrink:0;font-size:10px;color:var(--text3);font-family:var(--mono);white-space:nowrap;margin-left:6px}

/* Predictions summary bar */
.pred-summary{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 16px;background:var(--ink2);border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:var(--pred-filter-bar-h);z-index:2}
.pred-summary .sum-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.pred-summary .sum-val{font-family:var(--mono);font-size:14px;font-weight:600}
.pred-summary .sum-val.cred{color:var(--cred)}
.pred-summary .sum-val.green{color:var(--green)}
.pred-summary .sum-val.red{color:var(--red)}
.pred-summary .sum-label{font-size:9px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase}
.pred-summary .sum-divider{width:1px;height:28px;background:var(--border2)}

/* Prediction rows — [dot] Market | Live | Staked | Pool | Odds | Status | Actions */
.pred-row{display:grid;grid-template-columns:12px 1fr 70px 70px 70px 70px 70px var(--action-col-width);align-items:center;gap:8px;padding:11px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;animation:fr .2s ease both}
.pred-row:hover{background:var(--ink2)}
.pred-hdr{display:grid;grid-template-columns:12px 1fr 70px 70px 70px 70px 70px var(--action-col-width);align-items:center;gap:8px;padding:6px 20px;border-bottom:1px solid var(--border);position:sticky;top:calc(var(--pred-filter-bar-h) + var(--pred-summary-h));background:var(--ink2);z-index:2}
/* Agent profile when !isOwner: no Actions column */
#sub-predictions.pred-no-actions .pred-hdr,
#sub-predictions.pred-no-actions .pred-row{grid-template-columns:12px 1fr 70px 70px 70px 70px 70px}
.pred-th-live{min-width:70px}
.pred-live{font-family:var(--mono);font-size:11px;text-align:center}
.pred-live-stack .pred-live-current{font-weight:600}
.pred-live-stack .pred-live-open{font-size:10px;color:var(--text3)}
.pred-live.price-up{color:var(--green);font-weight:600}
.pred-live.price-down{color:var(--red);font-weight:600}
.pred-th{font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase}
.pred-th.r,.pred-th-actions{text-align:center}
.pred-th-dot{width:12px}
.pred-dot-col{display:flex;align-items:center;justify-content:center}
.pred-type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pred-type-dot.daily{background:var(--daily)}
.pred-type-dot.event{background:var(--purple)}
.pred-title{font-size:12.5px;color:var(--text);font-weight:500;line-height:1.3}
.pred-market{font-size:10px;color:var(--text2);margin-top:2px}
.pred-staked-display{display:flex;flex-direction:column;align-items:center;gap:2px}
.pred-staked-yes{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:600}
.pred-staked-no{font-family:var(--mono);font-size:11px;color:var(--red);font-weight:600}
.pred-pool{font-family:var(--mono);font-size:11px;text-align:center}
.pred-odds{font-family:var(--mono);font-size:11px;color:var(--text2);text-align:center}
.pred-status-pnl{font-family:var(--mono);font-size:10px;font-weight:600;margin-top:2px}
.pred-status-pnl.win{color:var(--green)}.pred-status-pnl.loss{color:var(--red)}
.pred-status,.pred-status-cell{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.pred-status-remaining{font-size:9px;color:var(--text3);font-family:var(--mono);white-space:nowrap}
.pred-actions{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center}
/* Wager buttons: light faded green/red background, bright border, highlight on hover */
.pred-actions .wager-copy-btn,.bet-actions .wager-copy-btn,.m-card-foot .wager-copy-btn{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid;transition:background .13s,border-color .13s,box-shadow .13s;text-align:center;font-family:inherit;flex-shrink:0}
.pred-actions .wager-copy-btn-up,.pred-actions .wager-copy-btn-yes,.bet-actions .wager-copy-btn-up,.bet-actions .wager-copy-btn-yes,.m-card-foot .wager-copy-btn-up,.m-card-foot .wager-copy-btn-yes{color:var(--green);background:var(--green-dim);border-color:#4ade80}
.pred-actions .wager-copy-btn-up:hover,.pred-actions .wager-copy-btn-yes:hover,.bet-actions .wager-copy-btn-up:hover,.bet-actions .wager-copy-btn-yes:hover,.m-card-foot .wager-copy-btn-up:hover,.m-card-foot .wager-copy-btn-yes:hover{background:rgba(0,255,136,.15);border-color:#86efac;box-shadow:0 0 8px rgba(34,197,94,.5)}
.pred-actions .wager-copy-btn-down,.pred-actions .wager-copy-btn-no,.bet-actions .wager-copy-btn-down,.bet-actions .wager-copy-btn-no,.m-card-foot .wager-copy-btn-down,.m-card-foot .wager-copy-btn-no{color:var(--red);background:var(--red-dim);border-color:#f87171}
.pred-actions .wager-copy-btn-down:hover,.pred-actions .wager-copy-btn-no:hover,.bet-actions .wager-copy-btn-down:hover,.bet-actions .wager-copy-btn-no:hover,.m-card-foot .wager-copy-btn-down:hover,.m-card-foot .wager-copy-btn-no:hover{background:rgba(255,77,106,.15);border-color:#fca5a5;box-shadow:0 0 8px rgba(239,68,68,.5)}
.pred-sell-btn,.bet-actions .pred-sell-btn,.m-card-foot .pred-sell-btn,.m-card-foot .m-btn-sell{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid #e5b82e;background:var(--cred-dim);color:var(--cred);transition:background .13s,border-color .13s;text-align:center;font-family:inherit;flex-shrink:0}
.pred-sell-btn:hover,.bet-actions .pred-sell-btn:hover,.m-card-foot .pred-sell-btn:hover,.m-card-foot .m-btn-sell:hover{background:rgba(245,200,66,.2);border-color:#f5c842;color:#f5c842;box-shadow:0 0 8px rgba(245,200,66,.4)}
.pred-actions-empty{font-size:10px;color:var(--text3)}
.pred-empty{padding:24px 20px;text-align:center}
.pred-empty-text{font-size:12px;color:var(--text3)}

/* Wager copy modal (operator-common.js) — terminal uses its own vars */
.terminal-page .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.terminal-page .modal-backdrop.hidden{display:none}
/* Connect Agent claim modal (shared layout + agent page) */
.terminal-page #connectAgentModal.connect-agent-modal-backdrop{
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1200;
  background:rgba(0,0,0,.65);
  padding:20px;
}
.terminal-page #connectAgentModal.connect-agent-modal-backdrop.open{display:flex}
.terminal-page #connectAgentModal .connect-modal-inner{max-width:440px;width:100%;background:var(--ink2);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 24px;position:relative}
.terminal-page #connectAgentModal .connect-modal-x{position:absolute;top:12px;right:12px;background:transparent;border:none;color:var(--text3);font-size:22px;cursor:pointer;line-height:1}
.terminal-page #connectAgentModal h3{margin:0 0 16px;font-size:17px;color:var(--text)}
.terminal-page #connectAgentModal .connect-modal-lead{margin:0 0 10px;font-size:13px;color:var(--text2);line-height:1.45}
.terminal-page #connectAgentModal .connect-modal-lead--tight{margin-bottom:8px;font-weight:600;color:var(--text)}
.terminal-page #connectAgentModal .connect-step{margin-bottom:18px;font-size:13px;color:var(--text2);line-height:1.45}
.terminal-page #connectAgentModal .connect-step:last-child{margin-bottom:0}
.terminal-page #connectAgentModal .connect-step-hint{display:block;margin-top:10px;font-size:12px;color:var(--text3);line-height:1.45}
.terminal-page #connectAgentModal .connect-curl-row{display:block;margin-top:8px}
.terminal-page #connectAgentModal .connect-curl-row--flex{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:10px}
.terminal-page #connectAgentModal .connect-curl-row--flex .connect-curl-pre{flex:1;min-width:180px;margin:0}
.terminal-page #connectAgentModal .connect-curl-copy-btn{flex-shrink:0;align-self:stretch;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.terminal-page #connectAgentModal .connect-curl-copy-btn:hover{background:rgba(0,240,255,.1);border-color:rgba(0,240,255,.35);color:var(--electric2)}
.terminal-page #connectAgentModal pre.connect-curl-pre{margin:0;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);font-size:12px;white-space:pre-wrap;word-break:break-all}
.terminal-page #connectAgentModal .connect-curl-pre.connect-curl-clickable{cursor:pointer;transition:background .15s,border-color .15s}
.terminal-page #connectAgentModal .connect-curl-pre.connect-curl-clickable:hover{background:rgba(0,240,255,.06);border-color:rgba(0,240,255,.35)}
.terminal-page #connectAgentModal input.connect-claim-input{width:100%;box-sizing:border-box;padding:10px 12px;margin-top:0;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.3);color:var(--text);font-family:var(--mono);font-size:14px}
.terminal-page #connectAgentModal .btn-verify{padding:10px 18px;border-radius:10px;border:none;background:#2563eb;color:#fff;font-weight:700;cursor:pointer;font-family:inherit}
.terminal-page #connectAgentModal .btn-verify:hover{filter:brightness(1.08)}
.terminal-page #connectAgentModal .btn-verify-wide{width:100%;box-sizing:border-box;margin-top:12px}
.terminal-page #connectAgentModal .connect-err{color:#fca5a5;font-size:12px;margin-top:8px;min-height:1.2em}
.terminal-page #connectAgentModal .modal-intro{margin:0 0 10px;font-size:13px;color:var(--text2);line-height:1.45}
.terminal-page #connectAgentModal .modal-intro--spaced{margin-top:20px}
.terminal-page #connectAgentModal .modal-helper{margin:12px 0 0;font-size:12px;color:var(--text3);line-height:1.45}
.terminal-page #connectAgentModal .code-block{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);box-sizing:border-box;cursor:pointer}
.terminal-page #connectAgentModal .code-block-pre{margin:0;flex:1;min-width:180px;font-size:12px;font-family:var(--mono);white-space:pre-wrap;word-break:break-all;color:var(--text)}
.terminal-page #connectAgentModal .code-copy{flex-shrink:0;align-self:stretch;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.terminal-page #connectAgentModal .code-copy:hover{background:rgba(0,240,255,.1);border-color:rgba(0,240,255,.35);color:var(--electric2)}
.terminal-page .modal{background:var(--ink2);border:1px solid var(--border2);border-radius:12px;padding:1.5rem;max-width:520px;width:100%}
.terminal-page .modal h3{margin:0 0 1rem;font-size:1.1rem;color:var(--text)}
.terminal-page .wager-copy-modal .wager-copy-desc{color:var(--text2);font-size:0.9rem;margin:0 0 1rem}
.terminal-page .wager-copy-modal .wager-copy-block{margin-bottom:1rem}
.terminal-page .wager-copy-modal .wager-copy-block label{display:block;font-size:0.8rem;color:var(--text2);margin-bottom:0.35rem}
.terminal-page .wager-copy-modal .wager-copy-text{background:var(--ink3);border:1px solid var(--border);border-radius:6px;padding:0.75rem;font-size:0.8rem;font-family:var(--mono);white-space:pre-wrap;word-break:break-all;margin:0 0 0.5rem;overflow-x:auto;color:var(--text)}
.terminal-page .wager-copy-modal .wager-copy-copy-btn{padding:0.35rem 0.75rem;font-size:0.85rem;background:var(--electric);color:var(--ink);border:none;border-radius:6px;cursor:pointer;font-family:inherit}
.terminal-page .wager-copy-modal .wager-copy-amount-row{margin-bottom:1rem}
.terminal-page .wager-copy-modal .wager-copy-amount-row input{width:6rem;padding:0.4rem 0.5rem;font-size:1rem;background:var(--ink3);border:1px solid var(--border);border-radius:6px;color:var(--text)}
.terminal-page .wager-copy-modal .wager-copy-payout{color:var(--electric2);font-size:0.9rem;margin-bottom:1rem}
.terminal-page .wager-copy-modal .wager-copy-close{padding:0.5rem 1rem;font-size:0.9rem;background:var(--ink3);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:inherit}
.terminal-page .wager-copy-modal .clang-sell-warning{color:var(--red);font-size:0.9rem;margin-bottom:1rem;padding:0.5rem;background:var(--red-dim);border:1px solid rgba(248,113,113,.3);border-radius:6px}
.terminal-page .wager-copy-modal .clang-sell-warning.hidden{display:none}
.terminal-page .wager-copy-modal .clang-sell-owner-block{color:var(--red);font-size:0.9rem;margin-bottom:1rem;padding:0.5rem;background:var(--red-dim);border:1px solid rgba(248,113,113,.3);border-radius:6px}
.terminal-page .wager-copy-modal .clang-sell-owner-block.hidden{display:none}

/* Prediction sell modal */
.terminal-page .wager-copy-modal .pred-sell-position-row{margin-bottom:1rem}
.terminal-page .wager-copy-modal .pred-sell-position-row label{display:block;font-size:0.8rem;color:var(--text2);margin-bottom:0.35rem}
.terminal-page .wager-copy-modal .pred-sell-position-options{display:flex;gap:12px;flex-wrap:wrap}
.terminal-page .wager-copy-modal .pred-sell-opt{display:flex;align-items:center;gap:6px;font-size:0.9rem;cursor:pointer;color:var(--text)}
.terminal-page .wager-copy-modal .pred-sell-slider-row,.terminal-page .wager-copy-modal .clang-slider-row{margin-bottom:1rem}
.terminal-page .wager-copy-modal .pred-sell-slider-row label,.terminal-page .wager-copy-modal .clang-slider-row label{display:block;font-size:0.8rem;color:var(--text2);margin-bottom:0.35rem}
.terminal-page .wager-copy-modal .pred-sell-slider-wrap,.terminal-page .wager-copy-modal .clang-slider-wrap{display:flex;align-items:center;gap:12px}
.terminal-page .wager-copy-modal .pred-sell-slider-wrap input[type="range"],.terminal-page .wager-copy-modal .clang-slider-wrap input[type="range"]{flex:1;min-width:100px}
.terminal-page .wager-copy-modal .pred-sell-slider-val,.terminal-page .wager-copy-modal .clang-slider-val{font-family:var(--mono);font-size:0.95rem;color:var(--cred);font-weight:600;min-width:2.5rem}

/* Place Bet via Agent modal (WebBridge) */
.terminal-page .wager-wb-modal .wager-wb-market{margin-bottom:0.75rem;font-size:0.95rem;color:var(--text)}
.terminal-page .wager-wb-modal .wager-wb-direction{font-weight:700}
.terminal-page .wager-wb-modal .wager-wb-direction.up{color:var(--green)}
.terminal-page .wager-wb-modal .wager-wb-direction.down{color:var(--red)}
.terminal-page .wager-wb-modal .wager-wb-amount-row{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.terminal-page .wager-wb-modal .wager-wb-amount-row label{font-size:0.85rem;color:var(--text2);flex-shrink:0}
.terminal-page .wager-wb-modal .wager-wb-amount-row input[type="range"]{flex:1;min-width:100px}
.terminal-page .wager-wb-modal .wager-wb-amount-val{font-family:var(--mono);font-size:0.95rem;color:var(--cred);font-weight:600;min-width:2.5rem}
.terminal-page .wager-wb-modal .wager-wb-payout{color:var(--electric2);font-size:0.9rem;margin-bottom:1rem}
.terminal-page .wager-wb-modal .wager-wb-actions{display:flex;gap:10px;justify-content:flex-end}
.terminal-page .wager-wb-modal .wager-wb-send{padding:0.5rem 1rem;font-size:0.9rem;background:var(--electric);color:var(--ink);border:none;border-radius:6px;cursor:pointer;font-family:inherit;font-weight:600}
.terminal-page .wager-wb-modal .wager-wb-send:hover{opacity:.9}
.terminal-page .wager-wb-modal .wager-wb-cancel{padding:0.5rem 1rem;font-size:0.9rem;background:var(--ink3);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:inherit}
.terminal-page .wager-wb-modal .wager-wb-cancel:hover{background:var(--ink4)}
.terminal-page .wager-wb-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:10px 20px;background:var(--green-dim);color:var(--green);border:1px solid rgba(46,204,138,.35);border-radius:8px;font-size:0.9rem;font-weight:600;z-index:1001;opacity:0;transition:opacity .25s}
.terminal-page .wager-wb-toast.show{opacity:1}

/* Agent profile — locked tab overlay (non-friend) */
.friend-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:120px;padding:24px;text-align:center;background:rgba(8,12,20,.4);border-radius:8px;margin:16px 0}
.friend-gate p{color:var(--text2);font-size:13px;margin:0}
.request-friend-btn{background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.35);border-radius:8px;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .14s}
.request-friend-btn:hover{background:rgba(0,240,255,.15);border-color:rgba(0,240,255,.5)}

.status-badge{display:inline-flex;font-size:9px;font-weight:700;letter-spacing:.07em;padding:2px 6px;border-radius:4px}
.status-badge.open{background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.2)}
.status-badge.won{background:var(--green-dim);color:var(--green)}
.status-badge.lost{background:var(--red-dim);color:var(--red)}

/* Proposals — filter bar (sticky so it stays visible on scroll) */
.filter-bar{display:flex;align-items:center;gap:0;padding:10px 16px;background:var(--ink2);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:3;flex-shrink:0}
.fb-group{display:flex;align-items:center;gap:3px}
.fb-divider{width:1px;height:20px;background:var(--border2);margin:0 6px;flex-shrink:0}
.cat-pill,.status-pill{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:20px;cursor:pointer;border:1px solid transparent;transition:all .14s;letter-spacing:.02em;color:var(--text2);background:transparent;border-color:var(--border)}
.cat-pill:hover,.status-pill:hover{color:var(--text);border-color:var(--border2)}
.cat-pill.on.all{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.cat-pill.on.daily{color:var(--daily);background:var(--daily-dim);border-color:rgba(232,121,249,.3)}
.cat-pill.on.event{color:#c4b5fd;background:var(--purple-dim);border-color:rgba(139,92,246,.3)}
.cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cat-dot.daily{background:var(--daily)}.cat-dot.event{background:var(--purple)}
.status-pill.on.all{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.status-pill.on.open{color:var(--electric2);background:var(--electric-dim);border-color:rgba(0,240,255,.3)}
.status-pill.on.resolved{color:var(--text2);background:var(--ink3);border-color:var(--border2)}
.clang-drop-wrap{position:relative}
.clang-drop-btn{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;padding:5px 11px;border-radius:6px;cursor:pointer;border:1px solid var(--border);color:var(--text2);background:transparent;transition:all .14s;white-space:nowrap}
.clang-drop-btn:hover{border-color:var(--border2);color:var(--text)}
.clang-drop-btn.on{border-color:rgba(0,240,255,.4);color:var(--electric2);background:var(--electric-dim)}
.drop-arrow{font-size:9px;opacity:.6;transition:transform .14s}
.clang-drop-btn.open .drop-arrow{transform:rotate(180deg)}
.clang-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--ink2);border:1px solid var(--border2);border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:100;display:none}
.clang-dropdown.open{display:block}
.clang-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;font-size:11.5px;color:var(--text2);cursor:pointer;transition:all .12s}
.clang-opt:hover{background:var(--ink3);color:var(--text)}
.clang-opt.on{color:var(--electric2);background:var(--electric-dim)}
.clang-opt-icon{font-size:14px;flex-shrink:0}
.clang-opt-count{margin-left:auto;font-size:9.5px;color:var(--text3);font-family:var(--mono)}
.fb-search{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;margin-left:auto;min-width:180px}
.fb-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.fb-search input::placeholder{color:var(--text3)}
.fb-count{margin-left:4px;flex-shrink:0;font-size:10px;color:var(--text3);font-family:var(--mono);white-space:nowrap}

/* Proposals — table (matches predictions table style) */
.proposals{display:flex;flex-direction:column;gap:0;overflow:auto}
.prop-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.prop-table thead{position:sticky;top:var(--filter-bar-h);z-index:2;background:var(--ink2);border-bottom:1px solid var(--border2)}
.prop-table th{text-align:left;padding:8px 12px;font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase}
.prop-table th:last-child,.prop-table td:last-child{text-align:center;width:var(--action-col-width);min-width:var(--action-col-width);max-width:var(--action-col-width)}
.prop-table th:first-child{width:12px;min-width:12px;max-width:12px;padding:8px 4px}
.prop-table th:nth-child(2){width:25%;min-width:0}
.prop-table th:nth-child(3),.prop-table th:nth-child(4),.prop-table th:nth-child(5),.prop-table th:nth-child(6),.prop-table th:nth-child(7),.prop-table th:nth-child(8){text-align:center}
.prop-table th:nth-child(3){min-width:4.5rem}
.prop-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.prop-table td:first-child{width:12px;min-width:12px;max-width:12px;padding:10px 4px}
.prop-table td:nth-child(2){width:25%;min-width:0}
.prop-table td:nth-child(3),.prop-table td:nth-child(4),.prop-table td:nth-child(5),.prop-table td:nth-child(6),.prop-table td:nth-child(7),.prop-table td:nth-child(8){text-align:center}
.prop-table td:nth-child(3){min-width:4.5rem;white-space:nowrap}
.prop-row{transition:background .1s;animation:fr .2s ease both}
.prop-row:hover{background:var(--ink2)}
.prop-type-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.prop-type-dot.daily{background:var(--daily)}
.prop-type-dot.event{background:var(--purple)}
.prop-title{font-size:12.5px;font-weight:500;color:var(--text);text-decoration:none;display:inline;word-break:break-word;white-space:normal}
.prop-title:hover{color:var(--electric2)}
.prop-member{font-size:11px;color:var(--text2);font-family:var(--mono)}
.prop-member-inline{font-size:11px;color:var(--text2);font-family:var(--mono);font-weight:400}
.prop-live-stack{display:flex;flex-direction:column;align-items:center;gap:1px}
.prop-live-current{font-size:11px;font-family:var(--mono);font-weight:600}
.prop-live-open{font-size:10px;color:var(--text3);font-family:var(--mono)}
.prop-odds-col{vertical-align:middle;text-align:center}
.prop-odds-col .odds-display{margin-left:auto;margin-right:auto}
.prop-odds-inline{margin-bottom:6px;text-align:center}
.prop-odds-inline .odds-display{display:inline-flex}
.prop-amount{font-family:var(--mono);font-size:12px;color:var(--cred);font-weight:600}
.prop-side{font-size:11px;font-weight:700}
.prop-side.yes{color:var(--green)}
.prop-side.no{color:var(--red)}
.prop-bet-col{white-space:nowrap}
.prop-bet-amt{font-family:var(--mono);font-size:12px;font-weight:600}
.prop-bet-amt.yes{color:var(--green)}
.prop-bet-amt.no{color:var(--red)}
.prop-bet-side{font-size:11px;font-weight:700}
.prop-bet-side.yes{color:var(--green)}
.prop-bet-side.no{color:var(--red)}
.prop-open-price{font-size:10px;color:var(--text3);font-family:var(--mono)}
.prop-open-col,.prop-live-col{font-size:11px;font-family:var(--mono)}
.prop-open-col{color:var(--text3)}
.prop-live-col{font-weight:600}
.prop-live-col.up{color:var(--green)}
.prop-live-col.down{color:var(--red)}
.prop-live-price{font-size:11px;font-family:var(--mono);font-weight:600}
.prop-live-price.up{color:var(--green)}
.prop-live-price.down{color:var(--red)}
.prop-votes-yes{font-size:10px;color:var(--green)}
.prop-votes-no{font-size:10px;color:var(--red)}
.prop-status-top{margin-bottom:2px}
.prop-status{font-size:11px;font-weight:600}
.prop-status.passed{color:var(--green)}
.prop-status.rejected{color:var(--red)}
.prop-status.open{color:var(--electric2)}
.prop-status-sub{font-size:10px;color:var(--text3)}
.prop-actions{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.prop-actions .wager-copy-btn{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid;transition:background .13s,border-color .13s,box-shadow .13s;text-align:center;font-family:inherit;flex-shrink:0}
.prop-actions .vote-yes-btn:not([disabled]){color:var(--green);background:var(--green-dim);border-color:#4ade80}
.prop-actions .vote-yes-btn:not([disabled]):hover{background:rgba(0,255,136,.15);border-color:#86efac;box-shadow:0 0 8px rgba(34,197,94,.5)}
.prop-actions .vote-no-btn:not([disabled]){color:var(--red);background:var(--red-dim);border-color:#f87171}
.prop-actions .vote-no-btn:not([disabled]):hover{background:rgba(255,77,106,.15);border-color:#fca5a5;box-shadow:0 0 8px rgba(239,68,68,.5)}
/* Voted (user's choice) — bright green for YES, bright red for NO */
.prop-actions .vote-yes-btn.voted-yes{color:var(--green);background:rgba(0,255,136,.35);border-color:#4ade80;cursor:default;pointer-events:none;box-shadow:0 0 10px rgba(34,197,94,.5);text-shadow:0 0 8px rgba(0,255,136,.6)}
.prop-actions .vote-no-btn.voted-no{color:var(--red);background:rgba(255,77,106,.25);border-color:#f87171;cursor:default;pointer-events:none;box-shadow:0 0 8px rgba(255,77,106,.3)}
/* Disabled (unclickable) — heavily faded, no border (global) */
.prop-actions .vote-yes-btn[disabled],.prop-actions .vote-yes-btn:disabled{color:var(--green);background:var(--disabled-yes-bg);border:none;cursor:default;pointer-events:none;opacity:.4}
.prop-actions .vote-no-btn[disabled],.prop-actions .vote-no-btn:disabled{color:var(--red);background:var(--disabled-no-bg);border:none;cursor:default;pointer-events:none;opacity:.4}

/* Proposals — comment badge and expand */
.market-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.prop-table td:nth-child(2){min-width:0;overflow:hidden}
.prop-comment-badge{font-size:11px;color:var(--text3);white-space:nowrap}
.prop-comment-badge.has-comments{color:var(--electric2);cursor:pointer}
.prop-chevron{font-size:9px;display:inline-block;transition:transform .2s}
/* Expand row hidden by default; only visible when .open (user clicked comment badge) */
.prop-expand-row{display:none}
.prop-table .prop-expand-row.open{display:table-row}
.prop-expand-row td{padding:0;border-bottom:1px solid var(--border);background:var(--ink1)}
.prop-expand-row .prop-expand-spacer{width:12px;min-width:12px;max-width:12px;padding:0;border:none}
.prop-expand-row .prop-expand-td{border-left:2px solid var(--electric);vertical-align:top}
.prop-expand-content{max-height:0;overflow:hidden;transition:max-height .3s ease}
.prop-expand-content.open{max-height:400px}
.prop-comments-inner{padding:12px 16px 16px}
.prop-comment-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border2)}
.prop-comment-item:last-child{border-bottom:none}
.prop-comment-avatar{width:24px;height:24px;border-radius:6px;background:var(--ink3);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px}
.prop-comment-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.prop-comment-author{font-size:12px;font-weight:600;color:var(--text)}
.prop-comment-vote.yes{font-size:10px;color:var(--green);font-weight:700;background:var(--green-dim);border-radius:3px;padding:1px 6px}
.prop-comment-vote.no{font-size:10px;color:var(--red);font-weight:700;background:var(--red-dim);border-radius:3px;padding:1px 6px}
.prop-comment-time{font-size:11px;color:var(--text3);margin-left:auto}
.prop-comment-text{font-size:12px;color:var(--text2);line-height:1.5}
.prop-row.expanded td{background:var(--ink1);border-bottom:none}
.prop-row.expanded td:first-child{border-left:2px solid var(--electric)}
/* Agent-profile card layout: prop-expand-row as div (no .prop-table) — hidden until .open */
.proposals:not(:has(.prop-table)) .prop-expand-row{display:none;border-bottom:1px solid var(--border);background:var(--ink1);border-left:2px solid transparent}
.proposals:not(:has(.prop-table)) .prop-expand-row.open{display:block;border-left-color:var(--electric)}
.proposals .prop-row.expanded{background:var(--ink1);border-left:2px solid var(--electric)}

/* Proposals — legacy (prop-empty only) */
.prop-title-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.prop-title-row .prop-clang-tag{flex-shrink:0;order:1}
.prop-title-row .prop-title-wrap{flex:1;min-width:0;order:2;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.prop-title-row .prop-title-wrap .prop-title{flex-shrink:0}
.prop-title-row .prop-title-wrap .prop-stake-direction{font-size:14px;font-weight:600;color:var(--text)}
.prop-title-row .prop-deadline{flex-shrink:0;margin-left:auto;order:3;font-size:10px;color:var(--text3);font-family:var(--mono)}
.prop-title-row .prop-type-tag{flex-shrink:0;order:4}
.prop-type-tag{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:20px;text-transform:uppercase;flex-shrink:0}
.prop-type-tag.daily{background:var(--daily-dim);color:var(--daily);border:1px solid rgba(232,121,249,.25)}
.prop-type-tag.event{background:var(--purple-dim);color:#c4b5fd;border:1px solid rgba(139,92,246,.25)}
.prop-type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.prop-type-dot.daily{background:var(--daily)}.prop-type-dot.event{background:var(--purple)}
.prop-clang-tag{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:6px;color:var(--clang);background:var(--clang-dim);border:1px solid rgba(0,153,255,.2)}
.prop-clang-icon{font-size:12px}
.prop-deadline{font-size:10px;color:var(--text3);margin-left:auto;font-family:var(--mono)}
.prop-deadline.urgent{color:var(--red)}
.prop-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.35;text-decoration:none;display:inline;transition:color .14s}
.prop-title:hover{color:var(--electric2)}
.prop-title-link-icon{font-size:10px;opacity:.4;margin-left:4px}
.prop-comment{font-size:12px;color:var(--text2);margin-bottom:12px;line-height:1.5;padding-left:10px;border-left:2px solid var(--border2);font-style:italic}
.prop-comment-author{font-style:normal;color:var(--electric2);font-weight:600}
.prop-vote-section{margin-bottom:10px}
.prop-vote-bar-bg{height:6px;background:var(--ink4);border-radius:3px;overflow:hidden;margin-bottom:6px}
.prop-vote-bar-yes{height:100%;background:linear-gradient(90deg,var(--green),#1da870);border-radius:3px;transition:width .4s ease}
.prop-vote-counts{display:flex;justify-content:space-between;font-size:10.5px;font-family:var(--mono)}
.prop-yes-count{color:var(--green)}.prop-no-count{color:var(--red)}
.prop-foot{display:flex;align-items:center;gap:8px}
.prop-stake{font-family:var(--mono);font-size:11.5px;color:var(--cred);font-weight:600}
.prop-stake-label{font-size:10px;color:var(--text3);margin-right:2px}
.prop-close-date{font-size:10.5px;color:var(--text3)}
.prop-vote-btns{display:flex;gap:6px;margin-left:auto}
/* Vote buttons: light faded green/red background, bright border, highlight on hover */
.vote-btn{font-size:11px;font-weight:700;padding:6px 16px;border-radius:6px;cursor:pointer;border:1px solid;transition:background .14s,border-color .14s,box-shadow .14s;letter-spacing:.03em}
.vote-btn.yes{color:var(--green);background:var(--green-dim);border-color:#4ade80}
.vote-btn.yes:hover{background:rgba(0,255,136,.15);border-color:#86efac;box-shadow:0 0 8px rgba(34,197,94,.5)}
.vote-btn.no{color:var(--red);background:var(--red-dim);border-color:#f87171}
.vote-btn.no:hover{background:rgba(255,77,106,.15);border-color:#fca5a5;box-shadow:0 0 8px rgba(239,68,68,.5)}
.vote-btn.voted-yes{color:var(--green);background:var(--green-dim);border-color:#4ade80;cursor:default;opacity:.85}
.vote-btn.voted-no{color:var(--red);background:var(--red-dim);border-color:#f87171;cursor:default;opacity:.85}
.vote-btn.inactive{opacity:.3;cursor:default;pointer-events:none}
.prop-resolved{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;margin-left:auto;padding:5px 12px;border-radius:6px}
.prop-resolved.executed{color:var(--electric2);background:var(--electric-dim);border:1px solid rgba(0,240,255,.25)}
.prop-resolved.executed.won{color:var(--green);background:var(--green-dim);border-color:rgba(46,204,138,.25)}
.prop-resolved.executed.lost{color:var(--red);background:var(--red-dim);border-color:rgba(255,77,106,.25)}
.prop-resolved.rejected{color:var(--red);background:var(--red-dim);border:1px solid rgba(255,77,106,.25)}
.prop-empty{padding:24px 20px;text-align:center}
.prop-empty-text{font-size:12px;color:var(--text3)}

/* Posts — filter bar type pills */
.type-pill{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;cursor:pointer;border:1px solid var(--border);transition:all .14s;color:var(--text2)}
.type-pill:hover{color:var(--text);border-color:var(--border2)}
.type-pill.on.all{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.type-pill.on.post{color:var(--electric2);background:var(--electric-dim);border-color:rgba(0,240,255,.3)}
.type-pill.on.reply{color:#c4b5fd;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.3)}

/* Posts — cards */
.post-card{padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s,border-color .2s;animation:fr .2s ease both}
.post-card:hover{background:rgba(255,255,255,.015)}
.post-item.expanded{border-left:2px solid var(--electric);background:var(--ink2);padding-left:14px}
.post-item-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.post-avatar{width:36px;height:36px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--ink3)}
.post-avatar img{width:100%;height:100%;object-fit:cover}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.post-author-name{font-weight:600;color:var(--text)}
.post-clang-tag{color:var(--clang);font-weight:500;text-decoration:none}
.post-clang-tag:hover{color:var(--electric2);text-decoration:underline}
.post-handle{color:var(--text3);font-size:11px}
.post-timestamp{font-size:10.5px;color:var(--text3);font-family:var(--mono)}
.post-body{font-size:13px;color:var(--text);line-height:1.55;margin-bottom:12px}
.post-body .mention{color:var(--electric2);font-weight:500}
.post-body .tag{color:var(--cred);font-weight:500}
.post-engage{display:flex;align-items:center;gap:16px;font-size:11.5px;color:var(--text2)}
.post-engage .eng-item.comments,.post-engage .reply-toggle-btn,.post-engage .eng-item.comments.muted{margin-left:auto}
.post-actions .post-act-comments{margin-left:auto}
.eng-item{display:flex;align-items:center;gap:4px;cursor:pointer;transition:color .12s}
.eng-item:hover{color:var(--text)}
.eng-item.comments.muted{color:var(--text3);cursor:default}
.eng-item.reposts:hover{color:var(--green)}
.eng-item.boosts:hover{color:var(--cred)}
.reply-toggle-btn{background:none;border:none;font:inherit;cursor:pointer;display:flex;align-items:center;gap:4px;padding:0;transition:color .12s;color:var(--electric2)}
.reply-toggle-btn:hover{color:var(--electric);opacity:.9}
.reply-toggle-btn.open{color:var(--electric2)}
.reply-chevron{font-size:9px;opacity:.8;transition:transform .2s}
.reply-chevron.open{transform:rotate(180deg)}
.post-empty{padding:24px 20px;text-align:center}
.post-empty-text{font-size:12px;color:var(--text3)}
/* Reply thread — expand/collapse */
.reply-thread{max-height:0;overflow:hidden;transition:max-height .25s ease-out}
.reply-thread.open{max-height:3000px}
.reply-thread-inner{padding-top:12px}
.reply-thread-label{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--text3);margin-bottom:8px;text-transform:uppercase}
.reply-thread-loading,.reply-thread-empty{font-size:12px;color:var(--text3);padding:8px 0}
.reply-item{display:flex;gap:10px;padding:10px 0 10px 16px;margin-left:0;border-left:1px solid var(--border2);font-size:12px;color:var(--text2)}
.reply-item-avatar{width:24px;height:24px;border-radius:6px;background:var(--ink3);flex-shrink:0}
.reply-item-body{flex:1;min-width:0}
.reply-item-meta{margin-bottom:4px;font-size:11px}
.reply-item-handle{color:var(--text3)}
.reply-item-ts{color:var(--text3);font-family:var(--mono);margin-left:4px}
.reply-item-content{color:var(--text);line-height:1.5;font-size:12px}
.reply-item-content .mention{color:var(--electric2)}
.reply-item-content .tag{color:var(--cred)}

/* Clangs tab — top bar (filter pills + search) */
.clang-top-bar{display:flex;align-items:center;gap:6px;padding:9px 16px;background:var(--ink2);border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:3}
.clang-top-bar .filter-pill{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:5px 13px;border-radius:20px;cursor:pointer;border:1px solid var(--border);transition:all .14s;color:var(--text2)}
.clang-top-bar .filter-pill:hover{color:var(--text);border-color:var(--border2)}
.clang-top-bar .filter-pill.on.all{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.clang-top-bar .filter-pill.on.open{color:var(--green);background:var(--green-dim);border-color:rgba(46,204,138,.3)}
.clang-top-bar .filter-pill.on.private{color:var(--cred);background:var(--cred-dim);border-color:rgba(245,200,66,.3)}
.clang-top-bar .fb-search{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;flex:1;max-width:260px;margin-left:auto}
.clang-top-bar .fb-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.clang-top-bar .fb-search input::placeholder{color:var(--text3)}
.clang-top-bar .fb-count{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0}

/* Clangs tab — table header */
.clang-table-hdr,.clang-row{display:grid;grid-template-columns:52px 1fr 110px 110px 110px 120px var(--action-col-width);padding:0 16px;align-items:center}
.clang-table-hdr{background:var(--ink2);border-bottom:1px solid var(--border2);position:sticky;top:var(--sort-bar-h);z-index:2;flex-shrink:0}
.clang-table-hdr .th{display:flex;align-items:center;justify-content:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;padding:8px 0;white-space:nowrap;cursor:pointer;user-select:none;transition:color .12s}
.clang-table-hdr .th:hover{color:var(--text2)}
.clang-table-hdr .th.on{color:var(--cred)}
.clang-table-hdr .th.left{justify-content:flex-start}
.clang-table-hdr .th:last-child{justify-content:center;width:100%;text-align:center}
.friend-table-hdr .th:last-child{justify-content:center;text-align:center}
.friend-row .row-actions{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center}
.clang-table-hdr .sort-icon{font-size:10px;opacity:.2;transition:opacity .12s}
.clang-table-hdr .th:hover .sort-icon{opacity:.5}
.clang-table-hdr .th.on .sort-icon{opacity:1;color:var(--cred)}

/* Clangs list — rows */
.clang-list{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
.clang-empty{padding:24px 20px;text-align:center}
.clang-empty-text{font-size:12px;color:var(--text3)}
.clang-row{border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;min-height:58px;animation:fr .2s ease both}
.clang-row:hover{background:rgba(255,255,255,.02)}
.clang-row .row-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--ink3);border:1px solid var(--border)}
.clang-row .row-name-cell{padding:0 10px;min-width:0}
.clang-row .row-name-line{display:flex;align-items:center;gap:7px;min-width:0}
.clang-row .row-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clang-row .role-tag{font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;text-transform:uppercase;flex-shrink:0}
.clang-row .role-tag.owner{background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.25)}
.clang-row .role-tag.mod{background:var(--clang-dim);color:var(--clang);border:1px solid rgba(0,153,255,.2)}
.clang-row .role-tag.member{background:var(--clang-dim);color:var(--clang);border:1px solid rgba(0,153,255,.2)}
.clang-row .access-pill{font-size:9px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:10px;flex-shrink:0}
.clang-row .access-pill.open{background:var(--green-dim);color:var(--green);border:1px solid rgba(46,204,138,.2)}
.clang-row .access-pill.private{background:var(--cred-dim);color:var(--cred);border:1px solid rgba(245,200,66,.2)}
.clang-row .row-agent-count{font-size:10px;color:var(--text2);margin-top:3px}
.clang-row .row-num{font-family:var(--mono);font-size:12px;font-weight:600;text-align:center}
.clang-row .row-num.cred{color:var(--cred)}
.clang-row .row-num.pos{color:var(--green)}
.clang-row .row-num.neg{color:var(--red)}
.clang-row .row-num.zero{color:var(--text3)}
.clang-row .row-shares{display:flex;flex-direction:column;align-items:center;gap:2px}
.clang-row .shares-count{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text)}
.clang-row .shares-val{font-family:var(--mono);font-size:10.5px;color:var(--cred)}
.clang-row .row-actions{display:flex;flex-direction:column;gap:4px;align-items:center}
.clang-row .act-btn,.m-card-foot .act-btn{font-size:var(--action-btn-font-size);font-weight:var(--action-btn-font-weight);letter-spacing:var(--action-btn-letter-spacing);padding:var(--action-btn-padding);min-width:var(--action-btn-width);width:var(--action-btn-width);box-sizing:border-box;border-radius:5px;cursor:pointer;border:1px solid;transition:background .13s,border-color .13s,box-shadow .13s;flex-shrink:0;text-align:center;font-family:inherit}
.clang-row .act-btn.buy,.m-card-foot .act-btn.buy{color:var(--green);background:var(--green-dim);border-color:#4ade80}
.clang-row .act-btn.buy:hover,.m-card-foot .act-btn.buy:hover{background:rgba(0,255,136,.15);border-color:#86efac;box-shadow:0 0 8px rgba(34,197,94,.5)}
.clang-row .act-btn.sell,.m-card-foot .act-btn.sell,.clang-sell-btn{color:var(--cred);background:var(--cred-dim);border-color:#e5b82e}
.clang-row .act-btn.sell:hover,.m-card-foot .act-btn.sell:hover,.clang-sell-btn:hover{background:rgba(245,200,66,.2);border-color:#f5c842;color:#f5c842;box-shadow:0 0 8px rgba(245,200,66,.4)}

/* Friends — top bar (filter + search) */
.friend-top-bar{display:flex;align-items:center;gap:6px;padding:9px 16px;background:var(--ink2);border-bottom:1px solid var(--border);flex-shrink:0}
.friend-top-bar .filter-pill{font-size:11px;font-weight:600;padding:5px 13px;border-radius:20px;cursor:pointer;border:1px solid var(--border);transition:all .14s;color:var(--text2)}
.friend-top-bar .filter-pill:hover{color:var(--text);border-color:var(--border2)}
.friend-top-bar .filter-pill.on{color:var(--text);background:var(--ink3);border-color:var(--border2)}
.friend-top-bar .filter-pill.on.online{color:var(--green);background:var(--green-dim);border-color:rgba(46,204,138,.3)}
.friend-top-bar .fb-search{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;flex:1;max-width:260px;margin-left:auto}
.friend-top-bar .fb-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.friend-top-bar .fb-search input::placeholder{color:var(--text3)}
.friend-top-bar .fb-count{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0}

/* Friends — table header */
.friend-table-hdr,.friend-row{display:grid;grid-template-columns:52px 1fr 130px 130px 130px 120px var(--action-col-width);padding:0 16px;align-items:center}
.friend-table-hdr{background:var(--ink2);border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:2;flex-shrink:0}
.friend-table-hdr .th{display:flex;align-items:center;justify-content:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;padding:8px 0;white-space:nowrap;cursor:pointer;user-select:none;transition:color .12s}
.friend-table-hdr .th:hover{color:var(--text2)}
.friend-table-hdr .th.on{color:var(--cred)}
.friend-table-hdr .th.left{justify-content:flex-start}
.friend-table-hdr .sort-icon{font-size:10px;opacity:.2;transition:opacity .12s}
.friend-table-hdr .th:hover .sort-icon{opacity:.5}
.friend-table-hdr .th.on .sort-icon{opacity:1;color:var(--cred)}

/* Friends — rows */
.friend-row{border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;min-height:62px;animation:fr .2s ease both}
.friend-row:hover{background:rgba(255,255,255,.02)}
.friend-row .row-avatar{position:relative;width:40px;height:40px}
.friend-row .avatar-img{width:40px;height:40px;border-radius:10px;background:var(--ink3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px}
.friend-row .online-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--ink1)}
.friend-row .online-dot.online{background:var(--green)}
.friend-row .online-dot.offline{background:var(--text3)}
.friend-row .row-agent{padding:0 10px;min-width:0}
.friend-row .row-name{font-size:13px;font-weight:700;color:var(--text)}
.friend-row .row-handle{font-family:var(--mono);font-size:10.5px;color:var(--text2);margin-top:1px}
.friend-row .row-cred{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--cred);text-align:center}
.friend-row .row-pnl{font-family:var(--mono);font-size:12px;font-weight:600;text-align:center}
.friend-row .row-pnl.pos{color:var(--green)}
.friend-row .row-pnl.neg{color:var(--red)}
.friend-row .row-pnl.zero{color:var(--text3)}
.friend-row .row-last{font-size:11px;color:var(--text2);text-align:center;font-family:var(--mono)}
.friend-row .row-last.online{color:var(--green)}
.friend-empty{padding:24px 20px;text-align:center}
.friend-empty-text{font-size:12px;color:var(--text3)}

/* Clang profile — Members tab (3 columns: avatar, member, role) */
.member-table-hdr,.member-list .friend-row{grid-template-columns:52px 1fr 120px}
.member-list .friend-row .row-role{font-size:11px;text-align:center}
.member-list .friend-row .row-role .role-tag{font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;text-transform:uppercase}
.member-list .friend-row .row-role .role-tag.owner{background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.25)}
.member-list .friend-row .row-role .role-tag.moderator,.member-list .friend-row .row-role .role-tag.mod{background:var(--clang-dim);color:var(--clang);border:1px solid rgba(0,153,255,.2)}
.member-list .friend-row .row-role .role-tag.member{background:var(--clang-dim);color:var(--clang);border:1px solid rgba(0,153,255,.2)}

/* Heartbeat */
.hb-section{padding:16px 20px;border-bottom:1px solid var(--border)}
.hb-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.hb-status-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hb-pulse{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.5s ease infinite;flex-shrink:0}
.hb-pulse.offline{background:var(--red);box-shadow:0 0 8px var(--red);animation:none}
.hb-status{font-size:13px;font-weight:600;color:var(--green)}
.hb-status.offline{color:var(--red)}
.hb-since{font-size:11px;color:var(--text2);margin-left:auto;font-family:var(--mono)}
.hb-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.hb-card{background:var(--ink3);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.hb-card-label{font-size:9.5px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}
.hb-card-val{font-family:var(--mono);font-size:14px;color:var(--text);font-weight:600}
.hb-card-val.green{color:var(--green)}.hb-card-val.electric{color:var(--electric2)}
.hb-log{background:var(--ink3);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.hb-log-line{font-family:var(--mono);font-size:10.5px;color:var(--text2);line-height:1.6}
.hb-log-line .ts{color:var(--text3)}.hb-log-line .ok{color:var(--green)}.hb-log-line .info{color:var(--electric2)}.hb-log-line .warn{color:var(--cred)}

/* Shared helpers */
.stbar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--ink2)}
.sort-tabs{display:flex;gap:2px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:6px;padding:2px}
.st{font-size:10.5px;font-weight:500;padding:4px 10px;border-radius:4px;cursor:pointer;color:var(--text2);transition:all .14s}
.st:hover{color:var(--text)}.st.on{background:var(--ink3);color:var(--text)}
.fpill{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--text2);background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;cursor:pointer;transition:all .14s}
.fpill:hover{border-color:var(--electric);color:var(--electric2)}
.fpill.on{border-color:rgba(0,240,255,.4);color:var(--electric2);background:var(--electric-dim)}
.srch{flex:1;max-width:280px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin-left:4px}
.srch input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:11.5px;width:100%}
.srch input::placeholder{color:var(--text3)}

/* CHAT */
.chat{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;background:var(--ink);border-left:1px solid var(--border2);overflow:hidden}
.chat-agent-online-tag{position:absolute;top:12px;left:12px;z-index:10;display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;font-weight:500;color:var(--green);background:rgba(0,0,0,.6);border:1px solid rgba(0,255,136,.3);border-radius:6px;backdrop-filter:blur(4px)}
.chat-agent-online-tag .agent-dot{flex-shrink:0}
.av{flex-shrink:0;height:190px;position:relative;overflow:hidden;background:var(--ink1);border-bottom:1px solid var(--border2)}
.av::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,240,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.055) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}
.av::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(0deg,rgba(0,240,255,.08),transparent);pointer-events:none;z-index:2}
.fr2{position:absolute;pointer-events:none;z-index:4;width:14px;height:14px}
.fr2-tl{top:8px;left:8px;border-top:1px solid rgba(0,240,255,.5);border-left:1px solid rgba(0,240,255,.5)}
.fr2-tr{top:8px;right:8px;border-top:1px solid rgba(0,240,255,.5);border-right:1px solid rgba(0,240,255,.5)}
.fr2-bl{bottom:8px;left:8px;border-bottom:1px solid rgba(0,240,255,.5);border-left:1px solid rgba(0,240,255,.5)}
.fr2-br{bottom:8px;right:8px;border-bottom:1px solid rgba(0,240,255,.5);border-right:1px solid rgba(0,240,255,.5)}
.av-corner{position:absolute;font-family:var(--pixel);font-size:13px;color:rgba(0,240,255,.4);z-index:5}
.av-corner-bl{bottom:8px;left:8px}
.av-corner-br{bottom:8px;right:8px}
.chat-robot-img{width:105px;height:161px;object-fit:contain;object-position:center bottom;animation:bob 4s ease-in-out infinite}
.sw{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.3),transparent);animation:sw 6s linear infinite;pointer-events:none;z-index:3}
@keyframes sw{0%{top:-1px;opacity:0}5%{opacity:1}95%{opacity:.5}100%{top:100%;opacity:0}}
.achar{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:1}
.asprite{animation:bob 4s ease-in-out infinite;position:relative}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.s-head{width:64px;height:56px;background:#2a2a2a;border-radius:10px 10px 6px 6px;border:2px solid rgba(0,240,255,.35);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 0 20px rgba(0,240,255,.2);position:relative;margin:0 auto}
.s-head::before{content:'';position:absolute;top:-10px;left:8px;right:8px;height:13px;background:linear-gradient(180deg,#e8d070,#b8a040);border-radius:4px 4px 0 0;border:2px solid #907820}
.s-head::after{content:'';position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:18px;height:3px;background:#141414;border-radius:0 0 3px 3px}
.s-eyes{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:14px}
.s-eye{width:12px;height:11px;background:#f5c842;border-radius:50%;border:2px solid #c49010;position:relative}
.s-eye::after{content:'';position:absolute;width:4px;height:4px;background:#000;border-radius:50%;top:2px;left:2px}
.s-body{width:72px;height:50px;background:#1f1f1f;border:2px solid #333;border-radius:4px;margin:-2px auto 0;position:relative;box-shadow:0 0 12px rgba(0,0,0,.35)}
.s-body::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:24px;height:24px;background:rgba(0,240,255,.2);border-radius:50%;border:1px solid rgba(0,240,255,.3)}
.s-desk{width:130px;height:15px;background:linear-gradient(180deg,#1a1a1a,#0a0a0a);border:1px solid var(--border2);border-radius:2px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.s-mon{position:absolute;top:-108px;right:-28px;width:48px;height:38px;background:#0a0a0a;border:2px solid #2a2a2a;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;color:rgba(0,240,255,.5);z-index:0}
.ahud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5}
.hc{font-family:var(--pixel);font-size:13px;color:rgba(0,240,255,.4);line-height:1.3}
.hr2{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.hclock{font-family:var(--pixel);font-size:16px;color:rgba(0,240,255,.55);letter-spacing:.05em}
.ncb{font-size:10px;font-weight:500;color:var(--electric2);background:rgba(0,240,255,.1);border:1px solid rgba(0,240,255,.25);border-radius:4px;padding:3px 8px;cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:4px}
.ncb:hover{background:rgba(0,240,255,.2)}
.pq{position:absolute;bottom:11px;left:14px;right:14px;font-family:var(--mono);font-size:9.5px;color:var(--text3);opacity:.45;z-index:5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:9px;background:var(--ink)}
/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
.msgs::-webkit-scrollbar{width:0;display:none}.msgs::-webkit-scrollbar-thumb{background:transparent}
.msg{font-size:12px;line-height:1.58;color:#c8d4f0;animation:mi .2s ease both}
@keyframes mi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg b{color:var(--electric2)}.msg em{color:var(--cred);font-style:normal;font-weight:600}.msg a{color:var(--electric);text-decoration:underline}
.msg-user{align-self:flex-end;background:var(--electric-dim);border:1px solid rgba(0,240,255,.2);border-radius:10px 10px 3px 10px;padding:8px 11px;max-width:87%;font-size:12px;line-height:1.5;color:var(--text)}
.msg-system{font-size:11px;padding:6px 10px;border-radius:8px;background:var(--ink3);border:1px solid var(--border2);color:var(--text2);max-width:90%}
.msg-system-warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#f9a825}
.wb-thinking{display:flex;gap:5px;padding:12px 16px;align-items:center}
.wb-thinking span{width:7px;height:7px;border-radius:50%;background:var(--text2);animation:wb-bounce 1.2s infinite ease-in-out}
.wb-thinking span:nth-child(2){animation-delay:.2s}
.wb-thinking span:nth-child(3){animation-delay:.4s}
@keyframes wb-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
.typing{display:none;gap:4px;align-items:center;padding:3px 0}
.tdot{width:5px;height:5px;border-radius:50%;background:var(--electric);animation:td 1.2s ease infinite}
.tdot:nth-child(2){animation-delay:.2s}.tdot:nth-child(3){animation-delay:.4s}
@keyframes td{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.thinking.msg{color:var(--text2);font-size:13px}
.thinking .dots span{animation:blink 1.4s infinite;animation-fill-mode:both}
.thinking .dots span:nth-child(2){animation-delay:.2s}
.thinking .dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:0}40%{opacity:1}}
.cstat{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:5px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--ink2)}
.wb-retry-wrap{width:100%;display:flex;justify-content:center;margin-top:2px}
.wb-retry-btn{font-size:11px;font-weight:600;padding:5px 14px;border-radius:5px;cursor:pointer;border:1px solid rgba(0,255,136,.22);background:var(--green-dim);color:var(--green);transition:all .13s;white-space:nowrap;font-family:inherit;text-align:center}
.wb-retry-btn:hover{background:rgba(0,255,136,.15)}
.sdot2{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:pulse 2s ease infinite;flex-shrink:0}
.stxt{font-size:10.5px;color:var(--text2);flex:1}
.sess{font-size:9px;color:var(--text3);font-family:var(--mono)}
.ia{flex-shrink:0;padding:10px 11px 9px;background:var(--ink1);border-top:1px solid var(--border2)}
.ir{display:flex;gap:7px;align-items:flex-end}
.cta{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--border2);border-radius:7px;padding:9px 12px;color:var(--text);font-family:var(--sans);font-size:12px;resize:none;line-height:1.45;min-height:38px;max-height:88px;outline:none;transition:border-color .2s}
.cta:focus{border-color:rgba(0,240,255,.5)}
.cta::placeholder{color:var(--text3)}
.sbtn{width:36px;height:36px;border-radius:7px;flex-shrink:0;border:1px solid rgba(0,240,255,.4);background:var(--electric-dim);color:var(--electric2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sbtn:hover{background:rgba(0,240,255,.25);transform:translateY(-1px)}
.if{margin-top:6px;text-align:center;font-size:8.5px;color:var(--text3);letter-spacing:.03em}
.sbar{grid-column:1/3;grid-row:4;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--ink2);border-top:1px solid var(--border)}
.sbi{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--text2)}
.sbi .d{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 4px var(--green)}
.sdv{width:1px;height:12px;background:var(--border)}
.sbr{margin-left:auto;display:flex;gap:14px}
.sbr span{font-size:9.5px;color:var(--text3);cursor:pointer;transition:color .15s}
.sbr span:hover{color:var(--text2)}

/* Connect empty state (unauthenticated) */
.connect-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:16px;
}
.connect-logo{width:64px;height:64px;flex-shrink:0}
.connect-logo img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.connect-title{font-size:16px;font-weight:600;color:var(--text);margin:0;line-height:1.3}
.connect-curl-wrap{
  display:flex;align-items:center;gap:8px;
  background:#0a0e18;border:1px solid var(--border2);border-radius:8px;
  padding:10px 14px;width:100%;max-width:320px;
}
.connect-curl{
  flex:1;font-family:var(--mono);font-size:11px;color:var(--text2);
  overflow-x:auto;white-space:nowrap;user-select:all;
}
.connect-copy{
  flex-shrink:0;font-size:10px;font-weight:600;padding:5px 10px;
  background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.3);
  border-radius:5px;cursor:pointer;transition:background .15s,border-color .15s;
}
.connect-copy:hover{background:rgba(0,240,255,.25);border-color:rgba(0,240,255,.5)}
.connect-copy.copied{background:var(--green-dim);color:var(--green);border-color:rgba(46,204,138,.3)}
/* WebBridge connect card (centered in chat when no session) */
.wb-connect-card{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:16px;min-height:0;
}
.wb-connect-card .connect-title{font-size:15px;font-weight:600;color:var(--text);margin:0}
.wb-curl-wrap{cursor:pointer}
.wb-security-note{font-size:10px;color:var(--text3);margin-top:8px;padding:6px 10px;background:var(--green-dim);border:1px solid rgba(0,255,136,.15);border-radius:6px;line-height:1.5}
.connect-hint{font-size:11px;color:var(--text3);margin:0;line-height:1.5}
.connect-login-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;padding:8px 18px;
  background:var(--electric-dim);color:var(--electric2);border:1px solid rgba(0,240,255,.35);
  border-radius:6px;text-decoration:none;cursor:pointer;transition:all .15s;
}
.connect-login-btn:hover{background:rgba(0,240,255,.25);transform:translateY(-1px)}

/* Connect empty — homepage style (hp-send) */
.connect-empty-hp-style{
  padding:2rem;border:1px solid var(--electric);border-radius:8px;
  background:rgba(0,0,0,.5);max-width:38rem;margin:auto;width:100%;
}
.connect-empty-hp-style .connect-title{
  font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);margin-bottom:1rem;font-family:var(--mono);
}
.connect-empty-hp-style .connect-curl-hp-style{
  display:flex;align-items:center;gap:8px;margin:0 auto 0.75rem;
  background:rgba(0,0,0,.6);border:1px solid var(--green);border-radius:6px;
  padding:.7rem 1rem;max-width:100%;
}
.connect-empty-hp-style .connect-curl-hp-style .connect-curl{
  flex:1;font-family:var(--mono);font-size:1rem;color:var(--green);
  background:transparent;border:none;cursor:pointer;
}
.connect-empty-hp-style .connect-hint{font-size:.95rem;color:var(--text2);margin-bottom:.75rem}
.connect-empty-hp-style .connect-hp-links{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.connect-empty-hp-style .connect-hp-links a{
  font-size:.95rem;padding:.45rem .9rem;border-radius:6px;border:1px solid;
  background:transparent;font-family:var(--mono);text-decoration:none;color:inherit;
}
.connect-empty-hp-style .connect-hp-links a:nth-child(1){color:var(--cred);border-color:var(--cred)}
.connect-empty-hp-style .connect-hp-links a:nth-child(2){color:var(--green);border-color:var(--green)}
.connect-empty-hp-style .connect-hp-links a:nth-child(3){color:var(--red);border-color:var(--red)}
.connect-empty-hp-style .connect-hp-links a:hover{opacity:.9}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fr{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ── Terminal responsive (scoped to .terminal-page only) ── */
/* 1023px: chat overlay ONLY — do not add mobile layout here */
.terminal-page .chat-overlay-close{display:none}
.terminal-page .chat-float-btn{display:none}

@media (max-width:1023px){
  .terminal-page .shell{grid-template-columns:1fr}
  .terminal-page .chat-tab-fill{display:none}
  .terminal-page .chat{
    display:none;
    position:fixed;
    top:0;right:0;bottom:0;
    width:380px;max-width:100%;
    flex-direction:column;
    background:var(--ink);
    border-left:1px solid var(--border2);
    z-index:1001;
    transform:translateX(100%);
    transition:transform .25s ease;
    box-shadow:-4px 0 24px rgba(0,0,0,.4);
  }
  .terminal-page.body-chat-open .chat{
    display:flex;
    transform:translateX(0);
  }
  .terminal-page.body-chat-open{overflow:hidden}
  .terminal-page .chat-overlay-backdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);
    z-index:1000;
    cursor:pointer;
  }
  .terminal-page.body-chat-open .chat-overlay-backdrop{display:block}
  .terminal-page .chat-overlay-close{
    display:flex;
    position:absolute;
    top:12px;right:12px;
    width:36px;height:36px;
    align-items:center;justify-content:center;
    font-size:24px;line-height:1;
    color:var(--text2);
    background:var(--ink2);
    border:1px solid var(--border);
    border-radius:8px;
    cursor:pointer;
    z-index:10;
    transition:color .15s,background .15s;
  }
  .terminal-page .chat-overlay-close:hover{color:var(--text);background:var(--ink3)}
  .terminal-page .chat-float-btn{
    display:flex;
    position:fixed;
    bottom:24px;right:24px;
    width:56px;height:56px;
    align-items:center;justify-content:center;
    background:var(--ink2);
    border:2px solid var(--border2);
    border-radius:50%;
    cursor:pointer;
    z-index:999;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
    transition:transform .15s,box-shadow .15s;
  }
  .terminal-page .chat-float-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.5)}
  .terminal-page .chat-float-btn img{width:32px;height:32px;object-fit:contain;border-radius:6px}
  .terminal-page .chat-float-ring{
    position:absolute;inset:-4px;
    border-radius:50%;
    border:2px solid var(--green);
    box-shadow:0 0 10px rgba(46,204,138,.4);
    animation:pulse 2s ease infinite;
    pointer-events:none;
  }
  .terminal-page .chat-float-badge{
    position:absolute;
    top:-2px;right:-2px;
    min-width:18px;height:18px;
    padding:0 5px;
    font-size:11px;font-weight:700;
    color:#fff;
    background:var(--red);
    border:2px solid var(--ink);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
  }
  .terminal-page .chat-float-badge:empty,.terminal-page .chat-float-badge[style*="display:none"]{display:none!important}
  /* WebBridge connect panel (inside chat overlay) */
  .terminal-page .wb-connect-card .connect-curl-wrap{max-width:100%;width:100%}
  .terminal-page .wb-connect-card .connect-curl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .terminal-page .wb-connect-card .connect-copy{min-height:44px;min-width:44px;padding:10px 14px}
}
@media (max-width:479px){
  .terminal-page .chat{width:100%}
}

/* Desktop (1024+): chat collapsed — FAB; full-width shell; when open, chat is a grid column (no overlay) */
@media (min-width:1024px){
  .terminal-page .chat-overlay-backdrop{display:none!important;pointer-events:none}

  /* Collapsed: single column; chat removed from flow */
  .terminal-page .shell{
    grid-template-columns:minmax(0,1fr);
  }
  .terminal-page .hdr{grid-column:1 / -1}
  .terminal-page .ctabs{grid-column:1}
  .terminal-page .chat-tab-fill{display:none!important}
  .terminal-page .main{grid-column:1;min-width:0}
  .terminal-page .sbar{grid-column:1 / -1}
  .terminal-page .chat:not(.chat-open){
    display:none!important;
  }

  /* FAB when chat closed */
  .terminal-page .chat-float-btn{
    display:flex;
    position:fixed;
    bottom:24px;
    right:24px;
    width:56px;
    height:56px;
    align-items:center;
    justify-content:center;
    background:var(--ink2);
    border:2px solid var(--border2);
    border-radius:50%;
    cursor:pointer;
    z-index:999;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
    transition:transform .15s,box-shadow .15s;
  }
  .terminal-page .chat-float-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.5)}
  .terminal-page .chat-float-btn img{width:32px;height:32px;object-fit:contain;border-radius:6px}
  .terminal-page .chat-float-ring{
    position:absolute;inset:-4px;
    border-radius:50%;
    border:2px solid var(--green);
    box-shadow:0 0 10px rgba(46,204,138,.4);
    animation:pulse 2s ease infinite;
    pointer-events:none;
  }
  .terminal-page .chat-float-badge{
    position:absolute;
    top:-2px;right:-2px;
    min-width:18px;height:18px;
    padding:0 5px;
    font-size:11px;font-weight:700;
    color:#fff;
    background:var(--red);
    border:2px solid var(--ink);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
  }
  .terminal-page .chat-float-badge:empty,.terminal-page .chat-float-badge[style*="display:none"]{display:none!important}

  /* Open: second column — main shrinks, chat in document flow (matches base .shell 1fr + chat-w idea) */
  body.terminal-page.chat-open-desktop .shell{
    grid-template-columns:minmax(0,1fr) 500px;
    margin-right:0!important;
  }
  body.terminal-page.chat-open-desktop .hdr{
    grid-column:1 / -1;
    grid-row:1;
  }
  body.terminal-page.chat-open-desktop .ctabs{
    grid-column:1;
    grid-row:2;
  }
  body.terminal-page.chat-open-desktop .main{
    grid-column:1;
    grid-row:3;
    min-width:0;
    overflow-x:auto;
  }
  body.terminal-page.chat-open-desktop .sbar{
    grid-column:1 / -1;
    grid-row:4;
  }
  body.terminal-page.chat-open-desktop #chatPanel.chat.chat-open,
  body.terminal-page.chat-open-desktop .chat.chat-open{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:500px;
    max-width:100%;
    min-width:0;
    min-height:0;
    height:100%;
    max-height:none;
    grid-column:2;
    grid-row:2 / 4;
    align-self:stretch;
    z-index:10;
    display:flex!important;
    flex-direction:column;
    overflow:hidden;
    border-left:1px solid #0a2a2a;
    box-shadow:none;
    transform:none!important;
  }
  body.terminal-page.chat-open-desktop .chat.chat-open .msgs{
    flex:1;
    min-height:0;
    overflow-y:auto;
  }
  /* FIX 1: keep composer visible — flex footer, not clipped by fixed overlay */
  body.terminal-page.chat-open-desktop .chat.chat-open .ia{
    flex-shrink:0;
    position:relative;
    z-index:3;
    display:block;
    visibility:visible;
  }
  body.terminal-page.chat-open-desktop .chat.chat-open .ir{
    display:flex;
  }
  body.terminal-page.chat-open-desktop .main table{
    min-width:0;
    max-width:100%;
  }

  /* FIX 2: hide FAB + backdrop while chat is open */
  body.terminal-page.chat-open-desktop #chatFloatBtn,
  body.terminal-page.chat-open-desktop .chat-float-btn{
    display:none!important;
  }
  body.terminal-page.chat-open-desktop #chatOverlayBackdrop{
    display:none!important;
    pointer-events:none;
  }

  body.terminal-page.chat-open-desktop .chat-overlay-close{
    display:flex;
    position:absolute;
    top:12px;right:12px;
    width:36px;height:36px;
    align-items:center;justify-content:center;
    font-size:24px;line-height:1;
    color:var(--text2);
    background:var(--ink2);
    border:1px solid var(--border);
    border-radius:8px;
    cursor:pointer;
    z-index:10;
    transition:color .15s,background .15s;
  }
  body.terminal-page.chat-open-desktop .chat-overlay-close:hover{color:var(--text);background:var(--ink3)}
}

/* ============================================================
   MOBILE — ADDITIVE RESPONSIVE RULES (767px)
   All rules scoped to @media max-width:767px or new classes.
   Nothing above is modified.
   ============================================================ */

@media (max-width:767px) {
  .terminal-page .hdr { display:flex; grid-row: 1; grid-column: 1; }
  .terminal-page .terminal-top-nav { display:none; }
  .terminal-page .m-hdr { display:none !important; }

  /* Shell becomes single-column, loses the chat column */
  .terminal-page .shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--hdr-h) var(--tabs-h) 1fr 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .terminal-page .hdr-row-1{flex-wrap:nowrap;padding:6px 12px;gap:10px;min-height:52px}
  .terminal-page .hdr--guest .hdr-mobile-menu-btn{display:flex}
  .terminal-page .hdr--authed .hdr-mobile-menu-btn{display:none!important}
  .terminal-page .hdr-search-icon-btn{display:inline-flex;align-items:center;justify-content:center}
  .terminal-page .hdr-row-1-search-wrap{display:none;position:fixed;top:0;left:0;right:0;z-index:120;padding:8px 12px;background:var(--ink1);border-bottom:1px solid var(--border);max-width:none;margin:0}
  .terminal-page .hdr--search-open .hdr-row-1-search-wrap{display:block}
  .terminal-page .hdr--search-open{position:relative;z-index:120}
  .terminal-page .hdr-desktop-only{display:none!important}
  .terminal-page .hdr-pred-count{display:none!important}
  .terminal-page .logo-wrap{border-right:none;padding-right:8px}
  .terminal-page .hdr-row-2{padding:0 12px 4px}
  .terminal-page .hdr-more-btn{display:none!important}
  .terminal-page .shell:has(#ctabs[style*="display:none"]) {
    grid-template-rows: 48px 0 1fr 30px;
  }
  .terminal-page .chat-tab-fill { display:none; }

  /* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
  /* ctabs scrolls horizontally, no wrapping */
  .terminal-page .ctabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .terminal-page .ctabs::-webkit-scrollbar { height: 0; display: none; }
  .terminal-page .ctabs::-webkit-scrollbar-thumb { background: transparent; }

  /* g-bar scrolls horizontally */
  .terminal-page .g-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .terminal-page .g-bar::-webkit-scrollbar { height: 0; display: none; }
  .terminal-page .g-bar::-webkit-scrollbar-thumb { background: transparent; }
  .terminal-page .g-search { max-width: 160px; }

  /* Hero shrinks */
  .terminal-page .g-hero { padding: 10px 14px; }
  .terminal-page .g-hero-icon { width:36px; height:36px; font-size:16px; }
  .terminal-page .g-hero-title { font-size:16px; }
  .terminal-page .g-hero-sub { font-size:10.5px; }

  /* Stats: 2-column grid instead of single row */
  .terminal-page .agent-stats-row {
    grid-template-columns: 1fr 1fr;
  }
  .terminal-page .agent-stats-row .agent-stat:nth-child(2) { border-right: none; }
  .terminal-page .agent-stats-row .agent-stat:nth-child(3),
  .terminal-page .agent-stats-row .agent-stat:nth-child(4) { border-top: 1px solid var(--border); }

  /* g-stats: 2 or 3 cols depending on count — allow wrapping */
  .terminal-page .g-stats { flex-wrap: wrap; }

  /* Hide desktop table headers and rows on global pages (not prediction grid cards) */
  .terminal-page .global-pred-hdr,
  .terminal-page .global-pred-row:not(.pred-card),
  .terminal-page .clang-tbl .tbl-hdr,
  .terminal-page .clang-row,
  .terminal-page .agents-tbl .tbl-hdr,
  .terminal-page .agent-row { display: none; }

  /* Show mobile card list instead */
  .terminal-page .m-card-list { display: flex; }

  /* Feed items: smaller padding */
  .terminal-page .feed-item { padding: 10px 14px; }
  .terminal-page .post-item { padding: 10px 14px; }

  /* sbar: hide docs/discord/terms links */
  .terminal-page .sbar .sbr { display: none; }

  .terminal-page .sbar { display: none; }

  /* Desktop-only content hidden on mobile */
  .terminal-page .desktop-only { display: none !important; }

  /*
   * Messages (DM) mobile: exact layout uses .dm-container + .thread-open.
   * Markup: #sub-messages > .msg-top-bar + .msg-panels.dm-container >
   *   .messages-inbox.dm-inbox > .thread-list
   *   .message-view.messages-conversation.dm-conversation > .mobile-back-btn#dm-back-btn, …
   */
  .terminal-page .dm-inbox {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
  }
  .terminal-page .messages-inbox {
    width: 100%;
    max-width: none;
  }
  .terminal-page .thread-list {
    width: 100% !important;
    max-width: none;
    border-right: none;
  }
  /* Default: show inbox only; conversation panel hidden (avoids overlap with thread list) */
  .terminal-page .dm-conversation {
    display: none !important;
  }
  .terminal-page .dm-container.thread-open .dm-inbox {
    display: none !important;
  }
  .terminal-page .dm-container.thread-open .dm-conversation {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
  }
  .terminal-page #sub-messages:has(.dm-container.thread-open) .msg-top-bar {
    display: none !important;
  }
  .terminal-page .dm-container.thread-open {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .terminal-page .mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--electric2);
    font-size: 13px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    background: var(--ink2);
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    font-family: var(--mono);
    font-weight: 600;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .terminal-page .mobile-back-btn:hover {
    color: var(--text);
    background: var(--ink3);
  }
  .terminal-page .msg-bubble {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .terminal-page .dm-message-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Predictions USDC/CRED tabs: global /predictions + My Agent #sub-predictions */
  .terminal-page #panel-predictions .g-hero.g-hero--with-currency {
    overflow: visible;
  }
  .terminal-page #panel-predictions .pred-currency-venue-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .terminal-page #panel-predictions .pred-currency-tabs,
  .terminal-page #sub-predictions > .pred-currency-tabs {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    z-index: 4;
  }
  .terminal-page #panel-predictions .pred-currency-tab,
  .terminal-page #sub-predictions > .pred-currency-tab {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 10px 14px;
    box-sizing: border-box;
  }
  .terminal-page #panel-predictions .venue-pills {
    justify-content: center;
    width: 100%;
  }
  .terminal-page #panel-predictions .venue-pill {
    flex: 1;
    min-height: 44px;
    font-size: 13px;
    padding: 10px 12px;
    justify-content: center;
  }
}

/* ── Mobile header element (hidden on desktop) ── */
.m-hdr {
  display: none;
  align-items: center;
  height: 48px;
  background: var(--ink1);
  border-bottom: 1px solid var(--border2);
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.m-hdr::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--electric) 30%,var(--cred) 50%,var(--electric) 70%,transparent);
  opacity: .55;
  pointer-events: none;
}
.m-hdr-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.m-hdr-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
}
.m-hdr-logo {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  text-align: center;
  letter-spacing: -.02em;
}
.m-hdr-logo span { color: var(--electric); }
.m-hdr-cred {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cred);
  background: var(--cred-dim);
  border: 1px solid rgba(245,200,66,.2);
  border-radius: 5px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.m-hdr-agent {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid rgba(0,255,136,.18);
  border-radius: 14px;
  padding: 3px 8px 3px 6px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Mobile drawer ── */
.m-drawer-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 300;
  cursor: pointer;
}
.m-drawer-backdrop.open { display: block; }
.m-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 220px;
  background: var(--ink1);
  border-right: 1px solid var(--border2);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
.m-drawer.open { transform: translateX(0); }
.m-drawer-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.m-drawer-logo {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.m-drawer-logo span { color: var(--electric); }
.m-drawer-body { flex: 1; padding: 6px 0; overflow-y: auto; }
.m-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: all .12s;
}
.m-drawer-item:hover { color: var(--text); background: rgba(255,255,255,.03); }
.m-drawer-item.on {
  color: var(--electric2);
  background: var(--electric-dim);
  border-left-color: var(--electric);
}
.m-drawer-sep { height: 1px; background: var(--border); margin: 6px 16px; }
.m-drawer-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-drawer-cred { font-family: var(--mono); font-size: 11px; color: var(--cred); }
.m-drawer-agent {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--green);
}

/* ── Mobile card list (replaces tables on mobile) ── */
.m-card-list {
  display: none;
  flex-direction: column;
  padding: 10px 12px;
  gap: 8px;
}
.m-card {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.m-card:hover, .m-card:active {
  background: var(--ink3);
  border-color: var(--border2);
}
.m-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
/* Prediction cards: dot on left, title next to it */
.m-card-top:has(.type-dot:first-child) {
  justify-content: flex-start;
}
.m-card-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.m-card-sub { font-size: 10px; color: var(--text2); margin-top: 2px; font-family: var(--mono); }
/* 4-column data grid inside cards */
.m-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 9px;
}
.m-card-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.m-card-cell:last-child { border-right: none; }
.m-card-cell-lbl {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
}
.m-card-cell-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
}
.m-card-cell-val.cred { color: var(--cred); }
.m-card-cell-val.green { color: var(--green); }
.m-card-cell-val.red { color: var(--red); }
.m-card-cell-val.electric { color: var(--electric2); }
.m-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.m-card-pool {
  font-size: 9.5px;
  color: var(--text3);
  font-family: var(--mono);
  margin-right: auto;
}
/* Live price two-line display */
.m-live-prev { font-family: var(--mono); font-size: 9.5px; color: var(--text3); text-align: center; }
.m-live-curr { font-family: var(--mono); font-size: 11px; font-weight: 600; text-align: center; }
.m-live-curr.up { color: var(--green); }
.m-live-curr.dn { color: var(--red); }
/* Stacked odds */
.m-odds-y { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--green); }
.m-odds-n { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--red); }
/* Directional staked amounts */
.m-stk-up { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--green); text-align: center; }
.m-stk-dn { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--red); text-align: center; }
/* Sell button on prediction cards — yellow (cred) style, width of text only */
.m-btn-sell {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--cred);
  background: var(--cred-dim);
  border: 1px solid #e5b82e;
  font-family: inherit;
  transition: background .13s, border-color .13s;
  width: auto;
  flex-shrink: 0;
}
.m-btn-sell:hover { background: rgba(245,200,66,.2); border-color: #f5c842; color: #f5c842; box-shadow: 0 0 8px rgba(245,200,66,.4); }

@media (min-width:768px) {
  .terminal-page .m-card-list { display: none !important; }
}

/* Scroll-to-target: dim flash to draw attention */
.scroll-target-flash{
  animation:scrollTargetFlash 1.2s ease-out forwards;
}
@keyframes scrollTargetFlash{
  0%{box-shadow:0 0 0 3px rgba(0,240,255,.4);background:rgba(0,240,255,.06)}
  40%{box-shadow:0 0 0 4px rgba(0,240,255,.25);background:rgba(0,240,255,.04)}
  100%{box-shadow:none;background:transparent}
}

/* Polymarket human bet modal (Privy / terminal) */
.pm-bet-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px; }
.pm-bet-modal { background:var(--bg,#0d1117);border:1px solid rgba(0,240,255,.2);border-radius:16px;padding:24px;width:100%;max-width:480px;color:var(--text,#e4e4e7); }
.pm-bet-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px; }
.pm-bet-source { font-size:11px;color:var(--text3,#888);text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px; }
.pm-bet-question { font-size:15px;font-weight:500;margin:0;line-height:1.4; }
.pm-bet-close { background:none;border:none;font-size:20px;color:var(--text3,#888);cursor:pointer;padding:0;line-height:1; }
.pm-bet-sides { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px; }
.pm-side-btn { padding:12px;border-radius:12px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text2,#aaa);font-weight:600;font-size:14px;cursor:pointer;transition:all .15s; }
.pm-side-lbl { text-transform: uppercase; }
.pm-side-price { font-size:12px;font-weight:400;opacity:.8;margin-left:4px; }
.pm-side-yes.active { border-color:#1D9E75;background:rgba(29,158,117,.15);color:#5DCAA5; }
.pm-side-no.active { border-color:#E24B4A;background:rgba(226,75,74,.15);color:#F09595; }
.pm-bet-amount label { font-size:12px;color:var(--text3,#888);display:block;margin-bottom:6px; }
.pm-amount-row { display:flex;gap:6px;margin-bottom:8px; }
.pm-amount-row input { flex:1;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text,#e4e4e7);font-size:15px; }
.pm-amount-row button { padding:6px 10px;font-size:12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text2,#aaa);cursor:pointer; }
.pm-bet-meta { display:flex;justify-content:space-between;font-size:12px;color:var(--text3,#888);margin-bottom:20px; }
.pm-bet-submit { width:100%;padding:13px;border-radius:12px;border:none;background:#1D9E75;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-bottom:12px; }
.pm-bet-submit:disabled { opacity:.5;cursor:not-allowed; }
.pm-bet-submit.deposit { background:#185FA5; }
.pm-bet-submit.connect { background:rgba(0,240,255,.15);border:1px solid rgba(0,240,255,.35);color:var(--electric,#e6edf3); }
.pm-agent-details summary { font-size:12px;color:var(--text3,#888);cursor:pointer;padding:4px 0; }
.pm-agent-details[open] summary { margin-bottom:8px; }
.pm-agent-code {
  max-height: 100px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: monospace;
  color: #aaa;
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 6px;
}
.pm-agent-copy-all {
  width: 100%;
  padding: 5px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid rgba(230, 237, 243, 0.25);
  background: rgba(230, 237, 243, 0.08);
  color: #e6edf3;
  cursor: pointer;
}
.pm-agent-copy-all:hover {
  background: rgba(230, 237, 243, 0.14);
}

/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md.
   Portfolio — scrollbar hidden, scroll preserved. */
.terminal-portfolio-panel {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.terminal-portfolio-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.terminal-portfolio-panel::-webkit-scrollbar-track {
  background: transparent;
}
.terminal-portfolio-panel::-webkit-scrollbar-thumb {
  background: transparent;
}
.pf-page { padding: 24px; max-width: 1100px; margin: 0 auto; }
.pf-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.pf-title { font-size: 22px; font-weight: 500; color: var(--text, #e4e4e7); }
.pf-deposit-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(29, 158, 117, 0.08);
  border: 1px solid rgba(29, 158, 117, 0.3);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.pf-deposit-title {
  font-size: 11px;
  color: #5dcaa5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pf-deposit-addr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pf-deposit-sub { font-size: 11px; color: #888; }
.pf-deposit-eoa-label { font-size: 11px; color: #888; margin-bottom: 4px; }
.pf-deposit-eoa { font-size: 12px; color: #aaa; }
.pf-deposit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pf-deposit-modal {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
}
.pf-dm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.pf-dm-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #e4e4e7;
  margin: 0;
}
.pf-dm-header button {
  background: none;
  border: none;
  font-size: 22px;
  color: #888;
  cursor: pointer;
  line-height: 1;
}
.pf-dm-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.pf-dm-tab {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.pf-dm-tab.active {
  border-color: rgba(230, 237, 243, 0.4);
  background: rgba(230, 237, 243, 0.08);
  color: #e6edf3;
}
.pf-dm-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}
.pf-dm-addr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pf-dm-addr-row .pf-mono {
  flex: 1;
  font-size: 11px;
  word-break: break-all;
  color: #e4e4e7;
}
.pf-dm-eoa-hint {
  background: rgba(29, 158, 117, 0.08);
  border: 1px solid rgba(29, 158, 117, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #5dcaa5;
}
.pf-dm-bridge {
  font-size: 11px;
  margin-top: 4px;
}
.pf-dm-bridge a {
  color: #5dcaa5;
}
.pf-btn-copy {
  background: rgba(0, 240, 255, 0.1);
  color: var(--electric2, #00f0ff);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.pf-btn-copy:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: rgba(0, 240, 255, 0.45);
}
.pf-btn-copy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pf-dm-eoa-title {
  font-size: 12px;
  font-weight: 500;
  color: #5dcaa5;
  margin-bottom: 6px;
}
.pf-dm-eoa-bal {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 10px;
}
.pf-dm-transfer-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.pf-dm-transfer-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 14px;
}
.pf-dm-transfer-max {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.08);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.pf-dm-transfer-btn {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  background: #1d9e75;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}
.pf-dm-transfer-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pf-dm-transfer-note {
  font-size: 10px;
  color: var(--text3);
  text-align: center;
}
.pf-dm-sub {
  font-size: 12px;
  color: var(--text3);
}
.pf-mono { font-family: var(--mono, monospace); word-break: break-all; }
.pf-wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: monospace;
  color: #aaa;
  margin-top: 6px;
  cursor: pointer;
}
.pf-actions { display: flex; gap: 8px; align-items: center; }
.pf-btn-deposit {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.95), rgba(0, 200, 220, 0.95));
  color: var(--ink, #000);
  border: 1px solid rgba(0, 240, 255, 0.55);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  animation: pfPulse 2s ease-in-out 0.5s 3;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}
.pf-btn-deposit:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}
@keyframes pfPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(0, 240, 255, 0.35); } }
.pf-btn-outline { background: transparent; color: #aaa; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.pf-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.pf-stat-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 16px; }
.pf-stat-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.pf-stat-val { font-size: 24px; font-weight: 600; color: var(--text); }
.pf-stat-main .pf-stat-val { font-size: 28px; }
.pf-green { color: #5dcaa5; }
.pf-electric { color: var(--usdc); }
.pf-stats-bar { display: flex; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.pf-bar-item { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.pf-bar-sep { width: 1px; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.pf-bar-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.pf-bar-val { font-size: 15px; font-weight: 500; color: #e4e4e7; }
.pf-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 16px; }
.pf-tab { padding: 10px 16px; font-size: 13px; color: #888; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pf-tab.active { color: var(--electric2, #00f0ff); border-bottom-color: var(--electric, #00f0ff); text-shadow: 0 0 8px rgba(0, 240, 255, 0.15); }
.pf-empty { text-align: center; padding: 40px 20px; color: #555; }
.pf-empty-msg { font-size: 14px; margin-bottom: 8px; color: #888; }
.pf-empty-msg a { color: var(--electric, #e6edf3); }
.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-table th { text-align: left; padding: 8px 12px; color: #888; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.pf-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #ccc; }
.pf-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 900px) {
  .pf-stats-row { grid-template-columns: repeat(2, 1fr); }
  .pf-stats-bar { flex-wrap: wrap; }
  .pf-bar-sep { display: none; }
  .pf-bar-item { flex: 1 1 45%; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
}
@media (max-width: 520px) {
  .pf-stats-row { grid-template-columns: 1fr; }
  .pf-topbar { flex-direction: column; align-items: flex-start; }
}

/* —— 3-step trading onboarding modal + market card banner —— */
.setup-trading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
.setup-trading-overlay[hidden] {
  display: none !important;
}
.setup-trading-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  background: var(--ink2, #0d0f14);
  border: 1px solid var(--border2, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}
.setup-trading-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text3, #888);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.setup-trading-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
}
.setup-trading-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 0 8px;
}
.setup-trading-step-dot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3, #888);
  flex-shrink: 0;
  background: transparent;
  box-sizing: border-box;
}
.setup-trading-step-dot:not(.active):not(.completed) {
  background: transparent;
}
.setup-trading-step-dot.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.35);
}
.setup-trading-step-dot.completed {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
  box-shadow: none;
}
.setup-trading-step-dot.completed span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.setup-trading-step-dot.completed::after {
  content: '✓';
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.setup-trading-step-line {
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}
.setup-trading-h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f4f4f5;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.setup-trading-h2--center {
  text-align: center;
  width: 100%;
}
.setup-trading-step2-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.setup-trading-fund-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.12);
  margin-bottom: 6px;
}
.setup-trading-step2-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text3, #888);
  text-align: center;
  max-width: 28rem;
}
.setup-trading-addr-labels {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.setup-trading-addr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3, #888);
  line-height: 1.3;
}
.setup-trading-addr-label--tokens {
  font-size: 9px;
  opacity: 0.95;
}
.setup-trading-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.setup-trading-title-row .setup-trading-h2 {
  margin: 0;
}
.setup-trading-pm-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(230, 237, 243, 0.12);
  color: #e6edf3;
  border: 1px solid rgba(230, 237, 243, 0.25);
}
.setup-trading-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text2, #a1a1aa);
  margin: 0 0 16px;
}
.setup-trading-err {
  font-size: 13px;
  color: #f87171;
  margin: 0 0 12px;
}
.setup-trading-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.setup-trading-btn-primary {
  background: linear-gradient(180deg, #1d9e75 0%, #15805d 100%);
  color: #fff;
}
.setup-trading-btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}
.setup-trading-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.setup-trading-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 12px;
}
.setup-trading-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text3, #888);
}
.setup-trading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #e6edf3;
  border-radius: 50%;
  animation: setupSpin 0.7s linear infinite;
}
@keyframes setupSpin {
  to {
    transform: rotate(360deg);
  }
}
.setup-trading-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3, #888);
  margin-bottom: 6px;
}
.setup-trading-address-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.setup-trading-address-row--fund {
  align-items: stretch;
}
.setup-trading-address {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  word-break: break-all;
  color: #d4d4d8;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.setup-trading-address-coral {
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.35);
}
.setup-trading-qr-icon {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text3, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
  user-select: none;
}
.setup-trading-btn-copy {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(230, 237, 243, 0.35);
  background: rgba(230, 237, 243, 0.08);
  color: #e6edf3;
  cursor: pointer;
}
.setup-trading-warn {
  margin: 14px 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
}
.setup-trading-warn-title {
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 8px;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.setup-trading-warn-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text2, #d4d4d8);
}
.setup-trading-warn-list li {
  margin-bottom: 6px;
}
.setup-trading-warn-list li:last-child {
  margin-bottom: 0;
}
.setup-trading-balances {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}
.setup-trading-balance-tile {
  flex: 1;
  min-width: 120px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
}
.setup-trading-balance-label {
  display: block;
  font-size: 11px;
  color: var(--text3, #888);
  margin-bottom: 2px;
}
.setup-trading-balance-sub {
  display: block;
  font-size: 10px;
  color: var(--text3, #888);
  margin-bottom: 6px;
  opacity: 0.9;
}
.setup-trading-balance-val {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--mono);
  color: #e4e4e7;
}
.setup-trading-btn-refresh {
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
  cursor: pointer;
  align-self: flex-end;
}
.setup-trading-hint {
  font-size: 12px;
  color: var(--text3, #888);
  margin: 0 0 12px;
}
.setup-trading-details {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text2, #a1a1aa);
}
.setup-trading-details summary {
  cursor: pointer;
  color: #e6edf3;
  font-weight: 500;
}
.setup-trading-details p {
  margin: 8px 0 0;
  line-height: 1.45;
}
.setup-trading-success {
  text-align: center;
  padding: 8px 0 0;
}
.setup-trading-success p {
  font-size: 15px;
  color: #86efac;
  margin: 0 0 8px;
}
.setup-trading-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 8px 10px;
  font-size: 12px;
  background: rgba(230, 237, 243, 0.06);
  border: 1px solid rgba(230, 237, 243, 0.2);
  border-radius: 8px;
  color: #d4d4d8;
}
.setup-trading-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 8px 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #d4d4d8;
}
.setup-trading-inline-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.setup-trading-mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
}
.setup-trading-mini-dot.active {
  background: #7c3aed;
  border-color: #7c3aed;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.45);
}
.setup-trading-mini-dot.completed {
  background: #22c55e;
  border-color: #22c55e;
}
.setup-trading-inline-label {
  flex: 1;
  min-width: 100px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text2, #a1a1aa);
}
.setup-trading-inline-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: linear-gradient(180deg, #1d9e75 0%, #15805d 100%);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.setup-trading-inline-btn:hover {
  filter: brightness(1.06);
}
.setup-trading-banner-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(230, 237, 243, 0.4);
  background: rgba(230, 237, 243, 0.12);
  color: #e6edf3;
  cursor: pointer;
}
.setup-trading-banner-btn:hover {
  background: rgba(230, 237, 243, 0.2);
}
.setup-trading-ai-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 12px 12px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 10px;
}
.setup-trading-ai-card-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
}
.setup-trading-ai-card-main {
  flex: 1;
  min-width: 140px;
}
.setup-trading-ai-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f4f4f5;
  margin-bottom: 2px;
}
.setup-trading-ai-card-sub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text3, #888);
}
.setup-trading-ai-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.55);
  background: transparent;
  color: #a78bfa;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.setup-trading-ai-card-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(167, 139, 250, 0.7);
  color: #c4b5fd;
}
.pred-detail-inner .setup-trading-ai-card {
  margin-top: 12px;
}

/* —— Market detail page (Clangster mockup colors + split layout) —— */
.market-detail-shell {
  --md-bg-page: #000000;
  --md-bg-card: var(--ink1);
  --md-bg-card-hover: var(--ink2);
  --md-bg-input: var(--ink);
  /* Sharp card edges (match global --border); avoid washed rgba-only frames */
  --md-border-subtle: var(--border);
  --md-border-hover: var(--border2);
  --md-text-primary: #e5e7eb;
  --md-text-secondary: #888888;
  --md-text-muted: #555555;
  --md-accent: var(--el, #00f0ff);
  --md-amber: #f59e0b;
  --md-green: #22c55e;
  --md-green-bg: rgba(34, 197, 94, 0.1);
  --md-red: #ef4444;
  --md-red-bg: rgba(239, 68, 68, 0.08);
  --md-chart-pm: var(--el, #00f0ff);
  --md-chart-sim: #f59e0b;
  --chart-c1: var(--green, #00ff88);
  --chart-c2: #f59e0b;
  --chart-c3: #a78bfa;
  --chart-c4: #f472b6;
  --chart-c5: #fbbf24;
  --chart-c6: #94a3b8;
}
/* overflow-x: clip on ancestors breaks position:sticky for the trade rail */
.market-detail-shell {
  overflow-x: visible;
}
.market-detail-shell .main.market-detail-main {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  background: var(--md-bg-page);
  overflow-x: visible;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Single column scroll: content lives in .md-page */
.md-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px;
  overflow-x: clip;
}
/* Sticky trade column: avoid overflow clip between scrollport (.market-detail-main) and sticky rail */
.market-detail-shell .md-page {
  overflow-x: visible;
  overflow-y: visible;
}
.md-back {
  margin: 0 0 16px;
}
.md-back-link {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--md-text-secondary);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.md-back-link:hover {
  color: var(--md-text-primary);
}
.md-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.md-col-main--sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  max-height: none;
}
.md-col-main--sections > .md-card,
.md-col-main--sections > .md-venue-section {
  margin-bottom: 0;
}
.md-venue-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.md-venue-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-text-muted);
}
.md-venue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 520px) {
  .md-venue-grid {
    grid-template-columns: 1fr;
  }
}
.md-venue-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.md-venue-card {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--md-border-subtle);
  background: var(--md-bg-card);
  padding: 16px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.md-venue-card:hover {
  border-color: var(--md-border-hover);
}
.md-venue-card--active {
  border-color: var(--md-accent);
  background: rgba(230, 237, 243, 0.06);
  box-shadow: 0 0 0 1px rgba(230, 237, 243, 0.15);
}
.md-venue-card-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.md-venue-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-text-secondary);
}
.md-venue-pct {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 700;
}
.md-venue-pct-num {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
}
.md-venue-pct--accent .md-venue-pct-num {
  color: var(--md-accent);
}
.md-venue-pct--amber .md-venue-pct-num {
  color: var(--md-amber);
}
.md-venue-yes {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-green);
}
.md-card.md-intel-card {
  padding: 0;
  overflow: hidden;
}
.md-card.md-intel-card:hover {
  transform: translateY(-1px);
}
.md-intel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--md-border-subtle);
  color: var(--md-text-muted);
  font-size: 13px;
}
.md-intel-lock {
  opacity: 0.7;
}
.md-intel-text {
  flex: 1;
  letter-spacing: 0.04em;
}
.md-intel-pro {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--md-border-subtle);
  color: var(--md-text-secondary);
}
.md-chart-section-hdr {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  .md-chart-section-hdr {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.md-chart-venue-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.md-chart-ven-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--md-border-subtle);
  background: transparent;
  color: var(--md-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.md-chart-ven-pill.on {
  border-color: var(--md-accent);
  color: var(--md-accent);
  background: rgba(230, 237, 243, 0.08);
}
.md-chart-ven-pill:hover:not(.on) {
  color: var(--md-text-secondary);
  border-color: var(--md-border-hover);
}
.md-icon-btn--link {
  text-decoration: none;
  font-size: 0.85rem;
}
.md-btn-primary-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #0a0a0a;
  background: var(--el, #00f0ff);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: none;
}
.md-btn-primary-accent:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}
.market-detail-shell .md-trade-btns .wager-copy-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 3.25rem;
  min-width: 5.5rem;
}
.market-detail-shell .md-trade-side {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
}
.market-detail-shell .md-trade-prc {
  font-size: 0.9rem;
  font-family: var(--mono);
  font-weight: 600;
  color: inherit;
}
.market-detail-shell .md-trade-preview {
  font-size: 12px;
  color: var(--md-text-secondary);
  margin: 0 0 10px;
  line-height: 1.4;
  min-height: 1.25em;
}
.md-sidebar-setup .setup-trading-inline-btn.md-btn-primary-accent,
a.md-btn-primary-accent.setup-trading-ai-card-btn {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
/* 2026-04-27 (CHRIS): purple Register-agent button — overrides cyan accent. */
a.md-ai-register-btn.md-ai-register-btn--purple,
.md-ai-register-btn.md-ai-register-btn--purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #ffffff;
  background: var(--purple);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: none;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
a.md-ai-register-btn.md-ai-register-btn--purple:hover,
.md-ai-register-btn.md-ai-register-btn--purple:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
}
@media (max-width: 1000px) {
  .md-grid {
    grid-template-columns: 1fr;
  }
  .md-col-side {
    order: -1;
  }
}
.md-header-img {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
  box-sizing: border-box;
}
.md-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
}
.md-header-main {
  flex: 1;
  min-width: 0;
}
.md-header-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}
.md-title-block {
  flex: 1;
  min-width: 0;
}
.md-src-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
  box-sizing: border-box;
}
.md-src-pm {
  background: linear-gradient(145deg, rgba(230, 237, 243, 0.35) 0%, rgba(230, 237, 243, 0.12) 100%);
  border: 1px solid rgba(230, 237, 243, 0.45);
  box-shadow: 0 4px 20px rgba(230, 237, 243, 0.12);
}
.md-src-lx {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.35) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
}
.md-src-cr {
  background: rgba(230, 237, 243, 0.12);
  border: 1px solid rgba(230, 237, 243, 0.35);
  color: #e6edf3;
}
.md-title {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #e5e7eb;
  margin: 0;
  letter-spacing: -0.02em;
  max-width: 100%;
}
.md-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
/**
 * Inline pre-game countdown chip — sits on the FAR RIGHT of the title's
 * meta row (top-right of the card next to "Lakers vs. Rockets"). Replaces
 * the legacy md-sports-pregame-banner row that used to render below the
 * header as its own section.
 */
.md-meta-countdown {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.md-meta-countdown-icon {
  color: #34d399;
  font-size: 8px;
  line-height: 1;
}
.md-meta-countdown-lbl {
  color: rgba(229, 231, 235, 0.85);
  font-weight: 500;
}
.md-meta-countdown [data-sports-pregame-cd] {
  font-variant-numeric: tabular-nums;
}
.md-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
}
.md-tag-crypto {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
}
.md-tag-stocks {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--md-border-subtle);
}
.md-tag-sports {
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.22);
}
.md-tag-politics {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.22);
}
.md-tag-other {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.08);
  border-color: rgba(156, 163, 175, 0.15);
}
.md-source-inline {
  font-size: 11px;
  color: var(--md-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.md-source-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #444;
  display: inline-block;
}
.md-title-sub {
  min-height: 1.35rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--md-text-secondary);
  font-family: var(--sans);
}
.md-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 8px;
  padding-top: 0.15rem;
}
.md-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink1);
  border: 1px solid var(--border);
  color: var(--md-text-muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: default;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.md-icon-btn:hover {
  color: var(--md-text-secondary);
  border-color: var(--border2);
  background: var(--ink2);
}
.md-card {
  background: var(--ink1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.md-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.md-prob-card {
  border: 1px solid var(--border);
  background: var(--md-bg-card);
}
.md-prob-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border2);
}
.md-prob-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.md-prob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}
.md-prob-dot.pm {
  background: var(--md-accent);
}
.md-prob-dot.cr {
  background: var(--md-accent);
}
.md-prob-says {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--md-text-secondary);
}
.md-prob-row {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.md-prob-pct {
  font-size: clamp(4rem, 10vw, 5rem);
  font-weight: 700;
  color: var(--md-accent);
  font-family: var(--mono);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.md-prob-yes {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--md-text-secondary);
  line-height: 1;
}
.md-section-hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.md-mono-hdr {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--md-text-secondary);
}
.md-chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.md-chart-src-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}
.md-legend {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text3, #888);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.md-leg-line {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  vertical-align: middle;
}
.md-leg-line.pm {
  background: var(--md-chart-pm);
}
.md-leg-line.sim {
  background: var(--md-chart-sim);
}
.md-pills {
  display: flex;
  gap: 0.35rem;
}
.md-pill {
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--md-border-subtle);
  background: transparent;
  color: var(--md-text-muted);
  cursor: default;
}
.md-pill.on {
  border-color: var(--md-border-hover);
  color: var(--md-text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.md-refresh {
  background: transparent;
  border: none;
  color: var(--text3, #888);
  cursor: pointer;
  font-size: 0.85rem;
}
.md-chart-card .md-section-hdr {
  margin-bottom: 0.85rem;
}

/* Sports live scoreboard header (above chart on sports market-detail) */
.md-sports-live-card {
  margin-bottom: 0.75rem;
  padding: 14px 16px;
}
.md-sports-live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.md-sports-live-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.md-sports-live-team--away { justify-content: flex-start; }
.md-sports-live-team--home { justify-content: flex-end; }
.md-sports-live-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.14);
}
/* Real ESPN-CDN team logo image variant; transparent background so the PNG sits on the card. */
.md-sports-live-logo.md-sports-live-logo--img {
  background: transparent !important;
  border: none;
  text-shadow: none;
  object-fit: contain;
  padding: 2px;
}
.md-sports-live-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--md-text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.md-sports-live-score {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 22px;
  color: var(--md-text-primary, #fff);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.md-sports-live-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 72px;
}
.md-sports-live-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a6068;
}
.md-sports-live-status--in {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
  animation: mdSportsLivePulse 1.6s ease-in-out infinite;
}
.md-sports-live-status--post { background: #9ca3af; }
@keyframes mdSportsLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.md-sports-live-period {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--md-text-primary, #fff);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.md-sports-live-league {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--md-text-muted, #888);
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .md-sports-live-card { padding: 12px; }
  .md-sports-live-name { font-size: 12px; }
  .md-sports-live-score { font-size: 18px; }
  .md-sports-live-logo { width: 28px; height: 28px; font-size: 11px; }
}

/* Sports pre-game countdown banner ("Starts in 54m 47s") */
.md-sports-pregame-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--md-text-primary, #fff);
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 8px;
}
.md-sports-pregame-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
.md-sports-pregame-lbl {
  text-transform: uppercase;
  color: var(--md-text-muted, #888);
}
.md-sports-pregame-cd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #22c55e;
}

/* Sports tabs strip under chart (Game Lines / 1st Half / Points / etc.) */
.md-sports-tabs-card {
  margin-top: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
}
.md-sports-tab-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  scrollbar-width: none;
}
.md-sports-tab-strip::-webkit-scrollbar { display: none; }
.md-sports-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: var(--mono, inherit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--md-text-muted, #888);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.md-sports-tab:hover:not(:disabled) {
  color: var(--md-text-primary, #fff);
  background: rgba(255, 255, 255, 0.04);
}
.md-sports-tab.on {
  color: var(--md-text-primary, #fff);
  background: rgba(255, 255, 255, 0.08);
}
.md-sports-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* End-of-line % label pills overlay (Polymarket parity) */
.md-chart-eol-labels {
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 3;
}
.md-chart-eol-pill {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 18px;
  padding: 0 6px;
  font-family: var(--mono, inherit);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid currentColor;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: top 180ms ease;
}
.md-chart-wrap {
  min-height: 220px;
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.md-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--md-text-muted);
  opacity: 0.9;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.25);
}
/* Chart loading spinner — shown while price-history is fetching, including
 * the cold-cache / no-data-yet case for multi-outcome charts. Replaces
 * skeleton bars (which look static) with a clear "live loading" indicator.
 * Falls through to .md-chart-loading text after a 10s timeout if data
 * never arrives. */
.md-chart-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  background: transparent;
}
.md-chart-spinner[hidden] {
  display: none;
}
.md-chart-spinner-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--chart-c1, #00ff88);
  animation: md-chart-spinner-rot 0.9s linear infinite;
}
@keyframes md-chart-spinner-rot {
  to {
    transform: rotate(360deg);
  }
}
.md-chart-host {
  width: 100%;
}
.md-chart-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.md-chart-interval-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  width: 100%;
}
.md-chart-interval-pill {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--md-border-subtle);
  background: transparent;
  color: var(--md-text-muted);
  cursor: pointer;
}
.md-chart-interval-pill.on {
  border-color: var(--chart-c1);
  color: var(--chart-c1);
  background: rgba(0, 255, 136, 0.08);
}
.md-chart-legend-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.md-chart-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--md-text-secondary);
  cursor: pointer;
}
.md-chart-legend-swatch {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.md-chart-legend-txt {
  max-width: min(180px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-chart-skeleton {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  /* Overlay the canvas instead of stacking before it. Previously this was
   * position:relative with height:220px, which made the canvas (a static
   * sibling) start at y=220 — fine when display:none on the skeleton, but
   * brittle: any path that left the skeleton in the DOM would push the
   * canvas below the wrap's overflow:hidden box, leaving the skeleton's
   * dark left/right padding region (the bars are centered) exposed as a
   * "dark left column" over what users perceive as the chart canvas.
   * Absolute positioning eliminates the layout interaction entirely. */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.md-chart-skel-bar {
  width: 12%;
  max-width: 48px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border-radius: 4px;
  animation: md-chart-skel-pulse 1.1s ease-in-out infinite;
}
.md-chart-skel-bar--2 {
  height: 65%;
  animation-delay: 0.1s;
}
.md-chart-skel-bar--3 {
  height: 50%;
  animation-delay: 0.2s;
}
.md-chart-skel-bar--4 {
  height: 78%;
  animation-delay: 0.15s;
}
.md-chart-skel-bar--5 {
  height: 35%;
  animation-delay: 0.05s;
}
@keyframes md-chart-skel-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.md-price-canvas {
  display: block;
  /* Pin the canvas to fill the wrap. With the skeleton now absolute-positioned
   * (see .md-chart-skeleton above), the canvas is the only flow child of
   * .md-chart-wrap; explicitly sizing it to the wrap prevents Chart.js
   * (responsive:true, maintainAspectRatio:false) from briefly measuring the
   * parent at 0px tall on first paint and rendering a half-height canvas. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.md-resolve-hdr {
  gap: 0.35rem;
}
.md-info {
  color: var(--text3, #888);
  font-size: 0.85rem;
}
.md-resolve-when {
  font-size: 0.85rem;
  color: var(--text2, #a1a1aa);
  margin: 0 0 0.75rem;
}
.md-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #d4d4d8;
  white-space: pre-wrap;
}
.md-desc-clamp {
  max-height: 4.6em;
  overflow: hidden;
}
.md-desc-open {
  max-height: none;
}
.md-show-more {
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: var(--md-accent);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--mono);
}
.md-analytics-card {
  overflow: visible;
  max-height: none;
}
.md-analytics-card #mdPanelAnalytics {
  overflow: visible;
  max-height: none;
}
.md-an-tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1rem;
}
.md-an-tab {
  background: none;
  border: none;
  color: var(--text3, #888);
  font-size: 0.85rem;
  padding: 0.35rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.md-an-tab.on {
  color: var(--md-accent);
  border-bottom-color: var(--md-accent);
}
.md-an-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--text2, #a1a1aa);
}
.md-vol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 520px) {
  .md-vol-grid {
    grid-template-columns: 1fr;
  }
}
.md-vol-tile {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.65rem;
}
.md-vol-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3, #888);
  margin-bottom: 0.35rem;
}
.md-vol-val {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: #fafafa;
}
.md-vol-sub {
  font-size: 0.7rem;
  color: var(--text3, #888);
  margin-top: 0.25rem;
}
.md-bias {
  margin-bottom: 1.5rem;
}
.md-bias-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fafafa;
  margin-bottom: 0.35rem;
}
.md-bias-bar {
  display: flex;
  width: 100%;
  min-height: 2rem;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--mono);
}
.md-bias-yes {
  background: #22c55e;
  color: #052e16;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.md-bias-no {
  background: var(--md-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.md-bias-foot {
  font-size: 0.7rem;
  color: var(--text3, #888);
  margin: 0.35rem 0 0;
}
.md-certainty {
  margin-bottom: 1.5rem;
}
.md-certainty-hdr {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
  color: var(--text2, #a1a1aa);
}
.md-certainty-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.md-certainty-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #22c55e 100%);
  min-width: 2px;
  max-width: 100%;
}
.md-certainty-lbl {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text3, #888);
  margin-top: 0.25rem;
}
.md-momentum {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}
.md-mom-val {
  color: var(--text3, #888);
  font-family: var(--mono);
}
.md-details {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text2, #a1a1aa);
}
.md-details summary {
  cursor: pointer;
  color: var(--md-accent);
}
.md-dist {
  margin-bottom: 1.5rem;
}
.md-dist-title {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--text2, #a1a1aa);
}
.md-dist .md-muted {
  margin: 0;
}
.md-dist-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
  color: var(--text3, #888);
}
.md-dist-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.md-dist-bar i {
  display: block;
  height: 100%;
  background: var(--md-accent);
  border-radius: 3px;
}
.md-unique-val {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fafafa;
}
.md-unique-sub {
  font-size: 0.7rem;
  color: var(--text3, #888);
}
.md-footer-ts {
  font-size: 0.7rem;
  color: var(--text3, #666);
  margin: 1rem 0 0;
}
.md-muted {
  color: var(--text3, #888);
  font-size: 0.85rem;
  line-height: 1.45;
  font-family: var(--sans);
}
.md-analytics-cred {
  font-family: var(--sans);
}
.md-col-side {
  position: relative;
}
.md-side-sticky {
  position: static;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.market-detail-shell .md-col-side {
  align-self: stretch;
}
.market-detail-shell .md-side-sticky {
  position: sticky;
  /* Scrollport is .market-detail-main (already below header); offset is padding into main, not --hdr-h */
  top: 12px;
  align-self: flex-start;
  max-height: calc(100vh - var(--hdr-h) - 24px);
  overflow-y: auto;
  overflow-x: visible;
}
.market-detail-shell .md-side-tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.market-detail-shell .md-side-tabs-row .md-side-tabs {
  flex: 1;
  min-width: 0;
}
.market-detail-shell .md-trade-chat-inline-btn {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--ink1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.market-detail-shell .md-trade-chat-inline-btn:hover {
  background: var(--ink2);
  border-color: var(--border2);
}
.market-detail-shell .md-trade-chat-inline-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.market-detail-shell .md-trade-chat-inline-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  box-sizing: border-box;
}
.market-detail-shell .md-trade-chat-inline-badge:empty,
.market-detail-shell .md-trade-chat-inline-badge[style*="display: none"],
.market-detail-shell .md-trade-chat-inline-badge[style*="display:none"] {
  display: none !important;
}
.md-rail-outcome-head .md-trade-chat-inline-btn {
  margin-left: auto;
}
/* Floating chat button is shown on market pages like everywhere else. */
.md-side-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--ink1);
  border: 1px solid var(--border);
}
.md-side-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.md-side-tab.on {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--electric2, #00f0ff);
  background: var(--ink2);
}
.md-side-tab:not(.on):hover {
  color: var(--text);
}
.md-side-tab-ico {
  font-size: 0.88rem;
  opacity: 0.95;
  line-height: 1;
  font-weight: 600;
}
.md-side-tab-ico--list {
  font-size: 0.8rem;
  letter-spacing: 0;
}
.md-side-panel {
  background: var(--ink1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.md-pos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1rem 0.5rem;
}
.md-pos-empty-msg {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text2, #a1a1aa);
}
.md-pos-portfolio-link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--md-accent);
  text-decoration: none;
}
.md-pos-portfolio-link:hover {
  filter: brightness(1.1);
  text-decoration: underline;
}
a.md-pos-place-trade-link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text3, #71717a);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
a.md-pos-place-trade-link:hover {
  color: var(--text2, #a1a1aa);
  text-decoration: underline;
}
.md-pos-list--summary {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}
.md-pos-item--block {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.md-pos-item--block:last-child {
  border-bottom: none;
}
.md-pos-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.md-pos-primary {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  color: #e4e4e7;
  font-family: var(--mono);
}
.md-pos-value {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text3, #888);
  font-family: var(--sans);
}
.md-site-footer {
  margin-top: 2rem;
  padding: 1.25rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text3, #71717a);
}
.md-site-footer-copy {
  color: var(--text3, #71717a);
}
.md-site-footer-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.md-site-footer-nav a {
  color: var(--text3, #a1a1aa);
  text-decoration: none;
}
.md-site-footer-nav a:hover {
  color: #e4e4e7;
  text-decoration: underline;
}
.md-site-footer-sep {
  opacity: 0.45;
  user-select: none;
}
.md-trade-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--md-accent);
  margin-bottom: 0.85rem;
  font-weight: 600;
}
.md-trade-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.35rem 1.1rem;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}
.md-trade-guest-ico {
  font-size: 1.85rem;
  line-height: 1;
  opacity: 0.92;
}
.md-trade-guest-msg {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text2, #a1a1aa);
  line-height: 1.45;
}
.md-login-btn {
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--ink2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  max-width: 240px;
  box-sizing: border-box;
}
.md-login-btn:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: var(--ink3);
}
.setup-trading-inline.md-sidebar-setup {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}
.md-setup-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.md-setup-stepof {
  font-size: 0.7rem;
  color: var(--text3, #888);
}
.md-sidebar-setup .setup-trading-inline-btn {
  width: 100%;
  justify-content: center;
}
.md-trade-form {
  margin-bottom: 0.75rem;
}
.md-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3, #888);
  margin-bottom: 0.35rem;
}
.md-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--md-border-subtle);
  background: var(--md-bg-input);
  color: var(--md-text-primary);
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 0.65rem;
}
.md-input:focus {
  outline: none;
  border-color: rgba(230, 237, 243, 0.3);
  box-shadow: 0 0 0 3px rgba(230, 237, 243, 0.06);
}
.md-trade-btns {
  display: flex;
  gap: 8px;
}
.md-trade-btns .btn-yes,
.md-trade-btns .btn-no {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--sans);
  text-align: center;
  box-sizing: border-box;
  border: none;
  transition: all 0.18s ease;
}
.md-trade-btns .btn-yes {
  background: var(--md-green-bg);
  color: var(--md-green);
}
.md-trade-btns .btn-yes:hover {
  background: var(--md-green);
  color: #fff;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}
.md-trade-btns .btn-no {
  background: var(--md-red-bg);
  color: var(--md-red);
}
.md-trade-btns .btn-no:hover {
  background: var(--md-red);
  color: #fff;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
.md-trade-btns .btn-yes .md-trade-side,
.md-trade-btns .btn-yes .md-trade-prc {
  color: var(--md-green) !important;
}
.md-trade-btns .btn-no .md-trade-side,
.md-trade-btns .btn-no .md-trade-prc {
  color: var(--md-red) !important;
}
.md-trade-btns .btn-yes:hover .md-trade-side,
.md-trade-btns .btn-yes:hover .md-trade-prc {
  color: #fff !important;
}
.md-trade-btns .btn-no:hover .md-trade-side,
.md-trade-btns .btn-no:hover .md-trade-prc {
  color: #fff !important;
}
.md-trade-hint {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
}
.md-ai-card {
  margin-top: 0.5rem;
}
.md-ai-connect-card.setup-trading-ai-card {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 1rem 0 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--md-border-subtle);
  background: var(--md-bg-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.md-ai-connect-card.setup-trading-ai-card:hover {
  border-color: var(--md-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.md-ai-connect-card .setup-trading-ai-card-icon {
  font-size: 1.5rem;
  align-self: flex-start;
}
.md-ai-connect-card .setup-trading-ai-card-main {
  flex: none;
}
.md-ai-connect-card .setup-trading-ai-card-title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.md-ai-connect-card .setup-trading-ai-card-sub {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text3, #888);
  line-height: 1.45;
}
.md-pos-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.md-pos-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.md-pos-side.yes {
  color: #86efac;
}
.md-pos-side.no {
  color: #f9a8d4;
}
.md-pos-sell-btn {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #f87171;
  background: transparent;
  color: #fca5a5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.md-pos-sell-btn:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}
.md-trades-placeholder {
  padding: 1rem 0;
}

/* Event detail: multi-outcome list */
.market-detail-shell .md-outcomes-list {
  gap: 0;
}
.md-outcomes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.md-outcomes-card--scroll .md-outcomes-section-hdr {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  background: var(--md-bg-card, rgba(12, 12, 14, 0.96));
  box-shadow: 0 1px 0 var(--md-border-subtle, rgba(255, 255, 255, 0.08));
}
.md-outcomes-card--scroll .md-outcomes-scroll {
  --outcome-row-h: 40px;
  max-height: min(400px, calc(10 * var(--outcome-row-h, 40px)));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  margin-right: -2px;
  /* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
.md-outcomes-card--scroll .md-outcomes-scroll::-webkit-scrollbar {
  width: 0;
  display: none;
}
.md-outcomes-card--scroll .md-outcomes-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.md-outcomes-card--scroll .md-outcomes-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}
.md-outcomes-card--scroll .md-outcomes-scroll::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
.md-outcome-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}
.market-detail-shell .md-outcomes-card .md-outcome-title {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--md-text-primary, #e5e7eb);
}
.md-event-trade-hint {
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

/* Market detail: Polymarket-style right-rail trade panel (multi-outcome) */
.md-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.md-rail-trade-panel {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}
.md-rail-outcome-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.md-rail-outcome-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.md-rail-outcome-img--empty {
  display: none;
}
.md-rail-outcome-picker {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #fafafa);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.md-rail-outcome-picker:hover {
  background: rgba(255, 255, 255, 0.1);
}
.md-rail-outcome-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-rail-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  font-size: 0.7rem;
}
.md-rail-outcome-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141418;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.md-rail-trade-panel .md-rail-outcome-head {
  position: relative;
}

/* Single binary market: tabs row first, then title row (no outcome picker) */
.md-rail-trade-panel--binary {
  padding-top: 1.1rem;
}
.md-rail-binary-hdr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  min-height: 2rem;
}
.md-rail-binary-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.md-rail-binary-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #fafafa);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.md-rail-trade-panel--binary .md-rail-tabs-row {
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.md-rail-outcome-option {
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--text2, #e4e4e7);
}
.md-rail-outcome-option:hover,
.md-rail-outcome-option:focus {
  background: rgba(255, 255, 255, 0.08);
}
.md-rail-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.md-rail-buy-sell {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.md-rail-seg {
  padding: 0.45rem 1rem;
  border: none;
  background: transparent;
  color: var(--text3, #a1a1aa);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.md-rail-seg.on {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.md-rail-order-wrap {
  flex-shrink: 0;
}
.md-rail-order-select {
  padding: 0.45rem 1.6rem 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text2, #e4e4e7);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2394a3b8' d='M2 3.5L5 7l3-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
}
.md-rail-yesno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.md-rail-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.85rem 0.5rem;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-rail-pill-yes {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}
.md-rail-pill-yes.on {
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
}
.md-rail-pill-no {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.md-rail-pill-no.on {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}
.md-rail-pill-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.md-rail-pill-prc {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--mono);
}
.md-rail-amount-block {
  margin-bottom: 0.85rem;
}
.md-rail-amount-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}
.md-rail-amt-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3, #a1a1aa);
}
.md-rail-balance-line {
  font-size: 0.72rem;
  color: var(--text3, #71717a);
}
.md-rail-balance-val {
  color: var(--text3, #71717a);
}
.md-rail-amt-input-wrap {
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.45);
  padding: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
}
.md-rail-dollar {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text3, #888);
  margin-right: 0.25rem;
}
.md-rail-amt-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: right;
  font-family: var(--mono);
  outline: none;
}
.md-rail-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.md-rail-quick {
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text2, #d4d4d8);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.md-rail-quick:hover {
  background: rgba(255, 255, 255, 0.1);
}
a.md-rail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
}
.md-rail-confirm {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 0.65rem;
}
.md-mode-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--bg2, rgba(255, 255, 255, 0.05));
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.md-mode-btn {
  background: transparent;
  border: 0;
  color: var(--text2, #a1a1aa);
  font: inherit;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.md-mode-btn.is-active {
  background: var(--bg1, rgba(255, 255, 255, 0.08));
  color: var(--text1, #fafafa);
}
.md-mode-paper.is-active {
  color: var(--accent, #4ade80);
}
.md-mode-hint {
  font-size: 11px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.md-rail-terms {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--text3, #71717a);
  text-align: center;
}
.md-rail-terms a {
  color: var(--text3, #a1a1aa);
}
.md-outcome-row {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  transition: background 0.15s ease;
}
.md-outcome-row:last-child {
  border-bottom: none;
}
.md-outcome-row:hover {
  background: rgba(0, 229, 255, 0.04);
}
.md-outcome-row.is-active {
  background: rgba(0, 240, 255, 0.07);
  box-shadow: inset 3px 0 0 0 rgba(0, 240, 255, 0.65);
}
.md-outcome-row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 2px 0;
  box-sizing: border-box;
}
.md-outcome-row-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
}
.md-outcome-row-body:hover {
  background: transparent;
}
.md-outcome-row-body:focus {
  outline: 2px solid rgba(0, 240, 255, 0.45);
  outline-offset: 2px;
}
.md-outcome-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.market-detail-shell .md-outcome-thumb--sm {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.md-outcome-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.md-outcome-row .md-outcome-row-head {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.md-outcome-vol {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text3, #71717a);
  font-variant-numeric: tabular-nums;
}
.md-outcome-row .md-outcome-trade-btns,
.md-outcome-row-actions.md-outcome-trade-btns {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .wager-copy-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 32px;
  height: 32px;
  min-width: 80px;
  width: 80px;
  max-width: 88px;
  padding: 0 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  border-radius: 8px;
  line-height: 1.1;
  white-space: nowrap;
  box-sizing: border-box;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.market-detail-shell .md-outcome-row:hover .md-outcome-row-actions .wager-copy-btn {
  transform: scale(1.02);
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .wager-copy-btn .md-trade-prc {
  font-size: 12px;
  margin: 0;
  font-weight: 700;
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .btn-yes .md-outcome-pill-lbl {
  color: inherit;
  font-weight: 700;
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .btn-no .md-outcome-pill-lbl {
  color: inherit;
  font-weight: 700;
}
/* Compact row: green YES / red NO — match canonical prediction-card buttons */
.market-detail-shell .md-outcome-row .md-outcome-row-actions .btn-yes {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.45);
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .btn-yes:hover {
  background: rgba(34, 197, 94, 0.22);
  filter: brightness(1.05);
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .btn-no {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.market-detail-shell .md-outcome-row .md-outcome-row-actions .btn-no:hover {
  background: rgba(239, 68, 68, 0.18);
  filter: brightness(1.05);
}
.md-event-pos-sec {
  margin-bottom: 1.25rem;
}
.md-event-pos-sec-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a1a1aa;
  margin: 0 0 0.5rem;
}

/* Browser wallet pill (EOA) + global deposit / withdraw modals */
.hdr-browser-wallet-pill {
  flex-shrink: 0;
}
button.hdr-deposit-btn {
  font: inherit;
  cursor: pointer;
}
.m-drawer-browser-wallet {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}
.tgdm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.tgdm-box {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px 20px;
}
.tgdm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tgdm-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.tgdm-x {
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.tgdm-sub {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.45;
  margin: 0 0 12px;
}
.tgdm-section {
  margin-bottom: 12px;
}
.tgdm-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  margin-bottom: 6px;
}
.tgdm-muted {
  font-size: 12px;
  color: var(--text2);
  margin: 0 0 8px;
}
.tgdm-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.tgdm-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--ink);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}
.tgdm-select {
  flex: none;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%), linear-gradient(135deg, var(--text3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.tgdm-btn-primary {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
}
.tgdm-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.twdm-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: twdm-spin 0.8s linear infinite;
}
@keyframes twdm-spin {
  to { transform: rotate(360deg); }
}
.tgdm-btn-secondary {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--ink3);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.tgdm-btn-ghost {
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
}
.tgdm-full {
  width: 100%;
}
.tgdm-hr {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 14px 0;
}
.tgdm-addr {
  word-break: break-all;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--electric2);
  margin-bottom: 8px;
}
.tgdm-qr {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.tgdm-qr img {
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
.tgdm-foot {
  margin-top: 12px;
  text-align: center;
}
.tgdm-note {
  font-size: 11px;
  color: var(--text3);
  margin: 6px 0 0;
}
.wal-th-actions {
  vertical-align: middle;
}
.wal-act-retry-slot {
  margin-top: 6px;
}


/* —— Homepage hero v2 (HERO_V2=1) — demo-aligned, scoped to predictions panel —— */
@keyframes heroV2Pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes heroV2TickUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
#panel-predictions .hero-v2.hero-v2-shell {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
  width: 100%;
}
#panel-predictions .g-content.pred-global-mkts > #predQuickSparseHint {
  margin-left: 12px;
  margin-right: 12px;
}
#panel-predictions .hero-v2 .hero-v2-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px) {
  #panel-predictions .hero-v2 .hero-v2-main-grid {
    grid-template-columns: 1fr;
  }
}
/* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md.
   Mid-desktop breakpoints — rail stacks earlier so the chart column never compresses below
   the threshold where Chart.js right-axis labels + 1M/MAX pills can render side-by-side. */
@media (max-width: 1199px) {
  #panel-predictions .hero-v2 .hero-v2-main-grid {
    grid-template-columns: 1fr;          /* rail stacks below carousel */
  }
  #panel-predictions .hero-v2 .rail {
    height: auto; min-height: 0;
  }
}
@media (min-width: 1200px) and (max-width: 1479px) {
  #panel-predictions .hero-v2 .hero-v2-main-grid {
    grid-template-columns: 1fr 300px;    /* shave 40px off rail */
    gap: 12px;
  }
}
#panel-predictions .hero-v2 .hero-v2-carousel-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}
#panel-predictions .hero-v2 .hero-v2-viewport {
  overflow: hidden;
  width: 100%;
  border-radius: 14px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#panel-predictions .hero-v2 .hero-v2-track {
  display: flex;
  transition: transform 400ms ease;
  will-change: transform;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
#panel-predictions .hero-v2 .hero-v2-slide {
  flex: 0 0 100%;
  min-width: 0;
  /* PM-LOOP-14 (2026-05-03) Fix A: clamp slide to viewport width.
     The hero carousel JS (terminal/public/js/hero-v2-carousel.js, owned by
     PM-LOOP-13 in this loop) sets inline styles
       `width: <viewport.getBoundingClientRect().width>px; min-width: same;`
     on each slide. With body { zoom: 1.1 } in effect, that bounding rect width
     is in zoomed viewport pixels, so the value (e.g. 1070px on a 973px-logical
     viewport) is interpreted as logical CSS pixels and the slide ends up 10%
     wider than the viewport. The viewport has overflow:hidden, so the right
     edge of the card clips: countdown "ENDS IN 4:29" → "ENDS I", Y-axis labels
     truncated. !important here overrides the JS inline width so the slide
     honors its parent track width regardless of zoom. See
     agents/REPORTS/2026-05-03-chart-countdown-audit.md and
     agents/SPRINTS/2026-05-03-S14-hero-card-overflow.md. */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-basis: 100% !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
#panel-predictions .hero-v2 .hero-v2-slide-feat {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#panel-predictions .hero-v2 .hero-v2-slide-feat > .feat {
  flex: 1 1 auto;
  min-height: 0;
}
#panel-predictions .hero-v2 .hero-v2-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 8px;
  margin-top: -38px;
  position: relative;
  z-index: 3;
  pointer-events: none;
}
#panel-predictions .hero-v2 .hero-v2-nav > * {
  pointer-events: auto;
}
#panel-predictions .hero-v2 .hero-v2-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
#panel-predictions .hero-v2 .hero-v2-dot {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  border: none;
  padding: 0;
  background: var(--ink4);
  cursor: pointer;
}
#panel-predictions .hero-v2 .hero-v2-dot.active {
  background: var(--el);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.45);
}
#panel-predictions .hero-v2 .hero-v2-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--ink1);
  color: var(--text2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#panel-predictions .hero-v2 .hero-v2-arrow:hover {
  color: var(--el);
  border-color: rgba(0, 240, 255, 0.35);
}

/* Feature cards (.feat) */
#panel-predictions .hero-v2 .feat {
  background: var(--ink1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
}
#panel-predictions .hero-v2 .feat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--electric) 50%, transparent);
  opacity: 0.5;
}
#panel-predictions .hero-v2 .feat-banner {
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
  max-height: none;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink1);
  border: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  align-self: flex-start;
}
#panel-predictions .hero-v2 .feat-banner--gradient {
  background: linear-gradient(128deg, rgba(0, 240, 255, 0.14), rgba(124, 58, 237, 0.18) 45%, rgba(0, 240, 255, 0.06));
}
#panel-predictions .hero-v2 .feat-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#panel-predictions .hero-v2 .feat-top--after-banner,
#panel-predictions .hero-v2 .mo-top--after-banner {
  margin-bottom: 14px;
}
@keyframes heroV2Shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
#panel-predictions .hero-v2.hero-v2--loading .hero-v2-sk {
  background: linear-gradient(
    90deg,
    var(--ink2) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    var(--ink2) 100%
  );
  background-size: 200% 100%;
  animation: heroV2Shimmer 1.1s ease-in-out infinite;
  border-radius: 8px;
}
#panel-predictions .hero-v2 .hero-v2-viewport--skeleton {
  min-height: 260px;
}
#panel-predictions .hero-v2 .hero-v2-track--skeleton {
  display: flex;
  width: 100%;
}
#panel-predictions .hero-v2 .hero-v2-track--skeleton .hero-v2-slide--skeleton {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
}
#panel-predictions .hero-v2 .hero-v2-skeleton-card {
  padding: 22px;
  min-height: 240px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.03), transparent 50%), var(--ink1);
  border: 1px solid var(--border);
  border-radius: 14px;
}
#panel-predictions .hero-v2 .hero-v2-sk-banner {
  height: 120px;
  margin: -22px -22px 16px -22px;
  width: calc(100% + 44px);
  border-radius: 14px 14px 0 0;
}
#panel-predictions .hero-v2 .hero-v2-sk-line {
  height: 12px;
  margin-bottom: 10px;
}
#panel-predictions .hero-v2 .hero-v2-sk-line--lg {
  width: 72%;
  height: 16px;
}
#panel-predictions .hero-v2 .hero-v2-sk-line--sm {
  width: 40%;
  margin-bottom: 16px;
}
#panel-predictions .hero-v2 .hero-v2-sk-block {
  height: 100px;
  margin-top: 8px;
}
#panel-predictions .hero-v2 .hero-v2-nav--skeleton {
  justify-content: center;
  gap: 8px;
  padding: 8px;
}
#panel-predictions .hero-v2 .hero-v2-sk-dot {
  width: 20px;
  height: 3px;
  display: inline-block;
}
#panel-predictions .hero-v2 .rail.hero-v2-rail-skeleton {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ink1);
  min-height: 200px;
}
#panel-predictions .hero-v2 .hero-v2-sk-rail-h {
  height: 14px;
  width: 55%;
  margin-bottom: 16px;
}
#panel-predictions .hero-v2 .hero-v2-sk-rail-row {
  height: 36px;
  margin-bottom: 10px;
}
#panel-predictions .hero-v2 .feat-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  min-width: 0;
}
#panel-predictions .hero-v2 .feat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .feat-icon-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .feat-title-wrap {
  flex: 1;
  min-width: 0;
}
#panel-predictions .hero-v2 .feat-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
#panel-predictions .hero-v2 .feat-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--electric-dim);
  color: var(--electric);
  border: 1px solid rgba(0, 240, 255, 0.3);
}
#panel-predictions .hero-v2 .feat-cat {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: auto;
  /* BUG D FIX (2026-04-25): allow the crumb tag list to wrap onto a SECOND
     line and take the full row when it cannot fit beside the badge. The
     previous rule used `flex-shrink:1` + `text-align:right` which caused
     long tags ("WEATHER · RECURRING · HIGH TEMPERATURE...") to render
     truncated as "WEATHER · RECURRING · H..." against the card's right
     edge — the parent's overflow:hidden swallowed the rest. With
     `flex-basis:100%` + `text-align:left` + `margin:4px 0 0` the tag list
     wraps below the Featured badge with full card-width to breathe. */
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
  flex: 1 1 100%;
  flex-basis: 100%;
  margin-left: 0;
  margin-top: 4px;
  text-align: left;
  max-width: 100%;
}
#panel-predictions .hero-v2 .feat-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}
#panel-predictions .hero-v2 .feat-v2 {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  /* S16 (2026-04-29): row 2 was `1fr` which stretched the body to fill any
     extra slide height inherited from the tallest sibling — causing a huge
     empty middle on multi-outcome / binary cards once `align-items:center`
     centered the body inside the stretched cell. `auto auto auto` packs
     each row to its natural content. */
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 10px;
  padding: 16px 18px 10px;
  align-items: start;
}
#panel-predictions .hero-v2 .feat-v2 > .feat-banner {
  grid-column: 1;
  grid-row: 1;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  align-self: center;
}
#panel-predictions .hero-v2 .feat-v2 > .feat-top,
#panel-predictions .hero-v2 .feat-v2 > .mo-top {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: center;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#panel-predictions .hero-v2 .feat-v2 > .feat-body,
#panel-predictions .hero-v2 .feat-v2 > .mo-grid {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 4px;
  min-width: 0;
}
#panel-predictions .hero-v2 .feat-v2 > .feat-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  z-index: 1;
}
#panel-predictions .hero-v2 .feat-top--after-banner,
#panel-predictions .hero-v2 .mo-top--after-banner { margin-bottom: 0; }
#panel-predictions .hero-v2 .feat-body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 24px;
  margin-top: 6px;
  /* S16 (2026-04-29): keep stretch so col-left grows to match chart
     height in col-right. yn-row inside col-left has flex:1 + align-stretch
     so the YES/NO buttons grow tall enough to fill the column instead of
     leaving empty space under them. */
  align-items: stretch;
}
@media (max-width: 860px) {
  #panel-predictions .hero-v2 .feat-body {
    grid-template-columns: 1fr;
  }
}
#panel-predictions .hero-v2 .feat-col-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* S16 (2026-04-29): col-left fills its parent column's height on the
     binary card (chart-tall on the right is 220–280); without stretch
     the buttons sit at the top with empty space below. The yn-row child
     gets flex:1 below so the buttons grow to fill the column. */
  justify-content: flex-start;
  align-self: stretch;
}
#panel-predictions .hero-v2 .feat-col-right {
  display: flex;
  min-width: 0;
  align-items: stretch;
  flex-direction: column;
}
#panel-predictions .hero-v2 .feat-prob-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
#panel-predictions .hero-v2 .feat-v2 .feat-prob-num {
  font-family: var(--pixel);
  font-size: 48px;
  line-height: 1;
  color: var(--electric);
  letter-spacing: 0.02em;
}
#panel-predictions .hero-v2 .feat-prob-lbl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#panel-predictions .hero-v2 .feat-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  width: max-content;
}
#panel-predictions .hero-v2 .feat-move.down {
  background: var(--red-dim);
  color: var(--red);
}
#panel-predictions .hero-v2 .feat-move.up {
  background: var(--green-dim);
  color: var(--green);
}
#panel-predictions .hero-v2 .feat-yn-row {
  display: flex;
  gap: 8px;
  /* S16 (2026-04-29): yn-row grows inside col-left to fill remaining
     vertical space, matching the chart height in col-right. align-stretch
     on the buttons makes them tall instead of pinned to a tiny line. */
  flex: 1 1 auto;
  align-items: stretch;
}
#panel-predictions .hero-v2 .feat-yn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--ink2);
  color: var(--text);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: all 0.14s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
}
#panel-predictions .hero-v2 .feat-yn .lbl {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
#panel-predictions .hero-v2 .feat-yn.yes:hover {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
#panel-predictions .hero-v2 .feat-yn.no:hover {
  background: var(--red-dim);
  border-color: var(--red);
  color: var(--red);
}
#panel-predictions .hero-v2 .feat-chart-wrap {
  position: relative;
  height: 120px;
  background: var(--ink);
  border-radius: 8px;
  border: 1px solid var(--border);
  /* BUG C FIX (2026-04-25): cap width to parent so a wide card body grid never
     pushes the chart past the card's right edge (was clipping pills + Y-axis
     labels behind .feat overflow:hidden). min-width:0 lets the wrapper shrink
     inside its grid column without forcing the layout to expand. */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* `clip` instead of `hidden` so descendant tooltip + axis labels can paint
     up to the rounded border without the canvas pixels bleeding past it.
     This is the difference between the "%" Y-axis labels rendering at all
     vs. being cut clean off — Chart.js draws labels INSIDE the canvas
     padding, which now exists (right:12 in market-detail-chart.js heroStyle). */
  overflow: hidden;
}
/* Hero chart sizing: enough room for axes + legend without dominating the
   viewport. The canvas fills via flex:1; min-height keeps the chart visible
   when adjacent stat blocks are short, max-height caps runaway growth on
   tall viewports so the container can't outpace the canvas. */
#panel-predictions .hero-v2 .feat-chart-wrap.feat-chart-tall {
  width: 100%;
  height: auto;
  /* S16/S17 (2026-04-29): chart shrank to 220–280 (was 320/360). S17 reserves
     32px at the top for interval pills — canvas + svg fallback start below
     that strip via the override rules below, so pills no longer cover Y-axis
     labels at the right. Effective canvas area ≈ 220–250px. */
  min-height: 252px;
  max-height: 312px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* S20 (2026-04-29): scope the 14px right gutter to feat-chart-tall ONLY so
     it doesn't touch the updown card's chart wrap (which has its own SVG
     overlay at full width). Was previously on the general .feat-chart-wrap
     rule and was breaking the updown chart's path geometry. */
  /* S31 (2026-04-30): hero right-edge clipping fix — see SPRINTS/.../S31 §A. */
  /* padding-right removed: Chart.js owns its 48px right gutter; the extra
     14px shrinks the canvas content-box and the right Y-axis labels get
     clipped by .feat-chart-wrap { overflow:hidden }. */
}
/* S22 (2026-04-29): pills moved OUT of the chart wrap entirely (sibling
   above in .feat-chart-block). Canvas + SVG fallback can fill the wrap
   with their inline `position:absolute;inset:0` — no 32px reservation
   needed because nothing overlays the wrap anymore. */
#panel-predictions .hero-v2 .feat-chart-wrap.feat-chart-tall .feat-chart-interval {
  /* Legacy: when an old .feat-chart-interval still sits inside a tall wrap,
     keep it visually inert (real pills live in .feat-chart-block now). */
  display: none;
  padding: 2px 0;
}
#panel-predictions .hero-v2 .feat-chart-tall .feat-chart {
  flex: 1;
  height: 100%;
  min-height: 0;
}
#panel-predictions .hero-v2 .feat-chart {
  display: block;
  width: 100%;
  height: 100%;
}
#panel-predictions .hero-v2 .feat-chart-dates {
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.04em;
  pointer-events: none;
}
/* SVG fallback is purely visual; hover + tooltip belong to the Chart.js canvas
   above. Without this, pointer events landed on the SVG (stacking order 1) and
   the market-detail tooltip never fired on hero cards — users saw no hover
   percentage even though the canvas was hydrated. */
#panel-predictions .hero-v2 .feat-chart-fallback {
  pointer-events: none;
}
/* Hero chart interval pills — visual parity with .md-chart-interval-pill on /market/:id.
   Positioned top-right with a translucent pill background so they sit cleanly
   against the chart area (the chart auto-scales around this 6px offset).
   Previously they appeared "offset" because lines could crowd the top strip;
   the SVG fallback now auto-scales + the `on`-state pill shows electric teal. */
/* S22 (2026-04-29) — pills are now a SIBLING ROW above the chart wrap, not
   an absolute overlay. This stops 1M/MAX from being clipped on the right
   edge and keeps the chart's y-axis tick labels uncovered.
   S22.1 (2026-04-29) — restored: do NOT override .feat-chart-wrap min-height
   (was 252px). Sprint #4's `min-height: 0` override let the chart shrink
   below its baseline once the pill row stole 32px from the parent grid
   cell. Chart wrap keeps its 252-312px height; pill row is ABOVE in
   addition to that height (parent block is naturally sized). Also added
   right-padding so MAX/1M pills don't get clipped by the carousel viewport
   on cards that overflow their slide. */
#panel-predictions .hero-v2 .feat-chart-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
#panel-predictions .hero-v2 .feat-chart-interval {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  /* S31 (2026-04-30): hero right-edge clipping fix — see SPRINTS/.../S31 §A. */
  padding: 0 28px 6px 4px; /* 28px right gutter so 1M/MAX clears viewport edge at 1440 */
  pointer-events: auto;
  box-sizing: border-box;
  overflow: visible;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .feat-chart-interval::-webkit-scrollbar {
  display: none;
}
#panel-predictions .hero-v2 .feat-chart-pill {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--md-border-subtle, rgba(255, 255, 255, 0.18));
  background: rgba(0, 0, 0, 0.45);
  color: var(--text3);
  cursor: pointer;
  line-height: 1;
}
#panel-predictions .hero-v2 .feat-chart-pill.on {
  border-color: var(--chart-c1, #00ff88);
  color: var(--chart-c1, #00ff88);
  background: rgba(0, 255, 136, 0.1);
}
#panel-predictions .hero-v2 .feat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}
#panel-predictions .hero-v2 .feat-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
#panel-predictions .hero-v2 .feat-footer-left .feat-vol strong {
  color: var(--text);
  font-weight: 600;
}
#panel-predictions .hero-v2 .feat-sep {
  color: var(--text3);
  opacity: 0.5;
}
#panel-predictions .hero-v2 .feat-ticker {
  position: relative;
  height: 56px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
#panel-predictions .hero-v2 .feat-ticker-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: heroV2TickUp 18s linear infinite;
}
#panel-predictions .hero-v2 .feat-ticker:hover .feat-ticker-track {
  animation-play-state: paused;
}
/* S16 (2026-04-29): Chris explicitly asked us to remove the scrolling text
   beneath the YES/NO buttons on the binary card. Hiding the tall ticker also
   stops it from forcing the binary slide to ~600px tall via `flex:1`, which
   was the upstream cause of every other slide inheriting empty middle space
   through the carousel track's `align-items:stretch`. Track + text rules
   below still exist for the small ticker variant if it's ever re-introduced. */
#panel-predictions .hero-v2 .feat-ticker-tall {
  display: none;
}
#panel-predictions .hero-v2 .feat-ticker-tall .feat-ticker-track {
  animation-duration: 30s;
  gap: 12px;
}
#panel-predictions .hero-v2 .feat-v2 .feat-col-left .feat-ticker-tall {
  display: none;
}
#panel-predictions .hero-v2 .feat-news-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
#panel-predictions .hero-v2 .feat-news-src {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--electric);
  background: var(--electric-dim);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  margin-top: 1px;
}
#panel-predictions .hero-v2 .feat-news-ago {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-left: auto;
  flex-shrink: 0;
}

/* Multi-outcome */
#panel-predictions .hero-v2 .mo-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
#panel-predictions .hero-v2 .mo-flag {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, #dc2626 33%, #fff 33% 66%, #dc2626 66%);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
#panel-predictions .hero-v2 .mo-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 780px) {
  #panel-predictions .hero-v2 .mo-grid {
    grid-template-columns: 1fr;
  }
}
#panel-predictions .hero-v2 .mo-cand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#panel-predictions .hero-v2 .mo-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
/* Hover-only highlight (no persistent ".lead" anymore — that read as "selected"
   when the user was actually hovering a different row). Keyboard focus mirrors
   hover so tab-navigation feels right. */
#panel-predictions .hero-v2 .mo-cand:hover,
#panel-predictions .hero-v2 .mo-cand:focus-visible {
  border-color: rgba(0, 240, 255, 0.45);
  background: var(--electric-dim, rgba(0, 240, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.25);
  outline: none;
}
#panel-predictions .hero-v2 .mo-cand:active {
  transform: scale(0.985);
}
#panel-predictions .hero-v2 .mo-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .mo-photo {
  /* S17 (2026-04-29): Chris asked to remove the round letter-initials
     chips (SS / LR / KC etc) from outcome rows — they were visual noise
     that didn't match the Polymarket reference. The colored swatch dot
     (.mo-swatch) stays as the only marker. */
  display: none;
}
#panel-predictions .hero-v2 .mo-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-predictions .hero-v2 .mo-pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#panel-predictions .hero-v2 .mo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
}
#panel-predictions .hero-v2 .mo-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#panel-predictions .hero-v2 .mo-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
#panel-predictions .hero-v2 .mo-chart-col {
  min-width: 0;
}

/* Sports variant */
#panel-predictions .hero-v2 .feat-sports-body {
  margin-top: 0;
}
#panel-predictions .hero-v2 .feat-sports-crumb {
  margin-bottom: 4px;
}
#panel-predictions .hero-v2 .feat-sports-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#panel-predictions .hero-v2 .feat-sports-teambtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--ink2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
}
#panel-predictions .hero-v2 .feat-sports-teambtn-lbl {
  font-weight: 600;
}
#panel-predictions .hero-v2 .feat-sports-teambtn-yes {
  color: var(--green);
  font-weight: 700;
}
#panel-predictions .hero-v2 .feat-sports-right {
  gap: 12px;
}
#panel-predictions .hero-v2 .feat-sports-scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#panel-predictions .hero-v2 .feat-sports-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .feat-sports-mid {
  flex: 1;
  text-align: center;
  min-width: 0;
}
#panel-predictions .hero-v2 .feat-sports-scoreline {
  font-family: var(--pixel);
  font-size: 36px;
  line-height: 1.1;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#panel-predictions .hero-v2 .feat-sports-dash {
  opacity: 0.35;
  font-family: var(--mono);
  font-size: 28px;
}
#panel-predictions .hero-v2 .feat-sports-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
}
#panel-predictions .hero-v2 .feat-sports-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.06em;
}
#panel-predictions .hero-v2 .feat-sports-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  animation: heroV2Pulse 1.5s infinite;
}
#panel-predictions .hero-v2 .feat-sports-chart {
  min-height: 180px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
#panel-predictions .hero-v2 .feat-sports-chart .feat-chart {
  flex: 1;
  min-height: 140px;
}
#panel-predictions .hero-v2 .feat-updown-btns {
  flex-direction: row;
}
#panel-predictions .hero-v2 .feat-updown-btn {
  flex: 1;
}
#panel-predictions .hero-v2 .feat-updown-btn.up .feat-sports-teambtn-yes {
  color: var(--green);
}
#panel-predictions .hero-v2 .feat-updown-btn.down .feat-sports-teambtn-yes {
  color: #fb923c;
}
#panel-predictions .hero-v2 .feat-updown-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  /* S21.final (2026-04-29) — was min-height: 22px with `:empty { display: none }`.
     The collapse-on-empty rule made the row pop in/out vertically every time
     refreshUpdownSiblings rebuilt the pills (which runs on every carousel
     re-mount), producing visible flash. Reserve the row height unconditionally
     so empty→populated never shifts surrounding layout. */
  min-height: 22px;
}
#panel-predictions .hero-v2 .feat-updown-sibling-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#panel-predictions .hero-v2 .feat-updown-sibling-pill:hover {
  background: rgba(34, 211, 238, 0.16);
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.35);
}
#panel-predictions .hero-v2 .feat-updown-timer {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.12);
  color: #22d3ee;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}
#panel-predictions .hero-v2 .feat-updown-chart {
  position: relative;
}
#panel-predictions .hero-v2 .feat-updown-chart-overlay {
  position: absolute;
  top: 8px;
  left: 12px;
  /* PM-LOOP-4 (2026-05-03): bump right gutter from 12px → 56px so the
     countdown block (which holds "Resolving" ≈ 91px wide on expiry) never
     collides with the SVG Y-axis tick labels rendered at right ≈ 46px in
     from the wrap. Also keeps "ENDS IN" / "Resolving" from being clipped
     by the chart-wrap's overflow:hidden when the carousel snaps to the
     UpDown slide on narrower viewports. */
  right: 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 2;
  gap: 12px;
}
#panel-predictions .hero-v2 .feat-updown-price-block,
#panel-predictions .hero-v2 .feat-updown-countdown-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
#panel-predictions .hero-v2 .feat-updown-countdown-block {
  align-items: flex-end;
  /* S22 (2026-04-29) — prevent "Resolving" text from being clipped by the
     chart wrap's overflow:hidden. The block was previously sized for "5:00"
     (~50px); when the JS swaps in "Resolving" (~80px) at expiry, the trailing
     chars got clipped past the wrap's right padding. flex-shrink:0 + nowrap
     guarantees the block stays its natural width. */
  flex-shrink: 0;
  white-space: nowrap;
  /* PM-LOOP-14 (2026-05-03) Fix B: defense-in-depth max-width so the block
     can never escape its container even if the slide ever regresses. The
     block's widest live string is "Resolving" (~80px) + 2*10px padding, so
     120px keeps everything visible while preventing future overflow. */
  max-width: 120px;
}
#panel-predictions .hero-v2 .feat-updown-price-label,
#panel-predictions .hero-v2 .feat-updown-countdown-label {
  color: rgba(226, 232, 240, 0.7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#panel-predictions .hero-v2 .feat-updown-price {
  color: #22d3ee;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  transition: color 180ms ease;
}
#panel-predictions .hero-v2 .feat-updown-countdown {
  color: #f8fafc;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
/** Ticker slide: the drawn path carries one extra slot past the right edge of the
 *  visible 0..600 region (rightmost point sits at viewBox x=610 — SVG viewBox is
 *  0 0 610 190 so the extra slot is inside the viewBox, not clipped). On each 1s
 *  tick JS sets translateX(0) → translateX(-step) under this transition, which
 *  pulls viewBox x=610 to CSS x=600 — the right edge stays painted throughout
 *  the slide. Then JS snaps the path to the new shape with transform reset.
 *  d itself is NOT transitioned (that rubber-bands every X coordinate when the
 *  series length changes). */
/* PM-LOOP-iter-2 (2026-05-03) — drive transform via rAF (see
 * slideUpdownGroup in hero-v2-carousel.js). CSS transition removed so the
 * rAF loop's per-frame transform updates don't compete with a 1000ms
 * tween. .is-snap kept for legacy compat (still flagged in JS). */
#panel-predictions .hero-v2 [data-updown-group] {
  transform: translateX(0);
  will-change: transform;
}
#panel-predictions .hero-v2 [data-updown-group].is-snap {
  transition: none;
}

/* Right rail — fixed column; does not scroll with carousel */
#panel-predictions .hero-v2 .rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  align-self: stretch;
  min-height: 100%;
  height: 100%;
}
#panel-predictions .hero-v2 .rail-panel {
  background: var(--ink1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* S30 (2026-04-30): rail panels split available height 50/50 (~260-280px
   * each) but render 5 brk-item rows at ~55-60px = ~320-340px. Without
   * scroll, the 5th row clips. overflow-y: auto adds vertical scroll only
   * when content exceeds container; horizontal stays clipped to preserve
   * layout. overscroll-behavior keeps page scroll from bleeding through. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* S37 (2026-04-30): scrollbar hide + hero responsive — see SPRINTS/2026-04-30-S37-hero-responsive-noscrollbar.md. */
  scrollbar-width: none;   /* was: thin (S30) */
}
#panel-predictions .hero-v2 .rail-panel::-webkit-scrollbar { width: 0; display: none; }
#panel-predictions .hero-v2 .rail-panel > * { min-width: 0; }
#panel-predictions .hero-v2 .brk-ttl,
#panel-predictions .hero-v2 .hot-item { min-width: 0; }
#panel-predictions .hero-v2 .rail-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#panel-predictions .hero-v2 .rail-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
}
#panel-predictions .hero-v2 .rail-title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  animation: heroV2Pulse 2s infinite;
}
#panel-predictions .hero-v2 .rail-title.hot .dot {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}
#panel-predictions .hero-v2 .rail-more {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#panel-predictions .hero-v2 .rail-more:hover {
  color: var(--electric);
}
#panel-predictions .hero-v2 .brk-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  cursor: pointer;
  transition: background 0.14s;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 6px;
}
#panel-predictions .hero-v2 .brk-item:last-child {
  border-bottom: none;
}
#panel-predictions .hero-v2 .brk-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
#panel-predictions .hero-v2 .brk-ico {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .brk-ico.p {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
#panel-predictions .hero-v2 .brk-ico.e {
  background: linear-gradient(135deg, #627eea, #4555a2);
}
#panel-predictions .hero-v2 .brk-ico.t {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
#panel-predictions .hero-v2 .brk-text {
  min-width: 0;
}
#panel-predictions .hero-v2 .brk-ttl {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#panel-predictions .hero-v2 .brk-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
}
#panel-predictions .hero-v2 .brk-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
#panel-predictions .hero-v2 .brk-pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#panel-predictions .hero-v2 .brk-move {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}
#panel-predictions .hero-v2 .brk-move.down {
  color: var(--red);
}
#panel-predictions .hero-v2 .brk-move.up {
  color: var(--green);
}
#panel-predictions .hero-v2 .hot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s;
}
#panel-predictions .hero-v2 .hot-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
#panel-predictions .hero-v2 .hot-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#panel-predictions .hero-v2 .hot-rank {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  width: 16px;
  text-align: right;
}
#panel-predictions .hero-v2 .hot-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
#panel-predictions .hero-v2 .hot-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--electric);
  background: var(--electric-dim);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  margin-left: 6px;
}
#panel-predictions .hero-v2 .hot-vol {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
}
#panel-predictions .hero-v2 .hot-vol strong {
  color: var(--text2);
}
#panel-predictions .hero-v2 .explore-btn {
  flex-shrink: 0;
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  background: var(--electric-dim);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  color: var(--electric);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.14s;
}
/* "Explore all markets" removed from hero JS — no .explore-btn */

/* —— Hero v2 responsive: mobile <640, tablet 640–1023, rail overlap fix —— */
@media (max-width: 1023px) {
  #panel-predictions .hero-v2 .rail {
    min-height: 0;
    height: auto;
    align-self: stretch;
  }
  #panel-predictions .hero-v2 .rail-panel {
    flex: 0 0 auto;
    min-height: 0;
  }
  #panel-predictions .hero-v2 .hero-v2-main-grid {
    align-items: stretch;
  }
}

@media (max-width: 639px) {
  #panel-predictions .hero-v2.hero-v2-shell {
    z-index: 1;
    isolation: isolate;
  }
  #panel-predictions .hero-v2 .hero-v2-main-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #panel-predictions .hero-v2 .hero-v2-carousel-col {
    width: 100%;
    order: 1;
    position: relative;
  }
  #panel-predictions .hero-v2 .rail {
    order: 2;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
  }
  #panel-predictions .hero-v2 .hero-v2-viewport {
    position: relative;
    z-index: 0;
  }
  #panel-predictions .hero-v2 .hero-v2-arrow {
    position: absolute;
    top: 10px;
    z-index: 3;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 22px;
    line-height: 1;
  }
  #panel-predictions .hero-v2 .hero-v2-arrow-left {
    right: 58px;
    left: auto;
  }
  #panel-predictions .hero-v2 .hero-v2-arrow-right {
    right: 10px;
  }
  #panel-predictions .hero-v2 .hero-v2-nav {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    order: 2;
    position: static;
  }
  #panel-predictions .hero-v2 .hero-v2-dots {
    order: 1;
    justify-content: center;
    display: flex;
  }
  #panel-predictions .hero-v2 .hero-v2-nav .hero-v2-arrow {
    display: flex;
  }
  #panel-predictions .hero-v2 .hero-v2-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
  }
  #panel-predictions .hero-v2 .hero-v2-dot.active {
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
  }
  #panel-predictions .hero-v2 .feat {
    padding: 16px;
    overflow: hidden;
  }
  #panel-predictions .hero-v2 .feat-v2 > .feat-banner {
    width: 72px;
    height: 72px;
    max-height: 72px;
    margin: 0;
    border-radius: 10px;
  }
  #panel-predictions .hero-v2 .feat-v2 {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 12px;
  }
  #panel-predictions .hero-v2 .feat-cat {
    max-width: 100%;
    margin-left: 0;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-col-left,
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-col-right {
    display: contents;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: unset;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-body > .feat-yn-row {
    order: 1;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-body > .feat-chart-wrap {
    order: 2;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-body > .feat-prob-big {
    order: 3;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-body > .feat-ticker,
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-body > .feat-ticker-tall {
    order: 4;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-yn-row {
    flex-direction: column;
    gap: 10px;
  }
  #panel-predictions .hero-v2 .feat.feat-v2:not(.feat-sports) .feat-yn {
    min-height: 48px;
    padding: 12px 16px;
  }
  #panel-predictions .hero-v2 .feat-chart-wrap.feat-chart-tall,
  #panel-predictions .hero-v2 .feat-chart-tall {
    min-height: 280px;
    max-height: 320px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  #panel-predictions .hero-v2 .feat-chart {
    max-width: 100%;
    object-fit: contain;
  }
  #panel-predictions .hero-v2 .feat-v2 .feat-prob-num {
    font-size: 36px;
  }
  #panel-predictions .hero-v2 .mo-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #panel-predictions .hero-v2 .mo-chart-col,
  #panel-predictions .hero-v2 .mo-cand-list {
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  #panel-predictions .hero-v2 .hero-v2-main-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #panel-predictions .hero-v2 .hero-v2-carousel-col {
    width: 100%;
  }
  #panel-predictions .hero-v2 .rail {
    width: 100%;
  }
  #panel-predictions .hero-v2 .feat.feat-v2 .feat-body {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
  }
  #panel-predictions .hero-v2 .mo-grid {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 16px;
  }
}

/* Header: quick pills horizontal scroll; category nav fade; search touch (mobile block above) */
@media (max-width: 767px) {
  .terminal-page .hdr-quick-cluster {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }
  .terminal-page .hdr-quick-cluster::-webkit-scrollbar {
    display: none;
  }
  .terminal-page .hdr-quick-cluster .pred-quick-pill {
    flex-shrink: 0;
  }
  .terminal-page .hdr-cat-cluster {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent);
  }
  .terminal-page .hdr--search-open .hdr-search-inner,
  .terminal-page .hdr--search-open .hdr-row-1-search-wrap input {
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------
   Narrow-viewport polish (≤640px): card-layout tables, flex-wrap
   toolbars, 40×40 tap targets, ≥11px font-size floor. Scoped to
   .terminal-page so the Clangster main-app is untouched. Rules here
   intentionally override earlier desktop grids; keep additions inside
   this block so we don't regress desktop on the next edit.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Predictions table -> vertical card per row. Grid columns collapse
     to two lines; the action button drops under the market name. */
  .terminal-page .global-pred-hdr {
    display: none;
  }
  .terminal-page .global-pred-row:not(.pred-card) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    gap: 6px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border2, rgba(255, 255, 255, 0.08));
  }
  .terminal-page .global-pred-row:not(.pred-card) > * {
    min-width: 0;
  }

  /* Clang + agent tables -> stacked rows */
  .terminal-page .clang-tbl .tbl-hdr,
  .terminal-page .agents-tbl .tbl-hdr {
    display: none;
  }
  .terminal-page .clang-tbl .clang-row,
  .terminal-page .agents-tbl .agent-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border2, rgba(255, 255, 255, 0.08));
  }

  /* Predictions toolbar / filters: always wrap on narrow screens so
     the chip rows don't force horizontal scroll. */
  .terminal-page #panel-predictions .pred-toolbar,
  .terminal-page #panel-predictions .pred-toolbar--filters-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Chart toolbar inside market-detail / hero card */
  .terminal-page .chart-toolbar,
  .terminal-page .pf-chart-toolbar,
  .terminal-page .terminal-chart-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Header row trim: tighter padding so the logo + actions fit */
  .terminal-page .hdr-row-1 {
    padding-left: 12px;
    padding-right: 12px;
  }
  .terminal-page .hdr-row-2 {
    padding: 0 12px 4px;
  }

  /* Tap targets: action buttons and table-row bet buttons to ≥40×40 */
  .terminal-page .bet-btn,
  .terminal-page .bet-up,
  .terminal-page .bet-dn,
  .terminal-page .agent-actions-col button,
  .terminal-page .clang-action-btns button,
  .terminal-page .row-actions button {
    min-height: 40px;
    min-width: 40px;
  }

  /* Font-size floor: tiny 9–10px chips/labels are hard to read on a
     phone. Promote a safe subset (chips, table meta, sort indicators)
     to 11px — the smallest size our design system still treats as
     accessible body-ish text. Keep this narrowly scoped so we don't
     blow up iconography that intentionally uses 10px. */
  .terminal-page .g-pred-sort-label,
  .terminal-page .g-sort-chip,
  .terminal-page .g-sort-chip .sort-ico,
  .terminal-page .sort-ico,
  .terminal-page .th {
    font-size: 11px;
  }
}

/* Resolved-market outcome badge (shown inside #mdSideTrade when market is closed/resolved) */
.md-outcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px 24px;
  border: 1px solid var(--md-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--md-panel-bg, rgba(255, 255, 255, 0.02));
  text-align: center;
}
.md-outcome-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}
.md-outcome-check svg {
  width: 30px;
  height: 30px;
  display: block;
}
.md-outcome-title {
  font-size: 17px;
  font-weight: 700;
  color: #3b82f6;
  letter-spacing: 0.1px;
}
.md-outcome-sub {
  font-size: 13px;
  color: var(--md-muted, rgba(255, 255, 255, 0.55));
}
.md-rail-terms--resolved {
  margin-top: 10px;
  text-align: center;
  color: var(--md-muted, rgba(255, 255, 255, 0.45));
  font-size: 11px;
}

/* Effective-resolved variant (one outcome at >=99% but Polymarket still trading).
   Amber tone, dot instead of checkmark, subtler so users see the difference vs final. */
.md-outcome-card--effective {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.06);
}
.md-outcome-card--effective .md-outcome-title {
  color: #f59e0b;
}
.md-outcome-check--effective {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.18);
}
.md-outcome-sub--note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(245, 158, 11, 0.85);
  max-width: 280px;
}

/* Header meta-row — outcomes count + resolution-countdown badge.
   Lives on the same row as the Polymarket / category pills. The countdown
   badge color tracks state: neutral = future close, --awaiting = past end
   waiting on oracle, --effective = one side >=99%, --resolved = formally closed. */
.md-meta-outcomes {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--md-muted, rgba(255, 255, 255, 0.55));
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--md-border-subtle, rgba(255, 255, 255, 0.06));
  letter-spacing: 0.02em;
}
.md-meta-resolution {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--md-border-subtle, rgba(255, 255, 255, 0.08));
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  white-space: nowrap;
}
.md-meta-resolution--resolved {
  color: #34d399;
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25);
}
.md-meta-resolution--effective {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
.md-meta-resolution--awaiting {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.22);
}

/* "More NBA Games" sidebar panel — Polymarket-style related games list. */
.md-side-card.md-more-games-card {
  background: var(--ink1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 8px;
  margin-top: 12px;
}
.md-more-games-title {
  margin: 0 0 10px 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text1, #e4e4e7);
  letter-spacing: 0.01em;
}
.md-more-games-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.md-more-games-item {
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.md-more-games-item:first-child {
  border-top: 0;
}
.md-more-games-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.md-more-games-link:hover,
.md-more-games-link:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.md-more-games-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.md-more-games-time {
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.7rem;
  color: var(--text2, #a1a1aa);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-more-games-teams {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text1, #e4e4e7);
  letter-spacing: 0.04em;
}
.md-team-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.md-more-games-teams .md-team-dot:not(:first-child) {
  margin-left: 4px;
}
.md-more-games-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.md-mg-prc {
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.78rem;
  color: var(--text1, #e4e4e7);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: light) {
  .md-more-games-link:hover,
  .md-more-games-link:focus-visible {
    background: rgba(0, 0, 0, 0.04);
  }
}

/* === MARKET DETAIL TABS ===
 * Polymarket-parity sports event tabs strip + market-row list. Self-contained
 * — does not redefine .pred-sports-chip / .md-sports-tab base rules; those
 * already live earlier in this file. Adds:
 *   - .md-sports-tab-count (small count badge inside each tab button)
 *   - .md-sports-tab-panes (container)
 *   - .md-sports-mkt-list / .md-sports-mkt-row (per-tab market rows)
 * Owned by terminal/public/js/market-detail-tabs.js. Markup in
 * terminal/views/market-detail.ejs. Heuristics in
 * src/services/polymarketEventGroups.ts.
 */
.md-sports-tab-count {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--md-text-muted, #888);
  vertical-align: middle;
}
.md-sports-tab.on .md-sports-tab-count {
  background: rgba(255, 255, 255, 0.16);
  color: var(--md-text-primary, #fff);
}
.md-sports-tab-panes {
  margin-top: 8px;
}
.md-sports-tab-pane {
  display: block;
}
.md-sports-tab-pane[hidden] {
  display: none !important;
}

/* Athlete/team chips above the tab strip (Polymarket parity).
 * Two colored buttons showing both competitors with team color, logo (or
 * initial fallback), name, and YES moneyline price. Clicking a chip opens
 * the wager modal via the existing wager-copy-btn handler.
 * Color comes through as a CSS custom property `--md-sports-chip-color`
 * set inline so each chip carries its team color independently. */
.md-sports-chips-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.md-sports-chip {
  --md-sports-chip-color: #64748b;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 160px;
  padding: 10px 12px 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--md-text-primary, #fff);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  overflow: hidden;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.md-sports-chip:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
}
.md-sports-chip:active {
  transform: translateY(1px);
}
.md-sports-chip-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--md-sports-chip-color);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.md-sports-chip-logo {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  overflow: hidden;
  object-fit: cover;
}
.md-sports-chip-logo--img {
  background: transparent;
}
.md-sports-chip-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--md-text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-sports-chip-price {
  flex: 0 0 auto;
  font-family: var(--mono, inherit);
  font-size: 13px;
  font-weight: 700;
  color: var(--md-sports-chip-color);
}
@media (max-width: 480px) {
  .md-sports-chip {
    min-width: 0;
    padding: 8px 10px 8px 12px;
  }
  .md-sports-chip-name {
    font-size: 12px;
  }
}
.md-sports-mkt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-sports-mkt-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 120ms ease, border-color 120ms ease;
}
.md-sports-mkt-row:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}
.md-sports-mkt-row-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.md-sports-mkt-row-title-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-text-primary, #fff);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.md-sports-mkt-row-vol {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--md-text-muted, #888);
  letter-spacing: 0.02em;
}
.md-sports-mkt-row-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 96px;
}
.md-sports-mkt-row-chips .pred-sports-chip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--md-text-primary, #fff);
}
.md-sports-mkt-row-chips .pred-sports-chip:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.md-sports-mkt-row-chips .pred-sports-chip-team {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8ch;
}
.md-sports-mkt-row-chips .pred-sports-chip-price {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .md-sports-mkt-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .md-sports-mkt-row-chips {
    flex-direction: row;
    min-width: 0;
  }
  .md-sports-mkt-row-chips .pred-sports-chip {
    flex: 1 1 0;
  }
}
@media (prefers-color-scheme: light) {
  .md-sports-mkt-row {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
  }
  .md-sports-mkt-row:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
  }
  .md-sports-mkt-row-chips .pred-sports-chip {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
  }
  .md-sports-mkt-row-chips .pred-sports-chip:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06);
  }
  .md-sports-tab-count {
    background: rgba(0, 0, 0, 0.06);
  }
  .md-sports-tab.on .md-sports-tab-count {
    background: rgba(0, 0, 0, 0.12);
  }
}

/* =====================================================================
 * Live Sports hero card variant — always-on slide rendered at carousel
 * position 0 whenever a tracked NBA/NHL/soccer/UFC game is in progress.
 * Extends `.feat-sports-*` with a stronger LIVE pulse + subtle red rim
 * so the in-progress card stands out from upcoming sports cards. The
 * data attributes (`data-hero-live-sports`, `data-sports-event-id`,
 * `data-sports-{away,home}-score`, `data-sports-period-label`) drive
 * the 20-second polling refresher in hero-v2-carousel.js.
 * ===================================================================== */
#panel-predictions .hero-v2 .feat-live-sports {
  position: relative;
}
#panel-predictions .hero-v2 .feat-live-sports::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.35);
  z-index: 1;
}
#panel-predictions .hero-v2 .feat-live-sports-badge {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.08));
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  text-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
  border: 1px solid rgba(220, 38, 38, 0.5);
}
#panel-predictions .hero-v2 .feat-live-sports-badge .feat-sports-live-dot {
  animation: heroV2LiveSportsPulse 1.1s infinite;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 10px var(--red), 0 0 4px var(--red);
}
@keyframes heroV2LiveSportsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  #panel-predictions .hero-v2 .feat-live-sports-badge .feat-sports-live-dot {
    animation: none;
  }
}

/* =====================================================================
 * 5m Up/Down market-detail live card (Polymarket-parity, deploy-7.3)
 * Selectors below are emitted by terminal/views/market-detail.ejs lines
 * 133-164 when isUpdown5m && updownTicker. Without these rules the card
 * renders unstyled and overlaps surrounding sections.
 * Live driver: terminal/public/js/market-detail-updown-live.js polls
 * /api/hero/updown-price (1s) and seeds via /api/hero/updown-chart.
 * ===================================================================*/
.md-updown-live-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.06) 0%, var(--ink1) 70%);
  overflow: hidden;
}
.md-updown-live-card::before {
  content: "LIVE";
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: #22d3ee;
  padding: 2px 8px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.08);
  pointer-events: none;
}
.md-updown-live-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.md-updown-live-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.md-updown-live-kv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}
.md-updown-live-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--md-text-secondary, #94a3b8);
  text-transform: uppercase;
}
.md-updown-live-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text1, #e2e8f0);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.md-updown-live-value--current {
  color: #22d3ee;
}
.md-updown-live-delta {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  min-height: 1em;
}
.md-updown-live-delta[data-delta-sign="up"] {
  color: #22c55e;
}
.md-updown-live-delta[data-delta-sign="down"] {
  color: #ef4444;
}
.md-updown-live-countdown {
  /* Clear the LIVE badge in the corner (~50px wide). Default sized for LIVE
   * since that's the common state — RESOLVED widens via .is-resolved below. */
  margin-right: 64px;
  text-align: right;
  flex: 0 0 auto;
}
.md-updown-live-card.is-resolved .md-updown-live-countdown {
  /* "RESOLVED" badge is wider (~80-90px depending on font metrics). Bump
   * clearance only when resolved so MM:SS digits don't slide under it. */
  margin-right: 96px;
}
.md-updown-cd-nums {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.md-updown-cd-seg {
  position: relative; /* anchor the ":" pseudo-element between MM and SS */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--mono);
  min-width: 44px;
}
.md-updown-cd-seg > span:first-child {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text1, #e2e8f0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.md-updown-cd-seg-lbl {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--md-text-secondary, #94a3b8);
  text-transform: uppercase;
  margin-top: 2px;
}
.md-updown-cd-seg + .md-updown-cd-seg::before {
  content: ":";
  position: absolute;
  transform: translate(-12px, 0);
  color: var(--md-text-secondary, #94a3b8);
  font-size: 1.5rem;
  font-weight: 700;
}
.md-updown-live-chart {
  position: relative;
  height: 240px;
  width: 100%;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.md-updown-live-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.md-updown-live-svg [data-updown-beat-line] {
  stroke: #f59e0b;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
.md-updown-live-svg [data-updown-live-path] {
  stroke: #22d3ee;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.35));
}
.md-updown-live-card.is-resolved::before {
  content: "RESOLVED";
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.08);
}
.md-updown-live-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.45);
  color: #22d3ee;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.md-updown-live-cta:hover {
  background: rgba(34, 211, 238, 0.2);
  border-color: rgba(34, 211, 238, 0.7);
  transform: translateY(-1px);
}
.md-updown-live-card.is-resolved .md-updown-live-value--current {
  color: var(--text1, #e2e8f0);
}
.md-updown-live-card.is-resolved .md-updown-live-svg [data-updown-live-path] {
  filter: none;
  opacity: 0.65;
}
@media (max-width: 640px) {
  .md-updown-live-meta {
    gap: 16px;
  }
  .md-updown-live-value {
    font-size: 1.3rem;
  }
  .md-updown-cd-seg > span:first-child {
    font-size: 1.4rem;
  }
  .md-updown-live-chart {
    height: 180px;
  }
  .md-updown-live-countdown {
    margin-right: 0;
    width: 100%;
    text-align: left;
  }
}

/* =========================================================================
   MOBILE SWEEP (2026-04-26)
   Targets: 320px → 767px viewports.
   Goals: kill horizontal scroll, make tap targets ≥44px, keep dropdowns in
   viewport, collapse multi-column grids, restore legibility on prediction
   cards. Scoped strictly to (max-width: 767px) so desktop is untouched.
   ========================================================================= */
@media (max-width: 767px) {
  /* ----- Page chrome ------------------------------------------------- */
  html, body { overflow-x: hidden; max-width: 100vw; }
  body.terminal-page { -webkit-text-size-adjust: 100%; }

  /* Header right-side: tighten spacing, drop skills button, smaller pills */
  .hdr-right { gap: 6px; padding-left: 8px; border-left: none; }
  .hdr-skills-btn,
  .agent-switcher-wrap,
  .hdr-logout-btn { display: none !important; }
  .hdr-wallet-totals--link { padding: 4px 8px; }
  .hdr-total-pill,
  .hdr-wallet-totals--link .hdr-total-pill { font-size: 10px; }
  .hdr-total-label { font-size: 9px; }
  .hdr-total-val { font-size: 11px; }
  .hdr-avatar { width: 36px; height: 36px; font-size: 12px; }

  /* Dropdowns: lock to viewport, never bleed off edges */
  .hdr-profile-drop,
  .agent-switcher-drop {
    right: 8px;
    left: auto;
    max-width: calc(100vw - 16px);
    min-width: 0;
    width: min(280px, calc(100vw - 16px));
  }

  /* ----- Prediction market cards (mobile list) ----------------------- */
  .m-card-grid { grid-template-columns: repeat(2, 1fr); }
  .m-card-cell { padding: 8px 6px; }
  .m-card-cell:nth-child(2) { border-right: none; }
  .m-card-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .m-card-cell-lbl { font-size: 9.5px; letter-spacing: .04em; }
  .m-card-cell-val { font-size: 12px; }

  /* Action buttons row: wrap cleanly, no overflow, tap-friendly */
  .m-card-foot { flex-wrap: wrap; gap: 8px; }
  .m-card-pool { width: 100%; margin-right: 0; margin-bottom: 4px; font-size: 10px; }
  .m-card-foot .wager-copy-btn,
  .m-card-foot .m-btn-sell { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 11px; }

  /* ----- Market detail page ------------------------------------------ */
  /* md-grid already collapses at 1000px, but tighten gaps + chrome */
  .md-grid { gap: 12px; padding: 0; }
  .md-header { gap: 12px; flex-wrap: wrap; }
  .md-header-img { width: 72px; height: 72px; }
  .md-meta-row { gap: 6px; flex-wrap: wrap; }
  .md-meta-countdown {
    margin-left: 0 !important;
    margin-top: 4px;
    width: 100%;
    justify-content: flex-start;
  }

  /* Event detail sub-markets: stack on phones (was 520px breakpoint) */
  .md-venue-grid { grid-template-columns: 1fr !important; }

  /* Trade panel: full-width, comfortable padding */
  .md-col-side { padding: 0; }
  .md-trade-panel,
  .md-card { padding: 12px; }

  /* ----- Portfolio --------------------------------------------------- */
  /* Hide wide table; show stacked card list (.pf-card-list / .m-card-list
     should already exist for mobile; this ensures the table doesn't force
     horizontal scroll if a viewport sneaks past the 1100px breakpoint). */
  .pf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pf-table { font-size: 11px; }
  .pf-summary-grid { gap: 8px; }

  /* ----- Filter / search bars --------------------------------------- */
  .pred-filter-bar { flex-wrap: wrap; gap: 6px; }
  .pred-filter-bar .fb-search { min-width: 0; flex: 1 1 100%; }

  /* ----- Withdraw / deposit modals ---------------------------------- */
  .wuw-box { width: calc(100vw - 16px); padding: 16px; }
  .wuw-input { font-size: 13px; padding: 0 10px; }

  /* ----- Hero carousel ---------------------------------------------- */
  /* Reduce hero card chrome; SVG charts already auto-zoom (PR #130) */
  .hero-v2 { padding: 0 8px; }
  .hero-v2-card { padding: 12px; }
}

/* Tablet: portfolio summary grid should be 2-col, not 1-col, between
   768-1099px (existing rule was only desktop ≥1100px). */
@media (min-width: 768px) and (max-width: 1099px) {
  .pf-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Extra-small phones (≤414px): drop button to icons-only where possible
   and shrink hero-card label fonts. */
@media (max-width: 414px) {
  .m-card-cell-lbl { font-size: 9px; }
  .m-card-pool { font-size: 9.5px; }
  .md-header-img { width: 56px; height: 56px; }
  .md-title { font-size: 16px !important; }
}

/* =========================================================================
   MOBILE POLISH — round 2 (2026-04-26)
   Findings from two parallel audits after the first sweep landed.
   Touch-target enlargements, sticky CTAs over iOS keyboard, sports/updown
   card name overflow, portfolio table column hiding, modal scroll fixes.
   Strictly scoped to (max-width: …) — desktop untouched.
   ========================================================================= */

/* ---- Global tap feedback + smoother interactions on phones --------- */
@media (max-width: 767px) {
  button,
  a[role="button"],
  .wager-copy-btn,
  .md-rail-quick,
  .md-mode-btn,
  .feat-yn,
  #panel-predictions .hero-v2 .feat-chart-pill,
  #panel-predictions .hero-v2 .mo-cand,
  #panel-predictions .hero-v2 .brk-item,
  #panel-predictions .hero-v2 .hot-item {
    -webkit-tap-highlight-color: rgba(0, 240, 255, 0.18);
    touch-action: manipulation;
  }

  /* Drawer/dropdown stack: drawer always above dropdowns to avoid the
     "tap dismiss does nothing" trap. */
  .m-drawer-backdrop { z-index: 990 !important; }
  .m-drawer { z-index: 991 !important; }
}

/* ---- Hero carousel: tap targets + truncation ---------------------- */
@media (max-width: 767px) {
  /* Chart range pills — were ~28px, bump to ~38px tappable. */
  #panel-predictions .hero-v2 .feat-chart-pill {
    padding: 7px 12px;
    font-size: 11px;
    min-width: 38px;
    min-height: 32px;
  }
  /* YES/NO row tighter so 2 buttons fit cleanly at 320-375px. */
  #panel-predictions .hero-v2 .feat-yn { padding: 9px 10px; min-height: 44px; }
  #panel-predictions .hero-v2 .feat-yn .lbl { font-size: 9px; margin-bottom: 1px; }
  /* Multi-outcome rows: truncate long candidate names instead of wrapping. */
  #panel-predictions .hero-v2 .mo-cand { min-width: 0; }
  #panel-predictions .hero-v2 .mo-cand-text,
  #panel-predictions .hero-v2 .mo-cand .lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* Breaking + hot rail: 40px+ tap heights. */
  #panel-predictions .hero-v2 .brk-item { padding: 11px 0; min-height: 40px; }
  #panel-predictions .hero-v2 .hot-item { padding: 10px 8px; min-height: 40px; }
}

/* ---- Trade panel (market detail rail): bigger taps + sticky CTA --- */
@media (max-width: 767px) {
  /* Quick-add buttons (+$1 / +$5 / Max) bigger and more tappable. */
  .md-rail-quick {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    min-height: 40px;
  }
  /* Mode toggle (Real/Paper) hits 44px minimum. */
  .md-mode-btn {
    padding: 9px 14px;
    min-height: 44px;
    font-size: 13px;
  }
  /* Confirm CTA stays visible above iOS keyboard via padding-bottom safety
     buffer; no position:sticky (we already collapse the side panel into
     normal flow at <1000px so sticky inside it would be no-op). */
  .md-rail-confirm { margin-bottom: 12px; min-height: 48px; font-size: 14px; }
  /* Amount input: explicit 16px font prevents iOS auto-zoom on focus. */
  .md-rail-amt-input,
  .md-rail-amt-input input { font-size: 16px !important; }
}

/* ---- Sports live card: name truncation, score legibility --------- */
@media (max-width: 480px) {
  .md-sports-live-name {
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .md-sports-live-score { font-size: 18px; }
  .md-sports-live-team { min-width: 0; flex: 1 1 0; }
}

/* ---- UpDown live card: stack KV pairs vertically on small phones - */
@media (max-width: 414px) {
  .md-updown-live-meta {
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .md-updown-live-kv { min-width: 0; width: 100%; }
  .md-updown-cd-seg { min-width: 38px; }
}

/* ---- Portfolio table: hide low-priority cols on phones ----------- */
@media (max-width: 480px) {
  .pf-table th,
  .pf-table td { font-size: 10.5px; padding: 6px 4px; }
  /* Keep cols 1-4 (Date/Market/Side/Status); hide Shares/Value/Fill etc. */
  .pf-table th:nth-child(n+5),
  .pf-table td:nth-child(n+5) { display: none; }
  .pf-table-wrap { overflow-x: visible; }
}

/* ---- Modals: padding + scrollable content + 16px input fonts ---- */
@media (max-width: 480px) {
  .modal-backdrop,
  .pred-modal-backdrop,
  .pf-dm-modal-backdrop { padding: 8px !important; }

  .wuw-box,
  .setup-trading-dialog,
  .pred-detail-modal,
  .pf-dm-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .setup-trading-dialog { padding: 16px 12px; }

  /* Inputs ≥16px so iOS does not auto-zoom on focus. */
  .wuw-input,
  .pf-dm-transfer-input,
  .setup-trading-input,
  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    font-size: 16px;
    min-height: 40px;
    padding: 8px 10px;
  }
}

/* ---- Header category cluster: existing fade is 24px — make it more
       obvious on phones so users notice horizontal scroll exists. ---- */
@media (max-width: 767px) {
  .hdr-cat-cluster {
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
  }
}

/* ---- Hero carousel nav dots: tighter on phones ------------------- */
@media (max-width: 480px) {
  .hero-v2-nav { gap: 8px; margin-top: -28px; }
}

/* =========================================================================
   MOBILE POLISH — round 3 (2026-04-26)
   Secondary pages: leaderboard, airdrop, agents, skills-catalog,
   clang-profile. Audit found unprotected wide grids + tables.
   ========================================================================= */

/* ---- Leaderboard feed table: stack rows on phones ---------------- */
@media (max-width: 767px) {
  .lb-feed-tbl .tbl-hdr.lb-feed-hdr,
  .lb-feed-tbl.lb-feed-tbl--all .tbl-hdr.lb-feed-hdr {
    display: none !important;
  }
  .lb-feed-tbl .lb-feed-row {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
}

/* ---- Airdrop: stat grids collapse, table fonts shrink ----------- */
@media (max-width: 767px) {
  .airdrop-page .ad-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }
  .airdrop-page .ad-two-col {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .airdrop-page .ad-lb-table,
  .airdrop-page .ad-ref-table { font-size: 10.5px; }
  .airdrop-page .ad-lb-table th,
  .airdrop-page .ad-ref-table th { padding: 4px 6px; }
  .airdrop-page .ad-lb-table td,
  .airdrop-page .ad-ref-table td { padding: 6px 6px; }
}

/* ---- Agents page: tighter horizontal padding -------------------- */
@media (max-width: 767px) {
  .agents-page .agents-page-inner { padding-left: 12px; padding-right: 12px; }
}

/* ---- Skills catalog hero: stack at <=700px (was 900px breakpoint) - */
@media (max-width: 700px) {
  .sk-hero { grid-template-columns: 1fr !important; gap: 12px !important; }
}