/* ─────────────────────────────────────────────────────────────────────────
   PartForm · Keychain Maker — MakerLab-style redesign.
   Ported from admin app redesign/design_handoff_keychain_maker/reference/redesign.css.
   All rules namespaced `.km2-*`; tokens scoped to `.km2` (NOT :root) so the
   admin app's dark theme (admin.css) is never touched or clobbered.
   ───────────────────────────────────────────────────────────────────────── */

/* Space Grotesk 500/600, JetBrains Mono 500 and Inter 300/400/500 are already
   @font-face'd app-wide by admin.css (also linked on this page) — reuse those,
   don't re-declare. Only the two weights admin.css doesn't cover are added
   here, from the SAME already-vendored /static/fonts/ files (no new woff2). */
@font-face{font-family:'Space Grotesk';src:url('/static/fonts/space-grotesk-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/static/fonts/jetbrains-mono-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}

*,*::before,*::after{box-sizing:border-box}

.km2{
  /* ── brief §6 light tokens ── */
  --bg:#f3efe8; --bg-2:#e9e4db; --bg-3:#fbf9f5; --bg-4:#e0d9cc;
  --fg:#18160f; --fg-dim:#5a5347; --fg-dim-2:#7a7365;
  --line:#ccc7be; --line-strong:#b8b1a3;
  --accent:#c2600f; --accent:oklch(0.58 0.18 48);
  --accent-deep:#8a4409;
  --accent-soft:color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ghost:color-mix(in srgb, var(--accent) 7%, transparent);
  --warn:#a8540f;
  --plate-ink:#161512;

  --rail-w:56px; --panel-w:364px;
  --grid:rgba(160,90,10,.22);

  position:fixed; inset:0;
  display:flex; flex-direction:column;
  font-family:'Inter',system-ui,sans-serif; font-weight:300;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.km2 [hidden]{display:none !important}
.km2 button{font-family:inherit}
.km2 ::selection{background:var(--accent-soft)}

/* ───────────────────────── top bar ───────────────────────── */
.km2-top{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:56px; padding:0 20px;
  background:var(--bg-2); border-bottom:1px solid var(--line);
}
.km2-brandwrap{display:flex; align-items:center; gap:14px; min-width:0}
.km2-back{
  width:30px; height:30px; display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--line-strong); background:var(--bg-3); color:var(--fg-dim);
  border-radius:7px; cursor:pointer;
}
.km2-back:hover{color:var(--accent); border-color:var(--accent)}
.km2-brand{display:flex; align-items:baseline; gap:10px; min-width:0}
.km2-brand-mark{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; letter-spacing:-.02em; color:var(--fg); white-space:nowrap}
.km2-brand-mark b{color:var(--accent); font-weight:600}
.km2-eyebrow{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim-2); white-space:nowrap}
/* real PartForm logo (black-ink variant, for the light top bar); links to the
   marketing site. Wordmark on desktop, compact mark on narrow screens. */
.km2-back{text-decoration:none}
.km2-brandlink{display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0}
.km2-logo{display:block; width:auto}
.km2-logo-wordmark{height:22px}
.km2-logo-mark{height:26px; display:none}
@media (max-width:560px){
  .km2-logo-wordmark{display:none}
  .km2-logo-mark{display:block}
}
.km2-top-actions{display:flex; align-items:center; gap:8px}
.km2-iconbtn{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid transparent; background:transparent; color:var(--fg-dim);
  border-radius:8px; cursor:pointer;
}
.km2-iconbtn:hover{color:var(--accent); background:var(--accent-ghost)}
.km2-iconbtn svg{width:18px; height:18px}
.km2-divider-v{width:1px; height:22px; background:var(--line); margin:0 2px}

/* ── how-it-works notice (dismissible band under the top bar) ── */
.km2-notice{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:9px 20px;
  background:var(--accent-ghost); border-bottom:1px solid var(--line); color:var(--fg);
}
.km2-notice-body{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; min-width:0}
.km2-notice-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; white-space:nowrap}
.km2-notice-steps{
  display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap;
  margin:0; padding:0; list-style:none; counter-reset:kmstep;
  font-size:12.5px; color:var(--fg-dim);
}
.km2-notice-steps li{counter-increment:kmstep; display:flex; align-items:center; gap:7px}
.km2-notice-steps li::before{
  content:counter(kmstep); flex-shrink:0;
  width:17px; height:17px; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--accent); color:#fff; font-size:9.5px; font-weight:700; font-family:'JetBrains Mono',monospace;
}
.km2-notice-steps b{color:var(--fg); font-weight:600}
.km2-notice-nopay{font-size:11.5px; font-weight:600; color:var(--accent); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em}
.km2-notice-dismiss{flex-shrink:0; padding:5px 13px; font-size:12px}
@media (max-width:820px){
  .km2-notice{align-items:flex-start}
  .km2-notice-body{gap:6px 12px}
}

