/* OneOfX application shell — shared visual layer for all authenticated pages. */
:root {
  --ox-sidebar-expanded-width: 244px;
  --ox-sidebar-width: var(--ox-sidebar-expanded-width);
  --ox-topbar-height: 68px;
  --ox-content-max: 1440px;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
}

body, body.dark-bg, body.dashboard-bg {
  background: var(--ox-bg-app);
  color: var(--ox-text-primary);
  font-family: var(--ox-font-family);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: normal;
}

.ox-topbar,
.ox-brand,
.ox-global-search,
.ox-topbar-actions,
.ox-user-chip,
.ox-user-copy,
.ox-sidebar .menu-link,
.ox-sidebar .menu-text,
.ox-sidebar-user,
.ox-sidebar-user b,
.ox-sidebar-user small,
.ox-mobile-nav,
.ox-mobile-nav a {
  font-family: var(--ox-font-family);
}

.top-navbar {
  height: var(--ox-topbar-height) !important;
  padding: 0 28px !important;
  background: var(--ox-bg-topbar) !important;
  border-bottom: 1px solid var(--ox-border-subtle) !important;
  box-shadow: none !important;
}

.top-navbar .logo { font-size: 26px; letter-spacing: -.04em; }
.top-navbar .logo-text {
  -webkit-text-fill-color: initial;
  color: var(--ox-text-primary);
  background: none;
  font-weight: 800;
}
.top-navbar .logo-text::after { content: ""; }
.top-navbar .logo-text + span { display: none; }
.top-navbar .logo::after { content: ""; display: none; }
.top-navbar .user-section { gap: 12px; color: var(--ox-text-secondary); font-size: 14px; }
.top-navbar .logout-btn { color: var(--ox-text-secondary); border-color: var(--ox-border-default); background: transparent; padding: 8px 12px; }
.top-navbar .logout-btn:hover { color: var(--ox-text-primary); background: var(--ox-surface-hover); }

