/* ═══════════════════════════════════════════════════════════
   STAVMUSIC — style.css v2.0 · Soft Editorial
   Шрифты: Nunito (кириллица, округлый) + Fraunces (заголовки)
════════════════════════════════════════════════════════════ */

/* ── THEMES ──────────────────────────────────────────────── */
:root,[data-theme="dark"]{
  --bg:#0f1117;
  --surface:#181c27;
  --surface2:#1f2333;
  --surface3:#252b3b;
  --border:#2d3348;
  --border2:#3a4060;
  --accent:#a8c5da;      /* dusty blue */
  --accent2:#e8a598;     /* dusty rose */
  --accent3:#9eb89e;     /* sage */
  --text:#e8e4f0;
  --text2:#b8b4c8;
  --muted:#6e6e8a;
  --radius:10px;
  --radius-sm:6px;
  --admin:#8b7fd4;
  --admin2:#a99de0;
  --mod:#6baed6;
  --mod2:#89c4e1;
  --nav-bg:rgba(15,17,23,.94);
  --player-bg:#141720;
  --shadow:0 4px 24px rgba(0,0,0,.35);
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
}
[data-theme="light"]{
  --bg:#f7f3ee;
  --surface:#ffffff;
  --surface2:#f0ebe4;
  --surface3:#e8e2db;
  --border:#ddd6cd;
  --border2:#c8c0b6;
  --accent:#5b8fa8;      /* muted teal */
  --accent2:#b5705e;     /* terracotta */
  --accent3:#6b8f6b;     /* sage */
  --text:#2a2420;
  --text2:#5c5248;
  --muted:#9c8e84;
  --radius:10px;
  --radius-sm:6px;
  --admin:#7b5ea7;
  --admin2:#9a7dc4;
  --mod:#4a8fa8;
  --mod2:#6aadc6;
  --nav-bg:rgba(247,243,238,.96);
  --player-bg:#ede8e0;
  --shadow:0 4px 20px rgba(0,0,0,.08);
  --shadow-sm:0 2px 6px rgba(0,0,0,.06);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Nunito','Rubik','Segoe UI',sans-serif;
  font-size:15px;line-height:1.6;
  min-height:100vh;overflow-x:hidden;
  transition:background .35s,color .35s;
  padding-bottom:84px;
}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none}
a{color:inherit;text-decoration:none}
input,textarea,select{font-family:inherit}

/* ── SVG ICON SYSTEM ─────────────────────────────────────── */
.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.icon svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm svg{width:.85em;height:.85em}
.icon-lg svg{width:1.25em;height:1.25em}

/* ── PAGES ───────────────────────────────────────────────── */
.page{display:none;min-height:100vh}
.page.active{display:block;animation:fi .3s cubic-bezier(.4,0,.2,1)}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.progress-bar{width:0%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  position:fixed;top:0;left:0;z-index:9999;transition:width .2s;border-radius:0 2px 2px 0}

/* ── NAV ─────────────────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:200;
  background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  height:60px;gap:.5rem;transition:background .3s;
}
.nav-logo{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.35rem;font-weight:900;
  color:var(--accent);cursor:pointer;
  letter-spacing:-.02em;flex-shrink:0;
  display:flex;align-items:center;gap:.3rem
}
.nav-logo span{color:var(--accent2)}
.nav-links{
  display:flex;align-items:center;gap:.15rem;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  flex:1;min-width:0;justify-content:flex-end;padding:4px 0;
}
.nav-links::-webkit-scrollbar{display:none}
.nb{
  color:var(--text2);font-family:'Nunito','Rubik',sans-serif;
  font-size:.75rem;font-weight:600;padding:.32rem .72rem;
  border-radius:20px;letter-spacing:.02em;
  transition:all .18s;white-space:nowrap;flex-shrink:0;
  display:inline-flex;align-items:center;gap:.3rem
}
.nb:hover{color:var(--text);background:var(--surface2)}
.nb.active{color:var(--text);background:var(--surface2)}
.nb.hl{background:var(--accent);color:var(--bg);font-weight:700}
.nb.hl:hover{filter:brightness(1.08)}
.nb.adm{background:var(--admin);color:#fff}
.nb.adm:hover{background:var(--admin2)}
.theme-btn{
  width:44px;height:24px;border-radius:12px;
  background:var(--surface2);border:1.5px solid var(--border2);
  position:relative;flex-shrink:0;margin-left:.3rem;
  transition:background .25s,border-color .25s;cursor:pointer
}
.theme-btn::before{
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);transition:transform .28s cubic-bezier(.4,0,.2,1)
}
[data-theme="light"] .theme-btn::before{transform:translateX(20px)}
.notif-btn{
  position:relative;color:var(--text2);
  padding:.32rem .5rem;border-radius:20px;
  font-size:1rem;transition:all .18s;flex-shrink:0;
  display:inline-flex;align-items:center
}
.notif-btn:hover{color:var(--text);background:var(--surface2)}
.notif-badge{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;
  background:var(--accent2);color:#fff;font-size:9px;font-weight:700;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;pointer-events:none;
  font-family:'Nunito',sans-serif
}

/* ── ROLE BADGES ─────────────────────────────────────────── */
.badge-verified{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(145deg,#4db8e8,#2196c4);
  flex-shrink:0;vertical-align:middle;margin-left:3px;
  cursor:help;position:relative;top:-1px;overflow:hidden
}
.badge-verified::after{
  content:'';display:block;width:10px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.5L4 7.5L8 3' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat
}
.badge-admin{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:5px;
  background:linear-gradient(145deg,var(--admin),var(--admin2));
  flex-shrink:0;vertical-align:middle;margin-left:3px;
  cursor:help;position:relative;top:-1px
}
.badge-admin::after{content:'';display:block;width:10px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14'/%3E%3C/svg%3E") center/contain no-repeat}
.badge-mod{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:5px;
  background:linear-gradient(145deg,var(--mod),var(--mod2));
  flex-shrink:0;vertical-align:middle;margin-left:3px;
  cursor:help;position:relative;top:-1px
}
.badge-mod::after{content:'';display:block;width:10px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat}
.badge-warn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--accent2);color:#fff;font-size:9px;font-weight:700;
  flex-shrink:0;vertical-align:middle;margin-left:3px;
  padding:0 4px;cursor:help;position:relative;top:-1px;
  font-family:'Nunito',sans-serif
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  padding:4rem 1.5rem 2.5rem;max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center
}
.eyebrow{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
  display:flex;align-items:center;gap:.5rem;font-weight:700
}
.eyebrow::before{content:'';display:block;width:20px;height:2px;
  background:var(--accent);border-radius:1px}
