/* Shared tokens also reach login screens and dialogs mounted outside the shell. */
:root {
  --ys-gold: #e2bf78;
  --ys-ink: #21190c;
  --ys-bg: #111214;
  --ys-panel: #1b1c1e;
  --ys-raised: #252526;
  --ys-text: #f0ece2;
  --ys-muted: #b9b1a1;
  --ys-line: #4d4534;
  --ys-input: #121315;
  --ys-soft: #302615;
  --ys-success: #adc6ab;
  --ys-success-bg: #233025;
  --ys-danger: #ffafa3;
  --ys-danger-bg: #33211b;
  --ys-radius: 11px;
  --ys-font: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color-scheme: dark;
}
body.desktop-app {
  --ds-gold: var(--ys-gold);
  --ds-line: var(--ys-line);
  --ds-text: var(--ys-text);
  --ds-muted: var(--ys-muted);
  --ds-panel: var(--ys-panel);
  --ds-raised: var(--ys-raised);
  background: var(--ys-bg);
  color: var(--ys-text);
  font: 13px/1.65 var(--ys-font);
}
.desktop-app :is(.cw-workspace, .cw-dialog, .cw-loading) {
  --cw-gold: var(--ys-gold);
  --cw-gold-light: var(--ys-gold);
  --cw-line: var(--ys-line);
  --cw-muted: var(--ys-muted);
  color: var(--ys-text);
}
.desktop-app .dep-planner {
  --dep-gold: var(--ys-gold);
  --dep-line: var(--ys-line);
  --dep-muted: var(--ys-muted);
}
.desktop-app .vw-workspace {
  --vw-gold: var(--ys-gold);
  --vw-line: var(--ys-line);
  --vw-muted: var(--ys-muted);
}
.desktop-app :is(.personal-tools, .personal-dashboard, .account-security, .compute-panel, .project-assistant, .personal-project-delete-dialog) {
  color: var(--ys-text);
  font: inherit;
}
.desktop-app :is(.personal-heading, .ds-title-row) h1 { font-size: 25px; font-weight: 500; }
.desktop-app :is(.personal-card, .compute-panel, .account-security, .ds-settings-body) h2 { font-size: 19px; font-weight: 500; }
.desktop-app :is(.personal-card, .account-security, .compute-panel) h3 { font-size: 16px; font-weight: 500; }
.desktop-app :is(.personal-heading p, .personal-muted, .personal-job small, .personal-empty, .as-muted, .as-empty, .lm-user-filters label, .lm-user-stats dt, .lm-user-definition, .lm-user-table small, .storage-settings p) { color: var(--ys-muted); }
.desktop-app :is(.personal-kicker, .personal-stat-grid strong, .personal-result a) { color: var(--ys-gold); }
.desktop-app .personal-stat-grid strong { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Surface, typography and controls are shared by creation and account pages. */
.desktop-app .ys-workspace :is(.personal-card, .ds-task-list article, .ds-feature-tabs, .ds-tabs, .ds-settings-content, .vw-card, .dep-sidebar, .dep-editor, .dep-empty, .as-request) {
  background: var(--ys-panel);
  border: 1px solid var(--ys-line);
  border-radius: var(--ys-radius);
  box-shadow: none;
  color: var(--ys-text);
}
.desktop-app .ys-workspace :is(.ds-page, .ds-settings, .lm-membership-page, .cw-workspace, .iw-workshop, .vw-shell) button:where(:not(.ys-sidebar button, .ds-project-cover, .ds-project-card > div > button, .ds-code-toolbar button, .cw-steps > button, .dep-episode, .dep-icon-button, .cw-style-select)),
.desktop-app :is(.ds-login, .cw-dialog, .personal-key-dialog, .as-confirm, .compute-confirm, .personal-project-delete-dialog, .dep-preview, .assistant-panel) button:where(:not([data-slot=dialog-close], .assistant-panel header button)) {
  background: var(--ys-raised);
  color: var(--ys-text);
  border: 1px solid var(--ys-line);
  border-radius: 7px;
  box-shadow: none;
  font-family: var(--ys-font);
  font-size: 12px;
  text-shadow: none;
}
.desktop-app .ys-workspace :is(.ds-page, .ds-settings, .lm-membership-page, .cw-workspace, .iw-workshop, .vw-shell) button:is(.ds-primary, .cw-primary, .cw-editor-primary, .cw-generate-video, .personal-primary, .ys-primary, .iw-generate, [type=submit]),
.desktop-app .ys-workspace .lm-contact-panel > header button,
.desktop-app .ys-workspace .lm-membership-plans button,
.desktop-app :is(.ds-login, .cw-dialog, .personal-key-dialog, .as-confirm, .dep-preview) button:is(.ds-primary, .cw-primary, .personal-primary, [type=submit]),
.desktop-app .dep-button.dep-button-gold {
  background: var(--ys-gold);
  color: var(--ys-ink);
  border-color: var(--ys-gold);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
.desktop-app .ys-workspace button:hover:not(:disabled):not(.ds-project-cover):not(.ys-sidebar button),
.desktop-app :is(.cw-dialog, .personal-key-dialog, .as-confirm, .compute-confirm) button:hover:not(:disabled) { border-color: var(--ys-gold); }
.desktop-app :is(button, a, summary):focus-visible { outline: 2px solid var(--ys-gold); outline-offset: 3px; }
.desktop-app :is(.ys-workspace, .ds-login, .cw-dialog, .personal-key-dialog, .as-confirm, .dep-preview, .assistant-panel) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) {
  background: var(--ys-input);
  color: var(--ys-text);
  border-color: var(--ys-line);
  border-radius: 7px;
  font-family: var(--ys-font);
  font-size: 13px;
  min-width: 0;
  max-width: 100%;
}
.desktop-app :is(input, textarea)::placeholder { color: #8d816a; }
.desktop-app .personal-card label > select { display: block; width: 100%; padding: 10px; margin: 8px 0 12px; min-height: 42px; }
.desktop-app :is(input, textarea, select):focus-visible { outline: 1px solid var(--ys-gold); outline-offset: 2px; box-shadow: none; }
.desktop-app :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--ys-gold); }
.desktop-app .ys-workspace :is(fieldset, .personal-job, .personal-dashboard td, .personal-dashboard th, .storage-save-status, .lm-membership-orders article, .as-card, .script-dialogue article) { border-color: var(--ys-line); }
.desktop-app :is(.personal-dashboard th, .compute-table th, .lm-user-table th) { background: var(--ys-raised); color: var(--ys-muted); font-weight: 500; }
.desktop-app :is(.personal-dashboard td, .compute-table td, .lm-user-table td) { color: var(--ys-text); }
.desktop-app :is(.personal-project-delete-confirm, .personal-project-delete) { background: var(--ys-danger-bg); color: var(--ys-danger); border-color: #755044; }

/* Legacy tabs carry important declarations; keep these overrides explicit. */
.desktop-app .ys-workspace :is(.ds-feature-tabs, .ds-tabs) button {
  background: transparent !important;
  color: var(--ys-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 7px;
  box-shadow: none;
}
.desktop-app .ys-workspace :is(.ds-feature-tabs, .ds-tabs) button.active {
  background: var(--ys-soft) !important;
  color: var(--ys-gold) !important;
  border-color: var(--ys-line) !important;
  box-shadow: none;
}
.desktop-app .ys-workspace .ds-settings > aside button { color: var(--ys-muted) !important; background: transparent !important; box-shadow: none; }
.desktop-app .ys-workspace .ds-settings > aside button.active { color: var(--ys-ink) !important; background: var(--ys-gold) !important; }
.desktop-app .ys-workspace :is(.personal-switch, .account-security nav, .compute-actions) button[aria-pressed=true] { background: var(--ys-soft); color: var(--ys-gold); border-color: var(--ys-line); }
.desktop-app .ys-workspace .personal-tools { padding: 22px; }
.desktop-app .ys-workspace .personal-dashboard { padding: 22px; }
.desktop-app .personal-card { padding: 22px; }
.desktop-app .personal-key-dialog > .personal-card { background: var(--ys-panel); border-color: var(--ys-line); border-radius: var(--ys-radius); }

/* Personal API setup must use the same theme as the official API section. */
.desktop-app .local-settings-panel { color: var(--ys-text); font: inherit; }
.desktop-app .local-settings-panel:not([data-inline]) { background: var(--ys-bg); }
.desktop-app .local-settings-panel :is(.local-card, .local-model-group, .local-message) { background: var(--ys-panel); border-color: var(--ys-line); border-radius: var(--ys-radius); }
.desktop-app .local-settings-panel :is(h1, h2, h3) { font-weight: 500; color: var(--ys-text); }
.desktop-app .local-settings-panel h1 { font-size: 22px; }
.desktop-app .local-settings-panel :is(p, label, small, .local-note) { color: var(--ys-muted); }
.desktop-app .local-settings-panel :is(button, input, textarea, select) { font: inherit; border-radius: 7px; border-color: var(--ys-line); }
.desktop-app .local-settings-panel :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { background: var(--ys-input); color: var(--ys-text); }
.desktop-app .local-settings-panel button { background: var(--ys-raised); color: var(--ys-text); }
.desktop-app .local-settings-panel button.primary { background: var(--ys-gold); border-color: var(--ys-gold); color: var(--ys-ink); font-weight: 600; }
.desktop-app .local-settings-panel .local-tabs button[aria-selected=true] { background: var(--ys-soft); border-color: var(--ys-gold); color: var(--ys-gold); }
.desktop-app .local-settings-panel :is(.local-tag, code, a) { color: var(--ys-gold); }
.desktop-app .local-settings-panel .local-tag { background: var(--ys-soft); }
.desktop-app .local-settings-panel :is(.local-provider, .local-task) { border-color: var(--ys-line); }
.desktop-app .local-settings-panel .local-ok { color: var(--ys-success); }
.desktop-app .local-settings-panel :is(.local-bad, button.danger) { color: var(--ys-danger); }
.desktop-app .local-settings-panel :is(input, textarea, select):focus-visible { outline-color: var(--ys-gold); }
.desktop-app #provider-model-results { background: var(--ys-input); border-color: var(--ys-line); }

/* Creation stages and their editors keep the selected studio layout. */
.desktop-app .ys-workspace .ds-workshop .cw-workspace { background: transparent; box-shadow: none; }
.desktop-app .ys-workspace .ds-workshop .cw-steps { background: var(--ys-input); border-color: var(--ys-line); box-shadow: none; }
.desktop-app .ys-workspace .ds-workshop .cw-steps > button { color: var(--ys-muted); border-color: var(--ys-line); }
.desktop-app .ys-workspace .ds-workshop .cw-steps > button[data-active=true] { background: var(--ys-soft); color: var(--ys-gold); box-shadow: inset 0 -2px var(--ys-gold); }
.desktop-app .ys-workspace .cw-steps > button[data-active=true] .cw-step-number { background: var(--ys-gold); color: var(--ys-ink); border-color: var(--ys-gold); box-shadow: none; }
.desktop-app .ys-workspace .cw-steps small { color: var(--ys-muted); }
.desktop-app .ys-workspace :is(.cw-editor-pane, .cw-style-picker, .cw-project-card, .cw-assets-panel, .cw-storyboard-panel, .cw-script-editing, .dep-preview-list details) { background: var(--ys-panel); border-color: var(--ys-line); box-shadow: none; }
.desktop-app .ys-workspace .ds-workshop .cw-workspace :is(input, textarea, select),
.desktop-app .cw-dialog input {
  background: var(--ys-input) !important;
  border-color: var(--ys-line) !important;
  color: var(--ys-text);
}
.desktop-app .ys-workspace .ds-workshop .cw-workspace :is(input, textarea, select):focus,
.desktop-app .cw-dialog input:focus { border-color: var(--ys-gold) !important; box-shadow: none !important; }
.desktop-app .ys-workspace .cw-workspace .cw-search input { background: transparent !important; border: 0 !important; }
.desktop-app .ys-workspace .vw-generate-button { background: var(--ys-gold) !important; color: var(--ys-ink) !important; border-color: var(--ys-gold) !important; box-shadow: none !important; }
.desktop-app .ys-workspace :is(.iw-settings, .iw-composer, .iw-result) { background: var(--ys-panel); border-color: var(--ys-line); border-radius: var(--ys-radius); box-shadow: none; }
.desktop-app .ys-workspace .iw-main { border-color: var(--ys-line); border-radius: var(--ys-radius); }
.desktop-app .ys-workspace .iw-workshop :is(.iw-ratios, .iw-segments, .iw-counts, .iw-styles) button[aria-pressed=true] { background: var(--ys-soft); color: var(--ys-gold); border-color: var(--ys-gold); box-shadow: none; }
.desktop-app .ys-workspace :is(.iw-settings > header > span, .iw-stage-header > span, .iw-setting-section h2, .iw-setting-section h2 > span) { color: var(--ys-gold); }
.desktop-app .ys-workspace :is(.iw-settings-note, .iw-composer-note, .iw-advanced label, .iw-advanced p) { color: var(--ys-muted); }
.desktop-app .ys-workspace .iw-model-select { background: var(--ys-input); border-color: var(--ys-line); }
.desktop-app :is(.dep-episode.dep-episode-active, .dep-episode-active .dep-episode-number) { background: var(--ys-soft); color: var(--ys-gold); border-color: var(--ys-gold); box-shadow: none; }

/* Login and every confirmation surface use the same panels and focus color. */
.desktop-app :is(.ds-login, .ds-login-form) { background: var(--ys-bg); color: var(--ys-text); }
.desktop-app .ds-login-form { font: 13px/1.75 var(--ys-font); }
.desktop-app .ds-login-form :is(label, form > p, small) { color: var(--ys-muted); }
.desktop-app .ds-login-form h1 { font-weight: 500; }
.desktop-app .ds-login-form button.ds-primary { background: var(--ys-gold); color: var(--ys-ink); border-color: var(--ys-gold); box-shadow: none; }
.desktop-app :is(.cw-dialog, .iw-preview-dialog, .as-confirm, .personal-project-delete-dialog, .dep-preview, .assistant-panel, .compute-confirm > div, .lm-membership-confirm > div) { background: var(--ys-panel); color: var(--ys-text); border: 1px solid var(--ys-line); border-radius: var(--ys-radius); font-family: var(--ys-font); }
.desktop-app :is(.cw-dialog [data-slot=dialog-title], .as-confirm h3, .personal-project-delete-dialog h2) { color: var(--ys-text); font-weight: 500; }
.desktop-app :is(.cw-dialog [data-slot=dialog-description], .personal-project-delete-dialog p, .assistant-panel small, .assistant-empty, .assistant-panel label) { color: var(--ys-muted); }
.desktop-app .assistant-panel header { background: var(--ys-raised); }
.desktop-app .assistant-message { background: var(--ys-raised); }
.desktop-app .assistant-message.user { background: var(--ys-soft); }
.desktop-app .assistant-form-actions button[type=submit] { background: var(--ys-gold) !important; color: var(--ys-ink) !important; }
.desktop-app .assistant-launch { background: var(--ys-raised); color: var(--ys-gold); border-color: var(--ys-line); font: inherit; }
.desktop-app .account-security nav { gap: 8px; }
.desktop-app .account-security .as-card { padding: 20px; margin: 16px 0; background: var(--ys-raised); border: 1px solid var(--ys-line); border-radius: 9px; }
.desktop-app :is(.as-success, .storage-success, .compute-charge-notice) { background: var(--ys-success-bg); color: var(--ys-success); border-color: #475e45; border-radius: 7px; }
.desktop-app :is(.as-error, .personal-task-error) { color: var(--ys-danger); }
.desktop-app .as-error { background: var(--ys-danger-bg); }
.desktop-app .as-pending { background: var(--ys-soft); color: var(--ys-gold); }
.desktop-app .as-request strong[data-status=approved] { color: var(--ys-success); }
.desktop-app .as-request strong[data-status=pending] { color: var(--ys-gold); }
.desktop-app :is(.lm-user-member.is-administrator, .lm-user-member.is-expired) { background: var(--ys-soft); color: var(--ys-gold); }
.desktop-app :is(.lm-user-online, .lm-user-member) { background: var(--ys-raised); color: var(--ys-muted); }
.desktop-app :is(.lm-user-online.is-online, .lm-user-member.is-active) { background: var(--ys-success-bg); color: var(--ys-success); }
.desktop-app .lm-membership-page .compute-panel { margin: 0; }

@media (max-width: 700px) {
  .desktop-app .ys-workspace .ds-feature-tabs button { min-width: 0; flex: 1; justify-content: center; padding-inline: 10px; font-size: 13px; }
  .desktop-app .ys-workspace :is(.personal-tools, .personal-dashboard) { padding: 14px; }
  .desktop-app :is(.personal-card, .account-security .as-card) { padding: 16px; }
  .desktop-app .personal-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .desktop-app .personal-heading { flex-wrap: wrap; gap: 12px; }
  .desktop-app .local-settings-panel .local-tabs { flex-wrap: wrap; }
  .desktop-app .local-settings-panel .local-provider { flex-wrap: wrap; }
  .desktop-app .as-filters > label { min-width: 0; }
  .desktop-app .personal-key-dialog { padding: 16px; }
  .desktop-app .iw-hero-copy h1 { font-size: clamp(22px, 6vw, 32px); }
  .desktop-app .iw-composer { min-width: 0; }
}