/* Light (default) / dark theme. html[data-theme] beats :root custom properties. */

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-control: #0f1318;
  --bg-control-muted: #1a1d23;
  --text-subtle: #94a3b8;
}

html[data-theme="light"] {
  color-scheme: light;
  background: #f4f6fa;
  color: #0f172a;

  --bg-dark: #f4f6fa;
  --bg-elevated: #ffffff;
  --panel-bg: #ffffff;
  --text-main: #0f172a;
  --text-dim: #334155;
  --text-muted: #475569;
  --border: #d8dee8;
  --accent-glow: rgba(37, 99, 235, 0.22);
  --accent-soft: color-mix(in srgb, var(--accent) 72%, #0f172a);

  --bg-card: #ffffff;
  --bg-input: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;

  --as-bg: #f4f6fa;
  --as-panel: #ffffff;
  --as-panel-2: #eef2f7;
  --as-border: #d8dee8;
  --as-text: #0f172a;
  --as-text-dim: #475569;
  --bg-control: #f8fafc;
  --bg-control-muted: #e8eef4;
  --text-subtle: #475569;
}

html[data-theme="light"] body,
html[data-theme="light"] body.as-app,
html[data-theme="light"] html {
  background-color: var(--bg-dark);
  color: var(--text-main, var(--as-text, #0f172a));
}

html[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.1), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99, 102, 241, 0.05), transparent);
}

