/* ══════════════════════════════════════════
   Volume Theme — assets/volume.css
   v1.0.0 | Shapeshift Entertainment
══════════════════════════════════════════ */

/* ── Hard-reset any WP theme interference ── */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #080c0d !important;
    color: #d8ecea !important;
}
#wpadminbar { position: fixed !important; z-index: 99999 !important; }
body.admin-bar .vnav { top: 32px !important; }
body.admin-bar { padding-top: 0 !important; margin-top: 0 !important; }

/* Kill theme wrappers */
.site, .site-content, .content-area, .entry-content,
#page, #content, #primary, #main, main[role],
.wrapper, .container, .inner, .page-wrapper,
header.site-header, footer.site-footer,
.wp-site-blocks, .has-global-padding {
    all: unset !important;
    display: block !important;
}

/* Feed skeletons */
.feed-loading { display: flex; flex-direction: column; gap: 13px; }
.feed-skeleton {
    height: 140px; border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border2);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Form errors */
.form-error {
    font-size: 12px; color: var(--red);
    font-family: var(--mono); margin: 6px 0 10px;
    min-height: 16px;
}


*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#080c0d;--bg2:#0d1314;--bg3:#111a1b;
  --surface:#162022;--surface2:#1c292b;--surface3:#223033;
  --border:rgba(100,180,170,0.08);--border2:rgba(100,180,170,0.15);--border3:rgba(100,180,170,0.25);
  --accent:#4db8b0;--accent2:#2e8b84;--accent3:#6ecfc7;
  --accentdim:rgba(77,184,176,0.12);
  --red:#e05c6e;--purple:#7c5cbf;--warm:#c4856a;
  --text:#d8ecea;--text2:#7aada8;--text3:#3d6460;
  --mono:'DM Mono',monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;min-height:100vh;overflow-x:hidden}

/* ─── SCREENS ─── */
.screen{display:none;min-height:100vh;flex-direction:column}
.screen.show{display:flex}
#s-app.show{display:block}
#s-messages.show,#s-reels.show{display:flex;flex-direction:column}

/* ─── NAV ─── */
.vnav{height:54px;background:rgba(8,12,13,0.96);backdrop-filter:blur(24px);border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:200}
.vlogo{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:5px;color:var(--accent);cursor:pointer;text-decoration:none;background:none;border:none}
.vsearch{flex:1;max-width:340px;margin:0 28px;background:var(--surface2);border:1px solid var(--border2);border-radius:24px;display:flex;align-items:center;gap:8px;padding:0 14px;height:34px}
.vsearch input{background:none;border:none;outline:none;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:13px;width:100%}
.vsearch input::placeholder{color:var(--text3)}
.vnav-r{display:flex;align-items:center;gap:14px}
.vnic{width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:.2s;color:var(--text2);flex-shrink:0}
.vnic:hover{border-color:var(--accent);color:var(--accent)}
.vnic.ndot{position:relative}
.vnic.ndot::after{content:'';position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--red);border-radius:50%;border:1.5px solid var(--bg)}
.vavatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7c5cbf,#4db8b0);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;border:2px solid var(--accent);flex-shrink:0}

/* ─── APP LAYOUT ─── */
.vlayout{display:grid;grid-template-columns:210px 1fr 284px;max-width:1260px;margin:0 auto;min-height:calc(100vh - 54px)}
.vlayout.wide{grid-template-columns:210px 1fr}

/* ─── SIDEBAR LEFT ─── */
.vsl{border-right:1px solid var(--border);padding:20px 14px;position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto}
.vsl::-webkit-scrollbar{width:0}
.miniprof{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border-radius:12px;margin-bottom:18px;border:1px solid var(--border2);cursor:pointer}
.miniav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7c5cbf,#4db8b0);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;border:1.5px solid var(--accent)}
.minn{font-size:13px;font-weight:600;color:var(--text)}
.minh{font-size:10px;color:var(--text3);font-family:var(--mono)}
.snlabel{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-bottom:7px;padding:0 8px;font-family:var(--mono)}
.snitem{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);transition:.15s;margin-bottom:2px;text-decoration:none;background:none;border:none;width:100%;text-align:left;font-family:'Space Grotesk',sans-serif}
.snitem:hover{background:var(--surface);color:var(--text)}
.snitem.act{background:var(--surface2);color:var(--accent)}
.snitem svg{flex-shrink:0}
.snbadge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;font-family:var(--mono)}
.snsec{margin-bottom:24px}
.groupdot{width:18px;height:18px;border-radius:5px;flex-shrink:0}

/* ─── MAIN FEED ─── */
.vmain{padding:22px 26px;border-right:1px solid var(--border)}
.ftabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px}
.ftab{padding:9px 18px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;background:none;border-left:none;border-right:none;border-top:none;font-family:'Space Grotesk',sans-serif}
.ftab.act{color:var(--accent);border-bottom:2px solid var(--accent)}
.ftab:hover:not(.act){color:var(--text2)}

