/* ---- Newborn editor — embedded in the page, phone first ---- */
.nb-page{padding-block:clamp(14px,3vw,28px) 40px}
.nb-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 24px;margin-bottom:14px}
.nb-title h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.nb-title .lead{margin-top:6px;font-size:var(--small)}
.nb-modes{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px}
.nb-modes button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--burg);transition:background .15s,color .15s}
.nb-modes button svg{width:20px;height:20px;fill:currentColor}
.nb-modes button[aria-selected=true]{background:var(--burg);color:var(--color-on-primary)}
.nb-layout{display:grid;gap:14px}
.nb-ib{min-width:48px;min-height:48px;display:inline-grid;place-items:center;border-radius:14px;color:var(--burg);background:transparent;transition:background .15s}
.nb-ib svg{width:24px;height:24px}
.nb-ib:hover{background:rgba(107,29,47,.06)}
.nb-ib:disabled{opacity:.3}
.nb-ib[aria-pressed=true]{background:var(--burg);color:var(--color-on-primary)}
.nb-ib[hidden]{display:none}

/* stage bar */
.nb-stagebar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nb-stagebar .group{display:flex;align-items:center;gap:2px}
.nb-dims{margin-inline:auto;display:grid;justify-items:center;line-height:1.05;color:var(--burg);white-space:nowrap}
.nb-dims b{font-size:1.05rem;font-weight:600}
.nb-dims small{font-size:.72rem;color:var(--muted)}
.nb-save{min-height:44px;padding-inline:16px;gap:8px}
.nb-save svg{width:20px;height:20px}
@media (max-width:480px){.nb-save span{display:none}.nb-save{min-width:48px;padding-inline:12px}}

/* scene: the photo is the background, the stage is the piece — both share one mm space */
.nb-scene{position:relative;height:min(62dvh,560px);min-height:300px;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--nb-bg-from,#F7F0E6),var(--nb-bg-to,#E4D4C2));box-shadow:0 14px 40px rgba(34,28,24,.14);touch-action:none;overscroll-behavior:contain}
.nb-fit{position:absolute;left:0;top:0}
.nb-fit .scene-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none}
.nb-page.no-photo .nb-fit::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,transparent 60%,rgba(120,80,40,.18) 61%,rgba(120,80,40,.1))}
.nb-stage-host{position:absolute;inset:0;touch-action:none}
.nb-stage-host .nb-stage,.nb-stage-host .nb-stage-2d{position:absolute;inset:0;width:100%;height:100%;display:block}
.nb-stage-host .nb-stage-2d svg.nb-stage{overflow:visible}
.nb-stage-host .nb-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nb-stage-host .nb-overlay .nb-handle{pointer-events:auto;cursor:pointer}
.nb-scene-note{position:absolute;inset-inline:12px;top:10px;margin:0;font-size:.78rem;color:var(--burg3);background:rgba(246,240,230,.92);border:1px solid var(--line);border-radius:10px;padding:6px 10px;text-align:center}
.nb-hint{font-size:.78rem;color:var(--muted);text-align:center;margin-top:8px}
.nb-note{font-size:var(--small);color:var(--muted);margin-top:16px}

