.app.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "topbar"
    "stats"
    "chart"
    "bottom";
  gap: var(--ui-shell-gap);
  padding: var(--ui-shell-pad);
  min-height: 100vh;
  background: var(--shell-bg);
  overflow: hidden;
  transition: grid-template-columns 300ms ease, grid-template-rows 200ms ease-out, gap 200ms ease-out;
}

.ui-slot-header {
  display: contents;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — COMMAND ISLANDS
   Concept: pas de barre unifiée. Le fond de l'app transparaît
   entre 4 îles de verre flottantes indépendantes.
   ═══════════════════════════════════════════════════════════════ */

.topbar-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 48px;
  min-height: 48px;
  padding: 0 10px;
  position: relative;
  z-index: 20;
  pointer-events: auto;
  /* Pas de background, pas de border : le shell transparaît */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  z-index: 2600;
  isolation: isolate;
}

/* ── Token partagé pour les îles sans dropdowns positionnés ─── */
.tb-brand,
.topbar-main > .mode-switcher,
.tb-selects {
  background: rgba(12, 17, 24, 0.86);
  border: 1px solid rgba(145, 160, 178, 0.13);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* .tb-actions SANS backdrop-filter — backdrop-filter crée un stacking
   context qui piège les dropdowns position:fixed/absolute à l'intérieur */
.tb-actions {
  background: rgba(12, 17, 24, 0.86);
  border: 1px solid rgba(145, 160, 178, 0.13);
  border-radius: var(--radius-md);
}

/* ── Île Brand ──────────────────────────────────────────────── */
.tb-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
}

.tb-logo {
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ── Île Modes ──────────────────────────────────────────────── */
.topbar-main > .mode-switcher {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width: 400px;
  min-width: max-content;
  overflow-x: auto;
  scrollbar-width: none;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.topbar-main > .mode-switcher::-webkit-scrollbar {
  display: none;
}

/* Buttons inside the modes island: segments sans bordure individuelle */
.topbar-main > .mode-switcher .mode-btn {
  /* Les six declarations communes avec .tb-btn vivent dans la regle partagee plus bas
     ([btn-shared-20260808]). Ne restent ici que les differences. */
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
  pointer-events: auto;
}

.topbar-main > .mode-switcher .mode-btn .mode-btn-icon {
  display: none;
}

.topbar-main > .mode-switcher .mode-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

/* La formule d'etat actif vit desormais dans tabs.css, avec celle des onglets :
   c'est litteralement la meme, et tabs.css est plus tardive dans la cascade. */

/* ── Île Data (selects) ─────────────────────────────────────── */
.tb-selects {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 34px;
  padding: 0;
  gap: 0;
  overflow: visible;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.tb-selects .symbol-select-native {
  position: fixed;
  top: -9999px;
  left: -9999px;
  pointer-events: none;
  opacity: 0;
  width: 0;
  height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
}

.symbol-select-custom {
  position: relative;
  display: flex;
  min-width: 408px;
  height: 100%;
  border-right: 1px solid rgba(145, 160, 178, 0.13);
}

.symbol-select-custom-trigger {
  width: 100%;
  height: 100%;
  padding: 0 10px 0 14px;
  border: 0;
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.symbol-select-custom-trigger-value {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.symbol-select-custom-trigger-symbol {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}

.symbol-select-custom-trigger-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.symbol-select-custom-caret {
  color: var(--accent-cyan);
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
}

.symbol-select-custom-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(540px, 70vw);
  max-height: min(68vh, 560px);
  overflow: hidden;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  background: rgba(7, 12, 20, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  z-index: 3600;
}

.symbol-select-custom-list {
  max-height: min(68vh, 560px);
  overflow: auto;
  padding: 6px 0;
}

.symbol-select-custom-option {
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.symbol-select-custom-option:hover,
.symbol-select-custom-option:focus-visible,
.symbol-select-custom-option.is-selected {
  background: rgba(111, 231, 255, 0.12);
  outline: none;
}

.symbol-select-custom-option-symbol {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}

.symbol-select-custom-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* Les selects sont borderless — l'île est le contenant */
.tb-selects select {
  height: 100%;
  padding: 0 10px;
  min-width: 80px;
  background: none;
  border: none;
  border-right: 1px solid rgba(145, 160, 178, 0.13);
  border-radius: 0;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  appearance: auto;
}

.tb-selects select:last-child {
  border-right: none;
}

.tb-selects select:focus {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Île Actions ────────────────────────────────────────────── */
.tb-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 34px;
  padding: 3px;
  gap: 2px;
  position: relative;
  z-index: 1;
}

/* Buttons inside actions island: segments sans bordure individuelle */
/* [btn-shared-20260808] .tb-btn et la base bureau de .mode-btn declaraient ces six
   valeurs mot pour mot. Reunies ici, a la position la PLUS TARDIVE des deux pour que
   rien de ce qui se declare entre-temps ne puisse les sous-coter. Chaque selecteur garde
   sa specificite : .topbar-main > .mode-switcher .mode-btn (0,3,0) continue de battre
   .mode-switcher .mode-btn (0,2,0), qui reste inerte sur bureau. */
.tb-btn,
.topbar-main > .mode-switcher .mode-btn {
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: rgba(188, 174, 222, 0.7);
}

.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  transition: background 120ms ease, color 120ms ease;
}

.tb-btn:hover,
.tb-btn:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  outline: none;
}

/* Screener ouvert */
.topbar-screener[open] > .tb-btn {
  background: rgba(111, 231, 255, 0.07);
  color: var(--accent-cyan);
}

.topbar-screener[open] > summary {
  visibility: hidden;
  pointer-events: none;
}

.topbar-settings[open] > .tb-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
}

.tb-count {
  color: var(--accent-cyan);
  font-size: 10px;
  font-weight: 700;
  min-width: 14px;
  text-align: center;
  opacity: 0.85;
}

/* ── Mobile : active-mode + hamburger cachés par défaut ──────── */
.topbar-main .mobile-active-mode,
.topbar-main .topbar-mobile-menu {
  display: none;
}

.ui-slot-main {
  display: contents;
}

#topbarMain {
  grid-area: topbar;
}

#strategyTopbar {
  grid-area: stats;
}

.chart-shell {
  grid-area: chart;
  min-height: 0;
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

.ui-bottom-drawer {
  grid-area: bottom;
}

#autopilotPanelSlot,
#etfMaisonPanelSlot {
  grid-area: workspace;
  min-height: 0;
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}

.ui-mode-bar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
}

