/* Appearance applies to interface chrome only. No artwork, material, ink or export selectors. */
html[data-studio-theme="day"] {

    --st-bg: #f4f2eb;
    --st-surface: #fffdf6;
    --st-panel: #f8f6ef;
    --st-raised: #ebe9df;
    --st-field: #fffdf6;
    --st-text: #292d25;
    --st-muted: #5b6354;
    --st-line: #c9cdbd;
    --st-accent: #705423;
    --st-active: #ece2cb;
    --st-focus: #78591c;
    --st-success: #2b6d47;
    --st-danger: #9e352c;
    --st-stage: #e7e8de;
}

html[data-studio-theme="night"] {

    --st-bg: #151914;
    --st-surface: #1d231c;
    --st-panel: #20271f;
    --st-raised: #2a3328;
    --st-field: #161c16;
    --st-text: #f0eee2;
    --st-muted: #bdc4b0;
    --st-line: #4c5947;
    --st-accent: #e4c981;
    --st-active: #3c3a27;
    --st-focus: #e4c981;
    --st-success: #a9d6b4;
    --st-danger: #f0a89d;
    --st-stage: #111611;
    --sn-bg: var(--st-bg);
    --sn-paper: var(--st-surface);
    --sn-ink: var(--st-text);
    --sn-muted: var(--st-muted);
    --sn-line: var(--st-line);
    --sn-dark: #111710;
}

.sn-top-actions > .studio-theme-toggle,
.v2-header-actions > .studio-theme-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: var(--st-surface);
    color: var(--st-accent);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.studio-theme-toggle svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.sn-top-actions > .studio-theme-toggle:hover,
.v2-header-actions > .studio-theme-toggle:hover { background: var(--st-active); border-color: var(--st-accent); }
.sn-top-actions > .studio-theme-toggle:active,
.v2-header-actions > .studio-theme-toggle:active { background: var(--st-raised); }
html[data-studio-theme] .studio-theme-toggle:focus-visible { outline: 3px solid var(--st-focus) !important; outline-offset: 3px; }
html[data-studio-theme="day"] :is(.sn-shell, .sn-dialog, .v2-header-actions, .controls-panel, .v2-dialog) { color-scheme: light; }
html[data-studio-theme="night"] :is(.sn-shell, .sn-dialog, .v2-header-actions, .controls-panel, .v2-dialog) { color-scheme: dark; }

