:root{
  --bg:#0d0b1a;
  --bg-2:#141029;
  --card:rgba(255,255,255,.045);
  --card-hi:rgba(255,255,255,.08);
  --line:rgba(226,205,160,.16);
  --line-hi:rgba(226,205,160,.42);
  --gold:#e2cda0;
  --gold-dim:#a3906b;
  --text:#efeaf7;
  --muted:#9d95b5;
  --r:16px;
  --pad:20px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Атрибут hidden должен побеждать любой display у .sheet, #fallbackBar и прочих. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.5 var(--sans);
  overflow-x:hidden;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}

/* ——— фон: ночное небо ——— */
.sky{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, #2a2050 0%, rgba(42,32,80,0) 60%),
    radial-gradient(80% 50% at 90% 10%, rgba(120,80,160,.22) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg,#141029 0%, var(--bg) 45%, #0a0814 100%);
}
.sky::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 33% 42%, rgba(226,205,160,.7), transparent),
    radial-gradient(1px 1px at 62% 31%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 20% 68%, rgba(226,205,160,.5), transparent),
    radial-gradient(1px 1px at 52% 85%, rgba(255,255,255,.4), transparent);
  animation:twinkle 6s ease-in-out infinite alternate;
  will-change:opacity;      /* отдельный слой: анимируется на GPU, без перерисовки градиентов */
  transform:translateZ(0);
}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}

/* ——— верх ——— */
.topbar{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg) 55%,rgba(13,11,26,0));padding-bottom:10px}
.progress{height:2px;background:rgba(255,255,255,.07)}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .35s cubic-bezier(.4,0,.2,1)}
.crumbs{padding:8px var(--pad) 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);min-height:16px}

main{padding:6px var(--pad) 16px;max-width:560px;margin:0 auto}
.step{animation:rise .32s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em}
h1{font-size:32px;line-height:1.08;margin:10px 0 9px}
.title{font-size:23px;margin:4px 0 5px}
.sub{color:var(--muted);margin:0 0 16px;font-size:13.5px}
.sub.center,.hero{text-align:center}

/* ——— экран приветствия ——— */
.hero{padding:14px 0 4px}
.moon{font-size:36px;text-shadow:0 0 22px rgba(226,205,160,.5);animation:float 5s ease-in-out infinite;will-change:transform}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.lead{color:var(--muted);max-width:34ch;margin:0 auto;font-size:14px}
.steps{list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:0;text-align:left}
.steps li{position:relative;display:flex;align-items:flex-start;gap:12px;padding:8px 0}
/* Вертикальная линия связывает шаги в последовательность. */
.steps li:not(:last-child)::before{
  content:"";position:absolute;left:12px;top:31px;bottom:-2px;width:1px;
  background:linear-gradient(180deg,var(--line-hi),rgba(226,205,160,.06));
}
.steps span{
  flex:none;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-hi);color:var(--gold);font-family:var(--serif);font-size:13px;
  background:var(--bg);position:relative;z-index:1;
}
.steps b{display:block;font-size:14px;font-weight:600;margin-top:2px}
.steps i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px;line-height:1.3}
.disclaimer{font-size:11px;line-height:1.4;color:#6f6889;text-align:center;margin:0}

/* ——— темы ——— */
.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  padding:16px 14px 30px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);color:var(--text);
  transition:transform .15s,border-color .2s,background .2s;
}
.theme::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0%,rgba(226,205,160,.14),transparent 70%);opacity:0;transition:opacity .25s}
.theme:active{transform:scale(.97)}
.theme.sel{border-color:var(--line-hi);background:var(--card-hi)}
.theme.sel::before{opacity:1}
.theme b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;margin:8px 0 3px}
.theme i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.35}
.theme em{font-style:normal;font-size:24px;display:block;text-shadow:0 2px 10px rgba(0,0,0,.5)}

