/* ==========================================================================
   Тарифы и компоненты (/pricing)
   ==========================================================================
   A direct transfer of the approved design. Every value below — colour, size,
   radius, weight, shadow, breakpoint — is the one from that reference; the only
   changes are the word (компоненты, not модули) and a three-across grid.

   The palette lives in --pr-* variables scoped to .pricing-page rather than in
   the product's own tokens, because this page is deliberately its own thing and
   must not drift when the shared tokens are tuned. Same reason every class here
   is prefixed or scoped: nothing on this page reaches outside it, and nothing
   outside reaches in.
   ========================================================================== */

.pricing-page {
  --pr-bg: #f5f6f8;
  --pr-surface: #ffffff;
  --pr-surface-soft: #f8f8fb;
  --pr-text: #17181c;
  --pr-text-soft: #666b78;
  --pr-text-faint: #9599a5;
  --pr-border: #e5e6ec;
  --pr-border-strong: #d8d9e2;
  --pr-primary: #7657ff;
  --pr-primary-strong: #6542f5;
  --pr-primary-soft: #eeeaff;
  --pr-primary-softer: #f6f3ff;
  --pr-success: #1c9a73;
  --pr-success-soft: #e9f8f3;
  --pr-warning: #b76a13;
  --pr-warning-soft: #fff3df;
  --pr-danger: #e45268;
  --pr-radius-xl: 26px;
  --pr-shadow-sm: 0 1px 2px rgba(17, 18, 24, .04), 0 8px 24px rgba(17, 18, 24, .04);
  --pr-ring: 0 0 0 4px rgba(118, 87, 255, .14);

  width: min(1510px, 100%);
  margin: 0 auto;
  color: var(--pr-text);
  font-family: var(--font-sans);
}

html.dark .pricing-page {
  --pr-bg: #111216;
  --pr-surface: #18191f;
  --pr-surface-soft: #1e2027;
  --pr-text: #f5f5f8;
  --pr-text-soft: #b4b6c1;
  --pr-text-faint: #7f8290;
  --pr-border: #2b2d36;
  --pr-border-strong: #383a45;
  --pr-primary: #947bff;
  --pr-primary-strong: #a18cff;
  --pr-primary-soft: #2b254b;
  --pr-primary-softer: #211d34;
  --pr-success: #54cba7;
  --pr-success-soft: #173a31;
  --pr-warning: #f0ae5c;
  --pr-warning-soft: #3d2c18;
  --pr-danger: #ff7d91;
  --pr-shadow-sm: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .16);
}

.pricing-page *,
.pr-overlay * { box-sizing: border-box; }

.pricing-page button,
.pr-overlay button { border: 0; font: inherit; -webkit-tap-highlight-color: transparent; }
.pricing-page a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pricing-page svg,
.pr-overlay svg { display: block; }

.pr-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* <form> wrappers that exist only to carry a POST, and must not become a box. */
.pr-contents { display: contents; }

.pr-notice {
  width: min(1510px, 100%);
  margin: 0 auto 18px;
  padding: 13px 15px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 13px;
}
.pr-notice.danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* ------------------------------------------------------------- badges */

