/* Конструктор тарифа: кабинет (billing/konstruktor.html) и сайт (/tarify/,
   ссылкой site/assets/css/konstruktor.css), скрипт ui2/js/konstruktor.js.
   Цвета — переменные языка сайта (--фон-мягкий, --рамка, --акцент…): на сайте
   их задаёт sait-2026.css, в кабинете konstruktor-kabinet.css сводит их
   к токенам кабинета, поэтому тёмная тема и цвет школы работают сами. */


.kt { padding-top: .25rem; }
.kt-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.kt-left { flex: 999 1 34rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.kt-sum {
  flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem;
  background: var(--фон-мягкий); border: 1px solid var(--рамка); border-radius: var(--радиус);
  box-shadow: var(--тень-карта); padding: 1.25rem 1.5rem;
}
.kt-card {
  background: var(--фон-мягкий); border: 1px solid var(--рамка); border-radius: var(--радиус);
  box-shadow: var(--тень-карта); overflow: hidden;
}
.kt-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: 1.1rem 1.5rem .5rem; }
.kt-card-head h2, .kt-sum h2 { margin: 0; font-size: 1.125rem; }
.kt-card-head span, .kt-muted, .kt-note { color: var(--текст-тише); font-size: .8125rem; margin: 0; }

.kt-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--рамка);
}
.kt-row.up { background: var(--акцент-едва); }
.kt-row.down { background: color-mix(in srgb, var(--bs-warning) 8%, var(--paper)); }
.kt-row.off { opacity: .55; }
.kt-what { flex: 999 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.kt-name { display: flex; align-items: center; gap: .4rem; font-size: 1rem; }
.kt-q {
  width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--рамка); background: var(--фон-мягкий); color: var(--текст-тише);
  font: 600 .8125rem/1 inherit;
}
.kt-q.open { background: var(--акцент-тьма); border-color: var(--акцент-тьма); color: #fff; }
.kt-info { margin: 0; padding: .5rem .65rem; border-radius: .375rem; background: var(--фон-серый); font-size: .8125rem; line-height: 1.5; }

.kt-bar { height: .375rem; max-width: 22rem; border-radius: 3rem; background: var(--фон-серый); overflow: hidden; }
.kt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--акцент-тьма); transition: width .2s cubic-bezier(.23,1,.32,1); }
.kt-bar i.high { background: var(--bs-warning); }

.kt-ctl { flex: 0 0 8rem; display: flex; justify-content: flex-end; }
.kt-stepper { display: flex; align-items: center; border: 1px solid var(--рамка); border-radius: .375rem; background: var(--фон-мягкий); }
.kt-stepper button {
  width: 2.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer;
  font-size: 1.125rem; color: var(--текст);
}
.kt-stepper button:disabled { cursor: not-allowed; color: var(--текст-слабо); }
.kt-stepper span { min-width: 3.5rem; text-align: center; font-weight: 650; white-space: nowrap; }
.kt-switch {
  position: relative; width: 3.2rem; height: 1.95rem; padding: 0; border: 0; border-radius: 2rem;
  background: var(--bs-secondary-bg); cursor: pointer; transition: background-color .2s ease;
}
.kt-switch[aria-checked="true"] { background: var(--акцент-тьма); }
.kt-switch span {
  position: absolute; top: .125rem; left: .125rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.23,1,.32,1);
}
.kt-switch[aria-checked="true"] span { transform: translateX(1.25rem); }

.kt-price { flex: 0 0 6.5rem; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.kt-price b { font-size: 1.0625rem; white-space: nowrap; }
.kt-price small { font-size: .75rem; white-space: nowrap; }
.kt .plus { color: var(--акцент-текст); }
.kt .minus { color: var(--bs-warning-text-emphasis); }

.kt-toggle {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%;
  min-height: 3.5rem; padding: .9rem 1.5rem; border: 0; background: transparent; cursor: pointer;
  text-align: left; font: inherit; color: var(--текст);
}
.kt-toggle span { display: flex; flex-direction: column; gap: .1rem; }
.kt-toggle small { color: var(--текст-тише); font-size: .8125rem; }
.kt-toggle i { font-style: normal; font-size: 1.4rem; color: var(--текст-тише); transition: transform .2s cubic-bezier(.23,1,.32,1); }
.kt-toggle i.open { transform: rotate(90deg); }
.kt-history { list-style: none; margin: 0; padding: 0 1.5rem 1rem; }
.kt-history li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--рамка); font-size: .875rem; }

.kt-over { color: var(--текст-тише); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kt-date { display: block; font-size: 1.6rem; }
.kt-sec { display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--рамка); padding-top: .9rem; }
.kt-pair { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.kt-total { font-size: 1.75rem; white-space: nowrap; }
.kt-changes { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .9rem; border-radius: .5rem; background: var(--фон-серый); }
.kt-changes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.kt-changes li { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; line-height: 1.45; }
.kt-changes li b { white-space: nowrap; }

.kt-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: .5rem; background: var(--фон-серый); }
.kt-periods button {
  min-height: 2.5rem; padding: .4rem .5rem; border: 0; border-radius: .375rem; background: transparent;
  font: inherit; font-size: .875rem; color: var(--текст-тише); cursor: pointer;
}
.kt-periods button[aria-pressed="true"] { background: var(--фон-мягкий); color: var(--текст); font-weight: 650; box-shadow: 0 1px 4px rgba(38,48,28,.16); }

.kt-btn {
  min-height: 3rem; padding: .65rem 1.1rem; border: 0; border-radius: .5rem; cursor: pointer;
  background: var(--акцент); color: var(--акцент-на); font: inherit; font-weight: 650;
  box-shadow: var(--тень-акцент); transition: transform .16s ease-out;
}
.kt-btn:active { transform: scale(.97); }
a.kt-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.kt-btn.second { background: var(--фон-мягкий); color: var(--акцент-текст); border: 1px solid var(--акцент-тьма); box-shadow: none; }
.kt-link { text-align: center; font-size: .875rem; }
.kt-rules { align-self: flex-start; padding: .25rem 0; border: 0; background: transparent; color: var(--акцент-текст); font: inherit; font-size: .8125rem; cursor: pointer; }

@media (max-width: 40rem) {
  .kt-row { padding: .9rem 1rem; }
  .kt-ctl { flex: 1 1 auto; justify-content: flex-start; }
  .kt-card-head, .kt-toggle { padding-left: 1rem; padding-right: 1rem; }
  .kt-sum { padding: 1rem; }
}

.kt-error { margin: 0; padding: .5rem .65rem; border-radius: .375rem; background: color-mix(in srgb, var(--bs-danger) 12%, var(--paper)); color: var(--bs-danger-text-emphasis); font-size: .8125rem; }