:root{
  --background:240 14% 7%;--foreground:0 0% 100%;--primary:256 100% 62%;--secondary:262 78% 73%;--muted:231 9% 72%;--destructive:0 82% 62%;--border:0 0% 100%;--card:240 14% 12%;
  --shadow-sm:0 8px 22px rgba(0,0,0,.22);--shadow-md:0 18px 50px rgba(0,0,0,.38);--shadow-lg:0 22px 70px rgba(108,59,255,.35);
  --transition-fast:.25s ease;--transition-smooth:.45s cubic-bezier(.2,.8,.2,1);--radius-sm:12px;--radius-md:14px;--radius-lg:20px;
}
.dark{--background:240 14% 7%;--foreground:0 0% 100%;--card:240 14% 12%;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,sans-serif;background:hsl(var(--background));color:hsl(var(--foreground));overflow-x:hidden}button,a,input,textarea{font-family:inherit}button,a{min-height:44px}input,textarea{font-size:max(16px,1rem);width:100%;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.06);color:white;outline:none;transition:var(--transition-fast)}input:focus,textarea:focus{box-shadow:0 0 0 4px rgba(108,59,255,.22);border-color:#6C3BFF}textarea{min-height:105px;resize:vertical}.screen{min-height:100svh}.center-screen{display:flex;align-items:center;justify-content:center;padding:24px}.glass-panel{background:linear-gradient(180deg,rgba(26,26,34,.82),rgba(26,26,34,.58));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-md);backdrop-filter:blur(22px);border-radius:20px}.primary-btn{border:0;border-radius:14px;padding:14px 20px;color:white;background:linear-gradient(135deg,#6C3BFF,#9F7AEA);box-shadow:0 14px 38px rgba(108,59,255,.35);font-weight:700;cursor:pointer;transition:var(--transition-fast)}.primary-btn:hover,.google-btn:hover,.side-link:hover,.story:hover,.post-card:hover{transform:translateY(-2px) scale(1.02)}.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;background:#1A1A22;border:1px solid rgba(255,255,255,.08);padding:12px 18px;border-radius:999px;box-shadow:var(--shadow-lg)}.splash{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(108,59,255,.45),transparent 30%),linear-gradient(135deg,#0F0F14,#171322)}.splash-center{animation:fadeUp .8s ease both;text-align:center}.logo-lockup{display:flex;align-items:center;justify-content:center;gap:16px}.logo-orb{width:82px;height:82px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,#6C3BFF,#FFD84D);font-size:44px;font-weight:800;box-shadow:0 0 50px rgba(108,59,255,.7);animation:pulse 1.6s infinite}.logo-lockup h1{font-size:clamp(34px,7vw,70px);margin:0;letter-spacing:.08em}.logo-lockup p{margin:4px 0;color:#B0B3C0}.loading-bar{height:8px;width:min(320px,70vw);background:rgba(255,255,255,.08);border-radius:99px;margin:34px auto;overflow:hidden}.loading-bar span{display:block;height:100%;background:#FFD84D;animation:load 3s linear forwards}.particles i{position:absolute;width:8px;height:8px;background:#9F7AEA;border-radius:50%;animation:float 5s infinite}.particles i:nth-child(1){left:20%;top:18%}.particles i:nth-child(2){left:72%;top:26%;animation-delay:1s}.particles i:nth-child(3){left:35%;top:78%;animation-delay:2s}.particles i:nth-child(4){left:84%;top:70%;animation-delay:1.5s}.onboard-card,.auth-card,.profile-card{width:min(440px,100%);padding:28px;text-align:center}.illustration{font-size:98px;filter:drop-shadow(0 20px 35px rgba(108,59,255,.45));animation:float 3s infinite}.onboard-card h2{font-size:30px}.onboard-card p,.auth-card p{color:#B0B3C0}.skip,.link-btn,.forgot,.muted-link{background:transparent;color:#B0B3C0;border:0;cursor:pointer}.dots{display:flex;gap:8px;justify-content:center;margin:24px}.dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}.dots .active{width:28px;background:#6C3BFF;border-radius:99px}.auth-bg{background:radial-gradient(circle at top right,rgba(108,59,255,.35),transparent 32%)}.auth-card{display:flex;flex-direction:column;gap:12px}.auth-card h1{letter-spacing:.12em}.tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.06);border-radius:14px;padding:5px}.tabs button{border:0;border-radius:10px;background:transparent;color:#B0B3C0}.tabs .active{background:#6C3BFF;color:white}.google-btn{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);color:white;border-radius:14px;font-weight:600;transition:var(--transition-fast)}.main-content.with-nav{padding-left:292px;padding-bottom:110px}.sidebar{position:fixed;left:22px;top:22px;bottom:22px;width:248px;padding:18px;z-index:20}.brand-mini{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;margin-bottom:16px}.brand-mini span{width:42px;height:42px;border-radius:14px;background:#6C3BFF;display:grid;place-items:center;font-weight:800}.side-menu{display:grid;gap:5px}.side-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:#B0B3C0;padding:10px 12px;border-radius:14px;transition:var(--transition-fast)}.side-link.active{background:rgba(108,59,255,.18);color:white;box-shadow:0 0 24px rgba(108,59,255,.25)}.create-post{position:absolute;left:18px;right:18px;bottom:18px;text-align:center;text-decoration:none;color:white;background:#6C3BFF;border-radius:14px;padding:12px}.page{max-width:940px;margin:0 auto;padding:28px}.narrow{max-width:560px}.topbar{display:flex;align-items:center;justify-content:space-between}.topbar h1{letter-spacing:.08em}.topbar button{width:46px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#1A1A22;color:white;margin-left:8px}.stories{display:flex;gap:16px;overflow:auto;padding:12px 0 22px}.story{text-align:center;transition:var(--transition-fast)}.story div{width:72px;height:72px;border-radius:50%;padding:4px;background:linear-gradient(135deg,#6C3BFF,#FFD84D);display:grid;place-items:center;font-size:30px;box-shadow:0 0 24px rgba(108,59,255,.35)}.story small{color:#B0B3C0}.feed-stack{display:grid;gap:22px}.post-card{padding:16px;transition:var(--transition-fast);animation:fadeUp .5s ease both}.post-head,.friend-card,.chat-top,.voice-card{display:flex;align-items:center;gap:12px}.mini-avatar{width:46px;height:46px;border-radius:50%;background:#6C3BFF;display:grid;place-items:center;font-weight:800;position:relative}.online:after{content:'';position:absolute;right:1px;bottom:2px;width:12px;height:12px;border-radius:50%;background:#38ef7d;border:2px solid #1A1A22}.post-head span,.friend-card span,.chat-top span{display:block;color:#B0B3C0;font-size:13px}.post-art{height:430px;border-radius:20px;margin:14px 0;display:grid;place-items:center;text-transform:uppercase;letter-spacing:.15em;font-weight:700}.post-actions{display:flex;gap:10px}.post-actions button{border:0;background:transparent;color:white;font-size:24px}.post-actions .liked{color:#FFD84D;animation:pulse .35s}.reels-page{height:100svh;overflow-y:auto;scroll-snap-type:y mandatory}.reel{height:100svh;scroll-snap-align:start;position:relative;display:grid;place-items:center}.fake-video{width:min(430px,100vw);height:100svh;background:linear-gradient(160deg,#22163e,#6C3BFF 55%,#0F0F14);display:grid;place-items:center;font-size:26px;font-weight:700;text-align:center}.reel-actions{position:absolute;right:18px;bottom:120px;display:grid;gap:12px}.reel-actions button{border:0;border-radius:16px;background:rgba(0,0,0,.28);color:white;padding:10px}.heart-burst{position:absolute;font-size:90px;color:#FFD84D;animation:burst .5s ease}.section-grid,.room-grid,.voice-grid,.capsule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.metric-card,.room-card,.voice-card{background:#1A1A22;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px}.metric-card b{display:block;color:#FFD84D;margin-top:8px}.friend-list{display:grid;gap:12px}.friend-card{padding:14px}.friend-card em{margin-left:auto;color:#FFD84D;font-style:normal}.dna-card{text-align:center;padding:28px}.circle{width:210px;height:210px;border-radius:50%;margin:24px auto;display:grid;place-items:center;background:conic-gradient(#6C3BFF var(--value),rgba(255,255,255,.08) 0);position:relative}.circle:before{content:'';position:absolute;inset:18px;border-radius:50%;background:#1A1A22}.circle span{position:relative;font-size:44px;font-weight:800}.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.tags span{background:rgba(108,59,255,.14);color:#9F7AEA;border-radius:99px;padding:8px 12px}.timeline{text-align:left;color:#B0B3C0}.chat-page{max-width:720px;margin:26px auto;height:calc(100svh - 52px);display:flex;flex-direction:column;overflow:hidden}.chat-top{padding:16px;border-bottom:1px solid rgba(255,255,255,.08)}.chat-top button{margin-left:auto;border:0;background:#6C3BFF;color:white;border-radius:14px}.messages{flex:1;padding:18px;overflow:auto;display:flex;flex-direction:column;gap:12px}.bubble{max-width:76%;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);animation:fadeUp .3s}.bubble.right{align-self:flex-end;background:#6C3BFF}.bubble small{display:block;color:#B0B3C0;font-size:11px;margin-top:4px}.typing i{display:inline-block;width:7px;height:7px;background:#B0B3C0;border-radius:50%;margin:3px;animation:pulse 1s infinite}.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08)}.chat-input button{border:0;border-radius:14px;background:rgba(255,255,255,.08);color:white;padding:0 14px}.wave{display:flex;align-items:end;gap:4px;height:34px}.wave i{width:6px;background:#9F7AEA;border-radius:8px;animation:wave 1s infinite}.wave i:nth-child(1){height:12px}.wave i:nth-child(2){height:26px;animation-delay:.1s}.wave i:nth-child(3){height:18px;animation-delay:.2s}.wave i:nth-child(4){height:31px;animation-delay:.3s}.wave i:nth-child(5){height:15px;animation-delay:.4s}.record{margin-top:20px}.room-card:hover{box-shadow:0 0 38px rgba(108,59,255,.32);transform:translateY(-3px)}.capsule-card{min-height:190px;border-radius:20px;padding:20px;background:linear-gradient(135deg,rgba(108,59,255,.9),rgba(159,122,234,.45));box-shadow:var(--shadow-lg)}.capsule-card span{font-size:36px}.bottom-nav{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes pulse{50%{transform:scale(1.06);filter:brightness(1.18)}}@keyframes load{from{width:0}to{width:100%}}@keyframes float{50%{transform:translateY(-14px)}}@keyframes burst{from{transform:scale(.3);opacity:0}50%{opacity:1}to{transform:scale(1.3);opacity:0}}@keyframes wave{50%{transform:scaleY(.45)}}
@media(max-width:1024px){.main-content.with-nav{padding-left:0}.sidebar{display:none}.bottom-nav{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));height:74px;background:rgba(26,26,34,.86);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(20px);border-radius:24px;display:grid;grid-template-columns:repeat(5,1fr);z-index:25;box-shadow:var(--shadow-md)}.bottom-link{display:grid;place-items:center;text-decoration:none;color:#B0B3C0;padding:8px}.bottom-link span{font-size:22px}.bottom-link small{font-size:11px}.bottom-link.active{color:white;text-shadow:0 0 16px #6C3BFF}.page{padding:22px 16px 112px}.post-art{height:360px}}
@media(max-width:768px){.section-grid,.room-grid,.voice-grid,.capsule-grid{grid-template-columns:1fr}.logo-lockup{flex-direction:column}.auth-card,.onboard-card{padding:22px}.chat-page{height:100svh;margin:0;border-radius:0}.fake-video{width:100vw}.reel-actions{right:10px}.post-art{height:300px}}
@media(max-width:480px){.topbar h1{font-size:26px}.story div{width:62px;height:62px}.page{padding-left:14px;padding-right:14px}.post-card{padding:12px}.bubble{max-width:88%}}