.pricing-page .pr-badge,
.pr-overlay .pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pricing-page .pr-badge.success { color: var(--pr-success); background: var(--pr-success-soft); }
.pricing-page .pr-badge.primary { color: var(--pr-primary); background: var(--pr-primary-soft); }
.pricing-page .pr-badge.warning { color: var(--pr-warning); background: var(--pr-warning-soft); }
.pricing-page .pr-badge.on-hero { background: rgba(255, 255, 255, .15); color: #fff; }

/* ------------------------------------------------------------ buttons */

.pricing-page .pr-btn,
.pr-overlay .pr-btn {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: .18s ease;
}
.pricing-page .pr-btn:hover,
.pr-overlay .pr-btn:hover { transform: translateY(-1px); }
.pricing-page .pr-btn:focus-visible,
.pr-overlay .pr-btn:focus-visible { outline: none; box-shadow: var(--pr-ring); }

.pricing-page .pr-btn-primary {
  color: var(--pr-primary-strong);
  background: #fff;
  box-shadow: 0 10px 24px rgba(39, 20, 105, .15);
}
.pricing-page .pr-btn-ghost-light {
  color: #fff;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .2);
}
.pricing-page .pr-btn-solid,
.pr-overlay .pr-btn-solid {
  color: #fff;
  background: var(--pr-primary, #7657ff);
  box-shadow: 0 9px 20px rgba(118, 87, 255, .22);
}
.pricing-page .pr-btn-solid:hover,
.pr-overlay .pr-btn-solid:hover { background: var(--pr-primary-strong, #6542f5); }
.pricing-page .pr-btn-secondary,
.pr-overlay .pr-btn-secondary {
  color: var(--pr-text);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
}

/* ------------------------------------------------------- status strip */

.status-strip {
  margin-bottom: 18px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  box-shadow: var(--pr-shadow-sm);
}
.status-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--pr-success);
  background: var(--pr-success-soft);
}
/* Nothing bought yet: the same tile, in the accent that is trying to sell. */
.status-strip:not(.is-licensed) .status-icon { color: var(--pr-primary); background: var(--pr-primary-soft); }
.status-main { min-width: 0; }
.status-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
}
.status-copy { margin-top: 3px; color: var(--pr-text-soft); font-size: 12px; }
.status-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pr-primary);
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}
.status-link .pr-icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- hero */

.pr-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
  gap: 34px;
  border-radius: var(--pr-radius-xl);
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .24), transparent 22%),
    radial-gradient(circle at 68% 120%, rgba(214, 198, 255, .36), transparent 34%),
    linear-gradient(135deg, #7454fb 0%, #6540eb 46%, #5130cc 100%);
  box-shadow: 0 22px 54px rgba(94, 63, 220, .24);
}
.pr-hero::before,
.pr-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  pointer-events: none;
}
.pr-hero::before { width: 320px; height: 320px; right: -90px; top: -190px; }
.pr-hero::after { width: 210px; height: 210px; right: 85px; bottom: -170px; }

.pr-hero-copy,
.pr-hero-price { position: relative; z-index: 1; }

.pr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .88;
}
.pr-eyebrow .pr-icon { width: 17px; height: 17px; }

.pr-hero h2 {
  max-width: 680px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(29px, 4vw, 47px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.055em;
}
.pr-hero-lead {
  max-width: 680px;
  margin: 15px 0 22px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.55;
}
.pr-hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .91);
  font-size: 13px;
  font-weight: 500;
}
.pr-hero-features li { display: flex; align-items: center; gap: 8px; }
.pr-hero-features .pr-icon { width: 17px; height: 17px; }

.pr-hero-price {
  align-self: center;
  min-width: 0;
  padding: 23px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
}
.pr-hero-price-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pr-hero-price-label { color: rgba(255, 255, 255, .72); font-size: 12px; }
.pr-hero-price-value {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 8px 0 5px;
}
.pr-hero-price-value strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.05em;
}
.pr-hero-price-value span { padding-bottom: 5px; color: rgba(255, 255, 255, .7); font-size: 13px; }
.pr-hero-price-saving { color: rgba(255, 255, 255, .76); font-size: 12px; min-height: 15px; }
.pr-hero-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-top: 18px;
}

/* ------------------------------------------------------- section head */

.pr-section-head {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.pr-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.035em;
}
.pr-section-head p { margin: 5px 0 0; color: var(--pr-text-soft); font-size: 13px; }

.pr-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* The month/year switch. Its fill rides on .tab-slider, the same moving
   highlight every other horizontal switcher in the panel uses — the look is the
   reference's, the movement is the product's. */
