/* ═══════════════════════════════════════════════════════════════
   Оракулум · Небесный атлас
   Курс: редакторская сдержанность (Co-Star), НЕ эзо-китч.
   Почти-чёрный индиго + ОДИН акцент (золото). Сериф высокого контраста
   (Cormorant — ренессансная антиква, не дидон) только в заголовках, гротеск
   (Golos Text) в интерфейсе. Никаких фиолетовых градиентов, блёсток и неон-glow.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #07080f;   /* ночь */
  --ink-2:      #0c0e1a;
  --ink-3:      #12162a;
  --indigo:     #1b2145;
  --gold:       #d9b26a;   /* единственный акцент */
  --gold-soft:  #e8cf9a;
  --text:       #e9e7e2;
  --text-dim:   #9a9aa6;
  --text-mute:  #8b8b98;   /* было #63636f — контраст 3.37 не проходил AA (норма 4.5); теперь ~5.9 */
  --line:       rgba(217,178,106,.16);
  --line-soft:  rgba(233,231,226,.08);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* Inter/Roboto читаются как «дефолт», а не премиум. Space Grotesk/Instrument Sans,
     которые советует планка, БЕЗ кириллицы — нам не подходят. Golos Text (Paratype):
     родная кириллица + характер, хорошая пара к серифу заголовков. */
  --sans:  'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r:   14px;
  --r-s: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* safe-area: чёлка iPhone + системные панели Telegram */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --tg-top: 0px;    /* contentSafeAreaInset от Telegram, ставится из JS */
  --tg-bot: 0px;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ background:var(--ink); }

body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;                 /* приложение, а не страница */
  overscroll-behavior:none;
}

/* ── звёздное небо ── */
#sky{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(27,33,69,.55) 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 100%, rgba(7,8,15,.9) 0%, transparent 70%);
}

/* ═══════════ экраны ═══════════ */
.screen{ display:none; position:relative; z-index:2; }
.screen.is-active{ display:flex; }

/* ────────────────────────────────────────────────
   ПОРТАЛ — ровно один экран, БЕЗ скролла (правило Олега)
   ──────────────────────────────────────────────── */
.screen--portal{
  flex-direction:column;
  height:100vh; height:100svh;
  padding:calc(var(--sat) + var(--tg-top)) 20px calc(var(--sab) + var(--tg-bot));
  overflow:hidden;
}

.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:56px;
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand__mark{ color:var(--gold); font-size:15px; line-height:1; }
.brand__name{
  font-family:var(--serif); font-size:19px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.topbar__right{ display:flex; align-items:center; gap:8px; }
.lang, .icon-btn{
  background:transparent; border:1px solid var(--line);
  color:var(--text-dim); border-radius:999px;
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.1em;
  padding:11px 14px; cursor:pointer; transition:.25s var(--ease);
}
.icon-btn{ padding:11px; display:grid; place-items:center; }
.lang, .icon-btn{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
@media (hover:hover){
  .lang:hover, .icon-btn:hover{ color:var(--gold); border-color:var(--gold); }
}

.portal{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px, 2.2vh, 26px);
  min-height:0;                    /* критично: даёт flex сжиматься, а не рвать экран */
  text-align:center;
}

/* портрет Селесты в кольцах */
.portal__ring{
  position:relative;
  width:clamp(96px, 15vh, 150px); height:clamp(96px, 15vh, 150px);
  flex:0 0 auto;
  display:grid; place-items:center;
}
.ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--line);
}
.ring--1{ animation:spin 46s linear infinite; border-style:dashed; }
.ring--2{ inset:9px; border-color:rgba(233,231,226,.07); animation:spin 62s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.portal__face{
  position:absolute; inset:16px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, var(--indigo), var(--ink-2));
  border:1px solid var(--line);
}
.portal__face img{ width:100%; height:100%; object-fit:cover; display:block; }

.portal__title{
  font-family:var(--serif); font-weight:400;
  /* дидон должен работать как архитектура, а не как подпись: контраст масштаба к body */
  font-size:clamp(30px, 7.4vh, 76px);
  line-height:1.08; letter-spacing:-.025em;
  margin:0; color:var(--text);
  display:flex; flex-direction:column; gap:2px;
  min-height:2.2em;                /* CLS=0: место под заголовок зарезервировано */
}
.line{ display:block; }
.line--dim{ color:var(--gold-soft); font-style:italic; }

