/* ═══ MarketsMill — Exness-Style Sidebar Layout ═══ */

:root {
  --sidebar-width: 240px;
  --topbar-height: 56px;
  /* Height of the mobile search row that sits under the topbar (≤768px only).
     Referenced by .main-content's padding so content clears it. */
  --mobile-search-height: 48px;
}

/* ── Base typography (light-touch readability/eye-comfort pass) ── */
/* Loaded AFTER each page's inline <style>, so these wins the cascade. */
body {
  font-size: 15px;
  line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter, system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; line-height: 1.25; }
p, li { line-height: 1.6; }
/* Tone down aggressive uppercase letter-spacing site-wide (chips/labels feel less shouty) */
[class*="label" i], [class*="-label" i], .s-card-label, .pi-label, .rd-label,
.section-title { letter-spacing: 0.3px; }

/* ── Remove dark-mode ambient glow ── */
body.has-sidebar::before { display: none !important; }

/* ── Layout Grid ── */
body.has-sidebar {
  display: flex;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-SecondaryBg);
  border-right: 1px solid var(--color-Line);
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.sidebar-logo {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-Line);
  display: flex;
  align-items: center;
}
.sidebar-logo a { display: flex; align-items: center; text-decoration: none; }
.sidebar-logo img {
  height: 24px;
  display: block;
}

/* Invert logo for light mode */
[data-theme="light"] .sidebar-logo img { filter: invert(1); }

/* Navigation sections */
.nav-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-PrimaryText);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
/* Faint lift above the recessed sub-menu panel below (see .nav-section-items).
   The sidebar is already near-black in dark mode, so the panel alone cannot go
   deep enough to read; this white wash supplies the other half of the contrast.
   A no-op in light mode, where the sidebar is already white. Only the open
   section gets it: sections default to collapsed, so applying it unconditionally
   would paint the whole nav one flat band with nothing to be lifted above. */
.nav-section:not(.collapsed) > .nav-section-header {
  background: rgba(255, 255, 255, 0.028);
}
/* Same (0,3,0) specificity as the rule above, so it must stay below it to win. */
.nav-section > .nav-section-header:hover {
  background: var(--color-HoverBg);
}
/* The header is a div acting as a button, so it needs a visible focus ring of
   its own; inset so it is not clipped by the sidebar edge. */
.nav-section-header:focus-visible {
  outline: 2px solid var(--lc-accent);
  outline-offset: -3px;
}

.nav-section-header .nav-icon {
  flex-shrink: 0;
  color: var(--color-TertiaryText);
  /* Strokes that step outside the 24-unit box mid-animation (the layer lift, the
     card swipe) must not be clipped by the SVG viewport. */
  overflow: visible;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* The icon brightens with the heading it belongs to. No hue change: the accent
   appears once in the nav, on the active item's rail (see .nav-item.active). */
.nav-section-header:hover .nav-icon,
.nav-section-header:focus-visible .nav-icon,
.nav-section:not(.collapsed) > .nav-section-header .nav-icon {
  color: var(--color-PrimaryText);
}

/* ── Menu icon motion ─────────────────────────────────────────────────────
   Each section icon animates its own idea rather than sharing one generic
   scale: the pulse traces, the layers lift, the card swipes, the second
   partner joins, the check draws, the avatar pops.

   The trigger is split by input type rather than stacked, and that split is
   load-bearing. A mouse gets hover; touch, which has no hover, gets "the
   section is open" instead - so expanding a section animates its icon, and the
   section holding the current page animates once on load. Stacking both
   triggers in one rule looked equivalent but was not: on an already-open
   section the open-state rule owns `animation`, so hovering it re-applied the
   same animation name and the browser never restarted it. The Dashboard icon
   (its section is the open one on the dashboard) was dead on hover. ── */
@keyframes lc-nav-trace {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes lc-nav-lift {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-3px); }
}
@keyframes lc-nav-swipe {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(3px); }
  70%  { transform: translateX(-1.5px); }
  100% { transform: translateX(0); }
}
@keyframes lc-nav-join {
  0%  { opacity: 0; transform: translateX(-4px); }
  60% { opacity: 1; transform: translateX(0); }
}
@keyframes lc-nav-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* A full revolution, so the gear lands exactly where it started and nothing
   snaps back when the animation drops off. */
@keyframes lc-nav-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes lc-nav-tile {
  0%   { opacity: 0.3; transform: scale(0.55); }
  60%  { opacity: 1;   transform: scale(1.1); }
  100% { opacity: 1;   transform: scale(1); }
}

/* The traced icons need a normalised dash length; the markup carries
   pathLength="100" so 100 here is exactly one full stroke (app-shell.js). */
.nav-icon--dashboard polyline,
.nav-icon--help path:first-of-type,
.nav-icon--subscription path,
.nav-icon--feedback path,
.nav-icon--copilot path:first-child { stroke-dasharray: 100; }

/* Each tile has to scale about its OWN centre, not the icon's, or the corner
   squares fly outward instead of popping in place. fill-box makes the rect's
   own geometry the reference box. */
.nav-icon--misc rect {
  transform-box: fill-box;
  transform-origin: center;
}