.pr-segments {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 13px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  box-shadow: var(--pr-shadow-sm);
}
.pr-segments .tab-slider {
  background: var(--pr-primary);
  border-radius: 9px;
  box-shadow: 0 7px 14px rgba(118, 87, 255, .22);
}
.pr-segment-btn {
  position: relative;
  z-index: 1;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--pr-text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: .18s ease;
}
.pr-segment-btn.active {
  color: #fff;
  background: var(--pr-primary);
  box-shadow: 0 7px 14px rgba(118, 87, 255, .22);
}
.pr-segments:has(.tab-slider) .pr-segment-btn.active { background: transparent; box-shadow: none; }
.pr-segment-btn:focus-visible { outline: none; box-shadow: var(--pr-ring); }

.pr-filter-select {
  min-height: 43px;
  padding: 0 37px 0 13px;
  color: var(--pr-text);
  background-color: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 13px;
  outline: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--pr-shadow-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239599a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
}
.pr-filter-select:focus { box-shadow: var(--pr-ring); }

/* ------------------------------------------------- the category picker

   The native <select> stays in the DOM, keeps its name and value, and still fires
   change — pricing.js only hides it and draws this on top, so the filter works the
   same whether or not the script ran. The icons are the ones the cards in each
   category already use, so the menu reads as a map of the catalogue rather than a
   list of words. */

.pr-select { position: relative; display: inline-block; }
.pr-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.pr-select-trigger {
  min-height: 43px;
  padding: 0 12px 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  color: var(--pr-text);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  box-shadow: var(--pr-shadow-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: .18s ease;
}
.pr-select-trigger:hover { border-color: var(--pr-border-strong); }
.pr-select-trigger:focus-visible { outline: none; box-shadow: var(--pr-ring); }
.pr-select.open .pr-select-trigger { border-color: color-mix(in srgb, var(--pr-primary) 45%, var(--pr-border)); }

.pr-select-tile {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--pr-primary);
  background: var(--pr-primary-soft);
}
.pr-select-tile .pr-icon { width: 16px; height: 16px; }

.pr-select-label { white-space: nowrap; }
.pr-select-chevron {
  width: 15px;
  height: 15px;
  margin-left: 3px;
  color: var(--pr-text-faint);
  transition: transform .18s ease;
}
.pr-select.open .pr-select-chevron { transform: rotate(180deg); }

.pr-select-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  min-width: 258px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(30, 26, 62, .16);
  animation: pr-select-in .14s ease both;
}
.pr-select-list[hidden] { display: none; }
@keyframes pr-select-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.pr-select-option {
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  background: transparent;
  color: var(--pr-text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  transition: background .14s ease;
}
.pr-select-option:hover,
.pr-select-option:focus-visible { outline: none; background: var(--pr-surface-soft); }
.pr-select-option.selected { background: var(--pr-primary-softer); color: var(--pr-primary); }
.pr-select-option.selected .pr-select-tile { color: #fff; background: var(--pr-primary); }

.pr-select-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-select-option-count {
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--pr-text-faint);
  background: var(--pr-surface-soft);
  border: 1px solid var(--pr-border);
  font-size: 10px;
  font-weight: 600;
}
.pr-select-option.selected .pr-select-option-count {
  color: var(--pr-primary);
  background: var(--pr-surface);
  border-color: color-mix(in srgb, var(--pr-primary) 30%, var(--pr-border));
}
.pr-select-tick { width: 15px; height: 15px; color: var(--pr-primary); opacity: 0; }
.pr-select-option.selected .pr-select-tick { opacity: 1; }

/* --------------------------------------------------------- catalogue */

.catalog-shell {
  padding: 18px;
  background: color-mix(in srgb, var(--pr-surface) 86%, var(--pr-bg));
  border: 1px solid var(--pr-border);
  border-radius: 24px;
  box-shadow: var(--pr-shadow-sm);
}
.catalog-shell .pr-section-head {
  margin: 0 0 16px;
  padding: 2px 2px 16px;
  border-bottom: 1px solid var(--pr-border);
}

.components-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.catalog-main { min-width: 0; }

.catalog-meta {
  min-height: 44px;
  margin-bottom: 12px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.catalog-meta-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pr-text-soft);
  font-size: 12px;
}
.catalog-meta-main strong { color: var(--pr-text); font-size: 13px; }
.catalog-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pr-primary);
  box-shadow: 0 0 0 5px var(--pr-primary-soft);
  flex: 0 0 auto;
}
.catalog-tip { color: var(--pr-text-faint); font-size: 11px; text-align: right; }

