/* Firasa — анализ эмоций и микровыражений
   Dark theme, accent #38bdf8 */

:root{
  --bg:#0f172a;
  --bg-2:#131f38;
  --card:#18233d;
  --card-2:#1e2b48;
  --line:#2a3a5c;
  --txt:#e6edf7;
  --txt-dim:#93a4c0;
  --accent:#38bdf8;
  --accent-dk:#0284c7;
  --danger:#ef4444;
  --ok:#22c55e;

  --joy:#fbbf24;
  --sadness:#3b82f6;
  --anger:#ef4444;
  --fear:#a78bfa;
  --surprise:#ec4899;
  --disgust:#10b981;
  --contempt:#f59e0b;
  --neutral:#64748b;

  --r:14px;
  --pad:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{margin:0 0 .5em;line-height:1.25}
h2{font-size:1.25rem}
h3{font-size:1rem;letter-spacing:.01em}
p{margin:0 0 .7em}
.muted{color:var(--txt-dim);font-size:.88rem}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:rgba(15,23,42,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{display:flex;align-items:center;gap:8px}
.topbar__mask{display:inline-flex}
.topbar__title{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.95rem}
.topbar__spacer{flex:1}

.topbar__back{
  background:none;border:0;color:var(--accent);
  font-size:1.9rem;line-height:1;cursor:pointer;padding:0 4px;
}
.lang{
  background:var(--card);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:5px 10px;font-size:.78rem;font-weight:700;cursor:pointer;
}
.lang:hover{border-color:var(--accent)}

/* ---------- таджикский язык ---------- */

.langflag{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:2px 0 2px 6px;cursor:pointer;
  color:var(--txt);
}
.langflag__wave{
  display:inline-flex;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
  transform-origin:left center;
  animation:flagFlutter 4.5s ease-in-out infinite;
}
.langflag__name{font-size:.78rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.langflag:hover .langflag__name{color:var(--accent)}
.langflag[aria-current="true"] .langflag__name{color:var(--accent)}

/* Ветер: полотнище чуть кренится и подаётся вперёд. Рябь по ткани делает
   фильтр в самой картинке — вместе получается живое движение, а не качели. */
@keyframes flagFlutter{
  0%,100%{transform:rotate(-1.2deg) skewY(1deg) scaleY(1)}
  35%    {transform:rotate(1deg)   skewY(-1.4deg) scaleY(.98)}
  65%    {transform:rotate(-.4deg) skewY(.8deg)  scaleY(1.02)}
}

@media (prefers-reduced-motion:reduce){
  .langflag__wave{animation:none}
}

/* На совсем узких экранах подпись убираем: там она налезает на кнопку языка.
   На обычном телефоне (от 360 точек) места хватает, и «Тоҷикӣ» остаётся. */
@media (max-width:359px){
  .langflag__name{display:none}
}

/* ---------- screens ---------- */
main{max-width:920px;margin:0 auto;padding:16px 14px 48px}
.screen{display:none;animation:fade .22s ease}
.screen.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen__title{font-size:1.35rem;margin-bottom:14px}

/* ---------- hero ---------- */
#screen-home{position:relative;isolation:isolate}
#screen-home > :not(.face-field){position:relative;z-index:1}
.face-field{
  position:fixed;z-index:0;inset:64px 0 0;overflow:hidden;
  pointer-events:none;
  background:#061310;
}
.face-field::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,12,15,.92) 0%,rgba(4,12,15,.7) 30%,rgba(4,12,15,.2) 74%,rgba(4,12,15,.86) 100%),
    linear-gradient(180deg,rgba(4,12,15,.76) 0%,rgba(4,12,15,.2) 26%,rgba(4,12,15,.72) 100%);
  z-index:1;
}
.face-field__video{position:absolute;z-index:0;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:center;opacity:0;filter:saturate(.72) contrast(1.08) brightness(.7);transform:scale(1.03);animation:ambientSceneCycle 30s ease-in-out infinite}
.face-field__video--two{animation-delay:-10s}.face-field__video--three{animation-delay:-20s}
@keyframes ambientSceneCycle{0%,27%{opacity:.7;transform:scale(1.03)}33%,94%{opacity:0;transform:scale(1.075)}100%{opacity:.7;transform:scale(1.03)}}
@media (max-width:640px){
  .face-field{inset:58px 0 0}
  .face-field__video{inset:-3%;width:106%;height:106%;object-position:58% center;filter:saturate(.68) contrast(1.08) brightness(.6)}
}
@media (prefers-reduced-motion:reduce){.face-field__video{display:none}}
.hero{text-align:center;padding:18px 6px 22px}
.hero__mask{display:flex;justify-content:center}
.hero__title{font-size:1.5rem;margin-top:10px}
.hero__sub{color:var(--txt-dim);max-width:46ch;margin:0 auto}

/* The cinematic scenes remain behind the controls, never as page content. */
#screen-home .tile,#screen-home .card{background:rgba(8,22,26,.76);backdrop-filter:blur(12px)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
.tile{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  background:linear-gradient(160deg,var(--card-2),var(--card));
  border:1px solid var(--line);border-radius:var(--r);
  padding:18px;color:var(--txt);cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 8px 26px rgba(56,189,248,.14);outline:none;
}
.tile__ico{font-size:1.7rem}
.tile__name{font-weight:700;font-size:1.02rem}
.tile__desc{color:var(--txt-dim);font-size:.84rem}

