/* AnyTatt Placement Studio — one stylesheet, one token set.
   Contract: docs/DESIGN.md and docs/atelier-redesign.md. Palette: warm charcoal work surface, flash-paper
   cream for artwork, stencil violet (thermal stencil transfer ink) as the
   single accent. Type: system UI for controls, IBM Plex Mono for every
   measurement, Anton only for the wordmark. */

:root{
  --canvas:#141518;
  --panel:#1b1c20;
  --panel-2:#24262b;
  --panel-3:#2d3036;
  --line:#35383e;
  --line-soft:#2a2c31;
  --ink:#f1ede6;
  --ink-dim:#b9b6b0;
  --ink-faint:#95938f;
  --stencil:#a99bf6;        /* accent as text / lines: 7.06:1 on panel */
  --stencil-fill:#8c7ff2;   /* accent as a fill */
  --on-stencil:#14121c;     /* 5.68:1 on the fill */
  --stencil-dim:#5b4fa0;
  --paper:#ece7dc;
  --paper-2:#e3ddd0;
  --paper-line:#cfc7b8;
  --paper-ink:#1f1c1a;
  --paper-dim:#5c5750;
  --sanguine:#a6402f;
  --danger-text:#e58a7c;
  --warn:#e0b97a;
  --ok:#7fb59a;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --r-control:8px;
  --r-container:12px;
  --rail-w:440px;
  --control-h:40px;
  --focus:0 0 0 2px var(--canvas),0 0 0 4px var(--stencil);
  color-scheme:dark;
}
@media (pointer:coarse),(max-width:860px){:root{--control-h:44px}}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail-w);
  grid-template-rows:auto minmax(0,1fr);
  height:100dvh;
  background:var(--canvas);
  color:var(--ink);
  font:14px/1.5 var(--ui);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:none;box-shadow:var(--focus)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* ---------- header ---------- */
.studio-header{
  grid-column:1/-1;display:flex;align-items:center;gap:18px;
  min-height:76px;padding:0 28px 0 32px;
  border-bottom:1px solid var(--line-soft);background:var(--canvas);z-index:30;
}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font:26px/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--stencil)}
.header-title{color:var(--ink-dim);font-size:13px;padding-left:18px;border-left:1px solid var(--line)}
.header-nav{display:flex;gap:4px;margin-left:8px}
.header-nav a{color:var(--ink-dim);text-decoration:none;font-size:13px;padding:8px 10px;border-radius:var(--r-control);min-height:36px;display:inline-flex;align-items:center}
.header-nav a:hover{color:var(--ink);background:var(--panel)}
.header-account{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
#headerQuota{font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-dim);padding:7px 10px;border:1px solid var(--line-soft);border-radius:999px}
#headerQuota:empty{display:none}
#accountButton{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- stage ---------- */
#stage{
  grid-column:1;grid-row:2;position:relative;min-width:0;min-height:0;overflow:hidden;
  background:radial-gradient(ellipse at 57% 38%,#3d3b40 0%,#25262b 42%,#17181c 77%);
}
#gl{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}
#gl:focus-visible{box-shadow:inset 0 0 0 2px var(--stencil)}
#gl.dragging{cursor:grabbing}
#gl.pan-ready{cursor:move}
#gl.pan-ready.dragging{cursor:grabbing}
#sceneStatus{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  padding:20px 24px;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-container);line-height:1.6;color:var(--ink-dim);z-index:10;text-align:center;
}
.scene-tools{position:absolute;right:18px;top:18px;z-index:5;display:flex;gap:8px}
.scene-tools .btn{background:rgba(27,28,32,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding-inline:16px}
.canvas-help{
  position:absolute;left:96px;bottom:78px;z-index:4;pointer-events:none;
  padding:0 14px;min-height:42px;display:inline-flex;align-items:center;
  background:transparent;
  border:0;border-radius:999px;
  font-size:12px;color:var(--ink-dim);white-space:nowrap;
}
.stage-readout{
  position:absolute;right:20px;bottom:20px;z-index:4;pointer-events:none;min-height:42px;
  font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px;
}
.stage-readout b{font-weight:500;color:var(--ink)}
.stage-readout i{font-style:normal;color:var(--ink-faint)}

/* signature: the live centimetre ruler */
#ruler{position:absolute;left:0;top:0;width:78px;height:100%;pointer-events:none;z-index:3}
#ruler .spine{position:absolute;left:60px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent)}
.tick{position:absolute;left:60px;height:1px;background:var(--line);transform:translateY(-.5px)}
.tick.minor{width:6px}
.tick.major{width:12px;background:var(--stencil-dim)}
.tick-label{position:absolute;right:calc(100% - 52px);transform:translateY(-50%);font:500 11px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);white-space:nowrap}
.tick-label.major{color:var(--stencil)}
#ruler .unit{position:absolute;left:14px;top:16px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase}