/* Three across, as asked. Stepped down only where a third column would squeeze
   the cards below their own minimum, not by taste. */
.component-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.component-card {
  position: relative;
  min-height: 232px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17, 18, 24, .03);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.component-card[hidden] { display: none; }
.component-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--pr-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.component-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pr-primary) 27%, var(--pr-border));
  box-shadow: 0 14px 34px rgba(36, 30, 76, .08);
}
.component-card:focus-visible { outline: none; box-shadow: var(--pr-ring); }
.component-card.selected {
  background: linear-gradient(180deg, var(--pr-surface) 0%, var(--pr-primary-softer) 145%);
  border-color: color-mix(in srgb, var(--pr-primary) 72%, var(--pr-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-primary) 11%, transparent), 0 12px 28px rgba(68, 49, 151, .08);
}
.component-card.selected::after { transform: scaleX(1); }
.component-card.soon { cursor: default; opacity: .82; }
.component-card.soon:hover { transform: none; box-shadow: 0 1px 2px rgba(17, 18, 24, .03); }

.component-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.component-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.select-check {
  min-width: 88px;
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--pr-text-soft);
  background: var(--pr-surface-soft);
  border: 1px solid var(--pr-border);
  font-size: 10px;
  font-weight: 600;
  transition: .18s ease;
}
.select-check .pr-icon {
  width: 13px;
  height: 13px;
  /* Иконка видна всегда (приглушённо), а не только у выбранной карточки: без неё
     слева от «Подключить/Продлить» зияло пустое место. При выборе становится яркой. */
  opacity: .5;
  transform: scale(1);
  stroke-width: 2.5;
  transition: .18s ease;
}
.component-card:hover .select-check {
  color: var(--pr-primary);
  border-color: color-mix(in srgb, var(--pr-primary) 28%, var(--pr-border));
  background: var(--pr-primary-softer);
}
.component-card.selected .select-check {
  color: #fff;
  background: var(--pr-primary);
  border-color: var(--pr-primary);
  box-shadow: 0 7px 16px rgba(118, 87, 255, .2);
}
.component-card.selected .select-check .pr-icon { opacity: 1; transform: scale(1); }

.component-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--pr-primary);
  background: var(--pr-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pr-primary) 8%, transparent);
  flex: 0 0 auto;
}
.component-icon .pr-icon { width: 21px; height: 21px; }

