:root {
  /* Original Color Palette (Light Mode) */
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #333333;
  --text-muted: #555555;
  --border: rgba(0, 0, 0, 0.1);
  --primary: #007bff;
  --primary-glow: #4dabf7;
  --primary-hover: #0056b3;
  --success-bg: #d4edda;
  --success-text: #155724;
  --error-bg: #f8d7da;
  --error-text: #721c24;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --interactive-hover: rgba(0, 123, 255, 0.08);
  /* D-14: text drawn on primary surfaces (was var(--bg), which
     couples link text to the page background token). */
  --on-primary: #ffffff;
}

[data-theme="dark"] {
  /* Original Color Palette (Dark Mode) */
  --bg: #1a1a2e;
  --surface: #16213e;
  --text: #e8e8e8;
  --text-muted: #a0a0a0;
  --border: rgba(255, 255, 255, 0.1);
  --primary: #4dabf7;
  --primary-glow: #4dabf7;
  --primary-hover: #339af0;
  --success-bg: #1e3a2f;
  --success-text: #8ce99a;
  --error-bg: #3a1e1e;
  --error-text: #ff8787;
  --input-bg: #1a1a2e;
  --input-border: #404040;
  --interactive-hover: rgba(77, 171, 247, 0.12);
  /* D-14: text drawn on primary surfaces. */
  --on-primary: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 12px 0;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

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

nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

nav a:hover {
  background: var(--interactive-hover);
  color: var(--primary-hover);
}

nav a.active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

/* ===========================================================
   Nav Hamburger & Drawer (Desktop default: 1 item for Manage Subscription)
   =========================================================== */
.nav-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  font-family: inherit;
  transition: all 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background: var(--interactive-hover);
  border-color: var(--primary);
  color: var(--primary-hover);
}

