/* Layout: app shell — left rail of sections, working area with a summary strip on top and a lead feed below; rail turns into a scrollable top bar on phones */
:root{
  --bg:#F1F1EF; --surface:#FFFFFF; --surface-2:#F0F0EE; --line:#E1E1DE; --line-soft:#EAEAE7;
  --fg:#141414; --muted:#5E5E5B; --faint:#94948F;
  --ink:#141414; --ink-fg:#FFFFFF;
  --accent:#C2541B; --accent-ink:#FFFFFF; --accent-soft:#FBEADF;
  --good:#2D7A48; --good-soft:#E3F2E8; --warn:#A5650F; --warn-soft:#FBF0DD; --bad:#B4362E; --bad-soft:#FBE5E3;
  --mark:#141414;
  --display:"Onest","IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:16px; --pill:999px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.55 var(--body)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}
/* rail */
.rail{background:var(--surface);border-right:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;gap:24px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:0 10px}
.brand .eye{width:46px;height:29px;color:var(--fg);flex:none}
.brand span{align-self:flex-end;margin-bottom:2px}
.brand b{font:700 23px/1 var(--display);letter-spacing:-.02em}
.brand span{font:500 10.5px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.co{padding:12px 14px;border-radius:var(--r);background:var(--surface-2)}
.co .n{font-weight:600}
.co .p{font-size:12px;color:var(--muted)}
nav{display:flex;flex-direction:column;gap:2px}
nav button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-radius:var(--pill);color:var(--muted);font-weight:500}
nav button:hover{background:var(--surface);color:var(--fg)}
nav button[aria-current="page"]{background:var(--surface-2);color:var(--fg)}
nav button:focus-visible{outline:2px solid var(--accent)}
.cnt{font:500 11px var(--mono);background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:1px 8px}
.mright{display:none;align-items:center;gap:6px}
.mcur{display:none;font-weight:500;color:var(--muted);align-items:center;gap:6px}
.more{display:none;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface-2);color:var(--fg);cursor:pointer}
.more:hover,.rail.open .more{background:var(--line)}
.rail .foot{margin-top:auto;font-size:12px;color:var(--faint);padding:0 10px}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* main */
main{padding:32px 40px 72px;min-width:0;max-width:1000px;width:100%;margin-inline:auto}
.head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
h1{font:700 26px/1.15 var(--display);letter-spacing:-.015em;margin:0;text-wrap:balance}
h2{font:600 16px/1.3 var(--body);margin:0}
.sub{color:var(--muted);margin:4px 0 0}
.demo{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--warn);border:1px solid var(--warn-soft);padding:3px 10px;border-radius:var(--pill)}
.btn{cursor:pointer;border:1px solid var(--ink);background:var(--ink);border-radius:var(--pill);padding:7px 16px;font-weight:500;display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-fg)}
.btn:hover{background:#2E2E2E;border-color:#2E2E2E}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:#A84615;border-color:#A84615}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--surface-2)}
.btn.sm{padding:5px 13px;font-size:13px}
.btn[disabled]{background:var(--surface-2);border-color:var(--line);color:var(--faint);cursor:default}
.btn.ok[aria-pressed="true"]{background:var(--good-soft);border-color:var(--good-soft);color:var(--good)}
.btn.no[aria-pressed="true"]{background:var(--bad-soft);border-color:var(--bad-soft);color:var(--bad)}
.panel{background:var(--surface);border-radius:var(--r);box-shadow:0 1px 2px rgba(20,20,20,.04)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.stat{padding:16px 18px}
.stat .l{font-size:12.5px;color:var(--muted)}
.stat .v{font:600 24px/1.25 var(--display);font-variant-numeric:tabular-nums;margin-top:4px}
.stat .h{font-size:12px;color:var(--faint)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.seg{display:inline-flex;border-radius:var(--pill);padding:3px;gap:2px;background:var(--surface)}
.seg button{all:unset;cursor:pointer;padding:5px 14px;border-radius:var(--pill);font-size:13px;color:var(--muted)}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--fg);font-weight:500}
select,input[type=text],input[type=email],input[type=password],input[type=tel]{border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:7px 14px;min-width:0}
.filters select{border-color:transparent}
textarea{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:9px 14px;min-width:0}
textarea{width:100%;resize:vertical}
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
/* lead cards */
.feed{display:flex;flex-direction:column;gap:12px}
.lead{padding:0;display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:0}
.lead .ll{padding:16px 20px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lead .lr{border-left:1px solid var(--line-soft);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lead .tgmsg{max-width:none}
.lead .bubble{flex:1}
.lead .bubble .msg{max-width:78ch}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.score.big{font:700 28px/1 var(--display)}
.score.big small{font-size:12px}
.lr .ai{flex-direction:column;gap:2px;font-size:13px;line-height:1.45;align-items:flex-start}
.lr .ai .mon{color:var(--faint)}
.wrrow{padding-left:48px;display:flex;margin-top:-4px}
.lbtns{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.btn.wide{width:100%;justify-content:center;text-align:center}
.inchat{padding-left:0!important;padding-right:0!important;background:none!important}
.fitq{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;color:var(--faint)}
.fitq>span{margin-right:4px}
.lr .stpop{left:auto;right:0}
.lead.s-rej{opacity:.5}
.lead.fresh{animation:fresh 2s ease-out}
@keyframes fresh{from{background:var(--accent-soft)}to{background:var(--surface)}}
.meta{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--faint);min-width:0}
.meta .u{font-weight:600;color:var(--fg)}
.meta .t{font-size:12.5px}
.dot{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.dot.a::before{background:var(--accent)}
.dot.w::before{background:var(--warn)}
.dot.b::before{background:var(--bad)}
.msg{grid-column:1/-1;font-size:15.5px;line-height:1.6;max-width:80ch;overflow-wrap:anywhere;color:var(--fg)}
.msg mark{background:none;color:var(--mark);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.ai{grid-column:1/-1;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:baseline;max-width:80ch}
.ai b{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.score{font:600 14px var(--display);white-space:nowrap;align-self:start;font-variant-numeric:tabular-nums}
.score.hi{color:var(--good)}
.score.mid{color:var(--warn)}
.score.lo{color:var(--faint)}
.score small{font:400 11px var(--body);color:var(--faint);margin-left:4px}
.acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.acts .sp{flex:1}
.acts select{padding:5px 12px;font-size:13px;border-color:transparent;background:var(--surface-2);color:var(--muted)}
.pill{font-size:12px;padding:2px 10px;border-radius:20px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.g{background:var(--good-soft);color:var(--good)}
.pill.w{background:var(--warn-soft);color:var(--warn)}
.pill.b{background:var(--bad-soft);color:var(--bad)}
.pill.a{background:var(--accent-soft);color:var(--accent)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.bulk textarea{font:13.5px/1.6 var(--mono)}
.bres{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.blist{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.blist td{padding:8px 12px;font-size:13px}
.blist td:first-child{font-family:var(--mono);font-size:12.5px}
.blist tr.st-have td,.blist tr.st-dup td{color:var(--faint)}
.note{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:8px 12px;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov{position:fixed;inset:0;z-index:8;background:rgba(20,20,20,.35);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px 16px;animation:ovIn .18s ease-out}
.dlg{background:var(--surface);border-radius:22px;width:100%;max-width:720px;max-height:100%;overflow-y:auto;padding:24px 26px;gap:16px;box-shadow:0 24px 60px rgba(20,20,20,.18)}
.dlg h2{font:700 19px/1.3 var(--display)}
.dfoot{position:sticky;bottom:-24px;background:var(--surface);padding-block:14px 4px;margin-top:4px}
.x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;text-align:center;line-height:32px;font-size:20px;color:var(--muted)}
.x:hover{background:var(--surface-2);color:var(--fg)}
.step{background:var(--surface);border-radius:18px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
.step input[type=text],.step textarea,.step select{background:var(--surface);border-color:var(--line)}
.step .chip.sel{background:var(--surface-2)}
.sh{display:flex;gap:12px;align-items:flex-start}
.sh h3{font:700 16px/1.3 var(--display);margin:0 0 2px}
.sn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--ink-fg);font:600 13px/28px var(--display);text-align:center}
.mono{font:13px/1.6 var(--mono)}
.ai-box{background:var(--surface-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ai-box.ok{background:var(--good-soft)}
.aihd{display:flex;align-items:center;gap:8px;font-weight:600}
.aidot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.aiok{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;font-size:12px}
.aisum{font-size:15px;line-height:1.55;padding:10px 14px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:4px 10px 10px 4px}
.ai-box.ok .aisum{background:var(--surface);border-left-color:var(--good)}
.btn.no2{color:var(--bad)}
.aisc{font:700 18px var(--display)}
.aisc.hi{color:var(--good)}.aisc.mid{color:var(--warn)}.aisc.lo{color:var(--bad)}
.aq{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line-soft);padding-top:10px}
.aqq{font-weight:600;font-size:13.5px}
.aqi{width:100%;background:var(--surface)!important}
.opt{all:unset;cursor:pointer;font-size:13px;padding:5px 12px;border-radius:999px;background:var(--surface-2);color:var(--fg)}
.opt:hover{background:var(--line)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg)}
.opt:focus-visible{outline:2px solid var(--accent)}
.thr{display:flex;flex-direction:column;gap:8px}
.thr strong{font:700 17px var(--display)}
.stepnote{font-size:14.5px;line-height:1.45;color:var(--muted)}
.toprow{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;align-items:end}
.acc{position:relative}
.accbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;color:var(--fg);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accbtn:focus-visible{outline:2px solid var(--accent)}
.accpop{position:absolute;top:calc(100% + 6px);right:0;z-index:3;min-width:260px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 16px 40px rgba(20,20,20,.14);display:flex;flex-direction:column}
.accopt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--fg);font-size:14px}
.accopt:hover{background:var(--surface-2)}
.accopt .small{margin-left:auto}
.accopt input{accent-color:var(--accent)}
.acchd{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:10px 10px 4px;border-top:1px solid var(--line-soft);margin-top:4px}
@media (max-width:560px){.toprow{grid-template-columns:1fr}.accpop{left:0;right:auto}}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.sdot.reading,.stbar i.reading{background:var(--good)}
.sdot.joining,.stbar i.joining{background:var(--warn)}
.sdot.pending,.stbar i.pending{background:var(--faint)}
.sdot.failed,.sdot.unav,.stbar i.failed,.stbar i.unav{background:var(--bad)}
.stbar i.joining{animation:pulse 1.6s infinite}
.chip.sel .sdot{margin-right:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.jnote{background:var(--accent-soft);color:var(--fg);border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.5}
.chst{border-top:1px solid var(--line-soft);padding-top:12px}
.chtog{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px}
.chtog:focus-visible{outline:2px solid var(--accent);border-radius:8px}
.stbar{display:flex;gap:3px}
.stbar i{display:block;width:14px;height:8px;border-radius:3px}
.chsum{color:var(--muted)}
.chsum strong{color:var(--fg);font-weight:600}
.t-wait{color:var(--warn)}.t-bad{color:var(--bad)}
.chev{margin-left:auto;font-size:13px;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.chlist{margin-top:10px;display:flex;flex-direction:column}
.chrow{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,2fr) auto;gap:12px;align-items:center;padding:9px 2px;border-top:1px solid var(--line-soft)}
.chrow:first-child{border-top:0}
.chn{font:13px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cst{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;white-space:nowrap}
.cst::before{content:"";width:8px;height:8px;border-radius:50%}
.cst.reading{color:var(--good)}.cst.reading::before{background:var(--good)}
.cst.joining{color:var(--warn)}.cst.joining::before{background:var(--warn);animation:pulse 1.6s infinite}
.cst.pending{color:var(--muted)}.cst.pending::before{background:var(--faint)}
.cst.failed,.cst.unav{color:var(--bad)}.cst.failed::before,.cst.unav::before{background:var(--bad)}
.chd{min-width:0}
@media (max-width:640px){.chrow{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.chd{grid-column:1}.chrow [data-retry]{grid-column:2;grid-row:2;color:var(--accent)}.chtog{flex-wrap:nowrap;gap:10px}.chtog .stbar{display:none}.chevt{display:none}.chev{width:28px;height:28px;justify-content:center;border-radius:50%;background:var(--surface-2);flex:none}}
.mbar{display:block;height:4px;border-radius:4px;background:var(--line);margin-top:6px;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--accent)}
.trialbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border-radius:14px;padding:8px 8px 8px 16px;margin-bottom:16px;font-size:13.5px}
.trialcard.ended{background:var(--bad-soft)}
.trialcard .grid2{row-gap:14px}
.tl{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:13.5px}
.pl{margin:0;font-size:15px;line-height:1.55}
.lockcard{margin-bottom:14px;border:1.5px solid var(--accent)}
.feed.locked{position:relative;filter:blur(5px);opacity:.55;pointer-events:none;user-select:none}
#tsw{flex-wrap:wrap;border-radius:18px}
.demosw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
#auth{min-height:100%}
.authwrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:16px}
.authcard{width:100%;max-width:440px;background:var(--surface);border-radius:22px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(20,20,20,.05)}
.authcard h1{font-size:24px}
.abrand{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.abrand b{font:700 22px/1 var(--display);letter-spacing:-.02em}
.abrand .eye{width:40px;height:25px;color:var(--fg)}
.asub{margin:-6px 0 0;color:var(--muted);line-height:1.5}
.afoot{color:var(--faint);font-size:12.5px;margin:0}
.btn.wide{width:100%;justify-content:center;padding:10px 16px}
.linkbtn{all:unset;cursor:pointer;color:var(--accent);font-weight:500}
.linkbtn:hover{text-decoration:underline}
.linkbtn:focus-visible{outline:2px solid var(--accent);border-radius:4px}
.aline{color:var(--muted);text-align:center}
.adiv{border-top:1px solid var(--line-soft)}
.ademo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px dashed var(--line);padding-top:14px}
.ferr{color:var(--bad);font-size:12px;margin-left:6px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--accent)}
.chk.bad{color:var(--bad)}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--faint)}
.steps span.on{background:var(--ink);color:var(--ink-fg)}
.steps span.done{background:var(--good-soft);color:var(--good)}
.mechip{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px}
.mechip:hover{background:var(--surface-2)}
.mechip:focus-visible{outline:2px solid var(--accent)}
.mt{display:flex;flex-direction:column;min-width:0;font-weight:500;line-height:1.3}
.av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ink-fg);display:inline-grid;place-items:center;font:600 12.5px var(--display)}
.av.sm{width:30px;height:30px;font-size:11.5px;background:var(--surface-2);color:var(--fg)}
.ucell{display:flex;gap:10px;align-items:center}
td.wrap{white-space:normal;min-width:180px}
td.act{white-space:normal;text-align:right}   /* «Скопировать ссылку» + «Отменить» stack instead of overflowing */
td.act .btn{white-space:nowrap;margin:2px 0}
.roles{width:100%;font-size:13px}
.roles td,.roles th{padding:7px 8px;white-space:normal}
.roles td:not(:first-child),.roles th{text-align:center}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.empty2{align-items:flex-start}
.empty2 p{margin:0;max-width:60ch}
.onb{margin-bottom:16px;gap:12px}
.onbl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.onbi{display:flex;gap:12px;align-items:center;background:var(--surface-2);border-radius:14px;padding:12px 14px}
.onbi>div{flex:1;min-width:0}
.onbi.ok{opacity:.65}
.onbn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font:600 12.5px var(--display)}
.onbi.ok .onbn{background:var(--good);color:#fff}
@media (max-width:760px){.mechip{display:none}.onbl{grid-template-columns:1fr}}
.eye{transform-origin:50% 50%;transform-box:fill-box;animation:blink 45s infinite}
.eye circle.look{animation:look 1.3s ease-in-out}
@keyframes look{0%,100%{transform:translateX(0)}18%,40%{transform:translateX(6.5px)}58%,82%{transform:translateX(-6.5px)}}
@keyframes blink{0%,99.3%,100%{transform:scaleY(1)}99.65%{transform:scaleY(.08)}}
.authcard input:not([type=checkbox]),.authcard select{width:100%}
.btn.tg{background:#2AABEE;border-color:#2AABEE;color:#fff;gap:10px}
.btn.tg:hover{background:#229ED9;border-color:#229ED9}
.tgic{flex:none;width:36px;height:36px;border-radius:50%;background:#2AABEE;color:#fff;display:grid;place-items:center}
.tgic.big{width:44px;height:44px}
.tgacc{display:flex;gap:12px;align-items:center;background:var(--surface-2);border-radius:14px;padding:12px 14px}
.tgwait{display:flex;gap:14px;align-items:center;background:var(--surface-2);border-radius:14px;padding:14px 16px}
.invl{background:var(--surface-2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
code.lnk{font:13px var(--mono);background:var(--surface);padding:6px 10px;border-radius:8px;overflow-wrap:anywhere;flex:1;min-width:0}
.payamt{background:var(--surface-2);border-radius:14px;padding:14px 16px}
.payamt .big{font:700 26px/1.2 var(--display);margin:2px 0}
.paywait{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border-radius:14px;padding:14px 16px}
.paywait .aidot{margin-top:6px;flex:none}
.lnk2{font:12.5px var(--mono);color:var(--muted)}
.nojs{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px 16px}
.nojs-card{max-width:420px;background:#fff;color:#141414;border-radius:20px;padding:24px;font:15px/1.55 -apple-system,"Segoe UI",Roboto,sans-serif}
.nojs-card b{font-size:22px}
html:not(.js) #app,html:not(.js) #auth,html:not(.js) #toast{display:none!important}
html.js .nojs{display:none}
.panel.oneplan{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:22px 24px}
.opl,.opr{display:flex;flex-direction:column;gap:12px;min-width:0}
.opr{border-left:1px solid var(--line-soft);padding-left:28px}
@media (max-width:760px){.panel.oneplan{grid-template-columns:1fr}.opr{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:16px}}
.iconbtn{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:16px}
.iconbtn:hover{background:var(--surface-2);color:var(--fg)}
.iconbtn:focus-visible{outline:2px solid var(--accent)}
.renin{font:700 22px var(--display);padding:6px 14px!important;min-width:260px}
.sndbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--muted);background:var(--surface)}
.sndbtn.on{color:var(--fg)}
.sndbtn:hover{background:var(--surface-2)}
.sndbtn:focus-visible{outline:2px solid var(--accent)}
.sndwrap{position:relative}
.sndpop{position:absolute;right:0;top:calc(100% + 6px);z-index:6;min-width:124px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;box-shadow:0 14px 34px rgba(20,20,20,.14);display:flex;flex-direction:column}
.sndo{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:9px;font-size:13.5px;white-space:nowrap}
.sndo:hover{background:var(--surface-2)}
.sndo:focus-visible{outline:2px solid var(--accent)}
.sndo .chk{width:12px;font-size:12px;color:var(--accent);font-weight:700}
.sndo .pl{margin-left:auto;font-size:9px;color:var(--faint)}
.sndo.sel{font-weight:500}
.btn.big{padding:13px 28px;font-size:16px;font-weight:600}
.stwrap{position:relative}
.stbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:13px;background:var(--surface-2);color:var(--muted)}
.stbtn:hover{color:var(--fg)}
.stbtn:focus-visible{outline:2px solid var(--accent)}
.stbtn.st-work{background:var(--warn-soft);color:var(--warn)}
.stbtn.st-rej{background:var(--bad-soft);color:var(--bad)}
.stpop{left:0;right:auto;min-width:210px}
.sthd{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.stsep{height:1px;background:var(--line);margin:4px 6px}
.joinnote{font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:12px;padding:10px 12px;line-height:1.45}
.authcard.login .abrand{justify-content:center;margin:4px 0 12px;gap:12px}
.authcard.login .abrand b{font-size:32px}
.authcard.login .abrand .eye{width:56px;height:35px}
.alegal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;font-size:12.5px;color:var(--faint);text-align:center}
.alegal a{color:var(--muted);text-decoration:none}
.alegal a:hover{text-decoration:underline}
.atag{border-top:1px dashed var(--line);padding-top:16px;text-align:center;color:var(--faint);font-size:13px;line-height:1.5}
.ademo2{font-size:12px;color:var(--faint);text-align:center}
.ademo2 summary{cursor:pointer;list-style:none;padding:4px 10px;border-radius:999px;display:inline-block}
.ademo2 summary::-webkit-details-marker{display:none}
.ademo2 summary:hover{color:var(--muted)}
.ademo2 .row{justify-content:center;margin-top:8px}
*{scrollbar-width:thin;scrollbar-color:rgba(20,20,20,.22) transparent}
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{background:rgba(20,20,20,.2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(20,20,20,.35);background-clip:padding-box}
.dlg{scrollbar-gutter:stable}
.mondlg{background:var(--bg)}
.mondlg .dfoot{background:var(--bg)}
.mondlg .accbtn,.mondlg>.toprow input{background:var(--surface)}
.mondlg .opt{background:var(--surface)}
.mondlg .opt[aria-pressed="true"]{background:var(--ink)}
.thrr{-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;margin:0}
.thrr::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--line) var(--p,50%))}
.thrr::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
.thrr::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
.thrr::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(20,20,20,.18);transition:transform .15s ease,box-shadow .15s ease}
.thrr::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(20,20,20,.18);transition:transform .15s ease}
.thrr:hover::-webkit-slider-thumb,.thrr:focus-visible::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 6px var(--accent-soft),0 2px 6px rgba(20,20,20,.18)}
.thrr:active::-webkit-slider-thumb{transform:scale(1.18)}
.thrr:hover::-moz-range-thumb{transform:scale(1.12)}
.thrr:focus{outline:none}
#minV{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.cswrap{position:relative;display:inline-flex;min-width:0}
label.f .cswrap,.toprow .cswrap{display:flex}
.csnative{position:absolute!important;opacity:0;pointer-events:none;width:1px!important;height:1px!important;padding:0!important;border:0!important}
.csbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:14px;white-space:nowrap}
.csbtn span{overflow:hidden;text-overflow:ellipsis}
.csbtn svg{flex:none;color:var(--muted)}
.csbtn:hover{border-color:var(--faint)}
.csbtn:focus-visible,.csbtn[aria-expanded="true"]{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.filters .csbtn{border-color:transparent}
td .csbtn{padding:5px 12px;font-size:13.5px}
.cspop{position:fixed;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;box-shadow:0 12px 30px rgba(20,20,20,.13);display:flex;flex-direction:column;gap:1px;max-width:calc(100vw - 16px)}
.cso{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:9px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.cso .chk{width:14px;color:var(--accent);font-weight:700;font-size:12px}
.cso:hover,.cso:focus-visible{background:var(--surface-2);outline:none}
.cso.sel{background:#F6F6F4;font-weight:500}
.tgmsg{grid-column:1/-1;display:flex;gap:10px;align-items:flex-end;max-width:640px}
.tgav{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,var(--c1),var(--c2));color:#fff;display:grid;place-items:center;font:600 14px var(--display);letter-spacing:.02em;position:relative;overflow:hidden}
.tgav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.bubble{position:relative;background:var(--surface-2);border-radius:16px 16px 16px 0;padding:7px 12px 7px;min-width:0}
.bubble::before{content:"";position:absolute;left:-8px;bottom:0;width:12px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16'%3E%3Cpath d='M12 0C12 9 9 14 0 16h12z' fill='%23F0F0EE'/%3E%3C/svg%3E") no-repeat}
.bname{display:block;font-weight:600;font-size:13.5px;text-decoration:none;margin-bottom:1px}
.bname:hover{text-decoration:underline}
.bubble .msg{font-size:15px;line-height:1.5;max-width:none}
.btime{float:right;font-size:11.5px;color:var(--faint);margin:8px 0 -4px 12px;line-height:1}
.chatn{font-weight:500;color:var(--muted)}
.lres{background:var(--surface-2);border-radius:10px;padding:8px 12px;color:var(--fg)}
.btn.del{background:transparent;border-color:transparent;color:var(--bad)}
.btn.del:hover{background:var(--bad-soft)}
.btn.sm.del#dDelYes{background:var(--bad);border-color:var(--bad);color:#FFFFFF}
@keyframes ovIn{from{opacity:0}}
/* generic */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.sb{justify-content:space-between}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:20px;background:var(--surface-2);border:0;font-size:13px}
.chip.ro{padding-right:11px}
.chip.pos{background:#E6F4EA;color:#1F6B3A}
.chip.neg{background:#FDE3E1;color:#B42318;font-weight:500}
.chip.pos::before,.chip.neg::before{font-weight:700;font-size:13px;line-height:1;width:10px;text-align:center}
.chip.pos::before{content:"+"}
.chip.neg::before{content:"−"}
.chip button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:inherit;opacity:.6}
.chip button:hover{background:rgba(255,255,255,.7);opacity:1}
.kwrow{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start}
.kwl{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding-top:6px}
.kwl.pos{color:#1F6B3A}
.kwl.neg{color:#B42318}
@media (max-width:520px){.kwrow{grid-template-columns:1fr;gap:6px}.kwl{padding-top:0}}
.small{font-size:12.5px;color:var(--muted)}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{all:unset;cursor:pointer;padding:8px 12px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-pressed="true"]{color:var(--fg);border-color:var(--accent);font-weight:500}
.bar{height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.plan.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.price{font:700 26px/1 var(--display);white-space:nowrap}
.price small{font:400 13px var(--body);color:var(--muted)}
ul.ck{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
ul.ck li::before{content:"✓";color:var(--good);margin-right:8px;font-weight:600}
.sec{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.code{font:600 20px var(--mono);letter-spacing:.12em;background:var(--surface-2);padding:8px 18px;border-radius:var(--pill);display:inline-block}
.toast{border-radius:var(--pill)!important;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ink-fg);box-shadow:0 8px 24px rgba(20,20,20,.2);padding:10px 16px;border-radius:8px;font-weight:500;z-index:9;max-width:calc(100% - 32px)}
input[type=range]{accent-color:var(--accent);width:100%}
input[type=checkbox]{accent-color:var(--accent)}
input[data-act="on"]{appearance:none;width:36px;height:20px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;cursor:pointer;margin:0;transition:background .2s}
input[data-act="on"]::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:transform .2s,background .2s}
input[data-act="on"]:checked{background:var(--accent-soft);border-color:var(--accent)}
input[data-act="on"]:checked::after{transform:translateX(16px);background:var(--accent)}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .rail{position:sticky;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 16px;border-right:0;border-bottom:1px solid var(--line);z-index:5}
  .rail .co,.rail .foot,.brand span{display:none}
  .brand{padding:0}
  .mright{display:flex}
  .mcur{display:inline-flex}
  .more{display:inline-grid}
  nav{display:none;position:absolute;top:calc(100% + 6px);right:12px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 16px 40px rgba(20,20,20,.14);flex-direction:column}
  .rail.open nav{display:flex}
  nav button{padding:11px 14px;font-size:15px}
  main{padding:20px 16px 60px}
  .grid2{grid-template-columns:1fr}
  .lead{grid-template-columns:1fr}
  .lead .ll{padding:14px 16px 14px}
  .lead .lr{border-left:0;border-top:1px solid var(--line-soft);padding:12px 16px 14px}
  .tgav{width:34px;height:34px;font-size:13px}
}

@media (max-width:560px){
  .ov{padding:0;align-items:flex-end}
  .dlg{border-radius:22px 22px 0 0;max-height:94%;padding:20px 16px 0}
  .dlg:not(:has(.dfoot)){padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .dlg .step{padding:16px 14px 14px;border-radius:16px}
  .dfoot{bottom:0;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 0 var(--line-soft);margin-inline:-16px;padding-inline:16px}
  .trialbar{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px}
  .trialbar .btn{padding:4px 0}
  .stats{gap:8px;margin-bottom:20px}
  .stat{padding:12px 14px}
  .stat .v{font-size:21px}
  .stat .h{font-size:11.5px}
  .score.big{font-size:22px}
  .lead .lr{gap:8px}
  .lbtns{flex-direction:row;align-items:center;gap:6px}
  .lbtns .btn.pri{flex:1;padding:10px 16px}
  .lbtns .btn.ghost{width:auto;flex:none}
  .wrrow{padding-left:44px}
}

.sndtop{display:none}
@media (max-width:760px){
  .head{position:relative}
  .head .sndhead{position:absolute;right:0;top:0}
  .sndtop .sndbtn{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;background:var(--surface-2)}
  .sndtop .sndbtn:not(.on){color:var(--faint)}
  .sndtop .sndl,.sndtop .sndchev{display:none}
  .sndtop .sndbtn svg{width:19px;height:19px}
  .sndtop .sndpop{top:calc(100% + 10px)}
}

@media (max-width:560px){
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters .seg{grid-column:1/-1;display:flex}
  .filters .seg button{flex:1 1 auto;text-align:center;padding:6px 8px;white-space:nowrap}
  .filters .cswrap{display:flex}
}

.infowrap{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.info{all:unset;box-sizing:border-box;cursor:pointer;width:16px;height:16px;border-radius:50%;border:1.3px solid var(--faint);color:var(--muted);display:inline-grid;place-items:center;font:600 10.5px/1 var(--body);font-style:italic}
.info:hover,.info[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.infopop{position:absolute;left:0;top:calc(100% + 8px);z-index:7;width:340px;max-width:calc(100vw - 48px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 14px 34px rgba(20,20,20,.14);font-size:13px;line-height:1.5;color:var(--fg);display:flex;flex-direction:column;gap:8px}
.infopop strong{font-weight:600;font-size:13.5px}
.infopop p{margin:0;color:var(--muted)}
.infopop ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.infopop li::marker{color:var(--faint)}
.infoex{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border-radius:10px;padding:8px 10px}
.infoex>span{font-size:12px;color:var(--muted)}
.infopop .infofoot{font-size:12.5px}
/* Telegram Mini App (html.tg): height from the SDK instead of 100vh, padding by the safe areas, a lower top bar */
html.tg body{min-height:var(--tg-viewport-stable-height,100vh);box-sizing:border-box;padding:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) var(--tg-safe-area-inset-right,0px) calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)) var(--tg-safe-area-inset-left,0px)}
html.tg .authwrap,html.tg .nojs{min-height:var(--tg-viewport-stable-height,100vh)}
html.tg .rail{height:var(--tg-viewport-stable-height,100vh);top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
@media (max-width:760px){html.tg .rail{height:auto;min-height:48px;padding-top:4px;padding-bottom:4px}}
html.tg #logout,html.tg #apOut{display:none!important}