.safetymat-studio {
  --sm-blue: var(--awb-color6, #326afe);
  --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);
  --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);
  --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;
}

.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(5, 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 h1 { 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); }

.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(310px, 0.72fr) minmax(480px, 1.28fr); gap: 20px; align-items: start; }
.designer-controls { min-width: 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; }
.custom-measurement-editor { margin-top: 18px; padding: 16px; border: 1px solid var(--sm-border); border-radius: 14px; background: var(--sm-soft); }
.custom-measurement-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.custom-measurement-heading h3 { margin: 0 0 3px; font-size: 0.95rem; }
.custom-measurement-heading p { margin: 0; color: var(--sm-muted); font-size: 0.72rem; line-height: 1.45; }
.measurement-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--sm-mint); color: var(--sm-teal-dark); font-size: 0.67rem; font-weight: 800; }
.custom-point-table { display: grid; gap: 6px; }
.custom-point-header, .custom-point-row { display: grid; grid-template-columns: 58px minmax(88px, 1fr) minmax(88px, 1fr) 30px; gap: 8px; align-items: center; }
.custom-point-header { padding: 0 4px; color: var(--sm-muted); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; }
.custom-point-row { padding: 7px; border: 1px solid var(--sm-border); border-radius: 10px; background: #fff; }
.custom-point-row .input-with-unit input { min-height: 39px; padding: 7px 39px 7px 9px; border-radius: 9px; font-size: 0.79rem; }
.custom-point-row .input-with-unit b { right: 10px; font-size: 0.68rem; }
.custom-point-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.custom-point-name > span { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--sm-teal-dark); color: #fff; font-size: 0.72rem; }
.custom-point-name small { color: var(--sm-muted); font-size: 0.59rem; font-weight: 700; }
.custom-point-remove { display: grid; place-items: center; width: 28px; min-height: 28px; padding: 0; border: 1px solid var(--sm-border); border-radius: 8px; background: #fff; color: var(--sm-muted); cursor: pointer; font-size: 1rem; }
.custom-point-remove:hover { border-color: var(--sm-danger); color: var(--sm-danger); }
.custom-edge-summary { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--sm-border); }
.custom-edge-summary > strong { display: block; margin-bottom: 8px; font-size: 0.76rem; }
.custom-edge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.custom-edge-list > span { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; background: #fff; font-size: 0.67rem; }
.custom-edge-list b { min-width: 0; overflow-wrap: anywhere; }
.custom-edge-list em { flex: 0 0 auto; color: var(--sm-teal-dark); font-style: normal; font-weight: 800; }
.custom-edge-list p { grid-column: 1 / -1; margin: 0; color: var(--sm-muted); font-size: 0.72rem; }

.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: sticky; top: 182px; }
.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; }
.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; }
.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-canvas-wrap { position: relative; min-height: 470px; overflow: hidden; border: 1px solid var(--sm-border); border-radius: 18px; background: radial-gradient(circle at center, #fff, var(--sm-mint)); }
.design-svg { display: block; width: 100%; height: 470px; touch-action: none; }
.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 .custom-point { fill: #fff; stroke: var(--sm-teal); stroke-width: 3; cursor: pointer; }
.design-svg .custom-point.first { fill: var(--sm-teal); }
.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; }
.draw-message { position: absolute; 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-controls { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sm-border); }
.artwork-mode-control { 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; inset: 0; width: 100%; height: 100%; }
.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 .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; 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; align-items: flex-start; gap: 10px; margin-top: 13px; padding: 12px 14px; border-radius: 12px; background: var(--sm-soft); }
.finish-description strong { flex: 0 0 auto; }
.finish-description span { 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; }

.recommendation-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.check-list { display: grid; gap: 10px; }
.check-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--sm-border); }
.check-item:last-child { border-bottom: 0; }
.check-symbol { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; }
.check-symbol.ok { background: var(--sm-success-bg); color: var(--sm-success); }
.check-symbol.review { background: var(--sm-warning-bg); color: var(--sm-warning); }
.check-symbol.error { background: var(--sm-danger-bg); color: var(--sm-danger); }
.check-copy strong, .check-copy span { display: block; }
.check-copy strong { font-size: 0.82rem; }
.check-copy span { color: var(--sm-muted); font-size: 0.72rem; }
.check-value { font-size: 0.73rem; font-weight: 800; text-align: right; }

.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-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.direct-delivery-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 2px 0; color: var(--sm-muted); font-size: 0.74rem; line-height: 1.5; }
.direct-delivery-note span { color: var(--sm-teal-dark); font-size: 0.9rem; }
.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-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(5, 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) {
  .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 h1 { 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); }
  .design-canvas-wrap, .design-svg { min-height: 360px; height: 360px; }
  .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); }
  .custom-measurement-editor { padding: 12px; }
  .custom-measurement-heading { display: grid; }
  .measurement-status { justify-self: start; }
  .custom-point-header { display: none; }
  .custom-point-row { grid-template-columns: 44px minmax(0, 1fr) 30px; }
  .custom-point-name { grid-row: 1 / 3; align-self: start; }
  .custom-point-name small { display: none; }
  .custom-point-row > label:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .custom-point-row > label:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .custom-point-row .custom-point-remove { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .custom-edge-list { grid-template-columns: 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; }
}