/* ─── CREATE POST ─── */
.cpost{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:14px;margin-bottom:18px}
.cpost-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.cpost-inp{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:22px;padding:9px 16px;color:var(--text2);font-family:'Space Grotesk',sans-serif;font-size:13px;cursor:pointer;transition:.2s}
.cpost-inp:hover{border-color:var(--border2);color:var(--text)}
.cpost-acts{display:flex;gap:7px;padding-top:11px;border-top:1px solid var(--border);flex-wrap:wrap}
.pabtn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:7px;background:none;border:1px solid var(--border2);color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;transition:.15s;font-family:'Space Grotesk',sans-serif}
.pabtn:hover{background:var(--bg3);color:var(--text)}
.pabtn.post{margin-left:auto;background:var(--accent);border-color:var(--accent);color:#050f10;font-weight:700}

/* ─── POST CARD ─── */
.pcard{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:16px;margin-bottom:13px;transition:.2s;cursor:pointer}
.pcard:hover{border-color:var(--border3)}
.ph{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.pav{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.pmeta{flex:1}
.pname{font-size:14px;font-weight:600;color:var(--text)}
.pht{font-size:11px;color:var(--text3);font-family:var(--mono);display:flex;gap:7px}
.pcont{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:13px}
.pcont strong{color:var(--text);font-weight:600}
.pimg{border-radius:9px;overflow:hidden;margin-bottom:13px;height:180px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.pimg-in{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px}
.pmusic{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:11px 14px;margin-bottom:13px;display:flex;align-items:center;gap:13px}
.pmart{width:44px;height:44px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.pmin{flex:1}
.pmt{font-size:13px;font-weight:600;color:var(--text)}
.pma{font-size:11px;color:var(--text3);font-family:var(--mono)}
.pmplay{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;flex-shrink:0;transition:.2s;color:#050f10;font-weight:900;border:none}
.pmplay:hover{transform:scale(1.1)}
.pacts{display:flex;gap:18px;padding-top:11px;border-top:1px solid var(--border)}
.pa{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);cursor:pointer;transition:.15s;font-weight:500;background:none;border:none;font-family:'Space Grotesk',sans-serif}
.pa:hover{color:var(--accent)}
.pa.liked{color:var(--red)}
.cmts{margin-top:11px}
.cmtrow{display:flex;gap:9px;padding:7px 0;border-top:1px solid var(--border)}
.cmtav{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700}
.cmtt{font-size:12px;color:var(--text2);line-height:1.5}
.cmtt strong{color:var(--text);font-weight:600}

/* ─── SIDEBAR RIGHT ─── */
.vsr{padding:20px 18px;position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto}
.vsr::-webkit-scrollbar{width:0}
.vsec{margin-bottom:22px}
.vstitle{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-bottom:11px;font-family:var(--mono)}
.titem{padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer}
.titem:last-child{border:none}
.tmeta{font-size:10px;color:var(--text3);font-family:var(--mono);margin-bottom:2px}
.ttag{font-size:13px;font-weight:600;color:var(--text)}
.tcnt{font-size:11px;color:var(--text3);margin-top:1px}
.titem:hover .ttag{color:var(--accent)}
.sugitem{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer}
.sugav{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.sugi{flex:1;min-width:0}
.sugn{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugh{font-size:10px;color:var(--text3);font-family:var(--mono)}
.fbtn{padding:5px 13px;border-radius:18px;background:transparent;border:1px solid var(--border2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:.2s;font-family:'Space Grotesk',sans-serif;white-space:nowrap}
.fbtn:hover{background:var(--accent);border-color:var(--accent);color:#050f10}

/* ─── MESSAGES ─── */
.msgwrap{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 54px)}
.msglist{border-right:1px solid var(--border);overflow-y:auto;background:var(--bg2)}
.msglist::-webkit-scrollbar{width:0}
.msghdr{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.msghdr-t{font-size:15px;font-weight:700;color:var(--text)}
.msginp{margin:10px 14px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:22px;display:flex;align-items:center;gap:7px;padding:7px 13px}
.msginp input{background:none;border:none;outline:none;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:12px;width:100%}
.msginp input::placeholder{color:var(--text3)}
.msgitem{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;transition:.15s;position:relative}
.msgitem:hover{background:var(--surface)}
.msgitem.act{background:var(--surface2)}
.msgitem.act::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.msgav{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;position:relative}
.mav-on::after{content:'';position:absolute;bottom:1px;right:1px;width:9px;height:9px;background:var(--accent);border-radius:50%;border:2px solid var(--bg2)}
.msgi{flex:1;min-width:0}
.msgn{font-size:13px;font-weight:600;color:var(--text)}
.msgprev{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.msgtime{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
.msgunread{width:18px;height:18px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#050f10;flex-shrink:0;font-family:var(--mono)}
.msgpane{display:flex;flex-direction:column;background:var(--bg3)}
.msgphead{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:13px;background:var(--bg2)}
.msgphav{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;position:relative;flex-shrink:0}
.msgphav::after{content:'';position:absolute;bottom:1px;right:1px;width:9px;height:9px;background:var(--accent);border-radius:50%;border:2px solid var(--bg2)}
.msgphinfo{flex:1}
.msgphn{font-size:14px;font-weight:700;color:var(--text)}
.msgphs{font-size:11px;color:var(--accent);font-family:var(--mono)}
.msgbody{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.msgbody::-webkit-scrollbar{width:0}
.msgday{text-align:center;font-size:10px;color:var(--text3);font-family:var(--mono);padding:4px 12px;background:var(--surface);border-radius:20px;align-self:center}
.mbub{max-width:68%;display:flex;flex-direction:column;gap:3px}
.mbub.me{align-self:flex-end;align-items:flex-end}
.mbub.them{align-self:flex-start;align-items:flex-start}
.mbtext{padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.55}
.mbub.me .mbtext{background:var(--accent2);color:var(--text);border-radius:16px 16px 4px 16px}
.mbub.them .mbtext{background:var(--surface2);color:var(--text);border-radius:16px 16px 16px 4px}
.mbtime{font-size:10px;color:var(--text3);font-family:var(--mono)}
.msgfoot{padding:12px 18px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--bg2)}
.msgtinp{flex:1;background:var(--surface);border:1px solid var(--border2);border-radius:22px;padding:9px 16px;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:13px;outline:none}
.msgtinp::placeholder{color:var(--text3)}
.msgsend{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#050f10;font-size:16px;transition:.2s;font-weight:700;flex-shrink:0}
.msgsend:hover{transform:scale(1.06)}

/* ─── EXPLORE ─── */
.exwrap{padding:22px 26px}
.excats{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.excat{padding:7px 16px;border-radius:20px;border:1px solid var(--border2);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:.15s;font-family:'Space Grotesk',sans-serif;background:none}
.excat:hover{border-color:var(--accent);color:var(--accent)}
.excat.act{background:var(--accent);border-color:var(--accent);color:#050f10}
.exgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.excard{border-radius:12px;overflow:hidden;cursor:pointer;border:1px solid var(--border);transition:.2s;background:var(--surface)}
.excard:hover{border-color:var(--border3);transform:translateY(-2px)}
.exthumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative}
.extag{position:absolute;top:9px;left:9px;background:rgba(8,12,13,.8);border:1px solid var(--border2);padding:3px 9px;border-radius:12px;font-size:10px;color:var(--accent);font-family:var(--mono)}
.excard-b{padding:11px 13px}
.excard-t{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.excard-m{font-size:11px;color:var(--text3);font-family:var(--mono)}
.excard-av{display:flex;align-items:center;gap:6px;margin-top:8px}
.exsm-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700}
.exsm-n{font-size:11px;color:var(--text2);font-weight:500}
.exfeature{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;border-radius:12px;overflow:hidden;cursor:pointer;border:1px solid var(--border);transition:.2s;background:var(--surface)}
.exfeature:hover{border-color:var(--border3)}
.exfeat-img{height:220px;display:flex;align-items:center;justify-content:center;font-size:64px;position:relative}
.exfeat-info{padding:20px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.exfeat-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-family:var(--mono)}
.exfeat-title{font-size:18px;font-weight:700;color:var(--text);line-height:1.3}
.exfeat-desc{font-size:12px;color:var(--text2);line-height:1.6}

/* ─── REELS ─── */
.reelswrap{display:grid;grid-template-columns:1fr 320px;height:calc(100vh - 54px);overflow:hidden}
.reelsfeed{overflow-y:scroll;scroll-snap-type:y mandatory;background:#000;height:100%}
.reelsfeed::-webkit-scrollbar{width:0}
.reel{height:calc(100vh - 54px);scroll-snap-align:start;display:flex;align-items:stretch;position:relative}
.reel-bg{flex:1;display:flex;align-items:center;justify-content:center;font-size:80px;position:relative;overflow:hidden}
.reel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 50%)}
.reel-info{position:absolute;bottom:20px;left:16px;right:70px}
.reel-user{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.reel-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid #fff}
.reel-name{font-size:13px;font-weight:700;color:#fff}
.reel-follow{font-size:10px;font-weight:700;color:var(--accent);margin-left:6px;cursor:pointer;font-family:var(--mono)}
.reel-desc{font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;margin-bottom:8px}
.reel-tags{display:flex;gap:6px;flex-wrap:wrap}
.reel-tag{font-size:11px;font-weight:600;color:var(--accent3)}
.reel-actions{position:absolute;right:12px;bottom:20px;display:flex;flex-direction:column;gap:20px;align-items:center}
.ract{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.ract-icon{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid rgba(255,255,255,.2);transition:.2s}
.ract:hover .ract-icon{background:rgba(77,184,176,.3);border-color:var(--accent)}
.ract-n{font-size:10px;color:rgba(255,255,255,.7);font-family:var(--mono)}
.reels-sidebar{border-left:1px solid var(--border);padding:18px 16px;overflow-y:auto;background:var(--bg2)}
.reels-sidebar::-webkit-scrollbar{width:0}
.rs-title{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);font-family:var(--mono);margin-bottom:14px}
.rsreel{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer;transition:.15s;margin-bottom:6px;border:1px solid transparent}
.rsreel:hover{background:var(--surface);border-color:var(--border2)}
.rsreel.act{background:var(--surface2);border-color:var(--border3)}
.rsthumb{width:56px;height:76px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1px solid var(--border)}
.rsinfo{flex:1;min-width:0}
.rsname{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px}
.rsdesc{font-size:11px;color:var(--text3);line-height:1.4;margin-bottom:5px}
.rsmeta{font-size:10px;color:var(--text3);font-family:var(--mono)}
.reels-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.reel-mini-thumb{aspect-ratio:.56;border-radius:9px;overflow:hidden;cursor:pointer;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:28px}

/* ─── GROUPS ─── */
.grpwrap{padding:22px 26px}
.grphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.grpht{font-size:18px;font-weight:700;color:var(--text)}
.grpcreat{padding:8px 18px;border-radius:22px;background:var(--accent);color:#050f10;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:'Space Grotesk',sans-serif}
.grptabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px}
.grptab{padding:8px 16px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;background:none;border-left:none;border-right:none;border-top:none;font-family:'Space Grotesk',sans-serif}
.grptab.act{color:var(--accent);border-bottom:2px solid var(--accent)}
.grpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.grpcard{background:var(--surface);border:1px solid var(--border2);border-radius:13px;overflow:hidden;cursor:pointer;transition:.2s}
.grpcard:hover{border-color:var(--border3);transform:translateY(-2px)}
.grpbanner{height:80px;display:flex;align-items:center;justify-content:center;font-size:30px;position:relative}
.grpbanneract{position:absolute;top:8px;right:8px;background:rgba(8,12,13,.75);border:1px solid rgba(255,255,255,.12);padding:3px 9px;border-radius:10px;font-size:9px;color:var(--accent);font-family:var(--mono)}
.grpbody{padding:13px}
.grpname{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.grpdesc{font-size:11px;color:var(--text2);line-height:1.5;margin-bottom:9px}
.grpfooter{display:flex;align-items:center;justify-content:space-between}
.grpmems{display:flex}
.grpmem{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;border:2px solid var(--surface);margin-left:-6px}
.grpmem:first-child{margin-left:0}
.grpmc{font-size:10px;color:var(--text3);font-family:var(--mono);margin-left:8px}
.grpjoin{padding:4px 14px;border-radius:14px;border:1px solid var(--border2);background:transparent;color:var(--text);font-size:11px;font-weight:600;cursor:pointer;transition:.2s;font-family:'Space Grotesk',sans-serif}
.grpjoin:hover{background:var(--accent);border-color:var(--accent);color:#050f10}
.grpjoin.joined{background:var(--accentdim);border-color:var(--accent);color:var(--accent)}

/* ─── GROUP DETAIL ─── */
.gdbanner{height:160px;background:#0d1c1e;position:relative;display:flex;align-items:center;justify-content:center;font-size:72px;border-bottom:1px solid var(--border)}
.gdpat{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(77,184,176,.03) 20px,rgba(77,184,176,.03) 21px)}
.gdback{position:absolute;top:14px;left:14px;background:rgba(8,12,13,.75);border:1px solid var(--border2);padding:6px 13px;border-radius:8px;font-size:12px;color:var(--text);cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:500}
.gdinfo{padding:18px 26px 14px;border-bottom:1px solid var(--border);background:var(--bg2);display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px}
.gdname{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px}
.gdmeta{font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:10px}
.gddesc{font-size:13px;color:var(--text2);max-width:500px;line-height:1.6}
.gdstats{display:flex;gap:20px;margin-top:12px}
.gds{text-align:center}
.gdsn{font-size:16px;font-weight:700;color:var(--text)}
.gdsl{font-size:10px;color:var(--text3);font-family:var(--mono)}
.gdactions{display:flex;gap:9px}
.gdbtn{padding:8px 18px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Space Grotesk',sans-serif}
.gdbtn.pri{background:var(--accent);color:#050f10;border:none}
.gdbtn.sec{background:transparent;border:1px solid var(--border2);color:var(--text)}
.gdlayout{display:grid;grid-template-columns:1fr 280px;gap:18px;padding:18px 26px;align-items:start}
.gdmemlist{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border2);border-radius:13px;padding:14px}

/* ─── PROFILE ─── */
.pcov{height:200px;position:relative;overflow:hidden}
.covbg{width:100%;height:100%;background:#0d1c1e;position:relative}
.covpat{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(77,184,176,.04) 38px,rgba(77,184,176,.04) 39px),repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(77,184,176,.04) 38px,rgba(77,184,176,.04) 39px)}
.covglow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(ellipse,rgba(77,184,176,.18) 0%,transparent 70%);top:-60px;right:100px}
.covacts{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.covbtn{padding:6px 13px;border-radius:7px;background:rgba(8,12,13,.75);border:1px solid rgba(255,255,255,.15);color:var(--text);font-size:11px;font-weight:600;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:.2s}
.phead{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 26px 18px}
.pavwrap{display:flex;align-items:flex-end;gap:18px;position:relative;margin-top:-50px;margin-bottom:14px}
.profav{width:100px;height:100px;border-radius:50%;flex-shrink:0;border:3px solid var(--bg2);background:linear-gradient(135deg,#7c5cbf,#4db8b0);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;z-index:2}
.phmeta{flex:1;padding-bottom:3px}
.pdn{font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.vbadge{width:16px;height:16px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:#050f10;font-weight:900}
.phandle{font-size:12px;color:var(--text3);font-family:var(--mono);margin-top:2px}
.pbio{font-size:13px;color:var(--text2);line-height:1.6;margin:9px 0;max-width:480px}
.pmetarow{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pmi{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text3);font-family:var(--mono)}
.pstats{display:flex;gap:20px;margin-top:10px}
.pst{cursor:pointer}
.stn{font-size:15px;font-weight:700;color:var(--text)}
.stl{font-size:11px;color:var(--text3);font-family:var(--mono)}
.parow{display:flex;gap:9px;margin-top:14px}
.bfollow{padding:8px 24px;border-radius:22px;background:var(--accent);color:#050f10;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:'Space Grotesk',sans-serif;transition:.2s}
.bfollow:hover{opacity:.9}
.bmsg{padding:8px 18px;border-radius:22px;background:transparent;border:1px solid var(--border2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:.2s}
.bmsg:hover{border-color:var(--accent);color:var(--accent)}
.ptabs{display:flex;border-bottom:1px solid var(--border);padding:0 26px;background:var(--bg2)}
.ptab{padding:11px 18px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;background:none;border-left:none;border-right:none;border-top:none;font-family:'Space Grotesk',sans-serif}
.ptab.act{color:var(--accent);border-bottom:2px solid var(--accent)}
.pcontent{display:grid;grid-template-columns:300px 1fr;gap:18px;padding:18px 26px;align-items:start}
.psidecol{display:flex;flex-direction:column;gap:14px}
.pmaincol{display:flex;flex-direction:column;gap:13px}

/* ON ROTATION */
.orc{background:var(--surface);border:1px solid var(--border2);border-radius:13px;overflow:hidden}
.orch{padding:11px 14px 9px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border)}
.ordot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.orlbl{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-family:var(--mono);font-weight:500}
.orb{padding:13px 14px}
.orart{width:100%;aspect-ratio:1;border-radius:9px;margin-bottom:12px;background:#0d1c1e;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:54px;position:relative;overflow:hidden;border:1px solid var(--border)}
.orglow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(77,184,176,.08) 0%,transparent 70%)}
.orsong{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.orartist{font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:12px}
.orctrls{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.rbtn{background:none;border:none;color:var(--text3);font-size:15px;cursor:pointer;transition:.15s;padding:3px}
.rbtn:hover{color:var(--text)}
.rplay{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:#050f10;font-weight:900;transition:.2s;border:none}
.rplay:hover{transform:scale(1.08)}
.rprog{width:100%;height:3px;background:var(--border2);border-radius:3px;overflow:hidden;cursor:pointer}
.rbar{height:100%;width:37%;background:var(--accent);border-radius:3px}

/* TOP FRIENDS */
.tfc{background:var(--surface);border:1px solid var(--border2);border-radius:13px;padding:14px}
.secrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sctitle{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);font-family:var(--mono)}
.sclink{font-size:11px;color:var(--accent);cursor:pointer;font-weight:600;background:none;border:none;font-family:'Space Grotesk',sans-serif}
.tfgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.tff{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;text-align:center}
.tfav{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid var(--border2);transition:.2s;position:relative}
.tff:hover .tfav{border-color:var(--accent);transform:scale(1.05)}
.tfon::after{content:'';position:absolute;bottom:1px;right:1px;width:9px;height:9px;background:var(--accent);border-radius:50%;border:2px solid var(--surface)}
.tfname{font-size:10px;color:var(--text2);font-weight:500;line-height:1.2}

/* ABOUT */
.acard{background:var(--surface);border:1px solid var(--border2);border-radius:13px;padding:14px}
.arow{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--text2)}
.arow:last-child{border:none}
.aico{color:var(--text3);font-size:13px;margin-top:1px;flex-shrink:0}
.albl{color:var(--text3);font-size:10px;min-width:58px;font-family:var(--mono)}
.aval{color:var(--text2);font-size:12px}

/* MEDIA GRID */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:9px;overflow:hidden}
.mthumb{aspect-ratio:1;cursor:pointer;overflow:hidden}
.mthin{width:100%;height:100%;transition:transform .2s;display:flex;align-items:center;justify-content:center;font-size:24px}
.mthumb:hover .mthin{transform:scale(1.06)}

/* ═══════════════════════════════════════
   AUTH SCREENS
   ═══════════════════════════════════════ */

/* LANDING */
.land-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(77,184,176,.04) 48px,rgba(77,184,176,.04) 49px),repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(77,184,176,.04) 48px,rgba(77,184,176,.04) 49px)}
.land-glow1{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(77,184,176,.12) 0%,transparent 70%);top:-120px;right:-80px;pointer-events:none}
.land-glow2{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(ellipse,rgba(124,92,191,.08) 0%,transparent 70%);bottom:-80px;left:-60px;pointer-events:none}
.land-nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 48px}
.land-logo{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:6px;color:var(--accent);background:none;border:none;cursor:pointer}
.land-nav-r{display:flex;align-items:center;gap:14px}
.btn-ghost{padding:9px 22px;border-radius:22px;background:transparent;border:1px solid var(--border3);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:.2s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-solid-sm{padding:9px 22px;border-radius:22px;background:var(--accent);border:1px solid var(--accent);color:#050f10;font-size:13px;font-weight:700;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:.2s}
.btn-solid-sm:hover{opacity:.88}
.land-hero{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 32px 20px}
.land-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);font-family:var(--mono);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.land-eyebrow::before,.land-eyebrow::after{content:'';flex:1;height:1px;background:var(--border3);max-width:60px}
.land-h1{font-family:'Bebas Neue',sans-serif;font-size:88px;letter-spacing:6px;line-height:.95;color:var(--text);margin-bottom:8px}
.land-h1 span{color:var(--accent)}
.land-sub{font-size:17px;color:var(--text2);max-width:480px;line-height:1.7;margin:18px auto 36px}
.land-ctas{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.btn-lg{padding:14px 36px;border-radius:28px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:.2s}
.btn-lg-solid{background:var(--accent);color:#050f10;border:none}
.btn-lg-solid:hover{opacity:.88;transform:scale(1.02)}
.btn-lg-ghost{background:transparent;border:1px solid var(--border3);color:var(--text)}
.btn-lg-ghost:hover{border-color:var(--accent);color:var(--accent)}
.land-proof{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:12px;color:var(--text3);font-family:var(--mono)}
.sp-avatars{display:flex}
.sp-av{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;margin-left:-8px}
.sp-av:first-child{margin-left:0}
.land-features{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 48px 48px;max-width:1100px;margin:0 auto;width:100%}
.feat-card{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:20px;transition:.2s}
.feat-card:hover{border-color:var(--border3)}
.feat-icon{width:40px;height:40px;border-radius:10px;background:var(--accentdim);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:13px;border:1px solid var(--border2)}
.feat-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.feat-desc{font-size:12px;color:var(--text3);line-height:1.6}

/* AUTH SHELL */
.auth-shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;width:100%}
.auth-left{background:var(--bg2);border-right:1px solid var(--border2);display:flex;flex-direction:column;padding:36px 48px;position:relative;overflow:hidden}
.auth-left-bg{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(77,184,176,.03) 40px,rgba(77,184,176,.03) 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(77,184,176,.03) 40px,rgba(77,184,176,.03) 41px)}
.auth-left-glow{position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(ellipse,rgba(77,184,176,.1) 0%,transparent 70%);bottom:-60px;right:-80px}
.auth-left-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.auth-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:5px;color:var(--accent);margin-bottom:48px;cursor:pointer;background:none;border:none}
.auth-tagline{font-size:36px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:14px}
.auth-tagline span{color:var(--accent)}
.auth-tagsub{font-size:14px;color:var(--text2);line-height:1.7;max-width:340px;margin-bottom:40px}
.auth-testimonial{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:18px 20px}
.auth-test-quote{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:14px;font-style:italic}
.auth-test-user{display:flex;align-items:center;gap:10px}
.auth-test-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.auth-test-name{font-size:13px;font-weight:600;color:var(--text)}
.auth-test-handle{font-size:10px;color:var(--text3);font-family:var(--mono)}
.auth-right{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 48px;background:var(--bg)}
.auth-form-wrap{width:100%;max-width:400px}
.auth-form-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px}
.auth-form-sub{font-size:13px;color:var(--text3);margin-bottom:28px}
.auth-form-sub a{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none}

/* STEP INDICATOR */
.steps-row{display:flex;align-items:center;gap:0;margin-bottom:28px}
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--mono);transition:.3s;border:1.5px solid var(--border3);color:var(--text3);background:var(--surface)}
.step-dot.done{background:var(--accent);border-color:var(--accent);color:#050f10}
.step-dot.active{border-color:var(--accent);color:var(--accent);background:var(--accentdim)}
.step-line{flex:1;height:1.5px;background:var(--border2);transition:.3s}
.step-line.done{background:var(--accent)}

/* FORM */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:.5px;font-family:var(--mono)}
.field input,.field select{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:11px 14px;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:14px;outline:none;transition:.2s}
.field input::placeholder{color:var(--text3)}
.field input:focus{border-color:var(--accent)}
.field input.err{border-color:var(--red)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-hint{font-size:11px;color:var(--text3);margin-top:5px;font-family:var(--mono)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:40px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--text3);font-size:16px;line-height:1;background:none;border:none;transition:.2s}
.pw-eye:hover{color:var(--accent)}
.pw-strength{margin-top:8px}
.pw-bars{display:flex;gap:4px;margin-bottom:4px}
.pw-bar{flex:1;height:3px;border-radius:3px;background:var(--border2);transition:.3s}
.pw-slabel{font-size:10px;font-family:var(--mono);color:var(--text3)}
.or-row{display:flex;align-items:center;gap:12px;margin:20px 0}
.or-line{flex:1;height:1px;background:var(--border2)}
.or-text{font-size:11px;color:var(--text3);font-family:var(--mono);white-space:nowrap}
.social-btns{display:flex;gap:10px;margin-bottom:20px}
.sbtn{flex:1;padding:10px;border-radius:10px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Space Grotesk',sans-serif;transition:.2s}
.sbtn:hover{border-color:var(--border3);color:var(--text)}
.av-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:6px}
.av-opt{width:100%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border:2px solid transparent;cursor:pointer;transition:.2s;font-family:'Space Grotesk',sans-serif}
.av-opt:hover{transform:scale(1.08)}
.av-opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentdim)}
.int-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.int-tag{padding:7px 14px;border-radius:20px;border:1px solid var(--border2);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;transition:.2s;font-family:'Space Grotesk',sans-serif;background:none}
.int-tag:hover{border-color:var(--border3);color:var(--text)}
.int-tag.sel{background:var(--accentdim);border-color:var(--accent);color:var(--accent)}
.btn-primary{width:100%;padding:13px;border-radius:11px;background:var(--accent);color:#050f10;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:'Space Grotesk',sans-serif;transition:.2s;margin-top:6px}
.btn-primary:hover{opacity:.88}
.btn-secondary{width:100%;padding:12px;border-radius:11px;background:transparent;border:1px solid var(--border2);color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:.2s;margin-top:8px}
.btn-secondary:hover{border-color:var(--border3);color:var(--text)}
.back-link{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);cursor:pointer;margin-bottom:20px;font-family:var(--mono);transition:.2s;background:none;border:none;font-family:var(--mono)}
.back-link:hover{color:var(--accent)}
.step-panel{display:none}
.step-panel.show{display:block}
.success-wrap{text-align:center;padding:20px 0}
.success-icon{width:72px;height:72px;border-radius:50%;background:var(--accentdim);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px}
.success-h{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.success-p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:24px}
.check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer}
.check-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border3);background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;transition:.2s;margin-top:1px;color:transparent}
.check-box.chk{background:var(--accent);border-color:var(--accent);color:#050f10}
.check-label{font-size:12px;color:var(--text2);line-height:1.6}
.check-label a{color:var(--accent);cursor:pointer}
.forgot-link{font-size:12px;color:var(--accent);cursor:pointer;font-weight:600;float:right;margin-top:-2px;background:none;border:none;font-family:'Space Grotesk',sans-serif}


/* ══════════════════════════════════════════
   RESPONSIVE / MOBILE STYLES v1.0.2
══════════════════════════════════════════ */

/* ─── TABLET  ≤ 900px ─── */
@media (max-width: 900px) {

  /* Auth: single column, hide left decorative panel */
  .auth-shell {
    grid-template-columns: 1fr !important;
  }
  .auth-left {
    display: none !important;
  }
  .auth-right {
    padding: 32px 24px !important;
    min-height: 100vh;
    justify-content: flex-start !important;
  }
  .auth-form-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Landing */
  .land-nav   { padding: 18px 20px !important; }
  .land-h1    { font-size: 64px !important; }
  .land-sub   { font-size: 15px !important; }
  .land-features {
    grid-template-columns: 1fr !important;
    padding: 0 20px 32px !important;
  }

  /* App: hide right sidebar */
  .vlayout {
    grid-template-columns: 200px 1fr !important;
  }
  .vlayout.wide {
    grid-template-columns: 200px 1fr !important;
  }
  .vsr { display: none !important; }

  /* Explore */
  .exgrid { grid-template-columns: 1fr 1fr !important; }
  .exfeature {
    grid-column: span 2 !important;
    grid-template-columns: 1fr !important;
  }

  /* Groups */
  .grpgrid { grid-template-columns: 1fr 1fr !important; }

  /* Profile */
  .pcontent { grid-template-columns: 1fr !important; }
  .gdlayout { grid-template-columns: 1fr !important; }

  /* Reels: hide sidebar */
  .reelswrap { grid-template-columns: 1fr !important; }
  .reels-sidebar { display: none !important; }

  /* Messages */
  .msgwrap { grid-template-columns: 240px 1fr !important; }
}

/* ─── MOBILE  ≤ 600px ─── */
@media (max-width: 600px) {

  /* Auth */
  .auth-right  { padding: 24px 18px !important; }
  .field-row   { grid-template-columns: 1fr !important; }
  .social-btns { flex-direction: column !important; gap: 8px !important; }
  .sbtn        { width: 100% !important; }
  .auth-form-title { font-size: 20px !important; }
  .av-grid { grid-template-columns: repeat(5,1fr) !important; gap: 6px !important; }
  .int-tag { padding: 6px 11px !important; font-size: 11px !important; }

  /* Landing: stack everything */
  .land-nav    { padding: 16px !important; }
  .land-nav-r  { gap: 8px !important; }
  .btn-ghost,
  .btn-solid-sm { padding: 8px 14px !important; font-size: 12px !important; }
  .land-h1     { font-size: 52px !important; letter-spacing: 3px !important; }
  .land-sub    { font-size: 14px !important; margin: 14px auto 24px !important; }
  .land-ctas   { flex-direction: column !important; gap: 10px !important; }
  .btn-lg      { width: 100% !important; padding: 13px 20px !important; font-size: 14px !important; }
  .land-proof  { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .land-eyebrow { font-size: 9px !important; }
  .land-features { padding: 0 16px 28px !important; gap: 10px !important; }
  .feat-card   { padding: 16px !important; }

  /* Nav bar */
  .vnav { padding: 0 14px !important; }
  .vsearch { display: none !important; }

  /* App layout: kill left sidebar, add bottom nav padding */
  .vlayout,
  .vlayout.wide {
    grid-template-columns: 1fr !important;
  }
  .vsl  { display: none !important; }
  .vmain {
    padding: 14px 14px 80px !important;
    border: none !important;
  }

  /* Show mobile bottom nav */
  #vol-bottom-nav { display: flex !important; }

  /* Feed cards */
  .pcard  { padding: 14px !important; margin-bottom: 10px !important; }
  .cpost  { padding: 12px !important; margin-bottom: 14px !important; }
  .cpost-acts { gap: 5px !important; flex-wrap: wrap !important; }
  .pabtn  { padding: 5px 9px !important; font-size: 11px !important; }
  .pimg   { height: 200px !important; }

  /* Explore */
  .exgrid { grid-template-columns: 1fr !important; }
  .exfeature {
    grid-column: span 1 !important;
    grid-template-columns: 1fr !important;
  }
  .exfeat-img { height: 140px !important; }
  .exwrap { padding: 14px !important; }
  .excats { gap: 6px !important; }
  .excat  { padding: 6px 12px !important; font-size: 11px !important; }

  /* Groups */
  .grpgrid { grid-template-columns: 1fr !important; }
  .grpwrap { padding: 14px !important; }

  /* Profile */
  .pcov         { height: 140px !important; }
  .profav       { width: 76px !important; height: 76px !important; font-size: 24px !important; }
  .pavwrap      { margin-top: -38px !important; gap: 12px !important; }
  .phead        { padding: 0 16px 16px !important; }
  .pdn          { font-size: 17px !important; }
  .pbio         { font-size: 12px !important; }
  .pstats       { gap: 14px !important; }
  .ptabs        { padding: 0 14px !important; overflow-x: auto !important; }
  .ptab         { padding: 10px 13px !important; font-size: 12px !important; white-space: nowrap !important; }
  .pcontent     { padding: 14px !important; gap: 12px !important; }
  .tfgrid       { grid-template-columns: repeat(4,1fr) !important; gap: 7px !important; }
  .tfav         { width: 40px !important; height: 40px !important; font-size: 12px !important; }

  /* On Rotation */
  .orart { font-size: 40px !important; }

  /* Messages: single-column tap-to-open */
  .msgwrap { grid-template-columns: 1fr !important; }
  .msgpane { display: none !important; }
  .msgwrap.thread-open .msglist { display: none !important; }
  .msgwrap.thread-open .msgpane { display: flex !important; }

  /* Reels */
  .reel-bg { font-size: 60px !important; }

  /* Group detail */
  .gdinfo   { flex-direction: column !important; }
  .gdlayout { padding: 14px !important; gap: 12px !important; }
  .gdbanner { height: 120px !important; font-size: 48px !important; }

  /* Tab bars: horizontal scroll */
  .ftabs,
  .grptabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ftabs::-webkit-scrollbar,
  .grptabs::-webkit-scrollbar { display: none !important; }
  .ftab,
  .grptab { white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* ─── BOTTOM NAV (hidden on desktop, shown via media query above) ─── */
#vol-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(8,12,13,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border2);
  z-index: 150;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}
.vol-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: .15s;
  color: var(--text3);
  background: none;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  flex: 1;
}
.vol-bnav-item.act { color: var(--accent); }
.vol-bnav-label {
  font-size: 9px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: .5px;
}

/* ─── iPhone safe area ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #vol-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
  }
  @media (max-width: 600px) {
    .vmain {
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ══════════════════════════════════════════
   EDIT PROFILE MODAL — v1.0.3
══════════════════════════════════════════ */

.vol-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: vol-fade-in 0.2s ease;
}
@keyframes vol-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vol-modal {
  background: var(--bg2);
  border: 1px solid var(--border3);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vol-slide-up 0.25s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
@keyframes vol-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.vol-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.vol-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.vol-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.vol-modal-close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.vol-modal-body {
  overflow-y: auto;
  padding: 20px 22px;
  flex: 1;
}
.vol-modal-body::-webkit-scrollbar { width: 0; }

.vol-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.vol-modal-cancel {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: .15s;
}
.vol-modal-cancel:hover {
  border-color: var(--border3);
  color: var(--text);
}
.vol-modal-save {
  flex: 2;
  padding: 11px;
  border-radius: 10px;
  background: var(--accent);
  border: none;
  color: #050f10;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: .15s;
}
.vol-modal-save:hover   { opacity: .88; }
.vol-modal-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.vol-modal-save.saving::after {
  content: ' …';
}

/* Avatar section */
.ep-avatar-section {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ep-avatar-preview {
  position: relative;
  flex-shrink: 0;
}
.ep-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  border: 3px solid var(--border3);
  transition: .2s;
  overflow: hidden;
}
.ep-avatar-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ep-avatar-upload-btn {
  position: absolute;
  bottom: -4px; right: -4px;
  background: var(--surface2);
  border: 1px solid var(--border3);
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Space Grotesk', sans-serif;
  transition: .15s;
  white-space: nowrap;
}
.ep-avatar-upload-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Color swatches */
.ep-color-section { flex: 1; }
.ep-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.ep-color-swatch {
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: .15s;
}
.ep-color-swatch:hover  { transform: scale(1.12); }
.ep-color-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accentdim);
}

/* Fields */
.ep-fields { display: flex; flex-direction: column; gap: 14px; }

.ep-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ep-field { display: flex; flex-direction: column; gap: 5px; }

.ep-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  font-family: var(--mono);
  letter-spacing: .5px;
}
.ep-field-hint {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--mono);
  margin-top: 2px;
}
.ep-char-count {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--mono);
  text-align: right;
}

.ep-input {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 13px;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  outline: none;
  transition: .2s;
  width: 100%;
}
.ep-input:focus  { border-color: var(--accent); }
.ep-input::placeholder { color: var(--text3); }

.ep-textarea {
  resize: vertical;
  min-height: 76px;
  max-height: 140px;
  line-height: 1.55;
}

/* On Rotation — side-by-side inputs */
.ep-rotation-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.ep-rotation-dash {
  color: var(--text3);
  font-size: 14px;
  font-weight: 600;
  padding: 0 2px;
  flex-shrink: 0;
}

/* Feedback */
.ep-error {
  font-size: 12px;
  color: var(--red);
  font-family: var(--mono);
  margin-top: 10px;
  min-height: 16px;
}
.ep-success {
  font-size: 12px;
  color: var(--accent);
  font-family: var(--mono);
  margin-top: 10px;
  font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .vol-modal-overlay { padding: 0; align-items: flex-end; }
  .vol-modal {
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
  }
  .ep-row { grid-template-columns: 1fr !important; }
  .ep-avatar-section { flex-direction: column; align-items: center; text-align: center; }
  .ep-color-section { width: 100%; }
  .ep-color-grid { grid-template-columns: repeat(5,1fr); }
  .ep-rotation-wrap { grid-template-columns: 1fr !important; }
  .ep-rotation-dash  { display: none; }
}

/* ══════════════════════════════════════════
   ON ROTATION — STREAM EMBED & BADGES
══════════════════════════════════════════ */

/* Embed wrapper */
#rotation-embed-wrap { margin-bottom: 8px; }
#rotation-embed iframe,
#rotation-embed > div { border-radius: 10px; overflow: hidden; }

/* Platform badge in card header */
.or-stream-badge { margin-left: auto; }
.or-badge {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  color: var(--text3);
}
.or-badge-spotify    { background: rgba(29,185,84,.15);  border-color: rgba(29,185,84,.4);  color: #1db954; }
.or-badge-apple      { background: rgba(252,60,68,.15);  border-color: rgba(252,60,68,.4);  color: #fc3c44; }
.or-badge-soundcloud { background: rgba(255,85,0,.15);   border-color: rgba(255,85,0,.4);   color: #ff5500; }
.or-badge-youtube    { background: rgba(255,0,0,.15);    border-color: rgba(255,0,0,.4);    color: #ff4444; }
.or-badge-tidal      { background: rgba(0,255,255,.1);   border-color: rgba(0,255,255,.3);  color: #00cccc; }
.or-badge-deezer     { background: rgba(162,56,255,.15); border-color: rgba(162,56,255,.4); color: #a238ff; }
.or-badge-amazon     { background: rgba(0,168,224,.15);  border-color: rgba(0,168,224,.4);  color: #00a8e0; }

/* Fallback external link button */
.or-stream-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: .15s;
  margin-bottom: 10px;
  width: 100%;
  justify-content: center;
}
.or-stream-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── MODAL: Stream URL input field ── */
.ep-stream-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.ep-stream-icon {
  position: absolute;
  left: 13px;
  font-size: 16px;
  z-index: 1;
  pointer-events: none;
  transition: .2s;
}
.ep-stream-url-input {
  padding-left: 40px !important;
}

/* Live platform preview card */
.ep-stream-preview {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.ep-stream-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 13px;
  width: 100%;
}
.ep-stream-card-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ep-stream-card-info { flex: 1; min-width: 0; }
.ep-stream-card-plat {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ep-stream-card-url {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-stream-card-open {
  color: var(--text3);
  font-size: 16px;
  text-decoration: none;
  flex-shrink: 0;
  transition: .15s;
}
.ep-stream-card-open:hover { color: var(--accent); }

/* ── On Rotation card header: flex for badge ── */
.orch {
  display: flex !important;
  align-items: center;
}

/* ══════════════════════════════════════════
   ON ROTATION — STREAM URL  v1.0.3
══════════════════════════════════════════ */

/* ── Edit modal: stream URL field ── */
.ep-stream-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}
.ep-stream-input-wrap:focus-within {
    border-color: var(--accent);
}
.ep-stream-icon {
    padding: 0 12px;
    font-size: 16px;
    flex-shrink: 0;
    transition: color .2s;
    line-height: 1;
}
.ep-stream-url-input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: 4px !important;
    flex: 1;
}
.ep-stream-url-input:focus {
    border: none !important;
    outline: none !important;
}

/* ── Platform detected preview (inside modal) ── */
.ep-stream-preview {
    margin-top: 8px;
}
.ep-stream-detected {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface2);
    border: 1px solid var(--border3);
    border-radius: 9px;
    padding: 9px 12px;
    border-left: 3px solid var(--pcolor, var(--accent));
}
.ep-stream-det-icon { font-size: 20px; flex-shrink: 0; }
.ep-stream-det-info { flex: 1; min-width: 0; }
.ep-stream-det-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.ep-stream-det-url {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ep-stream-det-check {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── On Rotation card: embed iframe wrapper ── */
#rotation-embed-wrap {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
}
#rotation-embed iframe {
    display: block;
    border-radius: 10px;
}

/* ── Platform badge (shown below song title on profile) ── */
.or-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--platform-color, var(--accent));
    font-family: 'Space Grotesk', sans-serif;
    transition: .2s;
    margin-top: 6px;
    margin-bottom: 8px;
}
.or-platform-badge:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--platform-color, var(--accent));
}
.or-badge-icon { font-size: 13px; }
.or-badge-text { flex: 1; }

/* ── Generic external link fallback ── */
.or-generic-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text2);
    font-size: 13px;
    font-weight: 500;
    transition: .2s;
    margin-bottom: 12px;
}
.or-generic-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.or-generic-icon { font-size: 16px; }
.or-generic-text { flex: 1; }

/* ── Stream badge section on profile card ── */
.or-stream-badge {
    margin: 2px 0 10px;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .ep-stream-detected { padding: 8px 10px; }
    .or-platform-badge  { font-size: 10px; padding: 4px 10px 4px 8px; }
}

/* ══════════════════════════════════════════
   SOLSTREAM NATIVE PLAYER  v1.0.6
══════════════════════════════════════════ */

.ssp-card {
    background: var(--surface2);
    border: 1px solid var(--border3);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    border-left: 3px solid #4db8b0;
}

/* Loading state */
.ssp-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text3);
    font-size: 12px;
    font-family: var(--mono);
}
.ssp-load-icon {
    font-size: 20px;
    animation: ssp-pulse 1.4s infinite;
}
@keyframes ssp-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.9); }
}

