/* Lagoon v4 — інтерфейс. Одиниці rem: масштабується під телефон, планшет, ПК і телевізор */
:root{--bg:#EEF2F1;--panel:#FAFBFB;--surface:#fff;--ink:#0E2220;--muted:#5D706E;--line:#D6E0DE;--in:#fff;
  --danger:#D4453C;--ok:#2BB673;--nl:30%;--shadow:0 .5rem 1.75rem rgba(10,30,28,.18);--side-w:24rem;--tr:.2s}
[data-theme=dark]{--bg:#0A1110;--panel:#0F1817;--surface:#142120;--ink:#E5F1EF;--muted:#86A29E;--line:#1E3331;--in:#16292A;--nl:70%;--shadow:0 .5rem 1.75rem rgba(0,0,0,.6)}
:root,[data-pal=lagoon]{--brand:#0E6B66;--brand2:#18A096;--on-brand:#fff;--accent:#F2B13A;--on-accent:#2A1D00;--out:#0E6B66}
[data-pal=violet]{--brand:#5A46D8;--brand2:#8D7BFF;--on-brand:#fff;--accent:#FFB84D;--on-accent:#2A1D00;--out:#5A46D8}
[data-pal=ember]{--brand:#C4410F;--brand2:#F08A3C;--on-brand:#fff;--accent:#FFD166;--on-accent:#2A1D00;--out:#C4410F}
[data-pal=graphite]{--brand:#334155;--brand2:#64748B;--on-brand:#fff;--accent:#5EEAD4;--on-accent:#04201E;--out:#334155}
[data-theme=dark][data-pal=lagoon]{--brand:#33BDB2;--brand2:#7DE0D6;--on-brand:#04201E;--out:#17706A}
[data-theme=dark][data-pal=violet]{--brand:#9D8CFF;--brand2:#C4B9FF;--on-brand:#14102E;--out:#4F3FC4}
[data-theme=dark][data-pal=ember]{--brand:#FF8A4C;--brand2:#FFB380;--on-brand:#2A1204;--out:#B8420F}
[data-theme=dark][data-pal=graphite]{--brand:#94A3B8;--brand2:#CBD5E1;--on-brand:#0F172A;--out:#3B4B61}
@supports (color:color-mix(in srgb,red,blue)){
  :root{--bg:color-mix(in srgb,var(--brand) 7%,#F1F3F3);--panel:color-mix(in srgb,var(--brand) 3%,#FBFCFC);--line:color-mix(in srgb,var(--brand) 12%,#DCE2E2)}
  [data-theme=dark]{--bg:color-mix(in srgb,var(--brand) 8%,#0A0F10);--panel:color-mix(in srgb,var(--brand) 6%,#101617);--surface:color-mix(in srgb,var(--brand) 9%,#151C1D);--in:color-mix(in srgb,var(--brand) 12%,#161D1E);--line:color-mix(in srgb,var(--brand) 16%,#1B2425)}
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{font-size:16px;-webkit-text-size-adjust:100%}
html,body{height:100%}
body{font:400 .9375rem/1.45 Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}
button,input,textarea,select,summary{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
:focus-visible{outline:.15rem solid var(--brand);outline-offset:.15rem}
::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}
.i{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.gi{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12rem;margin-right:.3rem;color:var(--muted)}
.vf{width:1rem;height:1rem;vertical-align:-.2rem;margin-left:.25rem;flex-shrink:0}
.wordmark{font-family:Unbounded,Onest,sans-serif;font-weight:600;letter-spacing:-.02em}
.scroll{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* аватари */
.av{position:relative;width:3rem;height:3rem;border-radius:34%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:600;font-size:1.2rem;background:linear-gradient(140deg,hsl(var(--h) 58% 44%),hsl(calc(var(--h) + 38) 62% 32%))}
.av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av.sm{width:2.5rem;height:2.5rem;font-size:1rem}.av.lg{width:5.5rem;height:5.5rem;font-size:2.3rem}
.av.saved{background:var(--brand);color:var(--on-brand)}
.av .dot{position:absolute;right:-.15rem;bottom:-.15rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--ok);border:.2rem solid var(--panel)}

/* кнопки та поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--brand);color:var(--on-brand);border-radius:.9rem;padding:.8rem 1rem;font-weight:600;width:100%;min-height:2.75rem}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:var(--bg);color:var(--ink)}.btn.warn{background:none;color:var(--danger)}.btn.sm{padding:.5rem .9rem;width:auto;min-height:2.25rem;font-size:.875rem}
.btn.gold{background:var(--accent);color:var(--on-accent)}
.ib{width:2.75rem;height:2.75rem;border-radius:.9rem;display:grid;place-items:center;color:var(--muted);flex-shrink:0;transition:background var(--tr),color var(--tr)}
.ib.on{background:var(--brand);color:var(--on-brand)}
@media(hover:hover){.ib:hover{background:var(--bg);color:var(--ink)}.btn:hover:not(:disabled){filter:brightness(1.07)}}
.lnk{color:var(--brand);font-weight:500;padding:.25rem .5rem;border-radius:.5rem}.lnk.red{color:var(--danger)}
.field{display:grid;gap:.35rem;font-size:.85rem;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--surface);border:1.5px solid var(--line);border-radius:.9rem;padding:.7rem .9rem;font-size:1rem;color:var(--ink);outline:none;resize:none;width:100%;min-height:2.75rem}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand)}
.pw{position:relative}.pw input{padding-right:3rem}.pw .ib{position:absolute;right:.1rem;top:0;height:100%}
.err{color:var(--danger);font-size:.875rem;min-height:1.3rem}
.ok-msg{color:var(--ok);font-size:.875rem}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);border-radius:.9rem;padding:.25rem;gap:.2rem}
.tabs button{padding:.55rem;border-radius:.7rem;color:var(--muted);font-weight:500}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* вхід */
.auth{display:grid;grid-template-columns:1.1fr 1fr;height:100vh;height:100dvh}
.auth-art{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#000));color:#fff;padding:3.5rem;display:flex;flex-direction:column;justify-content:space-between}
.auth-art::before,.auth-art::after{content:"";position:absolute;border-radius:34%;background:rgba(255,255,255,.08)}
.auth-art::before{width:26rem;height:26rem;right:-9rem;top:-6rem;transform:rotate(18deg)}
.auth-art::after{width:18rem;height:18rem;left:-6rem;bottom:-5rem;transform:rotate(-12deg);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.auth-art>*{position:relative}
.auth-art .wordmark{font-size:clamp(2.6rem,5vw,4.8rem)}
.auth-art p{font-size:1.3rem;max-width:22ch;line-height:1.3}
.auth-art ul{list-style:none;display:grid;gap:.5rem;opacity:.9}
.auth-side{display:grid;place-items:center;padding:1.5rem;background:var(--panel);overflow:auto}
.auth-card{width:100%;max-width:23rem;display:grid;gap:.9rem}
.auth-card .wordmark{display:none;font-size:2.2rem;color:var(--brand);margin-bottom:.5rem}
.auth-links{display:flex;justify-content:center}

/* каркас */
#main{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);height:100vh;height:100dvh;position:relative;overflow:hidden}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;position:relative}
.side-head{display:flex;align-items:center;gap:.1rem;padding:.9rem .6rem .4rem 1.1rem;padding-top:max(.9rem,env(safe-area-inset-top))}
.side-head .wordmark{flex:1;font-size:1.4rem;color:var(--brand)}
.search{padding:.35rem .9rem .5rem;position:relative}
.search input{width:100%;background:var(--bg);border:1.5px solid transparent;border-radius:.9rem;padding:.65rem .9rem .65rem 2.5rem;outline:none;font-size:.95rem;min-height:2.6rem}
.search input:focus{border-color:var(--brand);background:var(--surface)}
.search .i{position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);width:1.1rem;height:1.1rem;color:var(--muted);pointer-events:none}
.chips{display:flex;gap:.4rem;overflow-x:auto;padding:0 .9rem .6rem;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{flex-shrink:0;border-radius:999px;padding:.35rem .85rem;background:var(--bg);color:var(--muted);font-size:.85rem;font-weight:500}
.chips button.on{background:var(--brand);color:var(--on-brand)}
.list{flex:1;overflow-y:auto;padding:0 .5rem 5.5rem}
.list h6{font-size:.8rem;font-weight:500;color:var(--muted);padding:.8rem .7rem .25rem}
.row{display:flex;gap:.8rem;align-items:center;padding:.6rem .7rem;border-radius:1rem;cursor:pointer;min-height:3.8rem}
@media(hover:hover){.row:hover{background:var(--bg)}}
.row.on{background:color-mix(in srgb,var(--brand) 15%,transparent)}
.row-main{flex:1;min-width:0}
.row-top,.row-bot{display:flex;gap:.5rem;align-items:center;justify-content:space-between}
.row-top b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row-top time{font-size:.75rem;color:var(--muted);flex-shrink:0}
.row-bot span{color:var(--muted);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:var(--accent);color:var(--on-accent);font-size:.75rem;font-weight:700;min-width:1.35rem;height:1.35rem;padding:0 .4rem;border-radius:.7rem;display:grid;place-items:center;flex-shrink:0;font-style:normal}
.none{padding:2rem 1rem;text-align:center;color:var(--muted)}
.fab{position:absolute;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));width:3.5rem;height:3.5rem;border-radius:1.2rem;background:var(--brand);color:var(--on-brand);display:none;place-items:center;box-shadow:var(--shadow)}

/* чат */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}
.empty{margin:auto;text-align:center;color:var(--muted);display:grid;gap:1rem;justify-items:center;padding:1.5rem}
.empty .av{width:5rem;height:5rem}
.chat-inner{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-head{display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem;padding-top:max(.55rem,env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--line)}
.chat-head .back{display:none}
.head-info{display:flex;align-items:center;gap:.8rem;min-width:0;flex:1;cursor:pointer;border-radius:.9rem;padding:.2rem .3rem}
.head-act{display:flex;gap:.1rem;flex-shrink:0}.head-act .ib{color:var(--brand)}
.who{min-width:0}.who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:var(--muted);font-size:.8rem}.who small.live{color:var(--brand);font-weight:500}
.mw{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.msgs{flex:1;overflow-y:auto;padding:1rem max(.75rem,calc((100% - 62rem)/2));display:flex;flex-direction:column;gap:.2rem;overscroll-behavior:contain}
.down{position:absolute;right:1rem;bottom:.9rem;width:2.8rem;height:2.8rem;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center}
.down .badge{position:absolute;top:-.4rem;right:-.3rem}
.day{align-self:center;margin:.9rem 0 .4rem}
.day span{background:var(--panel);color:var(--muted);font-size:.8rem;padding:.2rem .8rem;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.hint{margin:auto;color:var(--muted);text-align:center;max-width:26ch}
.more{align-self:center;color:var(--brand);font-weight:500;padding:.4rem 1rem;border-radius:999px;background:var(--panel);margin-bottom:.5rem}
.msg{max-width:min(78%,34rem);padding:.5rem .75rem .35rem;margin-top:.5rem;border-radius:1.15rem;line-height:1.4;overflow-wrap:anywhere;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.06);position:relative}
.msg.cont{margin-top:0}
.msg.in{align-self:flex-start;background:var(--in);border-bottom-left-radius:.35rem}
.msg.out{align-self:flex-end;background:linear-gradient(165deg,color-mix(in srgb,var(--brand2) 35%,var(--out)),var(--out));color:#fff;border-bottom-right-radius:.35rem}
[data-theme=dark][data-pal=graphite] .msg.out,[data-theme=dark][data-pal=violet] .msg.out{color:#fff}
.sn{display:block;font-weight:600;font-size:.84rem;color:hsl(var(--h) 55% var(--nl));margin-bottom:.1rem}
.txt{white-space:pre-wrap}
.msg a{color:inherit;text-decoration:underline;text-underline-offset:.15rem}
.mention{color:var(--brand);font-weight:600;cursor:pointer;text-decoration:none!important}
.msg.out .mention{color:var(--accent)}
@media(hover:hover){.mention:hover{text-decoration:underline!important}}
.meta{float:right;margin:.5rem 0 -.15rem .75rem;font-size:.72rem;opacity:.75;display:inline-flex;gap:.25rem;align-items:center}
.meta em{font-style:normal}
.checks svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.checks.read{color:var(--accent);opacity:1}
.pic{display:block;max-width:100%;max-height:22rem;border-radius:.8rem;margin:.1rem 0 .3rem;cursor:zoom-in;background:var(--bg)}
.quote{display:block;border-left:.2rem solid var(--accent);padding:.1rem .55rem;margin:0 0 .3rem;background:rgba(127,127,127,.15);border-radius:.4rem;font-size:.82rem;cursor:pointer}
.quote b{display:block}.quote span{display:block;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:15rem}
.rx{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem;clear:both}
.chip{border-radius:999px;padding:.05rem .55rem;font-size:.82rem;background:rgba(127,127,127,.22)}.chip.me{background:var(--accent);color:var(--on-accent)}
.flash{animation:flash 1.2s}@keyframes flash{30%{box-shadow:0 0 0 .25rem var(--accent)}}
.voice{display:flex;align-items:center;gap:.65rem;min-width:13rem;padding:.1rem 0}
.vp{width:2.6rem;height:2.6rem;border-radius:.9rem;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;flex-shrink:0}
.msg.out .vp{background:#fff;color:var(--out)}
.vp svg{width:1.1rem;height:1.1rem;fill:currentColor}
.wv{display:flex;align-items:center;gap:.12rem;height:1.8rem;flex:1;cursor:pointer}
.wv i{flex:1;min-width:2px;border-radius:2px;background:currentColor;opacity:.3;transition:opacity .15s}.wv i.on{opacity:1}
.vd{font-size:.75rem;opacity:.8;min-width:2.2rem;text-align:right}
.gift{display:grid;justify-items:center;gap:.15rem;padding:1rem 1.6rem;border-radius:1.1rem;margin:.1rem 0 .3rem;min-width:12rem;text-align:center;background:linear-gradient(150deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 30) 70% 38%));color:#fff}
.gift .ge{font-size:3.4rem;line-height:1.1;filter:drop-shadow(0 .25rem .4rem rgba(0,0,0,.25))}
.gift b{font-weight:600}.gift small{opacity:.88}.gift i{font-style:normal;margin-top:.3rem;padding:.3rem .7rem;background:rgba(0,0,0,.2);border-radius:.7rem;font-size:.85rem}

/* поле вводу */
.composer-wrap{background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);position:relative;flex-shrink:0}
.foot{padding:.9rem;text-align:center;color:var(--muted);font-size:.875rem}
.ctx,.att{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem 0}
.ctx div{flex:1;min-width:0;border-left:.2rem solid var(--accent);padding-left:.65rem;font-size:.82rem}
.ctx b{display:block}.ctx span{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att img{width:3rem;height:3rem;object-fit:cover;border-radius:.6rem}.att span{flex:1;min-width:0;font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer{display:flex;align-items:flex-end;gap:.25rem;padding:.55rem .7rem}
.composer textarea{flex:1;min-height:2.75rem;max-height:9rem;background:var(--surface);border:1.5px solid var(--line);border-radius:1.4rem;padding:.65rem 1rem;outline:none;resize:none;line-height:1.35;display:block;font-size:1rem}
.composer textarea:focus{border-color:var(--brand)}
#send,#mic{background:var(--brand);color:var(--on-brand);border-radius:1.1rem}
#send:disabled{opacity:.5}
.rec{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem}
.rec .rd{width:.75rem;height:.75rem;border-radius:50%;background:var(--danger);animation:blink 1s infinite;margin-left:.5rem}
@keyframes blink{50%{opacity:.25}}
.rec b{flex:1;font-variant-numeric:tabular-nums}
.emoji{position:absolute;left:.7rem;bottom:calc(100% + .4rem);background:var(--surface);border-radius:1.1rem;box-shadow:var(--shadow);padding:.5rem;display:grid;grid-template-columns:repeat(8,1fr);gap:.1rem;width:min(21.5rem,calc(100vw - 1.5rem));z-index:5}
.emoji button{font-size:1.4rem;border-radius:.6rem;padding:.25rem}
@media(hover:hover){.emoji button:hover{background:var(--bg)}}

/* меню, модалки */
.menu{position:fixed;z-index:50;background:var(--surface);border-radius:1.1rem;box-shadow:var(--shadow);padding:.4rem;min-width:13rem;display:grid}
.menu button{text-align:left;padding:.65rem .8rem;border-radius:.7rem;min-height:2.6rem}
@media(hover:hover){.menu button:hover{background:var(--bg)}}.menu .danger{color:var(--danger)}
.mn-rx{display:flex;justify-content:space-between;padding:.1rem .1rem .4rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.mn-rx button{font-size:1.4rem;padding:.25rem .4rem;min-height:0}
.modal{position:fixed;inset:0;z-index:60;background:rgba(5,15,14,.55);display:grid;place-items:center;padding:1rem;backdrop-filter:blur(3px)}
.sheet{background:var(--panel);border-radius:1.5rem;padding:1.5rem;width:100%;max-width:26rem;max-height:92dvh;overflow-y:auto;display:grid;gap:.9rem;box-shadow:var(--shadow);align-content:start;animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(.8rem) scale(.98)}}
.sheet.wide{max-width:32rem}
.sheet .top{display:grid;justify-items:center;gap:.4rem;text-align:center}
.sheet h3{font-size:1.2rem;font-weight:600}
.sheet h5{font-size:.8rem;font-weight:500;color:var(--muted)}
.sheet .bio{white-space:pre-wrap;overflow-wrap:anywhere}
.sheet small,.muted{color:var(--muted)}
.rb{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap}
.pill{justify-self:center;font-size:.82rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.row2{display:flex;gap:.5rem;align-items:center}.row2>input{flex:1;min-width:0}
details{background:var(--bg);border-radius:.9rem;padding:.65rem .9rem}
details summary{cursor:pointer;font-weight:500}details[open] summary{margin-bottom:.7rem}details .field{margin-bottom:.7rem}
.chk{display:flex;gap:.65rem;align-items:center;cursor:pointer}.chk input{width:1.15rem;height:1.15rem;accent-color:var(--brand)}
.mem{display:flex;align-items:center;gap:.65rem;padding:.4rem;border-radius:.9rem;cursor:pointer}
@media(hover:hover){.mem:hover{background:var(--bg)}}
.mem-n{flex:1;min-width:0}.mem-n b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mem-n small{font-size:.8rem}
.mem .lnk{font-size:.8rem;padding:.25rem .4rem}
.light{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.9);display:grid;place-items:center;cursor:zoom-out}
.light img{max-width:94vw;max-height:92dvh;border-radius:.5rem}
.toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.65rem 1.1rem;border-radius:.9rem;z-index:95;box-shadow:var(--shadow);max-width:90vw;text-align:center}

/* профіль: банер */
.pf-top{position:relative;margin:-1.5rem -1.5rem 0}
.pf-banner{height:7.5rem;background:var(--bn,none) center/cover no-repeat,linear-gradient(135deg,var(--brand),var(--brand2));position:relative}
.pf-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.25))}
.pf-btns{position:absolute;right:.7rem;bottom:.6rem;display:flex;gap:.4rem;z-index:1}
.pf-btns button{background:rgba(0,0,0,.55);color:#fff;padding:.3rem .7rem;border-radius:.6rem;font-size:.78rem;backdrop-filter:blur(4px)}
.pf-av{position:absolute;left:1.5rem;bottom:-2.6rem;z-index:1}
.pf-av .av{border:.25rem solid var(--panel);width:5.5rem;height:5.5rem}
.pf-cam{position:absolute;right:-.3rem;bottom:-.3rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;border:.2rem solid var(--panel)}
.pf-cam .i{width:.95rem;height:.95rem}
.pf-id{padding-top:2.9rem;display:grid;gap:.15rem}
.pf-id h3{display:flex;align-items:center}
.copy{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg);border-radius:.6rem;padding:.2rem .6rem;color:var(--brand);font-weight:500;width:fit-content;font-size:.875rem}
.copy .i{width:.9rem;height:.9rem}
.info{background:var(--bg);padding:.8rem;border-radius:.9rem;font-size:.875rem;display:grid;gap:.35rem;color:var(--muted)}.info b{color:var(--ink);font-weight:500}
.coins{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:color-mix(in srgb,var(--accent) 16%,transparent);padding:.6rem .8rem;border-radius:.9rem}
.coins b{font-size:1.05rem}
.ptabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);border-radius:.9rem;padding:.25rem}
.ptabs button{padding:.5rem;border-radius:.7rem;color:var(--muted);font-weight:500;font-size:.875rem}.ptabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pane{display:none;gap:.8rem}.pane.on{display:grid;animation:fade .18s}@keyframes fade{from{opacity:0}}
.contact{background:var(--bg);border-radius:.9rem;padding:.8rem;display:grid;gap:.6rem}
.contact .hd{display:flex;align-items:center;gap:.6rem;font-weight:500}.contact .hd .i{color:var(--brand)}
.contact .val{display:flex;align-items:center;justify-content:space-between;gap:.5rem;word-break:break-all}
.tag-ok{color:var(--ok);font-size:.8rem;font-weight:600}

/* подарунки */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.gc{border-radius:1rem;padding:.8rem .3rem;display:grid;justify-items:center;gap:.1rem;background:var(--surface);border:2px solid var(--line);text-align:center;min-width:0}
.gc .ge{font-size:2.3rem;line-height:1.15}.gc b{font-size:.78rem;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gc .pr{font-size:.78rem;font-weight:700;color:var(--brand)}
.gc.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.gc:disabled{opacity:.45}
.glist{display:grid;gap:.5rem;max-height:20rem;overflow-y:auto}
.g-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .7rem;background:var(--bg);border-radius:.9rem;cursor:pointer;position:relative}
.g-ic{font-size:2rem}.g-in{flex:1;min-width:0}.g-in b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g-in small{font-size:.78rem}
.g-hid{opacity:.55;font-size:1rem}

/* баланс монет у шапці */
.bal{display:inline-flex;align-items:center;gap:.35rem;height:2.75rem;padding:0 .8rem;border-radius:.9rem;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink);font-weight:600;flex-shrink:0}
.bal .i{width:1.1rem;height:1.1rem;color:var(--brand)}
@media(hover:hover){.bal:hover{background:color-mix(in srgb,var(--accent) 30%,transparent)}}

/* магазин монет */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.pack{border-radius:1rem;padding:.85rem .4rem;display:grid;justify-items:center;gap:.12rem;background:var(--surface);border:2px solid var(--line);text-align:center;min-width:0}
.pack .pe{font-size:2.1rem;line-height:1.15}
.pack b{font-size:1.05rem}
.pack small{color:var(--muted);font-size:.75rem}
.pack .pr{font-weight:700;color:var(--brand);font-size:.9rem;margin-top:.15rem}
.pack.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
@media(max-width:380px){.packs{grid-template-columns:1fr 1fr}}

/* дзвінки */
.call{position:fixed;inset:0;z-index:90;background:#061312;color:#fff;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:calc(env(safe-area-inset-top) + 2.5rem) 1.25rem calc(env(safe-area-inset-bottom) + 1.75rem)}
.call #rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#061312}
.call.audio #rv{opacity:0}
.call-top{position:relative;display:grid;justify-items:center;gap:.5rem;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.call-top h3{font-size:1.6rem;font-weight:600}.call-top p{opacity:.85;font-variant-numeric:tabular-nums}
.call.vid .call-top .av{display:none}
#lv{position:absolute;right:1rem;top:calc(env(safe-area-inset-top) + 1rem);width:6.5rem;height:9rem;object-fit:cover;border-radius:1rem;background:#0a2523;box-shadow:var(--shadow);transform:scaleX(-1);z-index:1}
.call.audio #lv{display:none}
.call-btns{position:relative;display:flex;gap:1.2rem;align-items:center;align-self:end}
.cb{width:4.2rem;height:4.2rem;border-radius:1.5rem;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)}
.cb.off{background:#fff;color:#061312}.cb.red{background:var(--danger)}.cb.green{background:var(--ok)}
.cb .i{width:1.8rem;height:1.8rem}.cb.red .i{transform:rotate(135deg)}

/* налаштування вигляду */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);border-radius:.9rem;padding:.25rem}
.seg button{padding:.5rem;border-radius:.7rem;color:var(--muted);font-weight:500;font-size:.875rem}.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.sw{display:flex;gap:.7rem;flex-wrap:wrap}
.sw button{width:2.6rem;height:2.6rem;border-radius:34%;border:.2rem solid transparent;background:linear-gradient(135deg,var(--c1),var(--c2))}
.sw button.on{border-color:var(--ink)}
.wp{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.wp button{height:3.2rem;border-radius:.8rem;border:2px solid var(--line);background:var(--bg);font-size:.72rem;color:var(--muted);display:grid;place-items:end center;padding-bottom:.2rem}
.wp button.on{border-color:var(--brand);color:var(--ink)}
.wp [data-w=dots]{background-image:radial-gradient(var(--line) 1.4px,transparent 1.6px);background-size:.7rem .7rem}
.wp [data-w=grid]{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:.8rem .8rem}
.wp [data-w=aurora]{background-image:radial-gradient(70% 70% at 10% 10%,var(--brand2),transparent),radial-gradient(60% 60% at 90% 90%,var(--accent),transparent);opacity:.9}
[data-wp=dots] .msgs{background-image:radial-gradient(color-mix(in srgb,var(--ink) 11%,transparent) 1.4px,transparent 1.6px);background-size:1.4rem 1.4rem}
[data-wp=grid] .msgs{background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);background-size:1.6rem 1.6rem}
[data-wp=aurora] .msgs{background-image:radial-gradient(60% 50% at 12% 8%,color-mix(in srgb,var(--brand) 22%,transparent),transparent),radial-gradient(50% 45% at 92% 88%,color-mix(in srgb,var(--accent) 20%,transparent),transparent)}

/* адаптивність: планшет, ПК, широкі екрани, ТВ */
@media(min-width:721px) and (max-width:1100px){:root{--side-w:19.5rem}.msg{max-width:min(82%,30rem)}}
@media(min-width:1500px){:root{--side-w:27rem}}
@media(min-width:1900px){html{font-size:21px}}
@media(min-width:2500px){html{font-size:28px}}
@media(max-width:380px){html{font-size:15px}}
@media(max-height:480px) and (orientation:landscape){.chat-head{padding-block:.2rem}.composer{padding-block:.25rem}.msgs{padding-block:.5rem}.sheet{padding:1rem}.pf-top{margin:-1rem -1rem 0}}
html.tv{font-size:22px}
html.tv :focus-visible{outline:.22rem solid var(--accent);outline-offset:.2rem}
html.tv .row:focus-visible,html.tv .mem:focus-visible,html.tv .g-row:focus-visible{background:color-mix(in srgb,var(--accent) 18%,transparent)}

@media(max-width:720px){
  .auth{grid-template-columns:1fr}.auth-art{display:none}.auth-card .wordmark{display:block}
  #main{display:block}
  .side{height:100%}
  .chat{position:fixed;inset:0;transform:translateX(100%);transition:transform .24s cubic-bezier(.3,.8,.3,1);z-index:5}
  body.chat-open .chat{transform:none}
  .chat-head .back{display:grid}
  .msg{max-width:86%}
  .fab{display:grid}.side-head #new-btn{display:none}
  .modal{place-items:end stretch;padding:0}
  .sheet,.sheet.wide{max-width:none;border-radius:1.5rem 1.5rem 0 0;max-height:94dvh;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));animation:up .22s ease-out}
  @keyframes up{from{transform:translateY(100%)}}
  .gifts{grid-template-columns:repeat(3,1fr)}
  #lv{width:5.2rem;height:7.4rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{body{display:none}}