/* The editor uses the whole window; the artwork library grows with it. */
.workspace{width:100%;max-width:none;margin:0}
.shape-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;align-content:start}
.shape-tile{aspect-ratio:auto;min-height:112px;padding:8px 5px;justify-content:flex-start}
.shape-tile img{width:64px;height:64px;flex-shrink:0}
.shape-tile span{position:static;transform:none;opacity:1;background:none;padding:0;white-space:normal;font-size:12px;line-height:1.3}
.browse-library{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 12px;margin-bottom:10px}
.browse-library span{font-size:12px}.browse-library b{font-size:13px}
.library-section>.section-heading{margin-bottom:10px}
.library-tabs{margin-bottom:10px}
.inspector-note{display:none}

@media(min-width:881px){
 html,body{height:100%;min-height:0}
 body{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
 .topbar{height:64px;padding:0 20px}
 .brand{font-size:21px}.brand-mark{height:39px;width:36px;font-size:21px}
 .brand small{margin-top:4px}
 .save-bar{padding:10px 20px;gap:8px 16px}
 .save-intro{justify-content:center;gap:4px}
 .save-selectors{gap:12px}
 .save-selectors select{padding:7px 10px;min-height:34px}
 .save-note{line-height:1.4}
 .workspace{height:100%;min-height:0;grid-template-columns:clamp(350px,31vw,760px) minmax(0,1fr) clamp(280px,20vw,360px)}
 .left-panel,.right-panel,.stage-panel{height:100%;min-height:0;max-height:none}
 .left-panel{overflow:hidden}
 .right-panel{overflow-y:auto}
 .library-section{display:flex;flex-direction:column;flex:1;min-height:0;padding:15px 16px 10px;overflow:hidden}
 .library-section>.section-heading,.library-tabs{flex-shrink:0}
 #shape-library{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:8px;flex:1;min-height:0}
 #shape-library>.browse-library{grid-column:1/-1;grid-row:1;padding:8px 10px}
 #shape-category{grid-column:1;grid-row:2;min-width:0;padding:7px 9px;min-height:35px}
 #shape-search{grid-column:2;grid-row:2;min-width:0;margin:0;padding:7px 9px;min-height:35px}
 #library-count{grid-column:1/-1;grid-row:3;margin:7px 0}
 #shape-library>input,#shape-library>select,#shape-library>button,#shape-library>p{flex-shrink:0}
 #text-library{min-height:0;overflow-y:auto}
 .shape-grid{grid-column:1/-1;grid-row:4;flex:1;min-height:0;max-height:none;margin-top:3px;overflow-y:auto}
 #shape-library>.hint{display:none}
 .layers-section{flex:0 0 29%;min-height:175px;padding:12px 16px;overflow:hidden}
 .layer-list{flex:1;min-height:0;max-height:none}
 .layer-actions{margin-top:6px;padding-top:6px}
 .stage-toolbar{min-height:50px;padding:8px 14px}
 .stage-surround{container-type:size;padding:12px 18px;justify-content:center;align-items:center;overflow:hidden}
 .artboard,.canvas-meta,.canvas-footer{width:min(100%,max(0px,calc(100cqh - 56px)));max-width:none}
 .artboard{flex-shrink:0;margin:0 auto}
 .canvas-meta{flex-shrink:0;margin:0 auto 10px}
 .canvas-footer{flex-shrink:0;margin:10px auto 0}
 .palette-bar{padding:12px 20px;min-height:65px}
 .palette-caption{display:none}
 .inspector-heading{padding:16px 18px}
 .inspector-heading h2{margin-top:6px}
 .inspector-section{padding:14px 18px}
 .app-footer{padding:7px 20px;min-height:30px}
}
@media(min-width:881px) and (max-height:850px){
 .layers-section{flex-basis:25%;min-height:145px}
 .shape-tile{min-height:98px;padding:6px 4px}
 .shape-tile img{width:52px;height:52px}
 .shape-tile span{font-size:12px}
}
@media(min-width:881px) and (max-height:650px){
 body{height:auto;min-height:100dvh;overflow:auto}
 .workspace{height:540px}
}
@media(min-width:881px) and (max-width:1199px){
 .workspace{grid-template-columns:320px minmax(0,1fr) 250px}
 .shape-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .stage-surround{padding:10px}
 .palette-bar{padding:12px;gap:8px}
 .save-intro{font-size:12px}
 .save-actions button{padding:9px;font-size:12px}
}
@media(min-width:561px) and (max-width:880px){
 .workspace{grid-template-columns:minmax(290px,40%) minmax(0,1fr);min-height:0}
 .left-panel{display:flex;flex-direction:column;max-height:none}
 .library-section{display:flex;flex-direction:column;flex:1;min-height:0;padding:18px 14px}
 #shape-library{display:flex;flex-direction:column;flex:1;min-height:0}
 .shape-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));flex:1;max-height:60dvh;min-height:300px}
 .layers-section{flex:0 0 auto;min-height:200px}
 .layer-list{max-height:320px}
 .stage-panel{min-height:0}
 .stage-surround{padding:18px 12px}
 .artboard,.canvas-meta,.canvas-footer{width:100%;max-width:none}
 .right-panel #inspector{grid-template-columns:1fr}
 .palette-bar{padding:14px 10px;flex-wrap:wrap;gap:8px}
 .canvas-footer{flex-wrap:wrap}
 .palette-caption{display:none}
}
@media(max-width:560px){
 .workspace{min-height:0}
 .left-panel{display:flex;flex-direction:column;max-height:none}
 .library-section{border-right:0;border-bottom:1px solid var(--border);padding:18px 14px}
 .layers-section{padding:16px 14px}
 .shape-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:55dvh;min-height:240px}
 .shape-tile{min-height:106px}
 .shape-tile img{width:60px;height:60px}
 .stage-panel{min-height:0}
 .stage-surround{padding:16px 14px}
 .artboard,.canvas-meta,.canvas-footer{width:100%;max-width:none}
 .layer-thumb{display:flex}
 .save-bar{padding:12px 14px;gap:9px}
 .save-intro{font-size:13px}
 .save-note{font-size:12px}
 .save-actions{gap:6px}
 .save-actions button{font-size:12px}
}