/* Mouse and keyboard: hover, plus focus so the keyboard path is not silent. */
@media (hover: hover) and (pointer: fine) {
  /* Dashboard - the activity pulse redraws left to right. */
  .nav-section-header:hover .nav-icon--dashboard polyline {
    animation: lc-nav-trace 0.75s ease-out;
  }
  /* Subscription - the envelope flap draws shut. The row is a standalone link
     with no open state, so hover and focus are its only triggers; the touch
     block below has nothing to add for it. */
  .nav-section-header:hover .nav-icon--subscription path {
    animation: lc-nav-trace 0.6s ease-out;
  }
  /* Feedback - the speech bubble draws itself. Standalone row like Subscription,
     so hover and focus are its only triggers. */
  .nav-section-header:hover .nav-icon--feedback path {
    animation: lc-nav-trace 0.6s ease-out;
  }
  /* Strategies - the top sheet of the stack lifts off the others. */
  .nav-section-header:hover .nav-icon--strategies path:first-child {
    animation: lc-nav-lift 0.55s ease;
  }
  /* Assets - the card swipes through the reader and settles back. */
  .nav-section-header:hover .nav-icon--assets {
    animation: lc-nav-swipe 0.5s ease;
  }
  /* Partners - the person behind steps into frame. */
  .nav-section-header:hover .nav-icon--partners path:nth-child(n + 3) {
    animation: lc-nav-join 0.5s ease-out;
  }
  /* Leader's Co-Pilot - the tick draws itself. */
  .nav-section-header:hover .nav-icon--copilot path:first-child {
    animation: lc-nav-trace 0.5s ease-out;
  }
  /* My Profile - the avatar gives a small nod. */
  .nav-section-header:hover .nav-icon--profile {
    animation: lc-nav-pop 0.45s ease;
  }
  /* Settings - the gear turns. */
  .nav-section-header:hover .nav-icon--settings {
    animation: lc-nav-turn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Help Center - the question mark writes itself. */
  .nav-section-header:hover .nav-icon--help path:first-of-type {
    animation: lc-nav-trace 0.55s ease-out;
  }
  /* Miscellaneous - the four tiles drop in one after the other. `backwards`
     holds the delayed tiles at their start frame instead of showing them
     full-size for the length of their delay. */
  .nav-section-header:hover .nav-icon--misc rect {
    animation: lc-nav-tile 0.4s ease-out backwards;
  }
  .nav-section-header:hover .nav-icon--misc rect:nth-child(2) { animation-delay: 0.06s; }
  .nav-section-header:hover .nav-icon--misc rect:nth-child(3) { animation-delay: 0.12s; }
  .nav-section-header:hover .nav-icon--misc rect:nth-child(4) { animation-delay: 0.18s; }
}
.nav-section-header:focus-visible .nav-icon--dashboard polyline {
  animation: lc-nav-trace 0.75s ease-out;
}
.nav-section-header:focus-visible .nav-icon--subscription path {
  animation: lc-nav-trace 0.6s ease-out;
}
.nav-section-header:focus-visible .nav-icon--feedback path {
  animation: lc-nav-trace 0.6s ease-out;
}
.nav-section-header:focus-visible .nav-icon--strategies path:first-child {
  animation: lc-nav-lift 0.55s ease;
}
.nav-section-header:focus-visible .nav-icon--assets {
  animation: lc-nav-swipe 0.5s ease;
}
.nav-section-header:focus-visible .nav-icon--partners path:nth-child(n + 3) {
  animation: lc-nav-join 0.5s ease-out;
}
.nav-section-header:focus-visible .nav-icon--copilot path:first-child {
  animation: lc-nav-trace 0.5s ease-out;
}
.nav-section-header:focus-visible .nav-icon--profile {
  animation: lc-nav-pop 0.45s ease;
}
.nav-section-header:focus-visible .nav-icon--settings {
  animation: lc-nav-turn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-section-header:focus-visible .nav-icon--help path:first-of-type {
  animation: lc-nav-trace 0.55s ease-out;
}
.nav-section-header:focus-visible .nav-icon--misc rect {
  animation: lc-nav-tile 0.4s ease-out backwards;
}
.nav-section-header:focus-visible .nav-icon--misc rect:nth-child(2) { animation-delay: 0.06s; }
.nav-section-header:focus-visible .nav-icon--misc rect:nth-child(3) { animation-delay: 0.12s; }
.nav-section-header:focus-visible .nav-icon--misc rect:nth-child(4) { animation-delay: 0.18s; }

/* Touch: the section opening is the cue, since a tap leaves :hover stuck. */
@media (hover: none) {
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--dashboard polyline {
    animation: lc-nav-trace 0.75s ease-out;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--strategies path:first-child {
    animation: lc-nav-lift 0.55s ease;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--assets {
    animation: lc-nav-swipe 0.5s ease;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--partners path:nth-child(n + 3) {
    animation: lc-nav-join 0.5s ease-out;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--copilot path:first-child {
    animation: lc-nav-trace 0.5s ease-out;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--profile {
    animation: lc-nav-pop 0.45s ease;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--settings {
    animation: lc-nav-turn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--help path:first-of-type {
    animation: lc-nav-trace 0.55s ease-out;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--misc rect {
    animation: lc-nav-tile 0.4s ease-out backwards;
  }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--misc rect:nth-child(2) { animation-delay: 0.06s; }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--misc rect:nth-child(3) { animation-delay: 0.12s; }
  .nav-section:not(.collapsed) > .nav-section-header .nav-icon--misc rect:nth-child(4) { animation-delay: 0.18s; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-section-header .nav-icon,
  .nav-section-header .nav-icon * {
    animation: none !important;
    transition: color 0.2s ease;
  }
}

.nav-section-header span {
  flex: 1;
}

.nav-section-header .nav-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--color-TertiaryText);
}

.nav-section.collapsed .nav-chevron {
  transform: rotate(-90deg);
}

/* The sub-menu sits on a deeper surface than the sidebar itself, with an inset
   shadow along the top edge, so the parent section header reads as lifted above
   a recessed panel. Both are inset-only: nothing paints outside the panel, and
   both vanish with the panel when the section collapses to max-height 0. */
.nav-section-items {
  max-height: 500px;
  overflow: hidden;
  /* visibility carries no delay while opening (links focusable at once) but is
     delayed by the collapse duration below, so closing still animates. Without
     it, `max-height: 0` alone leaves every link in the closed sections tabbable
     and readable by screen readers - roughly 25 invisible stops now that
     sections default to closed. */
  visibility: visible;
  transition: max-height 0.25s ease, padding 0.25s ease, visibility 0s;
  padding: 4px 0 6px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              inset 0 8px 8px -8px rgba(0, 0, 0, 0.9),
              inset 0 -6px 7px -7px rgba(0, 0, 0, 0.6);
}

.nav-section.collapsed .nav-section-items {
  max-height: 0 !important;
  padding: 0;
  visibility: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease, visibility 0s linear 0.25s;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 48px;
  font-size: 14px;
  color: var(--color-SecondaryText);
  text-decoration: none;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
/* Hover and active both stay on the sidebar's neutral scale: a coloured fill
   would be a third hue competing with the recessed panel and the section header.
   `--color-HoverBg` is unusable inside the panel (it is lighter than the panel in
   dark mode and near-identical to it in light), so both states are expressed as a
   wash relative to whatever the panel is. The accent appears once, on the rail. */
.nav-item:hover {
  color: var(--color-PrimaryText);
  background: rgba(255, 255, 255, 0.05);
}
.nav-item.active {
  color: var(--color-PrimaryText);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.07);
  border-left-color: var(--color-Buy);
}

/* Standalone top-level row (Subscription): a link that opens its page directly
   instead of expanding a sub-menu. The markup wears .nav-section-header for the
   heading look AND .nav-item so the command palette still collects it, so these
   rules have to win the sub-item padding, gap and colour back off the .nav-item
   block above - the compound selectors below outrank it wherever they collide.
   Left padding is 17px, not 20px, because .nav-item's 3px transparent rail is
   kept: the label lands on the same 20px inset as every other section heading,
   and the active state colours the rail without shifting the text sideways. */
.nav-solo.nav-item {
  gap: 10px;
  padding: 14px 20px 14px 17px;
  font-weight: 600;
  color: var(--color-PrimaryText);
}
.nav-solo.nav-item:hover {
  background: var(--color-HoverBg);
}
.nav-solo.nav-item.active {
  background: var(--color-HoverBg);
  border-left-color: var(--color-Buy);
}

.nav-item .nav-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(46, 189, 133, 0.12);
  color: var(--color-Buy);
  margin-left: auto;
}
.nav-item .nav-badge-count {
  background: #f6465d;
  color: #fff;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nav-item .nav-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-TertiaryText);
  line-height: 1;
}

.nav-item .nav-external {
  margin-left: auto;
  color: var(--color-TertiaryText);
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR GROWTH CARD (.lcq)
   Docked at the foot of the sidebar as a 60px strip; on hover, tap or focus it
   grows UPWARD into a full card that floats over the nav. Markup comes from
   questCardHtml() in app-shell.js, behaviour from wireQuestCard().

   The growth is height on .lcq-card, which is bottom-anchored inside a
   fixed-height .lcq placeholder — the placeholder holds the collapsed footprint
   in flow so the nav above never reflows. The card stays a dark media surface in
   both themes (it sits on video), so its inner text is fixed light; only the
   accents come from tokens.
   ══════════════════════════════════════════════════════════ */
.sidebar-bottom {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--color-Line);
  /* Pinned so a long nav cannot push the card out of reach, and so the expanded
     card has visible sidebar above it to grow into. */
  position: sticky;
  bottom: 0;
  background: var(--color-SecondaryBg);
  z-index: 5;
}

.lcq {
  position: relative;
  height: 60px;              /* collapsed footprint held in flow */
}

.lcq-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  overflow: hidden;
  border-radius: 12px;
  background: #0A0E14;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms ease,
              border-color 280ms ease;
}
/* Open height is measured and set inline by wireQuestCard() so the card ends
   exactly where its content does at any sidebar width; this value is only the
   fallback for the no-JS case. */
.lcq[data-open="true"] .lcq-card {
  height: 372px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* Backdrop: the marketing hero clip from index.html, veiled for legibility. */
.lcq-video,
.lcq-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lcq-video {
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 280ms ease, transform 280ms ease;
  transform: scale(1.04);
  pointer-events: none;
}
.lcq[data-open="true"] .lcq-video {
  opacity: 0.9;
  transform: scale(1);
}
.lcq-veil {
  background: rgba(6, 10, 16, 0.68);
  transition: background 280ms ease;
  pointer-events: none;
}
.lcq[data-open="true"] .lcq-veil { background: rgba(6, 10, 16, 0.5); }

.lcq-content {
  position: relative;
  z-index: 1;
}

/* Header strip — the whole card when collapsed, the card's top row when open. */
.lcq-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 10px;
}
/* The wordmark is the white logo asset (it already carries the ™), so the row
   must never squeeze it. Height drives the size and width follows the 1026x108.21
   aspect: 9px puts it at the footprint the 12px text had, and leaves the orb and
   the pill room inside the 240px sidebar so nothing truncates or wraps. */
.lcq-word {
  display: block;
  height: 9px;
  width: auto;
  flex-shrink: 0;
}

.lcq-toggle {
  margin-left: auto;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--color-BtnBg);
  color: var(--color-TextOnYellow);
  transition: background 200ms ease, color 200ms ease, transform 150ms ease;
}
.lcq-toggle:hover { transform: translateY(-1px); }
.lcq[data-open="true"] .lcq-toggle {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Panel — clipped by the card when collapsed; visibility keeps its links out of
   the tab order until the card is actually open. */
.lcq-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease;
}
.lcq[data-open="true"] .lcq-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease 60ms;
}

/* --lcq-hero is trimmed by wireQuestCard() when the sidebar is too short to seat
   the whole card, so the copy and its button survive at any viewport height. */
.lcq-hero {
  position: relative;
  height: var(--lcq-hero, 104px);
  display: flex;
  align-items: flex-end;
  padding: 0 12px 10px;
}

/* Solid panel, with a fade above it so the clip dissolves into the copy instead
   of the title landing on moving footage. */
.lcq-copy {
  position: relative;
  padding: 10px 12px 14px;
  background: #060A10;
}
.lcq-copy::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px;
  background: linear-gradient(180deg, rgba(6, 10, 16, 0) 0%, #060A10 100%);
  pointer-events: none;
}
.lcq-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.lcq-desc {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
/* Last resort on a very short sidebar: drop the description so the title, the
   badge and the button still fit. Set by wireQuestCard() only when needed. */
.lcq.lcq-min .lcq-desc { display: none; }

.lcq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
}
.lcq-cta {
  display: block;
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  background: var(--color-BtnBg);
  color: var(--color-TextOnYellow);
  transition: filter 150ms ease, transform 150ms ease;
}
.lcq-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Animated mark — a slow-turning glow behind a sparkle that drifts between the
   two accent tokens, so it reads as alive without ever demanding attention. */
.lcq-orb {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(10, 14, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--lc-accent);
  overflow: hidden;
  animation: lcq-tint 6s ease-in-out infinite;
}
.lcq-orb svg {
  position: relative;
  width: 62%;
  height: 62%;
  filter: drop-shadow(0 0 5px currentColor);
}
.lcq-orb-spark { opacity: 0.85; }
.lcq-orb-glow {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, currentColor 70deg, transparent 150deg, currentColor 250deg, transparent 330deg);
  opacity: 0.28;
  animation: lcq-spin 5s linear infinite;
}
.lcq-orb-xs { width: 16px; height: 16px; border-radius: 5px; border: 0; background: none; }
.lcq-orb-xs .lcq-orb-glow { display: none; }
.lcq-orb-sm { width: 30px; height: 30px; }
.lcq-orb-lg { width: 46px; height: 46px; border-radius: 12px; }

@keyframes lcq-spin { to { transform: rotate(360deg); } }
@keyframes lcq-tint {
  0%, 100% { color: var(--lc-accent); }
  50%      { color: var(--color-BtnBg); }
}

/* Short viewports: JS trims the hero and the height, but keep a no-JS fallback
   that still leaves some nav visible. */
@media (max-height: 640px) {
  .lcq[data-open="true"] .lcq-card { height: 296px; }
  .lcq-hero { height: var(--lcq-hero, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .lcq-card,
  .lcq-video,
  .lcq-panel,
  .lcq-toggle,
  .lcq-cta { transition-duration: 1ms; }
  .lcq-orb,
  .lcq-orb-glow { animation: none; }
  .lcq-toggle:hover,
  .lcq-cta:hover { transform: none; }
}

/* Sidebar collapse toggle (bottom) */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-top: 1px solid var(--color-Line);
  cursor: pointer;
  color: var(--color-TertiaryText);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  transition: background 0.15s;
}
.sidebar-collapse-btn:hover {
  background: var(--color-HoverBg);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}

/* ══════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--color-SecondaryBg);
  border-bottom: 1px solid var(--color-Line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
  z-index: 250;
  gap: 12px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.topbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 8px 4px;
}
.topbar-brand picture {
  display: flex;
}
.topbar-brand img {
  height: 22px;
  width: auto;
  display: block;
}
[data-theme="light"] .topbar-brand img { filter: invert(1); }

.sidebar-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-PrimaryText);
  border-radius: 8px;
}
.sidebar-toggle:hover {
  background: var(--color-HoverBg);
}

/* Search field — a discoverable trigger for the command palette (keyboard.js).
   Looks like a search input; opens the same palette as Cmd/Ctrl+K. */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 200px;
  max-width: 280px;
  margin-left: 6px;
  padding: 0 8px 0 12px;
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 8px;
  color: var(--color-SecondaryText);
  cursor: pointer;
  font: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.topbar-search:hover {
  background: var(--color-HoverBg);
  border-color: var(--color-TertiaryText);
}
.topbar-search:focus-visible {
  outline: none;
  border-color: var(--color-PrimaryYellow);
}
.topbar-search .ts-ico {
  flex: 0 0 auto;
  color: var(--color-TertiaryText);
}
.topbar-search .ts-placeholder {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 13px;
  color: var(--color-SecondaryText);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-search .ts-kbd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.topbar-search .ts-kbd kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--color-SecondaryBg);
  border: 1px solid var(--color-Line);
  color: var(--color-SecondaryText);
  font: 600 11px/1 inherit;
  font-family: inherit;
}

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

.topbar-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-PrimaryText);
  padding: 6px 12px;
  border-radius: 8px;
}
.topbar-balance svg {
  color: var(--color-TertiaryText);
}
.topbar-balance-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-SecondaryText);
  margin-right: 2px;
}