.mode-bar-actions {
  display: flex;
  gap: 6px;
}

.mode-switcher {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.mode-switcher .mode-btn {
  border: 1px solid var(--line);
  background: rgba(12, 17, 24, 0.88);
  color: var(--text);
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}


.mode-btn.mode-switch-flash,
.mobile-mode-dot.mode-switch-flash {
  animation: mode-switch-flash 360ms ease-out;
}

@keyframes mode-switch-flash {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  40% {
    transform: scale(1.03);
    box-shadow: none;
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

.mode-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(111, 231, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
}

/* [sheet-icons-20260808] La pastille contenait deux lettres ; elle porte maintenant un pictogramme,
   qu'il faut dimensionner pour qu'il tienne dans le cercle de 18px. */
.mode-btn-icon svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.mode-btn-label {
  font-size: 12px;
}

.market-context-pill {
  font-size: 11px;
}

.market-context-pill-main {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-search-field {
  min-width: 240px;
  gap: 4px;
}

.symbol-search-field input {
  min-width: 240px;
}

.symbol-search-count {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.topbar-screener {
  position: relative;
  z-index: 190;
}

.topbar-screener > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 195;
}

.topbar-screener > summary::-webkit-details-marker {
  display: none;
}

.topbar-screener[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 12, 0.5);
  backdrop-filter: blur(4px);
  z-index: 190;
}

.topbar-screener-panel {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1320px, calc(100vw - 24px));
  height: min(940px, calc(100vh - 36px));
  z-index: 200;
  border: 1px solid rgba(145, 160, 178, 0.18);
  border-radius: 16px;
  background: rgba(7, 8, 10, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.56);
  padding: 14px;
  overflow: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

body.screener-open {
  overflow: hidden;
}

.topbar-screener:not([open]) .topbar-screener-panel {
  display: none;
}

.topbar-screener-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.topbar-screener-head {
  display: none;
}

.topbar-screener-head-copy {
  display: none;
}

.topbar-screener-head-copy strong {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.topbar-screener-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

.topbar-screener-sidebar {
  display: grid;
  gap: 8px;
  align-content: start;
  flex-shrink: 0;
  overflow: visible;
  padding: 0;
  border-right: none;
  width: 100%;
}

.topbar-screener-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
}

.topbar-screener-section {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(145, 160, 178, 0.08);
  border-radius: 0;
  background: none;
}

.topbar-screener-section[hidden] {
  display: none !important;
}

.topbar-screener-section--advanced {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 12px;
  border: 1px solid rgba(145, 160, 178, 0.08);
  border-radius: 14px;
  background: rgba(7, 8, 10, 0.86);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s ease, border-color 0.2s ease, background 0.2s ease;
}

.topbar-screener-section:first-child {
  border-top: none;
  padding-top: 0;
}

.topbar-screener-sidebar .topbar-screener-section:first-child {
  display: grid;
  gap: 6px;
  padding: 0 0 4px;
  width: 100%;
  border-top: none;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
}

.topbar-screener-sidebar .topbar-screener-section:first-child .topbar-screener-section-head {
  display: none;
}

.topbar-screener-quickbar {
  display: grid;
  grid-template-columns: minmax(340px, 33fr) minmax(160px, 20.67fr) minmax(160px, 20.67fr) minmax(160px, 20.67fr) minmax(38px, 5fr);
  gap: 12px;
  align-items: end;
  width: 100%;
}

.topbar-screener-quickbar > * {
  min-width: 0;
}

.topbar-screener-sidebar .topbar-screener-section:first-child .symbol-search-field {
  min-width: 0;
}

.topbar-screener-inline-close {
  width: 100%;
  align-self: end;
  min-width: 38px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1;
}

.topbar-screener-section-head,
.topbar-screener-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.topbar-screener-section-head strong,
.topbar-screener-toolbar-copy strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.topbar-screener-section-head span,
.topbar-screener-toolbar-copy span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topbar-screener-section-head span {
  display: none;
}

.topbar-screener-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 10px;
}

.topbar-screener-grid--primary {
  grid-template-columns: none;
}

.topbar-screener-grid--single {
  grid-template-columns: 1fr;
}

.topbar-screener-grid--advanced {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: end;
}

.topbar-screener-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.screener-multiselect {
  position: relative;
}

.screener-multiselect > summary {
  list-style: none;
}

.screener-multiselect > summary::-webkit-details-marker {
  display: none;
}

.screener-multiselect-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--field);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.screener-multiselect[open] .screener-multiselect-summary {
  border-color: var(--border-default);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.screener-multiselect-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(145, 160, 178, 0.14);
  border-radius: var(--radius-xl);
  background: rgba(9, 13, 19, 0.98);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.42);
}

