/* ═══════════════════════════════════════════════════════════════
   Paint Calculator — Redesign v2.0
   Minimal Clean (Apple-like) • Fullscreen • Dark Mode
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Variables & Theme ───────────────────────────────── */
:root {
  --bg: #ffffff;
  --bg-surface: #f5f7fa;
  --bg-elevated: #ffffff;
  --bg-inset: #f0f2f5;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: rgba(0,0,0,0.06);
  --border-strong: rgba(0,0,0,0.10);
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-soft: rgba(245,158,11,0.12);
  --accent-text: #ffffff;
  --brand: #0b2c6b;
  --brand-hover: #12367a;
  --danger: #ef4444;
  --success: #22c55e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --transition: 200ms ease;
  --transition-fast: 120ms ease;

  /* Scene */
  --scene-bg: linear-gradient(180deg, #f0f4f8 0%, #f8fbff 50%, #fff 100%);

  /* 3D faces */
  --face-wall-a: #e6edf7;
  --face-wall-b: #dae6f7;
  --face-ceiling: #edfaff;
  --face-floor: #eef4ff;

  /* Glow eps */
  --int-glow-eps: 0.6px;

  /* Tour tokens */
  --t-backdrop: rgba(8, 12, 22, var(--t-backdrop-opacity, .6));
  --t-ring: #fff;
  --t-ring-glow: rgba(59,130,246,.50);
  --t-pop-bg: #ffffff;
  --t-pop-border: #e5e9f2;
  --t-pop-shadow: 0 24px 64px rgba(2,6,23,.18), 0 2px 8px rgba(2,6,23,.05);
  --t-title: #0f172a;
  --t-text: #334155;
  --t-muted: #64748b;
  --t-accent: #0ea5e9;
  --t-accent-hover: #0284c7;
  --t-danger-bg: #fff5f4;
  --t-danger-bd: #f2b4ae;
  --t-danger-tx: #9f1d12;
  --t-radius: 14px;
  --t-pad: 14px;

  /* Amber alias for backward compat */
  --amber: #f59e0b;
  --line: rgba(0,0,0,0.06);
  --muted: #9ca3af;
}

[data-theme="dark"] {
  --bg: #0f1419;
  --bg-surface: #1a1f2b;
  --bg-elevated: #242b38;
  --bg-inset: #161b25;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --accent-soft: rgba(245,158,11,0.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
  --scene-bg: linear-gradient(180deg, #1a1f2b 0%, #151922 50%, #0f1419 100%);
  --face-wall-a: #2a3244;
  --face-wall-b: #253040;
  --face-ceiling: #1e2a35;
  --face-floor: #1e2840;
  --amber: #f59e0b;
  --line: rgba(255,255,255,0.06);
  --muted: #64748b;
  --brand: #4a7cff;
  --brand-hover: #6090ff;

  /* Tour dark */
  --t-backdrop: rgba(0,0,0,var(--t-backdrop-opacity, .62));
  --t-pop-bg: #0b1220;
  --t-pop-border: #1e293b;
  --t-pop-shadow: 0 24px 64px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25);
  --t-title: #e2e8f0;
  --t-text: #cbd5e1;
  --t-muted: #94a3b8;
  --t-ring: #e2e8f0;
  --t-ring-glow: rgba(59,130,246,.35);
  --t-danger-bg: #2b1513;
  --t-danger-bd: #6b2220;
  --t-danger-tx: #fecaca;
}


/* ── 2. Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* ── 3. App Layout ──────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
  position: relative;
}
.app-header__left { display: flex; align-items: center; gap: 12px; }
.app-header__left h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  color: var(--text);
}
.app-header__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.app-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Paint settings panel (collapsible) */
.paint-panel {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 200px;
  transition: max-height var(--transition), padding var(--transition);
}
.paint-panel.collapsed {
  max-height: 0;
  border-bottom-color: transparent;
}
.paint-panel__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  flex-wrap: wrap;
}
.paint-param {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paint-param > label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Main content area */
.app-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left: visualization */
.viz-panel {
  position: relative;
  overflow: hidden;
  background: var(--scene-bg);
  display: flex;
  flex-direction: column;
}
.viz-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Viz-container sections: fill available space */
.viz-container > section {
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.viz-container .room-stage,
.viz-container .house-stage {
  flex: 1;
  min-height: 0;
  border-radius: 0;
}
/* Override floorplan inline styles inside viz */
.viz-container #planWrap {
  border: none !important;
  border-radius: 0 !important;
  background: var(--bg-surface) !important;
  min-height: 0 !important;
  flex: 1;
}
/* Hide all muted hint text inside viz-panel */
.viz-container .muted,
.viz-container ~ .muted,
.viz-panel #planMuted,
.viz-panel #roomMuted {
  display: none !important;
}
.viz-panel .chips {
  padding: 8px 12px;
  margin: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

/* Right: parameters */
.params-panel {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  border-left: 1px solid var(--border);
}


/* ── 4. Toolbar (floating over viz) ─────────────────────────── */
.viz-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  z-index: 10;
}

/* Legacy compat: scheme-header / scheme-toolbar */
.scheme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.scheme-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.scheme-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.scheme-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.scheme-hint {
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-secondary);
}


/* ── 5. Buttons ─────────────────────────────────────────────── */
.btn {
  cursor: pointer;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition);
}
.btn:hover {
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
}
.btn.ghost:hover {
  background: var(--bg-surface);
}
.btn.small {
  padding: 6px 10px;
  font-size: 12px;
}

/* Icon button */
.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: all var(--transition);
}
.icon-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Navigation buttons */
.nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: all var(--transition);
}
.nav-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}


/* ── 6. Segments (.seg) ─────────────────────────────────────── */
.seg {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
}
.seg button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.seg button:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.seg button.active {
  background: var(--accent);
  color: var(--accent-text);
}
.seg.seg-small { font-size: 12px; }
.seg.seg-small button { padding: 4px 10px; font-size: 12px; font-weight: 500; }


/* ── 7. Segment Tools (.seg-tools) ──────────────────────────── */
.seg.seg-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  position: relative;
  overflow: visible;
}
.seg.seg-tools .tool-btn {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: visible;
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.seg.seg-tools .tool-btn:hover {
  background: var(--bg-surface);
  color: var(--text);
}
.seg.seg-tools .tool-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}
.seg.seg-tools .tool-btn.active {
  background: var(--accent);
  color: var(--accent-text);
}
.seg.seg-tools .tool-btn.active:hover {
  background: var(--accent-hover);
}
.seg.seg-tools .tool-label { white-space: nowrap; }
.seg.seg-tools .tool-k {
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 2px;
}
.seg.seg-tools .tool-btn.active .tool-k {
  color: #fff;
  background: rgba(255,255,255,.2);
}