/* ───────────────────────── buttons ───────────────────────── */
.km2-btn{
  font-size:12.5px; font-weight:500; padding:8px 14px; border-radius:8px;
  border:1px solid var(--line-strong); background:transparent; color:var(--fg);
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:background .15s,color .15s,border-color .15s;
}
.km2-btn svg{width:15px; height:15px}
.km2-btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.km2-btn-primary{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600}
.km2-btn-primary:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
.km2-btn-primary:disabled{opacity:.4; cursor:not-allowed}
.km2-btn-block{width:100%; justify-content:center}

/* ───────────────────────── app body ───────────────────────── */
.km2-body{flex:1; min-height:0; display:flex}

/* ── left tool rail ── */
.km2-rail{
  flex-shrink:0; width:var(--rail-w);
  background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 0;
}
.km2-tool{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid transparent; background:transparent; color:var(--fg-dim);
  border-radius:9px; cursor:pointer; position:relative; transition:all .13s;
}
.km2-tool svg{width:19px; height:19px}
.km2-tool:hover{color:var(--fg); background:var(--bg-4)}
.km2-tool.is-active{color:#fff; background:var(--accent); border-color:var(--accent)}
.km2-tool:disabled{opacity:.32; cursor:not-allowed}
.km2-tool:disabled:hover{background:transparent; color:var(--fg-dim)}
.km2-tool[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%); white-space:nowrap; z-index:40;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bg); background:var(--fg);
  padding:5px 8px; border-radius:6px; pointer-events:none;
}
.km2-rail-sep{width:22px; height:1px; background:var(--line); margin:4px 0}
.km2-rail-spacer{flex:1}

/* ── stage / canvas ── */
.km2-stage{
  flex:1; min-width:0; position:relative; overflow:hidden;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:40px 40px;
  touch-action:none;
}
/* the real Three.js canvas fills the stage — swapped in for the design's mock
   static-CSS "plate"; the engine (keychain-maker.js) renders directly into it */
.km2-scene{position:absolute; inset:0}
.km2-scene canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}

/* overlay: size readout */
.km2-dims{
  position:absolute; top:16px; left:16px; z-index:12;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--fg);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  border:1px solid var(--line); border-radius:8px; padding:6px 12px;
  backdrop-filter:blur(3px);
}
.km2-dims b{color:var(--accent); font-weight:500}

/* overlay: view tag (brand motif) */
.km2-viewtag{
  position:absolute; top:16px; right:16px; z-index:12;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim-2);
  border:1px solid var(--line); border-radius:6px; padding:4px 8px;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
}

/* overlay: warning */
.km2-warn{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:14; max-width:520px;
  --wsoft:color-mix(in srgb, var(--warn) 13%, var(--bg));
  --wline:color-mix(in srgb, var(--warn) 42%, var(--line));
  background:var(--wsoft); border:1px solid var(--wline); color:var(--warn);
  border-radius:10px; padding:10px 34px 10px 14px; font-size:12.5px; line-height:1.45;
  display:flex; gap:9px;
}
.km2-warn svg{width:16px; height:16px; flex-shrink:0; margin-top:1px}
.km2-warn-x{position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; background:transparent; color:var(--warn); opacity:.7; cursor:pointer; font-size:15px; line-height:1; border-radius:6px}
.km2-warn-x:hover{opacity:1; background:color-mix(in srgb, var(--warn) 18%, transparent)}

