:root {
  /* Premium black trading-terminal palette (spec: "not a chatbot
     website, a personal trading terminal"). --accent/--warn/--danger/
     --unknown keep their EXISTING semantic meaning throughout this file
     (pass/warn/fail/unknown state colors, used in dozens of existing
     rules) - only their VALUES and a few new chrome-specific tokens
     change here, so this is a real visual-identity shift without a
     risky wholesale rename across every rule and every JS string. */
  --bg: #060708;                 /* near-black base */
  --bg-2: #0b0d10;               /* deep charcoal elevated */
  --surface: rgba(255, 255, 255, 0.035);
  --surface-solid: #111318;
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.13);
  --border-soft: rgba(255, 255, 255, 0.07);
  --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  --text: #f3f4f6;               /* white primary text */
  --text-dim: #9096a1;           /* muted gray secondary text */
  --text-faint: #5c6470;
  /* Restrained Mr-Mhor red brand accent - used ONLY for chrome/identity
     (header mark, active nav indicator, primary buttons, focus rings),
     never as a semantic "pass" color - that stays green. */
  --brand: #d8ac57;
  --brand-dim: #755324;
  --brand-soft: rgba(216, 172, 87, 0.12);
  /* Subtle gold treatment reserved for Gold/XAUUSD-specific accents. */
  --gold: #cfa34a;
  --gold-soft: rgba(207, 163, 74, 0.14);
  /* Semantic state colors - unchanged meaning, slightly deepened for a
     terminal feel rather than a bright neon-glass one. */
  --accent: #2fbf71;
  --accent-2: #2f9fbf;
  --accent-dim: #1c7a48;
  --warn: #d19a3d;
  --danger: #e0464c;
  --unknown: #747c8c;
  --radius: 14px;
  --radius-sm: 9px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

body {
  /* Restrained, near-invisible depth - no neon glow washes (spec:
     "do not make every element glow", "not a generic crypto casino"). */
  background-image: radial-gradient(circle at 50% 0%, rgba(224, 70, 76, 0.035), transparent 50%);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }

/* -- authenticated shell --------------------------------------------------
   One fixed grid: [safe-area + header] [one scroll container] [nav dock +
   safe-area]. The chat composer lives INSIDE the scroll row's chat view,
   directly above the dock, so nothing overlaps. Height follows 100dvh, and
   the visual viewport (--app-height, set in app.js) while the on-screen
   keyboard is open. */
body.app-body { position: fixed; inset: 0; overflow: hidden; }
#app {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--app-offset, 0px);
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
#app > #topbar { grid-row: 1; }
#app > #banner-slot { grid-row: 2; }
#app > #views { grid-row: 3; }
#app > #bottom-nav { grid-row: 4; }
body.keyboard-open #bottom-nav { display: none; }
body.keyboard-open #chat-input-bar { padding-bottom: 8px; }

.boot-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 13px;
}
.boot-screen img { border-radius: 50%; opacity: 0.9; }

/* -- public shell ------------------------------------------------------------ */
body.public-body { min-height: 100dvh; }
#public-shell { min-height: 100dvh; display: flex; flex-direction: column; padding: var(--safe-top) 0 var(--safe-bottom); }
.public-header { display: flex; align-items: center; padding: 12px 16px; }
.public-header .brand-chrome { text-decoration: none; color: inherit; }
.public-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px 24px; }
.public-page { display: none; width: 100%; justify-content: center; }
.public-page.active { display: flex; }
.public-content { width: 100%; max-width: 520px; line-height: 1.55; font-size: 14.5px; color: var(--text); }
.public-content h1 { font-size: 22px; margin: 0 0 8px; }
.public-content p { color: var(--text-dim); }
.public-footer { display: flex; justify-content: center; gap: 18px; padding: 14px 16px 18px; font-size: 12.5px; }
.public-footer a { color: var(--text-dim); text-decoration: none; }
.login-card a.btn { text-align: center; text-decoration: none; display: block; }
.login-card a.link-btn { text-decoration: underline; }
.plans-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }

/* -- shared glass surface --------------------------------------------------- */

.glass {
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* -- sign-in / registration cards (public shell) ------------------------ */

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.brand-mark {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand);
}

.login-card h1 { font-size: 22px; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.login-card p.sub { color: var(--text-dim); font-size: 13px; margin: 0 0 6px; }
.login-card form { width: 100%; display: flex; flex-direction: column; gap: 12px; }

.login-card input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 15px;
  font-size: 16px;
  width: 100%;
}
.login-card input:focus { outline: none; border-color: var(--brand-dim); }

.login-error { color: var(--danger); font-size: 13px; min-height: 16px; text-align: center; }
.login-success { color: var(--gold); font-size: 13px; text-align: center; margin-bottom: 8px; }

.login-field { width: 100%; }
.login-field.hidden { display: none; }

.link-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 2px 4px;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
.link-btn:active { color: var(--text); }

.login-footnote { color: var(--text-faint); font-size: 11px; margin: 2px 0 0; }

/* -- top bar / views ------------------------------------------------------ */

#topbar {
  padding: calc(10px + var(--safe-top)) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(5, 7, 12, 0.85);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 5;
}

#topbar .title { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }

.topbar-right { display: flex; align-items: center; gap: 8px; }

.demo-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-dim);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--brand);
}
.demo-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 4px rgba(47,191,113,0.5); }
.demo-pill .dot.warn { background: var(--warn); box-shadow: 0 0 4px rgba(209,154,61,0.5); }
.demo-pill .dot.fail { background: var(--danger); box-shadow: 0 0 4px rgba(224,70,76,0.5); }

.profile-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* UI convenience only (see web/js/api.js's module docstring) - never
   the source of truth for what an account may do. A small corner dot
   on the profile icon, not a text pill - the role itself is never the
   headline of the chrome. */
.role-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  font-size: 0;
}
.role-dot.owner { background: var(--accent); }
.role-dot.public { background: var(--accent-2); }

.status-drawer {
  position: absolute;
  top: 100%;
  right: 12px;
  z-index: 20;
  width: min(300px, 88vw);
  margin-top: 6px;
  padding: 14px;
}
.status-drawer.hidden { display: none; }

#views {
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 12px 12px calc(16px + var(--safe-bottom));
  display: none;
  /* Paint/layout containment - a panel's own descendants (including
     any backdrop-filter/glass surface) can never visually or
     spatially escape this box, regardless of their own position/
     transform. This is the real fix for cross-panel bleed - not a
     z-index or opaque-cover workaround. */
  contain: layout paint;
}