.hero h1{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:clamp(2.1rem,4vw,3.6rem);font-weight:900;
  line-height:1.08;letter-spacing:-.03em;margin-bottom:1.2rem
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{color:var(--text2);font-size:.9rem;line-height:1.8;margin-bottom:1.6rem;font-weight:500}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-vis{position:relative;height:280px;display:flex;align-items:center;justify-content:center}
.disc{
  width:220px;height:220px;border-radius:50%;
  background:conic-gradient(from 180deg,var(--accent) 0%,var(--accent2) 35%,var(--surface2) 65%,var(--accent) 100%);
  animation:spin 22s linear infinite;position:relative
}
.disc::after{content:'';position:absolute;inset:28px;background:var(--bg);border-radius:50%;transition:background .3s}
.disc::before{content:'';position:absolute;width:12px;height:12px;
  background:var(--text2);border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}
.needle{position:absolute;width:2px;height:85px;
  background:linear-gradient(to bottom,var(--accent2),transparent);
  transform-origin:top center;transform:rotate(28deg) translateX(44px);
  border-radius:2px;top:calc(50% - 42px);left:50%}

/* ── TICKER ───────────────────────────────────────────────── */
.ticker{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;padding:.5rem 0;background:var(--surface)
}
.ticker-inner{display:flex;gap:2rem;animation:tk 30s linear infinite;white-space:nowrap}
.ticker-inner span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.ticker-inner .dot{color:var(--accent);font-size:.5rem}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTIONS ─────────────────────────────────────────────── */
.section{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}
.sh{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.6rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.5rem
}
.st{
  font-family:'Nunito',sans-serif;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700
}
.sc{font-size:.68rem;color:var(--muted)}

/* ── POST GRID ────────────────────────────────────────────── */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.pc{
  background:var(--surface);border:1px solid var(--border);
  padding:1.4rem;cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;border-radius:var(--radius)
}
.pc:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.pc-thumb{width:100%;height:130px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:.9rem}
.pt{
  display:inline-block;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(168,197,218,.12);border-radius:4px;
  padding:.15rem .5rem;margin-bottom:.65rem;font-weight:700
}
.ptitle{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.08rem;font-weight:700;line-height:1.3;margin-bottom:.55rem
}
.pexc{font-size:.82rem;color:var(--text2);line-height:1.65;margin-bottom:.85rem}
.pmeta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.3rem}
.pauth{font-size:.72rem;color:var(--muted);font-weight:500}
.pauth strong{color:var(--text);cursor:pointer;font-weight:600}
.pauth strong:hover{color:var(--accent)}
.pdate{font-size:.68rem;color:var(--muted)}
.ftag{
  position:absolute;top:.85rem;right:.85rem;
  background:var(--accent2);color:var(--bg);
  font-size:.55rem;padding:.2rem .55rem;
  border-radius:4px;letter-spacing:.06em;text-transform:uppercase;font-weight:700
}

/* ── POST VIEW ────────────────────────────────────────────── */
.pv{max-width:700px;margin:0 auto;padding:2rem 1.5rem}
.back{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.76rem;font-weight:600;color:var(--muted);
  cursor:pointer;margin-bottom:1.8rem;
  border:1px solid var(--border);padding:.35rem .85rem;border-radius:20px;
  transition:all .18s
}
.back:hover{color:var(--text);border-color:var(--border2)}
.pvtag{
  display:inline-block;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(168,197,218,.12);border-radius:4px;
  padding:.15rem .55rem;margin-bottom:.85rem;font-weight:700
}
.pv h1{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:clamp(1.7rem,3.5vw,2.5rem);
  font-weight:900;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.1rem
}
.pvmeta{
  display:flex;align-items:center;gap:1rem;font-size:.76rem;
  color:var(--muted);margin-bottom:2rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--border);flex-wrap:wrap;font-weight:500
}
.pvbody{font-size:.92rem;line-height:2;color:var(--text);
  font-family:'Nunito',sans-serif}
.pvbody p{margin-bottom:1.2rem}
.pvimg{width:100%;max-height:400px;object-fit:cover;border-radius:var(--radius);margin:1.2rem 0}
.audio-blk{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.9rem 1.1rem;margin:.9rem 0;
  display:flex;align-items:center;gap:.9rem
}
.aplay{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);border:none;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--bg);transition:filter .18s,transform .12s;
  font-size:.85rem
}
.aplay:hover{filter:brightness(1.1);transform:scale(1.06)}
.ainfo{flex:1;min-width:0}
.atitle{font-size:.8rem;font-weight:600;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abar{width:100%;height:3px;background:var(--border);border-radius:2px;cursor:pointer;margin-top:.4rem}
.aprog{height:100%;background:var(--accent);border-radius:2px;width:0%;pointer-events:none}

/* ── LIKES ────────────────────────────────────────────────── */
.like-row{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.like-btn{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text2);font-size:.72rem;font-weight:600;
  padding:.3rem .8rem;border-radius:20px;
  display:inline-flex;align-items:center;gap:.35rem;transition:all .18s
}
.like-btn:hover:not(:disabled){border-color:var(--border2);color:var(--text);background:var(--surface3)}
.like-btn.liked{background:rgba(158,184,158,.18);border-color:var(--accent3);color:var(--accent3)}
.like-btn.disliked{background:rgba(232,165,152,.18);border-color:var(--accent2);color:var(--accent2)}
.like-btn:disabled{opacity:.4;cursor:default}

/* ── COMMENTS ─────────────────────────────────────────────── */
.comments-section{max-width:700px;margin:2rem auto 0;padding:0 1.5rem 3rem}
.comments-title{
  font-family:'Nunito',sans-serif;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;
  margin-bottom:1.3rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)
}
.comment-form{display:flex;gap:.75rem;margin-bottom:1.8rem;align-items:flex-start}
.comment-av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;color:var(--bg);flex-shrink:0;overflow:hidden
}
.comment-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.comment-input-wrap{flex:1;display:flex;flex-direction:column;gap:.5rem}
.comment-inp{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);font-family:'Nunito',sans-serif;font-size:.82rem;
  padding:.62rem .9rem;border-radius:var(--radius);outline:none;
  resize:none;min-height:44px;transition:border-color .2s;width:100%
}
.comment-inp:focus{border-color:var(--accent)}
.comment-actions{display:flex;justify-content:flex-end}
.comment-item{display:flex;gap:.75rem;margin-bottom:1.3rem;animation:fi .22s ease}
.comment-body-wrap{flex:1;min-width:0}
.comment-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.comment-name{font-size:.78rem;font-weight:700;cursor:pointer}
.comment-name:hover{color:var(--accent)}
.comment-time{font-size:.65rem;color:var(--muted)}
.comment-text{font-size:.82rem;line-height:1.68;word-break:break-word;color:var(--text)}
.comment-edit,.comment-del{
  color:var(--muted);font-size:.68rem;padding:0 .15rem;
  transition:color .18s;cursor:pointer;background:none;border:none
}
.comment-edit:hover{color:var(--accent)}.comment-del:hover{color:var(--accent2)}
.comment-reply-btn{
  color:var(--muted);font-size:.68rem;font-weight:600;
  padding:0 .15rem;cursor:pointer;background:none;border:none;
  transition:color .18s;letter-spacing:.04em;text-transform:uppercase;
  font-family:'Nunito',sans-serif
}
.comment-reply-btn:hover{color:var(--accent)}
.comment-reply-to{
  font-size:.7rem;color:var(--muted);margin-bottom:.3rem;
  border-left:2px solid var(--border);padding-left:.5rem;font-style:italic
}
.comment-thread{margin-left:2rem;margin-top:.65rem;
  border-left:2px solid var(--border);padding-left:.9rem}
.comment-thread .comment-item{margin-bottom:.9rem}
.reply-form{margin-left:2.5rem;margin-top:.45rem;margin-bottom:.85rem;
  display:flex;gap:.5rem;align-items:flex-start}