/* overlay: objects / group panel (bottom-left) */
.km2-objects{
  position:absolute; left:16px; bottom:16px; z-index:11; width:210px;
  background:color-mix(in srgb, var(--bg-3) 92%, transparent); backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
  box-shadow:0 8px 24px -14px rgba(20,12,4,.4);
}
.km2-objects-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-bottom:1px solid var(--line);
}
.km2-objects-head span{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim-2)}
.km2-objects-list{display:flex; flex-direction:column; padding:5px}
.km2-obj{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
  cursor:pointer; color:var(--fg-dim); font-size:12.5px; text-align:left;
  background:transparent; border:1px solid transparent; width:100%;
}
.km2-obj:hover{background:var(--bg-4); color:var(--fg)}
.km2-obj.is-selected{background:var(--accent-soft); color:var(--fg); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.km2-obj svg{width:15px; height:15px; flex-shrink:0; color:var(--fg-dim-2)}
.km2-obj.is-selected svg{color:var(--accent)}
.km2-obj-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* overlay: 2D/3D view toggle (bottom-right) — replaces the old decorative
   mini-preview stub (it showed stale static text, never the live design).
   No thumbnail here by design: it just swaps the active camera. */
.km2-viewtoggle{
  position:absolute; right:16px; bottom:16px; z-index:11;
  background:color-mix(in srgb, var(--bg-3) 92%, transparent); backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:11px; padding:4px;
  box-shadow:0 8px 24px -14px rgba(20,12,4,.4);
  display:flex; gap:2px;
}
.km2-viewtoggle button{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--fg-dim); background:transparent; border:none; border-radius:8px;
  padding:8px 14px; cursor:pointer; transition:background .13s,color .13s;
}
.km2-viewtoggle button:hover{color:var(--fg); background:var(--bg-4)}
.km2-viewtoggle button.is-active{color:#fff; background:var(--accent)}

/* floating attachment popup (owner feedback #2) — click-to-edit, positioned
   via JS near the clicked attachment. Per brand: depth from a border/accent
   treatment, deliberately NO drop shadow (unlike the HUD overlays above). */
.km2-att-popup{
  position:absolute; z-index:30; width:228px;
  background:var(--bg-3); border:1.5px solid var(--accent); border-radius:11px;
  padding:12px; display:flex; flex-direction:column; gap:12px;
}
.km2-att-popup-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
}
.km2-att-popup-x{
  width:20px; height:20px; flex-shrink:0; display:grid; place-items:center;
  border:none; background:transparent; color:var(--fg-dim); cursor:pointer;
  font-size:15px; line-height:1; border-radius:5px;
}
.km2-att-popup-x:hover{color:var(--accent); background:var(--accent-ghost)}

/* ───────────────────────── right panel ───────────────────────── */
.km2-panel{
  flex-shrink:0; width:var(--panel-w); overflow-y:auto;
  background:var(--bg-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
}
.km2-tabs{
  display:flex; gap:2px; padding:14px 18px 0; position:sticky; top:0; z-index:3;
  background:var(--bg-2); border-bottom:1px solid var(--line);
}
.km2-tab{
  font-size:13px; font-weight:500; color:var(--fg-dim);
  background:transparent; border:none; border-bottom:2px solid transparent;
  padding:10px 8px 12px; cursor:pointer; transition:color .15s,border-color .15s;
}
.km2-tab:hover{color:var(--fg)}
.km2-tab.is-active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

.km2-tabpanel{display:flex; flex-direction:column}

/* section = a labelled group, hairline-divided */
.km2-sec{padding:18px; display:flex; flex-direction:column; gap:14px}
.km2-sec + .km2-sec{border-top:1px solid var(--line)}
.km2-sec-head{display:flex; align-items:center; justify-content:space-between; min-height:16px}
.km2-sec-title{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim-2); font-weight:600}
.km2-sec-hint{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.04em; text-transform:none; color:var(--fg-dim-2); font-weight:400}

/* field primitives */
.km2-field{display:flex; flex-direction:column; gap:6px}
.km2-row{display:flex; gap:12px}
.km2-row > *{flex:1; min-width:0}
.km2-row.km2-row-end{align-items:flex-end}
.km2-label{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-dim-2);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.km2-readout{color:var(--accent); text-transform:none; letter-spacing:0; font-family:'JetBrains Mono',monospace; font-size:11px}

.km2-input,.km2-select{
  font-family:'Inter',sans-serif; font-size:13px; color:var(--fg);
  background:var(--bg-3); border:1px solid var(--line-strong); border-radius:8px;
  padding:8px 10px; width:100%;
}
.km2-input:focus,.km2-select:focus{outline:none; border-color:var(--accent)}
.km2-select{
  appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a7365' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.km2-select-sm{font-size:12px; padding:7px 26px 7px 9px}

/* range slider */
.km2-range{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; margin:8px 0;
  border-radius:2px; background:var(--line-strong); accent-color:var(--accent); outline:none;
}
.km2-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-2); cursor:pointer}
.km2-range::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-2); cursor:pointer}
.km2-range::-moz-range-track{height:4px; border-radius:2px; background:var(--line-strong)}

