*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100dvh;font-family:Be Vietnam Pro,system-ui,sans-serif;font-size:15px;line-height:1.5;color:#f6eefc;background:radial-gradient(60vw 40vh at 75% -10%,rgba(166,74,255,.15),transparent 70%),radial-gradient(50vw 40vh at 0% 100%,rgba(92,51,255,.15),transparent 70%),#0a0b1a;background-attachment:fixed}button,input{font:inherit;color:inherit}button{cursor:pointer}h2{margin:0;font-size:1rem;font-weight:600}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(16px,3vw,32px);padding-top:calc(12px + env(safe-area-inset-top,0px));background:#0a0b1acc;backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;letter-spacing:-.01em;color:#f6eefc;text-decoration:none}.brand__icon{width:24px;height:24px;object-fit:contain;border-radius:4px}.status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:.8rem;color:#a99bc4;background:#ffffff0d}@media(max-width:599px){.status{display:none}}.status:before{content:"";width:8px;height:8px;border-radius:50%;background:#a99bc4}.status--live{color:#3ee6c4}.status--live:before{background:#3ee6c4;box-shadow:0 0 8px #3ee6c4}.layout{display:flex;flex-direction:column;max-width:900px;margin:0 auto;padding:clamp(16px,3vw,32px);padding-bottom:96px}.stage{display:grid;gap:20px;align-content:start;min-width:0}.topbar-tabs{display:flex;gap:8px;background:#00000040;padding:4px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.08);margin:0 12px}@media(max-width:899px){.topbar-tabs{display:none}}.topbar-tabs .topbar-tab{display:flex;align-items:center;gap:6px;padding:6px 14px;border:none;border-radius:999px;background:transparent;color:#a99bc4;font-size:.85rem;font-weight:600;transition:all .2s ease}.topbar-tabs .topbar-tab:hover{color:#f6eefc;background:#ffffff0f}.topbar-tabs .topbar-tab i{font-size:1.05rem}.mobile-tabs-trigger{display:none}@media(max-width:899px){.mobile-tabs-trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#ffffff1a;border:none;color:#f6eefc}}.library-modal-overlay{position:fixed;inset:0;z-index:100;background:#0a0b1ad9;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s}.library{width:100%;max-width:560px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:14px;padding:20px;background:#12132bf2;border:1px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:0 24px 60px #0009,0 0 40px #ff3d8b1a;animation:modalSlideIn .3s cubic-bezier(.2,.8,.2,1);overflow:hidden}.library__handle{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.library-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#0000004d;padding:4px;border-radius:14px;border:1px solid rgba(255,255,255,.08);margin-bottom:4px}.library-tab{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border:0;border-radius:10px;background:transparent;color:#a99bc4;font-size:.78rem;font-weight:600;white-space:nowrap;transition:all .2s ease}.library-tab:hover{color:#f6eefc;background:#ffffff0f}.library-tab.is-active{background:#ff3d8b;color:#fff;box-shadow:0 4px 14px #ff3d8b59}.upload-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;border:2px dashed rgba(255,61,139,.4);border-radius:14px;background:#1a1c3d40;cursor:pointer;transition:all .2s ease;text-align:center;gap:6px}.upload-dropzone:hover{border-color:#ff3d8b;background:#ff3d8b14;transform:translateY(-2px)}.upload-dropzone .upload-icon{font-size:2.2rem;color:#ff3d8b;margin-bottom:4px}.upload-dropzone .upload-title{margin:0;font-weight:700;font-size:.95rem;color:#f6eefc}.upload-dropzone .upload-sub{font-size:.75rem;color:#a99bc4;margin-bottom:8px}.upload-dropzone .upload-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;border:1px solid rgba(255,61,139,.5);background:#ff3d8b26;color:#f6eefc;font-size:.8rem;font-weight:600;pointer-events:none}.song__thumb--local{display:flex!important;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1c3d,#0a0b1a)!important;border:1px solid rgba(255,255,255,.1);color:#ff3d8b;font-size:1.5rem}.search__input{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#00000040}.search__input:focus-visible{outline:2px solid #ffb547;outline-offset:2px}.search__input::placeholder{color:#a99bc4}@keyframes skeleton-pulse{0%,to{opacity:.5}50%{opacity:1}}.songs{flex:1;min-height:0;list-style:none;margin:0;padding:0;overflow-y:auto;display:grid;align-content:start;gap:4px}.song{display:flex;gap:12px;width:100%;padding:8px;border:0;border-radius:14px;background:transparent;text-align:left;transition:background .15s}.song:focus-visible{outline:2px solid #ffb547;outline-offset:2px}.song:hover{background:#ffffff0d}.song.is-active{background:#ff3d8b24;box-shadow:inset 3px 0 #ff3d8b}.song__thumb{flex:none;width:76px;aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg,hsl(var(--hue),80%,55%),hsl(calc(var(--hue) + 40),70%,25%))}.song__meta{display:grid;align-content:center;gap:2px;min-width:0}.song__title{font-size:.85rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.song__channel{font-size:.75rem;color:#a99bc4}.song__fav-toggle{margin-left:auto;padding:6px 8px;color:#a99bc4;font-size:.95rem;opacity:.35;transition:all .2s;flex-shrink:0}.song__fav-toggle:hover{opacity:1;transform:scale(1.2);color:#ff3d8b}.song__fav-toggle.is-fav{opacity:1;color:#ff3d8b;text-shadow:0 0 10px rgba(255,61,139,.6)}.library-toggle{display:none}@media(max-width:899px){.library-toggle{display:block;position:fixed;z-index:25;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:12px 20px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:#1a1c3d;font-weight:600;box-shadow:0 10px 30px #0006}}.player{overflow:hidden;background:#12132bb3;border:1px solid rgba(255,255,255,.07);border-radius:22px}@media(max-width:599px){.player{display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;overflow:visible}}.player__screen{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}@media(max-width:599px){.player__screen{order:1;width:100%;border-radius:24px;box-shadow:0 16px 40px #00000080,0 0 20px #5c33ff33;margin-top:20px}}.player__screen iframe,.player__screen #youtube-player{width:100%;height:100%;border:0;display:block}.player__bar{display:flex;align-items:center;gap:12px;padding:12px 16px}@media(max-width:599px){.player__bar{order:3;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"time-start progress time-end" "controls controls controls" "actions actions actions";gap:16px;width:100%;padding:24px 0}.player__bar>div:first-child{grid-area:controls;justify-content:center;gap:24px}.player__bar>.time:first-of-type{grid-area:time-start}.player__bar>.range:not(.range--volume){grid-area:progress;align-self:center}.player__bar>.time:last-of-type{grid-area:time-end}.player__bar>div:last-child{grid-area:actions;justify-content:center}}.player__now{margin:0;padding:10px 16px;font-size:.8rem;color:#a99bc4;background:#0003;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__now span{color:#ffb547;font-weight:600;margin-right:8px}@media(max-width:599px){.player__now{order:2;background:transparent;text-align:center;font-size:1.2rem;font-weight:700;color:#f6eefc;padding:16px 0 0;white-space:normal}.player__now span,.player__now i{display:none}}.local-screen{width:100%;height:100%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1a1c3d,#080312)}.local-video{width:100%;height:100%;object-fit:contain}.vinyl-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px}.vinyl-disc{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#2a2038,#150e24 60%,#05020a);border:4px solid rgba(255,255,255,.15);box-shadow:0 10px 35px #000c,0 0 25px #ff3d8b40;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .5s}.vinyl-disc.is-spinning{animation:vinylSpin 5s linear infinite}.vinyl-groove{position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(255,255,255,.15)}.vinyl-label{width:52px;height:52px;border-radius:50%;background:#ff3d8b;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 0 15px #ff3d8b99}@keyframes vinylSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-details h4{margin:0 0 6px;font-size:1.15rem;font-weight:700;color:#f6eefc;max-width:450px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vinyl-details .vinyl-tag{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#3ee6c4;background:#3ee6c41f;border:1px solid rgba(62,230,196,.25);padding:3px 12px;border-radius:999px}.player-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#a99bc4;background:radial-gradient(circle at center,#12132b,#0a0b1a);text-align:center;padding:24px}.player-empty i{font-size:3.2rem;opacity:.4;color:#ff3d8b}.player-empty p{margin:0;font-size:.95rem;max-width:320px}.icon-btn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#ff3d8b;color:#fff;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center}@media(max-width:599px){.icon-btn--play{width:64px!important;height:64px!important;background:#5c33ff!important;font-size:1.5rem!important;box-shadow:0 8px 24px #5c33ff66!important}}.icon-btn:focus-visible{outline:2px solid #ffb547;outline-offset:2px}.icon-btn--step{width:32px!important;height:32px!important;background:#ffffff14!important;color:#f6eefc!important;font-size:.8rem!important}.icon-btn--step:hover{background:#ffffff2e!important;color:#fff!important}.icon-btn--step:disabled{opacity:.25!important;pointer-events:none!important}.icon-btn--fav{width:36px!important;height:36px!important;background:#ffffff14!important;color:#a99bc4!important;font-size:.95rem!important}.icon-btn--fav:hover{background:#ff3d8b26!important;color:#ff3d8b!important}.icon-btn--fav.is-fav{background:#ff3d8b38!important;color:#ff3d8b!important;border:1px solid rgba(255,61,139,.45)!important;box-shadow:0 0 12px #ff3d8b59!important}.icon-btn--fav:disabled{opacity:.25!important;pointer-events:none!important}.icon-btn--autoplay{width:36px!important;height:36px!important;background:#ffffff14!important;color:#a99bc4!important;font-size:.85rem!important}.icon-btn--autoplay:hover{background:#ffffff29!important;color:#f6eefc!important}.icon-btn--autoplay.is-active{background:#3ee6c42e!important;color:#3ee6c4!important;border:1px solid rgba(62,230,196,.4)!important;box-shadow:0 0 12px #3ee6c44d!important}.time{font-size:.8rem;font-variant-numeric:tabular-nums;color:#a99bc4}.range{flex:1;min-width:0;height:4px;appearance:none;border-radius:4px;background:#ffffff26;cursor:pointer}.range::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#f6eefc}.range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f6eefc}.range--volume{flex:none;width:90px}@media(max-width:599px){.range--volume{display:none}}.rec{display:grid;gap:20px;padding:clamp(16px,3vw,28px);background:#12132bb3;border:1px solid rgba(255,255,255,.07);border-radius:22px}.rec__head{display:flex;align-items:center;justify-content:space-between;gap:16px}.rec__controls{display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,56px)}@media(max-width:599px){.rec__controls{flex-direction:row;justify-content:space-evenly;gap:16px;padding:32px 0}}.rec__time{font-size:clamp(2.4rem,8vw,3.6rem);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.meter{flex:0 1 260px;height:8px;border-radius:8px;overflow:hidden;background:#ffffff1a}.meter__fill{display:block;height:100%;width:var(--level, 0%);background:linear-gradient(90deg,#3ee6c4 0 60%,#ffb547 60% 85%,#ff3d8b 85%);transition:width .08s linear}.rec-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;border:0;border-radius:999px;background:#ff3d8b;color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 0 #ff3d8b80,0 10px 30px #ff3d8b59;transition:transform .15s}.rec-btn:focus-visible{outline:2px solid #ffb547;outline-offset:2px}.rec-btn:active{transform:scale(.97)}@media(max-width:599px){.rec-btn{width:80px;height:80px;border-radius:50%;padding:0;justify-content:center;background:#f33;box-shadow:0 0 #ff333380,0 10px 30px #ff333359}.rec-btn .rec-btn__label{display:none}.rec-btn i{font-size:1.8rem;margin:0}}.rec-btn__dot{width:14px;height:14px;border-radius:50%;background:#fff;transition:border-radius .2s}.rec-btn.is-recording{animation:pulse 1.6s infinite}.rec-btn.is-recording .rec-btn__dot{border-radius:3px}@keyframes pulse{0%{box-shadow:0 0 #ff3d8b8c,0 10px 30px #ff3d8b59}to{box-shadow:0 0 0 22px #ff3d8b00,0 10px 30px #ff3d8b59}}.countdown-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 20px;gap:16px;animation:fadeIn .3s ease}.countdown-stage__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:999px;background:#ff3d8b26;border:1px solid rgba(255,61,139,.35);color:#ff3d8b;font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 0 16px #ff3d8b33}.countdown-stage__circle-wrap{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center;margin:8px 0}.countdown-stage__hint{margin:0;font-size:.9rem;color:#a99bc4;text-align:center;font-weight:500}.countdown-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#1a1c3d,#0a0b1a);border:3px solid #ff3d8b;box-shadow:0 0 28px #ff3d8b80,inset 0 0 20px #ff3d8b4d;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}.countdown-pulse-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #ff3d8b;animation:countdownRipple 1.2s cubic-bezier(.1,.8,.3,1) infinite;pointer-events:none}.countdown-pulse-ring--delay{animation-delay:.6s}.countdown-digit{font-size:5rem;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 15px #ff3d8b,0 0 35px #ff3d8b,0 0 50px #ffb547;animation:countdownBurst .9s cubic-bezier(.175,.885,.32,1.275) both;-webkit-user-select:none;user-select:none}@keyframes countdownBurst{0%{transform:scale(.3) rotate(-8deg);opacity:0;filter:blur(8px)}50%{transform:scale(1.22) rotate(0);opacity:1;filter:blur(0)}75%{transform:scale(.96)}to{transform:scale(1);opacity:1}}@keyframes countdownRipple{0%{transform:scale(.85);opacity:.85;border-color:#ff3d8b}to{transform:scale(1.65);opacity:0;border-color:#ffb547}}.empty{display:grid;justify-items:center;gap:4px;padding:32px 16px;text-align:center;border:1.5px dashed rgba(255,255,255,.15);border-radius:22px}.empty__title{margin:0;font-weight:600}.empty__hint{margin:0;font-size:.85rem;color:#a99bc4}body.light-mode{background:radial-gradient(60vw 40vh at 75% -10%,rgba(255,61,139,.15),transparent 70%),radial-gradient(50vw 40vh at 0% 100%,rgba(255,181,71,.15),transparent 70%),#f1f5f9;color:#1e293b}body.light-mode .topbar{background:#ffffffe6;border-bottom:1px solid rgba(0,0,0,.1)}body.light-mode .brand{color:#0f172a}body.light-mode .status{background:#0000000d;color:#475569}body.light-mode .library,body.light-mode .player,body.light-mode .rec{background:#ffffffe6;border-color:#0000001a;box-shadow:0 10px 30px #0000000d}body.light-mode .player__bar{border-top:1px solid rgba(0,0,0,.1)}body.light-mode .player__now{background:#0000000d;color:#475569}body.light-mode .time{color:#475569}body.light-mode .range{background:#00000026}body.light-mode .range::-webkit-slider-thumb{background:#0f172a}body.light-mode .icon-btn--step{background:#0000000d!important;color:#0f172a!important}body.light-mode .icon-btn--step:hover{background:#0000001a!important}body.light-mode .icon-btn--fav,body.light-mode .icon-btn--autoplay{background:#0000000d!important;color:#475569!important}body.light-mode .icon-btn--fav:hover,body.light-mode .icon-btn--autoplay:hover{color:#ff3d8b!important}body.light-mode .rec__head h2,body.light-mode .rec__time{color:#0f172a}body.light-mode .search__input{background:#0000000d;color:#0f172a;border-color:#0000001a}body.light-mode .search__input::placeholder{color:#64748b}body.light-mode .song{color:#0f172a}body.light-mode .song:hover{background:#0000000d}body.light-mode .song__channel,body.light-mode .topbar-tab{color:#475569}body.light-mode .topbar-tab:hover{background:#0000000d;color:#0f172a}body.light-mode .topbar-tabs,body.light-mode .library-tabs{background:#0000000d;border-color:#0000001a}body.light-mode .library-tab{color:#64748b}body.light-mode .library-tab:hover{background:#0000000d;color:#0f172a}body.light-mode .upload-dropzone{background:#ff3d8b0d;border-color:#ff3d8b66}body.light-mode .upload-dropzone .upload-title{color:#0f172a}body.light-mode .upload-dropzone .upload-sub{color:#64748b}body.light-mode .upload-dropzone:hover{background:#ff3d8b1a}body.light-mode .local-header,body.light-mode .karaoke-toggle-text{color:#475569!important}body.light-mode .karaoke-toggle-text.is-active{color:#b45309!important}body.light-mode .bottom-nav{background:#fff;border-top:1px solid rgba(0,0,0,.1)}body.light-mode .bottom-nav__item{color:#64748b}body.light-mode .bottom-nav__item.is-active{color:#ff3d8b}body.light-mode .lang-select__current{background:#0000000d;color:#0f172a;border-color:#0000001a}body.light-mode .lang-select__dropdown{background:#fff;border-color:#0000001a;box-shadow:0 10px 25px #0000001a}body.light-mode .lang-option{color:#475569}body.light-mode .lang-option:hover{background:#0000000d;color:#0f172a}body.light-mode .empty{border-color:#0000001a}body.light-mode .empty__title{color:#0f172a}body.light-mode .empty__hint{color:#64748b}body.light-mode .playlist-sidebar{background:#ffffffe6;border-color:#0000001a}body.light-mode .sidebar-header{border-bottom-color:#0000001a}body.light-mode .sidebar-header h3{color:#0f172a}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.bottom-nav{display:none}@media(max-width:599px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:#0a0b1af2;backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.05);padding:12px 24px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-content:space-around;align-items:center}.bottom-nav .bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:4px;color:#a99bc4;font-size:.75rem;text-decoration:none;background:transparent;border:none;padding:0;cursor:pointer;font-family:inherit}.bottom-nav .bottom-nav__item.is-active{color:#ff3d8b}.bottom-nav .bottom-nav__item i{font-size:1.2rem}}