/* v5-cabinet.css — кабінет 1:1 із затвердженого мока
   redesign-2026/19-cabinet-v5.html (мок #11 у списку, «+» Віктора).
   Хром (шапка/підвал) сюди НЕ входить — його дає v5-chrome.css;
   панель демо-режимів мока (.mb) на проді не потрібна: стан визначають
   реальні дані (квитки/броні за підтвердженим телефоном). */

/* ═══════════════════════════════════════════════════════════════════════════
   CABINET v5 «ПОЛИЦЯ КВИТКІВ» (CA1) · мова «Вікна поїзда».
   Сюди повертається людина з WayForPay — обома дверима:

   • УСПІХ  → зверху великий АКТИВНИЙ КВИТОК-артефакт (SU1: успіх завжди
     показує предмет, не галочку): QR, місця, «Гарної дороги!» (SU2).
   • НЕУСПІХ (закрив банк / не встиг / відхилено) → зверху БРОНЬ:
     та сама картка, але з амбер-свічкою П.57/B5 — смуга, що тане, і
     людський дедлайн «тримаємо місця до 23:12». Одна дія: «Оплатити»
     (сума в кнопці, П.58). Чесно: не встигнете — бронь зникне сама,
     гроші не списуються (ER-голос без паніки, E1).
   • ПОРОЖНЬО → ES3: «Тут житимуть ваші квитки» + одна дія (пошук).

   «Де на сайті видно бронь і активні квитки» (питання Віктора):
   у ШАПЦІ КОЖНОЇ сторінки — чип біля «Мої квитки»: амбер-таймер брони
   (найтерміновіше) або зелена крапка з числом активних квитків.
   Це відповідь на «що далі?» з будь-якої точки сайту (§30 п.10).

   Стани перемикаються панеллю зліва внизу. Таймер живий (тікає).
   Історія — тихий список під полицею (CA1: історія не кричить).
   ═══════════════════════════════════════════════════════════════════════════ */
