/* ══════════════════════════════════════════
   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;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}