.view.active { display: block; }

/* Hard backstop: whatever OTHER rule (however specific - an id
   selector, a future utility class, an inline style) tries to give an
   inactive panel a non-"none" display, this wins. This is what makes
   view isolation a structural guarantee instead of something that can
   silently regress the next time a panel gets an id-selector layout
   rule (see #chat-view below, which used to do exactly that). */
.view:not(.active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -- bottom nav ------------------------------------------------------------ */

#bottom-nav {
  display: flex;
  border-top: 1px solid var(--border-soft);
  background: rgba(5, 7, 12, 0.9);
  backdrop-filter: blur(14px);
  padding-bottom: var(--safe-bottom);
}

#bottom-nav button {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-faint);
  padding: 8px 2px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  transition: color 0.15s ease;
}

#bottom-nav button { position: relative; }
#bottom-nav button.active { color: var(--brand); }
#bottom-nav button.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: var(--brand);
}
#bottom-nav button .icon { font-size: 18px; line-height: 1; }
.nav-label { letter-spacing: 0.01em; font-weight: 600; }

/* -- cards ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-bottom: 10px;
  box-shadow: var(--card-shadow);
}

.card h3 { margin: 0 0 8px; font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.card .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; gap: 10px; }
.card .row .k { color: var(--text-dim); }
.card .row .v { text-align: right; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.02em; }
.pill.pass { background: rgba(47,191,113,0.14); color: var(--accent); }
.pill.fail { background: rgba(224,70,76,0.14); color: var(--danger); }
.pill.unknown { background: rgba(116,124,140,0.14); color: var(--unknown); }
.pill.na { background: rgba(116,124,140,0.08); color: var(--text-dim); }
.pill.warn { background: rgba(209,154,61,0.14); color: var(--warn); }

/* -- chat ------------------------------------------------------------------- */

/* Deliberately scoped to (.view.active.chat-panel), never a bare
   #chat-view id selector - an id selector here would outrank
   .view.active's own display rule (id > any number of classes) and
   permanently defeat the tab-switching mechanism above, which is
   exactly the bug this comment replaces (the chat panel was always
   display:flex, bled behind every other tab). See index.html: the
   chat panel carries both "view" and "chat-panel" classes. */
.view.active.chat-panel { display: flex; flex-direction: column; padding: 0; }
#chat-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }

.welcome-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 16px;
  gap: 6px;
  min-height: 40vh;
}
.welcome-mark { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: var(--brand); margin-bottom: 4px; }
.welcome-title { font-size: 26px; font-weight: 650; letter-spacing: -0.015em; }
.welcome-tagline { font-size: 14px; color: var(--text-dim); margin: 6px 0 20px; font-style: italic; }
.welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* -- message rows (spec Part 3: compact, content-sized bubbles, an
   avatar/name for Mr Mhor, a subtle timestamp - never a fixed/minimum
   bubble height) ------------------------------------------------------ */

.msg-row { display: flex; gap: 8px; max-width: 88%; }
.msg-row.user { align-self: flex-end; justify-content: flex-end; }
.msg-row.assistant { align-self: flex-start; }
.msg-row.system { align-self: center; max-width: 96%; }

.msg-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dim));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.msg-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-row.user .msg-col { align-items: flex-end; }

.msg-meta { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 3px; }
.msg-name { font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.msg-time { font-size: 10px; color: var(--text-faint); }
.msg-meta-user { margin-top: 3px; margin-bottom: 0; padding: 0 2px; }

.bubble { display: inline-block; max-width: 100%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.42; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.bubble.user { background: linear-gradient(135deg, var(--brand), var(--brand-dim)); color: #fff; border-bottom-right-radius: 4px; font-weight: 500; }
.bubble.assistant { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble.system { background: transparent; color: var(--text-faint); font-size: 11.5px; text-align: center; }
.bubble.error { border-color: rgba(224,70,76,0.4); }
/* A bubble that holds ONLY a structured card (trading-card/decision-
   card) - the card already supplies its own border/background/padding,
   so the bubble's own chrome is stripped to avoid a redundant box
   nested inside another box. white-space MUST be reset back to normal
   here: .bubble sets pre-wrap so a plain-text reply's own line breaks
   render correctly, but that value inherits into the card's markup -
   an indented multi-line template string - and pre-wrap makes those
   whitespace-only text nodes between the card's block elements
   significant, rendering every one of them as visible blank space
   (the exact "unnecessary empty space" the card must never have). The
   same card renders content-tight everywhere else in the app (Home,
   the analysis panel) because those spots never sit inside a
   pre-wrap ancestor in the first place. */
.bubble.bubble-card { background: none; border: none; padding: 0; border-radius: 0; white-space: normal; }

.bubble .retry-row { margin-top: 8px; display: flex; }
.bubble .retry-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 5px 12px; font-size: 12px; }

.quick-action-row { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.quick-action-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12.5px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.chip:active { background: rgba(255,255,255,0.12); }
.chip.disabled { opacity: 0.4; }

#chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--border-soft);
  background: rgba(5,7,12,0.85);
  backdrop-filter: blur(14px);
}

#chat-input-bar textarea {
  flex: 1;
  resize: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  padding: 11px 15px;
  font-size: 15px;
  max-height: 120px;
  line-height: 1.35;
}
#chat-input-bar textarea:focus { outline: none; border-color: var(--brand-dim); }

.send-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.send-btn:disabled { background: var(--surface-2); color: var(--text-faint); }
.send-btn:active:not(:disabled) { transform: scale(0.92); }

.loading-dots { display: inline-flex; gap: 3px; align-items: center; }
.loading-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); animation: pulse 1.1s infinite ease-in-out; }
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }


/* -- controls / buttons ------------------------------------------------------ */

