html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.analytics-page { padding: 16px; }
.analytics-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; }
.analytics-filters .filter-group { display: flex; gap: 6px; align-items: center; }
.analytics-live-indicator { font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.analytics-live-indicator.live { background: rgba(52, 168, 83, 0.2); color: #34a853; }
.analytics-live-indicator.paused { background: rgba(154, 160, 166, 0.2); color: var(--text-muted); }
.an-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 12px 0; }
.an-tab { padding: 8px 14px; background: transparent; border: none; cursor: pointer; color: var(--text-muted); }
.an-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.an-tab-panel { display: none; }
.an-tab-panel.active { display: block; }
.an-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.kpi-card { padding: 10px; background: var(--bg-elevated); border-radius: 4px; }
.kpi-card .label { font-size: 11px; color: var(--text-muted); }
.kpi-card .value { font-size: 22px; font-weight: 600; }
.kpi-card .delta { font-size: 11px; color: var(--text-muted); }
.an-chart { min-height: 360px; margin-bottom: 16px; background: var(--bg-elevated); border-radius: 4px; }
.an-row { display: flex; gap: 16px; }
.an-row .half { flex: 1; }
.an-card { padding: 12px; background: var(--bg-elevated); border-radius: 4px; margin-bottom: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.export-menu { position: relative; display: inline-block; }
.export-toggle { padding: 4px 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.export-options { display: none; position: absolute; right: 0; top: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; z-index: 10; min-width: 100px; }
.export-options.open { display: block; }
.export-options button { display: block; width: 100%; padding: 6px 10px; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--text); }
.export-options button:hover { background: var(--bg); }
.placeholder { padding: 16px; text-align: center; color: var(--text-muted); font-style: italic; }
/* ===== Backtesting page styles ===== */
.bt-page { padding: 1rem; }
.bt-page h1 { margin-block: 0 1rem; }
.bt-page .tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; border-block-end: 1px solid var(--border); margin-block: 1rem; }
.bt-page .tab-btn { background: transparent; color: var(--text); border: 0; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.95rem; border-block-end: 2px solid transparent; transition: color .15s, border-color .15s; }
.bt-page .tab-btn:hover { color: var(--accent, #3a7bd5); }
.bt-page .tab-btn.active { border-block-end-color: var(--accent, #3a7bd5); color: var(--accent, #3a7bd5); font-weight: 600; }
.bt-page .tab-panel { display: none; padding-block-start: 1rem; }
.bt-page .tab-panel.active { display: block; }

.bt-run-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.bt-run-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.bt-run-form label > span { font-size: 0.85rem; color: var(--text-muted, #aaa); }
.bt-run-form input, .bt-run-form select { padding: 0.5rem; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.bt-run-form button.primary { margin-block-start: 1rem; padding: 0.6rem 1.4rem; background: var(--accent, #3a7bd5); color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-weight: 600; }
.bt-run-form button.primary:hover { filter: brightness(1.1); }
.overrides-panel { margin-block: 1rem; padding: 0.75rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; }
.overrides-panel summary { cursor: pointer; font-weight: 600; padding-block: 0.25rem; }
.overrides-panel .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-block-start: 0.75rem; }
.opt-panel, .wf-panel { margin-block: 1rem; padding: 0.75rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; }
.opt-panel legend, .wf-panel legend { padding-inline: 0.5rem; font-weight: 600; }
.opt-row { display: flex; gap: 0.5rem; align-items: center; margin-block-end: 0.5rem; }
.opt-row input { flex: 1; padding: 0.4rem; }
.opt-row .opt-rm { padding: 0.25rem 0.5rem; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; }
.rank-by { display: flex; gap: 0.5rem; align-items: center; margin-block-start: 0.5rem; }

.bt-runs-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1rem; }
.bt-runs-toolbar select, .bt-runs-toolbar input, .bt-runs-toolbar button { padding: 0.4rem 0.6rem; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.bt-runs-toolbar button { cursor: pointer; }
.bt-runs-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }
.bt-runs-table { width: 100%; border-collapse: collapse; }
.bt-runs-table th, .bt-runs-table td { padding: 0.5rem; border-block-end: 1px solid var(--border); text-align: start; }
.bt-runs-table thead th { background: var(--bg-elevated); font-weight: 600; }
.bt-runs-table tbody tr { cursor: pointer; transition: background-color .12s; }
.bt-runs-table tbody tr:hover { background: var(--bg-elevated); }
.bt-runs-table .r-star, .bt-runs-table .r-del { background: transparent; border: 0; cursor: pointer; color: var(--text); padding: 0.2rem 0.4rem; }
.bt-runs-table .r-star:hover { color: gold; }
.bt-runs-table .r-del:hover { color: #e74c3c; }

.bt-detail-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 0.75rem; }
.bt-detail-header h2 small { font-weight: 400; color: var(--text-muted); margin-inline-start: 0.5rem; font-size: 0.85rem; }
.bt-detail-header .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bt-detail-header .btn { padding: 0.4rem 0.8rem; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; text-decoration: none; }
.bt-detail-header .btn:hover { background: var(--accent, #3a7bd5); color: #fff; border-color: var(--accent, #3a7bd5); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-block: 1rem; }
.kpi { background: var(--bg-elevated); padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border); }
.kpi .lbl { display: block; font-size: 0.8rem; color: var(--text-muted, #888); margin-block-end: 0.25rem; }
.kpi strong { font-size: 1.25rem; }
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; }
.charts-grid .chart { background: var(--bg-elevated); padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border); }
.charts-grid .chart h4 { margin-block: 0 0.5rem; font-size: 0.95rem; color: var(--text-muted, #aaa); }
.charts-grid .chart .plot { min-height: 300px; }
.logs { margin-block-start: 1.5rem; }
.logs h4 { margin-block: 0 0.5rem; }
.log-list { list-style: none; padding: 0; max-height: 300px; overflow: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.85rem; }
.log-list li { padding: 0.2rem 0; }
.log-list li time { color: var(--text-muted); margin-inline-end: 0.5rem; }
.log-list .lvl-Error { color: #e74c3c; }
.log-list .lvl-Warning { color: #f39c12; }
.log-list .lvl-Info { color: var(--text); }

.live-list { list-style: none; padding: 0; }
.live-list li { display: flex; gap: 0.75rem; align-items: center; padding-block: 0.5rem; border-block-end: 1px solid var(--border); }
.live-list li .name { flex: 1; }
.live-list li progress { flex: 0 0 200px; }
.live-list li .cancel { padding: 0.3rem 0.7rem; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; }
.live-list li .cancel:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.live-log { background: var(--bg); padding: 1rem; max-height: 300px; overflow: auto; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }

.status { padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.85rem; font-weight: 600; }
.status-Queued { color: #888; }
.status-Running { color: #f39c12; }
.status-Completed { color: #27ae60; }
.status-Failed { color: #e74c3c; }
.status-Cancelled { color: #888; }

.bt-compare { width: 100%; border-collapse: collapse; margin-block-end: 1rem; }
.bt-compare th, .bt-compare td { padding: 0.5rem; border-block-end: 1px solid var(--border); text-align: start; }
.bt-compare thead th { background: var(--bg-elevated); }

.opt-table { width: 100%; border-collapse: collapse; margin-block-start: 1rem; }
.opt-table th, .opt-table td { padding: 0.5rem; border-block-end: 1px solid var(--border); text-align: start; }
.opt-table tbody tr { cursor: pointer; }
.opt-table tbody tr:hover { background: var(--bg-elevated); }
.best-badge { display: inline-block; padding: 0.4rem 0.8rem; background: linear-gradient(90deg, #27ae60, #3a7bd5); color: #fff; border-radius: 4px; font-weight: 600; margin-block-end: 1rem; }

.bt-page .loading { padding: 1rem; color: var(--text-muted); font-style: italic; }
.bt-page .empty { padding: 1rem; color: var(--text-muted); font-style: italic; text-align: center; }

[dir="rtl"] .bt-page .tabs { direction: rtl; }
[dir="rtl"] .bt-runs-table th, [dir="rtl"] .bt-runs-table td { text-align: start; }

/* ==== Subsystem 10: Auth ==== */
.auth-card { max-width: 420px; margin: 4rem auto; padding: 2rem; background: var(--card, #1a1a1a); border-radius: 8px; }
.auth-card h1 { margin-block-start: 0; }
.auth-card label { display: block; margin-block: 0.75rem; }
.auth-card input { width: 100%; padding: 0.5rem; }
.auth-card .error { color: #e74c3c; }
.auth-card .ok { color: #27ae60; }
.user-menu { position: relative; display: inline-block; margin-inline-start: 0.5rem; }
.user-menu-btn { background: transparent; color: var(--fg, inherit); border: 1px solid var(--border, #444); padding: 0.4rem 0.75rem; border-radius: 4px; cursor: pointer; }
.user-menu-dropdown { display: none; position: absolute; inset-inline-end: 0; top: 100%; background: var(--card, #1a1a1a); border: 1px solid var(--border, #444); min-width: 160px; z-index: 100; }
.user-menu.open .user-menu-dropdown { display: block; }
.user-menu-dropdown a, .user-menu-dropdown button { display: block; width: 100%; padding: 0.5rem 1rem; text-align: start; background: transparent; color: var(--fg, inherit); border: 0; cursor: pointer; }
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--row-hover, rgba(255,255,255,0.08)); }
.admin-users-page table { width: 100%; border-collapse: collapse; }
.admin-users-page th, .admin-users-page td { padding: 0.5rem; border-block-end: 1px solid var(--border, #444); text-align: start; }