:root {
  /* NRGX Labs — Light (Apple-esque) */
  --bg: #f5f5f7;
  --bg2: #ffffff;
  --logoTileBg: rgba(18, 18, 22, 0.92); /* Dark charcoal backdrop for transparent/light logos */

  /* Glass surfaces */
  --surface: rgba(255, 255, 255, 0.70);
  --surfaceElev: rgba(255, 255, 255, 0.86);
  --surfaceSolid: #ffffff;

  /* Neutrals */
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.14);
  --line: rgba(15, 23, 42, 0.08);
  --text: #0b0b0f;
  --muted: rgba(11, 11, 15, 0.62);
  --muted2: rgba(11, 11, 15, 0.48);

  /* Accents */
  --blue: rgba(0, 122, 255, 0.95);
  --green: rgba(52, 199, 89, 0.95);
  --amber: rgba(255, 159, 10, 0.95);
  --red: rgba(255, 59, 48, 0.95);

  /* Elevation */
  --shadow: 0 10px 30px rgba(15, 20, 30, 0.08);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.85) inset, 0 10px 30px rgba(15, 20, 30, 0.08);

  /* Focus + hover */
  --hover: rgba(2, 6, 23, 0.03);
  --focus-ring: rgba(0, 122, 255, 0.22);

  /* Radii */
  --radius-card: 18px;
  --radius-control: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1000px 700px at 18% -10%, rgba(0, 122, 255, 0.12), transparent 56%),
    radial-gradient(900px 600px at 85% 10%, rgba(52, 199, 89, 0.08), transparent 58%),
    var(--bg);
  color: var(--text);
}

/* Live engine pages opt out of the radial blue/green gradient and sit on
   the soft --bg surface directly — same calm look the page already has
   during the .ravenLoadingOverlay blur, but permanent. The gradient was
   distracting against the white header/control cards and the data
   visualizations. Applied via class so non-active pages keep the gradient.
   In use on: index.html (E1), spx.html (E2), post-event.html (E7),
   compare.html (E10), market-intelligence.html (MI). */
body.cleanBg {
  background: var(--bg);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 20px 64px;
}

.appHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  position: relative;
  z-index: 16000; /* Above loading overlay */
  /* Solid surface so the white-background NRGX wordmark blends seamlessly
     into the header strip — no more "logo sticker" effect on the gradient
     page background. Using --surfaceSolid (#ffffff) rather than the glass
     --surface used by .controlBar so the logo's near-white matte (#fefefe)
     reads as one continuous chrome bar. */
  background: var(--surfaceSolid);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px 16px;
  box-shadow: var(--shadow);
}

.appBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brandLogo {
  width: 120px;
  height: 56px;
  object-fit: contain;
  /* Container chrome removed — the NRGX wordmark has its own clean white
     background, so an extra rounded panel + border just frames empty space.
     Sized to the wordmark's 2.11:1 aspect ratio at the existing header height. */
}

.appHeaderText {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.appTitle {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.appSubtitle {
  /* Now the primary line of text in the header (the .appTitle div was
     removed because the NRGX wordmark already conveys the brand). Bumped
     from a quiet 13px muted subtitle to a readable 18px page label. */
  margin-top: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}

.controlBar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px 12px 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  position: relative;
  z-index: 16000; /* Above loading overlay */
}

.controlBarForm {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 56px;
}

/* Engine 2 (SPX) control bar: fit controls without horizontal overflow */
.controlBarForm.controlBarForm--engine2 {
  /* Match Engine 1 look/spacing */
  display: flex;
  gap: 12px;
  align-items: center;
  height: 56px;
}

.controlBarForm.controlBarForm--engine2 #runBtn {
  min-width: 140px;
}

/* Engine 2: static "input-like" value box (for Underlying = SPX) */

.tickerInputRow .controlStatic {
  flex: 1;
  min-width: 0;
}

.controlGroup {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.controlGroup--underlying {
  min-width: 176px;
}

.toggleRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.toggleText {
  color: var(--muted);
  font-size: 12px;
}

.mcOverrideRow {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
  align-items: center;
}

.controlLabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.1px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.controlSpacer {
  flex: 1;
  min-width: 10px;
}

.controlInput, .controlSelect {
  height: 36px;
  background: var(--surfaceElev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset;
}

.controlInput::placeholder {
  color: rgba(11, 11, 15, 0.35);
}

.controlInput:focus, .controlSelect:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.85) inset;
}

.primaryButton {
  height: 36px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70));
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-glass);
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}

.primaryButton:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.76));
  border-color: rgba(15, 23, 42, 0.18);
}

.primaryButton:active {
  transform: translateY(0.5px);
}

.primaryButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-glass);
}

.primaryButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btnSpinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(11,11,15,0.22);
  border-top-color: rgba(11,11,15,0.65);
  display: none;
}

.isLoading .btnSpinner { display: inline-block; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Global API loading bar (subtle, glass-friendly)
   ============================================================ */

#ravenTopLoader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 20000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  overflow: hidden;
}

/* Animated "indeterminate" bar */
#ravenTopLoader::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 122, 255, 0.00),
    rgba(0, 122, 255, 0.60),
    rgba(52, 199, 89, 0.42),
    rgba(0, 122, 255, 0.00)
  );
  animation: ravenTopLoaderMove 1.05s ease-in-out infinite;
}

@keyframes ravenTopLoaderMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(360%); }
}

.isApiLoading #ravenTopLoader {
  opacity: 1;
  transform: translateY(0);
}

/* Small, consistent feedback while loading */
.isApiLoading .primaryButton,
.isApiLoading .linkButton,
.isApiLoading .segButton,
.isApiLoading .chipToggle {
  cursor: progress;
}

/* ============================================================
   Raven Loading Overlay (Full-screen with spinning logo)
   ============================================================ */

.ravenLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ravenLoadingOverlay.isVisible {
  opacity: 1;
  visibility: visible;
}

/* Spinning logo - slow Y-axis rotation (horizontal spin).
   Now uses the NRGX X-mark; grayscale filter dropped so the gold/navy
   X colors come through subtly. Opacity bumped slightly to compensate
   for the now-colored mark sitting on a near-white overlay. */