.dashboard-layout { margin-top: var(--ox-topbar-height) !important; height: calc(100vh - var(--ox-topbar-height)) !important; }
.sidebar {
  width: var(--ox-sidebar-width) !important;
  top: var(--ox-topbar-height) !important;
  padding: 22px 12px !important;
  background: var(--ox-bg-sidebar) !important;
  border-right: 1px solid var(--ox-border-subtle) !important;
}
.sidebar-header { display: none; }
.sidebar-menu { display: grid; gap: 4px; }
.menu-item { margin: 0 !important; }
.menu-link {
  min-height: 46px;
  padding: 11px 14px !important;
  gap: 13px !important;
  color: var(--ox-text-secondary) !important;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
}
.menu-link::before { display: none; }
.menu-link:hover { color: var(--ox-text-primary) !important; background: var(--ox-surface-hover) !important; }
.menu-link.active { color: var(--ox-text-primary) !important; background: var(--ox-blue-soft) !important; border-color: rgba(242,201,76,.34); box-shadow: inset 3px 0 var(--ox-accent); }
.menu-icon { min-width: 20px !important; width: 20px !important; height: 20px !important; font-size: 19px !important; filter: saturate(.75); }
.menu-text { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.menu-section { margin-top: auto !important; padding-top: 18px !important; border-top-color: var(--ox-border-subtle) !important; }
.menu-section .sidebar-menu::before { content: "KONTO"; color: var(--ox-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 0 14px 8px; }

.main-content {
  padding: 0;
  margin-left: var(--ox-sidebar-width) !important;
  min-height: calc(100vh - var(--ox-topbar-height)) !important;
  background: transparent !important;
}
.container, .content-wrapper, .trading-container, .stats-container {
  width: min(100%, var(--ox-content-max));
  margin: 0;
  padding: 24px !important;
}
.page-header, .dashboard-header, .stats-header { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 24px !important; margin: 0 !important; }
.page-header h1, .dashboard-header h1, .stats-header h1 { color: var(--ox-text-primary) !important; background: none !important; -webkit-text-fill-color: initial !important; font-size: 28px !important; letter-spacing: -.035em; }
.page-header h1::first-letter { color: inherit; }
.page-header p, .dashboard-header p, .stats-header .subtitle { color: var(--ox-text-secondary) !important; }

.stat-card, .card, .chart-card, .bots-section, .bot-control-panel, .settings-card, .content-panel, .form-panel, .exchange-item, .info-box, .warning-box, .tabs-container, .tab-navigation {
  background: var(--ox-surface-1) !important;
  border: 1px solid var(--ox-border-default) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.stats-grid { gap: 16px !important; }
.stat-card { min-height: 120px; }
.stat-icon { background: var(--ox-blue-soft) !important; color: var(--ox-accent) !important; }
.stat-value { color: var(--ox-text-primary) !important; -webkit-text-fill-color: initial !important; background: none !important; }
.btn-primary, .primary-button, .apply-btn { background: var(--ox-accent) !important; border-color: var(--ox-accent) !important; color: #191C1F !important; -webkit-text-fill-color: #191C1F !important; box-shadow: none !important; }
.btn-secondary, .filter-btn, .tab-btn, .time-btn, .toggle-btn { border-color: var(--ox-border-default) !important; color: var(--ox-text-secondary) !important; background: var(--ox-surface-1) !important; }
.filter-btn.active, .tab-btn.active, .time-btn.active, .toggle-btn.active { color: var(--ox-accent) !important; background: var(--ox-blue-soft) !important; border-color: var(--ox-accent) !important; }
.btn-danger, .delete-btn, .btn-delete { color: var(--ox-bg-app) !important; background: var(--ox-danger) !important; }

.data-table, .trading-table, .bots-table { width: 100%; border-collapse: collapse; }
.data-table th, .trading-table th, .bots-table th { padding: 13px 14px; text-align: left; color: var(--ox-text-secondary); font-size: 12px; font-weight: 650; background: var(--ox-surface-2) !important; border-bottom: 1px solid var(--ox-border-subtle); }
.data-table td, .trading-table td, .bots-table td { padding: 14px; border-bottom: 1px solid var(--ox-border-subtle); color: var(--ox-text-primary); }
.data-table tr:hover td, .trading-table tr:hover td, .bots-table tr:hover td { background: rgba(255,255,255,.025); }
.table-container { border: 1px solid var(--ox-border-subtle); border-radius: 8px; overflow: auto; }

.ox-status, .status-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 10px; border-radius: 7px; font-size: 13px; font-weight: 700; }
.ox-status::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 100%; background: currentColor; }
.ox-status.running { color: var(--ox-success); background: var(--ox-success-soft); }
.ox-status.stopped { color: var(--ox-text-muted); background: rgba(129,147,165,.12); }
.ox-mode { display: inline-flex; border: 1px solid var(--ox-border-default); border-radius: 6px; color: var(--ox-text-muted); padding: 4px 8px; font-size: 12px; font-weight: 750; letter-spacing: .04em; }
.bot-row-actions { display: flex; gap: 7px; justify-content: flex-end; }
.bot-row-actions button { min-width: 34px; min-height: 34px; border: 1px solid var(--ox-border-default); color: var(--ox-text-secondary); background: var(--ox-surface-1); border-radius: 7px; cursor: pointer; }
.bot-row-actions button:hover { color: var(--ox-accent); border-color: var(--ox-accent); background: var(--ox-surface-hover); }
.bot-row-actions .danger:hover { border-color: var(--ox-danger); color: var(--ox-danger); }
.bot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px; }
.bot-toolbar input { width: min(100%, 330px); min-height: 40px; padding: 9px 13px; border-radius: 8px; }
.toolbar-note, .table-meta { color: var(--ox-text-muted); font-size: 12px; }
.align-right { text-align: right !important; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bots-grid .empty-state { margin: 14px; min-height: 210px; }

.bot-wizard-progress { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 6px 0 22px; }
.bot-wizard-step { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ox-text-muted); font-size: 12px; font-weight: 650; }
.bot-wizard-step::before { content: attr(data-step); display: grid; place-items: center; flex: 0 0 34px; inline-size: 34px; block-size: 34px; border: 1px solid var(--ox-border-default); border-radius: 50%; color: var(--ox-text-secondary); background: var(--ox-surface-1); }
.bot-wizard-step.active { color: var(--ox-blue-400); }
.bot-wizard-step.active::before { color: #191C1F; border-color: var(--ox-accent); background: var(--ox-accent); box-shadow: 0 0 0 5px var(--ox-blue-soft); }
.bot-wizard-step small { display: block; font-weight: 450; color: var(--ox-text-muted); margin-top: 2px; }
.tab-navigation { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px !important; margin-bottom: 18px; }
.ox-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ox-tabs .tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab-panel[hidden] { display: none !important; }
.tab-button { border: 1px solid transparent !important; border-radius: 7px !important; background: transparent !important; color: var(--ox-text-secondary) !important; }
.tab-button.active { background: var(--ox-blue-soft) !important; border-color: rgba(242,201,76,.32) !important; color: var(--ox-accent) !important; }
.info-box { border-left: 3px solid var(--ox-blue-500) !important; color: var(--ox-text-secondary) !important; }
.warning-box { color: var(--ox-text-secondary) !important; background: var(--ox-warning-soft) !important; border-color: rgba(245,184,75,.3) !important; border-left: 3px solid var(--ox-warning) !important; }
.warning-box :where(h3, strong) { color: var(--ox-warning) !important; }
.notification { border: 1px solid var(--ox-border-default); box-shadow: var(--ox-shadow-soft); }

@media (max-width: 900px) {
  :root { --ox-sidebar-width: 72px; }
  .sidebar { padding-inline: 9px !important; }
  .menu-link { justify-content: center; padding-inline: 8px !important; }
  .menu-text, .menu-section .sidebar-menu::before { display: none; }
  .top-navbar .logo::after, .top-navbar .user-section > span { display: none; }
}
@media (max-width: 680px) {
  :root { --ox-sidebar-width: 0px; }
  .sidebar { left: -246px; width: 246px !important; }
  .sidebar.mobile-open { left: 0; }
  .menu-text { display: block; }
  .menu-link { justify-content: flex-start; }
  .container, .content-wrapper, .trading-container, .stats-container { padding: 16px !important; }
  .bot-wizard-progress { grid-template-columns: 1fr 1fr; }
  .bot-toolbar { align-items: stretch; flex-direction: column; }
}

/* Screenshot-faithful application composition.  These selectors deliberately
   replace the former page-specific chrome instead of merely recolouring it. */
.ox-dashboard-page .welcome-section { display: flex; justify-content: space-between; align-items: end; margin: 0 0 24px; }
.ox-dashboard-page .welcome-section h1 { color: var(--ox-text-primary); font-size: 28px; letter-spacing: -.045em; }
.ox-dashboard-page .welcome-section p { color: var(--ox-text-secondary); margin-top: 5px; }
.ox-dashboard-page .stat-card { padding: 21px; }
.ox-dashboard-page .stat-header { float: right; }
.ox-dashboard-page .stat-label { color: var(--ox-text-secondary) !important; }
.ox-dashboard-page .stat-value { margin-top: 10px; font-size: 28px !important; }
.ox-dashboard-page .bot-toggle-btn { display: none !important; }
.ox-dashboard-page #live-logs-section,
.ox-dashboard-page #subscription-section { display: none !important; }

.ox-dashboard-page .dashboard-balance-list {
  display: grid;
  gap: 6px;
  max-height: 92px;
  overflow: auto;
  margin-top: 9px;
  font-size: 13px !important;
  line-height: 1.3;
}
.dashboard-balance-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; min-width: 0; }
.dashboard-balance-label { overflow: hidden; color: var(--ox-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-balance-value { flex: 0 0 auto; color: var(--ox-text-primary); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-balance-status { grid-column: 1 / -1; color: var(--ox-text-muted); font-size: 11px; }
.dashboard-kpi-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; font-size: 12px; line-height: 1.35; }
.dashboard-kpi-line > span { overflow: hidden; color: var(--ox-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-kpi-line > b { flex: 0 0 auto; color: var(--ox-text-primary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-pnl-overview { margin-top: 14px; padding: 18px 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.dashboard-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dashboard-section-heading h2 { margin: 0; color: var(--ox-text-primary); font-size: 18px; }
.dashboard-section-heading span { color: var(--ox-text-muted); font-size: 12px; }
.dashboard-pnl-table-wrap { margin-top: 12px; overflow-x: auto; }
.dashboard-pnl-table-wrap .data-table { min-width: 620px; }
.dashboard-pnl-table-wrap .data-table td { font-variant-numeric: tabular-nums; }
.dashboard-pnl-value.positive { color: var(--ox-success) !important; }
.dashboard-pnl-value.negative { color: var(--ox-danger) !important; }
.dashboard-chart-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dashboard-segment-group { display: flex; align-items: center; gap: 3px; max-width: 100%; padding: 3px; overflow-x: auto; background: var(--ox-surface-2); border: 1px solid var(--ox-border-subtle); border-radius: 6px; }
.dashboard-segment-group button { flex: 0 0 auto; min-width: 36px; min-height: 36px; padding: 0 9px; color: var(--ox-text-secondary); background: transparent; border: 0; border-radius: 4px; font-size: 12px; cursor: pointer; }
.dashboard-segment-group button:hover { color: var(--ox-text-primary); background: var(--ox-surface-hover); }
.dashboard-segment-group button[aria-pressed="true"] { color: var(--ox-text-primary); background: var(--ox-surface-3); box-shadow: inset 0 0 0 1px var(--ox-border-default); }
.dashboard-portfolio-chart { width: 100%; height: 235px; min-height: 235px; margin-top: 10px; overflow: hidden; }
.dashboard-portfolio-status { min-height: 18px; margin: 2px 0 0; color: var(--ox-text-muted); font-size: 12px; }

.dashboard-showcase { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; margin-top: 16px; }
.dashboard-showcase .ox-panel { min-height: 310px; padding: 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.ox-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ox-panel-head h2 { font-size: 18px; letter-spacing: -.02em; }
.ox-panel-head span { color: var(--ox-text-muted); font-size: 13px; }
.ox-chart-placeholder { position: relative; height: 226px; margin-top: 18px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(0deg, transparent 0, transparent 43px, rgba(175,181,181,.08) 44px), repeating-linear-gradient(90deg, transparent 0, transparent 99px, rgba(175,181,181,.06) 100px); }
.ox-chart-placeholder::after { content: "Portfolio-Historie wird nach bestätigten Buchungen angezeigt"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ox-text-muted); font-size: 13px; text-align: center; padding: 25px; }
.ox-market-list { margin-top: 15px; }
.ox-market-list li { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--ox-border-subtle); color: var(--ox-text-secondary); }
.ox-market-list li:last-child { border-bottom: 0; }
.ox-market-list b { color: var(--ox-text-primary); }
.ox-muted-value { color: var(--ox-text-muted); }
.ox-dashboard-bots { margin-top: 16px; padding: 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }

.ox-bots-page .stats-grid { display: none !important; }
.ox-bots-page .page-header { padding-bottom: 14px !important; }
.ox-bots-page .bots-section { padding: 16px !important; }
.ox-bots-page .section-header { padding: 0 0 16px; }
.ox-bots-page .footer { display: none; }
.ox-bots-page .table-container { margin: 0; }
.bot-quick-actions { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--ox-border-subtle); }
.bot-quick-actions h2 { margin: 0 0 12px; font-size: 17px; }
.bot-quick-actions > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-action-card { min-height: 78px; padding: 13px; text-align: left; color: var(--ox-text-primary); background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 9px; cursor: pointer; }
.quick-action-card:not(:disabled):hover { background: var(--ox-surface-hover); border-color: var(--ox-blue-500); }
.quick-action-card:disabled { opacity: .58; cursor: not-allowed; }
.quick-action-card b, .quick-action-card span { display: block; }
.quick-action-card span { margin-top: 5px; color: var(--ox-text-muted); font-size: 12px; font-weight: 400; }
.danger-action b { color: var(--ox-danger); }

.ox-wizard-page .stats-header { display: flex; align-items: end; justify-content: space-between; }
.ox-wizard-page .stats-tabs { margin-bottom: 18px; }
.ox-wizard-page .save-bar { position: static !important; border: 1px solid var(--ox-border-subtle) !important; background: var(--ox-surface-2) !important; border-radius: 8px !important; }
.ox-wizard-page .tab-content > .settings-card { padding: 24px !important; }

.ox-trading-page .dashboard-header { padding-bottom: 17px !important; }
.ox-trading-page .bot-control-panel { padding: 18px !important; }
.ox-trading-page .content-grid { margin-top: 16px; }
.live-trading-workbench { margin: 0 0 16px; overflow: hidden; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.live-market-bar { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--ox-border-subtle); color: var(--ox-text-secondary); font-size: 13px; }
.live-market-bar b { color: var(--ox-text-primary); font-size: 12px; }
.live-trading-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(285px, .72fr); }
.trading-chart-placeholder { min-height: 414px; padding: 20px; border-right: 1px solid var(--ox-border-subtle); }
.chart-empty-state { height: 330px; margin-top: 16px; display: grid; place-items: center; padding: 35px; text-align: center; color: var(--ox-text-muted); border: 1px dashed var(--ox-border-default); border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0, transparent 43px, rgba(175,181,181,.08) 44px), repeating-linear-gradient(90deg, transparent 0, transparent 99px, rgba(175,181,181,.06) 100px); }
.order-panel-placeholder { padding: 20px; }
.order-panel-placeholder h2 { font-size: 18px; margin-bottom: 16px; }
.order-panel-placeholder label { display: grid; gap: 7px; margin: 14px 0; color: var(--ox-text-secondary); font-size: 13px; font-weight: 650; }
.order-panel-placeholder select, .order-panel-placeholder input { min-height: 42px; padding: 9px 11px; }
.order-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.order-segments button { min-height: 39px; color: var(--ox-text-muted); background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 7px; }
.order-panel-placeholder .btn-primary { width: 100%; }
.ox-backtests-page .stats-header { padding-bottom: 18px !important; }
.ox-backtests-page .stats-tabs { margin-bottom: 18px; }
.backtest-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr); gap: 16px; margin-bottom: 16px; }
.backtest-config-card, .backtest-result-card { padding: 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.backtest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 14px; }
.backtest-fields label { display: grid; gap: 7px; color: var(--ox-text-secondary); font-size: 13px; font-weight: 650; }
.backtest-fields select, .backtest-fields input { min-height: 42px; padding: 9px 11px; }
.backtest-config-card .btn-primary:disabled { opacity: .48; cursor: not-allowed; }
.backtest-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.backtest-kpis div { padding: 13px; background: var(--ox-surface-2); border: 1px solid var(--ox-border-subtle); border-radius: 8px; }
.backtest-kpis span { display: block; color: var(--ox-text-muted); font-size: 12px; }
.backtest-kpis b { display: block; margin-top: 5px; font-size: 19px; color: var(--ox-text-primary); }
.backtest-chart-empty { display: grid; place-items: center; height: 122px; text-align: center; padding: 18px; color: var(--ox-text-muted); border: 1px dashed var(--ox-border-default); border-radius: 8px; }
.ox-system-page .page-header { text-align: left !important; }
.ox-system-page .container { max-width: 1220px; }
.ox-system-page footer { margin-left: var(--ox-sidebar-width); background: transparent !important; border-top: 1px solid var(--ox-border-subtle); }
.system-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 6px; overflow-x: auto; background: var(--ox-surface-1); border: 1px solid var(--ox-border-subtle); border-radius: 8px; }
.system-tabs button, .system-tabs a { flex: 1 0 max-content; min-height: 38px; padding: 8px 13px; color: var(--ox-text-secondary); background: transparent; border: 1px solid transparent; border-radius: 7px; text-align: center; text-decoration: none; font-size: 13px; }
.system-tabs button.active { color: var(--ox-accent); background: var(--ox-blue-soft); border-color: var(--ox-accent); }
.system-tabs button:disabled { opacity: .62; }

@media (max-width: 900px) {
  .dashboard-showcase { grid-template-columns: 1fr; }
  .backtest-workbench { grid-template-columns: 1fr; }
  .live-trading-grid { grid-template-columns: 1fr; }
  .trading-chart-placeholder { border-right: 0; border-bottom: 1px solid var(--ox-border-subtle); }
  .bot-quick-actions > div { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OneOfX Blue V1 — unified application shell and component system
   ========================================================================== */
:root {
  --ox-sidebar-width: 244px;
  --ox-topbar-height: 68px;
  --ox-content-max: 1440px;
  --ox-radius-sm: 8px;
  --ox-radius-md: 8px;
  --ox-radius-lg: 8px;
  --ox-action-primary: var(--ox-blue-500);
  --ox-surface-primary: var(--ox-bg-app);
  --ox-surface-elevated: var(--ox-surface-2);
  --ox-status-success: var(--ox-success);
  --ox-status-warning: var(--ox-warning);
  --ox-status-danger: var(--ox-danger);
}

html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ox-focus) !important;
  outline-offset: 2px;
}

.ox-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  display: grid;
  grid-template-columns: var(--ox-sidebar-width) minmax(280px, 620px) 1fr;
  align-items: center;
  height: var(--ox-topbar-height);
  min-height: var(--ox-topbar-height);
  background: var(--ox-bg-topbar);
  border-bottom: 1px solid var(--ox-border-subtle);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}
