/* ============================================================
   Конструктор выгрузок — Telegram Mini App
   Дизайн v2: чистый, «карточный», адаптируется к теме Telegram.
   Все классы сохранены под движок app.js (не переименовывать).
   ============================================================ */

:root{
  /* Базовые цвета берём из темы Telegram, с надёжными фолбэками */
  --bg:        var(--tg-theme-bg-color, #ffffff);
  --secbg:     var(--tg-theme-secondary-bg-color, #eef1f6);
  --text:      var(--tg-theme-text-color, #11151c);
  --hint:      var(--tg-theme-hint-color, #8b8f99);
  --link:      var(--tg-theme-link-color, #2f7ee0);
  --btn:       var(--tg-theme-button-color, #2f7ee0);
  --btn-text:  var(--tg-theme-button-text-color, #ffffff);

  /* Производные / собственные токены дизайна */
  --accent:        var(--tg-theme-button-color, #2f7ee0);
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 7%, transparent);
  --card:          var(--tg-theme-bg-color, #ffffff);
  --surface:       var(--tg-theme-bg-color, #ffffff);
  --line:          color-mix(in srgb, var(--text) 9%, transparent);
  --line-soft:     color-mix(in srgb, var(--text) 5%, transparent);

  --ok:    #1fa463;
  --warn:  #d68a00;
  --danger:#e0445b;

  --radius:    16px;
  --radius-lg: 22px;
  --radius-sm: 11px;

  --shadow-sm: 0 1px 2px rgba(15,22,35,.05), 0 1px 8px rgba(15,22,35,.04);
  --shadow-md: 0 6px 24px rgba(15,22,35,.10);
  --shadow-lg: 0 -8px 40px rgba(15,22,35,.16);

  --gap: 12px;

  /* Движение — «дорогой» spring, без клоунады */
  --ease-out: cubic-bezier(.16,.84,.28,1);
  --ease-spring: cubic-bezier(.2,.9,.25,1.08);
  --ease-sheet: cubic-bezier(.22,.9,.28,1.05);
  --ease-bounce: cubic-bezier(.25,.9,.35,1.12);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s;
  --dur: .32s;
  --dur-sheet: .42s;
}

/* Лёгкая подстройка теней под тёмную тему */
@media (prefers-color-scheme: dark){
  :root{
    --line:      color-mix(in srgb, #ffffff 12%, transparent);
    --line-soft: color-mix(in srgb, #ffffff 7%, transparent);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 24px rgba(0,0,0,.5);
    --shadow-lg: 0 -8px 40px rgba(0,0,0,.6);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0;
  background:var(--secbg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hidden{ display:none !important; }
.muted{ color:var(--hint); font-size:13.5px; }

/* ── Splash ─────────────────────────────────────────────── */
.splash{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
  animation:fade .32s var(--ease-out);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.splash.splash-out{ opacity:0; transform:scale(.985); pointer-events:none; }
.splash-logo{
  font-size:64px;
  width:104px; height:104px; border-radius:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft);
  box-shadow:0 8px 28px color-mix(in srgb, var(--accent) 18%, transparent);
  animation:pop .5s var(--ease-spring);
}
.splash-title{ font-weight:750; font-size:21px; letter-spacing:-.3px; animation:fadeUp .4s .08s both var(--ease-out); }
@keyframes pop{
  0%{ transform:scale(.52); opacity:0; filter:blur(4px) }
  70%{ transform:scale(1.04); filter:blur(0) }
  100%{ transform:scale(1); opacity:1; filter:none }
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px) scale(.985); filter:blur(3px) }
  to{ opacity:1; transform:none; filter:none }
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px) scale(.98); filter:blur(2px) }
  to{ opacity:1; transform:none; filter:none }
}
@keyframes selectPop{
  0%{ transform:scale(.96) }
  60%{ transform:scale(1.02) }
  100%{ transform:scale(1) }
}
@keyframes screenIn{
  from{ opacity:0; transform:translateY(18px) scale(.978); filter:blur(4px) }
  to{ opacity:1; transform:none; filter:none }
}
.spinner{
  width:26px; height:26px; border:3px solid var(--line);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── Каркас экранов ──────────────────────────────────────── */
.screens{ min-height:100vh; padding-bottom:96px; }
.screens.screens-in{ animation:fadeUp .44s var(--ease-out); }
.screen{ padding:0 16px; }
.screen.screen-enter{ animation:screenIn .42s var(--ease-out); }
@keyframes slideUp{
  from{ opacity:0; transform:translateY(14px) scale(.99); filter:blur(2px) }
  to{ opacity:1; transform:none; filter:none }
}

/* ── Hero (экран когорт) ─────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  margin:14px -16px 16px;
  padding:30px 22px 26px;
  background:
    radial-gradient(130% 120% at 85% -20%, var(--accent-soft), transparent 55%),
    radial-gradient(120% 120% at 0% 0%, var(--accent-softer), transparent 50%);
}
.hero-emoji{
  font-size:34px; width:62px; height:62px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); box-shadow:var(--shadow-md);
  animation:pop .45s var(--ease-spring);
}
.hero h1{ font-size:25px; font-weight:800; letter-spacing:-.5px; margin:14px 0 4px; }
.hero .muted{ font-size:14px; }

/* ── Ввод ТЗ ─────────────────────────────────────────────── */
.tz-box{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:12px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.tz-area{
  width:100%; border:1.5px solid var(--line); background:var(--secbg); color:var(--text);
  border-radius:var(--radius-sm); padding:13px 14px; font-size:15px; line-height:1.5; resize:none;
  font-family:inherit; min-height:82px; max-height:50vh; overflow-y:auto;
  transition:border-color .2s, background .2s;
}
.tz-area::placeholder{ color:var(--hint); }
.tz-area:focus{ outline:none; border-color:var(--accent); background:var(--bg); }
.or-divider{ text-align:center; margin:4px 0 14px; position:relative; }
.or-divider span{
  background:var(--secbg); padding:0 12px; color:var(--hint);
  font-size:12px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
  position:relative; z-index:1;
}
.or-divider::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--line);
}

/* ── Баннер разбора ТЗ ───────────────────────────────────── */
.tz-banner{
  background:var(--accent-softer); border-radius:var(--radius);
  padding:13px 15px; margin-bottom:12px;
  border-left:3px solid var(--accent); animation:slideUp .3s;
  font-size:13.5px;
}
.tz-banner .ok{ font-size:13.5px; }
.tz-banner .warn{ font-size:12.5px; color:var(--warn); margin-top:6px; }
.tz-banner .row{ margin:2px 0; }
#cohort-parse-banner-slot{ margin:12px 0 4px; }
#cohort-parse-banner-slot:empty{ margin:0; }

/* ── Сервисный баннер (отпуск и т.п.) ─────────────────────── */
#service-notice-slot{ margin:0 0 14px; }
#service-notice-slot:empty{ margin:0; }
#impersonate-banner-slot{ margin:0 0 14px; }
#impersonate-banner-slot:empty{ margin:0; }
.impersonate-banner{
  border:1px solid rgba(255,159,10,.45);
  background:linear-gradient(135deg, rgba(255,159,10,.16), rgba(255,159,10,.06));
  border-radius:14px;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:10px;
}
.impersonate-banner-text{ font-size:13px; line-height:1.45; margin:0; }
.impersonate-id{
  display:inline-block; margin-left:4px; padding:1px 7px;
  border-radius:999px; font-size:11px; font-weight:650;
  background:rgba(0,0,0,.18); color:var(--hint);
}
.service-notice{
  position:relative;
  background:color-mix(in srgb, #e8a317 10%, var(--card));
  border:1px solid color-mix(in srgb, #e8a317 35%, var(--line-soft));
  border-left:3px solid #d4890a;
  border-radius:var(--radius);
  padding:14px 40px 14px 15px;
  animation:slideUp .3s;
}
.service-notice-emoji{ font-size:22px; line-height:1; margin-bottom:6px; }
.service-notice-title{ font-size:14.5px; font-weight:700; margin:0 0 6px; line-height:1.3; }
.service-notice-body{ font-size:13px; line-height:1.45; color:var(--hint); margin:0 0 10px; }
.service-notice-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.service-notice-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:650; color:var(--accent);
  text-decoration:none; padding:7px 12px; border-radius:10px;
  background:var(--accent-soft); border:none; cursor:pointer;
}
.service-notice-dismiss{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border:none; border-radius:8px;
  background:transparent; color:var(--hint); font-size:18px; line-height:1;
  cursor:pointer;
}
.service-notice-dismiss:active{ background:var(--secbg); }

/* ── Карточки (когорты / подписки) ──────────────────────── */
.card-list{ display:flex; flex-direction:column; gap:10px; }
.card-list > .card{
  animation:riseIn .4s var(--ease-out) both;
}
.card-list > .card:nth-child(1){ animation-delay:.02s }
.card-list > .card:nth-child(2){ animation-delay:.06s }
.card-list > .card:nth-child(3){ animation-delay:.1s }
.card-list > .card:nth-child(4){ animation-delay:.14s }
.card-list > .card:nth-child(5){ animation-delay:.18s }
.card-list > .card:nth-child(6){ animation-delay:.22s }
.card-list > .card:nth-child(n+7){ animation-delay:.26s }
.card{
  background:var(--card); border-radius:var(--radius); padding:15px 16px;
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--line-soft); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-out), border-color .2s, box-shadow .28s; cursor:pointer;
}
.card.sel{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
  animation:selectPop .34s var(--ease-spring);
}
button.card{
  width:100%; margin:0; font:inherit; color:inherit; text-align:left;
  appearance:none; -webkit-appearance:none;
}
.tz-hint{ font-size:12.5px; margin-top:8px; line-height:1.4; min-height:18px; }
.seg-ref{ display:flex; flex-direction:column; gap:6px; }
.card:active{ transform:scale(.98); }
.card-emoji{
  font-size:23px; width:46px; height:46px; flex:0 0 auto; border-radius:13px;
  display:flex; align-items:center; justify-content:center; background:var(--secbg);
  transition:transform .18s var(--ease-out);
}
.card:active .card-emoji{ transform:scale(1.04); }
.card-main{ flex:1; min-width:0; }
.card-title{ font-weight:650; font-size:15.5px; letter-spacing:-.2px; }
.card-note{ font-size:12.5px; color:var(--hint); margin-top:3px; line-height:1.35; }
.card-chev{
  color:var(--hint); font-size:22px; opacity:.7;
  transition:transform .18s var(--ease-out), opacity .2s;
}
.card:active .card-chev{ transform:translateX(2px); opacity:1; }

/* ── Topbar / tabs ──────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0 12px; position:sticky; top:0; z-index:6;
  background:linear-gradient(var(--secbg) 78%, transparent);
}
.topbar-title{
  font-weight:750; font-size:16px; text-align:center; flex:1; letter-spacing:-.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px;
}
.icon-btn{
  width:36px; height:36px; flex:0 0 auto; border:none; background:var(--card); color:var(--text);
  border-radius:11px; font-size:21px; line-height:1; box-shadow:var(--shadow-sm);
  transition:transform .12s;
}
.icon-btn:active{ transform:scale(.9); }

.tabs{
  display:flex; gap:4px; background:var(--card); border-radius:14px; padding:5px;
  position:sticky; top:56px; z-index:5; box-shadow:var(--shadow-sm); border:1px solid var(--line-soft);
  isolation:isolate;
}
.tab-pill{
  position:absolute; top:5px; left:0; height:calc(100% - 10px);
  border-radius:10px; background:var(--accent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent);
  transition:transform .4s var(--ease-out), width .4s var(--ease-out), opacity .2s;
  z-index:0; pointer-events:none; opacity:0;
}
.tab-pill.on{ opacity:1; }
.tab{
  flex:1; border:none; background:transparent; color:var(--hint); padding:10px 6px;
  border-radius:10px; font-size:14px; font-weight:650; letter-spacing:-.2px;
  position:relative; z-index:1;
  transition:color .22s, transform var(--dur-fast);
}
.tab:active{ transform:scale(.96); }
.tab.active{
  background:transparent; color:var(--btn-text); box-shadow:none;
}
.tab-body{ padding-top:14px; }
.tab-body.tab-enter{ animation:fadeUp .34s var(--ease-out); }

/* ── Режимы (Ученики / Сводка / ДЗ / Приводы / Рефкоды) ─── */
.mode-bar{
  margin:6px 0 12px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  background:transparent;
  padding:0;
}
.mode-bar button{
  font-size:13px; padding:11px 8px; font-weight:650;
  background:var(--secbg); border:none; border-radius:12px;
  color:var(--text); cursor:pointer;
  transition:background .22s, color .2s, transform var(--dur-fast), box-shadow .22s;
}
.mode-bar button:active{ transform:scale(.97); }
.mode-bar button.on{
  background:var(--accent); color:var(--btn-text); box-shadow:var(--shadow-sm);
  animation:selectPop .36s var(--ease-spring);
}

/* ── Аккордеоны (колонки) ───────────────────────────────── */
.acc{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.acc-head{ display:flex; align-items:center; gap:10px; padding:15px 16px; cursor:pointer; }
.acc-head .ttl{ flex:1; font-weight:650; font-size:15px; letter-spacing:-.2px; }
.acc-head .cnt{
  font-size:12.5px; font-weight:650; color:var(--accent);
  background:var(--accent-soft); padding:3px 9px; border-radius:20px;
}
.acc-head .chev{ transition:transform .25s; color:var(--hint); font-size:18px; }
.acc.open .acc-head .chev{ transform:rotate(90deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.acc.open .acc-body{ max-height:2600px; }
.acc-inner{ padding:2px 12px 14px; display:flex; flex-wrap:wrap; gap:8px; }

/* ── Проверка ДЗ: сворачиваемые плашки ─────────────────── */
.hw-top-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hw-top-count{ font-size:13px; font-weight:650; color:var(--accent); }
.hw-reset{
  border:none; background:var(--secbg); color:var(--hint); font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:20px; cursor:pointer;
}
.hw-reset:active{ transform:scale(.96); }
.hw-plaque .hw-plaque-head{
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
  margin-bottom:0 !important; padding:2px 0;
}
.hw-plaque.open .hw-plaque-head{ margin-bottom:12px !important; }
.hw-plaque-title{ flex:1; }
.hw-plaque-badge{
  font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft);
  min-width:20px; text-align:center; padding:2px 8px; border-radius:12px;
}
.hw-plaque-chev{ color:var(--hint); font-size:18px; transition:transform .25s; flex-shrink:0; }
.hw-plaque.open .hw-plaque-chev{ transform:rotate(90deg); }
.hw-plaque-body{ max-height:0; overflow:hidden; transition:max-height .32s ease; }
.hw-plaque.open .hw-plaque-body{ max-height:900px; }
.hw-scroll-list{ max-height:min(220px, 40vh); overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Чек-«пилюли» (колонки, наставники, типы курса) */
.chk{
  display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px;
  background:var(--secbg); font-size:14px; font-weight:500;
  border:1.5px solid transparent; transition:transform .18s var(--ease-spring), background .2s, border-color .2s, color .2s; user-select:none; cursor:pointer;
}
.chk:active{ transform:scale(.95); }
.chk.on{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;
}
.chk .box{
  width:19px; height:19px; flex:0 0 auto; border-radius:6px; border:2px solid var(--hint);
  display:flex; align-items:center; justify-content:center; font-size:12px;
  transition:background .18s, border-color .18s, color .18s;
}
.chk.on .box{ background:var(--accent); border-color:var(--accent); color:var(--btn-text); }

/* ── Группы фильтров ────────────────────────────────────── */
.fgroup{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:10px; box-shadow:var(--shadow-sm);
}
.fgroup .flabel{
  font-weight:700; font-size:13.5px; letter-spacing:-.1px; margin-bottom:12px;
  display:flex; gap:7px; align-items:center;
}

/* Чипы (мультивыбор) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 15px; border-radius:21px;
  background:var(--secbg); color:var(--text);
  font-size:14px; font-weight:550;
  transition:background .18s, border-color .18s, color .18s, transform .18s var(--ease-spring), box-shadow .2s;
  border:1.5px solid var(--line-soft); cursor:pointer;
}
.chip:active{ transform:scale(.9); }
.chip.on{
  background:color-mix(in srgb, var(--accent) 20%, var(--secbg));
  color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 65%, var(--line));
  font-weight:650;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Чат-бар: чипсы-примеры + мини-разбивка ответа */
.chat-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.chat-chips .chip{
  padding:6px 12px; font-size:13px; font-weight:600;
  color:var(--accent); background:var(--accent-soft);
  border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-chips .chip:active{ background:var(--accent); color:var(--btn-text); border-color:var(--accent); }
.bd-title{ margin-top:8px; margin-bottom:6px; font-size:13px; font-weight:600; opacity:.75; }
.bars{ display:flex; flex-direction:column; gap:7px; }
.bar-row{ display:flex; flex-direction:column; gap:3px; }
.bar-head{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.bar-head span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-head b{ flex:0 0 auto; }
.bar-track{ height:7px; background:var(--secbg); border-radius:6px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); border-radius:6px; transition:width .45s ease; }

/* Панель универсального графика (вложенные группы — без карточек) */
.chart-panel{ display:flex; flex-direction:column; }
.chart-panel .fgroup{ background:transparent; border:none; box-shadow:none; padding:0; margin-bottom:12px; }
.chart-panel .flabel{ margin-bottom:8px; }

/* Сегментированный контрол */
.seg{
  display:flex; gap:3px; background:var(--secbg); border-radius:12px; padding:3px;
}
.seg.seg-wrap{
  flex-wrap:wrap;
}
.seg.seg-wrap button{
  flex:1 1 calc(33.33% - 3px); min-width:90px;
}
.seg button{
  flex:1; border:none; background:transparent; color:var(--text); padding:10px 8px;
  font-size:13.5px; font-weight:600; border-radius:9px;
  transition:background .22s, color .18s, transform var(--dur-fast), box-shadow .22s; cursor:pointer;
}
.seg button:active{ transform:scale(.95); }
.seg button.on{
  background:var(--accent); color:var(--btn-text); box-shadow:var(--shadow-sm);
}
.sched-block{ margin-top:10px; }
.sched-label{ font-size:12px; margin-bottom:6px; }
.sched-picker{ display:flex; flex-direction:column; gap:8px; }
.sched-picker .seg button{ font-size:12px; padding:8px 6px; }
.sched-form{ display:flex; flex-direction:column; gap:8px; }
.sched-inline{ display:flex; align-items:center; gap:8px; }
.sched-inline .sched-num{ width:72px; margin:0; text-align:center; padding:10px 8px; }
.sched-anchor-chk{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sched-anchor-chk .sched-anchor-time{ flex:1; min-width:110px; margin:0; }
.sched-anchor-chk .sched-anchor-lbl{ flex:1; min-width:120px; }
.sched-presets-wrap{ margin-top:4px; }
.sched-presets-label{ font-size:11px; margin-bottom:4px; }
.sched-presets .chip{
  font-size:11px; padding:7px 10px; max-width:100%;
  line-height:1.25; text-align:left;
}
.sched-picker .chip.on,
.sched-presets .chip.on{
  background:color-mix(in srgb, var(--accent) 24%, var(--card));
  border-color:var(--accent);
  color:var(--text);
}
.sched-hint{ font-size:12px; line-height:1.35; color:var(--hint); padding:6px 2px 0; }
.sched-time-inp{ width:100%; margin:0; }
.seg-months{ flex-wrap:wrap; }
.seg-months button{ flex:1 1 calc(16.66% - 4px); min-width:36px; padding:9px 4px; font-size:13px; }
.seg-months button.in-range{
  background:color-mix(in srgb, var(--accent) 28%, var(--secbg));
  color:var(--text);
}
.months-summary{
  font-size:14px; font-weight:600; margin-bottom:6px; color:var(--text);
}

/* Мин/Макс строки */
.minmax{ display:flex; gap:10px; align-items:flex-start; }
.minmax .lbl{ font-size:13px; color:var(--hint); width:50px; flex:0 0 auto; padding-top:10px; }
.minmax-stack{ flex:1; display:flex; flex-direction:column; gap:6px; }

/* Поля ввода */
.search,.dateinput{
  width:100%; padding:11px 13px; border-radius:11px; border:1.5px solid var(--line);
  background:var(--secbg); color:var(--text); font-size:14px; font-family:inherit;
  transition:border-color .2s, background .2s;
}
.search{ margin-bottom:10px; }
.search:focus,.dateinput:focus{ outline:none; border-color:var(--accent); background:var(--bg); }
.search::placeholder{ color:var(--hint); }

.mentor-list{
  max-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  -webkit-overflow-scrolling:touch;
}

/* ── Нижняя панель действий ─────────────────────────────── */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:8;
  display:flex; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg) 22%);
  animation:slideUp .3s;
}
.btn{
  border:none; border-radius:13px; padding:15px; font-size:15px; font-weight:700; letter-spacing:-.2px;
  transition:transform var(--dur-fast) var(--ease-out), opacity .2s, filter .15s, box-shadow .25s; cursor:pointer;
  position:relative; overflow:hidden;
}
.btn:active{ transform:scale(.96); }
.btn:disabled{ opacity:.55; }
.btn-primary{
  background:var(--accent); color:var(--btn-text); flex:1.4; box-shadow:var(--shadow-md);
}
.btn-primary::after{
  content:''; position:absolute; inset:0; left:-40%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.btn-primary.btn-shine::after{ animation:btnShine .7s ease; }
@keyframes btnShine{
  0%{ left:-50%; opacity:0 }
  30%{ opacity:1 }
  100%{ left:120%; opacity:0 }
}
.btn-primary:active{ filter:brightness(.95); }
.btn-primary.btn-ok-pulse{ animation:okPulse .4s var(--ease-out); }
@keyframes okPulse{
  0%{ transform:scale(1) }
  50%{ transform:scale(1.02); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent) }
  100%{ transform:scale(1) }
}
.btn-ghost{ background:var(--card); color:var(--text); flex:1; box-shadow:var(--shadow-sm); border:1px solid var(--line-soft); }
.btn.big{ width:100%; margin-top:14px; }

/* ── Bottom sheet (превью / выбор / ручной ввод) ────────── */
.sheet{ position:fixed; inset:0; z-index:20; }
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(8,12,20,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:fade .28s var(--ease-soft);
}
.sheet-card{
  position:absolute; left:0; right:0; bottom:0; background:var(--bg);
  border-radius:24px 24px 0 0; padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  animation:sheetUp var(--dur-sheet) var(--ease-sheet);
  will-change:transform;
}
.sheet.closing .sheet-backdrop{ animation:fadeOut .24s var(--ease-out) forwards; }
.sheet.closing .sheet-card{ animation:sheetDown .32s var(--ease-out) forwards; }
@keyframes sheetUp{
  from{ transform:translateY(108%) }
  72%{ transform:translateY(-1.5%) }
  to{ transform:translateY(0) }
}
@keyframes sheetDown{ from{transform:none} to{transform:translateY(110%)} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }
.sheet-handle{ width:40px; height:4px; border-radius:2px; background:var(--hint); opacity:.35; margin:8px auto 12px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-shrink:0; }
.sheet-head strong{ font-size:16px; letter-spacing:-.2px; }
.sheet-card-form{ max-height:min(88vh, 100%); }
.sheet-scroll{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.sheet-foot{
  flex-shrink:0; padding-top:10px; margin-top:4px;
  border-top:1px solid var(--line-soft);
  padding-bottom:2px;
}
.sheet-foot-hint{ font-size:12px; color:var(--hint); margin:0 0 10px; line-height:1.35; text-align:center; }
.sheet-foot .btn.big{ margin-top:0; }
.sheet-err{ color:var(--danger); min-height:18px; margin-top:8px; font-size:12px; }
.hero-links{
  display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center;
  margin-top:10px;
}

/* ── Экран «Что умеет бот» ──────────────────────────────── */
.cap-lead{
  font-size:13.5px; line-height:1.45; margin:4px 4px 14px; padding:0 2px;
}
.cap-section{ margin:0 0 18px; }
.cap-h{
  font-size:13px; font-weight:750; letter-spacing:.02em; text-transform:uppercase;
  color:var(--hint); margin:0 0 10px; padding:0 2px;
}
.cap-grid{ display:flex; flex-direction:column; gap:10px; }
.cap-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:360px){
  .cap-grid-2{ grid-template-columns:1fr; }
}
.cap-grid > .cap-card,
.cap-grid-2 > .cap-card{
  animation:riseIn .38s var(--ease-out) both;
}
.cap-grid > .cap-card:nth-child(1), .cap-grid-2 > .cap-card:nth-child(1){ animation-delay:.03s }
.cap-grid > .cap-card:nth-child(2), .cap-grid-2 > .cap-card:nth-child(2){ animation-delay:.08s }
.cap-grid > .cap-card:nth-child(3), .cap-grid-2 > .cap-card:nth-child(3){ animation-delay:.13s }
.cap-grid > .cap-card:nth-child(4), .cap-grid-2 > .cap-card:nth-child(4){ animation-delay:.18s }
.cap-grid > .cap-card:nth-child(n+5), .cap-grid-2 > .cap-card:nth-child(n+5){ animation-delay:.22s }
.cap-card{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--card); border:1.5px solid var(--line-soft);
  border-radius:var(--radius); padding:13px 14px; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast), border-color .2s, box-shadow .22s;
}
.cap-card:active{ transform:scale(.985); }
.cap-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--accent-soft);
}
.cap-body{ flex:1; min-width:0; }
.cap-body strong{ display:block; font-size:14.5px; font-weight:750; margin-bottom:3px; }
.cap-body p{ margin:0; font-size:13px; line-height:1.4; color:var(--hint); }
.cap-ex{
  display:block; margin-top:6px; font-size:12px; line-height:1.35;
  color:var(--accent); font-style:italic;
}
.cap-chips{
  display:flex; flex-wrap:wrap; gap:6px;
}
.cap-chips span{
  font-size:12.5px; padding:6px 10px; border-radius:999px;
  background:var(--secbg); color:var(--text); border:1px solid var(--line-soft);
}
.cap-steps{
  margin:0; padding:12px 14px 12px 32px;
  background:var(--card); border:1.5px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.cap-steps li{ margin:0 0 8px; font-size:13.5px; line-height:1.4; color:var(--hint); }
.cap-steps li:last-child{ margin-bottom:0; }
.cap-steps b{ color:var(--text); }
.cap-nocover{
  margin:0; padding:12px 14px 12px 28px;
  background:color-mix(in srgb, var(--warn) 8%, var(--card));
  border:1.5px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius:var(--radius);
}
.cap-nocover li{ margin:0 0 8px; font-size:13px; line-height:1.4; color:var(--text); }
.cap-nocover li:last-child{ margin-bottom:0; }
.cap-note{ font-size:12.5px; margin:8px 2px 0; }
.cap-cta{ margin:8px 0 0; }

.changelog-date{ margin:0 0 12px; font-size:12.5px; }
.changelog-list{
  margin:0; padding:0 0 0 18px;
  font-size:14px; line-height:1.45;
}
.changelog-list li{ margin:0 0 12px; }
.changelog-list li:last-child{ margin-bottom:4px; }
.known-issues-date{ margin:0 0 12px; font-size:12.5px; }
.known-issues-list{
  margin:0; padding:0 0 0 18px;
  font-size:14px; line-height:1.45;
}
.known-issues-list li{ margin:0 0 12px; }
.known-issues-list li:last-child{ margin-bottom:4px; }
.help-section-title{
  margin:0 0 8px; font-size:15px; font-weight:700; line-height:1.3;
}
.help-section-divider{ margin:18px 0 16px; }
.help-report-hint{ margin:0 0 10px; font-size:13px; line-height:1.4; }
.help-report-steps-label{ margin:14px 0 8px; font-size:13px; }
.help-report-submit{ width:100%; margin-top:16px; }
.help-issues-footer{ margin:4px 0 0; font-size:12.5px; line-height:1.4; }
.help-direct-hint{ margin:0 0 10px; font-size:13px; line-height:1.4; }
.help-direct-contact-btn{ width:100%; margin-top:4px; }
.sheet-foot .btn.big + .btn.big{ margin-top:8px; }
.btype-types{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.btype-year-label{ font-weight:700; font-size:13.5px; margin-bottom:10px; }

/* Доставка */
.fmt-row{ display:flex; align-items:center; gap:10px; margin:14px 0 4px; }
.fmt-row .muted{ flex:0 0 auto; }
.deliv{ margin-top:8px; }
.gs-hint{ font-size:12px; margin-top:8px; line-height:1.45; }
.gs-hint b{ color:var(--text); word-break:break-all; }
.gs-copy{ color:var(--link); cursor:pointer; }

/* Таблица превью */
.val-box{ margin:0 0 12px; padding:10px 12px; background:var(--card); border:1px solid var(--line-soft); border-radius:10px; font-size:12px; }
.val-title{ font-weight:700; margin-bottom:6px; }
.val-meta{ color:var(--hint); margin-bottom:8px; font-size:11px; }
.val-line{ margin:4px 0; line-height:1.35; }
.val-line.warn{ color:#c9a227; }
.val-line.error{ color:var(--danger,#e55); }
.val-hint{ margin:8px 0 0; color:var(--hint); font-size:11px; line-height:1.35; }
.preview-body{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
#preview-sheet .sheet-card{
  display:flex; flex-direction:column;
  height:min(90vh, 100dvh);
  max-height:min(90vh, 100dvh);
  overflow:hidden;
}
#preview-sheet .preview-body{
  flex:0 0 auto;
  height:min(28vh, 140px);
  max-height:min(28vh, 140px);
  min-height:0;
  margin-bottom:6px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:var(--secbg);
}
#preview-sheet .preview-body:not(.hidden){
  flex-shrink:0;
}
#preview-sheet .val-box{
  margin:0 0 6px; padding:6px 8px; font-size:11px; border-radius:8px;
}
#preview-sheet .val-title{ margin-bottom:4px; font-size:11px; }
#preview-sheet .val-meta{ margin-bottom:4px; font-size:10px; }
#preview-sheet .val-line{ margin:2px 0; font-size:10px; line-height:1.3; }
#preview-sheet .val-hint{ margin-top:4px; font-size:10px; }
#preview-sheet table.prev{
  border-collapse:collapse; font-size:11.5px; width:max-content; min-width:100%;
  line-height:1.3;
}
#preview-sheet table.prev th,
#preview-sheet table.prev td{
  border:1px solid var(--line); padding:4px 6px; white-space:nowrap;
  max-width:108px; overflow:hidden; text-overflow:ellipsis;
}
#preview-sheet table.prev th{
  background:color-mix(in srgb, var(--text) 6%, var(--secbg));
  font-weight:700; font-size:11px; text-align:left;
}
#preview-sheet table.prev tbody tr:nth-child(even){ background:var(--accent-softer); }
#preview-sheet .preview-body.hidden{ display:none !important; }
#preview-sheet .export-hint{
  margin:0 0 8px; padding:0 2px;
  font-size:12px; line-height:1.4;
}
#preview-sheet .export-hint.hidden{ display:none !important; }
#preview-sheet .sheet-deliv-scroll{
  flex:1 1 0; min-height:min(38vh, 220px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line-soft);
  padding-top:8px;
}
#preview-sheet .deliv{ margin-top:0; }
#preview-sheet .sheet-card > #preview-export{
  flex:0 0 auto; align-self:stretch; margin-top:8px;
  position:relative; z-index:1;
}
table.prev{ border-collapse:collapse; font-size:12px; width:max-content; }
table.prev th, table.prev td{
  border:1px solid var(--line); padding:7px 9px; white-space:nowrap;
  max-width:170px; overflow:hidden; text-overflow:ellipsis;
}
table.prev th{ background:var(--secbg); font-weight:700; text-align:left; }
table.prev tbody tr:nth-child(even){ background:var(--accent-softer); }

/* ── Toast ──────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:104px; transform:translateX(-50%);
  background:#1c2230; color:#fff; padding:13px 19px; border-radius:13px; font-size:14px;
  z-index:30; max-width:88%; text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.34);
  animation:toastIn .28s var(--ease-out);
}
.toast.toast-ok{
  background:linear-gradient(145deg, #1a9a5c 0%, #16824e 100%);
}
.toast.toast-err{
  background:linear-gradient(145deg, #e0445b 0%, #c23348 100%);
}
.toast.toast-warn{
  background:linear-gradient(145deg, #d68a00 0%, #b87300 100%);
}
.toast.toast-out{ animation:toastOut .2s var(--ease-out) forwards; }
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%, 16px) scale(.96); filter:blur(2px) }
  to{ opacity:1; transform:translate(-50%, 0) scale(1); filter:none }
}
@keyframes toastOut{
  from{ opacity:1; transform:translate(-50%,0) scale(1) }
  to{ opacity:0; transform:translate(-50%,10px) scale(.97) }
}

/* Вспышка успеха на весь экран — мягче */
.flash-ok{
  position:fixed; inset:0; z-index:25; pointer-events:none;
  background:radial-gradient(ellipse 70% 40% at 50% 92%, rgba(31,164,99,.18), transparent 58%);
  animation:flashOk .5s var(--ease-out) forwards;
}
.flash-err{
  position:fixed; inset:0; z-index:25; pointer-events:none;
  background:radial-gradient(ellipse 60% 35% at 50% 90%, rgba(224,68,91,.14), transparent 55%);
  animation:flashOk .45s var(--ease-out) forwards;
}
@keyframes flashOk{
  0%{ opacity:0 }
  40%{ opacity:1 }
  100%{ opacity:0 }
}

/* Уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .splash.splash-out, .sheet.closing .sheet-card, .sheet.closing .sheet-backdrop,
  .toast.toast-out, .flash-ok, .flash-err{ animation:none !important; opacity:0; }
  .splash-logo{ animation:none !important; }
  .card-list > .card{ animation:none !important; }
  .cap-grid > .cap-card, .cap-grid-2 > .cap-card{ animation:none !important; }
  .tab-pill{ transition:none !important; }
  .sheet-backdrop{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

.bottom-spacer{ height:24px; }
.inline-spin{
  display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-3px;
}

/* ── Онбординг (тур по реальному UI) ─────────────────────── */
.onboard-replay-link{
  display:inline-block; margin-top:10px; padding:0; border:none; background:none;
  color:var(--link); font-size:13px; font-weight:650; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}
.onboard-root{ position:fixed; inset:0; z-index:100; pointer-events:none; }
.onboard-root:not(.hidden) .onboard-panel,
.onboard-root:not(.hidden) .onboard-panels,
.onboard-root:not(.hidden) .onboard-backdrop-full,
.onboard-root:not(.hidden) .onboard-carousel,
.onboard-root:not(.hidden) .onboard-card,
.onboard-root:not(.hidden) .onboard-cta-sheet,
.onboard-root:not(.hidden) #preview-sheet .sheet-card{ pointer-events:auto; }
#preview-sheet.onboard-sheet-lit{ z-index:99; }
#preview-sheet.onboard-sheet-lit .sheet-backdrop{ background:rgba(8,12,20,.32); }
#preview-sheet.onboard-sheet-lit .sheet-card{
  position:fixed;
  top:var(--ob-sheet-top, 10px);
  bottom:var(--ob-sheet-bottom, 0);
  left:0; right:0;
  max-height:none;
  border-radius:20px 20px 0 0;
  overflow:hidden;
}
#preview-sheet.onboard-sheet-lit .preview-body{
  max-height:min(20vh, 110px);
}
#preview-sheet.onboard-export-tour .preview-body,
#preview-sheet.onboard-export-tour .export-hint,
#preview-sheet.onboard-export-tour .sheet-handle{
  display:none;
}
#preview-sheet.onboard-export-tour .sheet-head{
  margin-bottom:6px;
}
#preview-sheet.onboard-export-tour .sheet-deliv-scroll{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
}
#preview-sheet.onboard-sheet-lit:not(.onboard-export-tour) .deliv{
  overflow:visible;
}
.onboard-card--sheet{
  max-height:none !important;
}
.onboard-card--tour-sheet{
  max-height:min(36vh, 280px) !important;
}
.onboard-card--tour-sheet .onboard-card-body{
  overflow:visible; flex:0 0 auto;
}
.onboard-card--tour-sheet .onboard-text p{ font-size:13px; margin-bottom:6px; }
.onboard-card--screen-top{
  top:max(8px, env(safe-area-inset-top)) !important;
  bottom:auto !important;
  max-height:min(32vh, 230px);
}
.onboard-root.hidden{ display:none !important; }
.onboard-backdrop-full{
  position:absolute; inset:0; background:rgba(8,12,20,.58);
  backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px);
}
.onboard-backdrop-full.hidden{ display:none !important; }
.onboard-panels{ position:absolute; inset:0; pointer-events:auto; }
.onboard-panels.hidden{ display:none !important; }
.onboard-panel{
  position:fixed; background:rgba(8,12,20,.58);
  backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px);
  pointer-events:auto;
}
.onboard-ring{
  position:fixed; z-index:102; pointer-events:none; border-radius:14px;
  box-sizing:border-box;
  border:2.5px solid var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
             0 4px 20px rgba(15,22,35,.14);
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.onboard-target{
  position:relative; z-index:103 !important;
  isolation:isolate;
}
#tabs-bar.onboard-target,
.tab-body.onboard-target-body,
.fmt-row.onboard-target,
.seg.onboard-target,
.search.onboard-target{
  box-shadow:none;
}
.onboard-ring.hidden{ display:none !important; }
.onboard-card{
  position:fixed; z-index:104; left:12px; right:12px;
  background:var(--card); border-radius:18px; padding:14px 16px 12px;
  box-shadow:var(--shadow-lg); border:1px solid var(--line-soft);
  animation:slideUp .28s ease;
  max-height:min(52vh, 340px);
  display:flex; flex-direction:column;
  pointer-events:auto;
}
.onboard-card.hidden{ display:none !important; }
.onboard-card-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; }
.onboard-card h3{ margin:0 0 6px; font-size:16px; font-weight:800; letter-spacing:-.3px; }
.onboard-text p{ margin:0 0 8px; font-size:13.5px; line-height:1.45; color:var(--hint); }
.onboard-tips{
  margin:0; padding:0 0 0 18px; text-align:left;
  font-size:12.5px; line-height:1.4; color:var(--hint);
}
.onboard-tips li{ margin-bottom:4px; }
.onboard-tips li:last-child{ margin-bottom:0; }
.onboard-progress{
  font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px; flex-shrink:0;
}
.onboard-actions{ display:flex; gap:8px; flex-shrink:0; margin-top:12px; }
.onboard-card--dock{
  top:auto !important;
  bottom:calc(12px + env(safe-area-inset-bottom)) !important;
  max-height:min(38vh, 240px);
}
html.onboard-lock-scroll,
html.onboard-lock-scroll body{
  overflow:hidden !important;
  height:100%;
  overscroll-behavior:none;
  touch-action:none;
}
html.onboard-lock-scroll body{
  position:fixed;
  left:0; right:0; width:100%;
}
.onboard-target-body{
  /* без z-index — иначе скролл наезжает на карточку тура */
}
.onboard-actions--stack{ flex-direction:column; width:100%; max-width:320px; margin:0 auto; }
.onboard-center{
  position:fixed; z-index:104; left:16px; right:16px; top:50%; transform:translateY(-50%);
  background:var(--card); border-radius:22px; padding:24px 20px 20px; text-align:center;
  box-shadow:var(--shadow-lg); border:1px solid var(--line-soft);
  animation:pop .4s cubic-bezier(.2,1.3,.4,1);
  max-height:min(88vh, 520px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  pointer-events:auto;
}
.onboard-center.hidden{ display:none !important; }
.onboard-big-icon{
  font-size:48px; width:80px; height:80px; margin:0 auto 12px; border-radius:22px;
  display:flex; align-items:center; justify-content:center; background:var(--accent-soft);
}
.onboard-center h2{ margin:0 0 8px; font-size:19px; font-weight:800; letter-spacing:-.4px; }
.onboard-center p{ margin:0 0 16px; font-size:14px; line-height:1.45; color:var(--hint); }
.onboard-cta-btns{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.onboard-cta-btns .btn{ width:100%; padding:13px; }
.onboard-skip--link{
  border:none; background:none; color:var(--hint); font-size:13px; font-weight:600;
  padding:8px; cursor:pointer; width:100%;
}
.onboard-pulse{
  animation:onboardPulse 1.2s ease 2;
  box-shadow:0 0 0 3px var(--accent-soft);
}
@keyframes onboardPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 var(--accent-soft); }
  50%{ transform:scale(1.02); box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
}

/* ── Карусель (фаза 1) ── */
.onboard-carousel{
  position:fixed; inset:0; z-index:105; display:flex; flex-direction:column;
  background:var(--bg); pointer-events:auto;
}
.onboard-carousel.hidden{ display:none !important; }
.onboard-carousel-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:max(10px, env(safe-area-inset-top)) 16px 6px; flex-shrink:0;
}
.onboard-carousel-skip{ border:none; background:none; color:var(--hint); font-size:14px; font-weight:600; min-width:72px; text-align:left; }
.onboard-carousel-progress{ font-size:13px; font-weight:700; color:var(--accent); }
.onboard-carousel-viewport{ flex:1; min-height:0; overflow:hidden; }
.onboard-carousel-track{ display:flex; height:100%; transition:transform .38s cubic-bezier(.25,.8,.25,1); }
.ob-slide{
  min-width:100%; height:100%; padding:4px 20px 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.ob-slide-icon{
  font-size:48px; width:76px; height:76px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); margin-bottom:12px; flex-shrink:0;
}
.ob-slide-title{ font-size:20px; font-weight:800; letter-spacing:-.45px; margin:0 0 6px; line-height:1.2; }
.ob-slide-text{ font-size:14px; line-height:1.4; color:var(--hint); margin:0 0 10px; max-width:300px; }
.ob-slide .onboard-tips{ max-width:300px; margin-bottom:12px; font-size:12px; }
.ob-slide-art{ width:100%; max-width:280px; flex-shrink:0; display:flex; align-items:flex-start; justify-content:center; margin-bottom:8px; }
.ob-mock{
  width:100%; background:var(--secbg); border:1px solid var(--line-soft);
  border-radius:16px; padding:14px; box-shadow:var(--shadow-sm);
}
.ob-mock--stack{ display:flex; flex-direction:column; gap:8px; }
.ob-mock--center{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:28px 14px; color:var(--hint); font-weight:600; }
.ob-mock-big{ font-size:40px; }
.ob-mock-row{ display:flex; align-items:center; gap:12px; background:var(--card); border-radius:12px; padding:12px; border:1px solid var(--line-soft); text-align:left; }
.ob-mock-row b{ display:block; font-size:14px; font-weight:700; }
.ob-mock-row span{ font-size:12px; color:var(--hint); }
.ob-mock-ico{ font-size:22px; width:40px; height:40px; border-radius:11px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ob-mock-tz{ background:var(--card); border-radius:10px; padding:10px 12px; font-size:12px; color:var(--hint); line-height:1.4; margin-bottom:10px; border:1px solid var(--line-soft); text-align:left; }
.ob-mock-btn{ background:var(--accent); color:var(--btn-text); border-radius:11px; padding:11px; font-size:13px; font-weight:700; text-align:center; }
.ob-mock-seg{ display:flex; gap:4px; background:var(--card); border-radius:10px; padding:3px; margin-bottom:10px; border:1px solid var(--line-soft); }
.ob-mock-seg span{ flex:1; text-align:center; font-size:11px; font-weight:650; padding:7px 4px; border-radius:8px; color:var(--hint); }
.ob-mock-seg span.on{ background:var(--accent); color:var(--btn-text); }
.ob-mock-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.ob-mock-chips span{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:14px; background:var(--card); border:1px solid var(--line-soft); color:var(--hint); }
.ob-mock-chips span.on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.ob-mock-stat{ text-align:center; margin-bottom:10px; }
.ob-mock-stat b{ font-size:28px; font-weight:900; letter-spacing:-1px; display:block; }
.ob-mock-stat span{ font-size:12px; color:var(--hint); }
.ob-mock-preview{ background:var(--card); border-radius:8px; padding:8px 10px; font-size:11px; color:var(--hint); margin-bottom:10px; border:1px solid var(--line-soft); text-align:left; }
.ob-mock-btn--ghost{ background:var(--card); color:var(--text); border:1px solid var(--line-soft); }
.onboard-carousel-dots{ display:flex; justify-content:center; gap:6px; padding:12px 0 8px; flex-shrink:0; }
.ob-dot{ width:7px; height:7px; border-radius:50%; border:none; padding:0; background:var(--line); transition:all .25s; }
.ob-dot.on{ width:22px; border-radius:4px; background:var(--accent); }
.onboard-carousel-bottom{ flex-shrink:0; padding:4px 20px calc(14px + env(safe-area-inset-bottom)); }
.onboard-carousel-bottom .btn{ width:100%; padding:15px; font-size:16px; font-weight:750; }

/* CTA после spotlight */
.onboard-cta-sheet{
  position:fixed; z-index:104; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom));
  background:var(--card); border-radius:22px; padding:22px 20px 16px; text-align:center;
  box-shadow:var(--shadow-lg); border:1px solid var(--line-soft); pointer-events:auto;
}
.onboard-cta-sheet.hidden{ display:none !important; }
.onboard-cta-icon{ font-size:44px; margin-bottom:10px; }
.onboard-cta-sheet h2{ margin:0 0 8px; font-size:20px; font-weight:800; }
.onboard-cta-sheet p{ margin:0 0 16px; font-size:14px; color:var(--hint); line-height:1.45; }
.onboard-cta-sheet .btn{ width:100%; margin-bottom:8px; padding:14px; }