.component-card h3 {
  margin: 15px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.component-description {
  margin: 7px 0 15px;
  color: var(--pr-text-soft);
  font-size: 12px;
  line-height: 1.52;
}
.component-bottom {
  margin-top: auto;
  padding-top: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--pr-border);
}
.component-price-label {
  color: var(--pr-text-faint);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.component-price {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.component-price strong { font-family: var(--font-display); font-size: 19px; letter-spacing: -.04em; }
.component-price span { color: var(--pr-text-soft); font-size: 10px; }

.component-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--pr-primary);
  background: var(--pr-primary-soft);
  cursor: pointer;
  transition: .18s ease;
  flex: 0 0 auto;
}
.component-action:hover { color: #fff; background: var(--pr-primary); }
.component-action:focus-visible { outline: none; box-shadow: var(--pr-ring); }
.component-action .pr-icon { width: 16px; height: 16px; }

.pr-empty-state {
  grid-column: 1 / -1;
  padding: 52px 20px;
  text-align: center;
  color: var(--pr-text-soft);
  background: var(--pr-surface);
  border: 1px dashed var(--pr-border-strong);
  border-radius: 18px;
}

/* ------------------------------------------------------------- the set */

.selection-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 140px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(30, 26, 62, .08);
}
.selection-panel::before {
  content: "";
  height: 4px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--pr-primary), #a889ff);
}
.selection-panel-head {
  padding: 17px 17px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--pr-border);
}
.selection-panel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--pr-primary);
  background: linear-gradient(145deg, var(--pr-primary-softer), var(--pr-primary-soft));
  border-radius: 13px;
}
.selection-panel-icon .pr-icon { width: 20px; height: 20px; }
.selection-kicker {
  color: var(--pr-text-faint);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.selection-panel h3 {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.selection-count {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--pr-primary);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 7px 16px rgba(118, 87, 255, .2);
}

.selection-stats {
  margin: 14px 17px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.selection-stat {
  padding: 10px 11px;
  background: var(--pr-surface-soft);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  min-width: 0;
}
.selection-stat span {
  display: block;
  color: var(--pr-text-faint);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.selection-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-copy {
  margin: 12px 17px 10px;
  color: var(--pr-text-soft);
  font-size: 10px;
  line-height: 1.5;
}

.selection-list {
  min-height: 118px;
  max-height: min(320px, calc(100vh - 515px));
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0 14px 12px 17px;
  scrollbar-width: thin;
}
.selection-empty {
  min-height: 118px;
  padding: 20px 16px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--pr-text-faint);
  background: var(--pr-surface-soft);
  border: 1px dashed var(--pr-border-strong);
  border-radius: 14px;
  font-size: 10px;
  line-height: 1.55;
}
.selection-item {
  min-width: 0;
  min-height: 48px;
  padding: 7px 7px 7px 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  background: var(--pr-surface-soft);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  animation: selection-in .18s ease both;
}
@keyframes selection-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.selection-item-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--pr-success);
  background: var(--pr-success-soft);
  border-radius: 9px;
}
.selection-item-check .pr-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.selection-item-copy { min-width: 0; }
.selection-item-name {
  min-width: 0;
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selection-item-price {
  display: block;
  margin-top: 2px;
  color: var(--pr-text-faint);
  font-size: 9px;
}
.selection-remove {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--pr-text-faint);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: .16s ease;
}
.selection-remove:hover { color: var(--pr-danger); background: color-mix(in srgb, var(--pr-danger) 8%, transparent); }
.selection-remove .pr-icon { width: 13px; height: 13px; }

.selection-footer {
  margin-top: auto;
  padding: 14px 17px 17px;
  background: color-mix(in srgb, var(--pr-surface-soft) 65%, var(--pr-surface));
  border-top: 1px solid var(--pr-border);
}
.selection-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.selection-total-label { color: var(--pr-text-soft); font-size: 11px; }
.selection-total-period { margin-top: 2px; color: var(--pr-text-faint); font-size: 9px; }
.selection-total strong { font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: -.05em; }

.license-compare {
  margin: 12px 0;
  padding: 11px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
}
.license-compare-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--pr-text-soft);
  font-size: 9px;
  font-weight: 600;
}
.license-compare-top strong { color: var(--pr-text); font-size: 10px; }
.license-progress {
  height: 6px;
  margin: 8px 0 7px;
  overflow: hidden;
  background: var(--pr-primary-soft);
  border-radius: 999px;
}
.license-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--pr-primary), #a889ff);
  border-radius: inherit;
  transition: width .25s ease;
}
.selection-hint {
  min-height: 29px;
  color: var(--pr-text-soft);
  font-size: 9.5px;
  line-height: 1.45;
}
.selection-panel.is-upgrade .license-compare {
  border-color: color-mix(in srgb, var(--pr-primary) 35%, var(--pr-border));
  background: var(--pr-primary-softer);
}
.selection-panel.is-upgrade .selection-hint { color: var(--pr-primary); font-weight: 500; }

.selection-actions {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
}
.selection-actions .pr-btn { min-height: 42px; padding-inline: 13px; }
.selection-actions .pr-btn-secondary { padding: 0; }
.selection-actions .pr-btn:disabled {
  opacity: .44;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* -------------------------------------------------------- own licences */

.pr-active {
  margin-top: 18px;
  padding: 17px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 20px;
  box-shadow: var(--pr-shadow-sm);
}
.pr-active h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.pr-active-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pr-border);
  font-size: 12px;
}
.pr-active-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pr-active-name { font-weight: 600; }
.pr-active-until { color: var(--pr-text-soft); }

