/* Editing surface for the independent product. Renderer and mobile mechanics stay intact. */
body.studio-next.sn-editing {
    --v2-header: 64px;
    --v2-line: #deded1;
    --v2-focus: #8c6d30;
    --v2-gold: #b28b42;
    --v2-gold-strong: #e0ca91;
    --text-main: #30372e;
    --text-muted: #666c60;
    --panel-border: #d9dccf;
    --gold: #9b793b;
    --gold-light: #6b572d;
    --gold-dark: #8c6d30;
    --sn-edit-panel: #f7f7ef;
    --sn-edit-field: #fffef8;
    height: 100dvh;
    max-height: 100dvh;
    color: #30372e;
    background: #e3e5dd;
    font-family: var(--sn-ui);
}

body.studio-next.sn-editing > header {
    padding-inline: 18px;
    background: #f5f5ec;
    border-bottom: 1px solid #d8dccd;
    box-shadow: none;
}
body.studio-next.sn-editing .v2-brand { gap: 11px; }
body.studio-next.sn-editing .v2-mark {
    color: #e2ca8c;
    background: #263126;
    border: 1px solid #263126;
    width: 38px;
    height: 38px;
}
body.studio-next.sn-editing .v2-brand-title { color: #303a2a; font-size: 15px; letter-spacing: .075em; }
body.studio-next.sn-editing .v2-brand-subtitle { color: #656f5c; font-size: 8px; }
body.studio-next.sn-editing .v2-project-name {
    height: 40px;
    color: #343d2d;
    border: 1px solid #e0e3d6;
    background: #eeefe4;
    border-radius: 6px;
    font-size: 12px;
}
body.studio-next.sn-editing .v2-project-name:hover,
body.studio-next.sn-editing .v2-project-name:focus { border-color: #aaae98; background: #fffef8; }
body.studio-next.sn-editing .v2-save-indicator { color: #5d6c51; font-size: 10px; }
body.studio-next.sn-editing .v2-save-indicator.is-saving { color: #846025; }
body.studio-next.sn-editing .v2-save-indicator.is-saved { color: #496141; }

body.studio-next.sn-editing :is(.v2-header-btn, .v2-icon-btn) {
    min-height: 44px;
    min-width: 40px;
    color: #4c5943;
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
    font-size: 11px;
}
body.studio-next.sn-editing :is(.v2-header-btn, .v2-icon-btn):hover:not(:disabled) {
    color: #283d21;
    border-color: #d2d8c6;
    background: #e9eddc;
}
body.studio-next.sn-editing .sn-editor-back { width: 44px; min-width: 44px; }
body.studio-next.sn-editing .language-switch { border-color: #d9ddcf; background: #eceedf; border-radius: 6px; }
body.studio-next.sn-editing .language-switch button { min-height: 36px; color: #647056; font-size: 10px; }
body.studio-next.sn-editing .language-switch button[aria-pressed="true"] { color: #283323; background: #fbfbf2; box-shadow: none; }

body.studio-next.sn-editing .workspace {
    height: calc(100dvh - var(--v2-header));
    max-height: calc(100dvh - var(--v2-header));
    background: #e3e5dd;
}
body.studio-next.sn-editing .v2-tool-rail { background: #202a22; border-color: #354034; gap: 5px; }
body.studio-next.sn-editing .v2-tool { color: #bfc9b5; border-radius: 7px; font-size: 9px; }
body.studio-next.sn-editing .v2-tool:hover { color: #f5efd9; background: #ffffff0b; border-color: transparent; }
body.studio-next.sn-editing .v2-tool.is-active { color: #ecd8a4; background: #d9c39215; border-color: #c3b27c35; }
body.studio-next.sn-editing .v2-tool[data-action="delete"] { color: #d3aaa0; }
body.studio-next.sn-editing .v2-tool[data-action="delete"]:hover { color: #f5c4b8; background: #a65b4b20; border-color: transparent; }

body.studio-next.sn-editing .stage-area {
    padding: 0;
    background: #e1e4db;
    scrollbar-color: #b5beaa #dbe0d3;
}
/* Center around the artwork itself, irrespective of its unscaled layout height.
 * The existing engine continues to set transform:scale on .frame-wrapper. */
body.studio-next.sn-editing .stage-viewport-box {
    position: absolute;
    left: 50%;
    top: calc(50% + 26px);
    margin: 0;
    padding: 0;
    translate: -50% -50%;
}
body.studio-next.sn-editing.word-layout-active .stage-viewport-box { top: calc(50% + 48px); padding: 0; }
body.studio-next.sn-editing .frame-wrapper { box-shadow: 0 14px 35px #29351d22; }

body.studio-next.sn-editing :is(.stage-top-bar, .v2-word-strip) {
    background: #f7f8eff5;
    border-color: #cfd6c3;
    border-radius: 7px;
    box-shadow: 0 3px 9px #33402508;
    backdrop-filter: blur(10px);
}
body.studio-next.sn-editing .stage-tool-btn {
    min-height: 32px;
    color: #586549;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 11px;
}
body.studio-next.sn-editing .stage-tool-btn:hover { color: #283e21; background: #e8eddf; border-color: #d4dbc8; }
body.studio-next.sn-editing .stage-tool-btn.active-pill { color: #354928; background: #e5ead8; border-color: #ced7bc; }
body.studio-next.sn-editing .stage-bar-divider { background: #d4daca; }
body.studio-next.sn-editing :is(.zoom-value-pill, .aspect-indicator-badge) { color: #5a684a; background: #e9eddf; border-color: #d6ddc9; font-size: 10px; }
body.studio-next.sn-editing .v2-word-strip-label { color: #667359; font-size: 9px; }
body.studio-next.sn-editing :is(.v2-all-words, .word-layer-chip) { color: #556549; border-color: #d6dccb; background: #f9faf1; box-shadow: none; }
body.studio-next.sn-editing .word-layer-chip.active { color: #354925; background: #e5ead8; border-color: #bfcba7; }
body.studio-next.sn-editing .word-layer-number { color: #6b755c; background: #e6ebdd; }
body.studio-next.sn-editing .word-layer-chip.active .word-layer-number { color: #f6f4e8; background: #526545; }
body.studio-next.sn-editing .v2-status-pill { color: #626e57; background: #f4f6eced; border-color: #d8dfcb; font-size: 10px; }

body.studio-next.sn-editing .controls-panel { color: #30372e; background: var(--sn-edit-panel); border-color: #d3dac6; }
body.studio-next.sn-editing .v2-inspector-tabs { background: #eeefe3; border-bottom-color: #d8dfcb; }
body.studio-next.sn-editing .v2-tab { color: #5f6d52; min-height: 50px; font-size: 11px; }
body.studio-next.sn-editing .v2-tab:hover { color: #314625; background: #e6ebd9; }
body.studio-next.sn-editing .v2-tab.is-active { color: #2c4021; background: #f7f7ef; border-bottom-color: #ad8e4a; font-weight: 650; }
body.studio-next.sn-editing .v2-sheet-close { color: #5f6c51; border-color: #d8dfcb; background: transparent; }
body.studio-next.sn-editing .v2-inspector-body { scrollbar-color: #bec7af transparent; }
body.studio-next.sn-editing .v2-inspector-body::-webkit-scrollbar-track { background: #f1f3e8; }
body.studio-next.sn-editing .v2-inspector-body::-webkit-scrollbar-thumb { background: #c0c9b2; }
body.studio-next.sn-editing .v2-pane { padding-inline: 16px; }
body.studio-next.sn-editing .v2-context-card {
    padding: 10px 0 20px;
    margin-bottom: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dfe3d5;
    border-radius: 0;
    box-shadow: none;
}
body.studio-next.sn-editing :is(.v2-context-kicker, .v2-group-label) { color: #69755b; font-size: 10px; letter-spacing: .06em; }
body.studio-next.sn-editing .v2-context-title strong { color: #35452c; font-size: 19px; }
body.studio-next.sn-editing .v2-context-title > span { color: #667358; font-size: 10px; }
body.studio-next.sn-editing .v2-context-preview { color: #2e3826; background: #e8eadc; border: 1px solid #dce0cd; min-height: 82px; border-radius: 6px; }
body.studio-next.sn-editing .v2-empty-context { color: #657155; }
body.studio-next.sn-editing .v2-field-grid { gap: 10px; }
body.studio-next.sn-editing .v2-field > span { color: #657156; font-size: 11px; }
body.studio-next.sn-editing :is(.v2-field input:not([type="range"]), .v2-field select, .v2-number, .v2-export-input) {
    min-height: 40px;
    border-color: #d8decb;
    border-radius: 5px;
    color: #34472a;
    background: var(--sn-edit-field);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}
body.studio-next.sn-editing .v2-group-label { margin-top: 17px; padding-top: 13px; border-color: #e0e5d4; }
body.studio-next.sn-editing :is(.v2-action, .mini-btn, .grid-btn, .preset-chip, .v2-template) {
    color: #546548;
    background: #f5f7ec;
    border-color: #d9e0cc;
    border-radius: 5px;
    box-shadow: none;
}
body.studio-next.sn-editing :is(.v2-action, .word-layout-toggle, .grid-btn) { min-height: 44px; }
body.studio-next.sn-editing :is(.v2-action, .mini-btn, .grid-btn, .preset-chip, .v2-template):hover:not(:disabled) { color: #334d25; background: #e9eedc; border-color: #c2cfad; }
body.studio-next.sn-editing :is(.v2-action.is-active, .grid-btn.active, .grid-btn[aria-pressed="true"], .word-layout-toggle[aria-pressed="true"]) { color: #344b25; background: #e1e8d0; border-color: #b8c898; box-shadow: none; }
body.studio-next.sn-editing :is(.v2-action.danger, .mini-btn-danger) { color: #98594b; border-color: #e0ccbf; }
body.studio-next.sn-editing .v2-switch-row { color: #5d6e4f; background: #eef2e3; border-color: #dce3cd; font-size: 11px; }
body.studio-next.sn-editing :is(.v2-switch-row input, .v2-field input[type="range"], .v2-layer-check) { accent-color: #6f8253; }
body.studio-next.sn-editing .tool-section > .section-title { color: #596b48; font-size: 10px; letter-spacing: .07em; }
body.studio-next.sn-editing .section-title::after { background: #dfe5d2; }
body.studio-next.sn-editing :is(.mark-help, .slider-header) { color: #657156; font-size: 11px; line-height: 1.65; }
body.studio-next.sn-editing :is(.word-layout-tools, .word-transform-controls, .element-editor-box) { background: #edf1e3; border-color: #dce3ce; box-shadow: none; }
body.studio-next.sn-editing .editor-header { color: #5b7047; border-color: #d6dfc6; }
body.studio-next.sn-editing #textInput { color: #33472b; background: var(--sn-edit-field); border-color: #d2ddc1; font-size: 24px; }
body.studio-next.sn-editing #textInput::placeholder { color: #687457; }
body.studio-next.sn-editing .ratio-tag { color: #6a714a; background: #e4e9d2; }
body.studio-next.sn-editing input[type="range"] { background: #d6dfc7; }
body.studio-next.sn-editing input[type="range"]::-webkit-slider-thumb { background: #718457; box-shadow: none; }
body.studio-next.sn-editing .paper-option { color: #5f6e50; background: #f4f6e9; border-color: #d6dfc8; }
body.studio-next.sn-editing .paper-option.active { color: #3f552c; border-color: #9dab82; box-shadow: 0 0 0 1px #9dab8230; }
body.studio-next.sn-editing .paper-label { font-size: 11px; }
body.studio-next.sn-editing .catalog-card { color: #56664a; background: #eef2e2; border-color: #d8e1c7; }
body.studio-next.sn-editing .catalog-card:hover { background: #e5ecd7; border-color: #b8c99c; }
body.studio-next.sn-editing .catalog-card span { color: #56664a; }
body.studio-next.sn-editing .mark-type.active .mark-icon { color: #b04432; filter: none; }
body.studio-next.sn-editing .v2-template strong { color: #4a5e37; font-size: 12px; }
body.studio-next.sn-editing .v2-template span { color: #647352; font-size: 10px; }

body.studio-next.sn-editing .v2-export-dock { padding: 12px 14px; background: #edf0e1; border-color: #d2dcc0; box-shadow: none; }
body.studio-next.sn-editing :is(.v2-export-primary, .v2-export-secondary) { min-height: 46px; border-radius: 6px; font-size: 12px; }
body.studio-next.sn-editing .v2-export-primary { color: #303923; background: #d8bd7f; border-color: #c4a96e; box-shadow: none; }
body.studio-next.sn-editing .v2-export-primary:hover { background: #ceb16e; border-color: #ae9051; }
body.studio-next.sn-editing .v2-export-secondary { color: #455b34; background: #f6f8ec; border-color: #bdcba8; }
body.studio-next.sn-editing .v2-export-secondary:hover { background: #e3ebd3; border-color: #9fb482; }
body.studio-next.sn-editing .v2-more-export .v2-action { min-height: 38px; font-size: 11px; }

body.studio-next.sn-editing .v2-layers-drawer { background: #f5f7ecf7; border-color: #c6d1b5; box-shadow: 0 12px 38px #293a2330; }
body.studio-next.sn-editing .v2-drawer-head strong { color: #475d36; }
body.studio-next.sn-editing .v2-layer-section { color: #5f704f; font-size: 10px; }
body.studio-next.sn-editing .v2-layer-row { color: #566b44; background: #eef2e2; }
body.studio-next.sn-editing .v2-layer-row.is-selected { border-color: #adbf8e; background: #e1e9d0; }
body.studio-next.sn-editing .v2-layer-action { color: #61754d; border-color: #d5dfc5; background: transparent; }
body.studio-next.sn-editing .v2-multi-tools { background: #eef2e2; }

body.studio-next.sn-editing .v2-dialog { color: #3f5032; background: #f5f7ec; border-color: #c6d1b5; box-shadow: 0 24px 70px #15200e40; }
body.studio-next.sn-editing .v2-dialog::backdrop { background: #15200f80; backdrop-filter: blur(6px); }
body.studio-next.sn-editing .v2-dialog-head h2 { color: #475d36; }
body.studio-next.sn-editing .v2-onboarding-step { border-color: #d6e0c5; background: #edf2e0; }
body.studio-next.sn-editing .v2-onboarding-step strong { color: #3c532c; }
body.studio-next.sn-editing :is(.v2-onboarding-step p, .v2-shortcut) { color: #62754e; }
body.studio-next.sn-editing .v2-shortcut kbd { color: #5d7048; background: #e9efdb; border-color: #cedbb9; }
body.studio-next.sn-editing .v2-onboarding-step b { color: #384b29; background: #dac48b; }

@media (max-width: 1120px) {
    body.studio-next.sn-editing > header { padding-inline: 10px; }
    body.studio-next.sn-editing .v2-brand { gap: 7px; }
    body.studio-next.sn-editing .v2-app-header { gap: 7px; }
}
@media (max-width: 760px) {
    body.studio-next.sn-editing { --v2-header: 60px; }
    body.studio-next.sn-editing > header { padding-inline: 7px; }
    body.studio-next.sn-editing .v2-tool-rail { background: #202a22f7; border-color: #536147; }
    body.studio-next.sn-editing .v2-tool { font-size: 9px; }
    body.studio-next.sn-editing .v2-header-actions { gap: 2px; }
    body.studio-next.sn-editing :is(.v2-header-btn, .v2-icon-btn) { min-width: 36px; }
    body.studio-next.sn-editing .sn-editor-back { width: 40px; min-width: 40px; }
    body.studio-next.sn-editing .v2-mark { width: 30px; height: 30px; font-size: 21px; }
    body.studio-next.sn-editing .v2-brand { gap: 4px; }
    body.studio-next.sn-editing .controls-panel { border-color: #c7d4b5; box-shadow: 0 -14px 40px #2c3b252b; }
    body.studio-next.sn-editing .v2-pane { padding-inline: 14px; }
    body.studio-next.sn-editing .v2-export-dock { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    body.studio-next.sn-editing .stage-top-bar { min-height: 40px; }
    body.studio-next.sn-editing .stage-tool-btn { min-height: 32px; }
    body.studio-next.sn-editing .stage-viewport-box { padding: 0; }
    body.studio-next.sn-editing.word-layout-active .stage-viewport-box { padding: 0; }
}