.ox-brand {
  align-self: stretch;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  padding: 11px 22px;
  color: var(--ox-text-primary);
  text-decoration: none;
  border-right: 1px solid var(--ox-border-subtle);
}
.ox-brand-mark {
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ox-blue-400);
  border-right-color: var(--ox-blue-700);
  border-radius: 8px 5px 10px 5px;
  color: var(--ox-blue-400);
  font-weight: 850;
  transform: rotate(-9deg);
}
.ox-brand-name { align-self: end; font-size: 23px; font-weight: 820; line-height: 1; letter-spacing: -.045em; }
.ox-brand-name span { color: var(--ox-blue-400); }
.ox-brand small { align-self: start; margin-top: 3px; color: var(--ox-text-muted); font-size: 9px; letter-spacing: .025em; }
.ox-mobile-menu { display: none; }

.ox-global-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 42px;
  margin-left: 24px;
  padding: 0 12px;
  background: var(--ox-input-bg);
  border: 1px solid var(--ox-border-default);
  border-radius: 9px;
}
.ox-global-search > svg { flex: 0 0 19px; width: 19px; fill: none; stroke: var(--ox-text-muted); stroke-width: 1.8; }
.ox-topbar .ox-global-search #oxGlobalSearch {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--ox-text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ox-global-search input::placeholder { color: var(--ox-text-muted); opacity: 1; }
.ox-global-search:focus-within { border-color: var(--ox-focus); box-shadow: 0 0 0 3px var(--ox-blue-soft); }
.ox-global-search kbd { padding: 3px 7px; color: var(--ox-text-muted); background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 5px; font-size: 10px; white-space: nowrap; }
.ox-search-results { position: absolute; inset: calc(100% + 8px) 0 auto; z-index: 140; padding: 7px; background: var(--ox-surface-2); border: 1px solid var(--ox-border-default); border-radius: 8px; box-shadow: var(--ox-shadow-soft); }
.ox-search-results a { display: flex; justify-content: space-between; gap: 18px; padding: 10px 11px; color: var(--ox-text-primary); text-decoration: none; border-radius: 7px; }
.ox-search-results a:hover { background: var(--ox-surface-hover); }
.ox-search-results a span, .ox-search-results p { color: var(--ox-text-muted); font-size: 12px; }