.comments-login-hint{
  font-size:.78rem;color:var(--muted);padding:.9rem 1.1rem;
  background:var(--surface2);border-radius:var(--radius);text-align:center;border:1px solid var(--border)
}
.comments-login-hint a{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ── AFISHA ───────────────────────────────────────────────── */
.afhdr{background:linear-gradient(180deg,var(--surface) 0%,transparent 100%);
  border-bottom:1px solid var(--border);padding:2.8rem 1.5rem 1.8rem}
.afhdr-in{max-width:1100px;margin:0 auto}
.aftitle{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.9rem);font-weight:900;
  line-height:1.06;margin-bottom:.65rem
}
.afdesc{font-size:.86rem;color:var(--text2);max-width:500px;line-height:1.75;font-weight:500}
.affilters{max-width:1100px;margin:0 auto;padding:1rem 1.5rem .35rem;
  display:flex;gap:.4rem;flex-wrap:wrap}
.fb{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text2);font-size:.7rem;font-weight:600;
  padding:.28rem .85rem;border-radius:20px;letter-spacing:.04em;
  text-transform:uppercase;transition:all .18s;cursor:pointer
}
.fb:hover,.fb.on{
  background:var(--accent);border-color:var(--accent);
  color:var(--bg);font-weight:700
}
.evwrap{max-width:1100px;margin:0 auto;padding:1rem 1.5rem 3rem}
.mgrp{margin-bottom:2rem}
.mlbl{
  font-family:'Nunito',sans-serif;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.75rem;padding-bottom:.4rem;font-weight:700;
  border-bottom:1px solid var(--border)
}
.evc{
  background:var(--surface);border:1px solid var(--border);
  display:grid;grid-template-columns:66px 1fr auto;
  gap:1.1rem;padding:1.1rem 1.3rem;margin-bottom:.5rem;
  cursor:pointer;transition:all .2s;
  position:relative;overflow:hidden;border-radius:var(--radius);align-items:center
}
.evc:hover{border-color:var(--border2);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.evc.past{opacity:.45}
.evday{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.9rem;font-weight:900;color:var(--accent);
  line-height:1;display:block;text-align:center
}
.evmon{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;text-align:center;font-weight:600}
.evwd{font-size:.55rem;color:var(--muted);display:block;text-align:center}
.evbdg{
  display:inline-block;font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.16rem .5rem;border-radius:4px;
  margin-bottom:.4rem;font-weight:700
}
.ec{background:rgba(168,197,218,.15);color:var(--accent)}
.ef{background:rgba(232,165,152,.15);color:var(--accent2)}
.ek{background:rgba(139,127,212,.15);color:var(--admin)}
.el{background:rgba(107,174,214,.15);color:var(--mod)}
.eo{background:rgba(110,110,138,.12);color:var(--muted)}
.evname{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1rem;font-weight:700;line-height:1.25;margin-bottom:.3rem
}
.evven{font-size:.72rem;color:var(--text2);font-weight:500}
.evven strong{color:var(--text);font-weight:600}
.evtp{font-size:.68rem;color:var(--muted);display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.2rem;font-weight:500}
.evprice{color:var(--accent);font-weight:600}
.evact{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex-shrink:0}
.tktbtn{
  background:var(--accent);color:var(--bg);font-family:'Nunito',sans-serif;
  font-size:.66rem;padding:.38rem .9rem;border:none;border-radius:20px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:700;white-space:nowrap;
  cursor:pointer;transition:filter .18s,transform .12s
}
.tktbtn:hover{filter:brightness(1.08);transform:scale(1.03)}
.tktbtn.sold{background:var(--surface2);color:var(--muted);cursor:default}
.tktbtn.free{background:rgba(158,184,158,.2);color:var(--accent3);border:1.5px solid var(--accent3)}
.evcanc{
  position:absolute;inset:0;background:rgba(15,17,23,.78);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent2);font-weight:700;border-radius:var(--radius)
}
.evview{max-width:720px;margin:0 auto;padding:2rem 1.5rem}
.evvhero{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.6rem;margin-bottom:1.5rem;
  position:relative;overflow:hidden
}
.evvhero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2))
}
.evvday{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:2.8rem;font-weight:900;color:var(--accent);line-height:1
}
.evvmon{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;font-weight:600}
.evvtitle{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.1;margin-bottom:.65rem
}
.evmg{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.1rem}
.evmi{background:var(--surface2);padding:.9rem;border-radius:var(--radius-sm)}
.evml{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem;font-weight:700}
.evmv{font-size:.85rem;color:var(--text);font-weight:500}

/* ── MUSIC ────────────────────────────────────────────────── */
.mhdr{background:linear-gradient(180deg,var(--surface) 0%,transparent 100%);
  border-bottom:1px solid var(--border);padding:2.8rem 1.5rem 1.8rem}
.msbar{max-width:1100px;margin:0 auto;padding:1rem 1.5rem .35rem;
  display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}
.msinp{
  flex:1;min-width:160px;background:var(--surface);
  border:1.5px solid var(--border);color:var(--text);font-family:'Nunito',sans-serif;
  font-size:.82rem;padding:.65rem 1rem;border-radius:var(--radius);
  outline:none;transition:border-color .2s;font-weight:500
}
.msinp:focus{border-color:var(--accent)}
.mssort{
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--text);font-family:'Nunito',sans-serif;font-size:.78rem;
  padding:.62rem .85rem;border-radius:var(--radius);outline:none;cursor:pointer;font-weight:500
}
.mwrap{max-width:1100px;margin:0 auto;padding:1rem 1.5rem 3rem}
.ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem}
.ac{
  background:var(--surface);border:1px solid var(--border);
  padding:1.1rem;cursor:pointer;transition:all .2s;
  position:relative;border-radius:var(--radius)
}
.ac:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.ac-cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:.85rem}
.ac-nocover{
  width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface2),var(--surface3));
  border-radius:var(--radius-sm);margin-bottom:.85rem;color:var(--muted)
}
.ac-title{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:.95rem;font-weight:700;margin-bottom:.22rem;line-height:1.25
}
.ac-artist{font-size:.74rem;color:var(--text2);margin-bottom:.18rem;font-weight:500}
.ac-genre{
  font-size:.62rem;color:var(--accent);margin-bottom:.38rem;
  letter-spacing:.07em;text-transform:uppercase;font-weight:700
}
.ac-author{
  font-size:.7rem;color:var(--accent);cursor:pointer;
  display:flex;align-items:center;gap:.28rem;flex-wrap:wrap;font-weight:600
}
.ac-author:hover{text-decoration:underline;text-underline-offset:2px}
.ac-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
.plays{font-size:.64rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:.28rem}
.dur{font-size:.62rem;color:var(--muted)}
.playbtn{
  position:absolute;bottom:1rem;right:1rem;
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);border:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--bg);transition:all .18s
}
.playbtn:hover{filter:brightness(1.1);transform:scale(1.08)}