/* checkbox toggle */
.km2-check{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fg); cursor:pointer}
.km2-check input{accent-color:var(--accent); width:16px; height:16px; cursor:pointer}
.km2-check-lg{font-weight:500}

/* text lines */
.km2-lines{display:flex; flex-direction:column; gap:6px}
.km2-line-row{display:flex; gap:6px}
.km2-line-row .km2-input{flex:1}
.km2-line-x{
  flex-shrink:0; width:34px; border:1px solid var(--line-strong); background:transparent;
  color:var(--fg-dim); border-radius:8px; cursor:pointer; font-size:16px; line-height:1;
}
.km2-line-x:hover{color:var(--accent); border-color:var(--accent)}

/* svg upload dropzone */
.km2-drop{
  border:1.5px dashed var(--line-strong); border-radius:10px; background:var(--bg-3);
  padding:16px; text-align:center; cursor:pointer; transition:border-color .15s,background .15s;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.km2-drop:hover,.km2-drop.is-over{border-color:var(--accent); background:var(--accent-ghost)}
.km2-drop svg{width:22px; height:22px; color:var(--fg-dim-2)}
.km2-drop-main{font-size:12.5px; color:var(--fg)}
.km2-drop-main u{color:var(--accent); text-decoration:none; font-weight:500}
.km2-drop-sub{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim-2)}
.km2-loaded{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--bg-3)}
.km2-loaded svg{width:26px; height:26px; color:var(--accent); flex-shrink:0}
.km2-loaded-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.km2-loaded-name{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--fg); word-break:break-all}
.km2-loaded-sub{font-size:11px; color:var(--fg-dim-2)}
.km2-loaded-x{flex-shrink:0; width:28px; height:28px; border:1px solid var(--line-strong); background:transparent; color:var(--fg-dim); border-radius:7px; cursor:pointer; font-size:15px; display:grid; place-items:center}
.km2-loaded-x:hover{color:var(--accent); border-color:var(--accent)}

/* filament colors */
.km2-colors{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.km2-color-slot{position:relative; display:flex; flex-direction:column; align-items:center; gap:5px}
.km2-swatch{
  position:relative; width:46px; height:38px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-strong); overflow:hidden;
}
.km2-swatch input[type=color]{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; padding:0; background:transparent; cursor:pointer}
.km2-swatch-num{position:absolute; top:3px; left:5px; font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:500; color:#fff; mix-blend-mode:difference; pointer-events:none}
.km2-add-color{
  width:46px; height:38px; border:1.5px dashed var(--line-strong); border-radius:8px;
  background:var(--bg-3); color:var(--fg-dim-2); cursor:pointer; display:grid; place-items:center;
}
.km2-add-color:hover{border-color:var(--accent); color:var(--accent)}
.km2-add-color svg{width:16px; height:16px}
.km2-eyedrop{width:38px; height:38px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg-3); color:var(--fg-dim); cursor:pointer; display:grid; place-items:center}
.km2-eyedrop:hover{border-color:var(--accent); color:var(--accent)}
.km2-eyedrop svg{width:16px; height:16px}

