/* Shared light theme for every user-facing page except the custom landing theme. */
html[data-theme="light"] {
  color-scheme: light;
  --paper: #f5f1ea;
  --sheet: #fffdfc;
  --ink: #222326;
  --muted: #68635f;
  --soft: #8b857f;
  --bg: var(--paper);
  --bg-soft: #ece8e1;
  --panel: rgba(255, 253, 252, 0.9);
  --panel-strong: #fffdfc;
  --line: rgba(34, 35, 38, 0.11);
  --line-strong: rgba(24, 116, 217, 0.34);
  --blue: #1874d9;
  --blue-strong: #0d5fc7;
  --cyan: #3f86c7;
  --shadow: rgba(67, 52, 44, 0.12);
}

html[data-theme="light"] body:not(.page-home) {
  color: var(--ink);
  background: var(--paper);
}

html[data-theme="light"] body:not(.page-home)::before {
  background-image:
    linear-gradient(rgba(34, 35, 38, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 35, 38, 0.02) 1px, transparent 1px);
  opacity: 0.55;
}

/* Theme control */
.theme-toggle {
  position: relative;
  display: inline-grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(83, 144, 255, 0.24);
  border-radius: 12px;
  padding: 0;
  color: #dcecff;
  background: rgba(10, 18, 34, 0.78);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition-property: transform, color, background-color, border-color, box-shadow;
  transition-duration: 180ms;
}