/* Leader-role badge — prestige pill shown right after the Portfolio Balance chip
   for users an admin has assigned a leader tier. Each tier carries its own colour
   (ascending prestige) and the badge paints its own background, so it reads the
   same in both light and dark theme. Toggled via [hidden] by app-shell.js. */
.topbar-leader-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  user-select: none;
  /* prestige glow: per-tier halo colour, pulses via tlb-glow-pulse; a light
     streak sweeps across (::before) and the star icon twinkles (.tlb-icon). */
  position: relative;
  overflow: hidden;
  --tlb-glow: rgba(255, 255, 255, 0.5);
  animation: tlb-glow-pulse 2.8s ease-in-out infinite;
}
.topbar-leader-badge[hidden] { display: none; }
/* Sweeping shine that periodically twinkles across the pill. */
.topbar-leader-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: tlb-shimmer 3.6s ease-in-out infinite;
}
.topbar-leader-badge .tlb-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.95;
  transform-origin: center;
  animation: tlb-twinkle 2.8s ease-in-out infinite;
}
.topbar-leader-badge[data-role="copilot"] {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  --tlb-glow: rgba(37, 99, 235, 0.75);
}
.topbar-leader-badge[data-role="super_pilot"] {
  background: linear-gradient(135deg, #10b981, #059669);
  --tlb-glow: rgba(5, 150, 105, 0.75);
}
.topbar-leader-badge[data-role="master_pilot"] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  --tlb-glow: rgba(124, 58, 237, 0.78);
}
.topbar-leader-badge[data-role="regional_director"] {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #3a2a00;
  border-color: rgba(0, 0, 0, 0.12);
  --tlb-glow: rgba(245, 158, 11, 0.85);
}

