.safetymat-studio {
  --sm-blue: var(--awb-color6, #326afe);
  --sm-blue-text: #234fc9;
  --sm-teal: var(--awb-color5, #000000);
  --sm-teal-dark: var(--awb-color4, #020101);
  --sm-teal-deep: var(--awb-color5, #000000);
  --sm-mint: #edf2ff;
  --sm-aqua: #dce6ff;
  --sm-ink: var(--awb-color5, #000000);
  --sm-muted: #586273;
  --sm-border: #dce3f7;
  --sm-border-strong: #b8c9fa;
  --sm-surface: #ffffff;
  --sm-soft: var(--awb-color2, #f7f7f7);
  --sm-canvas: var(--awb-color2, #f1f1f1);
  --sm-success: var(--sm-blue-text);
  --sm-success-bg: var(--sm-mint);
  --sm-warning: #9a5b08;
  --sm-warning-bg: #fff7e7;
  --sm-danger: #aa3935;
  --sm-danger-bg: #fff0ef;
  --sm-info: var(--sm-blue-text);
  --sm-info-bg: #edf2ff;
  --sm-shadow: 0 22px 60px rgba(0, 0, 0, 0.1);
  --sm-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.07);
  --sm-radius-xl: 28px;
  --sm-radius-lg: 20px;
  --sm-radius-md: 14px;
  --sm-radius-sm: 10px;
  --sm-font: inherit;
}

@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  .safetymat-studio {
    --sm-mint: color-mix(in srgb, var(--sm-blue) 9%, #fff);
    --sm-aqua: color-mix(in srgb, var(--sm-blue) 18%, #fff);
    --sm-border: color-mix(in srgb, var(--sm-blue) 17%, #fff);
    --sm-border-strong: color-mix(in srgb, var(--sm-blue) 36%, #fff);
  }
}

.safetymat-studio * { box-sizing: border-box; }

.safetymat-studio { scroll-behavior: smooth; }

.safetymat-studio {
  margin: 0;
  min-width: 0;
  width: 100%;
  color: var(--sm-ink);
  background: var(--sm-surface);
  font-family: var(--sm-font);
  line-height: 1.5;
}

.safetymat-studio button, .safetymat-studio input, .safetymat-studio select, .safetymat-studio textarea { font: inherit; }
.safetymat-studio button, .safetymat-studio a { -webkit-tap-highlight-color: transparent; }
.safetymat-studio button {
  appearance: none;
  color: var(--sm-ink);
  letter-spacing: normal !important;
  line-height: 1.25;
  text-transform: none !important;
}
.safetymat-studio a { color: var(--sm-teal-dark); }
.safetymat-studio h1,
.safetymat-studio h2,
.safetymat-studio h3,
.safetymat-studio h4 { color: var(--sm-ink); font-family: inherit; }

.safetymat-studio [hidden] { display: none !important; }
.safetymat-studio .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.sm-app {
  min-height: 100vh;
}

.studio-intro {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 0 8px;
  text-align: center;
}
.studio-intro .eyebrow { margin: 0 0 8px; color: var(--sm-blue-text); }
.studio-intro h1 { margin: 0 auto 14px; max-width: 900px; font-size: clamp(2rem, 4.8vw, 4.5rem); line-height: 1.05; }
.studio-intro > p:last-child { max-width: 760px; margin: 0 auto; color: var(--sm-muted); font-size: clamp(1rem, 1.5vw, 1.2rem); }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 700;
  transition: 0.2s ease;
}
.icon-button:hover { border-color: var(--sm-teal); transform: translateY(-1px); }

.step-nav {
  position: sticky;
  z-index: 25;
  top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto 0;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--sm-shadow-soft);
  backdrop-filter: blur(16px);
}

.sidebar-reset-button { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; }

.step-tab {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--sm-border);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: 0.2s ease;
}
.step-tab:last-child { border-right: 0; }
.step-tab > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  align-self: center;
  border-radius: 50%;
  background: var(--sm-soft);
  color: var(--sm-muted);
  font-weight: 800;
}
.step-tab strong { font-size: 0.97rem; line-height: 1.15; }
.step-tab small { color: var(--sm-muted); font-size: 0.75rem; line-height: 1.15; }
.step-tab:hover { background: var(--sm-soft); }
.step-tab.active { background: linear-gradient(135deg, var(--sm-mint), #fff); }
.step-tab.active::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--sm-teal);
}
.step-tab.active > span { background: var(--sm-teal); color: #fff; }
.step-tab.complete > span { background: var(--sm-success-bg); color: var(--sm-success); }

.app-layout {
  display: grid;
  grid-template-columns: minmax(250px, 292px) minmax(0, 1fr);
  gap: 24px;
  width: min(1380px, calc(100% - 32px));
  margin: 26px auto 70px;
  align-items: start;
}

.project-sidebar {
  position: sticky;
  top: 182px;
  display: grid;
  gap: 16px;
}

.sidebar-card,
.content-card,
.advisor-card {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-soft);
}

.sidebar-card { padding: 20px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-heading.compact h2 { margin: 3px 0 0; font-size: 1.2rem; line-height: 1.2; }

.eyebrow {
  display: inline-block;
  color: var(--sm-teal-dark);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}
.status-ok { color: var(--sm-success); background: var(--sm-success-bg); }
.status-review { color: var(--sm-warning); background: var(--sm-warning-bg); }
.status-error { color: var(--sm-danger); background: var(--sm-danger-bg); }
.status-info { color: var(--sm-info); background: var(--sm-info-bg); }

.mini-preview {
  display: grid;
  place-items: center;
  height: 152px;
  margin: 17px 0;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(50, 106, 254, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(50, 106, 254, 0.13) 1px, transparent 1px),
    #f8faff;
  background-size: 22px 22px;
}
.mini-preview svg { width: 100%; height: 100%; }

.sidebar-facts { display: grid; gap: 9px; margin: 0; }
.sidebar-facts div { display: flex; justify-content: space-between; gap: 15px; padding-top: 9px; border-top: 1px solid var(--sm-border); }
.sidebar-facts dt { color: var(--sm-muted); font-size: 0.82rem; }
.sidebar-facts dd { margin: 0; text-align: right; font-size: 0.85rem; font-weight: 800; }

.material-card h3 { margin: 5px 0 16px; font-size: 1.15rem; }
.limit-meter + .limit-meter { margin-top: 14px; }
.meter-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 0.78rem; }
.meter-label span { color: var(--sm-muted); }
.meter-label strong { font-size: 0.78rem; }
.meter-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--sm-mint); }
.meter-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sm-teal), var(--sm-blue)); transition: width 0.25s ease, background 0.25s ease; }
.meter-track span.warning { background: linear-gradient(90deg, #e9ad41, #cb6b20); }
.meter-track span.error { background: linear-gradient(90deg, #dd6862, #aa3935); }

.small-note { margin: 11px 0 0; color: var(--sm-muted); font-size: 0.78rem; line-height: 1.45; }
.help-card { background: linear-gradient(145deg, var(--sm-teal-deep), var(--sm-teal-dark)); color: #fff; }
.help-card .eyebrow { color: #b8cbff; }
.help-card p { margin: 8px 0 12px; color: rgba(255,255,255,0.82); font-size: 0.85rem; }
.help-card a { color: #fff; font-size: 0.84rem; font-weight: 800; }

.workspace { min-width: 0; }
.step-panel { animation: panelIn 0.28s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.panel-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-xl);
  background:
    radial-gradient(circle at 93% 0%, rgba(50, 106, 254, 0.19), transparent 18rem),
    linear-gradient(140deg, #ffffff, #f2f6ff);
  box-shadow: var(--sm-shadow);
}
.panel-hero h2 { margin: 7px 0 8px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 0.98; letter-spacing: -0.035em; }
.panel-hero p { max-width: 720px; margin: 0; color: var(--sm-muted); font-size: 1.02rem; }
.hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(50, 106, 254, 0.22);
  border-radius: 28px;
  background: rgba(255,255,255,0.68);
  color: var(--sm-teal);
  font-size: 2.8rem;
  font-weight: 800;
  transform: rotate(-4deg);
}

.content-card { margin-bottom: 20px; padding: clamp(22px, 3.5vw, 32px); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.section-heading h2 { margin: 0 0 4px; font-size: 1.36rem; line-height: 1.15; }
.section-heading p { margin: 0; color: var(--sm-muted); font-size: 0.9rem; }

.save-design-card { border-color: var(--sm-border-strong); background: linear-gradient(135deg, var(--sm-mint), #fff 70%); }
.save-design-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.save-design-heading h2 { margin: 3px 0 4px; font-size: 1.35rem; }
.save-design-heading p { margin: 0; color: var(--sm-muted); font-size: .82rem; }
.save-design-lock { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--sm-blue); color: #fff; font-weight: 900; }
.save-design-account { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; border: 1px solid var(--sm-border); border-radius: 13px; background: #fff; }
.save-design-account > div:first-child { display: grid; gap: 2px; }
.save-design-account span { color: var(--sm-muted); font-size: .76rem; }
.save-design-guest .form-grid { gap: 13px; }
.save-design-consent-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; }
.save-design-consent-row .consent-row { max-width: 620px; margin-top: 0; }
.save-design-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.save-design-result { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--sm-border-strong); border-radius: 10px; background: #fff; color: var(--sm-ink); font-size: .78rem; font-weight: 700; }
.save-design-result.success { border-color: var(--sm-border-strong); background: var(--sm-mint); color: #163a8c; }
.save-design-result.warning { border-color: #ecd79f; background: var(--sm-warning-bg); color: var(--sm-warning); }
.save-design-result.error { border-color: #efc2c0; background: var(--sm-danger-bg); color: var(--sm-danger); }

.form-grid { display: grid; gap: 18px; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.one-col { grid-template-columns: 1fr; }

.field { display: grid; gap: 7px; min-width: 0; }
.field > span { font-size: 0.88rem; font-weight: 800; }
.field > span em { display: block; color: var(--sm-muted); font-size: 0.72rem; font-style: normal; font-weight: 600; }
.field small { color: var(--sm-muted); font-size: 0.73rem; }
.safetymat-studio input, .safetymat-studio select, .safetymat-studio textarea {
  width: 100%;
  min-height: 47px;
  border: 1px solid var(--sm-border-strong);
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: var(--sm-ink);
  padding: 11px 13px;
  transition: 0.18s ease;
}
.safetymat-studio textarea { resize: vertical; }
.safetymat-studio input:focus, .safetymat-studio select:focus, .safetymat-studio textarea:focus { border-color: var(--sm-teal); box-shadow: 0 0 0 3px rgba(0,0,0,0.12); }
.safetymat-studio input:disabled, .safetymat-studio select:disabled { cursor: not-allowed; background: var(--sm-mint); color: var(--sm-muted); }

.input-with-unit, .input-prefix { position: relative; }
.input-with-unit input { padding-right: 52px; }
.input-with-unit b {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--sm-muted);
  font-size: 0.82rem;
}
.input-prefix input { padding-left: 36px; }
.input-prefix b { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--sm-muted); }

.segmented-control { display: inline-grid; grid-auto-flow: column; padding: 4px; border: 1px solid var(--sm-border); border-radius: 12px; background: var(--sm-soft); }
.segmented-control.full { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
.segmented-control button { min-height: 34px; padding: 5px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--sm-muted); cursor: pointer; font-size: 0.8rem; font-weight: 800; }
.segmented-control button.active { background: #fff; color: var(--sm-teal-dark); box-shadow: 0 3px 10px rgba(0,0,0,0.09); }
.segmented-control button:disabled { opacity: .52; cursor: not-allowed; }

.inline-alert {
  display: flex;
  gap: 11px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 0.84rem;
}
.inline-alert strong { flex: 0 0 auto; }
.inline-alert.info { border-color: #c9e4f2; background: var(--sm-info-bg); color: var(--sm-info); }
.inline-alert.warning { border-color: #ecd79f; background: var(--sm-warning-bg); color: var(--sm-warning); }
.inline-alert.danger { border-color: #efc2c0; background: var(--sm-danger-bg); color: var(--sm-danger); }
.inline-alert.success { border-color: var(--sm-border-strong); background: var(--sm-success-bg); color: var(--sm-success); }

.primary-button, .secondary-button, .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 19px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  transition: 0.2s ease;
}
.safetymat-studio .primary-button,
.safetymat-studio .primary-button:visited,
.safetymat-studio .primary-button:hover,
.safetymat-studio .primary-button:focus { color: #fff !important; }
.primary-button { border: 1px solid var(--sm-teal); background: var(--sm-teal); box-shadow: 0 8px 20px rgba(50,106,254,0.16); }
.primary-button:hover { background: var(--sm-teal-dark); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--sm-teal); background: #fff; color: var(--sm-teal-dark); }
.secondary-button:hover { background: var(--sm-mint); transform: translateY(-1px); }
.ghost-button { border: 1px solid var(--sm-border); background: var(--sm-soft); color: var(--sm-ink); }
.ghost-button:hover { border-color: var(--sm-teal); }
.primary-button.small, .secondary-button.small, .ghost-button.small { min-height: 38px; padding: 7px 12px; font-size: 0.78rem; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--sm-teal-dark); cursor: pointer; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.text-link { color: var(--sm-teal-dark); font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }

.panel-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.project-save-trigger { min-width: 150px; }
.project-save-trigger:focus-visible { outline: 3px solid var(--sm-blue); outline-offset: 3px; }
.project-save-trigger[aria-busy="true"] { cursor: wait; box-shadow: none; }

.designer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.designer-controls { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 20px; min-width: 0; }
.designer-controls > .content-card { margin-bottom: 0; }
.shape-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.shape-option { display: grid; justify-items: center; align-content: center; gap: 9px; min-width: 0; min-height: 96px; padding: 13px 9px; overflow: hidden; border: 1px solid var(--sm-border); border-radius: 12px; background: #fff; cursor: pointer; font-size: 0.72rem; }
.shape-option:hover { border-color: var(--sm-teal); }
.shape-option.active { border-color: var(--sm-teal); background: var(--sm-mint); box-shadow: 0 0 0 2px rgba(50,106,254,0.12); }
.shape-option b { display: block; max-width: 100%; color: var(--sm-ink); font-size: 0.75rem; line-height: 1.25; overflow-wrap: normal; text-align: center; white-space: normal; }
.shape-icon { display: block; width: 31px; height: 25px; border: 2px solid var(--sm-teal); background: rgba(50,106,254,0.10); }
.shape-icon.rounded { border-radius: 8px; }
.shape-icon.neo { clip-path: polygon(18% 0, 82% 0, 100% 26%, 100% 100%, 0 100%, 0 26%); }
.shape-icon.lshape { clip-path: polygon(0 0, 62% 0, 62% 40%, 100% 40%, 100% 100%, 0 100%); }
.shape-icon.custom { clip-path: polygon(10% 15%, 70% 0, 100% 42%, 82% 100%, 22% 82%, 0 45%); }
.conditional-fields { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sm-border); }
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.toggle-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.toggle-row input { width: 22px; min-height: 22px; margin: 2px 0 0; accent-color: var(--sm-teal); }
.toggle-row span { display: grid; }
.toggle-row b { font-size: 0.93rem; }
.toggle-row small { color: var(--sm-muted); font-size: 0.76rem; }
.drain-controls { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sm-border); }
.drain-status { margin-top: 13px; padding: 12px 14px; border-radius: 11px; font-size: 0.8rem; font-weight: 700; }
.drain-status.ok { background: var(--sm-success-bg); color: var(--sm-success); }
.drain-status.review { background: var(--sm-warning-bg); color: var(--sm-warning); }
.drain-status.error { background: var(--sm-danger-bg); color: var(--sm-danger); }

.designer-canvas-card { position: static; }
.canvas-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.canvas-toolbar h2 { margin: 3px 0 0; font-size: 1.28rem; }
.canvas-toolbar p { margin: 5px 0 0; color: var(--sm-muted); font-size: .78rem; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--sm-muted); font-size: 0.73rem; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
.mobile-plan-hint { display: none; margin: -3px 0 10px; padding: 8px 10px; border-radius: 9px; background: var(--sm-mint); color: var(--sm-blue-text); font-size: .72rem; font-weight: 800; }
.floor-key { border: 2px solid var(--sm-blue); background: transparent; }
.mat-key { border: 2px solid var(--sm-teal); background: rgba(50,106,254,0.14); }
.drain-key { border-radius: 50% !important; background: #2d4d58; }
.design-plan-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: 18px; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.design-canvas-wrap { position: relative; width: 100%; min-width: 760px; aspect-ratio: 760 / 520; overflow: hidden; border: 1px solid var(--sm-border); border-radius: 18px; background: radial-gradient(circle at center, #fff, var(--sm-mint)); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.design-svg { display: block; width: 100%; height: auto; aspect-ratio: 760 / 520; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.design-svg *, .plan-measurement-controls, .plan-measurement-controls * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.plan-measurement-controls input { touch-action: manipulation; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.design-svg .floor-outline { fill: rgba(50,106,254,0.05); stroke: var(--sm-blue); stroke-width: 2.2; stroke-dasharray: 8 5; }
.design-svg .mat-outline { fill: rgba(50,106,254,0.14); stroke: var(--sm-teal); stroke-width: 3; }
.design-svg .dimension-line { stroke: var(--sm-border-strong); stroke-width: 1.3; }
.design-svg .dimension-text { fill: #597073; font-family: var(--sm-font); font-size: 14px; font-weight: 700; }
.design-svg .drain-clearance { fill: rgba(50,106,254,0.08); stroke: rgba(50,106,254,0.40); stroke-width: 1.5; stroke-dasharray: 5 4; }
.design-svg .drain-handle { fill: var(--sm-teal); stroke: #fff; stroke-width: 4; cursor: grab; filter: drop-shadow(0 5px 8px rgba(0,0,0,0.22)); }
.design-svg .drain-handle:active { cursor: grabbing; }
.design-svg .drain-hole { fill: #f7f9ff; stroke: var(--sm-teal); stroke-width: 2; pointer-events: none; }
.design-svg .drain-hit { fill: transparent; stroke: transparent; cursor: grab; }
.design-svg .custom-point-hit { fill: transparent; stroke: transparent; cursor: grab; }
.design-svg .custom-point { fill: #fff; stroke: var(--sm-teal); stroke-width: 3; cursor: grab; pointer-events: none; }
.design-svg .custom-point.first { fill: var(--sm-teal); }
.design-svg.is-dragging-point .custom-point-hit, .design-svg.is-dragging-drain .drain-hit { cursor: grabbing; }
.design-svg .custom-point-label, .design-svg .custom-edge-label { fill: var(--sm-teal-dark); font-family: var(--sm-font); font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.94); stroke-width: 5px; stroke-linejoin: round; }
.design-svg .custom-point-label { font-size: 13px; }
.design-svg .custom-edge-label { font-size: 11px; }
.plan-measurement-controls { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.plan-control { position: absolute; z-index: 5; margin: 0 !important; pointer-events: auto; }
.plan-input-with-unit { position: relative; display: block; min-width: 0; }
.plan-input-with-unit input { width: 100% !important; height: 22px !important; min-height: 22px !important; margin: 0 !important; padding: 2px 18px 2px 5px !important; border: 1px solid var(--sm-border-strong) !important; border-radius: 6px !important; appearance: textfield; background: #fff !important; color: var(--sm-ink) !important; box-shadow: 0 2px 7px rgba(0,0,0,.07); font-size: .56rem !important; font-weight: 850; line-height: 1 !important; }
.plan-input-with-unit input::-webkit-inner-spin-button,
.plan-input-with-unit input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.plan-input-with-unit input:focus { border-color: var(--sm-blue) !important; box-shadow: 0 0 0 3px rgba(50,106,254,.18) !important; }
.plan-input-with-unit b { position: absolute; top: 50%; right: 5px; color: var(--sm-muted); font-size: .46rem; transform: translateY(-50%); pointer-events: none; }
.plan-overall-control { z-index: 8; width: 90px; padding: 4px 5px; border: 1px solid var(--sm-border-strong); border-radius: 7px; background: rgba(255,255,255,.94); box-shadow: 0 4px 12px rgba(0,0,0,.09); }
.plan-overall-control > span:first-child { display: block; margin-bottom: 2px; overflow: hidden; color: var(--sm-muted); font-size: .45rem; font-weight: 900; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.plan-overall-width { transform: translate(-50%, -50%); }
.plan-overall-height { transform: translate(-50%, -50%); }
.plan-point-control { width: 118px; padding: 4px; border: 1px solid var(--sm-border-strong); border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 4px 12px rgba(0,0,0,.09); }
.plan-point-control.below-right { transform: translate(9px, 9px); }
.plan-point-control.below-left { transform: translate(calc(-100% - 9px), 9px); }
.plan-point-control.above-right { transform: translate(9px, calc(-100% - 9px)); }
.plan-point-control.above-left { transform: translate(calc(-100% - 9px), calc(-100% - 9px)); }
.plan-point-control.middle-right { transform: translate(9px, -50%); }
.plan-point-control.middle-left { transform: translate(calc(-100% - 9px), -50%); }
.plan-point-control.above-center { transform: translate(-50%, calc(-100% - 9px)); }
.plan-point-control.below-center { transform: translate(-50%, 9px); }
.plan-point-heading { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 3px; margin-bottom: 3px; }
.plan-point-heading strong { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--sm-teal); color: #fff; font-size: .51rem; }
.plan-point-heading span { overflow: hidden; color: var(--sm-muted); font-size: .46rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.plan-point-heading button { display: grid; place-items: center; width: 17px; min-height: 17px; padding: 0; border: 1px solid var(--sm-border); border-radius: 5px; background: #fff; color: var(--sm-muted); cursor: pointer; font-size: .68rem; line-height: 1; }
.plan-point-heading button:hover { border-color: var(--sm-danger); color: var(--sm-danger); }
.plan-coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.plan-coordinate-grid label { min-width: 0; margin: 0 !important; }
.plan-coordinate-grid label > span:first-child { display: block; margin: 0 0 1px 1px; color: var(--sm-muted); font-size: .42rem; font-weight: 850; line-height: 1; }
.plan-edge-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px; width: 88px; padding: 3px 4px; border: 1px solid var(--sm-border); border-radius: 7px; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translate(-50%, -50%); }
.plan-edge-control > span:first-child { font-size: .46rem; font-weight: 900; white-space: nowrap; }
.plan-edge-control .plan-input-with-unit input { height: 21px !important; min-height: 21px !important; }
.plan-control:focus-within { z-index: 12; background: #fff; box-shadow: 0 7px 20px rgba(0,0,0,.15); }
.plan-drain-status { position: static; margin: 10px 0 0; box-shadow: 0 6px 18px rgba(0,0,0,.12); pointer-events: none; }
.draw-message { position: absolute; z-index: 10; right: 14px; bottom: 14px; left: 14px; padding: 11px 14px; border-radius: 11px; background: rgba(24,50,53,0.9); color: #fff; text-align: center; font-size: 0.78rem; }
.canvas-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.canvas-stats div { padding: 12px; border-radius: 11px; background: var(--sm-soft); }
.canvas-stats span, .canvas-stats strong { display: block; }
.canvas-stats span { color: var(--sm-muted); font-size: 0.7rem; }
.canvas-stats strong { margin-top: 3px; font-size: 0.83rem; }

.visualizer-layout { display: grid; grid-template-columns: minmax(300px, 0.65fr) minmax(480px, 1.35fr); gap: 20px; align-items: start; }
.visualizer-controls-card { position: sticky; top: 182px; }
.artwork-prompt { flex-wrap: wrap; align-items: center; }
.artwork-prompt span { flex: 1 1 180px; }
.artwork-prompt .secondary-button { margin-left: auto; }
.artwork-placement-controls { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sm-border); }
.artwork-placement-controls[hidden] { display: none !important; }
.artwork-mode-control { margin-top: 16px; }
.artwork-placement-controls .artwork-mode-control { margin-top: 0; }
.artwork-remove-button { margin-top: 16px; }
.artwork-proof-note { margin: 16px 0 0; padding: 11px 12px; border-radius: 10px; background: var(--sm-warning-bg); color: var(--sm-warning); line-height: 1.5; }
.upload-zone { display: grid; place-items: center; gap: 3px; min-height: 144px; margin-bottom: 18px; padding: 18px; border: 2px dashed var(--sm-border-strong); border-radius: 14px; background: var(--sm-soft); text-align: center; cursor: pointer; }
.upload-zone:hover { border-color: var(--sm-teal); background: var(--sm-mint); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-zone .upload-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sm-teal); color: #fff; font-size: 1.3rem; }
.upload-zone b { font-size: 0.9rem; }
.upload-zone small { color: var(--sm-muted); font-size: 0.72rem; }
.upload-zone.compact { grid-template-columns: 36px 1fr; justify-items: start; min-height: 78px; text-align: left; }
.upload-zone.compact b, .upload-zone.compact small { grid-column: 2; }
.upload-zone.compact .upload-icon { grid-row: 1 / 3; }

.range-field { display: grid; gap: 7px; margin-top: 17px; }
.range-field > span { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 0.82rem; }
.range-field output { color: var(--sm-teal-dark); font-weight: 800; }
.range-field input { min-height: 18px; padding: 0; border: 0; box-shadow: none; accent-color: var(--sm-teal); }

.visualizer-stage-card { padding: 20px; }
.visualizer-stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: 19px;
  background-color: #e8efef;
  isolation: isolate;
}
.artwork-proof-stage {
  background-color: #f1f5f4;
  background-image: linear-gradient(45deg, rgba(22,63,66,.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(22,63,66,.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(22,63,66,.035) 75%), linear-gradient(-45deg, transparent 75%, rgba(22,63,66,.035) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}
.surface-white-tile {
  background-image:
    linear-gradient(90deg, rgba(150,165,165,0.28) 2px, transparent 2px),
    linear-gradient(rgba(150,165,165,0.28) 2px, transparent 2px),
    linear-gradient(135deg, #fbfbfa, #e9eeee);
  background-size: 110px 110px, 110px 110px, 100% 100%;
}
.surface-gray-tile {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.28) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,0.28) 2px, transparent 2px),
    linear-gradient(135deg, #9ea8a8, #c0c7c7);
  background-size: 105px 105px, 105px 105px, 100% 100%;
}
.surface-stone { background: repeating-radial-gradient(circle at 25% 30%, rgba(255,255,255,0.22) 0 6px, transparent 7px 24px), linear-gradient(130deg, #c7bdac, #9c9386); }
.surface-terrazzo { background-color: #e5dfd5; background-image: radial-gradient(#879b96 2px, transparent 3px), radial-gradient(#ba947b 3px, transparent 4px), radial-gradient(#f8f1e6 3px, transparent 4px); background-position: 0 0, 24px 16px, 42px 5px; background-size: 55px 55px; }
.surface-concrete { background: linear-gradient(145deg, #b2b9b8, #8f9998); }
.photo-background { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; opacity: 0; transition: opacity 0.25s ease; }
.photo-background.visible { opacity: 1; }
.visualizer-svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.visualizer-svg .visual-mat { stroke: rgba(255,255,255,0.76); stroke-width: 3; filter: drop-shadow(0 18px 22px rgba(22,55,57,0.24)); }
.visualizer-svg .uploaded-artwork { pointer-events: none; }
.visualizer-svg .artwork-outline { fill: none; stroke: var(--sm-teal); stroke-width: 3; pointer-events: none; }
.visualizer-svg .artwork-placeholder circle { fill: rgba(255,255,255,.78); stroke: #9db4b4; stroke-width: 2; }
.visualizer-svg .artwork-placeholder text:first-of-type { fill: var(--sm-teal-dark); font-size: 30px; font-weight: 500; }
.visualizer-svg .artwork-placeholder text:last-of-type { fill: var(--sm-muted); font-family: var(--sm-font); font-size: 14px; font-weight: 800; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 5px; }
.visualizer-svg .artwork-file-status text:first-of-type { font-size: 13px; font-weight: 900; }
.pdf-artwork-preview {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}
.pdf-artwork-preview[hidden] { display: none !important; }
.pdf-artwork-frame {
  position: absolute;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform-origin: center;
}
.pdf-artwork-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--sm-muted);
  font-size: .76rem;
  font-weight: 800;
  text-align: center;
}
.pdf-artwork-preview.loaded .pdf-artwork-fallback { display: none; }
.pdf-artwork-preview-badge {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(24,50,53,.78);
  color: #fff;
  font-size: .67rem;
  font-weight: 800;
  pointer-events: none;
}
.pdf-artwork-preview-badge[hidden] { display: none !important; }
.artwork-stage-upload-button {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  width: min(88%, 420px);
  min-height: 128px;
  margin: 0;
  padding: 16px 18px;
  transform: translate(-50%, -50%);
  place-items: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--sm-muted);
  font: 800 clamp(16px, 1.65vw, 18px)/1.25 var(--sm-font);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  cursor: pointer;
}
.artwork-stage-upload-button[hidden] { display: none !important; }
.artwork-stage-upload-label { display: grid; gap: 2px; place-items: center; }
.artwork-stage-upload-label > span { display: block; white-space: nowrap; }
.artwork-stage-upload-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 2px solid #9db4b4;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--sm-teal-dark);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.artwork-stage-upload-button:hover,
.artwork-stage-upload-button:focus-visible { color: var(--sm-ink); background: rgba(255,255,255,.72); }
.artwork-stage-upload-button:hover .artwork-stage-upload-icon,
.artwork-stage-upload-button:focus-visible .artwork-stage-upload-icon { border-color: var(--sm-ink); background: #fff; color: var(--sm-ink); }
.artwork-stage-upload-button:focus-visible { outline: 3px solid var(--sm-blue); outline-offset: 3px; }
.visualizer-svg .visual-drain { fill: rgba(31,57,65,0.82); stroke: rgba(255,255,255,0.8); stroke-width: 3; }
.visualizer-svg .visual-texture { pointer-events: none; }
.preview-watermark { position: absolute; z-index: 4; right: 13px; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(24,50,53,0.7); color: #fff; font-size: 0.67rem; font-weight: 800; }
.finish-description { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; margin-top: 13px; padding: 12px 14px; border-radius: 12px; background: var(--sm-soft); }
.finish-description strong { min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.finish-description span { min-width: 0; flex: 1 1 220px; color: var(--sm-muted); font-size: 0.8rem; }

.installation-preview-card { margin-top: 20px; }
.installation-preview-card .section-heading { align-items: center; }
.installation-heading { margin-bottom: 22px; }
.installation-video-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--sm-border-strong);
  border-radius: 11px;
  background: var(--sm-soft);
  line-height: 1.2;
  white-space: nowrap;
}
.installation-video-link:hover { border-color: var(--sm-teal); background: var(--sm-mint); text-decoration: none; }
.installation-video-link span[aria-hidden="true"] { flex: 0 0 auto; font-size: 1rem; }
.installation-sequence { display: grid; grid-template-columns: minmax(430px, 1.2fr) minmax(310px, .8fr); gap: clamp(22px, 3vw, 36px); align-items: center; }
.installation-stage {
  position: relative;
  aspect-ratio: 19 / 12;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #b8d4d3;
  border-radius: 19px;
  background: #dff2f7;
  box-shadow: 0 18px 40px rgba(20, 67, 68, .12);
  isolation: isolate;
}
.installation-media { position: absolute; inset: 0; }
.installation-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: installation-enter .55s cubic-bezier(.2,.75,.25,1) both;
}
.installation-stage[data-installation-step="1"] .installation-media img { object-position: center 41%; }
.installation-stage[data-installation-step="2"] .installation-media img { object-position: center 50%; }
.installation-stage[data-installation-step="3"] .installation-media img { object-position: center 55%; }
.installation-stage[data-installation-step="4"] .installation-media img { object-position: center 56%; }
.installation-stage-shade { position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(0deg, rgba(7, 44, 48, .72), transparent); pointer-events: none; }
.installation-stage-label { position: absolute; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 2px 10px rgba(7,44,48,.6); }
.installation-stage-label span { font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.installation-stage-label strong { font-size: 1rem; }
.installation-copy { display: grid; align-content: center; gap: 18px; }
.installation-instruction { min-height: 150px; padding: 20px; border-left: 4px solid var(--sm-teal); border-radius: 0 15px 15px 0; background: linear-gradient(135deg, var(--sm-mint), #fbfcff); }
.installation-instruction > span { display: block; margin-bottom: 7px; color: var(--sm-teal-dark); font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.installation-instruction h3 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.12; }
.installation-instruction p { margin: 9px 0 0; color: var(--sm-muted); font-size: .82rem; }
.installation-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.installation-step { display: grid; justify-items: start; min-width: 0; padding: 10px; border: 1px solid var(--sm-border); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: .2s ease; }
.installation-step:hover { border-color: var(--sm-teal); transform: translateY(-1px); }
.installation-step > span { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 7px; border-radius: 50%; background: var(--sm-soft); color: var(--sm-muted); font-size: .68rem; font-weight: 900; }
.installation-step strong { overflow-wrap: anywhere; font-size: .7rem; line-height: 1.08; }
.installation-step small { display: none; color: var(--sm-muted); font-size: .62rem; line-height: 1.15; }
.installation-step.active { border-color: var(--sm-teal); background: var(--sm-mint); box-shadow: 0 7px 18px rgba(50,106,254,.12); }
.installation-step.active > span { background: var(--sm-teal); color: #fff; }
.installation-replay { justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.installation-reassurance { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; padding: 18px 20px; border: 1px solid var(--sm-border); border-radius: 15px; background: #fff; }
.installation-reassurance > div:first-child { display: grid; gap: 3px; }
.installation-reassurance > div:first-child strong { font-size: .96rem; }
.installation-reassurance > div:first-child span { color: var(--sm-muted); font-size: .76rem; }
.installation-badge { display: grid; flex: 0 0 auto; padding: 10px 14px; border-radius: 12px; background: var(--sm-teal-dark); color: #fff; text-align: center; }
.installation-badge strong { color: #fff; font-size: .75rem; }
.installation-badge span { color: rgba(255,255,255,.78); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.material-detail { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--sm-border); }
.material-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 17px; }
.material-detail-heading h3 { margin: 4px 0 3px; font-size: 1.4rem; }
.material-detail-heading p { max-width: 740px; margin: 0; color: var(--sm-muted); font-size: .78rem; }
.material-detail-selection { display: grid; flex: 0 0 auto; gap: 2px; min-width: 170px; padding: 9px 12px; border: 1px solid var(--sm-border); border-radius: 12px; background: #fff; }
.material-detail-selection small { color: var(--sm-muted); font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.material-detail-selection strong { color: var(--sm-teal-dark); font-size: .76rem; }
.material-detail-figure { margin: 0; overflow: hidden; border: 1px solid var(--sm-border); border-radius: 18px; background: #fff; }
.material-detail-media { aspect-ratio: 19 / 8.5; overflow: hidden; background: #fff; }
.material-detail-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.material-detail-figure figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-top: 1px solid var(--sm-border); background: #fff; }
.material-detail-figure figcaption strong { flex: 0 0 auto; color: var(--sm-teal-dark); font-size: .7rem; }
.material-detail-figure figcaption span { color: var(--sm-muted); font-size: .68rem; text-align: right; }

@keyframes installation-enter { from { opacity: .25; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }

.advisor-card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-bottom: 20px; padding: clamp(22px, 3vw, 30px); background: linear-gradient(140deg, var(--sm-teal-deep), var(--sm-teal-dark)); color: #fff; }
.advisor-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(255,255,255,0.24); border-radius: 20px; background: rgba(255,255,255,0.12); font-size: 1.45rem; font-weight: 800; }
.advisor-copy .eyebrow { color: #b8cbff; }
.safetymat-studio .advisor-copy h2 { margin: 5px 0 5px; color: #fff; font-size: 1.55rem; line-height: 1.1; }
.advisor-copy > p { margin: 0; color: rgba(255,255,255,0.78); font-size: 0.88rem; }
.advisor-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.advisor-reasons span { padding: 5px 9px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 0.7rem; font-weight: 700; }
.advisor-confidence { min-width: 130px; padding: 13px; border-radius: 13px; background: rgba(255,255,255,0.1); text-align: center; }
.advisor-confidence span, .advisor-confidence strong { display: block; }
.advisor-confidence span { color: rgba(255,255,255,0.7); font-size: 0.66rem; }
.advisor-confidence strong { margin-top: 4px; color: #fff; font-size: 1.15rem; }

.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recommendation-card { position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 22px; overflow: hidden; border: 1px solid var(--sm-border); border-radius: 17px; background: #fff; }
.recommendation-card.featured { border: 2px solid var(--sm-teal); box-shadow: 0 14px 30px rgba(50,106,254,0.14); }
.recommendation-card.featured::before { content: ""; position: absolute; top: -42px; right: -42px; width: 110px; height: 110px; border-radius: 50%; background: rgba(50,106,254,0.10); }
.rec-badge { display: inline-flex; align-self: flex-start; padding: 5px 9px; border-radius: 999px; background: var(--sm-mint); color: var(--sm-teal-dark); font-size: 0.7rem; font-weight: 800; }
.recommendation-card h3 { margin: 13px 0 5px; font-size: 1.17rem; line-height: 1.1; }
.rec-size { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.rec-description { margin: 8px 0 17px; color: var(--sm-muted); font-size: 0.8rem; }
.rec-metrics { display: grid; gap: 7px; margin: auto 0 0; }
.rec-metrics div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--sm-border); font-size: 0.75rem; }
.rec-metrics span { color: var(--sm-muted); }
.rec-metrics strong { text-align: right; }
.rec-action { margin-top: 15px; }

.pricing-breakdown { display: grid; gap: 9px; }
.price-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--sm-border); font-size: 0.82rem; }
.price-line span { color: var(--sm-muted); }
.price-line strong { text-align: right; }
.price-line.total { padding-top: 14px; border-top: 2px solid var(--sm-ink); border-bottom: 0; font-size: 1rem; }
.price-line.pending strong { color: var(--sm-warning); }
.pricing-note { margin: 8px 0 0; color: var(--sm-muted); font-size: 0.72rem; }

.quote-layout { display: grid; grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.22fr); gap: 20px; align-items: start; }
.customer-card { position: sticky; top: 182px; }
.consent-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; color: var(--sm-muted); font-size: 0.78rem; cursor: pointer; }
.consent-row input { width: 18px; min-height: 18px; margin: 1px 0 0; accent-color: var(--sm-teal); }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--sm-danger-bg); color: var(--sm-danger); font-size: 0.8rem; font-weight: 700; }

.quote-document-wrap { min-width: 0; }
.quote-document { overflow: hidden; border: 1px solid var(--sm-border); border-radius: 18px; background: #fff; box-shadow: var(--sm-shadow); }
.quote-header { display: flex; justify-content: space-between; gap: 20px; padding: 27px 30px; background: var(--sm-teal); color: #fff; }
.quote-brand { display: grid; }
.quote-brand strong { font-size: 1.72rem; line-height: 1; }
.quote-brand span { color: rgba(255,255,255,0.72); font-size: 0.76rem; }
.quote-number { display: grid; justify-items: end; text-align: right; }
.quote-number span { color: rgba(255,255,255,0.68); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; }
.quote-number strong { font-size: 1.05rem; }
.quote-number small { color: rgba(255,255,255,0.72); }
.quote-status-line { display: flex; align-items: center; gap: 12px; padding: 14px 30px; border-bottom: 1px solid var(--sm-border); background: var(--sm-soft); }
.quote-status-line p { margin: 0; color: var(--sm-muted); font-size: 0.75rem; }
.quote-section { padding: 22px 30px; border-bottom: 1px solid var(--sm-border); }
.quote-section:last-of-type { border-bottom: 0; }
.quote-section h3 { margin: 0 0 13px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
.quote-configuration { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: center; }
.quote-shape-preview { display: grid; place-items: center; height: 76px; border-radius: 12px; background: var(--sm-soft); }
.quote-shape-preview svg { width: 100%; height: 100%; }
.quote-config-copy strong, .quote-config-copy span { display: block; }
.quote-config-copy strong { font-size: 1.08rem; }
.quote-config-copy span { color: var(--sm-muted); font-size: 0.77rem; }
.quote-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sm-border); border-left: 1px solid var(--sm-border); }
.quote-table div { padding: 11px 12px; border-right: 1px solid var(--sm-border); border-bottom: 1px solid var(--sm-border); }
.quote-table span, .quote-table strong { display: block; }
.quote-table span { color: var(--sm-muted); font-size: 0.67rem; }
.quote-table strong { font-size: 0.82rem; }
.quote-pricing { display: grid; gap: 7px; }
.quote-pricing .price-line { margin: 0; }
.compact-section p { margin: 0; color: var(--sm-muted); font-size: 0.7rem; }
.compact-section .pricing-review-notice,
.checkout-panel-copy .pricing-review-notice {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #ead49b;
  border-radius: 9px;
  background: #fff8e7;
  color: #6f5412;
  font-size: 0.72rem;
  line-height: 1.5;
}
.quote-footer { display: flex; justify-content: space-between; gap: 12px; padding: 15px 30px; background: var(--sm-mint); color: var(--sm-muted); font-size: 0.7rem; font-weight: 700; }
.checkout-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
  padding: 19px 20px;
  border: 1px solid var(--sm-border-strong);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sm-mint), #ffffff 68%);
  box-shadow: 0 12px 30px rgba(50, 106, 254, 0.11);
}
.checkout-panel.review-only { border-color: #ead49b; background: linear-gradient(135deg, #fff8e7, #ffffff 70%); box-shadow: none; }
.checkout-panel-copy { min-width: 0; }
.checkout-panel-copy strong { display: block; margin: 3px 0 4px; font-size: 1rem; color: var(--sm-ink); }
.checkout-panel-copy p { margin: 0; color: var(--sm-muted); font-size: 0.78rem; line-height: 1.5; }
.checkout-kicker { display: block; color: var(--sm-teal-dark); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.075em; text-transform: uppercase; }
.checkout-panel.review-only .checkout-kicker { color: var(--sm-warning); }
.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 11px 21px;
  border: 1px solid var(--sm-teal);
  border-radius: 13px;
  background: var(--sm-teal);
  color: #fff;
  box-shadow: 0 10px 24px rgba(50, 106, 254, 0.18);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  transition: 0.2s ease;
}
.checkout-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--sm-teal-dark); }
.checkout-button:focus-visible { outline: 3px solid rgba(50, 106, 254, 0.28); outline-offset: 2px; }
.checkout-button:disabled { border-color: #c8d1d0; background: #e8eeee; color: #7e9091; box-shadow: none; cursor: not-allowed; }
.checkout-button span { font-size: 1.1rem; }
.quote-submit-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--sm-border-strong); border-radius: 14px; background: var(--sm-mint); }
.quote-submit-consent { margin: 0; color: var(--sm-ink); font-size: 0.82rem; font-weight: 700; line-height: 1.5; }
.quote-submit-consent input { flex: 0 0 auto; margin-top: 2px; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.direct-delivery-note { margin: 10px 0 0; color: var(--sm-muted); font-size: 0.74rem; line-height: 1.5; }
.submission-result { margin-top: 13px; padding: 14px 16px; border: 1px solid var(--sm-border-strong); border-radius: 12px; background: var(--sm-success-bg); color: var(--sm-success); font-size: 0.82rem; font-weight: 700; }

.settings-dialog { width: min(850px, calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border: 1px solid var(--sm-border); border-radius: 22px; box-shadow: 0 28px 90px rgba(18,47,49,0.28); }
.settings-dialog::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
.reset-dialog { width: min(580px, calc(100% - 24px)); }
.reset-dialog-shell { max-height: calc(100vh - 34px); padding: 30px; overflow-y: auto; }
.reset-dialog-shell h2 { margin: 6px 0 10px; }
.reset-dialog-shell p { margin: 0; color: var(--sm-muted); line-height: 1.6; }
.reset-dialog-actions { display: grid; gap: 10px; margin-top: 24px; }
.project-action {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--sm-border-strong);
  border-radius: 13px;
  background: #fff;
  color: var(--sm-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.project-action strong { font-size: .9rem; }
.project-action small { color: inherit; font-size: .72rem; font-weight: 600; line-height: 1.45; opacity: 1; }
.project-action:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--sm-shadow-soft); }
.project-action:focus-visible { outline: 3px solid var(--sm-blue); outline-offset: 3px; }
.project-action:disabled { cursor: wait; opacity: 1; box-shadow: none; }
.safetymat-studio .project-action-save { border-color: var(--sm-teal); background: var(--sm-teal); color: #fff; }
.safetymat-studio .project-action-save:hover:not(:disabled) { background: var(--sm-teal-dark); }
.safetymat-studio .project-action-add { border-color: var(--sm-blue); background: var(--sm-blue); color: #fff; }
.safetymat-studio .project-action-add:hover:not(:disabled) { background: color-mix(in srgb, var(--sm-blue) 86%, #000); }
.project-action-continue:hover:not(:disabled) { border-color: var(--sm-blue); background: var(--sm-mint); }
.safetymat-studio .project-action-reset { border-color: #e5b7b4; color: var(--sm-danger); }
.project-action-reset:hover:not(:disabled) { border-color: var(--sm-danger); background: var(--sm-danger-bg); }
.project-action-status { margin-top: 14px; padding: 11px 13px; border: 1px solid var(--sm-border-strong); border-radius: 10px; background: var(--sm-mint); color: var(--sm-ink); font-size: .76rem; font-weight: 700; }
.project-action-status.error { border-color: #efc2c0; background: var(--sm-danger-bg); color: var(--sm-danger); }
.settings-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 32px); }
.settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 25px; border-bottom: 1px solid var(--sm-border); }
.settings-header h2 { margin: 3px 0 2px; font-size: 1.45rem; }
.settings-header p { margin: 0; color: var(--sm-muted); font-size: 0.78rem; }
.settings-body { overflow-y: auto; padding: 23px 25px; }
.settings-body section + section { margin-top: 27px; padding-top: 24px; border-top: 1px solid var(--sm-border); }
.settings-body h3 { margin: 0 0 15px; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 25px; border-top: 1px solid var(--sm-border); background: var(--sm-soft); }
.settings-footer > div { display: flex; gap: 9px; }
.standard-price-settings { display: grid; gap: 10px; }
.standard-price-row { display: grid; grid-template-columns: 1fr minmax(130px, 0.35fr); gap: 14px; align-items: center; }
.standard-price-row strong { font-size: 0.83rem; }

.toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; max-width: min(360px, calc(100% - 40px)); padding: 13px 17px; border-radius: 12px; background: var(--sm-teal); color: #fff; box-shadow: 0 14px 35px rgba(0,0,0,0.25); font-size: 0.82rem; font-weight: 700; opacity: 0; transform: translateY(14px); pointer-events: none; transition: 0.24s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }

.app-footer { display: flex; justify-content: space-between; gap: 18px; width: min(1380px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 32px; color: var(--sm-muted); font-size: 0.75rem; }
.app-footer p { margin: 0; }
.app-footer div { display: flex; gap: 16px; }
.app-footer a { color: inherit; font-weight: 700; }

@media (max-width: 1160px) {
  .app-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .designer-layout, .visualizer-layout { grid-template-columns: 1fr; }
  .designer-controls { grid-template-columns: 1fr; }
  .designer-canvas-card, .visualizer-controls-card { position: static; }
  .recommendation-grid { grid-template-columns: 1fr 1fr; }
  .recommendation-card:last-child { grid-column: 1 / -1; }
  .quote-layout { grid-template-columns: 1fr; }
  .customer-card { position: static; }
}

@media (max-width: 940px) {
  .step-nav { top: 0; overflow-x: auto; grid-template-columns: repeat(4, minmax(145px, 1fr)); }
  .app-layout { grid-template-columns: 1fr; }
  .workspace { grid-row: 1; }
  .project-sidebar { grid-row: 2; }
  .project-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-card { grid-column: 1 / -1; }
  .live-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .live-card .card-heading, .live-card .sidebar-facts { grid-column: 1; }
  .live-card .mini-preview { grid-column: 2; grid-row: 1 / 3; margin: 0; min-height: 180px; }
  .form-grid.three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .installation-sequence { grid-template-columns: 1fr; }
  .installation-instruction { min-height: 0; }
  .advisor-card { grid-template-columns: auto 1fr; }
  .advisor-confidence { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .save-design-consent-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
  #safetymat-studio-root { width: 100vw; max-width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
  .step-nav { top: 0; width: calc(100% - 16px); margin-top: 10px; border-radius: 14px; }
  .step-tab { min-width: 128px; grid-template-columns: 30px 1fr; padding: 10px; }
  .step-tab > span { width: 28px; height: 28px; }
  .step-tab small { display: none; }
  .app-layout { width: calc(100% - 16px); margin-top: 14px; }
  .project-sidebar { grid-template-columns: 1fr; }
  .help-card { grid-column: auto; }
  .live-card { display: block; }
  .live-card .mini-preview { margin: 14px 0; min-height: 140px; }
  .panel-hero { padding: 23px; border-radius: 20px; }
  .panel-hero h2 { font-size: 2.15rem; }
  .hero-icon { display: none; }
  .content-card { padding: 20px; border-radius: 16px; }
  .save-design-heading, .save-design-account { align-items: flex-start; flex-direction: column; }
  .save-design-actions { width: 100%; flex-wrap: wrap; }
  .save-design-actions .primary-button { flex: 1 1 210px; }
  .section-heading { flex-direction: column; gap: 12px; }
  .installation-preview-card .section-heading { align-items: flex-start; }
  .installation-video-link { width: 100%; white-space: normal; }
  .installation-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .installation-step { grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; }
  .installation-step > span { grid-row: 1 / 3; margin: 0; }
  .installation-step small { display: block; }
  .installation-reassurance { align-items: stretch; flex-direction: column; }
  .installation-badge { align-self: stretch; }
  .material-detail-heading { align-items: stretch; flex-direction: column; }
  .material-detail-selection { min-width: 0; }
  .material-detail-media { aspect-ratio: 4 / 3; }
  .material-detail-figure figcaption { align-items: flex-start; flex-direction: column; }
  .material-detail-figure figcaption span { text-align: left; }
  .form-grid.two-col, .form-grid.three-col { grid-template-columns: 1fr; }
  .shape-picker { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .designer-layout, .visualizer-layout { grid-template-columns: minmax(0, 1fr); }
  .designer-canvas-card { padding-right: 12px; padding-left: 12px; }
  .design-plan-scroll { margin-inline: 0; padding-bottom: 0; overflow: hidden; overscroll-behavior-inline: auto; scrollbar-gutter: auto; touch-action: pan-y; }
  .mobile-plan-hint { display: block; }
  .design-canvas-wrap { width: 100%; min-width: 0; min-height: 0; height: var(--sm-plan-mobile-height, 300px); aspect-ratio: auto; }
  .design-canvas-wrap.is-compact-custom-plan { aspect-ratio: auto; }
  .design-svg { width: 100%; height: 100%; aspect-ratio: auto; }
  .plan-control.mobile-docked { transform: none !important; transform-origin: 0 0; }
  .plan-input-with-unit input { height: 24px !important; min-height: 24px !important; padding: 2px 13px 2px 3px !important; font-size: 16px !important; letter-spacing: -.04em; }
  .plan-input-with-unit[data-compact-value]::after { content: attr(data-compact-value); position: absolute; z-index: 2; inset: 0 13px 0 3px; display: flex; align-items: center; overflow: hidden; color: var(--sm-ink); font-size: 10px; font-weight: 850; letter-spacing: -.02em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .plan-input-with-unit[data-compact-value] input:not(:focus) { color: transparent !important; caret-color: transparent; }
  .plan-input-with-unit[data-compact-value]:focus-within::after { display: none; }
  .plan-input-with-unit b { right: 3px; font-size: .42rem; }
  .plan-overall-control.mobile-docked { padding: 4px; }
  .plan-overall-control.mobile-docked > span:first-child { font-size: .4rem; }
  .plan-point-control.mobile-docked { padding: 4px; }
  .plan-point-control.mobile-docked .plan-point-heading { grid-template-columns: 17px 1fr 17px; margin-bottom: 2px; }
  .plan-point-control.mobile-docked .plan-point-heading span { font-size: .42rem; }
  .plan-point-control.mobile-docked .plan-coordinate-grid { gap: 3px; }
  .plan-point-control.mobile-docked .plan-coordinate-grid label > span:first-child { font-size: .4rem; }
  .plan-point-control.mobile-docked .plan-input-with-unit input { padding-right: 3px !important; }
  .plan-point-control.mobile-docked .plan-input-with-unit[data-compact-value]::after { right: 3px; }
  .plan-point-control.mobile-docked .plan-input-with-unit b { display: none; }
  .plan-edge-control.mobile-docked { grid-template-columns: auto minmax(0, 1fr); gap: 3px; padding: 3px; }
  .plan-edge-control.mobile-docked > span:first-child { font-size: .42rem; }
  .plan-edge-control.mobile-docked .plan-input-with-unit input { height: 24px !important; min-height: 24px !important; }
  .plan-drain-status { padding: 7px 9px; font-size: .62rem; }
  .draw-message { right: 7px; bottom: 7px; left: 7px; padding: 8px 10px; font-size: .65rem; }
  .canvas-toolbar { flex-direction: column; }
  .canvas-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visualizer-stage { min-height: 440px; }
  .installation-stage { aspect-ratio: 4 / 3; }
  .recommendation-grid, .recommendation-details-grid { grid-template-columns: 1fr; }
  .recommendation-card:last-child { grid-column: auto; }
  .advisor-card { grid-template-columns: 1fr; text-align: left; }
  .advisor-icon { width: 52px; height: 52px; border-radius: 16px; }
  .advisor-confidence { grid-column: auto; }
  .quote-table { grid-template-columns: 1fr; }
  .quote-header { padding: 22px; }
  .quote-section { padding: 20px 22px; }
  .quote-status-line { padding: 13px 22px; }
  .quote-configuration { grid-template-columns: 74px 1fr; }
  .checkout-panel { grid-template-columns: 1fr; }
  .checkout-button { width: 100%; }
  .quote-actions { display: grid; }
  .panel-actions { align-items: stretch; flex-direction: column-reverse; }
  .panel-actions > * { width: 100%; }
  .settings-footer { align-items: stretch; flex-direction: column; }
  .settings-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .standard-price-row { grid-template-columns: 1fr; }
  .app-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
  .reset-dialog-shell { padding: 22px 20px; }
  .project-action { min-height: 60px; padding: 11px 14px; }
  .shape-picker { grid-template-columns: repeat(2, 1fr); }
  .visualizer-stage { min-height: 380px; }
  .installation-progress { grid-template-columns: 1fr; }
  .installation-stage-label { right: 12px; bottom: 11px; }
  .quote-header { flex-direction: column; }
  .quote-number { justify-items: start; text-align: left; }
  .quote-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .installation-media img { animation: none !important; }
  .installation-step,
  .installation-video-link { transition: none !important; }
}