/* ── FORMS ────────────────────────────────────────────────── */
.field{margin-bottom:1.2rem}
.field label{
  display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.42rem;font-weight:700
}
.field input,.field textarea,.field select{
  width:100%;background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:500;
  padding:.65rem .95rem;border-radius:var(--radius-sm);outline:none;
  transition:border-color .2s;resize:vertical;-webkit-appearance:none
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--accent);background:var(--surface)
}
.field textarea{min-height:175px}
.field select option{background:var(--surface)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.toolbar{
  display:flex;gap:.2rem;flex-wrap:wrap;margin-bottom:.45rem;
  background:var(--surface2);padding:.4rem;border-radius:var(--radius-sm);
  border:1.5px solid var(--border)
}
.tbtn{
  background:none;border:none;color:var(--muted);font-size:.72rem;
  padding:.24rem .52rem;border-radius:var(--radius-sm);transition:all .15s;
  font-family:'Nunito',sans-serif;font-weight:600
}
.tbtn:hover{color:var(--text);background:var(--surface3)}
.tsep{width:1px;background:var(--border);margin:0 .1rem}
.cc{font-size:.65rem;color:var(--muted);text-align:right;margin-top:.2rem}
.uz{
  border:2px dashed var(--border2);border-radius:var(--radius);
  padding:1.4rem;text-align:center;cursor:pointer;
  transition:all .2s;position:relative;background:var(--surface2)
}
.uz:hover,.uz.drag{border-color:var(--accent);background:rgba(168,197,218,.06)}
.uz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uz-icon{display:flex;justify-content:center;margin-bottom:.5rem;font-size:1.5rem;opacity:.4;color:var(--muted)}
.uz-text{font-size:.78rem;color:var(--text2);font-weight:600}
.uz-lim{font-size:.65rem;color:var(--muted);margin-top:.18rem}
.fp-list{margin-top:.65rem;display:flex;flex-direction:column;gap:.38rem}
.fp{
  display:flex;align-items:center;gap:.55rem;
  background:var(--surface2);padding:.45rem .7rem;border-radius:var(--radius-sm);
  border:1px solid var(--border)
}
.fp-name{flex:1;font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.fp-sz{font-size:.64rem;color:var(--muted)}
.fp-rm{color:var(--muted);font-size:.8rem;transition:color .18s;cursor:pointer}
.fp-rm:hover{color:var(--accent2)}
.ferr{color:var(--accent2);font-size:.72rem;margin-top:.35rem;font-weight:600}

/* ── AUTH ─────────────────────────────────────────────────── */
.awrap{max-width:400px;margin:0 auto;padding:3.5rem 1.5rem}
.alogo{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.65rem;font-weight:900;color:var(--accent);
  display:block;text-align:center;letter-spacing:-.02em;margin-bottom:.2rem
}
.alogo span{color:var(--accent2)}
.atag{text-align:center;font-size:.72rem;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:2.5rem;font-weight:600}
.abox{
  background:var(--surface);border:1.5px solid var(--border);
  padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow-sm)
}
.abox h2{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.3rem;font-weight:900;margin-bottom:1.6rem
}
.asw{text-align:center;margin-top:1.2rem;font-size:.76rem;color:var(--muted);font-weight:500}
.asw a{color:var(--accent);cursor:pointer;font-weight:700;
  border-bottom:1px solid transparent;transition:border-color .18s}
.asw a:hover{border-color:var(--accent)}
.alrt{
  padding:.65rem 1rem;border-radius:var(--radius-sm);
  font-size:.76rem;margin-bottom:.9rem;border-left:3px solid;font-weight:500
}
.alrt-e{background:rgba(232,165,152,.12);border-color:var(--accent2);color:var(--accent2)}
.alrt-s{background:rgba(168,197,218,.12);border-color:var(--accent);color:var(--accent)}
.agree-row{
  display:flex;align-items:flex-start;gap:.6rem;
  margin-bottom:1.1rem;font-size:.76rem;color:var(--text2);
  line-height:1.55;cursor:pointer;font-weight:500
}
.agree-row input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--accent);
  flex-shrink:0;margin-top:2px;cursor:pointer
}
.agree-row a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.agree-row.agree-error{color:var(--accent2);animation:shake .3s ease}
.agree-row.agree-error a{color:var(--accent2)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ── CROP ─────────────────────────────────────────────────── */
.crop-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);
  z-index:700;align-items:center;justify-content:center;padding:1rem}
.crop-modal.open{display:flex}
.crop-box{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;width:100%;max-width:440px
}
.crop-box h3{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.15rem;font-weight:700;margin-bottom:.75rem
}
#cropCanvas{display:block;width:100%;height:auto;border-radius:var(--radius-sm);
  cursor:grab;touch-action:none;background:#0f1117}
#cropCanvas:active{cursor:grabbing}
.crop-controls{display:flex;align-items:center;gap:.75rem;margin:.7rem 0 .4rem}
.crop-zoom-lbl{font-size:.68rem;color:var(--muted);white-space:nowrap;font-weight:600}
.crop-zoom{flex:1;accent-color:var(--accent);cursor:pointer;height:4px}
.crop-hint{font-size:.65rem;color:var(--muted);text-align:center;margin-bottom:.75rem}
.crop-actions{display:flex;gap:.7rem;justify-content:flex-end}

/* ── PROFILE ──────────────────────────────────────────────── */
.prwrap{max-width:860px;margin:0 auto;padding:2rem 1.5rem}
.prhdr{
  display:flex;align-items:flex-start;gap:1.8rem;
  margin-bottom:2.2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)
}
.av{
  width:82px;height:82px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.8rem;font-weight:900;color:var(--bg);
  flex-shrink:0;position:relative;cursor:pointer;overflow:hidden
}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av-ed{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700
}
.av:hover .av-ed{opacity:1}
.prname{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.55rem;font-weight:900;margin-bottom:.22rem;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap
}
.prhandle{font-size:.76rem;color:var(--accent);margin-bottom:.4rem;
  display:flex;align-items:center;gap:.3rem;font-weight:600}
