:root {
  --studio-ink: #30282c;
  --studio-muted: #655b60;
  --studio-edge: #e2dada;
  --studio-paper: #faf7f5;
  --studio-berry: #872649;
  --studio-soft: #f6ecf0;
  --green: var(--studio-berry);
}
html {scroll-behavior:auto}
body.planner-app {background:var(--studio-paper); color:var(--studio-ink); line-height:1.45}
.ui-sprite {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-icon {width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.sr-only {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app-header {position:relative;display:flex;flex-wrap:nowrap;gap:10px;align-items:center;padding:13px max(5vw,calc((100% - 1336px)/2));background:#fff;border-bottom:1px solid var(--studio-edge);backdrop-filter:none}
.app-header .studio-brand {display:inline-flex;gap:10px;align-items:center;margin-right:auto;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:-.055em;color:var(--studio-ink);line-height:1}
.app-header .studio-brand img {width:35px;height:35px}
.app-header button, .start-extra button, .start-extra a, .back-start {display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--studio-ink);border:0;background:transparent;border-radius:9px;font-weight:700;font-size:14px;text-decoration:none;padding:8px 12px}
#v3-help {width:44px;padding:0}
.app-header button:hover,.start-extra :is(a,button):hover,.back-start:hover {background:var(--studio-soft);color:var(--studio-berry)}
#v3-start {width:min(1220px,90%);margin:clamp(24px,5vw,82px) auto;display:grid;grid-template-columns:minmax(0,.89fr) minmax(0,1.11fr);align-items:center;gap:clamp(28px,6vw,92px)}
.start-copy {padding:12px 0}
.start-copy h1 {margin:0;letter-spacing:-.055em;font-size:clamp(52px,5.3vw,84px);line-height:.99;color:var(--studio-ink);font-weight:500;font-family:Georgia,'Times New Roman',serif}
.start-copy h1 em {font-weight:400;color:var(--studio-berry)}
.start-copy>p {max-width:34ch;margin:24px 0 29px;color:var(--studio-muted);font-size:clamp(16px,1.35vw,19px);line-height:1.5}
.start-actions {display:grid;gap:9px;max-width:360px}
.start-actions button {display:flex;gap:12px;align-items:center;padding:15px 17px;border-radius:12px;border:1px solid var(--studio-edge);background:white;color:var(--studio-ink);font-size:16px;font-weight:700;line-height:1.4;text-align:left;min-height:53px}
.start-actions button .ui-icon:last-child {margin-left:auto;width:16px}
.start-actions button.hero-primary {background:var(--studio-berry);color:white;border-color:var(--studio-berry)}
.start-actions button.hero-primary:hover {background:#6f1e3b}
.start-actions button.hero-secondary:hover {border-color:var(--studio-berry)}
.start-extra {display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.start-extra :is(a,button) {padding:4px 2px;font-size:13px;min-height:44px;color:var(--studio-muted)}
.start-extra .ui-icon {width:17px}
.start-extra button .ui-icon:last-child {display:none}
.start-visual {position:relative;align-self:stretch;min-height:385px;margin:0;overflow:hidden;border-radius:clamp(18px,2.6vw,38px);background:#e4d7ce}
.start-visual img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.start-visual button {position:absolute;bottom:20px;left:20px;display:flex;align-items:center;gap:10px;padding:10px 15px;background:#fffcfa;color:var(--studio-ink);border:1px solid #ffffffc0;border-radius:24px;font-size:14px;font-weight:700;box-shadow:0 2px 12px #261b2417}
.start-visual button:hover {background:#fff;color:var(--studio-berry)}
.start-visual button .ui-icon:last-child {width:16px}
#start-status {grid-column:1/-1;color:var(--studio-berry)}
body[data-stage="1"] :is(.app-intro,.stage-guide) {display:none}
#main:focus {outline:none}
.app-intro,.stage-guide,.planner-section>.wrap {max-width:1336px;width:90%;margin-inline:auto}
.app-intro {padding:0;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-block:14px 8px}
.back-start {padding-left:0;font-size:13px;color:var(--studio-muted)}
.project-name {order:0;flex:0 1 auto;display:flex;gap:5px;color:var(--studio-muted)}
.project-name .ui-icon {width:16px}
.project-name input {width:clamp(120px,22vw,245px);max-width:100%;border:0;border-radius:5px;color:var(--studio-ink);font-size:15px;text-align:right;min-height:44px;background:transparent}
.project-name input:focus {background:#fff}
.stage-guide {display:flex;justify-content:space-between;align-items:center;margin-block:0 14px;gap:10px}
.journey {display:flex;gap:3px;margin:0;padding:3px;border:1px solid var(--studio-edge);border-radius:14px;background:#fff;overflow:visible}
.journey button {display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-height:42px;padding:7px 17px;border:0;border-radius:10px;color:var(--studio-muted);background:transparent;font-size:14px;line-height:1.2}
.journey button[aria-current=step] {background:var(--studio-soft);color:var(--studio-berry)}
.journey .ui-icon {width:17px;height:17px}
button.primary,#v3-next {background:var(--studio-berry)!important;color:#fff!important;border-color:var(--studio-berry)!important}
#v3-next {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;font-size:14px;line-height:1.2;padding:12px 16px;border-radius:11px;font-weight:700}
#v3-next::after {content:'→';font-size:17px}
.planner-section {padding:0 0 26px!important}
.studio {margin:0;background:white;border:1px solid var(--studio-edge);border-radius:20px;box-shadow:0 8px 35px #3a223307;overflow:visible}
.studio-top {border:0;border-bottom:1px solid var(--studio-edge);border-radius:20px 20px 0 0;background:white;padding:7px 14px}
.view-switch {position:relative;z-index:4}
.view-switch summary {display:flex;align-items:center;min-height:42px;gap:10px;font-size:14px;font-weight:700;cursor:pointer;list-style:none;padding:4px 8px}
.view-switch summary::after,.tool-group>summary::after,.studio-controls>details:nth-child(n+3)>summary::after {content:'';margin-left:auto;width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s}
details[open].view-switch summary::after,details[open].tool-group>summary::after {transform:rotate(225deg)}
.view-switch summary::-webkit-details-marker,.tool-group>summary::-webkit-details-marker {display:none}
.view-switch .mode-tabs {display:grid;gap:3px;position:absolute;top:100%;left:0;width:max-content;min-width:170px;padding:6px;background:#fff;border:1px solid var(--studio-edge);border-radius:12px;box-shadow:0 8px 26px #30212819}
.view-switch .mode-tabs button {display:flex;align-items:center;gap:9px;justify-content:flex-start;border:0;background:transparent;color:var(--studio-ink)}
.view-switch .mode-tabs button.active {background:var(--studio-soft);color:var(--studio-berry)}
.history-controls {display:flex;gap:4px}
.history-controls button {padding:0;width:44px;border:0;background:transparent;color:var(--studio-ink)}
.history-controls button:hover:enabled {background:var(--studio-soft)}
.draft-save {padding:4px 20px;background:#fff;border:0;font-size:11px;color:var(--studio-muted)}
.draft-save a {display:none}
.draft-save[data-state="error"] {padding:9px 16px;background:#fff0de;color:#743e10}
.studio-grid {grid-template-columns:minmax(265px,325px) minmax(0,1fr)}
.studio-controls {padding:15px;background:#fff;border-right:1px solid var(--studio-edge);max-height:none;overflow:visible;border-radius:0 0 0 20px}
.studio-controls :is(input,select),.v3-dialog :is(input,select) {border:1px solid #cfc4c9;border-radius:9px}
.studio-controls details, .studio-controls details details {margin:0;padding:0;border:0;border-radius:0;background:transparent}
.studio-controls>details+details, .studio-controls .tool-group, .studio-workspace>.tool-group {border-top:1px solid var(--studio-edge)}
.studio-controls>details>summary,.tool-group>summary {display:flex;align-items:center;gap:7px;padding:10px 0;min-height:44px;font-size:14px;font-weight:700;list-style:none;cursor:pointer}
.studio-controls>details:nth-child(-n+2)>summary {font-size:19px;color:var(--studio-ink);padding-top:0}
.studio-controls .field-pair {gap:8px}
.studio-controls .field-pair label {min-width:0}
.studio-controls :is(button,label) {color:var(--studio-ink)}
.studio-controls #v3-confirm-size {width:100%;border-radius:9px}
#v3-quality {padding:0;font-size:12px;line-height:1.45;color:var(--studio-muted);background:transparent}
.studio-controls #pg-launch {width:100%;margin-bottom:8px}
.studio-controls .pick-panel {width:100%;min-height:72px;display:flex;align-items:center;gap:12px;text-align:left;padding:8px;border:1px solid #d6c6cb;border-radius:12px;background:#fcf9fa}
.pick-panel img {width:55px;height:55px;border-radius:7px;object-fit:cover}
.pick-panel span {display:grid;gap:3px}
.pick-panel small {color:var(--studio-muted);font-size:12px}
.pick-panel strong {font-size:15px}
.pick-panel .ui-icon {margin-left:auto;width:16px}
.studio-controls :is(#add-panel,#fill-wall) {display:flex;align-items:center;justify-content:center;gap:6px;margin:3px 0 12px;background:#fff!important;color:var(--studio-ink)!important;border-color:var(--studio-edge);font-size:13px;padding:9px 5px}
.studio-controls #add-panel {background:var(--studio-berry)!important;color:white!important;border-color:var(--studio-berry)}
.studio-controls #fill-wall {color:var(--studio-ink)!important;background:white!important}
.studio-controls .ui-icon {width:18px}
.studio-workspace {position:static;background:#fcfaf9;padding:clamp(12px,2.1vw,30px);border-radius:0 0 20px 0}
.canvas-label span {font-size:12px;max-width:none}
.studio-canvas-wrap {display:grid;place-items:center;min-height:0;background:#f2eeea;border:1px solid var(--studio-edge);border-radius:12px}
#design-canvas {display:block;width:min(100%,88vh);height:auto;aspect-ratio:3 / 2;max-height:none;min-height:0;touch-action:none}
.view-tools {padding-top:7px}
.view-tools button,#tone-launch {border:1px solid var(--studio-edge);border-radius:8px;background:white;color:var(--studio-ink)}
.view-tools input[type=range],.tone-slider input {touch-action:pan-y}
body[data-has-photo="false"] .view-tools>:not(#v3-clean),body:not([data-view="photo"]) .view-tools>:not(#v3-clean),body[data-stage="4"] #tone-launch,body[data-stage="2"] .view-tools {display:none}
.studio-status {min-height:0;background:transparent;color:var(--studio-muted);padding:4px 0;margin:6px 0;font-size:13px}
.studio-status:empty,.studio-warnings:empty {display:none}
.studio-workspace>details {padding:10px 0;margin:10px 0 0;border:0;border-top:1px solid var(--studio-edge);border-radius:0}
.studio-workspace>details summary {min-height:44px;cursor:pointer;line-height:44px}
body[data-stage="4"] .studio-grid {display:block}
body[data-stage="4"] .studio-workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:10px 20px}
body[data-stage="4"] .studio-workspace>* {grid-column:1/-1}
body[data-stage="4"] .studio-workspace #plan-review {grid-column:1;grid-row:1;margin:0}
body[data-stage="4"] .studio-workspace .export-toolbar {grid-column:2;grid-row:1;align-self:start}
body[data-stage="4"] .studio-workspace .canvas-label {margin:4px 0 0}
#plan-review {background:white;border:1px solid var(--studio-edge);border-radius:12px}
.review-totals {grid-template-columns:1fr 1fr}
.export-toolbar {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.export-toolbar>:is(button,label) {display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;color:var(--studio-ink);border:1px solid var(--studio-edge)}
.export-toolbar #export-image {color:white;background:var(--studio-berry);border-color:var(--studio-berry)}
.export-toolbar>.tool-group {grid-column:1/-1;border-top:1px solid var(--studio-edge)}
.export-toolbar>.tool-group>summary {font-size:13px}
.export-toolbar .tool-group :is(button,label) {display:inline-flex;min-height:44px;margin:2px;font-size:13px}
.bom {margin:8px 0;border-color:var(--studio-edge);background:white}
.app-footer {padding:16px 12px 58px;border-top:1px solid var(--studio-edge);color:var(--studio-muted);background:transparent}
.app-footer a {color:var(--studio-muted)}
.v3-dialog {border-radius:18px;border-color:var(--studio-edge)}
#panel-library {max-width:640px}
#panel-library h2 {font-size:26px;letter-spacing:-.033em}
#panel-library label {font-size:13px;font-weight:700}
.shape-shortcuts {display:flex;flex-wrap:wrap;gap:6px}
.shape-shortcuts button {display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:7px 12px;background:#fff;font-size:13px}
.shape-shortcuts button[aria-pressed=true] {color:var(--studio-berry);border-color:var(--studio-berry);background:var(--studio-soft)}
.shape-shortcuts i {display:inline-block;width:11px;height:17px;background:currentColor}
.shape-rect {border-radius:2px}.shape-arch {border-radius:8px 8px 1px 1px}.shape-point {clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%)}
#panel-library details {margin-block:10px}
#panel-library details summary {min-height:42px;padding:10px 0;font-size:14px;cursor:pointer}
#panel-library .product-picker {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#panel-library .product-picker button {display:flex;align-items:flex-start;margin:0;padding:6px;gap:4px;overflow:hidden;background:white;line-height:1.25;text-align:left}
#panel-library .product-picker button[aria-pressed=true] {background:var(--studio-soft);border:1px solid var(--studio-berry);box-shadow:inset 0 0 0 1px var(--studio-berry)}
#panel-library .product-picker :is(b,span) {font-size:12px}
#panel-library .product-picker img {width:100%;height:auto;aspect-ratio:1.3;object-fit:cover}
#panel-library .v3-material {grid-template-columns:44px 1fr;gap:6px}
#panel-library .v3-material img {width:44px;height:44px}
.room-heading .eyebrow {display:none}
.room-heading h3 {margin:0}
.room-controls>details:not([open]) summary {min-height:44px}
@media(max-width:900px) {
  .app-intro,.stage-guide,.planner-section>.wrap {width:95%}
  .start-extra {gap:6px}
}
@media(max-width:720px) {
  .app-header {padding:8px 12px;gap:4px}
  .app-header .studio-brand {font-size:18px;gap:5px}
  .app-header .studio-brand img {width:29px;height:29px}
  .app-header #v3-projects {font-size:12px;padding:8px;gap:5px}
  #v3-start {width:calc(100% - 36px);grid-template-columns:minmax(0,1fr);gap:17px;margin:24px auto}
  .start-copy {padding:0}
  .start-copy h1 {font-size:clamp(43px,9vw,62px)}
  .start-copy h1 br {display:none}
  .start-copy h1 em::before {content:' '}
  .start-copy>p {margin:12px 0 16px;font-size:16px}
  .start-actions {max-width:none}
  .start-extra {margin-top:5px;gap:16px}
  .start-visual {min-height:0;aspect-ratio:1.9}
  .start-visual button {bottom:12px;left:12px;font-size:13px}
  .project-name {flex:0 1 auto;font-size:14px}
  .project-name input {width:135px}
  .app-intro {margin:4px auto;gap:2px}
  .back-start {padding:8px 4px;font-size:12px;gap:4px}
  .stage-guide {gap:4px;margin-block:0 8px}
  .journey {gap:1px}
  .journey button {font-size:12px;padding:7px 8px;gap:4px}
  .journey .ui-icon {width:15px;height:15px}
  #v3-next {font-size:12px;padding:8px;gap:4px;min-height:46px}
  .studio-top {padding:3px 8px;flex-wrap:nowrap}
  .draft-save {padding:3px 12px;line-height:1.4}
  .studio {border-radius:14px}
  .studio-grid {display:flex;flex-direction:column}
  .studio-workspace,.studio-controls {width:100%;border-radius:0;max-height:none}
  .studio-workspace {order:0;padding:8px 10px}
  .studio-controls {order:1;max-height:none;overflow:visible;padding:10px 14px;border:0;border-top:1px solid var(--studio-edge)}
  body[data-stage="2"] .studio-controls {order:-1}
  .canvas-label {margin:0 0 6px}
  .canvas-label span {font-size:10px}
  #design-canvas {width:min(100%,53vh);height:auto;min-height:0}
  .view-tools label {width:auto;flex:1;min-width:130px}
  body[data-stage="4"] .studio-workspace {display:flex;flex-direction:column;gap:7px}
  body[data-stage="4"] .studio-workspace .export-toolbar {order:-2;align-self:stretch}
  #panel-library .product-picker {grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-controls {max-height:none}
  .app-footer {margin-top:0;padding-bottom:65px}
}
@media(max-width:405px) {
  .journey button {padding:7px 6px}
  .journey button:not([aria-current="step"]) .ui-icon {display:none}
  .app-header .studio-brand {font-size:17px}
}
@media print {
  #v3-start,.app-intro,.stage-guide,.view-switch,.tool-group,.start-extra {display:none!important}
  body[data-stage="4"] .studio-workspace {display:block}
}
.stage-guide .journey button {min-width:0}
#v3-next {flex:0 0 auto}
@media(max-width:405px) {
  .app-header #v3-projects {white-space:nowrap}
  .stage-guide {display:grid;grid-template-columns:minmax(0,1fr) auto}
  .journey {justify-content:space-evenly}
  .stage-guide .journey button {padding-inline:4px}
}
.empty-pick {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;border-radius:24px;padding:10px 18px;font:700 14px Lato,Arial,sans-serif;color:var(--studio-berry);background:#fffcfa;border:1px solid #cfb8c2;box-shadow:0 4px 14px #3021280c}
.bom>.tool-group>summary {font-size:16px}
.bom>.tool-group>label {display:block;max-width:130px}
#v3-quality:empty {display:none}
#v3-confirm-size:disabled {background:#eee8eb!important;color:#59454e!important;border-color:#e2d6dc!important;opacity:1}
.export-toolbar .tool-group a {display:block;color:var(--studio-berry);font-size:13px;min-height:44px;padding:10px 3px}
@media(max-width:375px) {
  .app-header #v3-projects {width:44px}
  #v3-projects span {position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
  #v3-help {flex:0 0 44px}
  .stage-guide {grid-template-columns:minmax(0,1fr)}
  .stage-guide .journey {width:100%}
  .stage-guide #v3-next {justify-self:end;min-height:44px}
  .start-extra {gap:3px 12px}
}

/* Keep the selected material and its actions within reach while browsing the catalogue. */
#panel-library[open] {
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  width:min(680px,calc(100vw - 28px));height:min(760px,90dvh);
  max-width:680px;max-height:94dvh;padding:0;overflow:hidden;
  border:1px solid var(--studio-edge);background:white;color:var(--studio-ink)
}
#panel-library .picker-head {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 14px 24px;border-bottom:1px solid var(--studio-edge);background:white
}
#panel-library .picker-head h2 {margin:0;font-size:clamp(20px,3vw,26px);padding:0}
#panel-library .dialog-close {
  position:static;margin:0;min-height:44px;flex:0 0 44px;width:44px;padding:0;
  border:1px solid var(--studio-edge);border-radius:50%;background:var(--studio-paper)
}
#picker-browser {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 24px 18px;scrollbar-gutter:stable}
#picker-browser .product-picker {margin:8px 0}
#picker-browser .product-picker button {position:relative;color:var(--studio-ink);border-color:var(--studio-edge);border-radius:12px}
#picker-browser .product-picker button[aria-pressed=true]::after {
  content:'✓';position:absolute;top:9px;right:9px;display:grid;place-items:center;
  width:21px;height:21px;border:2px solid white;border-radius:50%;background:var(--studio-berry);color:white;font:700 12px/1 Lato,Arial,sans-serif
}
#picker-browser .shape-shortcuts {margin-bottom:4px}
#picker-browser .product-picker-count {margin:2px 0;color:var(--studio-muted)}
#panel-library .picker-foot {
  border-top:1px solid var(--studio-edge);background:#fcf9f8;
  padding:12px 24px 16px;display:grid;gap:10px
}
.picker-spec {display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px}
.picker-spec>img {width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--studio-edge)}
#picker-name {display:block;line-height:1.25;font-size:15px}
#picker-size-slot>label {display:grid;grid-template-columns:auto minmax(0,1fr);width:100%;text-align:left;margin:4px 0 0;align-items:center;gap:10px;font-size:12px;color:var(--studio-muted)}
#picker-size-slot select {display:block;margin:0;min-width:0;width:100%;font-size:15px;min-height:44px;padding:6px 10px;color:var(--studio-ink);font-weight:700;background:#fff}
.picker-message:empty {display:none}
#panel-library .picker-message {margin:0;color:#823918;font-size:13px;line-height:1.35}
#panel-library .picker-actions {display:grid;grid-template-columns:1.22fr 1fr;gap:8px}
#panel-library .picker-actions button,.canvas-buttons button {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;margin:0;
  border:1px solid var(--studio-edge);border-radius:10px;background:white;color:var(--studio-ink);
  padding:8px 12px;font-size:14px;font-weight:700;line-height:1.2
}
#panel-library .picker-actions button:disabled {cursor:default}
.canvas-actions {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin:9px 0 6px;padding:6px 8px;background:white;border:1px solid var(--studio-edge);border-radius:12px}
.canvas-item,.canvas-buttons {display:flex;align-items:center;gap:7px}
.canvas-item {min-width:0}
.canvas-item img {width:38px;height:38px;object-fit:cover;border-radius:7px}
.canvas-item strong,.canvas-item span {display:block;font-size:13px}
.canvas-item span {color:var(--studio-muted);font-size:12px}
.canvas-item span:empty {display:none}
.canvas-buttons {gap:4px;flex-wrap:wrap}
.canvas-buttons button {font-size:13px;padding:7px 10px}
.canvas-buttons .ui-icon {width:17px;height:17px}
.canvas-buttons #canvas-repeat {background:var(--studio-soft);border-color:#e5ccd6;color:var(--studio-berry)}
.canvas-buttons #canvas-delete {width:44px;min-width:44px}
.canvas-buttons button:hover {border-color:var(--studio-berry)}
.canvas-buttons #canvas-rotate {color:var(--studio-berry);border-color:#d8b6c4}
.canvas-buttons [hidden] {display:none}
@media(max-width:720px) {
  .canvas-actions:has(#canvas-rotate:not([hidden])) {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) 44px;gap:6px;padding:8px}
  .canvas-actions:has(#canvas-rotate:not([hidden])) .canvas-item {grid-column:1 / -1;grid-row:1;padding-right:91px}
  .canvas-actions:has(#canvas-rotate:not([hidden])) .canvas-buttons {display:contents}
  .canvas-actions:has(#canvas-rotate:not([hidden])) #canvas-pick {grid-column:1 / -1;grid-row:1;justify-self:end}
  #canvas-rotate {grid-column:1;grid-row:2}
  .canvas-actions:has(#canvas-rotate:not([hidden])) #canvas-repeat {grid-column:2;grid-row:2}
  .canvas-actions:has(#canvas-rotate:not([hidden])) #canvas-delete {grid-column:3;grid-row:2}
}
@media(max-width:720px) {
  #panel-library[open] {width:100%;max-width:none;margin:auto 0 0;border-radius:18px 18px 0 0;height:min(740px,92dvh);max-height:100dvh}
  #panel-library .picker-head {padding:8px 12px 8px 16px}
  #picker-browser {padding:0 14px 12px;scrollbar-gutter:auto}
  #panel-library .product-picker {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #panel-library .product-picker img {aspect-ratio:1.2}
  #panel-library .product-picker b {font-size:12px}
  #panel-library .picker-foot {padding:8px 12px max(10px,env(safe-area-inset-bottom));gap:6px}
  .picker-spec {grid-template-columns:44px minmax(0,1fr);gap:8px}
  .picker-spec>img {width:44px;height:44px}
  #picker-size-slot>label {grid-template-columns:0 minmax(0,1fr);font-size:0;gap:0;margin-top:2px}
  #picker-size-slot select {font-size:16px}
  #panel-library .picker-actions button {font-size:13px;padding:8px}
  .canvas-actions {padding:6px;gap:4px}
  .canvas-buttons {margin-left:auto}
  .canvas-buttons button {padding:6px 8px;font-size:12px}
  .canvas-buttons #canvas-delete {width:44px;min-width:44px}
}
@media(max-width:360px) {
  #panel-library .product-picker {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:500px) {
  #panel-library[open] {height:100dvh;max-height:100dvh}
  #panel-library .picker-head {padding-block:2px}
  #panel-library .picker-foot {padding-block:5px;gap:4px}
}
.picker-picked {display:flex;align-items:center;justify-content:space-between;gap:8px}
#panel-library #picker-use {margin:0;min-height:44px;flex:none;padding:4px 6px;border:0;background:transparent;color:var(--studio-berry);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}