.sanitary-page {
  --san-bg: #edf3f8;
  --san-surface: #fff;
  --san-soft: #f4f8fb;
  --san-text: #101b2b;
  --san-muted: #5b697a;
  --san-line: #d5e2ec;
  --san-primary: #0077c8;
  --san-primary-dark: #005a99;
  --san-accent: #11c5ef;
  --san-hot: #dc3f35;
  --san-cold: #1678c8;
  --san-drain: #66717c;
  --san-mount: #7655b6;
  --san-object: #df7b22;
  --san-shadow: 0 20px 55px rgba(5, 28, 52, .12);
}

.sanitary-tool,
.sanitary-tool button,
.sanitary-tool input { font: inherit; }

.sanitary-tool {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto 56px;
  padding-top: 102px;
  color: var(--san-text);
}

.sanitary-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 54px);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 91% 13%, rgba(17, 197, 239, .25), transparent 25rem),
    linear-gradient(135deg, #03070d 0%, #08131f 56%, #082b45 100%);
  box-shadow: var(--san-shadow);
}

.sanitary-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -60% auto;
  width: 430px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018);
}

.sanitary-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.sanitary-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
}

.sanitary-brand img {
  display: block;
  width: min(360px, 68vw);
  height: auto;
}

.sanitary-brand > span {
  color: rgba(255,255,255,.72);
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sanitary-eyebrow,
.sanitary-meta,
.sanitary-legend > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sanitary-eyebrow {
  color: #90e7fb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.sanitary-eyebrow > span {
  width: 24px;
  height: 2px;
  background: var(--san-accent);
}

.sanitary-hero h1 {
  max-width: 820px;
  margin: 18px 0 16px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.sanitary-hero-grid > div > p {
  max-width: 780px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
}

.sanitary-meta {
  flex-wrap: wrap;
  margin-top: 25px;
}

.sanitary-meta span {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.83);
  font-size: 12px;
  font-weight: 700;
}

.sanitary-legend {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.sanitary-legend > div:first-child {
  align-items: flex-start;
  justify-content: space-between;
}

.sanitary-legend > div span {
  max-width: 125px;
  color: rgba(255,255,255,.57);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.sanitary-legend ul {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.sanitary-legend li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.sanitary-legend li strong { display: block; color: #fff; font-size: 13px; }
.legend-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.legend-dot.hot { background: var(--san-hot); }
.legend-dot.cold { background: #3ba3ee; }
.legend-dot.drain { background: #a0abb5; }
.sanitary-legend > p { margin: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.55; }

.sanitary-notice,
.sanitary-controls,
.sanitary-detail,
.sanitary-practice {
  border: 1px solid var(--san-line);
  border-radius: 22px;
  background: var(--san-surface);
  box-shadow: var(--san-shadow);
}

.sanitary-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 20px 0;
  padding: 18px 20px;
  box-shadow: 0 12px 32px rgba(5,28,52,.08);
}

.sanitary-notice > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--san-primary);
  font-weight: 800;
}

.sanitary-notice strong { display: block; margin-bottom: 3px; }
.sanitary-notice p { margin: 0; color: var(--san-muted); font-size: 13px; line-height: 1.55; }

.sanitary-controls {
  position: relative;
  z-index: 1;
  padding: 22px;
}

.sanitary-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.sanitary-control-head strong { display: block; font-size: 18px; }
.sanitary-control-head span { color: var(--san-muted); font-size: 12px; }
.sanitary-reset { border: 0; color: var(--san-primary-dark); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }

.sanitary-control-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
}

.sanitary-search > span,
.sanitary-segment legend {
  display: block;
  margin-bottom: 7px;
  color: var(--san-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sanitary-search input {
  width: 100%;
  min-height: 47px;
  padding: 0 14px;
  border: 1px solid var(--san-line);
  border-radius: 12px;
  color: var(--san-text);
  background: var(--san-soft);
  outline: none;
}

.sanitary-search input:focus { border-color: var(--san-primary); box-shadow: 0 0 0 3px rgba(0,119,200,.12); background: #fff; }
.sanitary-segment { min-width: 0; margin: 0; padding: 0; border: 0; }
.sanitary-segment > div { display: flex; padding: 4px; border: 1px solid var(--san-line); border-radius: 12px; background: var(--san-soft); }
.sanitary-segment button { min-height: 37px; padding: 0 14px; border: 0; border-radius: 8px; color: var(--san-muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }
.sanitary-segment button[aria-pressed="true"] { color: #fff; background: var(--san-primary); box-shadow: 0 5px 14px rgba(0,119,200,.22); }

.sanitary-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--san-line);
}

.sanitary-filters button {
  padding: 8px 12px;
  border: 1px solid var(--san-line);
  border-radius: 999px;
  color: var(--san-muted);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.sanitary-filters button:hover,
.sanitary-filters button.active { border-color: var(--san-primary); color: #fff; background: var(--san-primary); }

.sanitary-object-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.sanitary-object-button {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--san-line);
  border-radius: 15px;
  color: var(--san-text);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}

.sanitary-object-button:hover { transform: translateY(-2px); border-color: #9fc2d9; box-shadow: 0 10px 25px rgba(5,28,52,.08); }
.sanitary-object-button.active { border-color: var(--san-primary); background: #f0f8fd; box-shadow: inset 0 0 0 1px var(--san-primary); }
.sanitary-object-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--san-primary-dark); background: #e5f4fc; font-size: 20px; font-weight: 800; }
.sanitary-object-copy { min-width: 0; }
.sanitary-object-copy strong,
.sanitary-object-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanitary-object-copy strong { font-size: 13px; }
.sanitary-object-copy span { margin-top: 3px; color: var(--san-muted); font-size: 10px; }

.sanitary-empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed #adc4d3; border-radius: 15px; color: var(--san-muted); background: #fff; text-align: center; }
.sanitary-detail { overflow: hidden; }
.sanitary-detail::before,
.sanitary-practice::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--san-primary), var(--san-accent)); }

.sanitary-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--san-line);
}

.sanitary-detail-head > div > span,
.sanitary-section-kicker { color: var(--san-primary); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.sanitary-detail-head h2 { margin: 5px 0; font-size: clamp(25px, 3vw, 36px); }
.sanitary-detail-head p { max-width: 760px; margin: 0; color: var(--san-muted); font-size: 13px; line-height: 1.55; }
.sanitary-badge { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; color: #17633c; background: #e8f7ee; font-size: 11px; font-weight: 800; }

.sanitary-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr); }
.sanitary-graphic-panel,
.sanitary-measure-panel { min-width: 0; padding: 22px; }
.sanitary-graphic-panel { border-right: 1px solid var(--san-line); background: #f4f7f9; }
.sanitary-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sanitary-panel-head h3 { margin: 0; font-size: 16px; }
.sanitary-panel-head > span { color: var(--san-muted); font-size: 10px; text-align: right; }

.sanitary-canvas {
  position: relative;
  display: grid;
  min-height: 500px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--san-line);
  border-radius: 17px;
  background: #fff;
}

.sanitary-canvas > img { display: block; width: 100%; height: 100%; min-height: 500px; object-fit: contain; }
.sanitary-zoom { position: absolute; right: 12px; bottom: 12px; padding: 9px 12px; border: 1px solid var(--san-line); border-radius: 10px; color: var(--san-primary-dark); background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(5,28,52,.12); cursor: pointer; font-size: 11px; font-weight: 800; }
.sanitary-mode-note { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 140px); padding: 8px 10px; border-radius: 9px; color: #fff; background: rgba(8,32,50,.82); font-size: 10px; }

.sanitary-keyfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.sanitary-keyfact { min-width: 0; padding: 12px; border: 1px solid var(--san-line); border-radius: 12px; background: var(--san-soft); }
.sanitary-keyfact span { display: block; color: var(--san-muted); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.sanitary-keyfact strong { display: block; margin-top: 4px; color: #16364e; font-size: 15px; overflow-wrap: anywhere; }
.sanitary-measure-list { display: grid; gap: 8px; }

.sanitary-measure {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--san-line);
  border-radius: 12px;
  background: #fff;
}

.sanitary-measure-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #fff; font-size: 12px; font-weight: 900; }
.sanitary-measure-number.hot { background: var(--san-hot); }
.sanitary-measure-number.cold { background: var(--san-cold); }
.sanitary-measure-number.drain { background: var(--san-drain); }
.sanitary-measure-number.mount { background: var(--san-mount); }
.sanitary-measure-number.object { background: var(--san-object); }
.sanitary-measure-meta { display: inline-block; margin-bottom: 5px; color: var(--san-primary-dark); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.sanitary-measure-label { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; }
.sanitary-measure-value { color: #16364e; white-space: nowrap; }
.sanitary-measure-position { margin-top: 4px; color: var(--san-muted); font-size: 10px; line-height: 1.45; }
.sanitary-measure-position strong { color: var(--san-text); }

.sanitary-warning { display: flex; gap: 10px; margin-top: 14px; padding: 13px; border-radius: 12px; color: #72501c; background: #fff6e5; font-size: 11px; line-height: 1.5; }
.sanitary-warning > span:first-child { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #dc9226; font-weight: 900; }
.sanitary-source-note { margin: 13px 0 0; padding-top: 13px; border-top: 1px solid var(--san-line); color: var(--san-muted); font-size: 10px; line-height: 1.55; }

.sanitary-practice { overflow: hidden; margin-top: 20px; padding: 25px; }
.sanitary-practice h2 { margin: 5px 0 18px; font-size: clamp(23px, 3vw, 32px); }
.sanitary-practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.sanitary-practice article { padding: 18px; border: 1px solid var(--san-line); border-radius: 15px; background: linear-gradient(180deg,#fbfdff,#f5f9fc); }
.sanitary-practice article > span { display: block; color: var(--san-primary); font-size: 11px; font-weight: 900; }
.sanitary-practice h3 { margin: 8px 0 5px; font-size: 15px; }
.sanitary-practice article p,
.sanitary-practice details p { margin: 0; color: var(--san-muted); font-size: 12px; line-height: 1.55; }
.sanitary-practice details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--san-line); }
.sanitary-practice summary { color: var(--san-primary-dark); cursor: pointer; font-size: 12px; font-weight: 850; }
.sanitary-practice details p { margin-top: 10px; }

.sanitary-dialog { width: min(1180px, calc(100% - 28px)); max-height: 92vh; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 32px 100px rgba(0,0,0,.34); }
.sanitary-dialog::backdrop { background: rgba(5,18,30,.78); backdrop-filter: blur(6px); }
.sanitary-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid var(--san-line); }
.sanitary-dialog-head button { width: 40px; height: 40px; border: 1px solid var(--san-line); border-radius: 11px; color: var(--san-text); background: #fff; cursor: pointer; font-size: 23px; }
.sanitary-dialog-body { max-height: calc(92vh - 72px); overflow: auto; padding: 14px; background: #f4f7f9; }
.sanitary-dialog-body img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; }

@media (max-width: 1100px) {
  .sanitary-hero-grid { grid-template-columns: 1fr; }
  .sanitary-legend { display: none; }
  .sanitary-object-strip { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sanitary-detail-grid { grid-template-columns: 1fr; }
  .sanitary-graphic-panel { border-right: 0; border-bottom: 1px solid var(--san-line); }
}

@media (max-width: 760px) {
  .sanitary-tool { width: calc(100% - 18px); padding-top: 82px; }
  .sanitary-hero { padding: 27px 20px 30px; border-radius: 20px; }
  .sanitary-brand { margin-bottom: 20px; }
  .sanitary-brand { align-items: flex-start; flex-direction: column; }
  .sanitary-brand > span { text-align: left; }
  .sanitary-control-grid { grid-template-columns: 1fr; }
  .sanitary-segment > div button { flex: 1; }
  .sanitary-object-strip { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .sanitary-object-button { flex: 0 0 190px; }
  .sanitary-detail-head { display: block; padding: 20px; }
  .sanitary-badge { display: inline-block; margin-top: 12px; }
  .sanitary-graphic-panel,
  .sanitary-measure-panel,
  .sanitary-practice { padding: 15px; }
  .sanitary-canvas,
  .sanitary-canvas > img { min-height: 330px; }
  .sanitary-practice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .sanitary-control-head { align-items: flex-start; }
  .sanitary-controls { padding: 16px; }
  .sanitary-keyfacts { grid-template-columns: 1fr; }
  .sanitary-measure-label { display: block; }
  .sanitary-measure-value { display: block; margin-top: 3px; }
  .sanitary-panel-head { align-items: flex-start; }
  .sanitary-canvas,
  .sanitary-canvas > img { min-height: 285px; }
}

@media print {
  .site-nav,
  .scroll-progress,
  .sanitary-hero,
  .sanitary-notice,
  .sanitary-controls,
  .sanitary-object-strip,
  .sanitary-zoom,
  .sanitary-practice,
  footer,
  .cookie-banner { display: none !important; }
  .sanitary-tool { width: 100%; margin: 0; padding: 0; }
  .sanitary-detail { border: 0; box-shadow: none; }
}