:root {
  --hq-page: #070b13;
  --hq-shell: rgba(8, 12, 20, .96);
  --hq-topbar: rgba(7, 11, 19, .78);
  --hq-surface: rgba(16, 24, 39, .72);
  --hq-surface-strong: #111827;
  --hq-surface-soft: rgba(7, 11, 19, .4);
  --hq-field: rgba(7, 11, 19, .52);
  --hq-text: #eaf1fa;
  --hq-muted: #94a4bb;
  --hq-faint: #5c6b82;
  --hq-border: rgba(148, 164, 187, .14);
  --hq-shadow: rgba(0, 0, 0, .34);
}

html[data-theme="light"] {
  --bg: #f4f6f9;
  --txt: #172033;
  --muted: #5f6f84;
  --faint: #8190a2;
  --line: rgba(52, 65, 85, .09);
  --line2: rgba(52, 65, 85, .14);
  --line3: rgba(52, 65, 85, .2);
  --panel-a: rgba(255, 255, 255, .92);
  --panel-b: rgba(246, 248, 251, .9);
  --hq-page: #f4f6f9;
  --hq-shell: rgba(255, 255, 255, .96);
  --hq-topbar: rgba(250, 251, 253, .88);
  --hq-surface: rgba(255, 255, 255, .9);
  --hq-surface-strong: #ffffff;
  --hq-surface-soft: rgba(238, 242, 247, .76);
  --hq-field: rgba(247, 249, 252, .96);
  --hq-text: #172033;
  --hq-muted: #5f6f84;
  --hq-faint: #8190a2;
  --hq-border: rgba(52, 65, 85, .14);
  --hq-shadow: rgba(24, 36, 56, .13);
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  background: var(--hq-page);
  color: var(--hq-text);
  transition: background-color .2s ease, color .2s ease;
}

html[data-theme="light"] .hq-bg {
  background: #f4f6f9;
}

html[data-theme="light"] .hq-bg .glow {
  background:
    radial-gradient(1100px 700px at 8% -8%, rgba(231, 178, 76, .13), transparent 60%),
    radial-gradient(900px 620px at 100% 0%, rgba(45, 212, 191, .08), transparent 58%),
    radial-gradient(1000px 800px at 50% 120%, rgba(96, 165, 250, .05), transparent 60%);
}

html[data-theme="light"] .hq-bg .grid {
  opacity: .42;
  background-image:
    linear-gradient(rgba(52, 65, 85, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 65, 85, .055) 1px, transparent 1px);
}

html[data-theme="light"] .hq-bg canvas { opacity: .48; }

html[data-theme="light"] .hq-aside {
  border-color: var(--hq-border) !important;
  background: var(--hq-shell) !important;
  box-shadow: 12px 0 34px rgba(24, 36, 56, .04);
}

html[data-theme="light"] .hq-topbar {
  border-color: var(--hq-border) !important;
  background: var(--hq-topbar) !important;
  box-shadow: 0 8px 28px rgba(24, 36, 56, .035);
}

html[data-theme="light"] .hq-navitem { color: var(--hq-muted) !important; }
html[data-theme="light"] .hq-navitem[style*="color:#eaf1fa"] { color: var(--hq-text) !important; }

html[data-theme="light"] .hq-app [style*="color:#eaf1fa"],
html[data-theme="light"] .hq-app [style*="color: #eaf1fa"],
html[data-theme="light"] .hq-app [style*="color:#cbd5e1"],
html[data-theme="light"] .hq-app [style*="color:#cbd6e4"],
html[data-theme="light"] .hq-app [style*="color:#d8e2ef"],
html[data-theme="light"] .hq-app [style*="color:#dbe7f5"] {
  color: var(--hq-text) !important;
}

html[data-theme="light"] .hq-app [style*="color:#94a4bb"],
html[data-theme="light"] .hq-app [style*="color: #94a4bb"] {
  color: var(--hq-muted) !important;
}

html[data-theme="light"] .hq-app [style*="color:#5c6b82"],
html[data-theme="light"] .hq-app [style*="color: #5c6b82"],
html[data-theme="light"] .hq-app [style*="color:#6f7f96"] {
  color: var(--hq-faint) !important;
}

html[data-theme="light"] .hq-content [style*="background:rgba(7,11,19"],
html[data-theme="light"] .hq-content [style*="background: rgba(7,11,19"],
html[data-theme="light"] .hq-content [style*="background:rgba(10,15,26"],
html[data-theme="light"] .hq-content [style*="background: rgba(10,15,26"] {
  background: var(--hq-surface-soft) !important;
}

