/* Signal-project inspired layout skin.
   Loaded last on purpose. Keeps Pseryte color variables unchanged. */

@media (min-width: 99999px) {
  :root {
    --zenith-sidebar-w: 260px;
    --zenith-topbar-h: 76px;
    --zenith-content-max: 1540px;
  }

  html,
  body {
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(99,102,241,.10) 0%, transparent 58%),
      radial-gradient(circle at 100% 16%, rgba(0,217,126,.045) 0%, transparent 38%),
      var(--bg) !important;
  }

  #app {
    background:
      radial-gradient(circle at 50% 0%, rgba(99,102,241,.10) 0%, transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.018), transparent 180px),
      #08080d !important;
  }

  .section:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .section.active {
    display: flex !important;
    visibility: visible !important;
  }

  .bottom-nav {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--zenith-sidebar-w) !important;
    height: 100vh !important;
    padding: 128px 16px 112px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    border-top: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(99,102,241,.08), transparent 34%), color-mix(in srgb, var(--bg) 82%, transparent) !important;
    box-shadow: 12px 0 34px rgba(0,0,0,.38), inset -1px 0 0 rgba(255,255,255,.025) !important;
    backdrop-filter: blur(28px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
    z-index: 130 !important;
  }

  .bottom-nav::before {
    content: "PSERYTE\A PRO TERMINAL";
    white-space: pre;
    position: absolute;
    top: 26px;
    left: 24px;
    right: 24px;
    height: 72px;
    padding: 0 0 0 58px;
    display: flex;
    align-items: center;
    color: #f4f6ff !important;
    opacity: 1 !important;
    text-shadow: 0 0 18px rgba(99,102,241,.28);
    font-size: 18px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: .08em;
    background: linear-gradient(135deg, var(--accent), var(--accent2)) 0 50% / 42px 42px no-repeat;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }

  .bottom-nav::after {
    content: "EMPEROR METHOD\A LIVE ANALYSIS";
    white-space: pre;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 13px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
    border-radius: 10px;
    color: var(--accent2);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 9%, transparent);
    font-size: 10px;
    line-height: 1.55;
    font-weight: 900;
    letter-spacing: .13em;
  }

  .bottom-nav .nb,
  .bottom-nav .theme-toggle {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    color: var(--text2) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }

  .brain-fab,
  .brain-overlay {
    display: none !important;
  }

  #toasts {
    top: auto !important;
    bottom: 24px !important;
    right: 24px !important;
    width: min(280px, calc(100vw - var(--zenith-sidebar-w) - 40px)) !important;
    z-index: 220 !important;
  }

  #toasts .toast {
    max-width: 100% !important;
    border-radius: 8px !important;
    background: rgba(14,14,22,.94) !important;
    color: #e2e4ef !important;
    border-color: rgba(129,140,248,.28) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.36) !important;
  }

  .bottom-nav .theme-toggle {
    margin-top: 8px;
    justify-content: center !important;
    color: var(--accent2) !important;
    border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
  }

  .bottom-nav .nb svg,
  .bottom-nav .theme-toggle svg {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto;
    opacity: .82;
  }

  .bottom-nav .nb span {
    display: inline !important;
    font-size: 13px !important;
    transform: none !important;
    opacity: 1 !important;
    max-width: none !important;
    color: currentColor !important;
  }

  .bottom-nav .nb:hover:not(.active) {
    color: var(--text) !important;
    background: rgba(255,255,255,.035) !important;
    transform: translateX(2px) !important;
  }

  .bottom-nav .nb.active {
    color: var(--accent2) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 110%) !important;
    border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
    border-left: 3px solid var(--accent2) !important;
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent) !important;
  }

  .bottom-nav .nb.active::before,
  .nav-active-pill {
    display: none !important;
  }

  .section,
  .section.active,
  body.emperor-repo-pure .section,
  body.emperor-repo-pure .section.active {
    left: var(--zenith-sidebar-w) !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .v2-topbar,
  .sec-header {
    min-height: var(--zenith-topbar-h) !important;
    height: var(--zenith-topbar-h) !important;
    padding: 0 40px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 95 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    background: rgba(8, 8, 13, .82) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.24) !important;
  }

  .v2-brand-name,
  .v2-brand-sub,
  .sec-title,
  .sec-sub {
    opacity: 1 !important;
  }

  .v2-brand-name,
  .sec-title {
    color: #f4f6ff !important;
  }

  .v2-brand-sub,
  .sec-sub {
    color: #a0a3b1 !important;
  }

  .chat-mode-tabs,
  [data-section="chat"] .chat-mode-tabs {
    position: relative !important;
    z-index: 2 !important;
  }

  .chart-accordion-toggle {
    display: none !important;
  }

  .v2-topbar::after,
  .sec-header::after {
    display: none !important;
  }

  .scroll-area,
  .trade-scroll,
  .news-scroll {
    width: min(var(--zenith-content-max), calc(100vw - var(--zenith-sidebar-w))) !important;
    max-width: var(--zenith-content-max) !important;
    margin: 0 auto !important;
    padding: 30px 40px 46px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent !important;
  }

  .scroll-area::-webkit-scrollbar,
  .trade-scroll::-webkit-scrollbar,
  .news-scroll::-webkit-scrollbar {
    display: block !important;
    width: 8px;
  }

  .scroll-area::-webkit-scrollbar-thumb,
  .trade-scroll::-webkit-scrollbar-thumb,
  .news-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 999px;
  }

  [data-section="chart"] .trade-scroll {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #tradePrimaryGrid {
    display: block !important;
  }

  #tradePrimaryGrid > .trade-card,
  #emperorBrainAcc,
  #smnCard,
  #tradeProbCard,
  #botStatusCard {
    grid-column: auto !important;
    margin-bottom: 16px !important;
  }

  [data-section="levels"] .scroll-area {
    display: block !important;
    width: 100% !important;
    padding-top: 28px !important;
  }

  [data-section="levels"] .acc-full,
  [data-section="levels"] .trade-card,
  [data-section="levels"] .sheet-card {
    width: 100% !important;
    margin: 0 0 16px !important;
  }

  [data-section="levels"] .v2-layer-label {
    margin: 22px 0 12px !important;
    color: #a0a3b1 !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }

  [data-section="levels"] #analysisAuxCards {
    display: block !important;
  }

  [data-section="chat"] .school-panel,
  [data-section="chat"] .chat-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px auto 44px !important;
  }

  .card,
  .trade-card,
  .acc-full,
  .school-card,
  .news-card,
  .news-brief-card,
  .news-digest-card,
  .v2-hero,
  .mtf-align-bar,
  .chart-area,
  .v2-inst-card,
  .brain-simple-card,
  .sheet-card {
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
    color: #e2e4ef !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(20,20,30,.78) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.25) !important;
    backdrop-filter: blur(22px) saturate(128%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(128%) !important;
  }

  .v2-coin-btn,
  .v2-tf,
  .v2-icon-btn,
  .hdr-btn,
  .theme-toggle,
  .v2-hero-sr,
  .hero-sr-toggle,
  .mtf-card,
  .brain-tf-btn {
    color: #e2e4ef !important;
    background: rgba(14,14,22,.86) !important;
    border-color: rgba(129,140,248,.24) !important;
    box-shadow: inset 0 0 14px rgba(99,102,241,.045) !important;
  }

  .v2-tf.active,
  .brain-tf-btn.active,
  .mtf-card.active-tf {
    color: var(--accent2) !important;
    background: rgba(99,102,241,.18) !important;
    border-color: rgba(129,140,248,.58) !important;
  }

  .v2-hero-sr-val,
  .v2-hero-sr-meta,
  .v2-hero-sr-lbl {
    color: inherit !important;
  }

  .v2-hero-sr-val {
    color: #e2e4ef !important;
  }

  .card *,
  .trade-card *,
  .acc-full *,
  .school-card *,
  .news-card *,
  .news-brief-card *,
  .news-digest-card *,
  .v2-hero *,
  .mtf-align-bar *,
  .chart-area *,
  .v2-inst-card * {
    text-shadow: none;
  }

  .card:hover,
  .trade-card:hover,
  .acc-full:hover,
  .school-card:hover,
  .news-card:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.30), 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent) !important;
  }

  .card-hdr,
  .tc-hdr,
  .acc-full-hdr,
  .sheet-card-header,
  .news-digest-head {
    min-height: 58px !important;
    padding: 16px 18px !important;
    background: transparent !important;
    border-bottom-color: color-mix(in srgb, var(--border) 68%, transparent) !important;
  }

  .acc-body,
  .tc-body,
  .sheet-card-body,
  .smn-body,
  .tp-body,
  .fib-body,
  .liq-heatmap-body {
    background: rgba(14,14,22,.72) !important;
    color: #a0a3b1 !important;
    border-color: rgba(129,140,248,.16) !important;
  }

  .tl-row,
  .tp-row,
  .brain-simple-card {
    background: rgba(8,8,13,.58) !important;
    border-color: rgba(129,140,248,.16) !important;
    color: #e2e4ef !important;
  }

  .acc-title,
  .card-title,
  .tc-title,
  .school-card-title,
  .news-title {
    color: #e2e4ef !important;
    opacity: 1 !important;
  }

  .v2-hero,
  .chart-area,
  .v2-ctrl-row,
  .mtf-align-bar,
  .trade-scroll {
    width: min(var(--zenith-content-max), calc(100vw - var(--zenith-sidebar-w) - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .v2-hero {
    margin-top: 26px !important;
    padding: 28px 32px !important;
    color: #e2e4ef !important;
    background:
      linear-gradient(180deg, rgba(99,102,241,.09), rgba(255,255,255,.018)),
      rgba(20,20,30,.84) !important;
  }

  .v2-price {
    font-size: clamp(44px, 4.8vw, 72px) !important;
    letter-spacing: -.04em !important;
  }

  .chart-area {
    height: min(55vh, 620px) !important;
    min-height: 420px !important;
    margin-top: 20px !important;
  }

  .v2-ctrl-row {
    padding: 18px 0 0 !important;
  }

  .trade-scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .v2-price {
    font-size: clamp(44px, 4.8vw, 72px) !important;
    letter-spacing: -.04em !important;
  }

  .chart-area {
    width: min(var(--zenith-content-max), calc(100vw - var(--zenith-sidebar-w) - 80px)) !important;
    height: min(55vh, 620px) !important;
    min-height: 420px !important;
    margin: 20px auto 0 !important;
  }

  [data-section="chart"].tv-expanded .chart-area {
    height: min(65vh, 740px) !important;
    min-height: 520px !important;
  }

  .v2-ctrl-row,
  .mtf-align-bar {
    width: min(var(--zenith-content-max), calc(100vw - var(--zenith-sidebar-w) - 80px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .v2-ctrl-row {
    padding: 18px 0 0 !important;
  }

  .news-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .news-card {
    margin: 0 !important;
    min-height: 260px;
  }

  .news-digest-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* Final Trade tab chart override: keep TradingView collapsible and fit-to-screen when expanded. */
[data-section="chart"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: calc(var(--nav-h, 60px) + env(safe-area-inset-bottom) + 14px) !important;
}
[data-section="chart"] .chart-accordion-toggle {
  display: flex !important;
}
[data-section="chart"]:not(.tv-expanded) .chart-area,
body.v31-compact-ui [data-section="chart"]:not(.tv-expanded) .chart-area {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border-width: 0 !important;
}
[data-section="chart"].tv-expanded .chart-area,
body.v31-compact-ui [data-section="chart"].tv-expanded .chart-area {
  display: block !important;
  width: calc(100% - 48px) !important;
  height: clamp(140px, calc(100dvh - 535px), 240px) !important;
  min-height: 140px !important;
  max-height: none !important;
  margin: 10px auto 14px !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  border-width: 1px !important;
}
[data-section="chart"] #chartContainer,
[data-section="chart"] #chartContainer iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  display: block !important;
}
@media (max-width: 430px) {
  [data-section="chart"] .chart-area,
  [data-section="chart"].tv-expanded .chart-area,
  body.v31-compact-ui [data-section="chart"].tv-expanded .chart-area {
    height: clamp(130px, calc(100dvh - 505px), 210px) !important;
    min-height: 130px !important;
  }
}

@media (min-width: 99999px) and (max-width: 1260px) {
  :root { --zenith-sidebar-w: 228px; }

  .bottom-nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .v2-topbar,
  .sec-header,
  .scroll-area,
  .trade-scroll,
  .news-scroll {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  [data-section="chart"] .trade-scroll,
  [data-section="levels"] .scroll-area,
  [data-section="pulse"] .scroll-area,
  [data-section="news"] .scroll-area,
  .news-list {
    grid-template-columns: 1fr !important;
  }

  #tradePrimaryGrid > .trade-card,
  #emperorBrainAcc,
  #smnCard,
  #tradeProbCard,
  #botStatusCard {
    grid-column: 1 !important;
  }
}

html[data-theme="light"] .bottom-nav {
  background:
    linear-gradient(180deg, rgba(99,102,241,.08), transparent 34%),
    color-mix(in srgb, var(--s1) 92%, transparent) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08) !important;
  border-color: var(--border2) !important;
}

html[data-theme="light"] .v2-topbar,
html[data-theme="light"] .sec-header {
  background: color-mix(in srgb, var(--s1) 86%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
}

/* Wide desktop polish: use the screen, keep panels dense, and stop tab content
   from sitting in a narrow strip on large monitors. */
@media (min-width: 99999px) {
  :root {
    --zenith-content-max: 1660px;
  }

  /* ── UNIFIED WIDTH: all top-level elements on trade tab share one width ── */
  .v2-hero,
  .chart-area,
  .v2-ctrl-row,
  .mtf-align-bar,
  .v2-topbar,
  .sec-header {
    width: min(var(--zenith-content-max), calc(100vw - var(--zenith-sidebar-w) - 80px)) !important;
    max-width: var(--zenith-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .trade-scroll,
  .scroll-area,
  .news-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #heroCard.v2-hero {
    min-height: 0 !important;
    margin-top: 22px !important;
    padding: 18px 22px !important;
    grid-template-columns: minmax(320px, 1fr) auto auto !important;
    grid-template-areas:
      "left right grade"
      "gates gates phase"
      "sr sr sr"
      "acc acc acc" !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
  }

  #heroCard .v2-hero-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #heroCard .v2-price {
    font-size: clamp(34px, 2.2vw, 46px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  #heroCard .v2-signal-chip,
  #heroCard .v2-hero-pair,
  #heroCard .v2-gate-pill,
  #heroCard .v2-phase-badge {
    font-size: 10px !important;
  }

  #heroCard .v2-hero-gate-row {
    margin-top: 0 !important;
    padding-top: 8px !important;
    min-height: 25px !important;
    align-items: center !important;
  }

  #heroCard .v2-phase-wrap {
    justify-content: center !important;
    align-self: center !important;
  }

  #heroCard .v2-hero-sr-row {
    gap: 10px !important;
    padding-top: 8px !important;
  }

  #heroCard .v2-hero-sr {
    min-height: 58px !important;
    padding: 10px 14px !important;
  }

  /* ── CHART: taller so TradingView is fully visible ── */
  .chart-area {
    height: min(55vh, 580px) !important;
    min-height: 420px !important;
    margin-top: 16px !important;
  }

  .mtf-align-bar {
    min-height: 52px !important;
    padding: 8px 16px !important;
  }

  .v2-ctrl-row {
    padding-top: 18px !important;
  }

  /* Trade-scroll padding override to align with the unified width */
  .trade-scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  [data-section="levels"] .scroll-area {
    display: block !important;
    width: 100% !important;
    padding-top: 26px !important;
  }

  [data-section="levels"] .scroll-area > #analysisAuxCards {
    display: block !important;
    width: 100% !important;
  }

  [data-section="levels"] .scroll-area > #analysisAuxCards > #tradeTimelineCard {
    width: 100% !important;
  }

  [data-section="levels"] .scroll-area > #emperorBrainAcc,
  [data-section="levels"] .scroll-area > #smnCard,
  [data-section="levels"] .scroll-area > #tradeProbCard,
  [data-section="levels"] .scroll-area > .sr-duo,
  [data-section="levels"] .scroll-area > .tz-duo,
  [data-section="levels"] .scroll-area > #flipsCard,
  [data-section="levels"] .scroll-area > #chochCard,
  [data-section="levels"] .scroll-area > #fibCard,
  [data-section="levels"] .scroll-area > #vwapCard,
  [data-section="levels"] .scroll-area > #vpCard,
  [data-section="levels"] .scroll-area > #rrCalcCard,
  [data-section="levels"] .scroll-area > #pdfDoctrineCard {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  [data-section="levels"] .v2-layer-label {
    margin: 0 0 2px !important;
  }

  [data-section="levels"] .acc-full,
  [data-section="levels"] .trade-card,
  [data-section="levels"] .sheet-card {
    margin-bottom: 0 !important;
  }

  [data-section="levels"] .acc-body {
    max-height: min(54vh, 560px) !important;
    overflow: auto !important;
  }

  [data-section="chat"] .school-panel,
  [data-section="chat"] .chat-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 99999px) and (max-width: 1399px) {
  [data-section="levels"] .scroll-area {
    display: block !important;
    width: 100% !important;
  }

  [data-section="levels"] #analysisAuxCards,
  [data-section="levels"] #emperorBrainAcc,
  [data-section="levels"] #smnCard,
  [data-section="levels"] #tradeProbCard,
  [data-section="levels"] .sr-duo,
  [data-section="levels"] .tz-duo,
  [data-section="levels"] #flipsCard,
  [data-section="levels"] #chochCard,
  [data-section="levels"] .v2-layer-label,
  [data-section="levels"] #fibCard,
  [data-section="levels"] #vwapCard,
  [data-section="levels"] #vpCard,
  [data-section="levels"] #rrCalcCard,
  [data-section="levels"] #pdfDoctrineCard {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* Trade tab refinement: desktop terminal layout plus PWA-safe controls. */
@media (min-width: 99999px) {
  [data-section="chart"] .v2-ctrl-row {
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    padding-top: 22px !important;
  }

  [data-section="chart"] .v2-coin-btn {
    justify-self: start !important;
    min-width: 164px !important;
    height: 52px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    background: rgba(13,14,24,.86) !important;
  }

  [data-section="chart"] .v2-tf-group {
    justify-self: center !important;
    display: inline-grid !important;
    grid-template-columns: repeat(5, 56px) !important;
    gap: 6px !important;
    padding: 6px !important;
    border: 1px solid rgba(129,140,248,.20) !important;
    border-radius: 18px !important;
    background: rgba(6,7,13,.62) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.18) !important;
  }

  [data-section="chart"] .v2-tf {
    width: 56px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  [data-section="chart"] .v2-ctrl-row > .v2-icon-btn {
    display: none !important;
  }

  #heroCard.v2-hero {
    grid-template-columns: minmax(420px, 1fr) 132px 92px !important;
    padding: 22px 26px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(135deg, rgba(99,102,241,.16), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
      rgba(17,18,30,.92) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  #heroCard .v2-price {
    color: #f4f6ff !important;
    font-size: clamp(38px, 2.55vw, 54px) !important;
    text-shadow: 0 0 28px rgba(129,140,248,.16) !important;
  }

  #heroCard .v2-hero-right,
  #heroCard .v2-grade-wrap {
    min-height: 58px !important;
    padding: 10px 12px !important;
    justify-content: center !important;
    border: 1px solid rgba(129,140,248,.16) !important;
    border-radius: 16px !important;
    background: rgba(8,9,16,.56) !important;
  }

  #heroCard .v2-conf-lbl,
  #heroCard .v2-grade-lbl,
  #heroCard .v2-phase-lbl {
    color: #a7adcc !important;
    font-size: 8px !important;
  }

  #heroConfPct {
    display: block !important;
    min-width: 44px !important;
    color: var(--amber) !important;
    font-size: 22px !important;
    text-align: right !important;
  }

  #heroGradeBadge {
    min-width: 44px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  #heroCard .v2-hero-sr {
    min-height: 66px !important;
    border-radius: 18px !important;
  }

  [data-section="chart"] .mtf-align-bar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 14px !important;
    min-height: 72px !important;
    margin-top: 14px !important;
    padding: 12px 16px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(15,16,26,.88) !important;
  }

  [data-section="chart"] .mtf-align-lbl {
    width: 100px !important;
    color: #a7adcc !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  [data-section="chart"] .mtf-align-dots {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(86px, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  [data-section="chart"] .mtf-align-pill {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "tf struct dot"
      "sig sig sig" !important;
    align-items: center !important;
    border-radius: 15px !important;
    background: rgba(8,9,16,.60) !important;
  }

  [data-section="chart"] .mtf-ap-tf { grid-area: tf; font-size: 10px !important; }
  [data-section="chart"] .mtf-ap-dot { grid-area: dot; font-size: 13px !important; }
  [data-section="chart"] .mtf-ap-struct {
    grid-area: struct;
    justify-self: center;
    font-size: 15px !important;
    font-weight: 900 !important;
  }
  [data-section="chart"] .mtf-ap-sig {
    grid-area: sig;
    display: inline-flex !important;
    justify-self: center;
    max-width: none !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }

  [data-section="chart"] .mtf-align-score {
    min-width: 92px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: rgba(129,140,248,.12) !important;
    border: 1px solid rgba(129,140,248,.18) !important;
  }

  [data-section="chart"] .chart-area {
    height: min(55vh, 620px) !important;
    min-height: 420px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 768px) {
  [data-section="chart"] .v2-ctrl-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 10px 8px !important;
  }

  [data-section="chart"] .v2-coin-btn {
    justify-self: start !important;
    min-height: 42px !important;
  }

  [data-section="chart"] .v2-tf-group {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 4px !important;
    border: 1px solid rgba(129,140,248,.18) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.52) !important;
  }

  [data-section="chart"] .v2-tf {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 11px !important;
    font-size: 10px !important;
  }

  [data-section="chart"] .v2-ctrl-row > .v2-icon-btn {
    display: none !important;
  }

  [data-section="chart"] .mtf-align-bar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }

  [data-section="chart"] .mtf-align-lbl {
    grid-column: 1 / -1 !important;
  }

  [data-section="chart"] .mtf-align-dots {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  [data-section="chart"] .mtf-align-pill {
    min-width: 0 !important;
  }
}