/* view switcher */
#views{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;
  display:flex;gap:2px;padding:3px;background:rgba(27,28,32,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:999px;
}
#views button{
  appearance:none;border:0;background:transparent;color:var(--ink-dim);
  font:500 13px/1 var(--ui);min-height:36px;padding:0 16px;border-radius:999px;
  transition:background .12s,color .12s;
}
#views button:hover{color:var(--ink)}
#views button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
#views button:focus-visible{box-shadow:0 0 0 2px var(--stencil)}

#toast{
  position:absolute;left:50%;bottom:74px;transform:translate(-50%,8px);z-index:20;
  display:flex;align-items:center;gap:14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px 10px 16px;font-size:13px;line-height:1.4;color:var(--ink);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:calc(100% - 32px);width:max-content;
}
#toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#toast button{
  appearance:none;border:0;background:transparent;color:var(--stencil);
  font:600 13px/1 var(--ui);padding:8px 4px;margin:-8px -4px;border-radius:6px;
}
#toast button:hover{color:var(--ink)}

/* ---------- rail ---------- */
#rail{
  grid-column:2;grid-row:2;min-height:0;height:100%;
  background:var(--panel);border-left:1px solid var(--line-soft);
  display:flex;flex-direction:column;z-index:6;
}
#grip{display:none}
.rail-head{display:flex;padding:0 12px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.tab{
  flex:1;appearance:none;border:0;background:transparent;color:var(--ink-dim);
  font:500 14px/1 var(--ui);min-height:60px;padding:0;position:relative;
  transition:color .12s;
}
.tab::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:transparent;transition:background .12s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{background:var(--stencil)}
.tab:focus-visible{box-shadow:inset var(--focus)}
.rail-body{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-behavior:smooth}
.rail-body::-webkit-scrollbar{width:8px}
.rail-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.pane{display:none;padding:6px 0 32px}
.pane.on{display:block;animation:pane-arrive .24s ease-out}

/* ---------- primitives ---------- */
.group-label{
  display:flex;align-items:baseline;gap:10px;
  padding:22px 20px 8px;font:600 12px/1.3 var(--ui);color:var(--ink-dim);
}
.group-label:first-child{padding-top:18px}
.collection-note{margin-left:auto;font-weight:400;font-size:12px;color:var(--ink-faint)}
.hint{padding:4px 20px 0;font-size:12.5px;line-height:1.55;color:var(--ink-faint)}
.hint a,.account-disclosure a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}
.hint a:hover,.account-disclosure a:hover{color:var(--stencil)}
.legal-links{padding-top:22px;padding-bottom:8px}

.field{padding:8px 20px}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.field-top label{font-size:13px;color:var(--ink-dim)}
.val{font:500 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.val .u{color:var(--ink-faint);font-weight:400;margin-left:3px}
.val-reset{font:inherit;font-size:14px;line-height:1;color:var(--ink-faint);background:none;border:0;padding:2px 6px;margin-right:4px;border-radius:6px;cursor:pointer}
.val-reset:hover{color:var(--ink);background:var(--panel-2)}
.val-reset[hidden]{display:none}
.val-in{font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 4px;margin:-4px 0;text-align:right;box-sizing:content-box;-moz-appearance:textfield}
.val-in:hover{border-color:var(--line)}
.val-in:focus{outline:none;border-color:var(--ink-dim);background:var(--panel-2);box-shadow:var(--focus)}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;display:block;
  --p:50%;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--ink-dim) 0 var(--p),var(--line) var(--p) 100%);
}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--line)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink-dim)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7px;
  background:var(--ink);border:0;box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform .12s;
}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible{box-shadow:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--focus)}

.btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--control-h);padding:8px 16px;border-radius:var(--r-control);
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  font:500 13.5px/1.2 var(--ui);text-decoration:none;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.btn:hover{background:var(--panel-3);border-color:#41454c}
.btn:focus-visible{box-shadow:var(--focus)}
.btn.primary{background:var(--stencil-fill);border-color:var(--stencil-fill);color:var(--on-stencil);font-weight:600}
.btn.primary:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn.danger{color:var(--danger-text)}
.btn.danger:hover{background:var(--sanguine);border-color:var(--sanguine);color:#fff}
.btn.block{width:100%}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink-dim)}
.btn.quiet:hover{background:var(--panel-2);color:var(--ink)}
.btn:disabled,.btn.working{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:8px;padding:8px 20px 4px}
.btn-row .btn{flex:1}
.skin-sample-actions{flex-wrap:wrap}
.skin-sample-actions .btn{flex:1 1 130px;min-width:0;white-space:normal}

.seg{display:flex;gap:2px;padding:3px;background:var(--canvas);border:1px solid var(--line-soft);border-radius:var(--r-control)}
.seg button{
  flex:1;appearance:none;border:0;background:transparent;color:var(--ink-dim);
  font:500 13px/1.2 var(--ui);min-height:34px;padding:6px 8px;border-radius:6px;
  transition:background .12s,color .12s;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--panel-3);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.seg button:focus-visible{box-shadow:var(--focus)}

.swatch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;min-height:48px}
.swatch-row label{font-size:13px;color:var(--ink-dim);flex:1}
.swatch-row input[type=color]{
  appearance:none;-webkit-appearance:none;width:44px;height:30px;border:1px solid var(--line);
  background:transparent;padding:0;border-radius:var(--r-control);cursor:pointer;
}
.swatch-row input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.swatch-row input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.dropper-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-control);background:transparent;color:var(--ink-dim);font:inherit;font-size:12px;cursor:pointer}
.dropper-btn:hover{color:var(--ink);border-color:var(--ink-dim)}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px;min-height:48px;cursor:pointer;border-radius:0}
.toggle-row span{font-size:13.5px;color:var(--ink)}
.switch{width:44px;height:26px;border-radius:999px;background:var(--panel-3);border:1px solid var(--line);position:relative;flex:0 0 auto;transition:background .16s,border-color .16s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink-dim);transition:transform .16s,background .16s}
.toggle-row[aria-pressed="true"] .switch{background:var(--stencil-fill);border-color:var(--stencil-fill)}
.toggle-row[aria-pressed="true"] .switch::after{transform:translateX(18px);background:var(--on-stencil)}
.toggle-row:hover .switch{border-color:#41454c}
.toggle-row:focus-visible{box-shadow:inset var(--focus)}

.name-input,.gen-prompt{
  width:100%;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-control);
  color:var(--ink);font:14px/1.5 var(--ui);padding:10px 12px;
}
.name-input:focus,.gen-prompt:focus{outline:none;border-color:var(--stencil);box-shadow:0 0 0 3px rgba(169,155,246,.18)}
.gen-prompt{resize:vertical;min-height:88px;border-radius:10px}
.gen-prompt::placeholder{color:var(--ink-faint)}
.gen-prompt[aria-invalid=true]{border-color:var(--danger-text)}
.gen-count{text-align:right;font:12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);margin-top:6px}
.gen-count.near-limit{color:var(--warn)}

.warn-note{
  margin:8px 20px 0;padding:10px 12px;border:1px solid rgba(166,64,47,.55);border-radius:var(--r-control);
  background:rgba(166,64,47,.12);color:#eab5ab;font-size:12.5px;line-height:1.5;
}

/* ---------- ink pane: pieces ---------- */
.intro{padding:20px 20px 4px}
.intro h1{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.intro p{margin-top:4px;font-size:13.5px;color:var(--ink-dim)}

#layerList{padding:6px 12px 0}
.empty{
  margin:6px 8px 4px;padding:22px 20px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r-container);color:var(--ink-faint);
}
.empty svg{display:none}
.empty p{font-size:13px;line-height:1.55}
.empty b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px}

