/* Retro Wave pentru Windows — fila AUDIO (playerul de muzică din PC) */
body.auo #grid, body.auo #empty, body.auo #sub, body.auo #lv, body.auo #stage, body.auo #nowbar, body.auo #osd,
body.auo #legend, body.auo #t_cc, body.auo #t_search, body.auo #wfan, body.auo #ssong { display: none !important; }
body.rwd #tabs .tb { padding: 0 24px; margin-right: 10px; }
body.rwd #t_cc { max-width: 250px; padding: 0 18px; }
body.rwd .tb.sep { margin-left: 18px; }
#t_audio.act { color: #1a0f00; background: linear-gradient(#ffd966, #e69a00); border-color: #5a3a00; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

#aud { display: none; position: absolute; left: 0; top: 112px; width: 1920px; height: 968px; z-index: 12; background: linear-gradient(#0d0b1f, #04040a); font-family: inherit; color: var(--text); }
body.auo #aud { display: block; }
#aud * { box-sizing: border-box; }
#aud .pn { position: absolute; background: linear-gradient(#171a27, #0e101a); border: 3px solid #2a2e3a; border-radius: 16px; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.55); }
#aud h2 { margin: 0; font-size: 30px; letter-spacing: 2px; color: var(--gold); font-weight: bold; }
#aud .btn { display: inline-block; height: 52px; line-height: 46px; padding: 0 20px; font-size: 24px; font-weight: bold; color: #cfd3df; background: linear-gradient(#444a5a, #2b2f3b); border: 3px solid #14161e; border-radius: 11px; box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 6px rgba(0,0,0,.5); cursor: pointer; white-space: nowrap; user-select: none; }
#aud .btn:hover { filter: brightness(1.25); }
#aud .btn:active { transform: translateY(2px); }
#aud .btn.on { color: #06140a; background: linear-gradient(#7dff5f, #2fc30f); border-color: #0d3a05; }
#aud .btn.go { color: #1a0f00; background: linear-gradient(#ffd966, #e69a00); border-color: #5a3a00; }

