/*
 * Gunung Kawi UI System v1
 * ------------------------
 * Canonical compatibility layer for the compiled frontend bundle.
 * Keep cross-page tokens and layout fixes here. Do not add page-specific
 * inline styles or duplicate theme patches elsewhere.
 */

:root {
  --gk-font-ui: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gk-font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --gk-radius-sm: 4px;
  --gk-radius-md: 6px;
  --gk-control-h: 38px;
  --gk-focus: #22d3ee;
  --gk-positive: #17b985;
  --gk-negative: #e95870;
  --gk-warning: #d9a72e;
}

html:not([data-theme="light"]) {
  --gk-surface-0: #070b10;
  --gk-surface-1: #0a1117;
  --gk-surface-2: #0d171e;
  --gk-border: #263844;
  --gk-border-strong: #36505e;
  --gk-text: #e4edf2;
  --gk-muted: #8ca0ac;
  --gk-subtle: #718793;
}

html[data-theme="light"],
body.theme-light {
  --gk-surface-0: #f1f5f9;
  --gk-surface-1: #ffffff;
  --gk-surface-2: #f8fafc;
  --gk-border: #cbd5e1;
  --gk-border-strong: #94a3b8;
  --gk-text: #0f172a;
  --gk-muted: #475569;
  --gk-subtle: #64748b;
}

html,
body,
#root,
.app-shell,
.main,
.page {
  max-width: 100%;
}

body {
  color: var(--gk-text);
  font-family: var(--gk-font-ui);
  font-size: 14px;
  line-height: 1.5;
}

/* One shared geometry for cards, inputs and actions. */
.panel,
.stat-card,
.session-card,
.integration,
.module-empty,
.signal-intake,
.risk-management-scope > div {
  border-radius: var(--gk-radius-md) !important;
}

button,
input,
select,
textarea {
  border-radius: var(--gk-radius-sm) !important;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gk-focus) !important;
  outline-offset: 2px !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select {
  min-height: var(--gk-control-h);
}

.ghost-btn,
.wide-btn,
.primary-btn,
.strategy-actions button,
.preset-footer button,
.breaksolid-head-actions button,
.signal-intake form > button,
.ai-config-actions button,
.live-settings-grid button,
.global-risk form > button,
.risk-resume {
  min-height: var(--gk-control-h) !important;
  font-size: 10px !important;
}

.section-header {
  min-height: 68px;
  height: auto;
  gap: 16px;
}

.section-header h2 {
  font-size: 16px;
  line-height: 1.3;
}

.section-header > div > span,
.eyebrow,
.stat-card span,
.market-table .thead,
.signals-table .signal-head,
.paper-head {
  color: var(--gk-subtle) !important;
}

/* Fix the real Strategy Builder overflow: generic input width leaked into
   absolutely positioned switch checkboxes and made each checkbox 1440px wide. */
