/* Neutral light (ZEIM brand: black, blue, grey) is the default look; Dark is a choice (html[data-theme=dark], stored in localStorage.theme). Tokens and contrast: reports/design/home-redesign-spec.md section 5 (tests/test_b3_theme.py recomputes the ratios). */
:root{--bg:#F7F7F8;--panel:#FFFFFF;--panel2:#F1F2F4;--sunk:#F4F5F7;--line:#D9DBDF;--ctl:#8A8A8A;--txt:#0A0A0A;--mut:#555555;--acc:#0066FF;--on-acc:#FFFFFF;--accink:#0052CC;--acc2:#0052CC;--tint:#E6F0FF;--warm:#0066FF;--warmtint:#E6F0FF;--focus:#0066FF;--ok:#166534;--okbg:#E3F5E8;--bad:#B91C1C;--badbg:#FDE8E8;--warn:#8A5300;--r:12px;--stage1:#2c3547;--stage2:#0b0e14;color-scheme:light}   /* ZEIM brand: black #0A0A0A, blue #0066FF (primary, accents, focus), grey #8A8A8A (borders/controls only: it fails AA for small text, so body/help text uses #555) */
html[data-theme=dark]{--bg:#0A0A0A;--panel:#141414;--panel2:#1B1B1B;--sunk:#101010;--line:#2E2E2E;--ctl:#8A8A8A;--txt:#F2F2F2;--mut:#B8B8B8;--acc:#0066FF;--on-acc:#FFFFFF;--accink:#6AA6FF;--acc2:#6AA6FF;--tint:#0B1F40;--warm:#4D94FF;--warmtint:#0D1A2E;--focus:#6AA6FF;--ok:#4ADE80;--okbg:#12301F;--bad:#FF9A9A;--badbg:#3A1A1E;--warn:#FBBF24;color-scheme:dark}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
*{box-sizing:border-box}html{height:100%}body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-size:19px;letter-spacing:.2px}.brand b{color:var(--acc2)}.logo{color:var(--acc);margin-right:4px}.spacer{flex:1}
.layout{display:grid;grid-template-columns:380px 1fr;gap:16px;padding:16px;max-width:1500px;margin:0 auto;align-items:start}
@media(max-width:960px){.layout{grid-template-columns:1fr}}
.panel,.result,.history{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.controls{padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.step h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.step h2 i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:11px}
.drop{display:grid;place-items:center;min-height:130px;border:2px dashed var(--ctl);border-radius:var(--r);cursor:pointer;text-align:center;padding:10px;transition:.15s;background:var(--panel2);overflow:hidden}
.drop:hover,.drop.over{border-color:var(--accink);background:var(--tint)}
.drop span{display:block;color:var(--mut);font-size:12px}.big{font-size:30px}
.drop img{max-width:100%;max-height:170px;border-radius:8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{background:var(--panel2);border:1px solid var(--ctl);border-radius:10px;color:var(--txt);padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s}
.card .ico{font-size:22px}.card small{color:var(--mut);font-size:11px;text-align:center}
.card:has(input:checked){border-color:var(--accink);background:var(--tint);box-shadow:0 0 0 1px var(--accink) inset}
.card:hover{border-color:var(--ctl)}.card.on{border-color:var(--accink);background:var(--tint);box-shadow:0 0 0 1px var(--accink) inset}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-size:12px;color:var(--mut)}.field label em{font-style:normal;margin-left:4px}
.field.chk{justify-content:flex-end;gap:6px}.field.chk label{color:var(--txt);display:flex;gap:6px;align-items:center;font-size:13px}
.wide2{grid-column:1/-1}
input[type=number],input[type=text],input:not([type]),select,textarea{background:var(--panel);border:1px solid var(--ctl);border-radius:8px;color:var(--txt);padding:7px 9px;width:100%;font:inherit}
input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.range{display:flex;gap:10px;align-items:center}.range input[type=range]{flex:1;accent-color:var(--acc)}.range input[type=number]{width:80px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px}
details{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:0 10px;background:var(--sunk)}
summary{cursor:pointer;padding:8px 0;font-weight:600;font-size:13px}details[open]>summary{margin-bottom:6px}
.help{color:var(--mut);font-size:12px;margin:4px 0}.help.center{text-align:center}.sticky{background:var(--panel2);border-radius:8px;padding:8px 10px}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--ctl);border-radius:10px;padding:3px;gap:2px}
.seg.wide{display:flex}.seg.wide button,.seg.wide label{flex:1;text-align:center}
.seg button,.seg label{background:none;border:0;color:var(--mut);padding:6px 14px;border-radius:8px;cursor:pointer;font:inherit}
.seg button.on,.seg label.on,.seg label:has(input:checked){background:var(--tint);color:var(--txt);box-shadow:inset 0 0 0 2px var(--accink)}
.btn{background:var(--panel2);border:1px solid var(--ctl);color:var(--txt);padding:8px 14px;border-radius:9px;cursor:pointer;font:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn:hover:not(:disabled){border-color:var(--acc)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--acc);border:2px solid var(--accink);color:var(--on-acc);font-weight:600}
.btn.primary:hover:not(:disabled){filter:brightness(1.1)}.btn.big{padding:13px;font-size:15px;justify-content:center}
.btn.ghost{background:none}.btn.small{padding:5px 10px;font-size:12px}.btn.danger{color:var(--bad)}
.stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.viewer{position:relative;height:min(58vh,560px);min-height:340px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,var(--stage1),var(--stage2));color:#E6EAF2}
.viewer canvas{display:block;width:100%;height:100%}
.empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--mut);gap:4px}
.viewer .empty{color:#C5CEDF;position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:4px;padding:0}
.empty span{font-size:12px}
.busy{position:absolute;inset:0;background:#0b0e14cc;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:3}
.spin{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--acc2);border-radius:50%;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.vtools{position:absolute;right:10px;top:10px;display:flex;gap:6px;z-index:2}
.result{padding:12px 14px}.resbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.stats{display:flex;gap:8px;flex-wrap:wrap}.pill{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12px;color:var(--mut)}
.pill.ok{color:var(--ok);border-color:var(--ok)}.pill.bad{color:var(--bad)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dl{display:flex;gap:6px}
.auto{margin-top:10px}.auto table{width:100%;border-collapse:collapse;font-size:13px}
.auto td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:top}.auto td:first-child{color:var(--mut);white-space:nowrap}.auto td:last-child{color:var(--mut);font-size:12px}
.history{padding:12px 14px}.hhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}.hhead h3{margin:0;font-size:14px}
.hlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.hlist{grid-template-columns:repeat(2,1fr)}}
.hcard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.hcard.cur{border-color:var(--accink)}.hcard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#000;cursor:pointer}
.hcard .meta{padding:6px 8px;font-size:12px}.hcard .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .meta span{color:var(--mut)}.hcard .row2{display:flex;gap:4px;padding:0 8px 8px;flex-wrap:wrap}
.hcard .row2 a,.hcard .row2 button{font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--mut);cursor:pointer;text-decoration:none}
.hcard .row2 a:hover,.hcard .row2 button:hover{color:var(--txt);border-color:var(--acc)}
.hslot{border:1px dashed var(--ctl);border-radius:10px;min-height:120px;display:grid;place-items:center;color:var(--mut);font-size:12px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--txt);padding:0;width:min(560px,94vw)}
dialog::backdrop{background:#000a;backdrop-filter:blur(2px)}
.dlg.wide{width:min(760px,94vw)}dialog:has(.wide){width:min(760px,94vw)}
.dlg .dh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}.dlg h3{margin:0}
.dlg .body{padding:14px 16px;max-height:70vh;overflow:auto}.dlg h4{margin:12px 0 6px}.dlg .df{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.x{background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer}hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.slicers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.slicers a{justify-content:center}.slicers a.def{border-color:var(--acc)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inl{display:flex;gap:5px;align-items:center;color:var(--mut)}
.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs button{background:none;border:0;color:var(--mut);padding:6px 12px;border-bottom:2px solid transparent;cursor:pointer;font:inherit}.tabs button.on{color:var(--txt);border-color:var(--acc)}
.printer{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--sunk)}
.printer .grid2{margin-bottom:0}.acc{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--sunk)}
.acc .info{flex:1}.acc small{color:var(--mut);display:block}.acc code,code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:11px}
.fulllist{display:grid;gap:8px}.fl{display:flex;gap:10px;align-items:center;background:var(--panel2);border-radius:10px;padding:6px 10px}.fl img{width:56px;height:42px;object-fit:cover;border-radius:6px}.fl span{flex:1}
#toasts{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--acc);padding:10px 14px;border-radius:9px;max-width:360px;box-shadow:0 8px 30px #0008}
.toast.err{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}
/* ---- nav / pages / community ---- */
.logoimg{height:36px;width:auto;display:block;background:none;border-radius:0;padding:0}
.brand{display:flex;align-items:center;text-decoration:none}
.nav{display:flex;gap:4px}.nav button{background:none;border:0;color:var(--mut);padding:7px 14px;border-radius:9px;cursor:pointer;font:inherit;font-weight:600}
.nav button.on{background:var(--panel2);color:var(--txt);box-shadow:0 -2px 0 var(--acc2) inset}
.page{max-width:1200px;margin:0 auto;padding:18px 16px}.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pagehead h1{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.pcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.pcard .ph{aspect-ratio:4/3;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,var(--warmtint),var(--panel2));position:relative}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .ex{position:absolute;top:6px;left:6px;font-size:10px;color:#fff;background:#000a;padding:2px 7px;border-radius:99px;letter-spacing:.06em}
.pcard .meta{padding:9px 11px}.pcard .meta b{display:block}.pcard .meta span{color:var(--mut);font-size:12px}
.lessons .pcard .ph{aspect-ratio:3/1;background:linear-gradient(135deg,var(--warmtint),var(--panel2))}
.bar{height:6px;background:var(--bg);border-radius:9px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--ok)}
.lesson{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.lesson ol{padding-left:0;list-style:none;counter-reset:s}.lesson li.st{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--sunk)}
.lesson li.st.done{border-color:var(--ok)}.lesson li.st label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}.lesson li.st p{margin:4px 0 0 24px;color:var(--mut)}
.banner{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:8px}
.sharepage{max-width:760px;margin:20px auto;padding:0 16px}.sharepage .steps li{margin-bottom:10px}.sharethumb{max-width:100%;border-radius:10px}
.sharepage a{color:var(--acc2)}.sharepage .btn{color:var(--on-acc)}
input[type=search]{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:7px 9px}
.tag{display:inline-block;background:var(--panel2);border-radius:99px;padding:1px 8px;font-size:11px;margin:2px;color:var(--mut)}
[hidden]{display:none !important}
/* ---- Edit workspace ---- */
body[data-level=beginner] [data-lvl=expert],body[data-level=expert] [data-lvl=beginner]{display:none !important}
.bigtools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bigtool{background:var(--panel2);border:1px solid var(--line);border-radius:14px;color:var(--txt);padding:16px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;transition:.15s}
.bigtool .ico{font-size:30px}.bigtool b{font-size:15px}.bigtool small{color:var(--mut);font-size:11px;text-align:center}
.bigtool:hover:not(:disabled){border-color:var(--acc)}.bigtool.on{border-color:var(--acc);background:var(--tint);box-shadow:0 0 0 1px var(--acc) inset}.bigtool:disabled{opacity:.4;cursor:not-allowed}
.tooldrawer{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.tool-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.tool-row .btn{flex:1;justify-content:center;min-width:70px}
details.tool>summary{display:flex;justify-content:space-between}
.grid3t{display:grid;grid-template-columns:repeat(3,1fr);gap:0 8px}
.oplist{margin:6px 0 0;padding-left:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.oplist li{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:12px;cursor:pointer;color:var(--mut)}
.oplist li.cur{border-color:var(--acc);color:var(--txt)}.oplist li.future{opacity:.45;border-style:dashed}.oplist li:hover{border-color:var(--acc2)}
.measure{position:absolute;left:10px;bottom:10px;color:#E6EAF2;background:#0b0e14dd;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;z-index:2}
.info-table{width:100%;font-size:12px;border-collapse:collapse}.info-table td{padding:3px 6px;border-top:1px solid var(--line)}.info-table td:first-child{color:var(--mut)}
.note{background:var(--tint);border-radius:8px;padding:6px 10px;margin-top:6px}
.warn{color:var(--warn)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#shGo,#shClear{min-height:44px;min-width:44px}
@media (max-width:600px){#shGo .lbl{display:none}}
.empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:12px 0}

/* ---- phones and small tablets (T1): the top bar wraps, nothing scrolls sideways, targets >= 44px ---- */
html{max-width:100%;overflow-x:hidden}body{max-width:100%;overflow-x:clip} /* body must NOT be the scroller (overflow-x:hidden + height:100% made it one: iOS toolbar/overscroll and window.scrollY broke) */
@media (max-width:768px){
  .topbar{flex-wrap:wrap;gap:6px 10px;padding:6px 12px}
  .topbar .spacer{display:none}
  .brand{order:1;margin-right:auto}
  .modepick{order:4;flex:1 0 100%}
  #btnAccount{order:2}#btnSettings{order:3}
  .topbar .nav{order:5;flex:1 0 100%;display:flex;gap:4px}
  .topbar .nav button{flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;font-size:14px}
  .topbar .btn{min-height:44px;min-width:44px}
  .pagehead{flex-wrap:wrap;gap:8px}
  .pagehead .row,#shForm{flex-wrap:wrap}
  #shSearch{width:100% !important;flex:1 1 160px}
  dialog{max-width:100vw}
  img,canvas,video,svg{max-width:100%}
}
@media (max-width:480px){
  .topbar .btn .lbl{display:none}
  .layout{padding:10px;gap:10px}
}

/* photo picker */
.pp{display:flex;flex-direction:column;gap:10px}
.pp-actions{display:flex;gap:10px;flex-wrap:wrap}
.pp-actions .btn.big{flex:1 1 140px;min-height:52px;font-size:16px;justify-content:center}
.pp-sample .btn{min-height:44px;width:100%}
.pp-msg{margin:0;padding:10px 12px;border-radius:10px;background:var(--badbg);border:1px solid var(--bad);color:var(--txt)}
.pp-msg.ok{background:var(--okbg);border-color:var(--ok);color:var(--txt)}
.pp-note{margin:0;color:var(--mut);font-size:12px;line-height:1.5}
.pp-cam{display:flex;flex-direction:column;gap:10px}
.pp-cam video,.pp-cam canvas{width:100%;max-height:260px;object-fit:contain;background:#000;border-radius:10px}
.sr-only:focus{clip:auto}
.btn.big{min-height:44px}
.linkbtn{background:none;border:0;color:var(--acc2);text-decoration:underline;cursor:pointer;font:inherit;min-height:44px;padding:0 8px}
.pp-chosen{margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--mut)}
.making{display:flex;align-items:center;gap:8px;color:var(--txt)}
.spin.sm{width:16px;height:16px;border-width:2px;display:inline-block}
@media (max-width:768px){
  /* Expert mode: Build stays reachable on the whole Studio page (fixed, not sticky inside the controls panel: QA-5), above the iOS home bar.
     Beginner builds on its own, so nothing covers the Style captions there. */
  body[data-level=expert] #viewCreate:not([hidden]) #btnBuild{position:fixed;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:4;box-shadow:0 6px 20px #000a;width:auto}
  body[data-level=expert]{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
.drop img{max-height:140px}

/* SEND-1: the server decides who may use outside apps; the page hides what would be refused */
body[data-links="0"] #btnPrint { display: none; }
.sendsw { margin: 8px 0; padding: 8px 10px; background: var(--panel2); border-radius: 10px; }
.sw { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sw input[type=checkbox] { width: 24px; height: 24px; }
.sw .state { font-weight: 700; margin-left: auto; }
#dlgSend { max-width: 440px; }


/* ---- IOS-2: touch targets >= 44px, inputs 16px (iOS zooms into smaller ones), safe areas, viewer vs page scroll ---- */
@media (max-width:768px), (pointer:coarse) {
  .brand{display:inline-flex;align-items:center}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea{font-size:16px;min-height:44px}
  button,.btn,.btn.small,.btn.ghost,summary,.seg button,.seg label,.tabs button,.nav button,.x,.linkbtn,.oplist li,.hcard .row2 a,.hcard .row2 button,
  .brand,.card,.bigtool,a.btn,[role=button],label.chk,#vtools .btn{min-height:44px;min-width:44px}
  .btn.small,.hcard .row2 a,.hcard .row2 button{padding:10px 12px;font-size:14px}
  summary{display:flex;align-items:center}
  label.inl,.lesson li.st label,.sw{min-height:44px;align-items:center}
  input[type=checkbox],input[type=radio]{width:24px;height:24px;margin:10px}
  input[type=range]{height:44px;min-height:44px;margin:0}
  .hcard .row2{gap:6px;flex-wrap:wrap}
  .x{font-size:22px}
  /* toasts go to the top, away from the home indicator and bottom bars */
  #toasts{top:calc(8px + env(safe-area-inset-top));bottom:auto;left:12px;right:12px}
  .toast{max-width:calc(100vw - 24px)}
  dialog{max-height:calc(100dvh - 24px);overflow:auto}
}
/* safe areas (needs viewport-fit=cover): keep content out from under the notch / home bar in landscape and standalone mode */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
.topbar{padding-top:calc(10px + env(safe-area-inset-top))}
/* 3D viewer: dvh where "visible height" is meant; a 16px strip on each side lets a finger scroll the page, the middle still rotates */
.viewer{height:min(58vh,560px);height:min(58dvh,560px)}
@media (pointer:coarse), (max-width:768px) {
  .viewer::before,.viewer::after{content:"";position:absolute;top:0;bottom:0;width:16px;z-index:3;touch-action:pan-y}
  .viewer::before{left:0}.viewer::after{right:0}
  .viewer .vtools{z-index:4}
  .touch-hint{display:block}
}
@media (orientation:landscape) and (max-height:500px) { .viewer{height:calc(100dvh - 120px);min-height:240px} }
.touch-hint{display:none;margin:6px 0 0;color:var(--mut);font-size:13px}

/* ---- SEND-2: the Send sheet. Bottom sheet on phones, centred dialog elsewhere ---- */
#dlgSendSheet{max-width:440px}
.sheet-rows{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.sheet-row{display:flex !important;flex-direction:column;align-items:flex-start !important;gap:2px;text-align:left;min-height:56px;padding:10px 14px;text-decoration:none;white-space:normal}
.sheet-row small{font-weight:400;opacity:.85;line-height:1.35}
.fmt{display:flex;gap:6px;margin:6px 0}
.fmt button{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:10px;cursor:pointer;font:inherit;font-weight:700}
.fmt button.on{background:var(--tint);border-color:var(--accink);color:var(--txt);box-shadow:inset 0 0 0 1px var(--accink)}
.fmt button small{font-weight:400;font-size:12px;opacity:.9}
.help.bad{color:var(--bad);min-height:0}
.row.end{justify-content:flex-end;margin-top:8px}
details.more{margin:8px 0}
@media (max-width:600px){
  #dlgSendSheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:90dvh;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
}
body[data-links="0"] #editPrint { display: none; }

/* Print dialog: Creality Cloud first on phones, desktop slicers under "On a computer" */
.cre{border:1px solid var(--acc);border-radius:10px;padding:10px;background:rgba(255,255,255,.03)}
.cre .row{display:flex;gap:8px;flex-wrap:wrap}
.cre-steps{margin:8px 0 4px;padding-left:20px}
.slicers-more{border:1px dashed var(--line);border-radius:10px;padding:2px 10px}
.slicers-more summary{min-height:44px;display:flex;align-items:center}

/* footer link + Thank-you page */
.sitefoot{padding:16px 20px calc(24px + env(safe-area-inset-bottom));text-align:center}
.sitefoot a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 14px}
table.credits{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
table.credits th,table.credits td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.sharepage details.maker summary{min-height:44px;display:flex;align-items:center;gap:6px}
.sharepage .credit{margin:4px 0 10px}
.credit-line{font-size:13px;margin:2px 0}
.credit-line a,.sharepage a{color:var(--acc2)}
a.creator-link{color:var(--acc2);text-decoration:underline;text-underline-offset:3px}a.creator-link:visited{color:var(--acc2)}a.creator-link:hover{color:var(--txt)}
.inline-msg{margin:.6rem 0;padding:.6rem .8rem;border-left:4px solid var(--bad);background:var(--badbg);color:var(--txt);font-size:16px;line-height:1.4;border-radius:6px}
.inline-msg.ok{border-left-color:var(--ok);background:var(--okbg)}.calm{padding:.4rem 0}.calm p{margin:.4rem 0}
.sharepage p.help a{display:inline-block;min-height:44px;line-height:44px;padding:0 8px}
fieldset.reasons{border:0;padding:0;margin:0 0 12px}fieldset.reasons legend{font-weight:600;margin-bottom:6px}
label.choice{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px;border-radius:8px;cursor:pointer}label.choice:hover{background:rgba(255,255,255,.06)}
label.choice input{width:22px;height:22px;flex:none}#repDetails{width:100%;font-size:16px}
/* every text-like field is dark on dark (a bare type=password / date / textarea used to render as a bright white box on iPhone) */
input[type=password],input[type=date],input[type=email],input[type=url],input[type=tel],input[type=search],textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:7px 9px;width:100%;font:inherit;color-scheme:dark}
input[type=password]:focus,input[type=date]:focus,input[type=search]:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:1}
@media (max-width:768px),(pointer:coarse){input[type=password],input[type=date],input[type=email],input[type=url],input[type=tel],input[type=search],textarea{font-size:16px;min-height:44px}}
.hcard button.star{min-width:44px;min-height:44px;font-size:20px;color:var(--warm)}.hcard button.star:not(.on){color:var(--mut)}
.fl{flex-wrap:wrap;gap:6px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (forced-colors:active){.seg button.on,.card.on,.seg label:has(input:checked),.fmt button.on{outline:2px solid Highlight}}

.modepick{display:flex;align-items:center;gap:6px}.modepick label{font-weight:600;font-size:13px}
.modepick select{min-height:44px;min-width:150px;font-size:16px;width:auto}
.modeline{margin:0 0 4px;font-size:13px;color:var(--mut)}
.tnote{margin:8px auto 0;max-width:1100px;background:var(--tint);border:2px solid var(--accink);border-radius:var(--r);padding:12px 16px}.tnote h2{margin:0 0 4px;font-size:16px}.tnote p{margin:0 0 8px}

/* ---- Home redesign (Batch B3) ---- */
.layout>.hero,.layout>.pathnav{grid-column:1/-1}
.hero{background:linear-gradient(135deg,var(--panel2),var(--warmtint));border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.hero h1{margin:0;font-size:clamp(24px,5.5vw,36px);line-height:1.15;color:var(--txt)}
.hero .lede{margin:0;font-size:17px;line-height:1.45;color:var(--txt);max-width:60ch}
.hero a,.explore a{color:var(--accink)}
.hero .pp-actions .btn.big{min-height:56px}
.hero .pp-sample .btn{background:none;border:0;color:var(--accink);text-decoration:underline;min-height:44px;width:auto;padding:0 6px}
.hero .pp-ack,.hero .pp-note{max-width:60ch}
body[data-level=expert] .hero{padding:8px 14px;background:none;border:0}
.pathnav{margin:0}.path{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.path li{display:flex;align-items:center;gap:6px;padding:8px 12px;border:2px solid var(--line);border-radius:99px;background:var(--panel);color:var(--mut);font-weight:600;min-height:44px}
.path li .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--ctl);font-size:13px}
.path li.cur{border-color:var(--accink);background:var(--tint);color:var(--txt)}
.path li.done{border-color:var(--ok);background:var(--okbg);color:var(--txt)}.path li.done .n{border-color:var(--ok);color:var(--ok)}
.pathnav .help{margin:6px 2px 0}
fieldset.cards{border:0;padding:0;margin:0;min-width:0}fieldset.cards legend{padding:0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:8px;font-weight:700}
fieldset.cards legend i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:11px;margin-right:6px}
label.card input,.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.card{position:relative}
.card:has(input:focus-visible),.seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
fieldset.seg{margin:0;min-width:0}fieldset.seg legend{font-size:13px;color:var(--mut);padding:0 0 4px;float:left;width:100%}
fieldset.seg label{position:relative;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;padding:6px 14px}
.vtools2{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
#result h2{margin:0 0 8px;font-size:18px}#result h2:focus{outline:none}
.hlist{list-style:none;margin:0;padding:0}.thumbbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.hhead h2{margin:0;font-size:16px}
.explore{margin-top:16px}.explore h2{font-size:16px;margin:0 0 8px}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:12px 14px;background:var(--panel);border:2px solid var(--ctl);border-radius:var(--r);text-decoration:none;color:var(--txt)}
.tile b{color:var(--accink)}.tile span{color:var(--mut);font-size:14px}
.sitefoot .linkbtn{min-height:44px;padding:0 12px;color:var(--accink)}

.sheet-rows h3.group{margin:12px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.sheet-rows ul.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sheet-row{border:2px solid var(--ctl)}
.untested{font-size:11px;font-weight:700;border:1px solid var(--warn);color:var(--warn);border-radius:99px;padding:0 7px;margin-left:4px;white-space:nowrap}
.hero .pp-actions .btn.big{flex:0 1 360px}
@media(max-width:600px){.hero .pp-actions .btn.big{flex:1 1 100%}}

/* ---- Nozzle it (Batch B4) ---- */
ul.grid{list-style:none;padding:0;margin:14px 0 0}
.pcard{position:relative}.pcard .meta h2{margin:0;font-size:inherit}.pcard .meta h2 a{color:var(--txt);text-decoration:none;display:inline-block;min-height:44px;line-height:22px;padding:11px 0;font-weight:700}
.pcard .meta h2 a::after{content:"";position:absolute;inset:0;z-index:1}
/* long unbroken titles: wrap anywhere, then clamp to 2 lines with an ellipsis (both card styles) */
.pcard .meta{min-width:0}.pcard .meta b,.pcard .meta h2 a{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.pcard .meta h2 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:66px;box-sizing:border-box}
.pcard .meta b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.pcard .meta h2 a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pcard .meta{padding-bottom:0}
.cardfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 11px 10px;margin-top:auto}.cardfoot .dl{color:var(--mut);font-size:13px}
.cardfoot .nzwrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.cardfoot .nz,.cardfoot .nz-static{position:relative;z-index:2}
.nz{--nz-c:var(--txt);display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:4px 12px;border-radius:999px;border:2px solid var(--ctl);background:var(--panel);color:var(--nz-c);font:inherit;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;position:relative;z-index:2}
.nz:hover{background:var(--panel2)}
.nz-ico{width:24px;height:24px;flex:none;overflow:visible}
.nz-ico .nz-body{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0}
.nz-ico .nz-drop{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:50% 0}
.nz[aria-pressed=true]{--nz-c:var(--warm);background:var(--warmtint);border-color:var(--warm)}
.nz[aria-pressed=true] .nz-body{fill:currentColor}
.nz[aria-pressed=true] .nz-drop{opacity:1}
.nz[aria-pressed=true] .nz-count,.nz[aria-pressed=true] .nz-text{color:var(--txt)}
.nz[aria-disabled=true]{--nz-c:var(--mut);border-style:dashed;cursor:not-allowed}
.nz-lg{padding:6px 18px;font-size:17px}
.nz.pop .nz-body{animation:nzpress .22s ease-out}.nz.pop .nz-drop{animation:nzdrop .45s ease-out}.nz.pop-off .nz-body{animation:nzpress .16s ease-out}
@keyframes nzpress{0%{transform:translateY(0) scale(1)}45%{transform:translateY(2px) scale(.92)}100%{transform:translateY(0) scale(1)}}
@keyframes nzdrop{0%{opacity:0;transform:translateY(-6px) scale(.4)}60%{opacity:1;transform:translateY(1px) scale(1.15)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.nz *{animation:none!important}}
.nz-static{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--mut);font-weight:600}
.nz-static svg{width:24px;height:24px}.nz-static .nz-body{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}.nz-static .nz-drop{opacity:0}
.nz-note{font-size:14px;color:var(--mut);margin:0}
.itrow .nzwrap,.row .nzwrap{display:inline-flex;flex-direction:column;gap:2px}
@media (forced-colors:active){.nz[aria-pressed=true]{outline:3px solid Highlight}}

.tnote .code,.calm .code,#soCode .code{font:700 17px ui-monospace,monospace;letter-spacing:.08em;background:var(--panel);border:1px solid var(--ctl);border-radius:6px;padding:1px 6px;word-break:break-all}
.handup{font-weight:700;color:var(--txt);background:var(--warmtint);border:2px solid var(--warm);border-radius:10px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Originals-first Showcase: category chips + Original card details */
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.cats .chip { min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cats .chip.on { background: #1f2937; color: #fff; border-color: #1f2937; }
.pcard .orig { padding: 0 12px; font-size: .9rem; }
.pcard .orig .caveat { margin: 4px 0; }
.pill.warn { background: #fde68a; color: #422006; }
.btn.small { min-height: 44px; padding: 8px 12px; display: inline-flex; align-items: center; }

/* skip link (a11y round 2 #7): first Tab stop, visible only on focus */
.skip{position:absolute;left:8px;top:-100px;z-index:1000;background:var(--panel);color:var(--txt);padding:12px 16px;border-radius:8px;min-height:44px;font-weight:600}
.skip:focus{top:8px}
main:focus{outline:none}
/* touch targets (a11y round 2 #9): 44px buttons everywhere, 24px checkboxes in padded labels */
.btn,.nav button,.tnote button,#tnActions button,.tabs button,dialog .row button{min-height:44px}
.btn.small{font-size:14px}
.inl input[type=checkbox]:not([role=switch]),.st input[type=checkbox]{min-width:24px;min-height:24px;width:24px;height:24px}
.inl{min-height:44px;display:inline-flex;align-items:center;gap:8px}
#editOps .stepbtn{all:unset;box-sizing:border-box;display:block;width:100%;min-height:44px;padding:10px 8px;cursor:pointer}
#editOps .stepbtn:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.pcard .stretch::after{content:"";position:absolute;inset:0}
.pcard{position:relative}
.pcard h3.lt{margin:0;font-size:1rem}.pcard h3.lt a{color:inherit;text-decoration:none}

/* ======================================================================================================
   Pro design system (2026-10). One layer on top of the tokens above: spacing (4/8), type scale, radii,
   soft shadows, refined buttons, app bar + mobile bottom tab bar, card grid, skeletons, quiet motion.
   Colours are the contrast-tested Warm tokens above; nothing here lowers contrast or target sizes.
   ====================================================================================================== */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:clamp(26px,6vw,36px);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;--r:var(--r-md);
  --sh-1:0 1px 2px rgba(60,40,20,.06),0 1px 3px rgba(60,40,20,.08);
  --sh-2:0 2px 6px rgba(60,40,20,.06),0 8px 24px rgba(60,40,20,.08);
  --sh-3:0 12px 40px rgba(60,40,20,.16);
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.18s;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tabbar-h:64px}
html[data-theme=dark]{--sh-1:0 1px 2px #0006;--sh-2:0 4px 16px #0007;--sh-3:0 12px 40px #000a}
body{font-family:var(--font);font-size:var(--fs-sm);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.01em;line-height:1.2}
.page h1,.pagehead h1{font-size:var(--fs-3xl);font-weight:750}
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* app bar */
.topbar{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);box-shadow:var(--sh-1);gap:var(--s3);padding-left:var(--s4);padding-right:var(--s4)}
.logoimg{height:32px;padding:2px 6px;border-radius:var(--r-sm)}
.nav{gap:var(--s1)}
.nav button{display:inline-flex;align-items:center;gap:var(--s2);border-radius:var(--r-pill);padding:var(--s2) var(--s4);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav button:hover{background:var(--sunk);color:var(--txt)}
.nav button.on{background:var(--tint);color:var(--accink);box-shadow:none}
.nav .i{width:20px;height:20px}
.topbar .btn.ghost{border-color:transparent;border-radius:var(--r-pill)}
.topbar .btn.ghost:hover:not(:disabled){background:var(--sunk);border-color:var(--line)}
.modepick select{border-radius:var(--r-pill);padding-left:var(--s4)}

/* buttons: primary / secondary / ghost
   Secondary uses --panel2 + --ctl border + --txt (never --line borders: those fail M-contrast ~1.4:1).
   Explicit colors keep dialog footers like #nzAcctLater axe colour-contrast stable. */
.btn{border-radius:var(--r-md);padding:10px var(--s4);font-weight:600;border:1px solid var(--ctl);background:var(--panel2);color:var(--txt);box-shadow:var(--sh-1);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover:not(:disabled){border-color:var(--accink);box-shadow:var(--sh-2)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:var(--sh-1)}
.btn.primary{background:var(--acc);border:1px solid var(--accink);color:var(--on-acc);box-shadow:0 1px 2px rgba(0,102,255,.25),0 6px 16px rgba(0,102,255,.22)}
.btn.primary:hover:not(:disabled){filter:none;background:var(--accink)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--txt)}
.btn.ghost:hover:not(:disabled){background:var(--sunk);border-color:var(--ctl);box-shadow:none}
.btn.big{border-radius:var(--r-lg);min-height:52px;font-size:var(--fs-md)}
.btn.small{border-radius:var(--r-sm)}
.linkbtn{color:var(--accink);font-weight:600;text-underline-offset:3px}

/* surfaces */
.panel,.result,.history{border-radius:var(--r-lg);box-shadow:var(--sh-1);border-color:var(--line)}
.controls{padding:var(--s4) var(--s5);gap:var(--s5)}
.hero{border-radius:var(--r-xl)!important;box-shadow:var(--sh-1)}
.hero h1{font-weight:750;letter-spacing:-.02em}
.have3d{margin:var(--s2) 0 0;text-align:center}
.step h2,fieldset.cards legend{font-size:var(--fs-xs);letter-spacing:.08em}
.step h2 i,fieldset.cards legend i{width:22px;height:22px}
.drop{border-radius:var(--r-lg);border-width:2px;border-color:var(--line);background:var(--sunk);min-height:150px}
.drop:hover,.drop.over{border-color:var(--accink)}
.card{border-radius:var(--r-md);border-color:var(--line);background:var(--panel);box-shadow:var(--sh-1);padding:var(--s3) var(--s2);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{border-color:var(--ctl)}
.viewer{border-radius:var(--r-lg);box-shadow:var(--sh-2);border:0}
details{border-radius:var(--r-md);background:var(--panel)}
input[type=number],input[type=text],input[type=search],input[type=email],input[type=password],input:not([type]),select,textarea{border-radius:var(--r-md);border-color:var(--ctl);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--txt)}
.path li{border-width:1px;box-shadow:var(--sh-1);background:var(--panel)}
.pill{border-radius:var(--r-pill)}
.seg{border-radius:var(--r-pill);border-color:var(--line);background:var(--sunk);padding:var(--s1)}
.seg button,.seg label{border-radius:var(--r-pill);font-weight:600}
.seg button.on,.seg label.on,.seg label:has(input:checked){background:var(--panel);color:var(--accink);box-shadow:var(--sh-1),inset 0 0 0 2px var(--accink)}
.chip{border-radius:var(--r-pill)}

/* showcase cards: one image ratio, soft elevation */
.grid{gap:var(--s4)}
.pcard{border-radius:var(--r-lg);box-shadow:var(--sh-1);border-color:var(--line);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line)}
.pcard .ph{aspect-ratio:4/3}
.hcard{border-radius:var(--r-md);box-shadow:var(--sh-1);background:var(--panel)}
.hcard img{aspect-ratio:4/3}
/* empty states inside pages are normal flow (the viewer overlay version stays absolute) */
.page .empty,.grid>.empty{position:static;inset:auto;grid-column:1/-1;align-items:center;text-align:center;padding:var(--s6) var(--s4);border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel);color:var(--mut)}
.page .empty p{margin:0;font-size:var(--fs-md)}
/* skeletons */
.skel{list-style:none;aspect-ratio:4/5;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--sunk) 0%,var(--panel2) 50%,var(--sunk) 100%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite;border:1px solid var(--line)}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* dialogs (Settings etc.) */
dialog{border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-3)}
dialog[open]{animation:dlgin .2s var(--ease)}
@keyframes dlgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
dialog::backdrop{background:rgba(43,33,24,.45);backdrop-filter:blur(4px)}
.dlg .dh{padding:var(--s4) var(--s5)}.dlg h3{font-size:var(--fs-lg)}
.dlg .body{padding:var(--s4) var(--s5)}.dlg .df{padding:var(--s3) var(--s5)}
.x{border-radius:var(--r-pill)}.x:hover{background:var(--sunk);color:var(--txt)}
.tabs{gap:var(--s1);background:var(--sunk);padding:var(--s1);border-radius:var(--r-pill);display:inline-flex}
.tabs button{border-radius:var(--r-pill);border-bottom:0;font-weight:600}
.tabs button.on{background:var(--panel);color:var(--accink);box-shadow:var(--sh-1)}
.printer,.acc{border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-1)}

/* phones: compact app bar on top, tab bar at the bottom */
@media (max-width:768px){
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel);flex-wrap:nowrap;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}
  .topbar .modepick .ico{display:none}
  .topbar .modepick label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}   /* visually hidden, still names the Mode select for screen readers (axe select-name) */
  .topbar .brand{order:0;margin-right:auto}.topbar .modepick{order:1;margin-left:0;flex:0 1 auto}
  #btnAccount{order:2}#btnSettings{order:3}.topbar{gap:var(--s1)}
  .topbar .btn .i{width:24px;height:24px;min-width:24px}
  .logoimg{height:32px;width:auto;max-width:none}
  .dlg .grid2{grid-template-columns:1fr}
  .topbar .modepick select{min-width:0;width:auto;max-width:150px}
  .topbar .nav{position:fixed;left:0;right:0;bottom:0;z-index:20;order:0;flex:none;margin:0;gap:0;
    padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(60,40,20,.06)}
  .topbar .nav button{flex-direction:column;gap:2px;min-height:var(--tabbar-h);border-radius:var(--r-md);font-size:var(--fs-xs);padding:var(--s1) 2px;background:none}
  .topbar .nav button.on{background:none;color:var(--accink)}
  .topbar .nav button.on .i{background:var(--tint);border-radius:var(--r-pill);width:52px;padding:2px 14px;box-sizing:border-box;height:28px}
  .topbar .nav .i{width:24px;height:24px}
  body{padding-bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom))}
  body[data-level=expert]{padding-bottom:calc(var(--tabbar-h) + 88px + env(safe-area-inset-bottom))}
  body[data-level=expert] #viewCreate:not([hidden]) #btnBuild{bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom))}
  .layout,.page{padding:var(--s4)}
  .controls{padding:var(--s4)}
  .pagehead form input[type=search]{width:100%!important;flex:1}
  .pagehead>.row,.pagehead form{width:100%;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.skel{animation:none}dialog[open]{animation:none}.pcard:hover,.btn:active:not(:disabled){transform:none}}
@media (forced-colors:active){.topbar .nav button.on{outline:2px solid Highlight}.skel{border:1px solid CanvasText}}
.i.big{width:40px;height:40px;stroke-width:1.5;color:var(--accink);margin:0 auto var(--s2);display:block}.viewer .i.big{color:#C5CEDF}

/* ======================================================================================================
   v2 "tech" layer (2026-10): crisper type, glass top bar with a hairline gradient, soft page backdrop,
   tighter hierarchy, micro-interactions, and the sun/moon Dark mode toggle (#themeToggle, theme.js).
   Colours still come from the contrast-tested tokens above (tests/test_b3_theme.py).
   ====================================================================================================== */
:root{--font:"Inter var",Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --glow1:rgba(91,63,214,.07);--glow2:rgba(180,65,12,.05);--hair:linear-gradient(90deg,transparent,rgba(91,63,214,.35),rgba(180,65,12,.25),transparent);
  --ease:cubic-bezier(.16,1,.3,1);--dur:.2s}
html[data-theme=dark]{--glow1:rgba(184,169,255,.08);--glow2:rgba(255,178,107,.04);--hair:linear-gradient(90deg,transparent,rgba(184,169,255,.45),rgba(255,178,107,.25),transparent);
  --stage1:#1b2232;--stage2:#05070b}
body{background:radial-gradient(1200px 600px at 10% -10%,var(--glow1),transparent 60%),radial-gradient(900px 500px at 100% 0%,var(--glow2),transparent 60%),var(--bg);background-attachment:fixed;
  font-feature-settings:"cv11","ss01","ss03";letter-spacing:-.006em}
h1,h2,h3,h4{letter-spacing:-.022em}
.hero h1,.page h1,.pagehead h1{letter-spacing:-.035em;font-weight:720}
.lede{color:var(--mut);font-size:var(--fs-md);line-height:1.6}
.topbar{position:sticky;background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:none;min-height:56px}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hair);pointer-events:none}
.nav button{font-weight:550;color:var(--mut)}
.nav button.on{color:var(--accink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accink) 22%,transparent)}
.btn{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 88%,#fff),var(--acc));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,102,255,.3),0 8px 20px -6px rgba(0,102,255,.45)}
.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,var(--acc),var(--accink))}
.panel,.result,.history,.hero,.card,.pcard,.hcard,details,.printer,.acc,dialog{border-color:color-mix(in srgb,var(--line) 80%,transparent)}
.hero{background:linear-gradient(160deg,color-mix(in srgb,var(--panel2) 70%,var(--tint)),var(--panel) 75%)}
.pcard:hover{transform:translateY(-3px)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Dark mode toggle: upper right of the top bar, 44px target */
.themetoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;margin-left:var(--s1);flex:none;order:99;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer;box-shadow:var(--sh-1);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.themetoggle:hover{border-color:var(--ctl);background:var(--sunk)}
.themetoggle:active{transform:scale(.94)}
.themetoggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.themetoggle .i{width:20px;height:20px;transition:transform .35s var(--ease)}
.themetoggle[aria-pressed=true] .i{transform:rotate(-30deg)}
.themetoggle.floating{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:30}
.topbar .themetoggle{margin-left:auto}.topbar .spacer+.themetoggle,.topbar .btn+.themetoggle{margin-left:var(--s1)}
html[data-theme=dark] dialog::backdrop{background:rgba(0,0,0,.6)}
html[data-theme=dark] .logoimg{background:none}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{color-scheme:dark}
input,select,textarea{color-scheme:light}html[data-theme=dark] :is(input,select,textarea){color-scheme:dark}
@media (max-width:768px){.topbar{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}/* a filter here would trap the fixed bottom tab bar */
  .themetoggle{order:4;margin-left:2px}}
@media (prefers-reduced-motion:reduce){.btn:hover:not(:disabled),.btn:active:not(:disabled),.pcard:hover,.themetoggle:active{transform:none}.themetoggle .i,.themetoggle[aria-pressed=true] .i{transition:none;transform:none}}
@media (forced-colors:active){.themetoggle{border:1px solid ButtonText}.topbar::after{display:none}}

/* v2 nav: six tabs (Showcase, Slicer, CAD, Lithophane, Smart Fix, Account); feed-style Showcase; tool cards */
.nav button{white-space:nowrap}

@media (max-width:768px){.topbar .nav button{font-size:11px;min-width:0;flex:1 1 0;letter-spacing:-.01em}.topbar .nav button span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .topbar .nav button.on .i{width:44px;padding:2px 10px}}
.feedbar{gap:var(--s2);align-items:center;flex-wrap:wrap;margin:var(--s2) 0}
#shTabs{flex-wrap:wrap;max-width:100%}#shTabs button{flex:1 1 auto;white-space:nowrap}   /* 320px: the 4 list tabs wrap instead of cutting off "Following" */
.feedbar .createcta{margin-left:auto;text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2)}
.feedbar a.btn.ghost{text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2);color:var(--txt)}
#viewShowcase .pagehead form{flex:1 1 360px}
#viewShowcase #shSearch{width:100%!important;min-height:48px;font-size:var(--fs-md);border-radius:var(--r-pill);padding-left:var(--s5);background:var(--panel)}
#viewShowcase .pagehead{flex-wrap:wrap;gap:var(--s4)}
#viewShowcase .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (max-width:768px){#viewShowcase .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}.feedbar .createcta{margin-left:0;flex:1 1 100%;justify-content:center;min-height:48px}}
.toolgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.toolcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:var(--s2);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.toolcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.toolcard h2{margin:0;font-size:var(--fs-lg)}.toolcard .btn{margin-top:auto;align-self:flex-start;text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2);color:inherit}
.acctbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.acctbtns .btn{margin-top:0}
.acctbtns #btnLogin[hidden]{display:none}
.toolcard .btn.primary{color:var(--on-acc)}
.toolcard .btn .lbl{display:inline!important}
@media (prefers-reduced-motion:reduce){.toolcard:hover{transform:none}}