/* ---------- card ---------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--pad);margin-bottom:14px;
}
.info .bullets{margin:.4em 0 0;padding-left:1.1em;color:var(--txt-dim);font-size:.9rem}
.bullets li{margin-bottom:.3em}
.disclaimer{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.35)}
.disclaimer strong{display:block;margin-bottom:6px;color:#fca5a5}
.disclaimer p{margin:0;font-size:.86rem;color:#e8c9c9}
.foot{text-align:center;color:var(--txt-dim);font-size:.82rem;padding:8px 0 4px}

/* ---------- buttons ---------- */
.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.btn{
  background:var(--card-2);color:var(--txt);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 15px;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,opacity .15s;
}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#04212f}
.btn--primary:hover:not(:disabled){background:#7dd3fc}
.btn--ghost{background:transparent;border-color:transparent;color:var(--accent);padding:6px 8px}
.btn--rec{color:#fca5a5}
.btn--rec.is-on{background:var(--danger);border-color:var(--danger);color:#fff}
.btn--sm{padding:6px 10px;font-size:.8rem}

/* ---------- live stage ---------- */
.stage{
  position:relative;background:#000;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;margin-bottom:12px;
}
.stage video,.stage canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scaleX(-1);
}
.stage__badge{
  position:absolute;top:8px;right:8px;z-index:3;
  background:rgba(15,23,42,.8);border:1px solid var(--line);
  border-radius:8px;padding:3px 8px;font-size:.72rem;color:var(--txt-dim);
}
.stage__flash[hidden]{display:none}
.stage__flash{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  background:rgba(239,68,68,.22);border:3px solid var(--danger);
  font-weight:800;letter-spacing:.14em;font-size:.9rem;color:#fff;
  animation:pulse .45s ease;
}
@keyframes pulse{from{opacity:1}to{opacity:.25}}
.stage__empty{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  text-align:center;padding:24px;color:var(--txt-dim);font-size:.9rem;
  background:linear-gradient(160deg,#0b1428,#0f172a);
}
.stage__empty[hidden]{display:none}

/* ---------- emotion panel ---------- */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.emo-main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.emo-main__emoji{font-size:3.4rem;line-height:1}
.emo-main__name{font-weight:700;font-size:1.1rem;margin-top:6px}
.emo-main__pct{color:var(--accent);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}
.emo-main__note{font-size:.8rem;color:var(--txt-dim);margin-top:6px;min-height:1.2em}
.emo-main__note.warn{color:#fbbf24}
.emo-main__note.good{color:var(--ok)}

.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:28px minmax(72px,auto) minmax(0,1fr) 44px;align-items:center;gap:9px;font-size:.82rem}
.bar__track{height:9px;background:#0d1729;border-radius:99px;overflow:hidden}
.bar__fill{height:100%;border-radius:99px;transition:width .12s linear}
.bar__val{text-align:right;color:var(--txt-dim);font-variant-numeric:tabular-nums}

.chart{width:100%;max-width:100%;display:block}
.chart__hint{margin:0 0 10px;font-size:.82rem;line-height:1.45}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:.75rem;color:var(--txt-dim)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- AU list ---------- */
.aulist{display:flex;flex-direction:column;gap:5px;max-height:270px;overflow:auto}
.au{display:grid;grid-template-columns:62px 1fr 44px;gap:8px;align-items:center;font-size:.82rem}
.au__code{font-weight:700;color:var(--accent);font-size:.78rem}
.au__desc{color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au__val{text-align:right;font-variant-numeric:tabular-nums}
.au--strong .au__val{color:var(--joy)}

.microlog{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto}
.micro{
  display:flex;align-items:center;gap:8px;font-size:.83rem;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);
  border-radius:9px;padding:7px 10px;
}
.micro__t{color:var(--txt-dim);font-variant-numeric:tabular-nums;font-size:.76rem}
.pill{
  background:var(--card-2);border:1px solid var(--line);border-radius:99px;
  padding:1px 9px;font-size:.75rem;color:var(--txt-dim);font-weight:600;
}

/* ---------- upload ---------- */
.drop{
  border:2px dashed var(--line);border-radius:var(--r);
  padding:34px 18px;text-align:center;cursor:pointer;margin-bottom:14px;
  transition:border-color .15s,background .15s;background:var(--card);
}
.drop:hover,.drop.is-over,.drop:focus-visible{border-color:var(--accent);background:var(--card-2);outline:none}
.drop__ico{font-size:2.2rem;display:block;margin-bottom:8px}
.drop p{margin:0 0 4px;font-weight:600}
.drop small{color:var(--txt-dim)}

.field{margin-bottom:10px}
.field label{display:block;font-size:.8rem;color:var(--txt-dim);margin-bottom:4px}
select,input[type=date]{
  width:100%;background:var(--bg-2);color:var(--txt);
  border:1px solid var(--line);border-radius:9px;padding:9px 10px;font:inherit;font-size:.88rem;
}
select:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px}
.check{display:flex;align-items:center;gap:8px;font-size:.88rem;margin:10px 0 14px;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--accent)}

.progress{height:9px;background:#0d1729;border-radius:99px;overflow:hidden;margin-bottom:8px}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent-dk),var(--accent));transition:width .2s}
.upvideo{width:100%;max-height:200px;border-radius:10px;background:#000;display:block;margin-top:8px}

/* ---------- training ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:12px}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:10px;text-align:center}
.stat__v{font-size:1.3rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.stat__l{font-size:.74rem;color:var(--txt-dim)}

.cat{margin-bottom:14px}
.cat__head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.cat__head h3{margin:0}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.lsn{
  background:var(--card-2);border:1px solid var(--line);border-radius:11px;
  padding:10px;text-align:left;color:var(--txt);cursor:pointer;font:inherit;
  transition:border-color .15s,transform .15s;
}
.lsn:hover{border-color:var(--accent);transform:translateY(-1px)}
.lsn__n{font-weight:700;font-size:.85rem}
.lsn__m{font-size:.74rem;color:var(--txt-dim)}
.lsn__score{font-size:.74rem;font-weight:700}
.lsn.done{border-color:rgba(34,197,94,.5)}
.lsn.done .lsn__score{color:var(--ok)}

.lesson__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.lesson__name{font-weight:700;flex:1;font-size:.92rem}
.lesson__stage{position:relative;display:grid;place-items:center;margin:12px 0}
#trFace{
  width:min(360px,100%);height:auto;aspect-ratio:1;
  background:#0b1324;border:1px solid var(--line);border-radius:var(--r);
}
.lesson__go{position:absolute}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.opt{
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 8px;cursor:pointer;color:var(--txt);font:inherit;font-size:.88rem;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default}
.opt .e{font-size:1.4rem}
.opt.correct{border-color:var(--ok);background:rgba(34,197,94,.14)}
.opt.wrong{border-color:var(--danger);background:rgba(239,68,68,.14)}
.feedback{margin-top:12px;padding:12px;border-radius:11px;font-size:.87rem;border:1px solid var(--line);background:var(--bg-2)}
.feedback.ok{border-color:rgba(34,197,94,.5)}
.feedback.no{border-color:rgba(239,68,68,.5)}
.feedback b{display:block;margin-bottom:4px}

/* ---------- results / history ---------- */
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:.87rem}
.kv dt{color:var(--txt-dim)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
table.tbl{width:100%;border-collapse:collapse;font-size:.83rem}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--txt-dim);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl-wrap{overflow-x:auto}

.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.filters .field{margin:0}
.hist{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;margin-bottom:9px;
}
.hist__emo{font-size:1.9rem}
.hist__main{flex:1;min-width:0}
.hist__t{font-weight:600;font-size:.9rem}
.hist__m{font-size:.78rem;color:var(--txt-dim)}
.hist__acts{display:flex;gap:6px;flex-shrink:0}
.empty{text-align:center;color:var(--txt-dim);padding:34px 12px;font-size:.9rem}

/* ---------- loader / toast ---------- */
.loader{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(9,14,26,.86);backdrop-filter:blur(4px)}
.loader[hidden]{display:none}
.loader__box{width:min(320px,86vw);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center}
.spinner{
  width:38px;height:38px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;
  background:var(--card-2);border:1px solid var(--accent);color:var(--txt);
  padding:11px 17px;border-radius:11px;font-size:.87rem;max-width:88vw;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast[hidden]{display:none}
.toast.err{border-color:var(--danger)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- анимированные маски ---------- */


/* две маски дышат в противофазе */

/* ---------- признаки выражения ---------- */
.signs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sign{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;line-height:1.4}
.sign__n{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:.74rem;font-weight:700;
  display:grid;place-items:center;margin-top:1px;
}
.sign__note{margin:9px 0 0;font-size:.83rem;color:var(--txt-dim)}

/* ---------- снимки с разметкой ---------- */
.shots{display:flex;flex-direction:column;gap:14px}
.shot{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.shot__canvas{display:block;width:100%;height:auto}
.shot__cap{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:9px 12px;font-size:.85rem;border-top:1px solid var(--line);
}
.shot__time{
  color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid rgba(239,68,68,.5);border-radius:7px;padding:1px 8px;
}
.shot__tag{
  background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.4);
  color:#fca5a5;border-radius:99px;padding:1px 9px;font-size:.74rem;font-weight:600;
}
.shot__note{color:var(--txt-dim);font-size:.8rem;flex-basis:100%}

.photo-preview{
  width:100%;max-height:320px;object-fit:contain;
  background:#0b1324;border:1px solid var(--line);border-radius:11px;display:block;
}

/* ---------- модальный вопрос ---------- */
.modal{position:fixed;inset:0;z-index:92;display:grid;place-items:center;background:rgba(9,14,26,.82);backdrop-filter:blur(4px);padding:18px}
.modal[hidden]{display:none}
.modal__box{
  width:min(420px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.modal__ico{font-size:2.2rem;margin-bottom:6px}
.modal__box h3{font-size:1.05rem}
.modal__box .row{justify-content:center}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS — iOS 26 на мобильных, macOS Tahoe на десктопе.
   Блок идёт последним и намеренно переопределяет базовые стили выше.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --glass-tint:   linear-gradient(152deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 44%, rgba(255,255,255,.10));
  --glass-tint-2: linear-gradient(152deg, rgba(255,255,255,.24), rgba(255,255,255,.08) 46%, rgba(255,255,255,.14));
  --glass-brd:  rgba(255,255,255,.20);
  --glass-blur: saturate(185%) blur(26px);
  /* тонкая светлая грань сверху + мягкая внутренняя подсветка + внешняя тень:
     именно это читается глазом как «толстое стекло», а не как полупрозрачный слой */
  --glass-lift:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 0 0 26px rgba(255,255,255,.055),
    0 14px 38px rgba(4,12,30,.42);
  --r-glass: 22px;
  --rail: 248px;
}

/* ---------- цветная подложка, ради которой стекло вообще имеет смысл ---------- */
body{background:#08101f}
body::before{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 16%, rgba(56,189,248,.34), transparent 70%),
    radial-gradient(38% 34% at 84% 22%, rgba(129,140,248,.28), transparent 72%),
    radial-gradient(46% 40% at 72% 88%, rgba(251,191,36,.16), transparent 72%),
    radial-gradient(50% 44% at 24% 82%, rgba(14,165,233,.22), transparent 74%),
    linear-gradient(160deg,#0a132a 0%,#0b1524 60%,#0a1120 100%);
  filter:blur(30px);
  animation:ambient 26s ease-in-out infinite alternate;
}
@keyframes ambient{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.02)}
  to  {transform:translate3d(1.5%,1.5%,0) scale(1.06)}
}

/* ---------- общий рецепт стекла ---------- */
.card,.tile,.drop,.modal__box,.loader__box,.toast,.hist,.shot,.stat,.lsn,.opt,
.btn,.lang,.dock,.micro,.feedback,select,input[type=date]{
  background-image:var(--glass-tint);
  background-color:rgba(255,255,255,.035);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-lift);
}

.card,.drop,.hist,.shot{border-radius:var(--r-glass)}
.tile{border-radius:26px}
.stat,.lsn,.opt,.micro,.feedback{border-radius:16px}
.btn,.lang,select,input[type=date]{border-radius:999px}
.modal__box,.loader__box{border-radius:28px}

/* блик по верхней кромке — та самая «линза» из референса macOS Tahoe */
.card,.tile,.drop,.modal__box,.loader__box,.btn,.dock,.shot{position:relative;isolation:isolate}
.card::before,.tile::before,.drop::before,.modal__box::before,
.loader__box::before,.btn::before,.dock::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(255,255,255,.30), transparent 58%),
    radial-gradient(90% 60% at 90% 110%, rgba(125,211,252,.16), transparent 62%);
}

.tile:hover,.tile:focus-visible{
  background-image:var(--glass-tint-2);
  border-color:rgba(255,255,255,.34);
  box-shadow:var(--glass-lift),0 0 0 1px rgba(125,211,252,.28),0 18px 44px rgba(4,12,30,.5);
}

.btn{padding:11px 20px}
.btn:hover:not(:disabled){
  background-image:var(--glass-tint-2);
  border-color:rgba(255,255,255,.36);
}
.btn--primary{
  background-image:linear-gradient(152deg,rgba(125,211,252,.95),rgba(56,189,248,.80) 55%,rgba(14,165,233,.92));
  border-color:rgba(186,230,253,.75);color:#04202f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 28px rgba(14,165,233,.32);
}
.btn--primary:hover:not(:disabled){filter:brightness(1.07)}
.btn--ghost{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn--ghost::before{display:none}

.disclaimer{
  background-image:linear-gradient(152deg,rgba(239,68,68,.20),rgba(239,68,68,.07));
  border-color:rgba(252,165,165,.34);
}

.topbar{
  background:rgba(10,18,36,.55);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

.progress,.bar__track{background:rgba(6,14,30,.55);border:1px solid rgba(255,255,255,.08)}

/* ---------- навигация: док снизу (iOS) / рейка слева (macOS) ---------- */
.dock{
  position:fixed;z-index:60;display:flex;
  left:50%;bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(430px,calc(100% - 20px));
  padding:7px 6px;border-radius:26px;gap:2px;
}
.dock__i{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;color:var(--txt-dim);cursor:pointer;
  padding:6px 2px;border-radius:17px;font:inherit;font-size:9.5px;font-weight:600;
  transition:color .18s,background .18s;
}
.dock__i svg{width:21px;height:21px;fill:currentColor}
.dock__i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dock__i:hover{color:var(--txt)}
.dock__i.is-on{
  color:#e9f6ff;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(4,12,30,.35);
}

/* ---------- мобильная версия: iOS 26 ---------- */
@media(max-width:899px){
  main{padding:12px 14px 108px}
  .screen__title{font-size:1.72rem;font-weight:800;letter-spacing:-.022em;margin-bottom:12px}
  .hero__title{font-size:1.62rem;letter-spacing:-.02em}
  .topbar__title{font-size:.9rem}
  .card{padding:17px}
  .tiles{grid-template-columns:1fr 1fr;gap:11px}
  .tile{padding:15px;border-radius:24px}
  .tile__name{font-size:.94rem}
  .tile__desc{font-size:.77rem}

  /* вопрос про PDF приезжает снизу листом, как системные шторки iOS */
  .modal{align-items:end;padding:0}
  .modal__box{
    width:100%;border-radius:30px 30px 0 0;
    padding:14px 20px calc(26px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;
    animation:sheetUp .3s cubic-bezier(.22,.9,.3,1);
  }
  .modal__box::after{
    content:"";display:block;width:38px;height:5px;border-radius:99px;
    background:rgba(255,255,255,.3);margin:0 auto 12px;order:-1;
  }
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

  .toast{bottom:calc(96px + env(safe-area-inset-bottom));border-radius:999px}
}

/* ---------- версия для ПК: боковая рейка macOS Tahoe ---------- */
@media(min-width:900px){
  main{max-width:1080px;margin-left:calc(var(--rail) + 24px);margin-right:auto;padding:22px 26px 60px}
  .topbar{padding-left:calc(var(--rail) + 26px)}

  .dock{
    left:14px;top:82px;bottom:18px;transform:none;
    width:var(--rail);flex-direction:column;justify-content:flex-start;
    gap:4px;padding:12px 10px;border-radius:26px;
  }
  .dock__i{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    padding:11px 14px;border-radius:15px;font-size:.92rem;font-weight:600;width:100%;
  }
  .dock__i svg{width:19px;height:19px;flex:0 0 auto}
  .dock__i span{max-width:none}

  .screen__title{font-size:1.9rem;font-weight:800;letter-spacing:-.024em}
  .hero{padding:26px 6px 30px}
  .hero__title{font-size:2.05rem;letter-spacing:-.026em}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
  .card{padding:20px}
}

@media(max-width:400px){
  .dock__i span{font-size:8.4px}
  .tile{padding:13px}
  .tile__desc{font-size:.73rem}
  .mona-logo{width:min(150px,44vw)}
  .hero{padding:10px 4px 16px}
}

/* доступность: без прозрачности и без движения интерфейс остаётся читаемым */
@media(prefers-reduced-transparency:reduce){
  .card,.tile,.drop,.modal__box,.loader__box,.toast,.hist,.shot,.stat,.lsn,.opt,
  .btn,.lang,.dock,.micro,.feedback,select,input[type=date]{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background-image:none;background-color:#16213a;
  }
  body::before{filter:none;opacity:.4}
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .modal__box{animation:none}
}

/* ---------- 3D-лица вместо эмодзи ---------- */
.face3d{
  display:block;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(4,12,30,.45));
}
.emo-main__emoji{
  display:grid;place-items:center;min-height:96px;line-height:1;
}
.emo-main__emoji.is-empty{opacity:.28}
.emo-main__emoji .face3d{width:96px;height:96px}
.hist__emo{display:grid;place-items:center;flex:0 0 auto}
.opt .e{display:grid;place-items:center}
.shot__emo{display:inline-flex;align-items:center;gap:7px}

.emo-dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 0 8px currentColor;
}
.bar{grid-template-columns:28px minmax(64px,auto) minmax(0,1fr) 42px}
.bar__key{display:grid;place-items:center}

/* ---------- векторные глифы ---------- */
.gl{width:26px;height:26px;fill:var(--accent);display:block}
.gl--sm{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:5px}
.tile__ico{display:block;margin-bottom:2px}
.drop__ico{display:grid;place-items:center;margin:0 auto 8px}
.drop__ico .gl{width:34px;height:34px}
.modal__ico{display:grid;place-items:center;margin-bottom:6px}
.modal__ico .gl{width:34px;height:34px}

/* ═══════════════ помощник ═══════════════ */

.helper{
  position:fixed;z-index:70;right:16px;
  bottom:calc(96px + env(safe-area-inset-bottom));
  width:62px;height:62px;padding:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background-image:var(--glass-tint);
  background-color:rgba(255,255,255,.05);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-lift);
  transition:transform .2s;
}
.helper:hover{transform:translateY(-2px) scale(1.04)}
.helper__bot{display:block;width:52px;height:52px;overflow:hidden;border-radius:50%}
.helper .bot{width:52px;height:52px;display:block}

/* мягкая волна вокруг кнопки, пока помощник ждёт ответа */
.helper__pulse{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(56,189,248,.55);opacity:0;
}
.helper.is-calling .helper__pulse{animation:helperPulse 2.1s ease-out infinite}
@keyframes helperPulse{
  0%{opacity:.8;transform:scale(.86)}
  70%{opacity:0;transform:scale(1.25)}
  100%{opacity:0;transform:scale(1.25)}
}

.helper-bubble{
  position:fixed;z-index:71;right:16px;
  bottom:calc(168px + env(safe-area-inset-bottom));
  width:min(290px,calc(100vw - 32px));padding:14px 16px;
  border-radius:20px 20px 6px 20px;
  background-image:var(--glass-tint-2);
  background-color:rgba(255,255,255,.06);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-lift);
  animation:bubbleIn .28s cubic-bezier(.22,.9,.3,1);
}
.helper-bubble[hidden]{display:none}
.helper-bubble p{font-size:.92rem;font-weight:600;margin:0 0 10px}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* ── анимация робота ── */
.bot{overflow:visible}
.bot__head{transform-origin:60px 60px;animation:botTilt 6s ease-in-out infinite}
@keyframes botTilt{
  0%,100%{transform:rotate(-2.5deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-1.5px)}
}
.bot__eyes{animation:botBlink 5.2s infinite}
@keyframes botBlink{
  0%,92%,100%{transform:scaleY(1)}
  95%,96.5%{transform:scaleY(.12)}
}
.bot__eyes{transform-origin:60px 49px}
.bot__ring{animation:botRing 2.4s ease-in-out infinite}
@keyframes botRing{0%,100%{opacity:.35}50%{opacity:1}}
.bot__mic{animation:botMic 1.8s ease-in-out infinite}
@keyframes botMic{0%,100%{opacity:.55;r:3}50%{opacity:1;r:3.6}}
.bot__wire{animation:botWire 3s ease-in-out infinite}
@keyframes botWire{0%,100%{opacity:.5}50%{opacity:1}}
.bot__hand{transform-origin:88px 100px;animation:botHand 6s ease-in-out infinite}
@keyframes botHand{
  0%,100%{transform:rotate(0) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-2px)}
}