.ravenLoadingLogo {
  width: 140px;
  height: 140px;
  object-fit: contain;
  opacity: 0.18;
  animation: ravenSpinY 3.5s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes ravenSpinY {
  0% { transform: rotateY(0deg) scale(1); }
  25% { transform: rotateY(90deg) scale(0.95); }
  50% { transform: rotateY(180deg) scale(1); }
  75% { transform: rotateY(270deg) scale(0.95); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* Progress bar container */
.ravenLoadingProgress {
  width: 220px;
  height: 4px;
  margin-top: 28px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Progress bar fill - determinate with smooth animation */
.ravenLoadingProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #007AFF, #34C759);
  border-radius: 4px;
  transition: width 0.15s ease-out;
}

/* Status text */
.ravenLoadingStatus {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: -0.2px;
}

/* Temporary click-guard for anchors (used by ui_kit.js) */
a.ravenTempDisabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: progress;
}

.status {
  margin-top: 8px;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.status.isError { color: var(--red); }
.status.isOk { color: rgba(11,11,15,0.70); }
.status.isRunning { color: rgba(11,11,15,0.62); }

.results.hidden { display: none; }
.hidden { display: none !important; }

.surface {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  /* Tooltips: each surface is a stacking context (due to backdrop-filter). Make it
     positionable so we can raise the active surface above later siblings. */
  position: relative;
  z-index: 0;
}

/* When a tooltip is open/hovered/focused inside a surface, raise that entire surface
   above following sections so the tooltip isn't hidden behind the next card/table. */
.surface:has(.tipWrap.isOpen),
.surface:has(.tipWrap:hover),
.surface:has(.tipWrap:focus-within) {
  z-index: 1000;
}

.sectionHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sectionTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.sectionMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.muted { color: var(--muted); }

.info {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.metricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metricGrid.metricGrid--regime {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

.metricGrid.metricGrid--eventRisk {
  /* Give "Top Drivers" a wider lane so we don't truncate */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.metricGrid.metricGrid--snapshot {
  /* Avoid awkward empty “holes” when we have 5–6 cards */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.metricGrid.metricGrid--snapshot #recCard {
  grid-column: 1 / -1;
}

/* Snapshot should visually match TA “instrument cards” (more glass + depth). */
.metricGrid.metricGrid--snapshot .metricCard {
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Engine 2 Conditions: keep scan cards compact, push verbosity into "This Week Details" */
.e2Conditions .taCardInterp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.e2Conditions details .taCardInterp {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

.e2Conditions .macroEventLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Engine 1: Summary + Regime overlay now use TA panel structure */
.e1Panel .taHeaderTitle .tipWrap { margin-left: 8px; }
.e1Panel .taCardTitle { display: inline-flex; align-items: center; gap: 8px; }
.e1Panel .tipBtn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-weight: 900;
  color: var(--ta-muted);
  cursor: pointer;
}

/* Engine 1: GO / NO-GO pill + explain panel (uses tooltip mechanics) */
.taHeaderTitle .goPill { margin-left: 10px; }
.goPill.isNo {
  color: rgba(86, 17, 12, 0.96);
  border-color: rgba(231, 76, 60, 0.40);
  background: rgba(231, 76, 60, 0.14);
  box-shadow: 0 10px 24px rgba(231, 76, 60, 0.10), 0 1px 0 rgba(255,255,255,0.75) inset;
}
.goPill.isNo:hover { border-color: rgba(231, 76, 60, 0.55); }
/* GO/NO-GO Modal (centered, 3 columns) */
.goModalOverlay.hidden { display: none; }

.goModalVerdict.isNo {
  color: rgba(86, 17, 12, 0.96);
  border-color: rgba(231, 76, 60, 0.40);
  background: rgba(231, 76, 60, 0.14);
}

@media (max-width: 900px) {
}

.e1Panel #bufferTargetGrid.miniGrid { margin-top: 10px; }

/* Engine 1 Conditions: keep scan cards compact, push verbosity into Live details */
.e1Conditions .taCardInterp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.e1Conditions #bufferTargetCard .taCardInterp,
.e1Conditions details .taCardInterp {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

/* Regime overlay should match TA “instrument cards” (glass + depth). */
.metricGrid.metricGrid--regime .metricCard {
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.metricGrid.metricGrid--regime #regimeMessage.metricValue--message {
  font-size: 14px;
  line-height: 1.40;
  letter-spacing: 0.02px;
}

.metricGrid.metricGrid--regime .info {
  cursor: pointer;
}

@media (max-width: 980px) {
  .metricGrid.metricGrid--snapshot #recCard {
    grid-column: auto;
  }
}

@media (max-width: 1200px) {
  .metricGrid.metricGrid--regime {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .metricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controlBarForm { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .controlSpacer { display: none; }
}

@media (max-width: 640px) {
  .metricGrid.metricGrid--skewWingsTop { grid-template-columns: 1fr; }
}

.metricGrid.metricGrid--skewWingsBottom {
  grid-template-columns: 1fr;
}

.metricCard {
  padding: 14px 14px 12px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}

.metricCard.isMuted {
  opacity: 0.65;
}

.metricLabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.metricValue {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.12px;
}

.metricGrid--regime .metricValue {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.12px;
}

.metricGrid--regime .metricValue .pill {
  font-weight: 600;
}

/* ============================================================
   Technicals (Daily) Panel — desk scan UI (glass tokens)
   ============================================================ */
:root {
  /* Bind TA panel tokens to global app tokens so the whole app feels cohesive. */
  --ta-radius-lg: var(--radius-card);
  --ta-radius-md: var(--radius-control);
  --ta-blur: 18px;
  --ta-glass-bg: var(--surface);
  --ta-glass-border: var(--border);
  --ta-shadow: var(--shadow);
  --ta-text: var(--text);
  --ta-muted: var(--muted);
  --ta-divider: var(--line);
  --ta-pos: rgba(46, 204, 113, 0.14);
  --ta-neu: rgba(120, 140, 255, 0.12);
  --ta-neg: rgba(255, 77, 77, 0.12);
}

/* Dark-mode handled by global tokens; TA panel inherits via the bindings above. */

.taPanel {
  display: grid;
  gap: 12px;
  color: var(--ta-text);
}

.taGlass {
  background: var(--ta-glass-bg);
  border: 1px solid var(--ta-glass-border);
  border-radius: var(--ta-radius-lg);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
}

.taHeader {
  padding: 14px 14px 10px;
  border-radius: var(--ta-radius-lg);
  background: var(--ta-glass-bg);
  border: 1px solid var(--ta-glass-border);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
  /* Ensure header tooltips render above the grid cards below (cards create stacking contexts too). */
  position: relative;
  z-index: 20;
}

.taHeaderRow {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.taHeaderRow--sub {
  margin-top: 10px;
  justify-content: flex-start;
}

.taHeaderTitle {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08px;
}

.taHeaderMeta {
  font-size: 12px;
  color: var(--ta-muted);
  font-weight: 650;
}

.taBiasPill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08px;
  border: 1px solid var(--ta-divider);
}

.taBiasPill--pos { background: var(--ta-pos); }
.taBiasPill--neu { background: var(--ta-neu); }
.taBiasPill--neg { background: var(--ta-neg); }

.taConf {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 0 6px;
}

.taDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 1px solid var(--ta-divider);
  background: transparent;
}

.taDot.isOn {
  background: rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  .taDot.isOn { background: rgba(255, 255, 255, 0.72); }
}

.taChips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.taChip {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  font-size: 12px;
  font-weight: 650;
  color: var(--ta-muted);
  background: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
  .taChip { background: rgba(255, 255, 255, 0.02); }
}

.taHeaderActions {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.taModeToggle {
  display: inline-flex;
  border: 1px solid var(--ta-divider);
  border-radius: 999px;
  overflow: hidden;
}

.taModeBtn {
  padding: 6px 10px;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 750;
  color: var(--ta-muted);
  cursor: pointer;
}

.taModeBtn.isOn {
  color: var(--ta-text);
  background: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .taModeBtn.isOn { background: rgba(255, 255, 255, 0.08); }
}

.taActionBtn {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  color: var(--ta-text);
  cursor: pointer;
}

.taActionBtn:focus,
.taModeBtn:focus,
.taLinkBtn:focus,
.taInfoBtn:focus {
  outline: 2px solid rgba(110, 168, 254, 0.55);
  outline-offset: 2px;
}

.taGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  z-index: 0;
}

@media (min-width: 920px) {
  .taGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.taGrid.taGrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 920px) { .taGrid.taGrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 540px) { .taGrid.taGrid--4 { grid-template-columns: 1fr; } }

.taCard {
  padding: 12px;
  border-radius: var(--ta-radius-lg);
  border: 1px solid var(--ta-glass-border);
  background: var(--ta-glass-bg);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
  cursor: default;
}

.taCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.taCardTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08px;
  color: var(--ta-muted);
}

.taInfoBtn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-weight: 900;
  color: var(--ta-muted);
  cursor: pointer;
}

.taCardVis {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.taVis { width: 100%; max-width: 120px; height: auto; }

.taCardState {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.06px;
}

.taCardInterp {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ta-muted);
  line-height: 1.28;
}

.taCardMoreRow {
  margin-top: 8px;
}

.taCardExplain {
  font-size: 11px;
  line-height: 1.30;
  color: var(--ta-muted);
}

/* Gap vs Session Risk table inside taCard */
.gvcTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}
.gvcTable th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ta-muted, rgba(0,0,0,0.50));
  text-align: right;
  padding: 2px 8px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.gvcTable th:first-child { text-align: left; }
.gvcTable td {
  padding: 4px 8px;
  text-align: right;
  font-weight: 600;
}
.gvcTable .gvcLabel {
  text-align: left;
  font-weight: 700;
  color: var(--ta-muted, rgba(0,0,0,0.50));
  font-size: 12px;
}
.gvcDelta--high { color: var(--neg, #d32f2f); font-weight: 800; }
.gvcDelta--med { color: #e67e22; font-weight: 700; }
.gvcDelta--zero { color: var(--ta-muted, rgba(0,0,0,0.40)); }

/* CTC / EM color coding in events table */
.ctcEM--high { color: var(--neg, #d32f2f); font-weight: 700; }
.ctcEM--med { color: #e67e22; font-weight: 600; }
.ctcEM--low { color: var(--pos, #2e7d32); }

@media (prefers-color-scheme: dark) {
  .gvcTable th { color: rgba(255,255,255,0.50); border-bottom-color: rgba(255,255,255,0.10); }
  .gvcTable .gvcLabel { color: rgba(255,255,255,0.50); }
  .gvcDelta--zero { color: rgba(255,255,255,0.40); }
}

.taBreaks {
  padding: 12px;
  background: linear-gradient(0deg, var(--ta-neg), var(--ta-neg)), var(--ta-glass-bg);
}

.taBreaksTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.taBreaksTitle {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06px;
}

.taAnalysis {
  padding: 12px;
}

.taAnalysisTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.taAnalysisTitle {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06px;
}

.taNarrativeText {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ta-text);
  white-space: pre-wrap;
}

.taLinkBtn {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--ta-muted);
  font-weight: 800;
  cursor: pointer;
}

.taList,
.taMiniList {
  margin: 8px 0 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--ta-text);
  font-size: 12px;
  line-height: 1.35;
}

.taMiniList {
  font-size: 12px;
  color: var(--ta-muted);
}

.taDetails {
  padding: 12px;
  border-radius: var(--ta-radius-lg);
  border: 1px solid var(--ta-glass-border);
  background: var(--ta-glass-bg);
  box-shadow: var(--ta-shadow);
  backdrop-filter: blur(var(--ta-blur));
}

.taDetails summary {
  cursor: pointer;
  font-weight: 850;
  color: var(--ta-muted);
}

/* Calendar: +N expand panel (month cells use dynamic height) */

.calExpandPanel {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.calExpandTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.calExpandTitle {
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,11,15,0.70);
  letter-spacing: 0.10px;
}

.calExpandBody {
  padding: 10px 12px 12px;
  overflow: auto;
}

.calExpandPills,
.calExpandEvents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calExpandTicker {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06px;
}

.calExpandTicker:hover { background: var(--hover); }
.calExpandTicker:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Popover (card details) */
.taPopoverOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 9999;
}

@media (prefers-color-scheme: dark) {
  .taPopoverOverlay { background: rgba(0, 0, 0, 0.45); }
}

.taPopover {
  width: min(560px, 92vw);
  max-height: min(78vh, 680px);
  overflow: auto;
  padding: 14px;
}

.taPopoverTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ta-divider);
}

.taPopoverTitle {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06px;
}

.taPopoverClose {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--ta-divider);
  background: transparent;
  font-size: 18px;
  font-weight: 900;
  color: var(--ta-muted);
  cursor: pointer;
}

.taPopoverBody {
  padding-top: 10px;
}

.taPopoverValue {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.04px;
}

.taPopoverDelta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ta-muted);
}

.taPopoverLevels {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ta-divider);
  display: grid;
  gap: 8px;
}

.taLevelRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

.taLevelK {
  font-size: 12px;
  color: var(--ta-muted);
  font-weight: 800;
}

.taLevelV {
  font-size: 12px;
  font-weight: 850;
}

/* Tooltip popover (card info 'i') */
.taTipPop {
  position: fixed;
  z-index: 10000;
  width: min(420px, 86vw);
  padding: 10px 12px;
  border-radius: 14px;
}

.taTipPopBody {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ta-text);
}

/* Micro-visual strokes */
.taArcBase { stroke: var(--ta-divider); stroke-width: 6; stroke-linecap: round; }
.taArc { stroke-width: 6; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 0; opacity: 0.22; }
.taArc--positive { stroke: rgba(46, 204, 113, 0.85); }
.taArc--neutral { stroke: rgba(120, 140, 255, 0.85); }
.taArc--negative { stroke: rgba(255, 77, 77, 0.85); }
.taArcDot { fill: var(--ta-text); }

.taBarBase { fill: rgba(0, 0, 0, 0.08); }
@media (prefers-color-scheme: dark) { .taBarBase { fill: rgba(255, 255, 255, 0.10); } }
.taBarFill { fill: rgba(120, 140, 255, 0.55); }
.taBarDot { fill: var(--ta-text); }

.taBadgeLine { fill: rgba(0, 0, 0, 0.10); }
@media (prefers-color-scheme: dark) { .taBadgeLine { fill: rgba(255, 255, 255, 0.12); } }
.taBadgeDot--positive { fill: rgba(46, 204, 113, 0.75); }
.taBadgeDot--neutral { fill: rgba(120, 140, 255, 0.75); }
.taBadgeDot--negative { fill: rgba(255, 77, 77, 0.75); }
.taBadgeDot--mixed { fill: rgba(200, 200, 210, 0.75); }

.taStackLine { fill: rgba(0, 0, 0, 0.10); }
@media (prefers-color-scheme: dark) { .taStackLine { fill: rgba(255, 255, 255, 0.12); } }
.taStackDot--positive { fill: rgba(46, 204, 113, 0.75); }
.taStackDot--negative { fill: rgba(255, 77, 77, 0.75); }
.taStackDot--mixed { fill: rgba(200, 200, 210, 0.75); }

/* Snapshot-specific tightening (Engine 2) */

.pill.pill--mini {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 650;
  color: rgba(11,11,15,0.72);
}

.chip .k { color: rgba(11,11,15,0.50); font-weight: 700; }

/* Macro week list formatting (Engine 2 Snapshot) */

.macroEventLine {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.metricGrid--regime #bufferTargetCard .segmented {
  margin-top: 8px;
}

.metricGrid--regime #bufferTargetCard .segButton {
  padding: 5px 9px;
  font-size: 11px;
}