.prbio{font-size:.82rem;color:var(--text2);line-height:1.65;font-weight:500}
.prstats{display:flex;gap:1.6rem;margin-top:.85rem;flex-wrap:wrap}
.pstat .num{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.3rem;font-weight:900;color:var(--accent);display:block
}
.pstat .lbl{font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.tabs{
  display:flex;border-bottom:1.5px solid var(--border);
  overflow-x:auto;scrollbar-width:none;margin-bottom:0
}
.tabs::-webkit-scrollbar{display:none}
.tabb{
  background:none;border:none;border-bottom:2.5px solid transparent;
  font-family:'Nunito',sans-serif;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:.65rem 1rem;transition:all .18s;margin-bottom:-1.5px;white-space:nowrap;flex-shrink:0
}
.tabb.on{color:var(--accent);border-color:var(--accent)}
.tabb:hover:not(.on){color:var(--text)}
.tc{display:none;padding-top:1.3rem}
.tc.on{display:block;animation:fi .25s ease}
.mpi{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:.95rem 1.1rem;background:var(--surface);margin-bottom:.5rem;
  gap:.75rem;border-radius:var(--radius-sm);border:1px solid var(--border);transition:all .18s
}
.mpi:hover{border-color:var(--border2);background:var(--surface2)}
.mpit{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:.92rem;font-weight:700;margin-bottom:.22rem;cursor:pointer
}
.mpit:hover{color:var(--accent)}
.mpim{font-size:.65rem;color:var(--muted);font-weight:500}
.mpba{display:flex;gap:.4rem;flex-shrink:0}
.ab{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text2);font-family:'Nunito',sans-serif;
  font-size:.62rem;padding:.24rem .6rem;border-radius:var(--radius-sm);
  letter-spacing:.04em;text-transform:uppercase;font-weight:700;transition:all .18s
}
.ab:hover{color:var(--text);border-color:var(--border2);background:var(--surface3)}
.ab.del:hover{color:var(--accent2);border-color:var(--accent2);background:rgba(232,165,152,.1)}
.ab.ok{border-color:var(--accent3);color:var(--accent3)}
.ab.ok:hover{background:var(--accent3);color:var(--bg)}
.pag{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem;margin-bottom:1.3rem}
.pai{
  background:var(--surface);padding:.95rem;
  display:flex;align-items:center;gap:.85rem;cursor:pointer;
  transition:all .2s;border-radius:var(--radius-sm);border:1px solid var(--border)
}
.pai:hover{border-color:var(--border2);background:var(--surface2);transform:translateX(3px)}
.paicov{
  width:44px;height:44px;border-radius:var(--radius-sm);flex-shrink:0;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:var(--muted)
}
.paicov img{width:100%;height:100%;object-fit:cover}
.pait{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paim{font-size:.62rem;color:var(--muted);margin-top:.12rem;display:flex;gap:.5rem;flex-wrap:wrap;font-weight:500}

/* ── SOCIAL LINKS ────────────────────────────────────────── */
.social-links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.social-link{
  display:inline-flex;align-items:center;gap:.38rem;
  font-size:.72rem;color:var(--text2);text-decoration:none;
  border:1.5px solid var(--border);padding:.24rem .7rem;
  border-radius:20px;transition:all .18s;font-weight:600
}
.social-link:hover{color:var(--text);border-color:var(--border2);background:var(--surface2)}
.social-link.sc:hover{color:#f70020;border-color:#f70020}
.social-link.tg:hover{color:#29b6f6;border-color:#29b6f6}

/* ── TELEGRAM BANNER ──────────────────────────────────────── */
.tg-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:.9rem;background:var(--surface);
  border:1.5px solid var(--border);border-left:3px solid #29b6f6;
  padding:1rem 1.4rem;border-radius:var(--radius);
  margin-bottom:1.4rem;flex-wrap:wrap
}
.tg-banner-left{display:flex;align-items:center;gap:.75rem}
.tg-icon{font-size:1.4rem;flex-shrink:0}
.tg-text .tg-label{font-size:.82rem;font-weight:700;margin-bottom:.1rem}
.tg-text .tg-sub{font-size:.7rem;color:var(--muted);font-weight:500}
.tg-btn{
  background:#29b6f6;color:#000;font-family:'Nunito',sans-serif;
  font-size:.68rem;padding:.44rem 1.1rem;border:none;border-radius:20px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  white-space:nowrap;transition:filter .18s;text-decoration:none;display:inline-block;cursor:pointer
}
.tg-btn:hover{filter:brightness(1.1)}

/* ── ADMIN ────────────────────────────────────────────────── */
.adwrap{max-width:1080px;margin:0 auto;padding:1.6rem}
.adhdr{
  display:flex;align-items:center;gap:.85rem;margin-bottom:1.6rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--border);flex-wrap:wrap
}
.adbdg{
  background:var(--admin);color:#fff;font-size:.58rem;padding:.18rem .65rem;
  border-radius:20px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  font-family:'Nunito',sans-serif
}
.adhdr h1{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.55rem;font-weight:900
}
.adgrid{display:grid;grid-template-columns:210px 1fr;gap:1.6rem;min-height:520px}
.adsb{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:.8rem;
  height:fit-content;position:sticky;top:72px
}
.ani{
  display:block;background:none;border:none;width:100%;text-align:left;
  font-family:'Nunito',sans-serif;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:.58rem .9rem;border-radius:var(--radius-sm);
  transition:all .18s;margin-bottom:.12rem;
  display:flex;align-items:center;gap:.5rem
}
.ani:hover{color:var(--text);background:var(--surface2)}
.ani.on{color:var(--admin);background:rgba(139,127,212,.1)}
.ansep{height:1px;background:var(--border);margin:.4rem 0}
.ang{
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.3rem .9rem .1rem;font-weight:700;opacity:.6
}
.ap{display:none}
.ap.on{display:block;animation:fi .25s ease}
.ap>h2{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.1rem;font-weight:900;margin-bottom:1.2rem;color:var(--text)
}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.85rem;margin-bottom:1.6rem}
.sc2{
  background:var(--surface);border:1.5px solid var(--border);
  padding:.95rem 1rem;border-radius:var(--radius)
}
.sc2 .big{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.75rem;font-weight:900;color:var(--accent);display:block
}
.sc2 .lbl2{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.15rem;font-weight:700}
.dt{width:100%;border-collapse:collapse}
.dt th{
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:.5rem .7rem;border-bottom:1.5px solid var(--border);font-weight:700
}
.dt td{font-size:.78rem;padding:.58rem .7rem;border-bottom:1px solid var(--border);vertical-align:middle}
.dt tr:hover td{background:var(--surface2)}
.sb{
  display:inline-block;font-size:.58rem;padding:.15rem .5rem;
  border-radius:20px;letter-spacing:.04em;text-transform:uppercase;font-weight:700
}
.s-ok{background:rgba(158,184,158,.2);color:var(--accent3)}
.s-pend{background:rgba(168,197,218,.2);color:var(--accent)}
.s-ban{background:rgba(232,165,152,.2);color:var(--accent2)}
.s-mod{background:rgba(107,174,214,.2);color:var(--mod)}
.cs{
  background:var(--surface2);border:1.5px solid var(--border);
  padding:1.2rem;border-radius:var(--radius);margin-bottom:.85rem
}
.cs h3{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--admin);margin-bottom:.95rem;
  display:flex;align-items:center;gap:.4rem;font-weight:700
}
.cs h3::before{content:'';width:5px;height:5px;background:var(--admin);border-radius:50%;display:block;flex-shrink:0}
.tr2{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.65rem}
.tr2 label{font-size:.66rem;color:var(--muted);width:120px;flex-shrink:0;padding-top:.38rem;font-weight:600}
.tr2 input,.tr2 textarea{
  flex:1;background:var(--surface);border:1.5px solid var(--border);
  color:var(--text);font-family:'Nunito',sans-serif;font-size:.76rem;
  padding:.34rem .52rem;border-radius:var(--radius-sm);outline:none;resize:vertical;font-weight:500
}
.tr2 input:focus,.tr2 textarea:focus{border-color:var(--admin)}
.sr2{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.sr2 label{font-size:.66rem;color:var(--muted);width:120px;flex-shrink:0;font-weight:600}
.sr2 select{
  flex:1;background:var(--surface);border:1.5px solid var(--border);
  color:var(--text);font-family:'Nunito',sans-serif;font-size:.76rem;
  padding:.34rem .52rem;border-radius:var(--radius-sm);outline:none;font-weight:500
}
.togr{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.togr>label:first-child{font-size:.66rem;color:var(--muted);flex:1;font-weight:600}
.tgl{position:relative;width:34px;height:18px;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tsl{
  position:absolute;cursor:pointer;inset:0;
  background:var(--border2);border-radius:16px;transition:.25s
}
.tsl::before{
  content:'';position:absolute;width:12px;height:12px;
  left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s
}
.tgl input:checked+.tsl{background:var(--admin)}
.tgl input:checked+.tsl::before{transform:translateX(16px)}

/* ── PLAYER ───────────────────────────────────────────────── */
#player{
  position:fixed;bottom:0;left:0;right:0;z-index:400;
  background:var(--player-bg);border-top:1.5px solid var(--border);
  height:68px;display:flex;align-items:center;padding:0 1.4rem;
  gap:1.1rem;transition:background .3s,transform .3s;
  backdrop-filter:blur(12px)
}
#player.hidden{transform:translateY(100%)}
.pl-cov{
  width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--surface2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;overflow:hidden;cursor:pointer;transition:transform .18s;color:var(--muted)
}
.pl-cov:hover{transform:scale(1.06)}
.pl-cov img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm)}
.pl-info{min-width:0;flex:0 0 160px}
.pl-title{font-size:.76rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}
.pl-auth{font-size:.65rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:500}
.pl-auth:hover{color:var(--accent)}
.pl-ctrl{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.plb{color:var(--muted);font-size:.95rem;transition:color .18s;padding:.18rem;line-height:1}
.plb:hover{color:var(--text)}
.pl-play{
  background:var(--accent);color:var(--bg);width:36px;height:36px;
  border-radius:50%;border:none;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:filter .18s;flex-shrink:0
}
.pl-play:hover{filter:brightness(1.1)}
.pl-prog{flex:1;display:flex;align-items:center;gap:.65rem;min-width:0}
.pl-t{font-size:.62rem;color:var(--muted);white-space:nowrap;flex-shrink:0;width:34px;font-weight:500}
.pl-t.e{text-align:left}
.pl-bar{flex:1;height:3px;background:var(--border);border-radius:2px;cursor:pointer}
.pl-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:2px;width:0%;pointer-events:none}
.pl-vol{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.pl-vi{font-size:.85rem;color:var(--muted);cursor:pointer;transition:color .18s}
.pl-vi:hover{color:var(--text)}
.pl-vbar{width:64px;height:3px;background:var(--border);border-radius:2px;cursor:pointer}
.pl-vfill{height:100%;background:var(--muted);border-radius:2px;width:80%}

/* ── FULLSCREEN COVER ─────────────────────────────────────── */
#fsCover{display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.96);align-items:center;justify-content:center;
  flex-direction:column;gap:1rem}
