:root{
  --bg:#07090d;
  --glass:rgba(8,10,15,.72);
  --line:rgba(255,255,255,.12);
  --muted:rgba(255,255,255,.67);
  --accent:#ff315f;
  --accent2:#7c5cff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:#fff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
body{overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
.app{position:relative;width:100%;height:100dvh;overflow:hidden;background:#05070a}
.topbar{position:absolute;z-index:30;top:0;left:0;right:0;height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.48),transparent);pointer-events:none}
.topbar button{pointer-events:auto}
.brand{justify-self:start;border:0;background:transparent;color:#fff;font-weight:950;font-size:16px;letter-spacing:1.2px;padding:10px 2px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.feed-tabs{display:flex;align-items:center;gap:18px;height:100%}
.feed-tab{position:relative;border:0;background:transparent;color:rgba(255,255,255,.65);font-weight:750;font-size:15px;padding:18px 2px 13px}
.feed-tab.active{color:#fff}
.feed-tab.active:after{content:"";position:absolute;left:50%;bottom:7px;width:22px;height:3px;border-radius:99px;background:#fff;transform:translateX(-50%)}
.top-action{justify-self:end;width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:29px;line-height:1}
.feed{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:contain;background:#000}
.feed::-webkit-scrollbar{display:none}
.video-card{position:relative;width:100%;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;background:#0b0e14;overflow:hidden}
.video-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#10131a}
.video-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 22%,transparent 52%,rgba(0,0,0,.64) 88%,rgba(0,0,0,.88) 100%)}
.video-card.paused .center-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.center-play{position:absolute;z-index:5;left:50%;top:48%;transform:translate(-50%,-50%) scale(.78);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);font-size:29px;opacity:0;transition:.18s;pointer-events:none}
.video-meta{position:absolute;z-index:8;left:14px;right:82px;bottom:calc(77px + env(safe-area-inset-bottom));text-shadow:0 2px 14px rgba(0,0,0,.85)}
.author-line{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.author-line strong{font-size:16px}
.verified{font-size:11px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#2e9bff}
.follow-inline{border:1px solid rgba(255,255,255,.8);background:rgba(10,10,12,.16);color:#fff;border-radius:6px;padding:4px 10px;font-weight:800;font-size:12px}
.follow-inline.following{border-color:var(--line);background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.caption{font-size:14px;line-height:1.35;margin:0 0 9px;white-space:pre-wrap}
.sound-line{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.92)}
.sound-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:10px}
.action-rail{position:absolute;z-index:9;right:9px;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;align-items:center}
.avatar-wrap{position:relative;margin-bottom:4px}
.rail-avatar{width:49px;height:49px;border:2px solid #fff;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#673cff,#ff3b71);display:grid;place-items:center;font-weight:900;font-size:17px}
.avatar-plus{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent);border:2px solid #fff;font-weight:900;font-size:15px}
.avatar-plus.following{background:#222;color:#fff}
.rail-btn{border:0;background:transparent;color:#fff;width:58px;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.rail-icon{width:45px;height:45px;display:grid;place-items:center;font-size:31px;transition:.15s transform}
.rail-btn:active .rail-icon{transform:scale(.82)}
.rail-btn.liked .rail-icon{color:var(--accent);filter:drop-shadow(0 3px 10px rgba(255,49,95,.35))}
.rail-btn small{font-size:11px;font-weight:750}
.mute-pill{position:absolute;z-index:9;right:13px;top:calc(65px + env(safe-area-inset-top));border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.35);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:6px 9px;font-size:12px;opacity:.86}
.progress{position:absolute;z-index:12;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));height:2px;background:rgba(255,255,255,.16)}
.progress span{display:block;height:100%;width:0;background:#fff}
.bottom-nav{position:absolute;z-index:35;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:5px 10px env(safe-area-inset-bottom);display:grid;grid-template-columns:1fr 1fr 74px 1fr 1fr;align-items:center;background:rgba(3,4,7,.91);border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}
.nav-item{border:0;background:transparent;color:rgba(255,255,255,.62);display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px}
.nav-item.active{color:#fff}
.nav-icon{font-size:23px;line-height:24px}
.nav-item small{font-size:9px;font-weight:650}
.create-btn{justify-self:center;width:48px;height:34px;border:0;border-radius:10px;background:#fff;color:#08090c;font-size:27px;line-height:1;box-shadow:-5px 0 0 #36d9e7,5px 0 0 #ff315f}
.sheet-backdrop{position:absolute;z-index:48;inset:0;background:rgba(0,0,0,.45)}
.sheet{position:absolute;z-index:50;left:0;right:0;bottom:0;height:min(68dvh,620px);background:#11141a;border-radius:20px 20px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.sheet-grabber{width:42px;height:4px;border-radius:20px;background:#4a4e57;margin:8px auto 2px}
.sheet-head{height:48px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}
.sheet-head strong{text-align:center;padding-left:36px}
.close-btn{border:0;background:transparent;color:#fff;font-size:29px;width:36px;height:36px;display:grid;place-items:center}
.comments-list{flex:1;overflow:auto;padding:14px 14px 8px}
.comment{display:grid;grid-template-columns:36px 1fr;gap:10px;margin-bottom:18px}
.comment-avatar,.mini-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3d465a,#1c2230);font-size:12px;font-weight:850}
.comment-body strong{font-size:12px;color:rgba(255,255,255,.65)}
.comment-body p{font-size:14px;line-height:1.35;margin:4px 0}
.comment-body small{font-size:11px;color:rgba(255,255,255,.45)}
.comment-form{display:grid;grid-template-columns:36px 1fr 38px;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:center;background:#0e1117}
.comment-form input{min-width:0;border:0;outline:0;border-radius:999px;background:#1d212a;color:#fff;padding:11px 14px}
.comment-form button{border:0;background:transparent;color:#8f79ff;font-size:20px}
.panel-view{position:absolute;z-index:42;inset:0;background:#0b0d12;padding-bottom:calc(64px + env(safe-area-inset-bottom));overflow:auto}
.panel-header{position:sticky;z-index:3;top:0;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:rgba(11,13,18,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}
.panel-header strong{text-align:center}
.back-btn,.ghost-btn{border:0;background:transparent;color:#fff;font-size:32px}
.ghost-btn{font-size:20px}
.search-box{margin:14px;display:grid;grid-template-columns:30px 1fr;align-items:center;background:#191d25;border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:0 10px}
.search-box span{font-size:23px;color:rgba(255,255,255,.55)}
.search-box input{height:46px;border:0;outline:0;background:transparent;color:#fff;font-size:15px}
.panel-content{padding:0 14px 24px}
.section-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.42);font-weight:800}
.trend{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.trend .rank{font-weight:900;font-size:19px;color:rgba(255,255,255,.35)}
.trend strong,.trend span{display:block}
.trend span{font-size:12px;color:var(--muted);margin-top:3px}
.trend b{font-size:12px;color:#ff6386}
.profile-card{text-align:center;padding:28px 18px 18px}
.profile-avatar{margin:0 auto;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6c4fff,#ff315f);font-size:30px;font-weight:950;border:3px solid #fff}
.profile-card h2{margin:12px 0 3px}
.profile-card p{margin:0;color:var(--muted)}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:340px;margin:22px auto 18px}
.profile-stats div{display:flex;flex-direction:column;gap:2px}
.profile-stats b{font-size:18px}
.profile-stats span{font-size:11px;color:var(--muted)}
.edit-profile{border:1px solid rgba(255,255,255,.18);background:#1c2028;color:#fff;border-radius:10px;padding:10px 18px;font-weight:750}
.empty-state{min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;color:var(--muted)}
.empty-state div{font-size:46px;color:#fff;margin-bottom:10px}
.empty-state strong{color:#fff;margin-bottom:6px}
.empty-state span{font-size:13px;max-width:280px;line-height:1.4}
.simple-empty{min-height:60dvh}
.upload-modal{position:absolute;z-index:70;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px}
.upload-card{position:relative;width:min(100%,360px);background:#171a21;border:1px solid var(--line);border-radius:22px;padding:32px 22px 24px;text-align:center;box-shadow:0 25px 80px rgba(0,0,0,.55)}
.upload-close{position:absolute;right:8px;top:8px}
.upload-symbol{margin:0 auto;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent2),var(--accent));font-size:38px;font-weight:300}
.upload-card h2{margin:15px 0 6px}
.upload-card p{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 18px}
.upload-label{display:block;background:#fff;color:#090a0d;border-radius:12px;padding:12px 16px;font-weight:850}
.toast{position:absolute;z-index:100;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:86%;background:rgba(28,31,38,.94);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:12px;box-shadow:0 12px 35px rgba(0,0,0,.4);white-space:nowrap}
.hidden{display:none!important}
.like-burst{position:absolute;z-index:20;left:50%;top:46%;font-size:74px;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;animation:heartBurst .62s ease-out}
@keyframes heartBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(.92)}100%{opacity:0;transform:translate(-50%,-60%) scale(.85)}}
@media (min-width:700px){
  .app{max-width:500px;margin:0 auto;border-left:1px solid #1d2026;border-right:1px solid #1d2026}
}
/* VYBE feed polish */
.video-card{touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.video-card video{transform:translateZ(0)}
.video-card:after{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.02) 20%,transparent 50%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.88) 100%)}
.topbar{background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.08) 72%,transparent)}
.brand{font-size:17px;letter-spacing:1.8px}
.feed-tab{transition:color .18s ease,transform .18s ease}
.feed-tab:active{transform:scale(.95)}
.video-meta{left:16px;right:84px;bottom:calc(82px + env(safe-area-inset-bottom))}
.author-line strong{font-size:15px;font-weight:850;letter-spacing:.1px}
.caption{font-size:14px;line-height:1.42;max-width:95%;margin-bottom:10px}
.follow-inline{border-radius:8px;padding:5px 11px;background:rgba(0,0,0,.2);backdrop-filter:blur(8px);transition:.18s ease}
.follow-inline:active{transform:scale(.94)}
.action-rail{right:8px;bottom:calc(83px + env(safe-area-inset-bottom));gap:14px}
.rail-avatar{box-shadow:0 4px 18px rgba(0,0,0,.35)}
.rail-btn{transition:transform .16s ease}
.rail-btn:active{transform:scale(.9)}
.rail-icon{filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.avatar-plus{transition:transform .2s ease,background .2s ease}
.avatar-plus:active{transform:translateX(-50%) scale(.86)}
.progress{height:3px;background:rgba(255,255,255,.12)}
.progress span{border-radius:99px;box-shadow:0 0 8px rgba(255,255,255,.28)}
.bottom-nav{background:linear-gradient(180deg,rgba(5,6,9,.78),rgba(3,4,7,.97));border-top-color:rgba(255,255,255,.06)}
.create-btn{transition:transform .16s ease}
.create-btn:active{transform:scale(.9)}
.center-play{width:64px;height:64px;background:rgba(7,8,11,.42);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 35px rgba(0,0,0,.25)}
.like-burst{color:#ff315f;filter:drop-shadow(0 8px 22px rgba(255,49,95,.38))}


/* Persistent profile video grid */
.profile-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px 0 calc(90px + env(safe-area-inset-bottom));background:#07090d}
.profile-video-tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#11151c}
.profile-video-tile video{width:100%;height:100%;object-fit:cover;display:block}

.comment-actions{display:flex;gap:18px;margin-top:8px;align-items:center}.comment-actions button,.comment-sort-btn{border:0;background:none;color:#9298a4;font:inherit;font-size:13px;font-weight:700;padding:2px 0}.comment-actions button.liked{color:#ff3b67}.comment-reply{margin-left:42px;width:calc(100% - 42px)}.comment-reply .comment-avatar{width:32px;height:32px;font-size:12px}.comment-sort-btn{margin-left:10px;font-size:12px;color:#a7adba}