/* Проект: RUNXIN — сайт runxin.ru (не ZVUMO). Общая страница подбора. Токены те же, что в конструкторе и сканере. */
:root{
  --bg:#fbfdff;--card:#fff;--ink:#0e1c2a;--ink-2:#33465a;--muted:#5f7387;
  --line:#e4eef6;--line-2:#d3e2ee;--soft:#f3f8fc;
  --accent:#0f83c4;--accent-d:#0b6ba3;--accent-l:#e7f4fc;
  --ok:#0b7a44;--ok-l:#eaf8f0;--ok-line:#c9ecd8;
  --warn-d:#8a5a12;--warn-l:#fff7e6;--warn-line:#f3dfae;
  --bad:#c0392b;--bad-l:#fdecea;--bad-line:#f5c6c0;
  --r-sm:12px;--r:18px;
  --sh-1:0 1px 2px rgba(14,28,42,.04),0 6px 18px rgba(14,28,42,.05);
  --head:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
img{max-width:100%}
a{color:var(--accent-d);text-decoration:none}
button{font:inherit}
.hidden{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px 72px}
h1,h2{margin:0;font-family:var(--head);letter-spacing:-.02em;line-height:1.16;font-weight:800}
h1{font-size:clamp(25px,3vw,36px);text-wrap:balance}
h1 .h-sub{display:block;margin-top:8px;font-size:.62em;font-weight:600;letter-spacing:-.01em;color:var(--ink-2)}
h2{font-size:20px}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{font:800 22px var(--head);color:var(--ink);letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px}
.brand small{font:400 13px system-ui,sans-serif;color:var(--muted);letter-spacing:0}
.phone{font-weight:600}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-d);background:var(--accent-l);border-radius:100px;padding:5px 12px;margin:0 0 12px}
.eyebrow.ok{color:var(--ok);background:var(--ok-l)}
.sub{color:var(--ink-2);margin:12px 0 0;max-width:640px}
.note{font-size:14px;color:var(--muted);margin:6px 0 0}
.fine{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.4}
.link{background:none;border:0;padding:0;color:var(--accent-d);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-row{margin:10px 0 0;font-size:14px}
.err{display:none;color:var(--bad);font-size:14px;margin:10px 0 0}
.err.show{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:20px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:var(--r-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;cursor:pointer;text-align:center;transition:background .15s}
.btn:hover{background:var(--accent-d);color:#fff}
.btn.ghost{background:#fff;color:var(--accent-d)}
.btn.ghost:hover{background:var(--accent-l);color:var(--accent-d)}
.btn.big{width:100%;min-height:52px;margin-top:14px}
.btn[disabled],.btn.wait{opacity:.6;cursor:default}
:focus-visible{outline:3px solid #7cc4ec;outline-offset:2px}

/* верх */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:28px;align-items:start;padding:26px 0 24px}   /* воздух под шапкой (владелец 06.11) */
.drop{background:#fff;border:1.5px dashed var(--line-2);border-radius:var(--r);padding:18px 20px}
.drop.over{border-color:var(--accent);background:var(--accent-l)}
.drop-t{margin:0 0 12px;font-weight:600}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btns .btn{flex:1 1 auto}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.phone-only{display:none!important}
body.phone .phone-only{display:inline-flex!important}
body.phone p.phone-only{display:block!important}
body.phone .pc-only{display:none!important}
.seen,.eng{margin:14px 0 0;padding:12px 16px 12px 32px;border-radius:var(--r-sm);font-size:15px;max-width:640px}
.seen{background:var(--soft)}
.eng{background:var(--warn-l);border:1px solid var(--warn-line);color:var(--warn-d)}
.seen li+li,.eng li+li{margin-top:4px}

/* ожидание */
.waitbox{margin-bottom:24px}
.progress{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:14px;position:relative}
.progress::after{content:"";position:absolute;inset:0 60% 0 0;background:var(--accent);border-radius:6px;animation:slide 1.3s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.progress::after{animation:none;inset:0}}

/* проверка цифр */
dialog.check{position:fixed;inset:0;margin:auto;width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;box-shadow:0 26px 60px rgba(11,40,70,.28);color:var(--ink)}
dialog.check:not([open]){display:none}
dialog.check::backdrop{background:rgba(14,28,42,.5)}
body:has(dialog.check[open]){overflow:hidden}
.dlg-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--ink-2);font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--sh-1)}
.dlg-x:hover{color:var(--ink)}
#chk-title{padding-right:46px}
.dlg-x:focus-visible{outline:3px solid #7cc4ec;outline-offset:2px}
.check{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;margin-bottom:24px;align-items:start;background:var(--soft);border-radius:var(--r);padding:22px}
.notice{background:var(--warn-l);border:1px solid var(--warn-line);color:var(--warn-d);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;margin:12px 0 0}
.rows{margin-top:14px;display:grid;gap:8px}
.row{display:grid;grid-template-columns:minmax(0,1.3fr) 150px minmax(120px,1fr);gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.row.over{border-color:var(--warn-line)}
.row b{font-weight:600;display:block;line-height:1.25}
.row small{color:var(--muted);font-size:12.5px}
.row small.doubt{color:var(--bad)}
.norm{font-size:12.5px;color:var(--muted);line-height:1.3}
.norm b{display:inline-block;font-size:12px;border-radius:100px;padding:1px 8px;margin-bottom:2px;font-weight:600}
.norm b.over{background:var(--warn-l);color:var(--warn-d)}
.norm b.ok{background:var(--ok-l);color:var(--ok)}
.field{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 12px;min-height:44px}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
.field input{flex:1;min-width:0;width:100%;border:0;background:transparent;font:inherit;color:inherit;padding:9px 0;outline:0}
.field em{font-style:normal;color:var(--muted);font-size:13px;margin-left:8px;white-space:nowrap}
.lbl{display:block;font-weight:600;margin:12px 0 6px;line-height:1.3}
.lbl small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.side{display:grid;gap:14px}
.photo{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;max-height:340px;overflow-y:auto}
.photo img{display:block;width:100%}

/* рабочая часть */
.work{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}   /* 06.11 владелец: схема во всю ширину, комплект ниже */
.left{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.stage-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tabs{display:inline-flex;background:var(--soft);border-radius:10px;padding:3px}
.tabs button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--ink-2);font-size:14px;min-height:36px}
.tabs button[aria-selected=true]{background:#fff;box-shadow:var(--sh-1);color:var(--ink);font-weight:600}
.pipe-scroll{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
#pipe{display:block;width:100%;height:auto}
@media (max-width:980px){#pipe{min-width:1000px}}   /* владелец 06.11: на телефоне схему не ужимать, листать вбок */
#pipe text{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;fill:var(--ink-2);font-size:14px}
#pipe .nm{font-family:var(--head);font-weight:700;font-size:17px;fill:var(--ink)}
#pipe .nm2{font-size:15px;fill:var(--ink-2)}
#pipe .num{font-weight:700;font-size:15px;fill:#fff}
#pipe .cap{font-size:14px;fill:var(--ink-2)}
#pipe .io{font-weight:700;font-size:13px;letter-spacing:.04em;fill:#1d6fd1}
#pipe .ic{font-weight:700;font-size:13px;fill:#2f7fd6}
#pipe .brand{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.12em;fill:rgba(110,96,60,.55)}
#pipe .brand.dark{fill:rgba(255,255,255,.5)}
#pipe .lead{stroke:#7aa6d6;stroke-width:1.3;stroke-dasharray:4 4}
#pipe .el{cursor:pointer;outline:none}
#pipe .el .sel{fill:transparent;stroke:transparent;stroke-width:2}
#pipe .el:hover .sel{fill:var(--soft)}
#pipe .el.on .sel,#pipe .el:focus-visible .sel{fill:var(--accent-l);stroke:var(--accent)}
#pipe .ghost circle{fill:#fff;stroke:var(--line-2);stroke-dasharray:4 3;stroke-width:1.6}
#pipe .ghost path{stroke:var(--muted);stroke-width:2;fill:none}
#pipe .ghost:hover circle,#pipe .ghost:focus-visible circle,#pipe .ghost.on circle{stroke:var(--accent);fill:var(--accent-l)}
.tech{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.tech img{display:block;min-width:760px;width:100%}
.tech.big{max-height:78vh;overflow:auto}
.tech.big img{width:auto;min-width:0;max-width:none}
.tech-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}


.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:100px;padding:7px 14px;cursor:pointer;font-size:14px;min-height:38px;color:var(--ink-2)}
.chip.off{border-style:dashed;color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* панель настройки */
.p-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.p-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;margin-top:14px}   /* 06.11 владелец: «увеличь фото оксидайзера» (было 200) */
.p-grid.soft{grid-template-columns:440px minmax(0,1fr)}   /* фото умягчителя с солевым баком горизонтальное: колонка шире */
.p-pic{margin:0;background:var(--soft);border-radius:var(--r-sm);overflow:hidden;align-self:start}
.p-pic img{display:block;width:100%;height:auto}
.grp{margin-top:16px}
.grp:first-child{margin-top:0}
.grp h3{font:800 15px var(--head);margin:0 0 8px}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.opts{display:grid;gap:8px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{position:relative;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;background:#fff}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-l)}
.opt:has(input:focus-visible){outline:3px solid #7cc4ec;outline-offset:2px}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.ck{flex:none;width:18px;height:18px;margin-top:2px;border:1.5px solid var(--line-2);border-radius:5px;background:#fff}
.opt input[type=radio]+.ck{border-radius:50%}
.opt input:checked+.ck{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.t{flex:1;min-width:0;line-height:1.3}
.t b{display:block;font-weight:600}
.t small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.p{flex:none;font-weight:600;font-size:14px;white-space:nowrap;margin-left:auto}
.p.in{color:var(--ok);font-weight:500}
.seg .opt{flex-direction:column;gap:2px;padding:10px;align-items:flex-start}
.seg .ck{display:none}
.seg .p{margin:0;font-weight:500;color:var(--ink-2)}
.seg .t b{font-family:var(--head);font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.15}   /* размер баллона крупно (владелец 06.11) */
.seg .flow{font-size:13px;color:var(--muted)}
.warn{background:var(--warn-l);border:1px solid var(--warn-line);color:var(--warn-d);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;margin:12px 0 0}
.p-actions{margin-top:14px}

/* итог */
.right{min-width:0}
.sum-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:8px 40px;align-items:start}
.sum-r{padding-top:6px}
.lines{list-style:none;margin:12px 0;padding:0;font-size:14.5px}
.lines li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.lines li span:last-child{white-space:nowrap;font-weight:600}
.piping{margin:0 0 10px;padding-left:18px;font-size:13.5px;color:var(--muted)}
.line-opt{margin-bottom:12px}
.sum-label{font-size:13px;color:var(--muted)}
.sum{font:800 30px var(--head);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.consent{display:flex;gap:8px;margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.35;cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
.done{margin-top:14px;background:var(--ok-l);border:1px solid var(--ok-line);border-radius:var(--r-sm);padding:14px}
.done b{font:800 18px var(--head)}
.done p{margin:6px 0 10px;font-size:14.5px}
.sbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line-2);padding:10px 16px;transform:translateY(110%);transition:transform .2s;z-index:5}
.sbar.show{transform:none}
.sbar-in{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1200px;margin:0 auto}
.sbar .sum{font-size:22px}
.wrap{padding-bottom:96px}

@media (max-width:980px){
  .hero,.check,.work{grid-template-columns:minmax(0,1fr)}
  .sum-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .wrap{padding:0 16px 96px}
  .card{padding:16px}
  .check{padding:16px;margin-left:-4px;margin-right:-4px}
  dialog.check{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .p-grid{grid-template-columns:minmax(0,1fr)}
  .p-pic{max-width:300px}
  .p-grid.soft{grid-template-columns:minmax(0,1fr)}
  .p-grid.soft .p-pic{max-width:100%}
  .seg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts.two{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr) 130px}
  .norm{grid-column:1/-1}
  .btns .btn{width:100%}
}