/* Dozzy After Hours. Same editorial layout, a quieter palette for evening work. */
:root {
  --action: #3366ff;
  --action-hover: #254ee0;
  --on-action: #fff;
  --focus: #3366ff;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line, #dedfd8);
  border-radius: 3px;
  background: transparent;
  color: var(--ink, #181918);
  cursor: pointer;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover { background: var(--surface-soft); border-color: var(--muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: inline; }
.lp-page .theme-toggle { color: var(--lp-ink); border-color: var(--lp-rule); }
html[data-theme] label.setting-row:has(input[name="dark"]) { display: flex; }

html[data-theme="dark"], html[data-theme="dark"] body {
  --canvas: #151617;
  --surface: #1c1e20;
  --surface-strong: #292c2f;
  --surface-soft: #212325;
  --ink: #f1efe9;
  --ink-deep: #f1efe9;
  --muted: #a9adae;
  --muted-strong: #c7c9c7;
  --line: #363a3d;
  --line-strong: #62696e;
  --primary: #a5baff;
  --primary-hover: #ccd8ff;
  --primary-soft: #28334b;
  --lime: #a5baff;
  --lime-strong: #ccd8ff;
  --lime-soft: #28334b;
  --coral: #ffa58e;
  --coral-soft: #3b2d2b;
  --cyan: #96cdd7;
  --green: #96d5b1;
  --error: #ffa58e;
  --action: #3d5fd1;
  --action-hover: #4a6bdb;
  --focus: #a5baff;
  --radius: 4px;
  --shadow: none;
  --shadow-card: none;
  background: var(--canvas);
  color: var(--ink);
  color-scheme: dark;
}
html[data-theme="dark"] body {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -.015em;
}
html[data-theme="dark"] :focus-visible { outline-color: var(--focus); }
html[data-theme="dark"] ::selection { background: #526dbe; color: #fff; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #939b9f !important; }
html[data-theme="dark"] :is(select, input, textarea) { color-scheme: dark; }
html[data-theme="dark"] select option { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .dozzy-wordmark { filter: brightness(1.55) saturate(.75); }
html[data-theme="dark"] body[data-page]:not([data-page="login"]) :is(.sidebar-create, .button.dark) {
  background: #e8e5df;
  border-color: #e8e5df;
  color: #191b1c;
}
html[data-theme="dark"] body[data-page]:not([data-page="login"]) :is(.sidebar-create, .button.dark):hover {
  background: #c7d4ff;
  border-color: #c7d4ff;
  color: #191b1c;
}
html[data-theme="dark"] body[data-page]:not([data-page="login"]) :is(.button.primary, .v2-button.primary, .v2-button.lime, .big-play, .segmented button.active) {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}
html[data-theme="dark"] body[data-page]:not([data-page="login"]) :is(.button.primary, .v2-button.primary, .v2-button.lime, .big-play):hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--on-action);
}
html[data-theme="dark"] body[data-page]:not([data-page="login"]) .switch-input:checked { background: var(--action); }
html[data-theme="dark"] body[data-page]:not([data-page="login"]) .modal-backdrop { background: #08090bb8; }
html[data-theme="dark"] body[data-page]:not([data-page="login"]) .mobile-overlay.visible { background: #08090ba8; }
html[data-theme="dark"] .music-preview::before { display: none; }
html[data-theme="dark"] .preview-home { background: #e8e5df; color: #191b1c; box-shadow: none; }

/* Studio: an editorial desk with an illustration drawn for this palette. */
html[data-theme="dark"] body[data-page="studio"] .th-home {
  --th-ink: var(--ink);
  --th-muted: var(--muted);
  --th-rule: var(--line);
  --th-paper: var(--canvas);
}
html[data-theme="dark"] body[data-page="studio"] .th-welcome .th-eyebrow { color: var(--primary) !important; }
html[data-theme="dark"] body[data-page="studio"] .th-prompt-row { background: var(--surface); border-color: var(--line-strong); }
html[data-theme="dark"] body[data-page="studio"] .th-prompt-row button { background: var(--action); color: #fff; }
html[data-theme="dark"] body[data-page="studio"] .th-prompt-row button:hover { background: var(--action-hover); }
html[data-theme="dark"] body[data-page="studio"] .th-launch:hover { background: var(--surface-soft); }
html[data-theme="dark"] body[data-page="studio"] .th-launch:hover .th-launch-arrow { color: #191b1c; }
html[data-theme="dark"] body[data-page="studio"] :is(.th-link:hover, .th-model:hover .th-model-name strong, .th-welcome-art figcaption > span) { color: var(--primary); }
html[data-theme="dark"] body[data-page="studio"] :is(.th-work-preview, .th-work-preview.has-image, .th-empty-symbol) { background: var(--surface-soft); }
html[data-theme="dark"] body[data-page="studio"] .th-work-preview.type-music { background: #392d2c; }
html[data-theme="dark"] body[data-page="studio"] .th-work-preview.type-video { background: #2c3730; }
html[data-theme="dark"] body[data-page="studio"] .th-work-text { color: var(--muted-strong); }
html[data-theme="dark"] body[data-page="studio"] .th-work-category { background: var(--surface); color: var(--ink); }

/* Chat: paper becomes charcoal; conversations and the composer keep their shape. */
html[data-theme="dark"] body[data-page="chat"] .chat-v2 {
  --chat-bg: #151617;
  --chat-panel: #1c1e20;
  --chat-panel-deep: #292c2f;
  --chat-soft: #212325;
  --chat-line: #363a3d;
  --chat-text: #f1efe9;
  --chat-muted: #b2b7b8;
  --chat-quiet: #9ca4a7;
  --chat-cobalt: #a5baff;
  --chat-cobalt-soft: #28334b;
  --chat-coral: #ffa58e;
  --chat-lime: #f1efe9;
}
html[data-theme="dark"] body[data-page="chat"] .chat-v2 :is(.chat-new-button:hover, .conversation-item.active) { background: #e8e5df; color: #191b1c; }
html[data-theme="dark"] body[data-page="chat"] .chat-v2 .conversation-item.active small { color: #41474b; }
html[data-theme="dark"] body[data-page="chat"] .chat-v2 .chat-send { background: var(--action); color: #fff; }
html[data-theme="dark"] body[data-page="chat"] .chat-v2 .chat-send:hover:not(:disabled) { background: var(--action-hover); color: #fff; }
html[data-theme="dark"] body[data-page="chat"] .chat-v2 .chat-history-overlay { background: #08090ba8; }

/* The public page and authentication use the same evening palette. */
html[data-theme="dark"] .lp-page {
  --canvas: #151617;
  --surface: #1c1e20;
  --surface-strong: #292c2f;
  --surface-soft: #212325;
  --ink: #f1efe9;
  --ink-deep: #f1efe9;
  --muted: #a9adae;
  --muted-strong: #c7c9c7;
  --line: #363a3d;
  --line-strong: #62696e;
  --primary: #a5baff;
  --primary-hover: #ccd8ff;
  --coral: #ffa58e;
  --error: #ffa58e;
  --lp-paper: #151617;
  --lp-ink: #f1efe9;
  --lp-muted: #a9adae;
  --lp-rule: #363a3d;
  --lp-blue: #a5baff;
  --lp-coral: #ffa58e;
  color-scheme: dark;
}
html[data-theme="dark"] .lp-page .lp-button-primary { background: var(--action); border-color: var(--action); color: #fff !important; }
html[data-theme="dark"] .lp-page .lp-button-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
html[data-theme="dark"] .lp-page .lp-button-outline:hover { background: #e8e5df; color: #191b1c; }
html[data-theme="dark"] .lp-page .lp-mega { background: var(--surface); box-shadow: 0 18px 40px #0003; }
html[data-theme="dark"] .lp-page .lp-category-image .lp-category-symbol { background: #293751; }
html[data-theme="dark"] .lp-page .lp-category-music .lp-category-symbol { background: #392d2c; }
html[data-theme="dark"] .lp-page .lp-category-video .lp-category-symbol { background: #2c3730; }
html[data-theme="dark"] .lp-page .lp-how { background: #1c1e20; border-color: var(--line); }
html[data-theme="dark"] .lp-page .lp-step-number:after { background: var(--line-strong); }
html[data-theme="dark"] .lp-page .lp-auth { background: #1c2230; border-color: var(--line); }
html[data-theme="dark"] .lp-page .lp-auth-copy .lp-kicker { color: var(--primary); }
html[data-theme="dark"] .lp-page :is(.lp-auth-copy > p:not(.lp-kicker), .lp-auth-note) { color: var(--muted-strong); }
html[data-theme="dark"] .lp-page .login-card { background: var(--surface); border-color: var(--line-strong); box-shadow: none; }
html[data-theme="dark"] .lp-page .login-card :is(.brand-name, .brand-ai) { color: var(--ink); }
html[data-theme="dark"] .lp-page .login-card :is(.login-error, .email-error) { color: var(--error); }
html[data-theme="dark"] .lp-page .login-card .email-field input { background: var(--canvas); color: var(--ink); }
html[data-theme="dark"] .lp-page .login-card .geo-attribution { color: var(--muted); }
html[data-theme="dark"] .lp-page .login-card > .v2-button { background: var(--action); border-color: var(--action); color: #fff; }
html[data-theme="dark"] .lp-page .login-card > .v2-button:hover { background: var(--action-hover); }

/* Narrow screens retain the same touch targets and generator controls. */
@media(max-width:767px) {
  .topbar-actions { gap: 8px; }
  .topbar-actions .theme-toggle { flex-basis: 40px; width: 40px; min-height: 44px; padding: 9px; }
  html[data-theme="dark"] .v2-page .mobile-workspace-tabs button.active,
  html[data-theme="dark"] .v2-page .mobile-workspace-tabs button[aria-selected="true"] { background: var(--action); color: #fff; }
}
@media(max-width:600px) {
  .lp-page .lp-header-inner { grid-template-columns: minmax(0,1fr) auto; }
  .lp-page .lp-header-actions { gap: 6px; }
  .lp-page .lp-header-actions .theme-toggle { flex-basis: 36px; width: 36px; min-height: 44px; padding: 8px; border-color: transparent; }
  .lp-page .lp-language select { width: 80px; }
  .lp-page .lp-header-login { padding-inline: 10px; }
}
@media(max-width:360px) {
  .lp-page .lp-brand .dozzy-wordmark { width: 82px; }
  .lp-page .lp-language > svg { display: none; }
  .lp-page .lp-language select { width: 72px; }
  .lp-page .lp-header-login { font-size: 11px; padding-inline: 8px; }
  .topbar-actions .avatar.small { display: none; }
}
@media(prefers-reduced-motion:reduce) { .theme-toggle { transition: none; } }