/* ============================================================================
   KeyWatcher Configurator — green industrial design system (original)
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  /* surfaces — warm near-neutral */
  --bg:        oklch(0.965 0.006 130);
  --surface:   oklch(0.995 0.003 130);
  --surface-2: oklch(0.945 0.007 130);
  --line:      oklch(0.885 0.008 140);
  --line-2:    oklch(0.825 0.010 140);

  /* ink */
  --ink:       oklch(0.27 0.018 155);
  --ink-2:     oklch(0.46 0.016 155);
  --ink-3:     oklch(0.62 0.012 150);

  /* industrial green */
  --green:      oklch(0.52 0.105 152);
  --green-deep: oklch(0.40 0.092 153);
  --green-700:  oklch(0.33 0.072 154);
  --green-pale: oklch(0.945 0.030 150);
  --green-mid:  oklch(0.86 0.055 150);

  /* steel — cabinet bodies */
  --steel:      oklch(0.46 0.013 245);
  --steel-deep: oklch(0.33 0.014 250);
  --steel-dark: oklch(0.24 0.014 255);
  --steel-edge: oklch(0.58 0.012 245);

  /* module accents (harmonised L/C, varied hue) */
  --key:        oklch(0.74 0.125 78);   /* brass / amber */
  --key-deep:   oklch(0.62 0.115 72);
  --locker:     oklch(0.64 0.080 242);  /* slate blue */
  --locker-deep:oklch(0.52 0.078 245);
  --card:       oklch(0.66 0.095 318);  /* muted violet */
  --card-deep:  oklch(0.55 0.092 320);
  --blank-c:    oklch(0.74 0.006 150);

  --danger:    oklch(0.55 0.16 28);
  --danger-bg: oklch(0.955 0.03 30);
  --warn-bg:   oklch(0.96 0.045 85);
  --warn-ink:  oklch(0.48 0.10 70);

  --radius:   10px;
  --radius-lg:16px;
  --radius-sm:7px;
  --shadow-sm: 0 1px 2px rgba(28,40,30,.06), 0 1px 3px rgba(28,40,30,.05);
  --shadow-md: 0 6px 22px -6px rgba(28,40,30,.16);
  --shadow-lg: 0 18px 50px -16px rgba(28,40,30,.30);

  --ui: 'Montserrat', system-ui, sans-serif;
  --mono: 'Montserrat', system-ui, sans-serif;
}

