/* ==========================================================================
   Toreno Kitchen Planner — IKEA-style configurator
   Vanilla CSS, no preprocessor.
   ========================================================================== */

:root {
  /* Toreno-aligned palette */
  --primary:        #1F3B5C;
  --primary-dark:   #142A44;
  --primary-soft:   #EAF0F7;
  --accent:         #4FA8B0;
  --accent-dark:    #357A82;
  --accent-soft:    #E3F2F4;
  --cta:            #E8861C;
  --cta-dark:       #C66E0B;
  --bg:             #FFFFFF;
  --surface:        #F6F8FB;
  --surface-2:      #EDF1F6;
  --border:         #DCE3EB;
  --border-strong:  #BCC6D2;
  --ink:            #1A2333;
  --ink-2:          #3D4759;
  --muted:          #6B7280;
  --muted-2:        #94A1AE;
  --success:        #1F9D55;
  --warning:        #C66E0B;
  --danger:         #C0392B;
  --shadow-sm:      0 1px 2px rgba(20, 30, 50, 0.06);
  --shadow-md:      0 4px 12px rgba(20, 30, 50, 0.08);
  --shadow-lg:      0 12px 32px rgba(20, 30, 50, 0.14);
  --radius-sm:      4px;
  --radius:         8px;
  --radius-lg:      14px;
  --tab-height:     56px;
  --sidebar-w:      280px;
  --summary-w:      320px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }

.app {
  display: grid;
  grid-template-rows: var(--tab-height) 1fr;
  height: 100vh;
  width: 100vw;
}

/* ====== Top bar ====== */
.topbar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid var(--border);
  height: 100%;
}
/* Primary CTA placed BETWEEN brand and tabs — most prominent spot in topbar */
.btn--cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  background: var(--accent, #E8861C);
  color: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 0 rgba(157, 84, 11, 0.22), 0 6px 18px -6px rgba(232, 134, 28, 0.55);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}
.btn--cta:hover {
  background: #D87614;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(157, 84, 11, 0.24), 0 10px 22px -6px rgba(232, 134, 28, 0.65);
}
.btn--cta:active { transform: translateY(0); }
.btn--cta svg { flex-shrink: 0; }
.brand__logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--primary);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.brand__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  letter-spacing: 0.2px;
  line-height: 1.1;
}
.brand__name span {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.tabs {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 4px;
}
.tab {
  position: relative;
  padding: 0 18px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab[disabled] { color: var(--muted-2); cursor: not-allowed; }
.tab[disabled]:hover { color: var(--muted-2); }
.tab__num {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.tab.is-active .tab__num { background: var(--accent); color: #fff; }
.tab.is-done .tab__num { background: var(--success); color: #fff; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.summary-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.summary-pill__label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.summary-pill__value {
  font-weight: 700;
  color: var(--primary);
  font-size: 15px;
}

/* ====== Workspace ====== */
.workspace {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--summary-w);
  height: 100%;
  min-height: 0;
}
.tools {
  background: #fff;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tools__head {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.tools__title { font-size: 15px; font-weight: 600; }
.tools__hint { margin-top: 4px; font-size: 12px; color: var(--muted); }

.tool-group { padding: 16px 16px 4px; }
.tool-group__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 10px 4px;
}
.tool-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 6px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.tool-btn:hover { background: var(--surface); }
.tool-btn.is-active {
  background: var(--primary-soft);
  border-color: var(--accent);
  color: var(--primary);
  font-weight: 600;
}
.tool-btn__icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--primary); flex-shrink: 0; }
.tool-btn__icon svg { width: 22px; height: 22px; }
.tool-btn__label { flex: 1; }
.tool-btn__sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Shape grid — auto-fills 2-3 columns based on sidebar width (no overflow) */
.shapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  padding: 14px 16px 20px;
}
.shapes__group-title {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 8px 0 0;
}
.shapes__group-title:first-child { margin-top: 0; }
.shape-card {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, background 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.shape-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.shape-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.shape-card svg { width: 100%; height: auto; max-height: 80px; }
.shape-card__label { font-size: 12px; color: var(--ink); text-align: center; font-weight: 500; }

/* Dim fields */
.dim-fields { padding: 14px 20px; border-top: 1px solid var(--border); }
/* The Heights group sits inside a tool-group that already has a heading, so it
   drops the extra rule and the doubled side padding. */
.tool-group__hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: -4px 0 10px 4px; }
.tool-group > .dim-fields { border-top: none; padding: 0 4px 6px; }
.height-derived {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.height-derived b { color: var(--ink); font-weight: 600; }
.dim-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dim-field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.dim-input {
  position: relative;
  width: 110px;
}
.dim-input input {
  width: 100%;
  padding: 7px 32px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 13px;
  text-align: right;
}
.dim-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dim-input__unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}