/* ---------- community batch: favorites, recent searches, prints gallery, remix chain, profiles ---------- */
.fav{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:4px 10px;border-radius:999px;border:2px solid var(--ctl);background:var(--panel);color:var(--txt);font:inherit;font-weight:700;cursor:pointer;position:relative;z-index:2}
.fav .fav-ico path{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.fav[aria-pressed="true"]{color:var(--acc);border-color:var(--acc)}
.fav[aria-pressed="true"] .fav-ico path{fill:currentColor}
.fav:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.cardfoot{gap:8px}
.recent{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.recent .chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.rchip{display:inline-flex;align-items:center;border:1px solid var(--ctl);border-radius:999px;overflow:hidden}
.rchip .chip{min-height:44px;min-width:44px;padding:6px 12px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.rchip .chip.x{padding:6px 10px;border-left:1px solid var(--ctl)}
.recent .btn{min-height:44px}
.pgallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;list-style:none;padding:0;margin:8px 0}
.pgallery figure{margin:0}
.pgallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.pgallery figcaption{font-size:var(--fs-sm);margin-top:4px}
.prform summary{list-style:none;display:inline-flex;min-height:44px;align-items:center}
.remix{padding:8px 12px;border-left:4px solid var(--ctl);background:var(--panel);border-radius:8px}
.remix a,.plist a{color:inherit;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.counts{display:flex;gap:16px}
.counts .stat b{font-size:var(--fs-lg)}
.plist a,.creator-link{display:inline-flex;align-items:center;min-height:44px}
.favs{margin-top:24px}
#dlgMulti .bigtool,#editPanel [data-orient]{min-height:44px}
/* ---- printer picker, slicer panel, Will it print? ---- */
.slicepanel{margin-top:var(--s4,16px);padding:var(--s4,16px);border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.slicepanel h3{margin:0 0 6px}
.slicepanel select,.slicepanel input[type=number],.printerpick select,.printerpick input[type=search]{min-height:44px;width:100%;box-sizing:border-box;max-width:100%}
.printerpick{min-width:0}.printerpick .field{min-width:0}@media (max-width:480px){.printerpick.grid2{grid-template-columns:1fr}.printerpick .field{grid-column:1/-1}}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:8px 0}
.segmented button{min-height:44px;min-width:44px;padding:0 16px;border:0;background:var(--panel);color:var(--txt);font:inherit;cursor:pointer}
.segmented button[aria-pressed=true]{background:var(--acc);color:var(--on-acc)}
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:8px 0}
.preset{display:flex;gap:8px;align-items:flex-start;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--sunk)}
.preset:has(input:checked){border-color:var(--acc);background:var(--tint)}
.preset input{min-width:20px;min-height:20px;margin-top:2px}.preset small{display:block;color:var(--mut)}
.slicepanel label.chk{display:flex;gap:8px;align-items:center;min-height:44px}
.slicepanel .slicers,.slicepanel .row{display:flex;flex-wrap:wrap;gap:8px}.slicepanel .slicers .btn,.slicepanel .row .btn{min-height:44px}
.slicestats .pill{font-size:15px;margin-right:6px}
.costbox{border:1px solid var(--line,#33405c);border-radius:12px;padding:8px 12px;margin:8px 0}
.costbox .costrow{flex-wrap:wrap;gap:8px;align-items:center}
.costbox select,.costbox input{min-height:44px}
.costbox #costKg{max-width:8em}
.costbox #costCur{width:auto;min-width:4.5em}
.costbox .costout{font-weight:600;margin:6px 0 2px}
.pill.willprint{white-space:nowrap}.pill.warn{color:var(--warn);border-color:var(--warn)}.pill.willprint.bad{border-color:var(--bad)}
html[data-theme=dark] .pill.warn{color:#422006}   /* the warn pill keeps its light-yellow fill in dark mode, so its text stays dark (axe color-contrast: 'Simulated' badge, Will-it-print) */
.willbox{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.willbox p{margin:0 0 6px}.checks{list-style:none;margin:0;padding:0}.checks li{padding:2px 0;color:var(--txt)}
.checks li.ok::marker,.checks li.bad::marker{content:none}
.openin-steps{margin:8px 0 0;padding-left:18px;color:var(--mut);font-size:14px}.openin-steps li{margin:4px 0}
.su-printer summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.cardfoot .wp:empty{display:none}
.cardfoot .pill.willprint{white-space:normal}

/* ZEIM Original detail facts (size, supports, parts, assembly) */
.orig-more { margin: 8px 0; }
.orig-more h4 { margin: 12px 0 4px; }
.orig-more ul { margin: 4px 0; padding-left: 1.2em; }

/* Account > People I follow */
.follow-list { list-style: none; padding: 0; margin: 6px 0; }
.follow-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.sitefoot .attrib{display:block;font-size:.85em;margin-top:4px}

/* lithophane shape picker: 2-up on phones, every card a 44 px+ target */
#shapeCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
#shapeCards .card{min-height:64px;min-width:44px}
.matwarn{border:2px solid var(--warn);border-radius:var(--r);padding:10px 12px;margin:8px 0;background:var(--warmtint);color:var(--txt)}.matwarn p{margin:4px 0}.matwarn b{color:var(--txt)}

/* ---------- plate editor (Slicer tab) ---------- */
.plate .plist { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.plate .pobj { display: flex; gap: 6px; align-items: stretch; }
.plate .pselect { flex: 1; min-height: 44px; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px;
  border-radius: 10px; border: 1px solid var(--line, #33405c); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.plate .pselect small { opacity: .85; }
.plate .pobj.on .pselect { border-color: #0066FF; box-shadow: 0 0 0 2px #0066FF66; }
.plate .pobj.hid .pselect { opacity: .6; border-style: dashed; }
.plate .picon { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line, #33405c); background: transparent; color: inherit; cursor: pointer; font-size: 18px; }
.plate .picon:disabled { opacity: .4; cursor: not-allowed; }
.plate .pselect:focus-visible, .plate .picon:focus-visible { outline: 3px solid #7aa2ff; outline-offset: 2px; }
.plate .ptitle { margin: 10px 0 4px; font-size: 1rem; }
.plate .warn { color: #e08a5a; } .plate .ok { color: #5fbf7f; } .plate .muted { opacity: .8; font-style: italic; }
.plate .pcut { margin-top: 10px; border-top: 1px solid var(--line, #33405c); padding-top: 8px; }
.plate .pcut summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.plate .seg-radio { border: 0; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.plate .seg-radio label { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.plate .pcut input[type=range] { flex: 1; min-height: 44px; }
.plate .pcut .check { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.plate .pcut #pCutGo, .plate .pcut select { min-height: 44px; }
.plate .simnote .pill { margin-right: 4px; }
.plate .tool-row .btn, #litLightBox .btn, #litLightBox select { min-height: 44px; }
#litLightBox { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#litLightBox[hidden] { display: none; }

/* mild NSFW: blurred thumbnail + label on cards (the item page shows it unblurred after a once-per-session confirm) */
.pcard { position: relative; }
.ph.nsfw img { filter: blur(22px) saturate(.6); transform: scale(1.1); }
.ph.nsfw { overflow: hidden; }
.mature-label { position: absolute; top: 10px; left: 10px; background: #111c; color: #fff; font-weight: 700; font-size: .8rem; padding: 3px 8px; border-radius: 6px; }
.prmature { position: relative; overflow: hidden; }
.prmature img { filter: blur(22px) saturate(.6); transform: scale(1.1); }
.prmature .mature-label { z-index: 1; }
.mature-share summary { cursor: pointer; margin: 8px 0; min-height: 44px; }

/* Logo & Drawing to 3D: traced-outline preview */
.tprev-wrap{margin-top:10px}.tprev-h{font-size:14px;margin:4px 0}
.tprev{min-height:140px;max-height:320px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--ctl);border-radius:10px;padding:8px}
.tprev svg{max-width:100%;max-height:300px;width:100%;height:auto}
#tOut{flex-wrap:wrap}#tOut label{min-height:44px;min-width:44px}
#traceOpts input[type=range]{min-height:44px;width:100%}
#traceOpts .chk label{min-height:44px;display:flex;align-items:center;gap:8px}
#traceOpts select,#traceOpts input[type=number]{min-height:44px}

/* layer-by-layer preview (Slicer result) */
.layerprev { margin: 12px 0; }
.layerprev canvas { display: block; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--line, #33405c); background: #101826; }
.layerprev .lprow { display: flex; gap: 8px; align-items: center; margin: 8px 0; max-width: 560px; }
.layerprev .lprow input[type=range] { flex: 1; min-height: 44px; min-width: 0; }
.layerprev .btn { min-height: 44px; min-width: 44px; }
.layerprev .lpinfo { font-weight: 600; margin: 4px 0; }
.lplegend { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; }
.lplegend li { display: flex; align-items: center; gap: 6px; margin: 0; }
.lplegend .lpsw { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; max-height: 14px; border-radius: 3px; align-self: center; }
/* Calibration wizard + failure photo doctor (Smart Fix page) */
.calbox,.docbox{margin-top:var(--s5);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1)}
.calbox h2:focus,.docbox h2:focus{outline:none}
.caltests{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.caltest details{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}
.caltest summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.caltest summary h3{display:inline;margin:0;font-size:var(--fs-md, 1.05rem)}
.caltest h4{margin:var(--s3) 0 var(--s1)}
.caltest ol,.caltest ul,.docfix ul{margin:0;padding-left:1.3em}
.caltest .row .btn,.docbox .row .btn{min-height:44px}
.docfix{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);margin:var(--s3) 0}
.docfix h3{margin:0 0 var(--s2)}
.docphoto{max-width:220px;max-height:220px;border-radius:var(--r);display:block;margin:var(--s2) 0}
.docsyms{display:flex;flex-wrap:wrap;gap:var(--s2);border:0;padding:0;margin:0}
.docsyms label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;cursor:pointer}

/* Paint-on supports (Slicer panel) */
.spPaint{margin:.6rem 0;padding:.4rem .6rem;border:1px solid var(--line,#333);border-radius:8px}
.spPaint canvas{display:block;width:min(100%,280px);height:auto;touch-action:none;border-radius:6px;margin-top:.4rem;cursor:crosshair}
#vLightRGB { min-width: 44px; min-height: 44px; padding: 2px; border-radius: 8px; cursor: pointer; }
#vLightRGB[hidden] { display: none; }
#litLightBox .fxspeed { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
#litLightBox .fxspeed[hidden] { display: none; }
#vLightSpeed { min-height: 44px; width: 120px; max-width: 40vw; }
#vMatRGB { min-width: 44px; min-height: 44px; padding: 2px; border-radius: 8px; }
#vMatRGB[hidden], #lithThk[hidden] { display: none; }
#lithThk, #lithMaterial, #vMatColor { min-height: 44px; }
#mboxBox .btn, #mboxBox select, #mboxBox input[type=number], #mboxBox input[type=file] { min-height: 44px; }
#mboxBox .row2 { display: flex; flex-wrap: wrap; gap: 8px; }
#mbCustom[hidden], #mboxBox[hidden] { display: none; }
/* Repair page (static/repair.html): one column, big targets, fits 320 px */
.rp-main{max-width:640px;margin:0 auto;padding:16px}.rp-pick,.rp-go,.rp-dl{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:8px 0;box-sizing:border-box;text-align:center}
.rp-t{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}.rp-t th,.rp-t td{padding:8px 6px;border-bottom:1px solid var(--line,#ccc);text-align:left;overflow-wrap:anywhere}.rp-fx{padding-left:20px;line-height:1.7}

/* ---------- Colour preferences (theme.js "Colours & accessibility"): accent, high contrast, colour-vision-safe status colours.
   Stored on this device (localStorage.zeim_look); status is never shown by colour alone (icons/text below). ---------- */

html[data-accent=mono]{--acc:#0A0A0A;--accink:#0A0A0A;--acc2:#0A0A0A;--tint:#EDEDED;--on-acc:#FFFFFF}

html[data-theme=dark][data-accent=mono]{--acc:#F2F2F2;--accink:#F2F2F2;--acc2:#F2F2F2;--tint:#2A2A2A;--on-acc:#0A0A0A}
html[data-contrast=high]{--txt:#000;--mut:#1F1A14;--line:#000;--ctl:#000;--panel:#fff;--bg:#fff;--sunk:#fff;--focus:#0000EE}
html[data-theme=dark][data-contrast=high]{--txt:#fff;--mut:#F1F1F1;--line:#fff;--ctl:#fff;--panel:#000;--bg:#000;--sunk:#000;--focus:#FFD400}
/* red/green colour blindness (deuteranopia / protanopia): blue = good, vermillion = problem (Okabe-Ito based) */
html[data-cb=redgreen]{--ok:#005A9C;--okbg:#DCEBFA;--bad:#A13D00;--badbg:#FCE6D9;--warn:#6B4E00}
html[data-theme=dark][data-cb=redgreen]{--ok:#7CC4FF;--okbg:#0B2740;--bad:#FFA066;--badbg:#3A1C0A;--warn:#F0D060}
/* blue/yellow colour blindness (tritanopia): teal = good, red = problem, magenta = warning */
html[data-cb=blueyellow]{--ok:#0B6E4F;--okbg:#DDF3EA;--bad:#B3001B;--badbg:#FBE3E6;--warn:#9D174D}
html[data-theme=dark][data-cb=blueyellow]{--ok:#5ED6A9;--okbg:#0B2A20;--bad:#FF8A99;--badbg:#3A0E15;--warn:#F9A8D4}
/* never colour alone: warning / problem pills carry a symbol too (the Will-it-print pill has its own icon) */
.pill.warn:not(.willprint)::before{content:"⚠\FE0E  ";speak:never}
.pill.bad:not(.willprint)::before{content:"✖\FE0E  ";speak:never}
.lookbtn{width:44px;height:44px;min-width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer;order:98}
.lookbtn .i{width:20px;height:20px}
#dlgLook .lookgrid{display:grid;gap:12px}#dlgLook label{display:grid;gap:4px}

/* brand logo: light and dark variants swap with the theme */
.logo-dark{display:none!important}html[data-theme=dark] .logo-light{display:none!important}html[data-theme=dark] .logo-dark{display:block!important}

/* Windows contrast themes (forced-colors): the system picks the colours; keep the logo as drawn and say why the toggle has no effect */
.forcednote{position:fixed;right:12px;top:64px;z-index:60;max-width:420px;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:2px solid CanvasText;background:Canvas;color:CanvasText;border-radius:10px}
@media (forced-colors:active){.logoimg{forced-color-adjust:none;background:#fff;padding:2px 6px;border-radius:6px}html[data-theme=dark] .logo-light{display:block!important}html[data-theme=dark] .logo-dark{display:none!important}}
.rzDrop{min-height:96px;gap:6px}.rzDrop .i{width:24px;height:24px;color:var(--accink)}#rzFileStatus:empty{display:none}
#rzFileStatus{overflow-wrap:anywhere;word-break:break-word;min-width:0}.rzRow>.field{min-width:0}.rzDrop{max-width:100%;box-sizing:border-box}.rzDrop input[type=file]{max-width:100%}
@media (max-width:480px){.rzRow{grid-template-columns:1fr}.rzRow #rzPrinter{width:100%}}

/* phone tap targets (QA 2026-10-22) */
@media (max-width:768px){.topbar .nav{overflow-x:auto;scrollbar-width:none}.topbar .nav button{flex:1 0 44px;min-width:44px}}
#spChange{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
#rzPrinter{min-width:44px;width:100%;min-height:44px;box-sizing:border-box}
#rzFile{min-height:44px;box-sizing:border-box}
.rzDrop{cursor:pointer}
/* 3D G-code preview (gcodeview.js) */
.gcprev { margin: 12px 0; max-width: 640px; }
.gcstage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 70vh; border-radius: 10px; border: 1px solid var(--line, #33405c); background: #101826; overflow: hidden; touch-action: none; }
.gcstage canvas { display: block; width: 100%; height: 100%; }
.gcprog { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: .9rem; }
.gcprog progress { width: 100%; height: 10px; }
.gcrow { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.gcrow input[type=range] { flex: 1; min-height: 44px; min-width: 0; }
.gcprev .btn { min-height: 44px; min-width: 44px; padding-left: 8px; padding-right: 8px; }
.gcinfo { font-weight: 600; margin: 4px 0; overflow-wrap: anywhere; }
.gclegend { border: 0; padding: 0; margin: 6px 0; }
.gclegend legend { font-size: .85rem; opacity: .8; }
.gclegend > div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.gcchip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .9rem; cursor: pointer; }
.gcchip input { width: 22px; height: 22px; margin: 0; }
.gcchip .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* plate: auto-arrange spacing / copies (44px taps, wraps at 320px) */
.plate .parr { flex-wrap: wrap; gap: 8px; align-items: center; }
.plate .parr label.inl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.plate .parr input[type=number] { width: 4.5em; min-height: 44px; font-size: 16px; }
.plate .parr input[type=checkbox] { width: 22px; height: 22px; }
.plate .tool-row .btn.small { min-height: 44px; }
.plate .pover { margin: 6px 0; padding: 8px; border-radius: 10px; }
.plate .pover .btn { min-height: 44px; }
@media (max-width: 400px) { .plate .pobj .picon { min-width: 44px; padding: 0; } .plate .pselect { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; } }

/* ===== UI6 (approved 2026-10): split layout, settings search, floating toolbar, line icons, calm brand palette, bigger help, one-line consent ===== */
.i-red{color:#D93636}.i-amber{color:#C26A00}
.card .ico .i{width:24px;height:24px}.bigtool .ico .i{width:30px;height:30px}.drop .big .i{width:40px;height:40px}
/* 6: bigger helper text (was 11-12px) */
.help,small.help,.card small,.bigtool small,.acc small,.field em,.pp-note{font-size:14px;line-height:1.5}
/* 5: calmer: flat backgrounds instead of glow gradients; brand blue only for primary actions and focus */
body{background:var(--bg)!important}
.hero{background:var(--panel)!important}
/* 1: desktop ~75/25 view/sidebar split, viewer fills the viewport height (phones: single column, view full width) */
@media (min-width:961px){
  .layout{grid-template-columns:minmax(0,3fr) minmax(300px,1fr);max-width:none;grid-auto-flow:row dense}
  .layout>.stage{grid-column:1}
  .layout>aside.controls{grid-column:2;position:sticky;top:calc(var(--ui6-top,72px) + 8px);max-height:calc(100dvh - var(--ui6-top,72px) - 24px);overflow:auto}
  .layout>.stage>.viewer{height:calc(100dvh - var(--ui6-top,72px) - 32px);max-height:none;min-height:420px}
}
/* 2: settings search */
.setsearch{display:flex;gap:8px;align-items:center;margin:4px 0 8px}
.setsearch input[type=search]{min-height:44px;font-size:16px;flex:1}
.setsearch .setcount{color:var(--mut);font-size:14px;white-space:nowrap}
.setnone{color:var(--mut);font-size:14px}
.ui6-hide{display:none!important}
/* 3: context-aware floating toolbar over the 3D view */
.ctxbar{position:relative;align-self:center;margin:-70px auto 14px;z-index:5;display:flex;gap:4px;align-items:center;max-width:calc(100% - 40px);overflow-x:auto;padding:4px;border-radius:14px;background:color-mix(in srgb,#0A0A0A 86%,transparent);color:#F2F2F2;box-shadow:0 4px 16px rgba(0,0,0,.3);scrollbar-width:none}
.ctxbar[hidden]{display:none}
.ctxbar .ctxlbl{font-size:13px;color:#C9C9C9;padding:0 8px;white-space:nowrap}
.ctxbar button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:14px;padding:0 10px;cursor:pointer;white-space:nowrap}
.ctxbar button:hover{background:rgba(255,255,255,.12)}
.ctxbar button:focus-visible{outline:2px solid #6AA6FF;outline-offset:1px}
.ctxbar button.pri{background:#0066FF;color:#fff}
.ctxbar .i{width:20px;height:20px}
@media (max-width:480px){.ctxbar button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* 6: consent on one line; the full text is one tap away and stays the accessible description */
.consent1{display:flex;align-items:flex-start;gap:8px;min-height:44px}
.consent1>span{font-size:15px}
.consent1>input{min-width:24px;min-height:24px;margin-top:2px}
.consentmore summary{min-height:44px;display:flex;align-items:center;color:var(--accink);cursor:pointer;font-size:14px}
.consentmore p{font-size:14px;margin:4px 0 8px}
.i-fill{fill:currentColor}
.modepick .ico .i{width:16px;height:16px}

/* FDM / Resin switch ("My printer") + header must never be wider than the viewport */
.topbar{max-width:100%;box-sizing:border-box;min-width:0}.topbar>*{min-width:0}.topbar .brand,.topbar .themetoggle,.topbar #lookBtn{flex-shrink:0}
.kindpick{position:relative;z-index:6;display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-pill,999px);background:var(--sunk,var(--panel2));flex-shrink:0}
.kindpick .kp-lbl{font-size:var(--fs-xs,12px);color:var(--mut);padding:0 6px 0 8px;white-space:nowrap}
.kindpick button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:var(--r-pill,999px);background:none;color:var(--mut);font:inherit;font-weight:600;cursor:pointer}
.kindpick button[aria-pressed=true],.kindpick button.on{background:var(--acc,#0066FF);color:#fff;box-shadow:none}
.kindpick svg,.kindpick .i,.kindpick button span{pointer-events:none}
.kindpick .i{width:18px;height:18px}
/* nav order is fixed (P7): the printer type only changes the highlight */
@media (max-width:1100px) and (min-width:769px){.kindpick .kp-lbl{display:none}}
@media (max-width:768px){.topbar{flex-wrap:wrap}.topbar .themetoggle,.topbar #lookBtn{order:4}.kindpick{order:50;flex:1 0 100%;justify-content:center}.kindpick button{flex:1 1 0}}
.kindnote{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0;padding:8px 12px;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:10px;background:var(--panel)}
.kindnote .x{margin-left:auto;min-width:44px;min-height:44px}
/* 18+ first-visit gate: calm, full screen, brand palette, 44px targets */
html.gated,html.gated body{overflow:hidden}
.agegate{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));background:var(--bg,#fff);color:var(--txt,#0A0A0A)}
.agegate .ag-card{width:100%;max-width:420px;text-align:center;outline:none}
.agegate .ag-logo{height:32px;width:auto;margin:0 auto 32px;display:block}
.agegate h1{font-size:clamp(22px,5vw,28px);line-height:1.25;font-weight:650;letter-spacing:-.01em;margin:0 0 8px}
.agegate p{margin:0 0 24px;color:var(--mut,#8A8A8A);font-size:16px;line-height:1.5}
.agegate .ag-row{display:flex;flex-direction:column;gap:12px}
.agegate .ag-row .btn{min-height:48px;width:100%;font-size:16px;justify-content:center}
.agegate .ag-fine{font-size:13px;margin:20px 0 0}
@media (min-width:480px){.agegate .ag-row{flex-direction:row}.agegate .ag-row .btn{flex:1}}
html:not([data-theme=dark]) .agegate .logo-dark,html[data-theme=dark] .agegate .logo-light{display:none}

/* Nav labels (S5/S6): full labels on wide desktop, short labels on narrower desktop/tablet and in the phone tab bar */
.nav button .ns{display:none}
.nav button.kind-primary .i{color:var(--accink)}
@media (max-width:1799px){.nav button .nl{display:none}.nav button .ns{display:inline}}
@media (min-width:769px) and (max-width:1499px){.nav button{padding:var(--s2) 8px;gap:5px}.topbar .kindpick .kp-lbl{display:none}.modepick>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (min-width:769px) and (max-width:1100px){.nav button{padding:var(--s2) 8px}.nav button .i{width:18px;height:18px}.modepick>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:768px){.topbar .nav button span.ns{overflow:visible;text-overflow:clip;max-width:none}.topbar .nav button{font-size:11px}}

/* P9: TorchC0 results framed as one card */
#torchOut.rzResult{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:16px}
.rzResHead{margin:0 0 12px;font-size:18px}
#torchOut .slicestats{display:flex;flex-wrap:wrap;gap:8px}

/* S7: the floating toolbar (.ctxbar) is the single home of Reset view / Wireframe / Light / Edit / Print / Save / Send to.
   The original buttons stay in the DOM (the toolbar drives them) but are not shown twice. */
.inbar{display:none !important}

/* P5: even tool-card buttons, pinned to the card bottom */
.toolgrid .toolcard{display:flex;flex-direction:column}
.toolgrid .toolcard>.btn{margin-top:auto;width:100%;min-height:44px;justify-content:center;text-align:center}

/* S5: 769–1279 px — the nav gets its own full-width row under the brand and controls, so every label fits */
@media (min-width:769px) and (max-width:1279px){
  .topbar{flex-wrap:wrap;row-gap:6px}
  .topbar .nav{order:60;flex:1 0 100%;justify-content:space-between}
  .topbar .nav button{flex:1 1 0;justify-content:center;min-height:40px}
}
@media (max-width:360px){.topbar .nav button{flex:1 1 0;min-width:0;padding-left:0;padding-right:0}.topbar .nav button span.ns{font-size:10px;letter-spacing:-.02em}}
/* P3: Studio style cards — 2 even columns, never clipped */
#modeCards{grid-template-columns:repeat(2,minmax(0,1fr))}
#modeCards .card{min-width:0;overflow-wrap:anywhere}
/* P4: Account printer and nozzle pickers stack full width so values never truncate */
.toolcard .printerpick{grid-template-columns:1fr}
.toolcard .printerpick select{width:100%;max-width:100%}

/* ---- floating workspace panels (wslayout.js): over a full-background 3D view */
.zws{position:relative}
.zws-safe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.zws-p{position:absolute;z-index:9;display:flex;flex-direction:column;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 95%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.28);overflow:hidden;touch-action:none}
.zws-p[hidden]{display:none}
.zws-p.drag{opacity:.9;box-shadow:0 14px 34px rgba(0,0,0,.45);z-index:30;will-change:transform}
.zws-head{display:flex;align-items:center;gap:2px;flex:none;min-height:44px;padding:0 2px}
.zws-p.v.bare,.zws-p.h.bare{flex-direction:row}
.zws-p.v.bare{flex-direction:column}
.zws-p.v.bare>.zws-head{flex-direction:column}
.zws-p.h.bare>.zws-head,.zws-p.free.bare>.zws-head{flex-direction:row}
.zws-p.bare .zws-t{display:none}
.zws-p.h.bare{flex-direction:row}
.zws-t{flex:1;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.zws-grip,.zws-min,.zws-hide,.zws-chip{flex:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;padding:0;font:inherit}
.zws-grip{cursor:grab;touch-action:none}
.zws-grip svg{width:20px;height:20px;fill:currentColor}
.zws-min svg,.zws-hide svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zws-grip:hover,.zws-min:hover,.zws-hide:hover{background:var(--panel2);color:var(--txt)}
.zws-grip:focus-visible,.zws-min:focus-visible,.zws-hide:focus-visible,.zws-chip:focus-visible{outline:3px solid var(--focus);outline-offset:-2px}
.zws-chip{display:none;padding:0 12px;color:var(--txt);font-weight:600;font-size:13px;white-space:nowrap}
.zws-p.min .zws-chip{display:inline-flex}
.zws-p.min .zws-t,.zws-p.min .zws-min,.zws-p.min .zws-hide,.zws-p.min .zws-body,.zws-p.min .zws-rs,.zws-p.min .zws-edge{display:none}
.zws-p.min{flex-direction:row}
.zws-p.min>.zws-head{flex-direction:row}
.zws-body{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain}
.zws-rs{position:absolute;right:0;bottom:0;width:22px;height:22px;z-index:5;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 55%,var(--mut) 55% 62%,transparent 62% 72%,var(--mut) 72% 79%,transparent 79%)}
.zws-edge{position:absolute;z-index:4;touch-action:none;background:transparent}
.zws-edge[data-dir="e"]{top:44px;right:0;width:10px;bottom:10px;cursor:ew-resize}
.zws-edge[data-dir="w"]{top:44px;left:0;width:10px;bottom:10px;cursor:ew-resize}
.zws-edge[data-dir="s"]{left:10px;right:22px;bottom:0;height:10px;cursor:ns-resize}
.zws-edge[data-dir="n"]{left:10px;right:10px;top:44px;height:10px;cursor:ns-resize}
.zws-p.user-size{touch-action:auto}
.zws-p.user-size>.zws-body{overflow:auto;touch-action:auto}
.zws-dlg{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--txt);padding:16px;width:min(420px,92vw);box-sizing:border-box}
.zws-dlg::backdrop{background:rgba(0,0,0,.4)}
.zws-dlg h2{margin:0 0 6px;font-size:18px}
.zws-list{list-style:none;margin:10px 0;padding:0;max-height:55vh;overflow:auto}
.zws-list label{display:flex;align-items:center;gap:10px;min-height:44px}
.zws-list input{width:22px;height:22px}
.zws-list small{color:var(--mut)}
.zws-row{display:flex;gap:8px;justify-content:space-between}
.zws-cust{display:inline-flex;align-items:center;gap:6px}
.zws-cust svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.zws-p{transition:none}}
/* main-app workspaces on the floating layout (ws-main.js): the 3D view is the whole background once a model is shown */
main.zws{position:relative;display:block;height:var(--zws-h,calc(100dvh - 120px));max-width:none;padding:0;margin:0;overflow:hidden}
main.zws>.hero>:not(h1),main.zws>.pathnav,main.zws>.pagehead,main.zws .explore,main.zws .touch-hint{display:none}
/* The hero (photo picker) is folded away in the workspace, but a "Change photo" error must still be seen: show only its message, pinned under the top bar. */
main.zws>.hero>#studioPhoto:has(#sMsg:not([hidden])){display:block;visibility:hidden}
main.zws #studioPhoto #sMsg:not([hidden]){visibility:visible;position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 112px);z-index:40;max-width:560px;margin:0 auto;box-shadow:0 4px 16px rgba(0,0,0,.18)}
main.zws>.stage{position:absolute;inset:0;display:block}
main.zws .viewer,main.zws>.stage>.viewer{position:absolute;inset:0;height:auto;min-height:0;border-radius:0;border:0;box-shadow:none}
main.zws>.zws-bg{position:absolute!important;inset:0;width:auto!important;height:auto!important;min-height:0!important;border-radius:0!important}
main.zws>.zws-cust{position:absolute;top:8px;right:8px;z-index:11;min-height:44px}
main:not(.zws)>.zws-cust{display:none}
main.zws .zws-p>.zws-body>*{margin:0;max-width:100%;box-sizing:border-box}
main.zws .zws-p>.zws-body>.controls{position:static;max-height:none;width:340px;max-width:100%;border:0;box-shadow:none;background:none}
main.zws .zws-p.user-size>.zws-body>.controls,main.zws .zws-p.user-size>.zws-body>.result,main.zws .zws-p.user-size>.zws-body>.history,main.zws .zws-p.user-size>.zws-body>#torchPanel,main.zws .zws-p.user-size>.zws-body>#torchOut{width:100%;max-width:100%;min-width:0}
main.zws .zws-p>.zws-body>.result{width:100%;max-width:100%;min-width:0;border:0;box-shadow:none;background:none}
main.zws .zws-p>.zws-body>.vtools,main.zws .zws-p>.zws-body>.vtools2{position:static;inset:auto;display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:none;border:0;box-shadow:none;transform:none}
main.zws .zws-p>.zws-body>.history{width:320px;max-width:100%;padding:8px}
main.zws .zws-p>.zws-body>#torchPanel,main.zws .zws-p>.zws-body>#torchOut{width:360px;max-width:100%;padding:10px}
@media (max-width:820px){main.zws .zws-p>.zws-body>.controls,main.zws .zws-p>.zws-body>#torchPanel,main.zws .zws-p>.zws-body>#torchOut{width:min(92vw,420px)}}
main.zws .zws-p.bare.h>.zws-body>.vtools,main.zws .zws-p.bare.h>.zws-body>.vtools2{flex-wrap:nowrap;white-space:nowrap}
main.zws .zws-p.bare.v>.zws-body>.vtools,main.zws .zws-p.bare.v>.zws-body>.vtools2{flex-direction:column;flex-wrap:nowrap}
main.zws #zws-view.bare>.zws-body{overflow:auto;scrollbar-width:thin}
main.zws #zws-view.bare>.zws-body>.vtools>*{flex-shrink:0}
main.zws .zws-p.bare.h #litLightBox{display:flex;flex-wrap:nowrap;gap:4px;align-items:center}
main.zws .zws-p.bare.h #litLightBox[hidden]{display:none}
main.zws .zws-p.bare.h #litLightBox>*{flex-shrink:0}
main.zws #zws-view.bare>.zws-body>.vtools{align-items:center}
.zws-p.auto-off{display:none!important}
/* S7 in a workspace: the floating View panel is the one home of Reset view / Wireframe / Light (no second ctxbar) */
main.zws #vtools .inbar:not([hidden]){display:inline-flex!important}
main.zws #viewerCtx{display:none!important}
/* the page heading stays for screen readers while the 3D view fills the screen */
main.zws>.hero{position:absolute;width:0;height:0;margin:0;padding:0;border:0}
main.zws .hero h1{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}

/* B: printer kind is one setting (S1/S2), TorchC0 Beginner view (S9), photo tips */
body:not([data-print-kind=resin]) [data-kind-only=resin],body[data-print-kind=resin] [data-kind-only=fdm]{display:none !important}
.rzDrop .rzFileIn{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.rzDrop{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.rzDrop label.btn{min-height:44px}
.rzDrop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.rzAdv{margin:12px 0;border:1px solid var(--line);border-radius:var(--r);padding:0 12px}
.rzAdv>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.phototips{margin:8px 0;font-size:.92em}

.phototips details{display:inline}
.phototips summary{display:inline;cursor:pointer;color:var(--accent,inherit);text-decoration:underline;min-height:24px}
.phototips ul{margin:6px 0 0 1.1em;padding:0}
.saveind{position:fixed;left:12px;bottom:12px;z-index:30;font-size:12px;color:var(--mut,#8A8A8A);background:var(--panel,#fff);border:1px solid var(--line,#D9DBDF);border-radius:999px;padding:4px 10px;text-decoration:none;min-height:28px;display:inline-flex;align-items:center;opacity:.85}
.saveind:hover,.saveind:focus-visible{opacity:1;color:var(--txt,#0A0A0A)}
@media (max-width:768px){.saveind{bottom:calc(var(--tabbar-h,64px) + 10px + env(safe-area-inset-bottom));left:8px}}
.savetoast{position:fixed;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:8px;background:var(--panel,#fff);color:var(--txt,#0A0A0A);border:1px solid var(--line,#D9DBDF);border-radius:12px;padding:8px 10px;box-shadow:0 6px 20px rgba(10,10,10,.12);max-width:calc(100vw - 24px)}
.savetoast .btn{min-height:44px}
@media (max-width:768px){.savetoast{left:8px;right:8px;bottom:calc(var(--tabbar-h,64px) + 44px + env(safe-area-inset-bottom))}}
.saveprefs fieldset{border:0;padding:0;margin:0 0 8px;display:grid;gap:4px}
.saveprefs .radrow{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
/* D: where your work is saved, Safari note, export picker */
.savewhere{font-weight:500}
.safarinote{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 8px);z-index:45;display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100vw - 16px));background:var(--panel,#fff);color:var(--txt,#0A0A0A);border:1px solid var(--line,#D9DBDF);border-radius:12px;padding:8px 10px;font-size:14px;box-shadow:0 6px 20px rgba(10,10,10,.12)}
.safarinote .btn{min-height:44px;min-width:44px;flex:none}
.exportdlg{max-width:min(520px,calc(100vw - 16px));width:100%;border:1px solid var(--line,#D9DBDF);border-radius:14px;padding:16px;background:var(--panel,#fff);color:var(--txt,#0A0A0A)}
.exportdlg::backdrop{background:rgba(10,10,10,.35)}
.exportdlg h2{margin:0 0 8px}
.exportdlg .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.exportdlg .row.end{justify-content:flex-end;margin-top:8px}
.exportdlg .btn{min-height:44px}
.exportdlg #expNameOut{font-weight:600;word-break:break-word;flex:1 1 200px}
.exportdlg #expName{flex:1 1 200px;min-height:44px;font:inherit;padding:0 10px}
.expfmts{border:0;padding:0;margin:8px 0;display:grid;gap:2px}
.expfmts legend{font-weight:600;margin-bottom:4px}
.expslots{border:1px solid var(--line,#D9DBDF);border-radius:10px;padding:8px 10px;margin:8px 0}.expslots legend{font-weight:600;padding:0 4px}
.slotchk{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border:1px solid var(--line,#D9DBDF);border-radius:10px;cursor:pointer}.slotchk input{width:20px;height:20px}
.expwarn{margin-top:6px;padding:6px 10px;border-left:4px solid var(--warn,#B26B00);background:var(--sunk,#F4F5F7);border-radius:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.expfmt{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:4px 0;cursor:pointer}
.expfmt input{margin-top:4px}
.expfmt small{display:block;color:var(--mut,#5c5c5c);font-weight:400}
@media (max-width:768px){.exportdlg{max-height:calc(100dvh - 16px);overflow:auto}}
.expfmt input{flex:none;width:20px;height:20px}
.safarinote{width:min(560px,calc(100vw - 16px))}
@media (max-width:768px){.safarinote{top:auto;bottom:calc(var(--tabbar-h,64px) + 44px + env(safe-area-inset-bottom))}}
.saveind.inline{position:static;opacity:.8;white-space:nowrap}
@media (max-width:768px){.saveslot{display:none}}
/* E: Send to… */
.sendlist{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.sendlist .btn.sendto{width:100%;min-height:56px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px}
.sendlist .btn.sendto small{color:var(--mut);font-weight:400}
.sendtobtn{min-height:44px}
/* Studio hand-off after generate: Save work | Send to Slicer | Send to CAD, side by side and phone-usable */
.designname{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;margin:0 0 8px}
.designname label{font-weight:600}
.designname input{flex:1 1 160px;min-height:44px;font:inherit;padding:0 10px}
.designname .help{flex:1 1 100%;margin:0}
.handoffrow{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap;width:100%;min-width:0;flex:1 1 100%;margin:0 0 4px}
.handoffrow .btn{flex:1 1 0;min-width:0;min-height:44px;justify-content:center;padding:8px 6px;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.handoffrow .btn .i{flex:0 0 auto;width:16px;height:16px}
@media (max-width:420px){
  .handoffrow .btn{padding:8px 6px;font-size:13px;gap:4px}
  .handoffrow .btn .i{width:16px;height:16px}
}
/* FDM Slicer: per-slot filament + colour (AMS / CFS / MMU / ACE). Single-head printers never show this. */
.spslots{border:1px solid var(--line,#D9DBDF);border-radius:10px;padding:8px 10px;margin:10px 0}
.spslots legend{font-weight:600;padding:0 4px}
.spslot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0;min-height:44px}
.spslot select{min-height:44px;flex:1 1 120px}
.spslot input[type=color]{width:44px;height:44px;padding:2px;border:1px solid var(--line,#D9DBDF);border-radius:8px;background:var(--panel);cursor:pointer}

.backchip{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 76px);z-index:30;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;background:#0A0A0A;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 4px 14px rgba(10,10,10,.2)}
[data-theme="dark"] .backchip{background:#F2F2F2;color:#0A0A0A}
.backchip[hidden]{display:none}
body>.backchip.cad{top:60px}
@media (max-width:768px){.backchip{top:auto;bottom:calc(var(--tabbar-h,64px) + 96px + env(safe-area-inset-bottom))}}
html.handing main.page:not([hidden]),html.handing .cw-main{opacity:.4;transition:opacity .12s ease}
@media (prefers-reduced-motion:reduce){html.handing main.page:not([hidden]),html.handing .cw-main{transition:none}}
#viewTorch .pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sendfab{position:fixed;right:12px;bottom:12px;z-index:31;min-height:44px;border-radius:999px;box-shadow:0 4px 14px rgba(10,10,10,.2)}
.sendfab[hidden]{display:none}
@media (max-width:768px){.sendfab{bottom:calc(var(--tabbar-h,64px) + 44px + env(safe-area-inset-bottom))}}

/* re-upload protection: share conflict (credited-remix offer / refusal) and owner 'Report a copy' */
.reup { border: 1px solid var(--line, #ccc); border-radius: 10px; padding: 12px; margin: 10px 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.reup[hidden] { display: none; }
.reup p { margin: 0 0 8px; }
.reup .i { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reup-list { list-style: none; padding: 0; margin: 0 0 8px; }
.reup-list li { padding: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 480px) { .reup-actions .btn { flex: 1 1 100%; } }
/* ---------- 2D→3D tab ---------- */
.a3grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:var(--s4,16px);align-items:start}
.a3card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg,14px);padding:var(--s4,16px);display:flex;flex-direction:column;gap:10px;min-width:0}
.a3card h2{margin:0;font-size:var(--fs-lg,18px);display:flex;align-items:center;gap:8px}
.a3drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;border:1px dashed var(--line);border-radius:var(--r,12px);cursor:pointer;overflow:hidden;color:var(--mut)}
.a3drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.a3drop img{max-width:100%;max-height:240px;object-fit:contain}
.a3drop:focus-within{outline:2px solid var(--zt-a,#3E5C76);outline-offset:2px}
.a3modes{display:grid;gap:8px}
.a3mode{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r,12px);cursor:pointer;min-height:44px}
.a3mode:has(input:checked){border-color:var(--zt-a,#3E5C76);box-shadow:inset 3px 0 0 var(--zt-a,#3E5C76)}
.a3mode span{display:flex;flex-direction:column;gap:2px}.a3mode small{color:var(--mut)}
.a3view{position:relative;aspect-ratio:4/3;border-radius:var(--r,12px);background:var(--bg2,#EDEAE3);overflow:hidden}
.a3view canvas{width:100%!important;height:100%!important;display:block}
.a3empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0}
.a3note{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:0 0 var(--s4,16px);border-radius:var(--r,12px);border:1px solid var(--line);background:var(--panel)}
.a3note p{margin:2px 0 0}.a3note.warn{border-color:#C9A24A;background:color-mix(in srgb,#C9A24A 9%,var(--panel))}
.a3note code{overflow-wrap:anywhere}
.a3list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-sm,13px)}
.a3list li{display:flex;gap:6px;align-items:flex-start}.a3list.warn{color:var(--mut)}
.a3title{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ailbl{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-size:12px;font-weight:600;color:#3E5C76;white-space:nowrap}
html[data-theme=dark] .ailbl{color:#8FB0CC}
.ailbl .i{width:12px;height:12px}
.a3err{color:var(--err,#B3261E);display:flex;gap:6px;margin:0}
.a3busy{display:flex;gap:8px;align-items:center;margin:0}
.a3spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--zt-a,#3E5C76);animation:a3spin 1s linear infinite}
@keyframes a3spin{to{transform:rotate(360deg)}}
.a3cool{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s4,16px);padding:10px 14px;border-radius:var(--r,12px);background:var(--panel);border:1px solid var(--line)}
.a3cool p{margin:0;flex:1}
@media (max-width:1000px){.a3grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.a3out{grid-column:1/-1}}
@media (max-width:640px){.a3grid{grid-template-columns:minmax(0,1fr)}.a3drop{min-height:140px}}
@media (prefers-reduced-motion:reduce){.a3spin{animation:none}}
/* 2D→3D made the phone tab bar 9 wide (9 x 44 px > 390). On phones Learn leaves the bar; it stays one tap away
   from Showcase ("Learn" button) and the home tiles. */
@media (max-width:420px){.topbar .nav [data-view=learn]{display:none}}

/* Memory box: sample box button + one thumbnail per side */
#mboxBox .mbsample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
#mboxBox .mbsample .help { margin: 0; flex: 1 1 180px; }
#mboxBox .mbsides { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#mboxBox .mbsides li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: .85rem; }
#mboxBox .mbsides img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #8884); background: var(--panel, #8881); }
#mboxBox .mbsides img:not([src]) { visibility: visible; }
#mboxBox .mbsides .btn { width: 100%; padding-left: 4px; padding-right: 4px; }
/* Showcase provenance labels (AI-made, Printed by the community) + quiet tip link: calm, no counts */
.prov{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.2;padding:2px 8px;margin:4px 4px 0 0;border-radius:999px;border:1px solid var(--line);color:var(--mut);background:transparent}
.prov .i{width:14px;height:14px}
.prov.printed{border-color:var(--acc2,currentColor);color:var(--acc2,inherit)}
.provrow{margin:4px 0}
.tiplink{font-size:13px}
.tiplink a{color:var(--acc2)}
.aifilter{max-width:260px;margin:6px 0}

/* Showcase filters (printer / material / supports / licence / mature) */
.shfilters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:8px 0}
.shfilters>.i{width:18px;height:18px;align-self:center}
.shfilters .field{margin:0;min-width:130px}
.shfilters select{min-height:44px}
.shfilters .btn{min-height:44px}
.shfilters small.help{flex-basis:100%;margin:0}

/* Showcase collections — calm strip matching .shfilters / .prov (cherry-blossom vars) */
/* My Studio: its own block on Account (Me), under the calligraphy band, in normal flow */
#viewAccount .mestudio{margin:0 0 var(--s4,16px);padding:var(--s5,20px);border:1px solid var(--line);border-left:3px solid var(--zt-a,#A3241C);border-radius:var(--r-lg,14px);background:var(--panel);box-shadow:var(--sh-1);max-width:100%}
#viewAccount .mestudio h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.05rem}
#viewAccount .mestudio h2 .i{width:20px;height:20px;color:var(--zt-a,#A3241C)}
#viewAccount .mestudio .btn{min-height:44px;margin-top:10px;text-decoration:none}
@media (max-width:768px){#viewAccount .mestudio .btn{width:100%;justify-content:center}}
.studio-crumb{margin:0 0 8px;font-size:13px;color:var(--mut)}
.studio-crumb a{font-weight:650}
.cols{margin:16px 0 24px}
.cols h2{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin:0 0 4px}
.cols h2 .i{width:18px;height:18px}
.collist{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.collist li{border:1px solid var(--line);border-radius:var(--r,10px);padding:10px 12px;background:var(--panel)}
.collist summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px}
.collist .colbody{margin-top:8px}
.colchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--txt);text-decoration:none;font:inherit;cursor:pointer}
.colchip:hover{border-color:var(--acc)}
.colchip .i{width:16px;height:16px}
.colstrip{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.itcols{margin:10px 0;padding:8px 0;border-top:1px solid var(--line)}
.itcols fieldset{border:0;padding:0;margin:0}
.itcols label.inl{display:flex;gap:8px;align-items:center;min-height:44px}
#colNewRow{gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
#colNewRow input[type=text],#colNewRow input:not([type]){min-height:44px;flex:1;min-width:160px}
/* lithophane backing colour: picker + hex side by side, wraps on a phone */
.backingCustom{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.backingCustom[hidden]{display:none}
.backingCustom input[type=color]{width:48px;height:44px;padding:2px}
.backingCustom input[type=text]{width:9ch;min-height:44px;font-family:ui-monospace,monospace}
.backingCustom input[aria-invalid=true]{outline:2px solid var(--bad,#c33)}


/* Showcase rest (task 4): print settings, Q&A, prize-free challenges — cherry-blossom harmony */
.psettings,.pubps{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--panel)}
.psettings .psline,.psline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:var(--fs-sm);color:var(--ink)}
.pubps summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none}
.pubps summary em,.itps summary em{font-style:normal;opacity:.7;font-size:var(--fs-sm)}
.qa{margin:16px 0;padding-top:8px;border-top:1px solid var(--line)}
.qalist{list-style:none;padding:0;margin:8px 0;display:grid;gap:10px}
.qaitem{border:1px solid var(--line);border-radius:var(--r,10px);padding:10px 12px;background:var(--panel)}
.qaitem .q{margin:0 0 4px}.qaitem .a{margin:4px 0 0;color:var(--acc2,#C24D6B)}
.challenges{margin:14px 0 18px;padding:12px 14px;border:1px solid color-mix(in srgb, var(--acc2,#C24D6B) 35%, var(--line));border-radius:var(--r,12px);background:color-mix(in srgb, var(--acc2,#C24D6B) 6%, var(--panel))}
.challenges h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.05rem;color:var(--acc2,#C24D6B)}
#chHost{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:8px}
.chcard{border:1px solid var(--line);border-radius:var(--r,10px);padding:12px;background:var(--panel)}
.chcard h3{margin:0 0 6px;font-size:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pill.prizefree{background:color-mix(in srgb, var(--acc2,#C24D6B) 14%, transparent);border:1px solid color-mix(in srgb, var(--acc2,#C24D6B) 40%, var(--line));color:var(--acc2,#C24D6B);font-size:12px}
.chrules{margin:8px 0 12px;padding-left:1.2em}
.prform input[capture],.prform #prCam{min-height:44px}
.print-notes{margin:.25rem 0 0;white-space:pre-wrap}
.showoff-stage{margin:0 0 8px;max-width:280px}
.showoff-stage img{width:100%;height:auto;border-radius:10px;background:#eee}
.showoff-row{display:flex;flex-wrap:wrap;gap:8px}
.showoff-row figure{margin:0;width:140px}
.showoff-row img{width:100%;height:auto;border-radius:8px;background:#eee}
.showoff-row figcaption{font-size:13px}
.showoff-pick{display:flex;flex-direction:column;align-items:center;gap:2px;width:88px;padding:4px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.showoff-pick[aria-pressed=true]{border-color:var(--acc, var(--brand, #0a7))}
.print-name{display:block}


/* Optional Semi Pro / Pro (Account → Plans) */
.plan-grid { display: grid; gap: 12px; margin: 8px 0 16px; }
.plan-card { border: 1px solid var(--line, #2a3142); border-radius: 10px; padding: 12px 14px; background: var(--panel, #12161f); }
.plan-card.on { border-color: var(--accent, #29b6ff); box-shadow: inset 0 0 0 1px var(--accent, #29b6ff); }
.plan-card ul { margin: 6px 0 10px; padding-left: 1.2em; }
.plan-card .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #1e2636; font-size: 0.85em; }