/* ═══════════════════════════════════════════════════════
   FRENDLY — Complete Stylesheet
   ═══════════════════════════════════════════════════════ */

/* ── BRAND FONT (Marggraff Kursiv Zarte) ── */
@font-face{
  font-family:'Marggraff';
  src:url('../assets/fonts/Marggraff-Kursiv-Zarte.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}

/* ── VARIABLES ── */
:root{
  --bg:#f4f4f5; --card:#fff; --brd:#e9e9eb; --hov:#f8f8f9;
  --t1:#1a1a1e; --t2:#6b6b76; --t3:#a0a0ab;
  --acc:#1a1a1e; --on-acc:#fff; --red:#e74c3c; --grn:#22c55e; --blu:#4a9eff;
  --f1:'Outfit',sans-serif; --f2:'Cormorant Garamond',Georgia,serif;
  --r:16px; --rs:12px; --sh:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.03);
  --sh2:0 4px 24px rgba(0,0,0,.08); --sh3:0 12px 48px rgba(0,0,0,.12);
  --ease:cubic-bezier(.4,0,.2,1); --tr:all .25s var(--ease);
  --hdr:58px; --nav:62px; --sb:274px; --mx:1260px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f1);background:var(--bg);color:var(--t1);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:var(--f1);cursor:pointer}
input,textarea,select{font-family:var(--f1)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.dn{display:none!important}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d0d0d5;border-radius:10px}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes heartPop{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes eq{0%{height:4px}100%{height:16px}}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes logoIn{from{opacity:0;transform:translateY(-20px) scale(.9);letter-spacing:10px}to{opacity:1;transform:translateY(0) scale(1);letter-spacing:-1px}}
@keyframes formIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes dotPulse{0%,80%,100%{opacity:.3}40%{opacity:1}}
.aF{animation:fadeIn .45s var(--ease) both}
.aS{animation:slideUp .5s var(--ease) both}
.aSi{animation:slideIn .4s var(--ease) both}
.aFc{animation:fadeScale .35s var(--ease) both}
.d1{animation-delay:.05s!important}.d2{animation-delay:.1s!important}.d3{animation-delay:.15s!important}
.d4{animation-delay:.2s!important}.d5{animation-delay:.25s!important}.d6{animation-delay:.3s!important}
.d7{animation-delay:.35s!important}.d8{animation-delay:.4s!important}

/* ── AVATAR / PLACEHOLDER ── */
.av{border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#252528,#454548);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);flex-shrink:0}
.av-xs{width:24px;height:24px;font-size:9px}.av-s{width:34px;height:34px;font-size:12px}
.av-m{width:44px;height:44px;font-size:16px}.av-l{width:60px;height:60px;font-size:22px}
.av-xl{width:100%;aspect-ratio:3/4;border-radius:0;font-size:40px}
.ph{background:linear-gradient(145deg,#1e1e22,#333338);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.15);font-size:36px;width:100%;height:100%}
.ph-r{background:linear-gradient(145deg,#2e1520,#8b3050)}.ph-c{background:linear-gradient(145deg,#151528,#cc2e2e)}.ph-s{background:linear-gradient(145deg,#1c1c22,#3a3a52)}

/* ── BUTTONS ── */
.btn1{background:var(--acc);color:#fff;border:none;border-radius:24px;padding:10px 24px;font-size:13.5px;font-weight:600;transition:var(--tr)}
.btn1:hover{opacity:.85;transform:translateY(-1px)}
.btn2{background:var(--card);color:var(--t2);border:1px solid var(--brd);border-radius:var(--rs);padding:9px 0;font-size:13px;font-weight:500;flex:1;transition:var(--tr)}
.btn2:hover{border-color:var(--t3);color:var(--t1)}

/* ── TOAST ── */
#toast-box{position:fixed;top:74px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:12px 18px;box-shadow:var(--sh2);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;animation:toastIn .4s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;cursor:pointer;min-width:240px;color:var(--t1)}
.toast-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(124,92,255,.12);color:#7c5cff;flex-shrink:0}
.toast-tx{flex:1}
.toast.out{animation:toastOut .3s ease forwards}

/* ══════════════════════════════════
   AUTH
   ══════════════════════════════════ */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#050507 0%,#0a0a0e 35%,#101015 65%,#050507 100%);background-size:300% 300%;animation:bgShift 14s ease infinite;position:relative;overflow:hidden}
.auth-bg-dots{position:absolute;inset:0;opacity:.03;background-image:radial-gradient(circle at 25% 25%,#fff 1px,transparent 1px),radial-gradient(circle at 75% 75%,#fff 1px,transparent 1px);background-size:60px 60px}
.auth-glow{position:absolute;border-radius:50%}.auth-glow--t{top:-200px;right:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.02),transparent 60%)}.auth-glow--b{bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.015),transparent 60%)}
.auth-card{width:420px;max-width:92vw;padding:48px 40px;border-radius:24px;background:rgba(16,16,20,.72);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.06);box-shadow:0 24px 80px rgba(0,0,0,.65);animation:formIn .7s var(--ease)}
.auth-logo{text-align:center;margin-bottom:36px}
.auth-logo h1{font-family:var(--f2);font-size:44px;font-style:italic;font-weight:700;color:#fff;letter-spacing:-1px;animation:logoIn .8s var(--ease)}
.auth-logo p{color:rgba(255,255,255,.35);font-size:13px;margin-top:6px;font-weight:300}
.auth-tabs{display:flex;gap:0;margin-bottom:28px;background:rgba(255,255,255,.06);border-radius:var(--rs);padding:3px}
.auth-tab{flex:1;padding:10px 0;border-radius:10px;border:none;font-size:13.5px;font-weight:500;background:transparent;color:rgba(255,255,255,.4);transition:var(--tr)}
.auth-tab.on{background:rgba(255,255,255,.12);color:#fff}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:11.5px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:5px}
.fg input,.fg textarea{width:100%;padding:12px 16px;border-radius:var(--rs);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-size:14px;transition:var(--tr);outline:none}
.fg input:focus,.fg textarea:focus{border-color:rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.2)}
.pw{position:relative}.pw input{padding-right:44px}
.pw button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.3);padding:4px;font-size:14px;cursor:pointer}
.auth-err{max-height:0;overflow:hidden;border-radius:10px;font-size:12.5px;font-weight:500;color:var(--red);background:rgba(231,76,60,.12);transition:all .3s ease}
.auth-err.on{max-height:60px;padding:10px 14px;margin-bottom:10px}
.auth-btn{width:100%;padding:14px;border-radius:14px;border:none;background:#fff;color:#111;font-size:14.5px;font-weight:600;margin-top:8px;transition:var(--tr);position:relative}
.auth-btn:hover{opacity:.9;transform:translateY(-1px)}
.auth-btn.ld{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);pointer-events:none}
.auth-hint{text-align:center;font-size:12px;color:rgba(255,255,255,.2);margin-top:20px}

/* ── Registration: segmented Email/Phone toggle ── */
.auth-seg{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--rs);padding:4px}
.auth-seg-btn{flex:1;padding:9px 0;border:none;border-radius:9px;background:transparent;color:rgba(255,255,255,.4);font-size:13px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.auth-seg-btn:hover{color:rgba(255,255,255,.7)}
.auth-seg-btn.on{background:rgba(255,255,255,.12);color:#fff}

/* ── Verification screen ── */
.auth-verify-lead{text-align:center;font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:22px}
.auth-verify-lead b{color:#fff;font-weight:600}
.auth-code{display:flex;gap:9px;justify-content:center;margin-bottom:14px}
.auth-code.shake{animation:shakeX .4s ease}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-code-box{width:46px;height:56px;text-align:center;font-size:24px;font-weight:700;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;outline:none;transition:var(--tr);caret-color:#fff}
.auth-code-box:focus{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.auth-demo-note{text-align:center;font-size:11.5px;color:rgba(255,255,255,.3);margin-bottom:8px}
.auth-demo-note b{color:rgba(255,255,255,.7);font-weight:700;letter-spacing:1px}
.auth-verify-foot{display:flex;justify-content:space-between;margin-top:16px}
.auth-link{background:none;border:none;color:rgba(255,255,255,.45);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--f1);transition:color .2s;padding:0}
.auth-link:hover{color:#fff}

/* ══════════════════════════════════
   HEADER
   ══════════════════════════════════ */
header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--brd);animation:fadeIn .4s ease}
.hdr-in{max-width:var(--mx);margin:0 auto;padding:0 28px;height:var(--hdr);display:flex;align-items:center;gap:16px}
.logo{font-family:var(--f2);font-size:28px;font-style:italic;font-weight:700;color:var(--t1);cursor:pointer;letter-spacing:-.5px;user-select:none}
.hdr-search{display:flex;align-items:center;gap:8px;background:var(--hov);border-radius:var(--rs);padding:8px 14px;flex:0 1 300px;border:1px solid transparent;transition:var(--tr)}
.hdr-search:focus-within{border-color:var(--brd);box-shadow:0 0 0 3px rgba(26,26,30,.04)}
.hdr-search input{border:none;background:transparent;outline:none;font-size:13.5px;color:var(--t1);width:100%}
.hdr-search input::placeholder{color:var(--t3)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr-ibtn{background:none;border:none;padding:8px;color:var(--t2);border-radius:10px;position:relative;transition:var(--tr)}
.hdr-ibtn:hover{background:var(--hov);color:var(--t1)}
.bdg{position:absolute;top:3px;right:3px;min-width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid #fff}
.bdg-n{min-width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.hdr-pub{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--brd);border-radius:24px;padding:7px 18px;font-size:13px;color:var(--t2);font-weight:500;transition:var(--tr)}
.hdr-pub:hover{border-color:var(--t3);color:var(--t1);transform:translateY(-1px)}
.hdr-av{cursor:pointer}.hdr-av .av{border:2px solid var(--brd);transition:var(--tr)}.hdr-av:hover .av{border-color:var(--t3)}

/* Dropdown */
.dd{position:relative}
.dd-p{display:none;position:absolute;top:calc(100% + 8px);min-width:280px;background:var(--card);border-radius:var(--r);border:1px solid var(--brd);box-shadow:var(--sh3);overflow:hidden;z-index:300;animation:fadeScale .2s ease}
.dd-p.r{right:0;min-width:200px}.dd-p.l{left:50%;transform:translateX(-50%)}
.dd.on .dd-p{display:block}
.dd-h{padding:14px 16px;font-size:14px;font-weight:600;border-bottom:1px solid var(--brd)}
.dd-i{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:none;background:transparent;font-size:13px;color:var(--t2);text-align:left;transition:background .15s}
.dd-i:hover{background:var(--hov)}.dd-i.red{color:var(--red)}
.dd-hr{border:none;border-top:1px solid var(--brd);margin:4px 0}

/* ══════════════════════════════════
   LAYOUT
   ══════════════════════════════════ */
.shell{max-width:var(--mx);margin:0 auto;padding:20px 20px 60px;display:flex;gap:20px}
#nav-rail{width:var(--nav);flex-shrink:0;position:sticky;top:calc(var(--hdr) + 20px);align-self:flex-start;display:flex;flex-direction:column;gap:4px;background:var(--card);border-radius:var(--r);padding:10px 7px;border:1px solid var(--brd);box-shadow:var(--sh);animation:slideUp .4s ease}
.nb{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;border:none;background:transparent;color:var(--t3);position:relative;transition:var(--tr)}
.nb:hover{background:var(--hov);color:var(--t1)}.nb.on{background:var(--hov);color:var(--t1)}
.nb .bdg{top:6px;right:4px;width:7px;height:7px;min-width:7px}
.nb .bdg-num{top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:9px;border:2px solid var(--card);box-shadow:0 0 0 1px var(--red)}
#sidebar{width:var(--sb);flex-shrink:0;position:sticky;top:calc(var(--hdr) + 20px);align-self:flex-start;max-height:calc(100vh - var(--hdr) - 40px);overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:16px}
#sidebar::-webkit-scrollbar{display:none}
#sidebar.off{display:none}
#main{flex:1;min-width:0}

/* ══════════════════════════════════
   SIDEBAR CARDS
   ══════════════════════════════════ */
.s-card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--brd);box-shadow:var(--sh)}
.s-card__cover{position:relative;overflow:hidden}
.s-card__grad{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));padding:32px 16px 14px}
.s-card__un{color:#fff;font-size:13.5px;font-weight:500;opacity:.95}
.s-card__stats{display:flex;justify-content:space-around;padding:16px 10px 12px;border-bottom:1px solid var(--brd)}
.stat{text-align:center;cursor:pointer}.stat b{font-size:16px;display:block;color:var(--t1)}.stat small{font-size:10.5px;color:var(--t3)}
.s-card__btns{display:flex;gap:8px;padding:12px 14px 14px}

/* Music */
.mus-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--brd);font-size:14px;font-weight:600;color:var(--t1)}
.mus-head svg{flex-shrink:0}
.mus-more{margin-left:auto;font-size:12px;color:var(--t3);background:none;border:none;cursor:pointer}
.mus-more:hover{color:var(--t1)}
.mus-eq{display:flex;align-items:flex-end;height:16px;margin-left:6px;gap:1px}
.mus-eq span{display:inline-block;width:3px;background:var(--acc);border-radius:2px;animation:eq .8s ease-in-out infinite alternate}
.mus-eq span:nth-child(1){height:8px;animation-delay:0s}.mus-eq span:nth-child(2){height:14px;animation-delay:.2s}
.mus-eq span:nth-child(3){height:6px;animation-delay:.4s}.mus-eq span:nth-child(4){height:11px;animation-delay:.1s}
.mi{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;transition:background .15s}
.mi:hover{background:var(--hov)}.mi.pl{background:var(--hov)}
.mi-th{width:36px;height:36px;border-radius:8px;overflow:hidden;flex-shrink:0;position:relative}
.mi-i{flex:1;min-width:0}.mi-t{font-size:12.5px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi.pl .mi-t{font-weight:700}.mi-a{font-size:11px;color:var(--t3)}.mi-d{font-size:11.5px;color:var(--t3);flex-shrink:0}
.mi-pause{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}

/* Groups */
.gi{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;transition:background .15s}
.gi:hover{background:var(--hov)}
.gi-i{flex:1;min-width:0}.gi-n{font-size:13px;font-weight:600;color:var(--t1)}.gi-d{font-size:11px;color:var(--t3)}
.gi-j{width:30px;height:30px;border-radius:8px;border:1px solid var(--brd);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--t3);flex-shrink:0;transition:var(--tr)}
.gi-j:hover{border-color:var(--t3);color:var(--t1)}

/* ══════════════════════════════════
   POST CARD
   ══════════════════════════════════ */
.pc{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--brd);box-shadow:var(--sh);margin-bottom:18px;transition:var(--tr)}
.pc:hover{box-shadow:var(--sh2)}
.pc-in{display:flex;min-height:320px}
.pc-l{flex:0 0 55%;display:flex;flex-direction:column}
.pc-au{padding:12px 16px;display:flex;align-items:center;gap:10px}
.pc-au-n{font-size:13px;font-weight:600;color:var(--t1)}.pc-au-t{font-size:11px;color:var(--t3);margin-left:8px}
.pc-img{flex:1;position:relative;overflow:hidden;cursor:pointer}
.pc-img .ph{min-height:200px;transition:transform .6s var(--ease)}
.pc-img:hover .ph{transform:scale(1.03)}
.pc-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:5}
.pc-heart.show{animation:heartPop .7s ease forwards}
.pc-cap{padding:10px 16px 4px;font-size:12.5px;color:var(--t2);line-height:1.5}.pc-cap b{color:var(--t1);font-weight:600}
.pc-dots{display:flex;justify-content:center;gap:5px;padding:8px 0}
.pc-dot{width:6px;height:6px;border-radius:50%;background:var(--brd);transition:background .2s}.pc-dot.on{background:var(--t1)}
.pc-act{display:flex;align-items:center;gap:16px;padding:4px 16px 14px}
.pa{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:0;color:var(--t2);transition:color .2s}
.pa:hover{color:var(--t1)}.pa.liked{color:var(--red)}.pa.liked svg{fill:var(--red);stroke:var(--red)}
.pa.saved svg{fill:var(--t1);stroke:var(--t1)}.pa-c{font-size:12.5px;font-weight:600}.pa-r{margin-left:auto}

/* Comments */
.pc-in{display:flex;align-items:stretch;max-height:640px}
.pc-l{flex:0 0 55%;display:flex;flex-direction:column;min-width:0;max-height:640px;overflow:hidden}
.pc-r{flex:1;border-left:1px solid var(--brd);display:flex;flex-direction:column;min-width:0;align-self:stretch;max-height:640px}
.pc-ch{padding:14px 16px;border-bottom:1px solid var(--brd);font-size:14px;font-weight:600;flex-shrink:0}
.pc-cs{flex:1;overflow-y:auto;min-height:0}
.cm{padding:10px 16px;border-bottom:1px solid var(--hov)}
.cm-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cm-u{font-size:12px;font-weight:600;color:var(--t1)}.cm-t{font-size:10.5px;color:var(--t3)}
.cm-tx{font-size:12.5px;color:var(--t2);margin-left:32px;line-height:1.45}
.cm-more{display:block;width:100%;padding:10px;background:none;border:none;font-size:12px;color:var(--t3);cursor:pointer}
.cm-more:hover{color:var(--t2)}
.pc-ci{padding:10px 14px;border-top:1px solid var(--brd);display:flex;gap:8px;flex-shrink:0;align-items:center}
.pc-ci input{flex:1;min-width:0;border:1px solid var(--brd);border-radius:24px;padding:8px 16px;font-size:12.5px;background:var(--hov);color:var(--t1);outline:none;transition:var(--tr)}
.pc-ci input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,26,30,.06)}
.cm-send{background:var(--acc);color:#fff;border:none;border-radius:50%;width:34px;height:34px;font-size:16px;transition:var(--tr);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cm-send:hover{opacity:.85;transform:scale(1.05)}
body.dark .cm-send{color:var(--bg)}

/* Post with real image should not stretch column */
.pc-img{flex:1;position:relative;overflow:hidden;cursor:pointer;max-height:460px;min-height:200px}
.pc-img__real{width:100%;height:100%;max-height:460px;object-fit:cover;display:block}
.pc-img__video{width:100%;height:100%;max-height:460px;display:block;background:#000}

/* ══════════════════════════════════
   FEED
   ══════════════════════════════════ */
.pg-t{font-size:22px;font-weight:700;margin-bottom:20px}

/* Stories */
.stories{display:flex;gap:14px;margin-bottom:24px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{width:72px;flex-shrink:0;text-align:center;cursor:pointer}
.story-ring{width:68px;height:68px;border-radius:50%;padding:3px;margin-bottom:6px}
.story-ring--g{background:linear-gradient(135deg,#667eea,#764ba2)}
.story-ring--d{border:2px dashed var(--brd);display:flex;align-items:center;justify-content:center;padding:0;font-size:22px;color:var(--t3)}
.story-ring--m{background:var(--brd)}
.story-ring .av{width:100%;height:100%;border:2px solid var(--card)}
.story-n{font-size:10.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Composer */
.comp{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);padding:18px;margin-bottom:18px;display:flex;gap:12px;box-shadow:var(--sh);align-items:flex-start}
.comp > .av,.comp > .av.av-m{flex-shrink:0;flex-grow:0;width:44px!important;height:44px!important;margin-top:2px;border-radius:50%!important;overflow:hidden}
.comp > .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.comp > div{flex:1;min-width:0;display:flex;flex-direction:column}
.comp textarea{flex:1;width:100%;border:1px solid var(--brd);outline:none;resize:none;font-size:15px;color:var(--t1);min-height:90px;background:var(--hov);line-height:1.5;font-family:var(--f1);overflow-y:auto;max-height:300px;padding:14px 18px;display:block;border-radius:18px;transition:border-color .15s,background .15s}
.comp textarea::placeholder{color:var(--t3)}
.comp textarea:focus{outline:none;border-color:var(--t3);background:var(--card)}
body.dark .comp textarea{background:#1a1a1f;border-color:#2a2a32}
body.dark .comp textarea:focus{background:#1f1f25;border-color:#36363e}
.comp-b{display:flex;align-items:center;gap:14px;padding-top:10px;border-top:1px solid var(--brd)}
.comp-b button{background:none;border:none;padding:4px;color:var(--t3);font-size:18px;transition:color .15s}
.comp-b button:hover{color:var(--t1)}
.comp-sub{margin-left:auto!important;background:var(--acc)!important;color:#fff!important;border-radius:24px!important;padding:8px 22px!important;font-size:13px!important;font-weight:600!important}

/* ══════════════════════════════════
   PROFILE
   ══════════════════════════════════ */
.prof-h{margin-bottom:8px}
.prof-name{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.prof-name h1{font-size:32px;font-weight:700}
.prof-bio{font-family:var(--f2);font-size:14.5px;color:var(--t2);font-style:italic;line-height:1.5;max-width:520px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--brd);margin-bottom:20px}
.tab{display:flex;align-items:center;gap:7px;padding:12px 24px;border:none;background:transparent;font-size:13.5px;color:var(--t3);font-weight:400;border-bottom:2px solid transparent;transition:var(--tr);cursor:pointer}
.tab:hover{color:var(--t2)}.tab.on{color:var(--t1);font-weight:600;border-bottom-color:var(--t1)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-radius:14px;overflow:hidden;margin-bottom:24px}
.pgrid-i{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer}
.pgrid-i .ph{filter:grayscale(75%) contrast(1.1);transition:filter .3s,transform .4s}
.pgrid-i:hover .ph{filter:grayscale(40%) contrast(1.15);transform:scale(1.06)}
.pgrid-i::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .3s}
.pgrid-i:hover::after{background:rgba(0,0,0,.2)}
.pgrid-exp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;transition:var(--tr);z-index:2;color:#fff;pointer-events:none}
.pgrid-i:hover .pgrid-exp{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Shorts */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.si{aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;cursor:pointer}
.si .ph{filter:grayscale(65%);transition:filter .3s}.si:hover .ph{filter:grayscale(30%)}
.si-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);transition:background .3s}
.si:hover .si-ov{background:rgba(0,0,0,.3)}
.si-play{opacity:0;transition:opacity .3s;color:#fff}.si:hover .si-play{opacity:1}
.si-views{position:absolute;bottom:10px;left:12px;display:flex;align-items:center;gap:5px;font-size:11.5px;color:#fff;font-weight:600}

/* Empty */
.empty{text-align:center;padding:60px 20px;color:var(--t3)}
.empty p{font-size:15px;margin-top:14px}

/* ══════════════════════════════════
   MESSAGES
   ══════════════════════════════════ */
.msg-wrap{display:flex;height:calc(100vh - var(--hdr) - 60px);background:var(--card);border-radius:var(--r);border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh)}
/* Когда играет мини-плеер (84px), чат сжимается чтобы не залезать под него */
body.has-player .msg-wrap{height:calc(100vh - var(--hdr) - 60px - 84px)}
.msg-list{width:300px;border-right:1px solid var(--brd);display:flex;flex-direction:column}
.msg-list-h{padding:16px 18px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;gap:8px}
.msg-list-h h3{font-size:18px;font-weight:700;margin:0}
.msg-new-btn{
  width:34px;height:34px;border-radius:10px;
  border:1px solid var(--brd);
  background:var(--hov);
  color:var(--acc);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--tr);flex-shrink:0;
}
.msg-new-btn:hover{
  background:var(--acc);
  color:#fff;
  border-color:var(--acc);
  transform:rotate(90deg);
  box-shadow:0 4px 12px rgba(139,92,246,.32);
}
.msg-new-btn svg{stroke-width:2.6}
/* Аватар беседы (с инициалом ИЛИ с картинкой) */
.mc-av-group{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;flex-shrink:0;line-height:1;overflow:hidden}
.mc-av-group img{width:100%;height:100%;object-fit:cover;display:block}
.mc-av-group.has-img{background:none !important}
.msg-ch-group .mc-av-group{width:40px;height:40px;font-size:16px}
.mc-prev b{font-weight:600;color:var(--t2)}
.mc-prev i{color:var(--t3);font-style:italic;font-size:12px}
/* Системные сообщения в группе */
.bub-system{align-self:center;background:rgba(120,120,128,.15);color:var(--t3);font-size:11.5px;padding:5px 14px;border-radius:20px;margin:8px 0;max-width:80%;text-align:center;font-style:italic}
/* Имя автора над сообщением в группе */
.bub-author{font-size:12px;font-weight:700;margin-bottom:3px;line-height:1.2}
.bub-cont{margin-top:-6px;border-top-left-radius:6px}
.msg-list-b{flex:1;overflow-y:auto}
.mc{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;border-bottom:1px solid var(--hov);transition:background .15s}
.mc:hover,.mc.on{background:var(--hov)}
.mc-av{position:relative}.mc-on{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--grn);border:2.5px solid var(--card)}
.mc-i{flex:1;min-width:0}.mc-top{display:flex;justify-content:space-between;align-items:center}
.mc-n{font-size:13.5px;font-weight:600;color:var(--t1)}.mc-time{font-size:11px;color:var(--t3)}
.mc-prev{font-size:12.5px;color:var(--t3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-prev.ur{color:var(--t1);font-weight:600}
.mc-bdg{width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0}
.msg-chat{flex:1;display:flex;flex-direction:column}
.msg-ch{padding:14px 20px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:12px}
.msg-cn{font-size:14px;font-weight:600}.msg-cs{font-size:11px}.msg-cs.onl{color:var(--grn)}.msg-cs.off{color:var(--t3)}
.msg-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:65%;padding:10px 14px;border-radius:18px;font-size:13.5px;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere}
.bub-me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px}
.bub-th{align-self:flex-start;background:var(--hov);color:var(--t1);border-bottom-left-radius:4px}
.bub-t{font-size:10px;margin-top:4px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:1px}.bub-me .bub-t{color:rgba(255,255,255,.5)}.bub-th .bub-t{color:var(--t3)}
.bub-ticks svg{display:block}
.bub-tx{white-space:pre-wrap}
/* Бабблы с медиа */
.bub-with-media{padding:4px;max-width:340px}
.bub-media{border-radius:14px;overflow:hidden;display:block;line-height:0}
.bub-media img,.bub-media video{display:block;width:100%;max-height:380px;object-fit:cover;border-radius:14px;cursor:zoom-in}
.bub-media video{cursor:default}
.bub-with-media .bub-tx{padding:6px 10px 2px}
.bub-with-media .bub-t{padding:0 10px 4px}
/* Файлы */
.bub-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08);text-decoration:none;color:inherit;min-width:200px;max-width:280px;transition:background .2s}
.bub-th .bub-file{background:rgba(0,0,0,.04)}
.bub-file:hover{background:rgba(255,255,255,.14)}
.bub-th .bub-file:hover{background:rgba(0,0,0,.07)}
.bub-file-ic{font-size:24px;flex-shrink:0;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.bub-th .bub-file-ic{background:rgba(0,0,0,.05)}
.bub-file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bub-file-n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bub-file-s{font-size:11px;opacity:.7}
.bub-file-dl{opacity:.7;flex-shrink:0}
/* Голосовое — реальная звуковая дорожка */
.bub-voice{display:flex;align-items:center;gap:12px;min-width:230px;padding:2px 4px}

/* Кнопка play — компактная и согласованная с фоном баббла */
.bub-voice-play{
  width:36px;height:36px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  cursor:pointer;transition:transform .15s ease,background .15s ease;
}
/* Исходящие (я) — фон тёмный, кнопка светлая внутри (но не ярко-белая) */
.bub-me .bub-voice-play{
  background:rgba(255,255,255,.22);color:#fff;
}
.bub-me .bub-voice-play:hover{background:rgba(255,255,255,.32);transform:scale(1.06)}
/* Входящие (он) — кнопка тёмная, спокойная */
.bub-th .bub-voice-play{
  background:rgba(0,0,0,.35);color:#fff;
}
body:not(.dark) .bub-th .bub-voice-play{background:var(--acc);color:#fff}
.bub-th .bub-voice-play:hover{background:rgba(0,0,0,.5);transform:scale(1.06)}
body:not(.dark) .bub-th .bub-voice-play:hover{background:#000}

.bub-voice-wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;cursor:pointer;padding:6px 0;min-width:150px}
.bub-voice-bar{
  width:3px;border-radius:2px;flex-shrink:0;flex-grow:1;min-height:3px;
  --p:0%;
  background:linear-gradient(to right, var(--bub-on, currentColor) var(--p), var(--bub-off, currentColor) var(--p));
  transition:--p .08s linear;
}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}

/* Исходящие — серо-белые бары на тёмном фоне */
.bub-me .bub-voice-bar{--bub-on:#fff;--bub-off:rgba(255,255,255,.35);background:linear-gradient(to right,var(--bub-on) var(--p),var(--bub-off) var(--p))}
.bub-me .bub-voice-bar.played{--p:100%}

/* Входящие — контрастные на светлом ИЛИ на тёмном фоне */
.bub-th .bub-voice-bar{
  --bub-on:var(--acc);
  --bub-off:rgba(120,120,128,.42);
  background:linear-gradient(to right,var(--bub-on) var(--p),var(--bub-off) var(--p));
}
.bub-th .bub-voice-bar.played{--p:100%}
/* В тёмной теме баббл-входящий имеет тёмный фон — нужны светлые бары */
body.dark .bub-th .bub-voice-bar{
  --bub-on:#fff;
  --bub-off:rgba(255,255,255,.28);
  background:linear-gradient(to right,var(--bub-on) var(--p),var(--bub-off) var(--p));
}

.bub-voice-time{
  font-size:11px;flex-shrink:0;min-width:34px;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:500;
}
.bub-me .bub-voice-time{color:rgba(255,255,255,.7)}
.bub-th .bub-voice-time{color:var(--t3)}
body.dark .bub-th .bub-voice-time{color:rgba(255,255,255,.55)}

.msg-inp{padding:12px 16px;border-top:1px solid var(--brd);display:flex;gap:6px;align-items:center}
.msg-inp input{flex:1;border:1px solid var(--brd);border-radius:24px;padding:10px 16px;font-size:13.5px;background:var(--hov);color:var(--t1);outline:none;transition:var(--tr)}
.msg-inp input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,26,30,.06)}
.msg-inp input:disabled{opacity:.4}
.msg-ibtn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);flex-shrink:0}
.msg-ibtn:hover{background:var(--hov);color:var(--t1)}
.msg-mic{color:var(--t2)}.msg-mic:hover{color:var(--red)}
.msg-send{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;border:none;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0;cursor:pointer}
.msg-send:hover{opacity:.85;transform:scale(1.05)}

/* Превью прикреплённого файла перед отправкой — карточка */
.msg-attach-preview{padding:12px 16px;border-top:1px solid var(--brd);display:flex;align-items:center;gap:10px;background:var(--hov);position:relative}
.map-card{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;background:var(--card);border:1px solid var(--brd);border-radius:12px;max-width:420px;min-width:0;flex:1;box-shadow:var(--sh)}
.map-card-img{padding:6px 14px 6px 6px}
.map-ic{width:44px;height:44px;border-radius:10px;background:linear-gradient(145deg,#3a3a44,#1f1f25);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#fff}
.map-ic-video{background:linear-gradient(145deg,#3a1f1f,#7a2e2e)}
.map-ic-voice{background:linear-gradient(145deg,#1f3a2e,#2e7a52)}
.map-img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;display:block}
/* Миниатюра видео с play-иконкой поверх */
.map-vid-thumb{position:relative;width:60px;height:44px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#000}
.map-vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.map-vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:#fff;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.map-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.map-meta-n{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.map-meta-s{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.map-rm{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--brd);background:var(--card);color:var(--t2);cursor:pointer;font-size:13px;transition:var(--tr);display:flex;align-items:center;justify-content:center}
.map-rm:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* Панель записи голосового — с canvas-волной живого микрофона */
.msg-voice-rec{padding:14px 16px;border-top:1px solid var(--brd);display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.15)),var(--hov)}
body.dark .msg-voice-rec{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25)),#1a1a1e}
.msg-voice-dot{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(231,76,60,.55);animation:voiceDot 1.2s ease-in-out infinite;flex-shrink:0}
@keyframes voiceDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(231,76,60,.55);transform:scale(1)}50%{opacity:.6;box-shadow:0 0 0 8px rgba(231,76,60,0);transform:scale(1.18)}}
.msg-voice-lbl{font-size:13px;color:var(--t1);font-weight:600;flex-shrink:0;letter-spacing:.2px}
.msg-voice-live{flex:1;height:42px;min-width:120px;display:block;border-radius:8px}
.msg-voice-time{font-size:13px;color:var(--t1);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:600;min-width:38px;text-align:center}
.msg-voice-cancel,.msg-voice-stop{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:var(--tr);flex-shrink:0}
.msg-voice-cancel{background:var(--card);border:1px solid var(--brd);color:var(--t2)}
.msg-voice-cancel:hover{background:var(--red);color:#fff;border-color:var(--red)}
.msg-voice-stop{background:var(--acc);color:#fff}
.msg-voice-stop:hover{opacity:.85;transform:scale(1.06)}

/* Лайтбокс для изображений из чата */
.chat-lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:fadeIn .25s var(--ease)}
.chat-lb img{max-width:95vw;max-height:90vh;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.6)}

.msg-typing{display:flex;gap:4px;padding:4px 12px;align-self:flex-start}
.msg-typing span{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:dotPulse 1.4s ease-in-out infinite}
.msg-typing span:nth-child(2){animation-delay:.2s}.msg-typing span:nth-child(3){animation-delay:.4s}
.msg-empty{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--t3)}

/* Метка "отредактировано" */
.bub-edited{font-style:italic;margin-right:4px;opacity:.8}

/* Контекстное меню действий над сообщением */
.bub-own{cursor:default}
.bub-own:hover{filter:brightness(1.04)}
.bub-menu{position:fixed;z-index:10001;min-width:190px;background:var(--card);border:1px solid var(--brd);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.08);padding:6px;display:flex;flex-direction:column;gap:2px;animation:fadeScale .18s var(--ease)}
.bub-menu-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border:none;background:none;color:var(--t1);font-size:13px;border-radius:8px;cursor:pointer;text-align:left;transition:var(--tr);font-family:inherit}
.bub-menu-i:hover{background:var(--hov)}
.bub-menu-i svg{color:var(--t2);flex-shrink:0}
.bub-menu-i--red{color:var(--red)}
.bub-menu-i--red svg{color:var(--red)}
.bub-menu-i--red:hover{background:rgba(231,76,60,.1)}