#fsCover.open{display:flex}
#fsCoverImg{max-width:min(85vw,85vh);max-height:min(85vw,85vh);
  border-radius:var(--radius);object-fit:cover}
#fsCoverPh{width:min(70vw,70vh);height:min(70vw,70vh);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;font-size:5rem;
  background:var(--surface2);color:var(--muted)}
#fsCoverInfo{text-align:center}
#fsCoverTitle{font-family:'Fraunces','Playfair Display',serif;font-size:1.5rem;
  font-weight:900;color:#fff;margin-bottom:.28rem}
#fsCoverArtist{font-size:.85rem;color:rgba(255,255,255,.5);font-weight:500}
#fsClose{position:absolute;top:1.4rem;right:1.4rem;background:rgba(255,255,255,.1);
  border:none;color:rgba(255,255,255,.6);font-size:1.2rem;cursor:pointer;
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all .18s}
#fsClose:hover{background:rgba(255,255,255,.2);color:#fff}

/* ── MODALS ───────────────────────────────────────────────── */
.mover{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:600;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
.mover.open{display:flex}
.mbox{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.6rem;max-width:490px;width:100%;
  animation:fi .25s cubic-bezier(.4,0,.2,1);max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow)
}
.mbox h3{font-family:'Fraunces','Playfair Display',serif;font-size:1.15rem;font-weight:900;margin-bottom:.85rem}
.macts{display:flex;gap:.65rem;margin-top:1.2rem;justify-content:flex-end}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  background:var(--accent);color:var(--bg);font-family:'Nunito',sans-serif;
  font-size:.74rem;padding:.65rem 1.6rem;border:none;
  border-radius:20px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  transition:all .2s;display:inline-flex;align-items:center;gap:.4rem;
  cursor:pointer;white-space:nowrap
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn-g{
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text2)
}
.btn-g:hover{border-color:var(--border2);color:var(--text);background:var(--surface3);filter:none;transform:translateY(-1px)}
.btn-d{background:var(--accent2);color:#fff}
.btn-a{background:var(--admin);color:#fff}
.btn-a:hover{background:var(--admin2)}
.btn-sm{padding:.32rem .9rem;font-size:.66rem}
.btn-full{width:100%;justify-content:center}

/* ── SUPPORT ──────────────────────────────────────────────── */
.sup-wrap{max-width:860px;margin:0 auto;padding:2rem 1.5rem}
.sup-ticket{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:.6rem;
  cursor:pointer;transition:all .2s
}
.sup-ticket:hover{border-color:var(--border2);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.sup-ticket-title{font-family:'Fraunces','Playfair Display',serif;font-size:1rem;font-weight:700;margin-bottom:.35rem}
.sup-ticket-meta{font-size:.68rem;color:var(--muted);display:flex;gap:.75rem;flex-wrap:wrap;font-weight:500}
.sup-thread{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.3rem;margin-bottom:1.1rem
}
.sup-msg{display:flex;gap:.8rem;margin-bottom:1.2rem;animation:fi .22s ease}
.sup-msg.staff{flex-direction:row-reverse}
.sup-msg-body{flex:1;min-width:0}
.sup-msg-bubble{
  background:var(--surface2);border-radius:var(--radius-sm);
  padding:.75rem 1rem;font-size:.82rem;line-height:1.68;word-break:break-word
}
.sup-msg.staff .sup-msg-bubble{background:rgba(139,127,212,.1);border:1.5px solid rgba(139,127,212,.2)}
.sup-msg-meta{font-size:.62rem;color:var(--muted);margin-top:.28rem;display:flex;gap:.5rem;flex-wrap:wrap;font-weight:500}
.sup-msg.staff .sup-msg-meta{justify-content:flex-end}
.support-counter{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;background:var(--accent2);color:#fff;
  font-size:.62rem;font-weight:700;border-radius:10px;padding:0 5px;
  margin-left:.4rem;font-family:'Nunito',sans-serif
}

/* ── RULES ────────────────────────────────────────────────── */
.rules-wrap{max-width:740px;margin:0 auto;padding:2rem 1.5rem}
.rules-body{font-size:.9rem;line-height:1.92;color:var(--text);font-family:'Nunito',sans-serif}
.rules-body h1{font-family:'Fraunces','Playfair Display',serif;font-size:1.75rem;font-weight:900;margin-bottom:1.3rem}
.rules-body h2{font-family:'Fraunces','Playfair Display',serif;font-size:1.22rem;font-weight:700;margin:1.4rem 0 .65rem}
.rules-body p{margin-bottom:1rem}
.rules-body ol,.rules-body ul{margin-left:1.5rem;margin-bottom:1.1rem}
.rules-body li{margin-bottom:.45rem}

/* ── NOTIFICATIONS ─────────────────────────────────────────── */
.notif-panel{
  position:fixed;top:64px;right:.85rem;width:min(370px,calc(100vw - 1.7rem));
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);z-index:500;
  animation:fi .2s ease;max-height:72vh;display:flex;flex-direction:column
}
.notif-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--border);flex-shrink:0
}
.notif-header-title{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;font-family:'Nunito',sans-serif}
.notif-header-actions{display:flex;gap:.5rem}
.notif-list{overflow-y:auto;flex:1;scrollbar-width:thin}
.notif-item{
  display:flex;gap:.7rem;padding:.8rem 1.1rem;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .15s;position:relative
}
.notif-item:hover{background:var(--surface2)}
.notif-item.unread{background:rgba(168,197,218,.06)}
.notif-item.unread::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--accent);border-radius:0 2px 2px 0
}
.notif-icon{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;background:var(--surface2)
}
.notif-icon.approved{background:rgba(158,184,158,.2)}
.notif-icon.rejected{background:rgba(232,165,152,.2)}
.notif-icon.support{background:rgba(107,174,214,.18)}
.notif-icon.warning{background:rgba(168,197,218,.18)}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:.76rem;font-weight:700;margin-bottom:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-text{font-size:.68rem;color:var(--text2);line-height:1.48;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-time{font-size:.6rem;color:var(--muted);margin-top:.2rem;font-weight:500}
.notif-empty{text-align:center;padding:2.8rem 1.1rem;font-size:.78rem;color:var(--muted)}

/* ── REVIEW QUEUE ──────────────────────────────────────────── */
.review-item{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.3rem 1.5rem;margin-bottom:.9rem
}
.review-item-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.85rem;margin-bottom:.8rem;flex-wrap:wrap
}
.review-item-title{font-family:'Fraunces','Playfair Display',serif;font-size:1.05rem;font-weight:700;margin-bottom:.25rem}
.review-item-meta{font-size:.68rem;color:var(--muted);display:flex;gap:.65rem;flex-wrap:wrap;font-weight:500}
.review-actions{display:flex;gap:.5rem;flex-shrink:0;flex-wrap:wrap}
.review-preview{
  background:var(--surface2);border-radius:var(--radius-sm);
  padding:.8rem 1rem;font-size:.8rem;color:var(--text2);
  margin-bottom:.8rem;max-height:100px;overflow:hidden;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical
}
.review-images{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.7rem}
.review-images img{width:62px;height:62px;object-fit:cover;border-radius:var(--radius-sm)}
.review-track{
  display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;
  background:var(--surface2);border-radius:var(--radius-sm);
  margin-bottom:.5rem;border:1px solid var(--border)
}
.review-track-cover{
  width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;
  flex-shrink:0;background:var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted)
}
.review-track-cover img{width:100%;height:100%;object-fit:cover}
.review-empty{text-align:center;padding:3rem;font-size:.82rem;color:var(--muted)}
.reject-reason-inp{
  width:100%;background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);font-family:'Nunito',sans-serif;font-size:.82rem;
  padding:.65rem .9rem;border-radius:var(--radius-sm);outline:none;
  resize:none;min-height:85px;transition:border-color .2s;margin-bottom:.9rem;font-weight:500
}
.reject-reason-inp:focus{border-color:var(--accent2)}

