/* Layout is shared and fixed. A skin changes visual tokens, never workspace geometry. */
:root { --ui-control-height:38px; --ui-toolbar-height:58px; --ui-gap:8px; --ui-panel-radius:8px; }
html[data-ui-skin=dark] { color-scheme:dark; }
html[data-ui-skin=light] { color-scheme:light; }
.ui-skin-dialog { box-sizing:border-box; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:16px; border:1px solid var(--skin-border,#e1e5e9); border-radius:var(--skin-radius,8px); background:var(--skin-surface,#fff); color:var(--skin-text,#26323d); font:13px/1.5 var(--skin-font,var(--cc-font-alt,system-ui)); box-shadow:0 16px 48px #0003; }
.ui-skin-dialog::backdrop { background:var(--skin-overlay,#10182899); }
.ui-skin-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; }
.ui-skin-header h2 { margin:0; font:600 16px/1.5 var(--skin-font,var(--cc-font-alt,system-ui)); color:inherit; }
.ui-skin-dialog p { color:var(--skin-muted,#647180); }
.ui-skin-dialog :is(button,select) { box-sizing:border-box; min-height:32px; border:1px solid var(--skin-border,#e1e5e9); border-radius:var(--skin-radius,6px); background:var(--skin-surface-raised,#fff); color:var(--skin-text,#26323d); padding:5px 10px; font:inherit; cursor:pointer; }
.ui-skin-dialog button:hover { background:var(--skin-surface-muted,#f6f7f8); border-color:var(--skin-border-strong,#b9c2cb); }
.ui-skin-header button { width:32px; padding:0; font-size:20px; }
.ui-skin-dialog :focus-visible { outline:2px solid var(--skin-accent,#d93600); outline-offset:2px; }
.ui-skin-label { display:block; margin:16px 0 4px; font-weight:600; }
.ui-skin-dialog select { width:100%; }
.ui-skin-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ui-skin-status { margin-bottom:0; min-height:20px; }

/* Creative documents and code text keep their own representation. */
html[data-ui-skin] iframe { color-scheme:light; }
html[data-ui-skin] .template-card__email { color-scheme:light; font-family:Montserrat,Arial,sans-serif; }
html[data-ui-skin] .CodeMirror { background:var(--skin-surface); color:var(--skin-text); }
html[data-ui-skin] .CodeMirror-gutters { background:var(--skin-surface-muted); border-color:var(--skin-border); }
html[data-ui-skin] .CodeMirror-linenumber { color:var(--skin-muted); }
html[data-ui-skin] .CodeMirror-cursor { border-left-color:var(--skin-text); }
html[data-ui-skin] .CodeMirror-selected { background:var(--skin-accent-soft); }
html[data-ui-skin] .cm-s-default :is(.cm-tag,.cm-keyword,.cm-attribute) { color:var(--skin-accent); }
html[data-ui-skin] .cm-s-default :is(.cm-string,.cm-string-2) { color:var(--skin-success); }
html[data-ui-skin] .cm-s-default .cm-comment { color:var(--skin-muted); }