/* ============================================================
   Конструктор выгрузок — 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; }
.sub-status{
  margin-top:8px; font-size:13px; font-weight:650; line-height:1.35;
}
.sub-status.ok{ color:var(--ok); }
.sub-status.error{ color:var(--danger); }
.sub-status.run{ color:var(--accent); }
.sub-status.idle{ color:var(--hint); }
.card.sub-err{ border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }
.card.sub-run{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.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); }
#btn-share.icon-btn{ font-size:17px; }

.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; }
.sched-min-row{ margin-top:2px; }
.sched-min-row .sched-time-inp{ flex:1; }

.sched-daymap{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  padding:10px 10px 8px;
}
.sched-daymap-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-weight:650; color:var(--hint); margin-bottom:8px;
  letter-spacing:.01em;
}
.sched-daymap-leg{ display:flex; align-items:center; gap:8px; font-weight:500; }
.sched-daymap-leg i{
  display:inline-block; width:8px; height:8px; border-radius:3px;
}
.sched-daymap-leg i.q{ background:color-mix(in srgb, var(--ok) 70%, var(--line)); }
.sched-daymap-leg i.b{ background:color-mix(in srgb, var(--warn) 85%, #fff); }
.sched-daymap-grid{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:4px;
}
.sched-h{
  position:relative; overflow:hidden;
  height:36px; border:0; border-radius:8px;
  background:color-mix(in srgb, var(--text) 5%, var(--secbg));
  color:var(--hint); font:inherit; font-size:11px; font-weight:700;
  cursor:pointer; padding:0;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.sched-h .bar{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  transform-origin:bottom; background:currentColor; opacity:.18;
  pointer-events:none;
}
.sched-h .n{ position:relative; z-index:1; }
.sched-h.quiet{ color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, var(--card)); }
.sched-h.ok{ color:var(--text); background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
.sched-h.warm{ color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, var(--card)); }
.sched-h.busy{ color:var(--warn); background:color-mix(in srgb, var(--warn) 22%, var(--card)); }
.sched-daymap-leg i.h{
  box-sizing:border-box; background:transparent;
  border:1.5px solid color-mix(in srgb, var(--accent) 70%, var(--line));
}
.sched-h.hit:not(.on){
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}
.sched-hits-line{
  font-size:12px; line-height:1.4; padding:2px 4px 0;
}
.sched-rec-btn.warm{ border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); }
.sched-rec-btn.busy{
  border-color:color-mix(in srgb, var(--warn) 55%, var(--line));
  color:var(--warn);
}
.sched-h.on{
  background:var(--accent); color:var(--btn-text);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
  transform:translateY(-1px);
}
.sched-h:active{ transform:scale(.94); }

.sched-rec{
  display:flex; flex-wrap:wrap; gap:6px;
}
.sched-rec-btn{
  font:inherit; font-size:12px; font-weight:650;
  padding:7px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.sched-rec-btn.quiet{ border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); }
.sched-rec-btn.on{
  background:var(--accent); color:var(--btn-text); border-color:transparent;
}

.sched-status{
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--secbg);
}
.sched-status-title{ font-size:13px; font-weight:700; }
.sched-status-hint{ font-size:12px; color:var(--hint); margin-top:4px; line-height:1.4; }
.sched-status.busy{
  background:color-mix(in srgb, var(--warn) 14%, var(--card));
}
.sched-status.quiet{
  background:color-mix(in srgb, var(--ok) 10%, var(--card));
}
.sched-suggest{
  margin-top:8px; font:inherit; font-size:12px; font-weight:700;
  padding:8px 12px; border-radius:10px; border:0; cursor:pointer;
  background:var(--accent); color:var(--btn-text);
}
.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); }
#share-banner-slot{ margin:8px 0 4px; }
#share-banner-slot:empty{ margin:0; }
.share-banner{
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line-soft));
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card));
  border-radius:14px; padding:12px 14px;
}
.share-banner-text{ font-size:13px; line-height:1.45; margin:0; }
.share-url{ word-break:break-all; font-size:12.5px; margin:8px 0 0; }
.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);
  transition:transform .26s var(--ease-out);
  will-change:transform;
}
/* sheetUp играет один раз: после неё transform снимается/ставится через transition,
   иначе каждый touchstart→touchend по карточке перезапускал анимацию («отскок») */