.r2026{
  --at-scene:#0A1024; --at-panel:#16234E; --at-page:#EEF1F7; --at-card:#FFFFFF;
  --at-text:#101729; --at-text2:#4A5570; --at-muted:#667088;
  --at-amber:#FFB800; --at-on-amber:#231700;
  --at-link:#2F59B0; --at-focus:#3B6FD9;
  --at-live:#3ECF8E; --at-delay:#E4685F;
  --at-line:#E4E8F1; --at-line-scene:#FFFFFF17;
  --at-fh:'Manrope',system-ui,sans-serif; --at-fb:'Source Sans 3',system-ui,sans-serif;
  --s3:12px; --s4:16px; --s5:20px; --s6:24px; --block:32px; --between:56px;
  --r-ctl:6px; --r-in:12px; --r-card:16px; --r-panel:24px; --r-pill:999px;
  --sh-card:0 4px 14px -8px rgba(10,16,36,.14);
  --sh-raised:0 14px 34px -12px rgba(10,16,36,.22);
  --e:cubic-bezier(.16,1,.3,1);
  container-type:inline-size; container-name:root;
  background:var(--at-page); color:var(--at-text);
  font:400 16px/1.55 var(--at-fb); margin:0 auto; overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
.r2026 *,.r2026 *::before,.r2026 *::after{box-sizing:border-box}
.r2026 [hidden]{display:none !important}
.r2026 h1,.r2026 h2,.r2026 h3,.r2026 .num{font-family:var(--at-fh)}
.r2026 .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.r2026 button{font:inherit;color:inherit;cursor:pointer}
.r2026 a{text-decoration:none;color:inherit}
.r2026 svg{display:block}
.r2026 .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.r2026 :focus-visible{outline:3px solid var(--at-focus);outline-offset:2px;border-radius:var(--r-ctl)}
.r2026 ::selection{background:var(--at-amber);color:var(--at-on-amber)}
.r2026 button:active{transform:scale(.97)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
@container root (max-width:900px){.wrap{padding:0 18px}}

/* ── ШАПКА + чип стану замовлень (видно з БУДЬ-ЯКОЇ сторінки) ─────────── */
/* бронь: амбер-чип із таймером — найтерміновіше в житті замовлення */
/* активні квитки: тиха зелена крапка з числом */

.step{color:#fff;padding:var(--s4) 0 var(--between);
  background:
    radial-gradient(560px 220px at 10% -60%, #FFB80012, transparent 70%),
    radial-gradient(760px 300px at 88% 150%, #2F59B024, transparent 70%),
    linear-gradient(180deg,#0A1024 0%,#0C1329 55%,#101A38 100%)}
.step__in{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.step h1{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.02em}
.step__d{font-size:13px;color:#FFFFFFC7;margin:6px 0 0}

/* ── ПОЛИЦЯ ────────────────────────────────────────────────────────────── */
/* .shelf більше не «висить» на hero (це робить .cnav margin-top). Контент
   вкладок починається ПІД навігацією; .pane дає відступ, щоб перша картка не
   заходила під sticky-табли. */
.shelf{position:relative;z-index:2}
.pane{padding-top:var(--s5)}

/* ВЕЛИКА КАРТКА-КВИТОК: папір із перфорацією і корінцем */
.tik{background:var(--at-card);border-radius:var(--r-panel);box-shadow:var(--sh-raised);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 300px;
  animation:tik-in .4s var(--e) backwards}
@keyframes tik-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@container root (max-width:900px){.tik{grid-template-columns:1fr}}
.tik__main{padding:var(--s5)}
.tik__k{display:flex;align-items:center;gap:10px;margin:0 0 var(--s3);flex-wrap:wrap}
.tik__st{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
  font-family:var(--at-fh);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tik__st--ok{background:#E3F7EE;color:#136B4A}
.tik__st--hold{background:#FFF6DE;color:#8A6400}
.tik__st i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.tik__no{font-size:11.5px;color:var(--at-muted);font-variant-numeric:tabular-nums}
.tik__route{display:flex;align-items:center;gap:var(--s3);margin:0 0 6px;flex-wrap:wrap}
.tik__city b{display:block;font-family:var(--at-fh);font-weight:800;font-size:24px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tik__city span{font-size:12px;color:var(--at-muted)}
.tik__line{flex:1;min-width:60px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#C9D2E3,#9FAFD0,#C9D2E3);position:relative}
.tik__line::before,.tik__line::after{content:'';position:absolute;top:-2.5px;width:7px;height:7px;
  border-radius:50%;background:#8A93A8}
.tik__line::before{left:0}.tik__line::after{right:0}
.tik__meta{margin:0;font-size:13px;color:var(--at-text2)}
.tik__meta .tnum{font-family:var(--at-fh);font-weight:700;color:var(--at-text)}
.tik__ppl{display:flex;gap:8px;flex-wrap:wrap;margin:var(--s3) 0 0;padding:0;list-style:none}
.tik__ppl li{display:inline-flex;align-items:baseline;gap:7px;padding:6px 12px;border-radius:10px;
  background:#F6F7FB;border:1px solid var(--at-line);font-size:12.5px;color:var(--at-text2)}
.tik__ppl b{font-family:var(--at-fh);font-weight:700;font-size:12.5px;color:var(--at-text)}

/* Свічка брони (П.57/B5): смуга, що тане; останні 5 хв — теплішає, не панікує */
/* Свічка броні · ТРИ ФАЗИ (мок 26, «+» Віктора): тон теплішає до дедлайну.
   30→15 спокій (амбер) · 15→5 увага · 5→0 терміново (червоний). Клас фази
   ставить cabinet.js. Не миготить — паніка не допомагає (ER-голос). */
.hold{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-in);
  background:#FFF6DE;border:1px solid #F2DFAE;transition:background .5s,border-color .5s}
.hold--warm{background:#FFF1D6;border-color:#EDD298}
.hold--hot{background:#FDECEA;border-color:#F5C9C3}
.hold__t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px;
  font-size:13px;color:#6B5200}
.hold--hot .hold__t{color:#8E2C22}
.hold__t b{font-family:var(--at-fh);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
  color:#4A3900}
.hold--hot .hold__t b{color:#8E2C22}
.hold__bar{height:6px;border-radius:3px;background:#F2DFAE;overflow:hidden}
.hold--hot .hold__bar{background:#F5C9C3}
.hold__bar i{display:block;height:100%;border-radius:3px;background:var(--at-amber);
  transition:width 1s linear,background .5s}
.hold--hot .hold__bar i{background:var(--at-delay,#E4685F)}
.hold__p{margin:8px 0 0;font-size:12px;color:#8A6400}
.hold--hot .hold__p{color:#8E2C22}

/* ── ЖИВА СТАТУС-ПЛАШКА КВИТКА (Етап 1) ─────────────────────────────────
   Фаза за часом до/після виїзду: спокій (зелений) → виїзд <24год (амбер) →
   посадка (амбер яскравий) → затримка (червоний, ТІЛЬКИ сьогодні) → у дорозі
   (синій). Колір несе сенс, точка-індикатор пульсує лише коли терміново. */
.tlive{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 var(--s4);
  border-radius:var(--r-in);transition:background .4s var(--e),color .4s var(--e)}
.tlive__ic{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:currentColor;margin:2px 2px 0}
.tlive__t{min-width:0}
.tlive__t b{display:block;font-family:var(--at-fh);font-weight:800;font-size:15px;line-height:1.25;letter-spacing:-.01em}
.tlive__t span{font-size:12.5px;opacity:.85}
.tlive__cd{margin-left:auto;text-align:right;flex:0 0 auto;padding-left:12px}
.tlive__cd b{display:block;font-family:var(--at-fh);font-weight:800;font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.tlive__cd span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.tlive--calm{background:#F1FBF6;color:#136B4A}
.tlive--soon{background:#FFF7E4;color:#7A5A00}
.tlive--board{background:linear-gradient(135deg,#FFC933,#FFB800);color:#231700}
.tlive--delay{background:#FDECEA;color:#8E2C22}
.tlive--go{background:#EAF2FF;color:#274690}
.tlive--board .tlive__ic,.tlive--delay .tlive__ic{animation:tlpulse 2.4s ease-in-out infinite}
@keyframes tlpulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Корінець: права частина з перфорацією по вертикалі */
.tik__stub{border-left:2px dashed var(--at-line);padding:var(--s5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  background:#FBFCFE;text-align:center}
@container root (max-width:900px){.tik__stub{border-left:0;border-top:2px dashed var(--at-line)}}
/* Реальний QR від УЗ (<img>): білий фон + рамка — щоб сканувалось із будь-якого
   екрана й читалось на темному корінці. Квадрат фіксований, не спотворюється. */
.qr{width:132px;height:132px;display:block;border-radius:10px;background:#fff;
  padding:8px;border:1px solid var(--at-line);box-shadow:var(--sh-card);
  image-rendering:pixelated /* QR різкий, без згладжування */}
.tik__stub .sum{margin:0;font-size:12.5px;color:var(--at-text2)}
.tik__stub .sum b{display:block;font-family:var(--at-fh);font-weight:800;font-size:22px;
  color:var(--at-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;
  border:0;border-radius:var(--r-in);background:var(--at-amber);color:var(--at-on-amber);
  font-family:var(--at-fh);font-weight:800;font-size:15px;
  box-shadow:0 14px 30px -8px rgba(255,184,0,.5);transition:background .18s}
.cta:hover{background:#E9A800}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;
  border:1.5px solid var(--at-line);border-radius:var(--r-in);background:#fff;
  font-family:var(--at-fh);font-weight:700;font-size:13.5px;color:var(--at-text2);
  transition:border-color .18s,color .18s}
.ghost:hover{border-color:#C6D0E4;color:var(--at-text)}
.ghost .ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* дії квитка стовпчиком на корінці (PDF · Статус · Календар · Поділитися) */
.tik__acts{display:grid;gap:8px;width:100%}
.tik__acts .ghost,.tik__acts .cta{width:100%}
.tik__bless{margin:0;font-family:var(--at-fh);font-weight:700;font-size:13px;color:#136B4A}
.tik__note{margin:0;font-size:11.5px;color:var(--at-muted);line-height:1.5}

/* МОНІТОРИНГ МІСЦЬ: реальна фіча бека (modules/monitor, ticket_request,
   fromMonitor у ticketAction). monitorAction зараз СХОВАНИЙ редиректом
   (IndexController:697 «temporary hide») — тому секція за фіча-флагом:
   верстаємо зараз, вмикаємо коли Віктор поверне монітор. */
.mon{margin-top:var(--block)}
.mon h2{margin:0 0 var(--s3);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--at-muted)}
.mon__i{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);
  border-radius:var(--r-in);background:var(--at-card);border:1px solid var(--at-line);
  box-shadow:var(--sh-card);font-size:13.5px;color:var(--at-text2);flex-wrap:wrap}
.mon__i b{font-family:var(--at-fh);font-weight:700;color:var(--at-text)}
.mon__live{display:inline-flex;align-items:center;gap:6px;font-family:var(--at-fh);
  font-weight:700;font-size:11.5px;color:#136B4A}
.mon__live i{width:6px;height:6px;border-radius:50%;background:var(--at-live);
  animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.35}}
.mon__stop{margin-left:auto;border:1.5px solid var(--at-line);border-radius:var(--r-pill);
  background:#fff;min-height:34px;padding:0 14px;font-family:var(--at-fh);font-weight:700;
  font-size:12px;color:var(--at-text2);transition:border-color .18s,color .18s}
.mon__stop:hover{border-color:#C6D0E4;color:var(--at-text)}

/* ПРОФІЛЬ: тихо внизу — телефон і є вхід (CA4), мінімум даних (CA3) */
.prof{margin-top:var(--block);display:flex;align-items:baseline;gap:var(--s3);
  flex-wrap:wrap;font-size:13px;color:var(--at-muted)}
.prof b{font-family:var(--at-fh);font-weight:700;color:var(--at-text2);
  font-variant-numeric:tabular-nums}
.prof button{border:0;background:none;color:var(--at-link);font-weight:600;
  font-size:13px;padding:4px}
.prof button:hover{text-decoration:underline}
.prof .prof__del{color:var(--at-muted);margin-left:auto}

/* ІСТОРІЯ: тихий список (CA1) */
.hist{margin-top:var(--block)}
.hist h2{margin:0 0 var(--s3);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--at-muted)}
.hist__i{display:flex;align-items:baseline;gap:var(--s4);padding:var(--s3) var(--s4);
  border-radius:var(--r-in);background:#FFFFFF99;border:1px solid var(--at-line);
  margin-bottom:6px;font-size:13.5px;color:var(--at-text2);flex-wrap:wrap}
.hist__i b{font-family:var(--at-fh);font-weight:700;color:var(--at-text);font-variant-numeric:tabular-nums}
.hist__i .st{margin-left:auto;font-size:11.5px;color:var(--at-muted)}

/* ПОРОЖНЬО (ES3) */
.empty{background:var(--at-card);border-radius:var(--r-panel);box-shadow:var(--sh-raised);
  padding:var(--between) var(--s5);text-align:center}
.empty svg{margin:0 auto var(--s4)}
.empty h2{margin:0 0 8px;font-size:21px;font-weight:800}
.empty p{margin:0 auto var(--s5);color:var(--at-text2);max-width:400px}
.empty .cta{width:auto;padding:0 26px}
/* тихий альт-вхід (агенти/бізнес за email) — під головною дією, не перебиває */
.empty__alt{margin:18px 0 0;font-size:13.5px;color:var(--at-muted)}
.empty__alt a{color:var(--at-link);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.empty__alt a:hover{color:#24478E}


/* ── ВКЛАДКИ КАБІНЕТУ (Етап 3, ui-ux-pro-max: скло, м'які тіні, плавні морфи) ─ */
.cnav{position:sticky;top:0;z-index:6;margin-top:calc(var(--block) * -1);
  background:rgba(238,241,247,.72);backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid var(--at-line);border-radius:16px 16px 0 0}
.cnav__in{display:flex;gap:4px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cnav button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;min-height:40px;
  padding:0 16px;border-radius:10px;white-space:nowrap;font-family:var(--at-fh);font-weight:700;
  font-size:14px;color:var(--at-text2);cursor:pointer;transition:background .3s var(--e),color .3s var(--e),box-shadow .3s var(--e)}
.cnav button:hover{color:var(--at-text)}
.cnav button.on{background:#fff;color:var(--at-text);box-shadow:var(--sh-card)}
.cnav__b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:10px;background:#E3F7EE;color:#136B4A;font-size:11.5px;font-weight:800}
.cnav button.on .cnav__b{background:var(--at-amber);color:var(--at-on-amber)}

.pane{display:none;animation:pane-in .34s var(--e)}
.pane.on{display:block}
@keyframes pane-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* картка секції (пасажири/налаштування) */
.card{background:var(--at-card);border-radius:var(--r-panel);box-shadow:var(--sh-raised);padding:var(--s5)}
.card__h{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.card__d{margin:0 0 var(--s5);font-size:14px;color:var(--at-text2);line-height:1.55}

/* пасажири */
.pax__i{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r-in);
  border:1px solid var(--at-line);margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.pax__i:hover{border-color:#C6D0E4;box-shadow:var(--sh-card)}
.pax__av{width:42px;height:42px;border-radius:12px;background:#EEF2FA;display:grid;place-items:center;color:var(--at-link);flex:0 0 auto}
.pax__t{min-width:0}
.pax__t b{display:block;font-family:var(--at-fh);font-weight:700;font-size:15px}
.pax__t span{font-size:12.5px;color:var(--at-muted)}
.pax__empty{padding:8px 0 18px;color:var(--at-text2);font-size:14px}
.pax__add{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;
  padding:0 20px;margin-top:6px;border:1.5px dashed #C6D0E4;border-radius:var(--r-in);background:#fff;
  font-family:var(--at-fh);font-weight:700;font-size:14px;color:var(--at-link);transition:border-color .2s,background .2s}
.pax__add:hover{border-color:var(--at-link);background:#F7F9FD}
.pax__add .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* кнопка видалити пасажира */
.pax__del{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--at-line);
  background:#fff;display:grid;place-items:center;color:var(--at-muted);flex:0 0 auto;cursor:pointer;
  transition:border-color .2s,color .2s}
.pax__del:hover{border-color:#F5C9C3;color:var(--at-delay)}
.pax__del .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* inline-форма додавання пасажира */
.pax__form{margin-top:14px;padding:16px;border:1px solid var(--at-line);border-radius:var(--r-in);background:#FBFCFE}
.pax__2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@container root (max-width:560px){.pax__2col{grid-template-columns:1fr}}
.pax__f{display:block;margin-bottom:12px}
.pax__f span{display:block;font-family:var(--at-fh);font-weight:600;font-size:13px;color:var(--at-text2);margin-bottom:6px}
.pax__f input{width:100%;min-height:46px;padding:0 14px;border:1.5px solid var(--at-line);border-radius:10px;
  background:#fff;font-family:var(--at-fh);font-weight:600;font-size:15px;color:var(--at-text)}
.pax__f input:focus{outline:none;border-color:var(--at-link);box-shadow:0 0 0 3px rgba(59,111,217,.2)}
.pax__kind{display:flex;gap:18px;margin:2px 0 12px}
.pax__kind label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--at-text2);cursor:pointer}
.pax__kind input{accent-color:var(--at-link);width:17px;height:17px}
.pax__formbtns{display:flex;gap:10px;margin-top:6px}
.pax__formbtns .cta,.pax__formbtns .ghost{width:auto;padding:0 22px}

/* налаштування */
.set__row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--at-line)}
.set__row:last-child{border-bottom:0}
.set__t{min-width:0}
.set__t b{display:block;font-family:var(--at-fh);font-weight:700;font-size:15px}
.set__t span{font-size:12.5px;color:var(--at-muted)}
.set__lang{margin-left:auto;display:flex;gap:2px;background:#F1F3F8;border-radius:999px;padding:3px;flex:0 0 auto}
.set__lang a{min-height:32px;display:inline-flex;align-items:center;padding:0 13px;border-radius:999px;
  font-family:var(--at-fh);font-weight:700;font-size:13px;color:#4A5570}
.set__lang a.on{background:#101729;color:#fff}
.set__link{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--at-line);color:var(--at-text)}
.set__link:last-of-type{border-bottom:0}
.set__link .ch{margin-left:auto;color:var(--at-muted);transition:transform .2s,color .2s}
.set__link:hover{color:var(--at-link)}
.set__link:hover .ch{color:var(--at-link);transform:translateX(2px)}
.set__link .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.set__foot{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap}
.set__out{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;border:1.5px solid var(--at-line);
  border-radius:var(--r-in);background:#fff;font-family:var(--at-fh);font-weight:700;font-size:14px;color:var(--at-text);transition:border-color .2s}
.set__out:hover{border-color:#C6D0E4}
.set__out .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.set__del{margin-left:auto;color:var(--at-muted);font-size:13px;text-decoration:none}
.set__del:hover{color:var(--at-delay);text-decoration:underline}

/* ── ФІНАЛ (доробка): статистика hero · історія · повні налаштування ────── */
.step__phone{margin:8px 0 0;font-size:14px;color:#FFFFFFC7}
.step__phone b{font-family:var(--at-fh);font-weight:700;color:#fff}
.stat{display:flex;gap:var(--s6);flex:0 0 auto}
.stat div{text-align:center}
.stat b{display:block;font-family:var(--at-fh);font-weight:800;font-size:26px;color:#fff;line-height:1;letter-spacing:-.02em}
.stat span{font-size:11px;color:#FFFFFF99;font-family:var(--at-fh);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@container root (max-width:640px){.stat{gap:var(--s5)}.stat b{font-size:22px}}

/* заголовок тихої секції (історія) */
.sect-h{margin:0 0 var(--s3);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-muted)}
.hist__r{font-family:var(--at-fh);font-weight:700;color:var(--at-text)}
.hist__m{font-size:11.5px;color:var(--at-muted)}

/* налаштування — набір карток */
.set{display:grid;gap:20px}
.set__card{background:var(--at-card);border-radius:var(--r-panel);box-shadow:var(--sh-raised);padding:var(--s5)}
.set__h{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.set__d{margin:0 0 var(--s4);font-size:13.5px;color:var(--at-text2)}
.set__val{margin-left:auto;font-family:var(--at-fh);font-weight:700;font-size:15px;color:var(--at-text);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* перемикач (сповіщення) */
.switch{margin-left:auto;flex:0 0 auto;width:48px;height:28px;border-radius:999px;background:#CBD5E5;border:0;
  position:relative;cursor:pointer;transition:background .25s var(--e)}
.switch.on{background:var(--at-live)}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .25s var(--e)}
.switch.on::after{left:23px}

@media (prefers-reduced-motion:reduce){.r2026 *{animation:none!important;transition:none!important}}