/* ============================================================
   STL Ruler — design system (tokens extracted from STL PhotoStudio)
   ============================================================ */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+030B,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/instrument-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+030B,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/instrument-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* 600: prices, plan names, gold buttons (STANDARD v1 — same file as PlyFill) */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/instrument-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+030B,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Bold + Italic: text layers (Add Text). The italic file is variable (400–700). */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/instrument-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+030B,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/instrument-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+030B,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:dark;
  /* STANDARD v1 §3 — the same tokens as PlyFill and STL PhotoStudio */
  --bg:#131311; --chrome:#1b1a18; --chrome-2:#232220;
  --line:#302e2b; --line-2:#43413d; --line-3:#5a5752;
  --ink:#ece9e3; --ink-2:#a8a49c; --ink-3:#7a766f;
  --key:#e3ab4a; --key-ink:#3d2c0c; --key-bg:#211e1a; --solid-ink:#17160f;
  --cool:#7fa8cc; /* editor only (active tools, selected sizes); shared blocks use gold */
  --good:#7fae6e; --good-bg:#1c2419;
  --bad:#d96a57;
  --r:10px;
  --axis-x:#d96a57; --axis-y:#7fae6e; --axis-z:#7fa8cc;
  /* canvas behind the artboard: a lighter grey than the dark artboard preset */
  --canvas:#252421; --canvas-dot:rgba(236,233,227,.09);
  /* docked side panels: width + one type scale + one spacing scale */
  --dock-w:288px;
  --fs-ui:12.5px;      /* section headers and every control */
  --fs-label:11.5px;   /* field labels, hints, secondary text */
  --fs-caption:11px;   /* small uppercase sub-captions */
  --gap:10px;          /* between blocks in a panel / drawer */
  --gap-field:8px;     /* side-by-side fields (row2 / row3) */
  --gap-grid:6px;      /* button grids */
  --gap-list:5px;      /* stacked list rows */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.45 'Instrument Sans',system-ui,-apple-system,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* form controls don't inherit the page font by default (drawer headers
   and icon buttons were rendering in Arial) */
button,input,select,textarea{font-family:inherit}
.hidden{display:none!important}
.dim{color:var(--ink-3)}
.small{font-size:12px}
.center{text-align:center}
.gold{color:var(--key)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  border-radius:999px;padding:8px 15px;font:500 13px 'Instrument Sans',sans-serif;
  cursor:pointer;min-height:35px;white-space:nowrap;user-select:none;
}
.btn:hover{background:var(--chrome-2);color:var(--ink);border-color:var(--line-3)}
.btn.sm{min-height:30px;padding:5px 12px;font-size:12.5px}
.btn:disabled{opacity:.6;cursor:default}
.btn.solid{background:var(--ink);color:var(--solid-ink);border-color:var(--ink)}
.btn.solid:hover{background:#fff;border-color:#fff}
.btn.icon{padding:8px;min-width:34px;justify-content:center}
.btn.danger{border-color:#5b3630;color:#e3a197}
.btn.danger:hover{background:transparent;border-color:var(--bad);color:#f0b9ae}
.btn.wide{width:100%;justify-content:center}
.btn.goldbtn,.btn.gold{background:var(--key);color:var(--key-ink);border-color:var(--key);font-weight:600}
.btn.goldbtn:hover,.btn.gold:hover{background:#ecbb62;border-color:#ecbb62;color:var(--key-ink)}
/* the gold "do it" of the Pro sheet: 46 px, 600 */
.btn.checkout{min-height:46px;font-size:15px;font-weight:600;justify-content:center}
/* busy buttons: disabled, a spinner and "Saving…" (ui.js → busy()) */
.btn .bspin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:0 0 auto}
.btn.active{border-color:var(--cool);color:var(--cool)}
.btn svg,.tab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.linklike{background:none;border:none;color:var(--cool);cursor:pointer;font:13px 'Instrument Sans',sans-serif;padding:6px 0}
.linklike:hover{color:var(--ink)}

input,select,textarea{
  background:var(--chrome-2);border:1px solid var(--line-2);border-radius:8px;
  color:var(--ink);padding:7px 10px;font:13px 'Instrument Sans',sans-serif;min-height:32px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cool);outline-offset:-1px}
textarea{resize:vertical;line-height:1.35;min-height:64px}
input[type=color]{padding:2px;height:32px;cursor:pointer}
input[type=checkbox]{width:15px;height:15px;min-height:0;accent-color:var(--key)}
input[type=range]{padding:0}
label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink-3)}
.checkline{flex-direction:row;align-items:center;gap:8px;color:var(--ink-2);font-size:12.5px;cursor:pointer}

/* ---------------- header ---------------- */
#hdr{
  height:54px;flex:0 0 54px;background:var(--chrome);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 14px;z-index:40;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:15px}
.actions{display:flex;gap:8px;align-items:center}
.actions-out{margin-left:auto}
.avatarbtn{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  border-radius:999px;background:transparent;color:var(--ink-2);padding:7px 14px;
  font:13px 'Instrument Sans',sans-serif;cursor:pointer;min-height:34px;
}
.avatarbtn:hover{background:var(--chrome-2);color:var(--ink)}
.avatarbtn.signed{color:var(--ink)}
.statusdot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}


/* ---------------- app body & panels ---------------- */
/* Docked side columns, attached to the window edges (header → drawer bar).
   Each dock: a scrolling main panel on top + companion panels pinned to
   the bottom (left: Models list; right: Ruler tool, Rulers list). */
/* clip (not hidden): cuts off the mobile docks' off-screen parts without
   becoming scrollable — focusing a field there must never shift the app */
#appbody{flex:1;position:relative;display:flex;min-height:0;overflow:hidden;overflow:clip}
.dock{
  flex:0 0 var(--dock-w);width:var(--dock-w);min-height:0;position:relative;z-index:20;
  display:flex;flex-direction:column;background:var(--chrome);
}
#dock-left{border-right:1px solid var(--line)}
#dock-right{border-left:1px solid var(--line)}
.sidepanel{
  padding:14px 16px;display:flex;flex-direction:column;gap:var(--gap);
  overflow-y:auto;scrollbar-width:thin;min-height:0;
}
#panel-left,#panel-right{flex:1 1 auto}
/* bottom panels: one drawer each — its header stays put and the list
   scrolls under it once the panel reaches its height limit */
