.thzs {
  --thzs-navy: #191536;
  --thzs-blue: #4ba6f8;
  --thzs-blue-d: #1f6fc0;
  --thzs-line: #c0d8f5;
  --thzs-bg: #f6f8fa;
  --thzs-card: #ffffff;
  --thzs-text: #191536;
  --thzs-muted: #55536e;
  --thzs-orange: #f0a43a;
  --thzs-red: #c8364d;
  position: relative;
  margin: 0 0 32px;
  color: var(--thzs-text);
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}
.thzs *, .thzs *::before, .thzs *::after { box-sizing: border-box; }
.thzs [hidden] { display: none !important; }

/* вкладки */
.thzs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; padding: 6px; border-radius: 6px; background: var(--thzs-navy); }
.thzs .thzs-tab {
  flex: 1 1 150px; min-height: 46px; margin: 0 !important; padding: 10px 14px !important;
  border: 0 !important; border-radius: 4px !important; background: transparent !important;
  color: #dfe2f5 !important; font: inherit !important; font-size: 15px !important; font-weight: 700 !important;
  line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important;
}
.thzs .thzs-tab:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.thzs .thzs-tab[aria-selected="true"] { background: var(--thzs-blue) !important; color: var(--thzs-navy) !important; }
.thzs .thzs-tab:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px; }

.thzs-lead { margin: 0 0 18px; color: var(--thzs-muted); }

.thzs-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.thzs-form { min-width: 0; }

.thzs-field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.thzs-label { display: block; margin: 0 0 8px; padding: 0; font-weight: 700; font-size: 15px; color: var(--thzs-text); }
.thzs-hint { margin: 6px 0 0; font-size: 13px; color: var(--thzs-muted); }

.thzs .thzs-input {
  width: 110px; min-height: 44px; margin: 0 !important; padding: 8px 10px !important;
  border: 1px solid var(--thzs-line) !important; border-radius: 4px !important; background: #fff !important;
  color: var(--thzs-text) !important; font: inherit !important; font-size: 16px !important; box-shadow: none !important;
}
.thzs .thzs-input:focus { outline: 3px solid rgba(75, 166, 248, .45) !important; outline-offset: 0; border-color: var(--thzs-blue) !important; }
.thzs .thzs-input-s { width: 84px; }
.thzs .thzs-select { width: 100%; max-width: 380px; }
.thzs-unit { color: var(--thzs-muted); font-size: 15px; }
.thzs-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thzs-range input[type="range"] { flex: 1 1 160px; min-width: 120px; height: 44px; margin: 0; accent-color: var(--thzs-blue-d); }

/* прилади */
.thzs-devs { display: grid; gap: 6px; }
.thzs-dev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--thzs-line); border-radius: 4px; background: #fff; }
.thzs-dev.is-on { background: #eef6ff; border-color: #9ccbf6; }
.thzs-dev-name { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-height: 44px; margin: 0; cursor: pointer; font-weight: 600; font-size: 15px; line-height: 1.3; }
.thzs-dev-name input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--thzs-blue-d); }
.thzs-dev-name small { display: block; font-weight: 400; font-size: 12.5px; color: var(--thzs-muted); }
.thzs-dev-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.thzs-dev:not(.is-on) .thzs-dev-fields { display: none; }
.thzs-dev:not(.is-on) { padding-top: 4px; padding-bottom: 4px; }
.thzs-step { display: inline-flex; align-items: center; }
.thzs .thzs-step-b {
  width: 36px; min-height: 44px; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--thzs-line) !important; background: var(--thzs-bg) !important; color: var(--thzs-navy) !important;
  font: inherit !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer; box-shadow: none !important; border-radius: 0 !important;
}
.thzs .thzs-step-b:first-child { border-radius: 4px 0 0 4px !important; }
.thzs .thzs-step-b:last-child { border-radius: 0 4px 4px 0 !important; }
.thzs .thzs-step-b:hover { background: #e3effc !important; }
.thzs .thzs-step-b:focus-visible { outline: 3px solid var(--thzs-blue) !important; outline-offset: 1px; position: relative; z-index: 1; }
.thzs .thzs-input-q { width: 48px; text-align: center; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; padding: 8px 2px !important; -moz-appearance: textfield; }
.thzs .thzs-input-q::-webkit-outer-spin-button, .thzs .thzs-input-q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.thzs-mini { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; color: var(--thzs-muted); }
.thzs-mini .thzs-input { width: 78px; padding: 8px 6px !important; }

.thzs-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; cursor: pointer; font-size: 15px; }
.thzs-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px; accent-color: var(--thzs-blue-d); }