/* ── UX polish: skeleton / empty / spacing / tg dark / swipe ── */
:root{
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
}

.stack{ display:flex; flex-direction:column; gap:var(--space-2); }
.stack-tight{ display:flex; flex-direction:column; gap:var(--space-1); }
.stack-loose{ display:flex; flex-direction:column; gap:var(--space-3); }
.home-actions{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); }
.home-actions .btn{ width:100%; margin:0; }
.chat-bar{
  display:flex; gap:var(--space-1); align-items:center;
  margin:var(--space-1) 0 var(--space-2);
}
.chat-bar .search{ margin-bottom:0; flex:1; }
.chat-bar .btn{ flex:0 0 auto; min-width:48px; padding:12px 14px; }
.tz-box .btn.big, .tz-box > .btn-primary{ width:100%; margin-top:var(--space-2); }
.tz-note{ font-size:12px; margin:var(--space-1) 0 0; line-height:1.35; }

/* Skeleton */
.skel-list{ display:flex; flex-direction:column; gap:10px; }
.skel-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1.5px solid var(--line-soft);
  border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow-sm);
}
.skel-avatar{
  width:46px; height:46px; border-radius:13px; flex:0 0 auto;
  background:var(--secbg);
}
.skel-lines{ flex:1; display:flex; flex-direction:column; gap:8px; }
.skel-line{ height:12px; border-radius:6px; background:var(--secbg); }
.skel-line.w60{ width:62%; }
.skel-line.w40{ width:42%; }
.skel-line.w80{ width:80%; }
.skel-filters{ display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.skel-fgroup{
  height:88px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--line-soft);
}
.skel-pulse{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--text) 6%, var(--secbg)) 0%,
    color-mix(in srgb, var(--text) 12%, var(--secbg)) 45%,
    color-mix(in srgb, var(--text) 6%, var(--secbg)) 100%);
  background-size:220% 100%;
  animation:skelShine 1.15s ease-in-out infinite;
}
@keyframes skelShine{
  0%{ background-position:100% 0 }
  100%{ background-position:-100% 0 }
}