.dockfoot{border-top:1px solid var(--line);flex:0 0 auto;overflow:hidden}
.dockfoot>.drawer{display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
.dockfoot>.drawer>.drawer-h{flex:0 0 auto}
.dockfoot>.drawer.open>.drawer-b{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-bottom:0}
/* a collapsed bottom panel is just its header band */
.dockfoot:has(>.drawer:not(.open)){padding-bottom:0}
/* left dock: the Models and Text lists take the height they need (Models up
   to 60%, Text up to 30%); the settings above give way first — down to 25%
   of the dock, then they scroll — and only then does the Models list scroll */
#panel-left,#panel-right{flex-shrink:100;min-height:25%}
#panel-models{flex:0 1 auto;max-height:60%}
#panel-models:has(>.drawer.open){min-height:112px}
#panel-texts{max-height:30%}
/* right dock: the selection editor above gives way first (down to 25%);
   Ruler style (up to 50%) and the Rulers list (up to 40%) then scroll */
#panel-rulerstyle{flex:0 1 auto;max-height:50%}
#panel-rulers{flex:0 1 auto;max-height:40%}
#panel-rulers .dimlist{max-height:none;overflow:visible}
/* ONE header style for every panel section — standalone titles (Rulers,
   Ruler tool, Models, the selected model) and drawer headers alike */
.sidepanel h3, .drawer-h{
  font-size:var(--fs-ui);font-weight:500;line-height:20px;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.06em;margin:0;
}
#sel-none{display:flex;flex-direction:column;gap:var(--gap)}
/* the measurement editor's band sits flush with the panel top, like a panel's first main drawer */
#sel-dim>.drawer.main:first-child{margin-top:-14px}
/* selected model: its name as the panel title (gold, larger) + eye / remove */
.m-head{display:flex;align-items:center;gap:2px}
#m-title,#t-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:16px;line-height:22px;font-weight:500;color:var(--key);text-transform:none;letter-spacing:0}
.m-head .mr-btn{padding:4px}
.m-head .mr-btn svg{width:17px;height:17px}
.m-head #m-del:hover,.m-head #t-del:hover{color:var(--bad)}
.sidepanel p{margin:0}
.sidepanel .small{font-size:var(--fs-label)}
.sidepanel input,.sidepanel select,.sidepanel textarea,.sidepanel .btn,.sidepanel .linklike{font-size:var(--fs-ui)}
#sel-text{display:flex;flex-direction:column;gap:var(--gap)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-field)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap-field)}
/* a checkbox sharing a row with fields lines up with their inputs */
.row2>.checkline,.row3>.checkline{align-self:end;min-height:32px}
.btnrow{display:flex;gap:var(--gap-grid);flex-wrap:wrap}
/* Arrange: the six align buttons as 2 rows × 3 columns */
.aligngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.aligngrid .btn{width:100%;justify-content:center}
/* Arrange → Grid: models per row */
.gridcap{font-size:var(--fs-label);color:var(--ink-3);margin-bottom:-4px}
.gridrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.gridrow .btn{width:100%;justify-content:center;gap:5px;padding:6px 4px;min-width:0}
.btn svg.gridic{fill:currentColor;stroke:none;width:16px;height:16px}
.selhint{color:var(--ink-2);font-size:12.5px}
.segrow{display:flex;gap:0;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;width:fit-content}
.segrow.wrap{flex-wrap:wrap;border-radius:12px}
.seg{
  background:transparent;border:none;border-right:1px solid var(--line);color:var(--ink-2);
  padding:7px 11px;font:12.5px 'Instrument Sans',sans-serif;cursor:pointer;min-height:30px;
}
.seg:last-child{border-right:none}
.seg:hover{background:var(--chrome-2);color:var(--ink)}
.seg.active{background:var(--ink);color:#17160f}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.swatches button{aspect-ratio:1;border-radius:6px;border:1px solid var(--line-2);cursor:pointer;padding:0;min-height:0}
.swatches button:hover{transform:scale(1.12)}

/* ---------------- stage ---------------- */
/* lighter grey canvas with a subtle dot grid, so a dark artboard preset
   (#131311) never blends into the background; a faint ring outlines it too */
#stage{
  flex:1;min-width:0;position:relative;overflow:hidden;cursor:default;
  background-color:var(--canvas);
  background-image:radial-gradient(circle,var(--canvas-dot) 1px,transparent 1.3px);
  background-size:20px 20px;background-position:10px 10px;
}
#stage.space-pan{cursor:grab}
#stage-inner{position:absolute;inset:0;overflow:hidden}
#board-wrap{position:absolute;transform-origin:0 0}
#board{display:block;position:absolute;border-radius:2px;
  box-shadow:0 0 0 1px rgba(236,233,227,.07),0 10px 36px rgba(0,0,0,.45)}
#stage.dragging{outline:2px dashed var(--key);outline-offset:-8px}
#stage.ruler-mode{cursor:crosshair}
#stage.model-drag{cursor:grabbing}

.emptystate{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
/* first screen: its own dark card, so it reads on a white or a dark artboard;
   the h1 is the page's main heading for search engines */
.emptystate .dropbox{
  border:1.5px dashed var(--line-2);border-radius:18px;padding:36px 44px;text-align:center;color:var(--ink-3);
  background:var(--chrome);max-width:min(460px,calc(100% - 32px));
  transition:border-color .15s,color .15s;
}
#stage.dragging .dropbox{border-color:var(--key);color:var(--key)}
.emptystate h1{font-size:21px;font-weight:500;color:var(--ink);margin:12px 0 4px;line-height:1.3}
.emptystate .big{font-size:15px;color:var(--ink-2);margin:0 0 10px}
.emptystate .small{font-size:12px;margin:0}
.emptystate .es-link{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--cool);text-decoration:none;pointer-events:auto}
.emptystate .es-link:hover{color:var(--ink)}
.emptystate .es-actions{display:none;gap:10px;justify-content:center;margin-top:18px}
.emptystate .es-actions .btn{pointer-events:auto}
.emptystate.restore .es-actions{display:flex}
.emptystate.restore .es-link{display:none}
.emptystate.restore .dropbox{border-color:var(--key)}
@media (max-width:900px){.emptystate .dropbox{padding:28px 22px}}

/* toasts (STANDARD v1 §3): bottom-centre, above the 40 px drawer bar, coloured left edge */
.toasts{position:fixed;left:50%;bottom:calc(56px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;align-items:center;pointer-events:none}
.toast{
  max-width:calc(100vw - 32px);background:var(--chrome-2);border:1px solid var(--line-2);border-left:3px solid var(--line-3);border-radius:10px;
  padding:10px 14px 10px 12px;font-size:12.5px;color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.45);
  animation:toastin .2s ease-out;pointer-events:auto;transition:opacity .3s;
}
.toast.good{border-left-color:var(--good)}
.toast.bad{border-left-color:var(--bad)}
.toast.gold{border-left-color:var(--key)}
.toast.out{opacity:0}
@keyframes toastin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

