/* Академия долголетия — Mini App.
   Два фирменных цвета: хвоя (бренд, прогресс) и гранат (действие). Остальное — тёплые нейтральные. */
:root{
  --paper:#f5f1e8; --surface:#fffdf8; --mist:#efeae0; --line:#e6dfd2;
  --ink:#1e211d; --ink2:#4a4d46; --muted:#7d786e;
  --pine-900:#14261c; --pine-800:#1c3427; --pine:#24432f; --pine-500:#4f7360; --sage:#a9bca9; --pine-100:#e4ebe3;
  --garnet-800:#5a1420; --garnet:#7a1f2e; --garnet-500:#a33b48; --garnet-300:#d9a1a6; --garnet-100:#f4e4e2;
  --sand:#efe6d6; --sand-ink:#6b5a3e;
  /* старые имена из прототипа → новая палитра */
  --a-bg:var(--paper); --a-card:var(--surface); --a-fg:var(--ink); --a-muted:var(--muted); --a-line:var(--line);
  --a-wine:var(--garnet); --a-wine2:var(--garnet-500); --a-rose:var(--garnet-100);
  --a-pine:var(--pine); --a-pine-soft:var(--pine-100); --a-gold:var(--garnet-300); --a-gold-soft:var(--sand);
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --ui:"Onest","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0; height:100%; overflow:hidden}
body{background:#e9e3d7; color:var(--ink); font-family:var(--ui); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--garnet-500); outline-offset:2px}
img{max-width:100%}

/* ---------- каркас ---------- */
.screen{position:fixed; inset:0; margin:0 auto; max-width:480px; background:var(--paper); display:flex; flex-direction:column; overflow:hidden; font-size:14.5px;
  height:var(--tg-viewport-stable-height,100dvh)}
.views{position:relative; flex:1; min-height:0}
.scr{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px 32px; scrollbar-width:none}
.scr::-webkit-scrollbar{display:none}
.scr.enter>*{animation:rise .6s var(--ease) both}
.scr.enter>*:nth-child(2){animation-delay:.05s} .scr.enter>*:nth-child(3){animation-delay:.1s} .scr.enter>*:nth-child(4){animation-delay:.15s}
.scr.enter>*:nth-child(5){animation-delay:.2s} .scr.enter>*:nth-child(n+6){animation-delay:.25s}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.scr.enter>*{animation:none}*{transition:none!important; animation:none!important}}
html.tg .scr>.back{display:none}
.screen.simple .scr{font-size:17px}
.screen.simple .scr h4{font-size:34px}

/* ---------- таббар ---------- */
.tabbar{flex:none; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,253,248,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); position:relative; z-index:5}
.tab{background:none; border:0; display:grid; justify-items:center; gap:3px; font-size:10.5px; font-weight:500; color:var(--muted); padding:4px 0; transition:color .2s}
.tab svg{width:22px; height:22px; stroke-width:1.6}
.tab[aria-current="true"]{color:var(--pine)}
.tab[aria-current="true"] span:last-child{font-weight:600}
.tab.ask .bub{width:50px; height:50px; border-radius:50%; background:var(--garnet); display:grid; place-items:center; color:var(--surface); margin-top:-26px; box-shadow:0 0 0 5px var(--paper), 0 10px 22px -10px rgba(90,20,32,.7)}
.tab.ask svg{width:22px; height:22px}
.tab.ask[aria-current="true"]{color:var(--garnet)}