/* Pulsing coloured halo around the pill (uses the per-tier --tlb-glow). */
@keyframes tlb-glow-pulse {
  0%, 100% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 3px 0 var(--tlb-glow);
  }
  50% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 12px 2px var(--tlb-glow);
  }
}
/* Light streak sweep, then a long pause between passes. */
@keyframes tlb-shimmer {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}
/* The star icon twinkles: gentle scale, rotate and a bright sparkle. */
@keyframes tlb-twinkle {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    opacity: 1;
    transform: scale(1.18) rotate(10deg);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  }
}
/* Respect users who prefer no motion: keep the badge, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .topbar-leader-badge,
  .topbar-leader-badge::before,
  .topbar-leader-badge .tlb-icon {
    animation: none;
  }
  .topbar-leader-badge::before { display: none; }
}

/* ── "Be a Copilot" CTA ──────────────────────────────────────────────
   Occupies the same topbar slot as the leader badge, for members who do not
   hold a tier yet. Outlined rather than filled, so it invites without
   competing with the earned badge. */
.topbar-copilot-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* Accent ink on an accent tint, so it reads on both the dark and the light
     topbar (unlike the tier badge, which paints its own opaque gradient). */
  color: var(--lc-accent);
  background: rgba(56, 189, 248, 0.12);
  border: 1px dashed var(--lc-accent);
  transition: background 0.15s;
}
.topbar-copilot-cta:hover {
  background: rgba(56, 189, 248, 0.26);
}
.topbar-copilot-cta[hidden] { display: none; }
/* "Be a" stays light; the role itself carries the weight. */
.topbar-copilot-cta .tcc-label { font-weight: 500; }
.topbar-copilot-cta .tcc-label strong { font-weight: 800; }
.topbar-copilot-cta .tcc-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.95;
  animation: tlb-twinkle 2.8s ease-in-out infinite;
}
/* Narrow screens: keep the full "Be a Copilot" words — the session countdown pill
   is hidden below 768px (session-timeout.js), which frees the room. Only the
   padding tightens. */
