:root{--bg:#08090c;--surface:#111318;--surface-2:#181b22;--surface-3:#20242d;--line:#282c35;--text:#f5f7fb;--muted:#a0a8b6;--accent:#50e3b6;--accent-strong:#19c996;--danger:#ff7891}*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:radial-gradient(900px 520px at 60% -80px,#173832 0%,transparent 56%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{padding-bottom:100px}button,input{font:inherit}.shell{min-height:calc(100vh - 100px);display:grid;grid-template-columns:250px 1fr}.sidebar{background:rgba(8,9,12,.78);backdrop-filter:blur(16px);border-right:1px solid var(--line);padding:28px 16px;position:sticky;top:0;height:calc(100vh - 100px)}.brand{display:flex;align-items:center;gap:11px;padding:0 10px;margin-bottom:35px;font-size:18px;letter-spacing:-.03em}.brand-mark{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;color:#06130f;background:linear-gradient(135deg,var(--accent),#72d9ff);font-size:15px;box-shadow:0 8px 24px rgba(80,227,182,.2)}.nav{width:100%;border:0;background:transparent;color:var(--muted);padding:12px 14px;border-radius:11px;text-align:left;cursor:pointer;font-weight:650;font-size:14px;transition:.16s margin,.16s background,.16s color}.nav:hover,.nav.active{color:#fff;background:var(--surface-2)}.nav.active{box-shadow:inset 3px 0 var(--accent)}.side-note{position:absolute;bottom:24px;left:25px;right:24px;color:#6e7580;font-size:12px;line-height:1.55}.main{padding:43px clamp(22px,5vw,74px) 46px;max-width:1560px;width:100%;margin:auto}.topbar{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:850;color:var(--accent)}h1{font-size:clamp(35px,4vw,53px);line-height:1.02;letter-spacing:-.055em;margin:9px 0 0}.search{width:min(365px,40vw);border:1px solid var(--line);border-radius:999px;padding:13px 18px;background:rgba(20,23,29,.92);color:var(--text);outline:none;transition:.15s}.search:focus{border-color:#5f6a79;box-shadow:0 0 0 4px rgba(80,227,182,.08)}.section-title{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.section-title h2{font-size:22px;letter-spacing:-.03em;margin:0}.section-title span{color:var(--muted);font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:17px;margin-top:18px}.card{position:relative;border:1px solid transparent;border-radius:16px;padding:12px;background:transparent;cursor:pointer;transition:.18s transform,.18s background,.18s border-color}.card:hover{transform:translateY(-4px);background:var(--surface);border-color:var(--line)}.art{height:165px;border-radius:12px;background:linear-gradient(145deg,#27303e,#12141a);display:grid;place-items:center;overflow:hidden;font-size:45px;color:#f2f6fb}.art img{width:100%;height:100%;object-fit:cover}.card h3{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 4px}.card p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.badge{font-size:10px;letter-spacing:.06em;color:#b6bfcb;border:1px solid #343945;border-radius:999px;padding:4px 7px}.heart{border:0;background:transparent;color:#9ba4b2;cursor:pointer;font-size:18px}.heart.on{color:var(--danger)}.empty{border:1px dashed #343945;border-radius:16px;padding:34px;text-align:center;color:var(--muted);margin-top:20px}.view{display:none}.view.active{display:block}.hidden{display:none!important}.discover{max-width:1040px}.discover-hero{padding:31px;border-radius:23px;border:1px solid #2f3540;background:linear-gradient(125deg,rgba(80,227,182,.14),rgba(28,33,43,.94) 45%,rgba(12,14,18,.95));margin-bottom:30px}.discover-hero h2{font-size:29px;letter-spacing:-.04em;margin:7px 0}.discover-hero p{margin:0 0 20px;color:#bbc3cf;max-width:650px;line-height:1.55}.youtube-search{display:flex;gap:10px;max-width:720px}.input{min-width:0;width:100%;border:1px solid #38404b;border-radius:12px;padding:13px 15px;background:#0d1015;color:#fff;outline:none}.input:focus{border-color:var(--accent)}.primary{border:0;border-radius:12px;padding:0 19px;background:var(--accent);color:#051511;font-weight:850;white-space:nowrap;cursor:pointer;transition:.16s}.primary:hover{background:#76f4cc;transform:translateY(-1px)}.primary:disabled{opacity:.6;cursor:wait}.status{min-height:18px;margin:13px 0;color:var(--muted);font-size:13px}.status.error{color:#ff9eae}.status.ok{color:var(--accent)}.youtube-results{display:grid;grid-template-columns:1fr;gap:9px}.yt-result{width:100%;display:grid;grid-template-columns:132px 1fr auto;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:9px;text-align:left;cursor:pointer;transition:.16s}.yt-result:hover{border-color:#4a5462;background:var(--surface-2)}.yt-result img{width:132px;height:74px;object-fit:cover;border-radius:9px;background:#20242d}.yt-result strong,.yt-result span{display:block}.yt-result strong{font-size:14px;line-height:1.35}.yt-result span{font-size:12px;color:var(--muted);margin-top:5px}.yt-play{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#052016;font-size:13px}.embed-wrap{margin-top:27px;border:1px solid var(--line);background:#050608;border-radius:18px;overflow:hidden}.embed-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:var(--muted);font-size:12px}.embed-wrap iframe{display:block;border:0;width:100%;aspect-ratio:16/9;max-height:530px;background:#101218}.upload-panel{max-width:650px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:27px}.upload-panel h2{margin:7px 0 10px}.upload-panel p{color:var(--muted);line-height:1.5}.file{padding:10px}.check{display:flex;gap:10px;margin:18px 0;color:#c3cad4;font-size:13px}.playerbar{position:fixed;inset:auto 0 0;height:100px;display:grid;grid-template-columns:1fr minmax(300px,590px) 1fr;align-items:center;gap:20px;padding:0 26px;background:rgba(10,12,16,.94);border-top:1px solid var(--line);backdrop-filter:blur(18px);z-index:8}.now{display:flex;gap:12px;align-items:center;min-width:0}.cover-mini{width:55px;height:55px;border-radius:11px;display:grid;place-items:center;overflow:hidden;background:var(--surface-3)}.cover-mini img{width:100%;height:100%;object-fit:cover}.now div:last-child{min-width:0}.now strong,.now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now strong{font-size:14px}.now span{font-size:12px;color:var(--muted);margin-top:4px}.player-center audio{width:100%;height:40px}.player-right{text-align:right}.player-right span{border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;padding:6px 9px}@media(max-width:820px){body{padding-bottom:91px}.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;display:flex;align-items:center;padding:13px 15px;border-right:0;border-bottom:1px solid var(--line)}.brand{margin:0 auto 0 0}.sidebar nav{display:flex;gap:4px}.nav{font-size:0;width:41px;height:39px;padding:0;text-align:center}.nav::first-letter{font-size:18px}.side-note{display:none}.main{padding:29px 17px}.topbar{display:block;margin-bottom:28px}.search{width:100%;margin-top:20px}.discover-hero{padding:23px}.youtube-search{flex-direction:column}.primary{height:46px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.card{padding:8px}.art{height:142px}.yt-result{grid-template-columns:105px 1fr}.yt-result img{width:105px;height:60px}.yt-play{display:none}.playerbar{height:91px;grid-template-columns:1fr 1.3fr;padding:0 11px}.player-right{display:none}.cover-mini{width:46px;height:46px}}
/* Layout de celular: navegação completa, cards confortáveis e player acessível */
@media (max-width: 820px) {
  body{padding-bottom:94px}
  .shell{display:block;min-height:0}
  .sidebar{position:sticky;top:0;z-index:20;height:auto;padding:12px 14px;display:flex;gap:10px;align-items:center;background:rgba(8,9,12,.97)}
  .brand{font-size:16px;margin:0;white-space:nowrap}
  .brand-mark{width:31px;height:31px;border-radius:10px}
  .sidebar nav{display:flex;gap:5px;overflow-x:auto;flex:1;justify-content:flex-end}
  .nav{display:block;width:auto;height:auto;min-width:max-content;margin:0;padding:9px 11px;font-size:13px;line-height:1.2;text-align:center}
  .nav::first-letter{font-size:13px}
  .side-note{display:none}
  .main{padding:25px 15px 32px}
  .topbar{margin-bottom:25px}
  h1{font-size:34px}
  .search{margin-top:18px;padding:13px 16px}
  .section-title h2{font-size:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}
  .card{padding:9px;border-radius:14px;background:#111318}
  .art{height:calc((100vw - 48px)/2);min-height:135px;max-height:180px}
  .card h3{margin-top:10px;font-size:13px}
  .card p{font-size:12px}
  .discover-hero{padding:20px 17px;border-radius:17px}
  .discover-hero h2{font-size:25px}
  .youtube-search{gap:8px}
  .yt-result{grid-template-columns:104px minmax(0,1fr);gap:11px;padding:7px}
  .yt-result img{width:104px;height:59px}
  .yt-result strong{font-size:13px}
  .embed-wrap{margin-top:18px;border-radius:14px}
  .playerbar{height:94px;grid-template-columns:minmax(0,1fr) minmax(150px,1.2fr);gap:8px;padding:0 10px}
  .cover-mini{width:44px;height:44px}
  .now{gap:8px}.now strong{font-size:12px}.now span{font-size:11px}
  .player-center audio{height:38px}.player-right{display:none}
}
@media (max-width: 430px) {
  .brand strong{display:none}
  .sidebar nav{justify-content:flex-start}
  .nav{padding:9px 8px;font-size:12px}
  h1{font-size:31px}
  .topbar{display:block}
  .grid{gap:7px}
  .art{min-height:128px}
}

.audio-stage{position:relative;display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:center;min-height:260px;margin-top:27px;padding:24px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(120deg,#151a22,#0c0e12)}
.audio-cover{width:230px;height:230px;border-radius:15px;background:linear-gradient(145deg,#263543,#0f141b);display:grid;place-items:center;font-size:65px;color:var(--accent);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.36)}
.audio-cover img{width:100%;height:100%;object-fit:cover}
.audio-meta h3{font-size:28px;line-height:1.12;letter-spacing:-.04em;margin:10px 0}.audio-meta p{color:var(--muted);margin:0}
.youtube-hidden-frame{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-10px;top:-10px;border:0}
@media(max-width:820px){.audio-stage{grid-template-columns:118px 1fr;gap:16px;min-height:150px;padding:16px;margin-top:18px}.audio-cover{width:118px;height:118px;border-radius:12px;font-size:38px}.audio-meta h3{font-size:20px}.audio-meta p{font-size:12px}}

.youtube-control{width:100%;height:42px;border:1px solid #3a434f;border-radius:999px;background:#1a2028;color:#edf2f7;font-weight:700;cursor:pointer}.youtube-control:hover{border-color:var(--accent);color:var(--accent)}

.player-actions{display:flex;align-items:center;gap:9px}.import-control{height:42px;border:0;border-radius:999px;background:var(--accent);color:#062019;font-size:12px;font-weight:850;padding:0 16px;white-space:nowrap;cursor:pointer}.import-control:hover{background:#7af3cf}@media(max-width:820px){.import-control{font-size:10px;padding:0 10px;height:38px}.youtube-control{font-size:10px;height:38px}.player-actions{gap:5px}}

.favorite-youtube{margin-top:17px;border:1px solid #46515f;background:transparent;color:#fff;border-radius:999px;padding:10px 14px;font-weight:750;cursor:pointer}.favorite-youtube:hover,.favorite-youtube.on{border-color:#ff7794;color:#ff91a8}

.youtube-transport{display:flex;align-items:center;gap:5px}.youtube-transport button{width:36px;height:36px;border:0;border-radius:50%;background:#252c35;color:#fff;font-size:16px;cursor:pointer}.youtube-transport button:hover{background:var(--accent);color:#062019}.player-actions{justify-content:flex-end}@media(max-width:820px){.youtube-transport button{width:30px;height:30px;font-size:13px}.youtubeControl{display:none!important}}