.layer{
  margin:0 0 8px;background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--r-container);overflow:hidden;transition:border-color .12s;
}
.layer.open{border-color:var(--line)}
.layer-head{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;min-height:60px;cursor:pointer}
.layer-head:hover{background:var(--panel-3)}
.layer.open .layer-head{border-bottom:1px solid var(--line-soft)}
.thumb{
  width:44px;height:44px;flex:0 0 auto;border-radius:8px;
  background:var(--paper) center/contain no-repeat;border:1px solid var(--paper-line);
}
.layer-name{flex:1;min-width:0}
.layer-name b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-name small{display:block;margin-top:3px;font:12px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-name small.alert{color:var(--warn)}
.icon-btn{
  appearance:none;border:0;background:transparent;color:var(--ink-dim);
  width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;transition:background .12s,color .12s;
}
.icon-btn svg{width:18px;height:18px;display:block}
.icon-btn:hover{background:var(--panel);color:var(--ink)}
.icon-btn:focus-visible{box-shadow:var(--focus)}
.eye[aria-pressed="false"]{color:var(--ink-faint)}
.eye[aria-pressed="true"]{color:var(--ink)}
.piece-remove:hover{background:rgba(166,64,47,.18);color:var(--danger-text)}
.layer.off .thumb,.layer.off .layer-name{opacity:.45}
.layer-body{display:none;padding:2px 0 12px;background:var(--panel)}
.layer.open .layer-body{display:block}
.layer-body .group-label{padding-top:16px}
.layer-body .field,.layer-body .btn-row,.layer-body .hint{padding-left:16px;padding-right:16px}
.layer-body .warn-note{margin-left:16px;margin-right:16px}
.layer-body .group-label{padding-left:16px;padding-right:16px}
.layer-body .field-top label{color:var(--ink-dim)}
.layer-body .name-input{font-weight:600}
.layer-foot{display:flex;gap:8px;padding:14px 16px 4px;border-top:1px solid var(--line-soft);margin-top:12px}
.layer-foot .btn{flex:1}

details.extract{margin:14px 12px 0;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2)}
details.extract summary{
  list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  font:600 13px/1.3 var(--ui);color:var(--ink);border-radius:10px;
}
details.extract summary::-webkit-details-marker{display:none}
details.extract summary small{font:12px/1.3 var(--mono);font-weight:400;color:var(--ink-faint);margin-left:auto;text-align:right}
details.extract summary::before{
  content:"";width:8px;height:8px;border-right:1.5px solid var(--ink-dim);border-bottom:1.5px solid var(--ink-dim);
  transform:rotate(-45deg);transition:transform .16s;flex:0 0 auto;margin-right:2px;
}
details.extract[open] summary::before{transform:rotate(45deg)}
details.extract[open] summary{border-bottom:1px solid var(--line-soft);border-radius:10px 10px 0 0}
details.extract summary:focus-visible{box-shadow:inset var(--focus)}
details.extract .field,details.extract .btn-row,details.extract .hint{padding-left:14px;padding-right:14px}
details.extract .group-label{padding-left:14px;padding-right:14px;padding-top:14px}
details.extract .warn-note{margin-left:14px;margin-right:14px}
details.extract>.body{padding-bottom:12px}

.ink-preview{
  display:block;width:100%;height:auto;aspect-ratio:560/168;border:1px solid var(--line);
  border-radius:var(--r-control);background:#1d1e23;cursor:default;transition:aspect-ratio .16s ease;
}
.ink-preview.armed{cursor:crosshair;border-color:var(--stencil);aspect-ratio:560/430}

/* ---------- ink pane: add a design ---------- */
.source-switch{margin:10px 20px 0}
.source-panel{padding-top:4px}
.dropzone{
  margin:12px 20px 0;padding:22px 18px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r-container);background:var(--panel-2);
  transition:border-color .12s,background .12s;
}
.dropzone.over{border-color:var(--stencil);background:rgba(169,155,246,.08)}
.dropzone .btn{margin-bottom:10px;min-width:180px}
.dropzone p{font-size:12.5px;color:var(--ink-faint);line-height:1.5}

