/* ============================================================
   AIVA Calc — дизайн-система (Apple Liquid Glass / тёмная олива)
   Все правила — по разделу 4 ТЗ.
   ============================================================ */

/* ---- Шрифт Golos Text (self-host, вариативный) ---- */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/golos-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/golos-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Токены ---- */
:root {
  --bg:#15190F;
  --sage:#A3B18A;
  --olive:#8C9B6E;
  --olive-light:#C6D2A4;
  --cream:#F1F2E6;
  --ink-on-accent:#1B2113;
  --terra:#D08770;
  --glass:rgba(255,255,255,.055);
  --glass-shell:rgba(255,255,255,.035);
  --hairline:rgba(255,255,255,.11);
  --txt:#EDEFE2;
  --txt-soft:rgba(237,239,226,.55);

  --r-shell:26px;
  --r-core:20px;
  --r-input:13px;
  --r-pill:999px;

  --ease:cubic-bezier(.32,.72,0,1);
  --blur:18px;
}

/* ---- База ---- */
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.45;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
.tnum { font-variant-numeric:tabular-nums; }

/* ---- Атмосфера: фиксированный слой с размытыми блобами ---- */
.atmos {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.atmos::before, .atmos::after, .atmos i {
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
}
.atmos::before { /* sage сверху-слева */
  width:46vw; height:46vw; left:-8vw; top:-12vw;
  background:radial-gradient(circle at 30% 30%, var(--sage), transparent 70%);
}
.atmos::after { /* olive справа-снизу */
  width:52vw; height:52vw; right:-12vw; bottom:-18vw;
  background:radial-gradient(circle at 60% 40%, var(--olive), transparent 70%);
  opacity:.45;
}
.atmos i { /* cream акцент по центру */
  width:30vw; height:30vw; left:48%; top:38%;
  background:radial-gradient(circle, var(--cream), transparent 70%);
  opacity:.10;
}

/* ---- Каркас страницы ---- */
.wrap {
  max-width:1180px;
  margin:0 auto;
  padding:22px clamp(14px,3vw,28px) 40px;
}

/* ---- Шапка ---- */
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand .mark {
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--olive-light), var(--olive));
  color:var(--ink-on-accent);
  font-weight:700; font-size:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.35);
}
.brand .name { font-weight:600; font-size:17px; letter-spacing:.2px; }
.brand .sub { font-size:12px; color:var(--txt-soft); }

/* ---- Tabs (pill) ---- */
.tabs {
  display:inline-flex;
  gap:4px;
  padding:5px;
  background:var(--glass-shell);
  border:1px solid var(--hairline);
  border-radius:var(--r-pill);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
.tab {
  appearance:none; border:0; cursor:pointer;
  font:inherit; font-weight:600; font-size:13.5px;
  color:var(--txt-soft);
  padding:9px 16px;
  border-radius:var(--r-pill);
  background:transparent;
  transition:color .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.tab[aria-selected="true"] {
  color:var(--ink-on-accent);
  background:linear-gradient(160deg, var(--olive-light), var(--olive));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.3);
}
.tab:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }

/* ---- Double-bezel карточка ---- */
.shell {
  background:var(--glass-shell);
  border:1px solid var(--hairline);
  border-radius:var(--r-shell);
  padding:6px;
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  box-shadow:0 12px 34px rgba(0,0,0,.30);
}
.core {
  background:var(--glass);
  border:1px solid var(--hairline);
  border-radius:var(--r-core);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  padding:18px;
}

/* ---- Сетка приложения ---- */
.layout {
  display:grid;
  grid-template-columns:344px 1fr;
  gap:18px;
  margin-top:18px;
  align-items:start;
}
.col-inputs { position:sticky; top:14px; }
.panel[hidden] { display:none; }

/* ---- Поля ввода ---- */
.field { margin-bottom:13px; }
.field:last-child { margin-bottom:0; }
.field > label {
  display:block;
  font-size:12px; color:var(--txt-soft);
  margin-bottom:5px; font-weight:500;
}
.field .control { position:relative; }
.field input[type="number"] {
  width:100%;
  font:inherit; font-weight:600; font-size:15px;
  font-variant-numeric:tabular-nums;
  color:var(--txt);
  background:rgba(0,0,0,.18);
  border:1px solid var(--hairline);
  border-radius:var(--r-input);
  padding:10px 38px 10px 12px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.field input[type="number"] { -moz-appearance:textfield; }
.field input:focus {
  outline:none;
  border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(163,177,138,.25);
}
.field .unit {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--txt-soft); pointer-events:none;
}

