/* Canonical v217: compact header, draft editors and viewport-aware support panels. */
#viewEditor .app-header { min-height:52px; }
#viewEditor .app-header .editor-brand-icon { width:34px; height:34px; min-width:34px; object-fit:contain; }
#viewEditor.guided-studio[data-guided-header-layout="wrapped"] .app-header { min-height:88px; }
#viewEditor.guided-studio[data-guided-header-layout="stacked"] .app-header { min-height:122px; }
#viewEditor .app-header .header-edit-panel {
 position:fixed; z-index:80; width:min(424px,calc(100vw - 24px)); max-height:calc(100vh - 24px);
 overflow:auto; display:grid; gap:12px; padding:18px; box-sizing:border-box;
 border:1px solid var(--border); border-radius:10px; background:var(--bg-panel); box-shadow:var(--shadow-lg);
 font:14px/1.45 "Permutrix UI Inter",system-ui,sans-serif; color:var(--text-main);
}
#viewEditor .app-header #headerCanvasEdit { width:min(388px,calc(100vw - 24px)); }
#viewEditor .app-header #inpProjectName { max-width:none; }
#viewEditor .app-header .header-edit-panel[hidden] { display:none; }
#viewEditor .app-header .header-edit-panel label { display:grid; gap:6px; }
#viewEditor .app-header .header-edit-panel .header-inline-input { width:100%; max-width:none; min-width:0; height:36px; box-sizing:border-box; font:inherit; }
.header-size-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.header-edit-actions { display:flex; justify-content:flex-end; gap:12px; }
.header-edit-actions .btn { min-width:84px; min-height:36px; }
.header-edit-error { margin:0; color:var(--bad,#ed8896); font-size:12px; }
.header-edit-error:empty { display:none; }

#viewEditor.guided-studio .guided-layer-drawer-summary { position:relative; top:3px; width:44px; flex:0 0 44px; order:3; }
#viewEditor.guided-studio .guided-layer-drawer-toggle {
 width:44px; min-width:44px; height:36px; flex:0 0 44px; flex-direction:row; gap:3px; padding:6px;
 background:#8b5cf6; color:white; border:0; border-radius:0 7px 7px 0;
}
#viewEditor.guided-studio .guided-layer-drawer-toggle:hover { background:#9b75f8; }
#viewEditor.guided-studio .guided-layer-drawer-toggle:focus-visible { outline:2px solid #c4a7ff; outline-offset:2px; }
#viewEditor.guided-studio .guided-layer-drawer-toggle svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
#viewEditor.guided-studio .guided-layer-flag-icon { width:18px; height:20px; }
#viewEditor.guided-studio .guided-layer-drawer-chevron { width:9px; height:16px; color:inherit; }
#viewEditor.guided-studio .guided-asset-drawer { margin-left:8px; width:min(280px,calc(100vw - var(--guided-layer-drawer-width) - 66px)); }
#viewEditor.guided-studio .guided-asset-drawer.is-expanded { width:calc(100vw - var(--guided-layer-drawer-width) - 68px); }
#viewEditor.guided-studio .col-center, #viewEditor.guided-studio .col-work { margin-right:0; min-width:0; }
#viewEditor.guided-studio :is(.guided-asset-workspace,.guided-color-workspace,.guided-transform-workspace,.guided-pattern-workspace) { margin-right:0; min-width:0; }
@container (min-width:400px) { .guided-asset-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

#viewEditor .has-shortcut-toggle > h2 { margin-right:auto; }
#viewEditor .shortcut-drawer.is-docked { position:static; transform:none; flex:0 0 auto; align-self:center; }
#viewEditor .shortcut-drawer.is-docked .shortcut-drawer-handle {
 width:36px; height:36px; border:1px solid var(--border); border-radius:7px; box-shadow:none;
 background:transparent; color:var(--text-muted);
}
#viewEditor .shortcut-drawer.is-docked .shortcut-drawer-handle:hover,
#viewEditor .shortcut-drawer.is-docked.is-open .shortcut-drawer-handle { background:color-mix(in srgb,var(--primary) 12%,var(--bg-panel)); color:var(--text-main); }
#viewEditor .shortcut-drawer.is-docked .shortcut-drawer-handle svg { width:20px; height:20px; }

#viewEditor .shortcut-drawer-panel {
 position:fixed; z-index:46; box-sizing:border-box; width:min(516px,calc(100vw - 32px)); max-height:calc(100vh - 32px);
 display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:12px;
 background:var(--bg-panel); font:16px/1.4 "Permutrix UI Inter",system-ui,sans-serif;
}
#viewEditor .shortcut-drawer-panel[hidden] { display:none; }
#viewEditor .shortcut-drawer-head { flex:0 0 auto; padding:18px 20px 12px; background:transparent; }
#viewEditor .shortcut-drawer-head h2 { font:600 22px/1.3 "Permutrix UI Inter",system-ui,sans-serif; }
#viewEditor .shortcut-list { padding:8px 20px 18px; overflow:auto; min-height:0; }
#viewEditor .shortcut-list > div { grid-template-columns:minmax(190px,auto) minmax(0,1fr); min-height:38px; gap:16px; border:0; }
#viewEditor .shortcut-list dt, #viewEditor .shortcut-list dd { font:400 16px/1.4 "Permutrix UI Inter",system-ui,sans-serif; }
#viewEditor .shortcut-list kbd { font:400 14px/1.4 "Permutrix UI Inter",system-ui,sans-serif; background:var(--card); color:var(--text-main); }
#viewEditor .shortcut-drawer.is-open .shortcut-drawer-handle { border-radius:9px 0 0 9px; }
@media(max-width:480px) { #viewEditor .shortcut-list > div { grid-template-columns:minmax(0,1fr); gap:4px; padding-block:6px; } }

.feedback-dialog-back {
 position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center;
 padding:16px; background:rgb(0 0 0 / .5); --primary:#8b5cf6;
 font:14px/1.5 "Permutrix UI Inter",system-ui,sans-serif; color:var(--text-main);
}
.feedback-dialog-card { width:min(520px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; box-sizing:border-box; padding:26px; gap:18px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow-lg); }
.feedback-dialog-card h2 { margin:0; font-size:22px; font-weight:600; flex:0 0 auto; }
.feedback-dialog-content { overflow:auto; min-height:0; }
.feedback-dialog-content p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.feedback-dialog-content input { margin-top:12px; width:100%; box-sizing:border-box; font:inherit; }
.feedback-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; flex:0 0 auto; }
.feedback-dialog-actions .btn { min-width:80px; min-height:40px; font:inherit; }
.feedback-dialog-actions .primary { background:var(--ui-action); border-color:var(--ui-action); color:white; }
.feedback-dialog-actions .btn.primary:hover { background:var(--ui-action-hover); border-color:var(--ui-action-hover); color:white; }
.feedback-dialog-actions .danger { background:#b63c50; border-color:#b63c50; color:white; }
.feedback-dialog-actions .btn.danger:hover { background:#9f2a3c; border-color:#9f2a3c; color:white; }
.feedback-dialog-back :focus-visible { outline:2px solid #b995ff; outline-offset:2px; }

.guided-transform-workspace-list { grid-template-columns:minmax(0,1fr); gap:12px; container-type:inline-size; }
.guided-transform-card, .guided-transform-global { overflow:visible; }
.guided-transform-card *, .guided-transform-global * { box-sizing:border-box; }
.guided-transform-card-header, .guided-transform-global-head { align-items:flex-start; padding:10px 12px; gap:8px; }
.guided-transform-card-heading strong, .guided-transform-card-heading span,
.guided-transform-global-head strong, .guided-transform-global-head span { white-space:normal; overflow:visible; overflow-wrap:anywhere; font-family:"Permutrix UI Inter",system-ui,sans-serif; }
.guided-transform-card-heading strong, .guided-transform-global-head strong { font-size:13px; font-weight:600; }
.guided-transform-card-heading span, .guided-transform-global-head span { font-size:11px; }
.guided-transform-layer-body { grid-template-columns:minmax(72px,104px) minmax(0,1fr); padding:10px 12px 12px; gap:12px; }
.guided-transform-layer-preview { aspect-ratio:1; min-height:0; align-self:center; }
.guided-transform-layer-preview img { aspect-ratio:1; }
.guided-transform-layer-controls .guided-transform-range { grid-template-columns:48px minmax(24px,1fr) minmax(54px,88px) 28px; gap:6px; }
.guided-transform-global-controls { padding:10px 12px 12px; gap:8px 14px; }
.guided-transform-global-controls .guided-transform-range { grid-template-columns:1fr minmax(54px,76px) 28px; gap:5px; }
.guided-transform-global-controls .guided-transform-range > span:first-child { grid-column:1 / -1; }
.guided-transform-range { font:12px/1.35 "Permutrix UI Inter",system-ui,sans-serif; }
.guided-transform-range > span:first-child { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.guided-transform-number-wrap { min-width:0; overflow:visible; }
.guided-transform-number-wrap input { height:32px; min-height:32px; font:13px/1.3 "Permutrix UI Inter",system-ui,sans-serif; }
.guided-transform-range .guided-transform-range-reset { width:28px; height:32px; }
@container(max-width:380px) {
 .guided-transform-layer-body { grid-template-columns:minmax(0,1fr); }
 .guided-transform-layer-preview { width:104px; justify-self:center; }
}
@container(max-width:270px) { .guided-transform-global-controls { grid-template-columns:minmax(0,1fr); } }