.metricGrid--regime #bufferTargetCard .miniGrid {
  margin-top: 10px;
}

.segmented {
  margin-top: 10px;
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.02);
}

.controlGroup .segmented {
  /* In control bars, the label + control are already vertically spaced by the grid gap. */
  margin-top: 0;
}

.underlyingToggle {
  padding: 3px;
  gap: 4px;
  justify-self: start;
  width: max-content;
}

.segButton.segButton--logo {
  padding: 2px;
  border-radius: 10px;
  line-height: 0;
  background: rgba(11, 11, 15, 0.88);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset;
}

.segButton.segButton--logo.isActive {
  /* Override the generic white active state for logo tiles */
  background: rgba(11, 11, 15, 0.96);
  border-color: rgba(10, 132, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18), 0 1px 0 rgba(255,255,255,0.14) inset;
  color: rgba(255,255,255,0.92);
}

.segButton.segButton--logo:hover {
  background: rgba(11, 11, 15, 0.92);
}

.segButton.segButton--logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.14) inset;
}

.underlyingLogo {
  width: 34px;
  height: 34px;
  display: block;
}

.segButton {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(11,11,15,0.62);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.segButton.isActive {
  background: rgba(255,255,255,0.80);
  border-color: var(--border);
  color: rgba(11,11,15,0.88);
}

.segButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.miniGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 13px;
}