/* ====== Canvas area ====== */
.canvas-wrap {
  position: relative;
  background: var(--surface);
  overflow: hidden;
}
#stage-container { position: absolute; inset: 0; cursor: default; }
.canvas-overlay {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
.canvas-overlay__hint {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12px;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}
/* Undo / redo / reset — top-left of the plan, opposite the 3D toggle */
.history-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  display: flex;
  gap: 6px;
}
.history-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.history-btn svg { width: 17px; height: 17px; }
.history-btn:hover:not(:disabled) { background: var(--surface); }
.history-btn:disabled { opacity: 0.42; cursor: default; }
.history-btn[hidden] { display: none; }
.history-btn--revert { color: var(--accent-dark, var(--primary)); }
/* On a narrow canvas the labels are the first thing to go, not the buttons. */
@media (max-width: 1100px) {
  .history-btn span { display: none; }
  .history-btn { padding: 0; width: 36px; justify-content: center; }
}

.canvas-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.canvas-control {
  width: 36px; height: 36px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease;
}
.canvas-control:hover { background: var(--surface); }
.canvas-control svg { width: 20px; height: 20px; }
/* 2D/3D toggle */
.view3d-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, transform 0.05s ease;
}
.view3d-toggle:hover { background: var(--primary-dark); }
.view3d-toggle:active { transform: translateY(1px); }
.view3d-toggle svg { width: 18px; height: 18px; }

/* 3D overlay — fixed full-screen so it works from any tab (incl. lead step) */
.threed-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #E7EDF4;
  display: flex;
  flex-direction: column;
}
.threed-canvas {
  flex: 1;
  min-height: 0;
  position: relative;
}
.threed-canvas canvas { display: block; width: 100%; height: 100%; }
.threed-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
  color: var(--muted);
  font-size: 14px;
}
.threed-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid var(--border);
}
.threed-bar__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
}
.threed-bar__title svg { width: 18px; height: 18px; }
.threed-bar__hint { flex: 1; font-size: 12px; color: var(--muted); }
.lead__view3d { margin-bottom: 24px; }

/* Floating "Show me a tour" button — top CENTRE of 3D, always visible (works in
   both the full overlay and the Tab-2 split view). It used to sit top-left,
   where it ended up underneath the Undo/Redo/Reset bar once that was added and
   the two overlapped into an unreadable mess. */
.threed-tour-btn {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  border: none;
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 14px -2px rgba(15,30,70,.32);
}
.threed-tour-btn:hover { background: var(--primary-dark); }
/* Keep the centring translate — a bare translateY here would snap the button
   back to the left edge on every press. */
.threed-tour-btn:active { transform: translateX(-50%) translateY(1px); }
.threed-tour-btn svg { flex-shrink: 0; }
@media (max-width: 640px){
  .threed-tour-btn span { display: none; }   /* icon-only on small screens */
  .threed-tour-btn { padding: 9px 11px; }
}

/* ── Account button + saved-projects modal ─────────────────────────────── */
.acct-btn {
  margin-left: 10px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Signed out this is a call to action, not a grey afterthought in the corner. */
.acct-btn:not(.is-authed) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.acct-btn:not(.is-authed):hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.acct-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.acct-btn.is-authed { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Centred account prompt over the canvas */
.acct-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100% - 40px));
  padding: 22px 26px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 48px -12px rgba(15, 30, 70, .28);
  text-align: center;
}
.acct-cta[hidden] { display: none; }
.acct-cta__text { display: flex; flex-direction: column; gap: 5px; }
.acct-cta__text strong { font-size: 17px; color: var(--ink); }
.acct-cta__text span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.acct-cta .btn { width: 100%; }
.acct-cta__alt {
  background: none; border: none;
  font: 500 12.5px 'Inter', sans-serif;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
.acct-cta__alt:hover { color: var(--accent-dark); }
.acct-cta__x {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--muted); border-radius: 6px;
}
.acct-cta__x svg { width: 15px; height: 15px; }
.acct-cta__x:hover { background: var(--surface); color: var(--ink); }

