/* 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)}

/* ---------- 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 ---------- */
.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}

/* ---------- 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{
  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:26px 1fr 44px;align-items:center;gap:8px;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%;display:block}
.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}
}

/* ---------- анимированные маски ---------- */
.masks{display:block;overflow:visible}
.masks--hero{width:min(190px,52vw);height:auto;filter:drop-shadow(0 10px 26px rgba(56,189,248,.28))}
.masks--sm{width:30px;height:auto}

.masks__face{stroke:rgba(8,16,32,.55);stroke-width:2.5;stroke-linejoin:round}
.masks__eye{fill:#0b1324}
.masks__brow,.masks__mouth{
  fill:none;stroke:#0b1324;stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
}
.masks__brow{stroke-width:4}

/* две маски дышат в противофазе */
.masks__cool{transform-origin:46px 58px;animation:maskFloatA 4.4s ease-in-out infinite}
.masks__warm{transform-origin:102px 58px;animation:maskFloatB 4.4s ease-in-out infinite}
@keyframes maskFloatA{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%    {transform:translateY(-6px) rotate(-1deg)}
}
@keyframes maskFloatB{
  0%,100%{transform:translateY(-4px) rotate(4deg)}
  50%    {transform:translateY(2px) rotate(1deg)}
}

/* скрытая эмоция проступает на ~180 мс — то самое микровыражение,
   ради которого существует приложение */
.masks__mouth--flash{opacity:0}
.masks--hero .masks__mouth--main{animation:maskHide 7.5s linear infinite}
.masks--hero .masks__mouth--flash{animation:maskFlash 7.5s linear infinite}
@keyframes maskFlash{
  0%,71.5%{opacity:0}
  72%,74%{opacity:1}
  74.5%,100%{opacity:0}
}
@keyframes maskHide{
  0%,71.5%{opacity:1}
  72%,74%{opacity:0}
  74.5%,100%{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .masks__cool,.masks__warm,
  .masks--hero .masks__mouth--main,.masks--hero .masks__mouth--flash{animation:none}
  .masks__mouth--flash{opacity:0}
}

/* ---------- признаки выражения ---------- */
.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}
  .masks--hero{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:16px 1fr 44px}
.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%}
}