:root{
  --bg: #0B0014; --bg-soft:#160726; --card:#1D0E33;
  --pink:#FF2E8A; --violet:#7C3AED; --cyan:#00E5FF; --yellow:#FFD60A;
  --text:#FFFFFF; --muted:#B8AFC9;
  --grad: linear-gradient(135deg,var(--pink),var(--violet) 60%,var(--cyan));
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,.brand,.nav-label,.btn,.tab{font-family:'Fredoka',sans-serif;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
::-webkit-scrollbar{display:none;}

#app{max-width:480px; margin:0 auto; min-height:100vh; position:relative; background:var(--bg); padding-bottom:78px;}
@media (min-width:600px){
  body{background:linear-gradient(160deg,#0B0014,#150324);}
  #app{box-shadow:0 0 60px rgba(0,0,0,0.6); margin-top:0;}
}

header{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:linear-gradient(90deg, #22093d, #2c0f4d 60%, #22093d); border-bottom:1px solid rgba(255,46,138,0.35); box-shadow:0 2px 14px rgba(255,46,138,0.12);}
.brand{display:flex; align-items:center; gap:9px; font-size:23px; font-weight:700;}
.vinyl{width:34px; height:34px; border-radius:50%; background:conic-gradient(from 90deg,#000,#333,#000,#333,#000); position:relative; animation:spin 4s linear infinite; box-shadow:0 0 12px rgba(255,46,138,0.6);}
.vinyl::after{content:''; position:absolute; inset:0; margin:auto; width:11px; height:11px; border-radius:50%; background:var(--pink);}
@keyframes spin{to{transform:rotate(360deg);}}
.brand span.hot{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.auth-actions{display:flex; gap:8px; align-items:center;}
.icon-btn{width:38px; height:38px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; font-size:17px; position:relative;}
.icon-btn .dot{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--yellow); border:2px solid var(--bg); display:none;}
.btn-primary{background:var(--grad); color:#fff; font-weight:600; font-size:13px; padding:9px 16px; border-radius:20px;}

.section-title{display:flex; align-items:center; gap:8px; padding:16px 16px 8px; font-size:15px; font-weight:600;}
.section-title .flame{color:var(--yellow);}
.slider{display:flex; gap:12px; overflow-x:auto; padding:4px 16px 18px; scroll-snap-type:x mandatory;}
.slide-card{scroll-snap-align:start; min-width:150px; height:190px; border-radius:18px; position:relative; overflow:hidden; flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-end; padding:10px; box-shadow:0 8px 20px rgba(0,0,0,0.45);}
.slide-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);}
.slide-card .rank{position:absolute; top:8px; left:8px; font-size:22px; font-weight:700; -webkit-text-stroke:1px rgba(255,255,255,0.5); color:rgba(255,255,255,0.15); z-index:2;}
.slide-card .meta{position:relative; z-index:2;}
.slide-card .song{font-size:13px; font-weight:600;}
.slide-card .artist{font-size:11px; color:var(--muted);}
.eq{display:flex; gap:2px; align-items:flex-end; height:14px; margin-top:5px;}
.eq span{width:3px; background:var(--cyan); border-radius:2px; animation:eq 0.9s ease-in-out infinite;}
.eq span:nth-child(2){animation-delay:0.15s; background:var(--pink);}
.eq span:nth-child(3){animation-delay:0.3s; background:var(--yellow);}
.eq span:nth-child(4){animation-delay:0.45s; background:var(--violet);}
@keyframes eq{0%,100%{height:4px;} 50%{height:14px;}}

.feed{padding:0 16px; display:flex; flex-direction:column; gap:16px;}
.video-card{border-radius:20px; overflow:hidden; position:relative; height:440px; background:var(--card); display:flex; align-items:flex-end; box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.video-card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.video-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%);}
.vc-info{position:relative; z-index:2; padding:16px 62px 16px 16px; width:100%; box-sizing:border-box;}
.vc-user{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:6px;}
.vc-user .av{width:26px; height:26px; border-radius:50%; background:var(--grad); flex-shrink:0;}
.vc-user .uname{cursor:pointer;}
.follow-chip{margin-left:auto; font-size:11px; font-weight:700; padding:5px 12px; border-radius:14px; background:var(--grad); color:#fff;}
.follow-chip.following{background:rgba(255,255,255,0.12); color:#fff;}
.vc-caption{font-size:13px; color:#fff; opacity:0.92; margin-bottom:4px;}
.vc-meta-row{display:flex; gap:12px; font-size:11px; color:var(--muted);}
.vc-side{position:absolute; right:14px; bottom:76px; z-index:3; display:flex; flex-direction:column; gap:16px; align-items:center;}
.heart-btn{background:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.heart-btn svg{width:27px; height:27px; transition:transform .15s ease; overflow:visible;}
.heart-btn.liked svg{animation:pop .35s ease;}
@keyframes pop{0%{transform:scale(1);} 40%{transform:scale(1.22);} 100%{transform:scale(1);}}
.side-count{font-size:10px; color:#fff; text-align:center; margin-top:-10px; text-shadow:0 1px 3px rgba(0,0,0,0.6);}
.vc-side button.round{background:rgba(0,0,0,0.35); backdrop-filter:blur(4px); width:42px; height:42px; border-radius:50%; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;}

.empty-feed{text-align:center; padding:50px 20px; color:var(--muted); font-size:13px;}
.empty-feed .btn-primary{display:inline-block; margin-top:14px;}

nav.bottom{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:rgba(16,4,28,0.92); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:space-around; padding:10px 6px 14px; z-index:50;}
.tab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--muted); background:none; width:52px;}
.tab.active{color:var(--pink);}
.tab .ic{font-size:19px;}
.rec-fab{width:52px; height:40px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:700; margin-top:-6px; box-shadow:0 6px 18px rgba(255,46,138,0.5);}

.overlay{position:fixed; inset:0; background:rgba(5,0,10,0.7); backdrop-filter:blur(3px); display:none; align-items:flex-end; justify-content:center; z-index:100;}
.overlay.open{display:flex;}
.sheet{width:100%; max-width:480px; background:var(--bg-soft); border-radius:24px 24px 0 0; padding:22px 20px 28px; max-height:92vh; overflow-y:auto; animation:up .25s ease; display:flex; flex-direction:column;}
@keyframes up{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.sheet h2{font-size:19px; margin-bottom:4px;}
.sheet .sub{font-size:12px; color:var(--muted); margin-bottom:18px;}
.close-x{float:right; background:var(--card); width:30px; height:30px; border-radius:50%; color:#fff; font-size:15px;}

.field{margin-bottom:12px;}
.field label{font-size:12px; color:var(--muted); display:block; margin-bottom:5px;}
.field input, .field select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:#120821; color:#fff; font-size:14px;}
.field input:focus, .field select:focus{outline:2px solid var(--pink);}
.row2{display:flex; gap:10px;}
.row2 .field{flex:1;}

.tabs-auth{display:flex; background:var(--card); border-radius:14px; padding:4px; margin-bottom:18px;}
.tabs-auth button{flex:1; padding:9px; border-radius:11px; font-size:13px; color:var(--muted); font-weight:600; background:none;}
.tabs-auth button.active{background:var(--grad); color:#fff;}

.btn-block{width:100%; padding:13px; border-radius:14px; font-size:14px; font-weight:600; margin-top:6px;}
.divider{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:16px 0;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:rgba(255,255,255,0.12);}
.msg-inline{font-size:12px; padding:10px; border-radius:10px; margin-top:10px; display:none;}
.msg-inline.show{display:block;}
.msg-inline.err{background:rgba(255,60,60,0.15); color:#ff9d9d;}
.msg-inline.ok{background:rgba(0,229,255,0.12); color:var(--cyan);}

.rec-overlay{position:fixed; inset:0; background:#000; z-index:200; display:none; flex-direction:column; align-items:center; justify-content:center;}
.rec-overlay.open{display:flex;}
.rec-overlay video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.rec-top{position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; z-index:2;}
.rec-timer{background:rgba(0,0,0,0.5); padding:7px 14px; border-radius:20px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;}
.rec-timer .rdot{width:8px; height:8px; border-radius:50%; background:var(--pink); animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.2;}}
.rec-bottom{position:absolute; bottom:36px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:16px; z-index:2;}
.rec-btn{width:76px; height:76px; border-radius:50%; border:5px solid #fff; background:transparent; display:flex; align-items:center; justify-content:center;}
.rec-btn .core{width:56px; height:56px; border-radius:50%; background:var(--pink); transition:.2s;}
.rec-btn.recording .core{border-radius:14px; width:30px; height:30px;}
.rec-hint{color:#fff; font-size:12px; opacity:.85;}
.rec-preview-actions{display:flex; gap:14px;}
.rec-preview-actions button{padding:12px 22px; border-radius:24px; font-weight:600; font-size:13px;}
.rec-progress{position:absolute; top:0; left:0; height:4px; background:var(--grad); z-index:3; transition:width .1s linear;}
.upload-overlay{position:absolute; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; z-index:5; color:#fff; font-size:13px;}
.upload-overlay.show{display:flex;}
.spinner{width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:var(--pink); animation:sp .8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}

#toastWrap{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:300; width:92%; max-width:440px;}
.toast{background:var(--card); border:1px solid rgba(255,255,255,0.1); border-left:4px solid var(--pink); padding:12px 14px; border-radius:12px; margin-bottom:8px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,0.5); animation:slidein .3s ease;}
@keyframes slidein{from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:translateY(0);}}
.toast b{color:var(--yellow);}

.notif-item{padding:12px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:13px;}
.notif-item .t{color:var(--muted); font-size:11px; margin-top:3px;}

.profile-head{display:flex; flex-direction:column; align-items:center; padding:26px 0 10px;}
.profile-av{width:78px; height:78px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; margin-bottom:10px;}
.stat-row{display:flex; gap:26px; margin:14px 0 4px;}
.stat{text-align:center;}
.stat b{display:block; font-size:16px;}
.stat span{font-size:11px; color:var(--muted);}
.profile-info{background:var(--card); border-radius:14px; padding:14px; margin:14px 16px; font-size:13px;}
.profile-info div{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05);}
.profile-info div:last-child{border:none;}
.profile-info span:first-child{color:var(--muted);}

.admin-box{margin:14px 16px; background:var(--card); border-radius:14px; padding:14px; border:1px dashed var(--yellow);}
.admin-box h3{font-size:13px; margin-bottom:8px; color:var(--yellow);}
.admin-box textarea{width:100%; min-height:70px; background:#120821; border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:10px; color:#fff; font-size:13px; margin-bottom:8px; font-family:inherit;}

.comments-list{flex:1; overflow-y:auto; max-height:46vh; margin-bottom:10px;}
.comment-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05);}
.comment-item .av{width:30px; height:30px; border-radius:50%; background:var(--grad); flex-shrink:0;}
.comment-item .nome{font-size:12px; font-weight:600;}
.comment-item .txt{font-size:13px; color:#eee; margin-top:2px;}
.comment-item .tm{font-size:10px; color:var(--muted); margin-top:3px;}
.comment-input-row{display:flex; gap:8px; align-items:center; border-top:1px solid rgba(255,255,255,0.07); padding-top:10px;}
.comment-input-row input{flex:1; padding:11px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); background:#120821; color:#fff; font-size:13px;}
.send-btn{width:40px; height:40px; border-radius:50%; background:var(--grad); color:#fff; font-size:16px; flex-shrink:0;}

.hide{display:none !important;}

/* ===== NOVOS ELEMENTOS ===== */
.menu-secundario{display:flex; gap:8px; overflow-x:auto; padding:12px 16px 4px;}
.menu-secundario a{background:var(--card); color:#fff; font-size:12px; font-weight:600; padding:8px 14px; border-radius:14px; white-space:nowrap;}

.rodape-links{max-width:480px; margin:20px auto 0; text-align:center; padding:0 16px;}
.rodape-links a#linkWhatsapp{display:inline-block; background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; font-weight:700; font-size:13px; padding:12px 22px; border-radius:20px; margin-bottom:12px;}
.rodape-secundario{font-size:12px; color:var(--muted);}
.rodape-secundario a{color:var(--muted);}
.rodape-secundario span{margin:0 6px;}

.selo-verificado{display:inline-flex; vertical-align:middle; margin-left:3px;}
.selo-pro{background:var(--yellow); color:#241a00; font-size:9px; font-weight:800; padding:2px 6px; border-radius:8px; margin-left:6px; vertical-align:middle;}

.avatar-img{width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.profile-av img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.avatar-edit-wrap{position:relative; display:inline-block;}
.avatar-edit-btn{position:absolute; bottom:6px; right:-4px; width:26px; height:26px; border-radius:50%; background:var(--card); border:2px solid var(--bg-soft); font-size:12px; display:flex; align-items:center; justify-content:center;}

.coin-box{display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg, rgba(255,214,10,0.15), rgba(255,46,138,0.1)); border:1px solid rgba(255,214,10,0.3); border-radius:14px; padding:12px 14px; margin:14px 16px;}
.coin-box .valor{font-size:20px; font-weight:700; color:var(--yellow);}
.coin-box .label{font-size:11px; color:var(--muted);}

.pro-box{margin:14px 16px; background:linear-gradient(135deg, rgba(124,58,237,0.2), rgba(0,229,255,0.1)); border:1px solid rgba(124,58,237,0.4); border-radius:14px; padding:14px; text-align:center;}
.pro-box h3{font-size:14px; margin-bottom:6px;}
.pro-box p{font-size:11px; color:var(--muted); margin-bottom:10px;}

.social-row{display:flex; gap:8px; margin:14px 16px 0;}
.social-row a{flex:1; text-align:center; background:var(--card); padding:10px; border-radius:12px; font-size:16px;}

.metric-card{background:var(--card); border-radius:14px; padding:12px; margin-bottom:10px; font-size:12px;}
.metric-card .titulo{font-weight:600; margin-bottom:6px;}
.metric-card .linha{display:flex; justify-content:space-between; color:var(--muted); padding:3px 0;}

.categoria-select{margin-bottom:10px;}

.editar-link{cursor:pointer; text-decoration:underline; margin-left:8px;}

.canais-oficiais{display:flex; align-items:center; gap:10px; padding:0 16px 10px; font-size:12px; color:var(--muted); flex-wrap:wrap;}
.canais-oficiais a{background:var(--card); color:#fff; padding:6px 12px; border-radius:12px; font-weight:600;}

.audiocash-info{background:rgba(255,214,10,0.1); border:1px solid rgba(255,214,10,0.3); border-radius:12px; padding:10px 12px; font-size:11px; color:#ddd; text-align:left; margin:14px 0; line-height:1.5;}
.audiocash-info b{color:var(--yellow);}

.conversa-item{display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,0.06); cursor:pointer;}
.conversa-item .av{width:38px; height:38px; border-radius:50%; background:var(--grad); flex-shrink:0;}
.conversa-item img.av{object-fit:cover;}
.conversa-item .info{flex:1; min-width:0;}
.conversa-item .nome{font-size:13px; font-weight:600;}
.conversa-item .ultima{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.conversa-item .badge-nao-lida{background:var(--pink); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:2px 7px;}

.msg-bubble{max-width:75%; padding:9px 12px; border-radius:14px; font-size:13px; margin-bottom:8px;}
.msg-bubble.minha{background:var(--grad); color:#fff; margin-left:auto; border-bottom-right-radius:4px;}
.msg-bubble.dele{background:var(--card); margin-right:auto; border-bottom-left-radius:4px;}

.marcar-btn{background:var(--card); color:#fff; font-size:11px; font-weight:600; padding:6px 12px; border-radius:12px; margin-left:6px;}
.marcar-btn.marcado{background:var(--yellow); color:#241a00;}

.festival-card{background:var(--card); border-radius:18px; padding:16px; margin-bottom:16px;}
.festival-card h3{font-size:16px; margin-bottom:6px;}
.festival-card .meta{font-size:12px; color:var(--muted); margin-bottom:10px; display:flex; flex-wrap:wrap; gap:10px;}
.festival-card p{font-size:13px; color:#ddd; margin-bottom:12px;}
.participante-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,0.06);}
.participante-row .av{width:30px; height:30px; border-radius:50%; background:var(--grad); flex-shrink:0; object-fit:cover;}
.participante-row .nome{flex:1; font-size:13px;}
.participante-row .votos{font-size:12px; color:var(--yellow); font-weight:700; margin-right:8px;}

/* ===== STORIES ===== */
.stories-row{display:flex; gap:12px; overflow-x:auto; padding:12px 16px; }
.story-circle{display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; width:62px; cursor:pointer;}
.story-avatar{width:58px; height:58px; border-radius:50%; padding:2px; background:var(--grad); display:flex; align-items:center; justify-content:center; position:relative;}
.story-avatar.vazio{background:var(--card); border:2px dashed rgba(255,255,255,0.25);}
.story-avatar img, .story-avatar .inner{width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--bg);}
.story-avatar .inner{background:var(--card); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;}
.story-plus{position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:var(--pink); border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff;}
.story-nome{font-size:10px; color:#ddd; text-align:center; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.story-viewer{position:fixed; inset:0; background:#000; z-index:250; display:none; align-items:center; justify-content:center;}
.story-viewer.open{display:flex;}
.story-viewer img{width:100%; height:100%; object-fit:contain; background:#000;}
.story-progress{position:absolute; top:10px; left:10px; right:10px; height:3px; background:rgba(255,255,255,0.25); border-radius:3px; z-index:3; overflow:hidden;}
.story-progress::after{content:''; display:block; height:100%; width:0%; background:#fff; animation:storybar 5s linear forwards;}
@keyframes storybar{ to{width:100%;} }
.story-top{position:absolute; top:24px; left:14px; right:14px; z-index:3; display:flex; justify-content:space-between; align-items:center;}
.story-user{display:flex; align-items:center; gap:8px; color:#fff; font-size:13px; font-weight:600; background:rgba(0,0,0,0.4); padding:6px 12px; border-radius:16px;}
.story-user img{width:26px; height:26px; border-radius:50%; object-fit:cover;}
.story-nav{position:absolute; inset:0; display:flex; z-index:2;}
.story-nav div{flex:1;}

.pro-box{display:block;}
.pro-box .btn-block{flex:1; width:auto;}

.story-viewer video{width:100%; height:100%; object-fit:contain; background:#000;}

.voto-aviso{font-size:11px; color:var(--muted); text-align:center; margin-top:10px;}
.voto-aviso a{color:var(--cyan); font-weight:600;}