.flash-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:12px 24px 4px}
.flash-library button{
  appearance:none;min-width:0;padding:0;background:var(--paper);border:1px solid var(--paper-line);
  border-radius:4px;overflow:hidden;color:var(--paper-ink);text-align:left;position:relative;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.flash-library button:hover{transform:translateY(-2px);border-color:var(--stencil);box-shadow:0 12px 24px rgba(48,37,28,.12)}
.flash-library button:focus-visible{box-shadow:var(--focus)}
.flash-library svg{display:block;width:100%;height:172px;padding:14px 6px 4px;stroke:#24201d}
.flash-library span{display:block;padding:12px 14px 13px;border-top:1px solid var(--paper-line);font:600 13px/1.3 var(--ui);color:var(--paper-ink)}
.flash-library small{display:block;margin-top:2px;font:400 11px/1.3 var(--ui);color:var(--paper-dim)}

.ai-panel{padding-top:4px}
.ai-panel .plan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px 0}
.ai-panel .plan p{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.ai-panel .field{padding-top:10px}
.gen-actions{padding:6px 20px 0}
.gen-actions .btn{width:100%}

/* ---------- export pane ---------- */
.card-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 20px 4px}
.card-row .btn{min-height:52px;flex-direction:column;gap:2px;padding:10px}
.card-row .btn small{font-weight:400;font-size:11.5px;color:var(--ink-faint)}
.card-row .btn.primary small{color:var(--on-stencil);opacity:.75}
.status-line{padding:6px 20px 0;font:12px/1.5 var(--mono);color:var(--ink-faint)}
.sync-choice{display:flex;align-items:flex-start;gap:12px;padding:10px 20px 4px;font-size:13.5px;line-height:1.45;cursor:pointer}
.sync-choice input{width:20px;height:20px;margin-top:1px;accent-color:var(--stencil-fill);flex:0 0 auto}
.sync-choice small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-faint)}
.danger-zone{margin:20px 20px 0;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--r-container)}
.danger-zone p{font-size:12.5px;color:var(--ink-faint);margin-bottom:10px;line-height:1.5}
.danger-zone .btn{width:100%}

/* ---------- account dialog ---------- */
#accountDialog{
  position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);
  padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);
  box-shadow:0 24px 90px rgba(0,0,0,.55);overflow-y:auto;
}
#accountDialog::backdrop{background:rgba(7,8,10,.72);backdrop-filter:blur(4px)}
#accountDialog h2{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:6px 32px 10px 0}
#accountDialog p{font-size:14px;line-height:1.55;margin-bottom:16px;color:var(--ink-dim)}
#accountDialog .btn{margin-bottom:10px}
#accountDialog #googleContinue{background:var(--ink);color:var(--canvas);border-color:var(--ink);font-weight:600;min-height:46px}
#accountDialog #googleContinue:hover{background:#fff}
#accountDialog .account-disclosure{font-size:12.5px;margin:12px 0 4px;color:var(--ink-faint)}
#accountMessage:empty{display:none}
.dialog-close{position:absolute;right:12px;top:12px;width:40px;height:40px;font-size:24px;line-height:1;border:0;background:transparent;color:var(--ink-dim);border-radius:50%}
.dialog-close:hover{background:var(--panel-2);color:var(--ink)}
.dialog-cancel{width:100%;min-height:44px;background:none;border:0;color:var(--ink-dim);font:500 13.5px var(--ui);border-radius:var(--r-control)}
.dialog-cancel:hover{color:var(--ink);background:var(--panel-2)}

/* ---------- lasso overlay ---------- */
#lasso{position:fixed;inset:0;z-index:60;background:rgba(14,14,17,.98);display:flex;flex-direction:column}
.lasso-head{padding:16px 20px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.lasso-head b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.lasso-head span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.lasso-tools{display:flex;align-items:center;gap:12px;margin-top:12px}
.lasso-mode{flex:0 0 auto;width:150px}
#lassoCount{flex:1;font:12px/1 var(--mono);color:var(--ink-faint)}
#lassoUndo{flex:0 0 auto}
#lassoUndo:disabled{opacity:.4}
#lassoSub[aria-pressed="true"]{background:var(--sanguine);color:#fff}
.lasso-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:12px}
#lassoCanvas{max-width:100%;max-height:100%;touch-action:none;cursor:crosshair;border-radius:6px}
.lasso-foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;flex:0 0 auto}
.lasso-foot .btn{flex:1}