/* ── GATE LOGIN ────────────────────────────────────────────── */
.gate-login-msg{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:1.4rem 1.6rem;margin-bottom:1.6rem;
  font-size:.85rem;line-height:1.8;color:var(--text)
}
.gate-login-msg h1,.gate-login-msg h2{
  font-family:'Fraunces','Playfair Display',serif;
  font-size:1.35rem;font-weight:900;margin-bottom:.7rem
}
.gate-login-msg p{margin-bottom:.7rem;color:var(--text2)}

/* ── PENDING NOTICE ────────────────────────────────────────── */
.pending-notice{
  background:rgba(168,197,218,.08);border:1.5px solid rgba(168,197,218,.25);
  border-radius:var(--radius-sm);padding:.7rem 1rem;
  font-size:.74rem;color:var(--accent);margin-top:1rem;
  display:flex;align-items:center;gap:.5rem;font-weight:600
}

/* ── MISC ─────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--border);padding:1.6rem;text-align:center;
  font-size:.65rem;color:var(--muted);letter-spacing:.08em;
  text-transform:uppercase;margin-top:3rem;font-weight:600
}
footer .fs{color:var(--accent)}
.empty{text-align:center;padding:3rem 1.5rem;font-size:.8rem;color:var(--muted);font-weight:500}
.empty .icon-block{font-size:2.5rem;margin-bottom:.85rem;display:block;opacity:.2}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-anim{animation:spin .7s linear infinite;display:inline-block}
#toast{
  position:fixed;bottom:80px;right:1.3rem;z-index:10000;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--text);padding:.6rem 1.2rem;border-radius:var(--radius);
  font-size:.74rem;font-weight:600;letter-spacing:.03em;
  opacity:0;transition:opacity .25s;pointer-events:none;
  max-width:260px;word-break:break-word;box-shadow:var(--shadow)
}
.auth-gate{min-height:58vh;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}
.auth-gate-box{text-align:center;max-width:380px}
.auth-gate-icon{font-size:2.8rem;margin-bottom:1rem;display:block;opacity:.25}
.auth-gate-title{font-family:'Fraunces','Playfair Display',serif;font-size:1.5rem;font-weight:900;margin-bottom:.6rem}
.auth-gate-sub{font-size:.82rem;color:var(--text2);line-height:1.7;margin-bottom:1.5rem;font-weight:500}
.pending-notice-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(168,197,218,.1);border:1px solid rgba(168,197,218,.25);
  color:var(--accent);font-size:.7rem;font-weight:600;
  padding:.3rem .75rem;border-radius:20px;margin-top:.85rem
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:680px){
  body{padding-bottom:70px;font-size:15px} /* overridden by bottom-nav CSS */
  nav{height:54px;padding:0 1rem}
  .nav-logo{font-size:1.15rem}
  .nav-links{gap:.04rem}
  .nb{font-size:.68rem;padding:.28rem .55rem}
  .hero{grid-template-columns:1fr;padding:2.2rem 1.1rem 1.5rem;gap:0}
  .hero-vis{display:none}
  .hero h1{font-size:1.85rem}
  .hero-sub{font-size:.84rem}
  .section{padding:1.4rem 1.1rem}
  .pg{grid-template-columns:1fr 1fr;gap:.65rem}
  .ag{grid-template-columns:1fr 1fr;gap:.65rem}
  .pv,.evview,.sup-wrap,.rules-wrap,.prwrap{padding:1.4rem 1.1rem}
  .comments-section{padding:0 1.1rem 2.2rem}
  .prhdr{flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
  .prname{justify-content:center}
  .prstats{justify-content:center}
  .aftitle{font-size:1.65rem}
  .afhdr{padding:1.8rem 1.1rem 1.3rem}
  .affilters{padding:.8rem 1.1rem .2rem;gap:.3rem}
  .evwrap{padding:.9rem 1.1rem 2rem}
  .evc{grid-template-columns:54px 1fr;gap:.8rem;padding:.9rem 1rem}
  .evact{display:none}
  .evmg{grid-template-columns:1fr}
  .msbar{padding:.75rem 1.1rem .2rem;gap:.45rem}
  .msinp{font-size:.8rem}
  .frow{grid-template-columns:1fr}
  .awrap{padding:2rem 1.1rem}
  .abox{padding:1.5rem}
  .adwrap{padding:1.1rem}
  .adgrid{grid-template-columns:1fr}
  .adsb{position:static;margin-bottom:1.1rem}
  .adhdr h1{font-size:1.3rem}
  .sg{grid-template-columns:repeat(3,1fr)}
  .dt{font-size:.7rem}
  .dt th{font-size:.55rem;padding:.4rem .5rem}
  .dt td{padding:.45rem .5rem}
  .tr2{flex-direction:column;gap:.28rem}
  .tr2 label{width:auto}
  #player{height:60px;gap:.7rem;padding:0 .95rem}
  .pl-cov{width:36px;height:36px}
  .pl-info,.pl-vol{display:none}
  .pl-t{font-size:.58rem;width:30px}
  .mbox{padding:1.3rem;margin:0 .5rem}
  .btn{padding:.58rem 1.3rem;font-size:.7rem}
  .btn-sm{padding:.28rem .75rem;font-size:.62rem}
  footer{padding:1.2rem;font-size:.6rem}
  #toast{right:.85rem;bottom:68px;font-size:.68rem}
  .tabb{font-size:.64rem;padding:.55rem .78rem}
}
@media(max-width:400px){
  nav{padding:0 .75rem;height:50px}
  .nav-logo{font-size:1rem}
  .nb{font-size:.62rem;padding:.22rem .42rem}
  .pg{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
  .section{padding:1.1rem .9rem}
  .pv,.evview,.sup-wrap,.rules-wrap,.prwrap,.comments-section{padding-left:.9rem;padding-right:.9rem}
  .sg{grid-template-columns:repeat(2,1fr)}
  .adwrap{padding:.9rem}
}

/* ═══════════════════════════════════════════════════════
   MOBILE BOTTOM NAV (Telegram-style)
═══════════════════════════════════════════════════════ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  height:56px;
  padding:0 .25rem;
  padding-bottom:env(safe-area-inset-bottom,0px);
  align-items:stretch;justify-content:space-around;
}
.bn-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;flex:1;cursor:pointer;background:none;border:none;
  color:var(--muted);padding:.3rem .15rem;border-radius:var(--radius-sm);
  transition:color .18s;position:relative;min-width:0;
  font-family:'Nunito',sans-serif;
}
.bn-item:hover,.bn-item.active{color:var(--accent)}
.bn-item svg{transition:transform .18s;flex-shrink:0}
.bn-item.active svg{transform:scale(1.1)}
.bn-label{font-size:.55rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:56px}
.bn-badge{
  position:absolute;top:5px;right:calc(50% - 15px);
  min-width:14px;height:14px;background:var(--accent2);color:#fff;
  font-size:8px;font-weight:700;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;pointer-events:none;font-family:'Nunito',sans-serif;
}

/* ── MORE DRAWER ─────────────────────────────────────── */
.more-drawer{
  display:none;position:fixed;inset:0;z-index:350;
  background:rgba(0,0,0,.45);
  animation:fadeIn .2s ease;
}
.more-drawer.open{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.more-drawer-inner{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--surface);
  border-radius:16px 16px 0 0;
  border-top:1px solid var(--border);
  padding:0 .75rem calc(env(safe-area-inset-bottom,0px) + 56px);
  animation:slideUp .25s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.more-drawer-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--border2);margin:.75rem auto .5rem;
}
.more-item{
  display:flex;align-items:center;gap:.85rem;
  width:100%;background:none;border:none;
  color:var(--text);font-family:'Nunito',sans-serif;
  font-size:.88rem;font-weight:600;
  padding:.85rem .5rem;text-align:left;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:color .15s;
}
.more-item:last-child{border-bottom:none}
.more-item:hover,.more-item:active{color:var(--accent)}
.more-item svg{color:var(--muted);flex-shrink:0;transition:color .15s}
.more-item:hover svg,.more-item:active svg{color:var(--accent)}
.more-item-danger{color:var(--accent2) !important}
.more-item-danger svg{color:var(--accent2) !important}
.more-item-danger:hover,.more-item-danger:active{color:var(--accent2) !important;opacity:.8}
.more-badge{
  margin-left:auto;min-width:18px;height:18px;
  background:var(--accent2);color:#fff;
  font-size:9px;font-weight:700;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;font-family:'Nunito',sans-serif;
}