/* Inner layout: cover art + info */
.ssp-inner {
    display: grid;
    grid-template-columns: 80px 1fr;
    min-height: 80px;
}

.ssp-cover {
    background: var(--surface);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ssp-cover-icon { font-size: 28px; opacity: 0.5; }

.ssp-info {
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ssp-platform-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ssp-platform-badge {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accentdim);
    padding: 2px 7px;
    border-radius: 10px;
}

.ssp-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 4px;
}

/* Playback controls */
.ssp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}
.ssp-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #050f10;
    flex-shrink: 0;
    transition: .15s;
    padding-left: 1px; /* optical centering of play icon */
}
.ssp-play-btn:hover { transform: scale(1.08); }

.ssp-progress-wrap {
    flex: 1;
    cursor: pointer;
    padding: 6px 0; /* bigger tap target */
}
.ssp-progress-bar {
    height: 3px;
    background: var(--border2);
    border-radius: 3px;
    overflow: hidden;
}
.ssp-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.25s linear;
}
.ssp-time {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--mono);
    flex-shrink: 0;
    width: 28px;
    text-align: right;
}

/* Volume */
.ssp-volume-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.ssp-vol {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 3px;
    border-radius: 3px;
    background: var(--border2);
    outline: none;
    cursor: pointer;
}
.ssp-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.ssp-vol::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