/* ============================================
   LIGHT MODE OVERRIDES FOR DESKTOP (>1024px)
   ============================================ */

/* ============================================
   LIGHT MODE OVERRIDES FOR PWA
   ============================================ */

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 50% 0%, rgba(99,102,241,.06) 0%, transparent 58%),
    radial-gradient(circle at 100% 16%, rgba(0,217,126,.03) 0%, transparent 38%),
    var(--bg) !important;
}

html[data-theme="light"] #app {
  background:
    radial-gradient(circle at 50% 0%, rgba(99,102,241,.06) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 180px),
    var(--bg) !important;
}

html[data-theme="light"] .v2-topbar,
html[data-theme="light"] .sec-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}

html[data-theme="light"] .v2-brand-name,
html[data-theme="light"] .sec-title {
  color: var(--text) !important;
}

html[data-theme="light"] .v2-brand-sub,
html[data-theme="light"] .sec-sub {
  color: var(--text2) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .trade-card,
html[data-theme="light"] .acc-full,
html[data-theme="light"] .school-card,
html[data-theme="light"] .news-card,
html[data-theme="light"] .news-brief-card,
html[data-theme="light"] .news-digest-card,
html[data-theme="light"] .v2-hero,
html[data-theme="light"] .mtf-align-bar,
html[data-theme="light"] .chart-area,
html[data-theme="light"] .v2-inst-card,
html[data-theme="light"] .brain-simple-card,
html[data-theme="light"] .sheet-card {
  color: var(--text) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    color-mix(in srgb, var(--s1) 90%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
}

html[data-theme="light"] .v2-coin-btn,
html[data-theme="light"] .v2-tf,
html[data-theme="light"] .v2-icon-btn,
html[data-theme="light"] .hdr-btn,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .v2-hero-sr,
html[data-theme="light"] .hero-sr-toggle,
html[data-theme="light"] .mtf-card,
html[data-theme="light"] .brain-tf-btn {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--s2) 90%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
  box-shadow: inset 0 0 14px rgba(99,102,241,.02) !important;
}

html[data-theme="light"] .v2-tf.active,
html[data-theme="light"] .brain-tf-btn.active,
html[data-theme="light"] .mtf-card.active-tf {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

html[data-theme="light"] .v2-hero-sr-val {
  color: var(--text) !important;
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .trade-card:hover,
html[data-theme="light"] .acc-full:hover,
html[data-theme="light"] .school-card:hover,
html[data-theme="light"] .news-card:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.12), 0 0 20px color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

html[data-theme="light"] .acc-body,
html[data-theme="light"] .tc-body,
html[data-theme="light"] .sheet-card-body,
html[data-theme="light"] .smn-body,
html[data-theme="light"] .tp-body,
html[data-theme="light"] .fib-body,
html[data-theme="light"] .liq-heatmap-body {
  background: color-mix(in srgb, var(--s1) 85%, transparent) !important;
  color: var(--text2) !important;
  border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
}

html[data-theme="light"] .tl-row,
html[data-theme="light"] .tp-row,
html[data-theme="light"] .brain-simple-card {
  background: color-mix(in srgb, var(--bg) 80%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .acc-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .tc-title,
html[data-theme="light"] .school-card-title,
html[data-theme="light"] .news-title {
  color: var(--text) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #heroCard.v2-hero {
  background:
    linear-gradient(135deg, rgba(99,102,241,.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    color-mix(in srgb, var(--s1) 92%, transparent) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

html[data-theme="light"] #heroCard .v2-price {
  color: var(--text) !important;
  text-shadow: 0 0 20px rgba(99,102,241,.08) !important;
}

html[data-theme="light"] [data-section="chart"] .mtf-align-bar {
  background:
    linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    color-mix(in srgb, var(--s2) 92%, transparent) !important;
}

html[data-theme="light"] [data-section="chart"] .mtf-align-score {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

html[data-theme="light"] [data-section="chart"] .mtf-align-pill {
  background: color-mix(in srgb, var(--bg) 70%, transparent) !important;
}

html[data-theme="light"] #toasts .toast {
  background: color-mix(in srgb, var(--s1) 95%, transparent) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}

/* ============================================
   DESKTOP → PWA LAYOUT MATCH
   Neutralises sidebar/fixed-width desktop rules
   so desktop behaves like mobile/PWA.
   ============================================ */
@media (min-width: 99999px) {
  html, body {
    overflow: auto !important;
  }

  /* Revert nav to bottom bar (mobile/PWA style) */
  .bottom-nav {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: calc(var(--nav-h) + 2px) !important;
    min-height: 0 !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) 10px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    gap: 0 !important;
    border-top: 1px solid var(--glass-stroke) !important;
    border-right: none !important;
    border-radius: 26px !important;
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(6px) saturate(165%) !important;
    box-shadow: 0 22px 46px var(--shadow-heavy), 0 8px 20px rgba(22,24,46,.24), inset 0 1px 0 var(--glass-highlight), 0 0 0 1px rgba(99,102,241,.04) !important;
    z-index: 100 !important;
  }

  .bottom-nav::before,
  .bottom-nav::after {
    display: none !important;
  }

  .bottom-nav .nb,
  .bottom-nav .theme-toggle {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .bottom-nav .nb span {
    display: inline !important;
    font-size: 8px !important;
    transform: none !important;
    opacity: .76 !important;
    max-width: none !important;
    color: currentColor !important;
  }

  .bottom-nav .nb svg,
  .bottom-nav .theme-toggle svg {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto !important;
    opacity: .82 !important;
  }

  .bottom-nav .nb:hover:not(.active) {
    transform: none !important;
    background: transparent !important;
  }

  .bottom-nav .nb.active {
    color: var(--text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: none !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
  }

  .bottom-nav .nb.active::before,
  .nav-active-pill {
    display: block !important;
  }

  .bottom-nav .theme-toggle {
    margin-top: 0 !important;
    justify-content: center !important;
    color: var(--nav-inactive) !important;
    border-color: transparent !important;
  }

  /* Full-width sections */
  .section,
  .section.active,
  body.emperor-repo-pure .section,
  body.emperor-repo-pure .section.active {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Full-width scroll areas */
  .scroll-area,
  .trade-scroll,
  .news-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 30px 40px calc(46px + var(--nav-h)) !important;
  }

  /* Topbar / header full width */
  .v2-topbar,
  .sec-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  #toasts {
    top: 24px !important;
    bottom: auto !important;
    right: 24px !important;
    left: auto !important;
    width: min(280px, calc(100vw - 40px)) !important;
  }
}

/* Final Trade tab chart override: keep TradingView collapsible and fit-to-screen when expanded. */
[data-section="chart"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: calc(var(--nav-h, 60px) + env(safe-area-inset-bottom) + 14px) !important;
}
[data-section="chart"] .chart-accordion-toggle {
  display: flex !important;
}
[data-section="chart"]:not(.tv-expanded) .chart-area,
body.v31-compact-ui [data-section="chart"]:not(.tv-expanded) .chart-area {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border-width: 0 !important;
}
[data-section="chart"].tv-expanded .chart-area,
body.v31-compact-ui [data-section="chart"].tv-expanded .chart-area {
  display: block !important;
  width: calc(100% - 48px) !important;
  height: clamp(140px, calc(100dvh - 535px), 240px) !important;
  min-height: 140px !important;
  max-height: none !important;
  margin: 10px auto 14px !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  border-width: 1px !important;
}
[data-section="chart"] #chartContainer,
[data-section="chart"] #chartContainer iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  display: block !important;
}
@media (max-width: 430px) {
  [data-section="chart"] .chart-area,
  [data-section="chart"].tv-expanded .chart-area,
  body.v31-compact-ui [data-section="chart"].tv-expanded .chart-area {
    height: clamp(130px, calc(100dvh - 505px), 210px) !important;
    min-height: 130px !important;
  }
}