/* ---------- atelier: charcoal workbench with paper artwork ---------- */
.header-subtitle{display:block;font-size:11px;color:var(--ink-faint);margin-top:3px}
.eyebrow{display:block;font:500 10px/1.5 var(--mono);letter-spacing:.13em;color:var(--ink-dim)}
.stage-heading{position:absolute;left:100px;top:32px;pointer-events:none;z-index:3;max-width:280px}
.stage-heading h1{font-size:16px;line-height:1.35;letter-spacing:-.03em;font-weight:500;margin-top:10px}
.scene-tools{top:28px;right:24px}
.scene-tools .btn{font-size:12px;min-height:36px;padding:8px 13px}
.scene-tools .btn[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.stage-caption{position:absolute;bottom:154px;left:100px;pointer-events:none;max-width:250px}
.stage-caption p{font:400 48px/1.08 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:14px 0 18px}
.stage-caption em{font-style:normal;color:var(--stencil)}
.stage-caption>span:last-child{display:block;max-width:205px;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.zoom-tools{position:absolute;right:24px;top:50%;display:flex;flex-direction:column;padding:4px;background:rgba(27,28,32,.9);border:1px solid var(--line);border-radius:12px}
.zoom-tools button{width:40px;height:40px;background:none;border:0;border-radius:8px;font-size:22px;color:var(--ink-dim)}
.zoom-tools button:hover{background:var(--panel-3);color:var(--ink)}
#rail{
  color-scheme:dark;color:var(--ink);
  border-left:1px solid var(--line-soft);
  box-shadow:-12px 0 40px rgba(10,10,14,.1);
}
.rail-head{padding:0 20px}
.tab[aria-selected="true"]{color:var(--stencil);font-weight:650}
.atelier-intro{padding:24px 26px 12px}
.atelier-intro h2{font:400 44px/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:10px 0}
.atelier-intro h2 em{font-style:normal;color:var(--stencil)}
.atelier-intro p{color:var(--ink-dim);font-size:14px;line-height:1.65}
.atelier-intro:not([hidden]) ~ .design-label{display:none}
.design-label{padding-top:16px;font-size:14px;color:var(--ink)}
.source-switch{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 10px;gap:3px}
.source-switch button{padding:10px 8px;font-size:12px;min-height:42px}
.source-switch button[aria-pressed="true"]{background:var(--ink);color:var(--canvas);box-shadow:none}
.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 24px 2px}
.collection-heading>span{font:500 10px/1.4 var(--mono);letter-spacing:.08em}
.collection-heading small{display:block;font:12px/1.5 var(--ui);letter-spacing:0;color:var(--ink-dim);margin-top:5px}
.text-action{background:none;border:0;min-height:44px;padding:4px 0 4px 8px;white-space:nowrap;color:var(--stencil);font-size:12px;font-weight:600;border-radius:4px}
.text-action:hover{text-decoration:underline;text-underline-offset:4px}
.flash-library button:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;background:var(--paper-2);border-color:var(--paper-line)}
.flash-library button:first-child svg{height:190px;padding:12px}
.flash-library button:first-child span{border:0;padding:16px;font-size:19px;letter-spacing:-.025em}
.flash-library button:first-child small{font-size:12px;line-height:1.6;letter-spacing:0;margin-top:8px}
.flash-library button::after{content:'Try on ↗';position:absolute;right:10px;top:10px;background:var(--paper);color:var(--paper-ink);padding:5px 8px;border-radius:4px;font-size:10px;opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.flash-library button:hover::after,.flash-library button:focus-visible::after{opacity:1;transform:none}
.collection-footer{padding:16px 24px}
.source-intro{padding:24px 22px 10px}
.source-intro h3{font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.04em}
.source-intro p{color:var(--ink-dim);font-size:13px;line-height:1.6;margin-top:8px}
.pane-intro h2{font-size:25px;line-height:1.2;letter-spacing:-.04em;margin-top:10px}
.upload-symbol{display:block;font-size:38px;color:var(--stencil);margin-bottom:14px}
.dropzone{padding:24px 16px;background:var(--panel-2);border-color:var(--line)}
.prompt-starters{display:flex;flex-wrap:wrap;gap:6px;padding:10px 20px}
.prompt-starters>span{width:100%;color:var(--ink-dim);font-size:12px;margin-bottom:2px}
.prompt-starters button{background:transparent;border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:36px;font-size:12px}
.prompt-starters button:hover{background:var(--panel-2);border-color:var(--stencil)}
#armHint{margin:16px 20px 0;padding:14px 0 0;border-top:1px solid var(--line-soft)}
#layerList{padding-top:14px}
.layer{background:var(--panel-2);border-radius:10px}
.layer.open{box-shadow:0 4px 16px rgba(48,37,28,.06);border-color:var(--line)}
.layer-head{padding:12px 8px}
.layer-body{background:var(--panel)}
#rail .btn:hover{border-color:var(--ink-faint)}
#rail .btn.danger:hover{color:#fff}
#rail .seg button[aria-pressed="true"]{box-shadow:none}
.skin-palette{display:flex;gap:7px;padding:6px 20px 12px}
.skin-palette button{flex:1;height:44px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--tone);position:relative}
.skin-palette button[aria-pressed="true"]::after{content:"";position:absolute;inset:4px;border:2px solid white;border-radius:4px;box-shadow:0 0 0 1px #292622}
@keyframes pane-arrive{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:861px) and (max-width:1200px){
  :root{--rail-w:390px}
  .stage-heading{left:90px;max-width:200px}.stage-heading h1{font-size:16px}
  .scene-tools{top:auto;bottom:76px}.stage-caption,.stage-heading h1{display:none}
}
@media(prefers-reduced-transparency:reduce){.scene-tools .btn,.zoom-tools,#views{background:var(--panel);backdrop-filter:none}}

/* ---------- compact: stacked stage + sheet ---------- */
@media (max-width:860px){
  :root{--rail-w:100%}
  body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(220px,42dvh) minmax(0,1fr)}
  body.sheet-min{grid-template-rows:auto minmax(220px,1fr) 88px}
  .studio-header{min-height:56px;padding:0 14px 0 16px;gap:12px}
  .wordmark{font-size:23px}
  .header-title,.header-nav{display:none}
  #headerQuota{display:none}
  #stage{grid-column:1;grid-row:2}
  #rail{grid-column:1;grid-row:3;height:100%;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  body.sheet-min #rail .rail-body{overflow:hidden}
  #grip{display:block;padding:10px 0 6px;background:transparent;border:0;width:100%;cursor:pointer}
  #grip i{display:block;margin-inline:auto;width:36px;height:4px;border-radius:4px;background:var(--line)}
  #grip:focus-visible{box-shadow:inset var(--focus)}
  .scene-tools{top:12px;right:12px}
  .canvas-help{display:none}
  .stage-readout{right:14px;top:66px;bottom:auto;font-size:11px}
  #views{bottom:12px}
  #views button{padding:0 12px;font-size:12.5px}
  #ruler{width:58px}
  #ruler .spine,.tick{left:44px}
  .tick-label{right:calc(100% - 38px)}
  #ruler .unit{left:10px;top:12px}
  #toast{bottom:64px}
  .tab{min-height:44px}
  .gen-prompt,.name-input{font-size:16px}
  .flash-library svg{height:150px}
  .flash-library button:first-child svg{height:160px}
  .atelier-intro{padding:20px 24px 12px}
  .atelier-intro h2{font-size:30px}
  .atelier-intro>p,.atelier-intro>.eyebrow{display:none}
  .atelier-intro h2 br{display:none}
  .atelier-intro p br{display:none}
  .stage-heading,.stage-caption{display:none}
  .scene-tools{top:12px;right:12px;bottom:auto}
  .scene-tools .btn{min-height:44px}
  .zoom-tools{top:auto;bottom:70px;right:12px}
  .zoom-tools button{width:44px;height:44px}
  .header-subtitle{display:none}
  .prompt-starters button{min-height:44px}
  .intro h1{font-size:19px}
}
@media (max-width:360px){.skin-palette{display:grid;grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.canvas-help{display:none}}
@media (max-height:600px) and (min-width:700px){
  :root{--rail-w:360px}
  body{grid-template-columns:minmax(0,1fr) var(--rail-w);grid-template-rows:auto minmax(0,1fr)}
  #rail{grid-column:2;grid-row:2;border-top:0;border-left:1px solid var(--line-soft);border-radius:0;box-shadow:none}
  #grip{display:none}
  #stage{grid-column:1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .flash-library button:hover{transform:none}
}

/* piece header: the name area is the disclosure control; eye and remove sit beside it */
.layer-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:12px;appearance:none;border:0;background:transparent;padding:4px 0 4px 2px;text-align:left;color:inherit;border-radius:8px}
.layer-toggle:focus-visible{box-shadow:var(--focus)}
.link-btn{appearance:none;border:0;background:none;padding:0;color:var(--stencil);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;border-radius:4px}
.link-btn:hover{color:var(--ink)}

/* touch and narrow layouts: every control reaches the 44px floor; last so nothing above overrides it */
@media (pointer:coarse),(max-width:860px){
  .seg button{min-height:44px}
  .icon-btn{width:44px;height:44px}
  #views button{min-height:44px;padding:0 14px}
  #grip{min-height:44px}
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-thumb{margin-top:-9px;width:22px;height:22px}
  input[type=range]::-moz-range-thumb{width:22px;height:22px}
  details.extract summary{min-height:48px}
  .link-btn{display:inline-block;padding:12px 0}
}