.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.theme-toggle-icon {
  grid-area: 1 / 1;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  transition-property: opacity, transform, filter;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.theme-toggle-icon svg { width: 20px; height: 20px; fill: currentColor; }
.theme-toggle-icon--sun { opacity: 0; filter: blur(4px); transform: scale(0.25) rotate(-28deg); }
html[data-theme="light"] .theme-toggle-icon--moon { opacity: 0; filter: blur(4px); transform: scale(0.25) rotate(28deg); }
html[data-theme="light"] .theme-toggle-icon--sun { opacity: 1; filter: blur(0); transform: scale(1) rotate(0); }

html[data-theme="light"] .theme-toggle {
  border-color: rgba(34, 35, 38, 0.12);
  color: var(--blue);
  background: var(--sheet);
  box-shadow: 0 8px 20px rgba(67, 52, 44, 0.1);
}

html[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(24, 116, 217, 0.38);
  background: #f3f8fd;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  mix-blend-mode: normal;
}

/* Shared navigation, menus, footer and authentication */
html[data-theme="light"] body:not(.page-home) .site-header,
html[data-theme="light"] body:not(.page-home) .legal-header {
  border-color: transparent;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="light"] body:not(.page-home) .nav-links a { color: #4f4d49; }
html[data-theme="light"] body:not(.page-home) .nav-links a:hover { color: var(--blue); }
html[data-theme="light"] body:not(.page-home) .nav-links a[href="/gallery"],
html[data-theme="light"] body:not(.page-home) .nav-links a[href="/gallery"]:hover {
  color: var(--blue);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
html[data-theme="light"] body:not(.page-home) .mobile-nav-menu,
html[data-theme="light"] body:not(.page-home) .popover,
html[data-theme="light"] body:not(.page-home) .profile-menu,
html[data-theme="light"] body:not(.page-home) .dropdown-menu {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 253, 252, 0.98);
  box-shadow: 0 20px 46px rgba(67, 52, 44, 0.16);
}

html[data-theme="light"] body:not(.page-home) .popover-header { border-bottom-color: var(--line); }
html[data-theme="light"] body:not(.page-home) .nav-burger span { background: var(--ink); }
html[data-theme="light"] body:not(.page-home) .popover-header strong,
html[data-theme="light"] body:not(.page-home) .popover a,
html[data-theme="light"] body:not(.page-home) .popover button { color: var(--ink); }
html[data-theme="light"] body:not(.page-home) .popover a:hover,
html[data-theme="light"] body:not(.page-home) .popover button:hover { background: #edf5fc; }
html[data-theme="light"] body:not(.page-home) .header-account .popover a[href="/gallery"],
html[data-theme="light"] body:not(.page-home) .header-account .popover a[href="/gallery"]:hover,
html[data-theme="light"] body:not(.page-home) .popover-row[href="/gallery"],
html[data-theme="light"] body:not(.page-home) .popover-row[href="/gallery"]:hover {
  background: linear-gradient(90deg, #0d5fc7 0%, #2f8fe6 25%, #0b4ea8 50%, #2f8fe6 75%, #0d5fc7 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

html[data-theme="light"] body:not(.page-home) .credit-pill,
html[data-theme="light"] body:not(.page-home) .create-comic-icon,
html[data-theme="light"] body:not(.page-home) .avatar-button,
html[data-theme="light"] body:not(.page-home) .icon-action,
html[data-theme="light"] body:not(.page-home) .button.ghost {
  border-color: var(--line);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 8px 20px rgba(67, 52, 44, 0.08);
}

/* Avatar and header tools go solid blue — white cards wash out on paper. */
html[data-theme="light"] body:not(.page-home) .avatar-button {
  border-color: rgba(24, 116, 217, 0.34);
  background: linear-gradient(180deg, #2f8fe6, #0f5fc7);
  box-shadow: 0 8px 20px rgba(24, 116, 217, 0.22);
}
html[data-theme="light"] body:not(.page-home) .avatar { color: #ffffff; }
html[data-theme="light"] body:not(.page-home) .header-tools .icon-action {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(180deg, #2f8fe6, #0f5fc7);
  box-shadow: 0 8px 20px rgba(24, 116, 217, 0.22);
}

html[data-theme="light"] body:not(.page-home) .site-footer {
  border-top-color: var(--line);
  color: var(--muted);
  background: transparent;
}
html[data-theme="light"] body:not(.page-home) .mobile-footer-content { background: transparent; }

html[data-theme="light"] body:not(.page-home) .site-footer p,
html[data-theme="light"] body:not(.page-home) .desktop-footer-brand p,
html[data-theme="light"] body:not(.page-home) .desktop-footer-nav-group a,
html[data-theme="light"] body:not(.page-home) .footer-copy,
html[data-theme="light"] body:not(.page-home) .footer-consent { color: var(--muted); }
html[data-theme="light"] body:not(.page-home) .desktop-footer-nav-title,
html[data-theme="light"] body:not(.page-home) .footer-consent a { color: #3f6f96; }
html[data-theme="light"] body:not(.page-home) .mobile-footer-brand p,
html[data-theme="light"] body:not(.page-home) .mobile-footer-nav-links a,
html[data-theme="light"] body:not(.page-home) .mobile-footer-copy { color: var(--muted); }
html[data-theme="light"] body:not(.page-home) .mobile-footer-nav-title { color: #3f6f96; }
html[data-theme="light"] body:not(.page-home) .footer-social-link {
  border-color: rgba(24, 116, 217, 0.22);
  color: var(--blue);
  background: var(--sheet);
}

html[data-theme="light"] .auth-overlay { background: rgba(45, 40, 37, 0.34); }
html[data-theme="light"] .auth-panel {
  border-color: var(--line);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 28px 80px rgba(67, 52, 44, 0.22);
}
html[data-theme="light"] .auth-button,
html[data-theme="light"] .auth-email-open,
html[data-theme="light"] .auth-field input {
  border-color: var(--line);
  color: var(--ink);
  background: #f8f5f0;
}
html[data-theme="light"] .auth-close,
html[data-theme="light"] .auth-back { color: var(--muted); }
html[data-theme="light"] .auth-overlay .auth-consent { color: #4a4640; }
html[data-theme="light"] .auth-overlay .auth-consent a { color: var(--blue-strong); }

/* SEO marketing pages */
html[data-theme="light"] body:not(.page-home) .hero-art {
  background-image: url("assets/comicly-hero-bg-light.webp?v=20260711-2224");
  background-image: image-set(
    url("assets/comicly-hero-bg-light.webp?v=20260711-2224") type("image/webp"),
    url("assets/comicly-hero-bg-light.png?v=20260711-2224") type("image/png")
  );
  opacity: 1;
  filter: none;
}

html[data-theme="light"] body:not(.page-home) .hero::before {
  background:
    linear-gradient(90deg, rgba(245, 241, 234, 0.02), rgba(245, 241, 234, 0.08) 28%, rgba(245, 241, 234, 0.08) 72%, rgba(245, 241, 234, 0.02)),
    linear-gradient(180deg, rgba(245, 241, 234, 0.02), rgba(245, 241, 234, 0.08) 62%, var(--paper) 98%);
}
html[data-theme="light"] body:not(.page-home) .hero::after { background: linear-gradient(180deg, transparent, var(--paper)); }
html[data-theme="light"] body:not(.page-home) .hero h1,
html[data-theme="light"] body:not(.page-home) .hero-points strong,
html[data-theme="light"] body:not(.page-home) .section-heading h2,
html[data-theme="light"] body:not(.page-home) .feature-grid h3 { color: var(--ink); }
html[data-theme="light"] body:not(.page-home) .hero-copy,
html[data-theme="light"] body:not(.page-home) .hero-points span,
html[data-theme="light"] body:not(.page-home) .landing-prose p { color: var(--muted); }

html[data-theme="light"] body:not(.page-home) .preview-section,
html[data-theme="light"] body:not(.page-home) .workflow-strip article,
html[data-theme="light"] body:not(.page-home) .feature-grid article,
html[data-theme="light"] body:not(.page-home) .landing-card,
html[data-theme="light"] body:not(.page-home) .landing-steps li,
html[data-theme="light"] body:not(.page-home) .faq-item {
  border-color: var(--line);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 16px 40px rgba(67, 52, 44, 0.09);
}
html[data-theme="light"] body:not(.page-home) .comic-sheet {
  border-color: rgba(0, 0, 0, 0.1);
  background: var(--sheet);
  box-shadow: 0 22px 58px rgba(67, 52, 44, 0.16);
}
html[data-theme="light"] body:not(.page-home) .section-label,
html[data-theme="light"] body:not(.page-home) .eyebrow {
  border-color: var(--line);
  color: #4f4d49;
  background: rgba(255, 253, 252, 0.84);
  box-shadow: 0 8px 20px rgba(67, 52, 44, 0.07);
}
html[data-theme="light"] body:not(.page-home) .feature-card-image { border-bottom-color: var(--line); }
html[data-theme="light"] body:not(.page-home) .community-cta {
  border-color: rgba(24, 116, 217, 0.2);
  color: var(--ink);
  background: #edf5fc;
}
html[data-theme="light"] body:not(.page-home) .community-cta-text span,
html[data-theme="light"] body:not(.page-home) .faq-answer { color: var(--muted); }
html[data-theme="light"] body:not(.page-home) .icon-button {
  border-color: rgba(24, 116, 217, 0.22);
  color: var(--blue);
  background: var(--sheet);
  box-shadow: 0 10px 26px rgba(67, 52, 44, 0.14);
}

/* Pricing */
html[data-theme="light"] .pricing-hero h1,
html[data-theme="light"] .pricing-card h2,
html[data-theme="light"] .plan-label,
html[data-theme="light"] .plan-generation-model,
html[data-theme="light"] .plan-generation-model strong { color: var(--ink); text-shadow: none; }
html[data-theme="light"] .pricing-card {
  border-color: var(--line);
  background: var(--sheet);
  box-shadow: 0 16px 40px rgba(67, 52, 44, 0.09);
}
html[data-theme="light"] .pricing-page .featured-plan {
  border-color: var(--line);
  background: var(--sheet);
  box-shadow:
    inset 0 3px 0 rgba(24, 116, 217, 0.82),
    0 18px 42px rgba(67, 52, 44, 0.11);
}
html[data-theme="light"] .plan-badge {
  border-color: rgba(24, 116, 217, 0.22);
  color: var(--blue-strong);
  background: #dcecff;
  box-shadow: 0 7px 18px rgba(24, 116, 217, 0.1);
}
html[data-theme="light"] .plan-coins { color: #3f6f96; }
html[data-theme="light"] .plan-description,
html[data-theme="light"] .checkout-consent-note { color: var(--muted); }
html[data-theme="light"] .plan-generations {
  border-color: var(--line);
  background: #f3f0ea;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.76);
}
html[data-theme="light"] .plan-generations-title { color: var(--ink); }
html[data-theme="light"] .plan-generation-count { color: var(--ink); }
html[data-theme="light"] .plan-generation-model + .plan-generation-model { border-left-color: var(--line); }
html[data-theme="light"] .mobile-package-card {
  border-color: var(--line);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 10px 28px rgba(67, 52, 44, 0.09);
}
html[data-theme="light"] .mobile-package-card.is-selected {
  border-color: rgba(24, 116, 217, 0.38);
  background: #edf5fc;
  box-shadow: 0 0 0 2px rgba(24, 116, 217, 0.08), 0 14px 32px rgba(67, 52, 44, 0.11);
}
html[data-theme="light"] .mobile-package-copy strong,
html[data-theme="light"] .mobile-package-price,
html[data-theme="light"] .mobile-package-yields > p,
html[data-theme="light"] .mobile-package-yield-grid strong { color: var(--ink); }
html[data-theme="light"] .mobile-package-copy span,
html[data-theme="light"] .mobile-package-yield-grid span { color: #3f6f96; }
html[data-theme="light"] .mobile-package-radio { border-color: rgba(24, 116, 217, 0.42); background: var(--sheet); }
html[data-theme="light"] .mobile-package-details {
  border-color: var(--line);
  background: #f3f0ea;
}
html[data-theme="light"] .mobile-package-yield-grid > div + div { border-left-color: var(--line); }
html[data-theme="light"] .mobile-package-badge { color: var(--blue-strong); background: #dcecff; }

/* Projects */
html[data-theme="light"] .projects-list-head h1,
html[data-theme="light"] .project-card h3,
html[data-theme="light"] .project-card--new strong { color: var(--ink); }
html[data-theme="light"] .project-card {
  border-color: var(--line);
  background: var(--sheet);
  box-shadow: 0 16px 38px rgba(67, 52, 44, 0.1);
}
html[data-theme="light"] .project-card--new {
  border-color: rgba(24, 116, 217, 0.28);
  color: var(--blue);
  background: #f3f8fd;
}
html[data-theme="light"] .project-new-plus,
html[data-theme="light"] .project-status {
  border-color: rgba(24, 116, 217, 0.24);
  color: var(--blue);
  background: #e6f1fb;
}
html[data-theme="light"] .project-card-cover { border-color: var(--line); background: #ece8e1; }

/* Gallery and feed: artwork remains unmodified. */
html[data-theme="light"] .gallery-controls {
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(67, 52, 44, 0.1);
}
html[data-theme="light"] .gallery-toolbar,
html[data-theme="light"] .gallery-filter-chip,
html[data-theme="light"] .gallery-filter-more,
html[data-theme="light"] .gallery-mobile-filter-toggle:not([hidden]) {
  color: var(--muted);
  background: #f3f0ea;
  box-shadow: 0 0 0 1px var(--line);
}
html[data-theme="light"] .gallery-filters { border-top-color: var(--line); }
html[data-theme="light"] .gallery-card {
  border-color: var(--line);
  background: var(--sheet);
  box-shadow: 0 12px 30px rgba(67, 52, 44, 0.08);
}
html[data-theme="light"] .gallery-card-cover { background: #ece8e1; }
html[data-theme="light"] .gallery-card-cover img,
html[data-theme="light"] .gallery-viewer-page,
html[data-theme="light"] .gallery-tiktok-page,
html[data-theme="light"] .gallery-feed-page-image { outline-color: rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .gallery-feed-close,
html[data-theme="light"] .gallery-feed-page-nav,
html[data-theme="light"] .gallery-feed-counter {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 253, 252, 0.9);
  box-shadow: 0 10px 26px rgba(67, 52, 44, 0.14);
}
html[data-theme="light"] .gallery-feed-comic,
html[data-theme="light"] .gallery-feed-pages { background: #ece8e1; }
html[data-theme="light"] .gallery-feed-comic {
  box-shadow:
    0 0 0 1px var(--line),
    0 24px 60px rgba(67, 52, 44, 0.18);
}
html[data-theme="light"] .gallery-feed-meta h2 { color: var(--ink); }
html[data-theme="light"] .gallery-feed-meta { text-shadow: none; }
html[data-theme="light"] .gallery-feed-title { color: var(--ink); }
html[data-theme="light"] .gallery-feed-model-fallback {
  border-color: var(--line);
  color: var(--muted);
  background: rgba(255, 253, 252, 0.9);
}
html[data-theme="light"] .gallery-feed-model-card {
  background: rgba(255, 253, 252, 0.95);
  box-shadow:
    0 0 0 1px var(--line),
    0 18px 44px rgba(67, 52, 44, 0.14);
}
html[data-theme="light"] .gallery-feed-model-icon {
  border-color: var(--line);
  background: #ffffff;
}
html[data-theme="light"] .gallery-feed-spec-bar i { background: rgba(34, 35, 38, 0.14); }
/* Кнопки действий — синие, как аватар и инструменты в шапке. */
html[data-theme="light"] .gallery-feed-action { color: var(--muted); }
html[data-theme="light"] .gallery-feed-action-icon {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(180deg, #2f8fe6, #0f5fc7);
  box-shadow: 0 8px 20px rgba(24, 116, 217, 0.22);
}
html[data-theme="light"] .gallery-feed-action:hover .gallery-feed-action-icon {
  border-color: transparent;
  background: linear-gradient(180deg, #3d9af0, #1a6fd4);
}
/* Лайкнутое сердце остаётся розовым и при наведении. */
html[data-theme="light"] .gallery-feed-like.is-liked .gallery-feed-action-icon,
html[data-theme="light"] .gallery-feed-like.is-liked:hover .gallery-feed-action-icon {
  border-color: rgba(255, 93, 125, 0.54);
  color: #ff5d7d;
  background: rgba(255, 93, 125, 0.14);
}
html[data-theme="light"] .gallery-feed-scroll-next {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(180deg, #2f8fe6, #0f5fc7);
  box-shadow: 0 14px 32px rgba(24, 116, 217, 0.26);
}
html[data-theme="light"] .gallery-feed-scroll-next:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #3d9af0, #1a6fd4);
  box-shadow: 0 16px 36px rgba(24, 116, 217, 0.32);
}

/* Legal and contacts */
html[data-theme="light"] .legal-header .theme-toggle { margin-left: auto; }
html[data-theme="light"] .legal-page,
html[data-theme="light"] .requisites-card {
  border-color: var(--line);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 22px 62px rgba(67, 52, 44, 0.11);
}
html[data-theme="light"] .legal-page section,
html[data-theme="light"] .requisites-list div { border-color: var(--line); }
html[data-theme="light"] .legal-page h3,
html[data-theme="light"] .legal-page strong,
html[data-theme="light"] .requisites-name,
html[data-theme="light"] .requisites-list dt { color: var(--ink); }
html[data-theme="light"] .legal-page p,
html[data-theme="light"] .legal-page ol,
html[data-theme="light"] .legal-page ul,
html[data-theme="light"] .requisites-list dd { color: var(--muted); }
html[data-theme="light"] .requisites-list a { color: var(--blue); }

/* Creator workspace */
html[data-theme="light"] body:has(.creator-shell) { background: var(--paper); }
html[data-theme="light"] .app-bar,
html[data-theme="light"] .side-panel,
html[data-theme="light"] .creator-footer,
html[data-theme="light"] .comic-actions-panel,
html[data-theme="light"] .mobile-editor-sheet,
html[data-theme="light"] .coins-panel {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 253, 252, 0.96);
  box-shadow: 0 14px 38px rgba(67, 52, 44, 0.11);
}
html[data-theme="light"] .project-title input,
html[data-theme="light"] .field-label,
html[data-theme="light"] .left-panel-head h1,
html[data-theme="light"] .right-panel-head h2,
html[data-theme="light"] .model-name-stack strong,
html[data-theme="light"] .style-option strong,
html[data-theme="light"] .scene-item strong { color: var(--ink); }
html[data-theme="light"] .project-title input:hover,
html[data-theme="light"] .project-title input:focus { background: #f3f0ea; }
html[data-theme="light"] .page-status,
html[data-theme="light"] .cost-note,
html[data-theme="light"] .cover-cost-note {
  border-color: rgba(24, 116, 217, 0.22);
  color: #3f6f96;
  background: #edf5fc;
}
html[data-theme="light"] .story-area,
html[data-theme="light"] .inline-field input,
html[data-theme="light"] .inline-field textarea,
html[data-theme="light"] .dropdown-toggle,
html[data-theme="light"] .language-toggle,
html[data-theme="light"] .page-count-control,
html[data-theme="light"] .model-option,
html[data-theme="light"] .style-option,
html[data-theme="light"] .scene-item,
html[data-theme="light"] .character-card,
html[data-theme="light"] .page-thumb,
html[data-theme="light"] .coins-plan {
  border-color: var(--line);
  color: var(--ink);
  background: #f8f5f0;
}
html[data-theme="light"] .model-option.is-selected,
html[data-theme="light"] .style-option.is-selected,
html[data-theme="light"] .scene-item.is-selected,
html[data-theme="light"] .coins-plan--featured {
  border-color: rgba(24, 116, 217, 0.38);
  background: #edf5fc;
  box-shadow: 0 0 0 2px rgba(24, 116, 217, 0.08);
}
html[data-theme="light"] .settings-tab-list { background: transparent; }
html[data-theme="light"] .mobile-composer-top { background: #ece8e1; }
html[data-theme="light"] .settings-tab,
html[data-theme="light"] .mobile-mode-pill,
html[data-theme="light"] .mobile-advanced-pill { color: var(--muted); }
html[data-theme="light"] .settings-tab.is-active,
html[data-theme="light"] .mobile-mode-pill.is-active,
html[data-theme="light"] .mobile-advanced-pill.is-active { color: var(--blue); background: var(--sheet); }
html[data-theme="light"] .mobile-composer-top .mobile-advanced-pill {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}
html[data-theme="light"] .mobile-composer-top .mobile-advanced-pill.is-active {
  border-color: var(--line);
  color: var(--blue);
  background: var(--sheet);
}
html[data-theme="light"] .comic-canvas,
html[data-theme="light"] .comic-stage {
  border-color: transparent;
  background: #ece8e1;
  box-shadow: 0 18px 46px rgba(67, 52, 44, 0.1);
}
html[data-theme="light"] .comic-canvas img { background: #fffdfc; }
html[data-theme="light"] .comic-empty,
html[data-theme="light"] .scene-empty { color: var(--muted); }

/* Post-generation actions strip under the preview */
html[data-theme="light"] .comic-publish-title { color: var(--ink); }
html[data-theme="light"] .comic-publish-check span {
  border-color: rgba(24, 116, 217, 0.45);
  background: var(--sheet);
}
html[data-theme="light"] .comic-rating-thumb { color: rgba(104, 99, 95, 0.6); }
html[data-theme="light"] .comic-rating-thumb:hover { color: var(--ink); }
html[data-theme="light"] .comic-rating-thumb.is-active { color: var(--blue); }
html[data-theme="light"] .comic-rating-thumb.is-down.is-active { color: #e05252; }
html[data-theme="light"] .comic-actions-tab {
  border-color: var(--line);
  color: var(--muted);
  background: rgba(255, 253, 252, 0.95);
  box-shadow: 0 8px 20px rgba(67, 52, 44, 0.14);
}
html[data-theme="light"] .comic-actions-tab:hover {
  color: var(--ink);
  background: #f3f8fd;
}
html[data-theme="light"] .config-banner,
html[data-theme="light"] .toast {
  border-color: var(--line);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 16px 36px rgba(67, 52, 44, 0.14);
}

/* Public comic page (/gallery/comics/…, rendered by the backend) */
html[data-theme="light"] .comic-detail-title-pill { color: var(--ink); }
html[data-theme="light"] .comic-detail-themes a {
  border-color: rgba(24, 116, 217, 0.24);
  color: var(--blue-strong);
  background: #e6f1fb;
}
html[data-theme="light"] .comic-detail-themes a:hover {
  border-color: rgba(24, 116, 217, 0.44);
  background: #dcecff;
}
html[data-theme="light"] .comic-detail-stage {
  border-color: transparent;
  background: #ece8e1;
  box-shadow: 0 18px 46px rgba(67, 52, 44, 0.1);
}
html[data-theme="light"] .comic-detail-nav {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 253, 252, 0.9);
  box-shadow: 0 10px 26px rgba(67, 52, 44, 0.14);
}
html[data-theme="light"] .comic-detail-nav:hover { background: #f3f8fd; }
html[data-theme="light"] .comic-detail-counter {
  border-color: var(--line);
  color: var(--muted);
  background: rgba(255, 253, 252, 0.92);
}
html[data-theme="light"] .comic-detail-option-card,
html[data-theme="light"] .comic-detail-characters,
html[data-theme="light"] .comic-detail-prompt {
  border-color: var(--line);
  background: #f8f5f0;
}
html[data-theme="light"] .comic-detail-character {
  border-color: var(--line);
  background: var(--sheet);
}
html[data-theme="light"] .comic-detail-model-icon,
html[data-theme="light"] .comic-detail-option-main img {
  border-color: var(--line);
  background: var(--sheet);
}
html[data-theme="light"] .comic-detail-spec-bar i { background: rgba(34, 35, 38, 0.14); }

@media (max-width: 720px) {
  html[data-theme="light"] .comic-detail-stage {
    box-shadow: 0 18px 46px rgba(67, 52, 44, 0.14);
  }
  html[data-theme="light"] .comic-detail-track img { outline-color: rgba(0, 0, 0, 0.08); }
  html[data-theme="light"] .comic-detail-nav {
    box-shadow: 0 0 0 1px rgba(34, 35, 38, 0.1), 0 10px 24px rgba(67, 52, 44, 0.16);
  }
  html[data-theme="light"] .comic-detail-counter { box-shadow: 0 0 0 1px rgba(34, 35, 38, 0.1); }
  html[data-theme="light"] .comic-detail-mobile-backdrop { background: rgba(45, 40, 37, 0.42); }
  html[data-theme="light"] .comic-detail-mobile-dock,
  html[data-theme="light"] .comic-detail-mobile-sheet {
    background: rgba(255, 253, 252, 0.99);
    box-shadow:
      0 0 0 1px rgba(34, 35, 38, 0.1),
      0 22px 64px rgba(67, 52, 44, 0.26);
  }
  html[data-theme="light"] .comic-detail-mobile-grabber,
  html[data-theme="light"] .comic-detail-mobile-sheet-handle span { background: rgba(34, 35, 38, 0.24); }
  html[data-theme="light"] .comic-detail-mobile-dock-copy small,
  html[data-theme="light"] .comic-detail-mobile-sheet-head > div > span { color: var(--blue); }
  html[data-theme="light"] .comic-detail-mobile-dock-copy strong { color: var(--ink); }
  html[data-theme="light"] .comic-detail-mobile-dock-meta { color: var(--muted); }
  html[data-theme="light"] .comic-detail-mobile-chevron { color: var(--soft); }
  html[data-theme="light"] .comic-detail-mobile-sheet-head { border-bottom-color: var(--line); }
  html[data-theme="light"] .comic-detail-mobile-close {
    color: var(--muted);
    background: #f3f0ea;
    box-shadow: 0 0 0 1px rgba(34, 35, 38, 0.1);
  }
  html[data-theme="light"] .comic-detail-mobile-stats .comic-detail-like,
  html[data-theme="light"] .comic-detail-mobile-stats .comic-detail-views {
    background: #f8f5f0;
    box-shadow: 0 0 0 1px rgba(34, 35, 38, 0.1);
  }
  html[data-theme="light"] .comic-detail-mobile-sheet-body .comic-detail-option-card,
  html[data-theme="light"] .comic-detail-mobile-sheet-body .comic-detail-characters,
  html[data-theme="light"] .comic-detail-mobile-sheet-body .comic-detail-prompt {
    background: #f8f5f0;
    box-shadow: 0 0 0 1px rgba(34, 35, 38, 0.08);
  }
}
html[data-theme="light"] .config-banner strong { color: var(--ink); }
html[data-theme="light"] .config-banner p { color: var(--muted); }
html[data-theme="light"] .config-banner a { color: var(--blue); }

/* Composer footer and story actions */
html[data-theme="light"] .cta-footer {
  border-top-color: var(--line);
  background: #f3f0ea;
}
html[data-theme="light"] .continue-button {
  border-color: var(--line);
  color: #3f6f96;
  background: #f8f5f0;
}
html[data-theme="light"] .continue-button:hover:not(:disabled) {
  border-color: rgba(24, 116, 217, 0.4);
  color: var(--blue-strong);
  background: #edf5fc;
}
/* Cost note reads as plain text, no boxed blue background. */
html[data-theme="light"] .cost-note,
html[data-theme="light"] .cover-cost-note {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}

/* Header login button — solid brand blue instead of dark navy. */
html[data-theme="light"] .login-button {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #1c7ae6, #0f5fc7);
  box-shadow: 0 10px 24px rgba(24, 116, 217, 0.22);
}
html[data-theme="light"] .login-button:hover {
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(24, 116, 217, 0.3);
}

/* Active advanced-settings tab — light pill with blue label (the active
   state is driven by :checked ~ label, not an .is-active class). */
html[data-theme="light"] #settingsTabScenes:checked ~ label[for="settingsTabScenes"],
html[data-theme="light"] #settingsTabCharacters:checked ~ label[for="settingsTabCharacters"],
html[data-theme="light"] #settingsTabPages:checked ~ label[for="settingsTabPages"],
html[data-theme="light"] #settingsTabCover:checked ~ label[for="settingsTabCover"] {
  border-color: rgba(24, 116, 217, 0.28);
  color: var(--blue);
  background: var(--sheet);
  box-shadow: 0 6px 16px rgba(67, 52, 44, 0.1);
}
html[data-theme="light"] .settings-tab:hover { color: var(--ink); background: #e3ddd4; }

/* Form fields across the workspace */
html[data-theme="light"] .creator-shell textarea,
html[data-theme="light"] .creator-shell input,
html[data-theme="light"] .creator-shell select {
  border-color: var(--line);
  color: var(--ink);
  background: #f8f5f0;
}
html[data-theme="light"] .creator-shell textarea:focus,
html[data-theme="light"] .creator-shell input:focus,
html[data-theme="light"] .creator-shell select:focus {
  border-color: rgba(24, 116, 217, 0.55);
  box-shadow: 0 0 0 3px rgba(24, 116, 217, 0.12);
}
html[data-theme="light"] .creator-shell ::placeholder { color: var(--soft); }
html[data-theme="light"] .dropdown-value { color: var(--ink); }
html[data-theme="light"] .dropdown-caret { color: var(--soft); }
html[data-theme="light"] .model-price { color: var(--ink); }
html[data-theme="light"] .spec-bar i { background: rgba(34, 35, 38, 0.14); }
/* Re-assert filled bars: the base override above out-specifies
   creator.css's .spec-bar.level-3 i rule and greyed the green bars. */
html[data-theme="light"] .spec-bar.level-1 i:nth-child(1),
html[data-theme="light"] .spec-bar.level-2 i:nth-child(-n + 2),
html[data-theme="light"] .spec-bar.level-3 i {
  background: var(--bar-color, rgba(34, 35, 38, 0.5));
}

/* Advanced-settings buttons and helpers */
html[data-theme="light"] .tool-button,
html[data-theme="light"] .tool-button.ghost {
  border-color: var(--line);
  color: var(--ink);
  background: #f8f5f0;
}
html[data-theme="light"] .tool-button:hover,
html[data-theme="light"] .tool-button.ghost:hover {
  border-color: rgba(24, 116, 217, 0.38);
  background: #f3f0ea;
}
html[data-theme="light"] .tool-button.ghost svg { color: var(--blue); }
html[data-theme="light"] .step-btn {
  border-color: var(--line);
  color: var(--ink);
  background: #f8f5f0;
}
html[data-theme="light"] .step-btn:hover {
  border-color: rgba(24, 116, 217, 0.38);
  background: #f3f0ea;
}
html[data-theme="light"] .scene-empty {
  border-color: rgba(24, 116, 217, 0.3);
  color: var(--muted);
  background: #f3f0ea;
}
html[data-theme="light"] .selected-scene h3 { color: var(--ink); }

/* Page strip */
html[data-theme="light"] .page-strip {
  border-color: var(--line);
  background: rgba(255, 253, 252, 0.96);
  box-shadow: 0 14px 38px rgba(67, 52, 44, 0.11);
}
html[data-theme="light"] .add-page {
  border-color: var(--line);
  background: #f8f5f0;
}
html[data-theme="light"] .add-page:hover { border-color: rgba(24, 116, 217, 0.4); }
html[data-theme="light"] .add-page svg { color: var(--soft); }
html[data-theme="light"] .page-thumb img { background: #ece8e1; }

@media (max-width: 780px) {
  .theme-toggle {
    display: inline-grid !important;
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex-basis: 40px;
    border-radius: 10px;
  }
  .legal-header { gap: 10px; }
  .legal-header .button.compact { padding-inline: 12px; }
  .app-bar .theme-toggle { order: -1; }
  html[data-theme="light"] .left-panel .story-wrap.has-text textarea,
  html[data-theme="light"] .left-panel .story-wrap.has-text textarea:focus,
  html[data-theme="light"] .left-panel.has-active-prompt #storyInput,
  html[data-theme="light"] .left-panel.has-active-prompt #storyInput:focus {
    border-color: var(--blue) !important;
    background: #fffdfc !important;
    box-shadow:
      0 0 0 2px rgba(24, 116, 217, 0.16),
      0 0 30px rgba(24, 116, 217, 0.12) !important;
  }
  html[data-theme="light"] .gallery-feed-meta { color: var(--ink); }
  html[data-theme="light"] body.page-marketing .hero::before {
    background:
      linear-gradient(180deg, rgba(245, 241, 234, 0.02) 0%, rgba(245, 241, 234, 0.08) 48%, rgba(245, 241, 234, 0.96) 100%),
      linear-gradient(90deg, rgba(245, 241, 234, 0.06), rgba(245, 241, 234, 0.16));
  }
  html[data-theme="light"] body.page-marketing .hero::after { display: none; }
  html[data-theme="light"] body.page-marketing .mobile-hero-copy { color: var(--muted); }
  html[data-theme="light"] body.page-marketing .hero-art {
    opacity: 1;
    background-position: center top;
    filter: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.5) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.5) 88%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}