.sheet-card.sheet-opened{ animation:none; }
.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:var(--sheet-close-from, 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; }
.sheet-share-box{
  margin-top:10px; padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--warn) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  font-size:13px; line-height:1.45;
}
.sheet-share-box.overwrite{
  background:color-mix(in srgb, var(--danger) 10%, var(--card));
  border-color:color-mix(in srgb, var(--danger) 35%, var(--line));
}
.sheet-share-title{ font-weight:700; margin-bottom:6px; }
.sheet-share-lead{ margin:0 0 8px; }
.sheet-share-peers{ margin:0 0 8px; padding-left:18px; }
.sheet-share-peers li{ margin:2px 0; }
.sheet-share-lose{ margin:0 0 10px; }
.sheet-share-ack{
  display:flex; gap:8px; align-items:flex-start; font-size:13px; cursor:pointer;
}
.sheet-share-ack input{ margin-top:3px; flex:0 0 auto; }
.sheet-share-ack.need{
  outline:2px solid var(--danger); border-radius:8px; padding:4px 6px;
}
.sheet-share-other{ margin-top:8px; width:100%; }

/* Таблица превью */
.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-kicker{
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ok); margin-bottom:6px; text-align:left;
}
.ob-mock-taken{
  background:color-mix(in srgb, var(--ok) 8%, var(--secbg));
  border-color:color-mix(in srgb, var(--ok) 28%, var(--line-soft));
}
.ob-mock-taken .ob-mock-stat{ margin-bottom:8px; }
.ob-mock-taken .ob-mock-stat span{ display:block; margin-top:2px; }
.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; }
}