.miniGrid .k {
  color: var(--muted);
  font-weight: 500;
}

.miniGrid .v {
  font-weight: 650;
}

.tradeBuilder {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tradeBuilderControls {
  display: grid;
  gap: 10px;
}

.tbRow {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
}

@media (max-width: 820px) {
  .tbRow { grid-template-columns: 1fr; }
}

.tbLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.tbInputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Top navigation should not wrap */
.tbInputs.topNav {
  flex-wrap: nowrap;
  gap: 8px;
}

.tbInputs.topNav .primaryButton {
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* Nav button tooltips */
.navBtn {
  position: relative;
}

/* Nav tooltips now use JS positioning - see navTooltip in ui_kit.js */
.navBtn[data-tooltip] {
  position: relative;
}

/* Nav tooltip container (created by JS) */
.navTooltip {
  position: fixed;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 10px;
  min-width: 280px;
  max-width: 340px;
  white-space: normal;
  text-align: center;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(15, 20, 30, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.navTooltip.isVisible {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow for nav tooltip - positioned by JS via --arrow-left */
.navTooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(15, 23, 42, 0.94);
  border-top: none;
}

@keyframes navTooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tradeBuilderOutputs {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 820px) {
  .tradeBuilderOutputs { grid-template-columns: 1fr; }
}

.tbColTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: rgba(11,11,15,0.72);
  margin-bottom: 6px;
}

.advCol { display: none; }
.showAdvanced .advCol { display: table-cell; }

.metricCaption {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.metricCard,
.quarterCard {
  transition: background 120ms ease, border-color 120ms ease;
}

.metricCard:hover,
.quarterCard:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255,255,255,0.88);
}

.actionSummary {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.sectionDivider {
  height: 1px;
  background: var(--line);
  margin: 16px 2px 2px;
  border-radius: 999px;
}

.regimeValidationGrid {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.rvLine {
  color: var(--muted);
  font-weight: 500;
}

.mono, .num, td.num, th.num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.quarterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .quarterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quarterCard {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  padding: 14px;
}

.quarterTop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.quarterHeading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quarterLabel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  margin-top: 12px;
  font-size: 13px;
}

.kv .k { color: var(--muted); font-weight: 500; }
.kv .v { font-weight: 600; }

.finePrint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
}

.tableWrap {
  margin-top: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1150px;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: rgba(245, 245, 247, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  z-index: 1;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

tbody tr:hover { background: var(--hover); }

tr.row--breach { background: rgba(255, 59, 48, 0.08); }
tr.row--near { background: rgba(255, 159, 10, 0.08); }

.ref {
  opacity: 0.75;
  font-size: 12px;
}

.regimeCell .pill {
  padding: 3px 10px;
}

.regimeMult {
  margin-left: 8px;
  color: var(--muted2);
  font-weight: 600;
  font-size: 12px;
}

.gateCell .pill {
  padding: 4px 12px;
  font-weight: 700;
}

.linkButton {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.linkButton:hover { filter: brightness(0.95); }

.spacerDot { margin: 0 8px; color: rgba(11,11,15,0.30); }

.breachCell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breachDot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.breachDot--bad {
  background: rgba(255, 59, 48, 0.18);
  border-color: rgba(255, 59, 48, 0.35);
}

.breachDot--good {
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.32);
}

.breachLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  background: rgba(255,255,255,0.55);
}

.pill.good { color: var(--green); border-color: rgba(52, 199, 89, 0.30); }
.pill.bad { color: var(--red); border-color: rgba(255, 59, 48, 0.32); }
.pill.warn { color: var(--amber); border-color: rgba(255, 159, 10, 0.28); }
.pill.neutral { color: rgba(11,11,15,0.55); border-color: var(--border); }

.eventRiskList {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,11,15,0.74);
  font-size: 13px;
  font-weight: 550;
}

.eventRiskBody {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08px;
  line-height: 1.25;
}

.eventRiskBody .eventRiskList {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
}

.eventRiskBody .eventRiskMuted {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
}

.eventRiskList li {
  margin: 6px 0;
}

.eventRiskMuted {
  color: rgba(11,11,15,0.55);
  font-weight: 500;
}

.eventRiskKicker {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 650;
  color: rgba(11,11,15,0.72);
}

.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.delta.pos { color: var(--red); }
.delta.neg { color: var(--green); }
.delta.zero { color: var(--muted); font-weight: 600; }

/* ---- Tooltips (Engine 2 + general) ---- */
.tipWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* When tooltip is open, lift the entire card above siblings so the panel isn't clipped */
.taCard:has(.tipWrap.isOpen),
.taCard:has(.tipWrap:focus-within),
.taCard.taCard--tipOpen {
  position: relative;
  z-index: 100;
}

/* Also lift the tipWrap itself when open */
.tipWrap.isOpen,
.tipWrap:focus-within {
  z-index: 1000;
}

.tipBtn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: rgba(11,11,15,0.62);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.calTopBar {
  margin-top: 6px;
}

.calTopBarRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.calNav {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.calTitleWrap {
  min-width: 220px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calRangeTitle {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.2px;
}

.calRangeSub {
  font-size: 12px;
  font-weight: 550;
}

.calGridWrap { margin-top: 14px; }

.calGrid {
  display: grid;
  gap: 12px;
}

.calGrid--month { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.calGrid--week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.calGrid--day { grid-template-columns: 1fr; }
.calGrid--month { grid-auto-rows: auto; }
.calGrid--week { grid-auto-rows: auto; }

@media (max-width: 1100px) { .calGrid--month { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .calGrid--month { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calGrid--week { grid-template-columns: 1fr; } }

.calCell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 10px;
  min-height: 170px;
  position: relative;
  overflow: hidden;
}

.calHeadCell {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 850;
  color: rgba(11,11,15,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.calCell.isOutside { opacity: 0.55; }

.calCell.isWeekend {
  background: rgba(255,255,255,0.58);
}

.calCellHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.calCellDate {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.calDow {
  font-size: 11px;
  font-weight: 750;
  color: rgba(11,11,15,0.55);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.calDayNum {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.calEvents {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pill.pill--event {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 10px;
  background: rgba(255,255,255,0.70);
}

.pill.pill--event.holiday { color: rgba(115, 78, 166, 0.95); border-color: rgba(115, 78, 166, 0.25); }
.pill.pill--event.earlyClose { color: rgba(60, 60, 67, 0.78); border-color: rgba(60, 60, 67, 0.22); }
.pill.pill--event.fed { color: rgba(255, 149, 0, 0.95); border-color: rgba(255, 149, 0, 0.28); }
.pill.pill--event.econ { color: rgba(10, 132, 255, 0.95); border-color: rgba(10, 132, 255, 0.25); }
.pill.pill--event.treasury { color: rgba(48, 209, 88, 0.95); border-color: rgba(48, 209, 88, 0.25); }
.pill.pill--event.opex { color: rgba(255, 59, 48, 0.88); border-color: rgba(255, 59, 48, 0.22); }

.calEGroup {
  margin-top: 10px;
  padding: 8px 10px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.calEGroup:first-child { margin-top: 6px; }

/* Timing-specific section accents */
.calEGroup.bmo {
  background: rgba(52, 199, 89, 0.04);
  border-color: rgba(52, 199, 89, 0.12);
}
.calEGroup.amc {
  background: rgba(0, 122, 255, 0.04);
  border-color: rgba(0, 122, 255, 0.12);
}
.calEGroup.unk {
  background: rgba(255, 159, 10, 0.04);
  border-color: rgba(255, 159, 10, 0.12);
}

.calEGroupHead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(11,11,15,0.52);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Timing-colored dot indicator */
.calEGroupHead::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(11,11,15,0.25);
  flex-shrink: 0;
}
.bmo .calEGroupHead { color: #1b8a3e; }
.bmo .calEGroupHead::before { background: rgba(52, 199, 89, 0.85); }
.amc .calEGroupHead { color: #0060cc; }
.amc .calEGroupHead::before { background: rgba(0, 122, 255, 0.85); }
.unk .calEGroupHead { color: #995c00; }
.unk .calEGroupHead::before { background: rgba(255, 159, 10, 0.85); }

/* Count badge in group header */
.calEGroupCount {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
  color: rgba(11,11,15,0.5);
  margin-left: 2px;
}

/* EarningsHub-style logo grid - compact squares */
.calTiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.calGrid--month .calTiles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.calGrid--week .calTiles,
.calGrid--day .calTiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Logo-only tile (EarningsHub style) - square tiles with dark background */
.calTile {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #1e293b;  /* Dark slate background for logo visibility */
  border-radius: 6px;
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 80ms ease, box-shadow 140ms ease, border-color 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.calTile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border-color: rgba(99, 102, 241, 0.5);
}

.calTile:active { transform: translateY(0); }

/* Logo fills the tile - transparent on dark bg */
.calTileLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: transparent;
}

/* Hide ticker text - logo only (EarningsHub style) */

/* Fallback initial for missing logos */
.calTileInitial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  text-transform: uppercase;
}

/* Different colors for variety */
.calTileInitial[data-color="1"] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.calTileInitial[data-color="2"] { background: linear-gradient(135deg, #10b981, #059669); }
.calTileInitial[data-color="3"] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.calTileInitial[data-color="4"] { background: linear-gradient(135deg, #ef4444, #dc2626); }
.calTileInitial[data-color="5"] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* Tooltip for ticker name on hover */
.calTile[data-ticker]::after {
  content: attr(data-ticker);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
  z-index: 100;
  pointer-events: none;
}

.calTile[data-ticker]:hover::after {
  opacity: 1;
  visibility: visible;
}

.tickerInputRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tickerLogo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--logoTileBg);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 10px 18px rgba(15, 20, 30, 0.06);
  filter: drop-shadow(0 1px 2px rgba(15, 20, 30, 0.22));
}

.popoverTitleRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.popoverLogo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--logoTileBg);
  border: 1px solid rgba(15, 23, 42, 0.16);
  filter: drop-shadow(0 1px 2px rgba(15, 20, 30, 0.22));
}

.calEventPill {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.calEventPill.pill {
  border: 1px solid var(--border);
  padding: 6px 10px;
}

.macroMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.macroSection {
  margin-top: 12px;
}

.macroSectionTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.macroBullets ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(11,11,15,0.80);
  font-size: 12px;
  line-height: 1.4;
}

.macroBullets li { margin: 6px 0; }

/* "+N more" button matches tile size */
.calTileMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  border: 1px dashed rgba(15, 23, 42, 0.20);
  background: rgba(248,250,252,0.9);
  font-size: 10px;
  font-weight: 700;
  color: rgba(11,11,15,0.55);
  cursor: pointer;
  appearance: none;
  transition: background 140ms ease;
}

.calTileMore:hover { background: rgba(241,245,249,1); }
.calTileMore:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(10, 14, 22, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 5000;
}

.modalCard {
  width: min(720px, 92vw);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.16);
  overflow: hidden;
}

.modalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.modalTitle {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.modalBody { padding: 14px 16px 6px; }

.modalSection { padding: 10px 0 14px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.modalSection:last-child { border-bottom: none; }

.modalSectionTitle {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.18px;
  color: rgba(11,11,15,0.65);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.modalChecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
@media (max-width: 560px) { .modalChecks { grid-template-columns: 1fr; } }

.checkRow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 650;
  color: rgba(11,11,15,0.78);
}

.modalRadios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radioRow {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(11,11,15,0.78);
  cursor: pointer;
}

.radioRow input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.modalFoot {
  padding: 14px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  justify-content: flex-end;
}

.iconBtn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: rgba(11,11,15,0.65);
}

/* Popover (ticker detail) */
.popover {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  z-index: 6000;
}

.popoverCard {
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.18);
  overflow: hidden;
}

.popoverHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.popoverTitle {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.popoverBody { padding: 14px 16px 10px; }
.popoverFoot { padding: 12px 16px 14px; border-top: 1px solid rgba(15, 23, 42, 0.08); }

/* Transcript section in ticker popover */
.transcriptBtn {
  font-size: 12px;
  padding: 4px 8px;
  margin-left: auto;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.transcriptBtn:hover {
  background: rgba(59, 130, 246, 0.2);
}
.transcriptsSection {
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.03);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.transcriptsSection.hidden {
  display: none;
}
.transcriptsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.transcriptItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.transcriptItem:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(59, 130, 246, 0.3);
}
.transcriptLabel {
  font-weight: 600;
  color: rgba(11, 11, 15, 0.8);
}
.transcriptDownload {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.transcriptDownload:hover {
  background: #2563eb;
}
.transcriptsEmpty {
  color: rgba(11, 11, 15, 0.5);
  font-size: 13px;
  font-style: italic;
}

/* Allow popovers to work on smaller viewports (so bottom rows are reachable). */
.popoverBody {
  max-height: min(70vh, 640px);
  overflow: auto;
}

.tipBtn:hover {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15, 23, 42, 0.16);
}

.tipBtn:active { transform: translateY(0.5px); }

.tipBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 1px 0 rgba(255,255,255,0.85) inset;
}

.tipPanel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 76vw);
  z-index: 1001;
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(15, 20, 30, 0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: rgba(11,11,15,0.88);
  display: none;
  max-height: min(60vh, 520px);
  overflow: auto;
}

.tipWrap.isOpen .tipPanel {
  display: block;
}

/* In popovers, make tooltips fixed-position + JS-positioned so they never get clipped. */
.tipWrap--fixed .tipPanel {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: min(440px, calc(100vw - 28px));
  z-index: 9999;
}
.tipWrap--fixed .tipPanel:before { display: none; }

/* --- Engine 2: Dealer Gamma Map (clean hover chart) --- */
.chartCard {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 12px 32px rgba(15, 20, 30, 0.10);
  padding: 12px;
  overflow: hidden;
}

/* --- Engine 2: Net $GEX Heat Map --- */
.gexHeatmap {
  width: 100%;
  min-height: 240px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.55);
  overflow: hidden;
}

.gexMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.gexMetric {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.62);
  border-radius: 14px;
  padding: 10px 12px;
}

.gexMetricK {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1px;
  color: rgba(11,11,15,0.70);
}

.gexMetricV {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 850;
  color: rgba(11,11,15,0.92);
}

.gexStabilityChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.72);
  font-weight: 900;
  letter-spacing: 0.1px;
}
.gexStabilityChip.isStable { background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.18); }
.gexStabilityChip.isAsym { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.20); }
.gexStabilityChip.isFragile { background: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.18); }

.gexSvg {
  display: block;
  width: 100%;
  height: auto;
}

.gexBg { fill: rgba(255,255,255,0.55); }

.gexAxis {
  font-size: 11px;
  font-weight: 750;
  fill: rgba(11, 11, 15, 0.52);
  user-select: none;
  pointer-events: none;
}
.gexAxis--x { letter-spacing: -0.2px; }
.gexAxis--y { letter-spacing: 0.0px; }

.gexCell {
  shape-rendering: geometricPrecision;
  stroke: rgba(15, 23, 42, 0.06);
  stroke-width: 0.7;
}

.gexBoundary {
  stroke: rgba(15, 23, 42, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 6 6;
}
.gexBoundary--down { stroke: rgba(220, 38, 38, 0.55); }
.gexBoundary--up { stroke: rgba(22, 163, 74, 0.55); }

.gexBoundaryLabel {
  font-size: 11px;
  font-weight: 850;
  fill: rgba(11, 11, 15, 0.58);
  letter-spacing: -0.1px;
  user-select: none;
  pointer-events: none;
}

.gexSpot {
  stroke: rgba(11, 11, 15, 0.32);
  stroke-width: 1.2;
}
.gexSpotLabel {
  font-size: 11px;
  font-weight: 900;
  fill: rgba(11, 11, 15, 0.46);
  letter-spacing: -0.1px;
  user-select: none;
  pointer-events: none;
}

.gammaChart {
  width: 100%;
  height: 260px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.55);
}

.gammaSvg {
  display: block;
  width: 100%;
  height: 260px;
}

.gammaBg { fill: rgba(255,255,255,0.55); }

.gammaPrice {
  fill: none;
  stroke: rgba(15, 23, 42, 0.86);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gammaLine {
  stroke-width: 1.4;
  opacity: 0.55;
  stroke-linecap: round;
}
.gammaLine.isHover { opacity: 0.95; stroke-width: 2.4; }

.gammaLine--putWall { stroke: rgba(220, 38, 38, 0.95); stroke-dasharray: 6 6; }
.gammaLine--callWall { stroke: rgba(22, 163, 74, 0.95); stroke-dasharray: 6 6; }
.gammaLine--cluster { stroke: rgba(11, 11, 15, 0.44); stroke-dasharray: 3 6; }
.gammaLine--gammaPeak { stroke: rgba(99, 102, 241, 0.92); stroke-dasharray: 2 7; }
.gammaLine--gammaFlip { stroke: rgba(17, 24, 39, 0.72); stroke-dasharray: 10 6; }

.gammaCross {
  stroke: rgba(11, 11, 15, 0.20);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.gammaDot { fill: rgba(15, 23, 42, 0.85); }

.gammaLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chipToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.60);
  color: rgba(11,11,15,0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.1px;
  cursor: pointer;
  user-select: none;
}
.chipToggle:hover { background: rgba(255,255,255,0.78); }
.chipToggle.isOn {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.14);
  color: rgba(11,11,15,0.92);
}

.chartTip {
  position: absolute;
  z-index: 40;
  min-width: 220px;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 18px 50px rgba(15, 20, 30, 0.14);
  pointer-events: none;
}
.chartTipTitle { font-size: 12px; font-weight: 900; letter-spacing: 0.1px; margin-bottom: 4px; }
.chartTipBody { font-size: 12px; color: rgba(11,11,15,0.78); line-height: 1.35; }
.chartTipDivider { height: 1px; background: rgba(15, 23, 42, 0.08); margin: 8px 0; }

.tipPanel:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.92);
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.tipTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1px;
  margin-bottom: 6px;
}

.tipBody {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  color: rgba(11,11,15,0.78);
  white-space: normal;
}

.tipBody p {
  margin: 8px 0 0;
}

.tipBody p:first-child { margin-top: 0; }

.tipBody ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.tipBody li { margin: 6px 0; }

/* ============================================================
   Expected Move Cards (Engine 1)
   ============================================================ */

.emTargetGrid {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.emRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.60);
  font-size: 12px;
}