/* ——— вопросы ——— */
.questions{display:grid;gap:8px;margin-bottom:14px}
.q{
  text-align:left;cursor:pointer;padding:14px 44px 14px 16px;position:relative;
  border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:14.5px;line-height:1.35;transition:border-color .2s,background .2s,transform .12s;
}
.q:active{transform:scale(.99)}
.q.sel{border-color:var(--line-hi);background:var(--card-hi)}
.q::after{
  content:"✓";display:grid;place-items:center;font-size:12px;font-weight:700;color:transparent;
  position:absolute;right:15px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:6px;
  border:1px solid var(--line-hi);transition:.2s;
}
.q.sel::after{background:var(--gold);border-color:var(--gold);color:#1a1430}
/* Лимит комплекса исчерпан — неотмеченные вопросы гаснут. */
.q.locked{opacity:.42}
.own:disabled{opacity:.42;cursor:not-allowed}

/* ——— счётчик выбранных вопросов ——— */
.tally{
  margin-top:14px;padding:12px 14px;border-radius:12px;text-align:center;font-size:13px;
  background:var(--card);border:1px dashed var(--line);color:var(--muted);
}
.tally.on{border-style:solid;border-color:var(--line-hi);color:var(--gold)}
.tally.full{border-style:solid;border-color:var(--gold-dim);background:rgba(226,205,160,.08);color:var(--gold)}
.tally.shake{animation:shake .35s}
.q.folded{display:none}
.more{
  width:100%;margin-bottom:10px;padding:12px;border-radius:14px;cursor:pointer;
  background:none;border:0;color:var(--gold-dim);font:14px var(--sans);
  border-bottom:1px solid var(--line);
}
.more:active{color:var(--gold)}
.own{width:100%;padding:14px;border-radius:14px;background:none;border:1px dashed var(--line-hi);color:var(--gold);font-size:14px;cursor:pointer;font-family:var(--sans)}
.own.sel{background:var(--card-hi);border-style:solid}
.ownbox{margin-top:10px}
textarea,input[type=text],input[type=date]{
  width:100%;padding:12px 14px;border-radius:13px;font:15px/1.4 var(--sans);
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;
}
textarea{resize:none}
textarea:focus,input:focus{border-color:var(--line-hi)}
input[type=date]{min-height:45px;color-scheme:dark}
.counter{font-size:11px;color:var(--muted)}
.ownfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.ownfoot button{
  padding:9px 16px;border-radius:20px;cursor:pointer;font:13px var(--sans);
  background:var(--gold);border:0;color:#1a1430;font-weight:600;
}
.ownfoot button:disabled{opacity:.35;cursor:not-allowed}
.ownlist{margin-top:14px;display:grid;gap:8px}
.note{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4;text-transform:none;letter-spacing:0}

/* ——— комплексы ——— */
.packs{display:grid;gap:10px}
.pack{
  position:relative;text-align:left;cursor:pointer;padding:16px 104px 14px 16px;
  border-radius:var(--r);background:var(--card);border:1px solid var(--line);color:var(--text);
  transition:border-color .2s,background .2s,transform .12s;
}
.pack:active{transform:scale(.99)}
.pack.sel{border-color:var(--line-hi);background:var(--card-hi)}
.pack b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:4px}
.pack i{display:block;font-style:normal;font-size:13px;color:var(--muted);line-height:1.4}
.pack u{
  display:inline-block;margin-top:10px;text-decoration:none;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-dim);border:1px solid var(--line);border-radius:20px;padding:4px 10px;
}
.pack .price{
  position:absolute;top:15px;right:14px;font-family:var(--serif);font-size:19px;
  color:var(--gold);white-space:nowrap;
}
.pack.sel::after,
.theme.sel::after{
  content:"✓";position:absolute;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:#1a1430;font-size:13px;font-weight:700;
}
.pack.sel::after{right:14px;bottom:14px}
.theme.sel::after{right:10px;top:10px}