/* Open link */
.ssp-open-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text3);
    text-decoration: none;
    font-family: var(--mono);
    margin-top: auto;
    transition: color .15s;
}
.ssp-open-link:hover { color: var(--accent); }

/* Fallback card */
.ssp-fallback {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.ssp-fallback-icon { font-size: 28px; flex-shrink: 0; }
.ssp-fallback-info { flex: 1; min-width: 0; }
.ssp-fallback-btn {
    padding: 6px 14px;
    border-radius: 18px;
    background: var(--accent);
    color: #050f10;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s;
}
.ssp-fallback-btn:hover { opacity: .88; }

/* Mobile */
@media (max-width: 600px) {
    .ssp-inner { grid-template-columns: 64px 1fr; }
    .ssp-cover-icon { font-size: 22px; }
    .ssp-vol { width: 50px; }
}

/* SolStream iframe fallback wrap */
.ssp-iframe-wrap {
    background: var(--surface2);
    border: 1px solid var(--border3);
    border-left: 3px solid #4db8b0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ssp-iframe-wrap iframe {
    display: block;
    width: 100%;
}

/* ── SolStream frame embed card ── */
.ssp-frame-card {
    background: var(--surface2);
    border: 1px solid var(--border3);
    border-left: 3px solid #4db8b0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.ssp-frame-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.ssp-frame-cover {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.ssp-frame-cover-empty {
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ssp-frame-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ssp-frame-iframe {
    width: 100%;
    height: 200px;
    display: block;
    border: none;
    background: #000;
}

@media (max-width: 600px) {
    .ssp-frame-iframe { height: 180px; }
}

/* ── Nav offset ──
   The sticky nav is 54px tall and sits at top:0.
   Every app page wraps content in .vlayout which must
   start below the nav. We pad the body and cancel it
   for full-screen auth/landing pages.
── */
body.volume-page {
    padding-top: 54px !important;
}
/* Auth shell and landing are full-screen — no nav offset needed */
body.volume-page:has(.auth-shell) { padding-top: 0 !important; }
body.volume-page:has(#landing)    { padding-top: 0 !important; }
/* Fallback for Safari < 15.4 which lacks :has() */
.auth-shell { margin-top: -54px; }
#landing    { margin-top: -54px; }

/* ── Profile tab panels ── */
/* Tab panels: visibility controlled by inline style="display:block/none" via volTab() */
/* Do NOT add display rules here — inline styles on each panel take precedence */

/* ── On Rotation: Listen button ── */
.or-listen-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: 10px;
    background: var(--accent);
    color: #050f10;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    text-decoration: none;
    transition: opacity .15s;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
}
.or-listen-btn:hover { opacity: .85; }

/* ── Inline post composer ── */
.post-textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    resize: none;
    min-height: 60px;
    max-height: 240px;
    padding: 6px 0 0 0;
    width: 100%;
    overflow-y: auto;
}
.post-textarea::placeholder { color: var(--text3); }

.composer-attach {
    margin: 10px 0 0 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--accentdim);
    border: 1px solid var(--accent);
    border-radius: 20px;
    font-size: 12px;
    color: var(--accent);
    font-family: 'Space Grotesk', sans-serif;
}