/* Inline-редактор сообщения */
.bub-edit-ta{
  width:100%;
  min-width:200px;
  resize:none;
  border:none;
  outline:none;
  background:rgba(255,255,255,.12);
  color:inherit;
  font-family:inherit;
  font-size:13.5px;
  line-height:1.45;
  padding:6px 8px;
  border-radius:8px;
}
.bub-th .bub-edit-ta{background:rgba(0,0,0,.06);color:var(--t1)}
.bub-edit-actions{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}
.bub-edit-cancel,.bub-edit-save{
  border:none;font-family:inherit;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:14px;cursor:pointer;transition:var(--tr);
}
.bub-edit-cancel{background:rgba(255,255,255,.12);color:inherit}
.bub-edit-save{background:#fff;color:var(--acc)}
.bub-th .bub-edit-cancel{background:rgba(0,0,0,.06);color:var(--t2)}
.bub-th .bub-edit-save{background:var(--acc);color:#fff}
.bub-edit-cancel:hover{opacity:.8}
.bub-edit-save:hover{opacity:.9;transform:translateY(-1px)}

/* ══════════════════════════════════
   SETTINGS
   ══════════════════════════════════ */
.set-page{max-width:600px}
.set-sec{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh);margin-bottom:18px}
.set-sec-h{padding:18px 20px;border-bottom:1px solid var(--brd)}.set-sec-h h3{font-size:15px;font-weight:600}
.set-prof{padding:16px 20px;display:flex;align-items:center;gap:16px}
.set-prof-i{flex:1}.set-prof-n{font-size:16px;font-weight:600}.set-prof-u{font-size:13px;color:var(--t3)}
.set-edit{padding:8px 18px;border-radius:12px;border:1px solid var(--brd);background:var(--card);font-size:13px;color:var(--t2);font-weight:500;transition:var(--tr)}
.set-edit:hover{border-color:var(--t3);color:var(--t1)}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--hov)}
.set-row:last-child{border-bottom:none}
.set-lbl{font-size:14px;font-weight:500}.set-desc{font-size:12px;color:var(--t3);margin-top:2px}
.tgl{width:44px;height:24px;border-radius:12px;cursor:pointer;position:relative;background:var(--brd);transition:background .25s;border:none;padding:0;flex-shrink:0}
.tgl.on{background:var(--acc)}
.tgl-dot{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .25s var(--ease)}
.tgl.on .tgl-dot{left:23px}
.th-btns{display:flex;gap:6px}
.th-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--brd);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--tr)}
.th-btn.on{border:2px solid var(--acc)}
.th-btn--l{background:#fff}.th-btn--d{background:#1a1a22}
.set-sel{padding:6px 12px;border-radius:10px;border:1px solid var(--brd);background:var(--card);font-size:13px;color:var(--t1);cursor:pointer;outline:none}

/* ══════════════════════════════════
   SEARCH
   ══════════════════════════════════ */
.srch-box{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);padding:20px;box-shadow:var(--sh)}
.srch-inp{width:100%;padding:14px 20px;border-radius:14px;border:1px solid var(--brd);background:var(--hov);font-size:15px;color:var(--t1);outline:none;transition:var(--tr)}
.srch-inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,26,30,.06)}
.srch-tags{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.srch-tag{padding:8px 18px;border-radius:24px;border:1px solid var(--brd);background:var(--card);font-size:13px;color:var(--t2);font-weight:500;cursor:pointer;transition:var(--tr)}
.srch-tag:hover{border-color:var(--t3);color:var(--t1)}.srch-tag.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.srch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.srch-gi{aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;cursor:pointer}
.srch-gi .ph{filter:grayscale(60%);transition:filter .3s,transform .4s}
.srch-gi:hover .ph{filter:grayscale(20%);transform:scale(1.06)}
.srch-users{margin-top:20px}
.srch-u{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hov)}
.srch-u-i{flex:1}.srch-u-n{font-size:14px;font-weight:600;color:var(--t1)}.srch-u-un{font-size:12px;color:var(--t3)}
.srch-u-btn{padding:6px 18px;border-radius:20px;font-size:12px;font-weight:600;transition:var(--tr)}
.srch-u-btn.follow{background:var(--acc);color:#fff;border:none}
.srch-u-btn.following{background:var(--card);color:var(--t2);border:1px solid var(--brd)}

/* ══════════════════════════════════
   MODAL
   ══════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:500}
.modal{background:var(--card);border-radius:20px;width:500px;max-width:92vw;box-shadow:var(--sh3);animation:modalIn .35s var(--ease);overflow:hidden}
.modal--img{background:transparent;box-shadow:none;width:auto;max-width:85vw}
.mh{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--brd)}
.mh h3{font-size:17px;font-weight:600}.mh button{background:none;border:none;font-size:20px;color:var(--t3);padding:4px;transition:color .15s}.mh button:hover{color:var(--t1)}
.mb{padding:20px 22px}
.mb textarea,.mb input{width:100%;border:1px solid var(--brd);border-radius:var(--rs);padding:14px;font-size:14px;resize:none;background:var(--hov);color:var(--t1);outline:none;transition:var(--tr)}
.mb textarea:focus,.mb input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,26,30,.06)}
.mb .fg label{color:var(--t2)}
.mb .fg input,.mb .fg textarea{background:var(--hov);color:var(--t1);border:1px solid var(--brd)}
.m-attach{display:flex;gap:10px;margin-top:14px}
.m-attach button{background:none;border:none;font-size:20px;padding:4px;opacity:.45;transition:opacity .15s;cursor:pointer}
.m-attach button:hover{opacity:1}
.mf{padding:14px 22px;border-top:1px solid var(--brd);display:flex;justify-content:flex-end}
.m-img-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:20px;z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ══════════════════════════════════
   DARK THEME
   ══════════════════════════════════ */
body.dark{
  --bg:#0f0f12;
  --card:#17171b;
  --brd:#26262c;
  --hov:#1d1d22;
  --t1:#ebebef;
  --t2:#8e8e98;
  --t3:#5c5c66;
  --acc:#e8e8ec; --on-acc:#0f0f12;
  --red:#ef4444;
  --grn:#22c55e;
  --blu:#3b82f6;
  --warning:#f59e0b;
  --sh:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.25);
  --sh2:0 8px 28px rgba(0,0,0,.4);
  --sh3:0 16px 48px rgba(0,0,0,.5)
}
body.dark header{background:rgba(15,15,18,.85);backdrop-filter:blur(20px);border-bottom-color:#26262c}

/* Buttons - dark surface with subtle gradient */
body.dark .auth-btn{background:#2a2a32;color:var(--t1);border:1px solid #36363e}
body.dark .auth-btn:hover{background:#33333c;border-color:#42424c;transform:translateY(-1px)}
body.dark .btn1{background:#2a2a32;color:var(--t1);border:1px solid #36363e}
body.dark .btn1:hover{background:#33333c;border-color:#42424c}
body.dark .hdr-pub{background:var(--card);border-color:var(--brd);color:var(--t2)}
body.dark .hdr-pub:hover{background:var(--hov);color:var(--t1);border-color:#36363e}

/* Composer publish button - subtle accent */
body.dark .comp-sub{background:#2a2a32!important;color:var(--t1)!important;border:1px solid #36363e!important}
body.dark .comp-sub:hover{background:#33333c!important}

/* Send buttons - circular, subtle */
body.dark .cm-send{background:#2a2a32;color:var(--t1)}
body.dark .cm-send:hover{background:#33333c}
body.dark .msg-send{background:#2a2a32;color:var(--t1)}
body.dark .bub-me{background:#2a2a32;color:var(--t1);border:1px solid #36363e}

/* Inputs - readable */
body.dark input,body.dark textarea,body.dark select{background:var(--hov);color:var(--t1);border-color:var(--brd)}
body.dark input:focus,body.dark textarea:focus{border-color:#36363e;background:#222228}
body.dark input::placeholder,body.dark textarea::placeholder{color:var(--t3)}

/* Cards - subtle elevation */
body.dark .pc,body.dark .s-card,body.dark #nav-rail,body.dark .modal,body.dark .dd-p{background:var(--card);border-color:var(--brd)}
body.dark .nb:hover,body.dark .nb.on{background:var(--hov);color:var(--t1)}

/* Toasts */
body.dark .toast{background:var(--card);border-color:var(--brd);color:var(--t1);box-shadow:0 8px 28px rgba(0,0,0,.5)}
body.dark .toast-ic{background:rgba(255,255,255,.05);color:var(--t2)}

/* Headings */
body.dark h1,body.dark h2,body.dark h3,body.dark .pg-t,body.dark .prof-name h1{color:var(--t1)}

/* Post text */
body.dark .pa-c,body.dark .cm-u,body.dark .pc-au-n{color:var(--t1)}
body.dark .pa{color:var(--t2)}
body.dark .pa:hover{color:var(--t1)}
body.dark .pa.liked,body.dark .pa.liked svg{color:var(--red);fill:var(--red);stroke:var(--red)}

/* Composer */
body.dark .comp{background:var(--card);border-color:var(--brd)}
body.dark .c-btn:hover{background:var(--hov)}

/* Dropdown */
body.dark .dd-i{color:var(--t2)}
body.dark .dd-i:hover{background:var(--hov);color:var(--t1)}

/* Tabs */
body.dark .tab{color:var(--t3)}
body.dark .tab.on{color:var(--t1)}

/* Settings */
body.dark .set-i{background:var(--card);border-color:var(--brd)}
body.dark .set-sel{background:var(--hov);color:var(--t1);border-color:var(--brd)}

/* Search */
body.dark .sr-i{background:var(--card);border-color:var(--brd)}
body.dark .sr-i:hover{border-color:#36363e;background:var(--hov)}

/* Music */
body.dark .mp{background:var(--card);border-top-color:var(--brd)}
body.dark .mi:hover,body.dark .mi.pl{background:var(--hov)}

/* Empty states */
body.dark .empty,body.dark .empty--big h3{color:var(--t1)}
body.dark .empty p,body.dark .empty--big p{color:var(--t3)}

/* Stories */
body.dark .story-ring--g{background:linear-gradient(45deg,#3b82f6,#8b5cf6,#ec4899)}
body.dark .story-ring--m{background:#2a2a32}
body.dark .story-ring--d{background:#2a2a32;color:var(--t2)}

/* Placeholder gallery */
body.dark .ph,body.dark .pgrid-add{background:var(--hov);color:var(--t3)}
body.dark .pgrid-add:hover{background:#222228;color:var(--t2);border-color:#36363e}

/* Profile cover */
body.dark .prof-cover__edit{background:rgba(0,0,0,.7);color:#fff}

/* Hover on cards - very subtle */
body.dark .pc:hover{border-color:#2e2e36}
body.dark .mc-bdg{background:var(--t1);color:var(--bg)}
body.dark .srch-tag.on{background:var(--t1);color:var(--bg)}
body.dark .srch-u-btn.follow{background:var(--t1);color:var(--bg)}

/* ══════════════════════════════════
   FOLLOWERS / LIKES MODAL
   ══════════════════════════════════ */
.user-list{max-height:400px;overflow-y:auto}
.user-list-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--hov);transition:background .15s;cursor:pointer}
.user-list-item:hover{background:var(--hov)}
.user-list-item:last-child{border-bottom:none}
.uli-info{flex:1;min-width:0}
.uli-name{font-size:14px;font-weight:600;color:var(--t1)}.uli-un{font-size:12px;color:var(--t3)}
.uli-btn{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;transition:var(--tr);cursor:pointer}
.uli-btn.follow{background:var(--acc);color:#fff;border:none}
.uli-btn.following{background:var(--card);color:var(--t2);border:1px solid var(--brd)}
body.dark .uli-btn.follow{color:var(--bg)}

/* ══════════════════════════════════
   EMOJI PICKER
   ══════════════════════════════════ */
/* ══════════════════════════════════
   EMOJI PICKER — Telegram-style
   Структура: top tabs (Эмодзи/Стикеры/GIF) → body
                                                ├── search
                                                ├── anchors (категории-эмодзи строкой)
                                                └── scroll (длинный список с секциями)
   ══════════════════════════════════ */
.emoji-picker{
  background:var(--card);font-family:var(--f1);
  display:flex;flex-direction:column;
  animation:fadeScale .18s var(--ease);
}

/* ─── верхние табы ─── */
.emoji-top{
  display:flex;align-items:center;gap:4px;
  padding:6px 10px;
  border-bottom:1px solid var(--brd);
  position:relative;
}
.emoji-top-tab{
  flex:1;border:none;background:transparent;
  padding:10px 8px;font-size:13px;font-weight:600;
  color:var(--t3);font-family:inherit;cursor:pointer;
  position:relative;transition:color .15s;
  letter-spacing:.2px;
}
.emoji-top-tab:hover{color:var(--t2)}
.emoji-top-tab.on{color:var(--acc)}
.emoji-top-tab.on::after{
  content:"";position:absolute;left:18%;right:18%;bottom:-7px;
  height:2.5px;background:var(--acc);border-radius:2px;
}
.emoji-close{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--brd);
  background:var(--hov);color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:var(--tr);flex-shrink:0;
  margin-left:4px;
}
.emoji-close:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ─── body (содержимое активного таба) ─── */
.emoji-body{
  flex:1;display:flex;flex-direction:column;min-height:0;
  overflow:hidden;
}

/* ─── строка поиска ─── */
.emoji-search-row{padding:8px 12px 4px}
.emoji-search-wrap{
  position:relative;display:flex;align-items:center;
  background:var(--hov);border:1px solid var(--brd);border-radius:10px;
  transition:border-color .15s;
}
.emoji-search-wrap:focus-within{border-color:var(--acc)}
.emoji-search-ic{
  position:absolute;left:10px;color:var(--t3);pointer-events:none;
}
.emoji-search{
  width:100%;border:none;outline:none;background:transparent;
  color:var(--t1);font-size:12.5px;font-family:inherit;
  padding:7px 12px 7px 32px;
}

/* ─── якоря категорий (горизонтальная строка с иконками) ─── */
.emoji-anchors{
  display:flex;gap:2px;
  padding:6px 10px 4px;
  overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--brd);
}
.emoji-anchors::-webkit-scrollbar{display:none}
.emoji-anchor{
  flex-shrink:0;width:30px;height:30px;border:none;background:transparent;
  border-radius:7px;cursor:pointer;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);opacity:.5;filter:saturate(.6);
}
.emoji-anchor:hover{background:var(--hov);opacity:.85;filter:saturate(.9)}
.emoji-anchor.on{background:var(--hov);opacity:1;filter:none;box-shadow:inset 0 -2px 0 var(--acc)}

/* ─── длинный скролл с секциями ─── */
.emoji-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:4px 8px 10px;min-height:0;
  scroll-behavior:smooth;
}
.emoji-scroll::-webkit-scrollbar{width:6px}
.emoji-scroll::-webkit-scrollbar-track{background:transparent}
.emoji-scroll::-webkit-scrollbar-thumb{background:var(--brd);border-radius:6px}
.emoji-scroll::-webkit-scrollbar-thumb:hover{background:var(--t3)}

.emoji-section{margin-top:8px}
.emoji-section:first-child{margin-top:4px}
.emoji-section-h{
  font-size:11px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.6px;
  padding:6px 6px 6px;
  position:sticky;top:0;background:var(--card);z-index:1;
}
.emoji-section-g{
  display:grid;gap:1px;
  grid-template-columns:repeat(8, minmax(0, 1fr));
}

.emoji-btn{
  background:none;border:none;font-size:24px;padding:0;
  border-radius:8px;cursor:pointer;
  transition:background .12s ease,transform .12s ease;
  width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.emoji-btn:hover{background:var(--hov);transform:scale(1.2)}
.emoji-btn:active{transform:scale(.95)}

.emoji-empty{
  grid-column:1/-1;text-align:center;padding:40px 8px;
  color:var(--t3);font-size:13px;
}

/* ─── режим POPOVER (для постов/комментов вне чата) ─── */
.emoji-picker--popover{
  position:fixed;z-index:10001;width:320px;height:400px;
  border:1px solid var(--brd);border-radius:14px;
  box-shadow:0 16px 56px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
}
.emoji-picker--popover .emoji-section-g{grid-template-columns:repeat(7, minmax(0, 1fr))}
.emoji-picker--popover .emoji-btn{font-size:22px}

/* ─── режим FLOATING (плавающий попап над кнопкой 😊 на УЗКИХ экранах в чате) ─── */
.emoji-picker--floating{
  position:fixed;z-index:10001;width:340px;height:420px;
  border:1px solid var(--brd);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.32),0 4px 12px rgba(0,0,0,.12);
  overflow:hidden;
  animation:floatUp .22s var(--ease);
}
@keyframes floatUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.emoji-picker--floating .emoji-section-g{grid-template-columns:repeat(7, minmax(0, 1fr))}
.emoji-picker--floating .emoji-btn{font-size:24px}

/* ─── режим SIDE (боковая выезжающая панель на ШИРОКИХ экранах в чате, как Telegram desktop) ─── */
.emoji-picker--side{
  position:absolute;
  top:0;right:0;bottom:0;
  width:380px;max-width:45%;
  border-left:1px solid var(--brd);
  border-radius:0;
  background:var(--card);
  box-shadow:-16px 0 40px rgba(0,0,0,.18);
  overflow:hidden;
  z-index:50;
  animation:slideInRight .25s var(--ease);
}
@keyframes slideInRight{
  from{transform:translateX(100%);opacity:.6}
  to{transform:translateX(0);opacity:1}
}
.emoji-picker--side.closing{
  animation:slideOutRight .2s var(--ease) forwards;
}
@keyframes slideOutRight{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(100%);opacity:.4}
}
.emoji-picker--side .emoji-section-g{grid-template-columns:repeat(8, minmax(0, 1fr))}
.emoji-picker--side .emoji-btn{font-size:26px}
/* На очень больших экранах — еще шире и больше колонок */
@media (min-width: 1400px){
  .emoji-picker--side{width:420px}
  .emoji-picker--side .emoji-section-g{grid-template-columns:repeat(9, minmax(0, 1fr))}
}
/* На средних — компактнее */
@media (max-width: 1100px) and (min-width: 900px){
  .emoji-picker--side{width:340px}
  .emoji-picker--side .emoji-section-g{grid-template-columns:repeat(7, minmax(0, 1fr))}
}

/* msg-chat должен иметь position relative для абсолютной side-панели */
.msg-chat{position:relative}

/* ─── заглушка "Скоро" для Стикеров/GIF ─── */
.emoji-soon{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:40px 20px;color:var(--t3);
}
.emoji-soon-ic{font-size:56px;opacity:.6;filter:saturate(.7);margin-bottom:4px}
.emoji-soon-t{font-size:15px;font-weight:600;color:var(--t2)}
.emoji-soon-s{font-size:12px;color:var(--t3)}

/* ══════════════════════════════════
   STORY VIEWER
   ══════════════════════════════════ */
.story-viewer{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:600;display:flex;align-items:center;justify-content:center;animation:fadeScale .3s ease}
.story-viewer__card{width:380px;max-width:90vw;height:70vh;background:linear-gradient(145deg,#1e1e22,#333338);border-radius:20px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.story-viewer__hdr{display:flex;align-items:center;gap:10px;padding:16px;position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(rgba(0,0,0,.5),transparent)}
.story-viewer__hdr span{color:#fff;font-size:13px;font-weight:600}
.story-viewer__hdr small{color:rgba(255,255,255,.6);font-size:11px;margin-left:auto}
.story-viewer__progress{display:flex;gap:3px;padding:8px 16px 0;position:absolute;top:0;left:0;right:0;z-index:3}
.story-viewer__bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.story-viewer__bar-fill{height:100%;background:#fff;border-radius:2px;animation:storyFill 5s linear forwards}
@keyframes storyFill{from{width:0}to{width:100%}}
.story-viewer__body{flex:1;display:flex;align-items:center;justify-content:center;font-size:60px;color:rgba(255,255,255,.2)}
.story-viewer__close{position:absolute;top:42px;right:16px;background:rgba(255,255,255,.15);border:none;width:32px;height:32px;border-radius:50%;color:#fff;font-size:16px;cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center}
.story-viewer__nav{position:absolute;inset:0;display:flex;z-index:1}
.story-viewer__nav-l,.story-viewer__nav-r{flex:1;cursor:pointer}
.story-viewer__input{display:flex;gap:8px;padding:12px 16px;position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.story-viewer__input input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:8px 14px;color:#fff;font-size:13px;outline:none}
.story-viewer__input input::placeholder{color:rgba(255,255,255,.4)}
.story-viewer__input button{background:none;border:none;font-size:20px;cursor:pointer}

/* ══════════════════════════════════
   SHARE / ACTIONS MENU
   ══════════════════════════════════ */
.post-menu{position:absolute;right:16px;top:50px;background:var(--card);border:1px solid var(--brd);border-radius:var(--rs);box-shadow:var(--sh3);overflow:hidden;z-index:50;animation:fadeScale .2s ease;min-width:200px}
.post-menu-i{display:flex;align-items:center;gap:12px;padding:11px 16px;border:none;background:transparent;width:100%;text-align:left;font-size:13px;color:var(--t2);cursor:pointer;transition:background .15s}
.post-menu-i:hover{background:var(--hov);color:var(--t1)}
.post-menu-i.red{color:var(--red)}
.post-menu-i .pm-ic{flex-shrink:0;opacity:.85}
.post-menu-i:hover .pm-ic{opacity:1}

/* ══════════════════════════════════
   IMAGE CAROUSEL
   ══════════════════════════════════ */
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;transition:transform .4s var(--ease)}
.carousel-slide{flex:0 0 100%}
.carousel-arr{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);border:none;font-size:14px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;transition:opacity .2s}
.carousel:hover .carousel-arr{opacity:1}
.carousel-arr--l{left:8px}.carousel-arr--r{right:8px}
.carousel-arr:hover{background:#fff}

/* ══════════════════════════════════
   NOTIFICATION DROPDOWN ENHANCED
   ══════════════════════════════════ */
.notif-i{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hov);transition:background .15s;cursor:pointer}
.notif-i:hover{background:var(--hov)}
.notif-i.unread{background:rgba(74,158,255,.04)}
.notif-i:last-child{border-bottom:none}
.notif-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.notif-icon.like{background:rgba(231,76,60,.1)}.notif-icon.follow{background:rgba(74,158,255,.1)}.notif-icon.comment{background:rgba(34,197,94,.1)}.notif-icon.save{background:rgba(245,158,11,.1)}.notif-icon.message{background:rgba(139,92,246,.1)}

/* ══════════════════════════════════
   REPORT MODAL / BLOCK
   ══════════════════════════════════ */
.report-opts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.report-opt{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--brd);border-radius:var(--rs);cursor:pointer;transition:var(--tr);background:var(--card);font-size:13px;color:var(--t2)}
.report-opt:hover{border-color:var(--acc);color:var(--t1)}
.report-opt.selected{border-color:var(--acc);background:var(--hov);color:var(--t1);font-weight:600}

/* ══════════════════════════════════
   ACTIVITY / ONLINE INDICATOR
   ══════════════════════════════════ */
.online-dot{width:10px;height:10px;border-radius:50%;background:var(--grn);border:2px solid var(--card);position:absolute;bottom:0;right:0}
.online-dot.offline{background:var(--t3)}
.last-seen{font-size:10px;color:var(--t3)}

/* ══════════════════════════════════
   KEYBOARD SHORTCUTS HELP
   ══════════════════════════════════ */
.kbd-help{max-width:400px}
.kbd-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hov)}
.kbd-row:last-child{border-bottom:none}
.kbd-key{display:inline-flex;align-items:center;gap:4px}
.kbd{background:var(--hov);border:1px solid var(--brd);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600;color:var(--t2);font-family:monospace}

/* ══════════════════════════════════
   COMMENT REPLIES
   ══════════════════════════════════ */
.cm-reply{margin-left:32px;padding-left:12px;border-left:2px solid var(--brd)}
.cm-actions{display:flex;gap:12px;margin-left:32px;margin-top:4px}
.cm-action{background:none;border:none;font-size:11px;color:var(--t3);cursor:pointer;padding:0;transition:color .15s}
.cm-action:hover{color:var(--t1)}
.cm-reply-box{display:flex;gap:6px;margin:6px 0 6px 32px}
.cm-reply-box input{flex:1;border:1px solid var(--brd);border-radius:16px;padding:6px 12px;font-size:12px;background:var(--hov);color:var(--t1);outline:none}
.cm-reply-box button{background:var(--acc);color:#fff;border:none;border-radius:16px;padding:4px 12px;font-size:11px}
body.dark .cm-reply-box button{color:var(--bg)}

/* ══════════════════════════════════
   MUSIC PAGE & MINI PLAYER
   ══════════════════════════════════ */

/* Mini Player (bottom bar) */
.mini-player{position:fixed;bottom:0;left:0;right:0;height:84px;background:var(--card);border-top:1px solid var(--brd);z-index:300;box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.mini-player.dn{display:none!important}
.mp-progress{position:absolute;top:0;left:0;height:3px;background:linear-gradient(90deg,#8b5cf6,#ec4899);border-radius:2px;transition:width .5s linear}
.mp-inner{display:flex;align-items:center;height:100%;padding:0 24px;gap:16px;max-width:var(--mx);margin:0 auto}
.mp-info{display:flex;align-items:center;gap:12px;flex:0 0 240px;min-width:0}
.mp-thumb{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#2a2a30,#444);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.mp-meta{min-width:0}.mp-title{font-size:13.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-artist{font-size:11.5px;color:var(--t3)}
.mp-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.mp-controls{display:flex;align-items:center;gap:8px;justify-content:center}
.mp-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:6px;border-radius:50%;transition:var(--tr);color:var(--t2);width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.mp-btn:hover{background:var(--hov);color:var(--t1)}.mp-active{color:var(--t1)!important;background:var(--hov)}
.mp-play{font-size:20px;width:44px;height:44px;background:var(--acc)!important;color:#fff!important;border-radius:50%!important}
.mp-play:hover{transform:scale(1.08)}
body.dark .mp-play{color:var(--bg)!important}
.mp-right{display:flex;align-items:center;gap:12px;flex:0 0 240px;justify-content:flex-end}
.mp-time{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.mp-liked{color:var(--red)!important}
.mp-vol{width:80px;height:4px;-webkit-appearance:none;background:var(--brd);border-radius:2px;outline:none;cursor:pointer}
.mp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--t1);cursor:pointer}

/* When mini-player visible, add bottom padding */
body.has-player .shell{padding-bottom:104px}
body.has-player #nav-rail{bottom:72px}

/* Genre chips */
.genre-chip{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:24px;border:1.5px solid var(--brd);background:var(--card);font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:var(--tr);box-shadow:var(--sh)}
.genre-chip:hover{border-color:var(--gc);color:var(--gc);transform:translateY(-2px);box-shadow:var(--sh2)}
.genre-emoji{font-size:18px}.genre-count{font-size:11px;color:var(--t3);background:var(--hov);padding:2px 8px;border-radius:10px}

/* Music section */
.mus-section{margin-bottom:28px}
.mus-sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mus-sec-h span{font-size:16px;font-weight:700;color:var(--t1)}
.mus-sec-h small{font-size:12px;color:var(--t3);margin-left:8px}
.mus-sec-btn{background:none;border:1px solid var(--brd);border-radius:20px;padding:6px 16px;font-size:12px;color:var(--t2);cursor:pointer;transition:var(--tr)}
.mus-sec-btn:hover{border-color:var(--t3);color:var(--t1)}

/* Horizontal scroll */
.mus-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.mus-scroll::-webkit-scrollbar{display:none}

/* Track card (horizontal) */
.track-card{width:170px;flex-shrink:0;background:var(--card);border-radius:14px;border:1px solid var(--brd);padding:14px;cursor:pointer;transition:var(--tr);box-shadow:var(--sh)}
.track-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--tc)}
.tc-play{width:100%;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 50%,#000));display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:10px;overflow:hidden}
.tc-emoji{font-size:36px;transition:transform .3s}.tc-btn{position:absolute;font-size:24px;opacity:0;transition:opacity .2s;color:#fff}
.track-card:hover .tc-emoji{transform:scale(.8)}.track-card:hover .tc-btn{opacity:1}
.tc-title{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-artist{font-size:11.5px;color:var(--t3);margin-top:2px}
.tc-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.tc-genre{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tc-like{background:none;border:none;cursor:pointer;font-size:14px;padding:0}

/* Playlist card */
.pl-card{width:160px;flex-shrink:0;background:var(--card);border-radius:14px;border:1px solid var(--brd);padding:14px;cursor:pointer;transition:var(--tr);text-align:center;box-shadow:var(--sh)}
.pl-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.pl-cover{width:100%;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#2a2a30,#444);display:flex;align-items:center;justify-content:center;font-size:22px;flex-wrap:wrap;gap:2px;margin-bottom:10px;overflow:hidden}
.pl-card--add{border-style:dashed;opacity:.6}.pl-card--add:hover{opacity:1}
.pl-name{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-meta{font-size:11px;color:var(--t3);margin-top:3px}

/* Artist card */
.artist-card{width:120px;flex-shrink:0;text-align:center;cursor:pointer;padding:8px}
.artist-card:hover .artist-ava{transform:scale(1.08);box-shadow:var(--sh2)}
.artist-ava{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#333,#555);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:rgba(255,255,255,.5);margin:0 auto 10px;transition:var(--tr)}
.artist-name{font-size:13px;font-weight:600;color:var(--t1)}.artist-meta{font-size:11px;color:var(--t3);margin-top:2px}

/* Track table/list */
.mus-tbl{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh)}
.tr-row{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--hov)}
.tr-row:last-child{border-bottom:none}.tr-row:hover{background:var(--hov)}
.tr-playing{background:var(--hov)!important}
.tr-playing .tr-title{font-weight:700;color:var(--acc)}
.tr-num{width:24px;text-align:center;font-size:13px;color:var(--t3);font-weight:500;flex-shrink:0}
.tr-thumb{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.tr-info{flex:1;min-width:0}.tr-title{font-size:13px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-artist{font-size:11px;color:var(--t3)}
.tr-genre{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;width:70px;flex-shrink:0}
.tr-plays{font-size:11px;color:var(--t3);width:60px;text-align:right;flex-shrink:0}
.tr-like{background:none;border:none;cursor:pointer;font-size:14px;padding:2px;flex-shrink:0}
.tr-add{background:none;border:1px solid var(--brd);border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px;color:var(--t3);flex-shrink:0;transition:var(--tr)}
.tr-add:hover{border-color:var(--t3);color:var(--t1)}
.tr-dur{font-size:11.5px;color:var(--t3);width:40px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.tr-eq{display:inline-flex;align-items:flex-end;gap:1px;height:14px}
.tr-eq span{width:3px;background:var(--acc);border-radius:1px;animation:eq .7s ease-in-out infinite alternate}
.tr-eq span:nth-child(1){height:6px;animation-delay:0s}.tr-eq span:nth-child(2){height:12px;animation-delay:.15s}.tr-eq span:nth-child(3){height:8px;animation-delay:.3s}

@media(max-width:900px){
  .mp-right{flex:0 0 auto}.mp-info{flex:0 0 auto}
  .tr-genre,.tr-plays{display:none}
}

/* ══════════════════════════════════
   SVG ICON SYSTEM
   ══════════════════════════════════ */
.ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.ic svg{width:100%;height:100%}

/* ══════════════════════════════════
   ARTIST PAGE — Redesigned
   ══════════════════════════════════ */
.art-back{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--t3);font-size:13px;font-weight:500;cursor:pointer;margin-bottom:16px;padding:6px 0;transition:color .15s}
.art-back:hover{color:var(--t1)}
.art-breadcrumb{font-size:13px;color:var(--t3);margin-bottom:16px;display:flex;align-items:center;gap:6px}
.art-breadcrumb a{color:var(--t3);cursor:pointer;transition:color .15s}.art-breadcrumb a:hover{color:var(--t1)}
.art-breadcrumb span{color:var(--t1);font-weight:600}

/* Hero banner */
.art-hero{position:relative;border-radius:20px;overflow:hidden;margin-bottom:28px;background:var(--card);border:1px solid var(--brd);box-shadow:var(--sh)}
.art-hero__cover{width:100%;height:260px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.art-hero__cover-bg{position:absolute;inset:0;background:linear-gradient(145deg,var(--ac),color-mix(in srgb,var(--ac) 40%,#111));opacity:.85}
.art-hero__cover-pattern{position:absolute;inset:0;opacity:.06;background-image:radial-gradient(circle at 20% 80%,#fff 1px,transparent 1px),radial-gradient(circle at 80% 20%,#fff 1px,transparent 1px);background-size:40px 40px}
.art-hero__silhouette{position:relative;z-index:1;font-size:120px;opacity:.15;color:#fff;line-height:1}
.art-hero__bottom{padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.art-hero__name-wrap{display:flex;align-items:center;gap:14px}
.art-hero__name{font-size:32px;font-weight:800;color:var(--t1);letter-spacing:-.5px}
.art-hero__verified{width:24px;height:24px;border-radius:50%;background:var(--blu);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.art-hero__btns{display:flex;gap:10px}
.art-hero__btn{display:flex;align-items:center;gap:8px;padding:10px 22px;border-radius:24px;font-size:13.5px;font-weight:600;cursor:pointer;transition:var(--tr);border:1px solid var(--brd);background:var(--card);color:var(--t1)}
.art-hero__btn:hover{border-color:var(--t3);transform:translateY(-1px)}
.art-hero__btn--play{background:var(--acc);color:#fff;border-color:var(--acc)}
.art-hero__btn--play:hover{opacity:.9}
body.dark .art-hero__btn--play{color:var(--bg)}

/* Artist stats bar */
.art-stats-bar{display:flex;gap:0;margin-bottom:24px;background:var(--card);border-radius:14px;border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh)}
.art-stat-item{flex:1;padding:16px 20px;text-align:center;border-right:1px solid var(--brd);transition:background .15s}
.art-stat-item:last-child{border-right:none}
.art-stat-item:hover{background:var(--hov)}
.art-stat-item b{display:block;font-size:18px;font-weight:700;color:var(--t1)}
.art-stat-item small{font-size:11px;color:var(--t3)}

/* Bio card */
.art-bio-card{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);padding:20px 24px;margin-bottom:24px;box-shadow:var(--sh)}
.art-bio-card p{font-size:14px;color:var(--t2);line-height:1.7}
.art-bio-card .art-genres{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.art-genre{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid;display:inline-flex;align-items:center;gap:5px}

/* Popular tracks — 2 column grid like screenshot */
.art-popular{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);border-radius:var(--r);border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh);margin-bottom:24px}
.art-track{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--hov);border-right:1px solid var(--hov)}
.art-track:nth-child(2n){border-right:none}
.art-track:nth-last-child(-n+2){border-bottom:none}
.art-track:hover{background:var(--hov)}
.art-track.playing{background:var(--hov)}
.art-track__thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}
.art-track__thumb .ic{color:rgba(255,255,255,.4)}
.art-track__play-ov{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;color:#fff}
.art-track:hover .art-track__play-ov{opacity:1}
.art-track__info{flex:1;min-width:0}
.art-track__title{font-size:13.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.art-track__feat{font-size:13px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-track__dur{font-size:12.5px;color:var(--t3);flex-shrink:0;font-variant-numeric:tabular-nums}
.art-track.playing .art-track__title{color:var(--acc);font-weight:700}

/* Releases horizontal scroll */
.art-releases{display:flex;gap:16px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.art-releases::-webkit-scrollbar{display:none}
.art-release{width:160px;flex-shrink:0;cursor:pointer;transition:var(--tr)}
.art-release:hover{transform:translateY(-3px)}
.art-release__cover{width:160px;height:160px;border-radius:12px;overflow:hidden;margin-bottom:10px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.art-release__cover .ic{color:rgba(255,255,255,.35)}
.art-release__play{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;color:#fff}
.art-release:hover .art-release__play{opacity:1}
.art-release__name{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-release__meta{font-size:11.5px;color:var(--t3);margin-top:2px}

/* Section headers */
.art-sec{margin-bottom:28px}
.art-sec__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.art-sec__h h3{font-size:17px;font-weight:700;color:var(--t1)}
.art-sec__h a{font-size:13px;color:var(--blu);cursor:pointer;font-weight:500;transition:opacity .15s}
.art-sec__h a:hover{opacity:.7}

/* Similar artists grid */
.art-similar{display:flex;gap:16px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.art-similar::-webkit-scrollbar{display:none}
.art-sim{width:110px;flex-shrink:0;text-align:center;cursor:pointer}
.art-sim:hover .art-sim__ava{transform:scale(1.06);box-shadow:var(--sh2)}
.art-sim__ava{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:24px;font-weight:700;color:#fff;transition:var(--tr);box-shadow:var(--sh)}
.art-sim__name{font-size:12.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-sim__meta{font-size:10.5px;color:var(--t3);margin-top:2px}
.art-v-mini{position:absolute;bottom:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--blu);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}

/* ══════════════════════════════════
   ADD ARTIST MODAL
   ══════════════════════════════════ */
.add-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.add-art-grid .fg{margin-bottom:0}
.add-art-full{grid-column:1/-1}
.color-picker{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.color-opt{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:var(--tr)}
.color-opt:hover{transform:scale(1.15)}.color-opt.on{border-color:var(--t1);transform:scale(1.15)}
.genre-picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.genre-pick{padding:5px 14px;border-radius:20px;border:1px solid var(--brd);background:var(--card);font-size:12px;color:var(--t2);cursor:pointer;transition:var(--tr)}
.genre-pick:hover{border-color:var(--t3)}.genre-pick.on{background:var(--acc);color:#fff;border-color:var(--acc)}
body.dark .genre-pick.on{color:var(--bg)}

/* ══════════════════════════════════
   ARTIST CARD (in search / music page)
   ══════════════════════════════════ */
.artist-card{position:relative;width:120px;flex-shrink:0;text-align:center;cursor:pointer;padding:8px}
.artist-ava{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:rgba(255,255,255,.5);margin:0 auto 10px;transition:var(--tr);position:relative;box-shadow:var(--sh)}
.artist-card:hover .artist-ava{transform:scale(1.08);box-shadow:var(--sh2)}
.artist-name{font-size:13px;font-weight:600;color:var(--t1)}.artist-meta{font-size:11px;color:var(--t3);margin-top:2px}

/* ══════════════════════════════════
   ALBUM PAGE
   ══════════════════════════════════ */
.alb-card{width:180px;flex-shrink:0;background:var(--card);border-radius:14px;border:1px solid var(--brd);padding:14px;cursor:pointer;transition:var(--tr);box-shadow:var(--sh)}
.alb-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.alb-cover{width:100%;aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);margin-bottom:10px;overflow:hidden}
.alb-name{font-size:13.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alb-meta{font-size:11px;color:var(--t3);margin-top:3px}

.alb-header{display:flex;gap:28px;align-items:flex-end;margin-bottom:28px;padding:28px 32px;background:var(--card);border-radius:20px;border:1px solid var(--brd);box-shadow:var(--sh)}
.alb-big-cover{width:200px;height:200px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.alb-info{flex:1;min-width:0}
.alb-type{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:4px}
.alb-title{font-size:30px;font-weight:800;color:var(--t1);margin-bottom:10px;letter-spacing:-.5px}
.alb-artist{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2)}

.art-about{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh)}
.art-about-row{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--hov)}
.art-about-row:last-child{border-bottom:none}
.art-about-row span{color:var(--t3);font-size:13px}
.art-about-row b{color:var(--t1);font-size:13px}

/* Fix: icon in buttons alignment */
.btn1 .ic,.art-back .ic,.mus-sec-btn .ic,.genre-chip .ic{margin-right:2px}
.mp-vol-ic{color:var(--t3);display:flex}

/* ══════════════════════════════════
   COMPOSER SVG ICONS
   ══════════════════════════════════ */
.c-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--t3);transition:color .2s}
.c-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:8px;transition:var(--tr);display:flex;align-items:center;justify-content:center}
.c-btn:hover{background:var(--hov)}
.c-btn:hover .c-icon{color:var(--t1)}
.c-btn svg{transition:color .2s}
.comp-b .c-btn{margin-right:2px}
/* Override old emoji button styles in m-attach */
.m-attach{display:flex;gap:4px;margin-top:14px}
.m-attach .c-btn{padding:8px;border-radius:10px}
.m-attach .c-btn:hover{background:var(--hov)}

/* Attach preview in composer */
.attach-preview{display:flex;align-items:center;margin-top:8px;gap:8px}
.m-post-preview{padding:8px 0}
.m-post-preview img{max-height:120px;border-radius:10px}

/* ══════════════════════════════════
   AVATAR EDITOR (Profile Edit Modal)
   ══════════════════════════════════ */
.ep-avatar-section{display:flex;align-items:center;gap:20px;padding:16px 0 20px;margin-bottom:16px;border-bottom:1px solid var(--hov)}
.ep-avatar-preview{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.1);background:linear-gradient(135deg,#8b5cf6,#8b5cf688)}
.ep-avatar-controls{display:flex;flex-direction:column;gap:8px;flex:1}
.ep-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;border:1px solid var(--brd);background:var(--card);font-size:13px;color:var(--t2);font-weight:500;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.ep-upload-btn:hover{border-color:var(--t3);color:var(--t1)}
.ep-remove-btn{background:none;border:none;font-size:12px;color:var(--red);cursor:pointer;padding:0;text-align:left;font-family:var(--f1);transition:opacity .15s}
.ep-remove-btn:hover{opacity:.7}
.ep-color-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ep-color-row .color-opt{width:24px;height:24px}

/* Story avatar inside ring */
.av-story{width:100%;height:100%;border-radius:50%;font-size:16px}
.story-ring .av{width:100%!important;height:100%!important;border:2.5px solid var(--card)!important;border-radius:50%!important}
.story-ring .av img{border-radius:50%}
.story-ring--has{background:linear-gradient(135deg,#667eea,#764ba2);padding:3px}
.story-ring--d .av{display:none}
.story-add-mini{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--blu);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid var(--card);cursor:pointer;z-index:2;line-height:1}

/* ══════════════════════════════════
   STORY CREATOR
   ══════════════════════════════════ */
.story-creator{display:flex;gap:20px}
.story-creator__bg{position:absolute;inset:0;transition:background .3s}
.story-creator__options{flex:1;display:flex;flex-direction:column}
.story-colors{display:flex;gap:8px;flex-wrap:wrap}
.story-color-opt{width:36px;height:36px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:var(--tr);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.story-color-opt:hover{transform:scale(1.1)}.story-color-opt.on{border-color:var(--t1);transform:scale(1.1)}

/* ══════════════════════════════════
   UPDATED STORY VIEWER (with user avatars)
   ══════════════════════════════════ */
.story-viewer__hdr .av{border:2px solid rgba(255,255,255,.4)}
.story-viewer__body{flex:1;display:flex;align-items:center;justify-content:center;font-size:60px;color:rgba(255,255,255,.2);background-size:cover;background-position:center;position:relative}
.story-viewer__body-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600;text-align:center;padding:20px;text-shadow:0 2px 8px rgba(0,0,0,.4);z-index:1;word-break:break-word;line-height:1.4}
.story-viewer__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.story-viewer__del{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:16px;color:#fff;font-size:12px;padding:6px 14px;cursor:pointer;font-family:var(--f1);transition:background .2s}
.story-viewer__del:hover{background:rgba(231,76,60,.6)}

/* ══════════════════════════════════
   REACTIONS POPUP
   ══════════════════════════════════ */
.reactions-popup{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px 10px;background:var(--card);border:1px solid var(--brd);border-radius:24px;box-shadow:var(--sh3);z-index:50;white-space:nowrap}
.reaction-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:4px;border-radius:50%;transition:transform .15s,background .15s}
.reaction-btn:hover{transform:scale(1.3);background:var(--hov)}
body.dark .reactions-popup{background:var(--card);border-color:var(--brd)}

/* Reactions display under post */
.post-reactions{display:flex;gap:4px;padding:2px 16px 8px;flex-wrap:wrap}
.post-reaction{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:16px;font-size:13px;background:var(--hov);border:1px solid var(--brd);cursor:pointer;transition:var(--tr)}
.post-reaction:hover{border-color:var(--t3)}
.post-reaction.mine{background:rgba(74,158,255,.08);border-color:rgba(74,158,255,.25)}
.post-reaction__count{font-size:11px;color:var(--t3);font-weight:600}

/* ══════════════════════════════════
   REPOST INDICATOR
   ══════════════════════════════════ */
.repost-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--t3);padding:6px 16px 0}
.repost-badge svg{width:14px;height:14px}

/* ══════════════════════════════════
   PROFILE COVER (full-width banner)
   ══════════════════════════════════ */
/* Страница чужого профиля: сайдбар скрыт, поэтому центрируем контент,
   чтобы шапка не «растягивалась» на всю ширину и выглядела как свой профиль */
.prof-page-wrap{max-width:920px;margin:0 auto}

/* Индикатор «печатает…» в окне поддержки */
.sup-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--t3);display:inline-block;animation:sup-typing 1.2s infinite ease-in-out}
.sup-typing-dot:nth-child(2){animation-delay:.2s}
.sup-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes sup-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.prof-cover{width:100%;height:240px;border-radius:var(--r);overflow:hidden;margin-bottom:24px;position:relative}
.prof-cover__img{width:100%;height:100%;object-fit:cover;display:block}
.prof-cover__grad{width:100%;height:100%}
.prof-cover__edit{position:absolute;bottom:12px;right:12px;padding:6px 14px;border-radius:10px;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:12px;cursor:pointer;opacity:0;transition:opacity .2s;font-family:var(--f1)}
.prof-cover:hover .prof-cover__edit{opacity:1}

/* ══════════════════════════════════
   PROFILE PAGE AVATAR (large, overlapping cover)
   ══════════════════════════════════ */
.prof-ava-wrap{display:flex;align-items:flex-end;gap:24px;margin-top:-56px;margin-bottom:18px;position:relative;z-index:2;padding-left:10px}
.prof-ava-big{width:124px;height:124px;border-radius:50%;border:5px solid var(--card);box-shadow:0 6px 18px rgba(0,0,0,.18);overflow:hidden;flex-shrink:0;cursor:pointer}
.prof-ava-big img{width:100%;height:100%;object-fit:cover}
.prof-ava-big .av{width:100%;height:100%;font-size:38px}

/* ══════════════════════════════════
   LINK PREVIEW CARD
   ══════════════════════════════════ */
.link-preview{display:flex;border:1px solid var(--brd);border-radius:var(--rs);overflow:hidden;margin:8px 16px;cursor:pointer;transition:var(--tr)}
.link-preview:hover{box-shadow:var(--sh)}
.link-preview__img{width:100px;height:80px;background:var(--hov);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:20px}
.link-preview__info{padding:10px 14px;flex:1;min-width:0}
.link-preview__title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-preview__url{font-size:11px;color:var(--t3)}

/* ══════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════ */
@keyframes skeleton{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--hov) 25%,var(--brd) 50%,var(--hov) 75%);background-size:200% 100%;animation:skeleton 1.5s ease infinite;border-radius:8px}
.skeleton-circle{border-radius:50%}
.skeleton-text{height:14px;margin-bottom:8px}
.skeleton-text.short{width:60%}

/* ══════════════════════════════════
   LAST SEEN / ACTIVITY
   ══════════════════════════════════ */
.last-seen{font-size:10px;color:var(--t3);margin-top:2px}
.activity-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.activity-dot.online{background:var(--grn)}
.activity-dot.away{background:var(--warning)}
.activity-dot.offline{background:var(--t3)}

/* ══════════════════════════════════════
   ONBOARDING WIZARD
   ══════════════════════════════════════ */
#onboard{position:fixed;inset:0;z-index:999}
.ob-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px;position:relative;overflow-y:auto}
.ob-bg{position:fixed;inset:0;background:linear-gradient(135deg,#050507 0%,#0b0b10 45%,#101016 75%,#050507 100%);z-index:-1}
.ob-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.035) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(255,255,255,.02) 0%,transparent 50%);pointer-events:none}

/* Header */
.ob-header{width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ob-logo{font-family:var(--f2);font-size:26px;font-style:italic;font-weight:700;color:#fff;letter-spacing:-0.5px}
.ob-skip{background:none;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:6px 18px;color:rgba(255,255,255,.45);font-size:12.5px;cursor:pointer;transition:all .2s;font-family:var(--f1)}
.ob-skip:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7)}

/* Progress */
.ob-progress{width:100%;max-width:600px;margin-bottom:28px}
.ob-bar{width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-bottom:16px;overflow:hidden}
.ob-bar-fill{height:100%;background:linear-gradient(90deg,rgba(255,255,255,.55),#fff);border-radius:2px;transition:width .5s var(--ease)}
.ob-dots{display:flex;align-items:center;justify-content:center;gap:0}
.ob-dot{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;flex-shrink:0}
.ob-dot span{font-size:10px;font-weight:700;color:rgba(255,255,255,.25)}
.ob-dot.active{background:#fff;border-color:transparent;transform:scale(1.15)}
.ob-dot.active span{color:#0a0a0c}
.ob-dot.done{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.ob-dot.done span{color:rgba(255,255,255,.7)}
.ob-line{width:20px;height:2px;background:rgba(255,255,255,.08);flex-shrink:0}
.ob-line.done{background:rgba(255,255,255,.3)}

/* Card */
.ob-card{width:100%;max-width:600px;background:rgba(14,14,18,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:36px 32px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:formIn .5s var(--ease);flex:1;max-height:calc(100vh - 240px);overflow-y:auto}
.ob-card::-webkit-scrollbar{width:4px}.ob-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.ob-card__emoji{font-size:48px;text-align:center;margin-bottom:8px}
.ob-card__title{font-size:26px;font-weight:700;color:#fff;text-align:center;margin-bottom:16px;letter-spacing:-.3px}
.ob-card__sub{font-size:16px;color:rgba(255,255,255,.7);text-align:center;margin-bottom:8px}
.ob-card__desc{font-size:14px;color:rgba(255,255,255,.45);text-align:center;line-height:1.6;margin-bottom:20px}
.ob-card__hint{font-size:12px;color:rgba(255,255,255,.3);text-align:center;margin-top:14px}

/* Welcome features grid */
.ob-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.ob-feature{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;color:rgba(255,255,255,.6);font-size:13.5px;font-weight:500}
.ob-feature__icon{font-size:22px}

/* Avatar step */
.ob-avatar-step{display:flex;flex-direction:column;align-items:center}
.ob-avatar-preview{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 8px 32px rgba(0,0,0,.2);overflow:hidden}
.ob-avatar-preview span{font-size:36px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:1px}
.ob-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:var(--f1);margin-bottom:16px}
.ob-upload-btn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.ob-colors{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ob-color{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s}
.ob-color:hover{transform:scale(1.15)}.ob-color.on{border-color:#fff;transform:scale(1.2);box-shadow:0 0 12px rgba(255,255,255,.2)}

/* Bio step */
.ob-bio-step{display:flex;flex-direction:column;align-items:center}
.ob-textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 18px;color:#fff;font-size:14px;resize:none;outline:none;font-family:var(--f1);transition:border-color .2s}
.ob-textarea:focus{border-color:rgba(255,255,255,.4)}
.ob-textarea::placeholder{color:rgba(255,255,255,.2)}
.ob-bio-tips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.ob-tip{padding:7px 14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;transition:all .2s}
.ob-tip:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.ob-char-count{font-size:11px;color:rgba(255,255,255,.2);text-align:right;margin-top:6px}

/* Genres step */
.ob-genre-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ob-genre-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:24px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:rgba(255,255,255,.6);font-size:13px;font-weight:500;cursor:pointer;transition:all .25s;font-family:var(--f1);position:relative}
.ob-genre-btn:hover{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.06)}
.ob-genre-btn.on{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;box-shadow:0 0 16px rgba(255,255,255,.1)}
.ob-genre-emoji{font-size:18px}
.ob-genre-check{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#fff;color:#0a0a0c;display:flex;align-items:center;justify-content:center}

/* Friends step */
.ob-user-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding-right:4px}
.ob-user-card{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);cursor:pointer;transition:all .25s}
.ob-user-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.ob-user-card.on{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.ob-user-ava{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:rgba(255,255,255,.85);flex-shrink:0}
.ob-user-info{flex:1;min-width:0}
.ob-user-name{font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.ob-user-bio{font-size:12px;color:rgba(255,255,255,.35);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-user-check{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.3);flex-shrink:0;transition:all .2s}
.ob-user-card.on .ob-user-check{background:#fff;border-color:transparent;color:#0a0a0c}

/* Group cards */
.ob-group-list{display:flex;flex-direction:column;gap:8px}
.ob-group-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);cursor:pointer;transition:all .25s}
.ob-group-card:hover{background:rgba(255,255,255,.05)}
.ob-group-card.on{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.ob-group-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ob-group-info{flex:1}.ob-group-name{font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.ob-group-desc{font-size:12px;color:rgba(255,255,255,.35);margin-top:2px}
.ob-group-card.on .ob-user-check{background:#fff;border-color:transparent;color:#0a0a0c}

/* Finish step */
.ob-finish-step{display:flex;flex-direction:column;align-items:center}
.ob-finish-avatar{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 8px 32px rgba(0,0,0,.2);overflow:hidden;animation:pulse 2s ease infinite}
.ob-finish-stats{display:flex;flex-direction:column;gap:6px;margin:16px 0;width:100%}
.ob-finish-stat{padding:8px 16px;background:rgba(255,255,255,.04);border-radius:10px;font-size:13px;color:rgba(255,255,255,.6)}
.ob-finish-tip{font-size:13px;color:rgba(255,255,255,.35);text-align:center;margin-top:12px;padding:12px 16px;background:rgba(255,255,255,.03);border-radius:12px;border:1px dashed rgba(255,255,255,.08)}

/* Navigation */
.ob-nav{width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-bottom:20px}
.ob-counter{font-size:12px;color:rgba(255,255,255,.25);font-weight:500}
.ob-btn{padding:10px 24px;border-radius:14px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;font-family:var(--f1);border:none}
.ob-btn--back{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.ob-btn--back:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.ob-btn--next{background:#fff;color:#0a0a0c;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.ob-btn--next:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.ob-btn--finish{background:#fff;color:#0a0a0c;box-shadow:0 4px 16px rgba(0,0,0,.4);font-size:15px;padding:12px 32px}
.ob-btn--finish:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.55)}

/* ── Monochrome icon glyphs (replace emoji) ── */
.ob-svg{display:block;color:inherit}
.ob-card__emoji{display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:10px;opacity:.95}
.ob-feature__icon{display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)}
.ob-genre-emoji{display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.ob-genre-btn .ob-svg{color:inherit}
.ob-group-icon{color:rgba(255,255,255,.8)}
.ob-tip{display:inline-flex;align-items:center;gap:6px}
.ob-tip .ob-svg{color:rgba(255,255,255,.6)}
.ob-upload-btn{display:inline-flex;align-items:center;gap:7px}
.ob-vrf{display:inline-flex;vertical-align:-2px;margin-left:4px;color:rgba(255,255,255,.7)}

/* ── Friends search ── */
.ob-search{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:11px 14px;margin-bottom:14px;transition:border-color .2s}
.ob-search:focus-within{border-color:rgba(255,255,255,.35);box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.ob-search__ic{display:inline-flex;color:rgba(255,255,255,.4);flex-shrink:0}
.ob-search__inp{flex:1;background:none;border:none;outline:none;color:#fff;font-size:14px;font-family:var(--f1)}
.ob-search__inp::placeholder{color:rgba(255,255,255,.25)}
.ob-empty{text-align:center;color:rgba(255,255,255,.3);font-size:13px;padding:28px 12px}
.ob-user-card .ob-user-check .ob-svg{color:inherit}

/* ── Finish stats with icons ── */
.ob-finish-stat{display:flex;align-items:center;gap:8px}
.ob-finish-stat .ob-svg{color:rgba(255,255,255,.75);flex-shrink:0}

/* ══════════════════════════════════════
   PHOTO GALLERY (real images)
   ══════════════════════════════════════ */
.pgrid-img{width:100%;height:100%;object-fit:cover;display:block}
.pgrid-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--hov);border:2px dashed var(--brd);color:var(--t3);font-size:12px;cursor:pointer;transition:var(--tr)}
.pgrid-add:hover{border-color:var(--t2);color:var(--t1);background:var(--card)}
.pgrid-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;cursor:pointer;font-size:12px;display:none;align-items:center;justify-content:center;z-index:3}
.pgrid-i:hover .pgrid-del{display:flex}
.pgrid-save{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:3;transition:transform .15s}
.pgrid-save:hover{transform:scale(1.1)}
.pgrid-saved-by{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;padding:14px 8px 6px;font-size:10px;text-align:center}

/* Empty states */
.empty--big{padding:60px 20px;text-align:center}
.empty-icon{font-size:48px;margin-bottom:12px;opacity:.4}
.empty--big h3{font-size:18px;font-weight:600;color:var(--t2);margin-bottom:6px}
.empty--big p{font-size:13px;color:var(--t3)}

/* Sidebar empty states */
.s-empty{padding:18px 16px;text-align:center}
.s-empty p{font-size:12px;color:var(--t3);margin-bottom:10px;line-height:1.5}
.s-empty-btn{background:var(--card);color:var(--t1);border:1px solid var(--brd);padding:8px 18px;border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.s-empty-btn:hover{background:var(--hov);border-color:var(--t3);transform:translateY(-1px)}
body.dark .s-empty-btn{background:#1f1f25;color:var(--t1);border:1px solid #2e2e36}
body.dark .s-empty-btn:hover{background:#26262e;border-color:#3a3a44}
.s-add-btn{display:block;width:calc(100% - 24px);margin:8px 12px;padding:8px;background:none;border:1px dashed var(--brd);border-radius:8px;color:var(--t3);font-size:12px;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.s-add-btn:hover{border-color:var(--t2);color:var(--t1)}
.gi-j--leave{background:var(--hov)!important;color:var(--t2)!important;border:1px solid var(--brd)}

/* Real post image (see main definition above) */
.pc-img-save{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:5;transition:var(--tr);backdrop-filter:blur(8px)}
.pc-img-save:hover{background:rgba(0,0,0,.85);transform:scale(1.05)}

/* Cover edit modal */
.ec-preview{width:100%;height:140px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#8b5cf655,#1a1a22);margin-bottom:14px;background-size:cover;background-position:center}
.ec-controls{display:flex;gap:10px;margin-bottom:14px}
.color-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.color-picker .color-opt{width:28px;height:28px}

/* ══════════════════════════════════════
   POST MEDIA (video, music, location)
   ══════════════════════════════════════ */
.post-music{display:flex;align-items:center;gap:12px;padding:10px 16px;margin:8px 16px;border:1px solid var(--brd);border-radius:12px;background:var(--hov);cursor:pointer;transition:var(--tr)}
.post-music:hover{border-color:var(--acc);transform:translateX(2px)}
.post-music__icon{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.post-music__info{flex:1;min-width:0}
.post-music__title{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-music__artist{font-size:11.5px;color:var(--t3)}
.post-music__dur{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.post-location{padding:8px 16px;font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:6px}
.post-location span{font-weight:500;color:var(--t1)}

/* ══════════════════════════════════════
   UNIFIED EDIT MODAL TABS
   ══════════════════════════════════════ */
.ep-tabs{display:flex;gap:4px;padding:8px 20px 0;border-bottom:1px solid var(--brd)}
.ep-tab{background:none;border:none;padding:10px 16px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--tr);font-family:var(--f1)}
.ep-tab:hover{color:var(--t1)}
.ep-tab.on{color:var(--t1);border-bottom-color:var(--acc)}
.ep-pane{padding:4px 0}

/* ══════════════════════════════════════
   ATTACHMENT PREVIEWS (composer)
   ══════════════════════════════════════ */
.attach-music{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--brd);border-radius:10px;background:var(--hov);font-size:12.5px;color:var(--t2);max-width:280px}
.attach-music b{color:var(--t1)}
.attach-location{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--brd);border-radius:10px;background:var(--hov);font-size:12.5px;color:var(--t1);font-weight:500;max-width:220px}
.attach-gif{display:flex;align-items:center;justify-content:center;width:120px;height:80px;border-radius:10px;color:#fff;font-size:14px;font-weight:700;letter-spacing:2px;text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* Edit profile preview size */
.ep-avatar-preview{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.1)}

/* ══════════════════════════════════════
   PUBLISH / COMMENT ANIMATIONS
   ══════════════════════════════════════ */

/* Spinner inside button */
.pub-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn1.publishing,.comp-sub.publishing{opacity:.85;cursor:wait}
.btn1.publishing{transform:scale(.97)}

/* Confetti celebration */
.confetti-layer{position:fixed;top:0;left:0;right:0;height:100vh;pointer-events:none;z-index:9999;overflow:hidden}
.confetti{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;animation:confetti-fall 1.5s cubic-bezier(.4,.6,.6,1) forwards;opacity:.9}
@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}

/* New post highlight glow */
.post-new{animation:newPost 2.5s ease forwards}
@keyframes newPost{
  0%{transform:scale(.96);opacity:0;box-shadow:0 0 0 0 rgba(139,92,246,.6)}
  20%{transform:scale(1.01);opacity:1;box-shadow:0 0 0 12px rgba(139,92,246,.25)}
  60%{box-shadow:0 0 0 8px rgba(139,92,246,.1)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(139,92,246,0)}
}

/* Comment send animation */
.cm-send.sending{animation:sendPop .5s ease}
@keyframes sendPop{
  0%{transform:scale(1)}
  40%{transform:scale(.85) rotate(-15deg)}
  60%{transform:scale(1.15) rotate(20deg)}
  100%{transform:scale(1) rotate(0)}
}
.pc-ci input.flying{animation:flyOut .25s ease forwards}
@keyframes flyOut{
  0%{transform:translateX(0);opacity:1}
  60%{transform:translateX(20px);opacity:.4}
  100%{transform:translateX(0);opacity:1}
}

/* New comment slide-in */
.cm-new{animation:cmIn .8s ease forwards}
@keyframes cmIn{
  0%{transform:translateY(-12px) scale(.95);opacity:0;background:rgba(139,92,246,.15)}
  50%{background:rgba(139,92,246,.08)}
  100%{transform:translateY(0) scale(1);opacity:1;background:transparent}
}

/* ══════════════════════════════════════
   EDIT MODAL TAB TRANSITIONS
   ══════════════════════════════════════ */
.ep-pane{transition:opacity .25s ease}
.ep-pane.pane-in{animation:paneSlide .35s cubic-bezier(.16,1,.3,1)}
@keyframes paneSlide{
  0%{opacity:0;transform:translateX(20px)}
  100%{opacity:1;transform:translateX(0)}
}

/* Animated tab indicator */
.ep-tabs{position:relative}
.ep-tab{position:relative;transition:color .2s,background .2s;border-radius:8px 8px 0 0}
.ep-tab:hover{background:var(--hov)}
.ep-tab.on{color:var(--t1)}
.ep-tab::after{content:'';position:absolute;bottom:-1px;left:50%;width:0;height:2px;background:var(--acc);transition:width .3s ease,left .3s ease;border-radius:1px}
.ep-tab.on::after{width:80%;left:10%}

/* Modal entrance smoother */
.overlay:not(.dn) .modal{animation:modalIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes modalIn{
  0%{opacity:0;transform:scale(.92) translateY(20px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ══════════════════════════════════════
   POST MULTI-IMAGE CAROUSEL
   ══════════════════════════════════════ */
.post-carousel{position:relative;width:100%;overflow:hidden;background:#000;cursor:grab;user-select:none;touch-action:pan-y pinch-zoom}
.post-carousel:active{cursor:grabbing}
.post-carousel__track{display:flex;width:100%;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.post-carousel__slide{flex:0 0 100%;width:100%;display:flex;align-items:center;justify-content:center;background:#000}
.post-carousel__slide img,.post-carousel__slide video{width:100%;max-height:460px;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.post-carousel__slide video{pointer-events:auto}
.post-carousel__arr{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;z-index:5;line-height:1;padding-bottom:3px}
.post-carousel__arr:hover{background:rgba(0,0,0,.8);transform:translateY(-50%) scale(1.05)}
.post-carousel__arr--l{left:10px}
.post-carousel__arr--r{right:10px}
.post-carousel__count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;backdrop-filter:blur(6px)}

/* ══════════════════════════════════════
   IMAGE CROPPER
   ══════════════════════════════════════ */
.cropper-modal{width:560px;max-width:95vw}
.cropper-mb{padding:0!important}
.cropper-stage{position:relative;width:100%;height:380px;background:#0a0a0c;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.cropper-stage.cropper-dragging{cursor:grabbing}
#cropper-img{position:absolute;top:0;left:0;display:block;pointer-events:auto;will-change:transform;-webkit-user-drag:none;user-drag:none}
.cropper-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.cropper-frame{position:relative;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,0.55);background:transparent;pointer-events:none}
/* Avatar (1:1 circle) */
.cropper-stage--avatar .cropper-frame{width:280px;height:280px;border-radius:50%}
/* Cover (16:5 wide) */
.cropper-stage--cover .cropper-frame{width:480px;height:150px;border-radius:8px}
.cropper-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.18) 1px,transparent 1px);background-size:33.33% 33.33%;border-radius:inherit;pointer-events:none}
.cropper-handle{position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:none}
.cropper-handle--tl{top:-7px;left:-7px}
.cropper-handle--tr{top:-7px;right:-7px}
.cropper-handle--bl{bottom:-7px;left:-7px}
.cropper-handle--br{bottom:-7px;right:-7px}

.cropper-controls{padding:18px 20px;background:var(--card);border-top:1px solid var(--brd)}
.cropper-zoom-label{display:block;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;font-weight:600}
#cropper-zoom{width:100%;height:4px;border-radius:2px;background:var(--hov);outline:none;-webkit-appearance:none;appearance:none}
#cropper-zoom::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid var(--card);box-shadow:0 2px 6px rgba(0,0,0,.2)}
#cropper-zoom::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid var(--card)}
.cropper-actions{margin-top:14px;display:flex;justify-content:center}

body.dark .cropper-modal{background:var(--card)}
body.dark .cropper-stage{background:#000}

/* ══════════════════════════════════════
   ENHANCED STORY CREATOR
   ══════════════════════════════════════ */
.story-creator{display:flex;gap:24px;align-items:flex-start}
.story-creator__preview{position:relative;width:240px;flex-shrink:0;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 8px 32px rgba(0,0,0,.15);user-select:none}
.story-creator__bg{position:absolute;inset:0;transition:background .3s}
.story-creator__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.story-creator__text-wrap{position:absolute;cursor:grab;z-index:5;max-width:90%;padding:0;border-radius:0;transition:none;background:transparent!important;box-shadow:none!important;border:none!important}
.story-creator__text-wrap:hover{background:transparent!important;outline:1px dashed rgba(255,255,255,.35);outline-offset:8px;border-radius:4px}
.story-creator__text-wrap:active{cursor:grabbing}
.story-creator__text{background:transparent!important;background-color:transparent!important;border:none!important;color:#fff;font-size:20px;font-weight:600;text-align:center;outline:none!important;font-family:'Outfit',sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.6),0 0 4px rgba(0,0,0,.4);width:auto;min-width:140px;max-width:200px;resize:none;padding:0;margin:0;cursor:text;overflow:hidden;line-height:1.25;display:block;box-shadow:none!important}
.story-creator__text::placeholder{color:rgba(255,255,255,.55);font-weight:500}
.story-creator__text:focus{outline:none!important;box-shadow:none!important;border:none!important}

/* Override any global modal textarea/input styles that might affect this */
#m-story textarea#story-text{background:transparent!important;border:none!important;box-shadow:none!important;outline:none!important}
#m-story textarea#story-text:focus{background:transparent!important;border:none!important;box-shadow:none!important;outline:none!important}
body.dark #m-story textarea#story-text{background:transparent!important;background-color:transparent!important;border:none!important;box-shadow:none!important}
body.dark #m-story textarea#story-text:focus{background:transparent!important;background-color:transparent!important;border:none!important;box-shadow:none!important}
.story-creator__hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.5);background:rgba(0,0,0,.4);padding:3px 10px;border-radius:8px;backdrop-filter:blur(8px);pointer-events:none;z-index:6;letter-spacing:.3px}

.story-creator__options{flex:1;display:flex;flex-direction:column;min-width:0}
.story-opt-label{font-size:11px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;display:block}

.story-fonts{display:flex;flex-wrap:wrap;gap:6px}
.story-font{width:42px;height:42px;border-radius:10px;border:1.5px solid var(--brd);background:var(--card);color:var(--t1);cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:var(--tr);font-family:'Outfit',sans-serif}
.story-font:hover{border-color:var(--t3);transform:translateY(-1px)}
.story-font.on{border-color:var(--t1);background:var(--hov);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
body.dark .story-font.on{box-shadow:0 0 0 3px rgba(255,255,255,.08)}

.story-text-colors{display:flex;flex-wrap:wrap;gap:6px}
.story-tc-opt{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:var(--tr);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.story-tc-opt:hover{transform:scale(1.15)}
.story-tc-opt.on{border-color:var(--t1);transform:scale(1.15)}

/* Floating text in story viewer */
.story-viewer__floating-text{position:absolute;transform:translate(-50%,-50%);max-width:85%;text-align:center;font-size:22px;font-weight:600;line-height:1.3;z-index:10;padding:6px 12px;word-wrap:break-word;pointer-events:none}

/* ══════════════════════════════════════
   STORY CREATOR v2 — multi-text + draggable photo
   ══════════════════════════════════════ */
.story-creator__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:grab;transition:none;user-select:none;-webkit-user-drag:none;z-index:1}
.story-creator__img:active{cursor:grabbing}
.story-creator__overlay{position:absolute;inset:0;z-index:4;pointer-events:none}
.story-creator__overlay > *{pointer-events:auto}
.story-creator__hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.6);background:rgba(0,0,0,.5);padding:5px 12px;border-radius:10px;backdrop-filter:blur(8px);pointer-events:auto;cursor:pointer;z-index:6;letter-spacing:.3px;border:1px solid rgba(255,255,255,.1)}
.story-creator__hint:hover{background:rgba(0,0,0,.7);color:#fff}

/* Draggable text block */
.story-text-block{position:absolute;cursor:grab;padding:6px;border-radius:6px;transition:outline .15s;display:inline-block;min-width:60px;max-width:90%}
.story-text-block:active{cursor:grabbing}
.story-text-block.active{outline:2px dashed rgba(255,255,255,.6);outline-offset:4px}
.story-text-input{background:transparent!important;border:none!important;outline:none!important;color:#fff;font-size:22px;font-weight:600;text-align:center;font-family:'Outfit',sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.6),0 0 4px rgba(0,0,0,.4);min-width:60px;resize:none;padding:0;margin:0;cursor:text;overflow:hidden;line-height:1.25;display:block;box-shadow:none!important;word-wrap:break-word;white-space:pre-wrap}
.story-text-input::placeholder{color:rgba(255,255,255,.5)}
.story-text-input:focus{outline:none!important;box-shadow:none!important}
body.dark .story-text-input{background:transparent!important;background-color:transparent!important;border:none!important}

/* Resize handle on active block */
.story-text-resize{position:absolute;bottom:-10px;right:-10px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.8);color:#fff;border:1.5px solid rgba(255,255,255,.4);cursor:se-resize;display:flex;align-items:center;justify-content:center;z-index:10;font-size:9px;line-height:1}
.story-text-resize:hover{background:rgba(124,92,255,.9)}

/* Size slider in panel for active text */
.story-text-size{margin-top:10px}
.story-text-size-label{font-size:11px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;display:block}
.story-text-size input[type="range"]{width:100%;cursor:pointer}

.story-text-del{position:absolute;top:-12px;right:-12px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.8);color:#fff;border:1.5px solid rgba(255,255,255,.4);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .15s;font-family:var(--f1)}
.story-text-del:hover{background:rgba(239,68,68,.95);transform:scale(1.1)}

/* Add text button */
.story-add-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;border:1px dashed var(--brd);background:var(--card);color:var(--t1);cursor:pointer;font-size:12.5px;font-weight:500;transition:var(--tr);font-family:var(--f1);margin-bottom:14px}
.story-add-btn:hover{border-color:var(--t3);background:var(--hov)}
.story-opt-hint{font-size:9px;font-weight:400;color:var(--t3);text-transform:none;letter-spacing:0;margin-left:4px}

/* ══════════════════════════════════════
   LIVE SEARCH DROPDOWN
   ══════════════════════════════════════ */
.hdr-search{position:relative}
.hdr-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:rgba(120,120,120,.18);border:none;cursor:pointer;color:var(--t2);font-size:11px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.hdr-search-clear:hover{background:rgba(120,120,120,.32);color:var(--t1)}
body.dark .hdr-search-clear{background:rgba(255,255,255,.06)}
body.dark .hdr-search-clear:hover{background:rgba(255,255,255,.12)}

.hdr-search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;width:100%;min-width:380px;max-height:560px;overflow-y:auto;background:var(--card);border:1px solid var(--brd);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.18);z-index:100;animation:lsDropdown .2s ease;padding:6px 0}
body.dark .hdr-search-dropdown{box-shadow:0 16px 56px rgba(0,0,0,.55);background:#161619}
@keyframes lsDropdown{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}

.hdr-search-dropdown::-webkit-scrollbar{width:6px}
.hdr-search-dropdown::-webkit-scrollbar-thumb{background:var(--brd);border-radius:3px}

.ls-section{padding:6px 0}
.ls-section + .ls-section{border-top:1px solid var(--brd)}
.ls-section-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px;font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.6px;text-transform:uppercase}
.ls-count{background:var(--hov);color:var(--t2);font-size:10px;font-weight:600;padding:1px 7px;border-radius:10px;letter-spacing:0;text-transform:none}
.ls-clear-btn{background:none;border:none;color:var(--t3);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:4px;font-family:var(--f1);letter-spacing:.3px;text-transform:none;font-weight:500}
.ls-clear-btn:hover{color:var(--t1);background:var(--hov)}

.ls-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;transition:background .12s;position:relative}
.ls-item:hover{background:var(--hov)}
.ls-recent-item .ls-text{font-size:13.5px;color:var(--t1);font-weight:500;flex:1}

.ls-icon-circle{width:32px;height:32px;border-radius:50%;background:var(--hov);color:var(--t3);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.ls-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--hov);display:flex;align-items:center;justify-content:center}
.ls-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ls-avatar--group{background:linear-gradient(145deg,#3a3a44,#5a5a66);color:#fff;border-radius:10px}
.ls-avatar--music{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border-radius:10px}

.ls-info{flex:1;min-width:0}
.ls-name{font-size:13.5px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-name mark{background:rgba(124,92,255,.18);color:inherit;padding:0;font-weight:700}
body.dark .ls-name mark{background:rgba(124,92,255,.28)}
.ls-meta{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.ls-meta mark{background:rgba(124,92,255,.15);color:inherit;padding:0}
.ls-verified{flex-shrink:0}

.ls-action{background:rgba(0,0,0,.04);border:1px solid var(--brd);border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--t1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;padding:0}
.ls-action:hover{background:var(--hov);border-color:var(--t3);transform:scale(1.06)}
body.dark .ls-action{background:rgba(255,255,255,.04);border-color:#2e2e36}
body.dark .ls-action:hover{background:rgba(255,255,255,.08)}

.ls-arrow{color:var(--t3);flex-shrink:0;opacity:.6;transition:opacity .15s}
.ls-item:hover .ls-arrow{opacity:1;color:var(--t1)}

.ls-show-all{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;font-size:13px;font-weight:600;color:var(--t1);cursor:pointer;border-bottom:1px solid var(--brd);transition:background .15s}
.ls-show-all:hover{background:var(--hov)}
.ls-show-all svg{color:var(--t3)}

.ls-empty{padding:32px 20px;text-align:center;font-size:13px;color:var(--t3);line-height:1.5}
.ls-empty b{color:var(--t1);font-weight:600}

/* Mobile */
@media (max-width: 640px) {
  .hdr-search-dropdown{position:fixed;top:60px;left:8px;right:8px;width:auto;min-width:0}
}

/* ══════════════════════════════════════
   SHORTS GRID (profile tab)
   ══════════════════════════════════════ */
.si{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#1a1a1f;cursor:pointer;border:1px solid var(--brd)}
.si-video{width:100%;height:100%;object-fit:cover;display:block}
.si-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--card);border:2px dashed var(--brd);color:var(--t3);font-size:12px;cursor:pointer;transition:var(--tr)}
.si-add:hover{border-color:var(--t2);color:var(--t1);background:var(--hov)}
.si-del{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:11px;display:none;align-items:center;justify-content:center;z-index:3}
.si:hover .si-del{display:flex}

/* ══════════════════════════════════════
   SHORTS CREATOR
   ══════════════════════════════════════ */
.shorts-creator{display:flex;gap:24px;align-items:flex-start}
.shorts-creator__preview{position:relative;width:240px;flex-shrink:0;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#0a0a0d;border:1px solid var(--brd)}
.shorts-creator__preview video{width:100%;height:100%;object-fit:cover;display:block}
.shorts-creator__upload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--t3);transition:var(--tr);font-family:var(--f1)}
.shorts-creator__upload:hover{background:var(--hov);color:var(--t1)}
.shorts-creator__upload span{font-size:13px;font-weight:500}
.shorts-creator__upload small{font-size:11px;opacity:.7}

.shorts-preview-clear{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:5;backdrop-filter:blur(8px)}
.shorts-preview-clear:hover{background:rgba(239,68,68,.85)}

.shorts-sound-badge{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);color:#fff;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:500;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:4}

.shorts-creator__options{flex:1;display:flex;flex-direction:column;min-width:0}
.shorts-caption-input{background:var(--hov);border:1px solid var(--brd);outline:none;border-radius:10px;padding:10px 12px;color:var(--t1);font-size:13px;font-family:var(--f1);resize:none;line-height:1.45;width:100%;transition:border-color .15s}
.shorts-caption-input:focus{border-color:var(--t3)}

.shorts-sound-options{display:flex;flex-direction:column;gap:6px}
.shorts-sound-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;border:1px solid var(--brd);background:var(--card);color:var(--t1);cursor:pointer;font-size:13px;font-weight:500;transition:var(--tr);font-family:var(--f1);text-align:left}
.shorts-sound-opt:hover{background:var(--hov);border-color:var(--t3)}
.shorts-sound-opt.on{border-color:var(--t1);background:var(--hov)}
.shorts-sound-opt svg{flex-shrink:0;color:var(--t2)}
.shorts-sound-opt.on svg{color:var(--t1)}

.shorts-mute-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px;font-size:12px;color:var(--t2);cursor:pointer}
.shorts-mute-toggle input{margin:0}

.shorts-library{margin-top:14px;max-height:240px;overflow-y:auto;border:1px solid var(--brd);border-radius:10px;background:var(--card)}
.shorts-lib-head{padding:10px 14px;font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--brd);position:sticky;top:0;background:var(--card)}
.shorts-lib-track{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s}
.shorts-lib-track:hover{background:var(--hov)}
.shorts-lib-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.shorts-lib-info{flex:1;min-width:0}
.shorts-lib-title{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shorts-lib-artist{font-size:11px;color:var(--t3);margin-top:1px}

/* ══════════════════════════════════════
   SHORTS VIEWER (TikTok-style)
   ══════════════════════════════════════ */
#m-short-view{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
#m-short-view.dn{display:none}
.short-viewer{position:relative;width:min(420px,100vw);height:min(740px,100vh);background:#000;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.short-viewer__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(8px)}
.short-viewer__close:hover{background:rgba(0,0,0,.8)}
.short-viewer__video{width:100%;height:100%;object-fit:cover;display:block;background:#000}

.short-viewer__info{position:absolute;left:14px;right:80px;bottom:14px;color:#fff;z-index:5;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.short-viewer__author{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.short-viewer__author .av{border:2px solid rgba(255,255,255,.35)!important}
.short-viewer__name{font-size:14px;font-weight:700;color:#fff}
.short-viewer__sound{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);padding:4px 9px;border-radius:12px;backdrop-filter:blur(6px);margin-top:3px;max-width:240px}
.short-viewer__sound span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:scrollText 12s linear infinite}
.short-viewer__caption{font-size:13.5px;color:#fff;line-height:1.4;max-width:320px}
@keyframes scrollText{0%,5%{transform:translateX(0)}45%,55%{transform:translateX(calc(200px - 100%))}95%,100%{transform:translateX(0)}}

.short-viewer__actions{position:absolute;right:12px;bottom:90px;display:flex;flex-direction:column;gap:18px;z-index:5}
.sva-btn{background:none;border:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;text-shadow:0 1px 4px rgba(0,0,0,.6);transition:transform .15s}
.sva-btn:hover{transform:scale(1.1)}
.sva-btn span{font-size:11px;font-weight:600}
.sva-btn.liked svg{fill:#ef4444!important;stroke:#ef4444!important}

/* ══════════════════════════════════════
   PROFILE TOUR / SETUP GUIDE
   ══════════════════════════════════════ */
.ptg{background:var(--card);border:1px solid var(--brd);border-radius:14px;margin:0 0 20px 0;overflow:hidden;box-shadow:var(--sh);animation:ptgIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes ptgIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.ptg.ptg--leaving{animation:ptgOut .3s ease forwards}
@keyframes ptgOut{to{opacity:0;transform:translateY(-8px);max-height:0;margin:0;padding:0;border:none}}

.ptg__header{padding:18px 20px;border-bottom:1px solid var(--brd)}
.ptg.ptg--collapsed .ptg__header{border-bottom:none}
.ptg__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ptg__title{font-size:16px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px;margin:0 0 3px 0;font-family:var(--f1)}
.ptg__count{font-size:12px;font-weight:600;color:var(--t3);background:var(--hov);padding:2px 9px;border-radius:10px}
.ptg__sub{font-size:12.5px;color:var(--t3);line-height:1.4}
.ptg__head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ptg__toggle{background:none;border:none;color:var(--t3);cursor:pointer;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ptg__toggle:hover{background:var(--hov);color:var(--t1)}
.ptg__skip{background:none;border:1px solid var(--brd);border-radius:18px;padding:6px 14px;font-size:11.5px;color:var(--t3);cursor:pointer;font-family:var(--f1);font-weight:500;transition:var(--tr)}
.ptg__skip:hover{border-color:var(--t2);color:var(--t1)}

.ptg__bar{width:100%;height:4px;background:var(--hov);border-radius:2px;overflow:hidden}
.ptg__bar-fill{height:100%;background:linear-gradient(90deg,#22c55e,#10b981);transition:width .5s cubic-bezier(.16,1,.3,1);border-radius:2px}

.ptg__steps{display:flex;flex-direction:column}
.ptg-step{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--hov);transition:background .15s}
.ptg-step:first-child{border-top:none}
.ptg-step:hover{background:var(--hov)}
.ptg-step__icon{width:38px;height:38px;border-radius:10px;background:var(--hov);color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s}
.ptg-step--done .ptg-step__icon{background:rgba(34,197,94,.12);color:#22c55e}
.ptg-step__info{flex:1;min-width:0}
.ptg-step__title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:2px;font-family:var(--f1)}
.ptg-step__desc{font-size:12px;color:var(--t3);line-height:1.4}
.ptg-step--done .ptg-step__title{text-decoration:line-through;text-decoration-color:rgba(156,163,175,.45);color:var(--t2)}
.ptg-step--done .ptg-step__desc{color:var(--t3);opacity:.7}
.ptg-step__btn{background:var(--card);border:1px solid var(--brd);border-radius:10px;padding:8px 16px;font-size:12.5px;color:var(--t1);cursor:pointer;font-family:var(--f1);font-weight:500;flex-shrink:0;transition:var(--tr)}
.ptg-step__btn:hover{background:var(--hov);border-color:var(--t3);transform:translateY(-1px)}
body.dark .ptg-step__btn{background:#1f1f25;border-color:#2e2e36}
body.dark .ptg-step__btn:hover{background:#26262e;border-color:#3a3a44}

.ptg-step__badge{font-size:11px;font-weight:700;color:#22c55e;background:rgba(34,197,94,.12);padding:5px 12px;border-radius:14px;letter-spacing:.3px;flex-shrink:0;display:inline-flex;align-items:center;gap:4px}

/* Mobile */
@media (max-width: 640px) {
  .ptg-step{flex-wrap:wrap}
  .ptg-step__btn,.ptg-step__badge{margin-left:52px;margin-top:4px}
}

/* ══════════════════════════════════════
   POLL CREATOR & DISPLAY
   ══════════════════════════════════════ */
.poll-creator{display:flex;flex-direction:column}
.poll-question-input{background:var(--hov);border:1px solid var(--brd);border-radius:10px;padding:12px 14px;color:var(--t1);font-size:15px;font-weight:600;outline:none;font-family:var(--f1);transition:border-color .15s;width:100%}
.poll-question-input:focus{border-color:var(--t3)}
.poll-opts-list{display:flex;flex-direction:column;gap:8px}
.poll-opt-row{display:flex;align-items:center;gap:8px}
.poll-opt-num{width:24px;height:24px;border-radius:50%;background:var(--hov);color:var(--t3);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.poll-opt-input{flex:1;background:var(--hov);border:1px solid var(--brd);border-radius:8px;padding:9px 12px;color:var(--t1);font-size:13px;outline:none;font-family:var(--f1);transition:border-color .15s}
.poll-opt-input:focus{border-color:var(--t3)}
.poll-opt-del{background:none;border:none;cursor:pointer;color:var(--t3);width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.poll-opt-del:hover{background:rgba(239,68,68,.12);color:#ef4444}
.poll-add-opt{margin-top:10px;background:none;border:1px dashed var(--brd);border-radius:8px;padding:10px;cursor:pointer;color:var(--t3);font-size:12.5px;font-family:var(--f1);font-weight:500;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:6px}
.poll-add-opt:hover{border-color:var(--t2);color:var(--t1);background:var(--hov)}
.poll-limit-hint{font-size:11px;color:var(--t3);text-align:center;padding:8px}
.poll-preview-hint{margin-top:14px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t3);background:var(--hov);padding:8px 12px;border-radius:8px}

/* Poll attach preview */
.attach-poll-preview{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--brd);border-radius:10px;background:var(--hov);position:relative;max-width:320px}
.attach-poll-icon{font-size:20px;flex-shrink:0}
.attach-poll-info{flex:1;min-width:0}
.attach-poll-q{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-poll-meta{font-size:11px;color:var(--t3)}
.attach-poll-del{background:rgba(0,0,0,.7);color:#fff;border:none;width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

/* Poll in post */
.post-poll{margin:8px 16px;padding:14px;border:1px solid var(--brd);border-radius:12px;background:var(--hov)}
.post-poll__q{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:12px;line-height:1.4}
.post-poll__opts{display:flex;flex-direction:column;gap:6px}
.poll-vote-btn{padding:11px 14px;background:var(--card);border:1px solid var(--brd);border-radius:10px;color:var(--t1);cursor:pointer;font-size:13px;font-family:var(--f1);text-align:left;transition:all .15s;font-weight:500}
.poll-vote-btn:hover{background:var(--hov);border-color:var(--t3);transform:translateX(2px)}
.poll-result{position:relative;padding:11px 14px;border-radius:10px;cursor:pointer;overflow:hidden;background:var(--card);border:1px solid var(--brd);transition:all .15s}
.poll-result:hover{border-color:var(--t3)}
.poll-result--mine{border-color:#22c55e;background:rgba(34,197,94,.06)}
.poll-result__bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(124,92,255,.18),rgba(236,72,153,.18));transition:width .5s cubic-bezier(.16,1,.3,1);z-index:0}
.poll-result--mine .poll-result__bar{background:linear-gradient(90deg,rgba(34,197,94,.25),rgba(16,185,129,.18))}
.poll-result__content{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px}
.poll-result__text{font-size:13px;color:var(--t1);font-weight:500}
.poll-result__pct{font-size:13px;font-weight:700;color:var(--t1)}
.post-poll__meta{margin-top:10px;font-size:11.5px;color:var(--t3)}
.post-poll__unvote{background:none;border:none;color:var(--t2);cursor:pointer;font-size:11.5px;text-decoration:underline;font-family:var(--f1);padding:0}
.post-poll__unvote:hover{color:var(--t1)}

/* ══════════════════════════════════════
   GRAFFITI
   ══════════════════════════════════════ */
.graffiti-toolbar{display:flex;align-items:center;gap:10px;padding:10px 0;flex-wrap:wrap;border-bottom:1px solid var(--brd);margin-bottom:12px}
.grf-tool-group{display:flex;gap:4px;padding:0 6px;border-right:1px solid var(--brd)}
.grf-tool-group:last-child{border-right:none}
.grf-tool{background:var(--card);border:1px solid var(--brd);border-radius:8px;padding:7px;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.grf-tool:hover{background:var(--hov);color:var(--t1)}
.grf-tool.on{background:var(--hov);color:var(--t1);border-color:var(--t3)}
.grf-colors{display:flex;gap:4px;padding:0 6px;border-right:1px solid var(--brd)}
.grf-color{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s;padding:0}
.grf-color:hover{transform:scale(1.15)}
.grf-color.on{border-color:var(--t1);transform:scale(1.15)}
.grf-custom-color{width:32px;height:32px;border:1px solid var(--brd);border-radius:6px;cursor:pointer;background:none;padding:2px;margin-right:6px}
.grf-size{display:flex;align-items:center;gap:6px;padding:0 6px;border-right:1px solid var(--brd);color:var(--t3)}
.grf-size input{width:80px;cursor:pointer}
.grf-size span{font-size:11px;color:var(--t2);min-width:18px}
.grf-bg-btn{width:24px;height:24px;border-radius:6px;cursor:pointer;border:1px solid var(--brd);padding:0;transition:transform .12s}
.grf-bg-btn:hover{transform:scale(1.1)}
.grf-bg-grad{background:linear-gradient(135deg,#8b5cf6,#ec4899,#f59e0b)}

.graffiti-canvas-wrap{border:1px solid var(--brd);border-radius:12px;overflow:hidden;background:#fff}
#grf-canvas{width:100%;height:auto;display:block;cursor:crosshair;touch-action:none;background:#fff}
body.dark .graffiti-canvas-wrap{background:#1a1a1f}

/* Graffiti attach preview */
.attach-graffiti-preview{position:relative;display:inline-block;border-radius:10px;overflow:hidden}
.attach-graffiti-img{max-height:120px;max-width:100%;display:block;border-radius:10px}
.attach-graffiti-del{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.attach-graffiti-label{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:3px 8px;border-radius:8px;backdrop-filter:blur(6px)}

/* Graffiti in post */
.post-graffiti{position:relative;margin:8px 16px;border-radius:12px;overflow:hidden;border:1px solid var(--brd)}
.post-graffiti img{width:100%;display:block}
.post-graffiti-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:4px 10px;border-radius:10px;backdrop-filter:blur(6px);font-weight:500}

/* Graffiti as main post media — fills the .pc-img area */
.pc-img .post-graffiti--main{margin:0;border-radius:0;border:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}
.pc-img .post-graffiti--main img{width:100%;height:100%;max-height:460px;object-fit:contain;display:block}

/* Poll as main post content — fills the .pc-img area */
.pc-img .post-poll-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:linear-gradient(160deg,var(--card),var(--hov))}
.pc-img .post-poll-wrap .post-poll{margin:0;width:100%;max-width:440px;padding:22px;border-radius:16px;background:var(--card);box-shadow:var(--sh)}
.pc-img .post-poll-wrap .post-poll__q{font-size:18px;line-height:1.35;margin-bottom:18px}
.pc-img .post-poll-wrap .post-poll__opts{gap:8px}
.pc-img .post-poll-wrap .post-poll__meta{margin-top:14px;font-size:12.5px}

/* ════════════════════════════════════════════════════════════
   MUSIC HOME (Spotify-like greeting page)
   ════════════════════════════════════════════════════════════ */
.mus-home{padding-bottom:32px}
.mus-greet{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px}
.mus-greet__sub{font-size:12.5px;color:var(--t3);margin-bottom:4px;font-weight:500;letter-spacing:0.3px}
.mus-greet__t{font-size:32px;font-weight:700;margin:0;line-height:1.05}
.mus-sec-link{font-size:12px;color:var(--t3);cursor:pointer;text-decoration:none;font-weight:500;transition:var(--tr)}
.mus-sec-link:hover{color:var(--t1)}

/* Quick access strip */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.qa-item{display:flex;align-items:center;gap:12px;padding:8px;padding-right:18px;background:var(--hov);border-radius:8px;cursor:pointer;transition:var(--tr);border:1px solid transparent}
.qa-item:hover{background:var(--card);border-color:var(--brd);transform:translateY(-1px)}
.qa-cover{width:50px;height:50px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:600}
.qa-label{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Trending tile-cards */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tile-card{background:var(--hov);border-radius:10px;padding:14px;cursor:pointer;transition:var(--tr);border:1px solid transparent}
.tile-card:hover{background:var(--card);border-color:var(--brd);transform:translateY(-2px)}
.tile-cover{position:relative;margin-bottom:10px}
.tile-card:hover .tile-play{opacity:1;transform:translateY(0)}
.tile-play{position:absolute;bottom:8px;right:8px;width:38px;height:38px;border-radius:50%;background:#1ed760;color:#000;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:all 0.25s var(--ease);box-shadow:0 6px 16px rgba(0,0,0,0.25)}
.tile-play:hover{transform:scale(1.06)}
.tile-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-meta{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* New releases */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.rel-card{cursor:pointer;transition:var(--tr)}
.rel-card:hover{transform:translateY(-2px)}
.rel-cover{position:relative;margin-bottom:8px}
.rel-play-btn{position:absolute;bottom:8px;right:8px;width:36px;height:36px;border-radius:50%;background:#1ed760;color:#000;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:all 0.25s var(--ease);box-shadow:0 6px 14px rgba(0,0,0,0.25)}
.rel-card:hover .rel-play-btn,.art-release:hover .rel-play-btn{opacity:1;transform:translateY(0)}
.rel-play-btn:hover{transform:scale(1.06)}
.rel-name{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-meta{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Articles grid */
.art-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.art-list-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
@media (max-width:900px){.art-grid,.art-list-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.art-grid,.art-list-grid{grid-template-columns:1fr}}

.art-card{background:var(--hov);border-radius:12px;overflow:hidden;cursor:pointer;transition:var(--tr);display:flex;flex-direction:column;border:1px solid transparent}
.art-card:hover{background:var(--card);border-color:var(--brd);transform:translateY(-2px)}
.art-card--featured{grid-row:span 1}
.art-card__cover{position:relative}
.art-card__tag{position:absolute;top:12px;left:12px;font-size:11.5px;letter-spacing:0.3px;font-weight:700;padding:6px 11px 6px 8px;border-radius:999px;background:rgba(0,0,0,0.78);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,0.4);z-index:2;display:inline-flex;align-items:center;gap:5px;line-height:1}
.art-card__tag .tag-ico{width:13px;height:13px;flex-shrink:0;opacity:0.95}
.art-card__body{padding:14px 16px}
.art-card__title{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--t1);margin-bottom:8px}
.art-card--featured .art-card__title{font-size:17px}
.art-card__meta{font-size:11.5px;color:var(--t3)}

/* Friend activity */
.fa-list{display:flex;flex-direction:column;gap:6px}
.fa-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;background:var(--hov);transition:var(--tr)}
.fa-item:hover{background:var(--card)}
.fa-text{font-size:13px;color:var(--t1);flex:1;line-height:1.45}
.fa-text b{font-weight:600}
.fa-time{font-size:11px;color:var(--t3);flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   ARTIST PAGE — pill buttons + edit overlay + bio block
   ════════════════════════════════════════════════════════════ */
.btn-pill{background:var(--card);color:var(--t1);border:1px solid var(--brd);border-radius:999px;padding:10px 22px;font-size:13px;font-weight:500;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.btn-pill:hover{background:var(--hov);transform:translateY(-1px)}
.btn-pill--accent{background:var(--acc);color:#fff;border-color:transparent;font-weight:600}
.btn-pill--accent:hover{opacity:0.92}
.btn-pill--icon{padding:10px 14px}

.art-hero__edit{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:5}
.art-hero__edit-btn{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.55);color:#fff;border:1px solid rgba(255,255,255,0.18);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:500;cursor:pointer;backdrop-filter:blur(8px);transition:var(--tr)}
.art-hero__edit-btn:hover{background:rgba(0,0,0,0.78)}

.art-bio-block{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:22px}
.art-bio-block__text{margin:0 0 18px;font-size:14px;line-height:1.7;color:var(--t2)}
.art-bio-block__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;padding-top:16px;border-top:1px solid var(--brd)}
.art-bio-block__stats > div{display:flex;flex-direction:column;gap:2px}
.art-bio-block__stats b{font-size:18px;font-weight:600;color:var(--t1)}
.art-bio-block__stats small{font-size:11px;color:var(--t3)}

/* ════════════════════════════════════════════════════════════
   NOW PLAYING (full-screen player with tabs)
   ════════════════════════════════════════════════════════════ */
.np-page{position:relative;min-height:600px;background:linear-gradient(180deg,var(--np-ac,#7c3aed)18 0%,var(--card) 70%);border-radius:18px;overflow:hidden;border:1px solid var(--brd)}
.np-close{position:absolute;top:16px;left:16px;z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.4);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:var(--tr)}
.np-close:hover{background:rgba(0,0,0,0.7)}
.np-grid{display:grid;grid-template-columns:380px 1fr;min-height:600px}
@media (max-width:900px){.np-grid{grid-template-columns:1fr}}

.np-left{padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:18px}
.np-cover-wrap{width:280px;height:280px;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.4);max-width:100%}
.np-meta{text-align:center;width:100%}
.np-title{font-size:22px;font-weight:600;color:var(--t1);margin-bottom:5px}
.np-artist{font-size:14px;color:var(--t2);cursor:pointer;transition:color 0.2s}
.np-artist:hover{color:var(--t1)}
.np-progress{width:100%}
.np-bar{height:4px;background:rgba(128,128,128,0.18);border-radius:2px;overflow:hidden;cursor:pointer}
.np-bar-fill{height:100%;background:var(--t1);border-radius:2px;transition:width 0.3s linear}
.np-times{display:flex;justify-content:space-between;font-size:11px;color:var(--t3);margin-top:6px}
.np-controls{display:flex;align-items:center;gap:14px}
.np-btn{background:transparent;border:none;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:50%;transition:var(--tr)}
.np-btn:hover{color:var(--t1);background:var(--hov)}
.np-btn--active{color:var(--acc)}
.np-btn--liked{color:var(--red)}
.np-play{width:54px;height:54px;background:var(--t1);color:var(--card)}
.np-play:hover{background:var(--t1);color:var(--card);transform:scale(1.04)}
.np-extra{display:flex;gap:14px;align-items:center}

.np-right{padding:32px 36px 32px 16px;display:flex;flex-direction:column;min-width:0;max-height:600px}
.np-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--brd);flex-shrink:0}
.np-tab{background:transparent;border:none;color:var(--t3);padding:10px 0;margin-right:24px;font-size:13.5px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;font-family:var(--f1);transition:var(--tr)}
.np-tab:hover{color:var(--t2)}
.np-tab--on{color:var(--t1);border-bottom-color:var(--np-ac,var(--acc))}
.np-pane{flex:1;overflow-y:auto;padding-right:6px;scroll-behavior:smooth}
.np-pane::-webkit-scrollbar{width:6px}
.np-pane::-webkit-scrollbar-thumb{background:var(--brd);border-radius:3px}

/* Lyrics list */
.np-lyr-list{font-family:var(--f-serif,Georgia,serif);font-size:17px;line-height:1.85;padding:0 4px}
.np-lyr-h{color:var(--t3);margin:18px 0 10px;font-size:11.5px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--f1)}
.np-lyr-spacer{height:14px}
.np-lyr{padding:5px 8px;margin:0 -8px;border-radius:6px;cursor:pointer;transition:all 0.4s var(--ease);position:relative}
.np-lyr--past{color:rgba(128,128,128,0.5);font-weight:400}
.np-lyr--future{color:rgba(128,128,128,0.7);font-weight:400}
.np-lyr--active{color:var(--t1);font-weight:600;background:linear-gradient(90deg,color-mix(in srgb,var(--np-ac) 18%,transparent),transparent)}
.np-lyr:hover{background:var(--hov)}
.np-lyr-note{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--np-ac,#7c3aed);color:#fff;font-size:10px;font-weight:700;margin-left:8px;cursor:pointer;font-family:var(--f1);vertical-align:middle;font-style:normal}
.np-lyr-note-body{display:none;margin-top:8px;padding:12px 14px;background:var(--hov);border-left:3px solid var(--np-ac,#7c3aed);border-radius:6px;font-family:var(--f1);font-size:13px;line-height:1.6;color:var(--t2);font-weight:400;font-style:normal}
.np-lyr-note-body--on{display:block}

/* About pane */
.np-about{padding:0 4px}
.np-about-story h4{font-size:13px;font-weight:600;color:var(--t1);margin:0 0 8px;letter-spacing:0.3px}
.np-about-story p{font-size:14px;line-height:1.7;color:var(--t2);margin:0 0 24px}
.np-about-quote{margin:0 0 24px;padding:14px 20px;border-left:3px solid var(--np-ac,#7c3aed);background:var(--hov);border-radius:0 8px 8px 0;font-family:var(--f-serif,Georgia,serif);font-size:15px;line-height:1.6;color:var(--t1);font-style:italic}
.np-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--hov);border-radius:10px;padding:16px}
.np-about-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.np-about-row span{color:var(--t3)}
.np-about-row b{color:var(--t1);font-weight:500;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-empty{padding:60px 20px;text-align:center;color:var(--t3)}
.np-empty p{margin:0 0 16px}

/* Queue */
.np-q-list{display:flex;flex-direction:column;gap:2px}
.np-q-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:var(--tr)}
.np-q-item:hover{background:var(--hov)}
.np-q-item--cur{background:var(--hov)}
.np-q-item--cur .np-q-t{color:var(--acc)}
.np-q-thumb{width:42px;height:42px;border-radius:6px;overflow:hidden;flex-shrink:0}
.np-q-info{flex:1;min-width:0}
.np-q-t{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-q-a{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-q-d{font-size:11px;color:var(--t3);flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ════════════════════════════════════════════════════════════ */
.article-page{padding-bottom:40px}
.article-body{max-width:780px;margin:0 auto;padding:24px 0}
.article-cover{margin-bottom:20px;border-radius:14px;overflow:hidden;position:relative}
.article-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.8px;padding:4px 11px;border-radius:999px;margin-bottom:14px}
.article-title{font-size:36px;font-weight:700;line-height:1.15;color:var(--t1);margin:0 0 14px;letter-spacing:-0.5px}
.article-meta{font-size:13px;color:var(--t3);margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--brd)}
.article-content{font-family:var(--f-serif,Georgia,serif);font-size:17px;line-height:1.75;color:var(--t1)}
.article-content p{margin:0 0 18px}

/* Article creator form */
.art-form{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px;max-width:780px}
.art-form .fg label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:6px}
.art-form .fg input,.art-form .fg textarea,.art-form .fg select{width:100%;padding:10px 14px;border-radius:10px;background:var(--hov);border:1px solid var(--brd);color:var(--t1);font-size:14px;font-family:var(--f1);outline:none;transition:var(--tr)}
.art-form .fg textarea{resize:vertical;line-height:1.6;font-family:var(--f1)}
.art-form .fg input:focus,.art-form .fg textarea:focus,.art-form .fg select:focus{border-color:var(--acc)}
.art-form .color-picker{display:flex;gap:8px;flex-wrap:wrap}
.art-form .color-opt{width:32px;height:32px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:var(--tr)}
.art-form .color-opt.on{border-color:var(--t1);transform:scale(1.08)}

/* serif font fallback */
:root{--f-serif:'Cormorant Garamond','Playfair Display',Georgia,serif}

/* ════════════════════════════════════════════════════════════
   MUSIC HOME — Genius hero + Spotify mechanics
   ════════════════════════════════════════════════════════════ */

/* HERO: главная статья + 2 боковых */
.mh-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;margin-bottom:28px}
@media (max-width:760px){.mh-grid{grid-template-columns:1fr}}

.mh-main,.mh-side{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;transition:var(--tr)}
.mh-main:hover,.mh-side:hover{transform:translateY(-2px)}
.mh-main{aspect-ratio:16/8;min-height:260px}
.mh-main__bg,.mh-side__bg{position:absolute;inset:0;z-index:0}
.mh-main__bg .img-fb-inner{background:linear-gradient(135deg,var(--ac,#7c3aed),color-mix(in srgb,var(--ac,#7c3aed) 30%,#000) 100%) !important}
.mh-side__bg .img-fb-inner{background:linear-gradient(120deg,var(--ac,#7c3aed),color-mix(in srgb,var(--ac,#7c3aed) 35%,#000) 100%) !important}
.mh-main__overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.6) 35%,rgba(0,0,0,0.25) 65%,rgba(0,0,0,0.55) 100%);z-index:1}
.mh-side__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.75) 100%);z-index:1}

.mh-main__content{position:relative;z-index:2;padding:24px 28px;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.mh-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(0,0,0,0.4);border-radius:999px;font-size:10px;letter-spacing:1.2px;font-weight:600;color:#fff;backdrop-filter:blur(6px);margin-bottom:14px}
.mh-main__title{font-family:var(--f-serif,Georgia,serif);font-size:30px;font-weight:600;line-height:1.15;max-width:480px;margin:0 0 10px;color:#fff;letter-spacing:-0.3px;text-shadow:0 2px 12px rgba(0,0,0,0.55)}
.mh-main__sub{font-size:13.5px;color:rgba(255,255,255,0.9);max-width:460px;line-height:1.55;margin:0;text-shadow:0 1px 6px rgba(0,0,0,0.6)}
.mh-main__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.mh-author{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,0.75)}
.mh-author__av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px}
.mh-cta{background:rgba(255,255,255,0.92);color:#0d0d10;border:none;border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.mh-cta:hover{background:#fff;transform:translateX(2px)}

.mh-aside{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.mh-side__content{position:relative;z-index:2;padding:16px 20px;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:#fff;min-height:120px}
.mh-tag{display:inline-block;padding:3px 8px;background:rgba(0,0,0,0.4);border-radius:999px;font-size:9.5px;letter-spacing:1.2px;font-weight:600;color:rgba(255,255,255,0.85);backdrop-filter:blur(6px);margin-bottom:8px}
.mh-side__title{font-family:var(--f-serif,Georgia,serif);font-size:16px;font-weight:600;line-height:1.3;max-width:320px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,0.55)}
.mh-side__meta{font-size:11px;color:rgba(255,255,255,0.8);margin-top:8px;text-shadow:0 1px 4px rgba(0,0,0,0.5)}

/* MADE FOR YOU (auto-mixes + playlists) */
.mfy-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.mfy-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.mfy-grid{grid-template-columns:repeat(2,1fr)}}
.mfy-card{cursor:pointer;transition:var(--tr)}
.mfy-card:hover{transform:translateY(-2px)}
.mfy-cover{aspect-ratio:1;border-radius:8px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;margin-bottom:8px;color:#fff;overflow:hidden}
.mfy-cover__label{font-size:10.5px;letter-spacing:1px;font-weight:500;color:rgba(255,255,255,0.7);margin-bottom:2px}
.mfy-cover__num{font-size:18px;font-weight:700;color:#fff}
.mfy-cover__emoji{position:absolute;top:12px;right:14px;font-size:24px;opacity:0.85}
.mfy-name{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mfy-meta{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* COMPACT TRENDING (2-column) */
.ctr-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
@media (max-width:700px){.ctr-grid{grid-template-columns:1fr}}
.ctr{display:grid;grid-template-columns:24px 40px 1fr auto auto;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;transition:var(--tr)}
.ctr:hover{background:var(--hov)}
.ctr--playing{background:var(--hov)}
.ctr--playing .ctr__t{color:var(--acc)}
.ctr__num{font-size:12px;color:var(--t3);text-align:center;font-variant-numeric:tabular-nums}
.ctr__cover{width:40px;height:40px;border-radius:4px;overflow:hidden}
.ctr__info{min-width:0}
.ctr__t{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctr__a{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color 0.15s}
.ctr__a:hover{color:var(--t1)}
.ctr__lyr{font-size:10px;font-weight:600;letter-spacing:0.4px;padding:3px 8px;border-radius:4px;background:color-mix(in srgb,var(--acc,#7c3aed) 18%,transparent);color:color-mix(in srgb,var(--acc,#7c3aed) 100%,#fff 30%);border:none;cursor:pointer;text-transform:uppercase;font-family:var(--f1);transition:var(--tr)}
.ctr__lyr:hover{background:color-mix(in srgb,var(--acc,#7c3aed) 32%,transparent)}
.ctr__lyr--off{background:rgba(128,128,128,0.05);color:var(--t3);text-align:center}
.ctr__d{font-size:11px;color:var(--t3);text-align:right;font-variant-numeric:tabular-nums;min-width:32px}

/* «текст» бейдж в табличной строке трека */
.tr-lyr-badge{font-size:10px;font-weight:600;letter-spacing:0.4px;padding:3px 9px;border-radius:4px;background:color-mix(in srgb,var(--acc,#7c3aed) 18%,transparent);color:color-mix(in srgb,var(--acc,#7c3aed) 100%,#fff 30%);border:none;cursor:pointer;text-transform:uppercase;font-family:var(--f1);transition:var(--tr)}
.tr-lyr-badge:hover{background:color-mix(in srgb,var(--acc,#7c3aed) 32%,transparent);transform:translateY(-1px)}

/* GENRES */
.genre-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:900px){.genre-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:600px){.genre-grid{grid-template-columns:repeat(3,1fr)}}
.genre-tile{aspect-ratio:4/3;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;color:#fff;transition:var(--tr);overflow:hidden;position:relative}
.genre-tile:hover{transform:translateY(-2px) scale(1.02)}
.genre-tile__emoji{font-size:18px}
.genre-tile__name{font-size:13px;font-weight:600;color:#fff}

/* SECTION HEADERS */
.mus-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.mus-sec-h > span{font-size:17px;font-weight:600;color:var(--t1);display:inline-flex;align-items:center;gap:8px}

/* Article actions footer */
.article-actions{margin-top:32px;padding-top:24px;border-top:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* small greeting tweaks for new compact layout */
.mus-greet{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:0;gap:16px}
.mus-greet__sub{font-size:11.5px;color:var(--t3);margin-bottom:4px;letter-spacing:0.3px}
.mus-greet__t{font-size:26px;font-weight:600;margin:0;line-height:1.05}

/* alias: .trend-grid == .ctr-grid (used by Music.page) */
.trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
@media (max-width:700px){.trend-grid{grid-template-columns:1fr}}

/* small section header for «БЫСТРЫЙ ДОСТУП» */
.mus-sec-h--small{font-size:11.5px;font-weight:600;color:var(--t3);letter-spacing:1px;margin-bottom:12px}

/* ════════════════════════════════════════════════════════════
   ARTIST «ABOUT» BLOCK — Genius-style fact-list + text
   ════════════════════════════════════════════════════════════ */
.art-about{display:grid;grid-template-columns:280px 1fr;gap:32px;background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:28px}
@media (max-width:760px){.art-about{grid-template-columns:1fr;gap:24px;padding:20px}}

.art-about__facts{display:flex;flex-direction:column;gap:20px}
.fact-list{margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.fact-list .fact{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--brd)}
.fact-list .fact:last-child{border-bottom:none}
.fact-list dt{font-size:11px;font-weight:500;color:var(--t3);letter-spacing:0.5px;text-transform:uppercase;margin:0}
.fact-list dd{font-size:13.5px;font-weight:500;color:var(--t1);margin:0;line-height:1.4}

.art-about__stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;background:var(--hov);border-radius:10px}
.art-about__stats > div{display:flex;flex-direction:column;gap:2px}
.art-about__stats b{font-size:16px;font-weight:600;color:var(--t1)}
.art-about__stats small{font-size:10px;color:var(--t3);line-height:1.3;letter-spacing:0.2px}

.art-about__body{font-size:15px;line-height:1.7;color:var(--t1);font-family:var(--f-serif,Georgia,serif)}
.art-about__body p{margin:0 0 16px}
.art-about__body p:last-child{margin-bottom:0}

.art-about__quote{margin:24px 0 0;padding:16px 22px;border-left:3px solid var(--acc,#7c3aed);background:var(--hov);border-radius:0 8px 8px 0;font-family:var(--f-serif,Georgia,serif);font-size:16px;line-height:1.55;color:var(--t1);font-style:italic;position:relative}
.art-about__quote cite{display:block;margin-top:10px;font-size:12px;color:var(--t3);font-style:normal;font-family:var(--f1)}

/* ════════════════════════════════════════════════════════════
   PLAYER — интерактивные seek/volume бары + время в строку
   ════════════════════════════════════════════════════════════ */

/* Время в одну строку: 1:19 / 3:56 */
.mp-times-row{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--t3);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:0.2px}
.mp-times-row .mp-t-cur{color:var(--t2);font-weight:500}
.mp-times-row .mp-t-sep{opacity:0.4}

/* Mini-player seek-bar — над контролами, тонкая полоска во всю ширину */
.mp-seek{position:absolute;left:0;right:0;top:0;height:14px;cursor:pointer;display:flex;align-items:center;padding:0 0;z-index:5}
.mp-seek-track{position:absolute;left:0;right:0;top:6px;height:3px;background:rgba(128,128,128,0.18);border-radius:2px;transition:height 0.15s,top 0.15s}
.mp-seek-fill{position:absolute;left:0;top:6px;height:3px;background:var(--acc,#7c3aed);border-radius:2px;pointer-events:none;transition:height 0.15s,top 0.15s}
.mp-seek-thumb{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,0.3);opacity:0;transition:opacity 0.15s;pointer-events:none}
.mp-seek:hover .mp-seek-thumb{opacity:1}
.mp-seek:hover .mp-seek-track,.mp-seek:hover .mp-seek-fill{height:5px;top:5px}

/* Volume в мини-плеере */
.mp-vol-wrap{display:flex;align-items:center;gap:6px;margin-left:8px}
.mp-vol{position:relative;width:80px;height:14px;cursor:pointer;display:flex;align-items:center}
.mp-vol-track{position:absolute;left:0;right:0;top:6px;height:3px;background:rgba(128,128,128,0.2);border-radius:2px}
.mp-vol-fill{position:absolute;left:0;top:6px;height:3px;background:var(--t1);border-radius:2px;pointer-events:none}
.mp-vol-thumb{position:absolute;top:50%;width:10px;height:10px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.15s;pointer-events:none}
.mp-vol:hover .mp-vol-thumb{opacity:1}

/* Now Playing — новый интерактивный progress-bar */
.np-bar{position:relative;height:16px;cursor:pointer;display:flex;align-items:center;width:100%}
.np-bar-track{position:absolute;left:0;right:0;top:7px;height:4px;background:rgba(128,128,128,0.18);border-radius:2px;transition:height 0.15s,top 0.15s}
.np-bar-fill{position:absolute;left:0;top:7px;height:4px;background:var(--np-ac,#fff);border-radius:2px;pointer-events:none;transition:height 0.15s,top 0.15s}
.np-bar-thumb{position:absolute;top:50%;width:14px;height:14px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 3px 8px rgba(0,0,0,0.4);opacity:0;transition:opacity 0.15s;pointer-events:none}
.np-bar:hover .np-bar-thumb{opacity:1}
.np-bar:hover .np-bar-track,.np-bar:hover .np-bar-fill{height:6px;top:6px}

/* Now Playing — время в одну строку */
.np-times{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--t3);margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:0.3px}

/* Now Playing — volume bar */
.np-volume{display:flex;align-items:center;gap:10px;margin-top:8px}
.np-vol{position:relative;flex:1;max-width:140px;height:14px;cursor:pointer;display:flex;align-items:center}
.np-vol-track{position:absolute;left:0;right:0;top:6px;height:3px;background:rgba(128,128,128,0.2);border-radius:2px}
.np-vol-fill{position:absolute;left:0;top:6px;height:3px;background:var(--t1);border-radius:2px;pointer-events:none}
.np-vol-thumb{position:absolute;top:50%;width:11px;height:11px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.15s;pointer-events:none}
.np-vol:hover .np-vol-thumb{opacity:1}

/* Smooth volume / progress text transitions */
.mp-t-cur,.np-times span{transition:color 0.15s}

/* ════════════════════════════════════════════════════════════
   LYRICS EDITOR
   ════════════════════════════════════════════════════════════ */
.np-lyr-actions{display:flex;justify-content:flex-end;margin-bottom:14px}
.np-lyr-edit{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:transparent;border:1px solid var(--brd);border-radius:999px;color:var(--t2);font-size:12px;cursor:pointer;font-family:var(--f1);transition:var(--tr)}
.np-lyr-edit:hover{background:var(--hov);color:var(--t1);border-color:var(--t3)}

.modal--wide{max-width:680px;width:92%}
.lyr-edit-help{font-size:12.5px;color:var(--t3);line-height:1.55;margin-bottom:12px}
.lyr-edit-help code{background:var(--hov);padding:1px 6px;border-radius:4px;font-size:11.5px;color:var(--t2);font-family:'SF Mono','Menlo',monospace}
.lyr-edit-area{width:100%;padding:14px;border-radius:10px;background:var(--hov);border:1px solid var(--brd);color:var(--t1);font-size:14px;line-height:1.6;font-family:var(--f-serif,Georgia,serif);outline:none;resize:vertical;transition:border-color 0.15s}
.lyr-edit-area:focus{border-color:var(--acc,#7c3aed)}
.lyr-edit-mode{display:flex;flex-direction:column;gap:8px;margin:14px 0;font-size:12.5px;color:var(--t2)}
.lyr-edit-mode label{display:flex;align-items:center;gap:8px;cursor:pointer}
.lyr-edit-mode input[type="radio"]{accent-color:var(--acc,#7c3aed)}
.lyr-edit-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ════════════════════════════════════════════════════════════
   ARTIST HERO V2 — широкая шапка как у Яндекс.Музыки/Spotify
   ════════════════════════════════════════════════════════════ */
.art-hero-v2{position:relative;border-radius:14px;overflow:hidden;margin-bottom:18px;background:var(--card)}

.art-hero-v2__cover{position:relative;width:100%;aspect-ratio:21/8;min-height:220px;max-height:340px;overflow:hidden;background:#000}
.art-hero-v2__cover img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.art-hero-v2__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.45) 70%,rgba(0,0,0,0.7) 100%);pointer-events:none}

.art-hero-v2__head{position:absolute;left:24px;right:24px;bottom:18px;display:flex;align-items:flex-end;gap:18px;z-index:2;color:#fff}
.art-hero-v2__avatar{width:108px;height:108px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,0.92);flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.4);background:#222}
.art-hero-v2__avatar img{width:100%;height:100%;object-fit:cover}
.art-hero-v2__info{flex:1;min-width:0;padding-bottom:6px}
.art-hero-v2__label{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:0.4px;color:rgba(255,255,255,0.85);font-weight:500;margin-bottom:6px;text-transform:none}
.art-hero-v2__name{font-size:46px;font-weight:700;color:#fff;line-height:1;margin:0 0 8px;letter-spacing:-0.5px;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.art-hero-v2__stat{font-size:13px;color:rgba(255,255,255,0.85);display:inline-flex;align-items:center;gap:6px}
.art-hero-v2__stat svg{opacity:0.8}

@media (max-width:760px){
  .art-hero-v2__cover{aspect-ratio:16/9;min-height:200px}
  .art-hero-v2__avatar{width:80px;height:80px}
  .art-hero-v2__name{font-size:32px}
  .art-hero-v2__head{gap:12px;left:16px;right:16px;bottom:14px}
}

.art-actions{display:flex;gap:10px;margin-bottom:24px;align-items:center;flex-wrap:wrap}

/* Артист без треков — empty state в секции «Популярное» */
.art-empty{padding:48px 24px;text-align:center;background:var(--card);border:1px dashed var(--brd);border-radius:12px}
.art-empty__icon{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--hov);align-items:center;justify-content:center;color:var(--t3);margin-bottom:14px}
.art-empty__t{font-size:16px;font-weight:600;color:var(--t1);margin-bottom:6px}
.art-empty__s{font-size:13px;color:var(--t3);max-width:340px;margin:0 auto;line-height:1.5}

/* ════════════════════════════════════════════════════════════
   ARTISTS PAGE — каталог + рекомендации + жанровые фильтры
   ════════════════════════════════════════════════════════════ */
.artists-page{padding-bottom:32px}

/* Жанр-чипы — фильтры */
.art-chips{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.art-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--card);border:1px solid var(--brd);border-radius:999px;color:var(--t2);font-size:12.5px;font-weight:500;cursor:pointer;transition:var(--tr);font-family:var(--f1);white-space:nowrap}
.art-chip:hover{background:var(--hov);color:var(--t1);border-color:var(--t3)}
.art-chip--on{background:var(--chip-c,var(--acc));color:#fff;border-color:transparent}
.art-chip--on:hover{background:var(--chip-c,var(--acc));color:#fff;opacity:0.9}

/* Сетка артистов */
.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.artist-grid--recommend{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media (max-width:600px){.artist-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}

/* Большая карточка артиста */
.artist-big{position:relative;aspect-ratio:1.4/1;border-radius:14px;overflow:hidden;cursor:pointer;transition:var(--tr);background:var(--card);min-height:160px}
.artist-big:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.artist-big__cover{position:absolute;inset:0;z-index:0}
.artist-big__cover img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.artist-big__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1) 30%,rgba(0,0,0,0.75) 100%);z-index:1}
.artist-big__body{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:flex-end;gap:12px;color:#fff}
.artist-big__avatar{width:54px;height:54px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,0.9);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.artist-big__avatar img{width:100%;height:100%;object-fit:cover}
.artist-big__info{flex:1;min-width:0}
.artist-big__name{font-size:16px;font-weight:600;color:#fff;margin-bottom:2px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-big__meta{font-size:11.5px;color:rgba(255,255,255,0.78);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-big__stat{font-size:11px;color:rgba(255,255,255,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Малая карточка артиста (в горизонтальном скролле на главной) */
.artist-card{flex-shrink:0;width:140px;text-align:center;cursor:pointer;transition:var(--tr);padding:8px}
.artist-card:hover{transform:translateY(-2px)}
.artist-ava{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto 10px;box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.artist-name{font-size:13.5px;font-weight:600;color:var(--t1);display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-meta{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══════════════════════════════════════
   ARTICLE TYPES (video / podcast / story) + LIKES / COMMENTS
   ═══════════════════════════════════════ */

/* Иконка типа на карточке статьи в списке */
.art-card__type{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;pointer-events:none;z-index:2;transition:var(--tr)}
.art-card:hover .art-card__type{transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,0.7)}
.art-card__type--video{padding-left:6px}
.art-card__type--story{background:linear-gradient(135deg,#f59e0b,#ec4899)}
.art-card__type--podcast{background:linear-gradient(135deg,#06b6d4,#6366f1)}

.art-card__stats{display:flex;gap:14px;font-size:11.5px;color:var(--t3);margin-top:6px;font-weight:500}
.art-card__stats span{display:inline-flex;align-items:center;gap:3px}

/* Бейдж типа на крупной обложке внутри статьи (article-cover уже имеет
   position:relative выше, чтобы абсолютные элементы позиционировались) */
.art-type-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;pointer-events:none}
.art-type-badge--video{padding-left:8px}

/* ─── Видео в статье ─── */
.art-video-wrap{margin:20px 0;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.art-video{width:100%;height:100%;display:block;background:#000;border-radius:14px}
.art-video-wrap--missing{aspect-ratio:16/9;background:var(--card);color:var(--t3);flex-direction:column;gap:10px;border:1px solid var(--brd)}

/* ─── Подкаст в статье ─── */
.art-podcast-player{margin:20px 0;padding:18px;background:var(--card);border:1px solid var(--brd);border-radius:14px;display:flex;flex-direction:column;gap:12px}
.art-podcast-player__meta{font-size:12px;color:var(--t3);font-weight:500;letter-spacing:0.5px;text-transform:uppercase}
.art-podcast-audio{width:100%;height:42px;outline:none}
.art-podcast-player--missing{color:var(--t3);text-align:center;font-size:13px;padding:30px}

.art-podcast-chapters{margin:22px 0;padding:18px;background:var(--card);border:1px solid var(--brd);border-radius:14px}
.art-podcast-chapters__h{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px}
.art-podcast-chapters__list{display:flex;flex-direction:column;gap:2px}
.art-podcast-chapter{display:flex;gap:14px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:var(--tr);align-items:baseline}
.art-podcast-chapter:hover{background:var(--hov)}
.art-podcast-chapter__t{font-family:var(--f-mono,monospace);font-size:12px;color:var(--t3);min-width:46px;font-weight:600}
.art-podcast-chapter__n{font-size:14px;color:var(--t1)}

.art-podcast-transcript{margin:22px 0;background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:14px 18px}
.art-podcast-transcript summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--t1);padding:6px 0;outline:none;list-style:none}
.art-podcast-transcript summary::-webkit-details-marker{display:none}
.art-podcast-transcript summary::before{content:"▸ ";color:var(--t3);font-size:11px}
.art-podcast-transcript[open] summary::before{content:"▾ "}
.art-podcast-transcript__body{margin-top:12px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.6;color:var(--t2)}
.art-podcast-transcript__body p{margin:0}
.art-podcast-transcript__body b{color:var(--t1);font-weight:600}

/* ─── Story-вьюер ─── */
.art-story-viewer{position:relative;width:100%;aspect-ratio:9/14;max-height:680px;border-radius:20px;overflow:hidden;background:#0a0a14;margin:14px 0 8px;user-select:none;box-shadow:0 12px 40px rgba(0,0,0,0.35)}
@media (min-width:900px){.art-story-viewer{aspect-ratio:9/12;max-height:720px}}
.art-story-progress{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:4px;z-index:5}
.art-story-bar{flex:1;height:3px;background:rgba(255,255,255,0.25);border-radius:2px;transition:background 0.3s}
.art-story-bar.on{background:rgba(255,255,255,0.95)}
.art-story-stage{position:absolute;inset:0}
.art-story-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:60px 36px;color:#fff;animation:storyFadeIn 0.4s ease-out}
@keyframes storyFadeIn{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}
.art-story-slide__inner{text-align:center;max-width:520px;display:flex;flex-direction:column;gap:14px;align-items:center}
.art-story-slide__emoji{font-size:72px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 14px rgba(0,0,0,0.4))}
.art-story-slide__title{font-size:34px;font-weight:800;line-height:1.15;letter-spacing:-0.5px;font-family:var(--f1)}
.art-story-slide__sub{font-size:15px;font-weight:500;color:rgba(255,255,255,0.78);letter-spacing:0.3px}
.art-story-slide__text{font-size:17px;line-height:1.55;color:rgba(255,255,255,0.92);margin-top:8px}
@media (max-width:600px){
  .art-story-slide{padding:50px 24px}
  .art-story-slide__title{font-size:26px}
  .art-story-slide__emoji{font-size:54px}
  .art-story-slide__text{font-size:15px}
}

.art-story-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(0,0,0,0.45);color:#fff;font-size:30px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:var(--tr);z-index:4;line-height:1;padding-bottom:4px}
.art-story-nav:hover{background:rgba(0,0,0,0.7);transform:translateY(-50%) scale(1.05)}
.art-story-nav--prev{left:12px}
.art-story-nav--next{right:12px}
@media (max-width:600px){
  .art-story-nav{width:38px;height:38px;font-size:22px}
}

.art-story-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.art-story-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.35);cursor:pointer;transition:var(--tr)}
.art-story-dot:hover{background:rgba(255,255,255,0.65)}
.art-story-dot.on{background:#fff;width:24px;border-radius:4px}

.art-story-counter{position:absolute;top:32px;right:18px;color:rgba(255,255,255,0.7);font-size:11px;font-weight:600;letter-spacing:1px;z-index:5;font-family:var(--f-mono,monospace);background:rgba(0,0,0,0.4);padding:3px 8px;border-radius:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ─── Actions bar (лайк / коммент / share на статье) ─── */
.art-actions-bar{display:flex;gap:24px;padding:18px 0;margin-top:24px;border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
.art-act{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--t2);font-size:15px;font-weight:600;cursor:pointer;padding:6px 4px;transition:var(--tr);font-family:var(--f1)}
.art-act:hover{color:var(--t1);transform:translateY(-1px)}
.art-act--liked{color:var(--red)}
.art-act--liked:hover{color:var(--red)}
.art-act svg{transition:var(--tr)}

.article-admin-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* ─── Комментарии на статье ─── */
.art-comments{margin-top:24px;padding:24px;background:var(--card);border:1px solid var(--brd);border-radius:14px}
.art-comments__head{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:18px;display:flex;align-items:center;gap:6px}
.art-comments__head span{color:var(--t3);font-weight:500;font-size:13px}
.art-comments__list{display:flex;flex-direction:column;gap:16px;margin-bottom:18px;max-height:600px;overflow-y:auto}
.art-comments-empty{padding:20px;text-align:center;color:var(--t3);font-size:13px;font-style:italic}

.art-comment{display:flex;gap:12px;animation:fadeInUp 0.3s ease-out}
.art-comment__av{flex-shrink:0}
.art-comment__body{flex:1;min-width:0;background:var(--bg);border-radius:10px;padding:10px 14px;border:1px solid var(--brd)}
.art-comment__head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.art-comment__name{font-size:13px;font-weight:600;color:var(--t1);cursor:pointer}
.art-comment__name:hover{color:var(--acc)}
.art-comment__time{font-size:11px;color:var(--t3)}
.art-comment__del{margin-left:auto;background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px;transition:var(--tr);opacity:0.5}
.art-comment__del:hover{background:var(--hov);color:var(--red);opacity:1}
.art-comment__text{font-size:14px;line-height:1.5;color:var(--t1);word-wrap:break-word}

.art-comments__form{display:flex;gap:10px;align-items:center;padding-top:14px;border-top:1px solid var(--brd)}
.art-comments__form input{flex:1;background:var(--bg);border:1px solid var(--brd);border-radius:10px;padding:10px 14px;color:var(--t1);font-size:14px;outline:none;transition:var(--tr);font-family:var(--f1)}
.art-comments__form input:focus{border-color:var(--acc)}
.art-comments__send{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--acc);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.art-comments__send:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,58,237,0.4)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Type-icon на боковой карточке music hero */
.mh-side__type-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;z-index:3;pointer-events:none;transition:var(--tr)}
.mh-side:hover .mh-side__type-icon{transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,0.7)}
.mh-side__type-icon--video{padding-left:4px}
.mh-side__type-icon--story{background:linear-gradient(135deg,#f59e0b,#ec4899)}
.mh-side__type-icon--podcast{background:linear-gradient(135deg,#06b6d4,#6366f1)}

/* ═══════════════════════════════════════
   Жанровые карточки с фото-обложками
   ═══════════════════════════════════════ */
.genre-tile--cover{position:relative;overflow:hidden;cursor:pointer;background:#1a1a1f;aspect-ratio:1/1;border-radius:12px;padding:0;display:block}
.genre-tile--cover .genre-tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.05);transition:transform .5s ease}
.genre-tile--cover:hover{transform:translateY(-3px)}
.genre-tile--cover:hover .genre-tile__img{transform:scale(1.05)}
.genre-tile--cover .genre-tile__overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.55) 80%,rgba(0,0,0,0.9) 100%);z-index:1;pointer-events:none;transition:background .3s}
.genre-tile--cover:hover .genre-tile__overlay{background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.55) 70%,rgba(0,0,0,0.95) 100%)}
.genre-tile--cover .genre-tile__name{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;color:#fff;font-weight:700;font-size:15px;letter-spacing:-0.2px;text-shadow:0 2px 8px rgba(0,0,0,0.5);margin:0}

/* Минималистичные иконки в выпадающем меню пользователя */
.dd-ico{flex-shrink:0;color:currentColor;opacity:0.75;transition:opacity .15s}
.dd-i:hover .dd-ico{opacity:1}

/* ═══════════════════════════════════════
   Mix cards с фото-обложками (made-for-you)
   ═══════════════════════════════════════ */
.mfy-cover--img{background:#1a1a1f}
.mfy-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(0.05) saturate(1.05);transition:transform .5s ease}
.mfy-card--cover:hover .mfy-cover__img{transform:scale(1.06)}
.mfy-cover__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0.65) 100%);z-index:1;pointer-events:none;transition:background .3s}
.mfy-card--cover:hover .mfy-cover__overlay{background:linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.75) 100%)}
.mfy-cover--img .mfy-cover__label,
.mfy-cover--img .mfy-cover__num{position:relative;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,0.55)}
.mfy-cover--img .mfy-cover__label{color:rgba(255,255,255,0.92)}

/* ═══════════════════════════════════════
   PODCAST — премиум-плеер (кастомный)
   ═══════════════════════════════════════ */
.pod-shell{display:flex;flex-direction:column;gap:24px;margin:8px 0 0}

/* HERO: обложка + мета + плеер в карточке */
.pod-hero{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:24px;background:linear-gradient(135deg,#1a1a1f 0%,#0f0f14 100%);border-radius:18px;border:1px solid rgba(255,255,255,0.05);position:relative;overflow:hidden}
.pod-hero::before{content:"";position:absolute;inset:-50% -10% auto auto;width:60%;height:200%;background:radial-gradient(circle,rgba(22,163,74,0.18) 0%,transparent 60%);pointer-events:none;filter:blur(40px)}
@media (max-width:720px){
  .pod-hero{grid-template-columns:1fr;gap:18px;padding:18px}
}
.pod-hero__cover{position:relative;width:180px;height:180px;border-radius:14px;overflow:hidden;flex-shrink:0;box-shadow:0 12px 32px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3)}
@media (max-width:720px){.pod-hero__cover{width:140px;height:140px;margin:0 auto}}
.pod-hero__cover img{width:100%;height:100%;object-fit:cover;display:block}
.pod-hero__cover-glow{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);border-radius:14px;pointer-events:none}
.pod-hero__cover--empty{display:flex;align-items:center;justify-content:center}

.pod-hero__info{display:flex;flex-direction:column;gap:8px;min-width:0;position:relative;z-index:1}
.pod-hero__label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#16a34a;text-transform:uppercase}
.pod-hero__host,.pod-hero__duration{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,0.65);font-weight:500}
.pod-hero__host svg,.pod-hero__duration svg{flex-shrink:0;opacity:0.75}

/* PLAYER — центральная панель управления */
.pod-player{margin-top:14px;padding:18px;background:rgba(255,255,255,0.04);border-radius:14px;border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.pod-player__main{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:18px}
.pod-player__btn{position:relative;width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:rgba(255,255,255,0.8);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.pod-player__btn:hover{background:rgba(255,255,255,0.08);color:#fff;transform:scale(1.05)}
.pod-player__btn-num{position:absolute;font-size:8px;font-weight:700;letter-spacing:0.2px}

.pod-player__play{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(34,197,94,0.35),0 2px 6px rgba(0,0,0,0.2);transition:var(--tr);padding-left:4px;flex-shrink:0}
.pod-player__play:hover{transform:scale(1.06);box-shadow:0 12px 32px rgba(34,197,94,0.5),0 2px 6px rgba(0,0,0,0.2)}
.pod-player__play.on{padding-left:0}
.pod-player__play svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3))}

/* PROGRESS */
.pod-player__progress{position:relative;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;cursor:pointer;overflow:visible;margin-bottom:8px;transition:height .15s}
.pod-player__progress:hover{height:8px}
.pod-player__progress-bar{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:3px;width:0%;transition:width .1s linear;pointer-events:none}
.pod-player__progress-thumb{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.4);opacity:0;transition:opacity .15s,left .1s linear;pointer-events:none}
.pod-player__progress:hover .pod-player__progress-thumb{opacity:1}

.pod-player__times{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-family:var(--f-mono,'SF Mono','Menlo',monospace);color:rgba(255,255,255,0.55);font-weight:500;letter-spacing:0.3px;gap:14px}
.pod-player__chapter-active{flex:1;text-align:center;color:rgba(255,255,255,0.85);font-weight:600;letter-spacing:0;font-family:var(--f1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.pod-player__extras{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06)}
.pod-player__rate{padding:5px 10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:rgba(255,255,255,0.85);font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:var(--f1)}
.pod-player__rate:hover{background:rgba(255,255,255,0.12);color:#fff}

.pod-player__vol{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.5)}
.pod-player__vol input[type=range]{-webkit-appearance:none;appearance:none;width:80px;height:4px;background:rgba(255,255,255,0.12);border-radius:2px;outline:none;cursor:pointer}
.pod-player__vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}
.pod-player__vol input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}

.pod-missing{margin:10px 0 0;color:rgba(255,255,255,0.55);font-size:13px;font-style:italic}

/* DESCRIPTION (под плеером) */
.pod-description{font-size:15px;line-height:1.65;color:var(--t1)}
.pod-description p{margin:0 0 14px}
.pod-description p:last-child{margin-bottom:0}

/* CHAPTERS — список глав */
.pod-chapters{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:18px;overflow:hidden}
.pod-chapters__h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--t3);text-transform:uppercase;margin-bottom:14px}
.pod-chapters__list{display:flex;flex-direction:column;gap:4px}
.pod-chapter{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;cursor:pointer;border:none;background:transparent;text-align:left;font-family:var(--f1);transition:var(--tr);width:100%;position:relative}
.pod-chapter:hover{background:var(--hov)}
.pod-chapter.on{background:rgba(34,197,94,0.08);box-shadow:inset 3px 0 0 #16a34a}
.pod-chapter__num{font-size:11px;font-weight:700;color:var(--t3);font-family:var(--f-mono,monospace);min-width:24px;letter-spacing:0.5px}
.pod-chapter.on .pod-chapter__num{color:#16a34a}
.pod-chapter__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pod-chapter__title{font-size:14px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-chapter__time{font-size:11px;color:var(--t3);font-family:var(--f-mono,monospace);letter-spacing:0.3px}
.pod-chapter__play{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;color:var(--t2);opacity:0;transition:opacity .15s,transform .15s;flex-shrink:0;padding-left:2px}
.pod-chapter:hover .pod-chapter__play{opacity:1;transform:scale(1.05)}
.pod-chapter.on .pod-chapter__play{opacity:1;background:#16a34a;color:#fff}

/* TRANSCRIPT — раскрывающийся блок */
.pod-transcript{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:14px 18px}
.pod-transcript summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--t1);outline:none;list-style:none;padding:6px 0;user-select:none}
.pod-transcript summary::-webkit-details-marker{display:none}
.pod-transcript summary::after{content:"▾";margin-left:auto;color:var(--t3);transition:transform .2s;font-size:11px}
.pod-transcript[open] summary::after{transform:rotate(180deg)}
.pod-transcript[open] summary{margin-bottom:10px;padding-bottom:12px;border-bottom:1px solid var(--brd)}
.pod-transcript__body{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.65;color:var(--t2);max-height:480px;overflow-y:auto;padding-right:4px}
.pod-transcript__body p{margin:0}
.pod-transcript__body b{color:var(--t1);font-weight:700;display:inline-block;min-width:60px}

/* ═══════════════════════════════════════
   Цветовые модификаторы для тега типа статьи
   (вместо круглого виджета поверх обложки)
   ═══════════════════════════════════════ */
.art-card__tag--podcast{background:linear-gradient(135deg,#06b6d4,#6366f1);color:#fff;font-weight:700;box-shadow:0 2px 12px rgba(99,102,241,0.45)}
.art-card__tag--story{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;font-weight:700;box-shadow:0 2px 12px rgba(236,72,153,0.45)}
.art-card__tag--video{background:rgba(0,0,0,0.85);color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,0.4)}
.art-card__tag--video::before{content:"▶";margin-right:5px;font-size:9px}

/* Цветовые варианты тега-категории (текстовые типы) */
.art-card__tag--release{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 2px 10px rgba(22,163,74,0.4)}
.art-card__tag--concert{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 2px 10px rgba(220,38,38,0.4)}
.art-card__tag--interview{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 2px 10px rgba(139,92,246,0.4)}
.art-card__tag--collection{background:linear-gradient(135deg,#0891b2,#0e7490);box-shadow:0 2px 10px rgba(8,145,178,0.4)}
.art-card__tag--review{background:linear-gradient(135deg,#a855f7,#9333ea);box-shadow:0 2px 10px rgba(168,85,247,0.4)}
.art-card__tag--news{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 2px 10px rgba(245,158,11,0.4)}

/* ═════════════════════════════════════════
   GROUP CONVERSATIONS — модалки + стили
   ═════════════════════════════════════════ */
.g-modal{
  background:var(--card);
  border-radius:16px;
  width:min(480px, 92vw);
  max-height:min(700px, 90vh);
  display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.4);
  animation:fadeScale .2s var(--ease);
  overflow:hidden;
}
.g-modal-h{
  padding:18px 20px 14px;
  border-bottom:1px solid var(--brd);
  position:relative;
  flex-shrink:0;
}
.g-modal-h h3{font-size:16px;font-weight:700;margin:0;padding-left:30px}
.g-modal-sub{font-size:12px;color:var(--t3);margin-top:2px;padding-left:30px}
.g-modal-x,.g-modal-back{
  position:absolute;top:14px;left:14px;
  width:30px;height:30px;border-radius:50%;border:none;
  background:var(--hov);color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:var(--tr);
}
.g-modal-x:hover{background:var(--red);color:#fff}
.g-modal-back{font-size:16px}
.g-modal-back:hover{background:var(--acc);color:#fff}
.g-modal-b{flex:1;overflow-y:auto;padding:16px 20px;min-height:0}
.g-modal-b::-webkit-scrollbar{width:6px}
.g-modal-b::-webkit-scrollbar-thumb{background:var(--brd);border-radius:6px}
.g-modal-f{
  padding:12px 20px 16px;
  border-top:1px solid var(--brd);
  flex-shrink:0;
}
.g-btn-prim{
  width:100%;padding:11px 16px;border:none;border-radius:10px;
  background:var(--acc);color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.g-btn-prim:hover{opacity:.9;transform:translateY(-1px)}
.g-btn-prim.disabled,.g-btn-prim:disabled{opacity:.4;cursor:not-allowed;transform:none}
.g-btn-secn{
  padding:9px 14px;border:1px solid var(--brd);border-radius:10px;
  background:var(--hov);color:var(--t1);font-size:13px;font-weight:500;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.g-btn-secn:hover{background:var(--brd)}

/* Поиск пользователей в модалках групп */
.g-search-wrap{
  position:relative;display:flex;align-items:center;
  background:var(--hov);border:1px solid var(--brd);border-radius:10px;
  margin-bottom:12px;
}
.g-search-wrap:focus-within{border-color:var(--acc)}
.g-search-ic{position:absolute;left:12px;color:var(--t3);pointer-events:none}
.g-search-inp{
  width:100%;border:none;outline:none;background:transparent;
  color:var(--t1);font-size:13px;padding:9px 12px 9px 34px;font-family:inherit;
}

.g-section-label{
  font-size:11px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.5px;
  margin:6px 0 8px;padding:0 4px;
}

/* Чипы выбранных пользователей */
.g-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding:4px 0 6px;border-bottom:1px solid var(--brd)}
.g-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--hov);border:1px solid var(--brd);
  border-radius:18px;padding:4px 10px 4px 4px;
  font-size:12px;color:var(--t1);cursor:pointer;
  transition:var(--tr);
}
.g-chip:hover{background:var(--brd);border-color:var(--red)}
.g-chip-x{color:var(--t3);font-size:11px;margin-left:2px}
.g-chip:hover .g-chip-x{color:var(--red)}

/* Список пользователей для выбора */
.g-user-list{display:flex;flex-direction:column;gap:1px}
.g-user-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 8px;border-radius:10px;cursor:pointer;
  transition:background .15s;
}
.g-user-row:hover{background:var(--hov)}
.g-user-info{flex:1;min-width:0}
.g-user-n{font-size:13.5px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px;line-height:1.3}
.g-user-u{font-size:12px;color:var(--t3);margin-top:1px}
.g-ver{color:var(--acc);font-size:12px}
.g-check{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--brd);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--tr);
}
.g-check.on{background:var(--acc);border-color:var(--acc)}

.g-empty{padding:40px 20px;text-align:center;color:var(--t3);font-size:13px}

/* Шаг 2: аватар + имя */
.g-avatar-edit{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:18px}
.g-avatar-big{
  width:88px;height:88px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:36px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  position:relative;overflow:hidden;
}
.g-avatar-big img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.g-avatar-big span{position:relative;z-index:1}
.g-avatar-clickable{cursor:pointer;transition:transform .15s}
.g-avatar-clickable:hover{transform:scale(1.04)}
.g-avatar-cam{
  position:absolute;inset:0;background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;color:#fff;z-index:2;
}
.g-avatar-clickable:hover .g-avatar-cam{opacity:1}
.g-av-remove{
  margin-top:4px;padding:5px 12px;border:1px solid var(--brd);border-radius:14px;
  background:transparent;color:var(--t3);font-size:11.5px;font-weight:500;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.g-av-remove:hover{background:var(--red);color:#fff;border-color:var(--red)}
.g-color-row{display:flex;gap:8px;justify-content:center}
.g-color-dot{
  width:24px;height:24px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:transform .15s,border-color .15s;
}
.g-color-dot:hover{transform:scale(1.15)}
.g-color-dot.on{border-color:var(--t1);transform:scale(1.15)}
.g-name-inp{
  width:100%;padding:11px 14px;border:1px solid var(--brd);border-radius:10px;
  background:var(--hov);color:var(--t1);font-size:14px;outline:none;
  font-family:inherit;transition:border-color .15s;
}
.g-name-inp:focus{border-color:var(--acc)}

.g-selected-preview{margin-top:18px}
.g-pills{display:flex;flex-wrap:wrap;gap:6px}
.g-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--hov);border-radius:18px;padding:4px 10px 4px 4px;
  font-size:12px;color:var(--t1);
}
.g-pill-role{color:var(--acc);font-size:10px;font-weight:600;margin-left:4px}

/* Информация о беседе */
.g-info-modal .g-modal-b{padding:0}
.g-info-head{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 20px 20px;border-bottom:1px solid var(--brd);
}
.g-info-head .g-avatar-big{width:88px;height:88px;font-size:36px}
.g-info-title{font-size:18px;font-weight:700;color:var(--t1);text-align:center}
.g-info-sub{font-size:13px;color:var(--t3)}
.g-info-edit-btn{
  margin-top:8px;padding:6px 14px;border:1px solid var(--brd);border-radius:16px;
  background:transparent;color:var(--acc);font-size:12px;font-weight:600;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.g-info-edit-btn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.g-info-edit-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.g-info-modal .g-section-label{padding:16px 20px 8px}

/* Список участников */
.g-mem-list{padding:0 12px 16px}
.g-mem-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 8px;border-radius:10px;cursor:pointer;
  transition:background .15s;
}
.g-mem-row:hover{background:var(--hov)}
.g-mem-info{flex:1;min-width:0}
.g-mem-n{font-size:13.5px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:8px;line-height:1.3;flex-wrap:wrap}
.g-mem-u{font-size:12px;color:var(--t3);margin-top:1px}
.g-role{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;letter-spacing:.2px}
.g-role-owner{background:rgba(245,158,11,.15);color:#f59e0b}
.g-role-admin{background:rgba(59,130,246,.15);color:#3b82f6}
.g-mem-act{
  width:30px;height:30px;border:none;border-radius:50%;background:transparent;
  color:var(--t3);font-size:18px;cursor:pointer;transition:var(--tr);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.g-mem-act:hover{background:var(--brd);color:var(--t1)}

/* Меню действий над участником */
.g-mem-menu{
  position:absolute;z-index:10003;
  background:var(--card);border:1px solid var(--brd);border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  padding:5px;min-width:200px;
  animation:fadeScale .15s var(--ease);
}
.g-mem-menu button{
  display:block;width:100%;text-align:left;
  border:none;background:none;padding:8px 12px;border-radius:7px;
  font-size:13px;color:var(--t1);cursor:pointer;font-family:inherit;
  transition:background .12s;
}
.g-mem-menu button:hover{background:var(--hov)}
.g-mem-menu-del{color:var(--red) !important}
.g-mem-menu-del:hover{background:rgba(231,76,60,.1) !important}

/* Нижние кнопки в инфо */
.g-info-bottom{
  padding:8px 12px 20px;border-top:1px solid var(--brd);margin-top:8px;
  display:flex;flex-direction:column;gap:2px;
}
.g-bottom-btn{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:none;border-radius:10px;
  background:transparent;color:var(--t1);font-size:13.5px;font-weight:500;
  cursor:pointer;transition:var(--tr);font-family:inherit;
  text-align:left;
}
.g-bottom-btn:hover{background:var(--hov)}
.g-bottom-btn svg{color:var(--t2);flex-shrink:0}
.g-bottom-leave{color:var(--t2)}
.g-bottom-leave:hover{background:rgba(231,76,60,.08);color:var(--red)}
.g-bottom-leave:hover svg{color:var(--red)}
.g-bottom-delete{color:var(--red)}
.g-bottom-delete svg{color:var(--red)}
.g-bottom-delete:hover{background:rgba(231,76,60,.12)}

/* ═════════════════════════════════════════
   REC: переключение режимов + press-hold UX
   ═════════════════════════════════════════ */
.msg-rec{position:relative}
.msg-rec.rec-locked{background:var(--red) !important;color:#fff !important;animation:recPulse 1.4s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.5)}50%{box-shadow:0 0 0 6px rgba(231,76,60,0)}}

/* Слайд-подсказка отмены свайпом */
.rec-slide-cancel{
  margin-left:auto;font-size:13px;color:var(--t2);font-weight:500;
  padding:6px 14px;border-radius:18px;background:transparent;
  border:1px solid var(--brd);
  cursor:pointer;font-family:inherit;
  transition:all .15s ease;
  user-select:none;
  display:inline-flex;align-items:center;gap:4px;
}
.rec-slide-cancel:hover{
  color:#fff;background:var(--red);border-color:var(--red);
  box-shadow:0 4px 12px rgba(231,76,60,.32);
}
.rec-slide-cancel.near{color:#fff;background:var(--red);border-color:var(--red);font-weight:600}

/* Lock-кнопки в баре записи */
.rec-lock-ui{
  display:flex;align-items:center;gap:8px;margin-left:auto;
}
.rec-lock-cancel,.rec-lock-send{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;transition:var(--tr);flex-shrink:0;
}
.rec-lock-cancel{background:var(--card);border:1px solid var(--brd);color:var(--t2)}
.rec-lock-cancel:hover{background:var(--red);color:#fff;border-color:var(--red)}
.rec-lock-send{background:var(--acc);color:#fff}
.rec-lock-send:hover{opacity:.9;transform:scale(1.06)}

/* ═════════════════════════════════════════
   ВИДЕОКРУЖОК — overlay превью при записи
   • перекрывает только верхнюю часть .msg-chat (сообщения)
   • НЕ перекрывает .msg-inp — там видна кнопка-галочка для отправки
   • фон блюрится позади
   ═════════════════════════════════════════ */

/* Контейнер кружок-записи позиционируется absolute внутри .msg-chat,
   и растягивается от верха ровно до .msg-inp (т.е. не накрывает инпут) */
.circle-rec-overlay{
  position:absolute;
  top:0;left:0;right:0;
  /* bottom оставляем под .msg-inp — берём его высоту через padding */
  bottom:62px;
  z-index:80;
  display:flex;align-items:center;justify-content:center;
  animation:circleFade .22s var(--ease);
}
@keyframes circleFade{from{opacity:0}to{opacity:1}}

/* Полупрозрачный затемнённо-блюрный фон. Клик по нему = отмена. */
.circle-rec-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px) saturate(.8);
  -webkit-backdrop-filter:blur(14px) saturate(.8);
  cursor:pointer;
}

/* Центральная колонка: кружок + хинт */
.circle-rec-center{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  animation:circleRise .25s var(--ease);
  pointer-events:none;
}
@keyframes circleRise{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

.circle-rec-frame{
  position:relative;width:240px;height:240px;border-radius:50%;
  overflow:hidden;background:#000;
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 0 4px rgba(231,76,60,.6),
    0 0 0 9px rgba(231,76,60,.18),
    0 0 30px rgba(231,76,60,.3);
}
.circle-rec-frame video{
  width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1);
}
.circle-rec-dot{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--red);
  animation:voiceDot 1.2s ease-in-out infinite;
  box-shadow:0 0 8px rgba(231,76,60,.7);
}
.circle-rec-time{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);color:#fff;padding:4px 12px;border-radius:14px;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  backdrop-filter:blur(8px);
}

.circle-rec-hint{
  font-size:12.5px;color:rgba(255,255,255,.85);
  padding:8px 16px;border-radius:18px;background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  letter-spacing:.2px;text-align:center;max-width:320px;
  pointer-events:none;
  transition:opacity .6s ease;
}
.circle-rec-hint.faded{opacity:0}

/* На узких экранах — кружок поменьше */
@media (max-width: 700px){
  .circle-rec-frame{width:200px;height:200px}
}

/* ── Кнопка записи во время записи кружка превращается в ✈ Отправить ── */
.msg-rec.rec-as-send{
  background:linear-gradient(135deg,#4a4a52,#2a2a32) !important;
  color:#fff !important;
  border:none !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.4),
    0 0 0 2px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
  animation:sendPulse 2s ease-in-out infinite;
  position:relative;z-index:81;
  transform:scale(1);
  transition:transform .2s ease,box-shadow .2s ease;
}
.msg-rec.rec-as-send:hover{
  transform:scale(1.1);
  box-shadow:
    0 6px 22px rgba(0,0,0,.5),
    0 0 0 3px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  background:linear-gradient(135deg,#5a5a62,#3a3a42) !important;
}
.msg-rec.rec-as-send:active{transform:scale(.95)}
@keyframes sendPulse{
  0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 0 rgba(255,255,255,.15)}
  50%{box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 10px rgba(255,255,255,0)}
}

/* Иконки в кнопке записи: по умолчанию видны mic/cam, самолётик скрыт */
.msg-rec .ic-check{display:none}
.msg-rec.rec-as-send .ic-mic,
.msg-rec.rec-as-send .ic-cam{display:none !important}
.msg-rec.rec-as-send .ic-check{
  display:block;
  color:#fff !important;
  stroke:#fff !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
  transform:translateX(-1px); /* самолётик визуально центрируется чуть со смещением */
}

/* В светлой теме делаем кнопку чуть светлее */
body:not(.dark) .msg-rec.rec-as-send{
  background:linear-gradient(135deg,#3a3a42,#1a1a22) !important;
}

/* Инпут-бар должен быть выше overlay по z-index чтобы был кликабелен и видим */
.msg-inp{position:relative;z-index:81;background:var(--card)}

/* ═════════════════════════════════════════
   ВИДЕОКРУЖОК — рендер в баббле сообщения
   ═════════════════════════════════════════ */
.bub-circle-wrap{
  background:transparent !important;padding:0 !important;
  max-width:none !important;
}
.bub-circle{
  position:relative;width:240px;height:240px;border-radius:50%;
  overflow:hidden;background:#000;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.bub-circle video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.bub-circle-play{
  position:absolute;inset:0;width:100%;height:100%;
  border:none;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s;
}
.bub-circle:hover .bub-circle-play{background:rgba(0,0,0,.45)}
.bub-circle.playing .bub-circle-play{background:transparent;opacity:0}
.bub-circle.playing:hover .bub-circle-play{opacity:1;background:rgba(0,0,0,.35)}
.bub-circle-time{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#fff;padding:2px 9px;border-radius:10px;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* В групповом чате баббл круга должен быть прозрачным и без хедера-радиуса */
.bub-circle-wrap .bub-author{margin:0 0 6px 4px}
.bub-circle-wrap .bub-t{
  position:absolute;bottom:-2px;right:4px;background:rgba(0,0,0,.55);
  color:#fff;padding:2px 8px;border-radius:10px;font-size:10px;
}
.bub-me.bub-circle-wrap{align-items:flex-end}
.bub-th.bub-circle-wrap{align-items:flex-start}

/* На узких экранах — кружок в баббле поменьше */
@media (max-width: 700px){
  .bub-circle{width:200px;height:200px}
}

/* ═════════════════════════════════════════
   GROUPS — страница списка и страница группы
   ═════════════════════════════════════════ */
.grp-page-h{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:12px;
}
.srch-page-h{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:12px;
}
.grp-create-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:1px solid var(--brd);border-radius:10px;
  background:var(--hov);color:var(--acc);font-size:13px;font-weight:600;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.grp-create-btn:hover{
  background:var(--acc);color:#fff;border-color:var(--acc);
  box-shadow:0 4px 12px rgba(139,92,246,.25);transform:translateY(-1px);
}

.grp-section{padding:18px 20px;margin-bottom:16px}
.grp-section-h{font-size:14px;font-weight:600;color:var(--t2);margin:0 0 14px}
.grp-empty{
  text-align:center;padding:32px 20px;color:var(--t3);font-size:13px;
}
.grp-empty-ic{font-size:42px;margin-bottom:8px;opacity:.6}
.grp-empty-sub{font-size:12px;color:var(--t3);margin-top:4px}

/* Сетка карточек */
.grp-grid{
  display:grid;gap:10px;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .grp-grid{grid-template-columns:1fr 1fr}
}

.grp-card{
  display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid var(--brd);border-radius:12px;
  background:var(--hov);cursor:pointer;
  transition:transform .15s ease,background .15s,border-color .15s;
}
.grp-card:hover{
  background:var(--brd);border-color:var(--acc);
  transform:translateY(-1px);
}
.grp-card-av{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:22px;
}
.grp-card-av img{width:100%;height:100%;object-fit:cover}
.grp-card-i{flex:1;min-width:0}
.grp-card-n{font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:4px}
.grp-card-owner{font-size:12px}
.grp-card-d{font-size:12px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.grp-card-m{font-size:11px;color:var(--t3);margin-top:3px}
.grp-card-btn{
  padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;
  cursor:pointer;flex-shrink:0;transition:var(--tr);font-family:inherit;
  white-space:nowrap;
}
.grp-card-btn.out{background:var(--acc);color:#fff;border:none}
.grp-card-btn.out:hover{opacity:.9}
.grp-card-btn.in{background:transparent;color:var(--t2);border:1px solid var(--brd)}
.grp-card-btn.in:hover{background:var(--brd);color:var(--t1)}

/* ── Страница отдельной группы ── */
.grp-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--brd);border-radius:8px;
  background:transparent;color:var(--t2);font-size:12.5px;font-weight:500;
  cursor:pointer;margin-bottom:16px;transition:var(--tr);font-family:inherit;
}
.grp-back:hover{background:var(--hov);color:var(--t1)}

.grp-page{overflow:hidden}
.grp-cover{
  height:160px;
  background:linear-gradient(135deg,#3a3a42,#1a1a22);
  background-size:cover;background-position:center;
}
.grp-page-body{padding:0 24px 24px}

.grp-page-head{
  display:flex;align-items:flex-start;gap:18px;
  margin-top:-40px;margin-bottom:18px;
  flex-wrap:wrap;
}
.grp-page-av{
  width:96px;height:96px;border-radius:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:44px;
  border:4px solid var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.grp-page-av img{width:100%;height:100%;object-fit:cover}
.grp-page-info{flex:1;min-width:200px;padding-top:46px}
.grp-page-name{font-size:22px;font-weight:700;margin:0 0 6px;color:var(--t1)}
.grp-page-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t3);flex-wrap:wrap}
.grp-page-cat{background:var(--hov);padding:3px 9px;border-radius:10px;font-size:11px;font-weight:600;color:var(--t2)}
.grp-page-desc{margin:10px 0 0;font-size:13.5px;color:var(--t2);line-height:1.5}
.grp-page-actions{padding-top:46px}

.grp-composer{margin:16px 0 20px}

.grp-posts{margin-top:20px}
.grp-posts-list{display:flex;flex-direction:column;gap:12px}

.grp-post{
  padding:14px 16px;border:1px solid var(--brd);border-radius:12px;
  background:var(--hov);
}
.grp-post-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.grp-post-author{font-size:13px;font-weight:600;color:var(--t1)}
.grp-post-time{font-size:11px;color:var(--t3)}
.grp-post-text{font-size:14px;color:var(--t1);line-height:1.55;white-space:pre-wrap}
.grp-post-img{margin-top:10px;border-radius:10px;overflow:hidden}
.grp-post-img img{width:100%;display:block}
.grp-post-actions{display:flex;gap:8px;margin-top:10px}
.grp-post-act{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border:1px solid var(--brd);border-radius:8px;
  background:transparent;color:var(--t2);cursor:pointer;
  font-family:inherit;font-size:12px;transition:var(--tr);
}
.grp-post-act:hover{background:var(--brd);color:var(--t1)}
.grp-post-act.on{color:var(--red);border-color:var(--red)}
.grp-post-cnt{font-weight:600}

/* ── Group post: author row + comments ── */
.grp-post-author-row{display:flex;align-items:center;gap:10px}
.grp-post-ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.92);cursor:pointer}
.grp-post-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.grp-post-author{font-size:13.5px;font-weight:600;color:var(--t1);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.grp-post-author:hover{text-decoration:underline}
.grp-post-vrf{display:inline-flex;color:var(--blu)}
.grp-post-sub{font-size:11.5px;color:var(--t3)}
.grp-post-comments{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.grp-post-comment{display:flex;gap:9px}
.grp-post-comment-ava{width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;cursor:pointer}
.grp-post-comment-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.grp-post-comment-bubble{background:var(--card);border:0.5px solid var(--brd);border-radius:12px;padding:8px 12px;max-width:100%}
.grp-post-comment-name{font-size:12px;font-weight:600;color:var(--t1)}
.grp-post-comment-text{font-size:13px;color:var(--t2);margin-top:1px;white-space:pre-wrap;word-break:break-word}
.grp-post-comment-form{display:flex;gap:9px;align-items:center;margin-top:2px}
.grp-post-comment-input{flex:1;height:34px;background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:0 14px;color:var(--t1);font-size:13px;font-family:inherit;outline:none}
.grp-post-comment-input:focus{border-color:var(--t3)}
.grp-post-comment-send{width:34px;height:34px;border:none;border-radius:50%;background:var(--acc);color:var(--on-acc);cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}

/* ── Group page founder line ── */
.grp-page-founder{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;color:var(--t3);cursor:pointer}
.grp-page-founder:hover .grp-page-founder-name{text-decoration:underline}
.grp-page-founder-ava{width:20px;height:20px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.grp-page-founder-ava img{width:100%;height:100%;object-fit:cover}
.grp-page-founder-name{color:var(--t1);font-weight:600}

/* ── Profile stats (simple inline) ── */
.prof-stats{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap}
.prof-stat{font-size:14px;color:var(--t3)}
.prof-stat b{color:var(--t1);font-weight:700;font-size:15px}
.prof-stat--link{cursor:pointer;transition:color .15s}
.prof-stat--link:hover b{color:var(--blu)}

/* ── Brand cover (support / founder) — black with F ── */
.prof-cover__brand{width:100%;height:100%;background:#0b0b0d;display:flex;align-items:center;justify-content:center}
.prof-cover__brand span{font-family:'Marggraff',serif;font-size:120px;line-height:1;color:rgba(255,255,255,.2)}


/* ── Модалка создания/редактирования ── */
.grp-desc-inp{
  width:100%;min-height:80px;resize:vertical;
  padding:11px 14px;border:1px solid var(--brd);border-radius:10px;
  background:var(--hov);color:var(--t1);font-size:13.5px;
  font-family:inherit;outline:none;transition:border-color .15s;
  margin-top:10px;
}
.grp-desc-inp:focus{border-color:var(--acc)}

.grp-icon-row{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:300px;
  margin-top:8px;
}
.grp-icon-btn{
  width:34px;height:34px;border:1px solid var(--brd);border-radius:9px;
  background:transparent;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);
}
.grp-icon-btn:hover{background:var(--hov)}
.grp-icon-btn.on{background:var(--acc);border-color:var(--acc)}

.grp-cat-row{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;margin-bottom:8px;
}
.grp-cat-btn{
  padding:6px 12px;border:1px solid var(--brd);border-radius:14px;
  background:transparent;color:var(--t2);font-size:12px;font-weight:500;
  cursor:pointer;transition:var(--tr);font-family:inherit;
}
.grp-cat-btn:hover{background:var(--hov);color:var(--t1)}
.grp-cat-btn.on{background:var(--acc);color:#fff;border-color:var(--acc)}

.grp-av-ic{font-size:36px;line-height:1}

@media (max-width: 700px){
  .grp-page-head{flex-direction:column}
  .grp-page-info,.grp-page-actions{padding-top:0}
  .grp-page-av{margin-top:-40px}
}

/* Базовые кнопки если нужны для groups */
.btn-primary{
  padding:9px 18px;border:none;border-radius:10px;
  background:var(--acc);color:var(--on-acc);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:var(--tr);
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(139,92,246,.25)}
.btn-secondary{
  padding:9px 18px;border:1px solid var(--brd);border-radius:10px;
  background:var(--hov);color:var(--t1);font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:var(--tr);
}
.btn-secondary:hover{background:var(--brd)}

/* ═════════════════════════════════════════
   GROUPS — Frendly Hero баннер + пустое состояние
   ═════════════════════════════════════════ */
.grp-page-sub{font-size:12.5px;color:var(--t3);margin-top:4px}

/* Большой "герой"-баннер для официальной группы */
.frendly-hero{
  position:relative;overflow:hidden;
  padding:0;margin-bottom:16px;
  border-radius:16px;cursor:pointer;
  transition:transform .15s ease;
}
.frendly-hero:hover{transform:translateY(-2px)}

.frendly-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at top right, rgba(139,92,246,.35) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(236,72,153,.25) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a22 0%, #2a2a36 100%);
}
.frendly-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 30%, rgba(139,92,246,.12) 0%, transparent 40%);
}

.frendly-hero-body{
  position:relative;z-index:1;
  padding:32px 32px 28px;
  display:flex;flex-direction:column;gap:10px;
  color:#fff;
}
.frendly-hero-badge{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  padding:4px 12px;border-radius:14px;
  font-size:11.5px;font-weight:600;letter-spacing:.3px;
  align-self:flex-start;color:rgba(255,255,255,.92);
}
.frendly-hero-title{display:flex;align-items:center;gap:14px;margin-top:4px}
.frendly-hero-ic{
  font-size:42px;line-height:1;
  filter:drop-shadow(0 4px 12px rgba(139,92,246,.5));
}
.frendly-hero-title h2{
  margin:0;font-size:30px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.85) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.frendly-hero-desc{
  margin:0;font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.78);max-width:620px;
}
.frendly-hero-meta{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:rgba(255,255,255,.6);
  margin-top:2px;
}
.frendly-hero-actions{
  display:flex;align-items:center;gap:10px;margin-top:14px;
}
.frendly-hero-actions .btn-primary{
  background:#fff !important;color:#1a1a22 !important;
  padding:10px 22px;font-weight:600;
}
.frendly-hero-actions .btn-primary:hover{
  box-shadow:0 8px 24px rgba(255,255,255,.2);
  background:#f5f5f8 !important;
}
.frendly-hero-actions .btn-secondary{
  background:rgba(255,255,255,.1);color:#fff !important;
  border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px);
}
.frendly-hero-actions .btn-secondary:hover{background:rgba(255,255,255,.18)}
.frendly-hero-joined{
  display:inline-flex;align-items:center;gap:4px;
  color:rgba(255,255,255,.85);font-size:13px;font-weight:600;
  padding:10px 16px;
}

/* Метка "Официальная" в шапке группы */
.grp-page-verified{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--blu);color:#fff;font-size:13px;font-weight:700;
  margin-left:8px;
}
.grp-page-cat-official{
  background:var(--blu) !important;color:#fff !important;
}

/* Пустое состояние — большой CTA */
.grp-empty-cta{
  padding:48px 30px;text-align:center;
  background:linear-gradient(180deg,var(--card),transparent);
}
.grp-empty-cta-ic{
  font-size:64px;margin-bottom:14px;opacity:.85;
  filter:drop-shadow(0 4px 12px rgba(139,92,246,.25));
}
.grp-empty-cta-t{
  font-size:18px;font-weight:700;margin:0 0 6px;color:var(--t1);
}
.grp-empty-cta-d{
  font-size:13.5px;line-height:1.55;color:var(--t2);
  max-width:480px;margin:0 auto;
}

@media (max-width: 700px){
  .frendly-hero-body{padding:24px 20px}
  .frendly-hero-title h2{font-size:24px}
  .frendly-hero-ic{font-size:34px}
}

/* ═════════════════════════════════════════
   GROUPS PAGE — двух-колоночный лейаут (как ВК)
   ═════════════════════════════════════════ */

.grp-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:16px;
  align-items:start;
}
@media (max-width: 900px){
  .grp-layout{grid-template-columns:1fr}
  .grp-aside{order:-1} /* на узких — кнопка создания сверху */
}

.grp-main{
  background:var(--card);border:1px solid var(--brd);
  border-radius:var(--r);overflow:hidden;
}

/* Поиск */
.grp-search-wrap{
  position:relative;display:flex;align-items:center;
  padding:14px 14px 8px;
  border-bottom:1px solid var(--brd);
}
.grp-search-ic{position:absolute;left:24px;color:var(--t3);pointer-events:none}
.grp-search-inp{
  width:100%;padding:9px 32px 9px 36px;
  border:1px solid var(--brd);border-radius:10px;
  background:var(--hov);color:var(--t1);font-size:13px;
  font-family:inherit;outline:none;transition:border-color .15s;
}
.grp-search-inp:focus{border-color:var(--acc)}
.grp-search-inp::placeholder{color:var(--t3)}
.grp-search-clear{
  position:absolute;right:22px;width:22px;height:22px;
  border:none;background:var(--brd);color:var(--t2);border-radius:50%;
  cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.grp-search-clear:hover{background:var(--t3);color:#fff}

/* Табы */
.grp-tabs{
  display:flex;align-items:center;gap:4px;
  padding:8px 14px;border-bottom:1px solid var(--brd);
  background:var(--hov);
}
.grp-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border:none;border-radius:8px;
  background:transparent;color:var(--t2);
  font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:var(--tr);
}
.grp-tab:hover{background:var(--brd);color:var(--t1)}
.grp-tab.on{background:var(--card);color:var(--t1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.grp-tab-cnt{
  font-size:11px;font-weight:600;
  background:var(--brd);color:var(--t2);
  padding:1px 7px;border-radius:9px;
  min-width:18px;text-align:center;
}
.grp-tab.on .grp-tab-cnt{background:var(--acc);color:var(--on-acc)}

/* Список групп */
.grp-list{padding:6px}

.grp-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  transition:background .12s ease;
}
.grp-row:hover{background:var(--hov)}
.grp-row-av{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:linear-gradient(145deg,#2a2a30,#454550);
}
.grp-row-av img{width:100%;height:100%;object-fit:cover}
.grp-row-ic{font-size:22px;line-height:1}
.grp-row-i{flex:1;min-width:0}
.grp-row-n{
  font-size:14px;font-weight:600;color:var(--t1);
  display:flex;align-items:center;gap:6px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grp-row-ver{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:9px;font-weight:700;
  flex-shrink:0;
}
.grp-row-owner{font-size:12px;flex-shrink:0}
.grp-row-c{font-size:12px;color:var(--t3);margin-top:2px}

/* Пустое состояние внутри списка */
.grp-empty-state{
  padding:48px 24px 36px;text-align:center;
}
.grp-empty-state-ic{
  margin-bottom:12px;color:var(--t3);
  display:flex;align-items:center;justify-content:center;
}
.grp-empty-state-t{
  font-size:15px;font-weight:600;color:var(--t1);margin-bottom:6px;
}
.grp-empty-state-d{
  font-size:13px;color:var(--t2);line-height:1.55;
  max-width:380px;margin:0 auto;
}

/* ═════════════════════════════════════════
   AS-IDE: правая колонка
   ═════════════════════════════════════════ */
.grp-aside{
  display:flex;flex-direction:column;gap:10px;
  position:sticky;top:80px;
}

.grp-aside-create{
  width:100%;padding:12px 16px;border:none;border-radius:12px;
  background:var(--acc);color:var(--on-acc);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:var(--tr);
  box-shadow:0 4px 14px rgba(139,92,246,.25);
}
.grp-aside-create:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(139,92,246,.35);
  opacity:.95;
}

.grp-aside-card{
  background:var(--card);border:1px solid var(--brd);
  border-radius:12px;padding:14px 16px;
}
.grp-aside-h{
  font-size:12px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:10px;
}

.grp-aside-info{display:flex;flex-direction:column;gap:10px}
.grp-aside-info-row{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--t2);line-height:1.4;
}
.grp-aside-info-ic{
  flex-shrink:0;width:24px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--t1);
}

/* Frendly в правой колонке */
.grp-aside-frendly{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg, rgba(139,92,246,.12), rgba(236,72,153,.08));
  border:1px solid rgba(139,92,246,.2);
  transition:var(--tr);
}
.grp-aside-frendly:hover{
  background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.12));
  transform:translateY(-1px);
}
.grp-aside-frendly-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;background:linear-gradient(135deg,#8b5cf6,#ec4899);
}
.grp-aside-frendly-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.grp-aside-frendly-i{flex:1;min-width:0}
.grp-aside-frendly-n{
  font-size:13px;font-weight:600;color:var(--t1);
  display:flex;align-items:center;gap:5px;
}
.grp-aside-frendly-ver{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:8px;font-weight:700;
}
.grp-aside-frendly-d{font-size:11px;color:var(--t3);margin-top:1px}
.grp-aside-btn{
  width:100%;margin-top:10px;padding:7px 12px;
  border:1px solid var(--acc);border-radius:8px;
  background:transparent;color:var(--acc);
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:var(--tr);
}
.grp-aside-btn:hover{background:var(--acc);color:var(--on-acc)}

/* На узких экранах правая колонка становится верхним блоком */
@media (max-width: 900px){
  .grp-aside{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .grp-aside-card{flex:1;min-width:240px}
  .grp-aside-create{flex-basis:100%}
}

/* ════════ MESSAGE REACTIONS ════════ */
.bub{position:relative}
.bub-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.bub-reacts:empty{display:none}
.bub-react{display:inline-flex;align-items:center;gap:3px;font-size:12px;line-height:1;padding:3px 7px;border-radius:12px;border:0.5px solid var(--brd);background:var(--bg);color:var(--t1);cursor:pointer;transition:var(--tr)}
.bub-react span{font-size:11px;color:var(--t2);font-weight:600}
.bub-react.on{background:color-mix(in srgb,var(--blu) 18%,transparent);border-color:var(--blu)}
.bub-react.on span{color:var(--blu)}
.bub-react:hover{border-color:var(--t3)}
.bub-react-btn{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0.5px solid var(--brd);background:var(--card);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:2;padding:0}
.bub:hover .bub-react-btn{opacity:1}
.bub-me .bub-react-btn,.bub-own .bub-react-btn{left:-36px}
.bub-th .bub-react-btn{right:-36px}
.bub-react-btn:hover{color:var(--t1);border-color:var(--t3)}
.react-pop{position:fixed;z-index:400;display:flex;gap:2px;padding:5px;background:var(--card);border:0.5px solid var(--brd);border-radius:24px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.react-pop button{width:38px;height:38px;border:none;background:none;font-size:21px;cursor:pointer;border-radius:50%;transition:transform .12s,background .12s;padding:0}
.react-pop button:hover{background:var(--hov);transform:scale(1.2)}

/* ════════ CALL BUTTONS + MODAL (demo) ════════ */
.msg-ch-actions{margin-left:auto;display:flex;gap:6px}
.msg-call-btn{width:38px;height:38px;border-radius:50%;border:0.5px solid var(--brd);background:var(--card);color:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);flex-shrink:0}
.msg-call-btn:hover{background:var(--hov);border-color:var(--t3)}
#m-call .call-modal{width:340px;max-width:92vw;background:var(--card);border:0.5px solid var(--brd);border-radius:22px;padding:30px 24px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.call-kind{font-size:12px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:18px}
.call-ava{position:relative;width:108px;height:108px;margin:0 auto 16px}
.call-ava img,.call-ava-fb{width:108px;height:108px;border-radius:50%;object-fit:cover;display:block}
.call-ava-fb{display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#fff}
.call-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blu);opacity:.5;animation:callRing 1.8s ease-out infinite;pointer-events:none}
.call-ring--2{animation-delay:.9s}
.call-ava.connected .call-ring{animation:none;opacity:0}
@keyframes callRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.35);opacity:0}}
.call-name{font-size:20px;font-weight:600;color:var(--t1)}
.call-status{font-size:14px;color:var(--t2);margin-top:5px;font-variant-numeric:tabular-nums}
.call-status--live{color:var(--grn)}
.call-controls{display:flex;justify-content:center;gap:16px;margin-top:26px}
.call-btn{width:54px;height:54px;border-radius:50%;border:none;background:var(--hov);color:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr)}
.call-btn:hover{background:var(--brd)}
.call-btn.off{background:var(--t1);color:var(--bg)}
.call-btn--end{background:#e24b4a;color:#fff}
.call-btn--end:hover{background:#cf3f3e}
.call-demo-note{font-size:10.5px;color:var(--t3);margin-top:18px}

/* ════════ REPOST (quote) ════════ */
.pc-img--card{flex:none;cursor:default}
.repost-label{display:inline-flex;align-items:center;gap:5px;margin:6px 16px 6px;font-size:12px;font-weight:600;color:var(--t3)}
.repost-card{margin:0 16px 8px;border:0.5px solid var(--brd);border-radius:14px;overflow:hidden;background:var(--bg);cursor:pointer;transition:var(--tr)}
.repost-card:hover{background:var(--hov)}
.repost-card__h{display:flex;align-items:center;gap:8px;padding:10px 12px}
.repost-card__n{font-size:13px;font-weight:600;color:var(--t1)}
.repost-card__t{font-size:11px;color:var(--t3);margin-left:auto}
.repost-card__media{background:#000}
.repost-card__media img,.repost-card__media video{width:100%;display:block;max-height:440px;object-fit:cover}
.repost-card__cap{padding:8px 12px 12px;font-size:13px;color:var(--t1);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.repost-card__cap--muted{color:var(--t3)}
.repost-gone{margin:0 16px 8px;padding:26px 12px;text-align:center;color:var(--t3);font-size:13px;border:0.5px dashed var(--brd);border-radius:14px}

/* ════════ POST LOCATION (Google map) ════════ */
.post-loc{margin:8px 16px 4px;border:0.5px solid var(--brd);border-radius:14px;overflow:hidden;background:var(--bg)}
.post-loc__map{width:100%;height:180px;border:0;display:block}
.post-loc__bar{display:flex;align-items:center;gap:7px;padding:10px 12px;color:var(--t1);text-decoration:none;font-size:13px;transition:var(--tr)}
.post-loc__bar:hover{background:var(--hov)}
.post-loc__bar>svg{color:var(--red);flex-shrink:0}
.post-loc__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-loc__open{margin-left:auto;font-size:12px;color:var(--blu);white-space:nowrap;flex-shrink:0}