/* ── панель объяснения ── */

.helper-step{text-align:left}
.helper-step__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(150deg,rgba(125,211,252,.30),rgba(56,189,248,.12));
  border:1px solid rgba(186,230,253,.35);margin-bottom:12px;
}
.helper-step__ico svg{width:24px;height:24px;fill:#bae6fd}
.helper-step h4{margin:0 0 6px;font-size:1.06rem;letter-spacing:-.01em}
.helper-step p{margin:0;font-size:.92rem;line-height:1.62;color:#cddcef}

.privacy{
  background-image:linear-gradient(152deg,rgba(34,197,94,.16),rgba(34,197,94,.05));
  border-color:rgba(134,239,172,.32);
}
.privacy h2{font-size:1.05rem}
.privacy .bullets{color:#d6f0df}

.btn--danger{
  background-image:linear-gradient(152deg,rgba(248,113,113,.92),rgba(220,38,38,.86));
  border-color:rgba(254,202,202,.6);color:#fff;
}
#histActions{align-items:center;gap:12px}

@media(min-width:900px){
  .helper{right:26px;bottom:26px}
  .helper-bubble{right:26px;bottom:100px}
}
@media(prefers-reduced-motion:reduce){
  .bot__head,.bot__eyes,.bot__ring,.bot__mic,.bot__wire,.bot__hand,
  .helper.is-calling .helper__pulse,.helper-bubble{animation:none}
}

/* ═══════════════ диалог с помощником ═══════════════ */

.helper-panel{
  max-width:540px;width:min(540px,100%);text-align:left;
  display:flex;flex-direction:column;gap:12px;
  max-height:min(78vh,680px);
}
.helper-panel__head{display:flex;align-items:center;gap:11px;margin:0}
.helper-panel__bot{flex:0 0 auto;width:48px;height:48px;display:block}
.helper-panel__bot .bot{width:48px;height:48px}
.helper-panel__who{min-width:0;flex:1}
.helper-panel__who h3{margin:0;font-size:1.02rem}
.helper-panel__who .muted{margin:0;font-size:.78rem}
.helper-panel__clear{font-size:.78rem;padding:4px 8px}
.helper-panel__x{font-size:1.5rem;line-height:1;padding:0 6px}

.chat__log{
  flex:1;min-height:180px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:10px;padding:4px 2px;
}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.msg--me{justify-content:flex-end}
.msg__av{flex:0 0 auto;width:30px;height:30px;display:block}
.msg__av .bot{width:30px;height:30px}
.msg__b{
  max-width:82%;padding:10px 13px;font-size:.9rem;line-height:1.55;
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.msg--bot .msg__b{
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border-radius:16px 16px 16px 5px;color:#e2ecf9;
}
.msg--me .msg__b{
  background:linear-gradient(150deg,rgba(125,211,252,.34),rgba(56,189,248,.20));
  border-color:rgba(186,230,253,.42);
  border-radius:16px 16px 5px 16px;color:#eaf7ff;
}

.msg__typing{display:flex;gap:5px;align-items:center;padding:14px 15px}
.msg__typing i{width:7px;height:7px;border-radius:50%;background:#9fc3dd;display:block;animation:typing 1.15s infinite}
.msg__typing i:nth-child(2){animation-delay:.16s}
.msg__typing i:nth-child(3){animation-delay:.32s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat__chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  background:linear-gradient(150deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  border:1px solid var(--glass-brd);color:#cfe2f5;
  border-radius:999px;padding:7px 13px;font:inherit;font-size:.81rem;font-weight:600;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.chip:hover{border-color:rgba(125,211,252,.6);color:#eaf7ff}
.chip--go{
  background:linear-gradient(150deg,rgba(125,211,252,.32),rgba(56,189,248,.16));
  border-color:rgba(186,230,253,.5);color:#eaf7ff;
}

.chat__form{display:flex;gap:8px;align-items:center}
.chat__input{
  flex:1;min-width:0;border-radius:999px;padding:12px 16px;font:inherit;font-size:.92rem;
  background-image:var(--glass-tint);background-color:rgba(255,255,255,.04);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.chat__input::placeholder{color:#8fa6c2}
.chat__input:focus{outline:2px solid var(--accent);outline-offset:1px}
.chat__send{
  flex:0 0 auto;width:46px;height:46px;padding:0;border-radius:50%;
  display:grid;place-items:center;
}
.chat__send svg{width:20px;height:20px;fill:#04202f;transform:translateX(1px)}
.chat__note{margin:0;font-size:.74rem;color:var(--txt-dim);text-align:center}

@media(max-width:899px){
  .helper-panel{max-height:88vh}
  .chat__log{min-height:150px}
  .msg__b{font-size:.88rem;max-width:86%}
}
@media(prefers-reduced-motion:reduce){
  .msg__typing i{animation:none}
}

.chat__log::-webkit-scrollbar{width:6px}
.chat__log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.chat__log::-webkit-scrollbar-track{background:transparent}
.chat__log{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}

/* ---------- анализ по ссылке ---------- */
.linkform{display:flex;gap:8px;margin-bottom:8px}
.linkform__input{
  flex:1;min-width:0;border-radius:999px;padding:12px 16px;font:inherit;font-size:.92rem;
  background-image:var(--glass-tint);background-color:rgba(255,255,255,.04);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.linkform__input::placeholder{color:#8fa6c2}
.linkform__input:focus{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:520px){
  .linkform{flex-direction:column}
  .linkform .btn{width:100%}
}

.pdf-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pdf-actions .btn{flex:0 1 auto}
@media(max-width:520px){
  .pdf-actions{flex-direction:column}
  .pdf-actions .btn{width:100%}
}

/* ---------- заключение ---------- */
.verdict{
  background-image:linear-gradient(152deg,rgba(125,211,252,.20),rgba(56,189,248,.07));
  border-color:rgba(186,230,253,.34);
}
.verdict__head{font-size:1.04rem;font-weight:700;line-height:1.55;margin:0 0 .55em;color:#eaf7ff}
.verdict__p{margin:0 0 .45em;font-size:.92rem;line-height:1.6;color:#cddcef}
.verdict__p:last-child{margin-bottom:0;color:var(--txt-dim);font-size:.86rem}
.tbl__emo{display:flex;align-items:center;gap:7px}
.tbl__emo img{flex:0 0 auto}
.ask__ico{display:block;width:44px;height:44px;margin:0 auto 10px}
.ask__ico svg{width:44px;height:44px;fill:#7dd3fc}
.bar__key .face3d{display:block;border-radius:50%}
.tbl__emo .face3d{border-radius:50%}

/* ---------- контекст и базовая линия ---------- */
.ctx__label{display:block;font-size:.82rem;color:var(--txt-dim);margin-bottom:6px}
.ctx select{margin-bottom:8px}
.ctx .muted{margin:0;font-size:.8rem}
.baseline .pill--ok{border-color:rgba(134,239,172,.5);color:#bbf7d0}
.devs{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dev{display:grid;grid-template-columns:minmax(0,1fr) 90px 52px;align-items:center;gap:9px;font-size:.83rem}
.dev__l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cddcef}
.dev__track{height:7px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.dev__fill{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#7dd3fc);border-radius:99px}
.dev__fill--strong{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.dev__v{text-align:right;font-variant-numeric:tabular-nums;color:#eaf7ff;font-weight:600}

/* ---------- журнал событий ---------- */
.evt{
  background:linear-gradient(152deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--glass-brd);border-radius:14px;padding:12px 14px;margin-bottom:9px;
}
.evt__head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:7px}
.evt__t{font-weight:700;font-variant-numeric:tabular-nums;color:#eaf7ff}
.evt__d,.evt__ch{font-size:.78rem;color:var(--txt-dim)}
.evt__row{font-size:.87rem;line-height:1.55;margin-bottom:4px;color:#cddcef}
.evt__row b{color:#9fd4f0;font-weight:600}
.evt__conf{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.conf{
  font-size:.75rem;padding:3px 9px;border-radius:99px;
  border:1px solid var(--glass-brd);color:var(--txt-dim);
}
.conf--det{border-color:rgba(134,239,172,.45);color:#bbf7d0}
.conf--int{border-color:rgba(251,191,36,.45);color:#fde68a}

.sci__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:12px 0}
.sci__item{
  background:linear-gradient(152deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--glass-brd);border-radius:13px;padding:12px 14px;
}
.sci__item h4{margin:0 0 5px;font-size:.9rem;color:#9fd4f0}
.sci__item p{margin:0;font-size:.84rem;line-height:1.55;color:#cddcef}
.sci h4{font-size:.92rem;margin:14px 0 4px;color:#9fd4f0}

/* ---------- окно просмотра по ссылке ---------- */
.watch__frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;border:1px solid var(--glass-brd);
}
.watch__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch__overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.watch__badge{
  position:absolute;top:8px;right:8px;z-index:3;pointer-events:none;
  background:rgba(10,16,28,.78);border:1px solid var(--glass-brd);
  border-radius:8px;padding:3px 9px;font-size:.72rem;color:#bae6fd;
}
.watch__live{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.watch__emo{flex:0 0 auto;width:56px;height:56px;display:block}
.watch__name{font-weight:700;font-size:1rem}
.watch__sub{font-size:.82rem;color:var(--txt-dim)}
.watch__counts{margin-left:auto;font-size:.8rem;color:var(--txt-dim)}
@media(max-width:520px){.watch__counts{margin-left:0;width:100%}}

/* плашка внутри карточки, а не поверх видео */
.stage__flash--inline{
  position:static;margin-top:12px;padding:10px;border-radius:12px;
  animation:none;background:rgba(239,68,68,.18);
}

/* разделитель «или» */
.or{display:flex;align-items:center;gap:12px;padding:10px 16px}
.or__line{flex:1;height:1px;background:var(--glass-brd)}
.or__t{font-size:.8rem;color:var(--txt-dim);text-transform:lowercase}

/* ---------- слой состояний ---------- */
.states .sub{font-size:.92rem;margin:16px 0 8px;color:#9fd4f0}
.st{margin-bottom:11px}
.st__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.st__n{font-size:.89rem;color:#cddcef}
.st__v{font-weight:700;font-variant-numeric:tabular-nums;color:#eaf7ff}
.st__v--hot{color:#fbbf24}
.st__track{display:block;height:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:5px 0 4px}
.st__fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0ea5e9,#7dd3fc)}
.st__fill--hot{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.st__meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.75rem;color:var(--txt-dim)}
.st__base{color:#9fd4f0}
.st__warn{
  margin:16px 0 0;padding:11px 13px;border-radius:12px;font-size:.79rem;line-height:1.55;
  background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.30);color:#e8c9c9;
}

/* аффект и поведение */
.af{display:grid;grid-template-columns:minmax(0,1fr) 110px 46px;align-items:center;gap:10px;margin-bottom:8px;font-size:.86rem}
.af__n{color:#cddcef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af__track{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.af__fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#38bdf8,#a78bfa)}
.af__v{text-align:right;font-variant-numeric:tabular-nums;color:#eaf7ff}
.af--off{grid-template-columns:minmax(0,1fr) auto}
.af__na{font-size:.76rem;color:var(--txt-dim);font-style:italic}

.bar__name{color:#cddcef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){
  .bar{grid-template-columns:24px minmax(58px,auto) minmax(0,1fr) 38px;gap:7px;font-size:.78rem}
  .bar__key .face3d{width:24px;height:24px}
}

/* ---------- пояснение, когда возможность недоступна ---------- */
.notice{
  margin-top:12px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(152deg,rgba(251,191,36,.14),rgba(251,191,36,.05));
  border:1px solid rgba(253,224,71,.32);
}
.notice strong{display:block;margin-bottom:5px;color:#fde68a;font-size:.92rem}
.notice p{margin:0;font-size:.86rem;line-height:1.6;color:#e9dfc4}

/* ---------- индикатор записи ---------- */
.card.rec{position:sticky;bottom:12px;z-index:30}
.rec{box-shadow:0 10px 30px rgba(0,0,0,.35);background-image:linear-gradient(152deg,rgba(239,68,68,.16),rgba(239,68,68,.05));border-color:rgba(252,165,165,.34)}
.rec__row{display:flex;align-items:center;gap:11px}
.rec__stop{margin-left:auto}
.rec__dot{width:12px;height:12px;border-radius:50%;background:#ef4444;animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec__t{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fecaca}
.rec__s{font-size:.82rem;color:var(--txt-dim)}
.rec .muted{margin:8px 0 0;font-size:.84rem}
@media(prefers-reduced-motion:reduce){.rec__dot{animation:none}}


/* ---------- подписка и лимиты ---------- */

.plan-badge{
  background:rgba(59,130,245,.14);border:1px solid rgba(96,165,250,.4);
  color:var(--txt);border-radius:8px;padding:5px 10px;
  font-size:.74rem;font-weight:600;cursor:pointer;white-space:nowrap;
  max-width:44vw;overflow:hidden;text-overflow:ellipsis;
}
.plan-badge:hover{border-color:var(--accent)}

/* Экран лимита перекрывает всё нарочно: это не подсказка, а стоп-кран.
   Мягкое уведомление внизу экрана здесь пролистывают и жмут кнопку снова. */
.limit{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(5,8,15,.72);backdrop-filter:blur(4px);padding:20px;
}
.limit[hidden]{display:none}
.limit__box{
  position:relative;max-width:26rem;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.limit__box h3{margin:0 0 10px;font-size:1.15rem}
.limit__box p{margin:0 0 18px;color:var(--txt-dim);line-height:1.55;font-size:.95rem}
.limit__x{
  position:absolute;top:8px;right:12px;background:none;border:0;
  color:var(--txt-dim);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px;
}
.limit__x:hover{color:var(--txt)}

.shot__q{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:6px;
  background:rgba(59,130,245,.16);color:var(--accent);font-size:.74rem;font-weight:700;
}
.shot__q--low{background:rgba(248,113,113,.16);color:#f87171}


/* ---------- знак: Джоконда под лупой ---------- */

/*
 * Круглая оправа нарочно: квадратная репродукция в шапке выглядит наклейкой,
 * а круг читается как знак. Лицо обрезано близко — на тридцати точках общий
 * план с пейзажем превращается в пятно.
 */
.mona{
  display:block;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
  background:#1a1408;
}
.mona--sm{width:30px;height:30px}

.mona-logo{
  position:relative;
  width:min(190px,52vw);
  aspect-ratio:1;
  margin-inline:auto;
  border-radius:50%;
  overflow:hidden;                    /* лупа не выходит за портрет */
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 12px 34px rgba(0,0,0,.45), 0 0 0 6px rgba(251,191,36,.08);
  background:#1a1408;
}
.mona-logo__face{width:100%;height:100%;display:block;object-fit:cover}

/* Лупа целиком: стекло и ручка. Ходит по кругу внутри портрета. */
.mona-logo__lens{
  position:absolute;left:50%;top:50%;
  width:36%;aspect-ratio:1;
  pointer-events:none;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.55));
  animation:monaLensPath 11s linear infinite;
}

/*
 * Стекло — круглое окно без рамки. Рамка вынесена отдельным кольцом нарочно:
 * граница сужает внутреннюю область, и увеличенный портрет вставал бы не на
 * своё место — под лупой оказывался бы не тот участок лица.
 */
.mona-logo__hole{
  position:absolute;inset:0;
  border-radius:50%;
  overflow:hidden;
  /*
   * clip-path обязателен, а не «на всякий случай». Круглая обрезка через
   * overflow:hidden не применяется к содержимому с трансформацией: браузер
   * обрезает его прямоугольником, и вместо стекла появляется квадрат.
   * clip-path режет по кругу независимо от трансформаций внутри.
   */
  clip-path:circle(50% at 50% 50%);
}

/* Оправа поверх стекла. */
.mona-logo__rim{
  position:absolute;inset:0;
  border-radius:50%;
  border:5px solid #c98a24;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.30),
             inset 0 -6px 12px rgba(0,0,0,.25),
             0 0 0 1px rgba(0,0,0,.45);
}

/* Портрет под стеклом: тот же файл, но крупнее и сдвинут под лупу. */
.mona-logo__zoom{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 2.7778);
  aspect-ratio:1;
  background:url('../assets/portrait.png') center/cover no-repeat;
  animation:monaZoomPath 11s linear infinite;
}

/* Блик на стекле, чтобы окно читалось как стекло, а не как дырка. */
.mona-logo__shine{
  position:absolute;inset:0;
  background:radial-gradient(circle at 34% 28%,
             rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 34%, rgba(11,19,36,.16) 100%);
}

/* Ручка. Растёт от нижнего края стекла и уходит вправо вниз. */
.mona-logo__handle{
  position:absolute;left:50%;top:82%;
  width:15%;height:62%;
  border-radius:99px;
  background:linear-gradient(90deg,#6b4220,#c68642 45%,#6b4220);
  transform:translateX(-50%) rotate(38deg);
  transform-origin:50% 0;
}

@keyframes monaLensPath{
  0.0%{transform:translate(calc(-50% + 0.00%), calc(-50% + -55.56%))}
  4.17%{transform:translate(calc(-50% + 14.38%), calc(-50% + -53.66%))}
  8.33%{transform:translate(calc(-50% + 27.78%), calc(-50% + -48.11%))}
  12.5%{transform:translate(calc(-50% + 39.28%), calc(-50% + -39.28%))}
  16.67%{transform:translate(calc(-50% + 48.11%), calc(-50% + -27.78%))}
  20.83%{transform:translate(calc(-50% + 53.66%), calc(-50% + -14.38%))}
  25.0%{transform:translate(calc(-50% + 55.56%), calc(-50% + -0.00%))}
  29.17%{transform:translate(calc(-50% + 53.66%), calc(-50% + 14.38%))}
  33.33%{transform:translate(calc(-50% + 48.11%), calc(-50% + 27.78%))}
  37.5%{transform:translate(calc(-50% + 39.28%), calc(-50% + 39.28%))}
  41.67%{transform:translate(calc(-50% + 27.78%), calc(-50% + 48.11%))}
  45.83%{transform:translate(calc(-50% + 14.38%), calc(-50% + 53.66%))}
  50.0%{transform:translate(calc(-50% + 0.00%), calc(-50% + 55.56%))}
  54.17%{transform:translate(calc(-50% + -14.38%), calc(-50% + 53.66%))}
  58.33%{transform:translate(calc(-50% + -27.78%), calc(-50% + 48.11%))}
  62.5%{transform:translate(calc(-50% + -39.28%), calc(-50% + 39.28%))}
  66.67%{transform:translate(calc(-50% + -48.11%), calc(-50% + 27.78%))}
  70.83%{transform:translate(calc(-50% + -53.66%), calc(-50% + 14.38%))}
  75.0%{transform:translate(calc(-50% + -55.56%), calc(-50% + 0.00%))}
  79.17%{transform:translate(calc(-50% + -53.66%), calc(-50% + -14.38%))}
  83.33%{transform:translate(calc(-50% + -48.11%), calc(-50% + -27.78%))}
  87.5%{transform:translate(calc(-50% + -39.28%), calc(-50% + -39.28%))}
  91.67%{transform:translate(calc(-50% + -27.78%), calc(-50% + -48.11%))}
  95.83%{transform:translate(calc(-50% + -14.38%), calc(-50% + -53.66%))}
  100.0%{transform:translate(calc(-50% + -0.00%), calc(-50% + -55.56%))}
}

@keyframes monaZoomPath{
  0.0%{transform:translate(calc(-50% + -0.00%), calc(-50% + 36.00%)) scale(1.8)}
  4.17%{transform:translate(calc(-50% + -9.32%), calc(-50% + 34.77%)) scale(1.8)}
  8.33%{transform:translate(calc(-50% + -18.00%), calc(-50% + 31.18%)) scale(1.8)}
  12.5%{transform:translate(calc(-50% + -25.46%), calc(-50% + 25.46%)) scale(1.8)}
  16.67%{transform:translate(calc(-50% + -31.18%), calc(-50% + 18.00%)) scale(1.8)}
  20.83%{transform:translate(calc(-50% + -34.77%), calc(-50% + 9.32%)) scale(1.8)}
  25.0%{transform:translate(calc(-50% + -36.00%), calc(-50% + 0.00%)) scale(1.8)}
  29.17%{transform:translate(calc(-50% + -34.77%), calc(-50% + -9.32%)) scale(1.8)}
  33.33%{transform:translate(calc(-50% + -31.18%), calc(-50% + -18.00%)) scale(1.8)}
  37.5%{transform:translate(calc(-50% + -25.46%), calc(-50% + -25.46%)) scale(1.8)}
  41.67%{transform:translate(calc(-50% + -18.00%), calc(-50% + -31.18%)) scale(1.8)}
  45.83%{transform:translate(calc(-50% + -9.32%), calc(-50% + -34.77%)) scale(1.8)}
  50.0%{transform:translate(calc(-50% + -0.00%), calc(-50% + -36.00%)) scale(1.8)}
  54.17%{transform:translate(calc(-50% + 9.32%), calc(-50% + -34.77%)) scale(1.8)}
  58.33%{transform:translate(calc(-50% + 18.00%), calc(-50% + -31.18%)) scale(1.8)}
  62.5%{transform:translate(calc(-50% + 25.46%), calc(-50% + -25.46%)) scale(1.8)}
  66.67%{transform:translate(calc(-50% + 31.18%), calc(-50% + -18.00%)) scale(1.8)}
  70.83%{transform:translate(calc(-50% + 34.77%), calc(-50% + -9.32%)) scale(1.8)}
  75.0%{transform:translate(calc(-50% + 36.00%), calc(-50% + -0.00%)) scale(1.8)}
  79.17%{transform:translate(calc(-50% + 34.77%), calc(-50% + 9.32%)) scale(1.8)}
  83.33%{transform:translate(calc(-50% + 31.18%), calc(-50% + 18.00%)) scale(1.8)}
  87.5%{transform:translate(calc(-50% + 25.46%), calc(-50% + 25.46%)) scale(1.8)}
  91.67%{transform:translate(calc(-50% + 18.00%), calc(-50% + 31.18%)) scale(1.8)}
  95.83%{transform:translate(calc(-50% + 9.32%), calc(-50% + 34.77%)) scale(1.8)}
  100.0%{transform:translate(calc(-50% + 0.00%), calc(-50% + 36.00%)) scale(1.8)}
}

@media (prefers-reduced-motion:reduce){
  .mona-logo__lens,.mona-logo__zoom{animation:none}
}

/* ---------- комнаты Business и Bank ---------- */

/*
 * Цвет комнаты меняется через переменные на самом экране, а не глобально.
 * Так главная страница остаётся прежней — как и просил владелец: комната
 * своя, а сайт вокруг не перекрашивается.
 */
.room--business{
  --room:#10b981;
  --room-soft:#34d399;
  --room-bg:rgba(16,185,129,.10);
  --room-line:rgba(52,211,153,.34);
}
.room--bank{
  --room:#8b5cf6;
  --room-soft:#a78bfa;
  --room-bg:rgba(139,92,246,.10);
  --room-line:rgba(167,139,250,.34);
}

.room .card{border-color:var(--room-line);background-image:linear-gradient(160deg,var(--room-bg),transparent 60%)}
.room .btn--primary{background:var(--room);border-color:var(--room)}
.room .btn--primary:hover{background:var(--room-soft)}
.room .btn:hover{border-color:var(--room-soft)}
.room h3{color:var(--room-soft)}

.room__head{
  display:flex;align-items:center;gap:14px;
  padding:16px 16px 14px;margin-bottom:14px;
  border:1px solid var(--room-line);border-radius:16px;
  background:linear-gradient(140deg,var(--room-bg),transparent 70%);
}
.room__badge{
  font-size:1.9rem;line-height:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.room__title{margin:0;font-size:1.15rem;color:var(--room-soft)}
.room__sub{margin:4px 0 0;font-size:.84rem;color:var(--txt-dim);line-height:1.45}
.room__count{font-size:.82rem;color:var(--txt-dim);align-self:center}

/* переключение отделов внутри банка */
.room__tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.room__tab{
  background:var(--card);border:1px solid var(--line);color:var(--txt-dim);
  border-radius:10px;padding:9px 14px;font-size:.86rem;font-weight:600;cursor:pointer;
}
.room__tab.is-on{border-color:var(--room);color:var(--room-soft);background:var(--room-bg)}

/* полосы состояний клиента */
.cst{margin-bottom:12px}
.cst__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.cst__n{font-size:.92rem;font-weight:600}
.cst__v{font-weight:800;font-variant-numeric:tabular-nums}
.cst__track{display:block;height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cst__fill{display:block;height:100%;border-radius:99px}
.cst__advice{margin:5px 0 0;font-size:.8rem;color:var(--txt-dim);line-height:1.45}

/* список вопросов к заёмщику */
.qlist{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.qrow{display:flex;align-items:center;gap:8px}
.qrow__n{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;
  background:var(--room-bg);color:var(--room-soft);border:1px solid var(--room-line);
}
.qrow__in{
  flex:1;background:var(--bg-soft,#0b1220);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;color:var(--txt);font-size:.9rem;
}
.qrow__in:focus{border-color:var(--room-soft);outline:none}
.qrow__x{background:none;border:0;color:var(--txt-dim);font-size:1.4rem;cursor:pointer;padding:0 6px}
.qrow__x:hover{color:#f87171}

/* ход опроса */
.interview__stage{position:relative;border-radius:14px;overflow:hidden;background:#05080f}
/* управление камерой переезжает и сюда, поэтому правила те же */
.interview__stage--back video{transform:none}
.interview__stage video{transform:scaleX(-1)}
.interview__stage video{display:block;width:100%;height:auto;max-height:52vh;object-fit:cover}
.interview__timer{
  position:absolute;top:10px;right:12px;
  background:rgba(5,8,15,.7);border:1px solid var(--room-line);
  padding:4px 10px;border-radius:8px;
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem;color:var(--room-soft);
}
/* Титр под видео: вопрос виден и говорящему, и на записи экрана. */
.interview__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px;
  background:linear-gradient(0deg,rgba(5,8,15,.92),transparent);
  font-size:1rem;font-weight:600;line-height:1.4;text-align:center;
}
.interview__countdown{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:4rem;font-weight:900;color:var(--room-soft);
  background:rgba(5,8,15,.45);
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}
.interview__countdown[hidden]{display:none}

/* заключение по каждому вопросу */
.qres{border:1px solid var(--room-line);border-radius:12px;padding:14px;margin-bottom:12px}
.qres__q{font-weight:700;margin:0 0 6px;color:var(--room-soft)}
.qres__t{margin:0;font-size:.9rem;line-height:1.55;color:var(--txt-dim)}

/* ключ от комнаты в шапке */
.room-key{
  background:rgba(139,92,246,.16);border:1px solid rgba(167,139,250,.45);
  color:#c4b5fd;border-radius:8px;padding:5px 10px;
  font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;
}
.room-key:hover{border-color:#a78bfa}
.room-key--business{background:rgba(16,185,129,.16);border-color:rgba(52,211,153,.45);color:#6ee7b7}

/* ---------- переключение камеры ---------- */

/*
 * Кнопка живёт на самом кадре, а не в ряду под ним: это управление камерой,
 * и рука на телефоне тянется к экрану, а не под него.
 */
.camflip{
  position:absolute;z-index:4;right:8px;bottom:8px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(15,23,42,.82);border:1px solid var(--line);
  border-radius:10px;padding:7px 10px;cursor:pointer;
  color:var(--txt);font-size:.74rem;font-weight:600;
  backdrop-filter:blur(6px);
}
.camflip[hidden]{display:none}
.camflip:hover{border-color:var(--accent)}
.camflip:active{transform:scale(.96)}
.camflip svg{width:20px;height:20px;fill:currentColor;flex:none}
.camflip__arrow{fill:var(--accent)}
.camflip--room{right:10px;bottom:auto;top:10px}

/* На узком экране подпись убираем: значка достаточно, а место дорого. */
@media (max-width:420px){
  .camflip__t{display:none}
  .camflip{padding:8px}
}

/*
 * Задняя камера не зеркалится: мир не отражён. Переднюю зеркалим, потому что
 * человек привык видеть себя как в зеркале.
 */
.stage--back video,.stage--back canvas{transform:none}

/* ---------- подсказка о качестве кадра ---------- */

/*
 * Подсказка стоит на кадре сверху: смотреть надо туда же, куда и на лицо.
 * Ниже кадра её бы просто не заметили во время съёмки.
 */
.shothint{
  position:absolute;z-index:4;left:8px;top:8px;right:auto;
  display:inline-flex;align-items:center;gap:7px;max-width:min(78%,340px);
  background:rgba(15,23,42,.86);border:1px solid var(--line);
  border-radius:10px;padding:7px 10px;
  font-size:.78rem;line-height:1.3;backdrop-filter:blur(6px);
}
.shothint[hidden]{display:none}
.shothint--ok{border-color:rgba(52,211,153,.5)}
.shothint--bad{border-color:rgba(248,113,113,.5)}
.shothint__mark{font-size:1rem;font-weight:900;flex:none}
.shothint--ok .shothint__mark{color:#34d399}
.shothint--bad .shothint__mark{color:#f87171}

/* ---------- приближение ---------- */
.zoom{
  position:absolute;z-index:4;left:8px;bottom:8px;
  display:flex;align-items:center;gap:6px;
  background:rgba(15,23,42,.82);border:1px solid var(--line);
  border-radius:10px;padding:5px 8px;backdrop-filter:blur(6px);
}
.zoom[hidden]{display:none}
.zoom__b{
  background:none;border:0;color:var(--txt);cursor:pointer;
  font-size:1.1rem;line-height:1;padding:2px 6px;font-weight:700;
}
.zoom__b:hover{color:var(--accent)}
.zoom__r{width:96px;accent-color:var(--accent)}
.zoom__v{font-size:.72rem;color:var(--txt-dim);font-variant-numeric:tabular-nums;min-width:32px}

@media (max-width:420px){
  .zoom__r{width:70px}
  .shothint{max-width:62%;font-size:.72rem}
}


/* ---------- кнопка съёмки ---------- */

/*
 * Затвор стоит по центру кадра внизу — там, где его держит палец в любом
 * приложении камеры. Раньше запись начиналась текстовой кнопкой под кадром, и
 * человек, наведя лицо, искал её глазами вне кадра.
 */
.shutter{
  position:absolute;z-index:5;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.shutter[hidden]{display:none}

.shutter__modes{
  display:flex;gap:2px;padding:3px;border-radius:99px;
  background:rgba(5,8,15,.6);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.shutter__mode{
  background:none;border:0;color:var(--txt-dim);cursor:pointer;
  border-radius:99px;padding:5px 14px;font-size:.76rem;font-weight:700;
}
.shutter__mode.is-on{background:rgba(255,255,255,.16);color:#fff}

.shutter__btn{
  position:relative;width:66px;height:66px;border-radius:50%;
  background:none;border:0;cursor:pointer;padding:0;
  display:grid;place-items:center;
}
.shutter__btn:active{transform:scale(.94)}
.shutter__ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 3px 12px rgba(0,0,0,.5);
}
/* Сердцевина: красный круг для видео, белый — для фото, квадрат во время записи. */
.shutter__core{
  width:48px;height:48px;border-radius:50%;
  background:#ef4444;transition:border-radius .18s,width .18s,height .18s,background .18s;
}
.shutter--photo .shutter__core{background:#fff}
.shutter--recording .shutter__core{width:26px;height:26px;border-radius:7px}

/* Пока запись идёт, переключать видео и фото нельзя: незачем и сбивает. */
.shutter--recording .shutter__modes{opacity:.4;pointer-events:none}

@media (max-width:420px){
  .shutter__btn{width:58px;height:58px}
  .shutter__core{width:42px;height:42px}
}

/* ---------- окно не должно зависеть от ширины родителя ---------- */

/*
 * Ширину считаем от экрана, а не от родителя. Если что-то на странице окажется
 * шире экрана, родительская ширина вырастет вместе с ним, и окно уедет за край —
 * ровно это и случилось на телефоне.
 */
.modal__box{width:min(420px, calc(100vw - 32px));max-width:100%}
.pdf-actions .btn{max-width:100%;overflow-wrap:anywhere}

/* Вопрос о сохранении — это короткий диалог, а не нижняя шторка.
   На телефоне он всегда привязан к ширине видимой области, даже если
   содержимое страницы временно стало шире экрана. */
#askSave{
  top:0;right:0;bottom:0;left:0;
  width:100vw;max-width:100vw;
  overflow-x:hidden;
}
@media(max-width:899px){
  #askSave{align-items:center;padding:16px}
  #askSave .modal__box{
    width:min(420px, calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    border-radius:28px;
    padding:20px 16px;
  }
  #askSave .modal__box::after{display:none}
}


/* ---------- получение видео по ссылке ---------- */

/*
 * Одна вёрстка на все устройства. Отдельной мобильной версии здесь нарочно нет:
 * разные ветки для телефона и компьютера расходятся при первой же правке, а
 * шаги получения одинаковы везде — их выполняет сервер, а не устройство.
 */

.linkform__paste{flex:0 0 auto;white-space:nowrap}

.dropurl{
  margin-top:10px;padding:14px;border-radius:14px;text-align:center;
  border:1.5px dashed var(--line);color:var(--txt-dim);font-size:.86rem;
  transition:border-color .15s,background .15s;
}
.dropurl[hidden]{display:none}
.dropurl.is-over{border-color:var(--acc);background:rgba(255,255,255,.05);color:var(--txt)}

.import__steps{list-style:none;margin:14px 0 12px;padding:0;display:grid;gap:2px}

.import__step{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;color:var(--txt-dim);font-size:.9rem;
}
/* Пройденный шаг гасим, текущий выделяем: взгляд должен цепляться за одну строку. */
.import__step.is-done{color:var(--txt)}
.import__step.is-now{background:rgba(255,255,255,.06);color:var(--txt);font-weight:600}
.import__step.is-fail{color:#fca5a5}
.import__ico{font-size:1.05rem;line-height:1;filter:grayscale(1);opacity:.55}
.import__step.is-done .import__ico,
.import__step.is-now .import__ico{filter:none;opacity:1}
.import__name{min-width:0;overflow-wrap:anywhere}
.import__state{font-variant-numeric:tabular-nums;font-size:.84rem;opacity:.9}

.import__barbox{
  height:8px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.10);
}
.import__bar{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
  transition:width .35s ease;
}
.import__note{margin-top:10px;font-size:.84rem;min-height:1.2em}

.resume{border-color:rgba(251,191,36,.45)}

/* Палец должен попадать по кнопке без прицеливания. */
@media (pointer:coarse){
  .import__step{padding:11px 10px}
  #btnImportCancel,#btnImportResume,#btnImportForget,#btnLinkPaste{min-height:44px}
}


/* ---------- служебная комната ---------- */

/*
 * Красный — цвет служебной комнаты.
 *
 * Не украшение: оператор должен видеть, что попал в другой раздел, ещё до того
 * как прочтёт заголовок. Взят приглушённый оттенок, а не сигнальный: на тёмном
 * фоне чистый красный режет глаза за смену работы, а комнату открывают на весь
 * рабочий день.
 */
.sec{--room:#e0525f}

.sec__top{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:6px;
}
.sec__mode{margin:2px 0 0;color:var(--room);font-weight:700;font-size:.92rem}

.sec__offline{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:99px;padding:7px 14px;font-size:.8rem;font-weight:700;
  background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.45);color:#6ee7b7;
}
.sec__offline[hidden]{display:none}

.sec__case{
  margin:0 0 12px;padding:9px 14px;border-radius:12px;font-size:.86rem;
  background:rgba(224,82,95,.11);border:1px solid rgba(224,82,95,.35);
}
.sec__case[hidden]{display:none}

.sec__legal{
  margin-bottom:16px;padding:14px 16px;border-radius:14px;
  background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.42);
}
.sec__legal strong{display:block;margin-bottom:5px;font-size:.94rem}
.sec__legal p{margin:0;font-size:.83rem;line-height:1.55;color:var(--txt-dim)}

.sec__player{margin:12px 0;border-radius:14px;overflow:hidden;background:#000}
.sec__player video{display:block;width:100%;max-height:56vh;background:#000}

/* Кнопки меток: крупные, в одну колонку на телефоне — по ним бьют пальцем
   в момент допроса, а не выцеливают мышью. */
.sec__marks{display:grid;gap:8px;grid-template-columns:1fr;margin:12px 0}
@media (min-width:560px){.sec__marks{grid-template-columns:1fr 1fr}}

.sec__mark{
  min-height:48px;padding:12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(224,82,95,.11);border:1px solid rgba(224,82,95,.38);
  color:var(--txt);font-weight:600;font-size:.9rem;text-align:left;
  transition:background .15s,border-color .15s;
}
.sec__mark:hover{background:rgba(224,82,95,.19)}
.sec__mark:active{transform:scale(.99)}
.sec__mark--neutral{background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.3)}

.sec__own{display:grid;gap:6px;margin:10px 0 4px;font-size:.84rem;color:var(--txt-dim)}

/*
 * min-width:0 обязателен. Элемент сетки по умолчанию не сжимается ниже своего
 * содержимого, и на узком экране поле ввода вместе с кнопкой вылезали за край:
 * страница получала горизонтальную прокрутку из-за одной строки.
 */
.sec__ownrow{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.sec__ownrow .btn{flex:0 0 auto}
.sec__ownrow input{
  flex:1;min-width:0;min-height:44px;padding:10px 12px;border-radius:12px;
  background:rgba(5,8,15,.5);border:1px solid var(--line);color:var(--txt);
}

.sec__list{display:grid;gap:10px;margin-top:14px}

.sec__item{
  padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.sec__item h4{margin:0 0 3px;font-size:.93rem}
.sec__item .sec__t{color:var(--room);font-variant-numeric:tabular-nums;font-weight:700}
.sec__item .sec__weak{
  margin-top:7px;font-size:.78rem;color:#fcd34d;
}
.sec__au{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
}
.sec__aupill{
  border-radius:99px;padding:4px 10px;font-size:.75rem;
  background:rgba(224,82,95,.13);border:1px solid rgba(224,82,95,.3);
  font-variant-numeric:tabular-nums;
}
.sec__aupill--up{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35)}
.sec__aupill--down{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.32)}

.sec__note{
  width:100%;margin-top:9px;min-height:44px;padding:10px 12px;border-radius:11px;
  background:rgba(5,8,15,.5);border:1px solid var(--line);color:var(--txt);
  font-family:inherit;font-size:.86rem;resize:vertical;
}

.sec__del{
  background:none;border:0;color:var(--txt-dim);cursor:pointer;
  font-size:.78rem;text-decoration:underline;padding:6px 0 0;
}

/* ---------- уровень искренности ---------- */

/*
 * Карточка стоит сразу под заключением нарочно. Это первое, что ищет глазами
 * человек, открывший отчёт, и прятать её ниже графиков значит заставлять
 * листать до самого нужного.
 */
.sinc__row{display:flex;align-items:center;gap:12px;margin-top:4px}
.sinc__bar{
  flex:1;min-width:0;height:12px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.10);
}
.sinc__bar i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.sinc__val{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.sinc__word{margin:6px 0 0;font-size:.92rem}

/* Две другие уверенности рядом с первой: без них процент читается как точность
   измерения, которой здесь нет. */
.sinc__conf{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;
  font-size:.82rem;color:var(--txt-dim);
}
.sinc__conf b{color:var(--txt);font-variant-numeric:tabular-nums}

.sinc__smile{
  margin-top:14px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
}
.sinc__smileHead{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sinc__smileName{font-weight:700}
.sinc__smileNote{margin:6px 0 0;font-size:.84rem;line-height:1.5;color:var(--txt-dim)}

.sinc__code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  border-radius:6px;padding:2px 7px;
  background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.36);color:#7dd3fc;
}
.sinc__code--big{font-size:.86rem;padding:3px 9px}

.sinc__reasons{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.sinc__reason{
  font-size:.84rem;color:var(--txt-dim);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.sinc__legal{
  margin:14px 0 0;font-size:.76rem;line-height:1.5;color:var(--txt-dim);
  border-top:1px solid var(--line);padding-top:10px;
}

/* ---------- руки и ноги ---------- */

.body__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.body__item{
  padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-left-width:3px;
}
/* Цвет по зоне: руки, ноги и корпус различаются с одного взгляда. */
.body__item--руки{border-left-color:#fbbf24}
.body__item--ноги{border-left-color:#34d399}
.body__item--корпус{border-left-color:#94a3b8}

.body__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.body__name{font-weight:600;font-size:.93rem}
.body__zone{font-size:.74rem;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.04em}
.body__count{
  margin-left:auto;font-size:.8rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--txt-dim);
}
.body__note{margin:5px 0 0;font-size:.82rem;line-height:1.5;color:var(--txt-dim)}

/* ---------- что означает каждое движение ---------- */

.mean__sub{
  margin:18px 0 8px;font-size:.86rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--txt-dim);
}
.mean__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mean__item{
  padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.mean__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.mean__name{font-weight:600;font-size:.94rem}
.mean__code,.mean__count,.mean__val{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.75rem;font-weight:700;border-radius:6px;padding:2px 7px;
}
.mean__code{background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.36);color:#7dd3fc}
.mean__count,.mean__val{background:rgba(255,255,255,.07);color:var(--txt-dim);margin-left:auto}
.mean__muscle{margin:4px 0 0;font-size:.76rem;font-style:italic;color:var(--txt-dim)}

.mean__what{margin:8px 0 0;font-size:.86rem;line-height:1.55}
.mean__link{margin:6px 0 0;font-size:.84rem;line-height:1.55;color:var(--txt-dim)}
.mean__link b{color:#7dd3fc;font-weight:700}

/*
 * «Чего это не значит» выделено рамкой нарочно. Именно эту строку пропускают
 * первой, и именно она удерживает от того, чтобы прочитать наблюдение как вывод.
 */
.mean__no{
  margin:8px 0 0;padding:8px 11px;border-radius:9px;
  font-size:.84rem;line-height:1.55;
  background:rgba(251,113,133,.08);border:1px solid rgba(251,113,133,.3);
}
.mean__no b{color:#fda4af;font-weight:700}

/* ---------- просмотр записи с разметкой ---------- */

.player[hidden]{display:none}
.player__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px;
}
.player__head h3{margin:0}

/* Холст лежит ровно поверх видео и не перехватывает нажатия: управление
   воспроизведением должно оставаться доступным. */
.player__stage{position:relative;border-radius:14px;overflow:hidden;background:#000}
.player__stage video{display:block;width:100%;max-height:62vh;background:#000}
.player__layer{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;
}

.player__now{
  margin:10px 0 4px;min-height:1.3em;
  font-size:.88rem;font-weight:600;color:var(--txt);
}

/* ---------- состояния сверх базовых ---------- */

.st2__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.st2__item{
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-left-width:3px;
}
.st2__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.st2__name{font-weight:600;font-size:.94rem}
/* Надёжность стоит рядом с названием нарочно: без неё «гордость 40 %»
   читается так же уверенно, как «сосредоточенность 40 %», а это не так. */
.st2__rel{font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.st2__val{
  margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.86rem;color:var(--txt-dim);
}
.st2__base{margin:7px 0 0;font-size:.83rem;line-height:1.55;color:var(--txt-dim)}


/*
 * Кнопка подписок в боковой панели.
 *
 * Отодвинута вниз: `margin-top:auto` прижимает её к низу колонки, отделяя от
 * разделов приложения. Красный здесь не тревога, а метка «это про деньги» —
 * единственный красный элемент в панели, и потому заметный.
 */
.dock__i--pay {
  margin-top: auto;
  color: #fca5a5;
  border-top: 1px solid rgba(248, 113, 113, .25);
  text-decoration: none;
}
.dock__i--pay svg { fill: #f87171; }
.dock__i--pay:hover,
.dock__i--pay:focus-visible {
  background: rgba(248, 113, 113, .14);
  color: #fecaca;
}

/* На узком экране панель лежит горизонтально — прижимать к низу нечего. */
@media (max-width: 860px) {
  .dock__i--pay { margin-top: 0; border-top: 0; }
}


/* ═══════════════════ составление портрета ═══════════════════ */

.pf__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.pf__step {
  padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(148, 163, 184, .3); background: rgba(15, 23, 36, .6);
  color: #9db0c6; cursor: pointer; transition: .15s;
}
.pf__step:hover { border-color: rgba(56, 189, 248, .5); color: #e8eef7; }
.pf__step.is-on { border-color: #38bdf8; background: rgba(56, 189, 248, .16); color: #fff; }

.pf__hint { font-size: 14px; line-height: 1.6; color: #a9bacd; max-width: 66ch; }
.pf__gen { font-size: 13px; color: #7d8ea3; margin: 6px 0 12px; }
.pf__note {
  margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: #7d8ea3;
  max-width: 70ch; border-left: 2px solid rgba(148, 163, 184, .25); padding-left: 12px;
}

/* Сетка лиц. Девять — столько, сколько глаз охватывает разом: при большем
   числе свидетель начинает сравнивать попарно, и отбор замедляется. */
.pf__grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.pf__cell {
  padding: 0; border: 2px solid transparent; border-radius: 12px;
  background: #0f1724; cursor: pointer; overflow: hidden; line-height: 0;
  transition: border-color .15s, transform .15s;
}
.pf__cell:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, .45); }
.pf__cell.is-on { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .2); }
.pf__cell canvas { width: 100%; height: auto; display: block; }

.pf__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.pf__work { display: grid; gap: 18px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
@media (max-width: 720px) { .pf__work { grid-template-columns: 1fr; } }

.pf__preview canvas {
  width: 100%; height: auto; max-width: 320px;
  border-radius: 14px; border: 1px solid rgba(148, 163, 184, .25);
}

.pf__hrow {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.pf__hname { flex: 1; font-size: 14px; color: #cbd6e4; }
.pf__hbtn {
  width: 38px; height: 38px; border-radius: 9px; font-size: 18px; font-weight: 700;
  border: 1px solid rgba(148, 163, 184, .3); background: rgba(15, 23, 36, .7);
  color: #e8eef7; cursor: pointer;
}
.pf__hbtn:hover { border-color: #38bdf8; background: rgba(56, 189, 248, .14); }

/* Ползунков много — колонка с прокруткой, иначе страница растягивается
   на три экрана и портрет уезжает из виду. */
.pf__sliders { max-height: 420px; overflow-y: auto; padding-right: 6px; }
.pf__slider { display: block; margin-bottom: 10px; font-size: 13px; color: #a9bacd; }
.pf__slider span { display: block; margin-bottom: 3px; }
.pf__slider input { width: 100%; }


/* Кнопка портрета в шапке. Отличается от кнопки комнаты цветом: это разные
   места, и путать их нельзя. */
.room-key--pf {
  border-color: rgba(248, 113, 113, .5);
  background: rgba(248, 113, 113, .12);
  color: #fecaca;
}
.room-key--pf:hover { background: rgba(248, 113, 113, .2); }

/* Clear controls and legible text over the decorative backgrounds. */
.home-start { text-align: center; margin: 1rem 0 2rem; }
.tile__ico img { object-fit: cover; border-radius: 12px; }
.lang, .topbar__back { min-width: 44px; min-height: 44px; }
.dock { background: #172840; }
.dock__i { color: #d4e0ef; }
.dock__i.is-on { color: #7dd3fc; }
.muted, .lesson__hint, .lsn__m, .cat__head > .muted { color: #d0dced; }
.lsn { white-space: normal; overflow-wrap: anywhere; min-height: 52px; }
button:focus-visible, a:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 3px; }
@media (max-width: 420px) {
  .lesson__head { flex-wrap: wrap; }
  .lesson canvas { max-width: 100%; height: auto; }
  .cat__head { flex-wrap: wrap; }
  #app { padding-bottom: 150px; }
  .dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); left: 8px; right: 8px; width: auto; overflow: visible; }
  .dock__i { min-width: 0; min-height: 44px; width: auto; }
  .helper { bottom: 130px; }
  .helper-bubble { bottom: 194px; }
}
@media (prefers-reduced-motion: reduce) {
  .mona-logo__lens, .mona-logo__zoom { animation: none; }
}

/* ---------- профиль в шапке ---------- */

/*
 * Кнопка входа стоит в правом верхнем углу — там, где её ищут по привычке,
 * выработанной всеми остальными сайтами. До неё в анализаторе входа не было
 * вовсе: попасть в учётную запись можно было только вернувшись на сайт.
 */
.profile{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  color:var(--txt);cursor:pointer;padding:0;
}
.profile:hover{border-color:var(--accent)}
.profile__icon{width:19px;height:19px;fill:currentColor}
.profile__photo{width:28px;height:28px;border-radius:999px;object-fit:cover}
/* Когда есть снимок из учётной записи, значок под ним не нужен. */
.profile:has(.profile__photo:not([hidden])) .profile__icon{display:none}

.profile-menu{
  position:absolute;top:56px;right:12px;z-index:60;
  min-width:220px;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(2,8,20,.55);
}
.profile-menu[hidden]{display:none}
.profile-menu__who{
  margin:0;padding:8px 10px 10px;border-bottom:1px solid var(--line);
  font-size:.78rem;color:var(--dim);word-break:break-all;
}
.profile-menu__item{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:8px;
  color:var(--txt);text-decoration:none;font-size:.86rem;font-weight:600;
}
.profile-menu__item:hover{background:rgba(255,255,255,.07)}
.profile-menu__item[hidden]{display:none}
.profile-menu__item--out{color:#f87171}

/* ---------- кому это нужно ---------- */

/*
 * Двенадцать пунктов, и в каждом два разных по весу куска: кто и зачем.
 * Без разделения они читаются как одна длинная строка, и список перестают
 * просматривать глазами — а его именно просматривают, ища себя.
 */
.who-list{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;gap:12px;
}
.who-list li{
  position:relative;padding-left:18px;
  line-height:1.55;
}
.who-list li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:999px;background:var(--accent);
}
.who-list strong{display:block;font-weight:700;color:var(--txt)}
.who-list span{color:var(--dim)}

@media (min-width:860px){
  /* На широком экране двенадцать пунктов в столбик — это простыня. */
  .who-list{grid-template-columns:1fr 1fr;gap:14px 28px}
}

/* ---------- слоган над анимацией ---------- */

/*
 * Первая строка, которую читает пришедший по ссылке, — и часто единственная.
 * Поэтому она крупнее подзаголовка и стоит до картинки, а не под ней.
 *
 * Ширина ограничена: длинная строка через весь широкий экран читается плохо,
 * глаз теряет начало следующей. Сорок с небольшим знаков в строке — предел,
 * после которого текст перестают читать и начинают просматривать.
 */
.hero__slogan{
  max-width:34ch;
  margin:0 auto 18px;
  font-size:1.15rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--txt);
  text-wrap:balance;
}

@media (min-width:700px){
  .hero__slogan{max-width:44ch;font-size:1.35rem;margin-bottom:22px}
}

/* ---------- ссылки в подвале ---------- */

/*
 * Три ссылки на остальные страницы сайта. Приглушены нарочно: они нужны
 * поиску и тем немногим, кто дочитал до низа, а не соперничают с кнопками
 * самого приложения.
 */
.foot__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  margin-top:10px;
}
.foot__links a{
  color:var(--txt-dim);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
.foot__links a:hover{color:var(--txt);border-bottom-color:var(--accent)}

/* ── голос: ключевые моменты ── */
.tbl--voice td{vertical-align:top;font-size:.84rem}
.tbl--voice td:last-child,.tbl--voice th:last-child{text-align:left}
/* На телефоне шесть колонок не читаются: каждый момент — отдельная карточка
   с подписями полей слева. */
@media (max-width:640px){
  .tbl--voice thead{display:none}
  .tbl--voice,.tbl--voice tbody,.tbl--voice tr,.tbl--voice td{display:block;width:100%}
  .tbl--voice tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .tbl--voice td{border:0;padding:3px 0}
  .tbl--voice td::before{content:attr(data-label);display:block;color:var(--txt-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
}

/* ── экран «Анализ по голосу» ── */
.vmodes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vmode{padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit;font:inherit;font-weight:600;cursor:pointer}
.vmode.is-on{border-color:var(--accent,#38bdf8);background:rgba(56,189,248,.14)}
.vlive__time{display:flex;align-items:center;gap:8px;font-size:1.4rem;font-variant-numeric:tabular-nums;margin:6px 0 10px}
.vlive__dot{width:12px;height:12px;border-radius:50%;background:#ef4444;animation:vlive 1s ease-in-out infinite}
@keyframes vlive{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.vlive__dot{animation:none}}
@media (max-width:480px){.vmode{font-size:.82rem;padding:10px 4px}}

/* посекундное описание голоса в заключении — плотным списком */
.verdict__sec{margin:2px 0;padding-left:10px;border-left:2px solid rgba(56,189,248,.35);font-size:.9rem;font-variant-numeric:tabular-nums}

/* ═══════════ объекты разбора ═══════════
   Полоска появляется, когда в кадре не один человек. Кнопка — это выбор, о
   ком говорят панели ниже: заключение всегда об одном, и без явного
   указателя читатель приписал бы его тому, кого видит первым. */
.objects{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.objects__label{font-size:.82rem;color:var(--txt-dim);white-space:nowrap}
.objects__row{display:flex;gap:8px;flex-wrap:wrap;min-width:0}

.obj{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--txt);
  font:600 .82rem/1 inherit;cursor:pointer;transition:border-color .15s,background .15s}
.obj:hover{border-color:#2dd4bf}
.obj[aria-selected="true"]{border-color:#2dd4bf;background:rgba(45,212,191,.14);color:#99f6e4}

/* Точка того же цвета, что и рамка поверх съёмки: по ней кнопка и лицо
   связываются взглядом, без чтения номера. */
.obj__dot{width:8px;height:8px;border-radius:50%;background:#2dd4bf;flex:none}
.obj--main .obj__dot{background:var(--accent)}
.obj__note{font-weight:500;color:var(--txt-dim)}
.obj[disabled]{opacity:.55;cursor:not-allowed}

/* ═══════════ полоска обновления ═══════════
   Приложение работает офлайн и держит свою копию. Без этой полоски человек
   месяцами видит старую версию и уверен, что обещанного не сделали. */
.update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:9999;display:flex;align-items:center;gap:12px;max-width:min(92vw,520px);
  padding:10px 12px 10px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--card-2);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.update__txt{font-size:.88rem;line-height:1.35;flex:1;min-width:0}
.update__go{white-space:nowrap;padding:8px 14px}
.update__no{background:none;border:0;color:var(--txt-dim);font-size:1.25rem;line-height:1;
  cursor:pointer;padding:2px 6px}
.update__no:hover{color:var(--txt)}