.ox-topbar-actions { justify-self: end; display: flex; align-items: center; gap: 10px; padding: 0 22px; }
.ox-connection-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; color: var(--ox-text-secondary); border: 1px solid var(--ox-border-subtle); border-radius: 8px; font-size: 12px; }
.ox-connection-pill i { width: 8px; height: 8px; background: var(--ox-success); border-radius: 50%; }
.ox-connection-pill.offline { color: var(--ox-warning); }
.ox-connection-pill.offline i { background: var(--ox-warning); }
.ox-connection-pill.offline span { font-size: 0; }
.ox-connection-pill.offline span::after { content: "Offline"; font-size: 12px; }
.ox-icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ox-text-secondary);
  background: transparent;
  border: 1px solid var(--ox-border-subtle);
  border-radius: 8px;
  cursor: pointer;
}
.ox-icon-button:hover { color: #fff; border-color: var(--ox-border-default); background: var(--ox-surface-hover); }
.ox-icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ox-user-chip { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 9px 4px 5px; color: var(--ox-text-primary); text-decoration: none; border-radius: 9px; }
.ox-user-chip:hover { background: var(--ox-surface-hover); }
.ox-user-avatar { display: grid; place-items: center; width: 34px; height: 34px; color: #191C1F; background: var(--ox-accent); border-radius: 50%; font-size: 13px; font-weight: 800; }
.ox-user-copy { display: grid; line-height: 1.2; }
.ox-user-copy b { font-size: 12px; }
.ox-user-copy small { color: var(--ox-text-muted); font-size: 10px; }

.dashboard-layout { margin-top: var(--ox-topbar-height) !important; min-height: calc(100vh - var(--ox-topbar-height)); height: auto !important; }
.sidebar.ox-sidebar {
  position: fixed;
  inset: var(--ox-topbar-height) auto 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: var(--ox-sidebar-width) !important;
  padding: 22px 12px 14px !important;
  overflow-y: auto;
  background: var(--ox-bg-sidebar) !important;
  border-right: 1px solid var(--ox-border-subtle) !important;
}
.sidebar.ox-sidebar::before, .sidebar.ox-sidebar::after { display: none !important; }
.ox-sidebar nav:first-child { flex: 0 0 auto; }
.ox-nav-label { margin: 0 14px 10px; color: var(--ox-text-muted); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.ox-sidebar .sidebar-menu { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ox-sidebar .menu-link { min-height: 46px; padding: 10px 13px !important; gap: 13px !important; border: 1px solid transparent; border-radius: 8px; transition: color .16s ease, background .16s ease, border-color .16s ease; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: normal !important; }
.ox-sidebar .menu-link.active { color: var(--ox-text-primary) !important; background: var(--ox-blue-soft) !important; border-color: rgba(242,201,76,.34) !important; box-shadow: inset 3px 0 var(--ox-accent); }
.ox-sidebar .menu-icon { width: 21px; height: 21px; min-width: 21px !important; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ox-sidebar .menu-text { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.ox-sidebar-secondary { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ox-border-subtle); }
.ox-sidebar-user { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; margin-top: 12px; padding: 11px; color: var(--ox-text-primary); text-decoration: none; border-top: 1px solid var(--ox-border-subtle); }
.ox-sidebar-user > span:nth-child(2) { display: grid; min-width: 0; }
.ox-sidebar-user b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ox-sidebar-user small { color: var(--ox-text-muted); font-size: 10px; }
.ox-mobile-nav { display: none; }

.main-content { margin-left: var(--ox-sidebar-width) !important; min-width: 0; min-height: calc(100vh - var(--ox-topbar-height)) !important; overflow: visible !important; }
.container, .content-wrapper, .trading-container, .stats-container { width: min(100%, var(--ox-content-max)); padding: 24px !important; }
.page-header, .dashboard-header, .stats-header { display: flex; justify-content: space-between; gap: 16px; min-height: 72px; align-items: center !important; }
.page-header h1, .dashboard-header h1, .stats-header h1 { margin: 0 0 5px !important; font-size: 28px !important; font-weight: 760 !important; line-height: 1.1; }
.page-header p, .dashboard-header p, .stats-header .subtitle { margin: 0 !important; max-width: 760px; font-size: 14px !important; }

.btn-primary, .primary-button, .apply-btn, button.btn-primary, a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  color: #191C1F !important;
  background: var(--ox-accent) !important;
  border: 1px solid var(--ox-accent) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled), .primary-button:hover:not(:disabled) { filter: brightness(1.09); transform: translateY(-1px); }
button:disabled, select:disabled, input:disabled { cursor: not-allowed !important; opacity: .55; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea {
  color: var(--ox-text-primary) !important;
  background: var(--ox-input-bg) !important;
  border: 1px solid var(--ox-border-default) !important;
  border-radius: 8px !important;
}
input::placeholder, textarea::placeholder { color: var(--ox-text-muted) !important; opacity: 1; }
.ox-topbar .ox-global-search #oxGlobalSearch {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
select option { color: var(--ox-text-primary) !important; background: var(--ox-surface-1) !important; }

.stat-card, .card, .chart-card, .bots-section, .bot-control-panel, .settings-card, .content-panel, .form-panel, .exchange-item, .backtest-config-card, .backtest-result-card, .live-trading-workbench, .ox-panel, .ox-dashboard-bots {
  background: var(--ox-surface-1) !important;
  border: 1px solid var(--ox-border-default) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
.stat-card { min-height: 116px !important; padding: 17px !important; }
.stat-card:hover { border-color: var(--ox-border-strong) !important; transform: none !important; }
.stat-label { color: var(--ox-text-secondary) !important; font-size: 12px !important; }
.stat-value { color: var(--ox-text-primary) !important; font-size: clamp(21px, 2vw, 28px) !important; }
.stat-change.positive, .positive { color: var(--ox-success) !important; }
.stat-change.negative, .negative { color: var(--ox-danger) !important; }

.data-table, .trading-table, .bots-table { table-layout: auto; }
.data-table th, .trading-table th, .bots-table th { height: 42px; padding: 10px 13px; white-space: nowrap; background: var(--ox-surface-2) !important; }
.data-table td, .trading-table td, .bots-table td { height: 54px; padding: 11px 13px; }
.table-container { background: var(--ox-surface-1); border-color: var(--ox-border-default); }

.ox-dashboard-page .welcome-section { min-height: 74px; padding: 0 0 24px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.ox-dashboard-page .welcome-section::before { display: none !important; }
.ox-dashboard-page .welcome-section h1 { margin: 0 0 5px !important; color: var(--ox-text-primary) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 28px !important; }
.ox-dashboard-page .dashboard-showcase { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); gap: 14px; margin-top: 14px; }
.ox-dashboard-page .ox-panel { min-height: 312px; padding: 20px; }
.ox-dashboard-page .dashboard-portfolio-chart { height: 235px; min-height: 235px; }
.ox-dashboard-page .ox-dashboard-bots { margin-top: 14px; }
.ox-dashboard-page #subscription-section { display: none !important; }
.ox-dashboard-page #live-logs-section { margin-top: 14px !important; padding: 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.ox-dashboard-page #live-logs-section > div:last-child { max-height: 230px !important; padding: 14px !important; background: var(--ox-input-bg) !important; border: 1px solid var(--ox-border-subtle) !important; box-shadow: none !important; }

.ox-bots-page .container { padding-top: 24px !important; }
.ox-bots-page .page-header { display: flex; justify-content: space-between; gap: 18px; }
.ox-bots-page .bots-section { padding: 14px !important; }
.ox-bots-page .section-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ox-bots-page .filter-buttons { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); min-width: min(100%, 540px); padding: 4px; background: var(--ox-surface-2); border: 1px solid var(--ox-border-subtle); border-radius: 8px; }
.ox-bots-page .filter-btn { min-height: 37px; border-radius: 6px !important; }
.ox-bots-page .bot-toolbar { margin-top: 12px; padding: 10px 0 14px; border-top: 1px solid var(--ox-border-subtle); }
.ox-bots-page .bot-toolbar input { padding-left: 39px; background-image: linear-gradient(45deg, transparent, transparent); }
.bot-quick-actions > div { grid-template-columns: repeat(2, 1fr); }
.quick-action-card { min-height: 72px; }

.ox-wizard-page .container { max-width: 1360px !important; }
.ox-wizard-page .bot-wizard-progress { padding: 18px 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.ox-wizard-page .bot-wizard-step { cursor: pointer; }
.ox-wizard-page .bot-wizard-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 42px; right: -4px; height: 1px; background: var(--ox-border-default); z-index: 0; }
.ox-wizard-page .bot-wizard-step::before, .ox-wizard-page .bot-wizard-step > div { position: relative; z-index: 1; }
.ox-wizard-page .bot-wizard-step > div { padding-right: 8px; background: var(--ox-surface-1); }
.ox-wizard-page .stats-tabs { display: none !important; }
.ox-wizard-page .save-bar { position: sticky !important; top: calc(var(--ox-topbar-height) + 8px) !important; padding: 10px 14px !important; }
.ox-wizard-page .settings-card { padding: 22px !important; }
.ox-wizard-page .settings-card h2 { margin-bottom: 7px; font-size: 20px; }
.ox-wizard-page .form-section h3 { color: var(--ox-text-primary) !important; border-bottom-color: var(--ox-border-subtle) !important; }
.ox-wizard-page .info-box { background: var(--ox-blue-soft) !important; border-color: rgba(242,201,76,.28) !important; }
.ox-wizard-page .info-box :where(h3, strong) { color: var(--ox-accent) !important; }

.ox-trading-page .trading-container { width: 100%; max-width: none; margin: 0; }
.ox-trading-page .stats-grid { display: none !important; }
.ox-trading-page .live-trading-workbench { margin-bottom: 14px; }
.ox-trading-page .live-market-bar { min-height: 62px; padding: 12px 16px; background: var(--ox-surface-2); }
.ox-trading-page .trading-chart-placeholder { min-height: 470px; }
.ox-trading-page .chart-empty-state { height: 386px; background-color: var(--ox-input-bg); }
.ox-trading-page .order-panel-placeholder { min-width: 310px; }
.ox-trading-page .content-grid { gap: 14px; }
.ox-trading-page .bot-control-panel { margin: 14px 0; }

.ox-backtests-page .backtest-workbench { grid-template-columns: minmax(480px, 1.05fr) minmax(440px, .95fr); gap: 14px; }
.ox-backtests-page .backtest-config-card, .ox-backtests-page .backtest-result-card { min-height: 318px; }
.ox-backtests-page .backtest-chart-empty { height: 150px; background: repeating-linear-gradient(0deg, transparent 0, transparent 36px, rgba(175,181,181,.08) 37px), repeating-linear-gradient(90deg, transparent 0, transparent 76px, rgba(175,181,181,.06) 77px); }

.ox-system-page .system-tabs { position: sticky; top: calc(var(--ox-topbar-height) + 8px); z-index: 30; }
.ox-system-page .container { max-width: var(--ox-content-max) !important; }
.ox-system-page .exchange-item { border-radius: 8px !important; }
.ox-system-page .security-notice, .ox-system-page .info-box { background: var(--ox-blue-soft) !important; border-color: var(--ox-blue-500) !important; }
.ox-system-page .tab-navigation { display: flex; overflow-x: auto; flex-wrap: nowrap; }
.system-panel[hidden] { display: none !important; }
.system-overview-card { padding: 22px !important; }
.system-health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.system-health-grid article { padding: 17px; background: var(--ox-surface-2); border: 1px solid var(--ox-border-subtle); border-radius: 8px; }
.system-health-grid h3 { margin: 15px 0 7px; font-size: 15px; }
.system-health-grid p { margin: 0; color: var(--ox-text-secondary); font-size: 13px; line-height: 1.55; }
.system-health-list { display: grid; margin-top: 18px; border: 1px solid var(--ox-border-subtle); border-radius: 8px; overflow: hidden; }
.system-health-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--ox-border-subtle); }
.system-health-list > div:last-child { border-bottom: 0; }
.notification-preview-list { display: grid; margin-top: 18px; }
.notification-preview-list > div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--ox-border-subtle); }
.notification-preview-list p, .notification-preview-list small { display: block; margin: 0; }
.notification-preview-list small { margin-top: 4px; color: var(--ox-text-muted); }
.connection-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.chart-toolbar { display: flex; align-items: center; gap: 4px; min-height: 44px; margin: -5px -5px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ox-border-subtle); }
.chart-toolbar span { flex: 1; }
.chart-toolbar button, .order-type-segments button, .order-percentages button { min-height: 34px; padding: 6px 10px; color: var(--ox-text-secondary); background: transparent; border: 1px solid transparent; border-radius: 6px; }
.chart-toolbar button.active, .order-type-segments button.active { color: var(--ox-accent); background: var(--ox-blue-soft); border-color: rgba(242,201,76,.28); }
.chart-empty-state > div { max-width: 440px; }
.chart-empty-state b { display: block; margin-bottom: 8px; color: var(--ox-text-primary); font-size: 17px; }
.chart-empty-state p { margin: 0 0 15px; line-height: 1.55; }
.live-market-bar { justify-content: flex-start; }
.live-market-bar > div:not(.market-symbol) { display: grid; min-width: 92px; gap: 3px; }
.live-market-bar small { color: var(--ox-text-muted); font-size: 10px; }
.live-market-bar strong { color: var(--ox-text-primary); font-size: 13px; }
.market-symbol { display: flex !important; align-items: center; gap: 10px; min-width: 245px !important; margin-right: 8px; }
.market-symbol > span:last-child { display: grid; gap: 3px; }
.market-coin { display: grid; place-items: center; width: 38px; height: 38px; color: #191C1F; background: var(--ox-accent); border-radius: 50%; font-size: 19px; font-weight: 750; }
.live-market-bar .ox-mode { margin-left: auto; }
.order-panel-placeholder .ox-panel-head { margin-bottom: 15px; }
.order-panel-placeholder .order-segments { display: flex; gap: 6px; margin-bottom: 10px; }
.order-panel-placeholder .order-segments button { flex: 1 1 0; min-height: 42px; }
.order-panel-placeholder .order-segments .buy { color: var(--ox-success); border-color: rgba(23,217,138,.28); background: var(--ox-success-soft); }
.order-panel-placeholder .order-segments .sell { color: var(--ox-danger); border-color: rgba(255,107,117,.34); background: var(--ox-danger-soft); }
.order-type-segments, .order-percentages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 12px; padding: 3px; background: var(--ox-surface-2); border: 1px solid var(--ox-border-subtle); border-radius: 8px; }
.order-type-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-percentages { grid-template-columns: repeat(4, 1fr); margin-top: -5px; background: transparent; border: 0; padding: 0; }
.order-percentages button { border-color: var(--ox-border-default); }
.order-panel-placeholder input[type="range"] { width: 100%; min-width: 0; box-sizing: border-box; }
.order-panel-placeholder label { position: relative; }
.order-panel-placeholder label > span { position: absolute; right: 11px; bottom: 13px; color: var(--ox-text-muted); font-size: 11px; }
.order-summary { display: grid; gap: 8px; margin: 15px 0; }
.order-summary div { display: flex; justify-content: space-between; gap: 12px; color: var(--ox-text-secondary); font-size: 12px; }
.order-summary dd { margin: 0; color: var(--ox-text-primary); }
.order-safety-note { margin: 14px 0; padding: 10px; color: var(--ox-warning); background: var(--ox-warning-soft); border: 1px solid rgba(245,184,75,.25); border-radius: 8px; font-size: 11px; line-height: 1.45; }

.ox-backtests-page #personal-stats-tab, .ox-backtests-page #global-stats-tab { display: none !important; }
.backtest-history-panel { margin-top: 14px; padding: 20px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.backtest-history-panel .empty-state.compact { display: grid; place-items: center; min-height: 190px; margin-top: 16px; padding: 25px; text-align: center; background: var(--ox-surface-2); border: 1px dashed var(--ox-border-default); border-radius: 8px; }
.backtest-history-panel .empty-state h3 { margin: 8px 0 5px; }
.backtest-history-panel .empty-state p { max-width: 620px; margin: 0; color: var(--ox-text-muted); }
.backtest-result-card .backtest-kpis { grid-template-columns: repeat(3, 1fr); }

.wizard-navigation { position: sticky; bottom: 0; z-index: 35; display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; padding: 12px 14px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; box-shadow: 0 -10px 30px rgba(0,0,0,.22); }
.wizard-navigation > div { display: flex; gap: 9px; }
.bot-wizard-step.complete::before { content: "✓"; color: var(--ox-success); border-color: rgba(23,217,138,.45); background: var(--ox-success-soft); }
.bot-wizard-step[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.bot-detail-badges { display: flex; gap: 8px; margin-top: 10px; }
.ox-mode.live, .ox-mode.paper { color: var(--ox-text-secondary); background: var(--ox-surface-2); border-color: var(--ox-border-default); }
.bot-detail-overview { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; margin-bottom: 14px; padding: 16px 18px; background: var(--ox-surface-1); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.bot-detail-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bot-detail-title .bot-avatar { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; color: var(--ox-accent); background: var(--ox-blue-soft); border: 1px solid rgba(242,201,76,.3); border-radius: 8px; font-size: 24px; }
.bot-detail-title h2 { margin: 2px 0; overflow: hidden; color: var(--ox-text-primary); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.bot-detail-title p { margin: 0; color: var(--ox-text-muted); font-size: 12px; }
.bot-detail-state, .bot-detail-actions { display: flex; align-items: center; gap: 8px; }
.wizard-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-choice.single { padding: 16px; background: var(--ox-surface-2); border: 1px solid var(--ox-border-default); border-radius: 8px; }
.mode-choice.single > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; }
.mode-choice.single p { grid-column: 1 / -1; margin: 0; color: var(--ox-text-secondary); font-size: 13px; line-height: 1.5; }
.form-submit-row { display: flex; justify-content: flex-end; gap: 9px; padding-top: 16px; border-top: 1px solid var(--ox-border-subtle); }

@media (max-width: 1180px) {
  .ox-topbar { grid-template-columns: var(--ox-sidebar-width) minmax(240px, 1fr) auto; }
  .ox-connection-pill, .ox-user-copy { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ox-backtests-page .backtest-workbench { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --ox-sidebar-width: 76px; }
  .ox-brand { grid-template-columns: 1fr; grid-template-rows: 1fr; padding-inline: 19px; }
  .ox-brand-mark { grid-row: auto; }
  .ox-brand-name, .ox-brand small { display: none; }
  .ox-sidebar .menu-link { justify-content: center; }
  .ox-sidebar .menu-text, .ox-nav-label, .ox-sidebar-user > span:not(.ox-user-avatar) { display: none; }
  .ox-sidebar-user { display: flex; justify-content: center; padding-inline: 0; }
  .ox-dashboard-page .dashboard-showcase { grid-template-columns: 1fr; }
  .dashboard-chart-controls { justify-content: flex-start; }
  .live-trading-grid { grid-template-columns: 1fr; }
  .trading-chart-placeholder { border-right: 0; border-bottom: 1px solid var(--ox-border-subtle); }
  .system-health-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --ox-sidebar-width: 0px; --ox-topbar-height: 60px; }
  body:not(.ox-public-page) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .ox-topbar { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 7px; padding: 0 10px; }
  .ox-brand { display: none; }
  .ox-mobile-menu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ox-text-secondary); background: transparent; border: 1px solid var(--ox-border-subtle); border-radius: 8px; }
  .ox-mobile-menu svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .ox-global-search { height: 40px; margin: 0; }
  .ox-global-search kbd, .ox-topbar-actions .ox-user-chip, .ox-topbar-actions .ox-connection-pill, .ox-logout { display: none; }
  .ox-topbar-actions { padding: 0; }
  .sidebar.ox-sidebar { inset: var(--ox-topbar-height) auto 66px calc(-1 * var(--ox-sidebar-expanded-width)); z-index: 100; width: var(--ox-sidebar-expanded-width) !important; padding-inline: 12px !important; transition: left .18s ease; box-shadow: 18px 0 42px rgba(0,0,0,.4); }
  .sidebar.ox-sidebar.mobile-open { left: 0; }
  .ox-sidebar .menu-link { justify-content: flex-start; }
  .ox-sidebar .menu-text, .ox-nav-label, .ox-sidebar-user > span:not(.ox-user-avatar) { display: initial; }
  .ox-sidebar-user { display: grid; grid-template-columns: 34px 1fr auto; justify-content: initial; padding-inline: 11px; }
  body.ox-nav-open::after { content: ""; position: fixed; inset: var(--ox-topbar-height) 0 66px; z-index: 90; background: rgba(2, 8, 14, .68); }
  .ox-mobile-nav { position: fixed; inset: auto 0 0; z-index: 120; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, 1fr); grid-template-columns: none; overflow-x: auto; min-height: 66px; padding: 5px 4px max(5px, env(safe-area-inset-bottom)); background: var(--ox-bg-topbar); border-top: 1px solid var(--ox-border-default); }
  .ox-mobile-nav a { display: grid; place-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 54px; color: var(--ox-text-muted); text-decoration: none; font-size: 9px; }
  .ox-mobile-nav a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ox-mobile-nav a.active { color: var(--ox-accent); }
  .container, .content-wrapper, .trading-container, .stats-container { padding: 16px !important; }
  .page-header, .dashboard-header, .stats-header { align-items: flex-start !important; flex-direction: column !important; gap: 13px; }
  .page-header h1, .dashboard-header h1, .stats-header h1, .ox-dashboard-page .welcome-section h1 { font-size: 24px !important; }
  .page-header .header-actions, .stats-header .header-right { width: 100%; }
  .page-header .btn-primary { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .stat-card { min-height: 102px !important; }
  .stat-card .stat-icon { display: none !important; }
  .dashboard-pnl-overview { padding: 14px 12px; }
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dashboard-chart-controls { align-items: flex-start; }
  .dashboard-segment-group { max-width: 100%; }
  .dashboard-segment-group button { min-height: 40px; }
  .dashboard-portfolio-chart { height: 220px; min-height: 220px; }
  .ox-bots-page .page-header, .ox-bots-page .section-header { align-items: stretch; flex-direction: column; }
  .ox-bots-page .filter-buttons { min-width: 0; grid-template-columns: repeat(2, 1fr); }
  .bot-wizard-progress { display: flex !important; overflow-x: auto; padding: 13px !important; scroll-snap-type: x proximity; }
  .bot-wizard-step { flex: 0 0 128px; scroll-snap-align: start; }
  .ox-wizard-page .bot-wizard-step:not(:last-child)::after { display: none; }
  .backtest-fields { grid-template-columns: 1fr; }
  .backtest-kpis { grid-template-columns: 1fr 1fr; }
  .ox-trading-page .trading-chart-placeholder { min-height: 350px; }
  .ox-trading-page .chart-empty-state { height: 270px; }
  .system-tabs { scroll-snap-type: x proximity; }
  .system-tabs > * { scroll-snap-align: start; }
  .wizard-navigation { bottom: 68px; }
  .wizard-navigation > a { display: none; }
  .wizard-navigation > div { width: 100%; }
  .wizard-navigation button { flex: 1; }
  .live-market-bar > div:not(.market-symbol) { min-width: calc(50% - 9px); }
  .market-symbol { width: 100%; }
  .live-market-bar .ox-mode { margin-left: 0; }
  .notification-preview-list > div { grid-template-columns: 1fr; }
  .connection-form-grid { grid-template-columns: 1fr; }
  .bot-detail-overview { grid-template-columns: 1fr; align-items: start; }
  .bot-detail-actions { width: 100%; }
  .bot-detail-actions > * { flex: 1; }
  .wizard-field-grid { grid-template-columns: 1fr; }
  .form-submit-row > * { flex: 1; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .sidebar { left: calc(-1 * var(--ox-sidebar-expanded-width)); width: var(--ox-sidebar-expanded-width) !important; }
  .backtest-kpis { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   Shared shell for public and legacy pages
   ------------------------------------------------------------------------- */
.ox-public-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ox-bg-app);
  color: var(--ox-text-primary);
}
.ox-public-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 5vw, 72px);
  background: var(--ox-bg-topbar);
  border-bottom: 1px solid var(--ox-border-subtle);
  box-shadow: 0 8px 28px rgba(2, 10, 18, .22);
}
.ox-public-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ox-text-primary); text-decoration: none; }
.ox-public-brand .ox-brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--ox-accent); color: #191C1F; font-weight: 900; }
.ox-public-brand .ox-brand-name { font-size: 1.25rem; font-weight: 800; letter-spacing: .03em; }
.ox-public-brand .ox-brand-name span { color: var(--ox-blue-400); }
.ox-public-brand small { margin-left: 3px; color: var(--ox-text-muted); font-size: .72rem; }
.ox-public-nav { display: flex; align-items: center; gap: 8px; }
.ox-public-nav a { padding: 9px 12px; color: var(--ox-text-secondary); text-decoration: none; border-radius: 8px; transition: .18s ease; }
.ox-public-nav a:hover { color: var(--ox-text-primary); background: var(--ox-blue-soft); }
.ox-public-nav .ox-public-nav-cta { color: #191C1F; background: var(--ox-accent); box-shadow: none; }
.ox-public-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: auto; padding: 22px clamp(18px, 5vw, 72px); color: var(--ox-text-muted); font-size: .82rem; border-top: 1px solid var(--ox-border-subtle); background: var(--ox-bg-topbar); }
.ox-public-footer a { color: var(--ox-accent); text-decoration: none; }

/* Legacy authenticated pages use the shared graphite and yellow palette. */
body:not(.ox-public-page) > .top-navbar,
body:not(.ox-public-page) > .navbar-dashboard {
  min-height: var(--ox-topbar-height);
  background: var(--ox-bg-topbar) !important;
  border-bottom: 1px solid var(--ox-border-subtle) !important;
  box-shadow: 0 8px 28px rgba(2, 10, 18, .24);
}
body:not(.ox-public-page) > .top-navbar .logo,
body:not(.ox-public-page) > .navbar-dashboard .logo,
body:not(.ox-public-page) > .navbar-dashboard .logo span { color: var(--ox-text-primary) !important; }
body:not(.ox-public-page) > .top-navbar .logo-text,
body:not(.ox-public-page) > .navbar-dashboard .logo span:first-child { color: var(--ox-accent) !important; -webkit-text-fill-color: var(--ox-accent) !important; }
body:not(.ox-public-page) > .top-navbar .user-avatar,
body:not(.ox-public-page) > .navbar-dashboard .user-avatar { background: var(--ox-accent) !important; color: #191C1F !important; }
body:not(.ox-public-page) > .top-navbar a,
body:not(.ox-public-page) > .navbar-dashboard a { color: var(--ox-text-secondary); }
body:not(.ox-public-page) > .top-navbar a:hover,
body:not(.ox-public-page) > .navbar-dashboard a:hover { color: var(--ox-accent); }
body:not(.ox-public-page) .container,
body:not(.ox-public-page) .content-wrapper,
body:not(.ox-public-page) .main-content { color: var(--ox-text-primary); }
body:not(.ox-public-page) .container { max-width: 1440px; }
.ox-legacy-page > .footer,
body:not(.ox-public-page) > .footer { margin-left: var(--ox-sidebar-width) !important; margin-top: 24px !important; padding: 20px 24px !important; background: var(--ox-bg-topbar) !important; border-top: 1px solid var(--ox-border-subtle); color: var(--ox-text-muted); }
.ox-legacy-page > .footer .footer-nav a,
body:not(.ox-public-page) > .footer .footer-nav a { color: var(--ox-accent) !important; text-decoration: none; }
.ox-legacy-page > .container,
.ox-legacy-page > .trade-container,
.ox-legacy-page > .bot-container { margin-left: var(--ox-sidebar-width) !important; padding-top: calc(var(--ox-topbar-height) + 24px) !important; }
.ox-legacy-page > .ox-sidebar { display: flex; }

@media (max-width: 767px) {
  .ox-public-header { min-height: 62px; padding: 11px 16px; }
  .ox-public-brand small, .ox-public-nav a:not(.ox-public-nav-cta) { display: none; }
  .ox-public-nav { margin-left: auto; }
  .ox-public-footer { flex-direction: column; gap: 8px; padding: 18px 16px; }
  .ox-legacy-page > .container,
  .ox-legacy-page > .trade-container,
  .ox-legacy-page > .bot-container { margin-left: 0 !important; padding-top: calc(var(--ox-topbar-height) + 12px) !important; }
  .ox-legacy-page > .footer,
  body:not(.ox-public-page) > .footer { margin-left: 0 !important; }
}

/* Shared controls and feedback. Page-specific order sides retain their colours. */
.btn-secondary, .btn-danger, .secondary-btn, .tab-button, .tab-btn, .filter-btn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--ox-border-default);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.btn-danger { border-color: var(--ox-danger); }
.ox-icon-button { width: 42px; height: 42px; }
.modal-content { background: var(--ox-surface-1); border-color: var(--ox-border-default); border-radius: 8px; }
.error-message { color: var(--ox-danger); background: var(--ox-danger-soft); border-color: var(--ox-danger); }
.success-message { color: var(--ox-success); background: var(--ox-success-soft); border-color: var(--ox-success); }
.ox-status.stopped { color: var(--ox-text-secondary); background: var(--ox-surface-2); }
.ox-mode { color: var(--ox-text-secondary); }
.table-container { max-width: 100%; }
@media (max-width: 767px) {
  .btn-primary, .btn-secondary, .btn-danger, .primary-button, .secondary-btn, .tab-button, .tab-btn, .filter-btn, .btn-ghost { min-height: 44px; }
  .ox-icon-button { width: 44px; height: 44px; }
}

.page-header h1, .page-header p, .dashboard-header h1, .dashboard-header p, .stats-header h1, .stats-header p { text-align: left; }

.ox-notification-link { position: relative; }
.ox-notification-count {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  min-width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--ox-bg-topbar);
  border-radius: 999px;
  background: var(--ox-danger);
  color: var(--ox-bg-app);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.ox-notification-count[hidden] { display: none; }