/* mode chooser */
.nb-chooser{position:absolute;inset:0;display:grid;place-content:center;gap:10px;padding:20px;text-align:center;background:rgba(244,238,227,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nb-chooser[hidden]{display:none}
.nb-chooser h2{font-size:clamp(1.5rem,4vw,2.1rem)}
.nb-chooser p{font-size:var(--small);color:var(--muted);max-width:36ch;margin-inline:auto}
.nb-chooser-grid{display:grid;grid-template-columns:repeat(3,minmax(96px,150px));gap:10px;justify-content:center;margin-top:8px}
.nb-choice{display:grid;justify-items:center;gap:6px;padding:16px 10px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;color:var(--burg);box-shadow:0 8px 22px rgba(34,28,24,.12);transition:transform .15s,border-color .15s}
.nb-choice svg{width:40px;height:40px;fill:var(--burg3)}
.nb-choice b{font-size:1rem}
.nb-choice small{font-size:.72rem;color:var(--muted);line-height:1.25}
.nb-choice:hover,.nb-choice:focus-visible{transform:translateY(-2px);border-color:var(--gold)}
@media (max-width:420px){.nb-chooser-grid{grid-template-columns:1fr;max-width:240px;margin-inline:auto}.nb-choice{grid-template-columns:40px 1fr;justify-items:start;text-align:start;column-gap:12px}.nb-choice svg{grid-row:1/3}}

/* selection bar — floats over the scene so selecting never resizes the stage under the finger */
.nb-selbar{position:absolute;inset-inline:0;bottom:10px;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);display:flex;justify-content:center;gap:2px;padding:2px 6px;background:rgba(246,240,230,.96);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 24px rgba(34,28,24,.18);z-index:1}
.nb-selbar[hidden]{display:none}

/* toolbar — big rounded tools, icon + label, burgundy on gypsum */
.nb-toolbar{display:flex;gap:8px;overflow-x:auto;padding:8px;scrollbar-width:none;background:var(--card);border:1px solid var(--line);border-radius:18px}
.nb-toolbar::-webkit-scrollbar{display:none}
.nb-tool{flex:0 0 auto;min-width:78px;min-height:70px;display:grid;justify-items:center;align-content:center;gap:6px;padding:8px 8px;border-radius:16px;font-size:.78rem;font-weight:600;color:var(--burg);background:var(--bg);border:1.5px solid transparent;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;line-height:1}
.nb-tool svg{width:28px;height:28px;fill:currentColor}
.nb-tool:hover{border-color:var(--gold-soft);transform:translateY(-1px)}
.nb-tool[aria-pressed=true]{background:var(--burg);color:var(--color-on-primary);box-shadow:0 8px 18px rgba(107,29,47,.28)}
html[dir=rtl] .nb-tool{font-family:var(--font-arabic)}

/* sheet */
.nb-sheet{background:var(--card);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column}
.nb-sheet header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.nb-sheet h2{font-size:1.05rem;font-family:var(--font-body);font-weight:600}
html[dir=rtl] .nb-sheet h2{font-family:var(--font-arabic)}
.nb-sheet .body{overflow:auto;overscroll-behavior:contain;padding:12px 16px 16px;display:grid;gap:10px;align-content:start;touch-action:pan-y}
.nb-sheet h3{font-size:.85rem;font-family:var(--font-body);font-weight:600;color:var(--burg);display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;gap:10px}
html[dir=rtl] .nb-sheet h3{font-family:var(--font-arabic)}
.nb-sheet h3 small{font-weight:400;color:var(--muted)}
.nb-sheet .hint{font-size:.8rem;color:var(--muted)}
.nb-sheet .issue{font-size:.8rem;color:#b4452f}
.nb-sheet .lead{font-size:.9rem}
.nb-sheet .row{display:flex;gap:10px;flex-wrap:wrap}
.nb-sheet .row .btn{flex:1 1 140px}
.nb-sheet .chips.small .chip{min-height:40px;padding:6px 10px}
/* "10 mm" reads left to right inside Arabic; Arabic chip labels keep their own direction */
.nb-sheet .chip{unicode-bidi:plaintext}
.nb-sheet .chip.icon svg{width:22px;height:22px;fill:currentColor}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.nb-asset{min-height:76px;border:1.5px solid var(--line);border-radius:14px;background:#fff;display:grid;justify-items:center;align-content:center;gap:5px;padding:6px 4px;font-size:.7rem;color:var(--ink);line-height:1.1;text-align:center;transition:border-color .15s,background .15s}
.nb-asset svg{width:38px;height:38px;fill:var(--burg3)}
.nb-asset[aria-pressed=true]{border-color:var(--burg);background:var(--bg);box-shadow:inset 0 0 0 1px var(--burg)}
.nb-grid.shapes .nb-asset svg{height:44px}

/* colours — large circular swatches */
.nb-swatches{display:flex;flex-wrap:wrap;gap:10px}
.nb-swatch{width:52px;height:52px;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line),0 4px 10px rgba(34,28,24,.14);cursor:pointer;transition:transform .15s,box-shadow .15s;display:grid;place-items:center}
.nb-swatch.metallic{background:linear-gradient(135deg,color-mix(in srgb,var(--sw) 55%,#fff),var(--sw) 45%,color-mix(in srgb,var(--sw) 70%,#fff) 55%,color-mix(in srgb,var(--sw) 72%,#000))}
.nb-swatch.auto{background:conic-gradient(var(--burg) 0 50%,var(--card) 50% 100%);font-size:.6rem;font-weight:700;color:var(--color-on-primary);text-shadow:0 0 3px rgba(0,0,0,.5)}
.nb-swatch:hover{transform:scale(1.06)}
.nb-swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--burg),0 4px 10px rgba(34,28,24,.2)}
.nb-color-row{display:grid;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.nb-color-row:last-child{border-bottom:0}

.nb-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.nb-letter{min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:1.2rem;font-weight:600;color:var(--burg)}
.nb-letter[aria-pressed=true]{background:var(--burg);color:var(--color-on-primary);border-color:var(--burg)}
.nb-add-row{display:grid;gap:10px}
.nb-toggle{display:flex;align-items:center;gap:10px;min-height:48px;font-size:.95rem}
.nb-toggle.small{min-height:36px;font-size:.8rem;color:var(--muted)}
.nb-toggle input{width:22px;height:22px;accent-color:var(--burg)}
.nb-field-row{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.nb-field-row .row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:.9rem;color:var(--burg)}
.nb-field-row .field{min-height:46px}
.nb-field-row .field:disabled{opacity:.45}
.nb-upload{width:100%}
.nb-layers{display:grid;gap:4px}
.nb-layer-row{display:flex;align-items:center;gap:2px;min-height:48px;border-radius:12px;padding-inline-start:10px}
.nb-layer-row[aria-selected=true]{background:var(--bg)}
.nb-layer-row .name{flex:1;text-align:start;min-height:48px;display:flex;align-items:center;gap:8px;font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nb-layer-row .kind{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
.nb-layer-row.base .kind{color:var(--gold-dim)}
.nb-layer-row .nb-ib svg{width:20px;height:20px}
.nb-saved-png{width:100%;max-height:34dvh;object-fit:contain;border-radius:14px;border:1px solid var(--line);background:#fff}
.nb-ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:.9rem}
.nb-ref strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--burg)}
.nb-ref small{color:var(--muted)}
.nb-outputs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.nb-outputs .chip{min-height:44px}

/* preview mode */
.nb-page.nb-preview .nb-selbar,.nb-page.nb-preview .nb-overlay{display:none}

/* phone: the scene stays in view, tools ride the bottom edge, the sheet slides up over them */
@media (max-width:899px){
  .nb-scene{position:sticky;top:70px;z-index:5;height:min(56dvh,520px);transition:height .2s}
  /* with a sheet open the scene shrinks so the piece stays in view above it */
  .nb-page.sheet-open .nb-scene{height:max(240px,calc(100dvh - 70px - 40dvh - var(--nb-toolbar-h,96px) - 12px))}
  .nb-toolbar{position:fixed;inset-inline:0;bottom:0;z-index:40;border-radius:0;border-width:1px 0 0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(34,28,24,.12)}
  .nb-sheet{position:fixed;inset-inline:0;bottom:var(--nb-toolbar-h,96px);z-index:41;max-height:min(40dvh,440px);border-radius:22px 22px 0 0;box-shadow:0 -12px 34px rgba(34,28,24,.2);transform:translateY(calc(100% + var(--nb-toolbar-h,96px)));visibility:hidden;transition:transform .2s,visibility 0s .2s}
  .nb-page.sheet-open .nb-sheet{transform:none;visibility:visible;transition:transform .2s}
  .nb-sheet .body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  body.nb-open{padding-bottom:110px}
}
/* wide: stage and tools side by side, the sheet is a panel that is always open */
@media (min-width:900px){
  .nb-layout{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .nb-scene{height:min(70vh,640px)}
  .nb-tools{position:sticky;top:84px;display:grid;gap:12px}
  .nb-toolbar{flex-wrap:wrap;overflow:visible}
  .nb-tool{flex:1 1 90px}
  .nb-sheet{max-height:calc(100vh - 84px - 220px);min-height:200px}
  .nb-sheet header .nb-ib{display:none}
  .nb-sheet[aria-hidden=true] .body::before{content:"";}
}

/* ---- Studio: sheets for names, signs, materials and finishes ---- */
.nb-chooser-grid.many{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));max-width:min(720px,100%);max-height:70%;overflow:auto;padding:4px}
.nb-choice .thumb,.nb-template .thumb{display:grid;place-items:center;width:100%;aspect-ratio:1.15;background:linear-gradient(180deg,#F4ECE0,#E7D9C5);border-radius:12px;padding:8px;overflow:hidden}
.nb-choice .thumb svg,.nb-template .thumb svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(34,28,24,.18))}
.nb-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.nb-template{display:grid;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--burg);font-size:.8rem;text-align:center}
.nb-template[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}

/* materials: each swatch shows how the material looks */
.nb-mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.nb-mat{display:grid;justify-items:center;gap:6px;padding:8px 6px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:.7rem;line-height:1.15;color:var(--ink);text-align:center;min-height:48px}
.nb-mat i{width:46px;height:46px;border-radius:12px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 3px 8px rgba(34,28,24,.14)}
.nb-mat.mirror i,.nb-mat.silk i,.nb-mat.metal i{background:linear-gradient(135deg,color-mix(in srgb,var(--sw) 50%,#fff) 0%,var(--sw) 38%,color-mix(in srgb,var(--sw) 45%,#fff) 50%,var(--sw) 62%,color-mix(in srgb,var(--sw) 70%,#000) 100%)}
.nb-mat.clear i{background:linear-gradient(135deg,rgba(255,255,255,.95),color-mix(in srgb,var(--sw) 55%,transparent) 55%,rgba(255,255,255,.85)),repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/12px 12px;box-shadow:inset 0 0 0 2px rgba(120,170,160,.45)}
.nb-mat.frosted i{background:linear-gradient(160deg,#fff,var(--sw));box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 3px 8px rgba(34,28,24,.12)}
.nb-mat.wood i{background:repeating-linear-gradient(-8deg,var(--sw) 0 5px,color-mix(in srgb,var(--sw) 78%,#000) 5px 6px,var(--sw) 6px 11px,color-mix(in srgb,var(--sw) 88%,#fff) 11px 12px)}
.nb-mat.filament i{background:repeating-linear-gradient(0deg,var(--sw) 0 2px,color-mix(in srgb,var(--sw) 88%,#000) 2px 3px)}
.nb-mat[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}
.nb-mat[aria-pressed=true] i{outline:2.5px solid var(--burg);outline-offset:2px}

/* fonts: each one shows the customer's own name */
.nb-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.nb-font{display:grid;gap:2px;padding:10px 12px;min-height:64px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-align:center;color:var(--burg)}
.nb-font .s{font-size:1.45rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-font small{font-size:.66rem;color:var(--muted)}
.nb-font[aria-pressed=true]{border-color:var(--burg);background:var(--bg);box-shadow:inset 0 0 0 1px var(--burg)}

/* finishes */
.nb-finishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nb-finish{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;text-align:start;padding:10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);min-height:64px}
.nb-finish i{grid-row:1/3;width:34px;height:34px;border-radius:10px}
.nb-finish b{font-size:.88rem;color:var(--burg)}
.nb-finish small{font-size:.68rem;color:var(--muted);line-height:1.25}
.nb-finish.f-raised i{background:linear-gradient(135deg,#F6E7B8,#C9A24E 60%,#8E6E2E);box-shadow:0 4px 0 #7A5E28}
.nb-finish.f-engrave i{background:#E8DCC6;box-shadow:inset 0 3px 6px rgba(70,40,20,.55)}
.nb-finish.f-print i{background:conic-gradient(#E8826F,#D6A338,#9DB39A,#2D56A6,#6E3F7F,#E8826F)}
.nb-finish.f-vinyl i{background:#1F2B4A;box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--line)}
.nb-finish[aria-pressed=true]{border-color:var(--burg);background:var(--bg);box-shadow:inset 0 0 0 1px var(--burg)}

/* stands */
.nb-stands{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.nb-stand-opt{display:grid;justify-items:center;gap:8px;padding:12px 8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:.78rem;color:var(--ink);text-align:center;min-height:48px}
.nb-stand-opt i{width:70px;height:16px;border-radius:5px;background:var(--sw);box-shadow:0 5px 8px rgba(34,28,24,.2)}
.nb-stand-opt.wood i{background:repeating-linear-gradient(-6deg,var(--sw) 0 5px,color-mix(in srgb,var(--sw) 80%,#000) 5px 6px)}
.nb-stand-opt.clear i{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(160,210,200,.55));box-shadow:inset 0 0 0 1.5px rgba(120,170,160,.6),0 5px 8px rgba(34,28,24,.12)}
.nb-stand-opt i.none{background:none;box-shadow:none;border-bottom:2px dashed var(--line);border-radius:0}
.nb-stand-opt[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}

.nb-name-input{font-size:1.25rem;min-height:52px}
.nb-kashida{display:grid;gap:4px;padding:8px 10px;border-radius:12px;background:var(--bg)}
.nb-add-line,.nb-join{justify-self:start;gap:8px;min-height:44px}
.nb-add-line svg,.nb-join svg{width:18px;height:18px}
.nb-join:disabled{opacity:.55;cursor:progress}
.hint.ok{color:#2F6B3A}
.nb-warn{font-size:.8rem;color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:8px 10px}

/* price bar (a section that sells a product) */
.nb-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.nb-buy[hidden]{display:none}
.nb-price{display:grid;line-height:1.1;margin-inline-end:auto}
.nb-price b{font-size:1.35rem;color:var(--burg);font-family:var(--font-display)}
html[dir=rtl] .nb-price b{font-family:var(--font-arabic)}
.nb-price small{font-size:.72rem;color:var(--muted)}
.nb-qty button{width:40px;height:40px;display:grid;place-items:center}
.nb-qty button svg{width:16px;height:16px}
.nb-buy .btn{min-height:46px;gap:8px}
.nb-buy .btn svg{width:20px;height:20px}
.nb-buy .btn[hidden]{display:none}
.nb-why{flex-basis:100%;font-size:.76rem;color:var(--muted);margin:0}

/* ---- Jewellery ---- */
.jw .nb-scene{background:radial-gradient(ellipse at 50% 42%,#FBF7F2 0%,#EDE3D7 55%,#CDBFAF 100%)}
.jw.jw-bad .nb-dims b{color:#B4452F}
.jw-surfaces{justify-self:start;margin-bottom:4px}
.jw-meter{display:grid;gap:4px}
.jw-meter .bar{display:block;height:8px;border-radius:99px;background:var(--bg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.jw-meter .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-soft),var(--gold));border-radius:99px;transition:width .2s}
.jw-meter small{font-size:.74rem;color:#2E6B3F}
.jw-meter.bad .bar i{background:#C0392B}
.jw-meter.bad small{color:#B4452F}
.range-row .val{min-width:60px;text-align:center;font-weight:600;color:var(--burg);font-size:.85rem}

/* ---- 3D printing ---- */
.p3 .nb-scene{background:linear-gradient(180deg,#F1ECE6 0%,#DDD3C8 100%)}
.p3.p3-drop .nb-scene{box-shadow:0 0 0 3px var(--gold),0 14px 40px rgba(34,28,24,.14)}
.p3.p3-bad .nb-dims b{color:#B4452F}
.p3-stage.backlit{filter:drop-shadow(0 0 18px rgba(255,200,120,.55))}
.p3-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.p3-info div{background:var(--bg);border-radius:12px;padding:8px 10px}
.p3-info dt{font-size:.7rem;color:var(--muted)}
.p3-info dd{margin:0;font-weight:600;color:var(--burg)}
.p3-ok{font-size:.82rem;color:#2E6B3F;background:#EAF4EC;border:1px solid #CFE6D4;border-radius:10px;padding:8px 10px}
.p3-file{font-size:.85rem;color:var(--burg)}

/* ---- Embroidery ---- */
.emb .nb-scene{background:linear-gradient(180deg,#F4EFE8,#E2D7CA)}
.emb-host{position:absolute;inset:0}
.emb-host svg.emb-stage{width:100%;height:100%;display:block}
.emb.emb-bad .nb-dims b{color:#B4452F}
.emb-spools{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.emb-spool{display:grid;justify-items:center;gap:2px;padding:6px 2px 4px;border-radius:14px;border:1.5px solid transparent;background:transparent;font-size:.64rem;color:var(--ink);line-height:1.1;text-align:center;min-height:48px;transition:transform .18s,background .18s}
.emb-spool svg{width:46px;height:50px;transition:transform .2s}
.emb-spool:hover svg{transform:translateY(-3px) rotate(-4deg)}
.emb-spool[aria-pressed=true]{background:var(--bg);border-color:var(--burg)}
.emb-spool[aria-pressed=true] svg{transform:translateY(-4px) scale(1.06)}
.emb-fabric{width:48px;height:48px}
.emb-hoops{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.emb-hoop-card{display:grid;justify-items:center;gap:6px;padding:10px 8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--burg);text-align:center}
.emb-hoop-card i{display:block;width:70%;max-height:56px;border:5px solid #E9E3DA;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(107,29,47,.3)}
.emb-hoop-card b{font-size:.85rem}
.emb-hoop-card small{font-size:.66rem;color:var(--muted)}
.emb-hoop-card[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg);background:var(--bg)}
.emb-hoop-card[disabled]{opacity:.55}
.emb-layer-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 10px;border-radius:12px;text-align:start}
.emb-layer-pick:hover{background:var(--bg)}
.dot{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);flex:0 0 auto}
.emb-hr{border:0;border-top:1px solid var(--line);margin:4px 0}

/* stroke icons keep their outline look wherever a tile fills glyphs */
.nb-modes[hidden]{display:none}
.nb-tool svg[fill="none"],.nb-modes button svg[fill="none"],.nb-choice svg[fill="none"]{fill:none}

/* ---- Templates: photo chooser, palettes, add-on sets, sizes, shuffle (studio/templates.js) ---- */
.nb-chooser.grouped{place-content:start center;overflow:auto;padding:16px 14px}
.nb-chooser-groups{display:grid;gap:14px;width:min(760px,100%);margin-top:6px}
.nb-chooser-group h3{display:flex;align-items:baseline;gap:10px;font-size:1rem;margin-bottom:8px;text-align:start}
.nb-chooser-group h3 small{font-size:.74rem;font-weight:400;color:var(--muted)}
.nb-chooser-grid.photos{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-height:none;overflow:visible}
.nb-choice.photo{padding:6px 6px 10px;gap:6px}
.nb-choice.photo .thumb,.nb-template.photo .thumb{aspect-ratio:4/5;padding:0;background:var(--surface-2)}
.nb-choice.photo .thumb img,.nb-template.photo .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nb-choice.photo b{font-size:.86rem}
.nb-choice .thumb .ph-label{font-size:.72rem;color:var(--muted);padding:8px;text-align:center}
.nb-choice.photo[aria-pressed=true],.nb-template.photo[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}
@media (max-width:420px){.nb-chooser-grid.photos{grid-template-columns:1fr 1fr;max-width:none}.nb-choice.photo{grid-template-columns:1fr;justify-items:center;text-align:center}}
.nb-shuffle{position:absolute;top:10px;inset-inline-end:10px;z-index:4;width:auto;min-height:44px;padding:0 14px;gap:6px;border-radius:12px;background:var(--gold);color:var(--ink);box-shadow:0 6px 16px rgba(34,28,24,.18)}
.nb-page[data-stage] .nb-shuffle[hidden]{display:none}
.nb-shuffle span{font-size:.82rem;font-weight:600}
.nb-shuffle:hover{background:var(--gold)}

.nb-palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.nb-palette{display:grid;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:.8rem;text-align:start}
.nb-palette .strip{display:flex;height:34px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(34,28,24,.08)}
.nb-palette .strip i{flex:1;background:var(--sw)}
.nb-palette .strip i.mirror{background:linear-gradient(135deg,color-mix(in srgb,var(--sw) 55%,#fff),var(--sw) 45%,color-mix(in srgb,var(--sw) 70%,#fff) 55%,color-mix(in srgb,var(--sw) 72%,#000))}
.nb-palette .strip i.clear{background:linear-gradient(135deg,rgba(255,255,255,.95),color-mix(in srgb,var(--sw) 55%,transparent) 55%,rgba(255,255,255,.85)),repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/10px 10px}
.nb-palette .strip i.frosted{background:linear-gradient(160deg,#fff,var(--sw))}
.nb-palette .strip i.wood{background:repeating-linear-gradient(-8deg,var(--sw) 0 5px,color-mix(in srgb,var(--sw) 78%,#000) 5px 6px,var(--sw) 6px 11px,color-mix(in srgb,var(--sw) 88%,#fff) 11px 12px)}
.nb-palette[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}
.nb-addonsets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.nb-addonset{display:grid;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:.78rem;text-align:center}
.nb-addonset .thumb{display:grid;place-items:center;aspect-ratio:1.3;border-radius:10px;background:var(--surface-2)}
.nb-addonset .thumb svg{width:80%;height:80%;fill:var(--burg)}
.nb-addonset .thumb .none{font-size:.72rem;color:var(--muted)}
.nb-addonset[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}
.nb-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.nb-size{display:grid;gap:2px;padding:12px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-align:start}
.nb-size b{font-size:.86rem}
.nb-size small{font-size:.74rem;color:var(--muted)}
.nb-size[aria-pressed=true]{border-color:var(--burg);box-shadow:inset 0 0 0 1px var(--burg)}
.font-chip span{font-size:1.05rem}


/* =====================================================================================================
   Studio v2 — two surfaces, one shell: the DESIGN canvas (flat, crisp, editable on a bright studio) and
   the LIVE PREVIEW (the piece as it will be made). Wide screens: side by side, the preview sticky.
   Phones: a segmented switch, and a floating mini preview that opens the full one.
   ===================================================================================================== */
.nb-v2 .nb-scene{background:linear-gradient(180deg,#FBF7F1 0%,#F5EEE3 60%,#E7DAC6 100%);box-shadow:0 18px 44px rgba(34,28,24,.12)}
.nb-v2.no-photo .nb-fit::before{background:radial-gradient(ellipse at 50% 55%,rgba(255,255,255,.5),transparent 62%)}
.nb-v2 .nb-stagebar .group:first-child{min-width:104px}
.nb-surfaces{display:none;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:10px;width:max-content}
.nb-surfaces button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--burg)}
.nb-surfaces button svg{width:20px;height:20px}
.nb-surfaces button[aria-selected=true]{background:var(--burg);color:var(--color-on-primary)}
.nb-preview-col{display:grid;gap:8px;align-content:start}
.nb-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.nb-preview-title{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--burg);font-size:.95rem}
.nb-preview-title svg{width:20px;height:20px}
.nb-preview-bar .group{display:flex;gap:2px}
.nb-preview-box{position:relative;aspect-ratio:1/1.05;max-height:640px;border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#FBF7F1,#EDE3D4 70%,#E1D1BA);box-shadow:0 18px 44px rgba(34,28,24,.12);touch-action:none;overscroll-behavior:contain}
.nb-preview-host{position:absolute;inset:0;cursor:grab}
.nb-preview-host:active{cursor:grabbing}
.nb-preview-host .nb-stage,.nb-preview-host .nb-stage-2d{position:absolute;inset:0;width:100%;height:100%;display:block}
.nb-preview-host .nb-stage-2d svg.nb-stage{overflow:visible}
.nb-preview-hint{font-size:.76rem;color:var(--muted);text-align:center;margin:0}
.nb-mini{position:fixed;inset-inline-end:12px;bottom:calc(var(--nb-toolbar-h,96px) + 14px + env(safe-area-inset-bottom));z-index:39;width:88px;height:88px;border-radius:18px;overflow:hidden;background:#F5EEE3;border:1.5px solid var(--line);box-shadow:0 10px 26px rgba(34,28,24,.22);display:grid;place-items:center}
.nb-mini[hidden]{display:none}
.nb-mini img{width:100%;height:100%;object-fit:cover}
.nb-mini svg{position:absolute;inset-inline-end:6px;bottom:6px;width:18px;height:18px;color:var(--burg);background:rgba(246,240,230,.9);border-radius:6px;padding:2px}
.nb-v2 .nb-hint{margin-bottom:10px}
.nb-v2 .nb-tools{margin-top:10px}

/* selection bar: two rows — actions, then the curated colour chips for the selected layer */
.nb-v2 .nb-selbar{flex-direction:column;align-items:center;gap:0;padding:2px 6px;border-radius:22px}
.nb-selbar-row{display:flex;gap:2px}
.nb-selcolors{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 6px 10px;max-width:320px}
.nb-selcolors[hidden]{display:none}
.nb-selcolors .nb-swatch{width:34px;height:34px;border-width:2px}
.nb-selcolors .nb-mat{padding:4px;min-height:0;font-size:0;border-radius:10px}
.nb-selcolors .nb-mat i{width:30px;height:30px;border-radius:8px}
.nb-v2 .nb-stage-host.nb-drop-over{outline:3px dashed rgba(31,94,91,.6);outline-offset:-3px;border-radius:12px}

/* the add-on tray: search, categories, a grid you can drag from */
.nb-tray{display:grid;gap:10px}
.nb-tray-search{position:relative}
.nb-tray-search input{width:100%;min-height:46px;padding-inline-start:42px}
.nb-tray-search svg{position:absolute;inset-inline-start:14px;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--muted);pointer-events:none}
.nb-tray-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.nb-tray-cats::-webkit-scrollbar{display:none}
.nb-tray-cats .chip{flex:0 0 auto;white-space:nowrap}
.nb-tray-grid .nb-asset{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.nb-tray-grid .nb-asset.dragging{opacity:.4}
.nb-tray-grid .nb-asset svg path[data-slot="1"]{fill:var(--gold)}
.nb-drag-ghost{position:fixed;left:0;top:0;width:64px;height:64px;pointer-events:none;z-index:99;border-radius:16px;background:rgba(246,240,230,.92);border:1.5px solid var(--burg);box-shadow:0 12px 30px rgba(34,28,24,.3);display:grid;place-items:center;will-change:transform}
.nb-drag-ghost svg{width:44px;height:44px;fill:var(--burg)}

/* detail fields as compact cards: value, an eye to show/hide, an icon picker in a popover */
.nb-fcard{display:grid;gap:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.nb-fcard[data-on=false]{background:var(--bg);border-style:dashed}
.nb-fcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:.88rem;color:var(--burg)}
.nb-fcard-head .nb-ib{min-width:40px;min-height:40px;border-radius:10px}
.nb-fcard-head .nb-ib svg{width:20px;height:20px}
.nb-fcard-head .nb-ib[aria-pressed=false]{color:var(--muted)}
.nb-fcard .field{min-height:44px}
.nb-fcard[data-on=false] .field{opacity:.5}
.nb-fcard-icon{position:relative;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.nb-iconpick{min-height:40px;gap:6px}
.nb-iconpick svg{width:22px;height:22px;fill:currentColor}
.nb-popover{position:absolute;inset-inline-start:0;top:calc(100% + 6px);z-index:5;display:flex;flex-wrap:wrap;gap:6px;max-width:300px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(34,28,24,.18)}
.nb-popover[hidden]{display:none}
.nb-popover .chip{min-height:40px;padding:6px 10px}
.nb-popover .chip svg{width:22px;height:22px;fill:currentColor}
.nb-sizeref{display:flex;flex-wrap:wrap;gap:6px}

/* phones: one surface at a time */
@media (max-width:899px){
  .nb-surfaces{display:flex}
  .nb-v2[data-surface=design] .nb-preview-col{display:none}
  .nb-v2[data-surface=preview] .nb-design-col{display:none}
  .nb-v2[data-surface=preview] .nb-preview-box{height:min(62dvh,560px);aspect-ratio:auto}
  .nb-v2[data-surface=preview] .nb-mini{display:none}
  .nb-v2 .nb-selbar{bottom:8px}
}
/* wide: the design on the left with its tools below, the live preview sticky on the right */
@media (min-width:900px){
  .nb-v2 .nb-layout{grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:22px;align-items:start}
  .nb-v2.has-preview .nb-design-col{display:grid;gap:10px}
  .nb-v2 .nb-scene{height:min(64vh,600px)}
  .nb-v2 .nb-tools{position:static;display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start}
  .nb-v2 .nb-toolbar{flex-direction:column;flex-wrap:nowrap;gap:6px}
  .nb-v2 .nb-tool{flex:0 0 auto;min-height:64px}
  .nb-v2 .nb-sheet{max-height:520px;min-height:260px}
  .nb-v2 .nb-preview-col{position:sticky;top:84px}
  .nb-v2 .nb-mini{display:none}
}

/* single-surface editors (jewellery, 3D print, embroidery) keep the full width */
@media (min-width:900px){.nb-v2:not(.has-preview) .nb-layout{grid-template-columns:1fr}.nb-v2:not(.has-preview) .nb-tools{grid-template-columns:170px minmax(0,1fr)}}
.nb-v2[data-coming-soon="uv"] .nb-scene-note{background:var(--gold);color:var(--ink);border-color:var(--gold)}

.nb-preview-empty{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px;font-size:.9rem;color:var(--muted);background:linear-gradient(180deg,#FBF7F1,#EDE3D4)}
.nb-v2.nb-empty .nb-preview-empty{display:grid}
.nb-v2.nb-empty .nb-preview-host{visibility:hidden}
.nb-v2 .nb-scene-note{inset-inline-end:132px}

/* ---- C01: no nested scroll, no touch trap, the mini preview in the scene's corner ---- */
.nb-scene,.nb-stage-host,.nb-preview-box,.nb-preview-host{touch-action:pan-y}
.nb-chooser-grid.many{max-height:none;overflow:visible}
.nb-chooser.grouped{overflow:visible}
/* the chooser flows in the page: while choosing, the scene box gives way to it */
.nb-v2.nb-empty .nb-scene{height:auto;min-height:0;position:static;overflow:visible;box-shadow:none;border:0;background:none}
.nb-v2.nb-empty .nb-fit,.nb-v2.nb-empty .nb-scene-note,.nb-v2.nb-empty .nb-selbar,.nb-v2.nb-empty .nb-mini{display:none}
.nb-v2.nb-empty .nb-chooser{position:static;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 16px 20px;backdrop-filter:none;-webkit-backdrop-filter:none}
.nb-v2 .nb-mini{position:absolute;inset-inline-end:10px;bottom:10px;width:64px;height:64px;z-index:3}
.nb-page.sheet-open .nb-mini{display:none}
@media (min-width:900px){
  .nb-v2 .nb-sheet{max-height:none;min-height:0}
  .nb-v2 .nb-sheet .body{overflow:visible}
  .nb-v2 .nb-tools{position:sticky;top:84px}
}