.breaksolid-switch {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

.breaksolid-switch input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: auto !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.breaksolid-switch span {
  flex: 0 0 28px;
}

.breaksolid-config,
.strategy-risk-grid,
.smart-config-grid,
.live-settings-grid {
  min-width: 0;
}

.breaksolid-block,
.breaksolid-block label,
.breaksolid-block input,
.breaksolid-block select,
.breaksolid-block textarea {
  min-width: 0;
}

/* Readability and semantic states. */
html:not([data-theme="light"]) .theme-toggle-btn {
  border: 1px solid var(--gk-border-strong) !important;
  background: var(--gk-surface-2) !important;
  color: var(--gk-text) !important;
}

html:not([data-theme="light"]) .theme-toggle-btn:hover {
  border-color: var(--gk-focus) !important;
  color: #ffffff !important;
}

.paper-row > em.loss,
.paper-row > em.floating_loss,
.signal-row > em.error,
.signal-row > em.risk_blocked {
  color: var(--gk-negative) !important;
  border-color: color-mix(in srgb, var(--gk-negative) 58%, transparent) !important;
}

.paper-row > em.win,
.paper-row > em.floating_win,
.signal-row > em.entered,
.signal-row > em.accepted {
  color: var(--gk-positive) !important;
  border-color: color-mix(in srgb, var(--gk-positive) 58%, transparent) !important;
}

.segmented button,
.mode-switch button,
.timeframe-picks button,
.chart-toolbar button,
.indicator-strip button {
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

/* The legacy Light theme gives every topbar button a 34px minimum height,
   while the mode container was only 30px. Keep the selector compact and make
   its inner geometry explicit so PAPER / DEMO / LIVE never cross the border. */
.mode-switch {
  height: 34px !important;
  padding: 2px !important;
  overflow: hidden;
}

html .top-actions .mode-switch button {
  height: 28px !important;
  min-height: 28px !important;
}

.segmented button.active,
.timeframe-picks button.selected,
.chart-toolbar button.active,
.indicator-strip button.active {
  box-shadow: inset 0 -2px 0 currentColor;
}

html[data-theme="light"] .segmented button.active,
body.theme-light .segmented button.active,
html[data-theme="light"] .timeframe-picks button.selected,
body.theme-light .timeframe-picks button.selected,
html[data-theme="light"] .chart-toolbar button.active,
body.theme-light .chart-toolbar button.active,
html[data-theme="light"] .indicator-strip button.active,
body.theme-light .indicator-strip button.active {
  background: #dff7fb !important;
  border-color: #0891b2 !important;
  color: #0e7490 !important;
}

/* Integrations has several legacy controls whose base colors were authored
   for the dark palette. Give every configuration surface an explicit Light
   contract so a generic selector or stale component state cannot reveal the
   dark background underneath. */
html[data-theme="light"] .ai-config form,
body.theme-light .ai-config form,
html[data-theme="light"] .ai-config-status,
body.theme-light .ai-config-status {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .ai-config label > span,
body.theme-light .ai-config label > span,
html[data-theme="light"] .ai-config-status span,
body.theme-light .ai-config-status span,
html[data-theme="light"] .ai-fallbacks > div:first-child,
body.theme-light .ai-fallbacks > div:first-child,
html[data-theme="light"] .ai-fallbacks p,
body.theme-light .ai-fallbacks p {
  color: #475569 !important;
}

html[data-theme="light"] .ai-config label input:not([type="checkbox"]),
body.theme-light .ai-config label input:not([type="checkbox"]),
html[data-theme="light"] .ai-config label select,
body.theme-light .ai-config label select,
html[data-theme="light"] .ai-config textarea,
body.theme-light .ai-config textarea,
html[data-theme="light"] .ai-fallbacks select,
body.theme-light .ai-fallbacks select,
html[data-theme="light"] .source-manager input,
body.theme-light .source-manager input,
html[data-theme="light"] .source-manager select,
body.theme-light .source-manager select {
  border-color: #94a3b8 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .ai-config input::placeholder,
body.theme-light .ai-config input::placeholder,
html[data-theme="light"] .ai-config textarea::placeholder,
body.theme-light .ai-config textarea::placeholder,
html[data-theme="light"] .source-manager input::placeholder,
body.theme-light .source-manager input::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

html[data-theme="light"] .ai-config .check,
body.theme-light .ai-config .check {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #1e293b !important;
}

html[data-theme="light"] .ai-config .check:hover,
body.theme-light .ai-config .check:hover {
  border-color: #0891b2 !important;
  background: #ecfeff !important;
}

html[data-theme="light"] .ai-config .check span,
body.theme-light .ai-config .check span {
  color: #1e293b !important;
}

html[data-theme="light"] .ai-config .check input,
body.theme-light .ai-config .check input {
  accent-color: #0891b2 !important;
}

html[data-theme="light"] .ai-fallbacks,
body.theme-light .ai-fallbacks,
html[data-theme="light"] .ai-analysis-box,
body.theme-light .ai-analysis-box,
html[data-theme="light"] .ai-analysis-metrics > *,
body.theme-light .ai-analysis-metrics > * {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

html[data-theme="light"] .ai-fallbacks b,
body.theme-light .ai-fallbacks b,
html[data-theme="light"] .ai-analysis-metrics strong,
body.theme-light .ai-analysis-metrics strong,
html[data-theme="light"] .ai-analysis-box p,
body.theme-light .ai-analysis-box p,
html[data-theme="light"] .ai-analysis-box ul,
body.theme-light .ai-analysis-box ul {
  color: #334155 !important;
}

html[data-theme="light"] .ai-fallbacks button,
body.theme-light .ai-fallbacks button,
html[data-theme="light"] .ai-config-actions button:last-child,
body.theme-light .ai-config-actions button:last-child {
  border-color: #94a3b8 !important;
  background: #ffffff !important;
  color: #334155 !important;
}

html[data-theme="light"] .ai-config-actions button:first-child,
body.theme-light .ai-config-actions button:first-child,
html[data-theme="light"] .ai-analysis-box button,
body.theme-light .ai-analysis-box button {
  border-color: #0e7490 !important;
  background: #e6f7fa !important;
  color: #0e6475 !important;
}

html[data-theme="light"] .source-message,
body.theme-light .source-message {
  border-color: #0891b2 !important;
  background: #ecfeff !important;
  color: #155e75 !important;
}

/* Legacy Soft Light rules make generic row spans transparent. The Paper/Live
   result meter uses nested spans, so its track and fill disappeared on mobile
   even though the percentage width was correct. Restore explicit semantic
   colors with enough thickness and contrast for touch-sized screens. */
html[data-theme="light"] .paper-move > span,
body.theme-light .paper-move > span {
  height: 5px !important;
  border: 1px solid #cbd5e1 !important;
  background: #e2e8f0 !important;
  box-sizing: border-box;
}

html[data-theme="light"] .paper-move > span > i,
body.theme-light .paper-move > span > i {
  background: #64748b !important;
}

html[data-theme="light"] .paper-move.profit > span > i,
body.theme-light .paper-move.profit > span > i {
  background: #059669 !important;
}

html[data-theme="light"] .paper-move.risk > span > i,
body.theme-light .paper-move.risk > span > i {
  background: #e11d48 !important;
}

html[data-theme="light"] .paper-move.flat > span > i,
body.theme-light .paper-move.flat > span > i {
  background: #ca8a04 !important;
}

/* Trading Calendar: one visual contract for Paper, Bitget Demo and Live. */
.calendar-toolbar {
  min-height: 64px;
  margin-bottom: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.calendar-mode {
  flex: 0 0 auto;
}

.calendar-toolbar-groups {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-view-switch {
  flex: 0 0 auto;
}

.calendar-period-picker {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--gk-border-strong);
  border-radius: 4px;
  outline: 0;
  background: var(--gk-surface-0);
  color: var(--gk-text);
  color-scheme: dark;
  font: 750 12px var(--gk-font-data);
  text-align: center;
}

.calendar-period-picker:focus {
  border-color: var(--gk-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gk-focus) 18%, transparent);
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-month-nav > div {
  min-width: 214px;
  text-align: center;
}

.calendar-picker-shell {
  display: grid;
  gap: 5px;
}

.calendar-single-field,
.calendar-range-field {
  display: grid;
  gap: 5px;
}

.calendar-single-field > span,
.calendar-range-field > span {
  color: var(--gk-subtle);
  font: 800 10px var(--gk-font-data);
  letter-spacing: 0.08em;
  text-align: left;
}

.calendar-period-summary {
  margin-top: 0 !important;
  color: var(--gk-muted) !important;
  font: 750 10px var(--gk-font-data) !important;
  letter-spacing: 0.02em !important;
  text-align: center;
  text-transform: capitalize;
}

.calendar-month-range-nav > .calendar-picker-shell {
  min-width: 400px;
}

.calendar-month-range-nav .calendar-picker-shell {
  grid-template-columns: minmax(150px, 1fr) 30px minmax(150px, 1fr);
  align-items: end;
  gap: 10px;
}

.calendar-range-separator {
  min-height: 40px;
  display: grid;
  place-items: center;
  color: var(--gk-subtle);
  font: 800 10px var(--gk-font-data);
  font-style: normal;
}

.calendar-month-nav strong,
.calendar-month-nav small {
  display: block;
}

.calendar-month-nav strong {
  color: var(--gk-text);
  font-size: 13px;
  text-transform: uppercase;
}

.calendar-month-nav small {
  margin-top: 3px;
  color: var(--gk-subtle);
  font: 700 8px var(--gk-font-data);
  letter-spacing: 0.08em;
}

.calendar-month-nav button,
.calendar-refresh {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--gk-border-strong);
  background: var(--gk-surface-2);
  color: var(--gk-text);
  font: 800 10px var(--gk-font-data);
  cursor: pointer;
}

.calendar-month-nav button:not(.calendar-today) {
  font-size: 20px;
  line-height: 1;
}

.calendar-month-nav .calendar-today {
  padding-inline: 12px;
  font-size: 10px;
}

.calendar-sync-warning {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--gk-warning) 55%, transparent);
  border-left-width: 3px;
  background: color-mix(in srgb, var(--gk-warning) 10%, var(--gk-surface-1));
  color: var(--gk-warning);
  font-size: 11px;
}

.calendar-stats {
  margin-bottom: 14px;
}

.trading-calendar {
  overflow: hidden;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-range-calendars {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  align-items: start;
  gap: 14px;
  background: var(--gk-surface-0);
}

.calendar-range-month {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gk-border);
  border-radius: 4px;
  background: var(--gk-surface-1);
}

.calendar-range-month > h3 {
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--gk-border);
  background: var(--gk-surface-2);
  color: var(--gk-text);
  font: 800 12px var(--gk-font-data);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-range-month .calendar-day {
  min-height: 88px;
}

.calendar-range-month .calendar-grid .calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-weekdays {
  border-bottom: 1px solid var(--gk-border);
  background: var(--gk-surface-2);
}

.calendar-weekdays span {
  min-height: 36px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--gk-border);
  color: var(--gk-subtle);
  font: 800 9px var(--gk-font-data);
  letter-spacing: 0.08em;
}

.calendar-weekdays span:last-child {
  border-right: 0;
}

.calendar-day {
  min-width: 0;
  min-height: 108px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 0;
  border-right: 1px solid var(--gk-border);
  border-bottom: 1px solid var(--gk-border);
  background: var(--gk-surface-1);
  color: var(--gk-text);
  text-align: left;
  cursor: pointer;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.outside {
  cursor: default;
  background: color-mix(in srgb, var(--gk-surface-2) 75%, var(--gk-surface-0));
}

.calendar-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.calendar-day header b {
  font: 800 12px var(--gk-font-data);
}

.calendar-day header span {
  color: var(--gk-subtle);
  font: 700 7px var(--gk-font-data);
}

.calendar-day > strong {
  margin-top: auto;
  font: 800 15px var(--gk-font-data);
}

.calendar-day > small {
  margin-top: 6px;
  color: var(--gk-subtle);
  font: 700 8px var(--gk-font-data);
}

.calendar-day.profit {
  box-shadow: inset 0 3px 0 var(--gk-positive);
  background: color-mix(in srgb, var(--gk-positive) 7%, var(--gk-surface-1));
}

.calendar-day.profit > strong {
  color: var(--gk-positive);
}

.calendar-day.loss {
  box-shadow: inset 0 3px 0 var(--gk-negative);
  background: color-mix(in srgb, var(--gk-negative) 7%, var(--gk-surface-1));
}

.calendar-day.loss > strong {
  color: var(--gk-negative);
}

.calendar-day.flat {
  box-shadow: inset 0 3px 0 var(--gk-warning);
}

.calendar-day.selected {
  outline: 2px solid var(--gk-focus) !important;
  outline-offset: -2px !important;
}

.calendar-day.empty .calendar-no-trade {
  margin-top: auto;
  opacity: 0.62;
}

.calendar-day-grid {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-day .calendar-day {
  min-height: 148px;
}

.calendar-day .calendar-day header b {
  font-size: 15px;
  text-transform: capitalize;
}

.calendar-day .calendar-day > strong {
  font-size: 24px;
}

.calendar-week-grid .calendar-day header b small {
  color: var(--gk-subtle);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-detail {
  margin-top: 14px;
  overflow: hidden;
}

.calendar-day-total {
  font: 800 13px var(--gk-font-data);
}

.calendar-day-total.profit {
  color: var(--gk-positive);
}

.calendar-day-total.loss {
  color: var(--gk-negative);
}

.calendar-day-total.flat {
  color: var(--gk-warning);
}

.calendar-detail-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.calendar-trade-head,
.calendar-trade-row {
  min-width: 940px;
  display: grid;
  grid-template-columns: 1.05fr 1.4fr 0.8fr 1fr 0.8fr 1fr 0.9fr;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

.calendar-trade-head {
  min-height: 38px;
  background: var(--gk-surface-2);
  color: var(--gk-subtle);
  font: 800 8px var(--gk-font-data);
  letter-spacing: 0.06em;
}

.calendar-trade-row {
  min-height: 56px;
  border-top: 1px solid var(--gk-border);
  color: var(--gk-muted);
  font: 700 10px var(--gk-font-data);
}

.calendar-trade-row strong,
.calendar-trade-row strong small {
  display: block;
}

.calendar-trade-row strong {
  color: var(--gk-text);
}

.calendar-trade-row strong small {
  margin-top: 4px;
  font-size: 8px;
}

.calendar-trade-row em {
  color: var(--gk-subtle);
  font-style: normal;
  overflow-wrap: anywhere;
}

.calendar-detail-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--gk-subtle);
  font-size: 11px;
}

html[data-theme="light"] .calendar-month-nav button,
body.theme-light .calendar-month-nav button,
html[data-theme="light"] .calendar-refresh,
body.theme-light .calendar-refresh {
  border-color: #b8c7d4 !important;
  background: #ffffff !important;
  color: #1e293b !important;
}

html[data-theme="light"] .calendar-period-picker,
body.theme-light .calendar-period-picker {
  border-color: #b8c7d4 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  color-scheme: light;
}

@media (max-width: 760px) {
  .calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-mode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .calendar-toolbar-groups {
    display: grid;
    grid-template-columns: 1fr;
  }

  .calendar-view-switch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-month-nav {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .calendar-month-nav > div {
    min-width: 0;
  }

  .calendar-month-nav .calendar-today {
    grid-column: 1 / -1;
  }

  .calendar-month-range-nav > .calendar-picker-shell {
    min-width: 0;
  }

  .calendar-month-range-nav .calendar-picker-shell {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }

  .calendar-range-separator {
    min-height: 18px;
  }

  .calendar-period-picker {
    min-height: 42px;
    font-size: 12px;
  }

  .calendar-range-calendars {
    padding: 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .calendar-range-month .calendar-day {
    min-height: 70px;
  }

  .calendar-weekdays span {
    min-height: 32px;
    font-size: 7px;
  }

  .calendar-day {
    min-height: 78px;
    padding: 7px 5px;
  }

  .calendar-day header b {
    font-size: 10px;
  }

  .calendar-day header span {
    display: none;
  }

  .calendar-day > strong {
    font-size: clamp(8px, 2.5vw, 11px);
    white-space: nowrap;
  }

  .calendar-day > small {
    font-size: 6px;
    white-space: nowrap;
  }

  .calendar-day.empty .calendar-no-trade {
    display: none;
  }

  .calendar-day .calendar-day {
    min-height: 116px;
    padding: 10px;
  }

  .calendar-day .calendar-day header b {
    font-size: 12px;
  }

  .calendar-day .calendar-day > strong {
    font-size: 20px;
  }
}

/* Tables remain complete on narrow screens; horizontal scrolling is explicit
   instead of silently clipping status and action columns. */
.signals-table,
.paper-table,
.live-table,
.analytics-table,
.breaksolid-ledger,
.polaris-ledger {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.paper-table,
.signals-table {
  overflow-x: auto !important;
}

.legacy-live-order-panel {
  display: none !important;
}

.live-ledger-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-ledger-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
}

.live-ledger-scroll > .live-table {
  min-width: 848px;
  max-width: none;
  overflow: visible;
}

/* Soft Light previously used overflow:hidden!important on the table itself,
   which disabled touch scrolling on narrow screens. Keep vertical clipping
   while explicitly restoring horizontal pan for both theme markers. */
html[data-theme="light"] .paper-table,
body.theme-light .paper-table {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.paper-collapse-toggle,
.paper-ledger-tabs button,
.paper-pagination button {
  border: 1px solid #334956;
  background: #0d171e;
  color: #a9bac2;
  font: 800 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.paper-collapse-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.paper-collapse-toggle span,
.paper-ledger-tabs button span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid #3d5966;
  color: #73e2d4;
  font-size: 8px;
}

.paper-ledger-collapsed {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border: 0;
  border-top: 1px solid #1f3039;
  background: #0b141a;
  color: #758a95;
  text-align: left;
  cursor: pointer;
}

.paper-ledger-collapsed strong {
  color: #d8e5ea;
  font: 800 10px "IBM Plex Mono", monospace;
}

.paper-ledger-collapsed span {
  font-size: 11px;
}

.paper-ledger-toolbar,
.paper-pagination {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid #1f3039;
  background: #0a1218;
}

.paper-ledger-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.paper-ledger-tabs button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.paper-ledger-tabs button.active {
  border-color: #2f8f91;
  background: #123038;
  color: #80ede5;
}

.paper-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #718590;
  font: 800 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
}

.paper-page-size select {
  width: 64px;
  height: 32px;
  border: 1px solid #334956;
  background: #0d171e;
  color: #d4e0e5;
  padding: 0 7px;
  font: 700 10px "IBM Plex Mono", monospace;
}

.paper-pagination {
  border-top-color: #1f3039;
  color: #718590;
  font: 700 9px "IBM Plex Mono", monospace;
}

.paper-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paper-pagination button {
  min-width: 56px;
  min-height: 30px;
  padding: 0 9px;
}

.paper-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.paper-pagination b {
  min-width: 82px;
  color: #c6d4da;
  text-align: center;
}

html[data-theme="light"] .paper-collapse-toggle,
body.theme-light .paper-collapse-toggle,
html[data-theme="light"] .paper-ledger-tabs button,
body.theme-light .paper-ledger-tabs button,
html[data-theme="light"] .paper-pagination button,
body.theme-light .paper-pagination button,
html[data-theme="light"] .paper-page-size select,
body.theme-light .paper-page-size select {
  border-color: #b9c8d4 !important;
  background: #ffffff !important;
  color: #334155 !important;
}

html[data-theme="light"] .paper-ledger-tabs button.active,
body.theme-light .paper-ledger-tabs button.active {
  border-color: #0f8490 !important;
  background: #e4f6f6 !important;
  color: #0f6570 !important;
}

html[data-theme="light"] .paper-ledger-toolbar,
body.theme-light .paper-ledger-toolbar,
html[data-theme="light"] .paper-pagination,
body.theme-light .paper-pagination,
html[data-theme="light"] .paper-ledger-collapsed,
body.theme-light .paper-ledger-collapsed {
  border-color: #d7e0e8 !important;
  background: #f8fafc !important;
  color: #64748b !important;
}

html[data-theme="light"] .paper-ledger-collapsed strong,
body.theme-light .paper-ledger-collapsed strong,
html[data-theme="light"] .paper-pagination b,
body.theme-light .paper-pagination b {
  color: #1e293b !important;
}

@media (max-width: 600px) {
  .paper-ledger > .section-header {
    height: auto !important;
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex-wrap: nowrap;
  }

  .paper-collapse-toggle {
    min-height: 34px;
    padding-inline: 8px;
  }

  .paper-ledger-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .paper-ledger-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .paper-ledger-tabs button {
    justify-content: center;
  }

  .paper-page-size {
    justify-content: flex-end;
  }

  .paper-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .paper-pagination > div {
    justify-content: space-between;
  }

  .paper-ledger-collapsed {
    align-items: flex-start;
    flex-direction: column;
  }

  .live-ledger-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .live-ledger-actions .ghost-btn,
  .live-ledger-actions .paper-collapse-toggle {
    min-height: 34px;
  }
}

@media (max-width: 900px) {
  .page {
    padding: 22px 16px 40px !important;
  }

  .topbar {
    min-height: 60px;
    height: auto;
    padding: 8px 12px !important;
    gap: 8px;
  }

  .topbar > .mobile-menu {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }

  .topbar > .crumb {
    min-width: 0;
    flex: 1 1 auto;
  }

  .top-actions {
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px !important;
  }

  .terminal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .terminal-layout > .chart-panel,
  .terminal-layout > .order-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .chart-toolbar,
  .indicator-strip,
  .mcp-chart-actions,
  .bottom-tabs {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .topbar > .crumb {
    display: none !important;
  }

  .top-actions .status-chip {
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  .top-actions .status-chip span,
  .top-actions .icon-btn {
    display: none !important;
  }

  .theme-toggle-btn {
    position: relative;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
  }

  .theme-toggle-btn::before {
    content: "☾";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gk-text);
    font: 700 18px/1 var(--gk-font-ui);
  }

  html[data-theme="light"] .theme-toggle-btn::before,
  body.theme-light .theme-toggle-btn::before {
    content: "☀";
    color: #ffffff;
  }

  .mode-switch {
    height: 38px !important;
  }

  html .top-actions .mode-switch button {
    height: 32px !important;
    min-height: 32px !important;
    min-width: 42px;
    padding: 0 7px !important;
    font-size: 9px !important;
  }

  .avatar.logout {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .hero-row {
    margin-bottom: 22px;
    gap: 20px;
  }

  h1 {
    font-size: clamp(26px, 8vw, 32px);
  }

  .section-header {
    min-height: 64px;
    padding: 12px 14px !important;
    flex-wrap: wrap;
  }

  .stat-card {
    min-height: 106px;
    height: auto;
  }

  .signals-table .signal-head {
    display: grid !important;
  }

  .signals-table .signal-head,
  .signals-table .signal-row {
    min-width: 780px;
  }

  .paper-head,
  .paper-row {
    min-width: 980px !important;
  }

  .breaksolid-head {
    padding: 16px;
  }

  .breaksolid-head-actions {
    width: 100%;
  }

  .breaksolid-head-actions button {
    flex: 1 1 132px;
    justify-content: center;
  }

  .breaksolid-config,
  .breaksolid-kpis,
  .strategy-risk-grid,
  .smart-config-grid,
  .live-settings-grid {
    grid-template-columns: 1fr !important;
  }

  .breaksolid-block {
    padding: 14px;
  }

  button,
  .segmented button {
    min-height: 38px;
  }
}

@media (max-width: 430px) {
  .topbar {
    padding-inline: 8px !important;
  }

  .top-actions .status-chip {
    display: none;
  }

  .mode-switch button {
    min-width: 38px;
    padding-inline: 5px !important;
  }

  .page {
    padding-inline: 12px !important;
  }
}

/* Scanner analytics: the data source is an explicit, persistent view choice. */
.analytics-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.analytics-mode {
  flex: 0 0 auto;
}

.strategy-stats-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.strategy-stats-mode > strong,
.strategy-ursa-performance > h3 {
  margin: 0;
  color: var(--gk-text);
  font: 700 12px var(--gk-font-data);
}

.strategy-stats-mode > small {
  flex-basis: 100%;
  color: var(--gk-muted);
  font: 600 10px var(--gk-font-data);
}

.strategy-ursa-performance .breaksolid-period-stats {
  margin-top: 12px;
}

.analytics-sync-warning {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #725f24;
  border-left: 3px solid var(--yellow);
  background: #19160c;
  color: #d8c47f;
  font: 600 10px IBM Plex Mono;
  line-height: 1.5;
}

html[data-theme="light"] .analytics-sync-warning {
  border-color: #b8891d;
  background: #fff6dc;
  color: #6b4e10;
}

.analytics-collapse {
  min-width: 92px;
}

/* Signal Center keeps header and record columns on one shared grid. */
.signals-table .signal-head,
.signals-table .signal-row {
  min-width: 980px;
  display: grid;
  grid-template-columns: minmax(176px, 1.35fr) minmax(118px, 1fr) minmax(98px, .8fr) minmax(102px, .9fr) minmax(128px, 1.05fr) minmax(190px, 1.5fr);
  column-gap: 12px;
  align-items: center;
  padding-inline: 18px;
}

.signals-table .signal-head {
  min-height: 42px;
}

.signals-table .signal-row {
  min-height: 64px;
}

.signals-table .signal-head > span:nth-child(4),
.signals-table .signal-head > span:nth-child(5) {
  text-align: center;
}

.signals-table .signal-head > span:last-child {
  padding-left: 2px;
}

.signals-table .signal-row > span,
.signals-table .signal-row > strong,
.signals-table .signal-row > b,
.signals-table .signal-row > em,
.signals-table .signal-row > div {
  min-width: 0;
}

.signals-table .signal-row > b {
  text-align: center;
}

.signals-table .signal-row > em {
  justify-self: center;
}

.signal-pagination {
  min-width: 980px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  color: #718590;
  font: 700 9px IBM Plex Mono;
}

.signal-pagination button {
  min-width: 50px;
  height: 27px;
  border: 1px solid var(--line2);
  background: #0d171e;
  color: #9fb1b9;
  font: 700 8px IBM Plex Mono;
  cursor: pointer;
}

.signal-pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.analytics-pagination {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  color: #718590;
  font: 700 9px IBM Plex Mono;
}

.analytics-pagination button {
  height: 26px;
  min-width: 48px;
  border: 1px solid var(--line2);
  background: #0d171e;
  color: #9fb1b9;
  font: 700 8px IBM Plex Mono;
  cursor: pointer;
}

.analytics-pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .analytics-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .analytics-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-mode button {
    min-width: 0;
  }

  .analytics-pagination {
    justify-content: space-between;
  }

  .signal-pagination {
    justify-content: space-between;
  }
}