:root{--bg-primary: #0f0e17;--bg-secondary: #1a1a2e;--bg-card: rgba(26, 26, 46, .7);--bg-glass: rgba(26, 26, 46, .55);--bg-hover: rgba(255, 255, 255, .06);--bg-active: rgba(255, 255, 255, .1);--text-primary: #fffffe;--text-secondary: #a7a9be;--text-muted: #6b6d80;--accent-start: #7f5af0;--accent-end: #2cb67d;--accent-gradient: linear-gradient(135deg, var(--accent-start), #00c2ff, var(--accent-end));--accent-glow: rgba(127, 90, 240, .35);--danger: #ff6b6b;--warning: #ffc857;--success: #2cb67d;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-full: 50%;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);--shadow-md: 0 4px 20px rgba(0, 0, 0, .35);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px var(--accent-glow);--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--transition: .25s cubic-bezier(.4, 0, .2, 1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--player-height: 220px;--header-height: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-tap-highlight-color:transparent}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 600px 400px at 20% 10%,rgba(127,90,240,.12),transparent),radial-gradient(ellipse 500px 500px at 80% 80%,rgba(44,182,125,.08),transparent);pointer-events:none;z-index:0}#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}h2{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}h3{font-size:1.1rem;font-weight:600}p{color:var(--text-secondary);font-size:.9rem}.hidden{display:none!important}.glass-card{background:var(--bg-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition);color:var(--text-primary);background:var(--bg-hover);user-select:none;-webkit-user-select:none}.btn:active{transform:scale(.95)}.btn-primary{background:var(--accent-gradient);color:#fff;font-weight:600;box-shadow:var(--shadow-glow)}.btn-primary:hover{filter:brightness(1.1);box-shadow:0 0 40px var(--accent-glow)}.btn-accent{background:#7f5af033;color:#c4b5fd;border:1px solid rgba(127,90,240,.3)}.btn-accent:hover{background:#7f5af04d}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid rgba(255,255,255,.1)}.btn-ghost:hover{background:var(--bg-hover)}.btn-danger-ghost{background:transparent;color:var(--text-muted);border:none;padding:4px}.btn-danger-ghost:hover{color:var(--danger);background:#ff6b6b1f}.btn-sm{padding:5px 12px;font-size:.8rem}.btn-lg{padding:12px 28px;font-size:1rem}.btn-icon{width:42px;height:42px;padding:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:var(--bg-hover);position:relative}.btn-icon:hover{background:var(--bg-active)}.btn-play{width:58px;height:58px;padding:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:var(--accent-gradient);box-shadow:var(--shadow-glow);border:none;cursor:pointer;transition:all var(--transition);color:#fff}.btn-play:hover{filter:brightness(1.15);transform:scale(1.05)}.btn-play:active{transform:scale(.95)}.badge{background:#7f5af040;color:#c4b5fd;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:100px;min-width:20px;text-align:center}.select-control{background:var(--bg-hover);color:var(--text-primary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:5px 10px;font-family:var(--font);font-size:.82rem;cursor:pointer;outline:none;transition:border-color var(--transition)}.select-control:focus{border-color:var(--accent-start)}.select-control option{background:var(--bg-secondary)}#app-header{position:sticky;top:0;z-index:100;background:#0f0e17d9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);height:var(--header-height)}.header-content{max-width:900px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px}.logo-icon{width:28px;height:28px;color:var(--accent-start);filter:drop-shadow(0 0 8px var(--accent-glow))}#main-content{max-width:900px;margin:0 auto;padding:20px 20px calc(var(--player-height) + 30px);width:100%;flex:1}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:16px;animation:fadeIn .6s ease}.empty-icon{width:80px;height:80px;color:var(--text-muted);opacity:.5;margin-bottom:8px}.empty-state h2{color:var(--text-secondary);font-size:1.3rem}.empty-state p{color:var(--text-muted);margin-bottom:8px}.empty-hint{color:var(--text-muted);font-size:.85rem;text-align:center;padding:20px}.section{margin-bottom:28px;animation:slideUp .4s ease}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}.section-header-actions{display:flex;align-items:center;gap:10px}.sort-controls{display:flex;align-items:center;gap:8px}.sort-controls label{font-size:.82rem;color:var(--text-muted)}.library-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.book-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}.book-card:hover{border-color:#7f5af04d;transform:translateY(-4px);box-shadow:var(--shadow-md),0 0 20px #7f5af01a}.book-card.active{border-color:var(--accent-start);box-shadow:0 0 24px #7f5af033}.book-card-cover{width:100%;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.book-card-cover-bg{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.9}.book-card-cover-icon{position:relative;z-index:1;width:56px;height:56px;color:#ffffffd9;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));margin-bottom:10px}.book-card-cover-title{position:relative;z-index:1;font-size:.85rem;font-weight:700;color:#fff;text-align:center;padding:0 12px;text-shadow:0 2px 8px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;max-width:100%;word-break:break-word}.book-card-body{padding:12px 14px}.book-card-title{font-size:.85rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.book-card-meta{font-size:.72rem;color:var(--text-muted)}.book-card-delete{position:absolute;top:8px;right:8px;z-index:5;width:28px;height:28px;border:none;border-radius:var(--radius-full);background:#00000080;color:#ffffffb3;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);opacity:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.book-card:hover .book-card-delete{opacity:1}.book-card-delete:hover{background:#ff6b6b99;color:#fff}.book-card-delete svg{width:14px;height:14px}.book-card-progress{height:3px;background:#ffffff14;border-radius:2px;margin-top:8px;overflow:hidden}.book-card-progress-fill{height:100%;background:var(--accent-gradient);border-radius:2px;transition:width .3s ease}.book-card-status{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:.68rem;color:var(--text-muted)}.book-card-status .dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}.book-card.active .book-card-cover:after{content:"▶ Playing";position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#7f5af0d9;color:#fff;font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:100px;z-index:2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:.03em}.file-list{list-style:none;display:flex;flex-direction:column;gap:4px}.file-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.file-item:hover{background:var(--bg-hover)}.file-item.active{background:#7f5af026;border-left:3px solid var(--accent-start)}.file-item.active .file-name{color:#c4b5fd}.file-item .file-index{font-size:.75rem;color:var(--text-muted);min-width:24px;text-align:center;font-weight:500}.file-item .file-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:#7f5af01f;display:flex;align-items:center;justify-content:center;color:var(--accent-start);flex-shrink:0}.file-item .file-icon svg{width:18px;height:18px}.file-item .file-details{flex:1;min-width:0}.file-item .file-name{font-size:.9rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-item .file-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}.file-item .playing-indicator{display:none;gap:2px;align-items:flex-end;height:16px}.file-item.active .playing-indicator{display:flex}.playing-indicator span{width:3px;background:var(--accent-start);border-radius:2px;animation:soundBars .8s ease-in-out infinite alternate}.playing-indicator span:nth-child(1){height:40%;animation-delay:0s}.playing-indicator span:nth-child(2){height:70%;animation-delay:.2s}.playing-indicator span:nth-child(3){height:50%;animation-delay:.4s}.playing-indicator span:nth-child(4){height:80%;animation-delay:.1s}.bookmark-list{list-style:none;display:flex;flex-direction:column;gap:4px}.bookmark-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.bookmark-item:hover{background:var(--bg-hover)}.bookmark-item .bm-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:#2cb67d1f;display:flex;align-items:center;justify-content:center;color:var(--success);flex-shrink:0}.bookmark-item .bm-icon svg{width:16px;height:16px}.bookmark-item .bm-details{flex:1;min-width:0}.bookmark-item .bm-name{font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bookmark-item .bm-meta{font-size:.75rem;color:var(--text-muted);margin-top:1px}.bookmark-item .bm-delete{width:28px;height:28px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.bookmark-item .bm-delete:hover{background:#ff6b6b26;color:var(--danger)}.bookmark-item .bm-delete svg{width:14px;height:14px}.player-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;padding:0 12px 12px;animation:slideUp .5s cubic-bezier(.16,1,.3,1)}.player-glass{max-width:900px;margin:0 auto;background:#141324e0;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:18px 22px 16px;box-shadow:var(--shadow-lg),0 0 60px #7f5af01a}.now-playing{display:flex;align-items:center;gap:12px;margin-bottom:12px}.track-art{width:44px;height:44px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#7f5af033,#2cb67d26);display:flex;align-items:center;justify-content:center;color:var(--accent-start);flex-shrink:0}.track-art svg{width:24px;height:24px}.track-info{min-width:0;flex:1}.track-title{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-folder{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-container{display:flex;align-items:center;gap:10px;margin-bottom:14px}.time-label{font-size:.72rem;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:center}.progress-bar{flex:1;height:6px;background:#ffffff14;border-radius:3px;cursor:pointer;position:relative;transition:height var(--transition-fast)}.progress-bar:hover{height:8px}.progress-fill{height:100%;background:var(--accent-gradient);border-radius:3px;width:0%;position:relative;transition:none}.progress-thumb{position:absolute;top:50%;left:0%;width:14px;height:14px;border-radius:var(--radius-full);background:#fff;box-shadow:0 0 6px #0000004d,0 0 12px var(--accent-glow);transform:translate(-50%,-50%);opacity:0;transition:opacity var(--transition-fast);pointer-events:none}.progress-bar:hover .progress-thumb{opacity:1}.player-controls{display:flex;align-items:center;justify-content:center;gap:8px}.skip-label{position:absolute;font-size:.55rem;font-weight:700;color:var(--text-primary);bottom:6px}#speed-label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}.volume-control{display:flex;align-items:center;gap:4px}.volume-slider{width:70px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1f;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text-primary);box-shadow:0 0 4px #0000004d}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;background:#0f0e17e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.loading-spinner{width:44px;height:44px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent-start);border-radius:50%;animation:spin .8s linear infinite}.loading-text{color:var(--text-secondary);font-size:.9rem}.loading-progress-container{width:280px;max-width:80vw;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.loading-progress-fill{height:100%;background:var(--accent-gradient);border-radius:3px;width:0%;transition:width .3s ease}.loading-progress-text{font-size:.75rem;color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes soundBars{0%{height:30%}to{height:100%}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.continue-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;margin-bottom:16px;text-align:center;animation:fadeIn .5s ease}.btn-continue{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 48px;border:none;border-radius:20px;background:var(--accent-gradient);color:#fff;cursor:pointer;font-size:1.2rem;font-weight:700;font-family:inherit;transition:all .3s ease;box-shadow:0 8px 32px #7f5af059;animation:pulse-glow 2s ease infinite}.btn-continue:hover{transform:scale(1.05);box-shadow:0 12px 48px #7f5af080}.btn-continue:active{transform:scale(.97)}.btn-continue svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.continue-hint{margin-top:14px;font-size:.82rem;color:var(--text-muted)}@keyframes pulse-glow{0%,to{box-shadow:0 8px 32px #7f5af059}50%{box-shadow:0 8px 48px #7f5af08c}}.logo-icon{width:32px;height:32px;border-radius:8px;object-fit:cover;filter:drop-shadow(0 0 8px var(--accent-glow))}.btn-about-header{width:36px;height:36px;background:transparent;color:var(--text-muted);margin-left:auto;margin-right:10px}.btn-about-header:hover{color:var(--text-primary);background:var(--bg-hover)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease}.about-card{position:relative;max-width:360px;width:100%;padding:40px 32px 32px;text-align:center;animation:slideUp .35s cubic-bezier(.16,1,.3,1)}.about-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.about-close:hover{background:var(--bg-hover);color:var(--text-primary)}.about-logo{width:72px;height:72px;border-radius:16px;margin-bottom:16px;box-shadow:0 4px 24px #7f5af04d}.about-title{font-size:1.5rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;justify-content:center}.about-subtitle{font-size:.9rem;color:var(--text-secondary);font-weight:500;margin-bottom:4px}.about-version{font-size:.75rem;color:var(--text-muted)}.about-divider{height:1px;background:#ffffff0f;margin:18px 0}.about-credit{font-size:.9rem;color:var(--text-primary);margin-bottom:6px}.about-credit strong{color:#fff;font-weight:600}.about-company{font-size:1.1rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.about-tagline{font-size:.78rem;color:var(--text-muted);font-style:italic;letter-spacing:.02em}.about-copy{font-size:.68rem;color:var(--text-muted)}@media(max-width:480px){.header-content{padding:0 14px}#main-content{padding:14px 14px calc(var(--player-height) + 20px)}.player-glass{padding:14px 16px 12px}.player-controls{gap:4px}.btn-icon{width:38px;height:38px}.btn-play{width:52px;height:52px}.volume-control{display:none}.file-item{padding:10px;gap:8px}h1{font-size:1.1rem}#btn-load-folder span{display:none}.library-list{grid-template-columns:1fr}.section-header-actions{flex-wrap:wrap}.btn-about-header{margin-right:6px}}