@media (max-width: 560px) {
  .topbar-copilot-cta { padding: 5px 10px 5px 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-copilot-cta .tcc-icon { animation: none; }
}

/* ── Country flag chip (sidebar "My Profile" heading, beside the chevron) ──
   The visitor's country, waving. One flag image is sliced into ten vertical
   strips (app-shell.js emits them, each carrying its index in --i) and every
   strip runs the same keyframes a beat later than the strip to its left, which
   walks a ripple across the cloth. Amplitude grows with --i so the pole edge
   stays nearly still and the free edge travels furthest, and the container's
   drop-shadow tracks the moving silhouette rather than a static box. Only
   transform and filter animate, so it composites on the GPU and never touches
   layout. Toggled via [hidden] by app-shell.js. */
/* The chip is a span, so it is caught by `.nav-section-header span { flex: 1 }`
   above — which would stretch it across the slack the title should take. Match
   that selector's specificity to pin it back to its own width. */
.nav-section-header .nav-flag {
  /* Height is fixed so the chip reads as part of the 14px heading; width follows
     the flag's own proportions, because national flags run from 0.82:1 (Nepal)
     to 2.54:1 (Qatar) and forcing one box on all of them squashes most of the
     world. app-shell.js overwrites --tf-ratio from the loaded image. */
  --tf-h: 14px;
  --tf-ratio: 1.5;
  --tf-w: calc(var(--tf-h) * var(--tf-ratio));
  --tf-strip-w: calc(var(--tf-w) / 14);   /* keep in sync with FLAG_STRIPS */
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  width: var(--tf-w);
  height: var(--tf-h);
  /* The header's own 10px gap sets it off the chevron; pull back a little so the
     pair reads as one cluster at the right edge. */
  margin-right: -2px;
  border-radius: 2px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.32));
  transition: filter 0.15s;
  user-select: none;
}
.nav-section-header .nav-flag[hidden] { display: none; }
.nav-section-header:hover .nav-flag {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42));
}
/* Fixed sheen over the moving cloth: a light catch across the top-left and a
   faint fold shadow bottom-right. */
.nav-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 44%, rgba(0, 0, 0, 0.13));
}

