:root {
  --theme-page: #f8fbff;
  --theme-page-end: #ffffff;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f1f6ff;
  --theme-surface-strong: #e7f0ff;
  --theme-text: #0d2258;
  --theme-heading: #0b1f55;
  --theme-muted: #667ba7;
  --theme-line: #dce7fb;
  --theme-header: rgba(255, 255, 255, .92);
  --theme-shadow: rgba(46, 86, 169, .12);
}

html[data-theme="dark"] {
  --theme-page: #07111f;
  --theme-page-end: #0b1728;
  --theme-surface: #101f33;
  --theme-surface-soft: #142842;
  --theme-surface-strong: #1a3150;
  --theme-text: #eaf2ff;
  --theme-heading: #f5f8ff;
  --theme-muted: #a9b9d2;
  --theme-line: #2a405f;
  --theme-header: rgba(7, 17, 31, .94);
  --theme-shadow: rgba(0, 0, 0, .34);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --theme-page: #07111f;
    --theme-page-end: #0b1728;
    --theme-surface: #101f33;
    --theme-surface-soft: #142842;
    --theme-surface-strong: #1a3150;
    --theme-text: #eaf2ff;
    --theme-heading: #f5f8ff;
    --theme-muted: #a9b9d2;
    --theme-line: #2a405f;
    --theme-header: rgba(7, 17, 31, .94);
    --theme-shadow: rgba(0, 0, 0, .34);
  }
}

html { background: var(--theme-page); }
body { color: var(--theme-text); background: linear-gradient(180deg, var(--theme-page-end), var(--theme-page) 50%, var(--theme-page-end)); }
h1, h2, h3, h4, h5, h6, .brand strong, .brand-name, .brand-name strong { color: var(--theme-heading); }
p, .muted, small, .field-note, .price-note, .flow-caption { color: var(--theme-muted); }
.topbar { background: var(--theme-header); border-color: var(--theme-line); }
.footer { background: var(--theme-page-end); border-color: var(--theme-line); }
.card, .feature-card, .device, .plan, .policy-card, .faq-card, .auth-panel,
.portal-section, .table-card, .chart-card, .kpi, .config-card, .device-flow-card,
.report-block, .notice-warning, .access-note, .preview-banner {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: 0 18px 55px var(--theme-shadow);
}
.section.alt, .auth-page, .config-page, .install-page, .report-page { background: var(--theme-page); }
.brand-page-hero, .brand-panel-hero, .concept-hero, .install-hero,
.install-page > .shell:not(.install-hero), .section.alt > .shell,
.welcome, .support-hero, .app-preview, .float-card, .screen-card, .app-row,
.package-card, .selectable-device {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: 0 18px 55px var(--theme-shadow);
}
.brand-page-hero h1, .brand-panel-hero h1, .concept-hero h1, .install-hero h1,
.welcome h1, .welcome h2, .support-hero h1, .support-hero h2 { color: var(--theme-heading); }
.brand-page-hero p, .brand-panel-hero p, .concept-hero p, .install-hero p,
.welcome p, .support-hero p { color: var(--theme-muted); }
.sidebar, .admin-layout .sidebar, .portal-layout .sidebar { background: var(--theme-surface); border-color: var(--theme-line); }
.side-link:hover, .side-link.active { background: var(--theme-surface-strong); }
input, select, textarea {
  color: var(--theme-text);
  background: var(--theme-surface-soft);
  border-color: var(--theme-line);
}
input::placeholder, textarea::placeholder { color: var(--theme-muted); }
table, th, td { color: var(--theme-text); border-color: var(--theme-line); }
thead, th { background: var(--theme-surface-soft); }
tbody tr:hover { background: var(--theme-surface-soft); }
.btn.ghost, .lang-switch, .theme-switch select { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-line); }
.lang-switch button { color: var(--theme-muted); }
.lang-switch button.active { background: var(--theme-surface-strong); }
.eyebrow, .plan-tag, .badge, .event, .trend { background: var(--theme-surface-soft); border-color: var(--theme-line); }
.flash { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-line); }
.nav a, .footer a, .auth-link { color: var(--theme-text); }
.nav.mobile-open { background: var(--theme-surface); border-color: var(--theme-line); }
.nav.mobile-open a.active, .nav.mobile-open .mobile-nav-auth .mobile-dashboard,
.nav.mobile-open .mobile-nav-auth .mobile-login { background: var(--theme-surface-strong); color: var(--theme-text); }
.nav.mobile-open .mobile-nav-auth { border-color: var(--theme-line); }

.theme-switch { display: inline-flex; align-items: center; }
.mobile-theme-switch { display: none; }
.theme-switch select {
  height: 42px;
  min-width: 112px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--theme-line);
  border-radius: 13px;
  font-weight: 800;
  cursor: pointer;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html[data-resolved-theme="dark"] .globe,
html[data-resolved-theme="dark"] .hero-art,
html[data-resolved-theme="dark"] .brand-page-art { filter: saturate(.92) brightness(.9); }
html[data-resolved-theme="dark"] .concept-master { mix-blend-mode: screen; opacity: .72; }
html[data-resolved-theme="dark"] .brand-panel-hero,
html[data-resolved-theme="dark"] .brand-page-hero,
html[data-resolved-theme="dark"] .concept-hero,
html[data-resolved-theme="dark"] .install-hero,
html[data-resolved-theme="dark"] .install-page > .shell:not(.install-hero),
html[data-resolved-theme="dark"] .section.alt > .shell {
  color: var(--theme-text) !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 18px 55px var(--theme-shadow) !important;
}
html[data-resolved-theme="dark"] .public-hero-title,
html[data-resolved-theme="dark"] .brand-panel-hero h1,
html[data-resolved-theme="dark"] .brand-page-hero h1,
html[data-resolved-theme="dark"] .concept-hero h1,
html[data-resolved-theme="dark"] .install-hero h1 { color: var(--theme-heading) !important; }
html[data-resolved-theme="dark"] .brand-page-hero .eyebrow,
html[data-resolved-theme="dark"] .brand-panel-hero .eyebrow,
html[data-resolved-theme="dark"] .install-hero .eyebrow,
html[data-resolved-theme="dark"] .concept-hero .eyebrow {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line) !important;
}

@media (max-width: 1050px) {
  .top-actions .theme-switch { display: none; }
  .mobile-theme-switch { display: inline-flex; margin-top: 10px; }
}