/* Tool icons */
.seg.seg-tools .tool-btn .tool-ico {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex: 0 0 auto;
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.seg.seg-tools .tool-ico.tool-ico-roller {
  background-color: #e8f0fe;
  border: 1px solid #c3d4f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='18' height='8' rx='2'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E");
}
.seg.seg-tools .tool-ico.tool-ico-brush {
  background-color: #fef9e8;
  border: 1px solid #f5d060;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.37 2.63L14 7l-1.59-1.59a2 2 0 00-2.82 0L8 7l9 9 1.59-1.59a2 2 0 000-2.82L17 10l4.37-4.37a2.12 2.12 0 10-3-3z'/%3E%3Cpath d='M9 8L3 14a2 2 0 000 2.83l.59.59a2 2 0 002.83 0L12 12'/%3E%3C/svg%3E");
}
.seg.seg-tools .tool-ico.tool-ico-spray {
  background-color: #ecfeff;
  border: 1px solid #7dd3fc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v-2.38C4 11.5 5.5 10 7.62 10h.98c.93 0 1.8.53 2.2 1.38l.11.22c.4.85 1.27 1.4 2.2 1.4h1.62'/%3E%3Cpath d='M8 16v3a2 2 0 002 2h4a2 2 0 002-2v-3'/%3E%3Cpath d='M18 6l4-2v12l-4-2'/%3E%3Crect x='14' y='4' width='4' height='12' rx='1'/%3E%3C/svg%3E");
}
.seg.seg-tools .tool-btn.active .tool-ico {
  filter: brightness(1.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}

/* Tooltips on tool buttons */
.seg.seg-tools .tool-btn[data-tooltip]::after,
.seg.seg-tools .tool-btn[data-tooltip]::before {
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.seg.seg-tools .tool-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);
  min-width: 280px;
  max-width: min(400px, calc(100vw - 40px));
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  white-space: normal;
  text-align: left;
  z-index: 10000;
  opacity: 1;
}
.seg.seg-tools .tool-btn[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 2px) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  z-index: 9999;
  opacity: 1;
}

/* Zoom segment */
.seg.seg-zoom button {
  min-width: 28px;
  padding: 4px 8px;
  font-size: 14px;
}


/* ── 8. Chips ───────────────────────────────────────────────── */
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  user-select: none;
  padding: 10px 14px;
}
.chip {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition-fast);
}
.chip:hover {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--text);
}
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}


/* ── 9. Forms ───────────────────────────────────────────────── */
input[type="number"], select {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  transition: border-color var(--transition);
}
input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"]::placeholder { color: var(--text-muted); }

/* Checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-elevated);
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 7px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* Mini inline input */
input.mini-inline {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
}
input.mini-inline:focus {
  border-color: var(--accent);
  outline: none;
}

/* Dim-ignored inputs */
input.dim-ignored,
input[type="number"].dim-ignored,
.table-surfaces input.dim-ignored,
#paramForm input.dim-ignored,
#facadeTable input.dim-ignored {
  opacity: 0.45 !important;
  background: var(--bg-inset) !important;
  border-style: dashed !important;
  cursor: pointer !important;
}
input.dim-ignored:hover,
input[type="number"].dim-ignored:hover,
.table-surfaces input.dim-ignored:hover,
#paramForm input.dim-ignored:hover,
#facadeTable input.dim-ignored:hover {
  opacity: 0.6 !important;
  background: var(--accent-soft) !important;
}
input.dim-ignored:focus { opacity: 0.7 !important; }

/* Reset area button */
.reset-area-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.reset-area-btn:hover { color: var(--text); background: var(--accent-soft); }
.reset-area-btn:active { background: var(--bg-inset); }

label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.field { display: flex; flex-direction: column; }
.lab { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.2; margin-bottom: 4px; }


/* ── 10. Sections ───────────────────────────────────────────── */
.sec {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: background var(--transition);
}
.sec.alt {
  background: var(--bg-surface);
}
.sec h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.sec.compact { padding: 10px 20px; }
.sec.compact .row { margin-bottom: 4px; gap: 4px; }
.sec.compact .chips .chip { padding: 6px 10px; font-size: 12px; }
.sec.compact .btn.small { padding: 6px 10px; font-size: 12px; }
.sec.compact .grid-3 { gap: 6px; }
.sec.compact .grid-3 label { font-size: 12px; }
.sec.compact .grid-3 input { padding: 6px 8px; font-size: 12px; }
.sec.compact .grid-3 .muted { font-size: 11px; }

/* Legacy card styles (for calc wrappers) */
.card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
.card header { padding: 10px; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.card section { padding: 10px; }
.card.mini { border: 1px dashed var(--border); border-radius: var(--radius-xs); background: var(--bg-elevated); }

/* For inside/outside wrap - no card borders in new layout */
.calc header { display: none; }
.calc.mode-attached { border: none; border-radius: 0; margin-top: 0; background: transparent; }
.modebar { display: none; } /* Moved to app-header */


/* ── 11. Grid Utilities ─────────────────────────────────────── */
.muted { color: var(--text-muted); }
.row { display: flex; gap: 8px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: end; }
.grid-2.compact label { margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* Geometry grid (outside) */
#sec-out-geom .geom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}
#sec-out-geom .geom-grid .field { display: flex; flex-direction: column; }
#sec-out-geom .geom-grid .lab { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.2; margin-bottom: 4px; }
#sec-out-geom .geom-grid input[type="number"] { width: 100%; padding: 8px 10px; }


/* ── 12. Swatches ───────────────────────────────────────────── */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sq {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-fast);
}
.sq:hover { transform: scale(1.1); }
.sq.active { outline: 2px solid var(--accent); outline-offset: 1px; }


/* ── 13. Tables ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--border); padding: 8px; text-align: left; }
th { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

/* Openings table */
#openingsTable { table-layout: fixed; }
#openingsTable col.type { width: 140px; }
#openingsTable col.w { width: 80px; }
#openingsTable col.h { width: 80px; }
#openingsTable col.q { width: 70px; }
#openingsTable col.area { width: 90px; }
#openingsTable col.del { width: 44px; }
#openingsTable select { width: 100%; }
#openingsTable input[type="number"] { width: 100%; padding: 6px 8px; }

#openingsExtTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 8px;
}
#openingsExtTable col.side { width: 80px; }
#openingsExtTable col.type { width: 80px; }
#openingsExtTable col.w, #openingsExtTable col.h { width: 70px; }
#openingsExtTable col.cnt { width: 60px; }
#openingsExtTable col.total { width: 90px; }
#openingsExtTable th, #openingsExtTable td { border-bottom: 1px solid var(--border); padding: 6px; text-align: left; }

/* Surface table (simple view) */
.table-surfaces { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table-surfaces col.name { width: 140px; }
.table-surfaces col.chk { width: 64px; }
.table-surfaces col.len, .table-surfaces col.wid, .table-surfaces col.h, .table-surfaces col.area { width: 96px; }
.table-surfaces th, .table-surfaces td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.table-surfaces tr.active { background: var(--accent-soft); }
.table-surfaces tr.active td { border-bottom-color: var(--accent); }
.table-surfaces input[type="number"].mini { width: 100%; padding: 6px 6px; }
.table-surfaces .dash { color: var(--text-muted); }


/* ── 14. KPI ────────────────────────────────────────────────── */
.kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.kpi > .itm {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kpi .title { color: var(--text-muted); font-size: 11px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.kpi .val {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}
.kpi .unit { font-weight: 600; opacity: .7; font-size: 12px; }
.kpi .sub { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }

/* Inside KPI: always 3 columns */
#insideWrap #sec-kpi .kpi {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
}
#insideWrap #sec-kpi .kpi > .itm { min-width: 0; }

/* Outside KPI: flex in one row */
#outsideWrap #sec-kpi { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#outsideWrap #sec-kpi .kpi {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-width: calc(200px * 3 + 16px);
}
#outsideWrap #sec-kpi .kpi > .itm {
  flex: 1 1 calc((100% - 16px) / 3);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Sticky KPI */
.kpi.sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* KPI breakdown */
.kpi .breakdown {
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  max-height: none;
  overflow: visible;
}
.kpi .breakdown ul { margin: 0; padding: 0; list-style: none; }
.kpi .breakdown li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.kpi .breakdown .room-name { font-weight: 600; color: var(--text); }
.kpi .breakdown .room-total { color: var(--text); }
.kpi .breakdown .hint .tip { min-width: 300px; }
#sumAreaDetails { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }

/* Outside KPI one-row */
#sec-out-kpi .kpi,
#outsideWrap .kpi[data-role="outside-kpi"] {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-start;
}
#sec-out-kpi .kpi .itm,
#outsideWrap .kpi[data-role="outside-kpi"] .itm {
  flex: 1 1 0;
  min-width: 0;
}