.nav-hamburger[aria-expanded="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.nav-drawer {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.nav-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

/* D-03: hidden drawers leave the accessibility tree entirely.
   (Tradeoff: the close fade-out is skipped — display:none applies
   instantly. Open still fades in.) */
.nav-drawer[hidden] {
  display: none !important;
}

.nav-drawer-panel {
  position: absolute;
  top: 70px;
  right: 24px;
  width: 260px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(-8px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  padding: 12px;
  z-index: 1101;
}

.nav-drawer.open .nav-drawer-panel {
  transform: translateY(0);
}

/* On Desktop (> 1024px), primary site navigation & desktop switcher are hidden inside the drawer */
.nav-drawer-primary {
  display: none;
}

.nav-drawer .drawer-foot {
  display: none;
}

.nav-drawer-subscription {
  display: block;
}

.nav-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: var(--bg);
  border: 1px solid var(--border);
}

.nav-sub-link:hover {
  background: var(--interactive-hover);
  border-color: var(--primary);
  color: var(--primary);
}

/* ===========================================================
   Responsive Nav Collapse (<= 1024px): mobile & tablet viewports
   =========================================================== */
@media (max-width: 1024px) {
  nav {
    padding: 0 12px;
    flex-wrap: nowrap;
  }

  nav .nav-links,
  nav > ul {
    display: none !important;
  }

  nav .theme-toggle {
    margin-left: auto;
    margin-right: 8px;
    font-size: 0 !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
  }

  nav .theme-toggle::before {
    content: "🌓";
    font-size: 1.15rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  html[data-theme="dark"] nav .theme-toggle::before {
    content: "🌙";
  }

  html[data-theme="light"] nav .theme-toggle::before {
    content: "☀️";
  }

  .nav-drawer {
    display: block;
  }

  .nav-drawer-panel {
    top: 0;
    right: 0;
    width: 78vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    padding: 20px 16px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html[data-theme="light"] .nav-drawer-panel {
    background: rgba(255, 255, 255, 0.95);
  }

  .nav-drawer.open .nav-drawer-panel {
    transform: translateX(0);
  }

  .nav-drawer-primary {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }

  .nav-drawer-panel a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 8px;
    transition: background 0.15s ease;
  }

  .nav-drawer-panel a:hover,
  .nav-drawer-panel a:active {
    background: var(--interactive-hover);
  }

  .nav-drawer-panel a.active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
  }

  .nav-drawer-subscription {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .nav-drawer .drawer-foot {
    display: flex;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-direction: column;
    gap: 8px;
  }

  .nav-drawer .drawer-foot a,
  .nav-drawer .drawer-foot button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
  }

  body.nav-drawer-open,
  body.chart-modal-open {
    overflow: hidden;
  }
}

/* ===========================================================
   D-01: 8-link admin navs collapse earlier. 8 links + logo +
   toggles don't fit 1025–1280px viewports, so nav.nav-8col hides
   its link row at 1280px (the hamburger + dropdown drawer, which
   work at any width, take over). 6-link pages keep the 1024px
   collapse above.
   =========================================================== */
@media (max-width: 1280px) {
  nav.nav-8col > ul {
    display: none !important;
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

h1 {
  color: var(--text);
  font-size: 2.25rem;
}

.login {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.login:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

.logout {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  font-family: inherit;
}

.logout:hover {
  background: var(--error-bg);
  border-color: var(--error-text);
  color: var(--error-text);
}

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.section:hover {
  border-color: var(--primary-glow);
}

/* D-15: the full lift+glow hover is opt-in for clickable cards so
   dense pages (admin, subscription) read calm. */
.section.clickable:hover {
  border-color: var(--primary-glow);
  box-shadow: 0 6px 20px var(--interactive-hover);
}

.section h2 {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 1.25rem;
  font-weight: 600;
}

.welcome-text {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  font-family: inherit;
}

.theme-toggle:hover {
  background: var(--interactive-hover);
  border-color: var(--primary-glow);
  color: var(--primary-hover);
}

table {
  width: 100%;
}

.dataTables_wrapper {
  margin-top: 10px;
}

/* ===========================================================
   D-02: DataTables 2.x ships its own prefers-color-scheme dark
   mode, which ignores the app's data-theme attribute toggle
   (OS-light + app-dark rendered light controls on dark cards).
   These attribute-keyed overrides keep DataTables chrome on the
   app tokens in both themes.
   =========================================================== */
[data-theme="dark"] .dataTables_wrapper {
  color: var(--text);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 10px;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: var(--text-muted);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-muted) !important;
  border: 1px solid transparent;
  border-radius: 4px;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--interactive-hover);
  border-color: var(--primary);
  color: var(--primary) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-muted) !important;
  opacity: 0.4;
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] table.dataTable thead th {
  color: var(--text);
  border-bottom-color: var(--border);
}

[data-theme="dark"] table.dataTable tbody tr {
  background-color: transparent;
}

[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--interactive-hover);
}

/* ===========================================================
   D-05: long tables keep headers visible while scrolling. The
   background is required so rows slide underneath opaquely.
   =========================================================== */
.table-scroll thead th,
.grid-cards-container thead th,
.analysis-article thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

/* D-06: numeric columns align right with tabular figures. */
.num,
th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* D-07: shared 12px density for DataTables grids (matches the
   hand-rolled simulations tables). */
table.dataTable th,
table.dataTable td {
  padding: 12px;
}

/* D-10: theme-aware keyboard focus ring (mouse users unaffected). */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===========================================================
   D-09: print. Trading logs and reports print as light,
   ink-light documents: chrome hidden, tables expanded.
   =========================================================== */
@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #111111;
    --text-muted: #444444;
    --border: rgba(0, 0, 0, 0.2);
  }

  body {
    background: #ffffff;
    padding: 0;
  }

  nav,
  #nav-drawer,
  .toast-container,
  .busy-overlay,
  .dataTables_paginate,
  .dataTables_filter,
  .dataTables_length,
  .table-scroll-hint,
  .build-info-footer,
  .form-actions,
  .actions-cell,
  th.actions-col,
  td.actions-cell {
    display: none !important;
  }

  .container {
    max-width: 100%;
  }

  .section {
    box-shadow: none;
    break-inside: avoid;
    border: 1px solid #cccccc;
  }

  table {
    font-size: 0.8rem;
  }

  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
  }
}

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 30px;
}

.loading {
  opacity: 0.5;
}

.form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 150px;
}