/* Toggle — sits immediately right of the page title */
.itz-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border, #2d333f);
  background: var(--panel-bg, var(--as-panel, #1a1d23));
  color: var(--text-main, var(--as-text, #e2e8f0));
  cursor: pointer;
  flex: 0 0 auto;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.app-header .badge,
.app-header .eyebrow,
.as-topbar .badge {
  white-space: nowrap;
}

.app-header .badge,
.as-topbar .badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-glow, rgba(59, 130, 246, 0.18));
  color: var(--accent, #38bdf8);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.as-topbar .badge {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.app-header .logo-area {
  min-width: 0;
  flex: 1 1 auto;
}

.app-header .header-status-col {
  margin-left: auto;
  flex: 0 0 auto;
}

.itz-title-row,
.app-header .logo-title-row {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.itz-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.itz-header-actions .btn-to-dashboard {
  white-space: nowrap;
}

.itz-header-actions .lang-field {
  display: inline-flex;
  margin: 0;
}

.itz-header-actions .lang-field select,
.itz-header-actions #lang-select {
  height: 36px;
  max-width: 7.6rem;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #2d333f);
  background: var(--bg-input, var(--bg-control, #0c1016));
  color: var(--text-main, #e2e8f0);
  font: inherit;
  font-size: 13px;
}

@media (max-width: 720px) {
  .itz-header-actions .itz-theme-toggle {
    width: 36px;
    height: 36px;
  }

  .itz-header-actions .btn-to-dashboard {
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .itz-header-actions .lang-field select,
  .itz-header-actions #lang-select {
    height: 36px;
    font-size: 16px;
    max-width: 6.8rem;
  }
}

.logo-title-row > h1 .accent,
.hub-title .accent,
.as-logo .accent,
.as-logo-accent,
.header-copy h1 .accent {
  color: var(--accent, var(--as-accent, #3b82f6));
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--accent, var(--as-accent, #3b82f6)) 32%, transparent),
    0 0 20px color-mix(in srgb, var(--accent, var(--as-accent, #3b82f6)) 38%, transparent);
}

html[data-theme="light"] .logo-title-row > h1 .accent,
html[data-theme="light"] .hub-title .accent,
html[data-theme="light"] .as-logo .accent,
html[data-theme="light"] .as-logo-accent,
html[data-theme="light"] .header-copy h1 .accent {
  color: color-mix(in srgb, var(--accent, var(--as-accent, #2563eb)) 78%, #0f172a);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 16px color-mix(in srgb, var(--accent, var(--as-accent, #2563eb)) 24%, transparent);
}

.itz-theme-toggle:hover {
  border-color: var(--accent, var(--as-accent, #3b82f6));
}

.itz-theme-toggle:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

.itz-theme-toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 14.3A9 9 0 1 1 9.7 3 7 7 0 0 0 21 14.3z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 14.3A9 9 0 1 1 9.7 3 7 7 0 0 0 21 14.3z'/></svg>") center / contain no-repeat;
}

html[data-theme="light"] .itz-theme-toggle-icon {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 4.5a1 1 0 0 1 1-1h0a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0zm0 14a1 1 0 0 1 1-1h0a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0zM4.5 11a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H5.5a1 1 0 0 1-1-1zm14 0a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2h-1a1 1 0 0 1-1-1zM6.05 6.05a1 1 0 0 1 1.41 0l.71.71a1 1 0 1 1-1.41 1.41l-.71-.71a1 1 0 0 1 0-1.41zm11.49 11.49a1 1 0 0 1 1.41 0l.71.71a1 1 0 0 1-1.41 1.41l-.71-.71a1 1 0 0 1 0-1.41zM6.05 17.95a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41l-.71.71A1 1 0 0 1 5.34 18.66zm11.49-11.49a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41l-.71.71a1 1 0 1 1-1.41-1.41zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 4.5a1 1 0 0 1 1-1h0a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0zm0 14a1 1 0 0 1 1-1h0a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0zM4.5 11a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H5.5a1 1 0 0 1-1-1zm14 0a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2h-1a1 1 0 0 1-1-1zM6.05 6.05a1 1 0 0 1 1.41 0l.71.71a1 1 0 1 1-1.41 1.41l-.71-.71a1 1 0 0 1 0-1.41zm11.49 11.49a1 1 0 0 1 1.41 0l.71.71a1 1 0 0 1-1.41 1.41l-.71-.71a1 1 0 0 1 0-1.41zM6.05 17.95a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41l-.71.71A1 1 0 0 1 5.34 18.66zm11.49-11.49a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41l-.71.71a1 1 0 1 1-1.41-1.41zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/></svg>") center / contain no-repeat;
}

/* Dashboard title cluster */
.hub-title-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.hub-title-cluster .hub-title {
  margin: 0;
}

.hub-title-row > .hub-mobile-menu-toggle {
  margin-left: auto;
}

/* Surfaces that still use hardcoded dark hex */
html[data-theme="light"] .hub-ad-banner,
html[data-theme="light"] .editor-ad,
html[data-theme="light"] .dl-ad,
html[data-theme="light"] .as-ad-slot.editor-ad {
  background: #e8eef6;
}

/* Display ads: full width, 90px desktop / 50px mobile (IAB 728x90 / 320x50) */
:root {
  --itz-ad-height: 90px;
}

@media (max-width: 799px) {
  :root {
    --itz-ad-height: 50px;
  }
}

.hub-ad-banner,
.editor-ad,
.dl-ad,
.as-ad-slot.editor-ad {
  width: 100%;
  height: var(--itz-ad-height) !important;
  min-height: var(--itz-ad-height) !important;
  max-height: var(--itz-ad-height) !important;
}

.hub-ad-banner .adsbygoogle,
.editor-ad .adsbygoogle,
.dl-ad .adsbygoogle,
.as-ad-slot.editor-ad .adsbygoogle,
ins.adsbygoogle.itz-ad-unit {
  display: block;
  width: 100% !important;
  height: var(--itz-ad-height) !important;
  min-height: var(--itz-ad-height) !important;
  max-height: var(--itz-ad-height) !important;
}

.hub-ad-banner.is-ad-off,
.editor-ad.is-ad-off,
.dl-ad.is-ad-off,
.as-ad-slot.editor-ad.is-ad-off {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

html[data-theme="light"] .hub-card:not(.is-disabled):hover {
  box-shadow:
    0 12px 36px rgba(15, 23, 42, 0.1),
    0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 25%, transparent);
}

html[data-theme="light"] .hub-card-badge {
  background: rgba(37, 99, 235, 0.14);
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.28);
}

html[data-theme="light"] .badge {
  color: #0f172a;
  background: color-mix(in srgb, var(--accent, #2563eb) 18%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 34%, #ffffff);
}

html[data-theme="light"] .eyebrow {
  color: var(--accent-soft, #1d4ed8);
}

html[data-theme="light"] .size-pill:has(input:checked) {
  color: #0f172a;
  background: color-mix(in srgb, var(--accent) 16%, #ffffff);
}

html[data-theme="light"] .compute-capability.is-gpu,
html[data-theme="light"] .bin-readiness.is-ok {
  color: #047857;
}

html[data-theme="light"] .compute-capability.is-cpu,
html[data-theme="light"] .compute-capability.is-warn,
html[data-theme="light"] .bin-readiness.is-warn {
  color: #b45309;
}

html[data-theme="light"] .bin-readiness.is-err {
  color: #b91c1c;
}

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-pick-file,
html[data-theme="light"] .mode-btn {
  color: #0f172a;
  background: #ffffff;
}

html[data-theme="light"] ::placeholder {
  color: #64748b;
  opacity: 1;
}

html[data-theme="light"] .hub-card.is-pc-only {
  opacity: 0.48;
  filter: grayscale(0.3);
}

html[data-theme="light"] .hub-switch-track {
  background: #cbd5e1;
}

html[data-theme="light"] .hub-switch-track::after {
  background: #ffffff;
}

html[data-theme="light"] .hub-eyebrow {
  background: rgba(37, 99, 235, 0.1);
}

/* Tool guide */
html[data-theme="light"] .tool-guide {
  --tg-text: #0f172a;
  --tg-dim: #334155;
  --tg-muted: #475569;
  --tg-line: #d8dee8;
  --tg-panel: #ffffff;
  --tg-accent: #2563eb;
  --tg-heading: #0f172a;
  --tg-heading-2: #1e293b;
  --tg-lead: #334155;
  --tg-strong: #0f172a;
  --tg-note-bg: #eef2f7;
}

html[data-theme="light"] .tool-guide h2,
html[data-theme="light"] .tool-guide h3 {
  color: var(--tg-heading);
}

html[data-theme="light"] .tool-guide h3 {
  color: var(--tg-heading-2);
}

html[data-theme="light"] .tool-guide p,
html[data-theme="light"] .tool-guide li {
  color: var(--tg-dim);
}

html[data-theme="light"] .tool-guide li strong {
  color: var(--tg-strong);
}

html[data-theme="light"] .tool-guide .tool-guide-lead {
  color: var(--tg-lead);
}

html[data-theme="light"] .tool-guide-note {
  background: var(--tg-note-bg);
  color: var(--tg-muted);
  border-color: var(--tg-line);
}

html[data-theme="light"] body.as-app .tool-guide {
  background: var(--as-bg, #f4f6fa);
}

/* Mobile overlay */
html[data-theme="light"] .mobile-only-overlay {
  background: rgba(244, 246, 250, 0.72);
}

html[data-theme="light"] .mobile-only-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: #d8dee8;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .mobile-only-title {
  color: #0f172a;
}

html[data-theme="light"] .mobile-only-desc {
  color: #475569;
}

html[data-theme="light"] .pane-head {
  background: #e8eef4;
  color: #0f172a;
  border-bottom-color: #d8dee8;
}

html[data-theme="light"] .pane-head h2,
html[data-theme="light"] .menu-btn {
  color: #334155;
}

html[data-theme="light"] .menu-btn:hover,
html[data-theme="light"] .menu-btn.is-active {
  background: #ffffff;
  color: #0f172a;
}

html[data-theme="light"] .hero-chip {
  background: #e8eef4;
  color: #0f172a;
  border-color: #cbd5e1;
}

html[data-theme="light"] .dl-step {
  background: #f1f5f9;
  border-color: #d8dee8;
  color: #334155;
}

html[data-theme="light"] .dl-step--highlight {
  color: #1d4ed8;
}

/* Shared chrome */
html[data-theme="light"] .btn-to-dashboard {
  background: #ffffff;
  color: var(--text-main, var(--as-text, #0f172a));
}

html[data-theme="light"] .btn-to-dashboard:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  color-scheme: light;
}

html[data-theme="light"] .dropzone,
html[data-theme="light"] .hero,
html[data-theme="light"] .preview-stage,
html[data-theme="light"] .media-stage,
html[data-theme="light"] .preview-viewport,
html[data-theme="light"] .preview-empty,
html[data-theme="light"] .video-frame {
  background: #eef2f7 !important;
  color: #334155;
}

html[data-theme="dark"] .preview-empty {
  color: #94a3b8;
}

html[data-theme="light"] .vocal-setup-loading__panel,
html[data-theme="light"] .vocal-task-loading__inner,
html[data-theme="light"] .enhancer-busy-panel,
html[data-theme="light"] .loading-card,
html[data-theme="light"] .media-workspace-loading__panel,
html[data-theme="light"] .analyze-overlay-panel,
html[data-theme="light"] .waveform-analyze-loading-inner,
html[data-theme="light"] .setup-loading__panel {
  background: #ffffff !important;
  border-color: #d8dee8 !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .vocal-setup-loading__title,
html[data-theme="light"] .vocal-task-loading__title,
html[data-theme="light"] .vocal-task-loading__percent,
html[data-theme="light"] .media-workspace-loading__title,
html[data-theme="light"] .analyze-overlay-status,
html[data-theme="light"] .enhancer-busy-panel h3,
html[data-theme="light"] .setup-loading__title {
  color: #0f172a !important;
}

html[data-theme="light"] .vocal-setup-loading__message,
html[data-theme="light"] .vocal-task-loading__message,
html[data-theme="light"] .media-workspace-loading__desc,
html[data-theme="light"] .analyze-overlay-meta,
html[data-theme="light"] .loading-message,
html[data-theme="light"] .setup-loading__desc {
  color: #475569 !important;
}

html[data-theme="dark"] .vocal-setup-loading__panel,
html[data-theme="dark"] .vocal-task-loading__inner,
html[data-theme="dark"] .enhancer-busy-panel,
html[data-theme="dark"] .loading-card,
html[data-theme="dark"] .media-workspace-loading__panel {
  background: #1a1d23 !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .vocal-setup-loading__title,
html[data-theme="dark"] .vocal-task-loading__title,
html[data-theme="dark"] .media-workspace-loading__title,
html[data-theme="dark"] .analyze-overlay-status {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .vocal-setup-loading__message,
html[data-theme="dark"] .vocal-task-loading__message,
html[data-theme="dark"] .media-workspace-loading__desc,
html[data-theme="dark"] .loading-message {
  color: #94a3b8 !important;
}

html[data-theme="light"] .checker {
  background-color: #e2e8f0;
  background-image:
    linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
}

html[data-theme="light"] .choice,
html[data-theme="light"] .check-line {
  background: var(--bg-control, #f8fafc);
  border-color: var(--border);
  color: var(--text-main, #0f172a);
}

html[data-theme="light"] .choice small,
html[data-theme="light"] .check-line small,
html[data-theme="light"] .toggle-card-desc,
html[data-theme="light"] .option-hint {
  color: var(--text-subtle, #475569) !important;
}

html[data-theme="light"] .toggle-card {
  background: var(--bg-control, #f8fafc) !important;
  border-color: var(--border, #d8dee8);
  color: var(--text-main, #0f172a);
}

html[data-theme="light"] .toggle-card-title,
html[data-theme="light"] .option-label {
  color: var(--text-main, #0f172a) !important;
}

html[data-theme="light"] .toggle-card:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 12%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border, #d8dee8));
}

html[data-theme="light"] .toggle-card.is-disabled,
html[data-theme="light"] .toggle-card.is-disabled:has(input:checked) {
  opacity: 0.72;
  background: var(--bg-control-muted, #e8eef4) !important;
  border-color: var(--border, #d8dee8);
  box-shadow: none;
}

html[data-theme="light"] .toggle-card.is-disabled .toggle-card-title,
html[data-theme="light"] .toggle-card.is-disabled .toggle-card-desc {
  color: #64748b !important;
}

html[data-theme="light"] .option-select,
html[data-theme="light"] .option-field select {
  background: #ffffff !important;
  color: var(--text-main, #0f172a) !important;
}

html[data-theme="light"] .mode-chip:not(.active):not(.is-on) {
  background: var(--bg-control, #f8fafc) !important;
  color: #334155 !important;
}

html[data-theme="light"] .mode-chip.active,
html[data-theme="light"] .mode-chip.is-on {
  background: var(--accent, #3b82f6) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .size-pill:not(:has(input:checked)) {
  background: #f8fafc;
  color: #334155;
}

html[data-theme="light"] .toast {
  background: #ffffff;
  color: #0f172a;
  border-color: #d8dee8;
}

html[data-theme="light"] .preview-dialog {
  background: #ffffff;
  color: #0f172a;
}

html[data-theme="light"] .howto code {
  background: #e8eef4;
  color: #0f172a;
}

html[data-theme="light"] .btn-action--download:not(.is-disabled) {
  color: #0f766e;
}

html[data-theme="light"] .size-pill.is-disabled {
  opacity: 0.72;
}

html[data-theme="light"] .dl-ad {
  background: #eef2f7;
}

html[data-theme="dark"] .toggle-card-title,
html[data-theme="dark"] .option-label {
  color: var(--text-main, #e2e8f0);
}

html[data-theme="dark"] .toggle-card-desc,
html[data-theme="dark"] .option-hint,
html[data-theme="dark"] .choice small,
html[data-theme="dark"] .check-line small {
  color: var(--text-subtle, #94a3b8);
}

html[data-theme="light"] .dl-card {
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .mode-bar {
  background: linear-gradient(180deg, var(--bg-dark) 70%, transparent);
}

html[data-theme="light"] .mode-btn.is-active {
  color: #1e3a8a;
}

html[data-theme="light"] .howto code,
html[data-theme="light"] .preview-dialog {
  background: #eef2f7;
}

html[data-theme="light"] .preview-code {
  color: #334155;
}

html[data-theme="light"] .toast {
  background: #ffffff;
  color: #0f172a;
}

/* Auto Subtitle chrome that still uses hex */
html[data-theme="light"] .as-topbar,
html[data-theme="light"] .as-stylebar,
html[data-theme="light"] .as-footer {
  background: #ffffff;
}

html[data-theme="light"] .as-preview-stage {
  background: #e2e8f0;
}

html[data-theme="light"] .as-select--font optgroup,
html[data-theme="light"] .as-select--font option {
  background: #ffffff;
  color: #0f172a;
}

html[data-theme="light"] .as-btn-ghost:hover:not(:disabled) {
  background: #eef2f7;
  border-color: #94a3b8;
}

html[data-theme="light"] .as-btn-primary {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e3a8a;
}

html[data-theme="light"] .as-btn-primary:hover:not(:disabled) {
  background: #bfdbfe;
}

html[data-theme="light"] .subtitle-wf-ctx-chip {
  background: #eef2f7;
  border-color: #cbd5e1;
  color: #475569;
}

html[data-theme="light"] .subwave-chrome {
  background: #e2e8f0;
  border-color: #94a3b8;
}

html[data-theme="light"] .subtitle-card {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-color: #d8dee8;
}

html[data-theme="light"] .subtitle-card-line-rail {
  border-right-color: #e2e8f0;
}

html[data-theme="light"] .subtitle-card-textarea,
html[data-theme="light"] .as-preview-empty {
  color: #0f172a;
}

.hub-footer {
  display: none;
}

.itz-site-footer {
  margin-top: 56px;
  padding: 18px 28px 22px;
  background: #07080b;
  color: #dbe4ef;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: "Pretendard", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.itz-site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
  max-width: 1288px;
  margin: 0 auto;
}

.itz-site-footer-copy {
  margin: 0;
  color: #cbd5e1;
  white-space: nowrap;
}

.itz-site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}

.itz-site-footer-nav a {
  color: #e8eef6;
  text-decoration: none;
  font-weight: 500;
}

.itz-site-footer-nav a:hover,
.itz-site-footer-nav a[aria-current="page"] {
  color: #93c5fd;
}

html[data-theme="light"] .itz-site-footer {
  background: #e2e8f0;
  color: #0f172a;
  border-top-color: #cbd5e1;
}

html[data-theme="light"] .itz-site-footer-copy {
  color: #334155;
}

html[data-theme="light"] .itz-site-footer-nav a {
  color: #0f172a;
}

html[data-theme="light"] .itz-site-footer-nav a:hover,
html[data-theme="light"] .itz-site-footer-nav a[aria-current="page"] {
  color: #1d4ed8;
}

/* Light mode: hardcoded dark-theme hex left light text on white (or dark text on leftover dark fields). */
html[data-theme="light"] .hub-title,
html[data-theme="light"] .hub-lead,
html[data-theme="light"] .hub-card,
html[data-theme="light"] .hub-card-title,
html[data-theme="light"] .hub-card-desc,
html[data-theme="light"] .panel,
html[data-theme="light"] .stage,
html[data-theme="light"] .composer,
html[data-theme="light"] .app-header,
html[data-theme="light"] .header-tagline {
  color: #0f172a;
}

html[data-theme="light"] .hub-lead,
html[data-theme="light"] .header-tagline,
html[data-theme="light"] .empty-note,
html[data-theme="light"] .hint,
html[data-theme="light"] .muted,
html[data-theme="light"] .file-meta,
html[data-theme="light"] .status-line,
html[data-theme="light"] .digital-date,
html[data-theme="light"] .digital-zone,
html[data-theme="light"] .world-meta,
html[data-theme="light"] .world-name-city,
html[data-theme="light"] .picker-city,
html[data-theme="light"] .picker-count,
html[data-theme="light"] .alert-sub {
  color: #334155;
}

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .seg-btn {
  color: #0f172a;
  background: #ffffff;
}

html[data-theme="light"] .seg {
  background: #e8eef4;
}

html[data-theme="light"] .seg-btn.is-active,
html[data-theme="light"] .seg-btn.is-on {
  background: #ffffff;
  color: #0f172a;
}

html[data-theme="light"] .picker-overlay,
html[data-theme="light"] .picker-card,
html[data-theme="light"] .alert-card,
html[data-theme="light"] .mobile-only-card {
  background: #ffffff;
  color: #0f172a;
}

html[data-theme="light"] .picker-list {
  background: #f1f5f9;
  color: #0f172a;
}

html[data-theme="light"] .picker-row,
html[data-theme="light"] .picker-country,
html[data-theme="light"] .picker-head h2,
html[data-theme="light"] .alert-title,
html[data-theme="light"] .alert-kind {
  color: #0f172a;
}

html[data-theme="light"] .itz-modal-dialog,
html[data-theme="light"] #itz-site-alert-dialog,
html[data-theme="light"] #itmatzip-bridge-install-dialog {
  background: #ffffff;
  border-color: #d8dee8;
  color: #0f172a;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .itz-modal__title,
html[data-theme="light"] .itz-install__title,
html[data-theme="light"] .itz-install__card-title,
html[data-theme="light"] .itz-install__intro strong,
html[data-theme="light"] .itz-install__card-text strong,
html[data-theme="light"] #itmatzip-bridge-install-dialog .itz-install__title,
html[data-theme="light"] #itmatzip-bridge-install-dialog .itz-install__card-title {
  color: #0f172a;
}

html[data-theme="light"] .itz-modal__body,
html[data-theme="light"] .itz-modal__msg,
html[data-theme="light"] .itz-modal__steps,
html[data-theme="light"] .itz-modal__hint,
html[data-theme="light"] .itz-modal__status,
html[data-theme="light"] .itz-install,
html[data-theme="light"] .itz-install__body,
html[data-theme="light"] .itz-install__card-text,
html[data-theme="light"] .itz-install__card-note {
  color: #334155;
}

html[data-theme="light"] .itz-modal__head,
html[data-theme="light"] #itmatzip-bridge-install-dialog .itz-install__head {
  border-bottom-color: #e2e8f0;
  background: #f8fafc;
}

html[data-theme="light"] .itz-modal__foot,
html[data-theme="light"] .itz-install__foot {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

html[data-theme="light"] .itz-modal__btn,
html[data-theme="light"] .itz-install__btn--ghost {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme="light"] .itz-modal__btn:hover,
html[data-theme="light"] .itz-install__btn--ghost:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

html[data-theme="light"] .itz-modal__btn--primary,
html[data-theme="light"] .itz-install__btn--primary {
  background: #2563eb;
  color: #ffffff;
  border-color: transparent;
}

html[data-theme="light"] .itz-modal__btn--primary:hover,
html[data-theme="light"] .itz-install__btn--primary:hover {
  background: #1d4ed8;
  color: #ffffff;
}

html[data-theme="light"] .itz-install__card--new,
html[data-theme="light"] .itz-install__card--installed {
  background: #f8fafc;
  border-color: #d8dee8;
}

html[data-theme="light"] .itz-install__card-text code {
  background: #e2e8f0;
  color: #1e3a8a;
}

html[data-theme="dark"] .itz-modal-dialog,
html[data-theme="dark"] #itz-site-alert-dialog {
  background: #1a1f2e;
  border-color: #3a4560;
  color: #e6edf7;
}

html[data-theme="dark"] .itz-modal__title,
html[data-theme="dark"] .itz-install__title,
html[data-theme="dark"] .itz-install__card-title {
  color: #f8fafc;
}

html[data-theme="dark"] .itz-modal__body,
html[data-theme="dark"] .itz-modal__msg,
html[data-theme="dark"] .itz-install__body,
html[data-theme="dark"] .itz-install__card-text {
  color: #cbd5e1;
}

html[data-theme="dark"] .alert-card {
  background: #121821;
  color: #e8eef6;
}

html[data-theme="dark"] .alert-title,
html[data-theme="dark"] .alert-kind {
  color: #e8eef6;
}

html[data-theme="dark"] .alert-sub {
  color: #93a0b4;
}

html[data-theme="light"] .option-card label,
html[data-theme="light"] .option-hint,
html[data-theme="light"] .path-hint,
html[data-theme="light"] .range-val,
html[data-theme="light"] .preset-label,
html[data-theme="light"] .chips-label,
html[data-theme="light"] .size-pill {
  color: #0f172a !important;
}

html[data-theme="light"] .chip:not(.active):not(.is-on),
html[data-theme="light"] .preset-btn:not(.active) {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .chip.active {
  background: var(--accent, #3b82f6) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .size-pill {
  background: #e8eef4;
}

html[data-theme="light"] .path-row input,
html[data-theme="light"] .option-card input[type="number"],
html[data-theme="light"] .option-card input[type="text"] {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .btn-pick-file {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .media-summary-panel,
html[data-theme="light"] .media-summary-title,
html[data-theme="light"] .media-summary-hint,
html[data-theme="light"] .media-summary-item dt,
html[data-theme="light"] .media-summary-item dd {
  color: #0f172a;
}

html[data-theme="light"] .media-summary-panel {
  background: #f1f5f9;
}

html[data-theme="dark"] .chip:not(.active):not(.is-on) {
  color: #e2e8f0;
}

html[data-theme="dark"] .chip.active {
  color: #ffffff;
}

html[data-theme="dark"] .option-card label,
html[data-theme="dark"] .option-hint,
html[data-theme="dark"] .path-hint {
  color: #94a3b8;
}

html[data-theme="dark"] .range-val {
  color: #e2e8f0;
}

html[data-theme="dark"] .path-row input,
html[data-theme="dark"] .option-card input[type="number"],
html[data-theme="dark"] .option-card input[type="text"] {
  color: #ffffff;
}

@media (max-width: 900px) {
  .hub-title-cluster {
    flex: 1 1 auto;
  }

  .itz-theme-toggle {
    width: 34px;
    height: 34px;
  }

  .itz-site-footer {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    margin-top: 36px;
  }

  .itz-site-footer-copy {
    white-space: normal;
  }
}