/* Product home, collection, projects, help and template details in charcoal and matte gold. */
html[data-studio-theme="night"] :is(.sn-topbar, .sn-sidebar) { background: var(--st-bg); border-color: var(--st-line); }
html[data-studio-theme="night"] .sn-sidebar { background: #111710; }
html[data-studio-theme="night"] :is(.sn-brand, .sn-brand > span:last-child) { color: var(--st-text); }
html[data-studio-theme="night"] .sn-brand-mark { color: var(--st-accent); border-color: #9a8652; }
html[data-studio-theme="night"] :is(.sn-brand > span:last-child > span, .sn-nav-label, .sn-nav-link, .sn-academy, .sn-install-mini, .sn-install-mini p) { color: var(--st-muted); }
html[data-studio-theme="night"] .sn-nav-link.is-active { color: #f0d99f; background: var(--st-active); border-color: #847347; }
html[data-studio-theme="night"] .sn-nav-link.is-active svg { color: var(--st-accent); }
html[data-studio-theme="night"] .sn-nav-link:hover { color: var(--st-text); background: var(--st-raised); }
html[data-studio-theme="night"] :is(.sn-count, .sn-languages button[aria-pressed="true"]) { background: var(--st-raised); color: var(--st-text); }
html[data-studio-theme="night"] :is(.sn-breadcrumb strong, .sn-card-copy h3, .sn-hero h1, .sn-page-intro h1, .sn-section-heading h2, .sn-process h2, .sn-install-card h2, .sn-learn-steps h2, .sn-empty h2, .sn-detail-copy h2, .sn-install-dialog h2, .sn-page-footer > span:first-child) { color: var(--st-text); }
html[data-studio-theme="night"] .sn-hero h1 em { color: #c5cba7; }
html[data-studio-theme="night"] :is(.sn-eyebrow, .sn-hero-copy > p, .sn-section-heading p, .sn-page-intro p, .sn-card-copy p, .sn-card-copy p span, .sn-card-number, .sn-process p, .sn-process small, .sn-local-notice p, .sn-material-note p, .sn-learn-steps p, .sn-step-index, .sn-empty p, .sn-results, .sn-install-card p, .sn-install-card small, .sn-detail-copy > p, .sn-detail-copy li, .sn-detail-copy small, .sn-install-dialog p, .sn-install-dialog p.sn-offline-description, .sn-page-footer, .sn-hero-foot, .sn-languages button) { color: var(--st-muted); }
html[data-studio-theme="night"] :is(.sn-text-button, .sn-card-start, .sn-top-install, .sn-project-actions button, .sn-template-source a) { color: var(--st-accent); }
html[data-studio-theme="night"] :is(.sn-text-button:hover, .sn-card-start:hover, .sn-top-install:hover, .sn-project-actions button:hover) { color: #fff0c8; }
html[data-studio-theme="night"] :is(.sn-card-start:hover, .sn-secondary:hover) { background: var(--st-raised); }
html[data-studio-theme="night"] :is(.sn-primary, .sn-hero-cta, .sn-update-banner button) { background: #d9bd77; border-color: #d9bd77; color: #1e251c; }
html[data-studio-theme="night"] :is(.sn-primary:hover, .sn-hero-cta:hover, .sn-update-banner button:hover) { background: #eed397; border-color: #eed397; color: #1e251c; }
html[data-studio-theme="night"] .sn-secondary { border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme="night"] :is(.sn-card-preview, .sn-stage-1, .sn-stage-2, .sn-stage-3, .sn-detail-preview) { background: var(--st-raised); border-color: var(--st-line); }
html[data-studio-theme="night"] :is(.sn-process, .sn-local-notice, .sn-install-card, .sn-learn-steps article, .sn-update-banner) { background: var(--st-surface); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme="night"] :is(.sn-material-note, .sn-template-source, .sn-collection-toolbar, .sn-page-footer, .sn-search, .sn-install-mini) { border-color: var(--st-line); }
html[data-studio-theme="night"] .sn-template-source p { color: var(--st-text); }
html[data-studio-theme="night"] :is(.sn-search, .sn-search input, .sn-filters button) { color: var(--st-muted); }
html[data-studio-theme="night"] .sn-search input::placeholder { color: var(--st-muted); }
html[data-studio-theme="night"] :is(.sn-filters button.is-active, .sn-filters button:hover) { background: var(--st-active); border-color: #847347; color: #f0d99f; }
html[data-studio-theme="night"] .sn-dialog { background: var(--st-bg); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme="night"] .sn-dialog-close { background: var(--st-surface); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme="night"] .sn-preview-pill { background: #1d231cf2; border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme="night"] .sn-page { scrollbar-color: #65745c var(--st-bg); }
html[data-studio-theme="night"] :is(.sn-shell, .sn-dialog) :focus-visible { outline-color: var(--st-focus); }

/* Shared editor appearance: only named controls and surrounding workspace surfaces. */
html[data-studio-theme] body.studio-next.sn-editing { background: var(--st-bg); color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing > header { background: var(--st-surface); border-color: var(--st-line); box-shadow: 0 5px 20px #10170c12; }
html[data-studio-theme] body.studio-next.sn-editing .workspace { background: var(--st-stage); }
html[data-studio-theme] body.studio-next.sn-editing .stage-area { background: radial-gradient(ellipse at 50% 40%, var(--st-raised), var(--st-stage) 78%); }
html[data-studio-theme] body.studio-next.sn-editing :is(.controls-panel, .v2-tool-rail, .v2-inspector-tabs, .v2-export-dock) { background: var(--st-panel); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing :is(.controls-panel, header, .v2-tool-rail, .stage-top-bar, .v2-word-strip) { --text-main: var(--st-text); --text-muted: var(--st-muted); --panel-border: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-brand-title, .v2-context-title strong, .v2-group-label, .v2-drawer-head strong, .v2-template strong, .controls-panel .section-title, .sn-quick-compose label, .v2-dialog-head h2, .v2-onboarding-step strong) { color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-brand-subtitle, .v2-context-kicker, .v2-empty-context, .v2-field > span, .v2-layer-section, .v2-template span, .v2-word-strip-label, .v2-onboarding-step p, .v2-shortcut, .sn-quick-compose p, .v2-save-indicator) { color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-header-btn, .v2-icon-btn, .v2-action, .v2-layer-action, .v2-sheet-close, .v2-template, .v2-all-words, .stage-tool-btn, .mini-btn, .grid-btn, .paper-option, .preset-chip, .word-layer-chip) { background: var(--st-surface); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-header-btn, .v2-icon-btn, .v2-action, .v2-layer-action, .v2-sheet-close, .v2-template, .v2-all-words, .stage-tool-btn, .mini-btn, .grid-btn, .paper-option, .preset-chip, .word-layer-chip):hover:not(:disabled) { background: var(--st-active); border-color: var(--st-accent); color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-tool, .v2-tab) { color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-tool.is-active, .v2-tool:hover, .v2-tab.is-active, .v2-tab:hover, .v2-action.is-active, .grid-btn.active, .paper-option.active, .word-layer-chip.active, .stage-tool-btn.active-pill) { background: var(--st-active); border-color: var(--st-accent); color: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-context-card, .word-layout-tools, .word-transform-controls, .active-elements-bar, .v2-switch-row, .v2-multi-tools, .v2-onboarding-step, .v2-layer-row) { background: var(--st-surface); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing .v2-layer-row.is-selected { background: var(--st-active); border-color: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-field input, .v2-field select, .v2-number, .v2-export-input, .v2-project-name, .controls-panel textarea, .controls-panel select) { background: var(--st-field); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing :is(.controls-panel textarea, .v2-project-name)::placeholder { color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing :is(.stage-top-bar, .v2-word-strip, .v2-layers-drawer, .v2-status-pill) { background: var(--st-panel); border-color: var(--st-line); color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing :is(.zoom-value-pill, .aspect-indicator-badge, .word-layer-number, .catalog-card .card-add-badge) { color: var(--st-accent); }
html[data-studio-theme="night"] body.studio-next.sn-editing :is(.zoom-value-pill, .aspect-indicator-badge, .word-layer-number, .ratio-tag) { color: var(--st-accent); background: var(--st-active); border-color: var(--st-line); }
html[data-studio-theme="night"] body.studio-next.sn-editing .word-layer-chip.active .word-layer-number { color: #1e251c; background: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing .catalog-card { background: var(--st-surface); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing .catalog-card:hover { background: var(--st-raised); border-color: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing .catalog-card span { color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing .v2-export-secondary { background: var(--st-surface); border-color: var(--st-accent); color: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing .language-switch { background: var(--st-surface); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing .language-switch button { color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing .language-switch button[aria-pressed="true"] { color: var(--st-accent); background: var(--st-active); }
html[data-studio-theme] body.studio-next.sn-editing :is(.v2-tool[data-action="delete"], .v2-action.danger, .mini-btn-danger) { color: var(--st-danger); }
html[data-studio-theme] body.studio-next.sn-editing .v2-save-indicator.is-saved { color: var(--st-success); }
html[data-studio-theme] body.studio-next.sn-editing .v2-save-indicator.is-saving { color: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing .v2-dialog { background: var(--st-surface); border-color: var(--st-line); color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing .v2-shortcut kbd { background: var(--st-field); color: var(--st-accent); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing .sn-quick-compose { border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing .v2-inspector-body { scrollbar-color: var(--st-line) transparent; }
html[data-studio-theme] body.studio-next.sn-editing .v2-inspector-body::-webkit-scrollbar-track { background: var(--st-panel); }
html[data-studio-theme] body.studio-next.sn-editing .v2-inspector-body::-webkit-scrollbar-thumb { background: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing *:focus-visible { outline-color: var(--st-focus) !important; }
html[data-studio-theme] body.studio-next.sn-editing #textInput { color: var(--st-text); background: var(--st-field); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing #textInput::placeholder { color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing :is(.sn-surface-panel h3, .sn-owned-materials h4, .sn-stroke-controls legend, .editor-header, #snPrintSummary) { color: var(--st-text); }
html[data-studio-theme] body.studio-next.sn-editing :is(.sn-surface-panel p, .sn-surface-note, #snMaterialTarget, .sn-stroke-controls output[data-stroke-value], .mark-help, .slider-header, .v2-context-title > span) { color: var(--st-muted); }
html[data-studio-theme] body.studio-next.sn-editing :is(.sn-surface-field input[type="number"], .sn-surface-field select, .sn-stroke-color input[type="color"]) { background: var(--st-field); color: var(--st-text); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing .sn-material-presets button { background: var(--st-surface); color: var(--st-text); border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing :is(.sn-material-presets [aria-pressed="true"], .sn-paper-drag[aria-pressed="true"], .grid-btn[aria-pressed="true"], .word-layout-toggle[aria-pressed="true"]) { background: var(--st-active); color: var(--st-accent); border-color: var(--st-accent); box-shadow: none; }
html[data-studio-theme] body.studio-next.sn-editing :is(.sn-surface-panel, .sn-stroke-controls, .section-title::after) { border-color: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing :is(input[type="range"], .sn-surface-check input, .v2-switch-row input, .v2-layer-check) { accent-color: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing input[type="range"] { background: var(--st-line); }
html[data-studio-theme] body.studio-next.sn-editing input[type="range"]::-webkit-slider-thumb { background: var(--st-accent); }
html[data-studio-theme] body.studio-next.sn-editing .v2-export-primary { color: #252b1e; background: #dfc382; border-color: #b49551; }
html[data-studio-theme] body.studio-next.sn-editing .v2-export-primary:hover { color: #252b1e; background: #edcf8d; border-color: #b49551; }
html[data-studio-theme] body.studio-next.sn-editing .stage-bar-divider { background: var(--st-line); }

@media (max-width: 760px) {
    .sn-top-actions { gap: 5px; }
    .sn-top-actions > .studio-theme-toggle,
    .v2-header-actions > .studio-theme-toggle { border-radius: 7px; }
    /* The explicit theme control remains touch-sized in the compact editor header. */
    .studio-next .v2-project-name { width: clamp(66px, 23vw, 105px); }
    html[data-studio-theme="night"] .sn-sidebar { background: var(--st-bg); }
}
@media (max-width: 420px) {
    .sn-topbar { padding-inline: 15px; }
    .sn-breadcrumb { display: none; }
    .sn-top-actions { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .sn-top-actions > .studio-theme-toggle,
    .v2-header-actions > .studio-theme-toggle { transition: none; }
}