@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--teal-100: #b2ebf2;--teal-200: #80deea;--teal-300: #4dd0e1;--teal-400: #26c6da;--teal-500: #00bcd4;--teal-600: #00acc1;--teal-700: #0097a7;--teal-800: #00838f;--teal-900: #006064;--bg-app: #0a0a0a;--bg-header: #111111;--bg-grid: #0a0a0a;--bg-bottom: #111111;--bg-menu: #141414;--card-blue: #2d8bba;--card-bright: #4ab0d8;--card-pale: #a8d8ea;--card-mid: #1e6fa0;--card-dark: #174f7a;--text-teal: #4dd0e1;--text-bright: #e0f7fa;--text-muted: #3d7a8a;--text-dim: #2a5060;--error: #ef5350;--success: #26a69a;--warning: #ffa726;--border: rgba(77, 208, 225, .12);--border-bright: rgba(77, 208, 225, .3);--r-xs: 4px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--font: "Inter", system-ui, sans-serif}html,body{width:100%;height:100%;background:#000;color:var(--text-teal);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;overflow:hidden}#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#050505}.app{width:768px;height:1024px;max-width:100vw;max-height:100vh;display:flex;flex-direction:column;background:var(--bg-app);border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:0 0 0 1px #00bcd414,0 24px 80px #000c}.app-header{display:flex;align-items:center;justify-content:space-between;position:relative;padding:14px;background:var(--bg-header);border-bottom:1px solid var(--border);flex-shrink:0;gap:10px;min-height:96px}.header-logo{height:52px;width:auto;object-fit:contain;flex-shrink:0;opacity:.92}.header-clock{position:absolute;left:50%;transform:translate(-50%) translateY(-4px);font-size:22px;color:#facc15;font-weight:500;white-space:nowrap;pointer-events:none;letter-spacing:.01em;margin-top:56px}.header-actions{display:flex;gap:4px;flex-shrink:0}.transport-bar{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.transport-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.transport-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#4dd0e10f;border:1px solid rgba(77,208,225,.18);border-radius:var(--r-xs);color:var(--text-teal);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.transport-btn:hover{background:#4dd0e124;border-color:var(--teal-500);color:var(--teal-200)}.transport-btn:disabled{opacity:.28;cursor:default}.transport-dot{width:8px;height:8px;border-radius:50%;background:#4dd0e12e;border:1px solid rgba(77,208,225,.3);transition:background .25s,box-shadow .25s;flex-shrink:0}@keyframes dot-pulse{0%,to{transform:scale(1);box-shadow:0 0 6px #26c6dab3}50%{transform:scale(1.5);box-shadow:0 0 16px #26c6da}}.transport-dot--active{background:var(--teal-400);border-color:var(--teal-300);animation:dot-pulse 1.2s ease-in-out infinite}.transport-extras{display:flex;align-items:center;gap:3px;flex-shrink:0}.transport-mini-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--r-xs);color:var(--text-dim);cursor:pointer;transition:all .15s}.transport-mini-btn:hover{background:#4dd0e114;color:var(--text-teal);border-color:var(--border)}.transport-mini-btn--on{color:var(--teal-400);border-color:#4dd0e14d;background:#4dd0e114}.transport-info{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}.transport-title{font-size:13px;font-weight:500;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-4px;line-height:1.4}.transport-time{font-size:11px;color:#f5c542;font-variant-numeric:tabular-nums;line-height:1.4;margin-top:-2px}.transport-idle{font-size:12px;color:var(--text-dim);font-style:italic}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-teal);cursor:pointer;border-radius:var(--r-xs);transition:background .15s,color .15s}.icon-btn:hover{background:#4dd0e11a;color:var(--teal-200)}.icon-btn--danger{color:var(--error)}.icon-btn--danger:hover{background:#ef53501a}.icon-btn--load{color:var(--teal-300)}.icon-btn--load:hover{background:#00bcd426;color:var(--teal-200)}.progress-bar{height:4px;background:#4dd0e11a;position:relative;cursor:pointer;flex-shrink:0}.progress-bar:hover{height:6px}.progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--teal-800),var(--teal-400));transition:width .1s linear}.progress-bar__thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--teal-300);border-radius:50%;pointer-events:none;box-shadow:0 0 8px #4dd0e199}.app-main{flex:1;overflow:hidden;padding:6px;background:var(--bg-grid)}.song-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:5px;height:100%}.song-card{position:relative;border-radius:var(--r-sm);display:flex;flex-direction:column;cursor:pointer;overflow:hidden;border:1.5px solid rgba(77,208,225,.35);transition:transform .1s ease,box-shadow .15s,border-color .15s;touch-action:none;background:var(--card-bg, var(--card-blue));padding-bottom:14px}.song-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:14px;background:#00000059;border-top:1px solid rgba(255,255,255,.08)}.song-card:active{transform:scale(.96)}.song-card--active{border-color:var(--teal-300);box-shadow:0 0 14px #4dd0e180}.song-card--dragging{opacity:.35;transform:scale(.94);cursor:grabbing}.song-card--drag-target{border-color:var(--teal-300)!important;box-shadow:0 0 0 2px var(--teal-500)!important}.song-card--playing{border-color:var(--teal-200);box-shadow:0 0 20px #4dd0e1a6,inset 0 0 0 1px #4dd0e133}.song-card--empty{background:#1e323c66;border:1px solid rgba(77,208,225,.07);cursor:default}.song-card--empty:after{display:none}.song-card__num{position:absolute;top:6px;left:8px;font-size:11px;font-weight:600;color:var(--teal-100);line-height:1;z-index:1}.song-card--empty .song-card__num{color:var(--text-dim)}.song-card__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 8px 4px;gap:3px;z-index:1}.song-card__title{font-size:15px;font-weight:500;color:#000000c7;line-height:1.3;word-break:break-word}.song-card__artist{font-size:12px;color:#00000080;line-height:1.2}.song-card__bars{position:absolute;bottom:17px;right:8px;display:flex;align-items:flex-end;gap:2px;height:11px;z-index:2}.song-card__bars span{width:3px;background:#0000008c;border-radius:1px;animation:eq-bar .5s ease-in-out infinite alternate}.song-card__bars span:nth-child(2){animation-delay:.18s}.song-card__bars span:nth-child(3){animation-delay:.36s}@keyframes eq-bar{0%{height:3px}to{height:11px}}.bottom-bar{display:flex;align-items:center;padding:0 14px;background:var(--bg-bottom);border-top:1px solid var(--border);flex-shrink:0;height:52px;gap:10px}.bottom-bar__fade{display:flex;align-items:center;gap:7px;flex-shrink:0}.bottom-bar__label{font-size:12px;font-weight:500;color:var(--text-teal);text-transform:none;letter-spacing:.02em;white-space:nowrap}.bottom-bar__val{font-size:12px;font-weight:500;color:var(--text-teal);font-variant-numeric:tabular-nums;min-width:28px}.bottom-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:90px;height:4px;background:#4dd0e12e;border-radius:2px;outline:none;cursor:pointer;touch-action:none}.bottom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--teal-400);border-radius:50%;cursor:pointer;box-shadow:0 0 6px #4dd0e18c}.bottom-slider::-moz-range-thumb{width:16px;height:16px;background:var(--teal-400);border-radius:50%;border:none;box-shadow:0 0 6px #4dd0e18c}.bottom-bar__pages{display:flex;align-items:center;gap:5px;flex:1;justify-content:center;flex-wrap:wrap}.page-btn{background:#4dd0e10f;border:1px solid rgba(77,208,225,.16);color:var(--text-muted);border-radius:var(--r-xs);padding:5px 12px;font-size:12px;font-family:var(--font);cursor:pointer;transition:all .15s;white-space:nowrap}.page-btn:hover{background:#4dd0e11f;color:var(--text-teal)}.page-btn--active{background:#4dd0e129;border-color:var(--teal-500);color:var(--teal-200);font-weight:600}.bottom-bar__volume{display:flex;align-items:center;gap:7px;flex-shrink:0;color:var(--text-teal);font-size:11px}.menu-overlay{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:10;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.menu-overlay--open{display:block}.slider-menu{position:absolute;top:0;right:0;bottom:0;width:310px;background:var(--bg-menu);border-left:1px solid var(--border);z-index:11;display:flex;flex-direction:column;transform:translate(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}.slider-menu--open{transform:translate(0)}.slider-menu__header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0}.slider-menu__brand{display:flex;align-items:center;gap:8px;color:var(--teal-300);font-weight:600;font-size:15px}.slider-menu__version{padding:10px 20px;font-size:11px;color:#fff;text-align:center;flex-shrink:0}.slider-menu__user{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.user-name{font-size:13px;color:var(--text-bright);font-weight:500}.user-role{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--teal-700);background:#00bcd414;padding:2px 7px;border-radius:3px;border:1px solid rgba(0,188,212,.2)}.menu-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.menu-tabs button{flex:1;background:transparent;border:none;color:var(--teal-200);padding:11px 2px;font-size:12px;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;border-bottom:2px solid transparent;transition:all .15s}.menu-tabs button:hover{color:var(--text-teal)}.menu-tabs button.active{color:var(--teal-300);border-bottom-color:var(--teal-500)}.menu-content{flex:1;overflow-y:auto;padding:0 16px 14px;scrollbar-width:thin;scrollbar-color:#1a3a44 transparent}.menu-content::-webkit-scrollbar{width:4px}.menu-content::-webkit-scrollbar-thumb{background:#1a3a44;border-radius:2px}.library-list{display:flex;flex-direction:column;gap:6px}.library-list__sticky{position:sticky;top:0;padding-top:14px;background:var(--bg-menu);box-shadow:0 6px 0 var(--bg-menu);z-index:2;display:flex;flex-direction:column;gap:6px}.library-header{display:flex;align-items:center;justify-content:space-between;padding:2px 0 6px;border-bottom:1px solid var(--border);margin-bottom:2px}.library-header__info{display:flex;align-items:baseline;gap:7px}.library-header__label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#fff}.library-header__count{font-size:15px;font-weight:600;color:var(--teal-300);line-height:1}.library-header__actions{display:flex;align-items:center;gap:4px}.library-scroll-btn{display:flex;align-items:center}.kbd{display:inline-block;font-family:inherit;font-size:9px;font-weight:600;letter-spacing:.03em;color:var(--text-teal);background:#00bcd41a;border:1px solid var(--border);border-radius:3px;padding:1px 4px;line-height:14px;pointer-events:none}.library-scroll-btn:hover .kbd{background:#00bcd433;color:var(--teal-300);border-color:var(--teal-600)}.delete-all-btn{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;border-radius:6px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#f87171;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}.delete-all-btn:hover{background:#ef444433;border-color:#ef444480}.delete-all-confirm{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:6px;background:#ef44441f;border:1px solid rgba(239,68,68,.4)}.delete-all-confirm__label{font-size:12px;color:#f87171;font-weight:500}.delete-all-confirm__actions{display:flex;gap:6px;flex-shrink:0}.library-item{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#4dd0e129;border:1px solid rgba(77,208,225,.38);border-radius:var(--r-xs);transition:background .12s}.library-item:hover{background:#4dd0e138}.library-item__info{flex:1;min-width:0}.library-item__title{display:block;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.library-item__meta{font-size:10px;color:var(--teal-200)}.menu-empty{font-size:12px;color:var(--text-dim);text-align:center;padding:32px 0;font-style:italic}.upload-form{display:flex;flex-direction:column;gap:10px}.upload-form label,.auth-form label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.upload-form input,.upload-form select,.auth-form input{background:#4dd0e10a;border:1px solid var(--border);color:var(--text-bright);padding:9px 11px;border-radius:var(--r-xs);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s;width:100%}.upload-form input:focus,.upload-form select:focus,.auth-form input:focus{border-color:var(--teal-600);background:#4dd0e10f}.upload-form select{color:var(--text-teal)}.upload-form select option{background:#141414}.upload-file-info{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--teal-400)}.upload-progress{height:3px;background:#4dd0e11f;border-radius:2px;overflow:hidden}.upload-progress__bar{height:100%;background:var(--teal-500);transition:width .2s}.form-error{font-size:12px;color:var(--error);background:#ef535012;border:1px solid rgba(239,83,80,.2);border-radius:var(--r-xs);padding:8px 10px}.menu-submit,.menu-btn{background:#4dd0e114;border:1px solid rgba(77,208,225,.2);color:var(--teal-300);padding:9px 14px;border-radius:var(--r-xs);font-size:13px;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;width:100%}.menu-submit:hover,.menu-btn:hover{background:#4dd0e124;border-color:var(--teal-500)}.menu-submit:disabled{opacity:.4;cursor:default}.menu-submit--uploading{animation:upload-blink .9s ease-in-out infinite}@keyframes upload-blink{0%,to{opacity:1}50%{opacity:.35}}.upload-panel{display:flex;flex-direction:column;gap:14px;padding-top:14px}.upload-mode-toggle{display:flex;background:#ffffff0a;border:1px solid var(--border);border-radius:var(--r-xs);padding:3px;gap:3px}.upload-mode-toggle button{flex:1;padding:6px 0;font-size:12px;font-family:var(--font);border:none;border-radius:3px;background:transparent;color:var(--text-teal);cursor:pointer;transition:all .15s}.upload-mode-toggle button.active{background:#4dd0e126;color:var(--teal-300)}.upload-mode-toggle button:not(.active):hover{color:var(--text-teal)}.multi-upload{display:flex;flex-direction:column;gap:12px}.multi-upload__drop-zone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border:1px dashed rgba(77,208,225,.3);border-radius:var(--r-xs);color:var(--text-dim);font-size:13px;cursor:pointer;transition:all .15s}.multi-upload__drop-zone:hover{border-color:var(--teal-500);color:var(--teal-300);background:#4dd0e10a}.multi-upload__controls{display:flex;flex-direction:column;gap:8px}.multi-upload__control-row{display:flex;flex-direction:column;gap:4px}.multi-upload__control-row label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.multi-upload__control-row select{background:#4dd0e10a;border:1px solid var(--border);color:var(--text-teal);padding:9px 11px;border-radius:var(--r-xs);font-family:var(--font);font-size:13px;outline:none;width:100%}.multi-upload__control-row select option{background:#141414}.multi-queue{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}.multi-queue-item{background:#ffffff08;border:1px solid var(--border);border-radius:var(--r-xs);padding:8px 10px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s}.multi-queue-item--done{border-color:#22c55e4d}.multi-queue-item--error{border-color:#ef53504d}.multi-queue-item--uploading{border-color:#4dd0e14d}.multi-queue-item__header{display:flex;align-items:center;gap:7px}.multi-queue-item__icon{flex-shrink:0;display:flex;align-items:center;color:var(--text-dim)}.multi-queue-item--done .multi-queue-item__icon{color:#22c55e}.multi-queue-item--error .multi-queue-item__icon{color:var(--error)}.multi-queue-item--uploading .multi-queue-item__icon{color:var(--teal-400)}.multi-queue-item__filename{flex:1;font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multi-queue-item__fields{display:flex;flex-direction:column;gap:5px}.multi-queue-item__fields input{background:#4dd0e10a;border:1px solid var(--border);color:var(--text-bright);padding:6px 9px;border-radius:var(--r-xs);font-family:var(--font);font-size:12px;outline:none;width:100%;transition:border-color .15s}.multi-queue-item__fields input:focus{border-color:var(--teal-600)}.multi-queue-item__fields input::placeholder{color:var(--text-dim)}.multi-queue-item__error{font-size:11px;color:var(--error)}.multi-upload__actions{display:flex;gap:8px}.icon-btn--sm{width:22px!important;height:22px!important;flex-shrink:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}.menu-btn--danger{border-color:#ef535033;background:#ef53500a}.menu-btn--danger:hover{background:#ef53501a;border-color:var(--error)}.settings-panel{display:flex;flex-direction:column;gap:22px;padding-top:14px}.settings-section{display:flex;flex-direction:column;gap:8px}.settings-section h3{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.07em}.settings-section p{font-size:13px;color:var(--text-teal)}.settings-section .muted{font-size:11px;color:var(--text-dim)}.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-toggle-label{font-size:13px;color:var(--text-teal)}.settings-toggle{flex-shrink:0;width:40px;height:22px;border-radius:11px;background:var(--surface-2, #2a2a3a);border:none;cursor:pointer;position:relative;transition:background .2s;padding:0}.settings-toggle--on{background:var(--accent, #2dd4bf)}.settings-toggle__thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}.settings-toggle--on .settings-toggle__thumb{transform:translate(18px)}.auth-page{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:30;border-radius:var(--r-lg)}.auth-card{width:480px;min-height:560px;max-height:calc(100% - 48px);overflow-y:auto;display:flex;flex-direction:column;gap:18px;background:#141414;border:1.5px solid var(--teal-500);border-radius:var(--r-lg);padding:40px 36px;box-shadow:0 0 0 1px #00bcd41a,0 0 40px #00bcd426,0 24px 60px #000c}.auth-logo{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--teal-400);margin-bottom:4px}.auth-logo h1{font-size:18px;font-weight:600;letter-spacing:.04em;color:var(--text-bright)}.auth-logo p{font-size:12px;color:var(--text-dim)}.auth-logo-img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(77,208,225,.4))}.auth-tabs{display:flex;background:#4dd0e10a;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}.auth-tabs button{flex:1;background:transparent;border:none;color:var(--text-dim);padding:11px 8px;font-size:12px;font-family:var(--font);cursor:pointer;transition:all .15s}.auth-tabs button.active{background:#4dd0e11f;color:var(--teal-300);font-weight:500}.auth-form{display:flex;flex-direction:column;gap:9px}.auth-error{font-size:12px;color:var(--error);background:#ef535012;border:1px solid rgba(239,83,80,.2);border-radius:var(--r-xs);padding:9px 12px}.auth-submit{margin-top:6px;background:var(--teal-800);border:none;color:#fff;padding:13px;border-radius:var(--r-sm);font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;transition:background .15s;letter-spacing:.02em}.auth-submit:hover{background:var(--teal-600)}.auth-submit:disabled{opacity:.45;cursor:default}.auth-password-wrap{position:relative;display:flex;align-items:center}.auth-password-wrap input{flex:1;padding-right:36px}.auth-password-toggle{position:absolute;right:10px;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:0;display:flex;align-items:center;line-height:1}.auth-password-toggle:hover{color:var(--text-muted)}.auth-hint{font-size:11px;color:var(--text-dim);text-align:center;line-height:1.5}.auth-success{font-size:12px;color:var(--teal-300);background:#4dd0e112;border:1px solid rgba(77,208,225,.2);border-radius:var(--r-xs);padding:9px 12px;text-align:center}.auth-forgot-link{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:2px 0;text-align:center;transition:color .15s;font-family:var(--font)}.auth-forgot-link:hover{color:var(--teal-300)}.auth-back-header{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.auth-back-link{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;padding:0;text-align:left;font-family:var(--font);transition:color .15s}.auth-back-link:hover{color:var(--teal-300)}.auth-sub-title{font-size:16px;font-weight:600;color:var(--text-bright);margin:0}.auth-version{margin:16px 0 0;font-size:11px;color:#fff;text-align:center}.library-item__demo{color:var(--text-dim);font-style:italic}.library-item--confirming{background:#b91c1c14;border-color:#b91c1c4d;flex-wrap:wrap;gap:6px}.library-item__confirm-label{flex:1;font-size:12px;color:#f87171;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-item__confirm-actions{display:flex;gap:6px;flex-shrink:0}.btn-confirm-cancel,.btn-confirm-delete{border:none;border-radius:var(--r-xs);font-size:11px;font-family:var(--font);cursor:pointer;padding:4px 10px;transition:background .15s}.btn-confirm-cancel{background:#4dd0e133;color:var(--teal-200);border:1px solid rgba(77,208,225,.4)}.btn-confirm-cancel:hover{background:#4dd0e14d;color:#fff}.btn-confirm-delete{background:#b91c1c;color:#fef2f2}.btn-confirm-delete:hover{background:#dc2626}.signout-confirm{background:#b91c1c14;border:1px solid rgba(185,28,28,.25);border-radius:var(--r-xs);padding:12px 14px;display:flex;flex-direction:column;gap:10px}.signout-confirm p{margin:0;font-size:12px;color:#f87171}.signout-confirm__actions{display:flex;gap:8px;justify-content:flex-end}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal{background:#161616;border:1px solid var(--border-bright);border-radius:var(--r-md);padding:24px;width:330px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px #000000b3}.modal h2{font-size:16px;font-weight:600;color:var(--text-bright)}.modal form{display:flex;flex-direction:column;gap:18px}.modal-field{display:flex;flex-direction:column;gap:6px}.modal label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;display:block}.modal input{background:#4dd0e10a;border:1px solid var(--border);color:var(--text-bright);padding:9px 11px;border-radius:var(--r-xs);font-family:var(--font);font-size:13px;outline:none;width:100%;transition:border-color .15s}.modal input:focus{border-color:var(--teal-600)}.color-picker{display:flex;gap:10px}.color-swatch{width:30px;height:30px;border-radius:var(--r-xs);border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .15s}.color-swatch:hover{transform:scale(1.12)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 0 1px var(--teal-400)}.color-swatch--teal{background:var(--card-blue)}.color-swatch--light{background:var(--card-bright)}.color-swatch--blue{background:var(--card-mid)}.color-swatch--gray{background:var(--card-pale)}.color-swatch--mid{background:var(--card-dark)}.modal-actions{display:flex;gap:8px;justify-content:space-between;align-items:center;padding-top:20px}.modal-actions-right{display:flex;gap:8px}.modal-confirm-delete{border-top:1px solid var(--border);padding-top:14px;margin-top:4px}.modal-confirm-delete p{margin:0 0 12px;font-size:13px;color:var(--text-dim)}.btn-primary{background:var(--teal-700);border:none;color:var(--text-teal);padding:9px 18px;border-radius:var(--r-xs);font-size:13px;font-family:var(--font);cursor:pointer;transition:background .15s}.btn-primary:hover{background:var(--teal-600)}.btn-primary:disabled{opacity:.45;cursor:default}.btn-secondary{background:#4dd0e10f;border:1px solid var(--border);color:var(--text-dim);padding:9px 18px;border-radius:var(--r-xs);font-size:13px;font-family:var(--font);cursor:pointer;transition:all .15s}.btn-secondary:hover{background:#4dd0e11a;color:var(--text-teal)}.btn-danger{background:#b91c1c;border:none;color:#fef2f2;padding:9px 18px;border-radius:var(--r-xs);font-size:13px;font-family:var(--font);cursor:pointer;transition:background .15s}.btn-danger:hover{background:#dc2626}.btn-danger:disabled{opacity:.45;cursor:default}.btn-danger-outline{background:transparent;border:1px solid #b91c1c;color:#f87171;padding:9px 18px;border-radius:var(--r-xs);font-size:13px;font-family:var(--font);cursor:pointer;transition:all .15s}.btn-danger-outline:hover{background:#b91c1c26;color:#fca5a5}.playlists-panel{display:flex;flex-direction:column;gap:8px;padding-top:14px}.playlist-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}.playlist-item{background:#00bcd40d;border:1px solid rgba(0,188,212,.14);border-radius:8px;overflow:hidden}.playlist-item__header{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;color:var(--text-teal);padding:8px 10px;cursor:pointer;text-align:left;transition:background .15s;min-width:0}.playlist-item__header:hover{background:#00bcd414}.playlist-item__header svg{flex-shrink:0;color:var(--text-dim)}.playlist-item__row{display:flex;align-items:center}.playlist-item__row .playlist-item__header{flex:1;min-width:0}.playlist-item{display:flex;flex-direction:column}.playlist-item__name{flex:1;font-size:13px;font-weight:600;color:var(--text-teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.playlist-item__page{font-size:10px;color:var(--teal-500);background:#00bcd41f;border:1px solid rgba(0,188,212,.2);border-radius:4px;padding:1px 5px;flex-shrink:0;font-weight:600;letter-spacing:.03em}.playlist-item__count{font-size:11px;color:var(--text-teal);flex-shrink:0}.playlist-item__confirm{display:flex;flex-direction:column;gap:10px;padding:12px 10px;background:#b91c1c1a;border-radius:8px}.playlist-item__confirm-label{font-size:12px;color:#f87171;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item__confirm-actions{display:flex;gap:8px}.playlist-item__songs{display:flex;flex-direction:column;border-top:1px solid rgba(0,188,212,.12);padding:6px 8px;gap:4px}.playlist-song{display:flex;align-items:center;gap:8px;padding:4px 2px}.playlist-song__num{font-size:11px;color:var(--text-dim);width:16px;text-align:right;flex-shrink:0}.playlist-song__info{display:flex;flex-direction:column;min-width:0}.playlist-song__title{font-size:12px;color:var(--text-teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-song__artist{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.splash{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#000}.splash-spinner{width:38px;height:38px;border:3px solid rgba(77,208,225,.12);border-top-color:var(--teal-500);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1100px){.app{width:100vw;height:100dvh;border-radius:0;box-shadow:none}}@media(max-width:768px){.app-main{padding:3px}.song-grid{gap:3px}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.song-card--skeleton{background:#1e37418c!important;border:1px solid rgba(77,208,225,.06)!important;cursor:default;pointer-events:none}.song-card--skeleton:after{display:none}.skeleton-line{border-radius:4px;background:linear-gradient(90deg,#4dd0e10f 25%,#4dd0e124,#4dd0e10f 75%);background-size:400px 100%;animation:shimmer 1.4s ease-in-out infinite;margin:0 auto}.skeleton-line--title{width:70%;height:10px;margin-top:28px}.skeleton-line--artist{width:45%;height:8px;margin-top:6px}.toast-container{position:absolute;bottom:60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:50;pointer-events:none;width:360px}.toast{padding:10px 18px;border-radius:var(--r-sm);font-size:13px;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:toast-in .22s ease-out;text-align:center;max-width:100%}@keyframes toast-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.toast--info{background:#00bcd42e;border:1px solid rgba(0,188,212,.35);color:var(--teal-200)}.toast--success{background:#26a69a2e;border:1px solid rgba(38,166,154,.35);color:#80cbc4}.toast--error{background:#ef53502e;border:1px solid rgba(239,83,80,.35);color:#ef9a9a}.song-card:after{content:"";position:absolute;bottom:0;left:3px;right:3px;height:16px;background:#ffffff2e;border-radius:0 0 6px 6px;border-top:1px solid rgba(255,255,255,.22)}.song-card[style*=a8d8ea]:after{background:#ffffff40}.song-card__title{font-size:15px;font-weight:500;color:#000000b8;line-height:1.35;word-break:break-word}.song-card__num{font-size:12px;font-weight:600;color:#fff}.song-card--empty .song-card__num{color:#4dd0e140}.song-card:not(.song-card--empty):not(.song-card--skeleton):before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 100%);pointer-events:none;border-radius:var(--r-sm) var(--r-sm) 0 0}@keyframes spin-border{to{--border-angle: 360deg}}@property --border-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.song-card--playing{--border-angle: 0deg;border-color:transparent!important;animation:spin-border 2s linear infinite;background-image:conic-gradient(from var(--border-angle),transparent 60%,#4dd0e1 80%,#e0f7fa 90%,#4dd0e1 100%),linear-gradient(var(--card-bg, var(--card-blue)),var(--card-bg, var(--card-blue)));background-origin:border-box;background-clip:padding-box,border-box;border:2px solid transparent}.song-card--ended{filter:brightness(.45);transition:filter 1.2s ease}.song-card--highlighted{border-color:#ffdc50e6;box-shadow:0 0 0 2px #ffdc5066,0 0 18px #ffdc5040;animation:card-highlight-pulse 5s ease forwards}@keyframes card-highlight-pulse{0%{border-color:#ffdc50e6;box-shadow:0 0 0 2px #ffdc5080,0 0 20px #ffdc504d}70%{border-color:#ffdc50b3;box-shadow:0 0 0 2px #ffdc504d,0 0 12px #ffdc5026}to{border-color:#ffdc5000;box-shadow:none}}.song-card__plays{position:absolute;bottom:22px;right:6px;font-size:9px;font-weight:700;color:#00000061;background:#ffffff38;border-radius:8px;padding:1px 5px;line-height:1.6;letter-spacing:.02em;pointer-events:none}.song-card__progress{position:absolute;bottom:4px;left:6px;right:6px;height:6px;border-radius:3px;background:#0003;cursor:pointer;z-index:3;overflow:hidden}.song-card__progress-fill{height:100%;border-radius:3px;background:#0000008c;transition:width .1s linear;pointer-events:none}.visualizer{flex-shrink:0;border-radius:3px;opacity:.9;align-self:center}.page-btn--editing{background:var(--bg-app);border:1px solid var(--teal-500)!important;color:var(--text-bright);font-size:11px;text-align:center;outline:none;padding:0 6px;width:72px;cursor:text}.search-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:40;display:flex;align-items:flex-start;justify-content:center;padding-top:72px}.search-panel{width:min(480px,92%);background:#1e1e1e;border:1px solid rgba(77,208,225,.5);border-radius:var(--r-md);overflow:hidden;box-shadow:0 24px 60px #000000b3}.search-input-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(77,208,225,.25)}.search-icon{color:#4dd0e1b3;flex-shrink:0}.search-input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:15px;font-family:var(--font)}.search-input::placeholder{color:#ffffff59}.search-close-btn{color:#ffffff8c;flex-shrink:0}.search-close-btn:hover{color:#fff}.search-results{list-style:none;max-height:320px;overflow-y:auto}.search-result{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}.search-result:last-child{border-bottom:none}.search-result:hover{background:#4dd0e10f}.search-result__icon{color:var(--text-dim);flex-shrink:0}.search-result__info{flex:1;display:flex;flex-direction:column;min-width:0}.search-result__title{font-size:13px;font-weight:500;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-result__artist{font-size:11px;color:var(--text-muted)}.search-result__page{font-size:10px;color:var(--text-dim);white-space:nowrap;flex-shrink:0}.search-empty{padding:20px 16px;font-size:13px;color:var(--text-dim);text-align:center}