/* ---------- типографика и базовые компоненты ---------- */
.scr h4{font-family:var(--serif); font-size:31px; font-weight:600; margin:6px 0 6px; letter-spacing:-.01em; line-height:1.05}
.scr h4 em{font-style:italic; color:var(--garnet)}
.sub{color:var(--muted); font-size:14px; margin:0 0 16px}
.card{background:var(--surface); border-radius:20px; padding:16px; border:1px solid var(--line)}
.stack{display:grid; gap:12px}
.row{display:flex; align-items:center; gap:10px}
.btn{display:block; width:100%; border:0; border-radius:14px; padding:15px; font-weight:600; background:var(--garnet); color:var(--surface); font-size:15px; letter-spacing:.01em; transition:background .2s, transform .15s}
.btn:active{transform:scale(.985); background:var(--garnet-800)}
.btn.ghost{background:transparent; color:var(--garnet); padding:10px}
.btn.soft{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.pine{background:var(--pine)}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--pine-100); color:var(--pine)}
.pill.wine{background:var(--garnet-100); color:var(--garnet)}
.pill.gold{background:var(--sand); color:var(--sand-ink)}
.small{font-size:12.5px; color:var(--muted); line-height:1.45}
.label{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.back{background:none; border:0; padding:4px 0; color:var(--muted); font-size:13px; font-weight:500; display:flex; align-items:center; gap:4px}
.back svg{width:16px; height:16px}
.avatar{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; background:var(--mist)}
.thumb{width:100%; border-radius:16px; display:block; object-fit:cover}
.tap{cursor:pointer; transition:transform .2s var(--ease), border-color .2s}
.tap:active{transform:scale(.985)}
.chev{margin-left:auto; color:var(--muted); width:16px; height:16px; flex:none}
.ico{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none}
.ico svg{width:19px; height:19px; stroke-width:1.6}
.ico.w{background:var(--garnet-100); color:var(--garnet)} .ico.p{background:var(--pine-100); color:var(--pine)} .ico.g{background:var(--sand); color:var(--sand-ink)}

/* ---------- приветствие: фото академика во весь экран ---------- */
#s-welcome{background:var(--pine-900); color:var(--surface); display:flex; flex-direction:column; padding:0 24px calc(24px + env(safe-area-inset-bottom,0px)); overflow-x:hidden}
#s-welcome .hero{position:absolute; inset:0 0 34% 0; background:url(/static/img/portrait.jpg?v=2) 50% 15%/cover no-repeat; animation:slowzoom 18s var(--ease) both}
#s-welcome .hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,38,28,.15) 0%,rgba(20,38,28,0) 35%,rgba(20,38,28,.7) 78%,var(--pine-900) 100%)}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
#s-welcome>*:not(.hero){position:relative; z-index:1}
#s-welcome .brand{margin-top:calc(18px + env(safe-area-inset-top,0px)); font-family:var(--serif); font-size:15px; letter-spacing:.32em; text-transform:uppercase; opacity:.9}
#s-welcome .spacer{flex:1; min-height:200px}
#s-welcome h4{font-family:var(--serif); font-size:44px; font-weight:500; line-height:1; letter-spacing:-.015em; margin:0}
#s-welcome h4 em{font-style:italic; color:var(--garnet-300)}
#s-welcome p{opacity:.78; margin:14px 0 0; font-size:15px; line-height:1.55}
.wstats{display:flex; gap:22px; margin:22px 0 26px; padding-top:18px; border-top:1px solid rgba(255,253,248,.18)}
.wstats span{font-size:12px; opacity:.7; line-height:1.3}
.wstats b{display:block; font-family:var(--serif); font-size:26px; font-weight:500; opacity:1}
#s-welcome .btn{background:var(--surface); color:var(--pine-900)}
#s-welcome .btn.ghost{background:transparent; color:var(--surface); opacity:.75; margin-top:4px}
.langpill{position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:18px; border:1px solid rgba(255,253,248,.35); background:rgba(20,38,28,.25); color:var(--surface); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:500; z-index:4; backdrop-filter:blur(8px)}
#s-welcome>.langpill{position:absolute}

/* ---------- чипы и контролы ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 15px; font-weight:500; font-size:13.5px; color:var(--ink); transition:all .2s}
.chip[aria-pressed="true"]{border-color:var(--pine); background:var(--pine); color:var(--surface)}
.stepper{display:flex; align-items:center; gap:14px}
.stepper button{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:19px; color:var(--ink)}
.stepper output{font-family:var(--serif); font-size:34px; font-weight:600; min-width:2.2ch; text-align:center; font-variant-numeric:lining-nums tabular-nums}
.dots{display:flex; gap:5px; margin:2px 0 14px} .dots i{flex:1; height:3px; border-radius:3px; background:var(--line)} .dots i.on{background:var(--pine)}
.timer{position:relative; width:130px; height:130px; margin:0 auto}
.timer svg{transform:rotate(-90deg)}
.timer b{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:44px; font-weight:600; font-variant-numeric:lining-nums tabular-nums}
.field{display:grid; gap:4px}
.field input{border:1px solid var(--line); border-radius:12px; padding:12px 13px; font:inherit; font-size:16px; background:var(--surface); color:var(--ink); width:100%}
.field input:focus{outline:none; border-color:var(--pine)}

/* ---------- индекс, кольца, полосы ---------- */
.ring{position:relative; display:grid; place-items:center}
.ring svg{transform:rotate(-90deg)}
.ring .v{position:absolute; text-align:center; line-height:1}
.ring .v b{display:block; font-family:var(--serif); font-size:56px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:lining-nums}
.ring .v span{font-size:11px; color:var(--muted); font-weight:500}
.ring circle+circle{transition:stroke-dashoffset 1.4s var(--ease)}
.bars{display:grid; gap:11px}
.bar{display:grid; grid-template-columns:104px 1fr 28px; gap:10px; align-items:center; font-size:13px}
.bar .t{height:5px; border-radius:5px; background:var(--mist); overflow:hidden}
.bar .t i{display:block; height:100%; border-radius:5px; background:var(--pine)}
.bar .t i.low{background:var(--garnet-500)}
.bar b{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.celebrate{text-align:center; padding-top:24px}
.celebrate .big{font-family:var(--serif); font-size:84px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--pine); font-variant-numeric:lining-nums}

/* ---------- пейволл ---------- */
.plan{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:16px; padding:14px 15px; background:var(--surface); width:100%; text-align:left; transition:border-color .2s, background .2s}
.plan[aria-checked="true"]{border-color:var(--pine); background:var(--pine-100)}
.plan .r{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--muted); flex:none}
.plan[aria-checked="true"] .r{border:6px solid var(--pine)}
.plan .p{margin-left:auto; text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.plan .p small{display:block; font-weight:400; color:var(--muted); font-size:11px}
.check{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.check li{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.check li::before{content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%; border:1px solid var(--pine); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2L11.5 5.5' fill='none' stroke='%2324432f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- главная ---------- */
.live{position:relative; overflow:hidden; background:var(--pine); color:var(--surface); border-radius:20px; padding:16px 18px; display:flex; gap:12px; align-items:center}
.live::after{content:""; position:absolute; width:220px; height:220px; right:-90px; top:-120px; border-radius:50%; border:1px solid rgba(255,253,248,.15); box-shadow:0 0 0 30px rgba(255,253,248,.04), 0 0 0 60px rgba(255,253,248,.03)}
.live strong{font-family:var(--serif); font-size:21px!important; font-weight:600}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--garnet-300); display:inline-block; animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}
.live .pill{background:var(--surface)!important; color:var(--pine)}
.task{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.task:first-of-type{border-top:0}
.task .cb{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); flex:none; display:grid; place-items:center; background:var(--surface); transition:all .3s var(--ease)}
.task.done .cb{background:var(--pine); border-color:var(--pine)}
.task.done .cb::after{content:""; width:9px; height:5px; border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
.task.done .tt{color:var(--muted)}
.task .tt{font-weight:600; font-size:14px}
.task .act,.act{margin-left:auto; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:500; font-size:12.5px; border-radius:999px; padding:6px 13px}
.act.pill.wine{background:var(--garnet); border-color:var(--garnet); color:var(--surface)}
.minis{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mini{background:var(--surface); border-radius:18px; padding:14px; border:1px solid var(--line); text-align:left; display:block}
.mini b{display:block; font-size:14px; margin-top:10px; font-weight:600}
.dark-card{background:var(--pine-900)!important; color:var(--surface); border-color:var(--pine-900)!important}
.dark-card .small,.dark-card .label{color:rgba(255,253,248,.65)}

/* ---------- чат с доктором ---------- */
.askhead{position:sticky; top:-16px; z-index:3; margin:-16px -20px 14px; padding:12px 20px; background:rgba(245,241,232,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line)}
.askhead strong{font-family:var(--serif); font-size:21px; font-weight:600}
.online{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pine-500); margin-right:6px}
.msg{max-width:88%; padding:12px 15px; border-radius:18px; font-size:14.5px; line-height:1.55; animation:rise .4s var(--ease) both}
.msg.me{margin-left:auto; background:var(--pine); color:var(--surface); border-bottom-right-radius:6px}
.msg.doc{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px}
.msg.live-ans{max-width:96%}
.cite{display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; margin:0 1px; border-radius:5px; background:var(--garnet-100); color:var(--garnet); font-size:10px; font-weight:600; vertical-align:super; line-height:1}
.caret{display:inline-block; width:2px; height:16px; margin-left:2px; vertical-align:-3px; background:var(--garnet); animation:pulse .9s infinite}
.vids{display:grid; gap:8px}
.vidcard{display:flex; gap:12px; align-items:center; width:100%; text-align:left; border:1px solid var(--line); padding:6px; border-radius:14px; background:var(--paper)}
.vthumb{position:relative; width:108px; flex:none; aspect-ratio:16/9; border-radius:10px; overflow:hidden; display:block}
.vthumb img{width:100%; height:100%; object-fit:cover; display:block}
.vthumb .tc,.vid .tc{position:absolute; left:5px; bottom:5px; background:rgba(20,38,28,.85); color:#fff; font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:5px}
.vmeta{min-width:0; display:grid; gap:2px}
.vmeta b{font-size:13px; font-weight:600; line-height:1.3}
.vmeta span{font-size:11.5px; color:var(--muted); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.vid{position:relative; margin-top:8px}
#s-ask{display:flex; flex-direction:column}
#s-ask .composer{margin-top:auto}
.composer{position:sticky; bottom:-32px; margin:14px -20px -32px; padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(245,241,232,.95); backdrop-filter:blur(10px); display:flex; gap:8px; border-top:1px solid var(--line); z-index:3}
.composer input{flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:12px 17px; font:inherit; font-size:15px; background:var(--surface); color:var(--ink)}
.composer input:focus{outline:none; border-color:var(--pine)}
.composer button{width:46px; height:46px; border-radius:50%; border:0; background:var(--garnet); color:var(--surface); display:grid; place-items:center; flex:none}
.composer svg{width:19px; height:19px}
.qchips .chip{padding:8px 13px; font-size:13px}
.typing{display:inline-flex; gap:4px; margin-right:6px} .typing i{width:5px; height:5px; border-radius:50%; background:var(--pine-500); animation:pulse 1.1s infinite} .typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}

/* ---------- тост и момент успеха ---------- */
.toast{position:absolute; left:16px; right:16px; bottom:96px; background:var(--pine-900); color:var(--surface); padding:13px 16px; border-radius:14px; font-size:13.5px; font-weight:500; z-index:20; opacity:0; transform:translateY(10px); transition:.35s var(--ease); pointer-events:none}
.toast.on{opacity:1; transform:none}
#bloom{position:absolute; inset:0; pointer-events:none; z-index:30; display:grid; place-items:center; overflow:hidden}
#bloom i{position:absolute; width:120px; height:120px; border-radius:50%; border:1px solid var(--pine-500); opacity:0; animation:bloom 1.8s var(--ease) forwards}
#bloom i:nth-child(2){animation-delay:.18s; border-color:var(--garnet-300)} #bloom i:nth-child(3){animation-delay:.36s}
@keyframes bloom{0%{opacity:.8; transform:scale(.3)}100%{opacity:0; transform:scale(6)}}

/* ---------- практика ---------- */
.player{position:relative; border-radius:20px; overflow:hidden}
.player .prog{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.35)}
.player .prog i{display:block; height:100%; width:0; background:#fff; transition:width .3s linear}
.player .big{position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:rgba(255,253,248,.95); border:0; display:grid; place-items:center; color:var(--pine)}
.ctrls{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.member{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line)}
.member:first-child{border-top:0}
.ini{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:19px; font-weight:600; color:#fff; flex:none}
.listrow{display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); background:none; border-left:0; border-right:0; border-bottom:0; width:100%; text-align:left; font-weight:500}
.listrow:first-child{border-top:0}
.switch{margin-left:auto; width:44px; height:26px; border-radius:999px; background:var(--line); position:relative; flex:none; transition:.25s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.25s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.15)}
.switch.on{background:var(--pine)} .switch.on::after{left:21px}
.elem{width:78px; height:78px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:34px; font-family:serif; flex:none}
.wave{display:flex; align-items:center; gap:3px; height:36px; flex:1}
.wave i{flex:1; background:var(--line); border-radius:2px; transition:background .2s}
.wave i.on{background:var(--pine)}

/* ---------- ромашка, луна, медитации ---------- */
.daisy{display:block; margin:0 auto; width:100%; max-width:340px}
.daisy .petal{cursor:pointer; transition:opacity .2s}
.daisy .petal ellipse{transform-box:fill-box; transform-origin:50% 100%}
.scr.enter .daisy .petal ellipse{animation:petal .9s var(--ease) both}
@keyframes petal{from{opacity:0; transform:scaleY(.15)}}
.petal.sel ellipse{stroke:var(--garnet); stroke-width:2}
.moonbig{display:flex; gap:16px; align-items:center; background:var(--pine-900); color:var(--surface); border-color:var(--pine-900)}
.moonbig strong{font-family:var(--serif); font-size:20px!important; font-weight:600}
.moonbig .small{color:rgba(255,253,248,.65)}
.moonbig .pill{background:rgba(255,253,248,.12)!important; color:var(--surface)!important}
.cal7{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal7 button{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:7px 0 8px; display:grid; justify-items:center; gap:1px; font-size:10px; color:var(--muted)}
.cal7 button b{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); line-height:1.1}
.cal7 button .gl{font-size:12px; color:var(--ink2)}
.cal7 button i{width:5px; height:5px; border-radius:50%; display:block}
.cal7 button[aria-pressed="true"]{background:var(--pine-900); border-color:var(--pine-900); color:rgba(255,253,248,.7)}
.cal7 button[aria-pressed="true"] b,.cal7 button[aria-pressed="true"] .gl{color:var(--surface)}
.rec{display:flex; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line)}
.rec:first-of-type{border-top:0}
.medhero{border-radius:22px; padding:22px; color:var(--surface); position:relative; overflow:hidden}
.medhero::after{content:""; position:absolute; width:240px; height:240px; border-radius:50%; right:-80px; top:-90px; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 28px rgba(255,255,255,.05), 0 0 0 56px rgba(255,255,255,.035)}
.medhero .playm{width:56px; height:56px; border-radius:50%; border:0; background:var(--surface); display:grid; place-items:center; color:var(--pine); flex:none}
#medTitle{font-family:var(--serif); font-size:28px!important; font-weight:600!important; line-height:1.05!important}
.medrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left}
.medrow .no{width:26px; font-size:11px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.medrow.today{background:var(--pine-100); border-radius:12px; padding-left:8px; padding-right:8px}
.medrow .st{margin-left:auto; font-size:11px; color:var(--muted); flex:none}
.mchips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.mchips .chip{padding:6px 12px; font-size:12.5px; flex:none}

/* ---------- игры ---------- */
.figure{display:block; width:100%; max-width:260px; margin:0 auto; touch-action:manipulation; cursor:crosshair}
.gdots{display:flex; gap:5px} .gdots i{width:24px; height:4px; border-radius:3px; background:var(--line)} .gdots i.ok{background:var(--pine)} .gdots i.near{background:var(--sage)} .gdots i.miss{background:var(--garnet-500)} .gdots i.cur{background:var(--ink)}
@keyframes ping{0%{r:6; opacity:1}100%{r:22; opacity:0}}
.pingc{animation:ping 1.4s ease-out infinite}
.lb{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line)} .lb:first-child{border-top:0}
.lb .pl{width:20px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.schulte{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px}
.schulte button{aspect-ratio:1; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; transition:background .2s, transform .1s}
.schulte button.hit{background:var(--pine-100); color:var(--pine); border-color:var(--pine-100)}
.schulte button.err{background:var(--garnet-100); transform:scale(.94)}
.screen.simple .schulte button{font-size:28px}
.gamecard{border-radius:22px; padding:20px; color:var(--surface); text-align:left; border:0; width:100%}
.gamecard div:nth-child(2){font-family:var(--serif); font-size:26px!important; font-weight:600!important}

/* ---------- ИИ-шеф ---------- */
.fchip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 13px; font-weight:500; font-size:13px; color:var(--ink)}
.fchip[aria-pressed="true"]{border-color:var(--pine); background:var(--pine); color:var(--surface)}
.recipe{background:var(--surface); border-radius:18px; padding:15px; border:1px solid var(--line); margin-top:4px; animation:rise .5s var(--ease) both}
.recipe strong{font-family:var(--serif); font-size:19px!important; font-weight:600}
.recipe ol{margin:8px 0 0; padding-left:18px; font-size:13.5px}

/* ---------- лента ---------- */
#s-reels{background:#0f1712; color:#fff; padding:0}
.reel{position:absolute; inset:0; overflow:hidden}
.reel img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(30px) saturate(.8) brightness(.55); transform:scale(1.3)}
.reel img.fg{position:absolute; left:0; top:17%; width:100%; aspect-ratio:16/9; object-fit:cover; animation:kb 12s ease-out both}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.reel .shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,23,18,.6) 0%,rgba(15,23,18,0) 25%,rgba(15,23,18,0) 50%,rgba(15,23,18,.92) 100%)}
.reel .cap{position:absolute; left:20px; right:80px; bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.reel .cap .watch{margin-top:14px; display:inline-flex; gap:8px; align-items:center; border:0; border-radius:999px; padding:10px 18px; background:var(--surface); color:var(--pine-900); font-weight:600; font-size:13px}
.reel .side{position:absolute; right:14px; bottom:calc(46px + env(safe-area-inset-bottom,0px)); display:grid; gap:20px; justify-items:center}
.reel .side button{background:none; border:0; color:#fff; display:grid; justify-items:center; gap:3px; font-size:11px; font-weight:500}
.reel .side svg{width:27px; height:27px; stroke-width:1.6}
.reel .side button[aria-pressed="true"] svg{fill:var(--garnet-300); stroke:var(--garnet-300)}
.rbar{position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); left:16px; right:16px; display:flex; gap:4px; z-index:2}
.rbar i{flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.25)} .rbar i.on{background:#fff}
.rtop{position:absolute; top:calc(24px + env(safe-area-inset-top,0px)); left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; z-index:2}
.flame{width:15px; height:15px; color:var(--garnet-500)}
.story{border-radius:20px; aspect-ratio:9/14; max-width:210px; margin:0 auto; padding:18px; color:var(--surface); display:flex; flex-direction:column; justify-content:space-between; background:var(--pine-900); position:relative; overflow:hidden}
.story::after{content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-120px; bottom:-110px; background:var(--garnet); opacity:.55; filter:blur(10px)}
.story>*{position:relative; z-index:1}

/* ---------- я в будущем, чек-ин ---------- */
.agechips{display:flex; gap:6px}
.agechips button{flex:1; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:8px 0; font-family:var(--serif); font-weight:600; font-size:20px; color:var(--ink)}
.agechips button[aria-pressed="true"]{background:var(--pine); border-color:var(--pine); color:var(--surface)}
.fut{display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.fut:first-child{border-top:0}
.fut .go{margin-left:auto; flex:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:500; font-size:12.5px; border-radius:999px; padding:6px 13px}
.fut.done .go{background:var(--pine-100); color:var(--pine); border-color:var(--pine-100)}
.yn{display:flex; gap:6px; margin-top:6px} .yn button{flex:1; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px; font-weight:500; font-size:13px; color:var(--ink)}
.yn button[aria-pressed="true"]{border-color:var(--pine); background:var(--pine); color:var(--surface)}
.seg{display:flex; gap:6px; margin-top:6px} .seg button{flex:1; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:9px 4px; font-weight:500; font-size:13px; color:var(--ink)}
.seg button[aria-pressed="true"]{border-color:var(--pine); background:var(--pine); color:var(--surface)}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}}
.heart{width:54px; height:54px; border-radius:50%; background:var(--garnet-100); color:var(--garnet); display:grid; place-items:center; flex:none}
.heart.on svg{animation:beat 1s infinite}
.lrow{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left}
.lrow:first-child{border-top:0}
.lrow .fl{width:34px; height:34px; border-radius:50%; background:var(--mist); display:grid; place-items:center; font-size:11px; font-weight:600; color:var(--muted); flex:none}
.lrow[aria-checked="true"] .fl{background:var(--pine); color:var(--surface)}
.prod{display:flex; gap:12px; align-items:flex-start}
.prod img{width:74px; height:74px; border-radius:14px; object-fit:cover; flex:none}
.price{font-weight:600; font-variant-numeric:tabular-nums}
.price s{color:var(--muted); font-weight:400; margin-right:6px}