/* Overflow for sticky to work */
#outsideWrap, #outsideWrap .sec { overflow: visible; }
#insideWrap, #insideWrap .sec, #insideWrap #sec-kpi .kpi, #insideWrap #sec-kpi .kpi .itm, #insideWrap #sec-kpi .kpi .breakdown { overflow: visible !important; }
#sec-params { overflow-x: auto !important; }
#sec-params #paramForm { overflow: visible; }
#sec-params .table-surfaces { min-width: 620px; }


/* ── 15. Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: top .35s ease, opacity .35s ease;
  box-shadow: var(--shadow-lg);
  font-weight: 500;
}
.toast.show { top: 14px; opacity: 1; }
.toast .check { width: 16px; height: 16px; position: relative; }
.toast .check:after {
  content: '';
  position: absolute;
  left: 2px;
  top: -1px;
  width: 9px;
  height: 14px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}


/* ── 16. 3D Room (Inside) ───────────────────────────────────── */
.room-stage {
  flex: 1;
  width: 100%;
  min-height: 300px;
  background: var(--scene-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 0;
  border: none;
}
.room-viewport {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: grab;
  position: relative;
  touch-action: none;
}
.room-viewport:active { cursor: grabbing; }
.room3d {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  will-change: transform;
}
#roomBox { position: absolute; transform-style: preserve-3d; }

.room3d .face {
  position: absolute;
  background: #eef2fb;
  border: 1px solid #d6deea;
  transform-origin: 0 0 0;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: .15s;
  -webkit-tap-highlight-color: transparent;
}
.room3d .face:hover { filter: brightness(1.03); }
.room3d .face.wall.a { background: var(--face-wall-a); }
.room3d .face.wall.b { background: var(--face-wall-b); }
.room3d .face.wall.c { background: var(--face-wall-a); }
.room3d .face.wall.d { background: var(--face-wall-b); }
.room3d .face.wall { opacity: 1; }
.room3d .face.wall.seeThrough { opacity: .45; }
.room3d .face.ceiling, .room3d .face.polygon-ceiling { background: var(--face-ceiling); opacity: .55; }
.room3d .face.floor, .room3d .face.polygon-floor { background: var(--face-floor); opacity: 1 !important; }

/* Active non-active room openings */
.room-node:not(.room-node--active) .openings-layer { pointer-events: none !important; }

/* 3D face glow */
.room3d .face.active3d:not(.polygon-floor):not(.polygon-ceiling):not(.polygon-wall)::before,
.room3d .face.glow3d:not(.polygon-floor):not(.polygon-ceiling):not(.polygon-wall)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform-style: preserve-3d;
  will-change: transform;
}
.room3d .face.active3d:not(.polygon-floor):not(.polygon-ceiling):not(.polygon-wall)::before {
  box-shadow: inset 0 0 0 3px rgba(244,163,0,.95), 0 0 24px rgba(244,163,0,.35);
  filter: brightness(1.02);
}
.room3d .face.glow3d:not(.active3d):not(.polygon-floor):not(.polygon-ceiling):not(.polygon-wall)::before {
  box-shadow: inset 0 0 0 2px rgba(244,163,0,.85), 0 0 22px rgba(244,163,0,.35);
}

/* Wall glow Z-shift */
.room3d .face.wall.a.active3d::before, .room3d .face.wall.a.glow3d::before,
.room3d .face.wall.b.active3d::before, .room3d .face.wall.b.glow3d::before,
.room3d .face.wall.c.active3d::before, .room3d .face.wall.c.glow3d::before,
.room3d .face.wall.d.active3d::before, .room3d .face.wall.d.glow3d::before {
  transform: translateZ(calc(-1 * var(--int-glow-eps)));
}
.room3d .face.ceiling.active3d:not(.polygon-ceiling)::before,
.room3d .face.ceiling.glow3d:not(.polygon-ceiling)::before { transform: translateY(-0.6px); }
.room3d .face.floor.active3d:not(.polygon-floor)::before,
.room3d .face.floor.glow3d:not(.polygon-floor)::before { transform: translateY(0.6px); }