/* Submit button active state */
.pabtn.post:not([disabled]) {
    background: var(--accent);
    color: #050f10;
    font-weight: 700;
    cursor: pointer;
}
.pabtn.post[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Post edit/delete menu ── */
.post-menu-wrap { position: relative; }

.post-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface2);
    border: 1px solid var(--border3);
    border-radius: 10px;
    overflow: hidden;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    animation: vol-fade-in 0.15s ease;
}

.post-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text2);
    font-size: 13px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.post-menu-item:hover          { background: var(--surface); color: var(--text); }
.post-menu-item.delete         { color: var(--red); }
.post-menu-item.delete:hover   { background: rgba(224,92,110,0.1); }

/* ── Inline post editor ── */
.post-edit-wrap {
    margin: 8px 0;
}
.post-edit-textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 10px 13px;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    resize: none;
    outline: none;
    box-sizing: border-box;
    min-height: 80px;
}
.post-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.post-edit-cancel {
    padding: 7px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    transition: .15s;
}
.post-edit-cancel:hover { border-color: var(--border3); color: var(--text); }

.post-edit-save {
    padding: 7px 16px;
    border-radius: 8px;
    background: var(--accent);
    border: none;
    color: #050f10;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    transition: .15s;
}
.post-edit-save:hover    { opacity: .88; }
.post-edit-save:disabled { opacity: .5; cursor: not-allowed; }