/* Shared editor geometry and surfaces. Artwork and preview effects are independent. */
:root{--editor-control-radius:4px;--editor-sidebar-padding:5px;--editor-panel-radius:8px;--editor-control-height:36px;--editor-control-gap:8px;--editor-field:#f3f3f3;--editor-selected:#e6e9ed;--editor-selected-border:#8c96a4;--editor-divider:#e9eaed;--editor-disabled-opacity:.45}
:root[data-theme=dark]{--editor-field:#2b2d30;--editor-selected:#3b4048;--editor-selected-border:#a6b2c5;--editor-divider:#333539}
:root[data-theme] body :is(.library,.inspector-shell,.preview-panel,.workspace>.stage-toolbar,.playback,.shots,dialog){border-radius:var(--editor-panel-radius)}
:root[data-theme] body :is(.project-bar button,.library-footer button,.tabs button,.template-filters,.template-filters button,#template-search,#direction-buttons,#direction-buttons button,.section-toggle,.upload-box,.reset,.media-row,.shots-heading button,.shot-add,.template-card,.template-card canvas,.shot,.shot canvas,.card-editor-header button,#visual-presets button,.format-custom input,#easing-values input,.slider-number,.playback #play,.playback #time,.stage-toolbar button,dialog button){border-radius:var(--editor-control-radius)}
:root[data-theme] body :is(#template-search,.format-custom input,#easing-values input,.slider-number,.upload-box,.media-row,#direction-buttons,.header-actions button:not(#export),.playback #play){background-color:var(--editor-field)}
:root[data-theme] body .project-bar .header-actions{gap:var(--editor-control-gap)}
:root[data-theme] body .project-bar .header-actions>button{min-height:var(--editor-control-height)}
:root[data-theme] body .inspector-shell .dialkit-root{font-family:inherit;--dial-radius:var(--editor-control-radius);--dial-row-height:var(--editor-control-height);--dial-row-gap:var(--editor-control-gap);--dial-surface:var(--editor-field)}
:root[data-theme] body .inspector-shell .dialkit-control-host{margin:var(--editor-control-gap) 0}
:root[data-theme] body .inspector-shell :is(.dialkit-slider-label,.dialkit-labeled-control-label,.dialkit-select-trigger,.dialkit-segmented-button){font-family:inherit;font-size:12px;font-weight:500;line-height:16px}
:root[data-theme] body .inspector-shell :is(.dialkit-labeled-control,.dialkit-select-trigger){min-height:var(--editor-control-height)}
:root[data-theme] body .inspector-shell :is(.dialkit-select-option,.dialkit-segmented-pill,.dialkit-segmented-button,.dialkit-color-css-input){border-radius:var(--editor-control-radius)}
:root[data-theme] body :is(.shot.selected,.media-row[aria-pressed=true],#visual-presets button.active){background-color:var(--editor-selected);border-color:var(--editor-selected-border)}
:root[data-theme] body .template-card.active{background-color:var(--editor-selected);box-shadow:inset 0 0 0 1px var(--editor-selected-border)}
:root[data-theme] body :is(.library-footer,.library .tabs,.project-bar,.inspector section.inspector-group,.format-controls,.card-editor-header,.music-track){border-color:var(--editor-divider)}
:root[data-theme] body button:disabled,:root[data-theme] body .dialkit-disabled{opacity:var(--editor-disabled-opacity)}

/* Match the canvas backing to the rendered thumbnail to avoid pale antialiased corners. */
:root[data-theme] body .template-card canvas{background:#191919;border:0}

/* Draw selection above the thumbnail rather than beneath the canvas. */
:root[data-theme] body .template-card{position:relative}
:root[data-theme] body .template-card.active{box-shadow:none}
:root[data-theme] body .template-card.active::after{content:'';position:absolute;inset:0;border:1px solid var(--editor-selected-border);border-radius:inherit;pointer-events:none;z-index:1}

/* The footer tabs use a straight separator, not a rounded container edge. */
:root[data-theme] body .library .tabs{border-radius:0;box-shadow:none;border:0;border-top:1px solid var(--editor-divider)}

/* Selected cards share the search field's two-pixel accent ring. */
:root[data-theme] body .template-card.active::after{border:2px solid var(--ui-focus)}
:root[data-theme] body .shot.selected{border-color:transparent}
:root[data-theme] body .shot.selected::after{content:'';position:absolute;inset:-1px;border:2px solid var(--ui-focus);border-radius:inherit;pointer-events:none;z-index:1}

/* Open menus keep a four-pixel gutter between option hit areas. */
:root[data-theme] body .dialkit-select-dropdown{padding:4px;border-radius:var(--editor-control-radius)}
:root[data-theme] body .dialkit-select-dropdown .dialkit-select-option{margin:0;border-radius:var(--editor-control-radius);font-family:inherit;font-size:12px;line-height:16px;min-height:var(--editor-control-height)}
:root[data-theme] body .dialkit-select-dropdown .dialkit-select-option+.dialkit-select-option{margin-top:4px}

/* Blue thumbnail palette derived from the app's #a5c8ff accent; darks stay neutral. */
.thumbnail-filters{position:absolute;pointer-events:none}
:root[data-theme] body .template-card canvas{filter:url(#thumbnail-blue-tint)}

/* Keep inspector scrolling without a visible scrollbar in either theme. */
:root[data-theme] body :is(.inspector,.card-editor){scrollbar-width:none}
:root[data-theme] body :is(.inspector,.card-editor)::-webkit-scrollbar{display:none}

/* The inspector starts directly with its controls. */
:root[data-theme] body .inspector>h2{display:none}

/* Match the standalone Direction heading to accordion header spacing. */
:root[data-theme] body .inspector>.direction-control{padding-top:0}

/* Effects follow the same spacing as other expanded control groups. */
:root[data-theme] body #visual-presets{gap:var(--editor-control-gap);margin:var(--editor-control-gap) 0;grid-template-columns:repeat(3,minmax(0,1fr))}
:root[data-theme] body #visual-presets button{min-height:var(--editor-control-height);margin:0;padding:8px;line-height:16px}

/* Image removal is a full-size control, matching neighboring sliders. */
:root[data-theme] body :is(#overlay-front-remove,#overlay-back-remove,#background-remove){width:100%;min-height:var(--editor-control-height);padding:8px 12px;margin:var(--editor-control-gap) 0 0;border-radius:var(--editor-control-radius);background:var(--editor-field);font-size:12px;line-height:16px;text-align:center}
/* Contextual template inspector; universal controls stay mounted for persistence. */
.inspector-back{display:block;margin:0 0 16px;padding:8px 0;text-align:left;font-size:12px}
.inspector-context-note{font-size:11px;line-height:1.5;opacity:.65;margin:0 0 12px}
#template-settings>.template-detail{display:none}
#template-settings>.direction-control{margin-bottom:12px}
#template-settings #reset-template{margin-top:18px;margin-bottom:12px}

#universal-settings[hidden],#template-settings[hidden]{display:none!important}
:root[data-theme] body .inspector[data-inspector-mode]>h2{display:flex;font-size:15px;font-weight:600;margin:18px 0 10px}
:root[data-theme] body .inspector[data-inspector-mode]>h2>span{display:none}
.inspector .inspector-context-note{color:var(--muted,#747a84);opacity:1}

:root[data-theme] body .template-card.active:not(.inspected)::after{border:1px solid var(--editor-selected-border)}
:root[data-theme=light] body .inspector #visual-presets button{color:#606773}
:root[data-theme=dark] body .inspector .inspector-context-note{color:#b5bdc9}

/* Toasts sit over the preview margin, clear of the asset strip they usually describe. */
#toast{bottom:auto;top:76px;display:flex;align-items:center;gap:12px;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
#toast.visible{visibility:visible;transition:opacity .2s}
#toast.actionable.visible{pointer-events:auto}
:root[data-theme] body #toast button{flex:none;margin:-4px -10px -4px 0;padding:5px 10px;border:0;border-radius:var(--editor-control-radius);background:color-mix(in srgb,currentColor 16%,transparent);color:inherit;font-size:12px;font-weight:600;white-space:nowrap}
:root[data-theme] body #toast button:hover{background:color-mix(in srgb,currentColor 26%,transparent)}

/* Dark swatches keep a visible edge on dark panels. */
:root[data-theme] body .swatch{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-text) 22%,transparent)}

/* The Fill row already supplies the gap; do not add wrapper padding and
   another control margin around the solid-color row. */
:root[data-theme] body .inspector-shell #swatches{padding:0}
:root[data-theme] body .inspector-shell #swatches .dialkit-control-host{margin:0}

/* Keep the hex value readable beside its label. */
:root[data-theme] body .inspector-shell .dialkit-color-value{min-width:8ch}

/* The format divider only separates it from layout controls that are actually shown. */
.section-body>.format-controls:not(:has(~ .dialkit-control-host:not([hidden]),~ #showcase-controls:not([hidden]),~ button:not([hidden]))){margin-bottom:0;padding-bottom:0;border-bottom:0}

/* Template name with its reset: one row above the template settings. */
.template-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 10px}
.template-title-row[hidden]{display:none}
:root[data-theme] body .template-title-row>h2{display:block;margin:0;font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme] body .template-title-row>#reset-template{flex:none;margin:0;padding:4px 0;font-size:12px}

/* Settings scroll between the mode switch and the fixed project actions below. */
.inspector-shell{display:flex;flex-direction:column}
.inspector-shell>.inspector{height:auto;flex:1 1 0;min-height:0}
.inspector-shell>.card-editor{top:var(--inspector-top,0px);bottom:var(--inspector-bottom,0px);border-top-left-radius:0;border-top-right-radius:0}
.inspector-top{flex:none;padding:var(--editor-sidebar-padding) var(--editor-sidebar-padding) 0}
.inspector-bottom{flex:none;padding:10px var(--editor-sidebar-padding) var(--editor-sidebar-padding);border-top:1px solid var(--editor-divider);background:var(--panel,#fff)}
:root[data-theme] body .inspector-bottom .project-bar{margin:0;padding:0;border:0}
:root[data-theme] body .inspector-bottom .project-bar .header-actions{margin-top:0}
:root[data-theme] body .inspector-top .inspector-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:static;margin:0}
:root[data-theme] body .inspector-top .inspector-modes button:disabled{opacity:var(--editor-disabled-opacity);cursor:default}
:root[data-theme] body .inspector-shell>.inspector{padding:12px var(--editor-sidebar-padding)}
:root[data-theme] body .inspector-shell>.card-editor{padding-inline:var(--editor-sidebar-padding)}
:root[data-theme] body main:not(.library-collapsed)>.library{padding-inline:var(--editor-sidebar-padding)}
/* Keep the inspector shell and its scrolling areas free of outer borders. */
:root[data-theme] body .inspector-shell{border:0}
:root[data-theme] body .inspector-shell>:is(.inspector,.card-editor){border:0;border-radius:0}
/* Open and Save share the top row; Export spans the full row below at every height. */
:root[data-theme] body .inspector-bottom .project-bar .header-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-theme] body .inspector-bottom .project-bar .header-actions>#export{grid-column:1/-1}
/* The older rule hiding spans inside Export must not hide its label. */
:root[data-theme] body .inspector-bottom .project-bar :is(#save,#export) .label-tail{display:inline}
/* Shape moved into Card style; its old container stays out of the layout when empty. */
.format-controls:empty{display:none}

:root[data-theme] body .template-title-row>h2>span{display:none}

/* Card editing follows geometry, whole-card transforms, then image framing. */
.card-settings-group{padding:4px 0 12px}
.card-settings-group+.card-settings-group{border-top:1px solid var(--editor-divider);padding-top:16px}
.card-settings-group>h3{font-size:12px;font-weight:500;line-height:18px;margin:0 0 10px;color:inherit}
.layout-direction .direction-control{margin:0 0 12px}

/* Where the recovery draft stands, under the project actions. */
#save-status{display:block;margin:8px 3px 0;min-height:14px;font-size:10px;line-height:1.5;color:var(--ui-secondary);overflow-wrap:anywhere}
#save-status[data-state=error]{color:#a34c37}
:root[data-theme=dark] #save-status[data-state=error]{color:#edb39f}

/* Template categories form a single scrollable row. */
.template-library-header>.template-filters{flex-wrap:nowrap;justify-content:flex-start;gap:2px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;user-select:none;touch-action:pan-x;cursor:grab}
.template-library-header>.template-filters::-webkit-scrollbar{display:none}
.template-library-header>.template-filters>button{flex:0 0 auto;white-space:nowrap}
.template-library-header>.template-filters.dragging,.template-library-header>.template-filters.dragging>button{cursor:grabbing}