/* ── Призма: каналы ─────────────────────────────────────── */
.prz-view{
  margin-bottom:12px;
}
.prz-view-kicker{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hint); margin-bottom:8px;
}
.prz-view-seg{
  display:flex; gap:6px; padding:4px; border-radius:14px;
  background:var(--secbg); border:1px solid var(--line-soft);
}
.prz-view-btn{
  flex:1; border:none; background:transparent; color:var(--text);
  font:inherit; font-size:13px; font-weight:650; padding:9px 8px;
  border-radius:11px; cursor:pointer;
}
.prz-view-btn.on{
  background:var(--card); color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.prz-view-hint{
  margin-top:8px; font-size:12.5px; color:var(--hint); line-height:1.45;
}
.prz-hero{
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 58%),
    var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:16px 16px 14px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.prz-hero-kicker{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.prz-hero h2{
  margin:0 0 6px; font-size:18px; font-weight:750; letter-spacing:-.3px; line-height:1.25;
}
.prz-hero p{ margin:0; font-size:13.5px; color:var(--hint); line-height:1.45; }
.prz-hero-scope{
  margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.prz-pill{
  font-size:12px; font-weight:650; padding:4px 10px; border-radius:999px;
  background:var(--secbg); color:var(--text); border:1px solid var(--line-soft);
}
.prz-pill.on{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); color:var(--accent); }
.prz-ghost{
  border:none; background:transparent; color:var(--accent); font:inherit; font-size:12.5px;
  font-weight:650; padding:4px 2px; cursor:pointer;
}

.prz-picker .flabel{ margin-bottom:10px; }
.prz-ta{
  min-height:84px; resize:vertical; line-height:1.45; margin-bottom:8px;
}
.prz-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.prz-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:5px 8px 5px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:650;
}
.prz-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.prz-chip button{
  border:none; background:transparent; color:inherit; font-size:15px; line-height:1;
  padding:0 2px; cursor:pointer; opacity:.7;
}

.prz-row{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border-radius:14px;
  background:var(--secbg); border:1.5px solid transparent;
  cursor:pointer; user-select:none; text-align:left;
  transition:transform .18s var(--ease-spring), border-color .2s, background .2s;
}
.prz-row:active{ transform:scale(.985); }
.prz-row.on{
  background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
}
.prz-av{
  width:34px; height:34px; flex:0 0 auto; border-radius:11px;
  display:grid; place-items:center;
  font-size:14px; font-weight:750; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, var(--bg));
}
.prz-row.on .prz-av{ background:var(--accent); color:var(--btn-text); }
.prz-row-body{ min-width:0; flex:1; }
.prz-row-name{ font-size:14px; font-weight:650; letter-spacing:-.15px; }
.prz-row-meta{
  font-size:12px; color:var(--hint); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prz-check{
  width:20px; height:20px; flex:0 0 auto; border-radius:6px; border:2px solid var(--hint);
  display:grid; place-items:center; font-size:12px; color:transparent;
}
.prz-row.on .prz-check{ background:var(--accent); border-color:var(--accent); color:var(--btn-text); }
.prz-list{ max-height:min(240px, 38vh); overflow-y:auto; display:flex; flex-direction:column; gap:6px; -webkit-overflow-scrolling:touch; }
.prz-list-empty{ padding:18px 8px; text-align:center; color:var(--hint); font-size:13px; }

.prz-taken{
  margin:8px 0 12px; padding:14px 14px 12px;
  border-radius:16px;
  background:color-mix(in srgb, var(--ok) 7%, var(--card));
  border:1px solid color-mix(in srgb, var(--ok) 22%, var(--line-soft));
}
.prz-taken.is-all{
  background:var(--accent-softer);
  border-color:color-mix(in srgb, var(--accent) 22%, var(--line-soft));
}
.prz-taken-kicker{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); margin-bottom:4px;
}
.prz-taken.is-all .prz-taken-kicker{ color:var(--accent); }
.prz-taken-title{ font-size:16px; font-weight:750; letter-spacing:-.2px; margin-bottom:10px; }
.prz-taken-item{
  display:flex; gap:10px; align-items:flex-start; padding:8px 0;
  border-top:1px solid var(--line-soft);
}
.prz-taken-item:first-of-type{ border-top:none; padding-top:0; }
.prz-taken-name{ font-size:13.5px; font-weight:650; }
.prz-taken-meta{ font-size:12px; color:var(--hint); margin-top:2px; word-break:break-all; }
.prz-taken-more{ font-size:12.5px; font-weight:650; color:var(--hint); padding-top:4px; }
.prz-taken .prz-av{ width:30px; height:30px; border-radius:9px; font-size:13px; }
.prz-picker{ margin-bottom:4px; }
.prz-catalog-head{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--hint); margin:4px 0 8px;
}
.prz-more{
  margin-top:4px; padding:14px 14px 12px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line-soft);
}
.prz-more-kicker{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--hint); margin-bottom:4px;
}
.prz-more-title{ font-size:15px; font-weight:750; letter-spacing:-.2px; margin-bottom:12px; }
.prz-field{ margin-bottom:12px; }
.prz-field:last-child{ margin-bottom:2px; }
.prz-field-label{ font-size:12.5px; font-weight:650; margin-bottom:8px; }
.prz-field-hint{ font-weight:500; color:var(--hint); }
.prz-dates{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prz-date{
  display:flex; flex-direction:column; gap:4px;
  font-size:12px; color:var(--hint); font-weight:650;
}
.prz-date .dateinput{ margin:0; width:100%; }
.prz-more .chip{ padding:7px 12px; font-size:13px; }

.prototype-hidden{display:none!important}
.prototype-builder-tools{margin:8px 0 12px}
.prototype-flag{padding:7px 10px;border-radius:10px;background:#fff4d8;color:#805900;font-size:12px;font-weight:700;text-align:center}
.prototype-view-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px;padding:4px;border-radius:14px;background:var(--secondary-bg,#f1f2f6)}
.prototype-view-switch button{border:0;border-radius:10px;padding:10px 6px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:700}
.prototype-view-switch button.on{background:var(--bg,#fff);box-shadow:0 2px 8px rgba(0,0,0,.08);color:var(--accent,#5b5ce2)}
.prototype-semantic-summary{margin-top:8px;padding:12px 14px;border:1px solid rgba(91,92,226,.22);border-radius:14px;background:rgba(91,92,226,.06);font-size:13px;line-height:1.45}
.prototype-workspace{padding-bottom:12px}
.prototype-kind-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;padding:12px;border-radius:14px;background:var(--bg,#fff)}
.prototype-kind-row>span{flex:0 0 90px;padding-top:8px;font-size:12px;font-weight:750;color:var(--hint)}
.prototype-chip-grid{display:flex;flex-wrap:wrap;gap:7px}
.prototype-chip{border:1px solid var(--line,rgba(0,0,0,.12));border-radius:999px;padding:8px 11px;background:var(--bg,#fff);color:var(--text);font:inherit;font-size:12.5px;font-weight:650;text-align:left}
.prototype-chip.on{border-color:var(--accent,#5b5ce2);background:rgba(91,92,226,.1);color:var(--accent,#5b5ce2)}
.prototype-canvas-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,.8fr);gap:12px;align-items:start}
.prototype-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.prototype-zone,.prototype-catalog,.prototype-assistant-card{padding:14px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:16px;background:var(--bg,#fff);box-shadow:0 3px 14px rgba(0,0,0,.035)}
.prototype-zone{margin-bottom:10px;min-width:0}
.prototype-zone-wide{grid-column:1/-1}
.prototype-zone h3,.prototype-catalog h4,.prototype-assistant-card h3{margin:0 0 4px;font-size:15px}
.prototype-zone p,.prototype-assistant-card p{margin:0 0 11px;color:var(--hint);font-size:12.5px;line-height:1.4}
.prototype-catalog{position:sticky;top:8px;max-height:64vh;overflow:auto}
.prototype-catalog+.prototype-catalog{margin-top:10px}
.prototype-catalog h4{position:sticky;top:-14px;margin:-14px -14px 10px;padding:14px;background:var(--bg,#fff);z-index:1}
.prototype-token{display:flex;align-items:center;gap:7px;margin-top:7px;padding:9px;border:1px solid rgba(91,92,226,.2);border-radius:11px;background:rgba(91,92,226,.07);font-size:12.5px;font-weight:700}
.prototype-token.dragging{opacity:.45}
.prototype-drag{cursor:grab;color:var(--hint);touch-action:none;letter-spacing:-4px}
.prototype-token>span:nth-child(2){flex:1;min-width:0}
.prototype-token-actions{display:flex;gap:2px}
.prototype-token-actions button{width:25px;height:25px;border:0;border-radius:7px;background:rgba(255,255,255,.75);color:var(--text);font-weight:800}
.prototype-token-actions button:disabled{opacity:.3}
.prototype-empty{padding:14px;border:1px dashed var(--line,rgba(0,0,0,.18));border-radius:10px;color:var(--hint);font-size:12px;text-align:center}
.prototype-active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.prototype-active-filters span{padding:6px 9px;border-radius:999px;background:var(--secondary-bg,#f1f2f6);font-size:12px}
.prototype-assistant-card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;margin-bottom:10px}
.prototype-step{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent,#5b5ce2);color:#fff;font-weight:800}
.prototype-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prototype-goal{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:13px;padding:12px;background:var(--bg,#fff);color:var(--text);font:inherit;text-align:left}
.prototype-goal small{color:var(--hint);line-height:1.35}
.prototype-assistant-actions{display:flex;flex-wrap:wrap;gap:8px}
.prototype-mode #btn-export{opacity:.6}
.prototype-board-shell{display:block;margin-bottom:12px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:18px;overflow:hidden;background:#eef0f6}
.prototype-board-toolbar{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--bg,#fff);border-bottom:1px solid var(--line,rgba(0,0,0,.1));font-size:12px}
.prototype-board-toolbar>b{font-size:14px}.prototype-board-toolbar>span{color:var(--hint);flex:1}
.prototype-board-toolbar>div{display:flex;align-items:center;gap:4px}
.prototype-board-toolbar button{height:28px;min-width:28px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:8px;background:var(--bg,#fff);color:var(--text);font-weight:750}
.prototype-board-toolbar [data-board-zoom-label]{min-width:42px;text-align:center;font-weight:700}
.prototype-board-viewport{height:650px;overflow:auto;background-color:#f4f5f9;background-image:radial-gradient(circle,rgba(91,92,226,.2) 1px,transparent 1.4px);background-size:22px 22px}
.prototype-board-inner{position:relative;width:1240px;height:650px;transform-origin:0 0}
.prototype-board-edges{position:absolute;inset:0;width:1240px;height:650px;overflow:visible;pointer-events:none}
.prototype-board-edges path{fill:none;stroke:#8c8de9;stroke-width:3;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.prototype-board-edges circle{fill:#6668df}
.prototype-board-node{position:absolute;width:265px;max-height:310px;border:1px solid rgba(91,92,226,.22);border-radius:16px;background:var(--bg,#fff);box-shadow:0 10px 30px rgba(31,35,67,.13);z-index:2;overflow:auto}
.prototype-board-node.moving{box-shadow:0 18px 45px rgba(31,35,67,.25);z-index:5}
.prototype-board-node>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--line,rgba(0,0,0,.08));background:var(--bg,#fff)}
.prototype-board-node>header h3{margin:0;font-size:14px}.prototype-board-node>header small{display:block;margin-top:2px;color:var(--hint);font-size:11px}
.prototype-node-handle{font-size:21px;color:#7779de;cursor:grab;touch-action:none;user-select:none}.prototype-node-handle:active{cursor:grabbing}
.prototype-node-body{padding:10px}.prototype-node-body p{margin:4px 0 9px;color:var(--hint);font-size:12px}
.prototype-board-node .prototype-token{padding:7px;margin-top:5px}.prototype-board-node .prototype-token-actions button{width:23px;height:23px}
.prototype-board-node .prototype-chip{padding:6px 8px;font-size:11px}.prototype-board-node .btn{width:100%;padding:8px;font-size:12px}
.prototype-port{position:absolute;top:50%;width:11px;height:11px;margin-top:-5px;border:2px solid #fff;border-radius:50%;background:#6668df;box-shadow:0 0 0 1px #6668df}
.prototype-port-in{left:-6px}.prototype-port-out{right:-6px}.prototype-node-note{padding:9px;border-radius:9px;background:var(--secondary-bg,#f1f2f6);font-size:12px;line-height:1.4}
.prototype-board-preview{margin-top:10px}.prototype-desktop-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.prototype-mobile-canvas{display:none}
.prototype-sheet-toolbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line,rgba(0,0,0,.1));border-bottom:0;border-radius:15px 15px 0 0;background:var(--bg,#fff)}
.prototype-sheet-toolbar>div{flex:1;min-width:0}.prototype-sheet-toolbar b,.prototype-sheet-toolbar small{display:block}.prototype-sheet-toolbar small{margin-top:3px;color:var(--hint);font-size:11.5px}
.prototype-sheet-filters{margin:0;padding:8px 11px;border:1px solid var(--line,rgba(0,0,0,.1));border-bottom:0;background:#f8f9fc}
.prototype-sheet-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:10px;align-items:start}.prototype-sheet-layout>main,.prototype-sheet-layout>aside{min-width:0}
.prototype-spreadsheet{max-height:510px;overflow:auto;border:1px solid #cfd3dc;background:#fff;box-shadow:0 5px 18px rgba(24,33,58,.08)}
.prototype-spreadsheet table{min-width:100%;width:max-content;border-collapse:separate;border-spacing:0;color:#202124;font-size:12px}
.prototype-spreadsheet th,.prototype-spreadsheet td{min-width:145px;height:34px;padding:6px 9px;border-right:1px solid #dadce0;border-bottom:1px solid #dadce0;white-space:nowrap;text-align:left;background:#fff}
.prototype-spreadsheet thead th{position:sticky;top:0;z-index:3;padding:0;background:#f8f9fa;font-weight:650}
.prototype-sheet-corner,.prototype-row-num{position:sticky!important;left:0!important;z-index:4!important;min-width:42px!important;width:42px!important;text-align:center!important;background:#f1f3f4!important;color:#5f6368!important}
.prototype-sheet-letter{height:21px;padding:2px 8px;border-bottom:1px solid #dadce0;background:#f1f3f4;color:#5f6368;text-align:center;font-size:10px;font-weight:500}
.prototype-sheet-title{display:flex;align-items:center;gap:5px;height:35px;padding:4px 6px}.prototype-sheet-title>span{flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis}
.prototype-sheet-title button{width:23px;height:23px;padding:0;border:0;border-radius:5px;background:transparent;color:#5f6368;font-weight:800}.prototype-sheet-title button:hover{background:rgba(0,0,0,.07)}
.prototype-sheet-head{cursor:grab}.prototype-sheet-head.dragging{opacity:.45}.prototype-sheet-head.dim .prototype-sheet-title{box-shadow:inset 0 -3px #5b7cfa;background:#eef3ff}.prototype-sheet-head.measure .prototype-sheet-title{box-shadow:inset 0 -3px #34a853;background:#edfaef}.prototype-sheet-head.col .prototype-sheet-title{box-shadow:inset 0 -3px #8b5cf6;background:#f4efff}
.prototype-sheet-add-head,.prototype-sheet-add-cell{min-width:48px!important;width:48px!important;background:#f8f9fa!important}.prototype-sheet-add-head button{display:block;width:100%;height:100%;border:0;background:transparent;color:#5f6368;font-size:20px}
.prototype-sheet-tabs{display:flex;align-items:center;gap:2px;min-height:38px;padding:4px 8px;border:1px solid #cfd3dc;border-top:0;background:#f1f3f4}.prototype-sheet-tabs button{height:29px;padding:0 14px;border:0;border-radius:4px 4px 0 0;background:transparent;color:#3c4043;font-size:12px}.prototype-sheet-tabs button.on{background:#fff;color:#188038;font-weight:700;box-shadow:inset 0 -2px #188038}.prototype-sheet-tabs span{margin-left:auto;color:#6b7280;font-size:11px}
.prototype-layout-picker{margin-top:9px;padding:10px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:12px;background:var(--bg,#fff)}
.prototype-sheet-layout>aside .prototype-catalog{position:static;max-height:310px}.prototype-sheet-layout>aside .prototype-catalog h4{position:sticky}
.prototype-filter-drawer{position:fixed;inset:0;z-index:70}.prototype-filter-backdrop{position:absolute;inset:0;background:rgba(18,24,38,.42);backdrop-filter:blur(2px)}
.prototype-filter-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(440px,92vw);background:var(--bg,#fff);box-shadow:-16px 0 48px rgba(18,24,38,.22);animation:prototypeDrawerIn .22s ease-out}
@keyframes prototypeDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.prototype-filter-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid var(--line,rgba(0,0,0,.1))}.prototype-filter-head strong{font-size:16px}.prototype-filter-head span{color:var(--hint);font-size:12px}
.prototype-filter-body{flex:1;min-height:0;overflow:auto;padding:12px 14px}.prototype-filter-body .fgroup{margin-bottom:10px}
.prototype-filter-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line,rgba(0,0,0,.1));background:var(--bg,#fff)}.prototype-filter-foot .btn{width:100%}
body.prototype-filter-open{overflow:hidden}

@media(max-width:720px){
  .prototype-board-shell,.prototype-desktop-catalog{display:none}
  .prototype-mobile-canvas{display:grid}
  .prototype-canvas-grid,.prototype-zones{grid-template-columns:1fr}
  .prototype-catalog{position:static;max-height:none}
  .prototype-kind-row{display:block}
  .prototype-kind-row>span{display:block;padding:0 0 8px}
  .prototype-choice-grid{grid-template-columns:1fr}
  .prototype-view-switch button{font-size:12px;padding:9px 4px}
  .prototype-token-actions button{width:29px;height:29px}
  .prototype-sheet-toolbar{flex-wrap:wrap}.prototype-sheet-toolbar>div{flex-basis:100%}
  .prototype-sheet-toolbar .btn{flex:1;padding:9px 6px;font-size:11.5px}
  .prototype-sheet-layout{grid-template-columns:1fr}.prototype-spreadsheet{max-height:430px}
  .prototype-spreadsheet th,.prototype-spreadsheet td{min-width:125px}.prototype-sheet-tabs span{display:none}
  .prototype-filter-panel{top:auto;left:0;width:100%;height:min(88vh,760px);border-radius:18px 18px 0 0;animation:prototypeSheetIn .22s ease-out}
  @keyframes prototypeSheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media(min-width:1000px){
  .prototype-mode #screen-builder{width:min(100%,1560px);max-width:none;margin:0 auto;padding:0 24px}
  .prototype-mode .prototype-builder-tools{display:grid;grid-template-columns:360px minmax(0,1fr);gap:10px;align-items:start}
  .prototype-mode .prototype-flag{grid-column:1/-1}
  .prototype-mode .prototype-view-switch{margin:0}
  .prototype-mode .prototype-semantic-summary{margin:0;min-height:48px}
  .prototype-mode .prototype-sheet-layout{grid-template-columns:minmax(0,1fr) 320px;gap:14px}
  .prototype-mode .prototype-sheet-layout>aside{position:sticky;top:10px}
  .prototype-mode .prototype-sheet-layout>aside .prototype-catalog{max-height:500px}
  .prototype-mode .prototype-sheet-toolbar .btn{flex:0 0 auto;min-width:180px;padding:12px 16px}
  .prototype-mode .action-bar{display:none}
  .prototype-mode .prototype-spreadsheet{height:500px;max-height:calc(100vh - 330px);min-height:360px}
}