/* a color <select> that shows the mapped swatch */
.km2-rolegrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Plate: front/back + shape mode */
.km2-stub{opacity:.75} /* unused for now — kept for any future not-yet-wired control */
.km2-segwrap{display:flex; gap:8px; align-items:center}
.km2-seg{display:inline-flex; background:var(--bg-3); border:1px solid var(--line-strong); border-radius:8px; padding:2px}
.km2-seg button{
  font-size:12px; font-weight:500; color:var(--fg-dim); background:transparent; border:none;
  padding:6px 12px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.km2-seg button.is-active{background:var(--accent); color:#fff}
.km2-seg button svg{width:14px; height:14px}

/* Attachments */
.km2-att-list{display:flex; flex-direction:column; gap:8px}
.km2-att-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border:1px solid var(--line-strong); border-radius:9px; background:var(--bg-3);
  cursor:pointer; transition:border-color .13s,background .13s;
}
.km2-att-item:hover{border-color:var(--accent)}
.km2-att-item.is-selected{border-color:var(--accent); background:var(--accent-ghost)}
.km2-att-badge{width:26px; height:26px; flex-shrink:0; display:grid; place-items:center; border-radius:6px; background:var(--bg-4); color:var(--fg-dim)}
.km2-att-item.is-selected .km2-att-badge{background:var(--accent); color:#fff}
.km2-att-badge svg{width:15px; height:15px}
.km2-att-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.km2-att-name{font-size:12.5px; font-weight:500; color:var(--fg)}
.km2-att-sub{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-dim-2)}
.km2-att-del{flex-shrink:0; width:28px; height:28px; border:1px solid transparent; background:transparent; color:var(--fg-dim-2); border-radius:7px; cursor:pointer; display:grid; place-items:center}
.km2-att-del:hover{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.km2-att-del svg{width:15px; height:15px}
.km2-att-empty{font-size:12px; color:var(--fg-dim-2); line-height:1.5; padding:2px 0}

.km2-att-editor{
  margin-top:2px; padding:14px; border:1px solid var(--line); border-radius:11px;
  background:color-mix(in srgb,var(--bg-3) 60%,var(--bg-2));
  display:flex; flex-direction:column; gap:14px;
}
.km2-att-editor-head{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.km2-att-editor-head svg{width:14px; height:14px}

/* snap-preset picker grid (3x3 like a plate map) */
.km2-snapgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
  aspect-ratio:16/9; padding:6px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--plate-ink);
}
.km2-snapgrid button{
  border:none; border-radius:5px; background:rgba(255,255,255,.06); cursor:pointer;
  display:grid; place-items:center; transition:background .12s;
}
.km2-snapgrid button::after{content:''; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28)}
.km2-snapgrid button:hover{background:rgba(255,255,255,.14)}
.km2-snapgrid button.is-active{background:var(--accent)}
.km2-snapgrid button.is-active::after{background:#fff}

.km2-drag-hint{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--fg-dim-2)}
.km2-drag-hint svg{width:14px; height:14px; color:var(--accent)}

/* nudge fallback */
.km2-nudge{display:inline-flex; gap:4px}
.km2-nudge button{width:30px; height:30px; border:1px solid var(--line-strong); background:var(--bg-3); color:var(--fg-dim); border-radius:7px; cursor:pointer; display:grid; place-items:center}
.km2-nudge button:hover{border-color:var(--accent); color:var(--accent)}
.km2-nudge svg{width:14px; height:14px}
.km2-pos-readout{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--fg-dim); align-self:center}

/* download in panel footer on mobile handled below; desktop uses topbar */
.km2-panel-foot{margin-top:auto; padding:16px 18px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--bg-2); display:none}

/* subfields under a toggle */
.km2-subfields{display:flex; flex-direction:column; gap:14px; padding-left:14px; border-left:2px solid var(--line); margin-top:2px}

/* ───────────────────────── mobile ≤760 ───────────────────────── */
@media (max-width:760px){
  .km2{--panel-w:100%; --stage-h-m:max(44vh,280px)}
  /* `.km2-rail` is a DOM sibling of `.km2-stage` (not a descendant — matches
     the design handoff's own markup), so it can't use `bottom` positioned
     against the stage itself. `.km2-body` is the shared positioned ancestor,
     and its top edge coincides with the stage's top edge (the stage is
     km2-body's first in-flow child), so anchoring the pill with `top:
     calc(stage-height - pill-height - gap)` lands it 12px above the STAGE's
     own bottom edge regardless of how tall the scrollable panel below is —
     `bottom:12px` here would instead sit 12px above the bottom of the whole
     fixed `.km2` viewport root, i.e. off past the panel, not over the canvas. */
  .km2-body{flex-direction:column; overflow-y:auto; position:relative}
  .km2-stage{flex:0 0 auto; height:var(--stage-h-m)}
  /* rail becomes a horizontal floating strip over the canvas bottom */
  .km2-rail{
    position:absolute; left:50%; top:calc(var(--stage-h-m) - 62px); transform:translateX(-50%);
    width:auto; height:auto; flex-direction:row; padding:5px 6px; gap:4px;
    border:1px solid var(--line); border-radius:12px;
    background:color-mix(in srgb,var(--bg-3) 94%,transparent); backdrop-filter:blur(5px);
    box-shadow:0 6px 18px -10px rgba(20,12,4,.5); z-index:20;
  }
  .km2-rail-sep{width:1px; height:22px; margin:0 3px}
  .km2-rail-spacer{display:none}
  .km2-tool[data-tip]:hover::after{left:50%; top:auto; bottom:calc(100% + 8px); transform:translateX(-50%)}
  .km2-tool.km2-tool-hide-mobile{display:none}
  .km2-objects{display:none}         /* objects panel folds away on phone */
  .km2-viewtoggle{right:12px; bottom:64px}
  .km2-panel{flex:1 0 auto; width:100%; border-left:none; border-top:1px solid var(--line)}
  .km2-tabs{position:sticky; top:0}
  .km2-input,.km2-select,.km2-range{font-size:16px}   /* no iOS zoom */
  .km2-range{margin:14px 0}
  .km2-range::-webkit-slider-thumb{width:24px; height:24px}
  .km2-range::-moz-range-thumb{width:24px; height:24px}
  .km2-swatch{width:52px; height:44px}
  .km2-top .km2-download-top{display:none}    /* download moves to panel foot */
  .km2-panel-foot{display:block}
  .km2-rolegrid{grid-template-columns:1fr}
}