/* чипи */
.thzs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.thzs .thzs-chip {
  min-height: 44px; margin: 0 !important; padding: 8px 14px !important;
  border: 1px solid var(--thzs-line) !important; border-radius: 4px !important; background: #fff !important;
  color: var(--thzs-navy) !important; font: inherit !important; font-size: 15px !important; font-weight: 600 !important;
  line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important;
}
.thzs .thzs-chip:hover { border-color: var(--thzs-blue) !important; }
.thzs .thzs-chip.is-on { background: var(--thzs-navy) !important; border-color: var(--thzs-navy) !important; color: #fff !important; }
.thzs .thzs-chip:focus-visible { outline: 3px solid var(--thzs-blue) !important; outline-offset: 2px; }
.thzs .thzs-link-b {
  margin: 8px 0 0 !important; padding: 10px 0 !important; min-height: 44px; border: 0 !important; background: none !important;
  color: var(--thzs-blue-d) !important; font: inherit !important; font-size: 14px !important; font-weight: 600 !important;
  text-decoration: underline !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; text-align: left;
}
.thzs .thzs-link-b:focus-visible { outline: 3px solid var(--thzs-blue) !important; outline-offset: 2px; }

/* результат */
.thzs-result { position: sticky; top: 20px; padding: 20px; border: 1px solid var(--thzs-line); border-radius: 6px; background: var(--thzs-bg); }
.thzs-result:focus { outline: none; }
.thzs .thzs-result-title { margin: 0 0 14px !important; padding: 0 !important; font-size: 20px !important; line-height: 1.25 !important; color: var(--thzs-navy) !important; border: 0 !important; }
.thzs .thzs-result-title::before, .thzs .thzs-result-title::after { display: none !important; }
.thzs-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.thzs-big > div { padding: 12px; border-radius: 4px; background: var(--thzs-navy); color: #fff; min-width: 0; }
.thzs-big dt { margin: 0 0 4px; font-size: 13px; font-weight: 400; color: #c9cce6; }
.thzs-big dd { margin: 0; font-size: 15px; color: #fff; line-height: 1.25; }
.thzs-big b { display: block; font-size: 24px; font-weight: 700; color: var(--thzs-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.thzs-big small { font-size: 13px; color: #c9cce6; }

.thzs-lines { margin: 14px 0 12px !important; padding: 0 !important; list-style: none !important; }
.thzs-lines li { margin: 0 0 6px !important; padding: 0 0 0 16px !important; position: relative; font-size: 15px; list-style: none !important; }
.thzs-lines li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--thzs-blue); }
.thzs-lines b { font-variant-numeric: tabular-nums; }

/* шкала ємності */
.thzs-gauge-track { position: relative; height: 26px; border-radius: 4px; background: #e2e8f0; overflow: visible; }
.thzs-gauge-need, .thzs-gauge-res { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: width .25s, left .25s; }
.thzs-gauge-need { background: var(--thzs-navy); border-radius: 4px 0 0 4px; }
.thzs-gauge-res { background: repeating-linear-gradient(135deg, var(--thzs-blue) 0 6px, #8fc8fb 6px 12px); }
.thzs-gauge-cap { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--thzs-orange); transition: left .25s; }
.thzs-gauge-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 13px; color: var(--thzs-muted); }
.thzs-gauge-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.thzs-gauge-legend .k-need { background: var(--thzs-navy); }
.thzs-gauge-legend .k-res { background: repeating-linear-gradient(135deg, var(--thzs-blue) 0 3px, #8fc8fb 3px 6px); }
.thzs-gauge-legend .k-cap { background: var(--thzs-orange); width: 4px; }
.thzs-gauge-legend .k-loss { background: #f3c7cf; }

/* хто скільки споживає */
.thzs-mix { display: flex; height: 14px; margin: 16px 0 8px; border-radius: 4px; overflow: hidden; background: #e2e8f0; }
.thzs-mix span { display: block; height: 100%; transition: width .25s; }
.thzs-mix span + span { box-shadow: inset 2px 0 0 #fff; }
.thzs-mix-legend { margin: 0 0 12px !important; padding: 0 !important; list-style: none !important; font-size: 13.5px; color: var(--thzs-muted); }
.thzs-mix-legend li { margin: 0 0 3px !important; padding: 0 !important; list-style: none !important; }
.thzs-mix-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; }

.thzs-have { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--thzs-line); }
.thzs-have .thzs-input { width: 130px; }
.thzs-have-out { margin: 8px 0 0; font-weight: 600; }
.thzs-have-out:empty { display: none; }
.thzs-note { margin: 12px 0 0; font-size: 14px; color: var(--thzs-muted); }
.thzs-note:empty { display: none; }

/* павербанк */
.thzs-icons { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; min-height: 40px; margin: 0 0 14px; }
.thzs-ico { width: 30px; height: 34px; }
.thzs-ico-bg > * { fill: #fff; stroke: #9aa6bd; stroke-width: 1.5; }
.thzs-ico-fill > * { fill: var(--thzs-blue); stroke: var(--thzs-navy); stroke-width: 1.5; }
.thzs-icons-more { align-self: center; font-size: 15px; color: var(--thzs-navy); }
.thzs-split { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #e2e8f0; }
.thzs-split span { display: block; height: 100%; transition: width .25s; }
.thzs-split-use { background: var(--thzs-navy); }
.thzs-split-loss { background: #f3c7cf; }
.thzs-time { height: 8px; margin: -2px 0 12px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.thzs-time span { display: block; height: 100%; background: var(--thzs-orange); transition: width .25s; }
.thzs-plane { margin: 0; padding: 10px 12px; border-radius: 4px; background: #fff; border: 1px solid var(--thzs-line); font-size: 14px; }

/* банк АКБ */
.thzs-bank { margin: 0 0 6px; overflow-x: auto; }
.thzs-bank svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.thzs-bank .b-body { fill: var(--thzs-navy); }
.thzs-bank .b-term { fill: #9aa6bd; }
.thzs-bank .b-txt { fill: #fff; font: 600 11px/1 system-ui, sans-serif; }
.thzs-bank .b-wire { stroke: #9aa6bd; stroke-width: 3; }
.thzs-bank .b-bus { stroke-width: 3; }
.thzs-bank .b-bus.n { stroke: #3a3a3a; }
.thzs-bank .b-bus.p { stroke: var(--thzs-red); }
.thzs-bank .b-sign { fill: var(--thzs-navy); font: 700 16px/1 system-ui, sans-serif; }
.thzs-bank .b-more { fill: var(--thzs-muted); font: 12px/1 system-ui, sans-serif; }

.thzs-foot { margin: 18px 0 0; font-size: 13.5px; color: var(--thzs-muted); }

/* закріплений рядок на телефоні */
.thzs-sticky {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 9990;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 10px 14px; border-radius: 6px;
  background: var(--thzs-navy); color: #fff !important; text-decoration: none !important;
  font-size: 15px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.thzs-sticky-more { flex: 0 0 auto; padding: 8px 12px; border-radius: 4px; background: var(--thzs-blue); color: var(--thzs-navy); font-size: 14px; font-weight: 700; }
.thzs-sticky:focus-visible { outline: 3px solid var(--thzs-blue); outline-offset: 2px; }

/* FAQ на сторінці */
.thzs-faq { margin: 0 0 10px; border: 1px solid #c0d8f5; border-radius: 4px; background: #fff; }
.thzs-faq > summary {
  display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 12px 16px !important; margin: 0 !important; cursor: pointer; list-style: none !important;
  font-weight: 700; font-size: 17px; line-height: 1.35; color: #191536; background: none !important; border: 0 !important;
}
.thzs-faq > summary::-webkit-details-marker { display: none; }
.thzs-faq > summary::before { display: none !important; content: none !important; }
.thzs-faq > summary::after {
  content: "" !important; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
    #191536 !important;
}
.thzs-faq[open] > summary::after { background: linear-gradient(#191536, #191536) center / 10px 2px no-repeat, #4ba6f8 !important; }
.thzs-faq > summary:focus-visible { outline: 3px solid #4ba6f8; outline-offset: 2px; }
.thzs-faq-a { padding: 0 16px 6px; }

@media (max-width: 899px) {
  .thzs-grid { grid-template-columns: 1fr; }
  .thzs-result { position: static; }
}
@media (max-width: 480px) {
  .thzs-tabs { padding: 4px; gap: 4px; }
  .thzs .thzs-tab { flex: 1 1 30%; padding: 8px 6px !important; font-size: 13.5px !important; }
  .thzs-dev { padding: 6px 8px; }
  .thzs-dev-fields { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .thzs .thzs-step-b { width: 32px; }
  .thzs .thzs-input-q { width: 38px; }
  .thzs-mini { min-width: 0; }
  .thzs-mini .thzs-input { width: 100%; min-width: 0; }
  .thzs-big b { font-size: 21px; }
  .thzs-result { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .thzs * { transition: none !important; }
}