/* Empty / zero state */
.empty-card{
  background:var(--card); border:1.5px solid var(--line-soft);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm);
  margin:4px 0 8px;
}
.empty-card .empty-ico{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:22px; margin-bottom:10px;
}
.empty-card h3{ margin:0 0 6px; font-size:16px; font-weight:750; letter-spacing:-.2px; }
.empty-card .empty-msg{
  margin:0 0 12px; font-size:13.5px; line-height:1.45; color:var(--hint);
  white-space:pre-wrap;
}
.empty-card .empty-section{ margin:10px 0 0; }
.empty-card .empty-section-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--hint); margin:0 0 8px;
}
.empty-actions{ display:flex; flex-direction:column; gap:8px; }
.empty-actions .btn{ width:100%; margin:0; padding:12px; font-size:14px; }
.empty-actions .btn .hint-count{
  opacity:.85; font-weight:550; font-size:12.5px; margin-left:4px;
}
.empty-meta{ margin-top:12px; font-size:12.5px; color:var(--hint); line-height:1.4; }

/* Sheet swipe */
.sheet-card.sheet-dragging{
  transition:none !important;
  animation:none !important;
}
.sheet-card.sheet-dragging .sheet-handle{ opacity:.55; }

/* Toast contrast on dark Telegram theme */
html[data-tg-theme="dark"]{
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 10px rgba(0,0,0,.35);
  --shadow-md: 0 8px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 -10px 44px rgba(0,0,0,.65);
  --line: color-mix(in srgb, #ffffff 14%, transparent);
  --line-soft: color-mix(in srgb, #ffffff 8%, transparent);
}
html[data-tg-theme="dark"] .toast{
  background:#f2f4f8; color:#12151c;
  box-shadow:0 10px 32px rgba(0,0,0,.55);
}
html[data-tg-theme="dark"] .toast.toast-ok{
  background:linear-gradient(145deg, #2ecf7a 0%, #1fa463 100%);
  color:#fff;
}
html[data-tg-theme="dark"] .toast.toast-err{
  background:linear-gradient(145deg, #ff6b7d 0%, #e0445b 100%);
  color:#fff;
}
html[data-tg-theme="dark"] .toast.toast-warn{
  background:linear-gradient(145deg, #f0b429 0%, #d68a00 100%);
  color:#1a1200;
}
html[data-tg-theme="dark"] .skel-pulse{
  background:linear-gradient(90deg,
    color-mix(in srgb, #fff 8%, var(--secbg)) 0%,
    color-mix(in srgb, #fff 16%, var(--secbg)) 45%,
    color-mix(in srgb, #fff 8%, var(--secbg)) 100%);
  background-size:220% 100%;
}

@media (prefers-reduced-motion: reduce){
  .skel-pulse{ animation:none !important; }
}