/* ── хореография входа: элементы поднимаются по очереди, а не вываливаются разом ── */
.portal__ring, .portal__title .line, .portal__sub, .ask, .portal__quick{
  opacity:0; transform:translateY(14px);
  animation:rise .8s var(--ease) forwards;
}
.portal__ring{ animation-delay:.05s; }
.portal__title .line:nth-child(1){ animation-delay:.20s; }
.portal__title .line:nth-child(2){ animation-delay:.34s; }
.portal__sub{ animation-delay:.50s; }
.ask{ animation-delay:.62s; }
.portal__quick{ animation-delay:.76s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .portal__ring, .portal__title .line, .portal__sub, .ask, .portal__quick{
    opacity:1; transform:none; animation:none;
  }
}

.portal__sub{
  margin:0; color:var(--text-dim);
  font-size:clamp(12px, 1.6vh, 14px);
  letter-spacing:.04em; font-weight:300;
}

/* поле вопроса */
.ask{
  width:100%; max-width:520px;
  display:flex; align-items:center; gap:8px;
  background:rgba(12,14,26,.72);
  border:1px solid var(--line);
  border-radius:999px; padding:5px 5px 5px 20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .3s var(--ease);
}
.ask:focus-within{ border-color:var(--gold); }
.ask__input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:0;
  color:var(--text); font-family:var(--sans);
  font-size:15px; font-weight:300; padding:12px 0;
}
.ask__input::placeholder{ color:var(--text-mute); }
.ask__go{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;   /* норма касания 44×44 */
  border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--gold); color:var(--ink);
  transition:.25s var(--ease);
}
@media (hover:hover){ .ask__go:hover{ background:var(--gold-soft); transform:scale(1.05); } }