.tf-strip {
  flex: 0 0 auto;
  /* Overlap by 0.6px and pull it back, so fractional strip widths can never
     open hairline seams between neighbours. */
  width: calc(var(--tf-strip-w) + 0.6px);
  margin-right: -0.6px;
  /* Travel grows with the strip index, so the pole edge barely moves and the
     free edge swings furthest. Expressed as a fraction of the chip height so the
     ripple keeps its proportions at any size. */
  --tf-amp: calc(var(--tf-h) * (0.014 + var(--i) * 0.0075));
  background-image: var(--tf-src, none);
  background-repeat: no-repeat;
  background-size: var(--tf-w) var(--tf-h);
  background-position: calc(var(--i) * var(--tf-strip-w) * -1) center;
  animation: tf-wave 2.1s ease-in-out infinite;
  /* Total spread across the strips is about half a cycle, which puts exactly one
     crest on the cloth at a time. */
  animation-delay: calc(var(--i) * -0.08s);
  will-change: transform;
}
.tf-strip:first-child { border-radius: 2px 0 0 2px; }
.tf-strip:last-child { border-radius: 0 2px 2px 0; margin-right: 0; }

@keyframes tf-wave {
  0%, 100% {
    transform: translateY(calc(var(--tf-amp) * -1)) scaleY(0.95);
    filter: brightness(1.1);
  }
  50% {
    transform: translateY(var(--tf-amp)) scaleY(1);
    filter: brightness(0.9);
  }
}
/* Respect users who prefer no motion: keep the flag, drop the wave. */
@media (prefers-reduced-motion: reduce) {
  .tf-strip {
    animation: none;
    transform: none;
    filter: none;
  }
}

/* ── Copilot application dialog (built lazily by app-shell.js) ─────── */
.copilot-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.copilot-modal[hidden] { display: none; }
.copilot-modal-card {
  width: 100%;
  max-width: 460px;
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.copilot-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-Line);
}
.copilot-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-PrimaryText);
}
.copilot-modal-close {
  background: none;
  border: none;
  color: var(--color-TertiaryText);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.copilot-modal-body { padding: 16px 18px; }
.copilot-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-SecondaryText);
}
.copilot-cond {
  border: 1px solid var(--color-Line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--color-Vessel);
}
.copilot-cond[data-met="1"] { border-color: var(--color-Buy); }
.copilot-cond-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.copilot-cond-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-PrimaryText);
}
.copilot-cond-state {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-TertiaryText);
}
.copilot-cond[data-met="1"] .copilot-cond-state { color: var(--color-Buy); }
.copilot-cond-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-Line);
  overflow: hidden;
}
.copilot-cond-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--lc-accent);
  transition: width 0.3s ease;
}
.copilot-cond[data-met="1"] .copilot-cond-bar > span { background: var(--color-Buy); }
.copilot-cond-nums {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-TertiaryText);
}
.copilot-cond-nums strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-PrimaryText);
}
.copilot-or {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-TertiaryText);
  margin: 10px 0;
}
.copilot-status {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--color-Vessel);
  border: 1px solid var(--color-Line);
  color: var(--color-SecondaryText);
}
.copilot-status[data-tone="good"] { border-color: var(--color-Buy); }
.copilot-status[data-tone="warn"] { border-color: var(--color-Sell); }
.copilot-status[hidden] { display: none; }
.copilot-note-wrap { margin-top: 14px; }
.copilot-note-wrap[hidden] { display: none; }
.copilot-note-wrap label {
  display: block;
  font-size: 12px;
  color: var(--color-TertiaryText);
  margin-bottom: 6px;
}
.copilot-note-wrap textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--color-Line);
  background: var(--color-Vessel);
  color: var(--color-PrimaryText);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.copilot-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-Line);
}
.copilot-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-Line);
}
.copilot-btn-ghost {
  background: transparent;
  color: var(--color-SecondaryText);
}
.copilot-btn-primary {
  background: linear-gradient(135deg, var(--lc-accent), #60a5fa);  /* same accent fill as .btn-accent */
  border-color: transparent;
  color: var(--color-TextOnYellow);
}
/* Muted fill rather than opacity: a half-transparent accent gradient still reads
   as "clickable" against the dark theme's background. */
.copilot-btn-primary:disabled {
  background: var(--color-Vessel);
  color: var(--color-DisableText);
  border-color: var(--color-Line);
  cursor: not-allowed;
}
@media (max-width: 400px) {
  .copilot-modal { padding: 10px; }
  .copilot-modal-body, .copilot-modal-head, .copilot-modal-foot { padding-left: 14px; padding-right: 14px; }
  .copilot-modal-foot { flex-direction: column-reverse; }
  .copilot-btn { width: 100%; }
}

.topbar-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-TertiaryText);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.topbar-icon:hover {
  background: var(--color-HoverBg);
  color: var(--color-PrimaryText);
}
.topbar-icon .notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: var(--color-Sell);
  border-radius: 50%;
  border: 1.5px solid var(--color-SecondaryBg);
}

/* ══════════════════════════════════════════════════════════
   MAIN WRAPPER
   ══════════════════════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
}

.main-content {
  padding: calc(var(--topbar-height) + 24px) 32px 32px;
  max-width: 1440px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--color-PrimaryText);
}

/* ══════════════════════════════════════════════════════════
   OVERRIDE EXISTING STYLES FOR SIDEBAR LAYOUT
   ══════════════════════════════════════════════════════════ */

/* Hide old brand-bar (replaced by sidebar + topbar) */
body.has-sidebar .brand-bar {
  display: none !important;
}