.btn { border-radius: var(--radius-sm); padding: 11px 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13.5px; transition: transform 0.1s ease; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-dim)); color: #fff; border: none; font-weight: 650; }
.btn.danger { border-color: rgba(224,70,76,0.5); color: var(--danger); }
.btn.small { padding: 7px 11px; font-size: 12px; }
.btn.full { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.empty-state { color: var(--text-dim); font-size: 13px; text-align: center; padding: 34px 10px; }
.loading { color: var(--text-dim); font-size: 13px; text-align: center; padding: 18px; }
.section-title { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 4px 8px; font-weight: 600; }

/* -- forward-testing screen: visual, not tabular ----------------------------- */

.progress-track { background: var(--surface-2); border-radius: 20px; height: 8px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 20px; transition: width 0.4s ease; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 4px; }
.stat-tile { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 13px; box-shadow: var(--card-shadow); }
.stat-tile .num { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.stat-tile .lbl { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.stat-tile .num.pos { color: var(--accent); }
.stat-tile .num.neg { color: var(--danger); }

.timeline { display: flex; flex-direction: column; gap: 8px; }
.timeline-item {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.timeline-item.pass { border-left-color: var(--accent); }
.timeline-item.fail { border-left-color: var(--danger); }
.timeline-item.unknown { border-left-color: var(--unknown); }
.timeline-item:last-child { border-bottom: 1px solid var(--border-soft); }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.timeline-dot.pass { background: var(--accent); }
.timeline-dot.fail { background: var(--danger); }
.timeline-dot.unknown { background: var(--unknown); }
.timeline-body { flex: 1; font-size: 13px; }
.timeline-body .inst { font-weight: 750; font-size: 13.5px; }
.timeline-body .meta { color: var(--text-faint); font-size: 11px; margin-top: 2px; }

.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 6px 0; }
.bar-row .bar-label { width: 76px; flex: none; color: var(--text-dim); }
.bar-row .bar-track { flex: 1; height: 7px; border-radius: 20px; background: var(--surface-2); overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bar-row .bar-val { width: 56px; flex: none; text-align: right; color: var(--text-faint); font-size: 11px; }

/* -- history screen ----------------------------------------------------------- */

.history-msg { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.history-msg:last-child { border-bottom: none; }
.history-msg .who { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.history-msg .txt { color: var(--text); white-space: pre-wrap; }
.history-msg.user .who { color: var(--brand); }

/* -- brand chrome (topbar wordmark) ---------------------------------------- */

.brand-chrome { display: flex; align-items: center; gap: 9px; }
.brand-logo { flex: none; display: flex; filter: drop-shadow(0 0 3px rgba(224,70,76,0.25)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-wordmark { font-size: 13.5px; font-weight: 750; letter-spacing: 0.04em; color: var(--text); }
.brand-wordmark .brand-ai { color: var(--brand); margin-left: 3px; }
.brand-tagline { font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; }

/* -- home screen (command center) ------------------------------------------ */

.home-primary { margin-bottom: 6px; }
.home-primary .trading-card,
.home-primary .decision-card { margin-top: 0; border-width: 1.5px; box-shadow: 0 6px 26px rgba(0,0,0,0.5); }
.home-primary .decision-card { padding: 18px 18px 17px; }
.home-primary .tc-head { padding: 16px 17px 12px; }
.home-primary .tc-body { padding: 13px 17px 16px; }
.home-primary .dc-inst-badge { width: 52px; height: 52px; font-size: 25px; }
.home-primary .dc-instrument, .home-primary .tc-instrument { font-size: 19px; }
.home-primary .dc-status { font-size: 28px; margin-top: 15px; letter-spacing: 0.01em; }
.home-primary .dc-status-icon { font-size: 21px; }
.home-primary .dc-stats { grid-template-columns: repeat(3, 1fr); margin: 13px 0; }
.home-primary .dc-stat { padding: 10px 8px; }
.home-primary .dc-stat .dc-stat-val { font-size: 17px; }
.home-primary-label { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.09em; margin: 2px 0 8px; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 14px 0; }
.quick-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 4px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--card-shadow);
  transition: background 0.15s ease, transform 0.1s ease;
}
.quick-tile:active { transform: scale(0.96); background: var(--surface-2); }
.quick-tile .qt-icon { font-size: 20px; line-height: 1; color: var(--text); }

/* -- markets screen ---------------------------------------------------------- */

.category-tabs { display: flex; gap: 6px; margin: 2px 0 12px; overflow-x: auto; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: none;
  padding: 8px 17px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.category-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(224,70,76,0.35); }

.market-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  box-shadow: var(--card-shadow);
}
.market-row .mr-icon {
  flex: none;
  font-size: 19px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.market-row .mr-text { flex: 1; min-width: 0; }
.market-row .mr-name { font-weight: 750; font-size: 15px; letter-spacing: -0.005em; }
.market-row .mr-sub { color: var(--text-faint); font-size: 11px; margin-top: 2px; }
.market-row .mr-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--text-faint); font-size: 16px; }
.market-row .mr-right .pill { font-size: 9.5px; }
.market-row .mr-chev { color: var(--text-faint); font-size: 16px; margin-left: 2px; }
.market-row.gold-accent { border-color: rgba(207,163,74,0.4); }
.market-row.gold-accent .mr-name { color: var(--gold); }
.market-row.selected { border-color: var(--brand); border-width: 1.5px; box-shadow: 0 0 0 1px var(--brand); }

/* -- full-screen overlay panels (onboarding; owner drill-downs) ------------- */

.analysis-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.analysis-panel.hidden { display: none; }
.ap-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(5, 7, 12, 0.9);
  backdrop-filter: blur(14px);
}
.ap-back { flex: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ap-title-group { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ap-wordmark { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--brand); text-transform: uppercase; }
.ap-title { font-weight: 750; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-body { flex: 1; overflow-y: auto; padding: 12px 12px calc(16px + var(--safe-bottom)); }

/* -- trades screen tabs ------------------------------------------------------ */

.trades-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.trades-tab { flex: 1; padding: 9px 4px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 13px; font-weight: 700; }
.trades-tab.active { background: var(--brand-soft); border-color: var(--brand); color: var(--text); }

.trades-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px 30px; gap: 6px; }
.trades-empty-icon { font-size: 34px; opacity: 0.6; margin-bottom: 6px; }
.trades-empty-title { font-size: 15px; font-weight: 650; }
.trades-empty-sub { font-size: 12.5px; color: var(--text-dim); max-width: 260px; line-height: 1.4; margin-bottom: 14px; }

/* -- more screen -------------------------------------------------------------- */

.more-section { margin-bottom: 4px; }

.settings-menu { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.settings-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  padding: 15px 15px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--surface-2); }
.sr-icon {
  flex: none;
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-label { flex: 1; font-size: 14px; font-weight: 600; }
.sr-chev { flex: none; color: var(--text-faint); font-size: 17px; }

/* -- chart (real candlesticks - see web/js/chart.js) ----------------------- */

.chart-timeframes { display: flex; gap: 6px; margin: 2px 0 12px; }
.chart-tf {
  flex: 1;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
}
.chart-tf.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(224,70,76,0.35); }

.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  padding: 12px 10px 10px;
  position: relative;
}
.lwc-mount { width: 100%; height: 100%; touch-action: none; }

.chart-status-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.chart-status-banner.loading { background: var(--surface-2); color: var(--text-dim); }
.chart-status-banner.stale { background: rgba(209,154,61,0.14); color: var(--warn); }
.chart-status-banner.closed { background: rgba(116,124,140,0.14); color: var(--unknown); }
.chart-status-banner.unavailable { background: rgba(224,70,76,0.12); color: var(--danger); }

.chart-empty {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
  padding: 0 20px;
}

.chart-meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 0 2px; }
.chart-meta-row .chart-instrument { font-weight: 800; font-size: 15px; }
.chart-instrument-sub { font-weight: 500; font-size: 12px; color: var(--text-faint); margin-left: 4px; }
.chart-meta-row .chart-asof { font-size: 10.5px; color: var(--text-faint); }

/* -- responsive safety ---------------------------------------------------- */

@media (max-width: 340px) {
  .trading-card .tc-levels { grid-template-columns: 1fr 1fr; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
}


/* -- Phase 3 final pass: onboarding wizard / owner control center inputs,
   drawdown decision banner ------------------------------------------------ */

.card input[type="text"],
.card input[type="number"],
.card input[type="password"] {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 13px;
  font-size: 15px;
  width: 100%;
  margin-bottom: 8px;
}
.card input:focus { outline: none; border-color: var(--brand-dim); }
.card .cap-input { width: 90px; margin-bottom: 0; }

.drawdown-banner {
  margin: 10px 14px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  border: 1px solid var(--brand-dim);
}
.drawdown-banner.hidden { display: none; }
.drawdown-banner-text { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }

/* Completion pass: account mode is MT5-verified; REAL must be unmistakable. */
.mode-notice { margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.35); font-size: 13px; line-height: 1.4; }
.real-warning { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: rgba(220, 38, 38, 0.14); border: 2px solid #dc2626; color: #fecaca; font-size: 14px; line-height: 1.45; }
.real-warning strong, .pill.mode-real { letter-spacing: 0.08em; font-weight: 800; }

/* Mr Mhor FX identity and the five live market cards. State colors remain
   semantic: green is positive, amber warns, and red marks a problem. */
:root {
  --brand: #d7b466;
  --brand-dim: #725a2b;
  --brand-soft: rgba(215, 180, 102, 0.13);
  --gold: #e8c77a;
  --gold-soft: rgba(232, 199, 122, 0.14);
}
body { background-image: radial-gradient(circle at 50% 0%, rgba(215, 180, 102, 0.045), transparent 52%); }
#topbar { background: rgba(9, 10, 9, 0.94); }
.brand-logo { width: 36px; height: 36px; overflow: hidden; border-radius: 50%; filter: none; }
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-wordmark .brand-ai { color: var(--gold); }
.identity-logo { display: block; width: 108px; height: 108px; object-fit: cover; border-radius: 50%; border: 1px solid var(--brand-dim); }
body.public-body { background-image: radial-gradient(circle at 50% 18%, rgba(215, 180, 102, 0.09), transparent 57%); }
.demo-pill { color: #cae7f7; background: rgba(40, 119, 168, 0.11); border-color: rgba(72, 153, 197, 0.38); }
.category-tab.active, .chart-tf.active { color: #17130a; box-shadow: none; }
.btn.primary { color: #17130a; }
.home-five-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; }
.home-five-note { color: var(--text-dim); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.home-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 18px; }
.home-chart-card { min-width: 0; padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: #111410; box-shadow: var(--card-shadow); }
.home-chart-card.gold-accent { border-color: rgba(232, 199, 122, 0.48); background: linear-gradient(150deg, #211d13, #111410 63%); }
.home-chart-head { display: flex; align-items: start; justify-content: space-between; gap: 7px; }
.home-chart-head strong { display: block; font-size: 15px; letter-spacing: 0.02em; }
.home-chart-head span { display: block; color: var(--text-dim); font-size: 11px; margin-top: 2px; }
@media (min-width: 700px) {
  .home-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* Plan-terms acceptance (onboarding, before payment) */
.terms-accept { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; margin: 4px 0 12px; }
.terms-accept input[type="checkbox"] { accent-color: var(--gold); width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
#ob-pay-network { width: 100%; margin-bottom: 10px; }


/* -- application shell v2: single header, one scroll container per view,
   composer above the nav dock, safe areas on both edges ------------------- */

#banner-slot:empty { display: none; }
.view { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 16px 20px; }
.view.active.chat-panel { display: flex; flex-direction: column; padding: 0; min-height: 0; }
#chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; gap: 8px; }
#chat-input-bar { flex: none; padding: 8px 12px 10px; }
#chat-input-bar textarea { font-size: 16px; min-width: 0; }
#chat-input-bar textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-grid:empty { display: none; }
.chat-panel.has-welcome .quick-action-row { display: none; } /* 16px: iOS never zooms the page on focus */
.quick-action-row { flex: none; padding: 6px 12px; }
#bottom-nav { padding-bottom: max(var(--safe-bottom), 4px); }

.mode-badge { font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; border-radius: 20px; padding: 4px 9px; border: 1px solid var(--border); }
.mode-badge.demo { color: #cae7f7; background: rgba(40, 119, 168, 0.11); border-color: rgba(72, 153, 197, 0.38); }
.mode-badge.real { color: #17130a; background: var(--gold); border-color: var(--gold); }

/* chat: compact premium conversation */
.welcome-screen { min-height: 0; flex: 1; padding: 18px 8px; gap: 12px; }
.welcome-title { font-size: 17px; font-weight: 600; color: var(--text-dim); max-width: 300px; line-height: 1.4; letter-spacing: 0; }
.msg-row { max-width: 92%; gap: 7px; }
.msg-avatar { width: 22px; height: 22px; font-size: 10px; background: linear-gradient(135deg, var(--gold), var(--brand-dim)); color: #17130a; }
.bubble { padding: 8px 12px; font-size: 14px; border-radius: 14px; }
.msg-meta { padding: 3px 2px 0; }
.bubble.has-status { white-space: normal; width: 100%; }
.msg-row.assistant:has(.has-status) { max-width: 100%; width: 100%; }
.status-card { margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.22); overflow: hidden; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-soft); }
.sc-row:first-child { border-top: none; }
.sc-icon { flex: none; width: 20px; text-align: center; }
.sc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.sc-name strong { white-space: nowrap; }
.sc-row .pill { flex: none; white-space: nowrap; max-width: 58%; overflow: hidden; text-overflow: ellipsis; }
.sc-price { color: var(--text-dim); font-size: 11.5px; }
.sc-updated { padding: 6px 10px; color: var(--text-faint); font-size: 10.5px; border-top: 1px solid var(--border-soft); }
.pill.wait { background: rgba(215, 180, 102, 0.12); color: var(--gold); }

/* charts: one component, explicit states, never an endless blank panel */
.chart-view { position: relative; min-width: 0; }
.chart-canvas-wrap { position: relative; width: 100%; height: 240px; min-width: 0; }
.chart-view.compact .chart-canvas-wrap { height: 140px; }
.chart-state { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.chart-view[data-state="ready"] .chart-state { display: none; }
.chart-view[data-state="stale"] .chart-state { inset: auto 0 0 0; justify-content: flex-start; }
.chart-state-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; text-align: center; color: var(--text-dim); font-size: 12.5px; pointer-events: auto; }
.chart-view[data-state="stale"] .chart-state-inner { flex-direction: row; background: rgba(209, 154, 61, 0.12); border-radius: 8px; color: var(--warn); font-size: 11.5px; padding: 5px 8px; }
.chart-view.compact .chart-state-inner { font-size: 11.5px; }
.chart-meta-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-dim); margin-top: 6px; min-height: 14px; }
.chart-meta-row { flex-wrap: wrap; row-gap: 2px; }
.chart-meta-row > span { min-width: 0; overflow-wrap: anywhere; }
.chart-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #2fbf71; }
.chart-live[hidden] { display: none; }
.chart-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #2fbf71; animation: chart-live-pulse 2s ease-in-out infinite; }
@keyframes chart-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .chart-live-dot { animation: none; } }
.chart-timeframes { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.markets-detail-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
#markets-detail { margin-top: 12px; }
.home-chart-body { margin-top: 8px; min-width: 0; }
.home-chart-open { flex: none; color: var(--gold); border: 1px solid var(--brand-dim); border-radius: 8px; background: var(--brand-soft); padding: 4px 10px; font-size: 14px; line-height: 1; }
.home-chart-card { padding: 12px; }
.market-row { width: 100%; }
.mr-sub { display: block; }

/* overlays sit inside the safe areas too */
.analysis-panel { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.status-drawer { position: fixed; top: calc(var(--safe-top) + 58px); right: 12px; }

@media (max-width: 390px) {
  .home-chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-view.compact .chart-canvas-wrap { height: 150px; }
}
@media (min-width: 700px) {
  .view { padding: 16px 24px 24px; }
  .chart-canvas-wrap { height: 320px; }
  .chart-view.compact .chart-canvas-wrap { height: 170px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .chart-canvas-wrap { height: 200px; }
  .chart-view.compact .chart-canvas-wrap { height: 120px; }
}

/* Public experience: the same identity surrounds marketing and onboarding. */
.public-header { justify-content: space-between; width: 100%; max-width: 1320px; margin: auto; padding: 16px clamp(18px,4vw,52px); border-bottom: 1px solid var(--border-soft); }
.public-header-nav { display: flex; align-items: center; gap: clamp(14px,2.5vw,32px); }
.public-header-nav a, .text-link { color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 600; }
.public-header-nav a:hover, .text-link:hover { color: var(--gold); }
.public-header-nav .public-sign-in { color: var(--gold); border: 1px solid rgba(207,163,74,.4); border-radius: 9px; padding: 10px 17px; }
.public-main { justify-content: flex-start; padding: 0 20px 36px; }
.public-page[data-page="landing"] { display: none; }
.public-page[data-page="landing"].active { display: block; }
.landing-wrap { max-width: 1220px; margin: auto; width: 100%; }
.landing-hero { min-height: 490px; display: grid; grid-template-columns: 1.2fr 0.85fr; align-items: center; gap: 40px; padding: 48px 20px; }
.landing-intro { max-width: 650px; }
.landing-kicker { color: var(--gold); font-size: 11px; letter-spacing: .18em; font-weight: 800; text-transform: uppercase; }
.landing-intro h1 { font-size: clamp(44px,6.6vw,82px); line-height: 1.02; letter-spacing: -.055em; margin: 18px 0; max-width: 650px; }
.landing-lede { color: #b4b6b9; font-size: clamp(16px,1.8vw,20px); line-height: 1.6; max-width: 560px; }
.landing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 18px; }
.landing-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; text-decoration: none; }
.landing-invite { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.landing-identity { display: grid; place-items: center; background: radial-gradient(circle,rgba(207,163,74,.12),transparent 68%); }
.landing-identity img { display: block; width: min(100%,460px); height: auto; object-fit: contain; }
.landing-section { padding: 52px 20px; border-top: 1px solid var(--border-soft); }
.landing-section h2 { max-width: 760px; margin: 10px 0 20px; font-size: clamp(27px,3.2vw,43px); line-height: 1.13; letter-spacing: -.035em; }
.landing-section p { color: var(--text-dim); line-height: 1.65; max-width: 680px; }
.landing-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 28px; }
.landing-steps article, .landing-callout { padding: 22px; border: 1px solid var(--border-soft); border-radius: 14px; background: #101114; }
.landing-steps article span, .landing-journey b { color: var(--gold); font-size: 12px; letter-spacing: .12em; }
.landing-steps h3 { font-size: 16px; margin: 24px 0 8px; }
.landing-steps article p { margin: 0; font-size: 13px; }
.landing-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,6vw,90px); align-items: center; }
.landing-journey { border-top: 1px solid var(--border); }
.landing-journey div { display: flex; gap: 30px; padding: 17px 0; border-bottom: 1px solid var(--border); align-items: center; font-size: 14px; }
.landing-symbols { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 26px; }
.landing-symbols span { padding: 16px 9px; text-align: center; background: #101114; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 12px; font-weight: 700; }
.landing-callout-mark { color: var(--gold); font-size: 32px; font-weight: 900; }
.landing-callout h3 { font-size: 22px; margin: 12px 0 6px; }
.landing-section .btn { display: inline-block; margin-top: 12px; text-decoration: none; padding: 12px 20px; }
.landing-faq { max-width: 850px; }
.landing-faq details { border-bottom: 1px solid var(--border); padding: 17px 2px; }
.landing-faq summary { cursor: pointer; font-weight: 650; min-height: 30px; }
.landing-faq details p { margin-bottom: 4px; }
.landing-disclosure { padding: 20px; color: var(--text-dim); font-size: 12px; line-height: 1.6; border-top: 1px solid var(--border-soft); }
.public-page:not([data-page="landing"]) { padding: clamp(28px,6vh,70px) 0; }
.public-page:not([data-page="landing"]) .login-card, .public-page:not([data-page="landing"]) .public-content { border-top: 2px solid var(--gold); }
.public-content { background: #101114; border-radius: 14px; padding: clamp(20px,3vw,36px); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 800px) {
  .landing-hero { grid-template-columns: 1fr .7fr; min-height: 380px; gap: 8px; padding: 40px 0; }
  .landing-steps { grid-template-columns: repeat(2,1fr); }
  .landing-symbols { grid-template-columns: repeat(3,1fr); }
  .landing-two { gap: 24px; }
}
@media (max-width: 600px) {
  .public-header-nav a:first-child { display: none; }
  .public-header-nav { gap: 12px; }
  .public-header-nav a { font-size: 12px; }
  .landing-hero { display: flex; flex-direction: column-reverse; align-items: stretch; padding: 14px 0 38px; gap: 2px; }
  .landing-identity { height: 200px; }
  .landing-identity img { width: 220px; }
  .landing-intro h1 { font-size: clamp(43px,11vw,62px); margin: 10px 0; }
  .landing-actions { flex-direction: column; margin-top: 23px; }
  .landing-actions .btn { width: 100%; }
  .landing-section { padding: 38px 0; }
  .landing-two { display: block; }
  .landing-two > :last-child { margin-top: 24px; }
  .landing-steps { gap: 8px; }
  .landing-steps article { padding: 16px; }
  .landing-steps h3 { margin-top: 14px; }
  .landing-symbols { grid-template-columns: repeat(2,1fr); }
}

/* Markets: selector and chart form one workspace, compact on phones and
   horizontally useful on iPad/desktop. All prices/states come from /market. */
#markets-list { min-width: 0; }
.market-workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 3px 0 12px; margin-bottom: 12px; }
.workspace-eyebrow, .chart-source-label { font-size: 9px; letter-spacing: .13em; font-weight: 800; color: var(--gold); }
.market-workspace-heading h1 { margin: 4px 0; font-size: clamp(22px,3vw,32px); line-height: 1.1; }
.market-workspace-heading p { margin: 0; font-size: 12px; color: var(--text-dim); }
.market-feed-label { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.market-browser { min-width: 0; }
.markets-list-rows { display: flex; gap: 7px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: thin; }
.markets-list-rows .market-row { flex: 0 0 min(42vw,160px); min-width: 0; scroll-snap-align: start; padding: 10px; border-radius: 9px; background: #131517; }
.market-row.selected { border-color: var(--gold); background: #201c13; }
.market-row .mr-icon, .market-row .mr-chev { display: none; }
.market-row .mr-name { font-size: 13px; }
.market-row .mr-sub { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-row .mr-right { display: flex; align-items: end; flex-direction: column; }
.mr-status { display: flex; flex-direction: column; align-items: end; white-space: nowrap; font-size: 10px; color: var(--text-faint); }
.market-quote-value { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.mr-broker-status { display: block; font-size: 9px; color: var(--text-faint); }
#markets-detail { margin-top: 6px; background: #101214; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.markets-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.markets-detail-head > div { display: flex; align-items: baseline; gap: 8px; }
.chart-view .chart-canvas-wrap { height: clamp(270px,42vh,520px); }
.chart-view.compact .chart-canvas-wrap { height: 140px; }
.chart-timeframes .chart-tf { min-width: 42px; min-height: 38px; }
.chart-timeframes .chart-tf.active { background: var(--gold); color: #17130a; border-color: var(--gold); }
#markets-detail .btn-row { margin: 12px 0 0; }
@media (max-width: 600px) {
  .market-feed-label, .chart-source-label { display: none; }
  .market-workspace-heading { margin-bottom: 8px; }
  #markets-detail { padding: 9px; }
  .chart-view .chart-canvas-wrap { height: min(46dvh,370px); min-height: 230px; }
  .chart-view.compact .chart-canvas-wrap { height: 140px; min-height: 0; }
}
@media (min-width: 900px) {
  #markets-list { display: grid; grid-template-columns: minmax(230px,290px) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 0 16px; }
  .market-workspace-heading { grid-column: 1 / -1; }
  .market-browser { grid-column: 1; }
  .markets-list-rows { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .markets-list-rows .market-row { width: 100%; min-height: 57px; }
  .category-tabs { flex-wrap: wrap; }
  #markets-detail { grid-column: 2; margin: 0; align-self: start; }
}

/* Conversation is its own destination. Messages fit their content; market
   status blocks keep the server-sanitized fields and no private reasoning. */
.chat-context { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: #101214; flex: none; }
.chat-context img { border-radius: 8px; object-fit: cover; }
.chat-context h1 { font-size: 14px; letter-spacing: -.01em; margin: 0; }
.chat-context p { color: var(--text-dim); font-size: 10px; margin: 3px 0 0; }
.msg-avatar { background: none; width: 28px; height: 28px; overflow: hidden; border: 1px solid rgba(232,199,122,.35); border-radius: 8px; }
.msg-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.msg-row { max-width: min(86%,670px); }
.msg-row.assistant { max-width: min(92%,700px); }
.msg-meta { padding: 0 3px 4px; }
.bubble { max-width: 100%; padding: 10px 13px; line-height: 1.52; border-radius: 11px; box-shadow: none; }
.bubble.user { background: #25292b; border: 1px solid #3a3f40; color: #f6f6f4; border-radius: 11px 11px 3px 11px; }
.bubble.assistant { background: #151719; border: 1px solid rgba(232,199,122,.19); border-left: 2px solid rgba(232,199,122,.6); border-radius: 3px 11px 11px 11px; }
.bubble.bubble-card { border: 0; }
#chat-messages { gap: 13px; padding: 16px; scroll-behavior: auto; }
#chat-input-bar { background: #111315; border-top: 1px solid var(--border); }
#chat-text { background: #1c1e20; border-color: #35383b; border-radius: 12px; }
#chat-text:focus-visible { border-color: var(--gold); outline: 0; }
.quick-action-row { background: #111315; padding: 9px 12px; }
@media (min-width: 850px) {
  .chat-context, #chat-messages, #quick-action-row, #chat-input-bar { padding-left: max(24px, calc((100% - 850px)/2)); padding-right: max(24px, calc((100% - 850px)/2)); }
}

/* Trade ledger groups one state at a time, with stable tab geometry. */
.ledger-heading { border-bottom: 1px solid var(--border); padding: 4px 0 13px; margin-bottom: 12px; }
.ledger-heading h1 { font-size: clamp(23px,3vw,32px); margin: 4px 0; }
.ledger-heading p { margin: 0; color: var(--text-dim); font-size: 12px; }
.trades-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 13px; }
.trades-tabs .trades-tab { min-width: 0; min-height: 46px; padding: 7px 4px; border-radius: 8px; background: #17191b; font-size: 11px; border-color: var(--border-soft); }
.trades-tabs .trades-tab.active { color: var(--gold); background: #211d15; border-color: rgba(232,199,122,.5); }
.trades-tab small { display: inline-block; margin-left: 5px; color: var(--text-faint); font-size: 10px; }
#customer-ledger-content .card { background: #121415; backdrop-filter: none; box-shadow: none; }
#customer-ledger-content .row { border-bottom: 1px solid var(--border-soft); padding: 10px 0; }
#customer-ledger-content .row:last-of-type { border-bottom: 0; }
#customer-ledger-content .btn-row { margin-bottom: 12px; }

/* Current public document: purpose-built editorial layout and authentication.
   The public workflow display is illustrative; no live trading state appears. */
.public-body { overflow-x: hidden; }
.public-body #public-shell { background: #08090a; }
.public-body .public-header { max-width: none; width: 100%; border-bottom: 1px solid #292825; padding: 13px max(20px, calc((100vw - 1280px)/2)); gap: 14px; }
.public-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.public-brand-logo { flex: none; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; }
.public-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.public-brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.public-brand-name { font-size: 13px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.public-brand-name em { color: var(--gold); font-style: normal; }
.public-brand-sub { color: var(--text-faint); font-size: 9px; letter-spacing: .045em; margin-top: 3px; white-space: nowrap; }
.public-nav { display: flex; gap: clamp(13px,2vw,28px); align-items: center; }
.public-nav a { color: var(--text-dim); text-decoration: none; font-size: 12px; font-weight: 650; }
.public-nav a:hover { color: var(--gold); }
.public-nav .public-nav-login { color: var(--gold); border: 1px solid #62502b; border-radius: 8px; padding: 9px 14px; }
.public-body .public-main { display: block; flex: 1; width: 100%; padding: 0; min-width: 0; }
.public-body .public-page { display: none; width: 100%; }
.public-body .public-page.active { display: block; }
.public-body .public-page:not([data-page="landing"]) { padding: 0; }
.public-landing { max-width: 1280px; margin: auto; padding: 0 clamp(18px,3vw,44px); }
.public-hero { min-height: 510px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,58px); align-items: center; padding: clamp(42px,6vw,80px) 0; }
.public-hero-copy { max-width: 620px; }
.public-kicker { display: inline-block; color: var(--gold); font-weight: 750; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.public-live-dot { width: 5px; height: 5px; display: inline-block; background: var(--gold); border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.public-hero h1 { font-size: clamp(39px,4.8vw,69px); line-height: 1.07; letter-spacing: -.05em; margin: 15px 0 17px; }
.public-hero h1 span { color: var(--gold); }
.public-hero-lede { color: #afb3b9; line-height: 1.65; font-size: clamp(14px,1.4vw,17px); max-width: 580px; }
.public-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 25px 0; }
.public-hero-actions a, .public-invite-actions a.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 10px 19px; }
.public-btn-gold { background: var(--gold); color: #161310 !important; border: 1px solid var(--gold); font-weight: 750; }
.public-btn-ghost { color: var(--text) !important; background: #1c1d1e; border: 1px solid #484136; font-weight: 650; }
.public-trust-row { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-faint); font-size: 10px; }
.public-trust-row span::before { content: '◆'; color: var(--gold); margin-right: 6px; font-size: 8px; }
.public-terminal-preview { border: 1px solid #544731; background: linear-gradient(135deg,#191917,#0f1112 60%); box-shadow: 0 24px 80px rgba(0,0,0,.4); border-radius: 13px; padding: 18px; min-width: 0; }
.public-terminal-top { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 14px; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.public-terminal-brand { color: var(--gold); }
.public-terminal-state { color: var(--text-faint); }
.public-terminal-grid { display: grid; grid-template-columns: 1fr 106px; gap: 15px; padding-top: 17px; }
.public-terminal-label { text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-size: 9px; margin-bottom: 10px; }
.public-flow-step { display: flex; gap: 12px; align-items: center; padding: 11px; border: 1px solid var(--border-soft); border-radius: 8px; }
.public-flow-step.active { border-color: #6b5832; background: #252014; }
.public-flow-step b { color: var(--gold); font-size: 11px; }
.public-flow-step span { display: flex; flex-direction: column; min-width: 0; }
.public-flow-step strong { font-size: 11px; }
.public-flow-step small { color: var(--text-dim); font-size: 9px; margin-top: 3px; }
.public-flow-line { height: 9px; border-left: 1px solid #62502b; margin-left: 20px; }
.public-terminal-side { display: flex; flex-direction: column; gap: 7px; }
.public-mini-stat { border: 1px solid var(--border-soft); border-radius: 7px; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; }
.public-mini-stat span { color: var(--text-faint); font-size: 9px; }
.public-mini-stat b { color: var(--gold); font-size: 10px; }
.public-band { border-top: 1px solid var(--border-soft); padding: clamp(42px,5vw,70px) 0; }
.public-section-head { max-width: 820px; }
.public-section-head h2, .public-invite-band h2 { font-size: clamp(26px,3vw,40px); line-height: 1.15; letter-spacing: -.035em; margin: 9px 0; }
.public-section-head p, .public-band p { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.public-feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 26px; }
.public-feature-card, .public-security-panel { padding: 20px; border: 1px solid var(--border-soft); border-radius: 10px; background: #121415; }
.public-feature-num, .public-security-icon { color: var(--gold); font-size: 12px; }
.public-feature-card h3, .public-security-panel h3 { font-size: 15px; margin: 23px 0 8px; }
.public-feature-card p { margin: 0; }
.public-security-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 24px; }
.public-security-panel { display: flex; gap: 14px; }
.public-security-panel h3 { margin: 0 0 7px; }
.public-security-panel p { margin: 0; }
.public-security-icon { font-size: 24px; }
.public-section-head.split { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.public-section-head.split > * { flex: 1; }
.public-market-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; margin-top: 25px; }
.public-market-strip span { display: flex; flex-direction: column; padding: 16px; background: #131516; border: 1px solid var(--border-soft); border-radius: 8px; }
.public-market-strip b { font-size: 15px; }
.public-market-strip small { color: var(--text-faint); margin-top: 4px; font-size: 10px; }
.public-invite-band { display: flex; gap: 25px; justify-content: space-between; align-items: center; }
.public-invite-band > div:first-child { max-width: 620px; }
.public-invite-actions { display: flex; flex-direction: column; align-items: stretch; gap: 9px; flex: 0 0 235px; }
.public-inline-link { color: var(--gold); text-decoration: none; text-align: center; font-size: 12px; padding: 8px; }
.public-faq-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 24px; }
.public-faq-grid details { border-bottom: 1px solid var(--border); padding: 15px 0; }
.public-faq-grid summary { cursor: pointer; font-weight: 650; font-size: 13px; min-height: 26px; }
.public-risk-callout { border: 1px solid #51462d; border-radius: 10px; padding: 20px; margin-bottom: 50px; background: #171710; }
.public-risk-callout span { color: var(--gold); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.public-risk-callout p { color: var(--text-dim); line-height: 1.6; font-size: 12px; }
.public-risk-callout a { color: var(--gold); text-decoration: none; font-size: 12px; }
.public-auth-shell { max-width: 1100px; margin: auto; display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 60px; min-height: min(760px,calc(100dvh - 150px)); padding: 45px 24px; }
.public-auth-context h1 { font-size: clamp(36px,4.5vw,57px); letter-spacing: -.045em; line-height: 1.08; margin: 10px 0; }
.public-auth-context p { color: var(--text-dim); line-height: 1.6; max-width: 470px; }
.public-auth-note { display: flex; flex-direction: column; border-left: 2px solid var(--gold); padding-left: 13px; margin-top: 28px; gap: 4px; font-size: 12px; }
.public-auth-note span { color: var(--text-dim); }
.public-auth-card { max-width: none; width: 100%; text-align: left; align-items: stretch; background: #141617; border: 1px solid #474037; border-top: 2px solid var(--gold); backdrop-filter: none; padding: 27px; }
.public-auth-card h2 { margin: 0; font-size: 23px; }
.public-auth-card .sub { color: var(--text-dim); margin: 0 0 4px; font-size: 12px; }
.public-auth-card form { width: 100%; }
.public-field-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-dim); text-align: left; margin: 11px 0 5px; }
.public-auth-card input { width: 100%; min-height: 46px; }
.public-auth-card .btn { margin-top: 15px; min-height: 46px; }
.public-content-wide { max-width: 800px; }
.public-body .public-content { margin: 50px auto; width: min(100% - 32px,700px); }
.public-body .public-content h1 { font-size: clamp(26px,3vw,38px); }
.public-body .public-footer { border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
@media (max-width: 900px) {
  .public-hero { grid-template-columns: 1fr; min-height: 0; padding: 40px 0; }
  .public-terminal-preview { max-width: 680px; }
  .public-feature-grid { grid-template-columns: repeat(2,1fr); }
  .public-auth-shell { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .public-body .public-header { padding: 11px 16px; }
  .public-nav { gap: 10px; }
  .public-nav a:not(.public-nav-login) { display: none; }
  .public-brand-sub { display: none; }
  .public-landing { padding: 0 18px; }
  .public-hero { gap: 24px; padding: 35px 0 42px; }
  .public-hero h1 { font-size: clamp(36px,9.5vw,49px); }
  .public-hero-actions { flex-direction: column; }
  .public-hero-actions a { width: 100%; }
  .public-terminal-preview { padding: 12px; }
  .public-terminal-grid { grid-template-columns: 1fr; }
  .public-terminal-side { flex-direction: row; }
  .public-mini-stat { flex: 1; }
  .public-feature-grid, .public-security-grid, .public-faq-grid { grid-template-columns: 1fr; }
  .public-feature-card h3 { margin-top: 12px; }
  .public-section-head.split, .public-invite-band { display: block; }
  .public-market-strip { grid-template-columns: repeat(2,1fr); }
  .public-invite-actions { margin-top: 20px; }
  .public-auth-shell { display: block; padding: 35px 18px; min-height: 0; }
  .public-auth-context h1 { font-size: 38px; }
  .public-auth-context p { font-size: 13px; }
  .public-auth-note { margin-top: 12px; margin-bottom: 25px; }
  .public-auth-card { padding: 21px; }
}
.public-plan-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; color: var(--text-dim); font-size: 12px; margin: 22px 0 12px; }
.public-plan-preview article { background: #151718; border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: 9px; padding: 17px; display: flex; flex-direction: column; gap: 13px; }
.public-plan-preview strong { color: var(--text); font-size: 15px; }
.public-plan-preview article span { color: var(--gold); font-weight: 800; }
@media (max-width: 640px) { .public-plan-preview { grid-template-columns: 1fr; } }

/* Customer Home puts operational state before market exploration. */
.customer-status-hero { min-height: 105px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border: 1px solid rgba(232,199,122,.33); border-left: 3px solid var(--gold); background: #171817; border-radius: 10px; margin-bottom: 9px; }
.customer-status-hero[data-tone="active"] { border-left-color: var(--accent); }
.customer-status-hero[data-tone="expired"] { border-left-color: var(--danger); }
.customer-status-hero span { color: var(--gold); font-size: 9px; letter-spacing: .13em; font-weight: 800; }
.customer-status-hero h1 { font-size: clamp(20px,3vw,28px); margin: 5px 0; letter-spacing: -.025em; }
.customer-status-hero p { margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.customer-status-hero img { flex: none; border-radius: 9px; object-fit: cover; }
#home-subscription-card .card { background: #111415; border-color: var(--border-soft); backdrop-filter: none; box-shadow: none; }
#home-subscription-card .card .row { padding: 7px 0; border-top: 1px solid var(--border-soft); }
#home-subscription-card .card .row:first-of-type { border-top: 0; }
#home-view .quick-grid { gap: 8px; }
#home-view .home-chart-card { background: #111415; box-shadow: none; }
@media (min-width: 1000px) {
  #home-view[data-customer] { max-width: 1200px; }
  #home-subscription-card { max-width: 880px; }
}
.market-scan-line { font-size: 12px; color: var(--text-dim); margin: 8px 2px 0; min-height: 1em; overflow-wrap: anywhere; }