/* VIP — единственный комплекс с консультацией, поэтому он выделен. */
.pack.vip{border-color:rgba(226,205,160,.3);background:linear-gradient(160deg,rgba(226,205,160,.07),var(--card) 60%)}
.pack.vip.sel{border-color:var(--gold-dim)}

/* ——— форма ——— */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:7px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{padding:9px 13px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:14px;cursor:pointer;transition:.2s}
.slot.sel{border-color:var(--line-hi);background:var(--card-hi);color:var(--gold)}

/* ——— подтверждение ——— */
.summary{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:4px 16px;margin-bottom:18px}
.row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14.5px}
.row:last-child{border:0}
.row dt{flex:none;width:104px;color:var(--muted);font-size:12.5px;margin:2px 0 0}
.row dd{margin:0;flex:1}
.qlist{margin:0;padding-left:18px;display:grid;gap:6px}
.qlist li{line-height:1.35}
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:13px;color:var(--muted);line-height:1.45}
.consent input{position:absolute;opacity:0;pointer-events:none}
.consent .box{flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--line-hi);margin-top:1px;display:grid;place-items:center;transition:.2s}
.consent .box::after{content:"✓";color:#1a1430;font-size:14px;font-weight:700;opacity:0;transform:scale(.5);transition:.18s}
.consent input:checked+.box{background:var(--gold);border-color:var(--gold)}
.consent input:checked+.box::after{opacity:1;transform:none}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.consent.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ——— готово ——— */
.done{text-align:center;padding-top:36px}
.sealwrap{display:grid;place-items:center;margin-bottom:18px}
.seal{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--gold);
  border:1px solid var(--line-hi);background:radial-gradient(circle,rgba(226,205,160,.16),transparent 70%);
  animation:pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.ghost{
  margin-top:22px;padding:15px 26px;border-radius:14px;cursor:pointer;
  background:none;border:1px solid var(--line-hi);color:var(--gold);font-size:15px;font-family:var(--sans);
}
.ghost:active{background:var(--card-hi)}

/* ——— шторка политики ——— */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(6,4,14,.82);display:grid;align-items:end}
.sheet-inner{background:var(--bg-2);border-top:1px solid var(--line-hi);border-radius:22px 22px 0 0;padding:26px var(--pad) calc(30px + env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.2,.8,.3,1)}
.sheet h3{margin:0 0 12px;font-size:21px}
.sheet p{color:var(--muted);font-size:14px;margin:0}
.sheet .ghost{width:100%}
@keyframes up{from{transform:translateY(100%)}}


/* ——— черновик прошлой заявки ——— */
.resumed{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:13px;
  background:rgba(226,205,160,.08);border:1px solid var(--line-hi);color:var(--gold);
}
.resumed button{
  margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);font:13px var(--sans);text-decoration:underline;text-underline-offset:2px;
}

/* Открыли ссылкой вместо мини-аппа — подписи нет, заявка не уйдёт. */
.warn{
  margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.5;
  background:rgba(224,122,122,.10);border:1px solid rgba(224,122,122,.35);color:#f0c9c9;
}
.warn b{color:#fff}

/* ——— поиск по вопросам ——— */
.search{position:relative;margin-bottom:12px}
.search input{
  width:100%;padding:13px 40px 13px 14px;border-radius:14px;font:15px var(--sans);
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;
}
.search input:focus{border-color:var(--line-hi)}
.search input::-webkit-search-cancel-button{display:none}
.search button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:15px;
}

/* ——— переключатель тем на экране вопросов ——— */
.chips{
  display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  font:13px var(--sans);cursor:pointer;white-space:nowrap;transition:.2s;
}
.chip.sel{border-color:var(--line-hi);background:var(--card-hi);color:var(--gold)}
.chip .dot{
  display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--gold);color:#1a1430;font-size:11px;font-weight:700;
}