.portal__quick{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.chip{
  background:rgba(18,22,42,.6); border:1px solid var(--line-soft);
  color:var(--text-dim); border-radius:999px;
  padding:12px 15px; font-size:12.5px; font-weight:400;   /* 44px по высоте: главный путь к ценности с мобилы */
  cursor:pointer; transition:.25s var(--ease);
  font-family:var(--sans); white-space:nowrap;
}
.chip{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.chip__ico{ margin-right:5px; opacity:.85; }
@media (hover:hover){
  .chip:hover{ color:var(--text); border-color:var(--gold); background:rgba(27,33,69,.7); }
}

.portal__foot{
  flex:0 0 auto; text-align:center; padding:10px 0 4px;
  font-size:10.5px; color:var(--text-mute); letter-spacing:.06em;
}

/* ────────────────────────────────────────────────
   ПРИЛОЖЕНИЕ / РАБОЧИЙ СТОЛ
   ──────────────────────────────────────────────── */
.screen--app{
  height:100vh; height:100svh;
  padding-top:calc(var(--sat) + var(--tg-top));
  padding-bottom:calc(var(--sab) + var(--tg-bot));
}

.sidebar{
  flex:0 0 250px;
  display:flex; flex-direction:column;
  border-right:1px solid var(--line-soft);
  padding:20px 14px;
  background:rgba(7,8,15,.6);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.sidebar__brand{
  display:flex; align-items:center; gap:9px;
  padding:4px 10px 22px;
}
.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav__item{
  display:flex; align-items:center; gap:11px;
  background:transparent; border:0; cursor:pointer;
  color:var(--text-dim); font-family:var(--sans);
  font-size:13.5px; font-weight:400; text-align:left;
  padding:11px 12px; border-radius:var(--r-s);
  transition:.2s var(--ease); position:relative;
}
.nav__ico{ width:18px; text-align:center; opacity:.7; font-size:13px; }
@media (hover:hover){ .nav__item:hover{ background:rgba(27,33,69,.5); color:var(--text); } }
.nav__item.is-active{ background:rgba(27,33,69,.75); color:var(--text); }
.nav__item.is-active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:16px; background:var(--gold); border-radius:2px;
}
.streak{
  margin-left:auto; font-style:normal; font-size:10.5px;
  color:var(--gold); background:rgba(217,178,106,.12);
  border-radius:999px; padding:2px 7px;
}
.sidebar__foot{ border-top:1px solid var(--line-soft); padding-top:12px; }
.freebar{ font-size:11px; color:var(--text-mute); padding:6px 12px; line-height:1.5; }

.stage{
  flex:1; min-width:0; position:relative;
  display:flex; flex-direction:column;
}
.view{ display:none; flex-direction:column; flex:1; min-height:0; }
.view.is-active{ display:flex; animation:rise .35s var(--ease); }   /* виды перетекают, а не рубятся */

/* Пустой вид дышит по центру, но заполненный НИКОГДА не режется.
   🔴 Грабля: обычный `justify-content:center` на скроллящемся контейнере делает
   верхнее переполнение НЕДОСТИЖИМЫМ — контент уезжает выше края, а scrollTop уже 0
   (проверено: заголовок «Натальная карта» разрезало пополам на 1366×768).
   `safe center` центрирует, пока влезает, и переключается на flex-start, когда нет. */
@media (min-width:861px){
  .view:not([data-view="talk"]){ justify-content:safe center; }
}

/* виды-практики скроллятся внутри себя, страница — никогда */
.view:not([data-view="talk"]){
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:30px clamp(18px, 4vw, 44px) 40px;
  gap:16px;
}
/* колонка чтения: без предела текст растекается на весь монитор и читать больно */
/* колонка чтения центрируется, иначе справа висит мёртвая треть экрана */
.view:not([data-view="talk"]) > *{ max-width:760px; width:100%; margin-inline:auto; }
/* ...но кнопка — акцент, а не полоса: width:100% перебивал align-self и растягивал
   золотой CTA на все 760px, размазывая единственный акцент бренда.
   margin-inline:0 — чтобы кнопка стояла под заголовком по одной оси, а не уплывала в центр. */
.view:not([data-view="talk"]) > .btn{ width:auto; margin-inline:0; }
/* карта живёт в той же 760-колонке, что и заголовок, и прижата к её левому краю —
   иначе она либо уплывала в центр (margin-inline:auto от `.view > *`),
   либо улетала к краю экрана мимо колонки */
.daycard-wrap{ display:flex; }
.view__head{ margin-bottom:4px; }
.view__head h2{
  font-family:var(--serif); font-weight:400;
  /* портал обещает 99px — внутри приложения драма не должна схлопываться в 34px */
  font-size:clamp(26px, 4.6vw, 52px); margin:0 0 5px;
  letter-spacing:-.02em; line-height:1.05;
}
.muted{ color:var(--text-dim); font-size:13px; font-weight:300; margin:0; line-height:1.6; }

/* ── диалог ── */
.thread{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:26px clamp(18px, 4vw, 44px);
  display:flex; flex-direction:column; gap:18px;
  scroll-behavior:smooth;
}
/* диалог живёт у поля ввода, как в любом мессенджере: пустой экран не зияет
   сверху, а разговор растёт снизу вверх. safe: длинная переписка не режется сверху. */
.thread{ justify-content:safe flex-end; }
.msg{ max-width:min(680px, 100%); }
.msg--me{ align-self:flex-end; }
.msg--me .msg__body{
  background:rgba(27,33,69,.8); border:1px solid var(--line-soft);
  border-radius:var(--r) var(--r) 4px var(--r);
  padding:11px 15px; font-size:14px; font-weight:300;
}
.msg--her .msg__body{
  font-family:var(--serif); font-size:clamp(15.5px, 1.9vw, 18px);
  line-height:1.72; font-weight:400; color:var(--text);
  white-space:pre-wrap;
}
.msg__who{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:7px; font-weight:500;
}
.msg--her .msg__body::after{        /* курсор, пока Селеста пишет */
  content:''; display:inline-block; width:2px; height:1em;
  background:var(--gold); margin-left:3px; vertical-align:-2px;
  animation:blink 1s steps(2) infinite;
}
.msg--her.is-done .msg__body::after{ display:none; }
@keyframes blink{ 50%{ opacity:0; } }

.composer{
  flex:0 0 auto; margin:0 clamp(18px, 4vw, 44px) 20px;
  display:flex; align-items:center; gap:8px;
  background:rgba(12,14,26,.8); border:1px solid var(--line);
  border-radius:999px; padding:5px 5px 5px 20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .3s var(--ease);
}
.composer:focus-within{ border-color:var(--gold); }
.composer__input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:var(--text); font-family:var(--sans); font-size:14.5px;
  font-weight:300; padding:12px 0;
}
.composer__input::placeholder{ color:var(--text-mute); }
.composer__go{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0;   /* норма касания */
  cursor:pointer; display:grid; place-items:center;
  background:var(--gold); color:var(--ink); transition:.25s var(--ease);
}
@media (hover:hover){ .composer__go:hover{ background:var(--gold-soft); } }

/* ── кнопки/поля ── */
.btn{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  border-radius:999px; padding:13px 26px; cursor:pointer;
  border:1px solid transparent; transition:.25s var(--ease);
  align-self:flex-start; letter-spacing:.02em;
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--text-dim); }
.btn:disabled{ opacity:.45; cursor:default; }
@media (hover:hover){
  .btn--gold:not(:disabled):hover{ background:var(--gold-soft); }
  .btn--ghost:not(:disabled):hover{ color:var(--gold); border-color:var(--gold); }
}
.field{
  width:100%; max-width:440px;
  background:rgba(12,14,26,.7); border:1px solid var(--line-soft);
  border-radius:var(--r-s); color:var(--text);
  font-family:var(--sans); font-size:14px; font-weight:300;
  padding:13px 16px; outline:0; transition:border-color .25s var(--ease);
}
.field::placeholder{ color:var(--text-mute); }
.field:focus{ border-color:var(--gold); }

/* ── карточки/разборы ── */
.card{
  background:rgba(12,14,26,.62); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:20px 22px;
}
.card__t{
  font-family:var(--serif); font-weight:500; font-size:18px;
  margin:0 0 8px; letter-spacing:.01em;
}
.reading{
  font-family:var(--serif); font-size:clamp(15.5px, 1.8vw, 17.5px);
  line-height:1.75; color:var(--text); white-space:pre-wrap;
  max-width:70ch;
}
.reading:empty{ display:none; }

.need{
  background:rgba(217,178,106,.07); border:1px solid var(--line);
  border-radius:var(--r-s); padding:13px 16px;
  font-size:13px; color:var(--gold-soft); font-weight:300;
}
.need[hidden]{ display:none !important; }   /* hidden не работает при display:flex */

/* карта дня — единственный signature-момент продукта: карта реально переворачивается */
.daycard{
  perspective:1200px; align-self:flex-start; background:transparent; border:0; padding:0;
  /* 🔴 width обязателен явно: .view > *{width:100%} растягивал карту в плиту 760×300 —
     таро читается только в портретной пропорции ~1:1.7 */
  width:300px; max-width:min(300px, 70vw);
  height:520px; cursor:pointer; flex:0 0 auto;
}
@media (max-width:860px){ .daycard{ height:min(460px, 58vh); } }
.daycard__inner{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .85s var(--ease);
}
.daycard.is-flipped .daycard__inner{ transform:rotateY(180deg); }
.daycard__face{
  position:absolute; inset:0; border-radius:var(--r);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:18px; text-align:center;
  color:var(--gold); font-family:var(--serif); letter-spacing:.06em;
}
/* рубашка: золотая рамка-линейка + звёздный паттерн + монограмма — карта, а не плита */
.daycard__face--back{
  background:
    radial-gradient(circle at 50% 38%, rgba(217,178,106,.12), transparent 62%),
    repeating-linear-gradient(45deg, rgba(217,178,106,.05) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(217,178,106,.05) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, var(--ink-3), var(--indigo));
  font-size:14px;
  box-shadow:inset 0 0 0 1px rgba(217,178,106,.10), inset 0 0 0 9px rgba(7,8,15,.55),
             inset 0 0 0 10px rgba(217,178,106,.22);
}
.daycard__face--front{
  box-shadow:inset 0 0 0 1px rgba(217,178,106,.10), inset 0 0 0 9px rgba(7,8,15,.5),
             inset 0 0 0 10px rgba(217,178,106,.18);
}
.daycard__face--front{
  transform:rotateY(180deg);
  background:linear-gradient(160deg, var(--indigo), var(--ink-2));
}
.daycard__ornament{ font-size:30px; opacity:.85; }
.daycard__name{
  font-size:19px; color:var(--text); font-weight:500; line-height:1.25;
  letter-spacing:.01em;
}
.daycard__pos{
  font-family:var(--sans); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute);
}
@media (hover:hover){
  .daycard:not(:disabled):hover .daycard__inner{ transform:translateY(-6px); }
  .daycard.is-flipped:not(:disabled):hover .daycard__inner{ transform:rotateY(180deg) translateY(6px); }
}
.daycard:disabled{ cursor:default; }
@media (prefers-reduced-motion: reduce){
  .daycard__inner{ transition:none; }
}

/* расклады */
.spreads{ display:flex; gap:9px; flex-wrap:wrap; }
.spread{
  background:rgba(12,14,26,.7); border:1px solid var(--line-soft);
  border-radius:var(--r-s); padding:13px 16px; cursor:pointer;
  color:var(--text-dim); text-align:left; font-family:var(--sans);
  transition:.25s var(--ease); min-width:150px;
}
.spread b{ display:block; color:var(--text); font-size:13.5px; font-weight:500; margin-bottom:3px; }
.spread span{ font-size:11px; color:var(--text-mute); font-weight:300; }
.spread.is-active{ border-color:var(--gold); background:rgba(27,33,69,.7); }
@media (hover:hover){ .spread:hover{ border-color:var(--gold); } }

/* затравки в диалоге: человеку не надо выдумывать первый вопрос */
.seeds{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:2px; max-width:min(680px, 100%);
  animation:rise .7s var(--ease) .25s both;
}

/* пара */
.pair{ display:flex; align-items:stretch; gap:18px; flex-wrap:wrap; }
.pair__col{ display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
/* подписи колонок: без них непонятно, чьи это поля */
.pair__lbl{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.pair__you{ align-self:flex-start; }
.pair__vs{ align-self:center; }
.pair__you{
  font-family:var(--serif); font-size:15px; color:var(--text-dim);
  border:1px solid var(--line-soft); border-radius:var(--r-s);
  padding:13px 18px;
  flex:0 0 auto; min-width:200px; min-height:50px;
  display:flex; align-items:center;
}
/* когда профиль не заполнен — это действие, а не текст ошибки в рамке */
.pair__you.is-empty{
  color:var(--gold); cursor:pointer; border-color:var(--line);
  border-style:dashed; font-family:var(--sans); font-size:13px;
}
@media (hover:hover){ .pair__you.is-empty:hover{ border-color:var(--gold); } }
.pair__vs{ color:var(--gold); font-size:19px; flex:0 0 auto; }
/* поля партнёра обязаны вмещать плейсхолдер целиком («Дата рождения · 22.11.1983») */
.pair__them{
  display:flex; flex-direction:column; gap:8px;
  flex:1 1 300px; min-width:280px; max-width:380px;
}
.pair__them .field{ max-width:none; width:100%; }

/* история */
.hist{ display:flex; flex-direction:column; gap:9px; }
.hist__item{
  background:rgba(12,14,26,.62); border:1px solid var(--line-soft);
  border-radius:var(--r-s); padding:14px 16px; cursor:pointer;
  transition:.2s var(--ease); text-align:left; font-family:var(--sans);
  color:var(--text-dim);
}
@media (hover:hover){ .hist__item:hover{ border-color:var(--gold); } }
.hist__top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; }
.hist__p{ color:var(--gold); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.hist__d{ color:var(--text-mute); font-size:11px; }
.hist__q{ color:var(--text); font-size:13.5px; font-weight:300; }

/* пустое состояние — спроектированный момент, а не «тут пусто» */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; padding:40px 20px;
}
.empty__glyph{ font-size:34px; color:var(--gold); opacity:.65; }
.empty__t{
  font-family:var(--serif); font-size:22px; color:var(--text);
  margin:0; font-weight:400;
}
.empty__p{ margin:0 0 6px; color:var(--text-dim); font-size:13px; font-weight:300; max-width:38ch; line-height:1.6; }
.empty .btn{ align-self:center; }

/* тарифы */
.tiers{ display:flex; flex-direction:column; gap:9px; }
.tier{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:rgba(18,22,42,.55); border:1px solid var(--line-soft);
  border-radius:var(--r-s); padding:15px 17px; cursor:pointer;
  transition:.25s var(--ease); text-align:left; font-family:var(--sans);
  width:100%;
}
@media (hover:hover){ .tier:hover{ border-color:var(--gold); } }
.tier__l b{ display:block; font-family:var(--serif); font-size:16.5px; color:var(--text); font-weight:500; }
.tier__l span{ font-size:11.5px; color:var(--text-mute); font-weight:300; line-height:1.5; display:block; margin-top:3px; }
.tier__r{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; }
.tier__p{ font-family:var(--serif); font-size:19px; color:var(--gold); white-space:nowrap; }
.tier__y{ font-style:normal; font-size:10.5px; color:var(--text-mute); white-space:nowrap; }

/* профиль: строки «поле — значение» */
.prow{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.prow:last-child{ border-bottom:0; }
.prow b{ font-family:var(--serif); font-size:16px; font-weight:500; color:var(--text); }
.prow .muted{ font-size:12px; }

.legal{ margin-top:6px; }
.legal summary{
  cursor:pointer; color:var(--text-mute); font-size:12px;
  padding:8px 0; letter-spacing:.03em;
}
.legal[open] summary{ color:var(--gold); }
.signature{
  text-align:center; font-size:11px; color:var(--text-mute);
  margin:20px 0 0; letter-spacing:.04em;
}
.signature a{ color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--line); }

/* ── модалки ── */
.modal{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center; padding:20px;
  background:rgba(4,5,10,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:fade .25s var(--ease);
}
.modal[hidden]{ display:none !important; }
@keyframes fade{ from{ opacity:0; } }
.modal__box{
  position:relative; width:100%; max-width:420px;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); padding:32px 28px 28px;
  display:flex; flex-direction:column; gap:14px;
  max-height:86vh; overflow-y:auto;
}
.modal__box--wide{ max-width:520px; }
.modal__x{
  position:absolute; top:6px; right:6px;
  background:transparent; border:0; color:var(--text-mute);
  font-size:16px; cursor:pointer; line-height:1;
  width:44px; height:44px; padding:0; display:grid; place-items:center;   /* норма касания */
}
@media (hover:hover){ .modal__x:hover{ color:var(--gold); } }
.modal__t{
  font-family:var(--serif); font-weight:400; font-size:24px;
  margin:0; letter-spacing:-.01em;
}
.modal__p{ margin:0; color:var(--text-dim); font-size:13px; font-weight:300; line-height:1.6; }
.modal__body{ display:flex; flex-direction:column; gap:9px; }

/* ── тост ── */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(28px + var(--sab)); z-index:60;
  background:var(--ink-3); border:1px solid var(--line);
  color:var(--text); border-radius:999px;
  padding:11px 20px; font-size:12.5px; font-weight:300;
  animation:up .3s var(--ease); max-width:90vw; text-align:center;
}
.toast[hidden]{ display:none !important; }
@keyframes up{ from{ opacity:0; transform:translate(-50%, 10px); } }

/* ── таббар (мобилка) ── */
.tabbar{ display:none; }

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width: 860px){
  .sidebar{ display:none; }
  .screen--app{ flex-direction:column; }
  .stage{ padding-bottom:0; }
  .view:not([data-view="talk"]){ padding:22px 18px 26px; }
  .thread{ padding:20px 18px; }
  .composer{ margin:0 14px 10px; }

  .tabbar{
    display:flex; flex:0 0 auto;
    border-top:1px solid var(--line-soft);
    background:rgba(7,8,15,.92);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding-bottom:var(--sab);
  }
  .tab{
    flex:1; background:transparent; border:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 2px 7px; color:var(--text-mute);
    font-family:var(--sans); transition:.2s var(--ease);
  }
  .tab span{ font-size:15px; line-height:1; }
  .tab em{ font-style:normal; font-size:9.5px; letter-spacing:.03em; }
  .tab.is-active{ color:var(--gold); }
  .reading, .msg--her .msg__body{ font-size:16px; }
}

@media (max-width: 400px){
  .portal__quick{ gap:6px; }
  .chip{ padding:11px 12px; font-size:11.5px; }
  .modal__box{ padding:26px 20px 22px; }
  .pair{ gap:12px; }
  .pair__vs{ display:none; }
  .daycard__back{ width:150px; height:240px; }
}

/* Десктоп: отдаём бюджет высоты типографике. Портрет в кольцах остаётся на мобиле
   и в пустом диалоге — на большом экране он конкурировал с заголовком за внимание. */
@media (min-width:861px) and (min-height:701px){
  .portal__ring{ display:none; }
  .portal__title{ font-size:clamp(44px, 11vh, 104px); }
}

/* короткие экраны (ноутбуки 1366×768 и ландшафт телефона) — портал обязан влезать */
@media (max-height: 700px){
  .portal{ gap:12px; }
  .portal__ring{ width:84px; height:84px; }
  .portal__title{ font-size:clamp(22px, 4.6vh, 34px); }
  .portal__quick .chip{ padding:7px 12px; }
}
@media (max-height: 560px){
  .portal__ring{ display:none; }
  .portal__sub{ display:none; }
}

/* ── доступность ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .ring{ animation:none !important; }
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
::selection{ background:rgba(217,178,106,.3); color:#fff; }

/* скроллбары — тонкие, в тон */
*::-webkit-scrollbar{ width:7px; height:7px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(233,231,226,.1); border-radius:99px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(217,178,106,.35); }