:root{--bg:#0D1425;--bg2:#111827;--card:#1B2A4A;--elev:#243660;--gold:#C8A24E;--gold-l:#D4B365;--aurora:#F4E8C1;--txt:#F2F2F0;--txt2:rgba(244,232,193,.65);--txt3:rgba(255,255,255,.3);--brd:rgba(200,162,78,.1);--brd2:rgba(200,162,78,.22);--fh:'Source Serif 4',Georgia,serif;--fb:'Inter',-apple-system,sans-serif;--nh:72px;--success:#4A7C59;--error:#B84848}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overflow-x:hidden;background:var(--bg);min-height:100vh;width:100%}
#ar{font-family:var(--fb);color:var(--txt);background:var(--bg);min-height:100vh;width:100%;position:relative;overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased}
.pg{padding-bottom:calc(var(--nh) + 16px + env(safe-area-inset-bottom));min-height:100vh;animation:fi .35s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes su{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes si{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes br{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:1}}
@keyframes wf{0%,100%{transform:scaleY(.35);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@keyframes gl{0%,100%{box-shadow:0 0 20px rgba(200,162,78,.15)}50%{box-shadow:0 0 44px rgba(200,162,78,.3)}}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sp{from{width:0}to{width:100%}}
@keyframes rot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Nav */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:var(--nh);background:rgba(13,20,37,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--brd);display:flex;align-items:center;justify-content:space-around;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
.ni{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;background:none;border:none;color:var(--txt3);font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.02em;transition:color .2s}
.ni.a{color:var(--gold)}.ni.a svg{stroke:var(--gold)}

/* Buttons */
.bg{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;background:var(--gold);color:var(--bg);border:none;border-radius:50px;font-family:var(--fb);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s}.bg:active{transform:scale(.97);opacity:.9}
.bo{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;background:transparent;color:var(--gold);border:1.5px solid rgba(200,162,78,.3);border-radius:50px;font-family:var(--fb);font-size:14px;font-weight:600;cursor:pointer}.bo:active{background:rgba(200,162,78,.08)}
.bs{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;background:rgba(200,162,78,.1);color:var(--gold);border:none;border-radius:50px;font-family:var(--fb);font-size:13px;font-weight:700;cursor:pointer}.bs:active{opacity:.8}

/* Cards */
.cd{background:rgba(27,42,74,.4);border-radius:16px;border:1px solid var(--brd);backdrop-filter:blur(8px);transition:all .15s}
.cd:active{border-color:var(--brd2)}
.cg{background:rgba(200,162,78,.06);border:1px solid rgba(200,162,78,.12);border-radius:16px}

/* Misc */
.ch{display:inline-flex;padding:8px 18px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--brd);background:transparent;color:var(--txt2);white-space:nowrap;transition:all .15s}
.ch.a{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.sx{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.sx::-webkit-scrollbar{display:none}
.pb{height:4px;background:rgba(200,162,78,.1);border-radius:2px;overflow:hidden}.pf{height:100%;border-radius:2px;background:var(--gold);transition:width .5s cubic-bezier(0,0,.2,1)}
.hd{position:sticky;top:0;z-index:50;background:rgba(13,20,37,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--brd);padding:14px 20px;display:flex;align-items:center;gap:12px}
.sk{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;background:rgba(200,162,78,.08);border:1px solid rgba(200,162,78,.12);font-size:12px;font-weight:700;color:var(--gold)}
.ol{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.cp{background:rgba(27,42,74,.3);border-radius:16px;padding:16px;border:1px solid var(--brd);margin-bottom:10px}
.prb{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:50px;border:1.5px solid var(--brd);background:transparent;font-family:var(--fb);font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer}.prb.p{border-color:var(--gold);color:var(--gold);background:rgba(200,162,78,.08)}
.cg2{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:20px}
.cb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--brd);border-radius:10px;background:rgba(27,42,74,.3);font-size:15px;font-weight:600;color:var(--txt2);cursor:pointer;transition:all .15s}.cb:active{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:scale(.93)}
.hl{background:linear-gradient(to bottom,transparent 55%,rgba(200,162,78,.2) 55%);border-radius:2px}
.bi{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--brd);cursor:pointer}.bi:active{background:rgba(200,162,78,.03)}
.tp{display:flex;gap:4px;background:rgba(27,42,74,.5);border-radius:50px;padding:3px}
.tpi{padding:10px 18px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--txt3);transition:all .2s}.tpi.a{background:var(--gold);color:var(--bg)}
.vb{position:fixed;bottom:calc(var(--nh) + 4px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 32px);background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:12px 16px;display:flex;justify-content:space-around;z-index:80;animation:su .25s;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.vbi{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--txt2);background:none;border:none;cursor:pointer;font-family:var(--fb);font-size:10px;font-weight:600}
.fab{position:fixed;bottom:calc(var(--nh) + 16px + env(safe-area-inset-bottom));right:20px;width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 24px rgba(200,162,78,.3);z-index:80}.fab:active{transform:scale(.93)}
.wf{display:flex;align-items:center;gap:2px;height:32px}.wf span{display:block;width:3px;border-radius:2px;background:var(--gold)}
.lock-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;background:rgba(200,162,78,.1);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:.03em}
.free-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;background:rgba(74,124,89,.15);font-size:10px;font-weight:700;color:#6BAF7B;letter-spacing:.03em}

/* Mini-player persistente */
.mp{position:fixed;bottom:calc(var(--nh) + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:100%;height:60px;background:rgba(13,20,37,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--brd);z-index:90;cursor:pointer;animation:su .25s;display:flex;flex-direction:column}
.mpf{position:absolute;top:0;left:0;height:2px;background:var(--gold);transition:width .3s linear;pointer-events:none}
.mpr{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;min-width:0}
.mpt{flex:1;min-width:0;font-family:var(--fb);font-size:13px;font-weight:600;color:var(--aurora);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mps{font-size:11px;color:var(--txt3);font-weight:500;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpb{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 18px rgba(200,162,78,.18)}.mpb:active{transform:scale(.94)}
body.has-mini .pg{padding-bottom:calc(var(--nh) + 60px + 16px + env(safe-area-inset-bottom))}
body.has-mini .fab{bottom:calc(var(--nh) + 60px + 16px + env(safe-area-inset-bottom))}
body.has-mini .vb{bottom:calc(var(--nh) + 60px + 4px + env(safe-area-inset-bottom))}
::selection{background:rgba(200,162,78,.3);color:var(--aurora)}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(200,162,78,.12);border-radius:2px}

/* Tablet e desktop — "simulador de celular" centralizado */
@media (min-width:769px){
  #ar{max-width:480px;margin:0 auto}
  .nav{max-width:480px}
  .mp{max-width:480px}
  .vb{max-width:448px}
  .fab{right:calc(50% - 216px)}
}