/* Asteria — dark theme override.
 * Activated by `<html data-theme="dark">` (toggle) or by OS `prefers-color-scheme: dark`
 * when the user hasn't expressed a preference. Light mode is the default and unchanged.
 *
 * Strategy: this file uses higher-specificity selectors and !important so it overrides
 * the per-page inline <style> blocks without needing to touch each one. Inline element
 * styles (style="color:#xxx") that don't match a class are covered by attribute selectors
 * for the most common values.
 */

/* ============================================================
 * Theme toggle button (always rendered by theme-toggle.js)
 * ============================================================ */
.theme-toggle {
  position: static;
  z-index: auto;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius:0;
  border: 1px solid #e5e7eb;
  background: white;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #4b5563;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle-fallback {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 9998;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.theme-toggle:hover { background: #f8fafc; }
.theme-toggle:focus-visible { outline: 3px solid #a855f7; outline-offset: 2px; }
html[data-theme="dark"] .theme-toggle {
  background: #111827;
  border-color: #475569;
  color: #ffffff;
}
.asteria-nav-actions > .theme-toggle,
.topbar > .theme-toggle,
.nav > .theme-toggle {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* ============================================================
 * Dark mode overrides — apply only when html[data-theme="dark"]
 * ============================================================ */
html[data-theme="dark"] body {
  background: #0a0f1c !important;
  color: #e2e8f0 !important;
}

/* Topbar / nav */
html[data-theme="dark"] .topbar {
  background: rgba(15, 23, 42, 0.94) !important;
  border-bottom-color: #2a3142 !important;
}
html[data-theme="dark"] .logo {
  background: linear-gradient(135deg, #e2e8f0, #a5b4fc) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="dark"] .nav-tabs {
  background: #1a1f2e !important;
}
html[data-theme="dark"] .nav-tabs a {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .nav-tabs a.active {
  background: #2a3142 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .nav-tabs a:hover {
  color: #e2e8f0 !important;
}

/* Cards / panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .step,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .progress-card,
html[data-theme="dark"] .select-card,
html[data-theme="dark"] .plan,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .upgrade,
html[data-theme="dark"] .readiness-item,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .permission-box,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .exchange-card,
html[data-theme="dark"] .modal {
  background: #1a1f2e !important;
  border-color: #2a3142 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .card-head {
  border-bottom-color: #2a3142 !important;
}
html[data-theme="dark"] .card-head h2 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .card-head span {
  color: #94a3b8 !important;
}

/* Dashboard runtime empty states */
html[data-theme="dark"] #equityChart {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.98)) !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .runtime-empty {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px dashed #475569 !important;
  color: #dbeafe !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.32) !important;
}
html[data-theme="dark"] .runtime-row,
html[data-theme="dark"] .health-check {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}
html[data-theme="dark"] .runtime-row span,
html[data-theme="dark"] .health-check span,
html[data-theme="dark"] .kpi span {
  color: #a8b5c7 !important;
}

/* Text colors */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] .hint {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] small,
html[data-theme="dark"] .crumb,
html[data-theme="dark"] .meta {
  color: #94a3b8 !important;
}

/* Hero blocks already use dark gradients — leave them. Only adjust hero text */
html[data-theme="dark"] .hero h1 { color: white !important; }
html[data-theme="dark"] .hero p { color: #cbd5e1 !important; }

/* Form inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1a1f2e !important;
  color: #e2e8f0 !important;
  border-color: #2a3142 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.20) !important;
}
html[data-theme="dark"] label {
  color: #94a3b8 !important;
}

/* Rows / list separators */
html[data-theme="dark"] .row,
html[data-theme="dark"] .summary-line,
html[data-theme="dark"] .limit,
html[data-theme="dark"] .event,
html[data-theme="dark"] .session {
  border-bottom-color: #2a3142 !important;
}
html[data-theme="dark"] .row span,
html[data-theme="dark"] .summary-line span,
html[data-theme="dark"] .limit-top span {
  color: #94a3b8 !important;
}

/* Tables */
html[data-theme="dark"] table th {
  background: #1a1f2e !important;
  color: #94a3b8 !important;
  border-bottom-color: #2a3142 !important;
}
html[data-theme="dark"] table td {
  border-bottom-color: #2a3142 !important;
  color: #cbd5e1 !important;
}

/* Buttons */
html[data-theme="dark"] .btn:not(.primary):not(.dark):not(.danger) {
  background: #1a1f2e !important;
  border-color: #2a3142 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .btn:not(.primary):not(.dark):not(.danger):hover {
  background: #2a3142 !important;
}
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .btn.ghost {
  background: #1a1f2e !important;
  border-color: #2a3142 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .actions .btn.primary,
html[data-theme="dark"] .strategy-actions .btn.primary,
html[data-theme="dark"] .card-actions .btn.primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
html[data-theme="dark"] #edge-by-request .btn.primary,
html[data-theme="dark"] a.btn.primary[href*="aster_edge_access"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] .back {
  background: #1a1f2e !important;
  border-color: #2a3142 !important;
  color: #cbd5e1 !important;
}

/* Pills, chips, badges */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .result-badge,
html[data-theme="dark"] .result-chip,
html[data-theme="dark"] .type {
  background: #2a3142 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .pill.ok, html[data-theme="dark"] .badge.ok { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .pill.warn, html[data-theme="dark"] .badge.wait { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
html[data-theme="dark"] .pill.no, html[data-theme="dark"] .badge.no { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }

/* Notices */
html[data-theme="dark"] .notice {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.30) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .notice.green,
html[data-theme="dark"] .ok {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .notice.amber,
html[data-theme="dark"] .warning,
html[data-theme="dark"] .warn {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .notice.red,
html[data-theme="dark"] .error,
html[data-theme="dark"] .danger {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.30) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .security {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
  color: #6ee7b7 !important;
}

/* Semantic colors */
html[data-theme="dark"] .green { color: #6ee7b7 !important; }
html[data-theme="dark"] .red { color: #fca5a5 !important; }
html[data-theme="dark"] .amber { color: #fcd34d !important; }
html[data-theme="dark"] .purple { color: #c4b5fd !important; }

/* Bars (progress) */
html[data-theme="dark"] .bar { background: #2a3142 !important; }
html[data-theme="dark"] .meter { background: #2a3142 !important; }

/* Footer */
html[data-theme="dark"] footer {
  border-top-color: #2a3142 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] footer a { color: #a5b4fc !important; }

/* Code blocks */
html[data-theme="dark"] code {
  background: #1a1f2e !important;
  color: #93c5fd !important;
  border-color: #2a3142 !important;
}
html[data-theme="dark"] .api-preview {
  background: #050810 !important;
  border-color: #2a3142 !important;
}

/* Common inline color overrides (for inline-style strings we can't selector-target) */
html[data-theme="dark"] [style*="color:#4b5563"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #4b5563"],
html[data-theme="dark"] [style*="color: #374151"] {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color:#6d737c"],
html[data-theme="dark"] [style*="color:#9ca3af"],
html[data-theme="dark"] [style*="color: #6b7280"] {
  color: #94a3b8 !important;
}
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#303236"],
html[data-theme="dark"] [style*="color: #111827"] {
  color: #e2e8f0 !important;
}

/* Light mode is the default. Dark theme is opt-in via the toggle button
 * (theme-toggle.js sets data-theme="dark" on <html> when the user clicks).
 * We intentionally do NOT auto-activate on OS preference because the override
 * does not cover every inline-style element, which can produce unreadable
 * mixed states (light text on white inline backgrounds). */


/* ============================================================
 * Square controls — product direction 2026-05-25
 * Keeps cards readable, makes buttons/chips/inputs straight-edged.
 * ============================================================ */
:root {
  --asteria-control-radius: 0px;
  --asteria-focus-radius: 0px;
}

.btn,
.nav-btn,
.nav-tabs,
.nav-tabs a,
.mobile-menu summary,
.mobile-menu-panel a,
button,
[type="button"],
[type="submit"],
[type="reset"],
input,
select,
textarea,
.eyebrow,
.safe-line span,
.tag,
.badge,
.status,
.status-badge,
.result-badge,
.result-chip,
.pill,
.chip,
.mode-btn,
.theme-toggle,
.num,
.flow-step:before,
.flow-step:not(:last-child):after,
.mini-stat,
.metric,
.notice,
.ok,
.warn,
.warning,
.error,
.security,
.code,
code,
pre,
.asteria-cookie,
.asteria-cookie button,
.asteria-prefs .modal,
.asteria-prefs button,
.asteria-prefs .toggle,
.asteria-account-pill,
.asteria-account-checking,
.asteria-account-action,
.cookie-action,
.cookie-option,
.step-badge,
.status-dot,
.health-pill,
.filter-pill,
.pricing-formula code,
.doc-links a,
.permission-list b {
  border-radius:0;
}

.status-badge:before,
.status:before,
.asteria-account-pill:before,
.asteria-account-checking:before,
.asteria-prefs .toggle:after,
.broker-pill .dot {
  border-radius:0;
}

:focus-visible {
  border-radius:0;
}


/* Landing/catalog readability fixes for dark theme — 2026-05-25 */
html[data-theme="dark"] .nav {
  background: rgba(15, 23, 42, 0.96) !important;
  border-bottom-color: #2a3142 !important;
}
html[data-theme="dark"] .nav a:not(.primary),
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .mobile-menu summary {
  color: #dbeafe !important;
}
html[data-theme="dark"] .launch-card,
html[data-theme="dark"] .flow-step,
html[data-theme="dark"] .strategy-card,
html[data-theme="dark"] .strategy-inner,
html[data-theme="dark"] .results-panel,
html[data-theme="dark"] .paper-monitor div,
html[data-theme="dark"] .price-note,
html[data-theme="dark"] .guide-panel,
html[data-theme="dark"] .permission-card,
html[data-theme="dark"] .exchange-card,
html[data-theme="dark"] .ex-card,
html[data-theme="dark"] .doc-link,
html[data-theme="dark"] .mobile-menu-panel,
html[data-theme="dark"] .catalog-intro,
html[data-theme="dark"] .variant-card {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}
html[data-theme="dark"] .launch-card p,
html[data-theme="dark"] .launch-step span,
html[data-theme="dark"] .flow-step p,
html[data-theme="dark"] .strategy-card p,
html[data-theme="dark"] .strategy-inner p,
html[data-theme="dark"] .price-note em,
html[data-theme="dark"] .section-title p,
html[data-theme="dark"] .catalog-intro p,
html[data-theme="dark"] .permission-card p,
html[data-theme="dark"] .guide-panel p {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .launch-step,
html[data-theme="dark"] .result-chip,
html[data-theme="dark"] .mini-stat,
html[data-theme="dark"] .safe-line span,
html[data-theme="dark"] .permission-list li,
html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .paper-monitor div {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}
html[data-theme="dark"] .result-chip small,
html[data-theme="dark"] .mini-stat small,
html[data-theme="dark"] .paper-monitor small,
html[data-theme="dark"] .price-note small,
html[data-theme="dark"] .safe-line span {
  color: #93a4bd !important;
}
html[data-theme="dark"] .num,
html[data-theme="dark"] .launch-step .num {
  background: #312e81 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .mobile-menu-panel a:hover,
html[data-theme="dark"] .nav-link:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}


/* Onboarding profile QA: keep step 2 readable in dark mode — 2026-05-25 */
html[data-theme="dark"] .step-row {
  background: #111827 !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .step-row.active {
  background: #2e1065 !important;
  border-color: #a855f7 !important;
}
html[data-theme="dark"] .step-row.done {
  background: #064e3b !important;
  border-color: #10b981 !important;
}
html[data-theme="dark"] .step-row .step-copy strong {
  color: #f8fafc !important;
}
html[data-theme="dark"] .step-row .step-copy span {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .selected-variant {
  background: #1e1b4b !important;
  border-color: #7c3aed !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .selected-variant span {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .selected-variant h3,
html[data-theme="dark"] .selected-variant strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .selected-variant p {
  color: #ddd6fe !important;
}
html[data-theme="dark"] .variant-fact {
  background: #0f172a !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .variant-fact small {
  color: #93a4bd !important;
}
html[data-theme="dark"] .variant-fact strong {
  color: #f8fafc !important;
}
html[data-theme="dark"] .variant-fact span {
  color: #cbd5e1 !important;
}


/* Landing page dark-theme readability — 2026-05-25 */
html[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 18% 0%, rgba(168, 85, 247, 0.20), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.12), transparent 30%),
    #0a0f1c !important;
}
html[data-theme="dark"] .hero h1 {
  color: #f8fafc !important;
}
html[data-theme="dark"] .hero .lead,
html[data-theme="dark"] .hero .lead strong {
  color: #dbeafe !important;
}
html[data-theme="dark"] .hero .eyebrow {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(196, 181, 253, 0.42) !important;
  color: #ddd6fe !important;
}
html[data-theme="dark"] .hero .safe-line span {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] #how,
html[data-theme="dark"] section:not(.hero):not(.catalog):not(.exchanges) {
  background: #0a0f1c !important;
}
html[data-theme="dark"] .catalog,
html[data-theme="dark"] .exchanges {
  background: #0f172a !important;
}
html[data-theme="dark"] .section-title h2 {
  color: #f8fafc !important;
}
html[data-theme="dark"] .section-title p {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .flow-step h3,
html[data-theme="dark"] .strategy-top h3,
html[data-theme="dark"] .guide-panel h3,
html[data-theme="dark"] .check strong {
  color: #f8fafc !important;
}
html[data-theme="dark"] .strategy-card li,
html[data-theme="dark"] .guide-item span,
html[data-theme="dark"] .check span {
  color: #cbd5e1 !important;
}


/* Dark theme readability hardening v2 — 2026-05-25
 * Fixes white cards/panels that stayed light while dark-mode text became pale.
 */
html[data-theme="dark"] .hero-main,
html[data-theme="dark"] .variant-filters,
html[data-theme="dark"] .guide-item,
html[data-theme="dark"] .check,
html[data-theme="dark"] .doc-links a,
html[data-theme="dark"] .mobile-menu-panel,
html[data-theme="dark"] .toolbar .search,
html[data-theme="dark"] .variant-search,
html[data-theme="dark"] .variant-select,
html[data-theme="dark"] .model-card,
html[data-theme="dark"] .empty {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .hero-main h1,
html[data-theme="dark"] .hero-main h2,
html[data-theme="dark"] .hero-main h3,
html[data-theme="dark"] .hero-main strong,
html[data-theme="dark"] .variant-filters strong,
html[data-theme="dark"] .guide-item strong,
html[data-theme="dark"] .check strong,
html[data-theme="dark"] .doc-links a,
html[data-theme="dark"] .model-card h3,
html[data-theme="dark"] .empty strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .hero-main p,
html[data-theme="dark"] .hero-main .lead,
html[data-theme="dark"] .variant-filter-meta,
html[data-theme="dark"] .variant-filter-meta span,
html[data-theme="dark"] .guide-item span,
html[data-theme="dark"] .check span,
html[data-theme="dark"] .doc-links a span,
html[data-theme="dark"] .model-card p,
html[data-theme="dark"] .empty {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .hero-main .crumb,
html[data-theme="dark"] .crumb {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(196, 181, 253, 0.42) !important;
  color: #ddd6fe !important;
}

html[data-theme="dark"] .pill,
html[data-theme="dark"] .variant-filter-row .pill,
html[data-theme="dark"] #variantReset {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .pill.active,
html[data-theme="dark"] .variant-filter-row .pill.active {
  background: #f8fafc !important;
  border-color: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .toolbar .search::placeholder,
html[data-theme="dark"] .variant-search::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .guide-item .num,
html[data-theme="dark"] .check .num {
  background: #4338ca !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .permission-card {
  background: linear-gradient(135deg, #101827, #1e1b4b) !important;
}

html[data-theme="dark"] .security-main {
  background: linear-gradient(135deg, #111827, #2e1065) !important;
}

html[data-theme="dark"] .security-main p {
  color: #dbeafe !important;
}

html[data-theme="dark"] .strategy-card .status-badge,
html[data-theme="dark"] .status-badge {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Onboarding/payment flow dark-mode hardening — 2026-05-28
 * This page mixes inline styles and local classes, so it needs explicit
 * contrast rules. Keep all surfaces dark, all helper text readable.
 */
html[data-theme="dark"] .connection-choice,
html[data-theme="dark"] .validation-standard,
html[data-theme="dark"] .required-permission,
html[data-theme="dark"] .required-permissions > div,
html[data-theme="dark"] .exchange-paths,
html[data-theme="dark"] .path,
html[data-theme="dark"] .permission-report,
html[data-theme="dark"] .permission-report-row,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .capital-warning,
html[data-theme="dark"] .validation-error,
html[data-theme="dark"] .risk-ack,
html[data-theme="dark"] #riskAckBox,
html[data-theme="dark"] #reviewError,
html[data-theme="dark"] #validationBox,
html[data-theme="dark"] #launchReady .status-card {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .connection-choice strong,
html[data-theme="dark"] .validation-standard strong,
html[data-theme="dark"] .required-permission strong,
html[data-theme="dark"] .exchange-paths h3,
html[data-theme="dark"] .path strong,
html[data-theme="dark"] .permission-report h3,
html[data-theme="dark"] .permission-report-row strong,
html[data-theme="dark"] .review-card strong,
html[data-theme="dark"] .status-card strong,
html[data-theme="dark"] .risk-ack strong,
html[data-theme="dark"] #riskAckBox strong,
html[data-theme="dark"] #reviewError strong,
html[data-theme="dark"] #validationBox strong {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] .connection-choice span,
html[data-theme="dark"] .validation-standard span,
html[data-theme="dark"] .required-permission span,
html[data-theme="dark"] .path span,
html[data-theme="dark"] .permission-report-row span,
html[data-theme="dark"] .review-card span,
html[data-theme="dark"] .status-card p,
html[data-theme="dark"] .risk-ack,
html[data-theme="dark"] #riskAckBox,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .panel-head p,
html[data-theme="dark"] .summary-line span {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="dark"] .connection-choice small,
html[data-theme="dark"] .validation-standard small,
html[data-theme="dark"] .review-card small,
html[data-theme="dark"] .permission-report small,
html[data-theme="dark"] .field label {
  color: #9fb0c8 !important;
  -webkit-text-fill-color: #9fb0c8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background: #0b1220 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #8da0bb !important;
  -webkit-text-fill-color: #8da0bb !important;
}

html[data-theme="dark"] .status-card.warn,
html[data-theme="dark"] .warning {
  background: rgba(120, 53, 15, 0.28) !important;
  border-color: rgba(245, 158, 11, 0.46) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] .validation-error.active,
html[data-theme="dark"] #reviewError.active,
html[data-theme="dark"] .capital-warning.active {
  background: rgba(127, 29, 29, 0.30) !important;
  border-color: rgba(248, 113, 113, 0.50) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] .risk-ack a,
html[data-theme="dark"] #riskAckBox a {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}

html[data-theme="dark"] .formula,
html[data-theme="dark"] .hero-stat {
  background: #111827 !important;
  border-color: #334155 !important;
}


/* Footer placement fix — 2026-05-25
 * Keeps footer at the bottom on short account pages instead of floating mid-screen.
 */
html {
  min-height: 100% !important;
}

body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body > main,
body > .main,
main#main,
.page {
  flex: 1 0 auto !important;
}

body > footer,
footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}


/* Account status banner dark fix — 2026-05-25 */
html[data-theme="dark"] .asteria-clarity-bar {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
html[data-theme="dark"] .asteria-clarity-inner {
  background: linear-gradient(135deg, #111827, #151b2e) !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .asteria-clarity-bar.ok .asteria-clarity-inner {
  border-color: rgba(16, 185, 129, .28) !important;
  background: #111827 !important;
}
html[data-theme="dark"] .asteria-clarity-bar.warn .asteria-clarity-inner,
html[data-theme="dark"] .asteria-clarity-bar.public .asteria-clarity-inner {
  border-color: rgba(148, 163, 184, .26) !important;
  background: #111827 !important;
}
html[data-theme="dark"] .asteria-clarity-bar.info .asteria-clarity-inner {
  border-color: rgba(59, 130, 246, .28) !important;
  background: #111827 !important;
}
html[data-theme="dark"] .asteria-clarity-eyebrow { color: #c4b5fd !important; }


/* ============================================================
 * Asteria component baseline — 2026-05-28
 * Shared shape and interaction rules for the static pages. Page-level
 * styles can still set layout, but these keep controls, cards, tables
 * and chart frames from drifting into different products.
 * ============================================================ */
:root {
  --aq-bg: #f5f6f8;
  --aq-surface: #ffffff;
  --aq-surface-soft: #f8fafc;
  --aq-ink: #101827;
  --aq-muted: #64748b;
  --aq-faint: #94a3b8;
  --aq-line: #dbe0e7;
  --aq-line-soft: #e8edf3;
  --aq-primary: #111827;
  --aq-accent: #8b5cf6;
  --aq-accent-2: #ec4899;
  --aq-good: #10b981;
  --aq-good-ink: #047857;
  --aq-warn: #f59e0b;
  --aq-warn-ink: #b45309;
  --aq-bad: #ef4444;
  --aq-bad-ink: #b91c1c;
}

.btn,
button.btn,
a.btn,
.tab,
.pill,
.chip,
.badge,
.tag,
.status,
.status-badge,
.result-badge,
.profile-badge,
.theme-toggle,
input,
select,
textarea {
  border-radius: 0 !important;
}

.btn,
button.btn,
a.btn {
  min-height: 42px;
  border: 1px solid var(--aq-line);
  background: var(--aq-surface);
  color: var(--aq-ink);
  font-weight: 900;
  text-decoration: none;
  box-shadow: none;
}

.btn.primary,
button.btn.primary,
a.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--aq-accent), var(--aq-accent-2));
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.btn.dark,
button.btn.dark,
a.btn.dark {
  background: var(--aq-primary);
  border-color: var(--aq-primary);
  color: #ffffff;
}

.btn.danger,
button.btn.danger,
a.btn.danger {
  background: #3b1118;
  border-color: #7f1d1d;
  color: #fecaca;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(139, 92, 246, .26);
  outline-offset: 2px;
}

.card,
.panel,
.metric,
.kpi,
.strategy-card,
.variant-filters,
.results-panel,
.result-chip,
.select-card,
.exchange-card,
.review-card,
.settings-panel,
.profile-card,
.decision-card,
.event,
.event-row,
.risk-action,
.modal,
.empty,
.aq-card {
  border-radius: 0 !important;
}

.card,
.panel,
.metric,
.kpi,
.aq-card {
  border-color: var(--aq-line);
}

table,
.table,
.aq-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table th,
.table th,
.aq-table th {
  height: 38px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .55px;
  font-size: 10px;
  font-weight: 950;
}

table td,
.table td,
.aq-table td {
  vertical-align: middle;
}

.price-pos,
.pnl-pos,
.good,
.green {
  color: var(--aq-good-ink);
}

.price-neg,
.pnl-neg,
.bad,
.red {
  color: var(--aq-bad-ink);
}

.price-flat,
.pnl-flat,
.muted {
  color: var(--aq-muted);
}

.chart,
.chart-card,
.runner-chart,
.decision-chart,
.equity-chart,
#equityChart {
  border-radius: 0 !important;
}

html[data-theme="dark"] {
  --aq-bg: #0a0f1c;
  --aq-surface: #111827;
  --aq-surface-soft: #0f172a;
  --aq-ink: #e5e7eb;
  --aq-muted: #cbd5e1;
  --aq-faint: #94a3b8;
  --aq-line: #334155;
  --aq-line-soft: #263244;
  --aq-primary: #f8fafc;
  --aq-good-ink: #5eead4;
  --aq-bad-ink: #fca5a5;
}
html[data-theme="dark"] .asteria-clarity-title { color: #f8fafc !important; }
html[data-theme="dark"] .asteria-clarity-body { color: #cbd5e1 !important; }
html[data-theme="dark"] .asteria-clarity-summary { color: #e2e8f0 !important; }
html[data-theme="dark"] .asteria-clarity-chip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .asteria-clarity-chip.muted {
  background: #172033 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .asteria-clarity-chip.warn {
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .35) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .asteria-clarity-chip.ok {
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(16, 185, 129, .35) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .asteria-clarity-action {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #f8fafc !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .asteria-clarity-secondary {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .asteria-clarity-sub { color: #94a3b8 !important; }


/* Strategy card dark polish — 2026-05-25
 * The previous dark override made inner borders too bright, especially in the
 * backtest panel. Keep structure, reduce visual noise.
 */
html[data-theme="dark"] .strategy-card {
  background: #0f172a !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .strategy-card:hover {
  border-color: rgba(192, 132, 252, .38) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .strategy-inner {
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .results-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(15, 23, 42, .48)) !important;
  border-color: rgba(148, 163, 184, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] .result-primary {
  border-bottom-color: rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] .result-primary strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .result-primary span {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .result-chip,
html[data-theme="dark"] .paper-monitor div,
html[data-theme="dark"] .mini-stat {
  background: rgba(15, 23, 42, .62) !important;
  border-color: rgba(148, 163, 184, .13) !important;
}

html[data-theme="dark"] .result-chip strong,
html[data-theme="dark"] .paper-monitor strong,
html[data-theme="dark"] .mini-stat strong,
html[data-theme="dark"] .price-note strong {
  color: #e5e7eb !important;
}

html[data-theme="dark"] .result-badge,
html[data-theme="dark"] .strategy-top span,
html[data-theme="dark"] .strategy-top .profile-badge {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .strategy-card.growth .strategy-top .profile-badge {
  background: rgba(245, 158, 11, .10) !important;
  border-color: rgba(245, 158, 11, .34) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .strategy-card.stable .strategy-top .profile-badge {
  background: rgba(16, 185, 129, .10) !important;
  border-color: rgba(16, 185, 129, .34) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .variant-card .variant-close-time {
  background: rgba(251, 191, 36, .10) !important;
  border-color: rgba(251, 191, 36, .34) !important;
  color: #fef3c7 !important;
}

html[data-theme="dark"] .price-note {
  border-top-color: rgba(148, 163, 184, .14) !important;
  border-bottom-color: rgba(148, 163, 184, .10) !important;
  background: transparent !important;
}

html[data-theme="dark"] .actions .btn:not(.primary),
html[data-theme="dark"] .strategy-actions .btn:not(.primary) {
  background: rgba(15, 23, 42, .70) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .cover-grid {
  stroke: rgba(148, 163, 184, .12) !important;
}

html[data-theme="dark"] .cover-candle line {
  stroke: rgba(226, 232, 240, .58) !important;
}

html[data-theme="dark"] .cover-label {
  fill: rgba(226, 232, 240, .48) !important;
}


/* FAQ and generic content dark readability — 2026-05-25
 * Some pages define white FAQ/detail cards in inline CSS. In dark mode those
 * cards became white surfaces with pale text, which is worse than no theme.
 */
html[data-theme="dark"] .shell,
html[data-theme="dark"] .faq-shell,
html[data-theme="dark"] .cat-nav,
html[data-theme="dark"] .group {
  background: transparent !important;
}

html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .faq-hero h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #f3f6fc !important;
  color: #f3f6fc !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .faq-hero p {
  color: #d3dbea !important;
}

html[data-theme="dark"] .group h2 {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .group h2 .ico {
  background: #1d2738 !important;
  color: #f3f6fc !important;
  border: 1px solid #36445a !important;
}

html[data-theme="dark"] .item,
html[data-theme="dark"] details.item,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion-item {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e7edf7 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .item[open],
html[data-theme="dark"] details.item[open],
html[data-theme="dark"] .accordion-item.open {
  border-color: #536179 !important;
  background: #151e2d !important;
}

html[data-theme="dark"] .item summary,
html[data-theme="dark"] details.item summary,
html[data-theme="dark"] .faq-item summary,
html[data-theme="dark"] .accordion summary,
html[data-theme="dark"] .accordion-title {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .item summary:after,
html[data-theme="dark"] details.item summary:after {
  color: #b8c4d8 !important;
}

html[data-theme="dark"] .item .body,
html[data-theme="dark"] details.item .body,
html[data-theme="dark"] .faq-item .body,
html[data-theme="dark"] .accordion-body {
  color: #d3dbea !important;
}

html[data-theme="dark"] .item .body p,
html[data-theme="dark"] .item .body li,
html[data-theme="dark"] .item .body span,
html[data-theme="dark"] .item .body strong,
html[data-theme="dark"] details.item .body p,
html[data-theme="dark"] details.item .body li,
html[data-theme="dark"] details.item .body span,
html[data-theme="dark"] details.item .body strong {
  color: #d3dbea !important;
}

html[data-theme="dark"] .item .body strong,
html[data-theme="dark"] details.item .body strong {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .item .body li::marker,
html[data-theme="dark"] details.item .body li::marker {
  color: #8ea2c2 !important;
}

html[data-theme="dark"] .cat-pill {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #d3dbea !important;
}

html[data-theme="dark"] .cat-pill:hover {
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
}


/* Strategy detail dark theme — 2026-05-25
 * The profile page draws SVG charts with hardcoded light colors. Re-skin the
 * section surfaces and the SVG presentation attributes so dark mode reads as
 * one coherent product screen instead of a dark page with white chart inserts.
 */
html[data-theme="dark"] .equity-board,
html[data-theme="dark"] .runner-board {
  background: #0b1020 !important;
  border-top-color: rgba(148, 163, 184, .16) !important;
  border-bottom-color: rgba(148, 163, 184, .12) !important;
}

html[data-theme="dark"] .equity-head h2,
html[data-theme="dark"] .chart-head h2 {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .equity-head p,
html[data-theme="dark"] .chart-head p,
html[data-theme="dark"] .chart-range,
html[data-theme="dark"] .chart-watermark {
  color: #9fb0c8 !important;
}

html[data-theme="dark"] .equity-chart,
html[data-theme="dark"] .runner-chart {
  background: #0f172a !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

html[data-theme="dark"] .equity-row,
html[data-theme="dark"] .equity-note,
html[data-theme="dark"] .metric-tile,
html[data-theme="dark"] .decision-card,
html[data-theme="dark"] .check-item {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .20) !important;
  color: #d3dbea !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .metric-tile.accent,
html[data-theme="dark"] .equity-row.hero-metric,
html[data-theme="dark"] .decision-card {
  background: linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(20, 83, 45, .25)) !important;
  border-color: rgba(34, 197, 94, .34) !important;
}

html[data-theme="dark"] .check-item.yes {
  background: rgba(20, 83, 45, .20) !important;
  border-color: rgba(34, 197, 94, .32) !important;
}

html[data-theme="dark"] .check-item:not(.yes) {
  background: rgba(127, 29, 29, .16) !important;
  border-color: rgba(248, 113, 113, .24) !important;
}

html[data-theme="dark"] .equity-row span,
html[data-theme="dark"] .equity-note,
html[data-theme="dark"] .metric-tile small,
html[data-theme="dark"] .decision-card p,
html[data-theme="dark"] .check-item p {
  color: #9fb0c8 !important;
}

html[data-theme="dark"] .equity-row strong,
html[data-theme="dark"] .metric-tile strong,
html[data-theme="dark"] .check-item span {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .equity-row.hero-metric span,
html[data-theme="dark"] .metric-tile.accent small,
html[data-theme="dark"] .decision-card strong {
  color: #86efac !important;
}

html[data-theme="dark"] .equity-row.hero-metric strong,
html[data-theme="dark"] .metric-tile.accent strong {
  color: #dcfce7 !important;
}

html[data-theme="dark"] .chart-tool,
html[data-theme="dark"] .ticker-control,
html[data-theme="dark"] .legend-item {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .22) !important;
  color: #e7edf7 !important;
}

html[data-theme="dark"] .chart-tool:hover {
  background: #1e293b !important;
  border-color: rgba(192, 132, 252, .54) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .ticker-select {
  background: #0f172a !important;
  color: #f3f6fc !important;
}

html[data-theme="dark"] .chart-tooltip,
html[data-theme="dark"] .equity-tooltip {
  background: rgba(11, 16, 32, .94) !important;
  color: #f3f6fc !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] .chart-tooltip span,
html[data-theme="dark"] .equity-tooltip span {
  color: #d3dbea !important;
}

html[data-theme="dark"] .mini-tape i {
  background: rgba(148, 163, 184, .26) !important;
}

/* SVG chart palette overrides. These target presentation attributes emitted by
 * strategy-interactive-charts.js and keep the charts legible in dark mode.
 */
html[data-theme="dark"] .equity-chart svg rect[fill="#f8fafc"],
html[data-theme="dark"] .runner-chart svg rect[fill="#f8fafc"] {
  fill: #0f172a !important;
}

html[data-theme="dark"] .equity-chart svg rect[fill="#f4f7fb"],
html[data-theme="dark"] .runner-chart svg rect[fill="#f4f6f9"] {
  fill: #111827 !important;
}

html[data-theme="dark"] .equity-chart svg rect[fill="#fff"],
html[data-theme="dark"] .equity-chart svg rect[fill="#ffffff"],
html[data-theme="dark"] .runner-chart svg rect[fill="#fff"],
html[data-theme="dark"] .runner-chart svg rect[fill="#ffffff"] {
  fill: #0b1020 !important;
}

html[data-theme="dark"] .equity-chart svg line[stroke="#e5eaf1"],
html[data-theme="dark"] .equity-chart svg line[stroke="#edf2f7"],
html[data-theme="dark"] .runner-chart svg line[stroke="#e5eaf1"],
html[data-theme="dark"] .runner-chart svg line[stroke="#edf2f7"],
html[data-theme="dark"] .equity-chart svg line[stroke="#cbd5e1"],
html[data-theme="dark"] .runner-chart svg line[stroke="#cbd5e1"] {
  stroke: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] .equity-chart svg line[stroke="#94a3b8"],
html[data-theme="dark"] .runner-chart svg line[stroke="#94a3b8"] {
  stroke: rgba(203, 213, 225, .42) !important;
}

html[data-theme="dark"] .equity-chart svg line[stroke="#111827"],
html[data-theme="dark"] .runner-chart svg line[stroke="#111827"] {
  stroke: rgba(226, 232, 240, .50) !important;
}

html[data-theme="dark"] .equity-chart svg text[fill="#64748b"],
html[data-theme="dark"] .equity-chart svg text[fill="#526174"],
html[data-theme="dark"] .runner-chart svg text[fill="#64748b"],
html[data-theme="dark"] .runner-chart svg text[fill="#526174"] {
  fill: #9fb0c8 !important;
}

html[data-theme="dark"] .equity-chart svg text[fill="#111827"],
html[data-theme="dark"] .runner-chart svg text[fill="#111827"] {
  fill: #f3f6fc !important;
}

html[data-theme="dark"] .equity-chart svg text[fill="#b45309"],
html[data-theme="dark"] .runner-chart svg text[fill="#b45309"] {
  fill: #fbbf24 !important;
}

html[data-theme="dark"] .equity-chart svg circle[stroke="#f8fafc"],
html[data-theme="dark"] .runner-chart svg circle[stroke="#f8fafc"] {
  stroke: #0f172a !important;
}

html[data-theme="dark"] .equity-chart svg path[fill="#16a34a"] {
  fill: rgba(34, 197, 94, .20) !important;
}

html[data-theme="dark"] .runner-chart svg rect[fill="#cbd5e1"] {
  fill: #334155 !important;
}

html[data-theme="dark"] .cat-pill.active {
  background: #e7edf7 !important;
  border-color: #e7edf7 !important;
  color: #0b1020 !important;
}

html[data-theme="dark"] .cta-box {
  background: #111827 !important;
  border: 1px solid #334155 !important;
  color: #f3f6fc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .cta-box p {
  color: #d3dbea !important;
}

html[data-theme="dark"] .cta-box .btn {
  background: #1d2738 !important;
  border: 1px solid #44546c !important;
  color: #f3f6fc !important;
}

/* Strategy detail lower blocks — the audit chips and launch-mode boxes are
 * defined in page-local CSS as white cards. Keep them dark and readable. */
html[data-theme="dark"] .audit,
html[data-theme="dark"] .assets .note {
  background: #101827 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #dbe7f6 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .audit h2,
html[data-theme="dark"] .assets h2 {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .audit p,
html[data-theme="dark"] .assets .section p,
html[data-theme="dark"] .assets .note {
  color: #a8b8cf !important;
}

html[data-theme="dark"] .audit-chip,
html[data-theme="dark"] .asset {
  background: #151e2f !important;
  border-color: rgba(148, 163, 184, .26) !important;
  color: #e6edf8 !important;
}

html[data-theme="dark"] .audit-chip small,
html[data-theme="dark"] .asset span {
  color: #9fb0c8 !important;
}

html[data-theme="dark"] .audit-chip strong,
html[data-theme="dark"] .asset strong {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .audit-step {
  border-top-color: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] .audit-step b {
  background: #26344d !important;
  color: #f8fbff !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] .audit-step span {
  color: #f3f6fc !important;
}

html[data-theme="dark"] .audit-step em {
  color: #a8b8cf !important;
}


/* 2026-05-26: Dark setup readability pass.
   Avoid white islands and low-contrast helper cards on onboarding/API screens. */
html[data-theme="dark"] .shell,
html[data-theme="dark"] main,
html[data-theme="dark"] .panel-body {
  color: #e5edf8 !important;
}
html[data-theme="dark"] .api-help,
html[data-theme="dark"] .exchange-paths,
html[data-theme="dark"] .path,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .api-preview,
html[data-theme="dark"] .security,
html[data-theme="dark"] .warning-box {
  background: #141b2b !important;
  border-color: #344056 !important;
  color: #e5edf8 !important;
}
html[data-theme="dark"] .api-help h3,
html[data-theme="dark"] .exchange-paths h3,
html[data-theme="dark"] .path strong,
html[data-theme="dark"] .summary strong,
html[data-theme="dark"] .summary-card strong {
  color: #f8fafc !important;
}
html[data-theme="dark"] .api-help li,
html[data-theme="dark"] .path span,
html[data-theme="dark"] .summary span,
html[data-theme="dark"] .summary-line span {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background: #101827 !important;
  border-color: #3a465d !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
  color: #8ea0b8 !important;
}
html[data-theme="dark"] .field .password-toggle,
html[data-theme="dark"] .password-toggle {
  background: #101827 !important;
  border-color: #3a465d !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .select-card[data-availability="soon"],
html[data-theme="dark"] .exchange-card[data-availability="soon"] {
  opacity: .72 !important;
}
html[data-theme="dark"] .notice,
html[data-theme="dark"] .callout {
  background: #18243a !important;
  border-color: #3a465d !important;
  color: #e5edf8 !important;
}
html[data-theme="dark"] a {
  color: #a5b4fc !important;
}

/* 2026-05-28: targeted readability fixes */
html[data-theme="dark"] .auth-topbar + .shell .card input,
html[data-theme="dark"] .auth-topbar + .shell .card .password-wrap input {
  background: #101827 !important;
  border-color: #3a465d !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html[data-theme="dark"] .auth-topbar + .shell .card input::placeholder { color: #8ea0b8 !important; }
html[data-theme="dark"] .auth-topbar + .shell .card input:-webkit-autofill,
html[data-theme="dark"] .auth-topbar + .shell .card input:-webkit-autofill:hover,
html[data-theme="dark"] .auth-topbar + .shell .card input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #101827 inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
}
.account-page-keys .page-head { align-items: flex-start !important; }
.account-page-keys .page-head > div { flex: 1 1 auto !important; }
.account-page-keys #openKeyModal { margin-left: auto !important; }

/* 2026-05-28: final readability/alignment fixes */
.account-page-keys .page-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  width:100%!important;
  align-items:start!important;
}
.account-page-keys .page-head #openKeyModal{justify-self:end!important;margin-left:0!important}
.auth-topbar ~ .shell .card input,
.auth-topbar ~ .shell .card .password-wrap input{
  background:#101827!important;
  border-color:#3a465d!important;
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  caret-color:#f8fafc!important;
}
.auth-topbar ~ .shell .card input::placeholder{color:#8ea0b8!important;opacity:1!important}
.auth-topbar ~ .shell .card input:is(:-webkit-autofill,:autofill),
.auth-topbar ~ .shell .card input:is(:-webkit-autofill,:autofill):hover,
.auth-topbar ~ .shell .card input:is(:-webkit-autofill,:autofill):focus{
  box-shadow:0 0 0 1000px #101827 inset!important;
  -webkit-text-fill-color:#f8fafc!important;
  caret-color:#f8fafc!important;
  background-color:#101827!important;
  transition:background-color 999999s ease-in-out 0s!important;
}
html[data-theme="dark"] .exchange-mini-guide,
html[data-theme="dark"] .modal-guide{
  background:#111827!important;
  border-color:#334155!important;
  color:#e5edf7!important;
}
html[data-theme="dark"] .exchange-mini-guide strong,
html[data-theme="dark"] .modal-guide strong{color:#f8fafc!important}
html[data-theme="dark"] .exchange-mini-guide p,
html[data-theme="dark"] .modal-guide p{color:#cbd5e1!important}
html[data-theme="dark"] .exchange-mini-guide a,
html[data-theme="dark"] .modal-guide a{color:#c4b5fd!important}
html[data-theme="dark"] .validation-standard{background:#111827!important;border-color:#334155!important}
html[data-theme="dark"] .validation-standard strong{color:#f8fafc!important}
html[data-theme="dark"] .validation-standard span,
html[data-theme="dark"] .validation-standard small{color:#cbd5e1!important}

@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]) .exchange-mini-guide,
  html:not([data-theme="light"]) .modal-guide{
    background:#111827!important;
    border-color:#334155!important;
    color:#e5edf7!important;
  }
  html:not([data-theme="light"]) .exchange-mini-guide strong,
  html:not([data-theme="light"]) .modal-guide strong{color:#f8fafc!important}
  html:not([data-theme="light"]) .exchange-mini-guide p,
  html:not([data-theme="light"]) .modal-guide p{color:#cbd5e1!important}
  html:not([data-theme="light"]) .validation-standard{background:#111827!important;border-color:#334155!important}
}
body.setup-flow .screen[data-screen="3"] .form-grid,
body.connection-flow .screen[data-screen="3"] .form-grid{grid-template-columns:1fr!important}
body.setup-flow .screen[data-screen="3"] .required-permissions,
body.connection-flow .screen[data-screen="3"] .required-permissions,
body.setup-flow .screen[data-screen="3"] .permission-box>h3,
body.connection-flow .screen[data-screen="3"] .permission-box>h3,
body.setup-flow .screen[data-screen="3"] .permission-box>.warning,
body.connection-flow .screen[data-screen="3"] .permission-box>.warning{display:none!important}
body.setup-flow .screen[data-screen="3"] .permission-report h3,
body.connection-flow .screen[data-screen="3"] .permission-report h3{display:block!important}