.form-group label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.form-group input,
.form-group select {
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 0.9rem;
  background: var(--input-bg);
  color: var(--text);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group button {
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.form-group button:hover {
  background: var(--primary-hover);
}

.message {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.message.success {
  background: var(--success-bg);
  color: var(--success-text);
}

.message.error {
  background: var(--error-bg);
  color: var(--error-text);
}

/* Toast notification */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: toast-slide-in 0.3s ease-out;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}

.toast.toast-success {
  border-left: 4px solid var(--primary);
}

.toast.toast-error {
  border-left: 4px solid #ff6b6b;
}

.toast.toast-warning {
  border-left: 4px solid #f0a030;
}

.toast-title {
  font-weight: 600;
  font-size: 0.925rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-detail {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.toast-dismiss {
  margin-left: auto;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  background: none;
  border: none;
  padding: 0 4px;
}

.toast-dismiss:hover {
  color: var(--text);
}

@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast.toast-exit {
  animation: toast-slide-out 0.25s ease-in forwards;
}

@keyframes toast-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Label-as-button for best-params triggers */
.form-group button.label-btn {
  background: none;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline;
  line-height: inherit;
}

.form-group button.label-btn:hover {
  color: var(--primary);
  text-decoration: underline;
}

.form-group button.label-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Split button group styles */
.split-btn-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}

.split-btn-group > .mobile-hidden {
  display: inline-flex;
  align-items: stretch;
}

.split-btn-main {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.split-btn-caret {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 0 10px !important;
  min-width: unset !important;
  font-size: 0.8rem !important;
}

.split-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  z-index: 50;
  margin-bottom: 8px;
  min-width: 180px;
  max-width: 280px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.split-dropdown a {
  padding: 10px 16px;
  color: var(--text, #f8fafc);
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.2s;
}

.split-dropdown a:hover {
  background: var(--primary, #3b82f6);
  color: white;
}

/* M-10: overflow "More" menu. On desktop the toggle is hidden and
   the items render inline (identical to the old layout); on mobile
   (see mobile.css) the toggle appears and items become a dropdown
   so Import/Quantstats stay reachable instead of display:none. */
.overflow-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.overflow-menu-toggle {
  display: none;
}

.overflow-menu-items {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

/* Button icon styles */
.btn-icon {
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
  stroke-width: 2.5px;
  flex-shrink: 0;
}

/* Icon-only button styles */
.btn-icon-only {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 10px !important;
  min-width: unset !important;
}

/* Batch/runs action cells: lay out action buttons in a wrapping flex
   row so that when many admin buttons are present (view, rerun, export,
   delete) they wrap to a new line instead of overflowing the column or
   forcing the table wider than its container. The column width itself
   is reserved by the #batches-table th.actions-col / td.actions-cell
   rule below (min-width is enforced more reliably than max-width under
   table-layout:auto). */
.actions-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.actions-cell .btn-icon-only {
  margin-left: 0 !important;
}

/* Truncate long batch descriptions with an ellipsis instead of letting
   them expand the column and squeeze the Actions cell. The full text
   remains available via the native title tooltip. Capping the width
   guarantees the row stays on a single line with the Actions buttons. */
.batch-desc-cell,
#batches-table th.desc-col {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the header widths aligned with their body cells so the column
   boundaries stay stable across both sort orders, and reserve a fixed
   width for the Actions column so all admin buttons fit on one line. */
#batches-table th.roi-col {
  width: 110px;
  white-space: nowrap;
}

#batches-table th.desc-col {
  width: 460px;
}

#batches-table th.actions-col,
#batches-table td.actions-cell {
  min-width: 200px;
  width: 200px;
  max-width: 220px;
}

#batches-table th.status-col,
#batches-table td.batch-status-cell,
#runs-table th.status-col,
#runs-table td.run-status-cell {
  width: 90px;
  max-width: 100px;
  text-align: center;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
}

.btn-icon-only .btn-icon {
  margin-right: 0 !important;
}

/* Busy Overlay Styles */
.busy-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(245, 245, 245, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

[data-theme="dark"] .busy-overlay {
  background: rgba(26, 26, 46, 0.8);
}

.busy-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.busy-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.busy-overlay.active .busy-overlay-content {
  transform: translateY(0);
}

/* Honeycomb/Bee themed spinner style - premium, beautiful, dynamic */
.busy-overlay-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.busy-overlay-spinner::before,
.busy-overlay-spinner::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border-radius: 50%;
  border: 4px solid transparent;
}

.busy-overlay-spinner::before {
  top: 0; left: 0; right: 0; bottom: 0;
  border-top-color: var(--primary);
  border-left-color: var(--primary);
  animation: spin-clockwise 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.busy-overlay-spinner::after {
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border-bottom-color: var(--success-text);
  border-right-color: var(--success-text);
  animation: spin-counter 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

/* Pulsing honeycomb middle dot or core */
.busy-overlay-core {
  width: 24px;
  height: 24px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--primary-glow);
  animation: pulse-core 1.5s ease-in-out infinite;
}

.busy-overlay-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes spin-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-counter {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes pulse-core {
  0%, 100% { transform: scale(0.85); opacity: 0.7; box-shadow: 0 0 5px var(--primary-glow); }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 20px var(--primary-glow); }
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Modals & Hidden Utilities */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-content {
  background: var(--surface, #1e293b);
  padding: 24px;
  border-radius: 8px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border, #334155);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #334155);
  padding-bottom: 12px;
}
.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-family: 'Outfit', sans-serif;
  color: var(--text, #f8fafc);
}
.close-btn {
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  transition: color 0.2s;
}
.close-btn:hover {
  color: var(--text, #f8fafc);
}
.hidden {
  display: none !important;
}

.mobile-only {
  display: none !important;
}

/* Empirical Strategy Insights Styling */
.insights-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.06) 0%, rgba(251, 191, 36, 0.08) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 36px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .insights-hero {
  background: linear-gradient(135deg, rgba(77, 171, 247, 0.1) 0%, rgba(251, 191, 36, 0.06) 100%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot-anim 2s infinite;
}

@keyframes pulse-dot-anim {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--text) 30%, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 850px;
  line-height: 1.5;
}

.insights-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

.section-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.section-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.lead-text {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--text);
}

/* Data Table & Recommendations */
.grid-cards-container {
  overflow-x: auto;
  margin-bottom: 24px;
}

.insights-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.insights-table th {
  background: rgba(0, 123, 255, 0.05);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--border);
}
[data-theme="dark"] .insights-table th {
  background: rgba(77, 171, 247, 0.08);
}

.insights-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.insights-table tr:last-child td {
  border-bottom: none;
}

.goal-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.goal-yield {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.goal-safety {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.goal-alpha {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.ticker-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: normal;
  display: block;
}

.perf-metric {
  font-size: 0.9rem;
  line-height: 1.4;
}

.highlight-val {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
}

.metric-note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Winning Strategy Card */
.winning-strategy-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.08);
}

.highlight-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.winning-strategy-card h3 {
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 6px;

}

.winning-strategy-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.winning-strategy-card strong {
  color: var(--text);
}

/* Chart Card & Highlights Grid */
.chart-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.chart-header h3 {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 4px;
}

.chart-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.highlight-item-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlight-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.item-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.badge-consistency { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.badge-yield { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.badge-stable { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.highlight-item-card h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text);
}

.pair-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: normal;
}

.highlight-item-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* How It Works Grid */
.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  position: relative;
}

.step-number {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--primary);
  opacity: 0.8;
  margin-bottom: 12px;
}

.step-card h4 {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 8px;
}

.step-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Next Steps & CTAs */
.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.next-step-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.next-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.next-step-card.prominent-cta {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(251, 191, 36, 0.12) 100%);
  border: 2px solid var(--primary);
  box-shadow: 0 6px 24px rgba(0, 123, 255, 0.15);
}

.next-step-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.next-step-card h4 {
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 8px;
}

.next-step-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-cta-glow {
  background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
  color: #ffffff;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4);
}

.btn-cta-glow:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
}