.screener-multiselect-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 6px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
}

.screener-multiselect-option:hover {
  background: rgba(255, 255, 255, 0.04);
}

.screener-multiselect-option input {
  margin: 0;
  width: 14px;
  height: 14px;
}

/* ── Groupes de filtres avancés ───────────────────────────── */
.screener-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.screener-filter-group + .screener-filter-group {
  padding-top: 10px;
  border-top: 1px solid rgba(145, 160, 178, 0.08);
}

.screener-filter-group-title {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Paire min–max dans un seul champ */
.screener-range-pair {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.screener-range-pair input {
  flex: 1;
  min-width: 0;
  width: 0;
}

.screener-range-sep {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.topbar-screener-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topbar-screener-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(145, 160, 178, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(14, 19, 26, 0.72);
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-screener-toggle input {
  margin: 0;
}

.topbar-screener-toggle:has(input:checked) {
  border-color: var(--border-default);
  color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.03);
}

.topbar-screener-toolbar {
  flex-shrink: 0;
  padding: 0 0 6px;
  border: none;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
  border-radius: 0;
  background: none;
}

.topbar-screener-toolbar-copy {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.topbar-screener-toolbar-copy span {
  display: inline;
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.topbar-screener-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-width: 0;
  min-height: 0;
  transition: grid-template-columns 0.28s ease, gap 0.28s ease;
}

.topbar-screener-body.is-advanced-open .topbar-screener-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 12px;
}

.topbar-screener-body.is-advanced-open .topbar-screener-section--advanced {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.topbar-screener-results {
  /* Bug fix 2026-08-05: these were minmax(..., Nfr). .topbar-screener-results-head
     and each .topbar-screener-row are SEPARATE sibling grid containers (both only
     share this custom property via inheritance, not an actual shared grid), and
     both have min-width:max-content sized off their OWN content. An fr track
     resolves against each container's own width, so a short header label
     ("Univers") and much longer row data ("Nasdaq-100 + S&P 500 historique")
     produced different pixel widths for the "same" column in head vs rows --
     up to 161px of drift once horizontal scroll was introduced. Fixed px widths
     remove the divergence entirely: same string, same computed width, always. */
  --topbar-screener-grid-columns: 34px 88px 260px 180px;
  --topbar-screener-grid-columns-mobile: 24px 60px 110px 78px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(145, 160, 178, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(7, 8, 10, 0.88);
  min-height: 0;
  min-width: 0;
  transition: transform 0.28s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  /* [results-tail-20260808] Sans cela la derniere ligne est tranchee
     en deux par le bord du conteneur au lieu de finir proprement. */
  padding-bottom: var(--sp-2);
}

.topbar-screener-body.is-advanced-open .topbar-screener-results {
  transform: translateX(-10px);
  border-color: rgba(145, 160, 178, 0.18);
}

.topbar-screener-results-head,
.topbar-screener-row {
  display: grid;
  grid-template-columns: var(--topbar-screener-grid-columns);
  /* Bug fix 2026-08-05: metric columns beyond the 4 base ones (helper/symbol/
     identite/univers) are appended as direct grid children (.topbar-screener-
     row-metrics is display:contents) so they can pick this row's width in the
     scrollable .topbar-screener-results container. Without an explicit
     grid-auto-flow, extra children wrap into new implicit ROWS instead of
     extending the row sideways, which is what made picking >1 column via
     "Colonnes" look broken. */
  grid-auto-flow: column;
  /* Fixed, not minmax(90px, max-content): max-content has the exact same
     head-vs-row divergence problem as the fr tracks above (a metric header
     like "RSI" is narrower than its own data "83.4", "ATR%" vs "7.0%", etc). */
  grid-auto-columns: 90px;
  gap: 10px;
  align-items: center;
}

.topbar-screener-results-head {
  flex-shrink: 0;
  padding: 10px 10px 10px 8px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
}

.topbar-screener-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Custom scrollbar — matches site style */
.topbar-screener-rows,
.topbar-screener-section--advanced {
  scrollbar-width: thin;
  scrollbar-color: rgba(87, 98, 112, 0.78) rgba(13, 17, 24, 0.82);
}
.topbar-screener-rows::-webkit-scrollbar,
.topbar-screener-section--advanced::-webkit-scrollbar {
  width: 6px;
}
.topbar-screener-rows::-webkit-scrollbar-thumb,
.topbar-screener-section--advanced::-webkit-scrollbar-thumb {
  background: rgba(87, 98, 112, 0.78);
  border-radius: var(--radius-lg);
}
.topbar-screener-rows::-webkit-scrollbar-track,
.topbar-screener-section--advanced::-webkit-scrollbar-track {
  background: rgba(13, 17, 24, 0.82);
}

.topbar-screener-row {
  width: 100%;
  padding: 9px 10px 9px 8px;
  border: 0;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.topbar-screener-row:hover,
.topbar-screener-row:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

.topbar-screener-row.is-active {
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 2px 0 0 rgba(111, 231, 255, 0.95);
}

/* Fix 2026-08-05: with helper/symbol/identite/univers plus N metric columns,
   the row is routinely wider than the viewport and the whole thing scrolls
   horizontally (by design, per operator request). Without this, scrolling
   right to see metric values scrolls the ticker symbol off-screen too --
   100 rows of unlabeled numbers. Freeze the first two columns (helper +
   symbol) so the ticker stays put while metrics scroll underneath it. */
.topbar-screener-row-helper,
#symbolScreenerResultsHead > span:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
  background: rgba(7, 8, 10, 0.98);
}

.topbar-screener-row-symbol,
#symbolScreenerResultsHead > span:nth-child(2) {
  position: sticky;
  left: 34px;
  z-index: 3;
  background: rgba(7, 8, 10, 0.98);
}

@media (max-width: 639px) {
  .topbar-screener-row-symbol,
  #symbolScreenerResultsHead > span:nth-child(2) {
    left: 24px;
  }
}

.topbar-screener-row-symbol {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent-cyan);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.topbar-screener-row-helper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-screener-row-helper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(145, 160, 178, 0.12);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  cursor: pointer;
}

.topbar-screener-row-helper-btn:hover,
.topbar-screener-row-helper-btn:focus-visible {
  border-color: rgba(111, 231, 255, 0.4);
  color: var(--text);
  outline: none;
}

.topbar-screener-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.topbar-screener-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
}

.topbar-screener-history-badge {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: var(--radius-pill);
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Flux arrete en amont : la ligne existe mais ses metriques sont des fossiles. */
.topbar-screener-stale-badge {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.topbar-screener-row-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.topbar-screener-row-meta {
  color: var(--muted);
  font-size: 11px;
}

.topbar-screener-head-metric,
.topbar-screener-row-metric {
  min-width: 0;
  text-align: right;
}

button.topbar-screener-head-metric {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 10px;
  font-family: inherit;
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

button.topbar-screener-head-metric:hover {
  color: var(--text);
}

button.topbar-screener-head-metric.is-sorted {
  color: var(--accent-cyan, #67e8f9);
}

.topbar-screener-row-metrics {
  display: contents;
}

/* [pagination-ground-20260808] Cette barre ne declarait aucun fond : sur telephone
   elle s'imprimait par-dessus les dernieres lignes du tableau. Elle a besoin d'un sol
   opaque et de passer au-dessus des lignes. */
.topbar-screener-pagination {
  position: sticky;
  bottom: 0;
  /* z-index 2 ne suffisait pas en pratique : les lignes debordent de
     #symbolScreenerRows (overflow:visible, 6444px de hauteur reelle pour une boite de
     629px) et repassaient par-dessus la barre. Aucune regle ne donne pourtant de
     z-index aux lignes -- je n'explique pas le mecanisme exact, je constate. Valeur
     portee a 50 et verifiee par test de collision sur douze points repartis sur la
     barre : 3 touches par une ligne avant, 0 apres. */
  z-index: 50;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid rgba(145, 160, 178, 0.14);
  background: rgba(7, 8, 10, 0.98);
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

/* Le bouton heritait du monospace du conteneur, ce qui en faisait le seul
   .btn.ghost.btn-sm de l'application hors Space Grotesk. Les six autres concordent.
    ne suffit pas : .btn declare deja font-family:inherit (styles.css:798), donc
   il herite du conteneur, justement monospace. Il faut nommer la police du corps.
   Le compteur, lui, reste en chiffres tabulaires. */
.topbar-screener-pagination .btn {
  font-family: "Space Grotesk", sans-serif;
}

.topbar-screener-pagination[hidden] {
  display: none;
}

.topbar-screener-row-metric {
  display: grid;
  gap: 2px;
  justify-items: end;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.topbar-screener-row-metric small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

/* Coloration metrique screener */
.metric--positive { color: var(--color-ok); }
.metric--negative { color: #a78bfa; }
.metric--rsi-overbought { color: #c084fc; }
.metric--rsi-oversold { color: var(--color-ok); }

.topbar-screener-detail-pop {
  position: fixed;
  inset: 0;
  z-index: 230;
}

.topbar-screener-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 3, 8, 0.46);
  cursor: pointer;
}

.topbar-screener-detail-sheet {
  position: absolute;
  top: 18px;
  right: 18px;
  width: min(980px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(145, 160, 178, 0.14);
  border-radius: 16px;
  background: rgba(7, 8, 10, 0.98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.topbar-screener-detail-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.topbar-screener-detail-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-screener-detail-head span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.topbar-screener-detail-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 18px 18px;
}

.topbar-screener-detail-empty {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.screener-detail-stack {
  display: grid;
  gap: 16px;
}

.screener-detail-header {
  display: grid;
  gap: 4px;
  padding-right: 260px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(111, 231, 255, 0.26);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.screener-detail-symbol {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.screener-detail-name {
  font-size: 16px;
  color: var(--text);
}

.screener-detail-subtitle {
  color: var(--muted);
  font-size: 13px;
}

.screener-detail-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.screener-detail-value {
  color: var(--text);
  font-size: 13px;
  text-align: right;
  min-width: 0;
}

.screener-detail-list,
.screener-detail-group {
  display: grid;
  gap: 6px;
}

.screener-detail-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px;
  align-items: start;
}

.screener-detail-description {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(145, 160, 178, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
}

.screener-detail-description-text {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  max-width: none;
}

.screener-detail-description-meta,
.screener-detail-description-source {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.screener-detail-description-meta strong {
  color: var(--text);
  font-weight: 600;
}

.screener-detail-description-source {
  font-size: 10px;
  letter-spacing: 0.03em;
}

.screener-detail-description[data-profile-status="conflict"] .screener-detail-description-text,
.screener-detail-description[data-profile-status="not_found"] .screener-detail-description-text {
  color: var(--text-muted);
}

.screener-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(145, 160, 178, 0.06);
}

.screener-detail-group-title {
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
}

.screener-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.screener-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font-size: 10px;
}

.topbar-screener-empty {
  padding: 18px 12px;
  color: var(--muted);
  text-align: center;
}

.topbar-mobile-menu,
.mobile-active-mode {
  flex: 0 0 auto;
}

.mobile-active-mode,
.topbar-mobile-menu {
  display: none;
}

.mobile-active-mode {
  border: 1px solid rgba(111, 231, 255, 0.66);
  border-radius: var(--radius-pill);
  background: rgba(10, 14, 20, 0.96);
  color: var(--accent-cyan);
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.topbar-mobile-menu {
  position: relative;
}

.topbar-mobile-menu > summary {
  list-style: none;
}

.topbar-mobile-menu > summary::-webkit-details-marker {
  display: none;
}

.topbar-mobile-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, 92vw);
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(10, 14, 20, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.topbar-mobile-menu:not([open]) .topbar-mobile-panel {
  display: none;
}

.topbar-mobile-block {
  display: grid;
  gap: 8px;
}

.mode-switcher-mobile {
  display: grid;
  gap: 6px;
  overflow: visible;
}

.mode-switcher-mobile .mode-btn {
  width: 100%;
  justify-content: flex-start;
}

.topbar-settings {
  position: relative;
}

.topbar-settings > summary {
  list-style: none;
}

.topbar-settings > summary::-webkit-details-marker {
  display: none;
}

.topbar-settings[open] .topbar-settings-panel {
  display: grid;
}

.topbar-settings-panel {
  display: none;
  position: fixed;
  top: 58px;
  right: 10px;
  width: min(300px, calc(100vw - 20px));
  z-index: 200;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(12, 17, 24, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.52);
  padding: 10px;
  gap: 8px;
}

.topbar-settings-panel .field,
.topbar-settings-panel .field {
  min-width: 0;
}

.topbar-settings-panel .btn,
.topbar-settings-panel .drawer-toggle,
.topbar-settings-panel select {
  width: 100%;
}

.topbar-settings-divider {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}

.mobile-mode-dots,
.mobile-mode-nav {
  display: none;
}

.mobile-mode-dots {
  position: fixed;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 2550;
  gap: 8px;
}

.mobile-mode-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(12, 17, 24, 0.88);
  padding: 0;
}

.mobile-mode-dot.is-active {
  background: var(--accent-cyan);
  border-color: rgba(111, 231, 255, 0.66);
}

.mobile-mode-nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2550;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(10, 14, 20, 0.96);
}

.mobile-mode-nav-icon {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(111, 231, 255, 0.18);
  background: rgba(111, 231, 255, 0.08);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.mobile-mode-nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.05;
}

.mobile-strategy-select-wrap {
  display: none;
}

.mobile-strategy-fab {
  display: none;
}

.mobile-strategy-select-wrap span,
.mobile-strategy-fab span {
  display: none;
}

.mobile-strategy-select-wrap select,
.mobile-strategy-fab select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(111, 231, 255, 0.32);
  border-radius: var(--radius-lg);
  background: rgba(12, 17, 24, 0.92);
  color: var(--text);
  font-size: 11px;
  padding: 0 8px;
}

.app-shell :is(#topbarMain, #strategyTopbar, .ui-right-drawer, .ui-bottom-drawer, #autopilotPanelSlot, #etfMaisonPanelSlot, .strategy-panel, .setup-dock) {
  transition: opacity 150ms ease, transform 150ms ease;
}

.app-shell.mode-transition-out :is(#strategyTopbar, .ui-right-drawer, .ui-bottom-drawer, #autopilotPanelSlot, #etfMaisonPanelSlot, .strategy-panel, .setup-dock) {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.app-shell.mode-transition-out #topbarMain {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.app-shell.mode-transition-in :is(#topbarMain, #strategyTopbar, .ui-right-drawer, .ui-bottom-drawer, #autopilotPanelSlot, #etfMaisonPanelSlot, .strategy-panel, .setup-dock) {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .app.app-shell {
    transition: none;
  }
  .app-shell :is(#topbarMain, #strategyTopbar, .ui-right-drawer, .ui-bottom-drawer, #autopilotPanelSlot, #etfMaisonPanelSlot, .strategy-panel, .setup-dock) {
    transition: none;
  }
  .mode-btn.mode-switch-flash,
  .mobile-mode-dot.mode-switch-flash {
    animation: none;
  }
}

.legacy-context {
  display: none;
}

.app-shell.layout-scout,
  .app-shell.layout-analyst {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "topbar"
    "stats"
    "chart"
    "bottom";
}

.app-shell.layout-analyst {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "topbar"
    "stats"
    "chart"
    "data";
}

.app-shell.layout-autopilot {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "topbar"
    "hero"
    "workspace"
    "bottom";
}

.app-shell.layout-etf-maison {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px auto minmax(320px, 42vh) minmax(0, 1fr) auto;
  grid-template-areas:
    "topbar"
    "stats"
    "chart"
    "workspace"
    "bottom";
}

.strategy-panel,
.setup-dock {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

.ui-hidden-by-mode {
  display: none !important;
}

.strategy-panel.mode-compact .strategy-stats,
.strategy-panel.mode-compact .strategy-params {
  max-height: 220px;
  overflow: auto;
}

#operatorModeBadge {
  margin-bottom: 10px;
}

.top-signals-overlay {
  position: absolute;
  top: 12px;
  right: 64px;
  z-index: 4;
  max-width: min(34ch, 38%);
  background: rgba(7, 8, 10, 0.92);
  border: 1px solid rgba(145, 160, 178, 0.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.candle-detail-pop {
  position: absolute;
  top: 72px;
  left: 12px;
  z-index: 5;
  min-width: 220px;
  max-width: min(30ch, calc(100% - 24px));
  padding: 10px 12px;
  background: rgba(7, 8, 10, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(145, 160, 178, 0.14);
  transition: border-color 150ms ease, background 150ms ease;
  pointer-events: auto;
}

.candle-detail-pop[hidden] {
  display: none !important;
}

.candle-detail-pop:hover,
.candle-detail-pop:focus-within {
  border-color: rgba(111, 231, 255, 0.28);
}

.candle-detail-pop__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(145, 160, 178, 0.12);
}

.candle-detail-pop__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(111, 231, 255, 0.22);
  flex: 0 0 auto;
}

.candle-detail-pop__date {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.candle-detail-pop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 8px 10px;
}

.candle-detail-pop__metric {
  display: grid;
  gap: 2px;
}

.candle-detail-pop__metric span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.candle-detail-pop__metric strong {
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.candle-detail-pop__value--pos {
  color: var(--up) !important;
}

.candle-detail-pop__value--neg {
  color: var(--down) !important;
}

.layout-scout .chart-shell {
  position: relative;
}

/* Desktop named grids per mode */
@media (min-width: 1024px) {
  .app-shell.layout-scout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar"
      "stats"
      "chart"
      "bottom";
  }

  .app-shell.layout-analyst {
    grid-template-columns: minmax(0, 1fr) 0;
    grid-template-rows: 48px auto minmax(300px, 1fr) auto;
    grid-template-areas:
      "topbar topbar"
      "stats stats"
      "chart analysis"
      "data data";
  }

  .app-shell.layout-autopilot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar"
      "hero"
      "workspace"
      "bottom";
  }

  .layout-analyst .ui-bottom-drawer {
    grid-area: data;
  }

  .layout-analyst .ui-right-drawer {
    grid-area: analysis;
  }

  .layout-analyst .ui-right-drawer {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  .layout-autopilot .ui-right-drawer,
  .layout-etf-maison .ui-right-drawer {
    display: none !important;
  }

  .app-shell.layout-etf-maison {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar"
      "workspace"
      "bottom";
  }

  .app-shell.layout-analyst.right-drawer-open {
    grid-template-columns: minmax(0, 1fr) 420px;
  }

  .app-shell.layout-analyst:not(.right-drawer-open) {
    grid-template-columns: minmax(0, 1fr) 0;
  }

  .app.app-shell.layout-analyst #strategyTopbar {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

.topbar.topbar-analyst-focus {
  border-color: rgba(111, 231, 255, 0.48);
}

#strategyTopbar .topbar-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.layout-analyst .topbar .stat:nth-child(n + 9) {
  opacity: 0.82;
}

.wiring-map {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin-top: 6px;
}

.wiring-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.wiring-node {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  background: rgba(14, 19, 26, 0.86);
  text-align: center;
  box-shadow: none;
}

.wiring-arrow {
  color: var(--accent-cyan, #6fe7ff);
  font-weight: 700;
}

.app.app-shell.layout-analyst.bottom-drawer-open .ui-bottom-drawer {
  max-height: var(--drawer-bottom-height-analyst);
}

/* Shell overrides */
.app.app-shell {
  width: 100%;
  margin: 0;
  padding-top: var(--ui-shell-pad);
}

.app-shell #strategyTopbar {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  z-index: auto;
}

/* Constrain strategy-params in active analysis mode to reduce scroll */
.app-shell.layout-analyst .strategy-params {
  max-height: 300px;
  overflow: auto;
}

@media (max-width: 1023px) {
  .app.app-shell {
    padding: 10px;
    gap: 10px;
  }

  .topbar-screener-panel {
    top: 60px;
    width: calc(100vw - 20px);
    height: calc(100vh - 76px);
    padding: 10px;
  }

  .topbar-screener-shell {
    /* flex: 1 already set — inherits fine */
  }

  .topbar-screener-body {
    min-height: 0;
    overflow: hidden;
  }

  .topbar-screener-sidebar .topbar-screener-section:first-child {
    display: grid;
  }

  .topbar-screener-quickbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-screener-grid,
  .topbar-screener-grid--advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-screener-grid--primary,
  .screener-detail-columns,
  .screener-detail-row {
    grid-template-columns: 1fr;
  }

  .topbar-screener-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .topbar-screener-workspace,
  .topbar-screener-body.is-advanced-open .topbar-screener-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .topbar-screener-section--advanced,
  .topbar-screener-body.is-advanced-open .topbar-screener-section--advanced {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .topbar-screener-body.is-advanced-open .topbar-screener-results {
    transform: none;
  }

  .topbar-screener-detail-sheet {
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 88px);
  }

  .top-signals-overlay {
    position: static;
    max-width: 100%;
    margin-top: 8px;
  }

  .app-shell .controls {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .app-shell .controls .field,
  .app-shell .controls .field-sm {
    min-width: 0;
    width: 100%;
  }

  .app-shell .controls .btn,
  .app-shell .controls select,
  .app-shell .controls input {
    width: 100%;
  }

  .app-shell .sizing-controls,
  .app-shell .export-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .app-shell .market-context-pill-main {
    max-width: 100%;
  }

  .app-shell .chart-shell {
    min-height: 0;
  }

  .app-shell .canvas-wrap {
    min-height: 36vh;
  }
}

@media (max-width: 1023px) {
  .app-shell .ui-bottom-drawer.is-open {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: 72vh;
    z-index: 2800;
    border-radius: var(--radius-xl);
  }

  .app-shell .ui-bottom-drawer.is-open {
    top: auto;
  }
}

@media (max-width: 639px) {
  body {
    overflow-x: hidden;
  }

  .app.app-shell {
    max-width: 100vw;
    overflow-x: hidden;
    padding: 6px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  .topbar-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand active menu"
      "selects selects selects";
    align-items: stretch;
    height: auto !important;
    min-height: 96px;
    gap: 6px;
    padding: 6px;
  }

  .app-shell #strategyTopbar,
  .app-shell .chart-shell,
  .app-shell .strategy-panel,
  .app-shell .ui-bottom-drawer,
  .app-shell #autopilotPanelSlot,
  .app-shell #etfMaisonPanelSlot {
    min-width: 0;
  }

  #strategyTopbar .topbar-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #strategyTopbar .topbar-head-main,
  #strategyTopbar .topbar-strategy-controls,
  #strategyTopbar .topbar-inline-field {
    min-width: 0;
    width: 100%;
  }

  #strategyTopbar .topbar-strategy-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #strategyTopbar .topbar-inline-field select {
    min-width: 0;
    width: 100%;
  }

  #topbarExpandBtn {
    justify-self: start;
  }

  .topbar-main .tb-brand {
    grid-area: brand;
  }

  .topbar-main > .mode-switcher:not(.mode-switcher-mobile) {
    display: none;
  }

  .topbar-main .mobile-active-mode {
    grid-area: active;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    max-width: 100%;
  }

  .topbar-main .topbar-mobile-menu {
    grid-area: menu;
    display: block;
    justify-self: end;
  }

  .topbar-main #topbarCmdButton,
  .topbar-main #topbarSettingsMenu,
  .topbar-main .tb-actions {
    display: none;
  }

  .topbar-main .tb-selects {
    grid-area: selects;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(82px, 96px);
    width: 100%;
    height: 44px;
    overflow-x: visible;
    gap: 6px;
  }

  .topbar-main .symbol-select-custom {
    min-width: 0;
    width: 100%;
    border-right: 0;
  }

  .topbar-main .symbol-select-custom-trigger {
    width: 100%;
  }

  .topbar-main .symbol-select-custom-panel {
    width: min(92vw, 440px);
  }

  .topbar-main .tb-selects select {
    min-width: 0;
    width: 100%;
    height: 36px;
  }

  .topbar-main .topbar-screener-panel {
    top: calc(100% + 8px);
    width: calc(100vw - 16px);
  }

  .topbar-main .topbar-screener-results-head,
  .topbar-main .topbar-screener-row {
    grid-template-columns: var(--topbar-screener-grid-columns-mobile, var(--topbar-screener-grid-columns));
  }

  .app-shell .mode-switcher .mode-btn {
    flex: 0 0 auto;
  }

  .app-shell .sizing-controls,
  .app-shell .export-bar {
    grid-template-columns: 1fr;
  }

  .app-shell .strategy-stats,
  .app-shell .topbar-grid {
    grid-template-columns: 1fr 1fr;
  }

  .app-shell .topbar-quick-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(92px, max-content);
    gap: 6px;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .app-shell .topbar-quick-grid::-webkit-scrollbar {
    display: none;
  }

  .app-shell .chart-shell {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding: 4px;
    overflow: hidden;
  }

  .app-shell .canvas-wrap {
    width: 100%;
    min-width: 0;
    height: clamp(430px, calc(100dvh - 176px), 620px);
    min-height: 430px;
  }

  .app-shell .strategy-stats,
  .app-shell .topbar-grid,
  .app-shell .topbar-quick-grid,
  .app-shell .indicator-toggle-bar,
  .app-shell .top-signals-overlay,
  .app-shell .price-scale,
  .app-shell .hud {
    display: none !important;
  }

  .app-shell .card.chart-shell {
    border-color: rgba(111, 231, 255, 0.16);
    background: rgba(5, 8, 14, 0.92);
  }

  .app-shell .hud {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 2px;
    margin-bottom: 6px;
  }

  .app-shell .hint {
    display: none;
  }

  .app-shell .indicator-toggle-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .app-shell .indicator-toggle-bar::-webkit-scrollbar {
    display: none;
  }

  .app-shell .indicator-pill,
  .app-shell .indicator-more-btn {
    flex: 0 0 auto;
  }

  .app-shell .indicator-pill span {
    font-size: 10px;
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
  }

  .app-shell .btn,
  .app-shell .drawer-toggle,
  .app-shell button,
  .app-shell .indicator-more-btn,
  .app-shell .mode-switcher .mode-btn,
  .app-shell .mobile-active-mode,
  .app-shell .topbar-mobile-menu > summary {
    min-height: 44px;
  }

  .app-shell .indicator-more-btn {
    min-width: 44px;
  }

  .app-shell .chip,
  .app-shell .market-context-pill,
  .app-shell .mode-switcher .mode-btn {
    min-height: 36px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .app-shell input:not([type="checkbox"]):not([type="radio"]),
  .app-shell select,
  .app-shell textarea {
    min-height: 44px;
  }

  .app-shell .mode-switcher,
  .app-shell .tb-actions,
  .app-shell .topbar-mobile-block,
  .app-shell .tabs {
    gap: 8px;
  }

  .mobile-mode-dots {
    display: flex;
  }

  .mobile-mode-nav {
    display: grid;
    left: 6px;
    right: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
    padding: 6px;
  }

  .mobile-mode-nav-icon {
    height: 19px;
    min-width: 22px;
    font-size: 9px;
  }

  .mobile-mode-nav-label {
    font-size: 8.5px;
  }

  .app-shell.mobile-sheet-active .mobile-mode-dots,
  .app-shell.mobile-sheet-active .mobile-mode-nav {
    opacity: 0;
    pointer-events: none;
  }

  /* Scout mobile = Woodpecker Session-inspired chart stage.
     The chart owns the viewport; chrome floats above it instead of pushing it down. */
  body:has(.app-shell.layout-scout),
  body:has(.app-shell.layout-analyst) {
    overflow: hidden;
    background: #05080e;
  }

  .app-shell.layout-scout {
    position: fixed;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    padding: 0;
    overflow: hidden;
    background: #05080e;
  }

  .app-shell.layout-scout #strategyTopbar,
  .app-shell.layout-scout .ui-bottom-drawer,
  .app-shell.layout-scout .mobile-mode-dots,
  .app-shell.layout-analyst #strategyTopbar,
  .app-shell.layout-analyst .ui-bottom-drawer,
  .app-shell.layout-analyst .mobile-mode-dots {
    display: none !important;
  }

  .app-shell.layout-scout .topbar-main,
  .app-shell.layout-analyst .topbar-main {
    position: fixed;
    top: max(8px, env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: 30;
    width: min(94vw, 430px);
    min-height: 0;
    transform: translateX(-50%);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "selects menu";
    align-items: center;
    padding: 6px;
    border: 1px solid rgba(111, 231, 255, 0.16);
    border-radius: 18px;
    background: rgba(8, 12, 20, 0.68);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .app-shell.layout-scout .topbar-main .tb-brand,
  .app-shell.layout-scout .topbar-main .mobile-active-mode,
  .app-shell.layout-analyst .topbar-main .tb-brand,
  .app-shell.layout-analyst .topbar-main .mobile-active-mode {
    display: none !important;
  }

  .app-shell.layout-scout .topbar-main .tb-selects,
  .app-shell.layout-analyst .topbar-main .tb-selects {
    height: 40px;
    grid-template-columns: minmax(0, 1fr) 74px;
  }

  .app-shell.layout-scout .topbar-main .tb-selects select,
  .app-shell.layout-scout .topbar-main .symbol-select-custom-trigger,
  .app-shell.layout-analyst .topbar-main .tb-selects select,
  .app-shell.layout-analyst .topbar-main .symbol-select-custom-trigger {
    height: 34px;
    min-height: 34px;
    border-radius: var(--radius-xl);
    background: rgba(14, 20, 32, 0.72);
  }

  .app-shell.layout-scout .topbar-mobile-menu > summary,
  .app-shell.layout-analyst .topbar-mobile-menu > summary {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    height: 38px;
    justify-content: center;
    border-radius: 13px;
    background: rgba(14, 20, 32, 0.72);
  }

  .app-shell.layout-scout .chart-shell,
  .app-shell.layout-analyst .chart-shell {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #05080e;
    box-shadow: none;
  }

  .app-shell.layout-scout .canvas-wrap,
  .app-shell.layout-analyst .canvas-wrap {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #05080e;
  }

  .app-shell.layout-scout #chartCanvas,
  .app-shell.layout-analyst #chartCanvas {
    width: 100vw !important;
    height: 100dvh !important;
  }

  .app-shell.layout-scout .mobile-mode-nav,
  .app-shell.layout-analyst .mobile-mode-nav {
    display: grid !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    left: 50%;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 32;
    width: min(94vw, 430px);
    transform: translateX(-50%);
    border: 1px solid rgba(111, 231, 255, 0.14);
    border-radius: 18px;
    background: rgba(8, 12, 20, 0.70);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .app-shell.layout-scout .mobile-strategy-fab,
  .app-shell.layout-analyst .mobile-strategy-fab {
    position: fixed;
    left: 50%;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 33;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: min(58vw, 260px);
    min-width: 178px;
    padding: 5px 7px;
    transform: translateX(-50%);
    border: 1px solid rgba(111, 231, 255, 0.16);
    border-radius: 16px;
    background: rgba(8, 12, 20, 0.74);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app-shell.layout-scout .mobile-strategy-fab span,
  .app-shell.layout-analyst .mobile-strategy-fab span {
    display: inline;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .app-shell.layout-scout #mobileStrategySelect,
  .app-shell.layout-analyst #mobileStrategySelect {
    display: block !important;
    width: 100%;
    height: 34px;
    min-height: 34px;
    max-width: 100%;
    border-radius: var(--radius-xl);
  }

}

/* ─────────── SCREENER MODE: panel becomes a full workspace (no relocation) ─────────── */
.app-shell.layout-screener .topbar-screener { z-index: 1; }
.app-shell.layout-screener .topbar-screener[open]::before { display: none; }
.app-shell.layout-screener .topbar-screener > summary { display: none !important; }
.app-shell.layout-screener .topbar-screener .topbar-screener-panel {
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: rgba(7, 8, 10, 0.98);
  padding: 12px;
  z-index: 5;
  display: flex !important;
}
.app-shell.layout-screener .topbar-screener-shell { padding: 0; }
/* SCREENER-MODE-CSS-END */

/* [merged from chart.css] chart-shell min-height per layout mode */
.layout-scout .chart-shell { min-height: 58vh; }
.layout-analyst .chart-shell { min-height: 34vh; }
.layout-autopilot .chart-shell { min-height: 30vh; }