/* Тема с выбранными вопросами помечается счётчиком. */
.theme{position:relative}
.theme .badge{
  position:absolute;bottom:10px;right:10px;display:grid;place-items:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--gold);color:#1a1430;font-size:11px;font-weight:700;
}

/* Вопрос из другой темы в результатах поиска подписан. */
.q small,.picked-item small,.qlist small{
  display:block;font-size:11px;letter-spacing:.04em;color:var(--gold-dim);margin-bottom:4px;
}
.empty{
  padding:18px 16px;border-radius:14px;text-align:center;font-size:13.5px;line-height:1.45;
  background:var(--card);border:1px dashed var(--line);color:var(--muted);margin-bottom:12px;
}

/* ——— выбранное в других темах ——— */
.picked{margin-top:16px;display:grid;gap:8px}
.picked-head{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:2px;
}
.picked-item{
  position:relative;text-align:left;padding:12px 40px 12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(226,205,160,.06);border:1px solid var(--line);color:var(--text);
  font:13.5px/1.35 var(--sans);
}
.picked-item i{
  position:absolute;right:14px;top:50%;margin-top:-9px;font-style:normal;color:var(--muted);font-size:14px;
}

/* ——— день записи ——— */
.days{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.days::-webkit-scrollbar{display:none}
.day{
  flex:none;min-width:66px;padding:9px 11px;border-radius:13px;cursor:pointer;text-align:center;
  background:var(--card);border:1px solid var(--line);color:var(--text);transition:.2s;
}
.day.sel{border-color:var(--line-hi);background:var(--card-hi)}
.day b{display:block;font-size:13px;font-weight:600;white-space:nowrap}
.day i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.day.sel i{color:var(--gold)}


/* ——— кнопка «скрыть клавиатуру» ——— */
.kbhide{
  position:fixed;right:14px;bottom:16px;z-index:30;
  display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:22px;cursor:pointer;
  background:rgba(20,16,41,.94);border:1px solid var(--line-hi);color:var(--gold);
  font:13px var(--sans);box-shadow:0 6px 20px rgba(0,0,0,.45);
  animation:kbin .18s ease-out;
}
.kbhide:active{background:var(--card-hi)}
body:has(#fallbackBar:not([hidden])) .kbhide{bottom:88px}
@keyframes kbin{from{opacity:0;transform:translateY(6px)}}

/* ——— короткий экран: внутри Telegram по вертикали места меньше ——— */
@media (max-height:700px){
  .hero{padding:8px 0 2px}
  .moon{font-size:30px}
  h1{font-size:27px;margin:6px 0 7px}
  .lead{font-size:13.5px}
  .steps{margin:12px 0 10px}
  .steps li{padding:6px 0}
  .steps li:not(:last-child)::before{top:29px}
  .steps b{font-size:13.5px}
  .steps i{font-size:11.5px}
  .title{font-size:21px}
  .sub{margin-bottom:13px}
  .pack{padding:13px 100px 26px 14px}
  .pack b{font-size:18px}
  .pack u{margin-top:8px}
  .theme{padding:13px 12px 27px}
  .theme b{font-size:17px;margin:6px 0 2px}
  .field{margin-bottom:12px}
  .done{padding-top:20px}
  .seal{width:68px;height:68px;font-size:26px}
}

/* ——— нижняя панель для превью вне Telegram ——— */
#fallbackBar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:10px;
  padding:12px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(13,11,26,0),var(--bg) 40%);
}
#fallbackBar button{
  flex:1;padding:15px;border-radius:14px;border:1px solid var(--line-hi);cursor:pointer;
  background:var(--gold);color:#1a1430;font:600 15px var(--sans);
}
#fallbackBack{flex:0 0 34%!important;background:none!important;color:var(--gold)!important}
#fallbackBar button:disabled{opacity:.4;cursor:not-allowed}
body:has(#fallbackBar:not([hidden])){padding-bottom:96px}

@media (min-width:520px){ .themes{grid-template-columns:repeat(3,1fr)} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }