:root{--bg:#050505;--panel:#0b0d0b;--panel-border:#1d211d;--card:#141614;--card-border:#242824;--green:#00c853;--green-bright:#1fe065;--green-dark:#0d8a3a;--green-dim:rgba(0,200,83,.14);--text:#f2f4f2;--text-dim:#9aa39b;--red:#e53935;--radius:14px;--font:"Roboto Condensed", "Segoe UI", Arial, sans-serif;--serif:"Playfair Display", Georgia, serif}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);display:flex;flex-direction:column;overflow:hidden;font-size:clamp(13px,.85vw,17px)}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}ul{list-style:none}svg{display:block}#root{display:flex;flex-direction:column;height:100%;min-height:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2c312c;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a403a}.topbar{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:14px 28px;min-height:88px}.brand{display:flex;align-items:center;gap:14px;flex:1 1 0;min-width:0}.logo{font-size:2em;font-weight:800;font-style:italic;letter-spacing:.5px;color:var(--green);white-space:nowrap;text-shadow:0 0 18px rgba(0,200,83,.35)}.logo span{color:#fff}.brand-badge{background:var(--green);color:#041007;font-weight:700;font-size:.95em;padding:.35em 1.2em;border-radius:999px;box-shadow:0 0 14px #00c85366}.main-nav{display:flex;gap:6px;flex:0 0 auto}.nav-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 18px;border-radius:12px;color:var(--text);min-width:96px;transition:background .2s}.nav-item:hover{background:#161a16}.nav-item.active{background:#12351c;box-shadow:inset 0 0 0 1px #1d5429}.nav-ico{position:relative;width:26px;height:26px;color:#fff}.nav-ico svg{width:100%;height:100%}.nav-badge{position:absolute;top:-9px;right:-12px;background:var(--green);color:#041007;font-size:11px;font-weight:700;font-style:normal;min-width:19px;height:19px;padding:0 4px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px #00c85399}.nav-badge.pop{animation:pop .35s ease}@keyframes pop{40%{transform:scale(1.35)}}.nav-label{font-size:.82em;font-weight:500;letter-spacing:.6px}.top-actions{flex:1 1 0;display:flex;justify-content:flex-end;align-items:center;gap:14px}.source-wrap{position:relative}.source-pill{display:flex;align-items:center;gap:11px;min-height:46px;padding:0 1.2em;border-radius:999px;border:1.6px solid #3a403a;color:var(--text);font-weight:700;font-size:.98em;letter-spacing:.4px;background:#ffffff08;transition:border-color .2s,box-shadow .2s,background .2s}.source-pill:hover,.source-pill.open{border-color:var(--green);box-shadow:0 0 16px #00c85347;background:#00c8530f}.source-pill .src-chev{width:12px;height:7px;color:var(--text-dim);transition:transform .2s}.source-pill.open .src-chev{transform:rotate(180deg)}.src-ico{display:flex;align-items:center;flex:0 0 auto}.src-ico svg{height:18px;width:auto;filter:drop-shadow(0 0 6px rgba(255,255,255,.18))}.source-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;min-width:248px;padding:8px;border-radius:16px;border:1px solid var(--panel-border);background:#0e100e;box-shadow:0 18px 44px #0009;display:flex;flex-direction:column;gap:5px;animation:src-menu-in .16s ease both}@keyframes src-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.source-opt{display:flex;align-items:center;gap:11px;min-height:52px;padding:0 1em;border-radius:12px;font-weight:600;font-size:1em;color:var(--text);transition:background .15s,transform .15s}.source-opt:hover{background:#ffffff12}.source-opt:active{transform:scale(.97)}.source-opt.active{background:var(--green-dim);color:var(--green-bright)}.source-opt>svg{width:16px;height:12px;margin-left:auto;color:var(--green-bright)}.source-menu .src-ico svg{height:20px}.layout{flex:1;min-height:0;display:grid;grid-template-columns:clamp(300px,24vw,470px) minmax(0,1fr) clamp(340px,29vw,580px);gap:20px;padding:0 24px 22px}.panel{background:radial-gradient(120% 55% at 50% -8%,rgba(31,224,101,.09),transparent 62%),var(--panel);border:1px solid rgba(31,224,101,.26);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;min-height:0;box-shadow:0 0 18px #1fe0651f,inset 0 0 26px #00000080}.panel-title{font-size:1.15em;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:8px;padding:4px 6px 14px}.flame{font-size:1.1em}.song-list{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding-right:4px}.song-item{display:grid;grid-template-columns:94px 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:11px 14px 11px 11px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;flex:0 0 auto}.song-item:hover{background:#1a1d1a;transform:translate(2px);border-color:#1fe06573;box-shadow:0 0 12px #1fe0652e}.song-item.selected{border-color:var(--green);background:linear-gradient(90deg,#00c8531a,#00c85308);box-shadow:0 0 12px #00c85338}.song-info{min-width:0}.song-title{font-weight:700;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-artist{color:var(--text-dim);font-size:.92em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-dur{color:var(--text);font-weight:700;font-size:.95em}.thumb{position:relative;width:94px;height:62px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:#222}.thumb svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;color:#000000b8}.thumb .dur-tag{position:absolute;right:4px;bottom:4px;background:#000000bf;font-size:11px;font-weight:700;padding:1px 5px;border-radius:4px;color:#fff}.thumb .hot-tag{position:absolute;left:0;top:4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:0 4px 4px 0;letter-spacing:.4px}.th-red{background:radial-gradient(120% 90% at 80% 10%,#ff5a4e33,transparent 60%),linear-gradient(140deg,#5a1017,#2a070c 55%,#12030a)}.th-amber{background:radial-gradient(120% 90% at 75% 15%,#ffb34733,transparent 60%),linear-gradient(140deg,#6b3410,#33160a 55%,#140705)}.th-dark{background:radial-gradient(120% 90% at 70% 10%,#ffffff14,transparent 60%),linear-gradient(140deg,#2b2b31,#131318 60%,#0a0a0d)}.th-purple{background:radial-gradient(120% 90% at 75% 12%,#e05aff40,transparent 60%),linear-gradient(140deg,#4a1265,#260a38 55%,#10041a)}.th-blue{background:radial-gradient(120% 90% at 75% 12%,#4ea8ff40,transparent 60%),linear-gradient(140deg,#0d2c55,#081a33 55%,#040b18)}.th-brown{background:radial-gradient(120% 90% at 75% 12%,#d9a05b33,transparent 60%),linear-gradient(140deg,#4a3018,#241408 55%,#0e0704)}.th-steel{background:radial-gradient(120% 90% at 75% 12%,#9fb6c933,transparent 60%),linear-gradient(140deg,#27404f,#12222c 55%,#081016)}.th-rose{background:radial-gradient(120% 90% at 75% 12%,#ff7ab033,transparent 60%),linear-gradient(140deg,#5c1636,#2c0a1a 55%,#12040b)}.th-night{background:radial-gradient(120% 90% at 75% 12%,#6f8cff33,transparent 60%),linear-gradient(140deg,#131a3a,#0a0e22 55%,#05070f)}.th-sunset{background:radial-gradient(130% 100% at 50% 100%,#ff9a3d55,transparent 65%),linear-gradient(180deg,#2a1030,#7a2d12 55%,#c96a1e)}.tile-beat{background:linear-gradient(140deg,#0a2a6b,#071a45 60%,#04102c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tile-beat b{font-size:12px;color:#fff;font-style:italic;line-height:1}.tile-beat b i{color:#ffd226;font-style:italic}.tile-beat small{font-size:8px;color:#8fb0ff;letter-spacing:.3px}.tile-remix{background:radial-gradient(120% 100% at 50% 0%,#ff2d2d4d,transparent 60%),linear-gradient(160deg,#3a0505,#1c0202 60%,#0d0101);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tile-remix b{color:#ff3b3b;font-size:12px;letter-spacing:1px;font-style:italic}.tile-remix small{font-size:8px;color:#ffb1b1}.center{display:flex;flex-direction:column;gap:16px;min-height:0;min-width:0}.player{flex:1 1 auto;min-height:0;background:radial-gradient(120% 55% at 50% -8%,rgba(31,224,101,.09),transparent 62%),var(--panel);border:1px solid rgba(31,224,101,.26);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 18px #1fe0651f,inset 0 0 26px #00000080}.player-media{position:relative;flex:1;min-height:240px;overflow:hidden;background:radial-gradient(6px 6px at 12% 18%,#7ee7ffcc,transparent 70%),radial-gradient(4px 4px at 28% 8%,#ffffffb0,transparent 70%),radial-gradient(9px 9px at 44% 14%,#3fa9ff99,transparent 70%),radial-gradient(5px 5px at 63% 6%,#b678ff99,transparent 70%),radial-gradient(7px 7px at 81% 16%,#37c8ff88,transparent 70%),radial-gradient(4px 4px at 91% 30%,#ff6ec788,transparent 70%),radial-gradient(5px 5px at 8% 42%,#4ea8ff66,transparent 70%),radial-gradient(4px 4px at 70% 34%,#ffffff66,transparent 70%),radial-gradient(6px 6px at 94% 55%,#ff4d9d55,transparent 70%),radial-gradient(120% 90% at 50% -10%,#123a7a66,transparent 60%),linear-gradient(115deg,transparent 42%,#2f7dff1f 47%,transparent 53%),linear-gradient(65deg,transparent 55%,#7a5cff1a 61%,transparent 68%),linear-gradient(180deg,#0a1730,#0a1226 45%,#05070f 78%,#020308)}.yt-logo{position:absolute;top:16px;right:18px;z-index:3;display:flex;align-items:center;gap:7px;font-weight:700;font-size:1.05em;letter-spacing:-.3px;color:#fff}.yt-play{background:red;width:26px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center}.yt-play svg{width:10px;height:9px}.singer{position:absolute;right:6%;bottom:14%;height:78%;z-index:1;color:#0a0f1e;filter:drop-shadow(0 0 22px rgba(70,140,255,.35)) drop-shadow(0 0 4px rgba(140,190,255,.4))}.lyrics-wrap{position:absolute;left:5%;top:26%;z-index:2;max-width:60%}.rating{display:flex;gap:10px;margin-bottom:14px}.star{width:34px;height:34px;padding:0}.star svg{width:100%;height:100%;fill:none;stroke:#5a615a;stroke-width:1.6}.star.on svg{fill:var(--green);stroke:var(--green);filter:drop-shadow(0 0 6px rgba(0,200,83,.55))}.star:hover{transform:scale(1.12)}.lyric{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(22px,2.3vw,40px);line-height:1.35;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}.lyric .hl{color:var(--green-bright);text-shadow:0 0 16px rgba(0,200,83,.5)}.progress-row{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:14px;padding:40px 26px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82) 55%)}.time{font-weight:700;font-size:.95em;min-width:44px;text-align:center}.progress{flex:1;height:5px;border-radius:99px;background:#3a3f3a;cursor:pointer;position:relative}.progress-fill{height:100%;width:31%;border-radius:99px;background:var(--green);position:relative;box-shadow:0 0 8px #00c85380}.knob{position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 10px #00c853cc}.controls{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:34px;padding:14px 10px 16px;background:#070907}.ctrl{color:#e8eae8;width:30px;height:30px;transition:transform .15s,color .2s}.ctrl svg{width:100%;height:100%}.ctrl:hover{color:var(--green-bright);transform:scale(1.1)}.ctrl.play{width:52px;height:52px;border-radius:50%;background:var(--green);color:#041007;display:flex;align-items:center;justify-content:center;box-shadow:0 0 22px #00c8538c}.ctrl.play svg{width:24px;height:24px}.ctrl.play:hover{color:#041007;transform:scale(1.06)}.ctrl.play .ic-play{display:none}.player.paused .ic-play{display:block}.player.paused .ic-pause{display:none}.search-box{flex:0 0 auto;position:relative;display:flex;align-items:center;background:#101310;border:1px solid #262b26;border-radius:12px;height:58px;padding:0 16px;gap:12px;transition:border-color .2s,box-shadow .2s}.search-box:focus-within{border-color:var(--green);box-shadow:0 0 12px #00c85340}.s-ico{width:22px;height:22px;color:#cfd4cf;flex:0 0 auto}#searchInput{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:1.1em;caret-color:var(--green)}#searchInput::placeholder{color:#79817a}.clear-btn{width:22px;height:22px;color:#e8eae8;flex:0 0 auto;transition:transform .2s,color .2s}.clear-btn svg{width:100%;height:100%}.clear-btn:hover{color:var(--red);transform:rotate(90deg)}.search-wrap{position:relative;flex:0 0 auto}.typeahead{position:absolute;top:-4px;right:calc(100% + 10px);width:clamp(270px,23vw,380px);max-height:310px;overflow-y:auto;z-index:40;background:#101310;border:1px solid #262b26;border-radius:12px;padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 28px #0000008c}.typeahead::-webkit-scrollbar{width:6px}.typeahead::-webkit-scrollbar-thumb{background:#333a33;border-radius:3px}.typeahead::-webkit-scrollbar-thumb:hover{background:var(--green)}.typeahead li{flex:0 0 auto;min-height:46px;display:flex;align-items:center;padding:6px 14px;border-radius:9px;cursor:pointer;transition:background .15s}.typeahead li:active{background:#00c85340}.typeahead li:hover{background:#00c8531f}.ta-title{font-weight:600;font-size:1.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typeahead li:hover .ta-title{color:var(--green-bright)}.keyboard{flex:0 0 auto;display:flex;flex-direction:column;gap:10px}.kb-row{display:grid;grid-template-columns:repeat(13,1fr) 1.15fr;gap:10px}.key{height:54px;border-radius:10px;background:#171a17;border:1px solid #262b26;font-size:1.25em;font-weight:700;color:#f0f2f0;display:flex;align-items:center;justify-content:center;transition:background .12s,transform .08s,border-color .12s;-webkit-user-select:none;user-select:none}.key:hover{background:#212621;border-color:#3a413a}.key:active,.key.pressed{background:var(--green-dim);border-color:var(--green);transform:scale(.94);color:var(--green-bright)}.key svg{width:26px;height:26px}.key-search{grid-column:11 / -1;background:linear-gradient(180deg,#12a444,#0c7a33);border-color:#17c953;color:#fff;letter-spacing:1px;font-size:1.15em;box-shadow:0 0 14px #00c85359}.key-search:hover{background:linear-gradient(180deg,#16b84e,#0e8a3a);border-color:#22e55f}.key-space{grid-column:1 / -1;letter-spacing:1px;font-size:1.05em}.results-head{display:flex;align-items:baseline;justify-content:space-between;padding:4px 6px 14px}.results-head .panel-title{padding:0}.result-count{color:var(--text-dim);font-size:.95em}.result-list{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding-right:4px}.result-item{display:grid;grid-template-columns:102px 1fr 40px;gap:14px;align-items:center;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:11px 14px 11px 11px;flex:0 0 auto;transition:border-color .2s,background .2s}.result-item:hover{background:#1a1d1a}.result-item.selected{border-color:var(--green);background:linear-gradient(90deg,#00c8531a,#00c85305);box-shadow:0 0 12px #00c85338}.result-item .thumb{width:102px;height:66px}.result-info{min-width:0}.result-title{font-weight:700;font-size:1.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-channel{color:var(--text-dim);font-size:.92em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-btn{width:38px;height:38px;border-radius:50%;border:1.6px solid #4a504a;color:#e8eae8;display:flex;align-items:center;justify-content:center;transition:all .2s;flex:0 0 auto}.add-btn svg{width:18px;height:18px}.add-btn:hover{border-color:var(--green);color:var(--green-bright);box-shadow:0 0 10px #00c85366;transform:scale(1.08)}.add-btn.added{border-color:var(--green);background:var(--green);color:#041007}.no-result{color:var(--text-dim);text-align:center;padding:30px 10px;font-size:1.05em}.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:#12351c;border:1px solid var(--green);color:#dfffe9;padding:10px 26px;border-radius:999px;font-weight:700;font-size:1em;opacity:0;pointer-events:none;transition:all .3s ease;z-index:99;box-shadow:0 0 24px #00c85359}.toast.show{opacity:1;transform:translate(-50%)}@media (max-width:1500px){.nav-item{min-width:80px;padding:10px 12px}.kb-row{gap:8px}.key{height:50px}}@media (max-width:1280px){body{overflow:auto;height:auto;min-height:100%}.layout{grid-template-columns:1fr 1fr;grid-template-areas:"center center" "sug res"}.center{grid-area:center}.suggestions{grid-area:sug;max-height:560px}.results{grid-area:res;max-height:560px}.player-media{min-height:380px}.typeahead{position:static;top:auto;right:auto;width:auto;margin-top:8px;max-height:180px}}@media (max-width:820px){.topbar{flex-wrap:wrap;justify-content:center;gap:10px}.brand,.top-actions{flex:0 0 auto}.main-nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}.layout{grid-template-columns:1fr;grid-template-areas:"center" "sug" "res"}.kb-row{grid-template-columns:repeat(12,1fr) 1.15fr;gap:5px}.key{height:44px;font-size:1em;border-radius:8px}.lyrics-wrap{max-width:80%}.controls{gap:20px}}.settings{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;padding:0 24px 22px}.settings-body{flex:1;min-height:0;display:grid;grid-template-columns:clamp(220px,16vw,300px) minmax(0,1fr) clamp(300px,23vw,450px);gap:20px}.settings-menu{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.set-item{flex:1 1 0;min-height:56px;display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:12px;border:1px solid transparent;color:var(--text);font-size:1.22em;font-weight:600;letter-spacing:.3px;text-align:left;transition:background .2s,border-color .2s}.set-item:hover{background:#161a16}.set-item.active{background:linear-gradient(90deg,#00c8532e,#00c8530d);border-color:var(--green);box-shadow:0 0 16px #00c85347;color:#fff}.set-item svg{width:30px;height:30px;flex:0 0 auto}.settings-main{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);overflow-y:auto;display:flex;flex-direction:column}.set-title{display:flex;align-items:center;justify-content:center;gap:20px;color:var(--green-bright);font-size:1.55em;font-weight:700;letter-spacing:1.5px;padding:26px 20px 6px;text-shadow:0 0 14px rgba(0,200,83,.35)}.set-title:before,.set-title:after{content:"";height:1px;width:clamp(40px,11vw,220px)}.set-title:before{background:linear-gradient(90deg,transparent,var(--green))}.set-title:after{background:linear-gradient(90deg,var(--green),transparent)}.connect-grid{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center;align-content:center;justify-content:center;padding:26px 40px 30px}.qr-block{display:flex;flex-direction:column;align-items:center;gap:16px}.qr-label{font-size:1.05em}.qr-frame{position:relative;padding:14px;background:#fff;border-radius:10px;box-shadow:0 0 26px #78c8ff24}.qr-img{width:230px;height:230px;display:block}.corner{position:absolute;width:26px;height:26px;border:3px solid var(--green)}.corner.tl{top:-10px;left:-10px;border-right:none;border-bottom:none;border-radius:6px 0 0}.corner.tr{top:-10px;right:-10px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}.corner.bl{bottom:-10px;left:-10px;border-right:none;border-top:none;border-radius:0 0 0 6px}.corner.br{bottom:-10px;right:-10px;border-left:none;border-top:none;border-radius:0 0 6px}.qr-refresh{display:flex;align-items:center;gap:10px;color:var(--text);font-size:1em;padding:8px 10px;border-radius:10px;transition:color .2s}.qr-refresh:hover{color:var(--green-bright)}.qr-refresh svg{width:20px;height:20px}.connect-steps{display:flex;flex-direction:column;gap:22px;max-width:520px}.connect-steps h3{font-size:1.2em;font-weight:700}.step-list{display:flex;flex-direction:column;gap:20px}.step-list li{display:flex;gap:16px;align-items:flex-start}.step-list b{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--green-dark);border:1px solid var(--green);color:#eafff0;display:flex;align-items:center;justify-content:center;font-size:.95em;font-weight:700;box-shadow:0 0 10px #00c85359}.step-list strong{display:block;font-weight:600;font-size:1.05em}.step-list small{display:block;color:var(--text-dim);margin-top:5px;font-size:.95em}.pin-box{background:#101310;border:1px solid #262b26;border-radius:14px;padding:20px 30px;text-align:center}.pin-box p{font-size:1.05em;margin-bottom:10px}.pin-digits{color:var(--green-bright);font-size:2.5em;font-weight:700;letter-spacing:.22em;text-indent:.11em;text-shadow:0 0 16px rgba(0,200,83,.45)}.settings-side{display:flex;flex-direction:column;gap:20px;min-height:0}.status-panel{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;gap:8px}.side-title{align-self:flex-start;font-size:1.05em;font-weight:700;letter-spacing:.5px;padding:4px 6px 8px}.link-illu{width:min(80%,300px);margin:auto 0 0}.status-ok{color:var(--green-bright);font-size:1.25em;font-weight:700;text-shadow:0 0 12px rgba(0,200,83,.4)}.status-note{color:var(--text-dim);text-align:center;font-size:.98em;line-height:1.5;padding:0 10px}.guide-btn{margin-top:14px;width:100%;background:#101310;border:1px solid #262b26;border-radius:10px;padding:12px;font-size:1em;font-weight:600;transition:border-color .2s,color .2s}.guide-btn:hover{border-color:var(--green);color:var(--green-bright)}.app-panel{display:flex;align-items:center;gap:16px;padding:18px}.app-panel .txt{flex:1;min-width:0}.app-panel h4{font-size:1.02em;font-weight:700;letter-spacing:.5px;margin-bottom:8px}.app-panel p{color:var(--text-dim);font-size:.95em;line-height:1.5}.app-qr{width:88px;height:88px;background:#fff;border-radius:8px;padding:6px;flex:0 0 auto}.sys-body{display:flex;flex-direction:column;gap:16px;padding:16px clamp(20px,3vw,44px) 30px}.sys-row{display:flex;align-items:center;gap:22px;text-align:left;background:#101310;border:1px solid #262b26;border-radius:14px;padding:17px 24px;color:var(--text);transition:border-color .2s,background .2s}.sys-row:hover{border-color:#3a413a;background:#161a16}.sys-ico{flex:0 0 auto;width:56px;height:56px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center}.sys-ico svg{width:30px;height:30px}.sys-label{flex:1;min-width:0;font-size:1.22em;font-weight:500}.sys-vals{display:flex;align-items:center;gap:28px}.sys-val{font-size:1.15em;color:var(--text)}.sys-val.green{color:var(--green-bright)}.sys-chevron{flex:0 0 auto;width:22px;height:22px;color:#e8eae8}.device-body{display:flex;flex-direction:column;gap:12px;padding:16px clamp(20px,3vw,44px) 30px}.device-row{display:flex;align-items:center;gap:20px;background:#101310;border:1px solid #262b26;border-radius:14px;padding:12px 22px}.device-ico{flex:0 0 auto;width:44px;height:44px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center}.device-ico svg{width:24px;height:24px}.device-label{flex:1;min-width:0;font-size:1.12em;font-weight:500}.device-val{font-size:1.08em;font-weight:600;color:#fff;text-align:right}.device-val.green{color:var(--green-bright)}.device-row.toggle,.device-row.reset{width:100%;color:var(--text);cursor:pointer;text-align:left;transition:border-color .2s,background .2s}.device-row.toggle:hover,.device-row.reset:hover{border-color:#3a413a;background:#161a16}.device-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.device-desc{color:var(--text-dim);font-size:.92em;line-height:1.45}.device-ico.danger{background:#ec2740;box-shadow:0 0 16px #ec274055}.device-row.reset .device-label{font-weight:600}.reset-warn{display:flex;align-items:center;gap:12px;margin-top:4px;background:#ec274014;border:1px solid rgba(236,39,64,.35);border-radius:12px;padding:13px 18px;color:#ff8b98;font-size:.98em;line-height:1.45}.reset-warn svg{flex:0 0 auto;width:22px;height:22px;color:#ec2740}.mini-toggle{flex:0 0 auto;width:52px;height:28px;border-radius:14px;background:#232823;border:1px solid #333a33;position:relative;transition:background .2s,border-color .2s}.mini-toggle span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#8a918a;transition:transform .2s,background .2s}.mini-toggle.on{background:#00c85340;border-color:var(--green)}.mini-toggle.on span{transform:translate(24px);background:var(--green-bright)}.update-notes{background:#101310;border:1px solid #262b26;border-radius:14px;padding:18px 24px;display:flex;flex-direction:column;gap:14px}.update-list{display:flex;flex-direction:column;gap:10px}.update-list li{display:flex;align-items:center;gap:12px;font-size:1.05em;color:var(--text)}.update-list li svg{flex:0 0 auto;width:18px;height:18px;color:var(--green-bright)}.sys-actions{display:flex;gap:16px;margin-top:4px}.sys-btn{flex:1;background:linear-gradient(90deg,#00c85347,#00c85324);border:1px solid var(--green);border-radius:12px;padding:14px;color:#fff;font-size:1.08em;font-weight:700;transition:box-shadow .2s,background .2s}.sys-btn:hover{box-shadow:0 0 18px #00c85359}.sys-btn.ghost{background:#101310;border-color:#262b26;color:var(--text)}.sys-btn.ghost:hover{border-color:#3a413a;color:#fff;box-shadow:none}.sys-btn.ghost.danger{border-color:#ec274073;color:#ff8b98}.sys-btn.ghost.danger:hover{border-color:#ec2740;color:#fff;background:#ec274026}.settings-main.has-back{position:relative}.back-btn{position:absolute;top:24px;left:clamp(20px,3vw,44px);width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#101310;border:1px solid #262b26;border-radius:10px;color:var(--text);transition:border-color .2s,color .2s}.back-btn:hover{border-color:var(--green);color:var(--green-bright)}.back-btn svg{width:18px;height:18px}.settings-main.has-back .set-title.left{padding-left:calc(clamp(20px,3vw,44px) + 48px)}.set-title.left{justify-content:flex-start;padding:26px clamp(20px,3vw,44px) 0}.set-title.left:before,.set-title.left:after{display:none}.audio-body{display:flex;flex-direction:column;gap:18px;padding:16px clamp(20px,3vw,44px) 28px}.opt-group{background:#101310;border:1px solid #262b26;border-radius:14px;padding:6px 26px;display:flex;flex-direction:column}.audio-row{display:flex;align-items:center;gap:28px;padding:17px 0}.audio-label{flex:0 0 150px;font-size:1.12em}.audio-val{flex:0 0 50px;text-align:right;font-size:1.12em;font-weight:600}.vol-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:6px;border-radius:99px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--green) 0 var(--fill,50%),#3a3f3a var(--fill,50%) 100%)}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 10px #00c853b3}.vol-slider::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--green-bright);border:none;box-shadow:0 0 10px #00c853b3}.eq-label{color:var(--green-bright);font-size:1.05em;font-weight:700;letter-spacing:1px;margin-top:4px}.eq-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.eq-preset{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:#101310;border:1px solid #262b26;border-radius:12px;padding:20px 10px;color:var(--text);font-size:1.08em;transition:border-color .2s,background .2s,color .2s}.eq-preset svg{width:34px;height:24px}.eq-preset:hover{border-color:#3a413a;background:#161a16}.eq-preset.active{border-color:var(--green);color:var(--green-bright);background:linear-gradient(180deg,#00c85329,#00c8530d);box-shadow:0 0 14px #00c85340}.audio-test-panel{flex:1;gap:16px}.side-title.green{color:var(--green)}.eq-viz{flex:1;min-height:180px;display:flex;align-items:flex-end;gap:3px;padding:6px 2px 2px}.eq-bar{flex:1;border-radius:2px;transform-origin:bottom;-webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 5px);mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 5px)}.eq-viz.playing .eq-bar{animation:eq-bounce .8s ease-in-out infinite alternate}@keyframes eq-bounce{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.test-btn{width:100%;padding:13px;border:1px solid var(--green);border-radius:12px;background:#00c8530f;color:var(--text);font-size:1.08em;font-weight:500;transition:background .2s,box-shadow .2s}.test-btn:hover{background:#00c85329;box-shadow:0 0 14px #00c8534d}.dev-panel{gap:14px}.dev-list{display:flex;flex-direction:column;gap:12px}.dev-row{display:flex;align-items:center;gap:14px;background:#101310;border:1px solid #262b26;border-radius:12px;padding:15px 18px}.dev-row svg{width:26px;height:26px;color:#e8eae8;flex:0 0 auto}.dev-name{flex:1;font-size:1.05em}.dev-status{color:var(--green);font-size:1em}.settings-body.wide{grid-template-columns:clamp(220px,16vw,300px) minmax(0,1fr)}.disp-body{display:flex;flex-direction:column;padding:20px clamp(20px,3vw,44px) 34px}.disp-section{display:flex;flex-direction:column;gap:18px}.disp-row{display:flex;gap:30px;align-items:flex-start}.disp-end{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:56px;color:var(--text)}.disp-end:before{content:"";height:32px}.disp-end svg{width:27px;height:27px}.disp-end span{font-size:1em}.a-small{font-size:1.5em;font-weight:600;line-height:27px}.a-big{font-size:2.7em;font-weight:600;line-height:40px}.disp-slider-col{flex:1;min-width:0;display:flex;flex-direction:column}.disp-val{height:32px;display:flex;align-items:center;font-size:1.3em;font-weight:600}.disp-val.right{justify-content:flex-end}.disp-val.center{justify-content:center}.disp-under{min-height:34px;display:flex;align-items:center;justify-content:center;gap:10px}.disp-under svg{width:22px;height:22px}.vol-slider.white::-webkit-slider-thumb{background:#fff;box-shadow:0 0 8px #ffffff73}.vol-slider.white::-moz-range-thumb{background:#fff;box-shadow:0 0 8px #ffffff73}.disp-divider{height:1px;background:#1c201c;margin:26px 0}.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.theme-card{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text);font-size:1.05em}.theme-frame{position:relative;width:100%;aspect-ratio:16/9.5;border-radius:10px;border:1px solid #2a2e2a;overflow:hidden;display:block;transition:border-color .2s,box-shadow .2s}.theme-card:hover .theme-frame{border-color:#3a413a}.theme-card.active .theme-frame{border-color:var(--green);box-shadow:0 0 16px #00c8534d}.theme-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.theme-check{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--green);border:2px solid #06130a;display:flex;align-items:center;justify-content:center}.theme-check svg{width:13px;height:13px}.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.q-card{position:relative;background:#101310;border:1px solid #262b26;border-radius:12px;padding:36px 12px;font-size:1.15em;color:var(--text);transition:border-color .2s,background .2s}.q-card:hover{border-color:#3a413a;background:#161a16}.q-card.active{border-color:var(--green);background:linear-gradient(180deg,#00c8531f,#00c8530a);box-shadow:0 0 14px #00c85338}.q-note{margin-top:16px;font-size:1.02em}.demo-video{display:flex;align-items:center;gap:28px;background:#101310;border:1px solid #262b26;border-radius:12px;overflow:hidden;padding-right:26px}.demo-thumb{width:clamp(220px,24vw,380px);height:150px;flex:0 0 auto;display:block}.demo-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.demo-info b{font-size:1.35em;font-weight:600}.demo-info span{font-size:1.1em}.outline-btn{flex:0 0 auto;border:1px solid var(--green);border-radius:10px;background:#00c8530a;color:var(--text);padding:14px 28px;font-size:1.1em;transition:background .2s,box-shadow .2s}.outline-btn:hover{background:#00c85324;box-shadow:0 0 12px #00c8534d}.marquee-row{display:flex;align-items:center;gap:24px}.marquee-input{flex:1;min-width:0;background:#0d1013;border:1px solid #262b26;border-radius:10px;padding:17px 20px;color:var(--text);font-family:inherit;font-size:1.15em;outline:none;transition:border-color .2s}.marquee-input:focus{border-color:var(--green)}.lang-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px clamp(20px,3vw,44px) 26px}.lang-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:18px}.lang-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:left;min-height:0;background:#101310;border:1px solid #262b26;border-radius:14px;overflow:hidden;padding:20px 16px;color:var(--text);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}.lang-card:hover{border-color:#3a413a;background:#161a16;transform:translateY(-2px)}.lang-card.active{border-color:var(--green);background:linear-gradient(180deg,#00c8531a,#00c85305 55%);box-shadow:0 0 16px #00c85340}.lang-flag{flex:0 0 auto;width:min(100%,136px);aspect-ratio:3/2;overflow:hidden;display:block;border-radius:7px;border:1px solid rgba(255,255,255,.16)}.lang-flag svg{width:100%;height:100%;display:block}.lang-card.active .lang-flag{border-color:#00c85380}.lang-card .theme-check{width:32px;height:32px;top:10px;right:10px}.lang-card .theme-check svg{width:18px;height:18px}.lang-meta{display:flex;flex-direction:column;align-items:center;gap:2px}.lang-name{max-width:100%;font-size:1.3em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lang-sub{color:#8b948b;font-size:1.02em}.info-body{flex:1;display:flex;flex-direction:column;gap:20px;padding:16px clamp(20px,3vw,44px) 30px}.info-hero{position:relative;overflow:hidden;border:1px solid #262b26;border-radius:14px;background:radial-gradient(70% 95% at 10% 85%,rgba(0,200,83,.16),transparent 62%),radial-gradient(70% 95% at 90% 85%,rgba(47,157,255,.15),transparent 62%),#0a0d10;min-height:clamp(220px,30vh,380px);flex:1;display:flex;align-items:center;justify-content:center}.info-hero-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.info-hero-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:36px 20px}.info-logo{font-size:3.8em;font-weight:800;font-style:italic;letter-spacing:1px;line-height:1;color:var(--green);text-shadow:0 0 26px rgba(0,200,83,.45)}.info-logo span{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.25)}.info-badge{background:var(--green);color:#fff;font-weight:700;font-size:1.3em;padding:.32em 1.7em;border-radius:999px;box-shadow:0 0 20px #00c85380}.info-slogan{font-size:1.4em;font-weight:700;color:#fff}.info-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.info-card{display:flex;align-items:center;gap:18px;background:#101310;border:1px solid #262b26;border-radius:14px;padding:24px 22px}.info-ico{flex:0 0 auto;width:58px;height:58px;border-radius:14px;border:1px solid;display:flex;align-items:center;justify-content:center}.info-ico svg{width:30px;height:30px}.info-card-txt{display:flex;flex-direction:column;gap:7px;min-width:0}.info-card-txt b{font-size:1.18em;font-weight:700}.info-card-txt small{color:var(--text-dim);font-size:.92em}.info-meta{display:flex;align-items:center;justify-content:center;gap:28px;background:#101310;border:1px solid #262b26;border-radius:14px;padding:22px;font-size:1.08em}.info-meta-item{display:flex;align-items:center;gap:11px}.info-meta-item svg{width:23px;height:23px;color:var(--text)}.info-meta-item svg.green{color:var(--green-bright)}.info-meta-item b{font-weight:700;margin-left:3px}.info-meta-divider{width:1px;height:28px;background:#2c312c}@media (max-width:1500px){.qr-img{width:190px;height:190px}.connect-grid{gap:30px;padding:20px 26px}}@media (max-width:1280px){.settings-body,.settings-body.wide{grid-template-columns:1fr}.settings-menu{flex-direction:row;flex-wrap:wrap}.set-item{flex:1 1 auto;justify-content:center;padding:12px 14px}.connect-grid{grid-template-columns:1fr;justify-items:center}.settings-side{flex-direction:row}.settings-side>.panel{flex:1}.theme-grid{grid-template-columns:repeat(3,1fr)}.quality-grid{grid-template-columns:repeat(2,1fr)}.lang-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:820px){.settings-side{flex-direction:column}.eq-presets{grid-template-columns:repeat(2,1fr)}.audio-row{gap:14px}.audio-label{flex-basis:110px;font-size:1em}.theme-grid{grid-template-columns:repeat(2,1fr)}.demo-video{flex-wrap:wrap;padding:14px;gap:16px}.demo-thumb{width:100%;height:160px}.marquee-row{flex-direction:column;align-items:stretch}.info-features{grid-template-columns:1fr}.info-meta{flex-direction:column;gap:12px}.info-meta-divider{width:60%;height:1px}}.queue-screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;margin:0 24px 22px;padding:26px 30px;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius)}.queue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.queue-heading{flex:0 0 auto}.queue-title{font-size:2.1em;font-weight:800;letter-spacing:.5px;line-height:1.1}.queue-sub{color:var(--green-bright);font-size:1.05em;margin-top:8px}.clear-all{flex:0 0 auto;display:flex;align-items:center;gap:10px;border:1px solid #3a413a;border-radius:10px;padding:12px 22px;font-size:1.05em;transition:border-color .2s,color .2s,background .2s}.clear-all svg{width:19px;height:19px}.clear-all:hover{border-color:var(--red);color:#ff8a80;background:#e5393514}.queue-tabsrow{display:flex;align-items:center;gap:6px;border-bottom:1px solid #1d211d}.qtab{position:relative;display:flex;align-items:center;gap:8px;padding:10px 18px 14px;font-size:1.08em;color:var(--text-dim);transition:color .2s}.qtab b{font-weight:700}.qtab:hover{color:var(--text)}.qtab.active{color:var(--green-bright);font-weight:700}.qtab.active:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--green);box-shadow:0 0 8px #00c85399}.queue-filter{margin-left:auto;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--text);font-size:1.02em;transition:color .2s}.queue-filter svg{width:20px;height:20px}.queue-filter:hover{color:var(--green-bright)}.queue-search{margin-left:auto;display:flex;align-items:center;gap:10px;background:#101310;border:1px solid #262b26;border-radius:10px;padding:8px 14px;min-width:min(340px,40vw);margin-bottom:6px}.queue-search:focus-within{border-color:var(--green)}.queue-search svg{width:18px;height:18px;color:#cfd4cf;flex:0 0 auto}.queue-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:1em;caret-color:var(--green)}.queue-search input::placeholder{color:#79817a}.queue-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px 6px 6px 2px}.q-row{position:relative;flex:0 0 auto;display:grid;grid-template-columns:44px 96px minmax(200px,1.35fr) minmax(170px,1fr) minmax(130px,.8fr) 60px 42px 34px;gap:16px;align-items:center;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:12px 18px 12px 12px;transition:border-color .2s,background .2s}.q-row:hover{background:#1a1d1a}.q-row.next{border-color:var(--green);background:linear-gradient(90deg,#00c85314,#00c85305);box-shadow:0 0 14px #00c8532e}.q-row.played{opacity:.55}.q-tag{position:absolute;top:-11px;right:16px;background:var(--green);color:#041007;font-size:.78em;font-weight:800;letter-spacing:.6px;padding:3px 12px;border-radius:6px;box-shadow:0 0 10px #00c85380}.q-row.played .q-tag{background:#3a413a;color:#cfd4cf;box-shadow:none}.q-num{font-size:1.5em;font-weight:700;text-align:center}.q-row.next .q-num{color:var(--green-bright);text-shadow:0 0 10px rgba(0,200,83,.5)}.q-row .thumb{width:96px;height:60px}.q-info{min-width:0}.q-title{font-weight:700;font-size:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-artist{color:var(--text-dim);font-size:.98em;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-meta{color:var(--text-dim);font-size:.98em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-singer{display:flex;align-items:center;gap:10px;min-width:0;font-size:1.02em}.q-singer svg{width:20px;height:20px;color:#e8eae8;flex:0 0 auto}.q-singer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-dur{font-weight:700;text-align:right}.q-up{position:relative;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px #00c85373;transition:transform .15s}.q-up svg{width:20px;height:20px}.q-up:not(:disabled):hover{transform:scale(1.08)}.q-up:not(:disabled):hover:after{content:"Ưu tiên phát";position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#1c201c;border:1px solid #333a33;border-radius:6px;color:#e8eae8;font-size:.82em;font-weight:600;white-space:nowrap;padding:5px 12px;pointer-events:none;z-index:5}.q-up:not(:disabled):hover:before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#333a33;pointer-events:none;z-index:5}.q-up:disabled{background:#222622;color:#5a615a;box-shadow:none;cursor:default}.q-remove{width:34px;height:34px;color:#e8eae8;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .15s}.q-remove svg{width:20px;height:20px}.q-remove:hover{color:var(--red);transform:scale(1.12)}.queue-empty{color:var(--text-dim);text-align:center;padding:60px 10px;font-size:1.1em}@media (max-width:1500px){.q-row{grid-template-columns:36px 88px minmax(160px,1.3fr) minmax(140px,1fr) minmax(110px,.8fr) 54px 40px 30px;gap:12px}}@media (max-width:1280px){.queue-head{flex-wrap:wrap}.q-meta{display:none}.q-row{grid-template-columns:32px 88px minmax(0,1.4fr) minmax(0,.8fr) 56px 40px 30px}}@media (max-width:820px){.queue-screen{margin:0 12px 14px;padding:16px}.q-singer{display:none}.q-row{grid-template-columns:26px 76px minmax(0,1fr) 48px 38px 28px;gap:10px}}.library-screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;margin:0 24px 22px;padding:26px 30px;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius)}.lib-sort{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:1px solid #3a413a;border-radius:10px;padding:12px 22px;font-size:1.05em;color:var(--text-dim);transition:border-color .2s,color .2s,background .2s}.lib-sort b{color:var(--green-bright);font-weight:700}.lib-sort:hover{border-color:var(--green);color:var(--text);background:var(--green-dim)}.lib-row{flex:0 0 auto;display:grid;grid-template-columns:40px 88px minmax(0,1.6fr) minmax(0,1fr) 96px;gap:16px;align-items:center;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:12px 18px 12px 12px;transition:border-color .2s,background .2s}.lib-row:hover{background:#1a1d1a;border-color:#31362f}.lib-row .thumb{width:88px;height:56px}.lib-add{position:relative;width:44px;height:44px;border-radius:50%;justify-self:end;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px #00c85373;transition:transform .15s,box-shadow .2s}.lib-add svg{width:20px;height:20px}.lib-add:not(:disabled):hover{transform:scale(1.08);box-shadow:0 0 18px #00c853a6}.lib-add:not(:disabled):hover:after{content:"Thêm vào danh sách";position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#1c201c;border:1px solid #333a33;border-radius:6px;color:#e8eae8;font-size:.82em;font-weight:600;white-space:nowrap;padding:5px 12px;pointer-events:none;z-index:5}.lib-add:not(:disabled):hover:before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#333a33;pointer-events:none;z-index:5}.lib-add.added{background:#222622;color:var(--green-dark);box-shadow:none;cursor:default}.lib-sentinel,.lib-end{flex:0 0 auto;text-align:center;color:var(--text-dim);font-size:.98em;padding:6px 10px 2px}@media (max-width:1200px){.lib-meta{display:none}.lib-row{grid-template-columns:32px 80px minmax(0,1.6fr) 48px}}@media (max-width:820px){.library-screen{margin:0 12px 14px;padding:16px}.lib-row{grid-template-columns:26px 70px minmax(0,1fr) 42px;gap:10px}.lib-row .thumb{width:70px;height:46px}}.splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:radial-gradient(90% 70% at 50% 32%,#071110,#04090b 55%,#020405);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease}.splash.leave{opacity:0;pointer-events:none}.splash-art{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;animation:splash-float 2.6s ease-in-out infinite alternate}@keyframes splash-float{0%{transform:translateY(6px)}to{transform:translateY(-8px)}}.splash-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;animation:splash-in .8s ease both}@keyframes splash-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.splash-logo{font-size:clamp(56px,7.5vw,120px);font-weight:800;font-style:italic;letter-spacing:2px;line-height:1;color:var(--green-bright);text-shadow:0 0 34px rgba(31,224,101,.55)}.splash-logo span{color:#fff;text-shadow:0 0 22px rgba(255,255,255,.35)}.splash-badge{background:linear-gradient(180deg,#25e565,#12b44c);color:#fff;font-weight:700;font-size:clamp(18px,1.8vw,30px);padding:.3em 1.6em;border-radius:999px;box-shadow:0 0 26px #1fe0658c}.source-screen{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px 24px 44px}.source-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.source-title{position:relative;font-size:clamp(26px,2.6vw,44px);font-weight:800;letter-spacing:1px;color:#fff}.source-title .g{color:var(--green-bright);text-shadow:0 0 16px rgba(31,224,101,.4)}.source-underline{position:relative;width:64px;height:5px;border-radius:99px;background:var(--green);box-shadow:0 0 14px #00c853cc;margin-top:-8px}.source-cards{position:relative;display:flex;gap:clamp(22px,3vw,56px);align-items:stretch;flex-wrap:wrap;justify-content:center;width:min(1200px,94%)}.src-card{--c:#fff;--glow:rgba(255,255,255,.15);--soft:rgba(255,255,255,.3);position:relative;overflow:hidden;flex:1 1 0;min-width:250px;max-width:380px;aspect-ratio:3/4.2;border-radius:24px;display:flex;flex-direction:column;align-items:center;padding:30px 26px;border:1.6px solid var(--c);background:radial-gradient(120% 55% at 50% -6%,var(--glow),transparent 62%),radial-gradient(140% 80% at 50% 115%,var(--glow),transparent 72%),#0b0b0e;box-shadow:0 0 22px var(--soft),inset 0 0 30px #0009;transition:transform .22s ease,box-shadow .22s ease;animation:src-in .5s ease both}@keyframes src-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.src-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 6px 40px var(--soft),inset 0 0 30px #0009}.src-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:40%;pointer-events:none}.src-logo{position:relative;flex:1;width:100%;min-height:128px;display:flex;align-items:center;justify-content:center;padding:10px 6px 20px}.src-divider{width:76%;height:1px;background:linear-gradient(90deg,transparent,#ffffff2e,transparent)}.src-desc{margin-top:20px;margin-bottom:8px;color:#e8eae8;text-align:center;font-size:1.28em;line-height:1.5}.src-yt{display:flex;align-items:center;gap:14px;font-size:2.7em;font-weight:700;letter-spacing:-.5px;color:#fff}.src-yt-play{background:red;width:2em;height:1.42em;border-radius:.38em;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px #ff000080}.src-yt-play svg{width:.85em;height:.8em}.src-sc{display:flex;flex-direction:column;align-items:center;gap:10px;color:#ff7a00}.src-sc svg{width:228px;height:78px;filter:drop-shadow(0 0 12px rgba(255,122,0,.45))}.src-sc b{color:#ff7a00;letter-spacing:3.5px;font-size:1.65em;font-weight:700}.src-mx{display:flex;flex-direction:column;align-items:center;gap:12px;color:#a05cff}.src-mx svg{width:180px;height:60px;filter:drop-shadow(0 0 14px rgba(160,92,255,.55))}.src-mx b{font-size:1.65em;font-weight:700;letter-spacing:3.5px;text-shadow:0 0 18px rgba(160,92,255,.5)}@media (max-width:820px){.source-screen{gap:20px;padding:16px 14px 28px}.src-card{flex:0 1 auto;width:min(78vw,340px);max-width:none}}