/* Remove old page container constraints */
body.has-sidebar .section-bg {
  background: transparent;
  padding: 0;
}
body.has-sidebar .page-container {
  max-width: none;
  padding: 0;
}

/* ── Role Tabs (centered iOS-style segmented control) ── */
body.has-sidebar .role-tabs {
  display: flex;
  width: fit-content;
  margin: 0 auto 32px;
  padding: 5px;
  gap: 3px;
  background: var(--color-Vessel);
  border: 1px solid var(--color-Line);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.has-sidebar .role-tab {
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-SecondaryText);
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
body.has-sidebar .role-tab:first-child,
body.has-sidebar .role-tab:last-child {
  border-radius: 999px;
  border-left: none;
}
body.has-sidebar .role-tab:hover:not(.active) {
  color: var(--color-PrimaryText);
  background: var(--color-HoverBg);
}
body.has-sidebar .role-tab:active:not(.active) {
  transform: scale(0.97);
}
body.has-sidebar .role-tab.active {
  background: var(--color-CardBg);
  color: var(--color-PrimaryText);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  text-shadow: none;
}
@media (max-width: 520px) {
  body.has-sidebar .role-tabs { width: 100%; max-width: 400px; }
  body.has-sidebar .role-tab { flex: 1; padding: 12px 20px; text-align: center; font-size: 14.5px; }
}

/* ── Portfolio Hero (Exness account card) ── */
body.has-sidebar .portfolio-hero {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-left: none;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
body.has-sidebar .portfolio-hero::before {
  display: none;
}
body.has-sidebar .portfolio-hero-icon {
  background: var(--color-HoverBg);
  box-shadow: none;
  color: var(--color-PrimaryText);
}
body.has-sidebar .portfolio-hero-value {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
body.has-sidebar .hero-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
body.has-sidebar .hero-btn-deposit {
  background: #ED7B30;
  color: #000;
  box-shadow: none;
}
body.has-sidebar .hero-btn-deposit:hover {
  background: #f08c4a;
  box-shadow: none;
  transform: none;
}
body.has-sidebar .hero-btn-withdraw {
  border: 1px solid var(--color-Line);
  color: var(--color-PrimaryText);
  background: transparent;
}
body.has-sidebar .hero-btn-withdraw:hover {
  border-color: var(--color-SecondaryText);
  color: var(--color-PrimaryText);
}

/* ── Earnings Row ── */
body.has-sidebar .earnings-item {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 12px;
  box-shadow: none;
}
body.has-sidebar .earnings-item::before {
  display: none;
}
body.has-sidebar .earnings-item:hover {
  border-color: var(--color-SecondaryText);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: none;
}

/* ── Summary Cards ── */
body.has-sidebar .summary-card {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 12px;
  box-shadow: none;
}
body.has-sidebar .summary-card::after {
  display: none;
}
body.has-sidebar .summary-card:hover {
  background: var(--color-HoverBg);
  border-color: var(--color-SecondaryText);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: none;
}
body.has-sidebar .summary-card .card-icon {
  background: var(--color-HoverBg);
}
body.has-sidebar .summary-card:hover .card-icon {
  background: rgba(0,0,0,0.05);
  box-shadow: none;
}

/* ── Plan Cards ── */
body.has-sidebar .plan-card {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 12px;
  box-shadow: none;
}
body.has-sidebar .plan-card::before {
  display: none;
}
body.has-sidebar .plan-card:hover {
  background: var(--color-HoverBg);
  border-color: var(--color-SecondaryText);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
body.has-sidebar .btn-accent {
  background: var(--color-PrimaryYellow);
  color: #000;
  box-shadow: none;
}

/* ── Tables ── */
body.has-sidebar .inv-table {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 12px;
  box-shadow: none;
}
body.has-sidebar .inv-table thead {
  background: var(--color-Vessel);
}

/* ── Partner Section Cards ── */
body.has-sidebar .partner-balance-card,
body.has-sidebar .partner-level-card,
body.has-sidebar .partner-link-card,
body.has-sidebar .p2p-bond-card,
body.has-sidebar .residual-pool-card,
body.has-sidebar .quick-reports,
body.has-sidebar .pool-card,
body.has-sidebar .mi-card,
body.has-sidebar .tree-card {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: 12px;
  box-shadow: none;
}
body.has-sidebar .partner-balance-card:hover,
body.has-sidebar .partner-level-card:hover,
body.has-sidebar .partner-link-card:hover,
body.has-sidebar .p2p-bond-card:hover,
body.has-sidebar .residual-pool-card:hover,
body.has-sidebar .quick-reports:hover,
body.has-sidebar .pool-card:hover,
body.has-sidebar .mi-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* ── Pool / MI Tier Cards ── */
body.has-sidebar .pool-tier,
body.has-sidebar .mi-tier {
  background: var(--color-Vessel);
  border: 1px solid var(--color-Line);
}

/* ── Divider ── */
body.has-sidebar .divider {
  background: none;
}

/* ── Section Title ── */
body.has-sidebar .section-title {
  font-size: 18px;
}

/* ── Filter / Pagination Buttons ── */
body.has-sidebar .ptx-filter {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  color: var(--color-SecondaryText);
}
body.has-sidebar .ptx-filter.active {
  background: var(--color-PrimaryText);
  color: var(--color-SecondaryBg);
  border-color: var(--color-PrimaryText);
}
body.has-sidebar .ptx-page-btn {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
}

/* ── Profile Dropdown ── */
body.has-sidebar .profile-dropdown {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  backdrop-filter: none;
}
body.has-sidebar .profile-menu-item:hover {
  background: var(--color-HoverBg);
}

/* ── Footer ── */
body.has-sidebar .page-footer {
  border-top: 1px solid var(--color-Line);
  padding: 24px 0;
  text-align: center;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: min(86vw, 320px);
    /* The search row is a fixed child of the topbar, so it always paints above
       the drawer (the topbar's stacking context wins). Start the drawer below
       it instead, or the row would clip the first nav section. */
    top: calc(var(--topbar-height) + var(--mobile-search-height));
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }
  .sidebar.open ~ .sidebar-overlay {
    display: block;
  }
  .sidebar-toggle {
    display: flex;
    flex-shrink: 0;
  }
  .main-wrapper {
    margin-left: 0;
    /* Allow flex shrinking — without min-width:0 the wrapper takes its
       children's min-content size and overflows viewport, causing iOS
       to auto-zoom out on phones with content wider than 375px. */
    min-width: 0;
  }
  .main-content {
    /* Clears the topbar AND the search row pinned under it */
    padding: calc(var(--topbar-height) + var(--mobile-search-height) + 16px) 16px 16px;
    min-width: 0;
    max-width: 100vw;
    /* Clip any deeply-nested wider content (e.g. data tables inside
       overflow-x:auto wrappers) — iOS Safari otherwise treats them as
       viewport-content and auto-zooms-out to fit. The wrappers' own
       horizontal scroll still works for the user. */
    overflow-x: hidden;
  }

  /* Topbar tightens up — less padding, smaller gaps */
  .topbar {
    padding: 0 12px;
    gap: 6px;
  }
  .topbar-left {
    gap: 6px;
    min-width: 0;
  }
  .topbar-brand {
    padding: 8px 2px;
    /* The box mark is ~30px wide, so unlike the old 200px wordmark it cannot
       spill off the left edge. Pin it instead of letting flex squeeze it, which
       otherwise clamps the img width and distorts the aspect ratio. */
    flex: 0 0 auto;
  }
  /* Move the search out of the cramped topbar into its own full-width row
     directly beneath it, so the field keeps its label and a comfortable tap
     target instead of collapsing to a 36px icon. Fixed like the topbar; sits
     below the sidebar drawer (z-index 200) so an open drawer covers it. */
  .topbar-search {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--mobile-search-height);
    margin: 0;
    padding: 0 14px;
    gap: 10px;
    border-radius: 0;
    border-width: 0 0 1px;
    background: var(--color-CardBg);
    z-index: 190;
  }
  .topbar-search .ts-placeholder {
    font-size: 14px;
  }
  /* No physical keyboard on a phone, so the Ctrl+K hint is noise */
  .topbar-search .ts-kbd {
    display: none;
  }
  .topbar-brand img {
    /* Below 768px the <picture> in app-shell.js serves the near-square box mark
       instead of the 9:1 wordmark, so a definite height can no longer overflow
       the topbar and the mark can be sized for legibility rather than fit. */
    height: 28px;
    width: auto;
    /* The box mark ships as black artwork while the wordmark is white, so the
       theme filters flip round at this breakpoint: knock it white for dark,
       leave it black for light (the desktop invert would wash it out). */
    filter: brightness(0) invert(1);
  }
  [data-theme="light"] .topbar-brand img {
    filter: brightness(0);
  }
  .topbar-right {
    gap: 4px;
  }

  /* Drop the "Portfolio Balance" word — the $ value is enough on mobile */
  .topbar-balance {
    padding: 6px 8px;
    font-size: 13px;
  }
  .topbar-balance-label {
    display: none;
  }
  .topbar-leader-badge {
    padding: 4px 9px;
    font-size: 11px;
  }
}

/* Extra-small phones: hide balance pill entirely, only icons + brand remain */
@media (max-width: 480px) {
  .topbar {
    padding: 0 8px;
    gap: 4px;
  }
  .topbar-brand img {
    height: 26px;
  }
  .topbar-balance {
    display: none;
  }
  /* Keep the tier name readable on the smallest phones too: the balance pill and
     the session countdown pill are both gone by this width, so the badge can spend
     that room on its label instead of collapsing to an icon-only medal. */
  .topbar-leader-badge {
    padding: 4px 8px 4px 6px;
    gap: 4px;
    font-size: 10px;
  }
  .topbar-leader-badge .tlb-icon {
    width: 11px;
    height: 11px;
  }
  .topbar-icon {
    width: 34px;
    height: 34px;
  }
  .sidebar-toggle {
    width: 36px;
    height: 36px;
  }
}

/* The countdown pill session-timeout.js injects into the topbar is now shed for
   the whole mobile range (its own stylesheet hides .lc-st-hdr below 768px), so the
   old 380px-only rule that lived here is gone. The expiry modal still fires. */

/* 320px phones: .topbar-right cannot shrink, so with the brand now pinned the row
   lands ~3px over budget and the box mark clips into the theme toggle. Reclaim it
   from the edge insets rather than shrinking the mark. */
@media (max-width: 340px) {
  .topbar {
    padding: 0 6px;
  }
  .topbar-brand {
    padding: 8px 0;
  }
}

/* Lock background scroll while the mobile sidebar drawer is open */
@media (max-width: 768px) {
  body.has-sidebar:has(.sidebar.open) {
    overflow: hidden;
  }
}

/* ── Sidebar scrollbar ── */
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-Line);
  border-radius: 2px;
}

/* ── Profile UID copy button ────────────────────────────── */
.profile-uid {
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-uid-copy {
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  color: var(--color-TertiaryText);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.profile-uid-copy:hover {
  color: var(--color-PrimaryText);
  background: var(--color-HoverBg);
}
.profile-uid-copy.copied {
  color: var(--color-Buy);
}