/* Layout: a Telegram Mini App inside a phone: Telegram header bar, scrolling page, native MainButton pinned at the bottom. Same night + Liquid Glass world as the app. Single deliberate dark look. */
:root{
  color-scheme:dark;
  --bg:#070C1C; --text:#F3F5FC; --mute:rgba(235,240,255,.62); --dim:rgba(235,240,255,.38);
  --ember:#FF7A2E; --ember2:#FF9A4D; --ok:#5BD69B; --warn:#FFC14D;
  --glass:linear-gradient(140deg,rgba(255,255,255,.15),rgba(255,255,255,.05) 45%,rgba(255,255,255,.08));
  --edge:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(255,255,255,.06);
  --drop:0 12px 32px rgba(0,0,0,.32);
  --f-logo:"Unbounded","Onest",system-ui,sans-serif; --f-cyber:"Tektur","Onest",system-ui,sans-serif; --f-ui:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1); --spring:cubic-bezier(.34,1.56,.64,1); --drawer:cubic-bezier(.32,.72,0,1);
}
html,body{height:100%}
body{margin:0;background:#03060F;color:var(--text);font-family:var(--f-ui);-webkit-font-smoothing:antialiased;overflow:hidden}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:14px}

.stage{height:100%;display:flex;align-items:center;justify-content:center;gap:44px;padding-inline:16px}
.side{max-width:290px;color:var(--mute);font-size:15px;line-height:1.5}
.side h1{font-family:var(--f-logo);color:var(--text);font-size:24px;margin:0 0 10px}
.side .seg{margin-top:16px}
.phone{position:relative;width:390px;height:min(844px,100%);border-radius:48px;overflow:hidden;background:#000;box-shadow:0 40px 120px #000c,0 0 0 1px #ffffff14;display:flex;flex-direction:column}
@media (max-width:760px){.stage{padding:0;gap:0}.side{display:none}.phone{width:100%;height:100%;border-radius:0;box-shadow:none}}

/* Telegram chrome */
.tg-bar{flex:none;height:calc(env(safe-area-inset-top,0px) + 56px);padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;display:flex;align-items:center;justify-content:space-between;background:var(--bg);position:relative;z-index:5}
.tg-btn{height:38px;min-width:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.08);font-weight:600;font-size:15px}
.tg-btn svg{width:18px;height:18px}
.tg-title{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;font-size:17px;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.tg-title small{font-size:12px;color:var(--mute);font-weight:500}

.app{flex:1;position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.amb{position:absolute;inset:-20%;z-index:-1;pointer-events:none;filter:blur(40px)}
.amb i{position:absolute;border-radius:50%}
.amb .a1{left:0;top:-5%;width:65%;height:40%;background:#2B3FA8;opacity:.5}
.amb .a2{right:-5%;top:30%;width:55%;height:40%;background:#6A2BA8;opacity:.28}
.amb .a3{left:20%;top:6%;width:60%;height:30%;background:#FF6A1F;opacity:.22}
.view{position:absolute;inset:0;overflow-y:auto;padding:12px 16px 104px;transition:opacity .22s ease,transform .3s var(--ease-out)}
.view[hidden]{display:block!important;opacity:0;pointer-events:none;transform:translateX(24px)}
.view.back[hidden]{transform:translateX(-24px)}

.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--edge),var(--drop);border:1px solid rgba(255,255,255,.12);border-radius:24px}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.2),transparent 55%)}
.glass>*{position:relative}
h2{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:8px 4px 6px;text-wrap:balance}
.lead{color:var(--mute);font-size:15px;line-height:1.45;margin:0 4px 16px}
.label{color:var(--dim);font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;margin:22px 8px 8px}

/* home hero */
.hero{padding:20px;text-align:center}
.flame-wrap{width:84px;height:84px;margin:0 auto;position:relative}
.flame-wrap .glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,60,.5),transparent 65%);transition:opacity .6s ease}
.flame{position:absolute;inset:0;transition:filter .6s ease,opacity .6s ease,transform .6s var(--spring)}
.plan-name{font-size:21px;font-weight:800;margin-top:6px}
.days{font-family:var(--f-mono);font-size:44px;font-weight:700;letter-spacing:-1px;margin-top:4px;font-variant-numeric:tabular-nums}
.days small{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--mute);letter-spacing:0;margin-left:6px}
.till{color:var(--mute);font-size:14px;margin-top:2px}
.meter{height:8px;border-radius:9px;background:rgba(255,255,255,.1);margin:16px 6px 2px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#FF5A1F,#FFB547);transition:width .8s var(--ease-out)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tile{padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:92px;transition:transform .16s ease-out}
.tile:active{transform:scale(.97)}
.tile .ic{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.tile .ic svg{width:16px;height:16px}
.tile b{font-size:15.5px}.tile small{display:block;color:var(--mute);font-size:12.5px;font-weight:500;margin-top:2px}
.status-row{display:flex;align-items:center;gap:10px;padding:14px 16px;margin-top:12px;font-size:14.5px;font-weight:600}
.dotok{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);flex:none}

/* onboarding */
.onb{text-align:center;padding-top:20px}
.onb .flame-wrap{width:170px;height:170px;margin:10px auto 6px}
.onb h2{font-size:30px;margin-top:10px}
/* Главная: две кнопки — VPN и Чат, ниже общая информация. «VPN» — фирменным огненным стилем,
   «Чат» — киберпанк: Tektur, неоновое голубое свечение */
.onb h2.brand{font-family:var(--f-logo);font-size:34px;margin-bottom:4px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 18px}
.duo-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 10px 16px;border-radius:20px;border:1px solid rgba(255,154,77,.55);background:linear-gradient(160deg,rgba(255,122,46,.22),rgba(255,122,46,.05));color:var(--text);font:inherit;cursor:pointer;box-shadow:0 0 0 1px rgba(255,154,77,.12) inset,0 0 22px rgba(255,122,46,.18);transition:transform .15s ease,box-shadow .2s ease}
.duo-btn.chat{border-color:rgba(120,190,255,.55);background:linear-gradient(160deg,rgba(90,150,255,.22),rgba(90,150,255,.05));box-shadow:0 0 0 1px rgba(120,190,255,.12) inset,0 0 22px rgba(90,150,255,.18)}
.duo-btn:active{transform:scale(.97)}
.duo-btn b{font-size:22px;letter-spacing:1px;text-transform:uppercase}
.duo-btn.vpn b{font-family:var(--f-logo);color:#FFB070;text-shadow:0 0 14px rgba(255,122,46,.6)}
.duo-btn.chat b{font-family:var(--f-cyber);font-weight:800;letter-spacing:3px;color:#9FE6FF;text-shadow:0 0 6px rgba(80,200,255,.9),0 0 18px rgba(80,140,255,.6),2px 0 0 rgba(255,60,200,.45),-2px 0 0 rgba(60,255,240,.35)}
.duo-btn small{color:var(--mute);font-size:12.5px;font-weight:500}
.duo-ic{font-size:28px;line-height:1}
.info{text-align:left;padding:14px 16px;margin:0 0 12px;display:flex;flex-direction:column;gap:12px}
.info h3{margin:0;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.info h3.vpn{font-family:var(--f-logo);color:#FFB070}
.info h3.chat{font-family:var(--f-cyber);color:#9FE6FF;letter-spacing:3px;text-shadow:0 0 8px rgba(80,200,255,.6)}
.info .perk{padding:0}
.multi h3{font-family:var(--f-logo);color:var(--text);letter-spacing:1px}
.tier{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.tier b{font-size:15px}.tier small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.tier span{font-family:var(--f-mono);font-weight:700;font-size:16px;white-space:nowrap}
.tier.fam{border:1px solid rgba(120,190,255,.35)}
.tier.hot{border:1px solid rgba(255,154,77,.55);background:linear-gradient(160deg,rgba(255,122,46,.18),rgba(255,122,46,.04))}
.tier .cy,.multi .cy{font-style:normal;font-family:var(--f-cyber);color:#9FE6FF;letter-spacing:1px;text-shadow:0 0 6px rgba(80,200,255,.7)}
.per{color:var(--dim, var(--mute));font-size:12px;text-align:right}
.spaces{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.space{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;background:rgba(90,150,255,.08);border:1px solid rgba(120,190,255,.3)}
.space.own{background:rgba(255,122,46,.08);border-color:rgba(255,154,77,.35)}
.space b{font-size:14px}.space small{color:var(--mute);font-size:12px;line-height:1.35}
.chat-title{font-family:var(--f-cyber);font-size:34px;letter-spacing:4px;text-transform:uppercase;color:#9FE6FF;text-shadow:0 0 8px rgba(80,200,255,.9),0 0 22px rgba(80,140,255,.6),2px 0 0 rgba(255,60,200,.45),-2px 0 0 rgba(60,255,240,.35)}
.own-room{border-color:rgba(255,154,77,.35)}
.own-room h3{color:#FFB070}
.promo-row{display:flex;gap:8px}
.promo input{width:100%;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);color:var(--text);padding:12px;font:14px var(--f-ui);outline-color:var(--ember)}
.promo .coupon-error{margin:0}
.subs{margin-top:12px;gap:8px}
.sub-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.sub-row b{font-size:15px}.sub-row b.cy{font-family:var(--f-cyber);color:#9FE6FF;letter-spacing:2px;text-shadow:0 0 6px rgba(80,200,255,.7)}
.sub-row b.vp{font-family:var(--f-logo);color:#FFB070}
.sub-row span{font-size:13.5px;color:var(--text);text-align:right}.sub-row.off span{color:var(--mute)}
.sub-promo{font-size:13px;color:var(--mute)}.sub-promo b{font-family:var(--f-mono);color:var(--text)}
.pitch{margin:0;color:var(--text);font-size:14.5px;line-height:1.45;font-weight:600}
.note{color:var(--mute);font-size:13px;margin:6px 4px 18px}
.perks{display:flex;flex-direction:column;gap:10px;margin:18px 0 0;text-align:left}
.perk{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;font-size:15px;font-weight:600}
.perk span{font-size:16px;line-height:1.2}
.perk small{display:block;color:var(--mute);font-weight:500;font-size:13px;margin-top:3px}

/* lists, chips, cards */
.list{padding:4px 14px}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:56px;width:100%;text-align:left}
.row+.row{border-top:1px solid rgba(255,255,255,.09)}
.row .tx{flex:1;min-width:0;font-weight:700;font-size:15.5px}
.row .tx small{display:block;color:var(--mute);font-weight:500;font-size:12.5px;margin-top:2px}
.row .act{font-size:13.5px;font-weight:700;color:var(--ember2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 14px;border-radius:999px;font-weight:700;font-size:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transition:background .2s ease,transform .16s ease-out}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:linear-gradient(140deg,rgba(255,150,80,.6),rgba(255,106,31,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 14px rgba(255,106,31,.3)}
.pfs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf{height:84px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-weight:700;font-size:13.5px;line-height:1.1;
  background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.08);transition:background .2s ease,transform .16s ease-out}
.pf svg{width:22px;height:22px}
.pf small{font-size:11px;color:var(--mute);font-weight:600}
.pf:active{transform:scale(.96)}
.pf[aria-checked="true"]{background:linear-gradient(140deg,rgba(255,150,80,.55),rgba(255,106,31,.4));border-color:rgba(255,160,90,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(255,106,31,.3)}
.pf[aria-checked="true"] small{color:rgba(255,240,230,.85)}
.step{display:flex;flex-direction:column;gap:10px;padding:16px;margin-top:10px}
.step .sh{display:flex;align-items:center;gap:12px}
.btn2.wide{width:100%;height:48px}
.step .n{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.step .n.done{background:var(--ember);color:#1A0B04}
.step b{font-size:16px}.step p{margin:0;color:var(--mute);font-size:14px;line-height:1.45}
.btn2{height:44px;padding:0 16px;border-radius:14px;font-weight:700;font-size:14.5px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s ease-out}
.btn2:active{transform:scale(.97)}
.btn2.hot{background:linear-gradient(140deg,#FF9A4D,#FF6A1F);color:#1A0B04}
.note{font-size:12px;color:var(--dim);margin-top:6px}

.plans{display:flex;flex-direction:column;gap:10px}
.plan{display:flex;align-items:center;gap:14px;padding:16px;text-align:left;width:100%;transition:transform .16s ease-out}
.plan:active{transform:scale(.98)}
.plan .radio{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
.plan[aria-checked="true"] .radio{border-color:var(--ember)}
.plan[aria-checked="true"] .radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--ember)}
.plan[aria-checked="true"]{box-shadow:var(--edge),var(--drop),0 0 0 1.5px rgba(255,122,46,.7)}
.plan .tx{flex:1}.plan b{font-size:16.5px}.plan small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.plan .price{font-family:var(--f-mono);font-weight:700;font-size:18px;text-align:right}
.plan .price small{font-family:var(--f-ui);font-size:12px}
.seg{display:flex;padding:4px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);position:relative}
.seg button{flex:1;height:40px;border-radius:12px;font-weight:700;font-size:14px;position:relative;z-index:1;color:var(--mute);transition:color .2s}
.seg button[aria-checked="true"]{color:var(--text)}
.seg button em{font-style:normal;font-size:11px;color:var(--ok);display:block;margin-top:-2px}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:12px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:transform .4s var(--spring)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:16px;margin-top:12px}
.total b{font-family:var(--f-mono);font-size:24px}
.ref{padding:18px;text-align:center}
.ref .big{font-family:var(--f-mono);font-size:40px;font-weight:700}
.link{display:flex;gap:8px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);font-family:var(--f-mono);font-size:13px;overflow:hidden}
.link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
details{padding:0 16px}
details+details{border-top:1px solid rgba(255,255,255,.09)}
summary{list-style:none;padding:15px 0;font-weight:700;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--dim);font-size:20px;line-height:1;transition:transform .25s var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 14px;color:var(--mute);font-size:14px;line-height:1.5}

/* Telegram native MainButton */
.main-btn{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);height:56px;border-radius:16px;z-index:8;
  background:linear-gradient(140deg,#FF9A4D,#FF6A1F);color:#1A0B04;font-weight:800;font-size:17px;box-shadow:0 10px 30px rgba(255,106,31,.35),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .16s ease-out,opacity .25s ease,translate .35s var(--ease-out)}
.main-btn:active{transform:scale(.98)}
.main-btn[hidden]{display:block!important;opacity:0;translate:0 30px;pointer-events:none}
.main-btn.loading{color:transparent}
.main-btn.loading::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:3px solid rgba(26,11,4,.3);border-top-color:#1A0B04;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* payment sheet (Telegram-style) */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;border-radius:26px 26px 0 0;padding:12px 18px calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateY(105%);transition:transform .45s var(--drawer);background:linear-gradient(180deg,#1A2244,#121935);border-top:1px solid rgba(255,255,255,.14)}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:rgba(255,255,255,.3);margin:0 auto 14px}
.sheet h3{margin:0 0 4px;font-size:19px}
.sheet .sum{color:var(--mute);margin:0 0 14px;font-size:14px}
.sheet .row{padding:12px 4px}
.sheet .pay{width:100%;margin-top:12px}
.open .scrim{opacity:1;pointer-events:auto}.open .sheet{transform:none}

.toast{position:absolute;left:50%;top:10px;transform:translate(-50%,-160%);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:700;z-index:1000;max-width:calc(100% - 32px);white-space:nowrap;transition:transform .45s var(--spring)}
.toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.view,.main-btn,.sheet,.toast,.seg .pill,.meter i,.flame{transition-duration:.01s}}

body{height:100dvh}.stage{height:100dvh}.phone{height:100dvh;max-height:100dvh}.view[hidden]{visibility:hidden}.view{padding-bottom:104px;scroll-padding-bottom:104px}.coupon-input{font-size:16px!important}.coupon-error{color:#FFC14D;margin:10px 0 0;font-size:13px}.boot-error{padding:16px;margin:12px 16px}.demo-banner{font-size:12px;text-align:center;padding:6px;background:#1A2244;flex:none}.telegram .tg-bar,.telegram .side{display:none}.telegram .stage{padding:0}.telegram .phone{width:100%;border-radius:0;box-shadow:none}.telegram .view{padding-top:max(12px,var(--tg-content-safe-area-inset-top,0px));padding-left:max(16px,var(--tg-content-safe-area-inset-left,0px));padding-right:max(16px,var(--tg-content-safe-area-inset-right,0px))}button:disabled{opacity:.5;cursor:wait}.sheet[hidden]{display:none}.toast{white-space:normal;text-align:center}input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media(max-width:360px){.plan{gap:9px;padding:14px}.plan .price{font-size:16px}.plan small{font-size:12px}}

.flame{display:flex;align-items:center;justify-content:center;font-size:72px}.onb .flame{font-size:140px}.flame svg{width:100%;height:100%}.status-row{gap:8px;font-size:12px}.status-row small{white-space:nowrap}.telegram .phone{height:var(--tg-viewport-stable-height,100dvh)}

/* строки подписки (VPN, Чат) — с промежутком, а не впритык */
#subs-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* VPN и Чат — плитками, а не вытянутыми строками (31.10) */
#subs-rows .sub-row{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:96px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.08)}
#subs-rows .sub-row b{font-size:20px}
#subs-rows .sub-row span{text-align:left;font-size:13.5px;line-height:1.35}
#subs-rows .sub-row:not(.off):has(b.vp){background:rgba(255,122,46,.1);border-color:rgba(255,154,77,.3)}
#subs-rows .sub-row:not(.off):has(b.cy){background:rgba(80,200,255,.08);border-color:rgba(120,210,255,.3)}
#subs-rows .sub-row:only-child{grid-column:span 2}
/* плиток три — последняя во всю ширину, чтобы не висела одна */
.tile[hidden]{display:none}
/* вкладка «Чат»: проблема и путь решения со статусами */
.why-chat h3{font-size:16px}
.pains-m{margin:0;padding-left:18px;color:var(--mute);font-size:13.5px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.pains-m li::marker{color:#FF7A6E}
.way{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600}
.way small{display:block;color:var(--mute);font-weight:400;font-size:12.5px;margin-top:2px}
.way .wi{flex:none;width:24px;text-align:center;font-size:16px}
/* помощь: форма обращения и тикеты */
.ticket-form .chips{display:flex;flex-wrap:wrap;gap:8px}
.ticket-form .chip[aria-pressed="true"]{color:#1A0B02}
.ticket-text{width:100%;min-height:110px;resize:vertical;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);color:var(--text);padding:12px;font:16px/1.4 var(--f-ui)}
.ticket-text:focus-visible,.ticket-input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.ticket-limit{color:#FFC14D}
.tickets{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ticket{padding:14px;display:flex;flex-direction:column;gap:10px}
.ticket.done{opacity:.7}
.ticket-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ticket-head b{font-size:15px}
.ticket-st{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(61,220,151,.15);color:#6FE7B4}
.ticket.done .ticket-st{background:rgba(255,255,255,.08);color:var(--mute)}
.ticket-msgs{display:flex;flex-direction:column;gap:6px}
.tmsg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.tmsg.in{align-self:flex-end;background:rgba(255,122,46,.16);border-bottom-right-radius:5px}
.tmsg.out{align-self:flex-start;background:rgba(255,255,255,.08);border-bottom-left-radius:5px}
.tmsg small{display:block;font-size:11.5px;font-weight:700;color:var(--ember2);margin-bottom:2px}
.ticket-more{display:flex;gap:8px}
.ticket-input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.07);color:var(--text);padding:10px 12px;font:16px var(--f-ui)}
.btn2.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
#ticket-form[hidden],.ticket-limit[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* тарифы «скоро»: видны, но не выбираются */
.plan.soon-plan{opacity:.5;cursor:not-allowed}
.plan.soon-plan:active{transform:none}
.plan .soon{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--mute);margin-left:6px;vertical-align:middle}
/* «Продлить подписку» — главная плитка: огонёк-градиент, во всю ширину */
.tiles .tile-renew{grid-column:1 / -1;min-height:auto;flex-direction:row;align-items:center;gap:12px;background:linear-gradient(140deg,rgba(255,150,80,.55),rgba(255,106,31,.4));border-color:rgba(255,170,110,.55);box-shadow:var(--edge),0 8px 22px rgba(255,106,31,.25)}
.tiles .tile-renew .ic{background:rgba(255,255,255,.2)}
.tiles .tile-renew .ic svg{stroke:#fff}
.tiles .tile-renew small{color:rgba(255,240,230,.85)}