.zoomctl{
  position:absolute;left:14px;bottom:14px;z-index:20;display:flex;align-items:center;gap:6px;
  background:rgba(19,19,17,.9);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:999px;padding:5px 8px;
}
.zoomctl span{font-size:12px;color:var(--ink-3);min-width:42px;text-align:center}

#viewcube-wrap{
  width:100%;background:var(--chrome-2);border:1px solid var(--line-2);border-radius:12px;padding:8px;
}
#viewcube{display:block;width:100%;height:auto;cursor:pointer;touch-action:none}

/* ---------------- bottom drawer bar ---------------- */
#drawerbar{
  flex:0 0 auto;background:var(--chrome);border-top:1px solid var(--line);
  display:flex;align-items:stretch;position:relative;z-index:30;min-height:40px;
}
.tabs{display:flex}
.tab{
  background:transparent;border:none;border-right:1px solid var(--line);color:var(--ink-2);
  padding:0 18px;font:13px 'Instrument Sans',sans-serif;cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:6px;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);box-shadow:inset 0 2px 0 var(--key)}
.drawerbody{display:none;align-items:center;gap:10px;padding:8px 14px;flex:1;overflow-x:auto;scrollbar-width:thin}
#drawerbar.open .drawerbody:not(.hidden){display:flex}
.lookrow{display:flex;gap:10px;align-items:center}
/* presets: one row (4 white artboards, 4 dark, then saved ones) — the
   drawer scrolls sideways when the window is narrower */