.emRow .k {
  color: var(--muted);
  font-weight: 700;
}

.emRow .v {
  font-weight: 800;
  color: rgba(11, 11, 15, 0.88);
}

/* White Box: neutral */
.emBox--white {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);
}

/* Blue Box: blue tint */
.emBox--blue {
  border-color: rgba(0, 122, 255, 0.25);
  background: rgba(0, 122, 255, 0.06);
}

.emBox--blue .k {
  color: rgba(0, 90, 200, 0.80);
}

.emBox--blue .v {
  color: rgba(0, 90, 200, 0.95);
}

/* Red Box: red tint */
.emBox--red {
  border-color: rgba(255, 59, 48, 0.28);
  background: rgba(255, 59, 48, 0.06);
}

.emBox--red .k {
  color: rgba(180, 40, 35, 0.80);
}

.emBox--red .v {
  color: rgba(180, 40, 35, 0.95);
}

/* Dark mode adjustments for EM boxes */
@media (prefers-color-scheme: dark) {
  .emRow {
    background: rgba(30, 30, 35, 0.40);
    border-color: rgba(255, 255, 255, 0.10);
  }

  .emBox--white {
    background: rgba(255, 255, 255, 0.06);
  }

  .emBox--blue {
    background: rgba(0, 122, 255, 0.10);
    border-color: rgba(0, 122, 255, 0.30);
  }

  .emBox--blue .k {
    color: rgba(100, 180, 255, 0.85);
  }

  .emBox--blue .v {
    color: rgba(100, 180, 255, 0.95);
  }

  .emBox--red {
    background: rgba(255, 59, 48, 0.10);
    border-color: rgba(255, 59, 48, 0.30);
  }

  .emBox--red .k {
    color: rgba(255, 120, 110, 0.85);
  }

  .emBox--red .v {
    color: rgba(255, 120, 110, 0.95);
  }
}

