/* Shared semantic palettes. Load after every page stylesheet. */
:root {
  --nd-bg: var(--bg, #0b0e0d);
  --nd-surface: var(--surface, #141916);
  --nd-surface-raised: var(--surface-raised, #1c231e);
  --nd-text: var(--text, #edf1e9);
  --nd-line: var(--line-light, #414b43);
}
.nd-theme-toggle {
  display: inline-grid; place-items: center; flex: 0 0 3.5rem;
  width: 3.5rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem;
  margin: 0; padding: 0; border: 1px solid var(--nd-line); border-radius: .5rem;
  background: var(--nd-surface); color: var(--nd-text); cursor: pointer;
  touch-action: manipulation;
}
.nd-theme-toggle svg { width: 1.25rem; height: 1.25rem; pointer-events: none; }
.nd-theme-toggle:hover { border-color: #c9ff4f; background: var(--nd-surface-raised); }
.nd-theme-toggle:focus-visible { outline: 2px solid #c9ff4f; outline-offset: 3px; }

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.nd-redesign {
  color-scheme: light;
  --nd-bg: #fafcf8; --nd-surface: #f0f3ed; --nd-surface-raised: #e7ede2;
  --nd-text: #111; --nd-line: #a4afa0;
  --bg: var(--nd-bg); --black: var(--nd-bg);
  --surface: var(--nd-surface); --panel: var(--nd-surface);
  --surface-raised: var(--nd-surface-raised); --surface-2: var(--nd-surface-raised);
  --text: var(--nd-text); --paper: var(--nd-text); --text-2: var(--nd-text);
  --muted: var(--nd-color-text-secondary, #53604c); --dim: var(--muted);
  --line: #c6cfc0; --line-light: var(--nd-line); --line-strong: var(--nd-line);
  --lime: #c9ff4f; --lime-soft: #d6ff7f;
  --accent: #c9ff4f; --red: var(--nd-color-error-text, #943d30); --red-hot: var(--red); --red-deep: var(--red);
  --pink: var(--nd-text); --amber: var(--nd-text);
  background: var(--nd-bg) !important; color: #111 !important;
}
/* Text inherits its semantic role; V50 maps legacy components explicitly. */
html[data-theme="light"] ::selection { background: #c9ff4f; color: #111; }
html[data-theme="light"] :focus-visible {
  outline-color: #50691b !important;
  box-shadow: 0 0 0 2px #c9ff4f;
}

/* App backgrounds, navigation, fixed toolbars, drawers and dialogs. */
html[data-theme="light"] :where(
  .top, .topbar, .auth-header, .studio-sidebar, .rail, .panel, .gen-settings,
  .gen-settings-foot, .gen-category-bar, .desk, .chat-library, .pane-composer,
  .nai-pricing-head, .auth-art, .admin-page, .feed, .main
) { background: var(--nd-bg) !important; }
html[data-theme="light"] :where(
  .nai-pricing-dialog, .nai-price-card, .promo, .form-panel, .preview, .plan,
  .job, .profile-grid > section, .admin-layout > aside, .admin-detail fieldset,
  .admin-card, .admin-sidebar, .chat-pane, .conversation-item, .provider-row,
  .settings-panel, .memory-panel, .school-banner, .school-access, .prompt-card,
  .photo-editor, .pe-foot, .auth-box, .ref-preview-box, .detail, .models,
  .gen-selected, .gen-prepared-source, .gen-composer, .gen-model-card,
  .gen-asset-dialog, .gen-asset-card, .nd-market-note, .upscale-connection,
  .toast, .ac, .duration-options, .gen-duration-fixed, .nd-media-preview,
  .nd-audio-preview, .audio-source, .modelstrip, .upscale-source, .upscale-settings
) { background: var(--nd-surface) !important; }
html[data-theme="light"] :where(.main, .desk)::before { background: none !important; }
html[data-theme="light"] :where(.gen-composer-wrap)::before {
  background: linear-gradient(transparent, var(--nd-bg)) !important;
}

/* Controls stay readable without changing their visibility, disabled state or geometry. */
html[data-theme="light"] :where(input, select, textarea, option) {
  background: #fff !important; color: #111 !important; border-color: var(--nd-line) !important;
  accent-color: #8aad2c;
}
html[data-theme="light"] :where(input, textarea)::placeholder { color: #111 !important; opacity: .65; }
html[data-theme="light"] :where(input, select, textarea):hover { border-color: #68785e !important; }
html[data-theme="light"] :where(input, select, textarea):focus { border-color: #648522 !important; }
html[data-theme="light"] :where(
  .btn, .button, .chip, .auth-price, .menu-toggle, .menu-close, .avatar,
  .admin-shortcut, .gen-attach, .gen-settings-toggle, .gen-settings-close,
  .gen-library-button, .gen-asset-close, .nai-pricing-close, .nai-price-button,
  .gen-ratios button, .gen-setting-field .duration-options button, .ref button,
  .ref-edit, .ref-x, .ref-preview-close, .close, .attachment button, .trend-arrow,
  .act, .tabs, .tab, .userrow, .user-icon, .nd-theme-toggle,
  .conversation-item .open-actions button, .chat-empty .prompt-starter,
  .model-logo, .gen-model-icon, .gen-result-actions .gen-upscale, .setting-input
) { background: #fff !important; border-color: var(--nd-line) !important; }
html[data-theme="light"] :where(.btn.text, .setup-link, .gen-prompt, .gen-model-card select) {
  background: transparent !important;
}
html[data-theme="light"] :where(
  .btn, .button, .chip, .auth-price, .nd-theme-toggle, .gen-library-button,
  .gen-settings-toggle, .gen-ratios button, .userrow, .provider-row
):not(:disabled):hover { background: var(--nd-surface-raised) !important; border-color: #68785e !important; }
html[data-theme="light"] :where(.nav a, .side-nav.nav a):hover { background: var(--nd-surface-raised) !important; }

/* Lime remains the brand accent and identifies the same selected actions. */
html[data-theme="light"] :where(
  .btn.primary, .button.lime, .auth-submit, .nai-price-button.primary, .go,
  .plan-badge, .nai-plan-badge, .mark, .ref-count, .hl mark.hot,
  .nav a.active, .side-nav.nav a.active, .chip.active, .chip[aria-pressed="true"],
  .tab[aria-selected="true"], .duration-options button[aria-pressed="true"],
  .gen-ratios button[aria-pressed="true"], .gen-category-bar [role="tab"][aria-selected="true"],
  .pe-tools .btn[aria-pressed="true"], .act.on
) { background: #c9ff4f !important; border-color: #98b83b !important; }
html[data-theme="light"] :where(.btn.primary, .button.lime, .auth-submit, .nai-price-button.primary, .go):not(:disabled):hover {
  background: #d6ff7f !important; border-color: #98b83b !important;
}
html[data-theme="light"] :where(.plan.featured, .nai-price-card.featured, .conversation-item.active, .provider-row.active, .provider-row.selected, .userrow.selected, .user-row.selected) {
  background: #eaf4d7 !important; border-color: #98b83b !important;
}
html[data-theme="light"] :where(.premium-tag, .skill, .desk-badge, .gen-context-tags span, .badge) {
  background: #edf5df !important; border-color: #a7bd81 !important;
}
html[data-theme="light"] :where(.meter, .sw input) { background: #c6cfc0 !important; }
html[data-theme="light"] :where(.meter i, .sw input:checked, .loading-dot, .sidebar-dot, .upscale-dot) { background: #c9ff4f !important; }
html[data-theme="light"] :where(.sw input)::after { background: #fff !important; }
html[data-theme="light"] :where(.gen-frame.active .gen-frame-media, .mode-tabs button[aria-selected="true"], .editor-tab[aria-selected="true"], .editor-tab.active) {
  border-color: #648522 !important;
}
html[data-theme="light"] :where(.gen-model-icon) { background: #e4f2cf !important; }

/* Transparent and empty media stages become light; media pixels are untouched. */
html[data-theme="light"] :where(
  .media, .gen-result-media, .gen-player-stage, .gen-frame-media, .gen-prepared-media,
  .gen-asset-preview, .upscale-player, .stage, .ref-thumb, .ref-preview, .nd-media-preview img,
  .nd-media-preview video, .job video, .job .media:empty, .hero, .trend
) { background: #e7ede2 !important; }
html[data-theme="light"] :where(.pe-stage) {
  background-color: #f8faf6 !important;
  background-image: linear-gradient(45deg,#dce3d7 25%,transparent 25%), linear-gradient(-45deg,#dce3d7 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#dce3d7 75%), linear-gradient(-45deg,transparent 75%,#dce3d7 75%) !important;
}
html[data-theme="light"] :where(img, video, canvas, picture) { filter: none !important; }
html[data-theme="light"] :where(.hero)::after {
  background: linear-gradient(90deg,#fafcf8ed,transparent 78%),linear-gradient(0deg,#fafcf8c9,transparent 70%) !important;
}
html[data-theme="light"] :where(.trend)::after {
  background: linear-gradient(transparent 18%,#fafcf8f2) !important;
}
html[data-theme="light"] :where(.nd-home-media)::after {
  background: linear-gradient(transparent,#fafcf8f2) !important;
}
html[data-theme="light"] :where(.hero-label, .hero-bottom, .badge, .gen-asset-preview > span:not(.gen-asset-symbol), .fav-mark, .nd-ref-number) {
  background: #fafcf8ed !important;
}

/* Status text remains black; tint and borders continue distinguishing state. */
html[data-theme="light"] :where(
  .notice, .api-notice, .gen-category-connection, .gen-submit-feedback,
  .gen-gallery-drop.dragging, .nd-gallery-drop.dragging, .drop, #connectionState
) { background: #eaf4d7 !important; border-color: #99b676 !important; }
html[data-theme="light"] :where(.drop):hover { background: #e1efc9 !important; border-color: #648522 !important; }
html[data-theme="light"] :where(.message.user .message-body) { background: #e7efdc !important; border-color: #adbfa1 !important; }
html[data-theme="light"] :where(
  .status.error, .quote.error, .message-error, .page-status, .error-banner,
  .gen-submit-feedback.error, .badge.blocked, .gen-job-error, .gen-media-error
) { background: #ffebe6 !important; border-color: #bc7868 !important; }
html[data-theme="light"] :where(.button.danger, .btn.danger) { background: #ffebe6 !important; border-color: #bc7868 !important; }
html[data-theme="light"] :where(.gen-asset-choice:has(input:disabled)) { opacity: .55; }
html[data-theme="light"] :where(.upscale-settings > button:disabled) { background: #e0e6db !important; border-color: #b9c3b0 !important; }

/* Scrims are the only tinted layer; they still clearly separate open dialogs. */
html[data-theme="light"] :where(.modal, .nai-pricing-modal, .photo-overlay, .gen-asset-modal, .gen-settings-scrim, .menu-scrim) {
  background: #e6ece2b8 !important;
}
html[data-theme="light"] :where(.nai-pricing-dialog, .promo, .photo-editor, .gen-asset-dialog) {
  box-shadow: 0 1.5rem 5rem #26371926 !important;
}
html[data-theme="light"] .nd-reference-dialog::backdrop { background: #e6ece2b8; }
html[data-theme="light"] .auth-identity { background: #d6ff7f !important; }
@media (max-width: 480px) {
  .auth-header { flex-wrap: wrap; gap: .5rem; }
  .auth-actions { margin-left: auto; gap: .5rem; }
  .auth-actions .nd-theme-toggle { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nd-theme-toggle { transition: none; }
}

/* Day/night switch, shared with authentication pages. */
.nd-theme-track { display: block; position: relative; width: 3.25rem; height: 1.875rem; border-radius: 2rem; background: #3a4b59; box-shadow: inset 0 1px 3px #0004; transition: background .18s ease; }
.nd-theme-track .nd-theme-sun, .nd-theme-track .nd-theme-moon { position: absolute; display: grid; place-items: center; inset: 0 auto 0 .375rem; color: #f2d987; }
.nd-theme-track .nd-theme-moon { left: auto; right: .375rem; color: #d8e4fa; }
.nd-theme-track svg { width: .875rem; height: .875rem; }
.nd-theme-thumb { position: absolute; top: .1875rem; left: .1875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #f5f7f2; box-shadow: 0 1px 4px #0005; transition: transform .18s ease; }
.nd-theme-toggle[aria-checked="true"] .nd-theme-track { background: #a9c76b; }
.nd-theme-toggle[aria-checked="true"] .nd-theme-thumb { transform: translateX(1.375rem); }

@media (prefers-reduced-motion: reduce) { .nd-theme-track, .nd-theme-thumb { transition: none; } }

/* Light workspace, dark navigation chrome. Shared across desktop and drawers. */
html[data-theme="light"] body.studio-shell :is(.studio-sidebar,.top,.topbar) {
  color-scheme: dark;
  --nd-surface: #1d201e; --nd-surface-raised: #292d29; --nd-text: #f4f6f2;
  --nd-panel: #171a18; --nd-control: #232723; --nd-control-hover: #303630;
  --nd-ink: #f4f6f2; --nd-secondary: #bcc5bb; --nd-muted: #bcc5bb;
  --nd-color-text-primary: #f4f6f2; --nd-color-text-secondary: #bcc5bb;
  --nd-color-panel: #171a18; --nd-color-field: #232723;
  --text: #f4f6f2; --paper: #f4f6f2; --muted: #bcc5bb; --dim: #bcc5bb;
  --nd-border: #343b34; --nd-line: #343b34; --line: #343b34;
  --nd-brand: #c9ff4f; --lime: #c9ff4f; --accent: #c9ff4f;
  --nd-color-nav-active-icon: #c9ff4f; --nd-success: #c9ff4f; --nd-color-focus: #c9ff4f;
  background: #141715 !important; color: #f4f6f2 !important;
  border-color: #343b34 !important;
}
html[data-theme="light"] body.studio-shell #main-menu { background:#111412 !important; }
html[data-theme="light"] body.studio-shell #main-menu :is(.brand,.brand span,.brand small,.sidebar-caption,.sidebar-collapse,.side-nav.nav a) {
  color:#f4f6f2 !important;
}
html[data-theme="light"] body.studio-shell #main-menu .side-nav.nav a { background:transparent !important; border-color:transparent !important; }
html[data-theme="light"] body.studio-shell #main-menu .side-nav.nav a:hover { background:#252d23 !important; }
html[data-theme="light"] body.studio-shell #main-menu .side-nav.nav a.active { background:#c9ff4f18 !important; border-color:#c9ff4f4d !important; }
html[data-theme="light"] body.studio-shell :is(#main-menu,.top,.topbar) svg { color:#c9ff4f !important; opacity:1; }
html[data-theme="light"] body.studio-shell :is(#main-menu,.top,.topbar) :is(.btn,.sidebar-collapse,.menu-toggle,.menu-close,.nd-notify-toggle,.nd-balance-menu>summary,.avatar,.nd-language-select,select,option) {
  background:#232723 !important; color:#f4f6f2 !important; border-color:#3c453a !important;
}
html[data-theme="light"] body.studio-shell :is(.top,.topbar) :is(.top-context,.top-context small,.nd-balance-caption,.wallet-amount,.wallet-unit) { color:#f4f6f2 !important; }
html[data-theme="light"] body.studio-shell :is(#main-menu,.top,.topbar) :focus-visible { outline-color:#c9ff4f !important; }