/* ------------------------------------------------------------- modal */

.pr-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18, 18, 25, .52);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  font-family: var(--font-sans);
  color: var(--pr-text, #17181c);
}
.pr-overlay.open { opacity: 1; pointer-events: auto; }

.pr-modal {
  width: min(540px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  padding: 22px;
  background: var(--pr-surface, #fff);
  border: 1px solid var(--pr-border, #e5e6ec);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .25);
  transform: translateY(16px) scale(.98);
  transition: transform .22s ease;
}
.pr-overlay.open .pr-modal { transform: translateY(0) scale(1); }

.pr-modal-head { display: flex; align-items: flex-start; gap: 13px; }
.pr-modal-title {
  margin: 1px 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.035em;
}
.pr-modal-sub { color: var(--pr-text-soft, #666b78); font-size: 12px; }
.pr-modal-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--pr-text-soft, #666b78);
  background: var(--pr-surface-soft, #f8f8fb);
  border-radius: 11px;
  cursor: pointer;
  flex: 0 0 auto;
}
.pr-modal-body {
  margin: 20px 0;
  color: var(--pr-text-soft, #666b78);
  font-size: 13px;
  line-height: 1.65;
}
.pr-modal-body p { margin: 0; }
.pr-modal-features {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}
.pr-modal-features[hidden] { display: none; }
.pr-modal-features li {
  display: flex;
  gap: 9px;
  color: var(--pr-text, #17181c);
  font-weight: 600;
}
.pr-modal-features .pr-icon {
  width: 17px;
  height: 17px;
  color: var(--pr-success, #1c9a73);
  margin-top: 2px;
}
.pr-modal-actions { display: flex; justify-content: flex-end; gap: 9px; }

/* The modal is portalled out of .pricing-page's variable scope, so it carries
   its own dark palette rather than inheriting one. */
html.dark .pr-overlay {
  --pr-surface: #18191f;
  --pr-surface-soft: #1e2027;
  --pr-text: #f5f5f8;
  --pr-text-soft: #b4b6c1;
  --pr-border: #2b2d36;
  --pr-primary: #947bff;
  --pr-primary-strong: #a18cff;
  --pr-primary-soft: #2b254b;
  --pr-primary-softer: #211d34;
  --pr-success: #54cba7;
  --pr-success-soft: #173a31;
}

/* ------------------------------------------------------- breakpoints */

@media (max-width: 1500px) {
  .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .components-layout { grid-template-columns: minmax(0, 1fr) 326px; }
  .pr-hero { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 980px) {
  .components-layout { grid-template-columns: 1fr; }
  .catalog-shell { padding: 14px; }
  .selection-panel {
    position: static;
    max-height: none;
    min-height: 0;
    grid-row: 1;
  }
  .selection-list { max-height: 250px; }
  .selection-footer { margin-top: 0; }
}

@media (max-width: 900px) {
  .pr-hero { grid-template-columns: 1fr; }
  .pr-hero-price { max-width: 520px; }
}

@media (max-width: 680px) {
  .status-strip { align-items: flex-start; }
  .status-link { display: none; }
  .pr-hero { padding: 22px; border-radius: 22px; }
  .pr-hero h2 { font-size: 31px; }
  .pr-hero-actions { grid-template-columns: 1fr; }
  .pr-section-head { align-items: stretch; flex-direction: column; }
  .pr-controls { justify-content: space-between; }
  .pr-select { flex: 1; min-width: 0; }
  .pr-select-trigger { width: 100%; }
  .pr-select-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .pr-select-list { left: 0; right: 0; min-width: 0; }
  .catalog-shell { padding: 12px; border-radius: 20px; }
  .catalog-shell .pr-section-head { padding-bottom: 13px; }
  .catalog-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .catalog-tip { text-align: left; }
  .selection-list { max-height: 260px; }
  .component-grid { grid-template-columns: 1fr; }
  .component-card { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page *,
  .pricing-page *::before,
  .pricing-page *::after,
  .pr-overlay,
  .pr-overlay * { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   Срок подписки: ползунок в футере набора, прямо над итогом — итог первым и
   меняется от него. Токены только --pr-*: страница не видит глобальных
   --color-*, и прошлая версия на них выглядела чужой.
   ========================================================================== */
.months-picker {
  margin: 0 0 12px;
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
}
.months-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.months-label {
  color: var(--pr-text-faint);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.months-value {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--pr-text-soft);
  font-size: 10px;
}
.months-value b {
  font-family: var(--font-display);
  color: var(--pr-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Дорожка заливается до бегунка (--fill ставит скрипт) тем же градиентом, что
   полоса сравнения с лицензией: обе показывают «сколько уже набрано». */
.months-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 2px 0;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(90deg,
    var(--pr-primary) 0%, #a889ff var(--fill, 0%),
    var(--pr-primary-soft) var(--fill, 0%));
}
.months-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--pr-primary);
  border: 3px solid var(--pr-surface);
  box-shadow: 0 2px 8px rgba(118, 87, 255, .35);
  transition: transform .16s ease;
}
.months-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.months-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 3px solid var(--pr-surface);
  background: var(--pr-primary);
  box-shadow: 0 2px 8px rgba(118, 87, 255, .35);
}
.months-range:focus-visible { box-shadow: var(--pr-ring); }

.months-scale {
  display: flex;
  justify-content: space-between;
  color: var(--pr-text-faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.months-note {
  color: var(--pr-text-soft);
  font-size: 9.5px;
  line-height: 1.45;
}
.months-note.is-saving { color: var(--pr-success); font-weight: 600; }
.months-badge {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--pr-success);
  background: var(--pr-success-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}
.months-badge[hidden] { display: none; }

/* Тот же пикер в герое, на фиолетовом стекле: та же геометрия, белая шкала —
   собственных токенов у героя нет, он всегда тёмно-фиолетовый в обеих темах. */
.pr-hero-price .months-picker {
  margin: 13px 0 0;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
}
.pr-hero-price .months-label { color: rgba(255, 255, 255, .6); }
.pr-hero-price .months-value { color: rgba(255, 255, 255, .75); }
.pr-hero-price .months-value b { color: #fff; }
.pr-hero-price .months-range {
  background: linear-gradient(90deg,
    #fff 0%, #fff var(--fill, 0%),
    rgba(255, 255, 255, .26) var(--fill, 0%));
}
.pr-hero-price .months-range::-webkit-slider-thumb {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 2px 10px rgba(24, 12, 72, .45);
}
.pr-hero-price .months-range::-moz-range-thumb {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 2px 10px rgba(24, 12, 72, .45);
}
.pr-hero-price .months-range:focus-visible { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.pr-hero-price .months-scale { color: rgba(255, 255, 255, .55); }
.pr-hero-price .months-note { color: rgba(255, 255, 255, .7); }
.pr-hero-price .months-note.is-saving { color: #fff; }
.pr-hero-price .months-badge { color: var(--pr-primary-strong); background: rgba(255, 255, 255, .92); }

/* ==========================================================================
   Полная лицензия первой карточкой каталога. Выбрана — остальные карточки
   серые и «прожатые»: решать по ним больше нечего, всё входит в лицензию.
   ========================================================================== */
.component-card.full-card {
  background: linear-gradient(160deg, var(--pr-primary-softer) 0%, var(--pr-surface) 60%);
  border-color: color-mix(in srgb, var(--pr-primary) 34%, var(--pr-border));
}
.component-card.full-card::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--pr-primary), #a889ff);
}
.component-card.full-card .component-icon {
  color: #fff;
  background: linear-gradient(145deg, var(--pr-primary), #a889ff);
  box-shadow: 0 7px 16px rgba(118, 87, 255, .28);
}

.component-grid.full-mode .component-card:not(.full-card) {
  pointer-events: none;
  filter: grayscale(1);
  opacity: .55;
  transform: none;
  box-shadow: none;
}
/* «Прожатость»: пилюля выбора в нажатом состоянии, но серая — компонент включён
   лицензией, а не выбран отдельно. */
.component-grid.full-mode .component-card:not(.full-card) .select-check {
  color: #fff;
  background: var(--pr-text-faint);
  border-color: var(--pr-text-faint);
  box-shadow: none;
}
.component-grid.full-mode .component-card:not(.full-card) .select-check .pr-icon {
  opacity: 1;
  transform: scale(1);
}

/* Строка лицензии в наборе — с короной и фиолетовым акцентом вместо галочки. */
.selection-item.is-full {
  background: var(--pr-primary-softer);
  border-color: color-mix(in srgb, var(--pr-primary) 30%, var(--pr-border));
}
.selection-item.is-full .selection-item-check {
  color: var(--pr-primary);
  background: var(--pr-primary-soft);
}

/* ---------- промокод в корзине ---------- */
.promo-box { display: grid; gap: 0.4rem; }
.promo-row { display: flex; gap: 0.5rem; }
.promo-input {
  flex: 1; min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font: inherit; font-size: 0.85rem;
  text-transform: uppercase;
}
.promo-input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.promo-status { font-size: 0.78rem; }
.promo-status.is-ok { color: var(--color-success, #16a34a); }
.promo-status.is-err { color: var(--color-danger, #dc2626); }

/* ---------------------------------------------------------------- единый тариф
   Карточки компонентов теперь информационные: всё входит в полную лицензию, цену
   по отдельности не показываем, кликать не по чему. Оставляем иконку, название,
   описание, бейдж «Включено в лицензию» и ссылку «Подробнее». */
.component-grid--showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.component-card.is-included {
  min-height: 0;
  cursor: default;
}
.component-card.is-included::after { content: none; }
.component-card.is-included:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--pr-primary) 20%, var(--pr-border));
  box-shadow: 0 8px 22px rgba(36, 30, 76, .06);
}
.component-card.is-included .component-description { margin-bottom: 14px; }
.component-more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--pr-primary);
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: gap .18s ease, color .18s ease;
}
.component-more .pr-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.component-more:hover { gap: 9px; color: var(--pr-primary-strong); }
.component-more:focus-visible { outline: none; box-shadow: var(--pr-ring); border-radius: 8px; }

/* Промокод переехал в герой (корзины больше нет) — светлая версия на тёмном фоне. */
.pr-hero-promo { margin-top: 16px; display: grid; gap: 8px; }
.pr-hero-promo-label {
  color: rgba(255, 255, 255, .66);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}
.pr-hero-promo .promo-row { gap: 8px; }
.pr-hero-promo .promo-input {
  padding: 11px 13px;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 12px;
  letter-spacing: .06em;
  transition: border-color .18s ease, background .18s ease;
}
.pr-hero-promo .promo-input::placeholder { color: rgba(255, 255, 255, .5); letter-spacing: .06em; }
.pr-hero-promo .promo-input:focus {
  outline: none;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
}
/* «Применить» живёт на стеклянной карточке, а не на тёмной панели —
   поэтому здесь стекло, а не .pr-btn-secondary (та была чёрной и чужой). */
.pricing-page .pr-hero-promo .pr-btn-secondary {
  flex: 0 0 auto;
  padding: 0 16px;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: none;
}
.pricing-page .pr-hero-promo .pr-btn-secondary:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .4);
}
.pr-hero-promo .promo-status { margin-top: 1px; color: rgba(255, 255, 255, .88); font-size: 12px; }
.pr-hero-promo .promo-status.is-ok { color: #b8ffd9; }
.pr-hero-promo .promo-status.is-err { color: #ffc7cf; }

/* Тонкая линия отделяет «настройку заказа» (срок + промокод) от «оплаты». */
.pr-hero-sep {
  height: 1px;
  margin: 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22) 18%, rgba(255, 255, 255, .22) 82%, transparent);
}
.pr-hero-actions { margin-top: 14px; }

@media (max-width: 900px) {
  .component-grid--showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .component-grid--showcase { grid-template-columns: 1fr; }
}