.presetrow{display:flex;flex-wrap:nowrap;gap:8px;align-items:start}
.look{
  width:104px;flex:0 0 104px;background:var(--chrome-2);border:1px solid var(--line-2);border-radius:8px;
  padding:5px;cursor:pointer;text-align:center;position:relative;
}
.presetrow .look{flex:none;width:96px}
.look:hover{border-color:var(--ink-3)}
.look img,.look .thumb{width:100%;height:56px;object-fit:cover;border-radius:5px;background:var(--bg);display:block}
.look .thumb{position:relative;overflow:hidden}
/* thumbnail mini dimension line in the preset's ruler colour */
.look .t-dimline{position:absolute;left:8px;right:8px;bottom:17px;border-bottom:1.5px solid currentColor;font-size:8px;line-height:1}
.look .t-dimline::before,.look .t-dimline::after{content:'';position:absolute;bottom:-2.5px;width:1.5px;height:5px;background:currentColor}
.look .t-dimline::before{left:0}
.look .t-dimline::after{right:0}
.look .t-dimline span{position:absolute;left:50%;transform:translateX(-50%);bottom:2px;padding:0 2px}
/* thumbnail mini model shape in the preset's outline/label colour */
.look .t-shape{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:30px;height:22px;border:1.5px solid;border-radius:4px}
.look .t-viewtag{position:absolute;left:5px;bottom:3px;font-size:7.5px;font-weight:500;letter-spacing:.05em}
.look .cap{font-size:11.5px;color:var(--ink-2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look .del{position:absolute;top:2px;right:2px;background:rgba(19,19,17,.85);border:none;color:var(--ink-3);border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;line-height:1;display:none;padding:0}
.look:hover .del{display:block}
.look .del:hover{color:var(--bad)}
/* Saved compositions: the cloud storage meter before the tiles */
.storemeter{flex:0 0 200px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--chrome-2);font-size:11.5px;color:var(--ink-2)}
.storemeter .sm-top{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.storemeter .sm-top span:last-child{color:var(--ink);font-weight:500}
.storemeter .sm-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.storemeter .sm-bar i{display:block;height:100%;background:var(--key);border-radius:inherit}
.storemeter .sm-note{font-size:var(--fs-caption);color:var(--ink-3);line-height:1.35}
.storemeter .sm-note .linklike{padding:0;min-height:0;font-size:inherit;color:var(--key)}
.storemeter.full .sm-bar i{background:var(--bad)}
.storemeter.lapsed{border-color:var(--bad)}
.storemeter.lapsed .sm-bar i{background:var(--bad)}
.storemeter.lapsed .sm-note{color:#e3a197}
#comp-note.bad{color:#e3a197}
/* legal links + credit, right before UNLOCK PRO */
.footmeta{margin-left:auto;align-self:center;display:flex;align-items:center;gap:14px;padding:0 16px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.footmeta a{color:var(--ink-3);text-decoration:none}
.footmeta a:hover{color:var(--ink)}
.footmeta .credit a{color:var(--ink-2)}
.promobtn{
  margin-left:0;align-self:center;margin-right:12px;position:sticky;right:12px;
  border:1px solid var(--key);color:var(--key);background:transparent;border-radius:999px;
  padding:8px 20px;font:500 13px 'Instrument Sans',sans-serif;cursor:pointer;min-height:34px;white-space:nowrap;
}
.promobtn:hover{background:var(--key);color:var(--key-ink)}
.lockbadge{display:inline-block;width:11px;height:11px;vertical-align:-1px;
  background:currentColor;color:var(--key);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0110 0v3M5 11h14v10H5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0110 0v3M5 11h14v10H5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lockbadge:empty::after{content:'';display:block;width:11px;height:11px}

/* ---------------- veil & sheets ---------------- */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:80;animation:veilIn .18s ease}
@keyframes veilIn{from{opacity:0}}
/* sheets (STANDARD v1 §3): centred panel, 440 px, radius 14, 24 px padding, 16 px gaps, slide-in */
.sheet{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;
  width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  background:var(--chrome);border:1px solid var(--line-2);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:sheetIn .22s ease-out;
}
@keyframes sheetIn{from{opacity:0;transform:translate(-50%,calc(-50% + 18px))}}
.sheet > *{flex-shrink:0} /* a tall sheet scrolls; its parts never squash */
.kicker{display:inline-flex;align-items:center;gap:6px;color:var(--key);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kicker svg{width:16px;height:16px;flex:0 0 auto}
.sheet-head{display:flex;flex-direction:column;gap:8px}
.sheet-sub{margin:0;font-size:13px;color:var(--ink-2)}
/* the Unlock Pro modal always sits above every other sheet (e.g. Export) */
#sheet-pro{z-index:120}
.sheet h2{font-size:21px;font-weight:500;line-height:1.2;margin:0;text-wrap:balance}
.sheet .x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;
  background:none;border:none;border-radius:8px;color:var(--ink-3);font-size:20px;cursor:pointer;padding:0;line-height:1;z-index:2;
}
.sheet .x:hover{background:var(--chrome-2);color:var(--ink)}
/* fields in sheets (STANDARD v1 §3): 34 px, --bg fill, gold focus ring; the label above in 11.5 px */
.sheet input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.sheet select{min-height:34px;height:34px;background:var(--bg);border-color:var(--line-2)}
.sheet textarea{background:var(--bg)}
.sheet input:hover,.sheet select:hover,.sheet textarea:hover{border-color:var(--line-3)}
.sheet input:focus,.sheet select:focus,.sheet textarea:focus{outline:none;border-color:var(--key);box-shadow:0 0 0 3px rgba(227,171,74,.16)}
.sheet input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sheet input[type=number]::-webkit-inner-spin-button,.sheet input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.form-err{margin:0;font-size:12.5px;color:var(--bad)}
.form-err.info{color:var(--ink-2)}
.hint{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.hint.warn{color:var(--key)}
.hint.bad{color:#e3a197}
.fine{margin:-6px 0 0;text-align:center;font-size:11.5px;color:var(--ink-3);text-wrap:balance}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2)}
.ticks li{padding-left:24px;position:relative}
.ticks li::before{
  content:'';position:absolute;left:0;top:3px;width:14px;height:14px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background:var(--good);
}
.ticks.bad li::before{background:var(--bad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plangrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.planopt{border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--chrome-2)}
.planopt:hover{border-color:var(--ink-3)}
.planopt.sel{border-color:var(--key)}
.planopt .nm{font-weight:500;font-size:13px}
.planopt .pr{color:var(--key);font-size:15px;font-weight:500;margin-top:2px}
.planopt .ds{color:var(--ink-3);font-size:11.5px}
.sizegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sizeopt{border:1px solid var(--line-2);border-radius:10px;padding:9px 10px;cursor:pointer;background:var(--chrome-2);font-size:12.5px;color:var(--ink-2);text-align:center}
.sizeopt:hover{border-color:var(--ink-3);color:var(--ink)}
.sizeopt.sel{border-color:var(--cool);color:var(--ink)}
.sizeopt.locked{opacity:.75}
.sizeopt .lockbadge{margin-left:4px}
.sizeopt.exact{grid-column:1/-1}
.exportpreview{border:1px solid var(--line);border-radius:10px;background:var(--bg);display:grid;place-items:center;padding:8px}
#export-thumb{max-width:100%;height:auto;border-radius:4px}
.legal-note a{color:var(--key);text-decoration:none}
.legal-note a:hover{color:#ecbb62;text-decoration:underline}
.legal-note{margin:0;line-height:1.5}

/* ---------------- right-panel subcards ---------------- */
.subcard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:var(--gap)}
.subcard h4{font-size:var(--fs-caption);font-weight:500;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin:0}

/* ---------------- view grid & rotate ---------------- */
.viewgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.vbtn{background:var(--chrome-2);border:1px solid var(--line-2);border-radius:8px;color:var(--ink-2);padding:6px 4px;font:var(--fs-ui) 'Instrument Sans',sans-serif;cursor:pointer;min-height:28px}
.vbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.vbtn.active{background:var(--ink);color:#17160f;border-color:var(--ink)}
.vbtn.iconbtn{padding:4px;display:grid;place-items:center;min-height:36px}
.vbtn svg{display:block}
/* light-gray solid cube: three visible faces + all edges, gold highlight */
.vbtn .f-a{fill:#dbd8d1}
.vbtn .f-b{fill:#c8c5be}
.vbtn .f-c{fill:#b4b1aa}
.vbtn .cube line{stroke:#6f6b64;stroke-width:.9}
.vbtn .hl{stroke:var(--key);stroke-width:2.4;fill:none;stroke-linecap:round}
.vbtn .hlspot{fill:var(--key)}
.vbtn.active .f-a{fill:#8a857c}
.vbtn.active .f-b{fill:#7a766f}
.vbtn.active .f-c{fill:#6a665f}
.vbtn.active .cube line{stroke:#43413d}
.vbtn.active .hl{stroke:#17160f}
.vbtn.active .hlspot{fill:#17160f}
.rotrow{display:flex;gap:var(--gap-grid);align-items:center;flex-wrap:wrap}
.rotrow .btn{padding:6px 9px;min-height:30px;min-width:0}
.rotfield{flex:1;min-width:86px;flex-direction:row;align-items:center;gap:7px}
.rotfield input{min-height:30px}

/* ---------------- dimensions list ---------------- */
.dimlist{display:flex;flex-direction:column;gap:var(--gap-list);max-height:220px;overflow-y:auto;scrollbar-width:thin}
.dimgroup{font-size:var(--fs-caption);font-weight:500;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-top:8px}
.dimgroup:first-child{margin-top:0}
.dimrow{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;cursor:pointer;font-size:var(--fs-ui);color:var(--ink-2)}
.dimrow.manual{border-left:2px solid var(--key)} /* gold edge = manual ruler */
.dimrow:hover{border-color:var(--ink-3);color:var(--ink)}
.dimrow.sel{border-color:var(--key)}
.dimrow .dl-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.dimrow .dl-val{color:var(--ink);font-weight:500;white-space:nowrap}
.dimrow .dl-del{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:0 2px;font-size:14px;line-height:1;min-height:0}
.dimrow .dl-del:hover{color:var(--bad)}

/* ---------------- pan lock ---------------- */
#zoom-lock.locked{color:var(--key);border-color:var(--key)}

/* ---------------- checkout sheet (on-site Square card form) ---------------- */
#sheet-checkout{z-index:120}
.co-form{display:flex;flex-direction:column;gap:13px;transition:opacity .2s}
.co-back{align-self:flex-start;padding:0;margin-bottom:-6px;font-size:12px}
.co-summary{border:1px solid var(--line-2);border-radius:12px;background:var(--chrome-2);padding:4px 14px}
.co-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.co-row:last-child{border-bottom:none}
.co-row span:last-child{text-align:right;font-weight:500}
.co-block{display:flex;flex-direction:column;gap:9px}
.co-blockhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.co-blockhead > *{white-space:nowrap}
.co-blockhead .linklike{padding:0;font-size:12px}
.co-step{font-size:var(--fs-caption);font-weight:500;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
.co-forgot{align-self:flex-start;padding:0;font-size:12px;margin-top:-3px}
.co-signedin{margin-top:-4px}
.co-signedin span{color:var(--ink-2)}
.co-cardload{display:block;padding:14px 2px;border:1px dashed var(--line-2);border-radius:10px;text-align:center}
.co-err{margin:0;padding:9px 12px;border:1px solid var(--bad);border-radius:10px;background:rgba(163,86,76,.14);color:#e3a197;font-size:12.5px}
.co-sandbox{margin:-4px 0 0;font-size:11.5px;color:var(--key);text-align:center}
.co-pay .spinner{display:none}
/* busy: fields dim + locked, the pay button shows the loader + current step */
#sheet-checkout.busy .co-form > :not(.co-pay){opacity:.45;pointer-events:none}
#sheet-checkout.busy .co-pay{pointer-events:none}
#sheet-checkout.busy .co-pay .spinner{display:inline-block}
#sheet-checkout.busy .x{visibility:hidden}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(23,22,15,.25);border-top-color:#17160f;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.co-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 0 2px}
.co-done h2{font-size:21px}
.co-done p{margin:0;font-size:14px;color:var(--ink-2)}
.co-done .btn{margin-top:12px}
.co-check{width:64px;height:64px;margin-bottom:6px}
.co-check circle{fill:none;stroke:var(--key);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .55s ease-out forwards}
.co-check path{fill:none;stroke:var(--key);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .35s .45s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2s}
  .co-check circle,.co-check path{animation:none;stroke-dashoffset:0}
}

/* ---------------- account sheet ---------------- */
.accrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:8px}
.accrow .dim{flex:0 0 auto}
#acc-cancel.danger-armed{background:var(--bad);color:var(--ink)}

/* ---------------- export sheet extras ---------------- */
#export-copy{margin-top:-4px}
#export-server-note{margin:0}
#export-dxf-warn{margin:0;color:var(--key)}

/* ---------------- mobile panels toggle (hidden on desktop) ---------------- */
#btn-panels{display:none}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  /* every header control stays reachable: the actions row wraps */
  #hdr{flex-wrap:wrap;height:auto;flex:0 0 auto;min-height:54px;padding:8px 10px;row-gap:8px}
  #hdr .actions{flex-wrap:wrap;row-gap:6px}
  #btn-panels{display:inline-flex}
  /* the docks leave the row to the canvas: the left one (artboard,
     arrange, models, text) slides in from the side via the header toggle,
     the right one (selection, ruler style, ruler tool, rulers) waits at the
     bottom and slides up when touched */
  #dock-left{
    position:absolute;left:0;top:0;bottom:0;width:min(320px,86vw);z-index:60;
    border:1px solid var(--line-2);border-left:none;border-radius:0 14px 14px 0;
    transform:translateX(-112%);transition:transform .2s;
  }
  body.panels-open #dock-left{transform:none}
  #dock-right{
    position:absolute;left:0;right:0;bottom:0;width:100%;max-height:45%;z-index:50;
    border:1px solid var(--line-2);border-bottom:none;border-radius:14px 14px 0 0;
    transform:translateY(calc(100% - 44px));transition:transform .2s;
  }
  #dock-right:focus-within{transform:none}
  #dock-right #panel-rulertool{max-height:none}
  /* bottom bar: the credit makes room on narrow screens */
  .footmeta .credit{display:none}
}
@media (max-width:640px){.footmeta{display:none}}
@media (prefers-reduced-motion:reduce){
  #dock-left, #dock-right{transition:none}
}

/* ---------------- collapsible drawers (both panels) ---------------- */
/* Borderless, padding-free drawers: bold section titles with a divider line
   between drawers only (none above the first, none below the last). */
.drawer{border:none;border-radius:0;padding:0}
.drawer + .drawer{border-top:1px solid var(--line)}
.drawer-h{
  display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;
  background:none;border:none;cursor:pointer;border-radius:0;
  padding:10px 0;min-height:0;
}
/* main panels: an icon before the name (gold while open, like the marker) */
.dh-ic{width:16px;height:16px;flex:0 0 auto;stroke:var(--ink-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.drawer.main.open>.drawer-h .dh-ic{stroke:var(--key)}
/* a panel that starts with a drawer: its header sits flush with the panel's
   top padding, exactly like the standalone titles (Rulers, Ruler tool) */
.sidepanel>.drawer:first-child>.drawer-h{padding-top:0}
.drawer-h:hover{color:var(--ink)}
.drawer-h::after{content:'▸';font-size:20px;line-height:1;color:var(--ink-3);transition:transform .15s;margin-left:auto}
/* child combinators: a drawer nested in an open one (Artboard → Pattern) keeps its own state */
.drawer.open>.drawer-h::after,.drawer.open>.drawer-hrow>.drawer-h::after{transform:rotate(90deg)}
.drawer-b{display:none;flex-direction:column;gap:var(--gap);padding:0 0 14px}
.drawer.open>.drawer-b{display:flex}
/* a sub-drawer inside a main panel's body (Pattern): a divider above, and a
   header row that also holds its on/off switch */
.drawer-b>.drawer{border-top:1px solid var(--line);margin-top:2px}
.drawer-b>.drawer>.drawer-b{padding-bottom:4px}
.drawer-hrow{display:flex;align-items:center;gap:10px}
.drawer-hrow>.drawer-h{flex:1}
.switch{position:relative;display:inline-flex;flex:0 0 auto;width:34px;height:20px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;min-height:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .15s;pointer-events:none}
.switch span::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--ink-2);transition:transform .15s,background .15s}
.switch input:checked+span{background:var(--key)}
.switch input:checked+span::after{transform:translateX(14px);background:var(--key-ink)}
.switch input:focus-visible+span{outline:2px solid var(--cool);outline-offset:2px}
/* pattern types: a small preview above each name */
.patgrid .seg{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:var(--fs-caption)}
.patgrid .seg svg{width:30px;height:18px;stroke:currentColor;fill:none;stroke-width:1}
/* MAIN panels (Artboard, Ruler style, Arrange, Models, Text, Ruler tool,
   Rulers, Measurement): a full-width header band — brighter, heavier title,
   gold marker while open — so they read apart from the plain sub-drawers
   inside them (Pattern, the selected model's Outline, Fill …) */
.drawer.main{margin:0 -16px}
.drawer.main>.drawer-h{
  padding:11px 16px;background:var(--chrome-2);color:var(--ink);font-weight:600;letter-spacing:.09em;
  box-shadow:inset 3px 0 0 var(--line-2);
}
.drawer.main>.drawer-h:hover{background:#2a2926}
.drawer.main.open>.drawer-h{box-shadow:inset 3px 0 0 var(--key)}
.drawer.main>.drawer-b{padding:12px 16px 14px}
.sidepanel>.drawer.main:first-child{margin-top:-14px}
.sidepanel>.drawer.main:first-child>.drawer-h{padding-top:11px}

/* ---------------- right-panel cards ---------------- */
.card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:var(--gap)}
.card>h3{margin-top:0}

/* ---------------- preset grids (artboard + views) ---------------- */
.presetgrid,.viewbtn-grid{display:grid;gap:var(--gap-grid)}
.presetgrid{grid-template-columns:repeat(4,1fr)}
.viewbtn-grid{grid-template-columns:repeat(3,1fr)}
.presetgrid .seg,.viewbtn-grid .seg{
  border:1px solid var(--line-2);border-radius:8px;padding:7px 4px;text-align:center;min-height:30px;
}
.presetgrid .spanall,.viewbtn-grid .spanall{grid-column:1/-1}

/* ---------------- models list (bottom of the left dock) ---------------- */
.modellist{display:flex;flex-direction:column;gap:var(--gap-list)}
.modelrow{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 2px;cursor:pointer;
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.modelrow:hover{border-color:var(--ink-3)}
/* the row being dragged to a new place in the list */
.modelrow.textrow{padding-left:8px}
.mr-ic{display:flex;color:var(--ink-3);flex:0 0 auto}
.mr-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.modelrow.dragging{border-color:var(--key);background:var(--chrome-2);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:grabbing;position:relative;z-index:1}
.modelrow.sel{border-color:var(--key)}
.modelrow.missing{border-style:dashed}
.mr-names{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mr-label{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-file{font-size:var(--fs-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-btn{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:3px;display:flex;min-height:0}
.mr-btn:hover{color:var(--ink)}
.mr-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}


/* ---------------- import settings orientation buttons ---------------- */
#orient-row .btn{padding:6px 9px;min-height:30px}

/* ---------------- auth sheets: field spacing ---------------- */
#auth-main,#auth-forgotpane{display:flex;flex-direction:column;gap:12px}

/* ---------------- artboard: resolution + scale tools ---------------- */
.abres{font-size:var(--fs-label)}
.abres #ab-res{color:var(--ink-2);font-weight:500}
/* artboard: platform presets (name + export size), then A4 print / Custom */
.presetgrid.platforms{grid-template-columns:repeat(2,1fr)}
.presetgrid .seg small{display:block;font-size:var(--fs-caption);color:var(--ink-3);margin-top:1px}
.presetgrid .seg.active small{color:inherit;opacity:.7}
#ab-scalebtns{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
#ab-scalebtns .btn{padding:6px 4px;min-height:30px;justify-content:center;width:100%}

/* ---------------- orient rows (X / Y / Z / angle) ---------------- */
.orientrows{display:flex;flex-direction:column;gap:6px}
.orow{display:grid;grid-template-columns:40px 1fr 1fr 48px 32px;gap:var(--gap-grid);align-items:center}
.orow .btn{padding:6px 4px;min-height:30px;min-width:0;justify-content:center}
.orow .btn.icon{min-width:0;padding:6px}
.orow .oaxis{font-size:var(--fs-caption);font-weight:500;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.orow .oval{text-align:center;font-size:var(--fs-ui);color:var(--ink-2)}
.orow input{min-height:30px;padding:5px 6px;text-align:center}

/* ---------------- split model drawer ---------------- */
.splitopts{display:flex;flex-direction:column;gap:var(--gap)}
#split-axis .seg{padding:7px 2px}
.splithead{display:flex;justify-content:space-between;gap:8px}
.splitread{color:var(--ink-2);text-align:right}
.splitopts .row2>.btn{align-self:end;justify-content:center;width:100%;min-width:0;padding-left:8px;padding-right:8px}

/* ---------------- color pickers: hex field + preset dots ---------------- */
.cpick{display:grid;grid-template-columns:44px 1fr;gap:var(--gap-grid);width:100%}
.cpick input[type=color]{width:44px}
.cpick-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:lowercase;padding-left:7px;padding-right:7px}
.cpick-dots{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.cpick-dot{aspect-ratio:1;width:100%;border-radius:50%;border:1px solid var(--line-2);cursor:pointer;padding:0;min-height:0}
.cpick-dot:hover{transform:scale(1.15);border-color:var(--ink-3)}

/* ---------------- models list: drag handle (reorder) ---------------- */
.mr-grip{background:none;border:none;color:var(--ink-3);cursor:grab;padding:6px 3px;display:flex;flex:0 0 auto;min-height:0;border-radius:4px;touch-action:none}
.mr-grip:hover,.mr-grip:focus-visible{color:var(--ink)}
.mr-grip svg{width:14px;height:14px;fill:currentColor}

/* ============================================================
   STANDARD v1 — Pro sheet, checkout, account, help (PlyFill's look)
   ============================================================ */
.btn.whitepill{background:var(--ink);color:var(--solid-ink);border-color:var(--ink);border-radius:999px;padding:12px 15px;font-size:14px;min-height:46px;justify-content:center}
.btn.whitepill:hover{background:#fff;border-color:#fff}
.pro-foot{display:flex;gap:6px;justify-content:center;align-items:center;font-size:11.5px;color:var(--ink-3);margin:0}
.pro-foot svg{flex:0 0 auto}
.features{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.features li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;font-size:13.5px;color:var(--ink-2)}
.features svg{width:14px;height:14px;margin-top:3px;color:var(--good)}

/* the Pro sheet: 540 px, the gold promotion banner, Monthly | Yearly, three tier cards */
.sheet.pro-panel{width:540px;padding:26px 26px 22px;gap:18px}
.pro-panel h2{font-size:25px;letter-spacing:-.01em}
.pro-panel .sheet-sub{font-size:14px;line-height:1.5;text-wrap:balance}
.pro-reason{margin:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;background:var(--chrome-2);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.pro-reason .lockbadge{flex:0 0 auto}
.pro-promo{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--key);border-radius:14px;
  background:linear-gradient(120deg,rgba(227,171,74,.24),rgba(227,171,74,.07) 55%,rgba(227,171,74,.14));overflow:hidden}
.pro-promo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,236,196,.16) 45%,transparent 60%);transform:translateX(-100%);animation:promoShine 3.6s ease-in-out .6s infinite;pointer-events:none}
@keyframes promoShine{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.pp-badge{display:grid;place-items:center;align-content:center;width:84px;height:84px;border-radius:50%;background:var(--key);color:var(--key-ink);box-shadow:0 6px 20px rgba(227,171,74,.28);transform:rotate(-8deg)}
.pp-badge b{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pp-badge span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.pp-text{display:grid;gap:6px;min-width:0}
.pp-name{color:var(--key);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pp-lock{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;color:var(--ink);font-size:17.5px;font-weight:600;line-height:1.3;text-wrap:balance}
.pp-lock svg{width:18px;height:18px;margin-top:3px;color:var(--key)}
.pp-ends{font-size:12.5px;color:var(--ink-2)}
/* Monthly | Yearly: a segmented switch; "2 months free" rides on the Yearly half */
.period-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg)}
.period-switch button{position:relative;height:34px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:500 13.5px 'Instrument Sans',sans-serif;cursor:pointer}
.period-switch button:hover{color:var(--ink)}
.period-switch button[aria-checked="true"]{background:var(--ink);color:var(--solid-ink)}
.period-switch button:focus-visible{outline:2px solid var(--key);outline-offset:2px}
.per-save{position:absolute;top:-17px;right:14px;padding:4px 9px;border-radius:999px;background:var(--key);color:var(--key-ink);font-size:11px;font-weight:600;line-height:1.1;white-space:nowrap;box-shadow:0 0 0 3px var(--chrome)}
.per-save:empty{display:none}
.plans3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.plan{position:relative;display:grid;align-content:start;gap:7px;padding:14px 13px 15px;border:1px solid var(--line-2);border-radius:12px;background:var(--chrome-2);cursor:pointer;transition:border-color .15s,background .15s;min-width:0}
.plan:hover{border-color:var(--line-3)}
.plan input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.plan:has(input:checked){border-color:var(--key);background:var(--key-bg);box-shadow:0 0 0 1px var(--key)}
.plan:has(input:focus-visible){outline:2px solid var(--key);outline-offset:3px}
.plan-top{display:flex;align-items:center;gap:8px;min-height:20px}
.plan-dot{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--line-3)}
.plan:has(input:checked) .plan-dot{border:5px solid var(--key)}
.plan-name{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.plan-price{margin-top:4px;font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink);white-space:nowrap}
.plan-price small{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.plan-was{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.plan-was s{text-decoration-thickness:1.5px}
.plan-was b{padding:2px 7px;border-radius:6px;background:rgba(227,171,74,.16);color:var(--key);font-size:12px;font-weight:600}
.plan-note{font-size:12px;line-height:1.35;color:var(--ink-2);text-wrap:balance}
.plan-feat{display:grid;grid-template-columns:14px minmax(0,1fr);gap:6px;margin-top:3px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.plan-feat svg{width:13px;height:13px;margin-top:2px;color:var(--good)}
@media (max-width:560px){
  .sheet.pro-panel{gap:16px;padding:22px 16px 0}
  .pro-panel h2{font-size:22px}
  .plans3{grid-template-columns:1fr;gap:8px}
  .plan{grid-template-columns:auto 1fr auto;grid-template-areas:"top price price" "note note was" "feat feat feat";align-items:center;gap:4px 10px;padding:12px 14px}
  .plan-top{grid-area:top}.plan-price{grid-area:price;justify-self:end;font-size:28px;margin:0;text-align:right}
  .plan-price small{display:inline;margin:0 0 0 2px;font-size:12px}
  .plan-was{grid-area:was;justify-self:end}.plan-note{grid-area:note}.plan-feat{grid-area:feat;margin:0;padding-top:6px}
  .pro-promo{gap:12px;padding:14px}
  .pp-badge{width:64px;height:64px}
  .pp-badge b{font-size:21px}
  .pp-lock{font-size:14.5px}
  /* the gold button stays in view while the cards scroll */
  .pro-panel .pro-go{position:sticky;bottom:0;margin:0 -16px;padding:12px 16px 16px;background:linear-gradient(transparent,var(--chrome) 14px);z-index:3}
  .pro-panel .fine{display:none}
}
.pro-go{display:grid;gap:12px}
@media (prefers-reduced-motion:reduce){.pro-promo::after,.sheet,.veil,.toast{animation:none}}

/* checkout: the summary with a struck list price and the promo's gold note */
.co-row .was{margin-left:6px;font-weight:400;color:var(--ink-3)}
.ck-promo{margin:-4px 0 0;font-size:12.5px;line-height:1.45;color:var(--key)}
.co-sandbox{margin:0;padding:8px 10px;border:1px solid var(--key);border-radius:8px;font-size:12px;color:var(--key);text-align:left}

/* the header's account button: who is signed in (nickname); the bottom bar's gold PRO badge */
.avatarbtn .acct-ic{width:15px;height:15px;flex:0 0 auto}
.avatarbtn .t{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promobtn{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 16px;background:var(--key-bg);font:600 12.5px 'Instrument Sans',sans-serif;letter-spacing:.05em}
.promobtn svg{width:15px;height:15px}
.promobtn:hover{background:#2c2720;color:var(--key)}
/* a Pro member's PRO button is green (STANDARD v1.1, as PlyFill's .probadge); UNLOCK PRO stays gold */
.promobtn.pro{border-color:var(--good);background:var(--good-bg);color:var(--good);letter-spacing:.08em}
.promobtn.pro:hover{background:#243021;border-color:#93c282;color:#93c282}

/* the account popup (STANDARD v1 §4.6): label / value rows in a bordered box */
.acct-rows{margin:0;display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.acct-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px}
.acct-row:first-child{border-top:0}
.acct-row dt{color:var(--ink-3)}
.acct-row dd{margin:0;color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
.acct-plan{color:var(--key)!important}
.acct-plan.free{color:var(--ink)!important}
.acct-plan small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--ink-2)}
.acct-meter{display:block;height:5px;margin-top:7px;border-radius:3px;background:var(--line);overflow:hidden}
.acct-meter i{display:block;height:100%;width:0;background:var(--key);border-radius:inherit;transition:width .3s}
.acct-meter.full i{background:var(--bad)}
.acct-admin{align-self:flex-start}
.acct-sub,.acct-pass,.acct-form{display:flex;flex-direction:column;gap:10px}
.acct-pass{align-items:flex-start}
.acct-pass .acct-form{width:100%}
.acct-actions{display:flex;gap:8px;flex-wrap:wrap}
.acct-actions.end{justify-content:flex-end}
.acct-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.acct-tiers{display:grid;gap:6px}
.acct-tier{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--chrome-2);cursor:pointer;font-size:13px;color:var(--ink-2);text-align:left}
.acct-tier:hover{border-color:var(--line-3);color:var(--ink)}
.acct-tier b{color:var(--ink);font-weight:600}
.acct-tier .pr{color:var(--key);font-weight:600;white-space:nowrap}
.acct-tier.cur{border-color:var(--key);background:var(--key-bg);cursor:default}
.acct-tier .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-3)}
.acct-tier.cur .dot{border:4px solid var(--key)}

/* ============================================================
   STANDARD v1 §4.4 — /guide/, /support/, /privacy/, /terms/: real pages, and the app's overlay
   ============================================================ */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.page{display:block;height:auto;min-height:100%;overflow:auto}
.page-wrap{max-width:820px;margin:0 auto;padding:0 20px}
.page-top{background:var(--chrome);border-bottom:1px solid var(--line)}
.page-top .page-wrap{max-width:1080px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.page-top .brand{color:var(--ink);text-decoration:none}
.page-open{text-decoration:none}
.page-foot{border-top:1px solid var(--line);margin-top:56px;padding:24px 0 40px;text-align:center;font-size:13px;color:var(--ink-3)}
.page-foot p{margin:10px 0 0}
.page-foot a{color:var(--ink-2);text-decoration:none}
.page-foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.page-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px}
main.doc{padding-top:40px}
/* the document text (pages and overlay) */
.doc{line-height:1.6}
.doc h1{font-size:30px;font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:0 0 12px;text-wrap:balance}
.doc h2{font-size:19px;font-weight:500;margin:34px 0 10px;color:var(--ink)}
.doc h3{font-size:15px;font-weight:500;margin:20px 0 6px;color:var(--ink)}
.doc p,.doc li,.doc dd{color:var(--ink-2);font-size:14.5px;text-wrap:pretty}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:20px;display:grid;gap:5px}
.doc b{color:var(--ink);font-weight:500}
.doc .lede{font-size:16px;color:var(--ink)}
.doc a{color:var(--key)}
.doc a:hover{color:#ecbb62}
.doc a.btn{color:var(--ink-2);text-decoration:none}
.doc a.btn.solid{color:var(--solid-ink)}
.doc .crumbs{font-size:13px;color:var(--ink-3);margin:0 0 16px}
.doc .crumbs a{color:var(--ink-3);text-decoration:none}
.doc .updated{font-size:12.5px;color:var(--ink-3)}
.doc ol.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:10px;margin:14px 0}
.doc ol.steps li{counter-increment:step;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.doc ol.steps li::before{content:counter(step);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--key-bg);border:1px solid var(--key);color:var(--key);font-weight:600;font-size:13px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.doc th,.doc td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.doc td:first-child{color:var(--ink)}
.doc th{color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.doc .faq dt{font-weight:500;color:var(--ink);margin-top:16px}
.doc .faq dd{margin:4px 0 0}
.doc-fig{margin:18px 0 8px}
.doc-fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2)}
.doc-fig figcaption{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.doc-cta{margin:30px 0 0}
.doc .cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 24px;font-size:15px;font-weight:600}
/* the Support form (the page, and the same page in the overlay) */
.support-form{display:grid;gap:16px;margin:26px 0 8px;padding:22px;border:1px solid var(--line-2);border-radius:14px;background:var(--chrome)}
.support-form .field{display:grid;gap:6px}
.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.support-form .lbl{font-size:12.5px;color:var(--ink-2)}
.support-form .inp{width:100%;height:42px;min-height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);color:var(--ink);font-size:14.5px}
.support-form select.inp{padding-right:8px}
.support-form textarea.inp{height:auto;min-height:170px;padding:11px 12px;line-height:1.5;resize:vertical;font:inherit;font-size:14.5px}
.support-form .inp:hover{border-color:var(--line-3)}
.support-form .inp:focus{border-color:var(--key);outline:none;box-shadow:0 0 0 3px rgba(227,171,74,.16)}
.support-form .form-err{font-size:13.5px}
.sf-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sf-send{min-height:44px;padding:0 24px;font-size:14.5px;font-weight:600}
.sf-done{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin:26px 0 8px;padding:20px 22px;border:1px solid var(--good);border-radius:14px;background:rgba(127,174,110,.08);outline:none}
.sf-done svg{width:26px;height:26px;padding:6px;box-sizing:content-box;border-radius:50%;background:rgba(127,174,110,.18);color:var(--good)}
.sf-done strong{font-size:16px;font-weight:600;color:var(--ink)}
.sf-done p{margin:4px 0 0}
.sf-alt{margin-top:14px}
@media (max-width:560px){.sf-row{grid-template-columns:1fr}.support-form{padding:16px}.doc h1{font-size:25px}}
/* the overlay: 820 px × 88 vh (full screen on phones), tabs in its head */
.sheet.doc-panel{width:820px;height:min(88dvh,940px);max-height:none;padding:0;gap:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;z-index:130}
.doc-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line);background:var(--chrome)}
.doc-head .x{position:static;flex:none}
.doc-tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.doc-tabs a{padding:7px 13px;border-radius:999px;color:var(--ink-2);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.doc-tabs a:hover{color:var(--ink);background:var(--chrome-2)}
.doc-tabs a[aria-current="page"]{color:var(--ink);background:var(--chrome-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.doc-body{overflow:auto;padding:26px 30px 44px;overscroll-behavior:contain}
.doc-body img{max-width:100%;height:auto} /* any page image fits the overlay (no sideways scroll) */
.doc-body .doc h1{font-size:26px}
.doc-body main.doc{padding:0;max-width:none}
.doc-loading{color:var(--ink-3);font-size:13px}
@media (max-width:760px){.sheet.doc-panel{width:100vw;max-width:100vw;height:100dvh;border-radius:0;border:0}.doc-body{padding:20px 18px 36px}}
/* the Help sheet's page links (Support · Privacy · Terms), under a hairline */
.help-foot{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:14px;border-top:1px solid var(--line)}
.help-foot a{color:var(--ink-3);font-size:12px;text-decoration:none;white-space:nowrap}
.help-foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* the Help sheet (STANDARD v1 §4.3): short tips with gold checks, then the guide card */
.tips{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:13px;color:var(--ink-2)}
.tips li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px}
.tips svg{width:14px;height:14px;margin-top:3px;color:var(--key)}
.tips b{color:var(--ink);font-weight:500}
.guide-link{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:11px 16px 11px 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--chrome-2);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.guide-link:hover{border-color:var(--key);background:var(--key-bg);color:var(--ink)}
.guide-link span{display:grid;gap:2px}
.guide-link b{font-size:14.5px;font-weight:600}
.guide-link small{font-size:12px;color:var(--ink-3)}
.guide-link .gl-ic{width:26px;height:26px;padding:5px;box-sizing:content-box;border-radius:8px;background:var(--key-bg);border:1px solid rgba(227,171,74,.4);color:var(--key)}
.guide-link .gl-go{width:16px;height:16px;margin-left:6px;color:var(--ink-3);transition:transform .15s,color .15s}
.guide-link:hover .gl-go{color:var(--key);transform:translateX(3px)}