.acct-modal {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(15, 25, 45, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.acct-modal[hidden] { display: none; }
.acct-modal.is-busy .acct-card { opacity: .6; pointer-events: none; }
.acct-card {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 14px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px -12px rgba(10, 20, 45, .4);
}
.acct-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--muted);
  border-radius: 8px; cursor: pointer;
}
.acct-x:hover { background: var(--bg-soft); color: var(--ink); }
.acct-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--ink); }
.acct-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.acct-form .field { margin-bottom: 13px; }
.acct-error {
  margin: 4px 0 12px; padding: 9px 12px;
  border-radius: 8px; font-size: 12.5px;
  background: #FDECEC; color: #A2262B; border: 1px solid #F3C9CB;
}
.acct-switch { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.acct-link {
  border: none; background: none; padding: 0;
  color: var(--accent-dark); font: 600 12.5px 'Inter', sans-serif;
  cursor: pointer; text-decoration: underline;
}
.acct-link:hover { color: var(--accent); }
.acct-link--block { display: block; margin: 8px 0 4px; }
.acct-link--muted { display: block; margin: 16px auto 0; color: var(--muted); font-weight: 500; }

.acct-save { display: flex; gap: 8px; margin-bottom: 4px; }
.acct-save input {
  flex: 1; min-width: 0;
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: 400 13px 'Inter', sans-serif;
}
.acct-save input:focus { outline: none; border-color: var(--accent); }
.acct-save .btn { white-space: nowrap; }

.acct-proj-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.acct-empty { margin: 10px 0; font-size: 13px; color: var(--muted); text-align: center; }
.acct-proj {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
}
.acct-proj.is-current { border-color: var(--accent); background: #FFF9F2; }
.acct-proj__main { flex: 1; min-width: 0; }
.acct-proj__name {
  font: 600 13.5px 'Inter', sans-serif; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-proj__meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.acct-proj__btn {
  border: 1px solid var(--border); background: #fff; color: var(--primary);
  border-radius: 7px; padding: 6px 11px;
  font: 600 12px 'Inter', sans-serif; cursor: pointer;
}
.acct-proj__btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.acct-proj__btn--danger { padding: 6px 10px; font-size: 15px; line-height: 1; color: var(--muted); }
.acct-proj__btn--danger:hover { border-color: #D9534F; color: #D9534F; }

/* ============================================================
   ACCOUNT PAGE — the full "personal cabinet" (IKEA-style)
   ============================================================ */
.account-page {
  position: fixed; inset: 0; z-index: 130;
  display: flex; flex-direction: column;
  background: #F4F6F9;
}
.account-page[hidden] { display: none; }

.acctpage__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.acctpage__brand { display: flex; align-items: center; gap: 12px; }
.acctpage__logo {
  width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--primary); color: #fff;
  font: 800 18px 'Inter', sans-serif;
}
.acctpage__brandname { font: 700 15px 'Inter', sans-serif; color: var(--ink); }
.acctpage__brandsub { font-size: 12px; color: var(--muted); }
.acctpage__back {
  border: 1px solid var(--border); background: #fff; color: var(--primary);
  border-radius: 999px; padding: 9px 16px;
  font: 600 13px 'Inter', sans-serif; cursor: pointer;
}
.acctpage__back:hover { border-color: var(--accent); color: var(--accent-dark); }

.acctpage__body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 0;
}
.acctpage__nav {
  border-right: 1px solid var(--border); background: #fff;
  padding: 22px 16px; display: flex; flex-direction: column; gap: 8px;
}
.acctpage__user {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.acctpage__avatar {
  width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
  font: 700 17px 'Inter', sans-serif; text-transform: uppercase;
}
.acctpage__usermeta { min-width: 0; }
.acctpage__username {
  font: 600 14px 'Inter', sans-serif; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acctpage__useremail {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acctpage__menu { display: flex; flex-direction: column; gap: 4px; }
.acctpage__navbtn {
  text-align: left; border: none; background: none;
  padding: 11px 14px; border-radius: 9px;
  font: 600 13.5px 'Inter', sans-serif; color: var(--ink-2); cursor: pointer;
}
.acctpage__navbtn:hover { background: var(--bg-soft, #F1F4F8); }
.acctpage__navbtn.is-active { background: var(--primary-soft); color: var(--primary); }
.acctpage__signout {
  margin-top: auto; text-align: left;
  border: none; background: none; padding: 11px 14px;
  font: 600 13px 'Inter', sans-serif; color: var(--muted); cursor: pointer;
}
.acctpage__signout:hover { color: #D9534F; }

.acctpage__main { overflow-y: auto; padding: 30px 34px 60px; }
.acctpanel[hidden] { display: none; }
.acctpanel__head { margin-bottom: 20px; }
.acctpanel__title { margin: 0 0 4px; font: 700 24px 'Inter', sans-serif; color: var(--ink); }
.acctpanel__sub { margin: 0; font-size: 13.5px; color: var(--muted); }

.acct-savebar {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 16px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.acct-savebar input {
  flex: 1 1 220px; min-width: 0;
  padding: 10px 13px; border: 1px solid var(--border);
  border-radius: 8px; font: 400 13.5px 'Inter', sans-serif;
}
.acct-savebar input:focus { outline: none; border-color: var(--accent); }

/* Gallery grid of saved designs */
.acct-gallery {
  margin-top: 18px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.acct-gallery__empty {
  grid-column: 1 / -1;
  padding: 48px 20px; text-align: center;
  color: var(--muted); font-size: 14px;
  background: #fff; border: 1px dashed var(--border); border-radius: 12px;
}
.pcard {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.pcard:hover { box-shadow: 0 10px 26px -14px rgba(15,30,70,.35); border-color: #D5DEEA; }
.pcard.is-current { border-color: var(--accent); }
.pcard__thumb {
  aspect-ratio: 16 / 10; background: #EEF2F7;
  display: grid; place-items: center; overflow: hidden;
}
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__thumb--empty { color: var(--muted-2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pcard__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent); color: #fff;
  font: 700 10px 'Inter', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
}
.pcard__body { padding: 13px 14px 4px; flex: 1 1 auto; }
.pcard__name {
  font: 600 14.5px 'Inter', sans-serif; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard__meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pcard__actions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 14px;
}
.pcard__actions .btn { flex: 1; }
.pcard__menu { position: relative; flex: 0 0 auto; }
.pcard__menubtn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--ink-2);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.pcard__menubtn:hover { border-color: var(--accent); color: var(--accent-dark); }
.pcard__dropdown {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5;
  min-width: 148px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 34px -12px rgba(15,30,70,.4);
  display: flex; flex-direction: column; gap: 2px;
}
.pcard__dropdown[hidden] { display: none; }
.pcard__dropdown button {
  text-align: left; border: none; background: none;
  padding: 9px 11px; border-radius: 7px;
  font: 600 13px 'Inter', sans-serif; color: var(--ink-2); cursor: pointer;
}
.pcard__dropdown button:hover { background: var(--bg-soft, #F1F4F8); }
.pcard__dropdown button.is-danger { color: #D9534F; }
.pcard__dropdown button.is-danger:hover { background: #FDECEC; }

/* Account-details cards */
.acct-card2 {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 18px; max-width: 560px;
}
.acct-card2--danger { border-color: #F0C9CB; }
.acct-card2__title { margin: 0 0 14px; font: 700 16px 'Inter', sans-serif; color: var(--ink); }
.acct-card2__note { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.acct-card2 .field { margin-bottom: 13px; }
.acct-card2 .field label { display: block; font: 600 12.5px 'Inter', sans-serif; color: var(--ink-2); margin-bottom: 5px; }
.acct-card2 .field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: 400 13.5px 'Inter', sans-serif;
}
.acct-card2 .field input:focus { outline: none; border-color: var(--accent); }
.acct-card2 .field input:disabled { background: #F5F7FA; color: var(--muted); }
.acct-formmsg { margin: 2px 0 12px; font-size: 12.5px; padding: 8px 11px; border-radius: 8px; }
.acct-formmsg--ok { background: #E7F6EE; color: #1E7A45; border: 1px solid #BEE6CE; }
.acct-formmsg--err { background: #FDECEC; color: #A2262B; border: 1px solid #F3C9CB; }

/* Buttons used by the account page */
.btn--ghost {
  background: #fff; color: var(--primary); border: 1px solid var(--border);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn--danger { background: #D9534F; color: #fff; border: 1px solid #D9534F; }
.btn--danger:hover { background: #C6403C; border-color: #C6403C; }
.btn--sm { padding: 8px 12px; font-size: 12.5px; }

.account-page.is-busy { opacity: .6; pointer-events: none; }

@media (max-width: 760px) {
  .acctpage__body { grid-template-columns: 1fr; }
  .acctpage__nav {
    flex-direction: row; align-items: center; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 12px 16px; gap: 12px;
  }
  .acctpage__user { border-bottom: none; padding: 0; margin: 0; }
  .acctpage__menu { flex-direction: row; }
  .acctpage__signout { margin: 0 0 0 auto; }
  .acctpage__main { padding: 20px 16px 48px; }
}

/* Quick-start wall picker — the buyer chooses which wall the kitchen runs along */
.qs-wall { margin: 4px 0 12px; }
.qs-wall label {
  display: block; margin-bottom: 5px;
  font: 600 12px 'Inter', sans-serif; color: var(--ink-2);
}
.qs-wall select {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--ink);
  font: 500 13px 'Inter', sans-serif; cursor: pointer;
}
.qs-wall select:focus { outline: none; border-color: var(--accent); }
.qs-wall__hint {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* ============================================================
   PDF / DRAWINGS PREVIEW — full-screen sheet preview + print
   ============================================================ */
.pdf-preview {
  position: fixed; inset: 0; z-index: 140;
  display: flex; flex-direction: column; background: #5b6472;
}
.pdf-preview[hidden] { display: none; }
.pdf-preview__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 22px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.pdf-preview__title { font: 700 15px 'Inter', sans-serif; color: var(--ink); }
.pdf-preview__actions { display: flex; gap: 10px; }
.pdf-preview__frame {
  flex: 1 1 auto; width: 100%; border: 0; background: #5b6472;
}
@media print {
  body > *:not(.pdf-preview) { display: none !important; }
  .pdf-preview { position: static; background: #fff; }
  .pdf-preview__bar { display: none !important; }
}

/* Add window / door straight from the 3D view (sits under the tour button) */
.threed-optools {
  position: absolute;
  top: 58px;
  left: 14px;
  z-index: 18;
  display: flex;
  gap: 8px;
}
.threed-op-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--primary);
  border: 1px solid rgba(31,59,92,.18);
  font: 600 12.5px 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 10px -3px rgba(15,30,70,.28);
}
.threed-op-btn:hover { background: #fff; border-color: var(--accent); color: var(--accent-dark); }
.threed-op-btn:active { transform: translateY(1px); }
.threed-op-btn svg { flex-shrink: 0; }
@media (max-width: 640px){ .threed-optools { top: 54px; } }

/* Floating Back-to-2D button (always visible, top-right of 3D) */
.threed-close-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, transform 0.05s ease;
}
.threed-close-x:hover { background: var(--primary-dark); }
.threed-close-x:active { transform: translateY(1px); }
.threed-close-x svg { width: 18px; height: 18px; }

/* Controls help button + panel */
.help-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.help-btn:hover { background: var(--surface); border-color: var(--accent); }
.help-btn svg { width: 18px; height: 18px; }

.help-panel {
  position: absolute;
  bottom: 60px;
  left: 16px;
  z-index: 20;
  width: min(560px, calc(100% - 32px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.help-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--primary);
  color: #fff;
}
.help-panel__head strong { font-size: 15px; font-weight: 600; }
.help-panel__close {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: #fff;
  transition: background 0.12s ease;
}
.help-panel__close:hover { background: rgba(255,255,255,0.15); }
.help-panel__close svg { width: 18px; height: 18px; }
.help-panel__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.help-col { padding: 16px 20px; }
.help-col + .help-col { border-left: 1px solid var(--border); }
.help-col h5 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.help-col ul { list-style: none; margin: 0; padding: 0; }
.help-col li {
  font-size: 13px;
  color: var(--ink-2);
  padding: 5px 0;
  line-height: 1.4;
}
.help-col kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-right: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}
@media (max-width: 600px) {
  .help-panel__cols { grid-template-columns: 1fr; }
  .help-col + .help-col { border-left: 0; border-top: 1px solid var(--border); }
  .help-btn span { display: none; }
}

/* Selection toolbar */
.sel-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  background: var(--primary);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.sel-bar__name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-right: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sel-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.12s ease;
}
.sel-bar__btn:hover { background: rgba(255,255,255,0.22); }
.sel-bar__btn svg { width: 15px; height: 15px; }
.sel-bar__btn--danger:hover { background: var(--danger); }

.canvas-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  text-align: center;
  color: var(--muted);
}
.canvas-empty__inner { max-width: 320px; padding: 24px; }
.canvas-empty__icon { width: 64px; height: 64px; margin: 0 auto 16px; color: var(--muted-2); }
.canvas-empty h3 { font-size: 17px; color: var(--ink-2); margin: 0 0 6px; }
.canvas-empty p { font-size: 13px; margin: 0; }

/* ====== Summary sidebar ====== */
.summary {
  background: #fff;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.summary__head { padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.summary__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.summary__total { font-size: 28px; font-weight: 700; color: var(--primary); letter-spacing: -0.5px; }
.summary__sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.summary__list { flex: 1; overflow-y: auto; padding: 12px 8px; }
.summary__empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--muted); }
.sum-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
.sum-item:hover { background: var(--surface); }
.sum-item__icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--primary);
}
.sum-item__icon svg { width: 22px; height: 22px; }
.sum-item__name { font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.2; }
.sum-item__meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sum-item__price { font-size: 13px; font-weight: 600; color: var(--ink); }
.summary__foot { padding: 14px 20px 18px; border-top: 1px solid var(--border); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.12s ease, transform 0.05s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-dark); }
.btn--ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface); }
.btn--block { width: 100%; }
.btn--lg { padding: 14px 24px; font-size: 15px; }

/* ====== Quick-start (tab 2 top) ====== */
.quickstart {
  padding: 16px 16px 12px;
  background: linear-gradient(135deg, var(--primary-soft), #fff);
  border-bottom: 1px solid var(--border);
}
.quickstart__title { font-size: 14px; font-weight: 600; margin: 0 0 2px; color: var(--primary); }
.quickstart__sub  { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); }
.quickstart__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.qs-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px 8px;
  transition: border-color 0.12s ease, transform 0.05s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.qs-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.qs-card:active { transform: translateY(1px); }
.qs-card__h { font-weight: 700; color: var(--primary); font-size: 13px; }
.qs-card__d { font-size: 10.5px; color: var(--muted); margin-top: 1px; line-height: 1.3; }
.qs-card__p { font-size: 11px; font-weight: 600; color: var(--accent-dark); margin-top: 5px; }

/* Door-style (finish) selector */
.finish-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}
.finish-bar label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.finish-select {
  flex: 1;
  padding: 8px 34px 8px 12px;          /* right padding leaves room for the chevron */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  /* custom navy chevron — removes the inconsistent native dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F3B5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.finish-select:hover { border-color: var(--accent); background-color: #fff; }
.finish-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Style the dropdown options where the browser allows it (Chrome/Edge/Firefox) */
.finish-select option { color: var(--primary); font-weight: 500; background: #fff; padding: 6px; }

/* ====== Catalog (tab 2) ====== */
.catalog { display: flex; flex-direction: column; height: 100%; background: #fff; }
.catalog__search { padding: 14px 16px 8px; }
.catalog__search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
}
.catalog__search input:focus { outline: none; border-color: var(--accent); background: #fff; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 12px; border-bottom: 1px solid var(--border); }
.cat-tab {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  transition: background 0.12s ease, color 0.12s ease;
}
.cat-tab.is-active { background: var(--primary); color: #fff; }
.cat-list { flex: 1; overflow-y: auto; padding: 8px; }
.cat-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  width: 100%;
  margin-bottom: 4px;
  transition: background 0.12s ease;
  border: 1px solid transparent;
}
.cat-item:hover { background: var(--surface); border-color: var(--border); }
.cat-item__thumb {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--primary);
}
.cat-item__thumb svg { width: 28px; height: 28px; }
.cat-item__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.sum-item__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.cat-item__name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.cat-item__meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-item__price { color: var(--primary); font-weight: 600; }

/* ====== Modal ====== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.55);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  transition: transform 0.15s ease;
}
.modal-backdrop.is-open .modal { transform: translateY(0); }
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 26px 8px;
}
.modal__title { font-size: 22px; font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.modal__sub { font-size: 13px; color: var(--muted); margin: 0; }
.modal__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  transition: background 0.12s ease;
}
.modal__close:hover { background: var(--surface); }
.modal__body { padding: 12px 0 24px; overflow-y: auto; flex: 1; }
.modal__foot {
  padding: 16px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface);
}

/* ====== Lead capture (tab 3) ====== */
.lead {
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, #fff 0%, var(--surface) 100%);
  padding: 32px 48px 48px;
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-content: start;
}
.lead__hero { max-width: 560px; }
.lead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lead h1 { font-size: 30px; color: var(--primary); margin: 0 0 12px; letter-spacing: -0.5px; line-height: 1.15; }
.lead h1 em { font-style: normal; color: var(--cta); }
.lead__desc { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0 0 24px; }
.lead__pricebox {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.lead__pricebox-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.lead__pricebox-value { font-size: 32px; font-weight: 700; color: var(--primary); letter-spacing: -0.8px; }
.lead__pricebox-foot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lead__list { list-style: none; margin: 0; padding: 0; }
.lead__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.lead__list svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 2px; }

.lead-form {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 26px 28px 28px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
}
.lead-form__title { font-size: 20px; font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.lead-form__sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}
.field label .req { color: var(--danger); margin-left: 2px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 14px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lead-form__legal {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5;
}
.lead-form__submit { margin-top: 6px; }

.thanks { display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.thanks__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: grid; place-items: center;
  color: var(--success);
  margin: 0 auto 18px;
}
.thanks__icon svg { width: 44px; height: 44px; }
.thanks h2 { font-size: 24px; color: var(--primary); margin: 0 0 8px; }
.thanks p { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 360px; }

/* ====== Selection chip ====== */
.selection-chip {
  position: absolute;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.selection-chip button {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  color: #fff;
  transition: background 0.1s ease;
}
.selection-chip button:hover { background: rgba(255,255,255,0.15); }
.selection-chip__name { font-weight: 600; }
.selection-chip__divider { width: 1px; height: 16px; background: rgba(255,255,255,0.25); }

/* ====== Custom dropdown ====== */
.dd { position: relative; display: inline-block; }
.dd__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 13px;
  min-width: 110px;
  text-align: left;
  color: var(--ink);
  transition: border-color 0.12s ease;
}
.dd__btn:hover { border-color: var(--border-strong); }
.dd__btn svg { width: 14px; height: 14px; color: var(--muted); transition: transform 0.12s ease; }
.dd.is-open .dd__btn svg { transform: rotate(180deg); }
.dd__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 100;
  display: none;
}
.dd.is-open .dd__list { display: block; }
.dd__opt {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
  color: var(--ink);
}
.dd__opt:hover { background: var(--surface); }
.dd__opt.is-selected { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* Openings list (windows/doors) */
.openings-list { padding: 12px 16px; border-top: 1px solid var(--border); }
.openings-list__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.opening-item {
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 4px;
}
.opening-item:hover { background: var(--surface); }
.opening-item.is-sel { background: var(--primary-soft); border-color: var(--accent); }
.opening-item__head {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
/* Size boxes — the way a window or door is resized while the 3D view is open. */
.opening-item__sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
  margin-top: 7px;
}
.op-size { display: flex; flex-direction: column; gap: 2px; }
.op-size span { font-size: 10px; color: var(--muted); letter-spacing: .02em; }
.op-size input {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 12px;
  text-align: center;
  color: var(--ink);
}
.op-size input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.opening-item__icon { width: 20px; height: 20px; color: var(--accent-dark); }
.opening-item__del {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--muted);
  border-radius: 4px;
}
.opening-item__del:hover { background: var(--surface-2); color: var(--danger); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Large desktop — slightly narrower rails */
@media (max-width: 1180px) {
  :root { --sidebar-w: 250px; --summary-w: 280px; }
}

/* Small desktop / large tablet — drop the summary rail, keep tools + canvas */
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }
  .summary { display: none; }
  .workspace { grid-template-columns: var(--sidebar-w) 1fr; }
  .lead { grid-column: 1 / -1; grid-template-columns: 1.05fr 0.95fr; padding: 28px 32px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE / narrow embeds (< 760px): vertical stack.
   Canvas on top (fixed share of height), active panel scrolls below.
   The top bar collapses to compact tabs + estimate + Continue.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --tab-height: 50px; }

  body { overflow: auto; }
  .app { height: 100dvh; }

  /* Top bar: hide brand, let tabs flex, keep actions compact */
  .topbar {
    grid-template-columns: auto 1fr auto;
    padding: 0 10px;
    gap: 8px;
  }
  .brand { display: none; }
  .tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 12px; font-size: 12px; gap: 6px; }
  .tab span:not(.tab__num) { display: inline; }
  .tab__num { width: 18px; height: 18px; font-size: 10px; }
  .topbar__actions { gap: 8px; }
  .summary-pill { padding: 4px 10px; }
  .summary-pill__label { display: none; }
  .summary-pill__value { font-size: 14px; }
  /* Mobile: shrink CTA but keep it visible (arrow only at <380px) */
  .btn--cta { padding: 8px 12px; font-size: 13px; }
  .continue-btn__label { display: inline; }
  @media (max-width: 380px) {
    .continue-btn__label { display: none; }
    .btn--cta { padding: 8px 10px; }
  }

  /* Workspace: single column, canvas on top */
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 46vh 1fr;
    min-height: 0;
  }
  .canvas-wrap { order: 1; min-height: 0; }
  .tools {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .summary { display: none; }

  /* Tab 1 sidebar tweaks */
  .tools__head { padding: 12px 16px 8px; }
  .tools__hint { font-size: 11.5px; }
  .tool-group { padding: 12px 14px 2px; }
  .shapes { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; padding: 12px 14px 16px; }
  .shape-card svg { max-height: 56px; }
  .shape-card__label { font-size: 11px; }
  .dim-fields { padding: 12px 16px; }

  /* Canvas controls a touch bigger for fingers */
  .canvas-control { width: 40px; height: 40px; }

  /* Lead form (Tab 3): full-width single column */
  .lead {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 16px 32px;
    overflow-y: auto;
  }
  .lead h1 { font-size: 24px; }
  .lead-form { position: static; padding: 22px 18px 24px; }
  .field--row { grid-template-columns: 1fr; gap: 0; }

  /* Catalog list a bit denser */
  .cat-list { padding: 6px; }
  .quickstart__grid { gap: 5px; }

  /* 3D overlay: compact bar, no wrapping hint */
  .view3d-toggle { top: 12px; right: 12px; padding: 8px 12px; font-size: 12px; }
  .view3d-toggle span { display: none; }   /* icon-only on mobile */
  .threed-bar { padding: 8px 12px; gap: 10px; flex-wrap: nowrap; }
  .threed-bar__hint { display: none; }
  .threed-bar__title { font-size: 13px; flex: 1; }
}

/* Very small phones */
@media (max-width: 380px) {
  .tab span:not(.tab__num) { display: none; }  /* numbers only */
  .tab { padding: 0 10px; }
  .shapes { grid-template-columns: 1fr 1fr; }
}

/* Inline wall-dimension editor (overlay on canvas) */
.dim-edit {
  font: 600 13px/1 'Inter', sans-serif;
  color: #1F3B5C;
  background: #fff;
  border: 2px solid #E8861C;
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0 4px 18px -2px rgba(15,30,70,.30);
  outline: none;
  text-align: center;
}
.dim-edit:focus { border-color: #E8861C; }

/* When 3D is auto-opened on Tab 2, scope the overlay to the canvas area
   only — catalog sidebar stays visible so user can keep adding items. */
body.is-split-3d #threed-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
}
body.is-split-3d #threed-overlay .threed-bar {
  /* hide redundant top bar inside split mode — tabs already at top of page */
  display: none;
}
body.is-split-3d #threed-overlay .threed-close-x {
  /* "Back to plan" button — small, top-right */
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  font-size: 12px;
}
/* While the 3D view is actually open, hide the redundant "View in 3D"
   toggle so it doesn't sit on top of "Back to plan". Keyed off the live
   open state (not the tab) so closing 3D on Tab 2 brings the button back
   — otherwise "Back to plan" left no way to re-enter 3D. */
body.threed-open .view3d-toggle { display: none; }

/* Admin shortcut at the bottom of the catalog sidebar — discoverable
   handoff to /admin/ for managing photos, prices, groups. */
.cat-admin-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 12px 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2, #4A5366);
  background: #F4F6FA;
  border: 1px dashed #C9D2DD;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cat-admin-link:hover {
  background: #E9F2F4;
  border-color: #4FA8B0;
  color: #1F3B5C;
}
.cat-admin-link svg { flex-shrink: 0; opacity: 0.75; }