/* Risk Warning Banner */
.risk-warning-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 28px;
  text-align: center;
}

.risk-warning-banner p {
  color: #dc2626;
  font-size: 0.9rem;
  margin: 0;
}
[data-theme="dark"] .risk-warning-banner p {
  color: #f87171;
}

/* ==========================================================================
   Analysis & Commentary Hub Layout & Typography
   ========================================================================== */

.analysis-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.analysis-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.analysis-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.analysis-stat-card .stat-number {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
}

.analysis-stat-card .stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analysis-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 28px;
  align-items: flex-start;
}

.analysis-sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.analysis-sidebar::-webkit-scrollbar {
  width: 5px;
}

.analysis-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.sidebar-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: block;
}

/* M-08: the collapsible TOC <summary> is a mobile-only control —
   hidden on desktop where the sidebar is always expanded. */
.analysis-toc-summary {
  display: none;
}

.sidebar-search-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#table-search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#table-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}

.search-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.quick-jump-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jump-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.jump-pill:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--interactive-hover);
}

.jump-pill.highlight-pill {
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
  border-color: rgba(251, 191, 36, 0.4);
}

[data-theme="dark"] .jump-pill.highlight-pill {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.toc-container ul {
  list-style: none;
  padding-left: 12px;
  margin: 0;
  border-left: 2px solid var(--border);
}

.toc-container > ul {
  padding-left: 0;
  border-left: none;
}

.toc-container li {
  margin: 6px 0;
  line-height: 1.35;
}

.toc-container a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  display: block;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.toc-container a:hover {
  color: var(--primary);
  background: var(--interactive-hover);
}

.toc-container a.toc-active {
  color: var(--primary);
  font-weight: 700;
  background: var(--interactive-hover);
  border-left: 3px solid var(--primary);
  padding-left: 8px;
}

.back-to-top-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-to-top-btn:hover {
  color: var(--text);
  border-color: var(--primary);
  background: var(--interactive-hover);
}

/* Analysis Main Article / Markdown Formatting */
.analysis-main-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 42px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  min-width: 0;
}

