/* Калькулятор-конструктор. Токены наследуются из style.css темы */

.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:22px;align-items:start}
@media(max-width:960px){.calc-grid{grid-template-columns:1fr}}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:22px;align-items:start}
@media(max-width:960px){.grid{grid-template-columns:1fr}}
/* ---------- пластины ---------- */
.step{
  background:linear-gradient(180deg,var(--steel-800) 0%,var(--steel-900) 100%);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--line-hi), 0 18px 40px rgba(0,0,0,.45);
  padding:20px 20px 22px;margin-bottom:16px;
}
.step-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.step-idx{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--ti-2);
  border:1px solid var(--line);background:var(--steel-700);border-radius:5px;padding:3px 7px;letter-spacing:.05em}
.step-head h2{font-size:15.5px;font-weight:700;margin:0;letter-spacing:-.01em;font-family:'Manrope',sans-serif}
.step-head .hint{margin-left:auto;font-size:12px;color:var(--faint)}
/* ---------- дуга ---------- */
.arch-zone{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:center}
@media(max-width:620px){.arch-zone{grid-template-columns:1fr}}
#arch{width:100%;height:auto;display:block;touch-action:manipulation}
.tooth{fill:url(#gTooth);stroke:rgba(198,210,221,.22);stroke-width:1;cursor:pointer;transition:opacity .18s,filter .18s}
.tooth:hover{stroke:var(--ti-2)}
.tooth.on{fill:url(#gTi);stroke:rgba(242,246,249,.55);filter:url(#glow)}
.tooth.dim{opacity:.28;cursor:default}
.arch-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;fill:var(--faint);letter-spacing:.14em}
/* ---------- опции ---------- */
.opts{display:grid;gap:8px}
.opt{position:relative;display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  background:linear-gradient(180deg,var(--steel-700),var(--steel-800));
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;
  font:inherit;color:var(--text);transition:border-color .15s,box-shadow .15s,background .15s}
.opt:hover{border-color:rgba(198,210,221,.32)}
.opt.on{border-color:rgba(240,221,180,.5);
  background:linear-gradient(180deg,#232A2E,#1A2024);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(240,221,180,.12)}
.opt:focus-visible{outline:2px solid var(--ti-2);outline-offset:2px}
.opt .t{font-weight:600;font-size:14px}
.opt .s{font-size:12px;color:var(--faint);margin-top:2px;display:block}
.opts.cols{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:8px;vertical-align:1.5px;
  color:#F0DDB4;border:1px solid rgba(240,221,180,.35);background:rgba(240,221,180,.08)}
/* ---------- строки ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .lbl{font-size:14px}
.row .lbl small{display:block;font-size:12px;color:var(--faint)}
.row .pr{margin-left:auto;font-size:13px;color:var(--ti-3);white-space:nowrap}
.stepper{display:flex;align-items:center;gap:2px;background:var(--steel-900);border:1px solid var(--line);border-radius:8px;padding:3px}
.stepper button{width:28px;height:28px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:17px;
  line-height:1;cursor:pointer;color:var(--ti-2)}
.stepper button:hover{background:var(--steel-600)}
.stepper span{min-width:26px;text-align:center;font-size:14px;font-weight:600}
.sw{position:relative;width:44px;height:25px;border-radius:20px;border:1px solid var(--line);
  background:var(--steel-900);cursor:pointer;padding:0;flex:none;transition:background .18s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:linear-gradient(160deg,var(--ti-1),var(--ti-3));transition:transform .18s}
.sw.on{background:linear-gradient(180deg,#4A5A47,#33402F);border-color:rgba(240,221,180,.35)}
.sw.on::after{transform:translateX(19px);background:linear-gradient(160deg,#FBF0D6,#C7A96A)}
/* ---------- смета ---------- */
.est{position:sticky;top:86px;border-radius:var(--r);padding:22px 20px;
  background:linear-gradient(180deg,#1E262C 0%,#111619 60%,#0D1114 100%);
  border:1px solid rgba(198,210,221,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11), 0 26px 60px rgba(0,0,0,.6)}
.est h3{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 16px;color:var(--ti-3)}
.est-list{font-size:13px;margin:0 0 16px}
.est-list .li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(198,210,221,.08)}
.est-list .li .n{flex:1;min-width:0;color:rgba(220,228,234,.86)}
.est-list .li .q{color:var(--faint);font-size:12px}
.est-list .li .v{white-space:nowrap;color:var(--ti-1)}
.est-list .grp{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#C7A96A;padding:14px 0 5px}
.est-total{border-top:1px solid rgba(198,210,221,.24);padding-top:15px}
.est-total .t-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.est-total .t-row .lab{font-size:13px;color:var(--muted)}
.est-total .big{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(150deg,#FFFFFF,#CFDAE2 45%,#8795A0 62%,#F2F7FA);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.est-total .anchor{font-size:12px;color:var(--faint);margin-top:7px}
.est-total .anchor s{color:rgba(220,228,234,.3)}
.pack{border-radius:9px;padding:12px 13px;margin:14px 0 0;
  background:linear-gradient(180deg,rgba(240,221,180,.13),rgba(240,221,180,.04));
  border:1px solid rgba(240,221,180,.28)}
.pack .h{font-size:10px;color:#F0DDB4;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.pack .b{font-size:13px;margin-top:6px;color:rgba(220,228,234,.85)}
.pack .b b{color:#FBF0D6;font-weight:700}
.mo{display:flex;align-items:baseline;justify-content:space-between;margin-top:15px;font-size:13px;color:var(--muted)}
.mo b{font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--ti-1);font-weight:700}
.cta{display:block;width:100%;margin-top:16px;border:1px solid rgba(255,255,255,.22);border-radius:9px;
  background:linear-gradient(180deg,#F6E7C4 0%,#DCC28A 45%,#B99A57 100%);
  color:#221904;padding:14px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(0,0,0,.4);transition:filter .15s}
.cta:hover{filter:brightness(1.07)}
.fine{font-size:11px;color:rgba(220,228,234,.3);margin-top:12px;line-height:1.45}
/* мобильная панель итога */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:14px;padding:12px 16px;
  background:linear-gradient(180deg,#1A2228,#0C1013);border-top:1px solid rgba(198,210,221,.22);
  box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.bar .s{font-size:11px;color:var(--faint)}
.bar .v{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--ti-1)}
.bar button{margin-left:auto;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:11px 18px;
  background:linear-gradient(180deg,#F6E7C4,#B99A57);color:#221904;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:960px){.bar{display:flex}.est{position:static}}
/* ---------- «?» и поповер ---------- */
.q{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid rgba(198,210,221,.3);
  background:transparent;color:var(--ti-3);font:600 11px/1 'Manrope',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;margin-left:7px;vertical-align:1px;
  transition:border-color .15s,color .15s}
.q:hover{border-color:var(--champ-1);color:var(--champ-1)}
.q:focus-visible{outline:2px solid var(--ti-2);outline-offset:2px}
.pop{position:absolute;z-index:60;width:290px;max-width:calc(100vw - 32px);padding:15px 16px 14px;border-radius:11px;
  background:linear-gradient(180deg,#232C33,#131A1F);border:1px solid rgba(198,210,221,.28);
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.pop h4{margin:0 0 7px;font-size:14px;font-weight:700;letter-spacing:-.01em;font-family:'Manrope',sans-serif}
.pop p{margin:0 0 11px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.pop .meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--champ-1);margin-bottom:8px;display:block}
.pop a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ti-1);
  text-decoration:none;border-bottom:1px solid rgba(198,210,221,.35);padding-bottom:1px}
.pop a:hover{color:var(--champ-1);border-color:var(--champ-1)}
.pop .x{position:absolute;top:8px;right:9px;width:22px;height:22px;border:0;background:transparent;
  color:var(--faint);font-size:17px;line-height:1;cursor:pointer;border-radius:5px}
.pop .x:hover{color:var(--text);background:rgba(255,255,255,.06)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.supports{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.supports-l{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.supports-fixed{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.supports-fixed .supports-l{margin-bottom:0}
.supports-v{font-size:14px;color:var(--champ-1);font-weight:600}