/* =============================================================================
   EARNINGS HOLD RISK SECTION
   ============================================================================= */

/* Hold Risk Layout - Unconditional standalone, Conditional grouped */
.holdRiskLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .holdRiskLayout {
    grid-template-columns: 1fr;
  }
}

.holdRiskCard--standalone {
  height: fit-content;
}

.holdRiskGroup {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: rgba(0, 122, 255, 0.02);
  padding: 12px;
}

.holdRiskGroupLabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-left: 2px;
}

.holdRiskGroupCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .holdRiskGroupCards {
    grid-template-columns: 1fr;
  }
}

.holdRiskGrid {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.holdRiskRow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.60);
  font-size: 12px;
}

.holdRiskRow .hrLabel {
  font-weight: 600;
  color: var(--muted);
}

.holdRiskRow .hrValue {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 50px;
  text-align: right;
}

.holdRiskRow .hrK {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  text-align: right;
}

/* Color coding for breach rates */
.holdRiskRow--low .hrValue { color: var(--green); }
.holdRiskRow--med .hrValue { color: var(--amber); }
.holdRiskRow--high .hrValue { color: var(--red); }

/* Max deviation row styling */
.holdRiskRow--maxdev {
  background: rgba(0, 122, 255, 0.06);
  border-color: rgba(0, 122, 255, 0.18);
}