html[data-theme="light"] .hq-content [style*="linear-gradient(165deg,rgba(16,24,39"],
html[data-theme="light"] .hq-content [style*="linear-gradient(165deg, rgba(16,24,39"],
html[data-theme="light"] .hq-content [style*="linear-gradient(165deg,rgba(18,24,35"] {
  background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(246,248,251,.92)) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color: var(--hq-text);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #8996a8; }

html[data-theme="light"] .settings-card,
html[data-theme="light"] .aud-card,
html[data-theme="light"] .vid-card,
html[data-theme="light"] .sc-panel,
html[data-theme="light"] .ph,
html[data-theme="light"] .asset-prompt-box {
  border-color: var(--hq-border);
  background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(246,248,251,.92));
  box-shadow: 0 16px 38px var(--hq-shadow);
}

html[data-theme="light"] .settings-card-title,
html[data-theme="light"] .profile-name,
html[data-theme="light"] .info-value,
html[data-theme="light"] .field span,
html[data-theme="light"] .member-name,
html[data-theme="light"] .billing-title,
html[data-theme="light"] .aud-label,
html[data-theme="light"] .voice-name,
html[data-theme="light"] .label,
html[data-theme="light"] .mode-title,
html[data-theme="light"] .motion-drop strong,
html[data-theme="light"] .avatar-new b,
html[data-theme="light"] .avatar-name,
html[data-theme="light"] .tpl-title,
html[data-theme="light"] .asset-prompt-title {
  color: var(--hq-text);
}

html[data-theme="light"] .settings-sub,
html[data-theme="light"] .profile-user,
html[data-theme="light"] .billing-sub,
html[data-theme="light"] .aud-muted,
html[data-theme="light"] .muted {
  color: var(--hq-muted);
}

html[data-theme="light"] .settings-card-note,
html[data-theme="light"] .info-label,
html[data-theme="light"] .member-sub,
html[data-theme="light"] .theme-note,
html[data-theme="light"] .aud-faint,
html[data-theme="light"] .faint,
html[data-theme="light"] .sc-hint,
html[data-theme="light"] .mode-desc,
html[data-theme="light"] .voice-sub,
html[data-theme="light"] .tpl-sub {
  color: var(--hq-faint);
}

html[data-theme="light"] .theme-option {
  color: var(--hq-muted);
  border-color: var(--hq-border);
  background: rgba(247,249,252,.86);
}

html[data-theme="light"] .theme-option.on {
  border-color: rgba(200,144,47,.52);
  background: rgba(231,178,76,.11);
}

html[data-theme="light"] .theme-option-label { color: var(--hq-text); }

html[data-theme="light"] .info-cell,
html[data-theme="light"] .member-row,
html[data-theme="light"] .param-box,
html[data-theme="light"] .player,
html[data-theme="light"] .sc-card,
html[data-theme="light"] .motion-panel,
html[data-theme="light"] .motion-preset-panel,
html[data-theme="light"] .avatar-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .function-tabs,
html[data-theme="light"] .voice-tabs {
  border-color: var(--hq-border);
  background: var(--hq-surface-soft);
}

html[data-theme="light"] .field input,
html[data-theme="light"] .tpl-input,
html[data-theme="light"] textarea,
html[data-theme="light"] .text-input {
  border-color: var(--hq-border);
  background: var(--hq-field);
  color: var(--hq-text);
}

html[data-theme="light"] .btn:not(.primary):not(.danger),
html[data-theme="light"] .asset-action,
html[data-theme="light"] .sc-btn,
html[data-theme="light"] .copy-btn,
html[data-theme="light"] .kwchip,
html[data-theme="light"] .tpl-card,
html[data-theme="light"] .voice-card,
html[data-theme="light"] .mode-tab,
html[data-theme="light"] .avatar-card {
  color: var(--hq-muted);
  border-color: var(--hq-border);
  background: rgba(255,255,255,.7);
}

html[data-theme="light"] .toast,
html[data-theme="light"] .tip,
html[data-theme="light"] .settings-modal,
html[data-theme="light"] .hqpm,
html[data-theme="light"] .hqnd {
  color: var(--hq-text);
  border-color: var(--hq-border);
  background: var(--hq-surface-strong);
  box-shadow: 0 24px 70px var(--hq-shadow);
}