/* Polygon floor/ceiling */
.room3d .face.polygon-floor, .room3d .face.polygon-ceiling {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}
.room3d .face.polygon-floor.active3d, .room3d .face.polygon-floor.glow3d,
.room3d .face.polygon-ceiling.active3d, .room3d .face.polygon-ceiling.glow3d {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}
.room3d .face.polygon-floor .polygon-svg, .room3d .face.polygon-ceiling .polygon-svg { pointer-events: none; }
.room3d .face.polygon-floor .polygon-shape { fill: #eef4ff; stroke: transparent; stroke-width: 0; vector-effect: non-scaling-stroke; }
.room3d .face.polygon-ceiling .polygon-shape { fill: #edfaff; fill-opacity: 0.55; stroke: transparent; stroke-width: 0; vector-effect: non-scaling-stroke; }

/* Polygon glow */
.room3d .face.polygon-floor.active3d .polygon-shape, .room3d .face.polygon-ceiling.active3d .polygon-shape {
  stroke: rgba(244,163,0,.95); stroke-width: 3px; filter: drop-shadow(0 0 8px rgba(244,163,0,.5));
}
.room3d .face.polygon-floor.glow3d:not(.active3d) .polygon-shape,
.room3d .face.polygon-ceiling.glow3d:not(.active3d) .polygon-shape {
  stroke: rgba(244,163,0,.85); stroke-width: 2px; filter: drop-shadow(0 0 6px rgba(244,163,0,.4));
}

/* No ::before for polygon */
.room3d .face.polygon-floor.active3d::before, .room3d .face.polygon-floor.glow3d::before,
.room3d .face.polygon-ceiling.active3d::before, .room3d .face.polygon-ceiling.glow3d::before,
.room3d .face.floor.polygon-floor.active3d::before, .room3d .face.floor.polygon-floor.glow3d::before,
.room3d .face.ceiling.polygon-ceiling.active3d::before, .room3d .face.ceiling.polygon-ceiling.glow3d::before {
  display: none !important; content: none !important;
}

/* Polygon walls */
.room3d .face.wall.polygon-wall { background: var(--face-wall-a); }
.room3d .face.wall.polygon-wall.edge1, .room3d .face.wall.polygon-wall.edge3,
.room3d .face.wall.polygon-wall.edge5, .room3d .face.wall.polygon-wall.edge7 { background: var(--face-wall-b); }
.room3d .face.wall.polygon-wall.active3d { outline: 3px solid rgba(244,163,0,.95); outline-offset: -3px; }
.room3d .face.wall.polygon-wall.glow3d:not(.active3d) { outline: 2px solid rgba(244,163,0,.85); outline-offset: -2px; }
.room3d .face.wall.polygon-wall.active3d::before, .room3d .face.wall.polygon-wall.glow3d::before { display: none !important; content: none !important; }

/* Paint layers */
.room-node .paint-layer { position: absolute; pointer-events: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.room-node .paint-layer.polygon-paint { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.room-node .paint-layer .polygon-paint-shape { fill: transparent; stroke: none; }


/* ── 17. 3D Wall Nodes ──────────────────────────────────────── */
.wall-node-3d { position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.wall-node-3d .wall-face { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wall-node-3d .wall-face.side-a, .wall-node-3d .wall-face.side-b { background: #e8e8e8; border: none; cursor: grab; }
.wall-node-3d .wall-face.side-a:active, .wall-node-3d .wall-face.side-b:active { cursor: grabbing; }
.wall-node-3d .wall-face.top-cap, .wall-node-3d .wall-face.left-cap, .wall-node-3d .wall-face.right-cap { background: #d8d8d8; }
.wall-node-3d .wall-paint-layer { position: absolute; pointer-events: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.wall-node-3d.wall-active .wall-face.side-a, .wall-node-3d.wall-active .wall-face.side-b { box-shadow: inset 0 0 0 2px rgba(244,163,0,.85), 0 0 16px rgba(244,163,0,.35); }
.wall-node-3d .wall-face.glow3d { box-shadow: inset 0 0 0 3px rgba(244,163,0,.95), 0 0 20px rgba(244,163,0,.5) !important; }
.wall-node-3d:hover .wall-face.side-a, .wall-node-3d:hover .wall-face.side-b { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
body.wall-interaction-active .room-node, body.wall-interaction-active .room-node * { pointer-events: none !important; }
body.wall-interaction-active #floorplanSvg, body.wall-interaction-active #floorplanSvg * { pointer-events: none !important; }


/* ── 18. 3D Openings (Inside) ───────────────────────────────── */
.room3d .openings-layer { position: absolute; inset: 0; pointer-events: auto; }
.room3d .openings-layer .opening { position: absolute; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); z-index: 1; }
.room3d .openings-layer .opening.window { background: #dbeafe; border: 1px solid #93c5fd; z-index: 2; }
.room3d .openings-layer .opening.door { background: #f1d5b8; border: 1px solid #d4a373; z-index: 1; }
.room3d .openings-layer .opening.window::after {
  content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; transform: translateX(-1px); background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; opacity: .95;
}
.room3d .openings-layer .opening.door::after {
  content: ""; position: absolute; right: 6px; top: 58%; width: 4px; height: 4px; border-radius: 50%; background: #6f542d; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); pointer-events: none;
}
.room3d .openings-layer .opening.selected { outline: 2px dashed var(--accent); outline-offset: 1px; box-shadow: 0 0 0 2px rgba(244,163,0,.85), inset 0 0 0 2px rgba(255,255,255,.4); z-index: 10; }
.openings-layer { pointer-events: none; }
.openings-layer .opening { pointer-events: auto; }


/* ── 19. 3D House (Outside) ─────────────────────────────────── */
.house-stage {
  flex: 1;
  width: 100%;
  min-height: 300px;
  background: var(--scene-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border: none;
  border-radius: 0;
}
.house-viewport {
  width: 100%;
  height: 100%;
  perspective: 800px;
  cursor: grab;
  position: relative;
  touch-action: none;
  overflow: hidden;
}
.house-viewport:active { cursor: grabbing; }
.house-viewport.cursor-grab { cursor: grab; }
.house-viewport.cursor-grabbing { cursor: grabbing; }
.house-viewport.cursor-move { cursor: move; }
.house3d { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform-origin: 50% 50% 0; will-change: transform; }
.storey, .roof, .porch, .terrace { position: absolute; transform-style: preserve-3d; }
.storey .face, .roof .face, .roof .plane, .roof .gables, .roof .hip-plane,
.porch .face, .terrace .face { position: absolute; background: #eaeff6; border: 1px solid #d6deea; transform-origin: 0 0 0; }
.storey .face.front, .porch .face.front, .terrace .face.front { background: var(--face-wall-a); }
.storey .face.left, .porch .face.left, .terrace .face.left { background: var(--face-wall-b); }
.storey .face.right, .porch .face.right, .terrace .face.right { background: var(--face-wall-b); }
.storey .face.back { background: var(--face-wall-a); }
.storey .face.top { background: #f5f8fd; }
.roof .plane, .roof .gables, .roof .hip-plane { background: #dbe7fb; border: 1px solid #c7d6ef; }
.roof.gable .plane, .roof.shed .plane, .roof.hip .hip-plane { background: #d7e3f9; }
.roof .hip-plane { will-change: transform, clip-path; }
.storey .face, .roof .face, .roof .plane, .roof .gables, .roof .hip-plane, .porch .face, .terrace .face { transform-origin: 0 0 0; }

/* Outside face openings */
.storey .face .openings-layer { position: absolute; inset: 0; pointer-events: none; }
.storey .face .openings-layer .opening { position: absolute; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); z-index: 1; pointer-events: auto; cursor: grab; user-select: none; touch-action: none; outline: none; }
.storey .face .openings-layer .opening.dragging { cursor: grabbing; }
.storey .face .openings-layer .opening.window, .opening-window { background: #dbeafe; border: 1px solid #93c5fd; z-index: 2; }
.storey .face .openings-layer .opening.door, .opening-door { background: #f1d5b8; border: 1px solid #d4a373; z-index: 1; }
.storey .face .opening .detail { position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: #ffffff; opacity: .9; }
.storey .face .opening .vbar { position: absolute; top: 0; bottom: 0; width: 2px; left: 50%; transform: translateX(-1px); background: #ffffff; opacity: .95; }
.storey .face .opening .knob { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #8b7355; right: 4px; top: 50%; transform: translateY(-50%); }
.storey .face .openings-layer .opening.window .vbar { position: absolute; left: 50%; top: 8%; bottom: 8%; width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.storey .face .openings-layer .opening.door .knob { position: absolute; right: 6px; top: 58%; width: 3px; height: 3px; border-radius: 50%; background: #6f542d; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.storey .face .openings-layer .opening.selected { outline: 2px dashed var(--accent); outline-offset: 1px; box-shadow: 0 0 0 2px rgba(244,163,0,.85), inset 0 0 0 2px rgba(255,255,255,.4); z-index: 10; }
.storey .face .openings-layer .opening:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.openings-layer .opening.door { z-index: 1; }
.openings-layer .opening.window { z-index: 2; }

/* Zoom UI */
.zoom-ui { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.zoom-ui .zoom-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.zoom-ui .zoom-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.zoom-ui .zoom-btn.nudge { display: none; }
.zoom-ui.nudge-on .zoom-btn.nudge { display: inline-flex; }

/* Soffits */
#soffits3d { position: absolute; transform-style: preserve-3d; pointer-events: auto; }
#soffits3d .soffit { position: absolute; background: #eef3ff; border: 1px dashed #c7d2fe; transform-origin: 0 0 0; pointer-events: auto; cursor: pointer; }
#soffits3d .soffit.glow3d, .plinth-band.glow3d {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 0 2px rgba(244,163,0,.95), 0 0 18px rgba(244,163,0,.5) inset, 0 0 20px rgba(244,163,0,.35);
}

/* Gable openings */
.g-openings-layer { pointer-events: auto; z-index: 9999; }
.g-opening.window { cursor: move; transition: box-shadow .15s ease, outline-color .15s ease, transform .15s ease; }
.g-opening.window.selected { outline: 3px solid rgba(0,170,255,0.95); outline-offset: 0; box-shadow: 0 0 0 2px rgba(0,170,255,0.35) inset, 0 0 0 2px rgba(0,170,255,0.35); }
.house3d .openings-layer .opening.selected, .house3d .g-openings-layer .opening.selected,
#house3d .openings-layer .opening.selected, #house3d .g-openings-layer .opening.selected {
  outline: 1px dashed #ff9800; outline-offset: 1px; box-shadow: 0 0 0 2px rgba(255,152,0,0.18) inset;
}
.house3d .openings-layer .opening, .house3d .g-openings-layer .opening,
#house3d .openings-layer .opening, #house3d .g-openings-layer .opening { cursor: grab; }
.house3d .openings-layer .opening.dragging, .house3d .g-openings-layer .opening.dragging { cursor: grabbing; }

/* Openings toolbar */
#outOpeningsToolbar .seg button { min-width: 36px; }
#outOpeningsToolbar input[type="number"], #outOpeningsToolbar select { padding: 6px 8px; }

/* Glow for outside elements */
.glow3d {
  box-shadow: 0 0 0 2px rgba(244,163,0,.95), 0 0 18px rgba(244,163,0,.5) inset, 0 0 20px rgba(244,163,0,.35);
  transition: box-shadow .9s ease-out;
}


/* ── 20. SVG 2D Floorplan ───────────────────────────────────── */
svg { max-width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.room-stage #planWrap { height: 100%; width: 100%; min-height: 0; }
#floorplanSvg { width: 100%; height: 100%; }
.room-stage, #floorplanStage { position: relative; overflow: hidden; }

/* Scene hint */
.scene-hint { position: absolute; top: 8px; left: 8px; z-index: 10; }
.scene-hint.hint { position: absolute; top: 8px; left: 8px; z-index: 10; display: inline-flex; align-items: center; }
.scene-hint.hint .tip { top: 0; left: 24px; transform: none; }

/* SVG faces */
.face { cursor: pointer; stroke: #cfd9ee; stroke-width: 1; transition: .15s; -webkit-tap-highlight-color: transparent; }
.face:hover { filter: brightness(1.03); }
.face.active { stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 2px 8px rgba(244,163,0,.35)); }
.face:focus, .face:focus-visible { outline: none; }
.floor { fill: #eef4ff; }
.ceiling { fill: #edfaff; }
.wall { fill: #f7f9fe; }
.label { font-size: 12px; fill: var(--text); stroke: var(--bg); stroke-width: 3px; paint-order: stroke fill; pointer-events: none; }
.leader { stroke: #c9d7ef; stroke-width: 1.5; stroke-dasharray: 3 3; pointer-events: none; }
.opening { stroke-width: 1; }
.opening-window { fill: #dbeafe; stroke: #93c5fd; }
.opening-door { fill: #f1d5b8; stroke: #d4a373; }
.detail { stroke: #ffffff; stroke-width: 1; opacity: .9; }

/* 2D edges */
#floorplanSvg .fp2d-edge { stroke: #cbd5e1; stroke-width: 2; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
#floorplanSvg .room-edges { pointer-events: none; }
#floorplanSvg .fp2d-edge.active { stroke: var(--accent); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(244,163,0,.45)); }
#floorplanSvg .fp2d-sel { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 6px rgba(244,163,0,.35)); }
#floorplanSvg .fp2d-sel.ceiling { stroke-dasharray: 3 3; }
#floorplanSvg .fp2d-sel.floor { stroke-dasharray: none; }

/* 2D walls */
#floorplanSvg .fp2d-wall line { transition: stroke 0.15s ease; }
#floorplanSvg .fp2d-wall.active line:first-child { filter: drop-shadow(0 0 6px rgba(244,163,0,.45)); }
#floorplanSvg .fp2d-wall.locked { opacity: 0.7; }
#floorplanSvg .room.locked { opacity: 0.8; }
#floorplanSvg .room.locked rect, #floorplanSvg .room.locked polygon { fill: #f1f5f9 !important; stroke: #94a3b8 !important; }
#floorplanSvg .fp2d-wall circle[data-wall-handle] { transition: transform 0.15s ease, fill 0.15s ease; transform-box: fill-box; transform-origin: center; }
#floorplanSvg .fp2d-wall circle[data-wall-handle]:hover { fill: #fff7e6; transform: scale(1.15); }

/* Drawing modes */
#floorplanSvg.drawing-mode-wall { cursor: crosshair; }
#floorplanSvg.drawing-mode-wall .room, #floorplanSvg.drawing-mode-wall .fp2d-wall { pointer-events: none; }
#floorplanSvg.drawing-mode-pen { cursor: crosshair; }
#floorplanSvg.drawing-mode-pen .room, #floorplanSvg.drawing-mode-pen .fp2d-wall { pointer-events: none; }
#floorplanSvg.drawing-mode-polygon { cursor: crosshair; }
#floorplanSvg.drawing-mode-polygon .room, #floorplanSvg.drawing-mode-polygon .fp2d-wall { pointer-events: none; }

/* Snap indicators */
#floorplanSvg .snap-indicator { pointer-events: none; animation: snap-pulse 0.6s ease-in-out infinite; }


/* ── 21. Drawing hints & help ───────────────────────────────── */
.drawing-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9); color: #fff; padding: 8px 14px;
  border-radius: var(--radius-sm); font-size: 12px; pointer-events: none;
  z-index: 100; white-space: nowrap; box-shadow: var(--shadow-md);
}
.drawing-hint b { color: #93c5fd; font-weight: 600; }

.drawing-mode-hint {
  position: absolute; top: 8px; left: 8px; background: rgba(59, 130, 246, 0.9);
  color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 500;
  z-index: 100; pointer-events: none; display: flex; align-items: center; gap: 6px;
}
.drawing-mode-hint::before { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulse-dot 1.5s infinite; }

/* Help panel */
.drawing-help-panel {
  display: none; position: fixed; top: 100px; right: 20px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
  width: 380px; max-height: calc(100vh - 140px); z-index: 10000; font-size: 13px;
}
.drawing-help-panel.visible { display: block; }
.help-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text); background: var(--bg-surface); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.help-panel-close { border: none; background: transparent; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 0; line-height: 1; }
.help-panel-close:hover { color: var(--text-secondary); }
.help-panel-content { padding: 14px; max-height: calc(100vh - 200px); overflow-y: auto; }
.help-section { margin-bottom: 12px; }
.help-section:last-child { margin-bottom: 0; }
.help-title { font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.help-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text); }
.help-row kbd { display: inline-block; min-width: 24px; padding: 2px 6px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 4px; font-family: inherit; font-size: 11px; font-weight: 500; text-align: center; color: var(--text-secondary); }
.help-row b { font-weight: 600; color: var(--text); }
.help-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bg-surface); }
.help-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.help-item-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; }
.help-item-header b { color: var(--text); }
.help-item-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; padding-left: 24px; }
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 12px; color: var(--text-muted); }

/* Drawing toolbar icons */
#drawingToolbar { margin-right: 8px; position: relative; flex-wrap: nowrap; }
#drawingToolbar .tool-separator { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; align-self: center; }
#drawingToolbar .tool-btn { min-width: 30px; padding: 5px 7px; }
#drawingToolbar .tool-ico { width: 18px; height: 18px; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.7; }
#drawingToolbar .tool-btn:hover .tool-ico, #drawingToolbar .tool-btn.active .tool-ico { opacity: 1; }
#drawingToolbar .tool-btn.active { background: var(--accent); color: #fff; }
#drawingToolbar .tool-btn.active .tool-ico { filter: brightness(0) invert(1); }

/* Tool icons */
.tool-ico-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M3 1l10 6-4 1 2 5-2 1-2-5-4 3V1z'/%3E%3C/svg%3E"); }
.tool-ico-wall { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Crect x='2' y='2' width='12' height='3' rx='0.5'/%3E%3Crect x='2' y='6.5' width='12' height='3' rx='0.5'/%3E%3Crect x='2' y='11' width='12' height='3' rx='0.5'/%3E%3C/svg%3E"); }
.tool-ico-pen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M12.146.854a.5.5 0 01.708 0l2.292 2.292a.5.5 0 010 .708L5.854 13.146a.5.5 0 01-.354.147H3.207a.5.5 0 01-.353-.854l9.292-11.585zM11 2.707L4.707 9H3v1.707L11 2.707zM13.5 1.5L12.207 2.793 13.207 3.793 14.5 2.5l-1-1z'/%3E%3Cpath d='M1 14h14v1H1v-1z'/%3E%3C/svg%3E"); }
.tool-ico-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M0 1h16v1H0V1zm0 5h16v1H0V6zm0 5h16v1H0v-1zm0 4h16v1H0v-1zM1 0v16h1V0H1zm5 0v16h1V0H6zm5 0v16h1V0h-1zm4 0v16h1V0h-1z' opacity='.5'/%3E%3C/svg%3E"); }
.tool-ico-snap { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Cpath d='M8 0v4M8 12v4M0 8h4M12 8h4' stroke='%23475569' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); }
.tool-ico-straight { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M1 8h14' stroke='%23475569' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 13L8 3l7 10' stroke='%23475569' stroke-width='1.5' fill='none' stroke-dasharray='2 2'/%3E%3C/svg%3E"); }
.tool-ico-unlock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M11 1a3 3 0 00-3 3v2H3a1 1 0 00-1 1v7a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1H9V4a2 2 0 114 0v1h1V4a3 3 0 00-3-3zM7 10a1 1 0 112 0v2a1 1 0 11-2 0v-2z'/%3E%3C/svg%3E"); }
.tool-ico-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M11 1a3 3 0 00-3 3v2H4a1 1 0 00-1 1v7a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V4a3 3 0 00-3-3zm0 1a2 2 0 012 2v2H6V4a2 2 0 012-2zM7 10a1 1 0 112 0v2a1 1 0 11-2 0v-2z'/%3E%3C/svg%3E"); }
.tool-ico-polygon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M3 2L13 2L14 7L10 14L4 14L2 8Z' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linejoin='round'/%3E%3Ccircle cx='3' cy='2' r='1.5'/%3E%3Ccircle cx='13' cy='2' r='1.5'/%3E%3Ccircle cx='14' cy='7' r='1.5'/%3E%3Ccircle cx='10' cy='14' r='1.5'/%3E%3Ccircle cx='4' cy='14' r='1.5'/%3E%3Ccircle cx='2' cy='8' r='1.5'/%3E%3C/svg%3E"); }

/* Polygon draw button */
.seg .polygon-draw-btn, .polygon-draw-btn {
  width: 30px; height: 30px; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--bg-elevated); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast); margin-right: 4px;
}
.polygon-draw-ico { display: block; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E"); }
.seg .polygon-draw-btn:hover, .polygon-draw-btn:hover { background: var(--bg-surface); border-color: var(--border-strong); }
.polygon-draw-btn:hover .polygon-draw-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E"); }
.seg .polygon-draw-btn.active, .polygon-draw-btn.active { background: #dbeafe; border-color: #3b82f6; }
.polygon-draw-btn.active .polygon-draw-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E"); }
.polygon-draw-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 100; }

/* PDF button */
.btn-pdf { padding: 5px 10px !important; font-size: 12px !important; font-weight: 600; }
.btn-help-2d { min-width: 28px; padding: 4px 8px !important; font-size: 14px !important; font-weight: 700; border-radius: 50%; }

/* Hide 2D tools in 3D */
body.view-3d #schemeTools2d { display: none; }
#insideWrap.simple #drawingToolbar [data-advanced-tool] { display: none; }


/* ── 22. Tooltips ───────────────────────────────────────────── */
.hint { position: relative; display: inline-flex; align-items: center; }
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  font-weight: 700; font-size: 12px; line-height: 16px; margin-left: 6px;
  cursor: help; background: transparent;
}
.tip {
  position: absolute; top: 50%; left: 22px; transform: translateY(-50%);
  min-width: 360px; max-width: min(560px, calc(100vw - 56px));
  background: var(--bg-elevated); color: var(--text-secondary);
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  font-size: 12px; line-height: 1.45; opacity: 0; pointer-events: none;
  transition: .15s; z-index: 10000;
}
.hint:hover .tip { opacity: 1; }
.tip::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--border-strong); }
.tip::after { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid var(--bg-elevated); }


/* ── 23. Context Menu ───────────────────────────────────────── */
.fp2d-context-menu { position: fixed; z-index: 10000; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 160px; padding: 4px 0; font-size: 13px; }
.fp2d-ctx-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: transparent; text-align: left; cursor: pointer; color: var(--text); transition: background 0.1s; }
.fp2d-ctx-btn:hover:not(:disabled) { background: var(--bg-surface); }
.fp2d-ctx-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fp2d-ctx-btn.danger { color: var(--danger); }
.fp2d-ctx-btn.danger:hover:not(:disabled) { background: rgba(239,68,68,0.06); }
.fp2d-ctx-btn .icon { width: 18px; text-align: center; }
.fp2d-ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }


/* ── 24. Accordion ──────────────────────────────────────────── */
details.acc { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); overflow: hidden; }
details.acc + details.acc { margin-top: 8px; }
details.acc > summary { padding: 10px 12px; cursor: pointer; list-style: none; user-select: none; position: relative; font-weight: 600; color: var(--text); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc[open] > summary { border-bottom: 1px dashed var(--border); }
details.acc > summary::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .6; }
details.acc[open] > summary::after { content: "▴"; }
details.acc .acc-body { padding: 10px 12px; }
details.acc .acc-body > * + * { margin-top: 8px; }


/* ── 25. Facade (Outside) ───────────────────────────────────── */
#sec-out-facade .facade-toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
#sec-out-facade .facade-toolbar__group { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 8px; flex: 1 1 520px; min-width: 280px; }
#sec-out-facade .facade-toolbar__walls { margin-left: auto; flex: 0 1 auto; }
#sec-out-facade .sidecard { border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); padding: 12px; }
#sec-out-facade .sidecard__head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-bottom: 6px; }
#sec-out-facade .sidecard__nav .nav-btn { width: 28px; height: 28px; }
#sec-out-facade input[type="number"], #sec-out-facade select { padding: 6px 8px; }

/* Openings compact */
#sec-out-facade .openings-compact { display: grid; gap: 6px; }
#sec-out-facade .openings-compact .open-line { display: grid; grid-template-columns: 64px minmax(0,1fr) 120px auto; align-items: center; gap: 8px; }
#sec-out-facade .openings-compact .olbl { font-weight: 600; color: var(--text); }
#sec-out-facade .openings-compact .odims, #sec-out-facade .openings-compact .ocnt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#sec-out-facade .openings-compact input[type="number"] { width: 72px; padding: 6px 8px; }
#sec-out-facade .openings-compact select { min-width: 96px; padding: 6px 8px; }
#sec-out-facade .openings-compact .x { opacity: .6; }
#sec-out-facade .openings-compact .unit { color: var(--text-muted); }
#sec-out-facade .openings-compact.custom .open-line { grid-template-columns: 64px 1fr 120px auto; }
#sec-out-facade .mini-table table { width: 100%; border-collapse: collapse; }
#sec-out-facade .mini-table th, #sec-out-facade .mini-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
#sec-out-facade .mini-table input[type="number"] { width: 72px; padding: 6px 8px; }

/* Simple/advanced mode */
#outsideWrap.simple [data-advanced] { display: none !important; }
#outsideWrap.simple label:has(#facadeLayers), #outsideWrap.simple label:has(#facadeSubstrate),
#outsideWrap.simple label:has(#plinthLayers), #outsideWrap.simple label:has(#plinthSubstrate),
#outsideWrap.simple label:has(#roofPitch), #outsideWrap.simple label:has(#roofLayers),
#outsideWrap.simple label:has(#roofSubstrate), #outsideWrap.simple label:has(#soffitW),
#outsideWrap.simple label:has(#soffitLayers), #outsideWrap.simple label:has(#porchLayers),
#outsideWrap.simple label:has(#porchSubstrate), #outsideWrap.simple label:has(#terrLayers),
#outsideWrap.simple label:has(#terrSubstrate) { display: none !important; }

/* Inside simple mode */
#insideWrap.simple #sec-rooms, #insideWrap.simple #sec-openings { display: none !important; }
#insideWrap.simple #surfaceHeader { display: none !important; }

/* Outside acc tables */
#outsideWrap .muted { color: var(--text-muted); }
#outsideWrap .acc table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--bg-elevated); }
#outsideWrap .acc th, #outsideWrap .acc td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
#outsideWrap .acc thead th { background: var(--bg-surface); position: sticky; top: 0; z-index: 1; }

/* Roof section */
#outsideWrap.advanced #sec-out-roof > .row { flex-wrap: wrap; }
#outsideWrap #roofTypeSeg { flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
#sec-out-roof { overflow-x: hidden; }
#sec-out-roof > .row { width: 100%; max-width: 100%; }
#sec-out-roof #roofFieldsGrid { min-width: 0; max-width: 100%; width: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; }
#sec-out-roof #roofRow2Main, #sec-out-roof #roofRow4Soffit { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; flex: 1 1 100%; min-width: 0; max-width: 100%; width: 100%; }
#sec-out-roof #roofRow3Base { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
#sec-out-roof #roofFieldsGrid > label, #sec-out-roof #roofFieldsGrid label { display: inline-grid; grid-auto-flow: column; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 6px; min-height: 30px; margin: 0; min-width: 0; max-width: 100%; }
#sec-out-roof #roofFieldsGrid select, #sec-out-roof #roofFieldsGrid input[type="number"] { max-width: 100%; }
#sec-out-roof #roofRow4Soffit { position: relative; margin-top: 10px; padding-top: 10px; }
#sec-out-roof #roofRow4Soffit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); pointer-events: none; }

/* Plinth */
#sec-out-plinth { overflow-x: hidden; }
#sec-out-plinth #plinthRow { display: flex; flex-wrap: nowrap; align-items: end; gap: 8px 10px; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
#sec-out-plinth .plinth-check-wrap { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; min-width: 0; max-width: 42%; white-space: normal; word-break: normal; overflow-wrap: break-word; flex: 1 1 220px; }
#sec-out-plinth .plinth-check-wrap input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; min-width: 16px; margin: 0; }
#sec-out-plinth input[type="number"] { width: 96px; max-width: 100%; padding: 6px 8px; box-sizing: border-box; }
#sec-out-plinth select { width: 220px; max-width: 100%; box-sizing: border-box; }

/* Gables */
#sec-out-gables .cards[data-gables-cards] { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }
#sec-out-gables .gable-card { display: flex; flex-direction: column; gap: 10px; }
#sec-out-gables .gable-card header { display: flex; align-items: center; gap: 8px; }
#outGablesPanel { margin-top: 8px; }
#outGablesPanel .h-sub { font-weight: 600; font-size: 14px; color: var(--text); }
#outGablesPanel .gable-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.card.mini.gable-card > section { padding: 10px 12px; }
.gable-card__head { align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gable-card__body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gable-card .field { display: flex; flex-direction: column; gap: 4px; }
.gable-card .lab { color: var(--text-muted); font-size: 12px; }
.gable-card input[type="number"] { width: 100%; box-sizing: border-box; }
.gable-card__foot { margin-top: 8px; line-height: 1.3; }
.opening.selected { outline: 2px dashed rgba(255,255,255,0.95); box-shadow: 0 0 0 2px rgba(0,0,0,0.25) inset, 0 0 0 3px rgba(80,160,255,0.9); }
.g-openings-layer .g-opening { cursor: grab; }
.g-openings-layer .g-opening.dragging { cursor: grabbing; }

/* Addons (porch, terrace) */
#sec-out-addons .addons-set + .addons-set { margin-top: 12px; }
#sec-out-addons .field .lab { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 12px; }
#sec-out-addons .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#outGablesPanel .cards, #sec-out-addons .cards { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; padding-bottom: 2px; }
#outGablesPanel .card, #sec-out-addons .card { display: flex; flex-direction: column; min-width: 320px; }

/* Export PDF */
#sec-scheme #exportPlanPdf { padding: 6px 12px; line-height: 1; height: 30px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--bg-elevated); font-weight: 600; vertical-align: middle; }
#sec-scheme .seg button, #sec-scheme #exportPlanPdf { display: inline-flex; align-items: center; }


/* ── 26. Modal ──────────────────────────────────────────────── */
.calc-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.calc-modal-backdrop[hidden] { display: none !important; }
.calc-modal { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); background: var(--bg-elevated); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-xl); padding: 16px 18px 14px; display: flex; flex-direction: column; box-sizing: border-box; }
.calc-modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.calc-modal__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.calc-modal__body { font-size: 13px; line-height: 1.55; color: var(--text-secondary); overflow: auto; }
.calc-modal__list { margin: 6px 0 0 18px; padding: 0; }
.calc-modal__list li { margin-bottom: 4px; }
.calc-modal__footer { margin-top: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
body.has-modal { overflow: hidden; }


/* ── 27. Flash & Glow Animations ────────────────────────────── */
@keyframes flashSec {
  0%   { outline: 2px solid rgba(244,163,0,1); outline-offset: 2px; background: var(--accent-soft); }
  60%  { outline-color: rgba(244,163,0,.35); background: transparent; }
  100% { outline-color: transparent; outline-offset: 0; background: inherit; }
}
.flash-section { animation: flashSec .9s ease-out 1; }
@keyframes flashSection {
  0%   { box-shadow: 0 0 0 0 rgba(255, 200, 0, .0); }
  30%  { box-shadow: 0 0 0 3px rgba(255, 200, 0, .35); }
  100% { box-shadow: 0 0 0 0 rgba(255, 200, 0, .0); }
}
@keyframes snap-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}


/* ── 28. Tour Guide ─────────────────────────────────────────── */
.t-overlay { position: fixed; inset: 0; z-index: 2147483000; display: none; pointer-events: none; }
.t-overlay.is-on { display: block; pointer-events: auto; }
.t-mask { position: absolute; background: var(--t-backdrop); transition: background .18s ease; }
.t-ring { position: absolute; border: 2px solid var(--t-ring); border-radius: var(--t-radius); box-shadow: 0 0 0 2px rgba(0,0,0,.10), 0 18px 56px rgba(0,0,0,.32), 0 0 0 8px var(--t-ring-glow) inset; pointer-events: none; animation: tRingPulse 2.2s ease-in-out infinite; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease, border-radius .18s ease; }
@keyframes tRingPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(0,0,0,.10), 0 18px 56px rgba(0,0,0,.32), 0 0 0 8px var(--t-ring-glow) inset; } 50% { box-shadow: 0 0 0 2px rgba(0,0,0,.08), 0 24px 72px rgba(0,0,0,.42), 0 0 0 11px rgba(59,130,246,.6) inset; } }
.t-ring--step { animation: tRingStep .35s ease-out 1; }
@keyframes tRingStep { 0% { transform: scale(1.018); box-shadow: 0 0 0 2px rgba(0,0,0,.12), 0 28px 88px rgba(0,0,0,.5), 0 0 0 14px rgba(59,130,246,.65) inset; } 100% { transform: none; box-shadow: 0 0 0 2px rgba(0,0,0,.10), 0 18px 56px rgba(0,0,0,.32), 0 0 0 8px var(--t-ring-glow) inset; } }
.t-pop { position: absolute; min-width: 280px; max-width: 460px; background: var(--t-pop-bg); border: 1px solid var(--t-pop-border); border-radius: var(--t-radius); box-shadow: var(--t-pop-shadow); color: var(--t-text); padding: var(--t-pad); animation: tPopFade .18s ease-out; }
@keyframes tPopFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.t-pop--pop { animation: tPopPop .18s ease-out; }
@keyframes tPopPop { from { transform: scale(.985); } to { transform: scale(1); } }
.t-pop__arrow { position: absolute; width: 12px; height: 12px; background: var(--t-pop-bg); border: 1px solid var(--t-pop-border); transform: rotate(45deg); }
.t-pop[data-place="right"] .t-pop__arrow { left: -6px; border-right: none; border-bottom: none; }
.t-pop[data-place="left"] .t-pop__arrow { right: -6px; border-left: none; border-top: none; }
.t-pop[data-place="bottom"] .t-pop__arrow { top: -6px; border-left: none; border-bottom: none; }
.t-pop[data-place="top"] .t-pop__arrow { bottom: -6px; border-right: none; border-top: none; }
.t-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.t-pop__title { font-weight: 800; color: var(--t-title); font-size: 14px; letter-spacing: .2px; }
.t-pop__progress { font-size: 12px; color: var(--t-muted); }
.t-pop__body { font-size: 13px; line-height: 1.55; }
.t-pop__body b { color: var(--t-title); }
.t-pop__nav { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.t-row { display: flex; gap: 8px; align-items: center; }
.t-btn { cursor: pointer; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg-elevated); font-weight: 700; font-size: 12px; transition: transform .06s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; box-shadow: 0 1px 0 rgba(2,6,23,.04); }
.t-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.t-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.t-btn.primary { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.t-btn.primary:hover { background: var(--t-accent-hover); border-color: var(--t-accent-hover); }
.t-btn.ghost:hover { background: var(--bg-surface); }
.t-btn.danger { border-color: var(--t-danger-bd); color: var(--t-danger-tx); background: var(--t-danger-bg); }
.t-btn.danger:hover { filter: saturate(1.05) brightness(1.02); }
.t-never { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t-muted); }
.t-never input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 4px; background: var(--bg-elevated); position: relative; cursor: pointer; }
.t-never input[type="checkbox"]:checked { border-color: #22c55e; }
.t-never input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 3px; top: -1px; width: 7px; height: 12px; border-right: 2px solid #22c55e; border-bottom: 2px solid #22c55e; transform: rotate(45deg); }


/* ── 29. Responsive ─────────────────────────────────────────── */

/* Tablet (stacked) */
@media (max-width: 1023px) {
  .app-content {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 1fr;
  }
  .params-panel {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .app-header__left h1 { font-size: 14px; }
}

/* Mobile */
@media (max-width: 767px) {
  .app-content {
    grid-template-rows: 40vh 1fr;
  }
  .app-header {
    padding: 0 8px;
    height: 48px;
    gap: 6px;
  }
  .app-header__left h1 {
    display: none;
  }
  .app-header__center {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-header__center::-webkit-scrollbar { display: none; }
  .app-header__center .seg button {
    padding: 5px 10px;
    font-size: 12px;
  }
  #guideToggleWrap { display: none; }
  .app-header__right { gap: 4px; }
  .app-header__right button { width: 32px; height: 32px; }
  .paint-panel__inner {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
  .sec { padding: 12px; }
  .chips { padding: 8px 12px; }
  .viz-toolbar { padding: 8px 10px; flex-wrap: wrap; gap: 4px; }
  .drawing-help-panel { width: calc(100vw - 24px); right: 12px; top: 60px; }
}

/* Small mobile */
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .seg.seg-tools {
    flex-wrap: wrap;
  }
  .seg.seg-tools .tool-btn {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
  }
  .seg.seg-tools .tool-btn:last-child { border-bottom: 0; }
  .seg.seg-tools .tool-btn[data-tooltip]:hover::after { left: 0; transform: translate(0, -8px); min-width: 200px; }
  .seg.seg-tools .tool-btn[data-tooltip]:hover::before { left: 20px; transform: translate(0, 2px) rotate(45deg); }
}

@media (max-width: 480px) {
  .scheme-header { flex-wrap: wrap; }
  .scheme-toolbar { width: 100%; justify-content: flex-end; }
  .scheme-hint { display: none; }
  #sec-out-kpi .kpi, #outsideWrap .kpi[data-role="outside-kpi"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 420px) {
  #sec-out-geom .geom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  #sec-out-geom .geom-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .gable-card__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .table-surfaces col.name { width: auto; }
  #sec-out-facade .facade-toolbar__group { grid-template-columns: 1fr 1fr; }
  #sec-out-facade .sidecard__head { grid-template-columns: 1fr; gap: 6px; }
  #outsideWrap #sec-out-roof > .row > label:first-of-type { margin-left: 0 !important; }
}

@media (max-width: 640px) {
  #sec-out-facade .openings-compact .open-line { grid-template-columns: 64px 1fr; }
  #sec-out-facade .openings-compact .ocnt { justify-self: start; }
  #sec-out-facade .openings-compact .open-line > .btn { grid-column: 1 / -1; justify-self: start; }
  #sec-out-addons .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  #sec-out-addons .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  #sec-out-gables .cards[data-gables-cards] { grid-template-columns: 1fr 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .t-ring, .t-ring--step, .t-pop, .t-pop--pop { animation: none !important; transition: none !important; }
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}


/* ── 30. Dark mode auto (tour) ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --t-backdrop: rgba(0,0,0,var(--t-backdrop-opacity, .62));
    --t-pop-bg: #0b1220;
    --t-pop-border: #1e293b;
    --t-pop-shadow: 0 24px 64px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25);
    --t-title: #e2e8f0;
    --t-text: #cbd5e1;
    --t-muted: #94a3b8;
    --t-ring: #e2e8f0;
    --t-ring-glow: rgba(59,130,246,.35);
    --t-danger-bg: #2b1513;
    --t-danger-bd: #6b2220;
    --t-danger-tx: #fecaca;
  }
}