* { margin:0; padding:0; box-sizing:border-box; font-family:system-ui, -apple-system, sans-serif; }
:root {
    --fundo: #121c14;
    --card: #1e2e22;
    --prim: #1db954;
    --hover: #21d060;
    --texto: #e8f5eb;
    --claro: #94b89f;
    --borda: #2a4030;
    --erro: #d32f2f;
}
body { background:var(--fundo); color:var(--texto); min-height:100vh; padding-bottom:90px; }
.cabecalho { background:var(--card); padding:1rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; border-bottom:1px solid var(--borda); }
.logo { font-weight:bold; font-size:1.3rem; color:var(--prim); text-decoration:none; }
.navegacao a { color:var(--claro); margin:0 .6rem; text-decoration:none; }
.navegacao a:hover, .navegacao a.ativo { color:var(--prim); }
.container { max-width:1200px; margin:0 auto; padding:1rem; }
.titulo-pagina { margin:1rem 0; color:var(--prim); }
.aviso { background:rgba(29,185,84,.15); border:1px solid var(--prim); padding:1rem; border-radius:8px; margin-bottom:1rem; }
.caixa { background:var(--card); border-radius:12px; padding:1.5rem; border:1px solid var(--borda); margin-bottom:1rem; }
input { width:100%; padding:.8rem; margin:.5rem 0; background:var(--fundo); border:1px solid var(--borda); color:var(--texto); border-radius:6px; font-size:1rem; }
.bt { background:var(--prim); border:none; padding:.7rem 1.4rem; border-radius:25px; color:white; font-weight:bold; cursor:pointer; transition:.2s; font-size:1rem; }
.bt:hover { background:var(--hover); }
.bt-pequeno { background:transparent; border:none; color:var(--texto); font-size:1.2rem; padding:.4rem .6rem; cursor:pointer; border-radius:50%; width:40px; height:40px; }
.bt-pequeno:hover { background:rgba(255,255,255,.1); }
.grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:1rem; }
.cartao { background:var(--card); border-radius:10px; padding:.8rem; cursor:pointer; transition:.2s; border:1px solid transparent; }
.cartao:hover { border-color:var(--prim); transform:translateY(-2px); }
.cartao img { width:100%; border-radius:6px; aspect-ratio:16/9; object-fit:cover; margin-bottom:.5rem; }
.cartao-titulo { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cartao-autor { font-size:.85rem; color:var(--claro); }

.player-bar { position:fixed; bottom:0; left:0; right:0; background:var(--card); padding:.8rem 1rem; display:flex; align-items:center; gap:.5rem; border-top:1px solid var(--borda); z-index:200; }
.titulo-tocando { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.progresso { height:4px; background:var(--borda); border-radius:2px; flex:1; cursor:pointer; }
.barra-progresso { height:100%; background:var(--prim); width:0; border-radius:2px; transition:width .1s linear; }

.nav-inferior { position:fixed; bottom:0; left:0; right:0; background:var(--card); display:flex; justify-content:space-around; padding:.6rem 0; border-top:1px solid var(--borda); z-index:150; padding-bottom:max(.6rem, env(safe-area-inset-bottom)); }
.nav-inferior a { color:var(--claro); text-decoration:none; text-align:center; font-size:.8rem; }
.nav-inferior a.ativo, .nav-inferior a:hover { color:var(--prim); }

.tela-cheia { position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:300; display:none; align-items:center; justify-content:center; padding:2rem; }
.tela-cheia.aberta { display:flex; }
.conteudo-tela { text-align:center; max-width:400px; width:100%; }
.conteudo-tela img { width:100%; border-radius:12px; margin-bottom:1.5rem; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.fechar-tela { position:absolute; top:1.5rem; right:1.5rem; background:transparent; border:none; color:white; font-size:1.5rem; cursor:pointer; }

.abas { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; border-bottom:1px solid var(--borda); padding-bottom:.5rem; }
.aba-btn { background:transparent; border:none; color:var(--claro); padding:.7rem 1rem; cursor:pointer; border-radius:6px; }
.aba-btn.ativo { color:var(--prim); background:rgba(29,185,84,.1); }

.desktop-only { display:block; }
.mobile-only { display:none; }

@media (max-width:768px) {
    .desktop-only { display:none; }
    .mobile-only { display:flex; }
    .grade { grid-template-columns:repeat(2,1fr); gap:.8rem; }
    .cabecalho { padding:.8rem; }
    .conteudo-tela img { max-width:280px; }
}

@supports (-webkit-touch-callout: none) {
    .player-bar { padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
    body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
    .nav-inferior { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
}

.eh-ios #player {
    position: fixed; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;
}