@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #030711;
  --panel: rgba(13, 23, 41, .82);
  --panel-2: rgba(19, 31, 54, .94);
  --soft: rgba(255, 255, 255, .06);
  --soft-2: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .2);
  --text: #edf5ff;
  --muted: #93a7c2;
  --muted-2: #647893;
  --accent: #9bc8ff;
  --accent-2: #6de5d1;
  --positive: #6de5a1;
  --negative: #ff718b;
  --warning: #ffd36a;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Typografie-Skala — einzige Quelle für Schriftgrößen */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 26px;
  --fs-5xl: 30px;
  --fs-6xl: 34px;
  --fs-7xl: 38px;
  --fs-hero: 48px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 8% 4%, rgba(80,145,255,.18), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(109,229,209,.11), transparent 32%),
    radial-gradient(circle at 58% 100%, rgba(128,90,255,.16), transparent 35%),
    linear-gradient(135deg, #030612 0%, #071425 46%, #030612 100%);
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
code { color: var(--accent); font-weight: 800; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 15%, black 0%, transparent 78%);
}
.shell { width: min(1580px, calc(100% - 34px)); margin: 0 auto; padding: 22px 0 64px; position: relative; }
.topbar {
  position: sticky; top: 14px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; row-gap: 12px;
  padding: 13px; border: 1px solid var(--line); border-radius: 26px;
  background: rgba(4, 9, 20, .8); backdrop-filter: blur(22px); box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 270px; color: var(--text); border: 0; background: transparent; padding: 5px 8px; border-radius: 18px; text-align: left; }
.brand:hover { background: rgba(255,255,255,.055); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: #061426; box-shadow: 0 0 30px rgba(109,229,209,.22); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand strong { display: block; font-size: var(--fs-base); }
.brand small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.045); }
.nav-link { color: var(--muted); border: 0; background: transparent; padding: 10px 14px; border-radius: 13px; font-weight: 850; transition: .2s ease; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.06); }
.nav-link.active { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; min-width: 320px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.06); font-weight: 850; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--warning); box-shadow: 0 0 16px rgba(255,211,106,.4); }
.status-pill.live .status-dot { background: var(--positive); box-shadow: 0 0 18px rgba(109,229,161,.5); }
.status-pill.error .status-dot { background: var(--negative); box-shadow: 0 0 18px rgba(255,113,139,.5); }
/* Checkboxes are excluded here: this is text-field styling (full width, 15px radius, 12/14
   padding) and it was bleeding onto every checkbox, inflating an 18x18 box to 31x27 and
   leaving the tick off-centre inside it. The dedicated input[type="checkbox"] block below
   could not win because it has the same specificity as `.metric-check input`. */
input:not([type="checkbox"]), select, textarea { width: 100%; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.065); border-radius: 15px; padding: 12px 14px; outline: none; }
/* The rule above kills the browser's default focus ring on every field, and buttons/links never
   had one — so keyboard navigation was completely invisible across the app. :focus-visible only
   fires for keyboard (and other non-pointer) focus, so this is inert for mouse users. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
th.sortable:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
select option { color: #111319; background: #fff; }
input::placeholder { color: rgba(143,162,191,.75); }
.global-search { width: 270px; }
.view { display: none; }
.view.active { display: block; animation: fadeIn .28s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr); gap: 24px; margin: 38px 0 22px; }
.hero-card, .page-head, .controls-card, .table-card, .feature-card, .glass-panel, .map-section, .metric-panel { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,29,51,.76), rgba(8,14,26,.72)); box-shadow: var(--shadow); }
.hero-card, .page-head, .map-section, .table-card, .controls-card, .metric-panel { border-radius: var(--radius-xl); }
.hero-card.large { min-height: 420px; padding: 48px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; }
.hero-card.large::after { content: ""; position: absolute; inset: auto -18% -42% 42%; height: 330px; background: radial-gradient(circle, rgba(109,229,209,.16), transparent 62%); pointer-events: none; }
.dashboard-card { padding: 22px; display: grid; gap: 14px; }
.eyebrow { margin: 0 0 10px; color: var(--accent-2); text-transform: uppercase; letter-spacing: .17em; font-size: var(--fs-xs); font-weight: 900; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: clamp(42px, 6vw, 82px); line-height: .92; letter-spacing: -.075em; }
h2 { margin-bottom: 8px; font-size: clamp(30px, 3vw, 48px); letter-spacing: -.06em; }
h3 { margin-bottom: 8px; font-size: var(--fs-3xl); letter-spacing: -.04em; }
p { color: var(--muted); line-height: 1.65; }
.hero-brand { font-size: clamp(48px, 7vw, 96px); white-space: nowrap; }
.hero-tagline { font-weight: 800; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.03em; color: var(--text); margin: 0 0 14px; }
.hero-copy { max-width: 780px; font-size: var(--fs-lg); }
.button-row, .page-actions, .table-meta, .history-header, .range-buttons, .inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.primary-button, .ghost-button, .icon-button { border: 1px solid var(--line); border-radius: 15px; padding: 12px 17px; font-weight: 900; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.primary-button { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 16px 45px rgba(109,229,209,.16); }
.ghost-button, .icon-button { color: var(--text); background: rgba(255,255,255,.055); }
.primary-button:hover, .ghost-button:hover, .icon-button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.23); }
.primary-button.is-loading, .ghost-button.is-loading { cursor: progress; opacity: .85; pointer-events: none; }
.btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(6,16,28,.30); border-top-color: rgba(6,16,28,.92); border-radius: 50%; margin-right: 8px; vertical-align: -2px; animation: btn-spin .7s linear infinite; }
.ghost-button .btn-spinner { border-color: rgba(255,255,255,.30); border-top-color: var(--text); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.field-invalid { border-color: rgba(255,113,139,.75) !important; box-shadow: 0 0 0 3px rgba(255,113,139,.14); }
.api-note.error-note { color: var(--negative); font-weight: 800; }
.icon-button { min-width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; }
.small { padding: 8px 11px; border-radius: 11px; font-size: var(--fs-md); }
.metric-card { border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.055); padding: 18px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card span, .kv span, .field-label, .table-meta span { color: var(--muted); font-size: var(--fs-sm); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.metric-card strong { display: block; font-size: var(--fs-5xl); letter-spacing: -.055em; }
.main-metric strong { font-size: var(--fs-hero); }
.mini-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.feature-card { border-radius: 26px; padding: 26px; min-height: 210px; transition: .2s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(109,229,209,.32); }
.feature-card span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101c; font-weight: 900; margin-bottom: 20px; }
.page-head { margin: 38px 0 20px; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-head p { margin-bottom: 0; }
.map-section { padding: 22px; margin-bottom: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.muted { color: var(--muted); }
.small-copy { font-size: var(--fs-md); }
.world-map-shell { border: 1px solid var(--line); border-radius: 26px; background: rgba(2,8,20,.56); overflow: hidden; position: relative; min-height: 390px; }
.world-map { width: 100%; height: 390px; display: block; }
.land { fill: rgba(168, 200, 225, .22); stroke: rgba(220,240,255,.20); stroke-width: 1; }
.land.island { fill: rgba(168, 200, 225, .16); }
.map-grid path { stroke: rgba(255,255,255,.04); fill: none; }
.marker { cursor: pointer; }
.marker circle { fill: rgba(109,229,209,.88); stroke: rgba(255,255,255,.8); stroke-width: 2; filter: drop-shadow(0 0 16px rgba(109,229,209,.35)); }
.marker.negative circle { fill: rgba(255,113,139,.88); }
.marker.neutral circle { fill: rgba(155,200,255,.75); }
.marker text { fill: var(--text); font-size: var(--fs-md); font-weight: 900; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 4; }
.map-cards { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(340px, calc(100% - 36px)); }
.map-card { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); background: rgba(4,9,20,.72); backdrop-filter: blur(12px); padding: 10px 12px; border-radius: 14px; font-size: var(--fs-md); }

/* v23 flat-design world map */
.world-map-shell.atlas-map-shell {
  min-height: 430px;
  background: radial-gradient(circle at 30% 20%, rgba(109,229,209,.07), transparent 46%), linear-gradient(160deg, #0a1220, #050912);
}
.world-map.atlas-map-svg { height: 430px; }
.atlas-graticule { fill: none; stroke: rgba(255,255,255,.06); stroke-width: .6; }
.atlas-land { fill: rgba(148,163,184,.38); stroke: rgba(203,213,225,.34); stroke-width: .7; stroke-linejoin: round; }
.region-dot { cursor: pointer; outline: none; }
.region-dot circle {
  fill: rgba(109,229,209,.88);
  stroke: rgba(5,10,20,.9);
  stroke-width: 3;
  filter: drop-shadow(0 0 14px rgba(109,229,209,.5));
  transition: transform .18s ease, fill .18s ease;
}
.region-dot.negative circle { fill: rgba(255,113,139,.88); filter: drop-shadow(0 0 14px rgba(255,113,139,.45)); }
.region-dot.neutral circle { fill: rgba(155,200,255,.88); filter: drop-shadow(0 0 14px rgba(155,200,255,.4)); }
.region-dot:hover circle, .region-dot:focus circle, .region-dot.selected circle {
  fill: var(--accent-2); stroke: #fff; transform: scale(1.18);
}
.region-dot .marker-label {
  opacity: 0; pointer-events: none; fill: #fff; font-size: var(--fs-base); font-weight: 900;
  paint-order: stroke; stroke: rgba(4,8,16,.85); stroke-width: 4px; transition: opacity .16s ease;
}
.region-dot:hover .marker-label, .region-dot:focus .marker-label, .region-dot.selected .marker-label { opacity: 1; }
.region-card { cursor: pointer; text-align: left; }
.region-card:hover, .region-card.selected { border-color: rgba(109,229,209,.55); background: rgba(109,229,209,.10); }
@media (max-width: 900px) {
  .world-map.atlas-map-svg { height: 340px; }
  .world-map-shell.atlas-map-shell { min-height: 340px; }
}
.controls-card { padding: 20px; margin-bottom: 20px; }
.universe-controls { display: grid; grid-template-columns: 2fr repeat(5, minmax(135px, 1fr)); gap: 12px; align-items: end; }
.control label { display: block; margin: 0 0 8px; color: var(--muted); font-size: var(--fs-sm); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.metric-panel { padding: 20px; margin-bottom: 20px; }
.metric-panel.hidden, .hidden { display: none !important; }
.metric-checkbox-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.metric-check { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.04); color: var(--muted); font-weight: 750; }
.metric-check input { width: auto; }
.table-card { padding: 20px; margin-bottom: 20px; }
.table-meta { justify-content: space-between; margin-bottom: 14px; }
/* Höhe begrenzen statt die ganze Seite mit der Tabelle wachsen zu lassen — so
   bleiben die eigenen (unten/rechts sichtbaren) Scrollbalken der Tabelle immer
   im Sichtbereich, statt erst nach dem Scrollen der ganzen Seite erreichbar zu sein. */
.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 20px; max-height: min(72vh, 920px); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1100px; }
/* Fixierte erste Spalten (Aktion, Symbol, Name) beim horizontalen Scrollen —
   feste Breiten sind nötig, damit die left-Offsets der Nachbarspalten stimmen. */
.data-table:not(.compact-table) th:nth-child(-n+3), .data-table:not(.compact-table) td:nth-child(-n+3) { position: sticky; z-index: 2; background: #0a1425; }
.data-table:not(.compact-table) th:nth-child(-n+3) { z-index: 5; }
.data-table:not(.compact-table) th:nth-child(1), .data-table:not(.compact-table) td:nth-child(1) { left: 0; width: 64px; min-width: 64px; }
.data-table:not(.compact-table) th:nth-child(2), .data-table:not(.compact-table) td:nth-child(2) { left: 64px; width: 132px; min-width: 132px; }
.data-table:not(.compact-table) th:nth-child(3), .data-table:not(.compact-table) td:nth-child(3) { left: 196px; width: 240px; min-width: 240px; }
.data-table:not(.compact-table) tbody tr:hover td:nth-child(-n+3) { background: #0f1d34; }
/* Hindsight: erste Spalte ist direkt das Symbol, zweite der Name — andere Offsets. */
.pin-symbol-name th:nth-child(1), .pin-symbol-name td:nth-child(1) { width: 132px; min-width: 132px; }
.pin-symbol-name th:nth-child(2), .pin-symbol-name td:nth-child(2) { left: 132px; width: 240px; min-width: 240px; }
.pin-symbol-name th:nth-child(3), .pin-symbol-name td:nth-child(3) { position: static; width: auto; min-width: 0; }
.data-table th, .data-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.075); vertical-align: middle; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
/* Sichtbare, dynamische horizontale Scrollbar — macOS-Overlay-Scrollbars sind
   sonst unsichtbar und niemand entdeckt die weiteren Spalten. */
.table-scroll { scrollbar-width: thin; scrollbar-color: rgba(155,200,255,.45) rgba(255,255,255,.06); }
.table-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.table-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 10px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(155,200,255,.35); border-radius: 10px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(155,200,255,.55); }
.data-table th { color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.04); position: sticky; top: 0; z-index: 3; }
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--text); }
/* Ohne sichtbare Markierung klickt man zweimal und weiss nicht, ob sich etwas geändert hat. */
.data-table th.sorted { color: var(--accent-2); }
.data-table th .sortpfeil { font-size: .75em; opacity: .8; }
.data-table tr { transition: .15s ease; }
.data-table tbody tr:hover { background: rgba(109,229,209,.06); }
.compact-table { min-width: 760px; }
.empty-state, .empty-cell { color: var(--muted); padding: 18px; }
.tag { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; background: rgba(155,200,255,.12); color: var(--accent); font-size: var(--fs-sm); font-weight: 850; }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.neutral { color: var(--muted); }
.watch-button { border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); width: 36px; height: 36px; border-radius: 12px; font-weight: 900; }
.watch-button.active { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer.open { pointer-events: auto; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: .2s ease; }
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel { position: absolute; right: 0; top: 0; height: 100%; width: min(760px, 100%); overflow: auto; padding: 28px; background: rgba(5,11,24,.97); border-left: 1px solid var(--line); box-shadow: -25px 0 90px rgba(0,0,0,.55); transform: translateX(102%); transition: .25s ease; }
.drawer.open .drawer-panel { transform: translateX(0); }
.close-button { position: absolute; right: 22px; top: 22px; }
.drawer-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 22px 0; }
.drawer-metric, .kv { border: 1px solid var(--line); background: rgba(255,255,255,.045); border-radius: 16px; padding: 13px; }
.drawer-metric strong, .kv strong { display: block; margin-top: 6px; font-size: var(--fs-xl); }
.detail-section { border: 1px solid var(--line); border-radius: 18px; padding: 15px; margin-bottom: 13px; background: rgba(255,255,255,.035); }
.detail-section summary { cursor: pointer; font-weight: 900; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.chart-card { position: relative; margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(0,0,0,.16); }
.history-chart { width: 100%; height: 250px; display: block; }
.range-buttons button { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: 10px; padding: 8px 10px; font-weight: 800; }
.range-buttons button.active { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.mini-table-wrap { margin-top: 14px; overflow: auto; }
.watchlist-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.glass-panel { border-radius: 24px; padding: 22px; }
.inline-form { flex-wrap: nowrap; }
.inline-form input { flex: 1; }
.inline-form [data-variant-select] { flex: 0 0 180px; width: 180px; }
.inline-form [data-variant-name-input] { flex: 2 1 0%; width: auto; }

.tier-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }

/* Custom checkbox: browsers render bare <input type="checkbox"> with inconsistent size/margin
   that clashes with the dark theme (looked "off-center", not left-aligned against label text). */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"]:hover { border-color: var(--accent-2); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* The tick is a centred SVG rather than the usual rotated-border trick: that trick's visual
   bounding box grows by sqrt(2) when rotated, so it can never be centred by its own left/top
   values and always sits high and slightly left in the box. A viewBox-centred path is exact at
   any size and stays crisp. */
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  background-color: var(--accent-2);
  border-color: var(--accent-2);
  background-repeat: no-repeat;
  background-position: center;
}
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%2306231c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 13px 13px;
}
input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%2306231c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 13px 13px;
}
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.tier-badge { padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 750; border: 1px solid var(--line); white-space: nowrap; }
.tier-badge.tier-pro { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101c; border-color: transparent; }
.tier-badge.tier-basic, .tier-badge.tier-anonymous { color: var(--muted); }
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.api-note { margin-top: 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 15px; padding: 12px; background: rgba(255,255,255,.04); }
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(0,0,0,.6); }
.modal-card { width: min(520px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 26px; padding: 24px; background: rgba(5,11,24,.98); box-shadow: var(--shadow); }
.watchlist-modal-list { display: grid; gap: 8px; margin: 14px 0; }
.watchlist-modal-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 11px; background: rgba(255,255,255,.045); }
.watchlist-modal-item input { width: auto; }
.metric-ref-info-button {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 12px;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  background: rgba(255,255,255,.05); color: var(--accent-2); font-size: var(--fs-xs);
  font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer; vertical-align: middle;
}
.metric-ref-info-button:hover { background: rgba(255,255,255,.09); }
.metric-reference-modal-card { width: min(760px, calc(100% - 32px)); max-height: 84vh; display: flex; flex-direction: column; }
.metric-ref-search { margin: 4px 0 12px; }
.metric-ref-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.metric-ref-list { overflow-y: auto; padding-right: 4px; }
.metric-ref-group { margin-bottom: 20px; }
.metric-ref-group h4 { margin: 0 0 10px; color: var(--accent-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; }
.metric-ref-row { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255,255,255,.03); }
.metric-ref-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.metric-ref-type { color: var(--muted); font-size: var(--fs-xs); }
.metric-ref-badge { border-radius: 999px; padding: 2px 10px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.metric-ref-badge-yes { background: rgba(64,214,142,.16); color: #6fe3a8; }
.metric-ref-badge-formula { background: rgba(255,196,64,.16); color: #ffcf5c; }
.metric-ref-badge-no { background: rgba(255,255,255,.08); color: var(--muted); }
.metric-ref-formula { font-family: var(--font-mono, monospace); color: var(--accent-2); font-size: var(--fs-sm); margin: 0 0 6px; }
.metric-ref-meaning { margin: 0 0 6px; }
.metric-ref-usage { margin: 0 0 6px; color: var(--muted); }
.metric-ref-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-style: italic; }
.feedback-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px 11px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(7,14,28,.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  font-weight: 850;
  opacity: .86;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.feedback-fab:hover {
  transform: translateY(-2px);
  opacity: 1;
  color: var(--text);
  border-color: rgba(109,229,209,.34);
  background: rgba(14,25,45,.92);
  box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 22px rgba(109,229,209,.10);
}
.feedback-fab span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--accent-2);
  background: rgba(109,229,209,.10);
}
.feedback-fab strong { font-size: var(--fs-sm); white-space: nowrap; letter-spacing: .01em; }
.feedback-modal-card { width: min(620px, calc(100% - 32px)); }
.feedback-form { display: grid; gap: 12px; }
.feedback-form textarea { min-height: 145px; resize: vertical; line-height: 1.55; }
.feedback-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 750;
}
.feedback-meta-row span:last-child { white-space: nowrap; }
.feedback-fab.login-needed {
  color: var(--muted);
  background: rgba(7,14,28,.78);
  border-color: var(--line);
}
@media (max-width: 1100px) {
  .topbar, .page-head { flex-direction: column; align-items: stretch; }
  .hero-grid, .watchlist-admin, .lab-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .universe-controls { grid-template-columns: repeat(2, 1fr); }
  .global-search, .brand { width: 100%; min-width: 0; }
  .header-actions { width: 100%; }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 22px, 1580px); }
  .feature-grid, .mini-metrics, .metric-checkbox-grid, .drawer-metrics, .kv-grid, .two-cols, .universe-controls, .dividend-controls { grid-template-columns: 1fr; }
  .feedback-fab {
    right: 14px;
    bottom: 14px;
    padding: 12px;
  }
  .feedback-fab strong { display: none; }
  .nav { overflow: auto; }
  h1 { font-size: var(--fs-hero); }
  .hero-card.large, .page-head { padding: 24px; }
}