/* Слайдер срока */
.field .slider-head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:7px;
}
.field .slider-head .val {
  font-weight:700; font-size:15px; color:var(--olive-light);
  font-variant-numeric:tabular-nums;
}
input[type="range"] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--olive) var(--p,56%), rgba(255,255,255,.12) var(--p,56%));
  outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(160deg, var(--olive-light), var(--olive));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,.25);
}
input[type="range"]::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.25);
  background:var(--olive-light);
}
input[type="range"]:focus-visible { box-shadow:0 0 0 3px rgba(163,177,138,.3); }

.inputs-title {
  font-size:13px; font-weight:600; color:var(--txt-soft);
  text-transform:uppercase; letter-spacing:.6px;
  margin-bottom:14px;
}

/* ---- Карточки результатов программ ---- */
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:12px;
}
.pcard .core { padding:16px; height:100%; }
.pcard .ptitle { font-size:13px; font-weight:600; color:var(--olive-light); margin-bottom:2px; }
.pcard .psub { font-size:11.5px; color:var(--txt-soft); margin-bottom:12px; }
.pcard .pay {
  font-size:26px; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; margin-bottom:2px;
}
.pcard .pay .cur { font-size:15px; font-weight:600; color:var(--txt-soft); }
.pcard .paylabel { font-size:11.5px; color:var(--txt-soft); margin-bottom:14px; }
.pcard dl { display:grid; grid-template-columns:1fr auto; gap:7px 10px; }
.pcard dt { font-size:12.5px; color:var(--txt-soft); }
.pcard dd { font-size:12.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.pcard .total-row dt, .pcard .total-row dd {
  border-top:1px solid var(--hairline); padding-top:8px; margin-top:1px; font-weight:700;
}

/* ---- Капсула «Выгода» с signature-бликом ---- */
.benefit {
  position:relative; overflow:hidden;
  border-radius:var(--r-shell);
  padding:20px 22px;
  margin-top:0;
  background:linear-gradient(150deg, var(--olive-light), var(--olive));
  color:var(--ink-on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(0,0,0,.32);
}
.benefit.neg {
  background:linear-gradient(150deg, #E2A28E, var(--terra));
}
.benefit .blabel { font-size:13px; font-weight:600; opacity:.85; }
.benefit .bval { font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15; }
.benefit .bnote { font-size:12.5px; opacity:.8; margin-top:2px; }
/* signature sheen */
.benefit::after {
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:sheen 5.5s var(--ease) 1.2s infinite;
}
@keyframes sheen { 0%{left:-60%} 18%{left:130%} 100%{left:130%} }

/* ---- Таблица сроков ---- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-core); }
table.terms { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.terms th, table.terms td {
  padding:8px 12px; text-align:right; font-size:12.5px; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.06);
}
table.terms th {
  position:sticky; top:0; background:rgba(21,25,15,.6); backdrop-filter:blur(8px);
  color:var(--txt-soft); font-weight:600; font-size:11.5px;
}
table.terms th:first-child, table.terms td:first-child { text-align:left; }
table.terms tr.sel td { background:rgba(163,177,138,.16); font-weight:700; }
table.terms tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--olive-light); }

.section-title { font-size:13px; font-weight:600; color:var(--txt-soft); margin:4px 0 12px; text-transform:uppercase; letter-spacing:.5px; }
.stack > * + * { margin-top:18px; }

/* ---- Кнопки (pill, button-in-button) ---- */
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.btn {
  appearance:none; border:1px solid var(--hairline); cursor:pointer;
  font:inherit; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:14px;
  padding:9px 9px 9px 18px;
  border-radius:var(--r-pill);
  transition:transform .15s var(--ease), background .25s var(--ease);
}
.btn:active { transform:scale(.98); }
.btn:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }
.btn .ic {
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  transition:transform .25s var(--ease);
}
.btn:hover .ic { transform:translateX(3px); }
.btn .ic svg { width:16px; height:16px; }
.btn-primary {
  background:linear-gradient(160deg, var(--olive-light), var(--olive));
  color:var(--ink-on-accent); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.3);
}
.btn-primary .ic { background:rgba(27,33,19,.18); color:var(--ink-on-accent); }
.btn-ghost { background:var(--glass); color:var(--txt); }
.btn-ghost .ic { background:rgba(255,255,255,.10); color:var(--txt); }

.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:rgba(27,33,19,.92); color:var(--cream);
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:10px 18px; font-size:13.5px; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  backdrop-filter:blur(10px); z-index:50;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.disclaimer { font-size:11.5px; color:var(--txt-soft); margin-top:14px; }

/* ---- Адаптив ---- */
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; }
  .col-inputs { position:static; }
  .topbar { flex-direction:column; align-items:flex-start; }
}

/* ---- Фоллбеки доступности ---- */
@media (prefers-reduced-transparency:reduce) {
  .tabs, .shell, .core { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .shell { background:#1d2215; }
  .core { background:#222818; }
  .tabs { background:#1d2215; }
  table.terms th { background:#1b2013; backdrop-filter:none; }
  .atmos { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .benefit::after { display:none; }
}