/* ---- biblioteca (stânga) ---- */
#aubr { left: 28px; top: 14px; width: 640px; height: 940px; }
#aubr h2 { position: absolute; left: 22px; top: 14px; }
#aupl2 { position: absolute; left: 14px; top: 62px; width: 612px; height: 52px; white-space: nowrap; overflow: hidden; }
#aupl2 .btn { height: 44px; line-height: 38px; font-size: 20px; padding: 0 14px; margin-right: 8px; }
#aupath { position: absolute; left: 20px; top: 124px; width: 600px; height: 40px; line-height: 40px; font-size: 21px; color: var(--dim); overflow: hidden; white-space: nowrap; }
#aufl { position: absolute; left: 14px; top: 170px; width: 612px; height: 678px; overflow-y: auto; overflow-x: hidden; }
#aufl::-webkit-scrollbar, #aupls::-webkit-scrollbar { width: 14px; }
#aufl::-webkit-scrollbar-thumb, #aupls::-webkit-scrollbar-thumb { background: #4a5166; border-radius: 7px; border: 3px solid #12141f; }
.fr { position: relative; height: 56px; line-height: 56px; padding: 0 56px 0 52px; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-bottom: 1px solid #1b1f2d; }
.fr:hover { background: #1c2033; }
.fr svg { position: absolute; left: 12px; top: 13px; width: 30px; height: 30px; }
.fr.up { color: var(--gold); }
.fr .ad { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; line-height: 36px; text-align: center; font-size: 32px; font-weight: bold; color: var(--neon); border: 2px solid #2c5a22; border-radius: 9px; background: #0c1a0c; }
.fr .ad:hover { background: #1d4a14; }
.fr.fl .nm { color: #e6e9f2; }
#aubtm { position: absolute; left: 14px; bottom: 14px; width: 612px; height: 80px; }
#aubtm .btn { margin: 16px 6px 0 0; height: 48px; line-height: 42px; font-size: 20px; padding: 0 14px; }
#auerr { position: absolute; left: 20px; top: 200px; font-size: 24px; color: #ff7a7a; }

/* ---- player (dreapta sus) ---- */
#aupn { left: 692px; top: 14px; width: 1200px; height: 330px; }
#auvz { position: absolute; left: 20px; top: 20px; width: 600px; height: 290px; border-radius: 12px; overflow: hidden; border: 3px solid #333a4e; background: #02020a; box-shadow: 0 6px 16px rgba(0,0,0,.6), inset 0 0 12px rgba(0,0,0,.8); }
#auviz { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }
#auvz .vzb { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; padding: 0 8px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.78)); opacity: 0; transition: opacity .25s; white-space: nowrap; }
#auvz:hover .vzb, #auvz.big .vzb { opacity: 1; }
#auvz .vzb span { display: inline-block; height: 34px; line-height: 32px; margin: 6px 6px 0 0; padding: 0 12px; font-size: 20px; font-weight: bold; color: #dfe3ef; background: rgba(40,44,60,.9); border: 2px solid #4a5166; border-radius: 8px; cursor: pointer; user-select: none; }
#auvz .vzb span:hover { background: #3b4160; }
#auvz .vzb span.on { color: #06140a; background: #5cf03a; border-color: #2b8a14; }
#auvz .vzb #vzn { background: none; border: none; color: var(--gold); cursor: default; min-width: 150px; text-align: center; padding: 0 4px; }
#vzname { position: absolute; left: 12px; top: 8px; font-size: 20px; color: rgba(255,255,255,.55); text-shadow: 0 1px 3px #000; pointer-events: none; transition: opacity .6s; }
#auvz.big { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 60; border-radius: 0; border: none; }
#aucov { position: absolute; left: 650px; top: 20px; width: 110px; height: 110px; border-radius: 10px; border: 3px solid #333a4e; background: radial-gradient(circle at 35% 30%, #3b3f58, #14151f); overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
#aucov img { width: 100%; height: 100%; object-fit: cover; display: none; }
#aucov b { position: absolute; left: 0; top: 20px; width: 100%; text-align: center; font-size: 64px; color: #4a5070; }
#autit { position: absolute; left: 778px; top: 16px; width: 404px; font-size: 32px; line-height: 38px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#auart { position: absolute; left: 778px; top: 58px; width: 404px; font-size: 24px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aufmt { position: absolute; left: 650px; top: 142px; width: 534px; font-size: 20px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aufmt i { font-style: normal; color: #0a1a0a; background: var(--neon); border-radius: 6px; padding: 1px 9px; margin-right: 8px; font-weight: bold; }
#aufmt i.hd { background: var(--gold); }
#aufmt i.tc { background: var(--violet); }
#ausk { position: absolute; left: 650px; top: 186px; width: 534px; height: 26px; }
#ausk .tr { position: absolute; left: 76px; right: 82px; top: 6px; height: 14px; border-radius: 7px; background: #05060c; border: 2px solid #232739; cursor: pointer; }
#ausk .fl { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, #2fc30f, #ffd966); }
#ausk .kn { position: absolute; top: -7px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8bfd6); box-shadow: 0 0 8px rgba(255,255,255,.5); }
#ausk span { position: absolute; top: 0; font-size: 21px; color: var(--dim); font-variant-numeric: tabular-nums; }
#aut1 { left: 0; } #aut2 { right: 0; }
#auctl { position: absolute; left: 650px; top: 236px; width: 540px; height: 52px; white-space: nowrap; }
#auctl .btn { width: 56px; padding: 0; text-align: center; margin-right: 8px; height: 50px; }
#auctl .btn svg { width: 26px; height: 26px; margin-top: 9px; fill: currentColor; }
#auctl .btn.pp { width: 74px; }
#auctl .sp { display: inline-block; width: 10px; }
#aueq { height: 50px !important; line-height: 44px !important; width: auto !important; padding: 0 14px !important; font-size: 20px !important; margin-right: 0 !important; }
#auvol { position: absolute; left: 700px; top: 294px; width: 300px; height: 28px; cursor: pointer; }
#auvol .tr { position: absolute; left: 0; right: 0; top: 7px; height: 14px; border-radius: 7px; background: #05060c; border: 2px solid #232739; }
#auvol .fl { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #39ff14, #ffcf4a); }
#auvi { position: absolute; left: 652px; top: 291px; width: 34px; height: 34px; fill: var(--dim); }
#aust { position: absolute; left: 1010px; top: 292px; width: 174px; text-align: right; font-size: 19px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- playlist (dreapta jos) ---- */
#aulp { left: 692px; top: 358px; width: 1200px; height: 596px; }
#aulp h2 { position: absolute; left: 22px; top: 12px; }
#aulc { position: absolute; left: 190px; top: 20px; font-size: 21px; color: var(--dim); }
#aufi { position: absolute; right: 360px; top: 10px; width: 300px; height: 44px; font-size: 22px; padding: 0 12px; color: var(--text); background: #05060c; border: 2px solid #2a2e3a; border-radius: 9px; outline: none; font-family: inherit; }
#aufi:focus { border-color: var(--violet); }
#aulp .tb2 { position: absolute; top: 8px; }
#aupls { position: absolute; left: 12px; top: 64px; width: 1176px; height: 520px; overflow-y: auto; overflow-x: hidden; }
#aupli { position: relative; width: 100%; }
.pr { position: absolute; left: 0; width: 100%; height: 62px; padding: 6px 150px 0 66px; border-bottom: 1px solid #1b1f2d; cursor: pointer; overflow: hidden; }
.pr:hover { background: #1a1e30; }
.pr.sel { background: #262a47; outline: 2px solid var(--violet); outline-offset: -2px; }
.pr.cur { background: #12301a; }
.pr.cur .p1 { color: var(--neon); }
.pr .dot { position: absolute; left: 20px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb25a, #e65c00); box-shadow: 0 0 6px rgba(255,140,0,.6); }
.pr.cur .dot { background: radial-gradient(circle at 35% 30%, #b6ff9f, #19b300); box-shadow: 0 0 12px 3px rgba(57,255,20,.7); }
.pr .p1 { font-size: 25px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .p2 { font-size: 18px; line-height: 20px; color: #7f879c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .du { position: absolute; right: 60px; top: 14px; font-size: 24px; color: var(--dim); font-variant-numeric: tabular-nums; }
.pr .rm { position: absolute; right: 10px; top: 12px; width: 38px; height: 38px; line-height: 34px; text-align: center; font-size: 28px; color: #c66; border-radius: 8px; display: none; }
.pr:hover .rm { display: block; }
.pr .rm:hover { background: #3a1616; }
#auemp { position: absolute; left: 0; top: 150px; width: 100%; text-align: center; font-size: 28px; color: var(--dim); line-height: 42px; padding: 0 120px; }
#aueqp { display: none; position: absolute; left: 640px; top: 126px; width: 548px; z-index: 5; padding: 10px 10px 6px; white-space: normal; }
#aueqp.show { display: block; }
#aueqp .btn { margin: 0 8px 4px 0; height: 46px; line-height: 40px; font-size: 21px; padding: 0 16px; }
#audrop { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; background: rgba(40,20,90,.82); border: 6px dashed var(--violet); text-align: center; line-height: 880px; font-size: 54px; font-weight: bold; color: #fff; }
body.audrag #audrop { display: block; }
#audpr { position: absolute; left: 190px; top: 60px; height: 5px; width: 0; background: var(--violet); border-radius: 3px; }

#vzpick { display: none; position: absolute; left: 0; top: 0; bottom: 46px; width: 290px; overflow-y: auto; background: rgba(6,8,16,.93); z-index: 5; padding: 6px 0; }
#vzpick .vc { padding: 8px 12px 4px; font-size: 18px; font-weight: bold; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
#vzpick .vi { padding: 5px 16px; font-size: 20px; color: #cfd5e6; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vzpick .vi:hover { background: #2a3050; }
#vzpick .vi.on { background: #5cf03a; color: #06140a; font-weight: bold; }
#auvz.big #vzpick { width: 520px; }
#auvz.big #vzpick .vi { font-size: 30px; padding: 8px 24px; }
#auvz.big #vzpick .vc { font-size: 26px; }