/* ─────────────────── background-shape picker ─────────────────── */
.km2-shape-picker{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; width:100%;
}
.km2-shape-picker button{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 2px 6px; border:1px solid var(--line-strong); border-radius:9px;
  background:var(--bg-3); color:var(--fg-dim); cursor:pointer;
  font-size:10.5px; font-weight:500; line-height:1;
  transition:background .13s,color .13s,border-color .13s;
}
.km2-shape-picker button svg{width:22px; height:22px}
.km2-shape-picker button:hover{border-color:var(--accent); color:var(--accent)}
.km2-shape-picker button.is-active{
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-soft); font-weight:600;
}

/* ───────────────────────── import modal ───────────────────────── */
.km2-modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center}
.km2-modal[hidden]{display:none}
.km2-modal-backdrop{
  position:absolute; inset:0; background:color-mix(in srgb,var(--fg) 22%,transparent);
  backdrop-filter:blur(2px);
}
.km2-modal-card{
  position:relative; width:min(440px,calc(100vw - 32px));
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:14px;
  padding:18px 18px 16px; box-shadow:0 24px 60px -24px rgba(20,12,4,.55);
  display:flex; flex-direction:column; gap:12px;
}
.km2-modal-head{display:flex; align-items:center; justify-content:space-between}
.km2-modal-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--fg)}
.km2-modal-x{
  width:28px; height:28px; border:none; background:transparent; color:var(--fg-dim);
  font-size:19px; line-height:1; border-radius:7px; cursor:pointer;
}
.km2-modal-x:hover{background:var(--bg-4); color:var(--fg)}
.km2-modal-sub{font-size:12px; color:var(--fg-dim); margin:-4px 0 2px}
.km2-shape-picker-lg button{padding:12px 4px 9px; font-size:11.5px}
.km2-shape-picker-lg button svg{width:30px; height:30px}
.km2-modal-foot{display:flex; justify-content:flex-end; gap:8px; margin-top:4px}

/* ───────────────────────── order form ───────────────────────── */
.km2-ordergrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.km2-ofield{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--fg-dim)}
.km2-ofield-full{margin-top:10px}
.km2-ofield > span{font-weight:500}
.km2-ofield .km2-input{width:100%}
.km2-ofield textarea.km2-input{resize:vertical; min-height:56px; font:inherit}
.km2-consent{display:flex; gap:9px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:var(--fg); line-height:1.45; cursor:pointer}
.km2-consent input{margin-top:2px; flex-shrink:0; width:16px; height:16px; accent-color:var(--accent)}
.km2-consent a{color:var(--accent)}
.km2-order-error{margin:10px 0 0; font-size:12.5px; color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); border-radius:8px; padding:8px 10px}
.km2-order-ok{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 6px 6px}
.km2-order-ok svg{width:44px; height:44px; color:var(--accent)}
.km2-order-ok h3{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; margin:4px 0 0; color:var(--fg)}
.km2-order-ok p{font-size:13px; color:var(--fg-dim); margin:0 0 8px; max-width:320px}

@media (max-width:760px){
  .km2-shape-picker{gap:4px}
  .km2-shape-picker button{font-size:9.5px; padding:7px 1px 5px}
  .km2-shape-picker button svg{width:19px; height:19px}
  .km2-shape-picker-lg{grid-template-columns:repeat(3,1fr)}
  .km2-ordergrid{grid-template-columns:1fr}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .km2 *{transition:none !important}
}