/* Studio polish. All painting behavior and local saves are unchanged. */
:root { --bg:#f2f0fa; --panel-2:#f7f6fc; --line:#e2dfef; --shadow:0 3px 8px #201a430a,0 18px 42px #201a4312; }
body { background:radial-gradient(ellipse at 0 0,#fff0f4 0,transparent 46%),radial-gradient(ellipse at 100% 100%,#e4f5f4 0,transparent 45%),var(--bg); }
.top { border-bottom:1px solid var(--line); margin-bottom:14px; background:color-mix(in srgb,var(--panel) 88%,transparent); padding:14px 20px; }
.brand { font-size:26px; }
.top-actions .btn { border-radius:12px; box-shadow:0 2px 3px #201a4305; }
.top-actions #btnPages { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.studio { gap:20px; padding:0 20px 20px; grid-template-columns:minmax(0,1fr) 348px; }
.stage { border-radius:22px; background:radial-gradient(ellipse at 50% 20%,var(--panel) 0,var(--panel-2) 72%); }
.stagebar { padding:12px 14px 4px 22px; min-height:64px; }
.docname { flex-wrap:wrap; row-gap:3px; }
.docname span { font-size:20px; }
.docname small { font-size:12px; }
.viewport { padding:24px; }
#paper { box-shadow:0 4px 9px #1915350b,0 18px 40px #19153519; }
.panel { border-radius:22px; padding:22px; gap:18px; box-shadow:0 5px 20px #201a4305; }
.mode-row { border-bottom:1px solid var(--line); padding-bottom:16px; }
.tool { border-radius:15px; padding-block:14px 12px; }
.sw { border-radius:13px; }
.sw[aria-pressed="true"]::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:21px; font-weight:700; text-shadow:0 1px 4px #000; }
.panel .hint { line-height:1.55; }
.sheet { border-radius:24px; width:min(1040px,100%); }
.sheet header { padding:20px 24px; }
.sheet h2 { font-size:25px; margin-bottom:4px; }
.cards { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:18px; }
.card { border:1px solid var(--line); background:var(--panel); padding:12px; border-radius:16px; box-shadow:0 3px 12px #201a4306; transition:transform .15s,border-color .15s; }
.card:hover { transform:translateY(-2px); }
.card .page-open b { display:block; font-family:var(--font-display); font-size:16px; margin:12px 0 5px; }
.card img { object-fit:contain; border-radius:9px; }
.card.locked img { opacity:1; }
.card .pill { font-size:10px; top:19px; right:19px; background:#272344; color:white; }
.card .fav { position:absolute; bottom:12px; right:10px; width:32px; height:32px; border-radius:50%; font-size:24px; color:var(--muted); background:var(--panel); }
.card small { padding-right:25px; font-size:11px; }
.card .fav.on { color:#bd3566; }
.filterbar { flex-wrap:wrap; padding:16px 24px 0; }
.filterbar input { flex-basis:240px; }
.catbar { padding-inline:24px; }
.catchip { border-radius:999px; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --bg:#11131c; --panel-2:#222637; --line:#2d3246; } }
:root[data-theme="dark"] { --bg:#11131c; --panel-2:#222637; --line:#2d3246; }
:root[data-theme="dark"] body { background:var(--bg); }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) body { background:var(--bg); } }
@media(max-width:900px) { .studio { grid-template-columns:minmax(0,1fr) 320px; } .panel { padding:16px; } }
@media(max-width:760px) { .studio { display:flex; flex-direction:column; padding:0 12px 16px; gap:14px; } .top { padding:10px 12px; margin-bottom:12px; } .stage { border-radius:18px; flex:none; } .stagebar { min-height:52px; padding:8px 10px 0 14px; } .docname span { font-size:17px; } .viewport { padding:18px; } .panel { border-radius:18px; padding:18px; } .sheet header { padding:16px; } .sheet h2 { font-size:21px; } .filterbar { padding:12px 14px 0; } .filterbar input { flex-basis:100%; } .filterbar select { flex:1; min-width:0; } .catbar { padding-inline:14px; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .card { padding:8px; } .card .page-open b { font-size:14px; } .card .pill { top:12px; right:12px; } }
@media(prefers-reduced-motion:reduce) { .card { transition:none; } }
.card img,.card canvas { height:auto; }
.card .fav { top:auto; }
.card .fav { left:auto; }

.help h3 { margin:18px 0 6px; font:600 17px/1.3 var(--font-display, inherit); }
.help h3:first-child { margin-top:0; }
.help p, .help li { line-height:1.55; }
.help ol, .help ul { margin:6px 0 0; padding-left:22px; display:grid; gap:4px; }

.material-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.material-grid .material-swatch { width:100%;height:46px;border-radius:12px;color:#171323;font-size:11px;font-weight:700;text-shadow:0 1px 3px #fff,0 0 5px #fff; }
.material-grid .material-swatch[aria-pressed="true"] { outline:3px solid var(--accent);outline-offset:2px; }
.embroidery-actions { margin:14px 0;flex-wrap:wrap; }
.embroidery-actions .btn { flex:1;min-width:110px;font-size:12px; }
.hair-presets { margin:14px 0; } .hair-presets summary { cursor:pointer;font-weight:700;padding:8px 0; }
.hair-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.hair-grid .hair-swatch { width:100%;height:42px;border-radius:10px;font-size:10px;color:white;text-shadow:0 1px 3px black,0 0 3px black; }
.hair-grid .hair-swatch[aria-pressed="true"] { outline:3px solid var(--accent);outline-offset:2px; }

.quick-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;} .quick-grid .btn{font-size:12px;} #cbnEdit{width:100%;min-height:40px;border:0;background:transparent;}

.palette-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px;}
.palette-tabs button{min-height:38px;padding:6px 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--fg);font:600 12px var(--font-body);}
.palette-tabs button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
#paletteTitle{font-size:11px;text-transform:none;color:var(--muted);max-width:58%;text-align:right;}
#shiny[hidden],#swatches[hidden]{display:none!important;}
.cbn-pal{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.cbn-chip{aspect-ratio:auto;min-height:66px;border-radius:12px;font-size:19px;padding:9px 3px;gap:4px;}
.number-color-label{font-size:10px;line-height:1.15;font-weight:600;}

#swatches.hair-palette{grid-template-columns:repeat(3,minmax(0,1fr));} #swatches.hair-palette .sw{aspect-ratio:auto;min-height:42px;font-size:10px;color:white;text-shadow:0 1px 3px black,0 0 3px black;}

.embroidery-studio {margin-top:16px}.embroidery-patterns {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.embroidery-patterns button {padding:5px 3px;border:1px solid #dacfc4;border-radius:9px;background:#fcf8f3;color:#514437;cursor:pointer;font:inherit;font-size:11px}.embroidery-patterns button[aria-pressed="true"] {border:2px solid #9a7842;background:#f4eadb}.embroidery-patterns canvas {display:block;width:100%;height:auto;border-radius:5px;margin-bottom:4px}.embroidery-actions .btn {min-width:90px}.embroidery-studio .hint {font-size:11px}

.jewelry-studio{margin:18px 0}.jewelry-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}.jewelry-options label{display:grid;gap:4px;font-size:12px}.jewelry-options select{min-width:0;width:100%;padding:6px;border:1px solid #dacfc4;border-radius:6px}

.swatches.pic-palette{grid-template-columns:repeat(3,1fr)}
.sw.pic-sw{font-size:11px;font-weight:700;line-height:1.1;min-height:46px;padding:3px;overflow:hidden;text-align:center;display:flex;align-items:center;justify-content:center;text-shadow:none}
/* Glitter groups stay above the named material swatches on small screens. */
.glitter-filters { grid-column:1/-1; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:4px 0 6px; }
.glitter-filters button { min-height:40px;padding:8px 6px;border:1px solid #d8d3e4;border-radius:10px;background:#fff;color:#332b49;font:inherit;font-size:12px;cursor:pointer; }
.glitter-filters button[aria-pressed="true"] { background:#eeebff;border-color:var(--accent);color:#322ba7; }
.material-grid .material-swatch[hidden] { display:none; }

.glitter-summary {grid-column:1/-1;margin:0 0 4px;font-size:12px;line-height:1.5;color:var(--muted);}
.material-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.material-grid .material-swatch {aspect-ratio:auto;min-height:40px;height:40px;padding:3px 4px;line-height:1.1;font-size:10px;white-space:normal;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:10px;}
.glitter-filters { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.glitter-filters button { min-height:32px; padding:4px 2px; font-size:11px; }
.glitter-summary { display:none; }
.material-grid .material-swatch:focus-visible,.glitter-filters button:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
/* Compact studio sidebar: tools first, smaller swatches, less scrolling for kids. */
.panel { gap:10px; padding:14px; }
.panel > * { order:5; }
.panel > .mode-row { order:0; } .panel > .mode-row .hint { display:none; }
.panel > .tools-group { order:1; } .panel > #toolHint { order:2; }
.panel > .nocbn:not(.tools-group):not(.quickfills) { order:3; }
.panel .tools .tool { min-height:46px; padding:6px 4px; }
.palette-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin-bottom:8px; }
.palette-tabs button { min-height:30px; padding:3px 1px; font-size:10.5px; border-radius:8px; }
#swatches:not(.hair-palette):not(.pic-palette) { grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; }
body.kids .swatches .sw, .swatches .sw { min-height:0; }
#swatches.hair-palette .sw { min-height:34px; }
.more-designs { margin-top:10px; border:1px solid var(--line); border-radius:12px; padding:6px 10px; }
.more-designs > summary { cursor:pointer; font:600 13px var(--font-body); min-height:32px; display:flex; align-items:center; }
.more-designs[open] > summary { margin-bottom:6px; }
.more-designs .embroidery-studio, .more-designs .jewelry-studio { margin-top:8px; }
@media(max-width:760px) { .panel > .tools-group { order:1; } }

body.kids .tools { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.panel .tools .tool { font-size:11px; min-height:42px; padding:5px 2px; gap:2px; }