html[data-theme="light"] .hqpr.head { background: #eef2f7; }
html[data-theme="light"] .hqpf select { background: #f7f9fc; color: var(--hq-text); }
html[data-theme="light"] .hq-notify-badge { border-color: #f9fafb; }
html[data-theme="light"] .hqno { background: rgba(24, 36, 56, .22); }

/* Leads page: replace its page-local dark KPI and table surfaces. */
html[data-theme="light"] .hq-content[data-active="leads"] .lead-kpi-card {
  border-color: var(--hq-border) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 30px rgba(24,36,56,.07);
}

html[data-theme="light"] .hq-content[data-active="leads"] .lead-kpi-card:first-child {
  border-color: rgba(200,144,47,.3) !important;
  background: linear-gradient(165deg, rgba(255,249,235,.96), rgba(255,255,255,.9)) !important;
}

html[data-theme="light"] .hq-content[data-active="leads"] .leads-table {
  border-color: var(--hq-border) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 16px 38px rgba(24,36,56,.07);
}

html[data-theme="light"] .hq-content[data-active="leads"] .leads-table > .lrowg {
  color: var(--hq-muted) !important;
  border-color: var(--hq-border) !important;
  background: #eef2f7 !important;
}

html[data-theme="light"] .hq-content[data-active="leads"] .leads-table #rows {
  background: rgba(248,250,252,.7);
}

html[data-theme="light"] .hq-content[data-active="inspiration"] .inspiration-tab {
  color: var(--hq-muted);
}

html[data-theme="light"] .hq-content[data-active="inspiration"] .inspiration-tab.on {
  color: #7b5310;
  background: rgba(231,178,76,.14);
  box-shadow: inset 0 0 0 1px rgba(200,144,47,.28);
}

html[data-theme="light"] .hq-content[data-active="collect"] .collect-result-panel {
  border-color: rgba(200,144,47,.22) !important;
  background: linear-gradient(165deg, rgba(255,252,244,.96), rgba(255,255,255,.92)) !important;
  box-shadow: 0 16px 38px rgba(24,36,56,.08);
}

/* Creation pages: keep media vivid while lifting their result surfaces. */
html[data-theme="light"] .image-result-panel,
html[data-theme="light"] .script-preview-panel {
  border-color: rgba(200,144,47,.24) !important;
  background: linear-gradient(165deg, rgba(255,252,244,.97), rgba(255,255,255,.94)) !important;
  box-shadow: 0 16px 38px rgba(24,36,56,.08);
}

/* Recharge page: remove the remaining dark summary, package and table shells. */
html[data-theme="light"] .recharge-summary {
  border-color: rgba(200,144,47,.28) !important;
  background: linear-gradient(120deg, rgba(255,247,226,.96), rgba(255,255,255,.94)) !important;
  box-shadow: 0 16px 38px rgba(24,36,56,.07);
}

html[data-theme="light"] .recharge-package {
  border-color: var(--hq-border) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 28px rgba(24,36,56,.06);
}

html[data-theme="light"] .recharge-package.recommended {
  border-color: rgba(200,144,47,.48) !important;
  background: linear-gradient(165deg, rgba(255,248,230,.98), rgba(255,255,255,.94)) !important;
}

html[data-theme="light"] .recharge-package.enterprise {
  border-color: rgba(13,148,136,.25) !important;
}

html[data-theme="light"] #rechargeNote {
  color: var(--hq-text) !important;
  border-color: var(--hq-border) !important;
  background: var(--hq-field) !important;
}

html[data-theme="light"] .recharge-history {
  border-color: var(--hq-border) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 38px rgba(24,36,56,.07);
}

html[data-theme="light"] .recharge-history .txhead {
  color: var(--hq-muted) !important;
  border-color: var(--hq-border) !important;
  background: #eef2f7 !important;
}

/* Asset cards are generated at runtime, so they need stable theme hooks. */
html[data-theme="light"] .asset-library-tabs {
  border-color: var(--hq-border) !important;
  background: rgba(238,242,247,.86) !important;
}

html[data-theme="light"] .asset-library-card {
  color: var(--hq-text);
  border-color: var(--hq-border) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 30px rgba(24,36,56,.07) !important;
}

/* Video history cards use light shells; actual video frames remain dark. */
html[data-theme="light"] .history-item {
  color: var(--hq-muted);
  border-color: var(--hq-border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(24,36,56,.06);
}

html[data-theme="light"] .history-text,
html[data-theme="light"] .job-progress-top { color: var(--hq-text); }

html[data-theme="light"] .history-tag,
html[data-theme="light"] .history-link,
html[data-theme="light"] .job-progress {
  color: var(--hq-muted);
  border-color: var(--hq-border);
  background: rgba(238,242,247,.82);
}

html[data-theme="light"] .history-created { color: var(--hq-faint); }

/* Tutorials page: keep video media dark while adapting the surrounding UI. */
html[data-theme="light"] .hq-content[data-active="tutorials"] .tutCard {
  color: var(--hq-text);
  border-color: var(--hq-border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(24,36,56,.07);
}

html[data-theme="light"] .hq-content[data-active="tutorials"] .tutCard .ttl,
html[data-theme="light"] .hq-content[data-active="tutorials"] .secHead .h,
html[data-theme="light"] .tutBar .tt,
html[data-theme="light"] .tutSoon .st {
  color: var(--hq-text);
}

html[data-theme="light"] .hq-content[data-active="tutorials"] .tutCard .dsc,
html[data-theme="light"] .hq-content[data-active="tutorials"] .secHead .s,
html[data-theme="light"] .tutSoon {
  color: var(--hq-muted);
}

html[data-theme="light"] .hq-content[data-active="tutorials"] .secHead .cnt {
  color: var(--hq-faint);
}

html[data-theme="light"] .tutOv { background: rgba(24,36,56,.3); }

html[data-theme="light"] .tutBox {
  color: var(--hq-text);
  border-color: var(--hq-border);
  background: var(--hq-surface-strong);
  box-shadow: 0 30px 72px rgba(24,36,56,.22);
}

html[data-theme="light"] .tutBar { border-color: var(--hq-border); }

html[data-theme="light"] .tutBar .x {
  color: var(--hq-muted);
  background: var(--hq-surface-soft);
}

html[data-theme="light"] .tutBar .x:hover { color: var(--hq-text); }

html[data-theme="light"] .tutSoon {
  background: linear-gradient(165deg, rgba(248,250,252,.98), rgba(238,242,247,.96));
}

/* Canvas keeps its spatial contrast while matching the selected shell theme. */
html[data-theme="light"] body.nc-local-fullscreen .nc-wrap,
html[data-theme="light"] .nc-wrap:fullscreen,
html[data-theme="light"] .nc-wrap:-webkit-full-screen { background: var(--hq-page); }

html[data-theme="light"] .nc-board-card,
html[data-theme="light"] .nc-node,
html[data-theme="light"] .nc-menu,
html[data-theme="light"] .nc-side-panel,
html[data-theme="light"] .nc-dialog,
html[data-theme="light"] .nc-empty-card {
  color: var(--hq-text);
  border-color: var(--hq-border);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 40px var(--hq-shadow);
}

html[data-theme="light"] .nc-canvas {
  border-color: var(--hq-border);
  background:
    radial-gradient(rgba(52,65,85,.11) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(165deg, rgba(248,250,252,.98), rgba(238,242,247,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

html[data-theme="light"] .nc-fs-dock,
html[data-theme="light"] .nc-side-tools,
html[data-theme="light"] .nc-map,
html[data-theme="light"] .nc-float,
html[data-theme="light"] .nc-legend {
  color: var(--hq-muted);
  border-color: var(--hq-border);
  background: rgba(255,255,255,.9);
  box-shadow: 0 16px 38px var(--hq-shadow);
}

html[data-theme="light"] .nc-board-title,
html[data-theme="light"] .nc-template-name,
html[data-theme="light"] .nc-stat b,
html[data-theme="light"] .nc-node-title,
html[data-theme="light"] .nc-side-head strong,
html[data-theme="light"] .nc-side-title,
html[data-theme="light"] .nc-asset-info b,
html[data-theme="light"] .nc-empty-card b {
  color: var(--hq-text);
}

html[data-theme="light"] .nc-tab,
html[data-theme="light"] .nc-ghost,
html[data-theme="light"] .nc-select,
html[data-theme="light"] .nc-chip,
html[data-theme="light"] .nc-fold,
html[data-theme="light"] .nc-menu button,
html[data-theme="light"] .nc-side-tool,
html[data-theme="light"] .nc-side-close,
html[data-theme="light"] .nc-fs-btn,
html[data-theme="light"] .nc-template-btn {
  color: var(--hq-muted);
}

html[data-theme="light"] .nc-tab.on,
html[data-theme="light"] .nc-fs-btn:hover,
html[data-theme="light"] .nc-menu button:hover,
html[data-theme="light"] .nc-side-tool:hover,
html[data-theme="light"] .nc-side-tool.on { color: var(--hq-text); }

html[data-theme="light"] .nc-in,
html[data-theme="light"] .nc-name,
html[data-theme="light"] .nc-dialog input,
html[data-theme="light"] .nc-dialog textarea {
  color: var(--hq-text);
  border-color: var(--hq-border);
  background: var(--hq-field);
}

html[data-theme="light"] .nc-port { background: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}