/* v22.28 data confidence, cross-asset correlation and integrated hindsight */
.correlation-pair-builder {
  grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr) minmax(140px, .45fr) auto;
  align-items: end;
}
.correlation-asset-picker {
  display: grid;
  grid-template-columns: minmax(110px, .42fr) minmax(150px, .7fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(130,223,255,.14);
  border-radius: 16px;
  background: rgba(4,11,23,.38);
}
.correlation-asset-picker .control:last-child { grid-column: 1 / -1; }
/* Beide Auswahlkarten gleich gross. Karte B trägt zwei Elemente mehr ("Anzahl anzeigen" und
   die Ähnlichkeits-Knöpfe) und war dadurch sichtbar höher; das `align-items: end` am
   Container hat Karte A zusätzlich nach unten geschoben, sodass die beiden nicht einmal auf
   gleicher Höhe begannen. `align-self: stretch` gleicht die Höhe an, `align-content: start`
   hält den Inhalt von A oben, statt ihn über die gewonnene Höhe zu verteilen. */
.correlation-pair-builder > .correlation-asset-picker { align-self: stretch; align-content: start; }
.correlation-chart-stage { position: relative; }
.correlation-hover-card {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  display: grid;
  gap: 5px;
  min-width: 225px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(3,9,18,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  pointer-events: none;
}
.correlation-hover-card span { color: var(--muted); font-size: var(--fs-sm); }
.correlation-hover-card span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--dot); }
.hindsight-dynamic-controls { margin-top: 10px; padding: 12px; border: 1px solid rgba(246,199,110,.18); border-radius: 14px; background: rgba(246,199,110,.045); }
.compact-note { align-self: end; margin: 0; }
.asset-research-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 18px; }
.asset-research-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(130,223,255,.16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(130,223,255,.09), rgba(7,14,27,.78));
}
.asset-research-card::after { content: ""; position: absolute; right: -28px; bottom: -42px; width: 115px; height: 115px; border-radius: 50%; background: rgba(130,223,255,.10); filter: blur(4px); }
.asset-research-card.green { border-color: rgba(109,229,161,.18); background: linear-gradient(145deg, rgba(109,229,161,.09), rgba(7,14,27,.78)); }
.asset-research-card.amber { border-color: rgba(246,199,110,.18); background: linear-gradient(145deg, rgba(246,199,110,.09), rgba(7,14,27,.78)); }
.asset-research-card.violet { border-color: rgba(198,167,255,.18); background: linear-gradient(145deg, rgba(198,167,255,.09), rgba(7,14,27,.78)); }
.asset-research-card span { color: var(--muted); font-size: var(--fs-xs); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.asset-research-card strong { position: relative; z-index: 1; font-size: var(--fs-4xl); letter-spacing: -.035em; }
.asset-research-card small { position: relative; z-index: 1; color: #9eb0c8; line-height: 1.4; }
.hindsight-result-card .calc-note { min-width: 410px; line-height: 1.55; }

@media (max-width: 1180px) {
  .correlation-pair-builder { grid-template-columns: 1fr auto 1fr; }
  .correlation-pair-builder > .control, .correlation-pair-builder > .correlation-run-button { grid-column: span 3; }
  .asset-research-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .correlation-pair-builder, .correlation-asset-picker { grid-template-columns: 1fr; }
  .correlation-pair-builder > .control, .correlation-pair-builder > .correlation-run-button, .correlation-asset-picker .control:last-child { grid-column: auto; }
  .asset-research-strip { grid-template-columns: 1fr; }
  .hindsight-result-card .calc-note { min-width: 300px; }
}

/* v22.29 legal and launch transparency */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding: 24px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.site-footer > div { display: grid; gap: 5px; }
.site-footer strong { color: var(--text); }
.site-footer span { font-size: var(--fs-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.site-footer a, .site-footer .footer-link { color: var(--muted); font-size: var(--fs-sm); font-weight: 800; text-decoration: none; }
.site-footer a:hover, .site-footer .footer-link:hover { color: var(--accent-2); }

.legal-page { background-attachment: fixed; }
.legal-shell { width: min(1380px, calc(100% - 34px)); }
.legal-topbar .brand { text-decoration: none; }
.legal-main { padding-top: 34px; }
.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 24px;
}
.legal-hero > div,
.legal-draft-notice {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(16,29,51,.86), rgba(8,14,26,.76));
  box-shadow: var(--shadow);
}
.legal-hero > div { padding: 48px; }
.legal-hero h1 { max-width: 850px; font-size: clamp(44px, 6vw, 76px); }
.legal-hero p { max-width: 760px; font-size: var(--fs-lg); }
.legal-draft-notice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  border-color: rgba(255,211,106,.34);
  background: linear-gradient(145deg, rgba(255,211,106,.10), rgba(8,14,26,.82));
}
.legal-draft-notice span { color: var(--warning); font-size: var(--fs-xs); font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.legal-draft-notice strong { margin: 10px 0; font-size: var(--fs-3xl); line-height: 1.2; }
.legal-draft-notice p { margin: 0; font-size: var(--fs-md); }
.legal-layout { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 22px; align-items: start; }
.legal-toc {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(5,11,22,.78);
  backdrop-filter: blur(18px);
}
.legal-toc strong { margin-bottom: 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; }
.legal-toc a { padding: 10px 11px; border-radius: 11px; color: var(--muted); font-size: var(--fs-md); font-weight: 800; text-decoration: none; }
.legal-toc a:hover { color: var(--text); background: var(--soft); }
.legal-document { display: grid; gap: 18px; min-width: 0; }
.legal-section {
  scroll-margin-top: 112px;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(16,29,51,.78), rgba(8,14,26,.74));
  box-shadow: var(--shadow);
}
.legal-section h2 { margin-bottom: 28px; }
.legal-section h3 { margin: 32px 0 10px; font-size: var(--fs-lg); letter-spacing: -.02em; }
.legal-section p,
.legal-section li { color: #a7b8ce; line-height: 1.75; }
.legal-section ul { display: grid; gap: 9px; padding-left: 22px; }
.legal-facts,
.legal-provider-grid,
.legal-rule-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
.legal-facts > div,
.legal-provider-grid > div,
.legal-rule-cards > div {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.legal-facts span,
.legal-rule-cards span { color: var(--muted); font-size: var(--fs-xs); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.legal-provider-grid span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.legal-rule-cards p { margin: 0; font-size: var(--fs-sm); }
.legal-placeholder {
  display: inline-block;
  color: var(--warning) !important;
  border-bottom: 1px dashed rgba(255,211,106,.55);
  overflow-wrap: anywhere;
}
.risk-section { border-color: rgba(255,113,139,.25); }
.risk-banner { margin-bottom: 22px; padding: 22px; border: 1px solid rgba(255,113,139,.28); border-radius: 18px; background: rgba(255,113,139,.07); }
.risk-banner strong { display: block; margin-bottom: 8px; color: #ff9cad; font-size: var(--fs-xl); }
.risk-banner p { margin: 0; }
.launch-checklist { display: grid; gap: 10px; }
.launch-checklist label { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; color: #bac8da; background: rgba(255,255,255,.03); }
.launch-checklist input { width: auto; margin-top: 2px; accent-color: var(--accent-2); }
.legal-version { margin: 24px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .legal-hero,
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .legal-toc strong { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .site-footer { align-items: flex-start; flex-direction: column; padding-inline: 8px; }
  .site-footer nav { justify-content: flex-start; }
  .legal-topbar { position: static; }
  .legal-topbar .brand { min-width: 0; }
  .legal-hero > div,
  .legal-draft-notice,
  .legal-section { padding: 24px; }
  .legal-facts,
  .legal-provider-grid,
  .legal-rule-cards,
  .legal-toc { grid-template-columns: 1fr; }
  .legal-toc strong { grid-column: auto; }
}


/* v19.3 additions */
.chart-tooltip {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  min-width: 170px;
  max-width: 220px;
  border: 1px solid var(--line);
  background: rgba(4,9,20,.94);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.chart-tooltip strong { display: block; font-size: var(--fs-lg); }
.chart-tooltip small { color: var(--muted); font-size: var(--fs-sm); }
.chart-guide { stroke: rgba(255,255,255,.28); stroke-width: 1.5; stroke-dasharray: 5 5; }
.chart-point { fill: var(--accent); stroke: #fff; stroke-width: 2; }

.region-badge {
  fill: rgba(4,9,20,.92);
  stroke: rgba(255,255,255,.16);
  stroke-width: 1;
}
.region-badge-text {
  fill: var(--text);
  font-size: var(--fs-sm);
  font-weight: 900;
}
.continent-label { fill: rgba(255,255,255,.7); font-size: var(--fs-md); font-weight: 800; letter-spacing: .06em; }
.land.dim { fill: rgba(168,200,225,.11); }
.land.highlight-1 { fill: rgba(109,229,209,.18); }
.land.highlight-2 { fill: rgba(109,229,209,.28); }
.land.highlight-3 { fill: rgba(109,229,209,.40); }
.land.highlight-4 { fill: rgba(109,229,209,.54); }
.land.highlight-5 { fill: rgba(109,229,209,.70); }
.swiss-dot { fill: #fff; stroke: rgba(109,229,209,.82); stroke-width: 4; }
.global-orbit { fill: none; stroke: rgba(109,229,209,.20); stroke-width: 3; stroke-dasharray: 8 9; }

.dividend-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.calendar-weekday, .calendar-cell {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.calendar-weekday {
  padding: 10px 12px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.calendar-cell {
  min-height: 128px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-cell.is-empty { opacity: .35; }
.calendar-cell.today { border-color: rgba(109,229,209,.45); box-shadow: inset 0 0 0 1px rgba(109,229,209,.22); }
.calendar-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
  font-size: var(--fs-base);
}
.calendar-count { color: var(--muted); font-size: var(--fs-xs); font-weight: 800; }
.calendar-events { display: grid; gap: 6px; }
.calendar-event {
  border-radius: 12px;
  padding: 7px 8px;
  background: rgba(109,229,209,.10);
  border: 1px solid rgba(109,229,209,.18);
}
.calendar-event.muted, .calendar-event .muted { background: transparent; border-color: var(--line); color: var(--muted); }
.calendar-cell.is-clickable { cursor: pointer; transition: border-color .15s ease; }
.calendar-cell.is-clickable:hover { border-color: rgba(109,229,209,.4); }
/* Announced = a company-declared future ex-date, not an estimate. The old dashed amber styling
   signalled "uncertain", which is now the wrong message: these are the only forward dates we
   show, and they are facts. Teal ties them to the accent used elsewhere for confirmed data. */
.calendar-event.is-announced { background: rgba(109,229,209,.10); border: 1px solid rgba(109,229,209,.35); }
.data-table tr.is-announced td { color: var(--accent-2); }
.dividend-calendar-year { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dividend-calendar-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .dividend-calendar-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dividend-calendar-week { grid-template-columns: minmax(0, 1fr); }
}
.calendar-event strong { display: block; font-size: var(--fs-sm); }
.calendar-event small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.calendar-more { color: var(--muted); font-size: var(--fs-xs); font-weight: 800; }

.hindsight-lab-grid { grid-template-columns: minmax(260px,.95fr) minmax(380px,1.25fr) minmax(340px,1fr); align-items: start; }
.metric-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}
.metric-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(155,200,255,.08);
  color: var(--text);
  font-weight: 800;
  cursor: grab;
  user-select: none;
}
.metric-chip:active { cursor: grabbing; }
.metric-chip.custom { background: rgba(109,229,209,.12); border-color: rgba(109,229,209,.30); color: var(--accent); }
.metric-chip.extra { background: rgba(246,199,110,.12); border-color: rgba(246,199,110,.32); }
.hindsight-extra-metrics { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.hindsight-extra-metrics summary { cursor: pointer; font-weight: 800; }
.extra-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin-top: 12px; }
.extra-metric-checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-md); line-height: 1.35; cursor: pointer; padding: 6px 4px; border-radius: 8px; }
.extra-metric-checkbox:hover { background: rgba(255,255,255,.045); }
.extra-metric-checkbox input { accent-color: var(--accent); flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.extra-metric-checkbox span { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .extra-metrics-grid { grid-template-columns: 1fr; } }
.theory-dropzone {
  border: 1px dashed rgba(109,229,209,.45);
  border-radius: 18px;
  background: rgba(109,229,209,.08);
  padding: 18px;
  text-align: center;
  color: var(--accent);
  font-weight: 900;
  margin: 12px 0;
}
.theory-dropzone.dragover { background: rgba(109,229,209,.17); transform: scale(1.01); }
.condition-list { display: grid; gap: 10px; margin-top: 10px; }
.condition-row {
  display: grid;
  grid-template-columns: 1.1fr .65fr .8fr .95fr 38px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  padding: 10px;
}
.condition-row select, .condition-row input { min-width: 0; }
.calculator-panel {
  background: linear-gradient(180deg, rgba(109,229,209,.085), rgba(255,255,255,.04));
  border-color: rgba(109,229,209,.20);
}
.standard-formula-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 18px;
}
.standard-formula-grid button {
  min-width: 0;
  border: 1px solid rgba(109,229,209,.24);
  border-radius: 15px;
  padding: 11px 12px;
  background: rgba(109,229,209,.075);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}
.standard-formula-grid button:hover { transform: translateY(-1px); border-color: rgba(109,229,209,.52); background: rgba(109,229,209,.13); }
.standard-formula-grid strong, .standard-formula-grid span { display: block; }
.standard-formula-grid strong { margin-bottom: 4px; font-size: var(--fs-sm); }
.standard-formula-grid span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.formula-drop-input {
  border: 1px dashed rgba(109,229,209,.35);
  border-radius: 18px;
  padding: 8px;
  background: rgba(3,8,18,.35);
  transition: .18s ease;
}
.formula-drop-input.dragover {
  background: rgba(109,229,209,.12);
  border-color: rgba(109,229,209,.65);
  transform: scale(1.005);
}
.formula-textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.45;
}
.calculator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.calculator-grid button {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(155,200,255,.075);
  color: var(--text);
  padding: 11px 8px;
  font-weight: 900;
  cursor: pointer;
  transition: .16s ease;
}
.calculator-grid button:hover {
  transform: translateY(-1px);
  border-color: rgba(109,229,209,.42);
  background: rgba(109,229,209,.12);
}
.formula-preview {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  padding: 11px 12px;
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 12px;
}
.formula-preview.ok { color: var(--positive); border-color: rgba(109,229,161,.30); background: rgba(109,229,161,.08); }
.formula-preview.error { color: var(--negative); border-color: rgba(255,113,139,.30); background: rgba(255,113,139,.08); }
.formula-list { display: grid; gap: 9px; margin-top: 14px; }
.formula-item { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.045); padding: 11px 12px; display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 10px; align-items: start; }
.formula-item strong { display: block; margin-bottom: 4px; }
.formula-item code { color: var(--accent); white-space: normal; word-break: break-word; font-size: var(--fs-sm); }

.dividend-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; align-items: end; margin-bottom: 4px; }
.ftd-event-study-card { margin: 22px 0; border-color: rgba(255,184,107,.24); }
.ftd-study-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(180px, .65fr) minmax(280px, 1fr);
  gap: 12px;
  margin: 18px 0;
  align-items: end;
}
.ftd-study-controls > label > span, .ftd-study-method strong { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.input-suffix { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; }
.input-suffix b { color: var(--text); font-size: var(--fs-sm); }
.ftd-study-method { min-height: 49px; border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; background: rgba(255,255,255,.035); }
.ftd-study-method strong { margin-bottom: 3px; }
.ftd-study-method span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.ftd-study-summary { margin-top: 4px; }
.table-subline { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; white-space: nowrap; }
.status-badge { display: inline-flex; border-radius: 999px; padding: 6px 9px; font-size: var(--fs-xs); font-weight: 900; white-space: nowrap; }
.status-badge.ok { color: var(--positive); background: rgba(109,229,161,.10); border: 1px solid rgba(109,229,161,.22); }
.status-badge.pending { color: #ffcf8b; background: rgba(255,184,107,.10); border: 1px solid rgba(255,184,107,.22); }

@media (max-width: 1280px) {
  .hindsight-lab-grid { grid-template-columns: 1fr 1fr; }
  .calculator-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .dividend-calendar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ftd-study-controls { grid-template-columns: 1fr; }
  .dividend-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .dividend-calendar, .condition-row { grid-template-columns: 1fr; }
  .calendar-weekday { display: none; }
  .calendar-cell { min-height: 0; }
}


/* v19.4 refinements */
.metric-toolbar {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.045);
  padding: 18px 20px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.metric-toolbar h3 { margin-bottom: 4px; }
.metric-toolbar .small-copy { margin: 0; }
.data-table th[draggable="true"] {
  cursor: grab;
}
.data-table th.drag-over {
  outline: 2px solid rgba(109,229,209,.45);
  outline-offset: -2px;
  background: rgba(109,229,209,.12);
}
.hindsight-setup-card .two-cols {
  grid-template-columns: 1fr;
}
.hindsight-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 0;
}
.hindsight-result-card {
  border-color: rgba(109,229,209,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.hindsight-result-summary {
  border: 1px solid rgba(109,229,209,.26);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(109,229,209,.12), rgba(155,200,255,.065));
  padding: 22px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.hindsight-reason-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); font-weight: 700; cursor: pointer; }
.hindsight-reason-toggle input { width: auto; cursor: pointer; }
#hindsightResultsTable.hindsight-reason-hidden th:last-child,
#hindsightResultsTable.hindsight-reason-hidden td:last-child { display: none; }
.hindsight-result-summary .summary-box {
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 14px;
  background: rgba(4,9,20,.38);
}
.hindsight-result-summary .summary-box span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.hindsight-result-summary .summary-box strong {
  display: block;
  font-size: var(--fs-3xl);
  letter-spacing: -.04em;
}

.hindsight-row-unavailable {
  color: #8190a4;
  background: rgba(122, 137, 158, .08);
}

.hindsight-row-unavailable td {
  border-color: rgba(151, 166, 186, .12);
}

.hindsight-row-unavailable .calc-note {
  color: #9aa8ba;
}
.calc-note {
  min-width: 260px;
  max-width: 460px;
  white-space: normal;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.calc-note strong {
  color: var(--text);
}
@media (max-width: 980px) {
  .hindsight-result-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric-toolbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .hindsight-result-summary, .hindsight-action-row { grid-template-columns: 1fr; }
  .standard-formula-grid { grid-template-columns: 1fr; }
}


/* v19.5 */
.header-actions { align-items: flex-start; }
.global-search-wrap { position: relative; min-width: 280px; flex: 1; }
.global-search-wrap .global-search { width: 100%; }
.search-suggestions {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(520px, 94vw);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(3,10,22,.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 10px;
  z-index: 40;
}
.search-suggestion-item {
  width: 100%;
  display: grid;
  grid-template-columns: 82px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
}
.search-suggestion-item:hover, .search-suggestion-item.active {
  background: rgba(255,255,255,.06);
}
.search-suggestion-symbol { font-weight: 900; letter-spacing: .02em; }
.search-suggestion-name { color: var(--muted); font-size: var(--fs-md); }
.search-suggestion-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.search-suggestion-empty { padding: 14px; color: var(--muted); font-size: var(--fs-base); }
@media (max-width: 900px) {
  .search-suggestions { width: min(100%, 94vw); }
  .search-suggestion-item { grid-template-columns: 70px 1fr; }
  .search-suggestion-meta { grid-column: 2; }
}




/* v20.9 Institutional Sankey */
.sankey-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sankey-toolbar h3 { margin: 0; font-size: var(--fs-6xl); letter-spacing: -.03em; }
.sankey-toolbar .eyebrow { margin-bottom: 4px; }
.sankey-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.sankey-summary-card {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  padding: 13px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.sankey-summary-card span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
.sankey-summary-card strong {
  color: var(--text);
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
}
.sankey-card {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(7,12,23,.98), rgba(4,8,16,.98));
  padding: 16px;
  overflow: auto;
  min-height: 520px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.sankey-institutional-layout {
  display: grid;
  grid-template-columns: minmax(980px, 1fr) 260px;
  gap: 16px;
  min-width: 1280px;
}
.sankey-visual svg {
  width: 100%;
  height: 540px;
  display: block;
}
.sankey-panel {
  fill: rgba(255,255,255,.015);
  stroke: rgba(255,255,255,.075);
  stroke-width: 1;
}
.sankey-divider {
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}
.sankey-note {
  fill: rgba(238,244,255,.72);
  font-size: var(--fs-md);
  font-weight: 720;
}
.sankey-band-label {
  fill: rgba(255,255,255,.42);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sankey-flow {
  fill: none;
  stroke-linecap: round;
  opacity: .82;
  transition: opacity .18s ease, stroke-width .18s ease;
}
.sankey-flow:hover { opacity: 1; }
.sankey-flow.revenue-flow { stroke: rgba(96,128,160,.72); }
.sankey-flow.cost-flow { stroke: rgba(223,101,111,.50); }
.sankey-flow.profit-flow { stroke: rgba(115,171,132,.54); }
.sankey-flow.neutral-flow { stroke: rgba(127,165,204,.56); }
.sankey-flow.dashed-flow {
  stroke-dasharray: 9 7;
  opacity: .68;
}
.sankey-node rect {
  fill: rgba(255,255,255,.04);
  stroke: rgba(255,255,255,.12);
  stroke-width: 1;
}
.sankey-node.node-revenue rect { fill: rgba(96,128,160,.20); stroke: rgba(139,169,199,.32); }
.sankey-node.node-cost rect { fill: rgba(223,101,111,.18); stroke: rgba(237,134,143,.34); }
.sankey-node.node-profit rect { fill: rgba(115,171,132,.18); stroke: rgba(149,196,162,.32); }
.sankey-node.node-neutral rect { fill: rgba(127,165,204,.14); stroke: rgba(155,190,225,.28); }
.sankey-node text {
  fill: rgba(245,248,252,.90);
  font-size: var(--fs-base);
  font-weight: 760;
  letter-spacing: -.02em;
}
.sankey-node text.sub {
  fill: rgba(255,255,255,.74);
  font-size: var(--fs-base);
  font-weight: 850;
}
.sankey-opex-card path {
  fill: none;
  stroke: rgba(255,255,255,.34);
  stroke-width: 1.4;
}
.sankey-opex-card rect {
  fill: rgba(223,101,111,.11);
  stroke: rgba(237,134,143,.25);
}
.sankey-opex-card text {
  fill: rgba(245,248,252,.84);
  font-size: var(--fs-md);
  font-weight: 740;
}
.sankey-opex-card text.sub {
  fill: rgba(255,255,255,.70);
  font-size: var(--fs-base);
  font-weight: 850;
}
.sankey-footer-note {
  fill: rgba(255,255,255,.46);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.sankey-kpi-panel {
  border-left: 1px solid rgba(255,255,255,.09);
  padding: 14px 0 0 16px;
  min-height: 520px;
}
.sankey-kpi-group h4 {
  margin: 3px 0 14px;
  color: var(--text);
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
}
.sankey-kpi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.sankey-kpi-row span {
  color: rgba(238,244,255,.70);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.sankey-kpi-row strong {
  color: rgba(255,255,255,.92);
  font-size: var(--fs-base);
  font-weight: 850;
}
.sankey-kpi-row:last-child strong { color: rgba(139,211,157,.95); }
@media (max-width: 900px) {
  .sankey-toolbar { align-items: flex-start; flex-direction: column; }
  .sankey-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer-panel { width: 100%; }
}



/* v20.0 Auth */
.auth-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  padding: 6px 7px 6px 12px;
  max-width: 260px;
}
.auth-user-pill span {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-card {
  width: min(560px, calc(100% - 32px));
}
.auth-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.auth-modal-head h3 { margin: 0; }
.auth-form {
  display: grid;
  gap: 10px;
}
.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.link-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.link-button:hover { text-decoration: underline; }
.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrap input {
  width: 100%;
  padding-right: 92px;
}
.password-toggle {
  position: absolute;
  right: 8px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 850;
  cursor: pointer;
  padding: 0 11px;
}
.password-toggle:hover {
  color: var(--text);
  background: rgba(255,255,255,.07);
}
.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.auth-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 2px;
}
.auth-support-grid span {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.032);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 760;
  text-align: center;
  padding: 8px 7px;
}
.full-width { width: 100%; }
.auth-message {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.45;
}
.auth-message.success {
  color: var(--positive);
  border-color: rgba(109,229,161,.24);
  background: rgba(109,229,161,.08);
}
.auth-message.error {
  color: var(--negative);
  border-color: rgba(255,113,139,.25);
  background: rgba(255,113,139,.08);
}
.sync-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.sync-note.live { color: var(--positive); }
.sync-note.local { color: var(--muted); }
@media (max-width: 1100px) {
  .auth-box { width: 100%; }
  .auth-user-pill { max-width: none; width: 100%; justify-content: space-between; }
}
@media (max-width: 720px) {
  .auth-actions { grid-template-columns: 1fr; }
}


/* v20.5 stable product polish */
#connectionPill { display: none !important; }
.auth-box { width: 132px; flex: 0 0 132px; display: flex; justify-content: flex-end; }
.auth-status-button {
  width: 118px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-status-button:hover { border-color: rgba(109,229,209,.34); }
.auth-status-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--negative); box-shadow: 0 0 14px rgba(255,113,139,.55); }
.auth-status-button.is-logged-in .auth-status-dot { background: var(--positive); box-shadow: 0 0 14px rgba(109,229,161,.55); }
.auth-user-pill { width: 118px !important; height: 54px !important; }
#authMagicLink { display: none !important; }
.hero-copy { max-width: 720px; }
.marker text { opacity: 0; transition: opacity .16s ease; }
.marker:hover text { opacity: 1; fill: var(--accent-2); }
.drawer.open { pointer-events: auto; }
.drawer-panel {
  right: 22px !important;
  left: 22px !important;
  top: 22px !important;
  bottom: 22px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(5,11,24,.985) !important;
  transform: translateY(110%) !important;
  padding: 30px !important;
}
.drawer.open .drawer-panel { transform: translateY(0) !important; }
.drawer-backdrop { background: rgba(0,0,0,.62) !important; }
.asset-tabs {
  display: flex;
  gap: 8px;
  margin: 0 58px 22px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  overflow-x: auto;
}
.asset-tab {
  min-width: 178px;
  max-width: 230px;
  display: grid;
  grid-template-columns: 1fr 22px;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  text-align: left;
  padding: 10px 10px 10px 12px;
}
.asset-tab.active { border-color: rgba(109,229,209,.50); background: rgba(109,229,209,.13); }
.asset-tab span { font-weight: 950; }
.asset-tab small { grid-column: 1 / 2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-tab b { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; color: var(--muted); }
.asset-tab b:hover { color: var(--text); background: rgba(255,255,255,.10); }
.drawer-metrics { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
@media (max-width: 900px) {
  .drawer-panel { left: 8px !important; right: 8px !important; top: 8px !important; bottom: 8px !important; padding: 18px !important; }
  .drawer-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .auth-box { width: 118px; flex-basis: 118px; }
}

.drawer-panel {
  padding: 22px 28px !important;
}
.asset-tabs {
  margin-bottom: 14px !important;
  padding: 7px !important;
  border-radius: 18px !important;
}
.asset-tab {
  min-width: 150px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}
.drawer-panel > .eyebrow { margin-bottom: 4px !important; }
#detailTitle {
  font-size: clamp(36px, 4vw, 58px) !important;
  margin-bottom: 8px !important;
}
#detailSubtitle { margin-bottom: 16px !important; }
.drawer-metrics {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin: 12px 0 14px !important;
}
.drawer-metric, .kv {
  padding: 11px 13px !important;
  border-radius: 14px !important;
}
.detail-section {
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 16px !important;
}
.detail-section summary {
  font-size: var(--fs-lg) !important;
}
.kv-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 9px !important;
  margin-top: 10px !important;
}
.chart-card {
  margin-top: 10px !important;
  padding: 10px !important;
}
#priceChart {
  height: 230px !important;
}
.history-header {
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
.range-buttons { gap: 6px !important; }
.range-buttons button { padding: 6px 9px !important; font-size: var(--fs-sm) !important; }
.sankey-card { min-height: 520px !important; }
.sankey-visual svg { height: 540px !important; }
@media (max-width: 1100px) {
  .kv-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .drawer-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}


/* v21 Login polish */
@media (max-width: 620px) {
  .auth-actions,
  .auth-support-grid {
    grid-template-columns: 1fr;
  }
  .auth-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* v22 Intelligence detail cards */
.intelligence-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.insight-card {
  min-height: 104px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.insight-card span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.insight-card strong {
  display: block;
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.insight-card small {
  display: block;
  color: rgba(226,234,247,.68);
  line-height: 1.35;
}
@media (max-width: 920px) {
  .intelligence-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .intelligence-summary { grid-template-columns: 1fr; }
}

/* v22.2 grouped metric selector */
.metric-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .16);
}
.metric-group h4 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-md);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-heading small {
  color: var(--muted);
  display: block;
  margin-top: 5px;
}

/* v22.5 intraday chart tooltip */
.chart-tooltip { max-width: 260px; }
.chart-tooltip-grid { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin-top: 8px; font-size: var(--fs-sm); }
.chart-tooltip-grid span { color: var(--muted); }
.chart-tooltip-grid b { text-align: right; color: var(--text); font-weight: 800; }
.chart-tooltip-grid b.positive { color: var(--good); }
.chart-tooltip-grid b.negative { color: var(--bad); }
.chart-hover-zone { cursor: crosshair; pointer-events: all; }

/* v22.15 chart interaction + professional chart preview */
.history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#priceChart {
  width: 100%;
  height: 260px;
  display: block;
}

.chart-card {
  overflow: hidden;
}

.chart-tooltip {
  width: min(210px, calc(50% - 24px));
  min-width: 150px;
  max-width: 210px;
  top: 16px;
  transition: left .12s ease, right .12s ease, opacity .12s ease;
}

.chart-tooltip.is-left {
  left: 16px;
  right: auto;
}

.chart-tooltip.is-right {
  left: auto;
  right: 16px;
}

.chart-tooltip-grid {
  grid-template-columns: 56px 1fr;
  gap: 3px 8px;
}

.professional-chart-modal-card {
  width: min(1180px, calc(100% - 36px));
  min-height: min(720px, calc(100vh - 44px));
}

.professional-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.professional-chart-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 16px;
}

.professional-chart-panel,
.professional-chart-preview {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  padding: 16px;
}

.professional-chart-panel h4 {
  margin: 0 0 12px;
}

.professional-chart-preview {
  min-height: 470px;
  display: grid;
  place-items: center;
}

@media (max-width: 820px) {
  .professional-chart-grid {
    grid-template-columns: 1fr;
  }
  .chart-tooltip {
    width: min(210px, calc(100% - 32px));
  }
}


/* v22.16 chart polish + professional chart */
.chart-card {
  overflow: hidden;
  min-height: 300px;
}

#priceChart {
  width: min(74%, 960px);
  height: 260px;
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.chart-tooltip {
  width: 190px;
  min-width: 168px;
  max-width: 190px;
  top: 18px;
  z-index: 4;
}

.chart-tooltip.is-right {
  left: calc(min(74%, 960px) + 20px);
  right: auto;
}

.chart-tooltip.is-left {
  left: 18px;
  right: auto;
}

.chart-tooltip-grid {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 3px 8px;
}

.professional-chart-modal-card {
  width: min(1240px, calc(100% - 36px));
  min-height: min(760px, calc(100vh - 44px));
}

.professional-chart-grid {
  display: grid;
  grid-template-columns: minmax(260px, 330px) 1fr;
  gap: 18px;
  align-items: stretch;
}

.professional-chart-panel,
.professional-chart-preview {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  padding: 16px;
}

.pro-panel-section {
  display: grid;
  gap: 9px;
}

.metric-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 14px;
  padding: 10px 12px;
}

.metric-check.active {
  border-color: rgba(109,229,209,.42);
  background: rgba(109,229,209,.09);
}

.metric-check span {
  display: grid;
  gap: 2px;
}

.metric-check b {
  color: var(--text);
  font-size: var(--fs-base);
}

.metric-check small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.metric-check em {
  font-style: normal;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.professional-chart-preview {
  min-height: 500px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}

.pro-chart-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pro-chart-kicker {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  margin-bottom: 4px;
}

.pro-chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.legend-line,
.legend-bar {
  display: inline-block;
  width: 22px;
  height: 4px;
  border-radius: 99px;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
}

.legend-bar {
  height: 12px;
  width: 8px;
  background: rgba(155,200,255,.7);
}

#professionalPriceChart {
  width: 100%;
  height: 390px;
  display: block;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(0,0,0,.14);
}

.pro-grid-line {
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}

.pro-chart-label,
.pro-chart-value {
  fill: var(--text);
  font-size: var(--fs-base);
  font-weight: 900;
}

.pro-axis-label {
  fill: #7f91aa;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.pro-chart-dot {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 2;
}

.pro-chart-note {
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.45;
}

@media (max-width: 1000px) {
  #priceChart { width: 100%; }
  .chart-tooltip.is-right { left: auto; right: 18px; }
}

@media (max-width: 820px) {
  .professional-chart-grid { grid-template-columns: 1fr; }
  .pro-chart-toolbar { flex-direction: column; }
}


/* v22.17 professional chart live polish */
#priceChart {
  width: min(68%, 900px) !important;
  height: 260px !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.chart-card {
  min-height: 300px !important;
  position: relative !important;
}
.chart-tooltip {
  width: 190px !important;
  min-width: 168px !important;
  max-width: 190px !important;
  top: 18px !important;
}
.chart-tooltip.is-right {
  left: calc(min(68%, 900px) + 22px) !important;
  right: auto !important;
}
.chart-tooltip.is-left {
  left: 18px !important;
  right: auto !important;
}
.professional-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.professional-range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.professional-chart-modal-card {
  width: min(1280px, calc(100% - 36px)) !important;
  min-height: min(820px, calc(100vh - 36px)) !important;
}
.professional-chart-grid {
  grid-template-columns: minmax(280px, 350px) 1fr !important;
}
.professional-chart-panel {
  max-height: min(610px, calc(100vh - 240px));
  overflow: auto;
}
.metric-check input {
  accent-color: #82dfff;
  cursor: pointer;
}
.metric-check {
  cursor: pointer;
}
.metric-check em {
  color: rgba(155,200,255,.95) !important;
}
.metric-check.active em {
  color: var(--accent-2) !important;
}
#professionalPriceChart {
  height: 430px !important;
}
.pro-price-line,
.pro-revenue-line,
.pro-income-line,
.pro-cashflow-line,
.pro-ftd-percent-line {
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pro-revenue-line { stroke: #82dfff; }
.pro-income-line { stroke: #c6a7ff; }
.pro-cashflow-line { stroke: #f6c76e; }
.pro-ftd-percent-line { stroke: #ffb86b; stroke-dasharray: 8 6; }
.pro-volume-bar { fill: rgba(130, 223, 255, .20); }
.pro-ftd-bar { fill: rgba(255, 113, 139, .28); }
.pro-dividend-marker { stroke: rgba(109,229,161,.72); stroke-width: 3; stroke-linecap: round; }
.pro-info-chip {
  fill: #dce8f7;
  font-size: var(--fs-sm);
  font-weight: 900;
}
@media (max-width: 1000px) {
  #priceChart { width: 100% !important; }
  .chart-tooltip.is-right { left: auto !important; right: 18px !important; }
  .professional-chart-grid { grid-template-columns: 1fr !important; }
}

/* v22.23 professional chart: trading-day timeline + multi-axis labels */
.professional-chart-modal-card {
  width: min(1360px, calc(100% - 30px)) !important;
}
.professional-chart-grid {
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) !important;
}
.professional-chart-preview {
  min-height: 650px !important;
  align-content: start;
}
.pro-chart-legend {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 560px;
  gap: 8px 14px !important;
}
.pro-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #d9e7fb;
  font-size: var(--fs-sm);
  font-weight: 850;
}
.pro-legend-item i {
  display: inline-block;
  border-radius: 999px;
  box-shadow: 0 0 12px currentColor;
}
.pro-legend-item small {
  color: #7f91aa;
  font-weight: 800;
}
#professionalPriceChart {
  height: 500px !important;
  overflow: visible;
}
.pro-axis-line {
  stroke: rgba(178, 202, 235, .32);
  stroke-width: 1;
}
.pro-day-line {
  stroke: rgba(130, 223, 255, .14);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}
.pro-axis-title {
  font-size: var(--fs-xs);
  font-weight: 950;
  letter-spacing: .02em;
}
.pro-axis-tick {
  fill: #9bb0cb;
  font-size: var(--fs-xs);
  font-weight: 820;
}
.pro-x-date {
  fill: #cfe1f8;
  font-size: var(--fs-sm);
  font-weight: 950;
}
.pro-x-time {
  fill: #7f91aa;
  font-size: var(--fs-xs);
  font-weight: 760;
}
.pro-chart-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pro-chart-guide { stroke: rgba(255,255,255,.22); stroke-width: 1; pointer-events: none; }
.pro-hover-zone { cursor: crosshair; }
.pro-chart-wrap .chart-tooltip { top: 18px !important; }
.pro-chart-wrap .chart-tooltip.is-right { left: auto !important; right: 18px !important; }
.pro-chart-wrap .chart-tooltip.is-left { left: 18px !important; right: auto !important; }

/* FTD history chart. Its viewBox is set to the container's pixel width at render time (1 unit =
   1 CSS px), so unlike the shared .pf-* chart classes these font sizes are what actually lands
   on screen at every range instead of being scaled with the drawing. */
#ftdHistoryChart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
#ftdHistoryChart.is-pannable { cursor: grab; }
#ftdHistoryChart.is-panning { cursor: grabbing; }
#ftdHistoryChart #ftdChartHitzone { cursor: inherit; }
.ftd-chart-axis {
  fill: #8ea3bd;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.ftd-chart-empty { fill: #93a7c2; font-size: 15px; font-weight: 700; }
.ftd-chart-grid { stroke: rgba(255,255,255,.055); stroke-width: 1; }
.ftd-chart-baseline { stroke: rgba(255,255,255,.16); stroke-width: 1; }
.ftd-chart-tick { stroke: rgba(255,255,255,.16); stroke-width: 1; }
.ftd-chart-highlight { fill: rgba(255,255,255,.05); pointer-events: none; }
.chart-hint { margin: 8px 2px 0; opacity: .72; }

/* Official Reg SHO threshold list. Most entries are securities we do not track (leveraged
   ETFs, nano-caps), so untracked chips stay deliberately muted and inert while the handful we
   can actually analyse are highlighted and clickable through to the asset drawer. */
/* .tier-box wraps by default, which in a section heading tears the checkbox off its own label
   onto a separate line once the text needs two lines. Keep the pair together and let the text
   wrap inside instead; the checkbox already has flex-shrink: 0. */
.section-heading .tier-box { flex-wrap: nowrap; align-items: flex-start; }
.section-heading .tier-box input[type="checkbox"] { margin-top: 1px; }

/* Detail-drawer market-structure section. The freshness stamp is deliberately prominent: short
   volume is next-day while ATS/dark pool runs three weeks behind, and the two sit next to each
   other, so an undated dark-pool figure would read as current. */
.substack + .substack { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sub-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sub-heading h4 { margin: 0 0 2px; font-size: var(--fs-lg); }
.freshness {
  font-size: var(--fs-xs);
  font-weight: 750;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.freshness:empty { display: none; }
.freshness.fresh { color: var(--accent-2); background: rgba(109,229,209,.12); }
.freshness.lagged { color: #f0c274; background: rgba(240,194,116,.13); }
.mini-chart-wrap { margin-top: 12px; }
.mini-chart-wrap svg { display: block; width: 100%; height: auto; }
.row-total td { border-top: 1px solid var(--line); }

.official-threshold-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.section-heading.compact h4 { margin: 2px 0 4px; font-size: var(--fs-lg); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
button.chip { cursor: default; }
.chip-tracked {
  cursor: pointer;
  color: #06231c;
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.chip-tracked:hover { filter: brightness(1.08); }
.chart-tooltip-hint { display: block; opacity: .7; margin-top: 3px; }
.pro-chart-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pro-summary-card {
  border: 1px solid color-mix(in srgb, var(--card-color) 42%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-color) 14%, transparent), rgba(255,255,255,.035));
  border-radius: 14px;
  padding: 11px 12px;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.pro-summary-card span {
  color: color-mix(in srgb, var(--card-color) 84%, #ffffff);
  font-size: var(--fs-xs);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pro-summary-card strong {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pro-summary-card small {
  color: #9bb0cb;
  font-size: var(--fs-xs);
  font-weight: 800;
}
.pro-price-line {
  stroke-width: 3.4 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(109,229,161,.2));
}
.pro-chart-note {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}
@media (max-width: 1100px) {
  .pro-chart-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #professionalPriceChart { height: 460px !important; }
}

/* v22.25 investor UX + correlation lab */
.nav-link { padding: 9px 11px; }
.global-search { width: 230px; }
.feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.screener-insight-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.screener-insight {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  background: linear-gradient(145deg, rgba(16,29,51,.82), rgba(8,14,26,.72));
  display: grid;
  gap: 5px;
  min-width: 0;
}
.screener-insight span { color: var(--muted); font-size: var(--fs-xs); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.screener-insight strong { font-size: var(--fs-3xl); letter-spacing: -.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screener-insight small { color: #8fa3bd; }
.screener-insight small.positive { color: var(--positive); }
.screener-insight small.negative { color: var(--negative); }

.screener-map-section { padding: 0; overflow: hidden; }
.screener-map-section summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.screener-map-section summary::-webkit-details-marker { display: none; }
.screener-map-section summary span:first-child { display: grid; gap: 3px; }
.screener-map-section summary b { font-size: var(--fs-base); }
.screener-map-section summary small { color: var(--muted); }
.map-summary-action { color: var(--accent-2); font-size: var(--fs-sm); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.map-summary-action-close { display: none; }
.screener-map-section[open] .map-summary-action-open { display: none; }
.screener-map-section[open] .map-summary-action-close { display: inline; }
.screener-map-section .world-map-shell { border-width: 1px 0 0; border-radius: 0; }

.pro-series-limit {
  margin: 4px 0 0;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(130,223,255,.18);
  background: rgba(130,223,255,.06);
  color: #9fb2ca;
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.correlation-page-head { align-items: stretch; }
.correlation-head-badge {
  min-width: 300px;
  border: 1px solid rgba(130,223,255,.22);
  border-radius: 18px;
  background: rgba(130,223,255,.065);
  padding: 15px 17px;
  display: grid;
  align-content: center;
  gap: 5px;
}
.correlation-head-badge span { color: var(--accent-2); font-size: var(--fs-xs); font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.correlation-head-badge strong { font-size: var(--fs-base); }
.correlation-head-badge small { color: var(--muted); }

.correlation-workbench,
.correlation-status-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,29,51,.80), rgba(8,14,26,.74));
  box-shadow: var(--shadow);
  border-radius: 24px;
}
.correlation-workbench { padding: 18px; margin-bottom: 12px; }
.correlation-mode-switch {
  width: fit-content;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  margin-bottom: 16px;
}
.correlation-mode-switch button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 9px 13px;
  font-weight: 900;
}
.correlation-mode-switch button.active { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.correlation-setup-panel { display: grid; grid-template-columns: minmax(210px, 1.2fr) auto minmax(210px, 1.2fr) minmax(145px, .55fr) auto; align-items: end; gap: 12px; }
.correlation-watchlist-control { grid-column: span 2; }
.correlation-swap {
  width: 42px;
  height: 42px;
  margin-bottom: 1px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--accent-2);
  background: rgba(255,255,255,.055);
  font-size: var(--fs-xl);
  font-weight: 900;
}
.correlation-run-button { min-height: 43px; white-space: nowrap; }
.correlation-status-card { padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.correlation-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #82dfff; box-shadow: 0 0 20px rgba(130,223,255,.52); flex: 0 0 auto; }
.correlation-status-card.loading .correlation-status-dot { animation: correlationPulse 1s infinite alternate; }
.correlation-status-card.error .correlation-status-dot { background: var(--negative); }
.correlation-status-card.success .correlation-status-dot { background: var(--positive); }
.correlation-status-card div { display: grid; gap: 3px; }
.correlation-status-card small { color: var(--muted); }
@keyframes correlationPulse { to { transform: scale(1.55); opacity: .55; } }

.correlation-results { display: grid; gap: 18px; margin-bottom: 20px; }
.quant-tab-panel { display: grid; gap: 18px; }
.quant-narrative .interpretation-callout { margin: 0; }
.quant-narrative .interpretation-callout p + p { margin-top: 8px; }
.correlation-score-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.correlation-score-card {
  border: 1px solid color-mix(in srgb, var(--score-color, #82dfff) 28%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--score-color, #82dfff) 10%, transparent), rgba(8,14,26,.76));
  border-radius: 18px;
  padding: 15px;
  min-width: 0;
  display: grid;
  gap: 5px;
}
.correlation-score-card span { color: color-mix(in srgb, var(--score-color, #82dfff) 78%, white); font-size: var(--fs-xs); font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.correlation-score-card strong { font-size: var(--fs-3xl); letter-spacing: -.04em; }
.correlation-score-card small { color: var(--muted); line-height: 1.35; }
.correlation-visual-grid,
.correlation-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.correlation-chart-card { min-width: 0; }
.correlation-chart-card svg { width: 100%; min-height: 310px; display: block; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(1,7,16,.38); }
.correlation-svg-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.correlation-svg-axis { fill: #8296b2; font-size: var(--fs-xs); font-weight: 800; }
.correlation-svg-label { fill: #dbe8f8; font-size: var(--fs-sm); font-weight: 900; }
.correlation-list { display: grid; gap: 9px; margin-top: 14px; }
.correlation-list-row { border: 1px solid var(--line); border-radius: 13px; padding: 10px 11px; background: rgba(255,255,255,.035); display: grid; gap: 3px; }
.correlation-list-row > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.correlation-list-row small { color: var(--muted); line-height: 1.45; }
.correlation-list-row-clickable { cursor: pointer; transition: background .15s, border-color .15s; }
.correlation-list-row-clickable:hover, .correlation-list-row-clickable:focus-visible { background: rgba(255,255,255,.08); border-color: var(--accent-2); }
.correlation-bar { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.correlation-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #82dfff, #6de5a1); }
.interpretation-callout { border-left: 3px solid var(--accent-2); padding: 2px 0 2px 12px; margin: 13px 0; }
.interpretation-callout strong { display: block; margin-bottom: 4px; }
.interpretation-callout p { margin: 0; font-size: var(--fs-md); }

.matrix-panel { overflow: hidden; }
.matrix-collapse-btn { position: sticky; top: 90px; z-index: 5; flex-shrink: 0; padding: 8px 14px; font-size: var(--fs-sm); }
.correlation-matrix-scroll.is-collapsed { display: none; }
.correlation-matrix-scroll { overflow: auto; padding-bottom: 4px; }
.correlation-matrix { display: grid; gap: 4px; min-width: max-content; }
.matrix-cell,
.matrix-label { width: 58px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 900; }
.matrix-label { color: #b9cbe1; background: rgba(255,255,255,.045); }
.matrix-label.row-label { width: 76px; justify-items: start; padding-left: 9px; }
.matrix-cell { border: 1px solid rgba(255,255,255,.08); color: white; }
.cluster-list { display: grid; gap: 10px; margin-top: 14px; }
.cluster-card { border: 1px solid var(--line); border-radius: 14px; padding: 11px; background: rgba(255,255,255,.035); }
.cluster-card header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cluster-members { display: flex; flex-wrap: wrap; gap: 6px; }
.cluster-members span { padding: 5px 8px; border-radius: 9px; background: rgba(130,223,255,.09); color: #cfe8ff; font-size: var(--fs-xs); font-weight: 900; }
.cluster-card-clickable { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cluster-card-clickable:hover, .cluster-card-clickable:focus-visible { border-color: rgba(155,200,255,.5); background: rgba(155,200,255,.06); }
.cluster-expand { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: -2px 0 10px; padding: 14px; border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; background: rgba(255,255,255,.02); }
.cluster-spark-svg { width: 100%; height: 140px; }
.cluster-spark-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.cluster-spark-legend span { display: flex; align-items: center; }
.cluster-spark-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--dot); }
.cluster-expand-breakdown { display: grid; gap: 12px; }
.cluster-breakdown-title { display: block; margin-bottom: 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 720px) { .cluster-expand { grid-template-columns: 1fr; } }

.correlation-methodology { display: grid; grid-template-columns: minmax(240px, .7fr) 1.7fr; gap: 24px; margin-bottom: 36px; }
.methodology-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.methodology-grid article { border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: rgba(255,255,255,.035); }
.methodology-grid article span { display: inline-grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: rgba(130,223,255,.11); color: var(--accent-2); font-weight: 950; margin-bottom: 9px; }
.methodology-grid article strong { display: block; font-size: var(--fs-md); }
.methodology-grid article p { margin: 5px 0 0; font-size: var(--fs-xs); line-height: 1.45; }

@media (max-width: 1180px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .correlation-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .correlation-setup-panel { grid-template-columns: 1fr auto 1fr; }
  .correlation-setup-panel .correlation-run-button { grid-column: span 3; }
}
@media (max-width: 820px) {
  .feature-grid,
  .screener-insight-strip,
  .correlation-score-grid,
  .correlation-visual-grid,
  .correlation-detail-grid,
  .correlation-methodology,
  .methodology-grid { grid-template-columns: 1fr; }
  .correlation-setup-panel { grid-template-columns: 1fr; }
  .correlation-setup-panel .correlation-run-button,
  .correlation-watchlist-control { grid-column: auto; }
  .correlation-swap { width: 100%; }
  .correlation-head-badge { min-width: 0; }
}

.quality-badge { display: inline-flex; align-items: center; gap: .42rem; min-width: 122px; padding: .34rem .52rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04); font-size: var(--fs-sm); font-weight: 750; white-space: nowrap; }
.quality-badge i { width: .48rem; height: .48rem; border-radius: 50%; background: #8b97aa; box-shadow: 0 0 0 3px rgba(139,151,170,.12); }
.quality-badge b { margin-left: auto; color: #dbe8f8; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.quality-trusted { border-color: rgba(90,222,166,.3); color: #8ff0c1; background: rgba(42,160,112,.09); }
.quality-trusted i { background: #5adea6; box-shadow: 0 0 0 3px rgba(90,222,166,.14); }
.quality-warning { border-color: rgba(246,199,110,.34); color: #f6d895; background: rgba(200,142,42,.09); }
.quality-warning i { background: #f6c76e; box-shadow: 0 0 0 3px rgba(246,199,110,.14); }
.quality-quarantined { border-color: rgba(241,105,126,.38); color: #ff9caf; background: rgba(195,54,80,.1); }
.quality-quarantined i { background: #f1697e; box-shadow: 0 0 0 3px rgba(241,105,126,.15); }
.quality-unchecked { color: #aeb8c8; }
.asset-quality-quarantined { background: linear-gradient(90deg,rgba(211,65,87,.075),transparent 36%); }
.asset-quality-quarantined td { opacity: .8; }
.asset-quality-quarantined:hover td { opacity: 1; }

/* v22.53 account menu + pricing page */
.account-menu { position: relative; flex: 0 0 auto; }
.account-avatar { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: .2s ease; }
.account-avatar:hover { color: var(--text); background: rgba(255,255,255,.12); }
.account-avatar.is-logged-in { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101c; border-color: transparent; box-shadow: 0 0 22px rgba(109,229,209,.25); }
.account-avatar .avatar-letter { font-weight: 900; font-size: var(--fs-lg); }
.account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 250px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.5); z-index: 60; }
.account-dropdown-header { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; gap: 8px; }
.account-dropdown-header strong { font-size: var(--fs-md); word-break: break-all; }
.account-dropdown-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-weight: 750; font-size: var(--fs-md); cursor: pointer; transition: .15s ease; }
.account-dropdown-item:hover { background: rgba(255,255,255,.08); }
.account-dropdown-item.danger { color: var(--negative); }
.account-dropdown-divider { height: 1px; background: var(--line); margin: 6px 4px; }

.pricing-header { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; max-width: 860px; margin: 0 auto; align-items: stretch; }
.pricing-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.pricing-card h2 { font-size: var(--fs-3xl); }
.pricing-card-pro { border-color: rgba(109,229,209,.55); box-shadow: 0 0 44px rgba(109,229,209,.12); }
.pricing-flag { position: absolute; top: -13px; right: 22px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101c; font-size: var(--fs-sm); font-weight: 850; }
.pricing-price strong { font-size: var(--fs-6xl); font-weight: 900; }
.pricing-price span { display: block; color: var(--muted); font-size: var(--fs-md); margin-top: 4px; }
.pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.pricing-features li { padding-left: 26px; position: relative; color: var(--muted); font-size: var(--fs-base); line-height: 1.45; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-2); font-weight: 900; }
.pricing-features li strong { color: var(--text); }
.pricing-cta { width: 100%; text-align: center; }
.pricing-note { text-align: center; color: var(--muted); font-size: var(--fs-md); max-width: 620px; margin: 26px auto 0; }
.account-dropdown.align-left { right: auto; left: 0; }

.nav-item-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-caret-toggle { border: 0; background: transparent; color: var(--muted); padding: 6px 4px 6px 0; margin-left: -6px; font-size: var(--fs-sm); cursor: pointer; }
.nav-caret-toggle:hover { color: var(--text); }
.nav-dropdown-panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 190px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.5); z-index: 60; }
.nav-dropdown-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-weight: 750; font-size: var(--fs-md); cursor: pointer; transition: .15s ease; }
.nav-dropdown-item:hover { background: rgba(255,255,255,.08); }
.nav-dropdown-item.active { background: rgba(109,229,209,.16); color: var(--accent-2); }

.dividend-calc-result { margin-top: 16px; }
.dividend-calc-result .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dividend-calc-result .kv-card { border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: rgba(255,255,255,.04); }
.dividend-calc-result .kv-card span { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.dividend-calc-result .kv-card strong { display: block; font-size: var(--fs-2xl); }
.pricing-manage-hint { color: var(--muted); font-size: var(--fs-md); text-align: center; margin: 10px 0 0; }
.api-note.success-note { color: var(--positive); font-weight: 750; }
/* v22.59: professional chart modal is taller than the viewport on smaller screens — allow scrolling */
#professionalChartModal { place-items: start center; overflow-y: auto; padding: 28px 12px; }
#professionalChartModal .professional-chart-modal-card { margin: 0 auto; }
/* v22.59: map region cards need readable text on the dark map background */
.map-card span { color: #dbe7f8; font-weight: 800; }
.map-card strong { color: #f2f7ff; }
.map-card .positive { color: #7bf0b0; }
.map-card .negative { color: #ff8ba1; }
.world-map-caption span { color: #dbe7f8; font-weight: 800; }
.hindsight-portfolio-section { margin: 18px 0 6px; display: flex; flex-direction: column; gap: 14px; }
.portfolio-chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portfolio-chart-head-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.portfolio-chart-head h3 { margin: 2px 0 0; font-size: var(--fs-xl); letter-spacing: -.01em; }
.portfolio-range-buttons { flex-wrap: wrap; }
.portfolio-summary-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pf-summary-card { border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 4px; }
.pf-summary-card span { color: var(--muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pf-summary-card strong { font-size: var(--fs-xl); font-weight: 850; letter-spacing: -.01em; }
.pf-summary-card strong.positive { color: var(--positive); }
.pf-summary-card strong.negative { color: var(--negative); }
.portfolio-chart-card { padding: 12px 10px 6px; }
#hindsightPortfolioChart { width: 100%; height: auto; display: block; }
.pf-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.pf-axis-label { fill: #93a7c2; font-size: var(--fs-sm); font-weight: 750; }
.pf-invested-line { stroke: #9bc8ff; stroke-width: 1.4; stroke-dasharray: 6 6; opacity: .7; }
.pf-invested-label { fill: #9bc8ff; font-size: var(--fs-sm); font-weight: 850; }
.pf-guide { stroke: rgba(255,255,255,.34); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.pf-dot { stroke: #06101c; stroke-width: 2.5; pointer-events: none; filter: drop-shadow(0 0 8px rgba(109,229,209,.5)); }
.pf-div-dot { fill: #f6c76e; stroke: #06101c; stroke-width: 1.5; cursor: pointer; }
.pf-div-dot:hover { fill: #ffe0a3; }
.chart-tooltip-dividends { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 3px; }
.chart-tooltip-dividend-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.chart-tooltip-dividend-row span { color: #f6c76e; }
.chart-tooltip-dividend-row b { color: var(--text); font-weight: 800; }
@media (max-width: 900px) {
  .portfolio-summary-row { grid-template-columns: repeat(2, 1fr); }
}

/* v22.67: Über-uns page + footer link */
.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1020px; margin: 0 auto; }
.about-card { border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px 24px; background: linear-gradient(180deg, rgba(16,29,51,.72), rgba(8,14,26,.66)); display: flex; flex-direction: column; gap: 10px; }
.about-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; font-size: var(--fs-xl); color: var(--accent-2); background: rgba(109,229,209,.10); border: 1px solid rgba(109,229,209,.22); }
.about-card h3 { margin: 4px 0 0; font-size: var(--fs-xl); }
.about-card p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.65; }
.about-cta-row { justify-content: center; margin-top: 8px; }
.footer-link { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.footer-link:hover { color: var(--text); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* v22.68: mobile-first safety layer.
   These rules are intentionally appended at the end so desktop remains governed
   by the existing layout, while phones/tablets get a clean, contained UI. */
@media (max-width: 1100px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .brand {
    width: 100%;
    min-width: 0;
  }

  .nav {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar { display: none; }

  .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .header-actions {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .global-search-wrap,
  .global-search {
    min-width: 0;
    width: 100%;
  }

  .auth-box {
    width: auto;
    flex: 0 0 auto;
  }

  .hero-grid,
  .watchlist-admin,
  .lab-grid,
  .hindsight-lab-grid,
  .legal-hero,
  .legal-layout {
    grid-template-columns: 1fr !important;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .universe-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --radius-xl: 24px;
    --radius-lg: 19px;
  }

  body {
    background:
      radial-gradient(circle at 18% 0%, rgba(80,145,255,.16), transparent 32%),
      radial-gradient(circle at 86% 8%, rgba(109,229,209,.10), transparent 34%),
      linear-gradient(135deg, #030612 0%, #071425 52%, #030612 100%);
  }

  .shell {
    width: min(100% - 22px, 1580px);
    padding: 12px 0 82px;
  }

  .topbar {
    top: 8px;
    padding: 10px;
    border-radius: 22px;
  }

  .brand {
    padding: 4px 6px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .brand strong { font-size: var(--fs-base); }
  .brand small { font-size: var(--fs-xs); }

  .nav {
    padding: 4px;
    border-radius: 16px;
    gap: 4px;
  }

  .nav-link {
    padding: 9px 11px;
    border-radius: 12px;
    font-size: var(--fs-md);
  }

  .header-actions {
    gap: 8px;
  }

  .auth-status-button,
  .auth-user-pill {
    width: 52px !important;
    height: 48px !important;
    padding: 0 !important;
  }

  .auth-status-button span:not(.auth-status-dot),
  .auth-user-pill span {
    display: none;
  }

  /* Same exclusion as the base rule: a 46px min-height turns an 18px checkbox into a tall
     rectangle on phones. Checkboxes get their own touch target via the label around them. */
  input:not([type="checkbox"]),
  select,
  textarea {
    min-height: 46px;
    border-radius: 14px;
    padding: 11px 12px;
    font-size: var(--fs-lg);
  }

  .hero-grid {
    margin: 22px 0 16px;
    gap: 14px;
  }

  .hero-card.large,
  .page-head,
  .controls-card,
  .table-card,
  .glass-panel,
  .metric-panel,
  .map-section {
    padding: 18px;
    border-radius: 22px;
  }

  .hero-card.large {
    min-height: 0;
    justify-content: flex-start;
  }

  .hero-card.large::after {
    inset: auto -24% -38% 12%;
    height: 220px;
  }

  h1 {
    font-size: clamp(38px, 12vw, 56px);
    line-height: .96;
    letter-spacing: -.065em;
  }

  h2 {
    font-size: clamp(27px, 8vw, 40px);
  }

  h3 {
    font-size: var(--fs-xl);
  }

  .hero-copy,
  p {
    font-size: var(--fs-base);
    line-height: 1.55;
  }

  .dashboard-card,
  .asset-research-strip,
  .screener-insight-strip,
  .portfolio-summary-row,
  .pro-chart-summary,
  .correlation-score-grid,
  .correlation-visual-grid,
  .correlation-detail-grid,
  .correlation-methodology,
  .methodology-grid {
    grid-template-columns: 1fr !important;
  }

  .main-metric strong {
    font-size: var(--fs-7xl);
  }

  .metric-card {
    min-height: 0;
    padding: 15px;
  }

  .metric-card strong {
    font-size: var(--fs-4xl);
  }

  .feature-card {
    min-height: 0;
    padding: 20px;
    border-radius: 22px;
  }

  .feature-card span {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }

  .page-head,
  .section-heading,
  .portfolio-chart-head,
  .professional-chart-head {
    flex-direction: column;
    align-items: stretch;
  }

  .page-actions,
  .button-row,
  .history-header,
  .table-meta,
  .inline-form,
  .auth-modal-head {
    align-items: stretch;
  }

  .button-row > *,
  .page-actions > *,
  .history-actions > *,
  .inline-form > *,
  .primary-button,
  .ghost-button {
    width: 100%;
  }

  .range-buttons {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .range-buttons::-webkit-scrollbar { display: none; }

  /* `flex: 0 0 auto` stand hier schon — aber `.button-row > * { width: 100% }`
     weiter oben hat es ausgehebelt, weil die Schaltergruppen BEIDE Klassen
     tragen. Ergebnis auf /ftd: bei 820 px war von fuenf Zeitraumknoepfen genau
     EINER sichtbar, "Max" lag unerreichbar im Querscroll; unter 720 px belegte
     jeder Knopf eine eigene Zeile. `width: auto` stellt die hier gemeinte
     natuerliche Breite wieder her. Die Spezifitaet (Klasse + Element) schlaegt
     `.button-row > *`, die Regel wirkt also unabhaengig von ihrer Position. */
  .range-buttons button {
    flex: 0 0 auto;
    width: auto;
  }

  .universe-controls,
  .metric-checkbox-grid,
  .drawer-metrics,
  .kv-grid,
  .two-cols,
  .hindsight-result-summary,
  .hindsight-action-row,
  .standard-formula-grid,
  .calculator-grid,
  .condition-row,
  .ftd-study-controls,
  .auth-actions,
  .auth-support-grid,
  .pricing-grid,
  .about-grid,
  .legal-facts,
  .legal-provider-grid,
  .legal-rule-cards,
  .legal-toc,
  .extra-metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .table-card {
    overflow: hidden;
  }

  .table-scroll,
  .mini-table-wrap,
  .correlation-matrix-scroll {
    margin-inline: -4px;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 920px;
  }

  /* Auf kleinen Screens nur Aktion + Symbol pinnen, sonst bleibt kaum
     scrollbare Fläche übrig. */
  .data-table:not(.compact-table) th:nth-child(3), .data-table:not(.compact-table) td:nth-child(3) {
    position: static;
    width: auto;
    min-width: 0;
  }
  .pin-symbol-name th:nth-child(2), .pin-symbol-name td:nth-child(2) {
    position: static;
    width: auto;
    min-width: 0;
  }

  .compact-table {
    min-width: 620px;
  }

  .data-table th,
  .data-table td {
    padding: 11px 12px;
    font-size: var(--fs-sm);
  }

  .metric-toolbar {
    padding: 16px;
    align-items: stretch;
  }

  .metric-toolbar .button-row {
    width: 100%;
  }

  .world-map-shell,
  .world-map-shell.atlas-map-shell {
    min-height: 300px;
    border-radius: 18px;
  }

  .world-map,
  .world-map.atlas-map-svg {
    height: 300px;
  }

  .map-cards {
    position: static;
    width: 100%;
    padding: 12px;
  }

  .drawer-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: min(92vh, 940px) !important;
    border-radius: 26px 26px 0 0 !important;
    padding: 18px !important;
  }

  .close-button {
    right: 16px;
    top: 16px;
  }

  .asset-tabs {
    margin-right: 48px !important;
  }

  #detailTitle {
    font-size: clamp(30px, 10vw, 42px) !important;
    padding-right: 48px;
  }

  .detail-section {
    padding: 13px;
    border-radius: 16px;
  }

  .chart-card {
    min-height: 250px !important;
    padding: 10px;
  }

  #priceChart {
    width: 100% !important;
    height: 230px !important;
  }

  .chart-tooltip {
    position: absolute;
    width: min(190px, calc(100% - 24px)) !important;
    min-width: 0 !important;
    left: 12px !important;
    right: auto !important;
    top: 12px !important;
  }

  .chart-tooltip.is-right,
  .chart-tooltip.is-left {
    left: 12px !important;
    right: auto !important;
  }

  #professionalChartModal {
    padding: 10px 8px;
  }

  .modal {
    place-items: end center;
    padding: 10px;
  }

  .modal-card,
  .feedback-modal-card,
  .auth-card,
  .professional-chart-modal-card {
    width: 100% !important;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    border-radius: 24px;
    padding: 18px;
  }

  .professional-chart-modal-card {
    min-height: 0 !important;
  }

  .professional-chart-grid {
    grid-template-columns: 1fr !important;
  }

  .professional-chart-panel {
    max-height: 260px;
    overflow: auto;
  }

  .professional-chart-preview {
    min-height: 0 !important;
    padding: 12px;
  }

  .pro-chart-toolbar,
  .pro-chart-legend,
  .professional-range-row {
    align-items: stretch;
    flex-direction: column;
  }

  #professionalPriceChart {
    height: 320px !important;
    min-width: 720px;
  }

  .pro-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .correlation-mode-switch {
    width: 100%;
    overflow-x: auto;
  }

  .correlation-mode-switch button {
    flex: 1 0 auto;
    white-space: nowrap;
  }

  .correlation-setup-panel,
  .correlation-pair-builder,
  .correlation-asset-picker {
    grid-template-columns: 1fr !important;
  }

  .correlation-setup-panel .correlation-run-button,
  .correlation-pair-builder > .control,
  .correlation-pair-builder > .correlation-run-button,
  .correlation-asset-picker .control:last-child,
  .correlation-watchlist-control {
    grid-column: auto !important;
  }

  .correlation-swap {
    width: 100%;
  }

  .correlation-chart-card svg {
    min-height: 250px;
  }

  .correlation-hover-card {
    min-width: 0;
    width: calc(100% - 28px);
  }

  .feedback-fab {
    right: 14px;
    bottom: 14px;
    padding: 12px;
  }

  .feedback-fab strong {
    display: none;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 4px;
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(100% - 16px, 1580px);
    padding-top: 8px;
  }

  .topbar {
    border-radius: 20px;
  }

  .brand small {
    display: none;
  }

  .header-actions {
    grid-template-columns: 1fr 48px;
  }

  .search-suggestions {
    left: 0;
    right: auto;
    width: min(94vw, 520px);
  }

  h1 {
    font-size: clamp(34px, 13vw, 46px);
  }

  .eyebrow {
    letter-spacing: .13em;
    font-size: var(--fs-xs);
  }

  .hero-card.large,
  .page-head,
  .controls-card,
  .table-card,
  .glass-panel,
  .metric-panel,
  .map-section {
    padding: 15px;
  }

  .primary-button,
  .ghost-button,
  .icon-button {
    min-height: 44px;
  }

  .screener-map-section summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .screener-map-section { padding: 0; }

  .world-map-shell,
  .world-map-shell.atlas-map-shell {
    min-height: 250px;
  }

  .world-map,
  .world-map.atlas-map-svg {
    height: 250px;
  }

  .drawer-panel {
    padding: 14px !important;
  }

  .asset-tab {
    min-width: 132px !important;
  }

  .drawer-metric strong,
  .kv strong,
  .pf-summary-card strong,
  .hindsight-result-summary .summary-box strong {
    font-size: var(--fs-lg);
  }

  .metric-check {
    grid-template-columns: auto 1fr;
  }

  .metric-check em {
    grid-column: 2;
  }

  .professional-chart-panel {
    max-height: 220px;
  }

  #professionalPriceChart {
    height: 280px !important;
  }

  .feedback-meta-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-card,
  .about-card {
    padding: 20px;
  }
}

/* Hamburger-Toggle: nur auf Mobile sichtbar (siehe Media Query unten) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .15s, opacity .15s; }

/* ===== Mobile-Optimierung (v22.79, verdichtet v22.84) — Header, Tabellen, Charts ===== */
@media (max-width: 720px) {
  /* Header: so kompakt wie moeglich — Navigation klappt per Hamburger auf/zu
     statt permanent 2 Zeilen zu belegen */
  .topbar { position: static; padding: 8px 10px; gap: 6px; row-gap: 6px; flex-wrap: wrap; }
  .brand { min-width: 0; padding: 2px 4px; gap: 6px; }
  .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
  .brand small { display: none; }
  .nav-toggle { display: flex; order: 2; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav {
    order: 10;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(4,11,23,.55);
  }
  .nav.nav-open { display: flex; }
  .nav-link { padding: 10px 12px; width: 100%; min-height: 38px; text-align: left; border-radius: 8px; }
  .header-actions { order: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; align-items: center; margin-left: auto; }
  .lang-toggle { max-width: 100%; flex: 0 0 auto; }
  .global-search-wrap { flex-basis: 100%; order: 11; width: 100%; min-width: 0; }
  .global-search { width: 100%; min-height: 40px; }

  /* Startseite: Hero deutlich kompakter statt bildschirmfuellend */
  .hero-grid { gap: 12px; }
  .hero-card.large { padding: 18px; }
  .hero-card.large .eyebrow { font-size: var(--fs-xs); margin-bottom: 4px; }
  .hero-card.large h1 { font-size: clamp(24px, 7vw, 32px); line-height: 1.15; margin: 4px 0 8px; }
  .hero-card.large .hero-tagline { font-size: var(--fs-lg); margin-bottom: 8px; }
  .hero-card.large .hero-copy { font-size: var(--fs-sm); margin-bottom: 12px; }
  .hero-card.large .button-row { gap: 8px; }
  .hero-card.large .primary-button, .hero-card.large .ghost-button { padding: 11px 16px; min-height: 42px; font-size: var(--fs-sm); }
  .dashboard-card { padding: 14px; }
  .metric-card { padding: 12px; min-height: 74px; }
  .metric-card strong { font-size: var(--fs-2xl); }
  .metric-card.main-metric strong { font-size: var(--fs-3xl); }
  .mini-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
  .feature-card { padding: 12px; }
  .feature-card h3 { font-size: var(--fs-sm); margin: 4px 0 2px; }
  .feature-card p { font-size: var(--fs-xs); line-height: 1.35; }

  /* Allgemein kompaktere Seitenkoepfe und Karten */
  .page-head { padding: 16px; gap: 10px; }
  .page-head h2 { font-size: var(--fs-xl); }
  .page-head p { font-size: var(--fs-sm); }
  .controls-card, .table-card, .metric-toolbar, .screener-insight-strip { padding: 12px; }

  /* Datentabellen: schmalere fixierte Spalten -> mehr Wisch-Fläche */
  .data-table:not(.compact-table) th:nth-child(1), .data-table:not(.compact-table) td:nth-child(1) { width: 48px; min-width: 48px; }
  .data-table:not(.compact-table) th:nth-child(2), .data-table:not(.compact-table) td:nth-child(2) { left: 48px; width: 108px; min-width: 108px; }
  .pin-symbol-name th:nth-child(1), .pin-symbol-name td:nth-child(1) { width: 108px; min-width: 108px; }

  /* Charts: lesbar bleiben statt auf Briefmarkengroesse zu schrumpfen —
     feste Mindestbreite + horizontales Wischen im Karten-Container */
  .chart-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart-card > svg { min-width: 640px; }
  .correlation-chart-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .correlation-chart-card svg { min-width: 640px; }
  .pro-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pro-chart-wrap svg { min-width: 760px; }
  /* The FTD history chart sizes its own viewBox to the container and pans by drag, so it must
     stay at the real container width — a 760px floor would reintroduce the horizontal scrollbar
     and re-scale its axis type on phones. */
  .pro-chart-wrap #ftdHistoryChart,
  .pro-chart-wrap #ftdCalcChart { min-width: 0; }

  /* Formulare: Bedienelemente in Daumen-Groesse */
  select, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="date"], input[type="number"] { min-height: 44px; }
  .range-buttons { flex-wrap: wrap; row-gap: 6px; }
  .history-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .history-actions { display: flex; gap: 8px; }
  .history-actions .ghost-button { flex: 1 1 auto; min-height: 42px; }
}

/* FTD page: the Reg SHO threshold list and the FINRA short-volume list are two views of the
   same question, so they sit side by side instead of stacked — stacked made the page long
   enough that you could not compare them without scrolling. Collapses to one column on
   narrow screens, where side-by-side tables would each be too cramped to read. */
.reg-sho-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.reg-sho-grid > .glass-panel { margin: 0; min-width: 0; }
@media (max-width: 1100px) { .reg-sho-grid { grid-template-columns: 1fr; } }

/* Long methodology copy moves behind a disclosure so the panel header stays short. */
.method-note { margin-top: 6px; }
.method-note > summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-2); list-style: none; }
.method-note > summary::-webkit-details-marker { display: none; }
.method-note > summary::before { content: "▸ "; }
.method-note[open] > summary::before { content: "▾ "; }
.method-note > p { margin-top: 6px; }

.list-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }

/* Row-limit picker that sits inline in a toolbar/table header. The global `input, select`
   rule stretches selects to 100% width, which would push the whole toolbar apart. */
/* Calculator timeline chart. Entry days are the point of the whole picture, so they get the
   strongest colour; exits are a softer accent and ordinary days stay muted. */
.ftd-calc-chart-card { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
#ftdCalcChart { display: block; width: 100%; height: auto; }
.ftd-bar-entry { fill: var(--negative); }
.ftd-bar-exit  { fill: rgba(155, 200, 255, .55); }
.ftd-price-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ftd-axis-price { fill: var(--accent-2); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.swatch-ftd { background: rgba(255, 113, 139, .28); }
.swatch-entry { background: var(--negative); }
.swatch-exit { background: rgba(155, 200, 255, .55); }
.swatch-price { background: var(--accent-2); height: 3px; border-radius: 2px; }

/* Per-row calculation path: collapsed by default so the table stays scannable. */
.calc-derivation > summary { cursor: pointer; color: var(--accent-2); font-size: var(--fs-xs); font-weight: 750; }
.calc-derivation .calc-note { margin-top: 6px; min-width: 260px; font-size: var(--fs-xs); line-height: 1.5; font-variant-numeric: tabular-nums; }

.inline-select { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; white-space: nowrap; }
.inline-select > span { font-size: var(--fs-xs); font-weight: 750; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.inline-select select { width: auto; min-width: 92px; padding: 7px 10px; border-radius: 11px; font-size: var(--fs-sm); }
.list-search {
  flex: 1 1 200px;
  min-width: 0;
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--input-bg, rgba(255,255,255,.04));
  color: inherit;
  font-size: var(--fs-sm);
}
.list-search:focus { outline: none; border-color: var(--accent-2); }

/* Rows that open the asset detail get a pointer so the affordance is visible. The main
   universe tables always had this behaviour; the FTD page tables did not, which made the
   lists look like dead ends. */
.data-table tbody tr[data-row-symbol] { cursor: pointer; }

/* Screening-Filter panel (stocks page). The section wrapper sets padding:0 so the map can
   sit flush to the card edges — the panel therefore brings its own padding, otherwise the
   fields hug the border while the map below is inset, which read as "everything shoved to
   one side". */
.screening-panel { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 20px; }
.screening-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.screening-head h3 { margin: 2px 0 0; font-size: var(--fs-lg); }
.screening-head-result { display: flex; align-items: center; gap: 14px; }
.screening-result-figure { display: flex; align-items: baseline; gap: 7px; }
.screening-result-figure strong { font-size: 1.5rem; font-weight: 900; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.screening-result-figure span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }

/* auto-fit keeps the fields left-aligned and evenly sized at any width instead of
   stretching two lonely inputs across the full card. */
.screening-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 22px; align-items: start; }
.screening-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.screening-field-wide { grid-column: span 2; }
.screening-field > label { font-size: var(--fs-xs); font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.screening-field > label .unit { text-transform: none; letter-spacing: 0; font-weight: 700; opacity: .7; }
.screening-field > input {
  width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: inherit; font-size: var(--fs-md); font-variant-numeric: tabular-nums;
}
.screening-field > input:focus { outline: none; border-color: var(--accent-2); background: rgba(255,255,255,.06); }
.screening-hint { margin: 0; font-size: var(--fs-xs); color: var(--muted); opacity: .8; }

.screening-cap-tiers { gap: 8px; }
.screening-cap-tiers button { padding: 8px 13px; border-radius: 11px; }
.screening-cap-tiers button.active { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }

/* Segmented control reads as one control with two states, unlike two loose buttons. */
.segmented { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); width: fit-content; }
.segmented button { padding: 7px 18px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 900; font-size: var(--fs-sm); letter-spacing: .04em; transition: background .16s ease, color .16s ease; }
.segmented button:hover { color: var(--text); }
.segmented button.active { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.segmented.small button { padding: 5px 13px; font-size: var(--fs-xs); }

/* ── Tutorial-Knopf im Seitenkopf ────────────────────────────────────────────
   Sitzt neben dem Seitennamen statt darunter: er soll auffallen, ohne der
   Überschrift den Rang abzulaufen. Grün (--positive) statt des üblichen
   Blau-Mint-Verlaufs, damit er sich von den Handlungsknöpfen der Seite abhebt —
   er führt zu einer Erklärung, nicht zu einer Aktion. */
.page-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title-row h2 { margin: 0; }

.tutorial-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 5px 13px 5px 10px; border-radius: 999px;
  border: 1px solid rgba(109,229,161,.42); background: rgba(109,229,161,.13);
  color: var(--positive); font-size: var(--fs-xs); font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.tutorial-chip:hover { background: rgba(109,229,161,.2); border-color: rgba(109,229,161,.6); transform: translateY(-1px); }
.tutorial-chip-play { font-size: 9px; line-height: 1; }

.tutorial-card { width: min(1040px, calc(100% - 32px)); padding: 20px; }
.tutorial-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.tutorial-head h3 { margin: 0; }
/* .close-button bringt aus dem Detailfenster ein position:absolute mit. Ohne
   das Zurücksetzen sprang das × aus der Karte heraus an den Bildschirmrand. */
.tutorial-head .close-button { position: static; right: auto; top: auto; flex: 0 0 auto; }
/* 16:9 fest vorgeben: ohne das springt die Karte beim Laden der Metadaten von
   Null auf volle Höhe, weil das <video> vorher keine Masse kennt. */
.tutorial-video-shell { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; border: 1px solid var(--line); }
.tutorial-video-shell video { width: 100%; height: 100%; display: block; object-fit: contain; }
.tutorial-card > .small-copy { margin-top: 12px; }

@media (max-width: 720px) {
  .tutorial-card { padding: 14px; }
  .page-title-row { gap: 9px; }
}

/* ── Strategie-Schaufenster auf der Startseite ────────────────────────────────
   Eigene Tabellenklasse statt .data-table: die trägt min-width:1100px und drei
   klebende Spalten mit festen Breiten (64/132/240 px) — richtig für den Screener
   mit dreissig Spalten, bei sieben Spalten ergibt es Querscrollen und eine
   240 px breite Kursspalte. Die Reiter tragen jetzt .segmented, weil
   .ghost-button.active nirgends gestaltet ist: fünf gleich aussehende Knöpfe
   verrieten nicht, welche Strategie gerade läuft. */
#homeStrategiePanel { display: flex; flex-direction: column; gap: 18px; }
#homeStrategiePanel .section-heading { margin-bottom: 0; }

.strategie-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.strategie-tabs::-webkit-scrollbar { display: none; }
.strategie-tabs button { flex: 0 0 auto; white-space: nowrap; }

.strategie-note { display: flex; flex-direction: column; gap: 7px; padding: 15px 19px; border-left: 2px solid rgba(109,229,209,.5); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(90deg, rgba(109,229,209,.075), rgba(109,229,209,0) 70%); }
.strategie-note-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; min-height: 30px; }
/* Ohne das Nullen trägt h4 die Browser-Vorgabe von 24 px oben und unten und
   reisst einen Spalt zwischen Titel und Erklärung auf. */
.strategie-note h4 { margin: 0; font-size: var(--fs-xl); letter-spacing: -.03em; }
.strategie-note p { color: var(--muted); font-size: var(--fs-md); line-height: 1.62; max-width: 82ch; }
.strategie-note-basis { display: flex; align-items: center; gap: 9px; }
.strategie-note-basis > span { color: var(--muted-2); font-size: var(--fs-xs); font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }

.strategie-table-wrap { border: 1px solid var(--line); border-radius: 18px; overflow: auto; max-height: 540px; }
.strategie-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.strategie-table th { position: sticky; top: 0; z-index: 2; padding: 12px 16px; background: #0c1729; color: var(--muted); font-size: var(--fs-xs); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.strategie-table th.sortable { cursor: pointer; }
.strategie-table th.sortable:hover { color: var(--text); }
.strategie-table th.sorted { color: var(--accent-2); }
.strategie-table td { padding: 11px 16px; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.05); }
.strategie-table tbody tr:last-child td { border-bottom: 0; }
.strategie-table tbody tr { cursor: pointer; transition: background .14s ease; }
.strategie-table tbody tr:hover { background: rgba(155,200,255,.06); }
.strategie-table th:nth-child(n+3), .strategie-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.strategie-table td:first-child { width: 56px; }
.strategie-rang { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 9px; color: var(--muted-2); font-size: var(--fs-sm); font-weight: 900; font-variant-numeric: tabular-nums; }
/* Der Rang bekommt die Markenfarbe nur ohne eigene Sortierung — danach ist die
   Zeilennummer nicht mehr der Rang der Strategie, und ein Abzeichen dort wäre
   schlicht falsch. */
.strategie-rang.top { color: #06101c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.strategie-table .strategie-name { display: block; margin-top: 2px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--muted-2); font-size: var(--fs-xs); font-weight: 700; }

.screening-custom-filters { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.screening-custom-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.screening-custom-head > label { font-size: var(--fs-xs); font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.screening-custom-rows { display: flex; flex-direction: column; gap: 9px; }
.screening-custom-rows:empty { display: none; }
.screening-custom-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px minmax(0, .9fr) auto; gap: 9px; align-items: center; }
.screening-custom-row select, .screening-custom-row input {
  width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: inherit; font-size: var(--fs-sm);
}
.screening-custom-row input { font-variant-numeric: tabular-nums; }
.screening-custom-row select:focus, .screening-custom-row input:focus { outline: none; border-color: var(--accent-2); }
.screening-custom-row button { padding: 8px 12px; color: var(--muted); }
.screening-custom-row button:hover { color: #ff8ba1; border-color: rgba(255,139,161,.4); }

@media (max-width: 720px) {
  .screening-panel { padding: 16px 16px 20px; }
  .screening-field-wide { grid-column: span 1; }
  .screening-custom-row { grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) auto; }
}

/* Screening-Filter world map: every country gets a real border (topojson.feature, not the
   merged single-landmass path the other atlas maps use) — countries we don't track render
   as plain outlines, tracked ones are clickable and shaded by how many stocks match the
   current screening filters. */
.screening-map-regions { padding: 14px 18px 0; }
.atlas-country { stroke: rgba(203,213,225,.30); stroke-width: .6; stroke-linejoin: round; transition: fill-opacity .15s ease; }
.atlas-country.trackable { cursor: pointer; }
.atlas-country.trackable:hover { stroke: var(--accent-2); stroke-width: 1.2; }
.atlas-country.active { stroke: var(--accent-2); stroke-width: 1.6; }
.map-loading-note { padding: 24px; }

/* Region cards on the screening map: name, matching stock count, average daily move.
   Overlaid bottom-right (like the old .map-cards) rather than stacked underneath, so the
   map keeps its full height and the numbers sit next to what they describe. They double as
   the region control — clicking one zooms and filters. */
.map-region-cards {
  position: absolute; right: 16px; bottom: 46px; z-index: 2;
  display: grid; gap: 7px; width: min(210px, calc(100% - 32px));
}
.map-region-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name change" "count change";
  align-items: center; gap: 0 10px; text-align: left; padding: 8px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(3,7,17,.82); backdrop-filter: blur(10px);
  transition: border-color .16s ease, background .16s ease;
}
.map-region-card:hover { border-color: rgba(255,255,255,.26); }
.map-region-card.active { border-color: var(--accent-2); background: rgba(109,229,209,.12); }
.map-region-name { grid-area: name; color: var(--muted); font-size: var(--fs-xs); font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.map-region-count { grid-area: count; color: #f2f7ff; font-size: var(--fs-md); font-weight: 900; font-variant-numeric: tabular-nums; }
.map-region-change { grid-area: change; font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.map-region-change.positive { color: #7bf0b0; }
.map-region-change.negative { color: #ff8ba1; }

/* The SVG ocean now matches --bg, so the map edge should not be a hard line against the
   page either — no rounded inset border, just a soft fade into the surrounding panel. */
.screener-map-section .atlas-map-shell { background: transparent; border: 0; }
.screener-map-section .atlas-map-shell .world-map { display: block; }

@media (max-width: 720px) {
  .map-region-cards {
    position: static; width: auto; padding: 12px 16px 0;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* Small "i" affordance next to a field label, with an inline explanation box. Used for the
   market-cap tiers, where the thresholds matter but would bloat the label if spelled out. */
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 7px; padding: 0; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.05);
  color: var(--muted); font-size: 10px; font-weight: 900; font-style: italic; line-height: 1;
  text-transform: none; letter-spacing: 0;
}
.info-dot:hover, .info-dot[aria-expanded="true"] { color: var(--accent-2); border-color: var(--accent-2); }
.info-dot { cursor: help; user-select: none; }
.info-dot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Erklärblase zum Infopunkt.
   Der `title`-Tooltip des Browsers bleibt zusätzlich bestehen (er trägt den Text
   und wird von i18n.js übersetzt), taugt aber allein nicht: er braucht rund eine
   Sekunde und lässt sich auf einem Touchgerät gar nicht auslösen. */
.info-pop {
  position: absolute; z-index: 90; max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2, #161b22);
  color: var(--text); font-size: 12px; font-weight: 400; font-style: normal;
  line-height: 1.45; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.info-box {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.035); font-size: var(--fs-sm);
}
.info-box p { margin: 0; color: var(--muted); }
.info-box strong { color: var(--text); font-weight: 800; }
.info-box-note { margin-top: 6px !important; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-xs); opacity: .85; }

/* Saved screening variants: same inline-form pattern as the metric-variant bar so both
   "save a preset" controls in the app look and behave identically. */
.screening-variant-bar { gap: 7px; flex-wrap: wrap; }
.screening-variant-bar select, .screening-variant-bar input {
  padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: inherit; font-size: var(--fs-sm);
}
.screening-variant-bar input { min-width: 170px; }
.screening-variant-bar select:focus, .screening-variant-bar input:focus { outline: none; border-color: var(--accent-2); }
.screening-variant-bar button[disabled] { opacity: .45; pointer-events: none; }
@media (max-width: 720px) { .screening-variant-bar { width: 100%; } .screening-variant-bar input { min-width: 0; flex: 1; } }

/* Quant Lab · Volkswirtschaft. Die Makro-Linie nutzt denselben Akzent wie die übrigen
   Primärserien; die Vergleichslinie ist bewusst gestrichelt, weil sie auf einer eigenen
   Skala liegt und nicht als gleichwertige Grösse gelesen werden darf. */
.macro-line { fill: none; stroke: var(--accent-2); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.macro-dot { fill: var(--accent-2); opacity: .85; }
.macro-dot:hover { opacity: 1; r: 5; }
.macro-compare-line { fill: none; stroke: #f6c76e; stroke-width: 1.8; stroke-dasharray: 5 4; opacity: .9; }
.macro-axis-compare { fill: #f6c76e; opacity: .8; }
.swatch-macro { background: var(--accent-2); }
.swatch-macro-compare { background: repeating-linear-gradient(90deg, #f6c76e 0 5px, transparent 5px 9px); }
#macroChart { width: 100%; height: auto; }

/* ============================================================================
   MOBILE-VERDICHTUNG (2026-08-02)

   Gemessen auf 390 px Breite: auf der Aktienseite begann die erste Datenzeile
   erst bei 1623 px — knapp zwei volle Handy-Bildschirme Scrollen, bevor
   ueberhaupt eine Aktie sichtbar wurde.

   Die Ursache waren NICHT zu grosse Elemente, sondern erzwungene
   Einspaltigkeit: Felder von 348 px Breite standen einzeln untereinander auf
   einem 390-px-Schirm. Sieben Filter = 573 px, vier Kennzahlenkarten = 452 px.
   Zweispaltig sind das 4 statt 7 und 2 statt 4 Reihen.

   Dieser Block steht bewusst am Ende und ueberschreibt die frueheren
   1fr-Regeln, statt sie verstreut zu aendern.
   ============================================================================ */
@media (max-width: 720px) {

  /* Das "!important" hier ist kein Schludrian: ab Zeile ~2807 steht in
     @media (max-width: 900px) ein "grid-template-columns: 1fr !important" auf
     genau diesen Klassen. Ohne Gleichstand greift keine Regel von hier, egal
     wie weit hinten sie steht. Die Datei loest das an anderen Stellen ebenso
     (z. B. .kv-grid in Zeile 1507). */

  /* --- Filterleiste: zwei Spalten, Suchfeld ueber die volle Breite -------- */
  .universe-controls,
  .dividend-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  /* Das erste Feld ist die Suche — das Haupteingabefeld, es bleibt breit. */
  .universe-controls > .control:first-child,
  .dividend-controls > .control:first-child { grid-column: 1 / -1; }

  /* --- Kennzahlen-Streifen und verwandte Kachelraster --------------------- */
  .screener-insight-strip,
  .asset-research-strip,
  .mini-metrics,
  .drawer-metrics,
  .portfolio-summary-row,
  .correlation-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }

  /* --- Schluessel-Wert-Listen im Detailfenster ---------------------------- */
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }

  /* --- Spaltenauswahl: vier Kaestchen pro Reihe sind zu eng, zwei passen -- */
  .metric-checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-height: 240px; }

  /* --- Innenabstaende: 20 px sind auf dem Handy verschenkte Flaeche ------- */
  .controls-card,
  .table-card,
  .metric-toolbar,
  .metric-panel,
  .screener-insight-strip,
  .glass-panel,
  .page-head { padding: 12px; }

  .controls-card,
  .metric-panel,
  .map-section,
  .screener-insight-strip { margin-bottom: 12px; }

  /* --- Kennzahlenkarten flacher: die grosse Zahl braucht nicht drei Zeilen  */
  .screener-insight { padding: 10px 12px; gap: 2px; }
  .screener-insight strong { font-size: var(--fs-xl); }

  /* --- Karte standardmaessig eingeklappt: sie kostet 149 px, bevor Daten
         kommen, und wird auf dem Handy selten gebraucht. Aufklappbar bleibt
         sie. --------------------------------------------------------------- */
  .map-section > summary { padding: 10px 12px; }

  /* --- Erklaertexte in den Kopfbloecken ausblenden ------------------------
     Jeder Kopfblock traegt drei Zeilen: ein kleines Label darueber
     ("Equity Atlas"), den Titel ("Aktien") und einen Erklaersatz. Label und
     Erklaersatz kosten zusammen rund 60 px pro Block, ohne auf dem Handy
     etwas beizutragen — der Titel sagt bereits, wo man ist.

     BEWUSST eng gefasst: nur .page-head und .metric-toolbar. Die Klasse
     .eyebrow wird ueberall verwendet (auch als Ueberschrift in Ergebnis-
     bloecken); global auszublenden waere ein Eingriff ins Erscheinungsbild,
     nicht eine Platzersparnis. */
  .page-head > div > p.eyebrow,
  .metric-toolbar p.eyebrow { display: none; }
  .page-head > div > p:not(.eyebrow),
  .metric-toolbar p.small-copy { display: none; }

  /* Ohne die Textzeilen darf der Kopfblock auch flacher werden. */
  .page-head { padding: 12px; gap: 8px; }
  .page-head h2 { margin: 0; }

  /* --- Kopfleiste: Logo und Menueknopf teilen sich eine Zeile -------------
     ACHTUNG, hier ist schon einmal jemand reingelaufen: .topbar ist auf dem
     Handy ein GRID mit EINER Spalte, kein Flexbox. "order", "flex" und
     "margin-left: auto" bewirken deshalb nichts Sichtbares — jedes Kind
     bekommt trotzdem seine eigene Zeile (32 + 38 + 92 = 192 px).
     Der Hebel ist die Spaltenzahl.
     Zeile UND Spalte werden explizit gesetzt: die vorhandenen "order"-Werte
     steuern sonst die automatische Platzierung dagegen und schieben den
     Menueknopf unter die Konto-Zeile. */
  .topbar { grid-template-columns: 1fr auto !important; align-items: center; }
  .topbar > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .topbar .nav-toggle { grid-column: 2; grid-row: 1; }
  /* "1 / -1" griff hier nicht (Konto-Zeile blieb 308 statt 352 px breit),
     "span 2" schon. */
  .topbar .header-actions { grid-column: 1 / span 2; grid-row: 2; }

  /* --- Seitenkopf: Titel und Aktionsknopf nebeneinander ------------------
     "Filter zuruecksetzen" belegte eine eigene Zeile ueber die volle Breite,
     obwohl neben dem kurzen Titel ("Aktien") reichlich Platz ist. */
  .page-head { display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .page-head > div { grid-column: 1; }
  .page-head .page-actions { grid-column: 2; justify-self: end; margin: 0; }
  .page-head .page-actions button { white-space: nowrap; }

  /* Der Abstand zwischen Kopfleiste und Seitenanfang war auf 38 px gesetzt —
     auf dem Handy ist das eine halbe Kartenhoehe an Nichts. */
  .page-head { margin-top: 14px !important; }

  /* Zeitraumschalter duerfen umbrechen statt zu scrollen — die eigentliche
     Breitenkorrektur steht bei `.range-buttons button` im 900px-Block. */
  .range-buttons { row-gap: 6px; }

  /* --- Kleine Tabellen duerfen sich der Handybreite anpassen -------------
     `.data-table` traegt site-weit `min-width: 620px`. Fuer die grossen
     Universumstabellen ist das richtig — sie sollen waagrecht scrollen statt
     ihre Spalten zu zerquetschen. Eine dreispaltige Zusammenfassung wie die
     FTD/Market-Cap-Schwellen wird davon aber ohne Not aus dem Bild geschoben:
     man sieht nur noch die erste Spalte und muss seitwaerts wischen, um die
     Zahl zu lesen, um die es geht.

     `.narrow-table` markiert Tabellen, die schmal genug sind, um zu passen. */
  .narrow-table { min-width: 0 !important; }
  .narrow-table th, .narrow-table td { white-space: nowrap; }
}

/* FTD-Labor, Prüfaktie: Chart links, Signalliste rechts daneben — gleich hoch,
   die Liste bekommt ihre eigene Bildlaufleiste statt die Seite zu verlängern.
   Die Höhe steht in einer Variablen, weil ftd-lab.js dem SVG dieselbe Höhe inline
   mitgibt (height:260px, Zeile ~433). Wer eine ändert, muss die andere mitziehen. */
.ftd-lab-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
  align-items: stretch;
}
.ftd-lab-split-charts { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* line-height: 0 gegen den Baseline-Spalt unter dem Inline-SVG — sonst steht unter
   jedem Chart ein 4px-Streifen und die Spaltenhöhen driften auseinander. */
.ftd-lab-split-chart { min-width: 0; line-height: 0; }
.ftd-lab-split-chart svg { display: block; }
.ftd-lab-chart-note { margin: 0 0 8px; line-height: 1.45; }

/* Die Liste füllt die Höhe BEIDER Charts und scrollt für sich. Ohne min-height: 0
   würde ein Grid-Element von seinem Inhalt aufgeblasen statt auf Zeilenhöhe
   begrenzt — die Bildlaufleiste käme dann nie zum Vorschein. */
.ftd-lab-split-table {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
/* .data-table th ist bereits sticky — der Kopf bleibt beim Scrollen stehen. */
.ftd-lab-split-table table { margin: 0; }

/* Nebeneinander lohnt sich erst ab genug Breite; darunter untereinander, und die
   Liste bekommt dann eine feste Höhe, weil es keine Nachbarspalte mehr gibt,
   an der sie sich ausrichten könnte. */
@media (max-width: 1100px) {
  .ftd-lab-split { grid-template-columns: 1fr; }
  .ftd-lab-split-table { height: 420px; }
}

/* --- FTD: Monatsliste auf Charthöhe begrenzen -------------------------------
   Die Liste stand fruher hinter einem Knopf und war kurz. Seit sie oben immer
   sichtbar ist, waechst sie mit der Trefferzahl — bei 2.000 Zeilen scrollt man
   an der ganzen Seite vorbei, statt am Chart daneben. Deshalb feste Hoehe und
   Scrollen INNERHALB der Tabelle. 340px ist die Hoehe der Charts (siehe
   correlation-lab.js: `const H = narrow ? 260 : 340`). */
#ftdLeaderboardBody { display: table-row-group; }
.ftd-liste-scroll {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ftd-liste-scroll table { margin: 0; }
/* Kopfzeile beim Scrollen stehen lassen — sonst weiss man nach zwanzig Zeilen
   nicht mehr, welche Spalte welche ist. */
.ftd-liste-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0d1526;
}
@media (max-width: 720px) { .ftd-liste-scroll { max-height: 260px; } }

/* --- FTD: kompletter Rechner und sortierbare Signalliste ------------------- */
.ftd-outcome-head {
  margin: 20px 0 8px;
  font-size: var(--fs-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
/* Die Signalliste bekommt ihre Maximalhoehe per JS aus der Chartspalte —
   reines CSS reicht nicht, weil ein Grid-Element von seinem max-content
   bemessen wird und `min-height: 0` das nicht deckelt. */
.ftd-lab-split-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ftd-lab-split-table th.sortable:hover { color: var(--accent-2); }
.ftd-lab-split-table th.is-sorted::after { content: " ▾"; opacity: .8; }
.ftd-lab-split-table th.is-sorted[aria-sort="ascending"]::after { content: " ▴"; }

/* --- FTD: aufklappbare Abschnitte ----------------------------------------- */
/* <details>/<summary> statt eigener Umschaltlogik: der Browser bringt Tastatur-
   bedienung, ARIA und den Zustand mit, und ein zugeklappter Abschnitt bleibt
   im DOM — die Ladefunktionen und Sortierungen laufen unveraendert weiter. */
.ftd-fold { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; background: rgba(255,255,255,.02); }
.ftd-fold > summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: var(--fs-md);
}
.ftd-fold > summary::-webkit-details-marker { display: none; }
.ftd-fold > summary::before {
  content: "▸"; display: inline-block; transition: transform .15s ease;
  color: var(--muted); font-size: 12px;
}
.ftd-fold[open] > summary::before { transform: rotate(90deg); }
.ftd-fold > summary:hover { color: var(--accent-2); }
.ftd-fold > summary small { font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.ftd-fold > .ftd-fold-body { padding: 0 18px 18px; }
.ftd-fold > .ftd-fold-body > .glass-panel:first-child,
.ftd-fold > .ftd-fold-body > section:first-child { margin-top: 0; }

/* --- Ladezustand der Startseiten-Kennzahlen ------------------------------- */
/* Ein ruhiges Pulsieren statt hochzählender Zwischenzahlen. Die Kachel behält
   ihre Grösse, damit beim Erscheinen der echten Zahl nichts springt. */
.laedt-platzhalter {
  color: transparent;
  position: relative;
  display: inline-block;
  min-width: 2.6ch;
}
.laedt-platzhalter::after {
  content: "";
  position: absolute; inset: 0.15em 0 0.15em 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.13), rgba(255,255,255,.05));
  background-size: 200% 100%;
  animation: laedt-puls 1.4s ease-in-out infinite;
}
.laedt-hinweis { opacity: .75; }
@keyframes laedt-puls {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .laedt-platzhalter::after { animation: none; }
}

/* Schnellaktionen im Detailfenster, direkt unter dem Titel. */
.drawer-quick-actions { margin: 10px 0 4px; gap: 8px; }
.drawer-quick-actions button { flex: 0 0 auto; width: auto; }

/* --- Live-Beispiel im Hindsight Lab --------------------------------------- */
/* Steht bewusst ganz oben im Setup: der erste Blick soll auf "ausprobieren"
   fallen, nicht auf ein leeres Formular mit acht Feldern. */
.beispiel-knopf { width: 100%; margin-bottom: 6px; }
.beispiel-hinweis { margin: 0 0 14px; }

/* --- Teilbare Analyse-Links ------------------------------------------------ */
.teilen-bestaetigung {
  display: none;
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  width: min(440px, calc(100vw - 40px));
  padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface-2, #161b22);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.teilen-bestaetigung.offen { display: grid; gap: 8px; }
.teilen-bestaetigung input {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 8px 10px;
}
.teilen-bestaetigung button { justify-self: start; }
/* Der Hinweis nach dem Öffnen eines geteilten Links steht direkt unter dem
   Rechnen-Knopf — dort schaut jemand hin, der gerade nicht weiss, was zu tun ist. */
.geteilter-link-hinweis { margin: 8px 0 0; }
.aus-geteiltem-link { box-shadow: 0 0 0 2px var(--accent-2); }

/* --- ETF und Rohstoffe: Reihenfolge auf dem Handy ---------------------------
   Gemessen live am 2026-08-08: bis zur ersten Datenzeile brauchte es auf der
   ETF-Seite 1.362 px und bei Rohstoffen 1.109 px — auf der Aktienseite nur 618.

   Ursache war nicht die Menge, sondern die Reihenfolge: beide Seiten stellen
   einen Forschungsstreifen (270–283 px) und die Weltkarte VOR die Steuerung,
   die Aktienseite stellt die Steuerung nach vorn. Wer auf dem Handy eine ETF
   sucht, scrollt also an 434 px vorbei, bevor er filtern kann.

   `order` braucht einen Flex- oder Grid-Elternteil; die Views sind `display:
   block`. Deshalb hier auf eine Spalte umstellen — die Kinder behalten dabei
   ihre volle Breite, nur die Reihenfolge aendert sich. Auf dem Desktop bleibt
   alles unberuehrt. */
@media (max-width: 720px) {
  /* Nur die aktive View darf Flex werden. Ohne `.active` überschreibt diese
     spezifischere ID-Regel `.view { display:none }` und hängt ETF sowie
     Rohstoffe unter JEDE mobile Seite — selbst unter Hindsight/Quant. */
  #etfsView.active, #commoditiesView.active {
    display: flex;
    flex-direction: column;
  }
  #etfsView > .page-head, #commoditiesView > .page-head { order: 1; }
  #etfsView > .controls-card, #commoditiesView > .controls-card { order: 2; }
  #etfsView > .metric-toolbar, #commoditiesView > .metric-toolbar { order: 3; }
  #etfsView > .metric-panel, #commoditiesView > .metric-panel { order: 4; }
  #etfsView > .table-card, #commoditiesView > .table-card { order: 5; }
  /* Forschungsstreifen und Karte wandern hinter die Tabelle — sie sind zum
     Stoebern da, nicht zum Suchen. */
  #etfResearchStrip, #commodityResearchStrip { order: 6; }
  #etfsView > .map-section, #commoditiesView > .map-section { order: 7; }
}

/* --- Dividenden-Rechner: aufklappbare Zeile mit den Einzelausschüttungen ---- */
/* Die Zeile nennt nur "12 Ausschüttungen · 340 USD". Welche Zahlung wann kam, macht die
   Summe erst prüfbar — bei einer Geldzahl ist das die Erwartung. */
.data-table tr.aufklappbar { cursor: pointer; }
.data-table tr.aufklappbar:hover { background: rgba(109,229,209,.06); }
.aufklapp-pfeil { color: var(--muted); font-size: .8em; display: inline-block; width: 1em; }
.data-table tr.aufklapp-zeile > td { background: rgba(4,11,23,.45); padding: 0; }
.aufklapp-inhalt { padding: 14px 18px 18px; border-left: 2px solid var(--accent-2); }
.aufklapp-inhalt > p { margin: 0 0 10px; }
/* Die innere Tabelle darf den Klebe-Kopf der äusseren nicht erben, sonst schwebt ihre
   Kopfzeile beim Scrollen über den Zeilen der Haupttabelle. */
.aufklapp-inhalt .data-table th { position: static; }

/* Übersichtsvideo im Hero: wie ein Geisterknopf, aber mit Abspielzeichen und
   etwas Grün, damit es sich von "Hindsight Lab öffnen" unterscheidet — es führt
   nicht in die Seite hinein, sondern erklärt sie. */
.intro-button { display: inline-flex; align-items: center; gap: 9px; }
.intro-button .tutorial-chip-play { color: var(--positive); font-size: 10px; }

/* ============================================================================
   MOBILE COMPACT PRO (2026-08-15)

   Die mobile Oberflaeche bleibt funktional identisch, nutzt den knappen Platz
   aber wie eine eigenstaendige App: ein zweizeiliger Header, kompakte Controls,
   horizontal wischbare KPI-Streifen und dichte Rechner-Raster. Desktop bleibt
   vollstaendig ausserhalb dieses Blocks.
   ============================================================================ */
@media (max-width: 720px) {
  :root {
    --radius-xl: 17px;
    --radius-lg: 15px;
    --radius-md: 12px;
    --shadow: 0 12px 30px rgba(0, 0, 0, .28);
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-md: 12px;
    --fs-base: 13px;
    --fs-lg: 14px;
    --fs-xl: 16px;
    --fs-2xl: 18px;
    --fs-3xl: 20px;
    --fs-4xl: 22px;
    --fs-5xl: 24px;
    --fs-6xl: 28px;
    --fs-7xl: 32px;
    --fs-hero: 36px;
  }

  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(80,145,255,.11), transparent 28%),
      radial-gradient(circle at 90% 8%, rgba(109,229,209,.07), transparent 30%),
      #030711;
  }
  .noise { opacity: .1; background-size: 42px 42px; }
  .shell { width: calc(100% - 12px); padding: 6px 0 58px; }

  /* Ein App-Header mit nur zwei sichtbaren Zeilen. display:contents laesst die
     Aktionsknoepfe am selben Grid teilnehmen, obwohl sie im DOM gruppiert sind. */
  .topbar {
    position: sticky;
    top: 4px;
    display: grid;
    grid-template-columns: minmax(118px, 1fr) auto auto auto auto !important;
    grid-template-rows: 32px 36px;
    gap: 4px;
    row-gap: 5px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(4, 9, 20, .9);
    backdrop-filter: blur(24px) saturate(145%);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
  }
  .topbar > .brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    gap: 7px;
    padding: 1px 3px;
  }
  .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
  .brand strong { font-size: 12px; line-height: 1.1; white-space: nowrap; }
  .brand small { display: none; }

  .topbar .header-actions { display: contents !important; }
  .topbar #tierBox { grid-column: 2; grid-row: 1; }
  .topbar .lang-toggle {
    grid-column: 3;
    grid-row: 1;
    gap: 1px !important;
    padding: 2px !important;
  }
  .topbar .lang-toggle button {
    min-width: 25px;
    min-height: 26px;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }
  .topbar .account-menu { grid-column: 4; grid-row: 1; width: 32px; height: 32px; }
  .topbar .account-avatar { width: 32px; height: 32px; }
  .topbar .nav-toggle {
    grid-column: 5;
    grid-row: 1;
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .topbar .nav-toggle span { width: 15px; }
  .topbar .global-search-wrap { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .topbar .global-search {
    min-height: 36px;
    height: 36px;
    padding: 7px 10px;
    border-radius: 11px;
    font-size: 12px;
    background: rgba(255,255,255,.055);
  }
  .tier-badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    font-size: 0;
  }
  .tier-badge::after { font-size: 9px; font-weight: 850; letter-spacing: .01em; }
  .tier-badge.tier-pro::after { content: "Pro"; }
  .tier-badge.tier-basic::after,
  .tier-badge.tier-anonymous::after { content: "Basic"; }

  /* Das Menue schwebt unter dem Header, statt beim Oeffnen die Seite nach unten
     zu druecken. Dadurch bleibt der aktuelle Kontext sichtbar. */
  .topbar .nav {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    background: rgba(5, 11, 24, .98);
    box-shadow: 0 18px 44px rgba(0,0,0,.48);
  }
  .topbar .nav-link { min-height: 36px; padding: 8px 10px; font-size: 12px; }
  .nav-dropdown-panel { position: static; min-width: 0; margin: 3px 0; box-shadow: none; }
  .nav-dropdown-item { min-height: 34px; padding: 8px 10px; font-size: 11px; }

  main { min-width: 0; }
  .view.active { animation-duration: .18s; }
  .page-head {
    min-height: 48px;
    margin: 9px 0 9px !important;
    padding: 9px 10px;
    gap: 6px;
    border-radius: 15px;
  }
  .page-head h2 { font-size: 17px; line-height: 1.15; }
  .page-title-row { gap: 7px; flex-wrap: wrap; }
  .tutorial-chip { min-height: 27px; padding: 4px 8px; font-size: 9px; }
  .page-head .page-actions button { min-height: 34px; width: auto; padding: 7px 10px; font-size: 11px; }

  .hero-grid { margin: 9px 0; gap: 9px; }
  .hero-card.large,
  .dashboard-card { border-radius: 17px; }
  .hero-card.large { padding: 14px; }
  .hero-card.large .eyebrow { margin-bottom: 3px; font-size: 9px; }
  .hero-card.large h1 { margin: 2px 0 5px; font-size: 25px; line-height: 1.05; }
  .hero-card.large .hero-tagline { margin-bottom: 5px; font-size: 14px; }
  .hero-card.large .hero-copy { margin-bottom: 9px; font-size: 11px; line-height: 1.4; }
  .hero-card.large .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .hero-card.large .button-row > * { width: auto; min-height: 36px; padding: 7px 8px; font-size: 10px; }
  .hero-card.large .intro-button { grid-column: 1 / -1; justify-content: center; }
  .dashboard-card { padding: 9px; gap: 7px; }
  .mini-metrics { gap: 6px !important; }
  .metric-card { min-height: 58px; padding: 9px; border-radius: 13px; }
  .metric-card span { font-size: 9px; letter-spacing: .07em; }
  .metric-card strong { font-size: 17px; }
  .metric-card.main-metric strong { font-size: 22px; }
  .metric-card small { font-size: 10px; }

  /* Feature-Karten werden zu kompakten App-Kacheln. Die ausfuehrliche Erklaerung
     bleibt auf Desktop; mobil sind Titel und Symbol die schnellere Navigation. */
  .feature-grid { gap: 6px; margin-top: 6px; }
  .feature-card {
    min-height: 54px;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 9px;
    border-radius: 14px;
  }
  .feature-card span { width: 30px; height: 30px; margin: 0; border-radius: 9px; font-size: 12px; }
  .feature-card h3 { margin: 0; font-size: 11px; line-height: 1.2; }
  .feature-card p { display: none; }

  /* Einheitliche, dichte Karten und Formulare. Touch-Ziele bleiben mindestens
     40 px hoch; nur unproduktive Innenabstaende und grosse Beschriftungen fallen weg. */
  .hero-card.large,
  .controls-card,
  .table-card,
  .glass-panel,
  .metric-panel,
  .map-section,
  .correlation-workbench,
  .correlation-status-card { box-shadow: var(--shadow); }
  .controls-card,
  .table-card,
  .glass-panel,
  .metric-panel,
  .map-section,
  .correlation-workbench { padding: 10px; border-radius: 16px; }
  .controls-card,
  .metric-panel,
  .map-section,
  .screener-insight-strip,
  .metric-toolbar,
  .glass-panel,
  .correlation-workbench { margin-bottom: 9px; }
  .universe-controls,
  .dividend-controls { gap: 8px !important; }
  .control label,
  .field-label {
    margin-bottom: 4px;
    font-size: 9px;
    letter-spacing: .07em;
  }
  input:not([type="checkbox"]),
  select,
  textarea,
  select[name] {
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 12px;
  }
  .primary-button,
  .ghost-button,
  .icon-button { min-height: 40px; padding: 8px 10px; border-radius: 11px; font-size: 11px; }
  .icon-button { width: 40px; padding: 0; }
  .small-copy,
  .api-note { font-size: 11px; line-height: 1.4; }
  .api-note { margin-top: 9px; padding: 9px; border-radius: 11px; }

  /* KPI-Karten bleiben einzeilig und wischbar, statt zwei hohe Reihen zu bilden. */
  .screener-insight-strip,
  .asset-research-strip,
  .correlation-score-grid,
  .portfolio-summary-row {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 1px 3px;
  }
  .screener-insight-strip::-webkit-scrollbar,
  .asset-research-strip::-webkit-scrollbar,
  .correlation-score-grid::-webkit-scrollbar,
  .portfolio-summary-row::-webkit-scrollbar { display: none; }
  .screener-insight,
  .asset-research-card,
  .correlation-score-card,
  .pf-summary-card {
    flex: 0 0 142px;
    min-width: 142px;
    min-height: 66px;
    scroll-snap-align: start;
    padding: 8px 9px;
    border-radius: 13px;
    gap: 2px;
  }
  .screener-insight strong,
  .asset-research-card strong,
  .correlation-score-card strong,
  .pf-summary-card strong { font-size: 16px; }
  .screener-insight small,
  .asset-research-card small,
  .correlation-score-card small { font-size: 9px; line-height: 1.25; }

  .screener-map-section summary {
    min-height: 40px;
    padding: 8px 10px;
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 14px;
  }
  .screener-map-section summary small { display: none; }
  .screener-map-section summary b { font-size: 11px; }
  .map-summary-action { font-size: 10px; }
  .screening-panel { padding: 10px; gap: 10px; }

  .metric-toolbar {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 14px;
  }
  .metric-toolbar h3 { margin: 0; font-size: 13px; }
  .metric-toolbar > .primary-button,
  .metric-toolbar > .ghost-button { width: auto; min-height: 34px; padding: 7px 9px; font-size: 10px; }
  .metric-checkbox-grid { gap: 6px !important; max-height: 210px; }
  .metric-check { min-height: 38px; padding: 7px; border-radius: 10px; font-size: 10px; }

  .table-card { margin-bottom: 9px; }
  .table-meta { gap: 6px; margin-bottom: 8px; }
  .table-meta span { font-size: 9px; }
  .table-scroll,
  .mini-table-wrap,
  .correlation-matrix-scroll { border-radius: 12px; }
  .data-table th,
  .data-table td { padding: 8px 9px; font-size: 10px; }
  .data-table th { font-size: 9px; letter-spacing: .06em; }

  /* Quant Lab: A und B bleiben untereinander, innerhalb jeder Asset-Karte
     nutzen die Felder jedoch zwei Spalten. Das spart fast einen Bildschirm. */
  .correlation-page-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .correlation-page-head > div:first-child { grid-column: 1; }
  .correlation-page-head > div:first-child > p:last-child { display: none; }
  .correlation-page-head > .correlation-head-badge {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 142px;
    padding: 6px 8px;
    border-radius: 10px;
  }
  .correlation-head-badge span,
  .correlation-head-badge small { display: none; }
  .correlation-head-badge strong { font-size: 9px; line-height: 1.25; }
  .correlation-workbench { padding: 9px; }
  .correlation-mode-switch { width: 100%; margin-bottom: 9px; padding: 3px; gap: 3px; }
  .correlation-mode-switch button { min-height: 34px; padding: 7px 8px; font-size: 11px; }
  .correlation-pair-builder {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .correlation-pair-builder > .correlation-asset-picker { grid-column: 1 / -1; }
  .correlation-asset-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
    padding: 8px;
    border-radius: 12px;
  }
  .correlation-asset-picker .control:last-of-type { grid-column: auto; }
  .correlation-similarity-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .correlation-similarity-row > * { width: auto; min-height: 34px; padding: 6px; font-size: 9px; }
  .correlation-pair-builder > .correlation-swap {
    grid-column: 1 / -1;
    justify-self: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: -2px 0;
    transform: rotate(90deg);
  }
  .correlation-pair-builder > .control { grid-column: 1 !important; }
  .correlation-pair-builder > .correlation-run-button { grid-column: 2 !important; width: 100%; min-height: 40px; white-space: normal; }
  .correlation-status-card { min-height: 54px; padding: 9px 10px; gap: 8px; }
  .correlation-status-card small { font-size: 9px; line-height: 1.3; }
  .correlation-methodology { padding: 10px; }
  .correlation-methodology > div:first-child > p:not(.eyebrow) { display: none; }
  .methodology-grid { gap: 6px; }
  .methodology-grid article { padding: 8px; border-radius: 11px; }

  /* Hindsight: Zwei Datumsfelder und Aktionsknoepfe duerfen nebeneinander
     stehen; der Taschenrechner bleibt ein 4x4-Keypad statt 16 Einzelzeilen. */
  .hindsight-lab-grid { gap: 9px; }
  .hindsight-lab-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }
  .hindsight-lab-grid > * { min-width: 0; }
  .hindsight-setup-card .two-cols,
  .hindsight-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px; }
  .beispiel-knopf { min-height: 38px; margin-bottom: 4px; }
  .beispiel-hinweis { margin-bottom: 9px; font-size: 10px; }
  .strategy-template-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }
  .strategy-template-row > * { width: auto; min-width: 0; }
  .metric-chip-grid { gap: 5px; margin-top: 9px; }
  .metric-chip { padding: 6px 8px; font-size: 10px; }
  .hindsight-extra-metrics { margin-top: 9px; padding: 8px 10px; border-radius: 11px; }
  .theory-dropzone { margin: 8px 0; padding: 10px; border-radius: 12px; font-size: 10px; }
  .standard-formula-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 8px 0 10px;
    scrollbar-width: none;
  }
  .standard-formula-grid::-webkit-scrollbar { display: none; }
  .standard-formula-grid button { flex: 0 0 150px; padding: 8px; border-radius: 11px; }
  .formula-textarea { min-height: 76px; }
  .calculator-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px; margin: 8px 0; }
  .calculator-grid button { min-height: 36px; padding: 6px 4px; border-radius: 9px; font-size: 11px; }
  .formula-preview { margin-bottom: 8px; padding: 8px 9px; font-size: 10px; }

  /* Einfache Charts skalieren auf die App-Breite. Nur der Professional Chart
     behaelt seine bewusst breite Zeichenflaeche mit horizontalem Pan. */
  .chart-card > svg,
  .correlation-chart-card svg,
  #priceChart,
  #hindsightPortfolioChart { min-width: 0 !important; }
  .correlation-chart-card svg { min-height: 210px; }
  .chart-card { min-height: 220px !important; padding: 7px; border-radius: 12px; }
  #priceChart { height: 205px !important; }
  .professional-chart-panel { max-height: 190px; }

  .drawer-panel { height: min(95dvh, 940px) !important; padding: 11px !important; border-radius: 18px 18px 0 0 !important; }
  .close-button { right: 10px; top: 10px; }
  #detailTitle { padding-right: 38px; font-size: 27px !important; }
  .drawer-metrics,
  .kv-grid { gap: 6px !important; margin: 10px 0; }
  .drawer-metric,
  .kv { padding: 8px; border-radius: 11px; }
  .detail-section { margin-bottom: 7px; padding: 9px; border-radius: 12px; }
  .history-header { gap: 6px; }
  .range-buttons { gap: 4px; }
  .range-buttons button { min-height: 32px; padding: 6px 8px; font-size: 10px; }

  .feedback-fab { right: 9px; bottom: 9px; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
  .site-footer { margin-top: 16px; padding: 14px 2px; gap: 10px; font-size: 10px; }
  .site-footer nav { gap: 8px; }
}

@media (max-width: 360px) {
  .topbar {
    grid-template-columns: minmax(105px, 1fr) auto auto auto auto !important;
    gap: 3px;
    padding: 5px;
  }
  .brand strong { font-size: 11px; }
  .tier-badge { padding-inline: 5px; }
  .topbar .lang-toggle button { min-width: 23px; padding-inline: 4px !important; }
  .topbar .account-menu,
  .topbar .account-avatar,
  .topbar .nav-toggle { width: 30px; height: 30px; }
  .universe-controls,
  .dividend-controls { gap: 6px !important; }
  .feature-card { grid-template-columns: 26px minmax(0,1fr); gap: 6px; padding: 7px; }
  .feature-card span { width: 26px; height: 26px; }
}

/* ── Einstiege in die Labs: Markenfarbe statt Ghost ──────────────────────────
   Die zwei Knöpfe im Detailfenster ("Im Quant Lab vergleichen", "Im Hindsight
   testen") waren als .ghost-button praktisch unsichtbar. Sie sind aber der Weg
   von einer einzelnen Aktie in die Rechenwerkzeuge — der Übergang, den wir dem
   Nutzer zeigen wollen.

   Bewusst als MODIFIER neben .ghost-button, nicht als Ersatz: Geometrie,
   Innenabstand und die Regel .drawer-quick-actions button { width:auto }
   bleiben damit erhalten. Ein reiner Ersatz hätte sie auf volle Breite
   gezogen — .button-row > * { width:100% } greift sonst durch. */
.lab-link-button {
  color: #06101c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(109, 229, 209, .20);
}
.lab-link-button:hover {
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 14px 34px rgba(109, 229, 209, .30);
}
.drawer-quick-actions { gap: 10px; margin: 14px 0 6px; }

/* ── Watchlist: "Heute wichtig" ──────────────────────────────────────────────
   Ein schmales Band über dem Aufstellungs-Cockpit. Jede Karte erscheint nur,
   wenn sie Inhalt hat — die RPC liefert leere Abschnitte gar nicht erst mit. */
.heute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-top: 10px;
}
.heute-karte {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
  padding: 13px 15px;
  min-width: 0;
}
.heute-karte h4 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 9px;
}
.heute-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--fs-sm);
  min-width: 0;
}
.heute-zeile + .heute-zeile { border-top: 1px solid rgba(255, 255, 255, .05); }
.heute-zeile .sym { font-weight: 900; flex: 0 0 auto; }
/* Der Name darf schrumpfen, der Wert nie — sonst bricht die Zahl um. */
.heute-zeile .nam { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.heute-zeile .wert { font-weight: 900; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ============================================================================
   MOBILE COMPACT PRO · NAVIGATION UND SCREENER (2026-08-16)

   Diese Regeln liegen absichtlich am Dateiende. Spaeter geladene Komponenten-
   Styles hatten Teile der ersten Mobile-Verdichtung wieder ueberschrieben.
   Desktop bleibt ausserhalb des Breakpoints unveraendert.
   ============================================================================ */
@media (max-width: 720px) {
  /* Navigation: Der Aktien-Eintrag und sein Untermenue bilden mobil eine echte
     Zeile. Zuvor war der Wrapper nur so breit wie sein Text; dadurch wurde das
     Untermenue auf wenige Pixel zusammengedrueckt. */
  .topbar .nav {
    align-items: stretch !important;
  }
  .topbar .nav > .nav-link,
  .topbar .nav > .nav-item-dropdown {
    width: 100%;
    min-width: 0;
  }
  .topbar .nav-link {
    justify-content: flex-start;
    text-align: left;
  }
  .topbar .nav-item-dropdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
  }
  .topbar .nav-item-dropdown > .nav-link {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .topbar .nav-caret-toggle {
    grid-column: 2;
    grid-row: 1;
    width: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border-radius: 9px;
  }
  .topbar .nav-dropdown-panel {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    margin: 2px 0 4px 14px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
  }
  .topbar .nav-dropdown-item {
    width: 100% !important;
    min-height: 32px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 8px;
  }

  /* Aktien-Screener: Titel und Trefferzahl teilen sich eine Zeile. Die vier
     Layout-Aktionen stehen in zwei kompakten Reihen und koennen nie ueber den
     Viewport hinauswachsen. */
  .screening-panel {
    padding: 8px;
    gap: 9px;
  }
  .screening-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
  }
  .screening-head > div:first-child {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }
  .screening-head > div:first-child .eyebrow,
  .screening-head > div:first-child h3 {
    margin: 0;
  }
  .screening-head > div:first-child h3 {
    font-size: 12px;
  }
  .screening-head-result {
    display: contents;
  }
  .screening-result-figure {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 4px;
    white-space: nowrap;
  }
  .screening-result-figure strong {
    font-size: 16px;
  }
  .screening-result-figure span {
    font-size: 8px;
  }
  .screening-variant-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 5px;
  }
  .screening-variant-bar > select,
  .screening-variant-bar > input {
    width: 100%;
    min-width: 0 !important;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .screening-variant-bar > button {
    width: auto !important;
    min-width: 68px;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 9px;
    white-space: nowrap;
  }
  .screening-head #screeningClearAll {
    grid-column: 1 / -1;
    width: auto !important;
    justify-self: end;
  }

  .screening-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .screening-field {
    gap: 4px;
  }
  .screening-field-wide {
    grid-column: 1 / -1;
  }
  .screening-field > label {
    font-size: 8px;
    letter-spacing: .05em;
    line-height: 1.2;
  }
  .screening-field > input,
  .screening-field > select,
  .screening-field .segmented {
    width: 100%;
    min-width: 0;
    min-height: 34px;
  }
  .screening-field .segmented button {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 28px;
    padding: 5px;
    font-size: 9px;
  }
  .screening-hint {
    display: none;
  }
  .screening-cap-tiers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 5px;
  }
  .screening-cap-tiers > button {
    width: auto !important;
    min-width: 0;
    min-height: 34px;
    padding: 5px 3px;
    font-size: 8px;
    white-space: normal;
    line-height: 1.15;
  }
  .screening-custom-filters {
    gap: 7px;
    padding-top: 8px;
  }
  .screening-custom-head {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .screening-custom-head > label {
    min-width: 0;
    font-size: 8px;
  }
  .screening-custom-head > button {
    width: auto !important;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 8px;
    white-space: nowrap;
  }
  .screening-custom-rows {
    gap: 5px;
  }
  .screening-custom-row {
    grid-template-columns: minmax(0, 1.35fr) 58px minmax(0, .8fr) 32px;
    gap: 4px;
  }
  .screening-custom-row select,
  .screening-custom-row input {
    min-width: 0;
    min-height: 32px;
    padding: 5px 6px;
    font-size: 9px;
  }
  .screening-custom-row button {
    width: 32px !important;
    min-height: 32px;
    padding: 0;
  }
  #screeningSummary {
    font-size: 9px;
    line-height: 1.3;
  }

  /* Kennzahlen-Auswahl: Basic/All nebeneinander; gespeicherte Ansichten im
     selben zweizeiligen Raster wie der Screener. Gilt ebenso fuer ETF und
     Rohstoffe, da alle drei Seiten dieselbe Komponente verwenden. */
  .metric-panel {
    padding: 9px;
  }
  .metric-panel .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .metric-panel .section-heading > div:first-child {
    min-width: 0;
  }
  .metric-panel .section-heading h3 {
    margin: 0;
    font-size: 13px;
  }
  .metric-panel .section-heading .small-copy {
    display: none;
  }
  .metric-panel .section-heading > .button-row {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 4px;
  }
  .metric-panel .section-heading > .button-row > button {
    width: auto !important;
    min-width: 48px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 9px;
  }
  .metric-panel > .inline-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 5px;
    margin-bottom: 8px;
  }
  .metric-panel > .inline-form > select,
  .metric-panel > .inline-form > input {
    width: 100%;
    min-width: 0 !important;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .metric-panel > .inline-form > button {
    width: auto !important;
    min-width: 68px;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 9px;
    white-space: nowrap;
  }
  .metric-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .metric-check {
    min-width: 0;
    min-height: 34px;
    padding: 6px;
  }

  /* Tabellenkopf auf allen Universumsseiten: Anzahl links, Export rechts.
     Der erklaerende Satz ist mobil redundant und kostete eine ganze Zeile. */
  .table-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 8px;
  }
  .table-meta > strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  .table-meta > span {
    display: none;
  }
  .table-meta > button {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 9px;
    white-space: nowrap;
  }

  /* Watchlist-Namen teilen sich eine Zeile mit Speichern. Die globale
     Mobile-Regel fuer volle Buttonbreite hatte das Eingabefeld zuvor auf
     weniger als 20 px zusammengeschoben. */
  .watchlist-admin .inline-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 6px;
  }
  .watchlist-admin .inline-form > input {
    width: 100%;
    min-width: 0;
  }
  .watchlist-admin .inline-form > button {
    width: auto !important;
    min-width: 78px;
    padding-inline: 9px;
    white-space: nowrap;
  }

  /* KPI-Karten duerfen innerhalb ihres horizontalen Streifens nicht selbst
     nochmals ueberlaufen. */
  .asset-research-card,
  .screener-insight,
  .correlation-score-card,
  .pf-summary-card {
    overflow: hidden;
  }
}