html,body{ height:100%; }
html{ scrollbar-gutter:stable; }
body{
  font-family:var(--ui); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
button{ font-family:inherit; }
.mono{ font-family:var(--mono); }

/* ---- App shell ---------------------------------------------------------- */
/* height:auto (not 100vh) deliberately: embedded in a page below a header/
   title, "100% of the browser viewport" runs off past the visible fold and
   pins the footer/Continue button far below a short step's actual content,
   leaving dead space above it. Let the page scroll naturally instead. */
.app{ display:flex; flex-direction:column; height:auto; overflow:visible; container-type:inline-size; }

.topbar{
  height:60px; flex:0 0 60px; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:12px; padding:0 22px; position:sticky; top:0; z-index:60;
}
/* topbar-right pushed to the far right regardless of how many siblings
   precede it, instead of relying on justify-content:space-between, which
   only works cleanly for 2 children. */
.topbar-right{ margin-left:auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark-img{ height:30px; width:auto; display:block; }
.brand-logo{ height:22px; width:auto; display:block; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; position:relative;
  background:linear-gradient(160deg,var(--green),var(--green-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark::after{
  content:''; width:11px; height:11px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.92);
  box-shadow:0 6px 0 -3.5px rgba(255,255,255,.92);
}
.brand-name{ font-weight:600; font-size:15px; letter-spacing:-.01em; }
.topbar-right{ display:flex; align-items:center; gap:18px; }
.keycount{ display:flex; align-items:baseline; gap:7px; font-family:var(--mono); font-size:12px; color:var(--ink-2); white-space:nowrap; }
.keycount b{ color:var(--green-deep); font-size:14px; }
.viewtoggle{ display:inline-flex; border:1.5px solid var(--line-2); border-radius:8px; overflow:hidden; }
.viewtoggle button{ padding:7px 13px; font-size:12px; font-weight:600; background:var(--surface); border:none; cursor:pointer; color:var(--ink-2); border-right:1px solid var(--line); }
.viewtoggle button:last-child{ border-right:none; }
.viewtoggle button.on{ background:var(--green); color:#fff; }
.keycount-bar{ width:120px; height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line); }
.keycount-fill{ height:100%; background:linear-gradient(90deg,var(--green),var(--green-deep)); transition:width .35s ease; }

/* ---- Stepper ------------------------------------------------------------ */
.stepper{ display:flex; align-items:center; gap:0; background:var(--surface); flex:0 0 auto;
  border-bottom:1px solid var(--line); padding:0 22px; height:42px; overflow-x:auto; }
.stp-startover{ margin-left:auto; flex-shrink:0; font-size:13px; font-weight:700; color:var(--ink); background:none; border:1.5px solid var(--line-2); cursor:pointer; padding:6px 10px; border-radius:7px; }
.stp-startover:hover{ color:var(--danger); background:var(--danger-bg); border-color:var(--danger); }
.stp{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); white-space:nowrap; cursor:default; }
.stp.clickable{ cursor:pointer; }
.stp.active{ color:var(--green-deep); font-weight:600; }
.stp.done{ color:var(--ink-2); }
.stp-num{ width:21px; height:21px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-2);
  color:var(--ink-3); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stp.active .stp-num{ background:var(--green); border-color:var(--green); color:#fff; }
.stp.done .stp-num{ background:var(--green-pale); border-color:var(--green-mid); color:var(--green-deep); }
.stp-sep{ width:22px; height:1px; background:var(--line-2); margin:0 12px; flex-shrink:0; }
/* "N of TOTAL Label" swap-in for narrow containers — see the container
   query in styles.css that shows this and hides the full .stp/.stp-sep list. */
.stp-compact{ display:none; font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
.stp-compact b{ color:var(--green-deep); font-weight:600; }

/* ---- header view toggle ------------------------------------------------- */
.viewtoggle{ display:inline-flex; border:1.5px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--surface); }
.viewtoggle button{ display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:12px; font-weight:600;
  font-family:var(--ui); background:transparent; border:none; cursor:pointer; color:var(--ink-2); border-right:1px solid var(--line); }
.viewtoggle button:last-child{ border-right:none; }
.viewtoggle button.on{ background:var(--green); color:#fff; }
.viewtoggle button svg{ width:14px; height:14px; }

/* ---- Layout ------------------------------------------------------------- */
.main{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr minmax(340px,392px); gap:0; align-items:stretch; }
.workpane{ padding:18px 34px 22px; min-width:0; overflow-y:auto; scrollbar-gutter:stable; display:flex; flex-direction:column; }
.sidepane{ border-left:1px solid var(--line); background:var(--surface); padding:24px 22px 24px;
  height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.sidepane > .side-card:first-child{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-bottom:0; }
.sidepane > .side-card:first-child > .side-body{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.sidepane .side-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.sidepane .sum-styles:last-of-type{ min-height:0; }
.sidepane > .side-card:first-child > .side-body > .side-stats,
.sidepane > .side-card:first-child > .side-body > .sum-code{ flex:0 0 auto; }
.sidepane > .side-card:last-child{ flex:0 0 auto; margin-bottom:0; }

.workhead{ margin-bottom:24px; max-width:760px; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-bottom:9px; }
.worktitle{ font-size:27px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.workdesc{ font-size:14.5px; color:var(--ink-2); margin-top:9px; max-width:62ch; }

/* ---- Option cards ------------------------------------------------------- */
.grid{ display:grid; gap:13px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.opt{
  position:relative; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 17px; cursor:pointer; transition:all .14s ease; text-align:left;
}
.opt:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.opt.sel{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.opt.sel::after{ content:'\2713'; position:absolute; top:11px; right:13px; width:19px; height:19px; border-radius:50%;
  background:var(--green); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.opt-name{ font-size:15px; font-weight:600; }
.opt-desc{ font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.4; }
.opt-dim{ font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:5px; letter-spacing:.01em; }
.opt-tag{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--green-deep); background:var(--green-pale); border:1px solid var(--green-mid);
  padding:2px 8px; border-radius:20px; }
.opt-fig{ height:74px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:13px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:9px; font-size:14px;
  font-weight:600; cursor:pointer; border:1.5px solid transparent; transition:all .14s ease; }
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--green-deep); }
.btn-primary:disabled{ background:var(--surface-2); color:var(--ink-3); cursor:not-allowed; border-color:var(--line); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.btn-sm{ padding:8px 14px; font-size:12.5px; }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover{ background:oklch(0.47 0.17 28); }
.reset-mods-btn{ color:var(--ink-2); }
/* palette + reset share one row directly above the preview; palette wraps within
   its own column and never squishes under the reset button */
.mod-toolbar-row{ display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.mod-toolbar-row .palette-groups{ flex:1 1 auto; margin-bottom:0; }
.mod-toolbar-row .palette-reset{ flex:0 0 auto; align-self:flex-end; margin-left:auto; }
.reset-row{ display:flex; justify-content:flex-end; flex:0 0 auto; margin-bottom:6px; min-height:0; }
.reset-mods-btn:hover{ border-color:var(--danger); color:var(--danger); background:var(--danger-bg); }

/* Nested inside .workpane now (see the JSX comment) rather than a page-level
   footer mirroring .main's 2-column grid, so no more grid-template-columns/
   grid-column:1 trick — and no horizontal padding here since .workpane's
   own 34px side padding already applies. */
.appfoot{ flex:0 0 auto; border-top:1px solid var(--line); margin-top:16px; }
.appfoot-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 0; }
.appfoot .btn{ min-width:150px; justify-content:center; }
.build-head-ctrls{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.view-switch{ display:inline-flex; align-items:center; gap:10px; }
.percab{ display:flex; flex-direction:column; height:100%; min-height:0; gap:12px; }
.percab-main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; }
.percab-fill{ flex:0 0 auto; }
.cab-toolbar{ opacity:0; transition:opacity .12s ease; }
.cab-wrap:hover .cab-toolbar, .cab-wrap:focus-within .cab-toolbar{ opacity:1; }
.cab-tbtn{ border:2px solid #fff; cursor:pointer; font-weight:700; line-height:1.1; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.3); display:inline-flex; align-items:center; justify-content:center; }
.cab-tbtn-fill{ background:var(--green); color:#fff; }
.cab-tbtn-clear{ background:var(--ink-2,#5a6660); color:#fff; }
.cab-tbtn-x{ background:var(--danger); color:#fff; }
.cab-tbtn:hover{ filter:brightness(1.08); }
.percab-map{ flex:0 0 auto; border-top:1px solid var(--line); padding-top:10px; }
.percab-map-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; text-align:center; }
.percab-map-board{ height:180px; overflow:hidden; }
.build-col{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.build-stage-fill{ flex:1 1 auto; overflow:hidden; }
/* min-height, not just flex:1 1 auto: since .app dropped its forced 100vh
   (see .app comment), an auto-height ancestor chain has no leftover space
   for flex-grow to distribute, so this collapsed toward min-height:0 —
   starving ScaleToFit's "fill" mode of a real height budget and shrinking
   the board's scale well below 1. 260px approximates the fixed chrome
   ScaleToFit no longer benefits from (topbar 60 + stepper 42 + appfoot/
   step-header/padding ~158) so the board again gets close to a full
   viewport's worth of room, same as when .app was 100vh. Targets the
   combined class (not plain .build-stage-fill) so its specificity (0,0,2,0)
   reliably beats the pre-existing single-class .cabinet-stage{min-height:
   180px} default further down this file, regardless of source order. */
.cabinet-stage.build-stage-fill,.review-stage.build-stage-fill{ min-height:calc(100vh - 260px); }
.cabinet-stage.build-stage-fill{ overflow:hidden; padding:16px 14px 16px; }
/* slim, dedicated scrollbars for the build board + workpane (don't overlap art) */
.workpane{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.build-stage-fill *{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.build-stage-fill *::-webkit-scrollbar,.workpane::-webkit-scrollbar{ width:8px; height:8px; }
.build-stage-fill *::-webkit-scrollbar-thumb,.workpane::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:6px; border:2px solid transparent; background-clip:content-box; }
.build-stage-fill *::-webkit-scrollbar-thumb:hover,.workpane::-webkit-scrollbar-thumb:hover{ background:var(--ink-4,#b8c0bb); background-clip:content-box; }
.build-stage-fill *::-webkit-scrollbar-track,.workpane::-webkit-scrollbar-track{ background:transparent; }
.worknav{ display:flex; align-items:center; justify-content:space-between; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line); max-width:560px; }
.worknav .btn{ min-width:150px; justify-content:center; }

/* ---- Mode select cards (big) ------------------------------------------- */
.modegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:760px; }
.modecard{ position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 24px; cursor:pointer; transition:all .15s ease; overflow:hidden; }
.modecard:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.modecard.sel{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.modecard h3{ font-size:18px; font-weight:600; margin-bottom:7px; letter-spacing:-.01em; }
.modecard p{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.sys-badge{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); background:var(--green-pale); border:1px solid var(--green-mid); padding:4px 11px; border-radius:20px; margin-bottom:14px; }
.sys-tag{ font-weight:600; color:var(--ink)!important; margin-bottom:6px!important; }
.sys-card{ padding-top:0!important; overflow:hidden; }
.sys-visual{ margin:-1px -24px 16px; padding:20px 24px 16px; background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-bottom:1px solid var(--line); position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:180px; }
.sys-cab{ max-height:170px; max-width:70%; object-fit:contain; display:block; }
.sys-modchip{ position:absolute; right:18px; bottom:14px; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:8px 10px; box-shadow:var(--shadow-sm); }
.sys-modchip img{ width:66px; height:auto; object-fit:contain; display:block; }
.sys-modchip span{ font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.modecard .modeglyph{ width:46px; height:46px; border-radius:11px; background:var(--green-pale); border:1px solid var(--green-mid);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--green-deep); }

/* ---- Module builder ----------------------------------------------------- */
.build-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.layout-switch{ background:transparent; border:0; border-radius:0; padding:0; margin:0; display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }; }
.build-title{ flex:1 1 auto; min-width:0; font-size:20px; font-weight:600; letter-spacing:-.01em; }
.build-title-sub{ font-weight:400; font-size:15px; color:var(--ink-3); }
.cabinet-head-row{ display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:14px; flex-wrap:wrap; }
.cabinet-head-row .build-title{ flex:0 0 auto; white-space:nowrap; }
.rules-inline{ position:relative; display:inline-flex; align-items:center; gap:8px; flex:0 1 auto; font-size:13px; color:var(--ink-2); background:var(--green-pale); border:1px solid var(--green-mid); border-radius:10px; padding:8px 13px; }
.rules-inline b{ color:var(--green-deep); }
.rules-info{ flex:0 0 auto; background:none; border:none; cursor:pointer; color:var(--green-deep); font-size:15px; line-height:1; padding:0 2px; }
.rules-info:hover{ opacity:.7; }
.rules-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:340px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow-lg); padding:14px 16px; }
.rules-pop .rules-list{ font-size:12.5px; gap:6px; }
.cabinet-head-row .rules-callout-h{ margin-bottom:5px; font-size:12.5px; }
.cabinet-head-row .rules-list{ font-size:12px; gap:3px; }
.build-head .build-stats{ flex:0 0 auto; }
.build-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.build-stats{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.lsw-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); flex:0 0 auto; }
.lsw-seg{ display:inline-flex; gap:4px; padding:4px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line-2); flex:0 0 auto; }
.lsw-segbtn{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:none; background:transparent; border-radius:8px; cursor:pointer; color:var(--ink-2); font-size:13px; font-weight:600; transition:all .13s ease; }
.lsw-segbtn:hover{ color:var(--ink); }
.lsw-segbtn.on{ background:var(--green); color:#fff; box-shadow:var(--shadow-sm); }
.lsw-segbtn .lsw-ico{ width:auto; height:auto; background:none; color:currentColor; display:inline-flex; }
.lsw-segbtn .lsw-ico svg{ width:22px; height:15px; }
.lsw-hint{ font-size:12.5px; color:var(--ink-3); flex:1 1 auto; min-width:120px; }
.lsw{ display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; padding:8px 12px; border-radius:10px;
  border:2px solid var(--line-2); background:var(--surface); transition:all .13s ease; }
.lsw:hover{ border-color:var(--green-mid); background:var(--green-pale); }
.lsw.on{ border-color:var(--green); background:var(--green-pale); box-shadow:0 0 0 3px var(--green-pale); }
.lsw-ico{ flex-shrink:0; width:40px; height:30px; border-radius:8px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.lsw.on .lsw-ico{ background:var(--green); }
.lsw-txt{ display:flex; flex-direction:column; gap:2px; }
.lsw-t{ font-size:14px; font-weight:700; color:var(--ink); }
.lsw.on .lsw-t{ color:var(--green-deep); }
.lsw-d{ font-size:12px; color:var(--ink-3); line-height:1.3; }
.lsw-row-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:12px; width:100%; justify-content:center;
  padding:11px 16px; border-radius:10px; border:1.5px dashed var(--green-mid); background:var(--green-pale);
  color:var(--green-deep); font-size:13px; font-weight:600; cursor:pointer; transition:all .13s ease; }
.lsw-row-cta:hover{ background:var(--green); color:#fff; border-color:var(--green); border-style:solid; }
.lsw-row-plus{ font-size:15px; line-height:1; }
@media (max-width:620px){ .layout-switch{ align-items:flex-start; } }
.sa-change-btn{ display:inline-flex; align-items:center; gap:5px; padding:calc(4px / var(--sf-scale,1)) calc(11px / var(--sf-scale,1)); border-radius:20px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line-2); color:var(--ink-2); font-size:calc(14px / var(--sf-scale,1)); font-weight:600; }
.sa-change-btn:hover{ border-color:var(--green); color:var(--green-deep); background:var(--green-pale); }
.sa-change-pop{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:20;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:calc(9px / var(--sf-scale,1)); min-width:calc(180px / var(--sf-scale,1)); }
.sa-change-h{ font-family:var(--mono); font-size:calc(9.5px / var(--sf-scale,1)); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:calc(2px / var(--sf-scale,1)) calc(4px / var(--sf-scale,1)) calc(8px / var(--sf-scale,1)); }
.sa-change-opt{ display:flex; align-items:center; gap:calc(9px / var(--sf-scale,1)); width:100%; text-align:left; cursor:pointer; padding:calc(6px / var(--sf-scale,1)) calc(8px / var(--sf-scale,1));
  border-radius:8px; border:1px solid transparent; background:transparent; }
.sa-change-opt:hover{ background:var(--green-pale); }
.sa-change-opt.on{ background:var(--green-pale); border-color:var(--green-mid); }
.sa-change-opt img{ width:calc(26px / var(--sf-scale,1)); height:calc(30px / var(--sf-scale,1)); object-fit:contain; }
.sa-change-opt span{ font-size:calc(12.5px / var(--sf-scale,1)); font-weight:600; color:var(--ink); }
.sa-change-tick{ margin-left:auto; color:var(--green-deep); font-weight:700; font-size:calc(13px / var(--sf-scale,1)); }
.sa-stack-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:calc(6px / var(--sf-scale,1)) calc(14px / var(--sf-scale,1)); border-radius:20px; cursor:pointer;
  background:var(--green-pale); border:1.5px solid var(--green-mid); color:var(--green-deep); font-size:calc(14px / var(--sf-scale,1)); font-weight:700;
  white-space:normal; text-align:center; line-height:1.25; transition:all .12s ease; }
.sa-stack-cta:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.ghost-slice{ transition:all .12s ease; white-space:pre-line; }
.ghost-slice:hover{ border-color:var(--green)!important; background:var(--green-pale)!important; transform:translateY(-2px); }
.ghost-add{ transition:all .12s ease; }
.ghost-add:hover{ border-color:var(--green)!important; background:var(--green-pale)!important; transform:translateY(-2px); }
.ghost-cancel{ align-self:center; display:inline-flex; align-items:center; gap:calc(5px / var(--sf-scale,1)); font-family:var(--mono); font-size:calc(9.5px / var(--sf-scale,1)); letter-spacing:.05em; font-weight:700; color:var(--ink-2); background:var(--surface); border:1.5px solid var(--line-2); cursor:pointer; padding:calc(5px / var(--sf-scale,1)) calc(12px / var(--sf-scale,1)); border-radius:20px; transition:all .12s ease; }
.ghost-cancel:hover{ color:var(--danger); border-color:var(--danger); background:var(--danger-bg,#fdecec); }
.sum-bays{ margin-bottom:14px; }
.sum-bays-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--ink-2); margin-bottom:6px; }
.sum-bays-n b{ font-size:16px; color:var(--ink); }
.sum-bar{ height:8px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line-2); overflow:hidden; }
.sum-bar-fill{ height:100%; background:linear-gradient(90deg,var(--green),var(--green-deep)); transition:width .3s ease; }
.sum-styles{ display:flex; flex-direction:column; gap:10px; padding:12px 0; border-top:1px solid var(--line); margin-bottom:0; }
.sum-styles + .sum-styles{ border-top:none; }
.sum-styles:last-of-type{ border-bottom:1px solid var(--line); margin-bottom:12px; }
.sum-style-block{ display:flex; flex-direction:column; gap:3px; }
.sum-substyle-row{ display:flex; align-items:baseline; gap:8px; padding-left:30px; border-radius:6px; cursor:default; transition:background .1s; }
.sum-substyle-row:hover{ background:var(--green-pale); }
.sum-sub-qty{ font-size:11.5px; font-weight:700; color:var(--ink-3); min-width:24px; }
.sum-sub-lbl{ font-size:11.5px; color:var(--ink-3); }
.sum-style-row{ display:flex; align-items:baseline; gap:8px; }
.sum-style-qty{ font-weight:800; font-size:15px; color:var(--green-deep); min-width:30px; }
.sum-style-lbl{ font-size:13px; font-weight:600; color:var(--ink); }
.sum-style-cap{ margin-left:auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap; }
.sum-sub-dims{ color:var(--ink-4,#9aa39c); font-size:11px; }
.sum-meta{ display:flex; flex-direction:column; gap:2px; }
.side-stats{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.side-stats .bstat{ flex:1 1 auto; min-width:72px; padding:8px 12px; }
.side-stats .bstat-num{ font-size:18px; }
.sum-meta-top{ margin-bottom:10px; }
.sum-divider{ height:1px; background:var(--line); margin:14px 0; }
.sum-style-row{ border-radius:6px; cursor:default; transition:background .1s; }
.sum-style-row:hover{ background:var(--green-pale); }
.sum-hl-hint{ font-size:10.5px; color:var(--ink-4,#8a938d); margin:-2px 0 12px; font-style:italic; }
.sum-code{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); cursor:pointer; transition:border-color .12s,background .12s; }
.sum-code:hover{ border-color:var(--green); background:var(--green-pale); }
.sum-code-lbl{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.sum-code-val{ font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:.02em; }
.sum-code-cta{ margin-left:auto; font-size:11px; font-weight:600; color:var(--green-deep); white-space:nowrap; }
.config-code-line{ margin-top:12px; font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.config-code-line b{ font-size:13px; color:var(--green-deep); letter-spacing:.02em; }
.config-code-line span{ color:var(--ink-3); }
.share-qr-wrap{ display:flex; gap:18px; align-items:center; padding:6px 0 16px; }
.share-qr{ width:150px; height:150px; flex-shrink:0; border:1px solid var(--line); border-radius:10px; background:#fff; }
.share-qr-fallback{ display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; color:var(--ink-3); padding:12px; }
.share-qr-side{ display:flex; flex-direction:column; gap:5px; }
.share-code-lbl{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.share-code{ font-size:18px; font-weight:800; color:var(--green-deep); letter-spacing:.03em; }
.share-code-note{ font-size:11.5px; color:var(--ink-3); line-height:1.4; margin-top:2px; }
.code-legend{ margin-top:12px; padding:14px 16px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
.code-legend-h{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.code-legend-row{ display:flex; gap:10px; align-items:baseline; font-size:12px; color:var(--ink-2); padding:2px 0; }
.code-legend-k{ flex:0 0 46px; font-weight:800; color:var(--green-deep); }
.rules-callout{ background:var(--green-pale); border:1px solid var(--green-mid); border-radius:14px; padding:15px 18px; margin-bottom:22px; max-width:820px; }
.rules-callout-h{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--green-deep); margin-bottom:9px; }
.rules-lock{ font-size:14px; }
.rules-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.rules-list li{ font-size:13px; color:var(--ink-2); line-height:1.45; }
.rules-list b{ color:var(--ink); }
.opt-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.opt-badge{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:6px; padding:3px 7px; }
.opt-badge.lock{ color:#fff; background:var(--ink); border-color:var(--ink); }
.bstat{ display:flex; flex-direction:column; gap:2px; padding:7px 14px; border-radius:8px; background:var(--ink); border:1px solid var(--ink); min-width:66px; }
.bstat-num{ font-size:19px; font-weight:800; line-height:1.02; color:#fff; letter-spacing:-.02em; }
.bstat-num i{ font-style:normal; font-size:13px; font-weight:600; color:rgba(255,255,255,.55); }
.bstat-lbl{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.bstat-key{ background:var(--green); border-color:var(--green); }
.bstat-key .bstat-num{ color:#fff; }
.bstat-key .bstat-num i{ color:rgba(255,255,255,.7); }
.bstat-key .bstat-lbl{ color:rgba(255,255,255,.85); }
.addbar{ background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2); align-items:center; gap:14px; flex-wrap:wrap; }
.cablabel{ font-size:calc(11px / var(--sf-scale,1)); color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.pal-img{ width:44px; height:34px; object-fit:contain; flex-shrink:0; }
/* padding-bottom carves out a fixed strip for .review-stage-dims — ScaleToFit
   (fill mode) reads its height budget as this host's clientHeight MINUS its
   own padding, so the extra bottom padding is what makes the board scale
   down to leave the strip clear instead of the dims bar getting clipped by
   .review-stage's overflow:hidden or overlapping the artwork. */
.review-stage{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px 16px 46px; margin-bottom:16px; overflow:hidden; position:relative; }
.review-stage-dims{ position:absolute; left:16px; right:16px; bottom:12px; display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:18px; padding-top:10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-2); text-align:center; }
.review-stage-dims-sep{ width:1px; height:13px; background:var(--line-2); align-self:center; }
.col-grip{ display:inline-flex; align-items:center; justify-content:center; gap:calc(5px / var(--sf-scale,1)); width:auto; padding:0 calc(10px / var(--sf-scale,1)); height:calc(24px / var(--sf-scale,1)); border-radius:7px; cursor:grab;
  background:var(--surface); color:var(--ink-4,#aab2ac); border:1px solid var(--line-2); transition:all .12s ease; }
.col-grip:hover{ background:var(--green-pale); color:var(--green-deep); border-color:var(--green-mid); }
.col-grip-lbl{ letter-spacing:.1em; font-weight:700; }
.inline-ghost{ transition:all .12s ease; }
.inline-ghost:hover{ border-color:var(--green)!important; background:var(--green-pale)!important; }
.ghost-size-seg{ display:inline-flex; gap:calc(4px / var(--sf-scale,1)); padding:calc(3px / var(--sf-scale,1)); border-radius:calc(11px / var(--sf-scale,1)); background:var(--surface-2); border:1px solid var(--line-2); }
.ghost-size-btn{ border:none; background:transparent; cursor:pointer; border-radius:calc(8px / var(--sf-scale,1)); font-family:var(--mono); font-weight:800; color:var(--ink-3);
  font-size:calc(12px / var(--sf-scale,1)); padding:calc(4px / var(--sf-scale,1)) calc(11px / var(--sf-scale,1)); transition:all .12s ease; }
.ghost-size-btn:hover{ color:var(--green-deep); }
.ghost-size-btn.on{ background:var(--green); color:#fff; }
.col-grip:active{ cursor:grabbing; background:var(--green); color:#fff; border-color:var(--green); }
.builder-wrap{ display:grid; grid-template-columns:1fr 280px; gap:26px; align-items:start; }
.cabinet-stage{ background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:12px; display:flex; flex-direction:column; align-items:stretch;
  min-height:180px; justify-content:flex-start; position:relative; overflow:visible; }
.stage-tools{ position:absolute; top:14px; right:14px; display:flex; gap:6px; }
.toolchip{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; padding:5px 10px;
  border-radius:7px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:all .12s; }
.toolchip.on{ background:var(--green); color:#fff; border-color:var(--green); }
.stage-caption{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:18px; letter-spacing:.03em; }

/* palette */
.palette-title{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:11px; }
.palette{ display:flex; flex-direction:column; gap:8px; }
/* horizontal palette row (above the cabinets) */
.palette-row{ flex-direction:row; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.palette-row .pal-item{ flex:0 1 auto; }
.palette-row .pal-item:hover{ transform:translateY(-2px); }
.palette-bar{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:8px; flex-wrap:wrap; }
.palette-bar .palette-title{ margin-bottom:0; font-size:11.5px; text-transform:none; letter-spacing:.01em; color:var(--ink-2); font-family:inherit; }
.palette-bar .palette-title b{ color:var(--ink); }
.locker-note{ font-size:12px; color:var(--ink-2); }
.locker-note b{ color:var(--ink); font-weight:700; }
.palette-groups{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:8px; margin-bottom:14px; }
.pal-group{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:8px; }
.pal-divider{ width:1px; align-self:stretch; background:var(--line-2); margin:2px 4px; flex:0 0 auto; }
.palette-groups .pal-item{ flex:0 0 auto; flex-direction:row; align-items:center; gap:9px; padding:7px 11px; min-height:0; }
.palette-groups .pal-item:hover{ transform:translateY(-2px); }
.palette-groups .pal-img{ width:40px; height:30px; }
.palette-groups .pal-name{ line-height:1.15; font-size:12.5px; }
.palette-groups .pal-sub{ margin-top:1px; font-size:10.5px; }
.stage-reset{ position:absolute; top:14px; right:16px; z-index:7; }
/* configuration summary */
.cap-summary{ margin-top:22px; }
.cap-summary-head{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.cap-cards{ display:flex; flex-wrap:wrap; gap:12px; }
.cap-card{ flex:1 1 190px; min-width:180px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:14px 15px; display:flex; flex-direction:column; gap:11px; }
.cap-card-total{ background:var(--green-pale); border-color:var(--green-mid); }
.cap-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cap-card-name{ font-weight:700; font-size:15px; color:var(--ink); }
.cap-card-tag{ font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; }
.cap-card-body{ display:flex; flex-wrap:wrap; gap:6px; min-height:22px; }
.cap-chip{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--green-deep);
  background:var(--green-pale); border:1px solid var(--green-mid); border-radius:6px; padding:4px 8px; }
.cap-empty{ font-size:12px; color:var(--ink-4); font-style:italic; }
.cap-card-foot{ display:flex; gap:10px; border-top:1px dashed var(--line); padding-top:11px; }
.cap-fstat{ display:flex; flex-direction:column; gap:2px; padding:7px 12px; border-radius:8px; background:var(--ink); border:1px solid var(--ink); flex:1 1 0; }
.cap-fnum{ font-size:20px; font-weight:800; line-height:1.02; color:#fff; letter-spacing:-.02em; }
.cap-fnum i{ font-style:normal; font-size:12px; font-weight:600; color:rgba(255,255,255,.55); }
.cap-flbl{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.cap-fstat-key{ background:var(--green); border-color:var(--green); }
.cap-fstat-key .cap-fnum{ color:#fff; }
.cap-fstat-key .cap-flbl{ color:rgba(255,255,255,.85); }
.cap-total-nums{ display:flex; gap:18px; flex-wrap:wrap; }
.cap-total-nums div{ display:flex; flex-direction:column; }
.cap-total-nums b{ font-size:22px; line-height:1; color:var(--green-deep); }
.cap-total-nums span{ font-size:10px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; margin-top:3px; }
.pal-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; border:1.5px solid var(--line);
  background:var(--surface); cursor:grab; transition:all .13s ease; user-select:none; }
.pal-item:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-sm); transform:translateX(2px); }
.pal-item:active{ cursor:grabbing; }
.pal-item.active-tool{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.pal-swatch{ width:30px; height:30px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; font-weight:600; color:#fff; }
.pal-thumb{ width:40px; height:32px; border-radius:5px; flex-shrink:0; overflow:hidden; background:var(--steel-dark);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2); }
.pal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sw-key{ background:linear-gradient(155deg,var(--key),var(--key-deep)); }
.sw-card{ background:linear-gradient(155deg,var(--card),var(--card-deep)); }
.sw-locker{ background:linear-gradient(155deg,var(--locker),var(--locker-deep)); }
.sw-blank{ background:repeating-linear-gradient(45deg,var(--blank-c),var(--blank-c) 4px,oklch(0.80 0.006 150) 4px,oklch(0.80 0.006 150) 8px); }
.pal-meta{ min-width:0; }
.pal-name{ font-size:13px; font-weight:600; line-height:1.2; }
.pal-sub{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:2px; }

.builder-hint{ font-size:12.5px; color:var(--ink-3); margin-top:14px; line-height:1.5; }
.cab-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.cab-tab{ display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:8px; border:1.5px solid var(--line);
  background:var(--surface); font-size:12.5px; cursor:pointer; transition:all .12s; }
.cab-tab.active{ border-color:var(--green); background:var(--green-pale); color:var(--green-deep); font-weight:600; }
.cab-tab .sa{ font-family:var(--mono); font-size:9px; background:var(--steel-deep); color:#fff; padding:1px 5px; border-radius:4px; letter-spacing:.05em; }
.cab-tab-add{ border-style:dashed; color:var(--ink-2); }

/* ---- Alerts ------------------------------------------------------------- */
.alert{ display:flex; gap:10px; align-items:flex-start; border-radius:9px; padding:11px 14px; font-size:12.5px; line-height:1.45;
  margin-bottom:16px; }
.alert-warn{ background:var(--warn-bg); border:1px solid oklch(0.85 0.08 85); color:var(--warn-ink); }
.alert-danger{ background:var(--danger-bg); border:1px solid oklch(0.85 0.08 30); color:var(--danger); }
.alert b{ font-weight:600; }

/* toast for blocked placement */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); z-index:200;
  background:var(--steel-dark); color:#fff; padding:13px 20px; border-radius:11px; font-size:13px; max-width:440px;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .25s ease; display:flex; gap:11px; align-items:flex-start; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast .tk{ color:var(--danger); flex-shrink:0; margin-top:1px; }
.toast-undo{ margin-left:4px; flex-shrink:0; background:none; border:1px solid rgba(255,255,255,.4); color:#fff; font-size:12px; font-weight:700; padding:3px 12px; border-radius:7px; cursor:pointer; }
.toast-undo:hover{ background:rgba(255,255,255,.15); }

/* ---- Sidebar summary ---------------------------------------------------- */
.side-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; }
.side-head{ background:var(--steel-dark); color:#fff; padding:13px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.side-badge{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; background:rgba(255,255,255,.14); padding:3px 8px; border-radius:20px; }
.side-badge.ok{ background:var(--green); }
.side-body{ padding:6px 18px 14px; }
.srow{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line); font-size:13px; }
.srow:last-child{ border-bottom:none; }
.skey{ color:var(--ink-3); }
.sval{ color:var(--ink); font-weight:600; text-align:right; }
.side-empty{ color:var(--ink-3); font-size:12.5px; text-align:center; padding:26px 0; }

.preview-mini{ padding:16px; }
.preview-mini-title{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-bottom:14px; }

.actions{ display:flex; flex-direction:column; gap:7px; }
.actbtn{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 15px; border-radius:9px; font-size:13px; font-weight:600;
  cursor:pointer; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); transition:all .13s; text-align:left; }
.actbtn:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.actbtn.primary{ background:var(--green); color:#fff; border-color:var(--green); }
.actbtn.primary:hover{ background:var(--green-deep); }
.actbtn .ai{ width:18px; flex-shrink:0; display:flex; }

/* ---- Requirements form -------------------------------------------------- */
.grp-head{ display:grid; grid-template-columns:1fr 200px 130px 110px 32px; gap:12px; align-items:end;
  padding:0 4px 8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.grp-row{ display:grid; grid-template-columns:1fr 200px 130px 110px 32px; gap:12px; align-items:start;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius); padding:13px 14px; margin-bottom:10px; }
.grp-row .inp{ height:38px; }
.grp-modnote{ font-size:10px; color:var(--ink-3); margin-top:5px; text-align:center; }
.grp-seg{ height:38px; border-radius:9px; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .12s; }
.grp-seg:hover{ border-color:var(--ink-3); }
.grp-seg.on{ background:var(--green-pale); border-color:var(--green); color:var(--green-deep); }
.grp-del{ width:32px; height:38px; border-radius:9px; border:1.5px solid var(--line-2); background:var(--surface);
  color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; transition:all .12s; }
.grp-del:hover:not(:disabled){ border-color:var(--danger); color:var(--danger); }
.grp-del:disabled{ opacity:.3; cursor:not-allowed; }
.grp-add{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:9px; border:1.5px dashed var(--line-2);
  background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; cursor:pointer; transition:all .12s; margin-top:2px; }
.grp-add:hover{ border-color:var(--green-mid); color:var(--green-deep); background:var(--green-pale); }
@media (max-width:880px){
  .grp-head{ display:none; }
  .grp-row{ grid-template-columns:1fr 1fr; }
}

.field{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius); padding:15px 16px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:3px; }
.field .fsub{ font-size:11.5px; color:var(--ink-3); margin-bottom:10px; }
.stepper-num{ display:flex; align-items:center; gap:0; }
.stepper-num button{ width:34px; height:38px; border:1.5px solid var(--line-2); background:var(--surface); cursor:pointer;
  font-size:17px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; }
.stepper-num button:first-child{ border-radius:8px 0 0 8px; }
.stepper-num button:last-child{ border-radius:0 8px 8px 0; }
.stepper-num button:hover{ background:var(--surface-2); }
.stepper-num input{ width:74px; height:38px; border:1.5px solid var(--line-2); border-left:none; border-right:none; text-align:center;
  font-family:var(--mono); font-size:15px; color:var(--ink); background:var(--surface); }
.stepper-num input:focus{ outline:none; }
.seg{ display:inline-flex; border:1.5px solid var(--line-2); border-radius:9px; overflow:hidden; }
.seg button{ padding:9px 15px; font-size:12.5px; font-weight:600; background:var(--surface); border:none; cursor:pointer; color:var(--ink-2); border-right:1px solid var(--line); }
.seg button:last-child{ border-right:none; }
.seg button.on{ background:var(--green); color:#fff; }

/* ---- Reader chips ------------------------------------------------------- */
.reader-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; max-width:760px; }
.reader{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:var(--radius); border:1.5px solid var(--line);
  background:var(--surface); cursor:pointer; transition:all .13s; position:relative; }
.reader:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-sm); }
.reader.sel{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.reader-ico{ width:40px; height:40px; border-radius:9px; background:var(--steel-deep); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.reader.sel .reader-ico{ background:var(--green); }
.reader-name{ font-size:13.5px; font-weight:600; }
.reader-sub{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* visual reader grid (real unit photos) */
.reader-visual-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:780px; }
.reader-visual{ border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer;
  padding:14px 14px 16px; transition:all .13s; text-align:center; }
.reader-visual:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.reader-visual.sel{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.reader-visual-name{ font-size:14px; font-weight:600; margin-top:8px; }
.reader-visual-sub{ font-size:11.5px; color:var(--ink-3); margin-top:3px; }

/* ---- Done screen -------------------------------------------------------- */
.done-wrap{ max-width:1120px; }
.done-wrap .done-hero{ flex:0 0 auto; }
.done-wrap .review-actions{ flex:0 0 auto; margin-top:14px; }
.done-hero{ background:linear-gradient(165deg,var(--green-pale),var(--surface)); border:1px solid var(--green-mid);
  border-radius:var(--radius-lg); padding:18px 24px; display:flex; gap:20px; align-items:center; margin-bottom:14px; }
.done-check{ width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-md); }
.done-hero h2{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.done-hero p{ font-size:13px; color:var(--ink-2); margin-top:4px; max-width:52ch; }

/* ---- Modal -------------------------------------------------------------- */
.modal-back{ position:fixed; inset:0; background:rgba(28,36,30,.45); backdrop-filter:blur(3px); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-back.show{ opacity:1; pointer-events:auto; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:460px; box-shadow:var(--shadow-lg);
  transform:translateY(12px); transition:transform .2s; overflow:hidden; }
.modal.modal-sm{ max-width:400px; }
.modal.modal-form{ max-width:880px; }
.email-preview-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.modal-back.show .modal{ transform:translateY(0); }
.modal-head{ padding:20px 24px 0; }
.modal-head h3{ font-size:18px; font-weight:600; }
.modal-head p{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.modal-body{ padding:16px 24px 22px; display:flex; flex-direction:column; gap:11px; max-height:78vh; overflow-y:auto; }
/* explicit cursor: the host page's own ambient form-element rules (same
   family as the checkbox padding override above) set cursor:default/pointer
   on all inputs, which silently swallows the text-field I-beam — fields
   still work, they just look unclickable while hovering. */
.inp{ width:100%; padding:6px 10px; border:1.5px solid var(--line-2); border-radius:8px; font-size:13px; font-family:var(--ui); color:var(--ink); background:var(--surface); cursor:text; }
select.inp{ cursor:pointer; }
.inp:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; padding:0 24px 22px; }
.linkbox{ display:flex; gap:8px; }
.linkbox input{ flex:1; font-family:var(--mono); font-size:11.5px; }
.codeblock{ margin-top:14px; }
.codeblock-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.codebox{ width:100%; height:74px; resize:vertical; font-size:11px; line-height:1.45; white-space:pre-wrap; word-break:break-all; overflow:auto; }
.codebox::placeholder{ color:var(--ink-3); }
.help-btn{ font-family:var(--ui); font-size:14px; font-weight:700; color:#fff; background:var(--green); border:1px solid var(--green); border-radius:8px; padding:9px 16px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.help-btn:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.tour-layer{ position:fixed; inset:0; z-index:120; }
.tour-backdrop{ position:absolute; inset:0; background:rgba(15,25,20,.55); }
.tour-spot{ position:absolute; border-radius:12px; box-shadow:0 0 0 9999px rgba(15,25,20,.55); outline:2.5px solid var(--green); outline-offset:0; pointer-events:none; transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease; }
.tour-card{ position:fixed; z-index:121; width:320px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:15px 16px; animation:tourpop .2s ease; }
@keyframes tourpop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.tour-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tour-count{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-3); }
.tour-x{ background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:13px; padding:2px 4px; border-radius:6px; }
.tour-x:hover{ background:rgba(0,0,0,.06); color:var(--ink); }
.tour-title{ font-size:14.5px; color:var(--ink); }
.tour-body{ font-size:13px; line-height:1.45; color:var(--ink-2); margin:5px 0 12px; }
.tour-nav{ display:flex; justify-content:space-between; gap:10px; }
.help-banner{ display:flex; align-items:flex-start; gap:11px; background:var(--green-pale); border:1px solid var(--green-mid); border-radius:12px; padding:11px 13px; margin-bottom:14px; }
.help-ico{ flex:0 0 auto; font-size:16px; color:var(--green-deep); line-height:1.3; }
.help-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.4; color:var(--ink-2); }
.help-text b{ color:var(--ink); font-size:13.5px; }
.help-x{ flex:0 0 auto; background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:13px; padding:2px 4px; border-radius:6px; }
.help-x:hover{ background:rgba(0,0,0,.06); color:var(--ink); }
.review-actions .dev-saved-btn{ margin-left:auto; border-style:dashed; opacity:.8; font-size:12px; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px 14px; }
.ffield{ display:flex; flex-direction:column; gap:2px; }
.field-wide{ grid-column:1 / -1; }
.ffield > span{ font-size:11px; font-weight:600; color:var(--ink-2); }
.ffield > span i{ color:var(--danger); font-style:normal; }
.deliver-block{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; margin-bottom:14px; position:relative; }
.deliver-row{ display:flex; align-items:baseline; gap:8px; padding:2px 0; padding-right:96px; }
.deliver-lbl{ flex:0 0 96px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.deliver-code{ font-size:12px; font-weight:700; color:var(--green-deep); word-break:break-all; line-height:1.35; }
.deliver-link{ font-size:11.5px; word-break:break-all; }
.deliver-qr{ position:absolute; top:12px; right:14px; width:78px; height:78px; background:#fff; border-radius:6px; }
.deliver-attach{ display:flex; align-items:center; gap:16px; margin-top:6px; padding-top:8px; border-top:1px solid var(--line); padding-right:96px; }
.deliver-chk{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; }
/* Explicit, self-contained checkbox: a bare <input type=checkbox> otherwise
   inherits whatever ambient form-control styling the host page applies to
   all inputs (tall/rectangular, border-only :checked with no fill/mark —
   exactly the reported symptom), since nothing here was resetting it. */
.deliver-chk input[type=checkbox]{
  /* box-sizing:border-box + padding:0 explicitly, not just width/height:
     the host page's own ".row-fluid form input{padding:5px 10px}" rule
     otherwise still applies (unscoped ambient selector) and, combined with
     the default content-box sizing, adds 20px to the width but only 10px
     to the height — visibly wider than tall. */
  box-sizing:border-box;padding:0;
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;
  background:var(--surface);cursor:pointer;position:relative;
}
.deliver-chk input[type=checkbox]:checked{ background:var(--green);border-color:var(--green); }
.deliver-chk input[type=checkbox]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.deliver-chk input[type=checkbox]:focus-visible{ outline:none;box-shadow:0 0 0 3px var(--green-pale); }
.msg-preview{ border:1px solid var(--line-2); border-radius:10px; overflow:hidden; }
.msg-preview-h{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); padding:7px 12px; border-bottom:1px solid var(--line-2); }
.msg-preview-body{ padding:10px 12px; font-size:12px; line-height:1.5; max-height:180px; overflow-y:auto; }
.msg-pv-line{ padding:1px 0; word-break:break-word; }
.msg-pv-line b{ color:var(--ink-2); }
.msg-pv-sep{ height:1px; background:var(--line); margin:6px 0; }
.qr-preview{ display:flex; align-items:center; gap:16px; margin-top:12px; padding:14px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); }
.qr-preview img{ width:132px; height:132px; flex:0 0 auto; display:block; background:#fff; border-radius:6px; }
.qr-preview-side{ display:flex; flex-direction:column; gap:4px; }
.qr-preview-side b{ font-size:14px; }
.qr-preview-side span{ font-size:12.5px; color:var(--ink-3); }
.ref-id{ font-weight:700; color:var(--green-deep); text-transform:none; letter-spacing:0; }
.startgrid{ display:flex; align-items:stretch; gap:22px; max-width:1120px; }
.startgrid .modegrid{ flex:1 1 auto; }
.start-divider{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.start-divider::before,.start-divider::after{ content:''; flex:1 1 auto; width:1.5px; background:var(--line); }
.start-divider span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); padding:10px 0; }
.load-card{ flex:0 0 320px; display:flex; flex-direction:column; cursor:default!important; }
.load-card:hover{ transform:none; box-shadow:var(--shadow-lg); border-color:var(--line); }
.load-card .codebox{ height:96px; margin-top:auto; }
/* Container query (available width, not viewport — see the .main one above
   for why): stack to 3 full-width rows — KeyWatcher/KeyBank, then a
   horizontal "OR" divider, then the load-a-config card — instead of the 3
   flex items being forced to squeeze into one row. Each item claiming a
   full line (flex-basis:100%) puts each on its own row in DOM order. */
@container (max-width:1040px){
  .startgrid{ flex-wrap:wrap; }
  /* max-width:none too: .modegrid's own 760px cap (for the normal 3-across
     layout) would otherwise leave it short of a full row. */
  .startgrid .modegrid{ flex:1 1 100%; max-width:none; }
  .start-divider{ flex:1 1 100%; flex-direction:row; padding:2px 0; }
  .start-divider::before,.start-divider::after{ width:auto; height:1.5px; }
  .start-divider span{ padding:0 10px; }
  .load-card{ flex:1 1 100%; }
}
/* Narrower still: KeyWatcher/KeyBank themselves drop from side-by-side to
   their own stacked rows within .modegrid. */
@container (max-width:565px){
  .modegrid{ grid-template-columns:1fr; }
}
/* Topbar: "Take a tour" drops to its own row, right-aligned, instead of
   squeezing next to the logo. Stepper: the full 5-step list is swapped for
   a centered "N of 5 Label" (.stp-compact) — position:absolute so it's
   centered on the whole bar regardless of the Start-over button's width. */
@container (max-width:667px){
  .topbar{ flex-wrap:wrap; height:auto; padding:10px 22px; }
  /* .brand (just the logo now) claims the full row alone; topbar-right
     wraps to row 2, right-aligned via margin-left:auto. */
  .brand{ flex:1 1 100%; }
  .topbar-right{ flex:0 0 auto; }
  .stepper{ position:relative; }
  .stp,.stp-sep{ display:none; }
  .stp-compact{ display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
}

/* Container query, not viewport — .main's available width depends on
   whatever page/column it's embedded in, not the visitor's browser width
   (a legacy-template page can cap .app's real width well below the
   viewport, which a max-width media query would never see). */
@container (max-width:1080px){
  .main{ grid-template-columns:1fr; }
  .workpane{ overflow-y:visible; }
  .sidepane{ height:auto; overflow:visible; border-left:none; border-top:1px solid var(--line); }
  .builder-wrap{ grid-template-columns:1fr; }
}
.print-doc{ display:none; }
.paper-toggle{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line-2); border-radius:8px; overflow:hidden; }
.paper-toggle .paper-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:0 9px; }
.paper-toggle button{ padding:8px 12px; font-size:12.5px; font-weight:600; background:var(--surface); border:none; border-left:1px solid var(--line); cursor:pointer; color:var(--ink-2); }
.paper-toggle button.on{ background:var(--green); color:#fff; }
/* ---- Print / PDF layout — rules live OUTSIDE @media print so the off-screen
   measurer can read real pixel sizes; visibility is toggled below ----------- */
.print-doc{ display:none; }
.print-measure{ position:fixed; left:-99999px; top:0; z-index:-1; }
.print-sheet,.print-page{ box-sizing:border-box; display:flex; flex-direction:column; color:#111; overflow:hidden; background:#fff; }
.print-page{ padding:11mm; }
.print-band{ display:flex; align-items:stretch; gap:26px; padding-bottom:10px; margin-bottom:8px; border-bottom:2px solid var(--green,#2f7d4f); }
.pv-brand{ flex:0 0 160px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.pv-logo-mw{ width:108px; height:auto; }
.pv-logo-kw{ width:142px; height:auto; margin-top:6px; }
.pv-contact{ font-size:9px; font-weight:700; letter-spacing:.02em; color:#333; margin-top:9px; white-space:nowrap; }
.pv-printed{ font-size:8.5px; color:#999; margin-top:2px; font-weight:500; }
.pv-foot{ font-size:9.5px; font-weight:600; color:#111; margin-top:4px; }
.pv-statcard{ flex:0 0 168px; background:#1e2a24; border-radius:10px; padding:9px; color:#fff; align-self:flex-start; }
.pv-statcard-h{ font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.pv-badge{ font-size:7.5px; font-weight:800; letter-spacing:.06em; background:var(--green,#2f7d4f); color:#fff; padding:2px 6px; border-radius:10px; }
.pv-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pv-tile{ background:rgba(255,255,255,.08); border-radius:7px; padding:6px 8px; }
.pv-tile-green{ background:var(--green,#2f7d4f); }
.pv-tile b{ display:block; font-size:15px; font-weight:800; line-height:1; }
.pv-tile b i{ font-size:9px; font-weight:600; font-style:normal; opacity:.7; }
.pv-tile span{ font-size:7px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.8; }
.pv-detail{ flex:1 1 0; min-width:0; max-width:none; font-size:11.5px; color:#111; }
.pv-detail2{ flex:1.15 1 0; }
.pv-band-spacer{ display:none; }
.pv-drow{ display:flex; justify-content:space-between; gap:8px; padding:1px 0; }
.pv-drow span{ color:#666; }
.pv-drow-b{ border-bottom:1px solid #e2e2e2; padding-bottom:5px; margin-bottom:5px; }
.pv-block{ margin-bottom:4px; }
.pv-block-row{ display:flex; align-items:baseline; gap:6px; font-size:10.5px; }
.pv-block-lbl{ font-weight:700; white-space:nowrap; }
.pv-block-cap{ margin-left:auto; color:#666; font-size:9.5px; white-space:nowrap; }
.pv-q{ font-weight:800; color:var(--green,#2f7d4f); }
.pv-sub{ font-size:10px; color:#555; padding:0 0 0 14px; line-height:1.3; }
.pv-sub-dims{ color:#888; }
.pv-drow-fp2{ margin-top:-2px; }
.pv-qr-wrap{ flex:0 0 auto; align-self:flex-start; display:flex; flex-direction:column; align-items:center; }
.pv-qr{ width:82px; height:82px; display:block; }
.pv-qr-lbl{ font-size:7.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#666; margin-top:3px; max-width:96px; text-align:center; }
.pv-qr-fb-box{ width:82px; height:82px; border:1.5px dashed #bbb; border-radius:8px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:8.5px; color:#888; line-height:1.3; }
.print-boardfull{ flex:0 0 auto; width:100%; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:10px; }
.print-board-scale{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.print-boardrow{ display:flex; justify-content:center; }
.print-simple-board{ flex:1 1 auto; width:100%; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding-top:10px; }
.print-simple-footer{ flex:0 0 auto; display:flex; align-items:baseline; justify-content:center; gap:22px; padding-top:14px; border-top:1px solid #ddd; margin-top:10px; }
.print-simple-dim{ font-size:14px; font-weight:600; color:#222; }
.print-simple-dim-b{ color:#666; font-weight:500; }
.print-simple-model{ font-size:14px; font-weight:700; color:var(--green,#2f7d4f); letter-spacing:.02em; }
.mod-callout{ box-sizing:border-box; border:1px solid var(--green-mid,#9ccbb0); background:var(--green-pale,#eef7f1); border-radius:7px; padding:4px 6px; }
.mod-callout-top{ margin-bottom:6px; }
.mod-callout-bottom{ margin-top:6px; }
.mod-callout-h{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green,#2f7d4f); margin-bottom:3px; }
.mod-callout-body{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
.mod-callout-item{ font-size:11.5px; color:#222; white-space:nowrap; }
.mod-callout-empty{ font-size:11.5px; color:#999; }
.print-doc .cablabel,.print-measure .cablabel{ font-size:11.5px !important; }
@media print{
  @page{ margin:0; size:landscape; }
  html,body{ background:#fff !important; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* This module is embedded on a full marketing page (nav, hero, other
     sections, footer) that we don't own and can't target by selector — hiding
     just our own .app leaves all of that visible around it. Hiding
     EVERYTHING on the page and re-revealing only .print-doc (the standard
     "print this one element" trick) isolates the printout regardless of
     whatever the host page's layout happens to be. visibility (not display)
     so hidden elements keep their box and .print-doc's position:fixed
     still lands at the top of the sheet instead of after their reserved space.
     html/body get height:0 + overflow:hidden on top of that: visibility alone
     keeps the FULL (many-screens-tall) host page's layout height, which
     paginated the print job into one sheet per screen-height of hidden
     content — and since .print-doc is position:fixed, it printed on every
     one of those sheets (fixed-position content repeats per page, same as a
     print header/footer). Collapsing html/body's box removes that reserved
     height entirely, so pagination is driven only by .print-doc's own
     content — exactly the sheet(s) PrintSheet renders, nothing extra.
     position:fixed content isn't clipped by an ancestor's overflow:hidden
     (it escapes that ancestor's box like it escapes its layout flow), so
     .print-doc still renders even though html/body are collapsed to 0. */
  html,body{ height:0 !important; overflow:hidden !important; margin:0 !important; }
  body *{ visibility:hidden !important; }
  .print-doc,.print-doc *{ visibility:visible !important; }
  .print-doc{ display:block !important; position:fixed !important; left:0; top:0; width:100%; overflow:visible !important; }
  .print-page{ break-after:page; }
  .print-page:last-child{ break-after:auto; }
}