.holdRiskRow--maxdev .hrValue {
  color: var(--blue);
  font-weight: 800;
}

/* Sub-headers for earnings close vs next day */
.holdRiskSubhead {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.holdRiskSubhead:first-child {
  margin-top: 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .holdRiskRow {
    background: rgba(30, 30, 35, 0.40);
    border-color: rgba(255, 255, 255, 0.10);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATOR (Apple-style draggable popup)
   ═══════════════════════════════════════════════════════════════════════════ */

.calcToggleBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #1d1d1f 0%, #2d2d30 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.calcToggleBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.calcToggleBtn:active {
  transform: translateY(0);
}
.calcToggleBtn svg {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

/* Calculator Popup */
.ravenCalc {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 4%, #1c1c1e 100%);
  border-radius: 20px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ravenCalc.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}
.ravenCalc.isDragging {
  opacity: 0.92;
  cursor: grabbing;
}

/* Calculator Header */
.calcHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(58, 58, 60, 0.6);
  cursor: grab;
}
.calcHeader:active {
  cursor: grabbing;
}
.calcDragHandle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calcTitle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.2px;
}
.calcCloseBtn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.calcCloseBtn:hover {
  background: rgba(255, 59, 48, 0.8);
  color: #fff;
}

/* Calculator Body */
.calcBody {
  padding: 12px;
}

/* Tabs */
.calcTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.calcTab {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calcTab:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.calcTab.isActive {
  background: rgba(0, 122, 255, 0.9);
  color: #fff;
}
.calcTab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Display */
.calcDisplay {
  background: #000;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  text-align: right;
}
.calcDisplayLabel {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.calcDisplayValue {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

/* Sections */
.calcSection {
  margin-bottom: 14px;
}
.calcLabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Wing Size Buttons */
.calcWingBtns {
  display: flex;
  gap: 6px;
}
.calcWingBtn {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calcWingBtn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.calcWingBtn.isActive {
  background: rgba(255, 159, 10, 0.9);
  color: #fff;
}

/* Input */
.calcInput {
  width: 100%;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calcInput::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.calcInput:focus {
  border-color: rgba(0, 122, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

/* Results */
.calcResults {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.calcResultRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.calcResultRow:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.calcResultRow--highlight {
  padding-top: 8px;
  margin-top: 2px;
}
.calcResultLabel {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.calcResultValue {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}
.calcResultRow--highlight .calcResultValue {
  font-size: 16px;
  color: rgba(52, 199, 89, 1);
}

/* Clear Button */
.calcClearBtn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calcClearBtn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* =============================================================================
   Position Size Calculator (Engine 3 & 4)
   ============================================================================= */

.posCalc {
  position: fixed;
  z-index: 10000;
  width: 320px;
  border-radius: 16px;
  background: rgba(28, 28, 30, 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  overflow: hidden;
  user-select: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.posCalc.hidden {
  display: none;
}

.posCalc.isDragging {
  opacity: 0.92;
  cursor: grabbing;
}

/* Header */
.posCalcHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(58, 58, 60, 0.6);
  cursor: grab;
}

.posCalcHeader:active {
  cursor: grabbing;
}

.posCalcDragHandle {
  flex: 1;
  display: flex;
  align-items: center;
}

.posCalcTitle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.2px;
}

.posCalcCloseBtn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.posCalcCloseBtn:hover {
  background: rgba(255, 59, 48, 0.8);
  color: #fff;
}

/* Body */
.posCalcBody {
  padding: 14px;
}

/* Signal Info */
.posCalcSignalInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.posCalcTicker {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.posCalcDirection {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.posCalcDirection.bullish {
  background: rgba(52, 199, 89, 0.25);
  color: #34C759;
}

.posCalcDirection.bearish {
  background: rgba(255, 59, 48, 0.25);
  color: #FF3B30;
}

/* Trade Levels */
.posCalcLevels {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.posCalcLevel {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.posCalcLevelLabel {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.posCalcLevelValue {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}

.posCalcLevelValue.posCalcStop {
  color: #FF453A;
}

.posCalcLevelValue.posCalcTarget {
  color: #30D158;
}

/* Sections */
.posCalcSection {
  margin-bottom: 14px;
}

.posCalcLabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Risk Buttons */
.posCalcRiskBtns {
  display: flex;
  gap: 6px;
}

.posCalcRiskBtn {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.posCalcRiskBtn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.posCalcRiskBtn.isActive {
  background: rgba(0, 122, 255, 0.9);
  color: #fff;
}

/* Input */
.posCalcInput {
  width: 100%;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.posCalcInput::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.posCalcInput:focus {
  border-color: rgba(0, 122, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

/* Display */
.posCalcDisplay {
  background: #000;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  text-align: right;
}

.posCalcDisplayLabel {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.posCalcDisplayValue {
  font-size: 36px;
  font-weight: 300;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

/* Results */
.posCalcResults {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.posCalcResultRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
}

.posCalcResultRow:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.posCalcResultRow--highlight {
  padding-top: 10px;
  margin-top: 2px;
}

.posCalcResultLabel {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.posCalcResultValue {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}

.posCalcResultValue.posCalcRiskValue {
  color: #FF453A;
}

.posCalcResultRow--highlight .posCalcResultValue {
  font-size: 16px;
  color: #30D158;
}

/* Analyze Button */
.posCalcAnalyzeBtn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.posCalcAnalyzeBtn:hover {
  background: rgba(0, 122, 255, 0.7);
  color: #fff;
}

/* =============================================================================
   Engine 4: Ichimoku Continuation - Signal Cards & Freshness Badges
   ============================================================================= */

/* Signal Card Base */
.signalCard {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.signalCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  border-color: rgba(15, 23, 42, 0.18);
}

/* Actionable Card - green accent */
.signalCard.actionableCard {
  border-left: 3px solid var(--green, #34C759);
}

/* Structure Card - amber accent */
.signalCard.structureCard {
  border-left: 3px solid var(--amber, #FF9500);
  opacity: 0.85;
}

.signalCard.structureCard:hover {
  opacity: 1;
}

/* Card Header */
.signalCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.signalCardTicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.signalCardSymbol {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.signalCardDirection {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.signalCardDirection.bullish {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
}

.signalCardDirection.bearish {
  background: rgba(255, 59, 48, 0.15);
  color: #FF3B30;
}

.signalCardGrade {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

.signalCardGrade.grade-aplus {
  background: linear-gradient(135deg, #34C759, #30D158);
  color: #fff;
}

.signalCardGrade.grade-a {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
}

.signalCardGrade.grade-b {
  background: rgba(255, 149, 0, 0.15);
  color: #FF9500;
}

.signalCardGrade.grade-c {
  background: rgba(142, 142, 147, 0.15);
  color: #8E8E93;
}

.indexBadgeSmall {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 122, 255, 0.10);
  color: #007AFF;
}

/* Freshness Row */
.signalCardFreshness {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.freshBadge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}

.freshBadge.positive {
  background: rgba(52, 199, 89, 0.12);
  color: #34C759;
}

.freshBadge.warning {
  background: rgba(255, 149, 0, 0.12);
  color: #FF9500;
}

/* Card Body (Metrics Grid) */
.signalCardBody {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  margin-bottom: 12px;
}

.signalCardMetric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.signalCardMetric .k {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.signalCardMetric .v {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Ichimoku Values Row */
.signalCardIchimoku {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.ichimokuValue {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ichimokuValue .label {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ichimokuValue .value {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Tags Row */
.signalCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.tagChip {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(142, 142, 147, 0.12);
  color: var(--muted);
}

.tagChip.positive {
  background: rgba(52, 199, 89, 0.10);
  color: #34C759;
}

.tagChip.warning {
  background: rgba(255, 59, 48, 0.10);
  color: #FF3B30;
}

/* Structure Note */
.structureNote {
  font-size: 11px;
  font-style: italic;
  color: var(--amber, #FF9500);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 149, 0, 0.25);
}

/* ── Hamburger Nav Drawer ────────────────────────────────────────── */

.navHamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  z-index: 20001;
  position: relative;
}
.navHamburger:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}
.navHamburger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s, opacity 0.2s;
}
.navHamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navHamburger.open span:nth-child(2) { opacity: 0; }
.navHamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay */
.navOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 19999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.navOverlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer (slides from right) */
.navDrawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--surfaceSolid);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.10);
  z-index: 20000;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.navDrawer.open {
  transform: translateX(0);
}

/* Drawer head */
.navDrawerHead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.navDrawerLogo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--bg2);
  border: 1px solid var(--border);
}
.navDrawerTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.navDrawerSub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* Links */
.navDrawerLinks {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 24px;
  gap: 2px;
}
.navDrawerLink {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s;
}
.navDrawerLink:hover {
  background: var(--hover);
}
.navDrawerLink--active {
  background: rgba(52, 199, 89, 0.08);
  border: 1px solid rgba(52, 199, 89, 0.18);
}
.navDrawerLinkLabel {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.navDrawerLink--active .navDrawerLinkLabel {
  color: #1b8a3e;
}
.navDrawerLinkDesc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}