.analysis-article {
  color: var(--text);
  line-height: 1.68;
  font-size: 0.95rem;
}

.analysis-article h1,
.analysis-article h2,
.analysis-article h3,
.analysis-article h4 {
  color: var(--text);
  scroll-margin-top: 30px;
}

.analysis-article h1 {
  font-size: 1.85rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 24px;
}

.analysis-article h2 {
  font-size: 1.45rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-top: 36px;
  margin-bottom: 16px;
  color: var(--primary);
}

.analysis-article h3 {
  font-size: 1.2rem;
  margin-top: 28px;
  margin-bottom: 12px;
}

.analysis-article h4 {
  font-size: 1.05rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

.analysis-article p {
  margin-bottom: 14px;
}

.analysis-article ul,
.analysis-article ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.analysis-article li {
  margin-bottom: 6px;
}

.analysis-article hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}

.analysis-article blockquote {
  background: var(--bg);
  border-left: 4px solid var(--primary);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  color: var(--text-muted);
}

.analysis-article pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  overflow-x: auto;
  margin: 18px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.analysis-article code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--primary);
}

.analysis-article pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
}

/* Enhanced Table Styling */
.analysis-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px 0;
  font-size: 0.875rem;
  display: block;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.analysis-article th {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.analysis-article td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

.analysis-article tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

[data-theme="dark"] .analysis-article tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.analysis-article tbody tr:hover {
  background: var(--interactive-hover);
}

@media (max-width: 1024px) {
  .analysis-layout {
    grid-template-columns: 1fr;
  }
  .analysis-sidebar {
    position: static;
    max-height: none;
  }
  .analysis-main-pane {
    padding: 24px 20px;
  }
}

/* Quota Widget */
.quota-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  line-height: 1.2;
}

.quota-widget.quota-exceeded {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* ===========================================================
   D-12: one-click subscription link on wide desktops. Hidden
   below 1400px where the drawer (≤1024px) and the hamburger
   dropdown take over.
   =========================================================== */
.nav-sub-desktop {
  display: none;
}

@media (min-width: 1400px) {
  .nav-sub-desktop {
    display: list-item;
  }
}

/* D-11: ultrawide viewports get a wider column. */
@media (min-width: 1800px) {
  .container {
    max-width: 1600px;
  }
}