/* ── MUSIC CARD MOBILE FIX ─────────────────────────── */
/* On mobile, make card layout flow-based, no overlap */
@media(max-width:680px){
  /* Show bottom nav, hide top nav-links */
  .bottom-nav{display:flex}
  nav{height:52px;padding:0 1rem}
  .nav-links{display:none !important}
  /* Adjust body padding for bottom nav + player */
  body{padding-bottom:112px}

  /* Music grid — single column on very small, 2-col otherwise */
  .ag{grid-template-columns:1fr 1fr;gap:.6rem}
  
  /* Music card — compact layout, no absolute playbtn overlap */
  .ac{padding:.85rem .85rem .75rem}
  .ac-cover,.ac-nocover{border-radius:var(--radius-sm);margin-bottom:.65rem}
  .ac-title{font-size:.82rem}
  .ac-artist{font-size:.66rem}
  .ac-genre{font-size:.55rem;margin-bottom:.28rem}
  .ac-author{font-size:.62rem}
  .ac-meta{margin-top:.35rem}
  
  /* Move playbtn to flow — show as part of meta row */
  .playbtn{
    position:static;
    width:28px;height:28px;border-radius:50%;
    flex-shrink:0;
  }
  /* Meta row: plays | dur | play button */
  .ac-meta{display:flex;align-items:center;gap:.4rem}
  .plays{flex:1}
  
  /* Like row compact */
  .like-row{gap:.3rem;margin-top:.35rem}
  .like-btn{padding:.2rem .55rem;font-size:.65rem}
  
  /* Player height when bottom nav present */
  #player{bottom:56px;height:52px;padding:0 .85rem;gap:.5rem}
  .pl-info,.pl-vol{display:none}
  
  /* Toast above player+bottom-nav */
  #toast{bottom:116px}
  
  /* Notif panel top offset */
  .notif-panel{top:58px}
}

@media(max-width:400px){
  .ag{grid-template-columns:1fr 1fr;gap:.45rem}
  .ac{padding:.75rem}
  .bn-label{display:none}
  .bottom-nav{padding:0 .25rem}
  body{padding-bottom:120px}
}

/* ── NOTIFICATIONS PAGE ─────────────────────────────── */
.notif-page-item{
  display:flex;gap:.85rem;padding:1rem 0;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:opacity .15s;align-items:flex-start
}
.notif-page-item:last-child{border-bottom:none}
.notif-page-item:hover{opacity:.75}
.notif-page-item .notif-icon{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:var(--surface2)
}
.notif-page-item .notif-title{font-size:.88rem;font-weight:700;margin-bottom:.22rem}
.notif-page-item .notif-text{font-size:.78rem;color:var(--text2);line-height:1.55}
.notif-page-item .notif-time{font-size:.66rem;color:var(--muted);margin-top:.25rem;font-weight:500}