:root{--bg-main: #0b0f19;--bg-card: rgba(26, 34, 56, .7);--bg-card-active: rgba(45, 59, 94, .85);--bg-player: #111827;--primary: #38bdf8;--primary-glow: rgba(56, 189, 248, .35);--accent: #818cf8;--accent-pink: #ec4899;--text-main: #f8fafc;--text-muted: #94a3b8;--radius-xl: 24px;--radius-lg: 18px;--radius-md: 12px;--touch-highlight: transparent;--font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-family);position:fixed;top:0;left:0}#app{width:100%;height:100dvh;display:flex;flex-direction:column;position:relative;background:radial-gradient(circle at 50% 10%,#1e1b4b,#0b0f19 80%)}.player-layout{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}.top-section{height:60%;display:flex;flex-direction:column;padding:env(safe-area-inset-top,16px) 16px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1)}.top-section.full-height{height:100%;border-bottom:none}.top-section.full-height .card-item{flex:0 0 calc(58vw - 20px);max-width:320px;height:82%}.top-nav-bar{display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0;margin-bottom:8px;position:relative}.top-nav-left{display:flex;align-items:center;min-width:120px}.top-nav-right{display:flex;align-items:center;gap:8px;min-width:120px;justify-content:flex-end}.header-back-btn{display:flex;align-items:center;gap:6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.16);color:#f8fafc;padding:8px 14px;border-radius:999px;font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header-back-btn:active{transform:scale(.92);background:#fff3;border-color:#ffffff4d}.loop-toggle-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#ffffff14;border:1.5px solid rgba(255,255,255,.18);color:#94a3b8;border-radius:50%;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-shrink:0}.loop-toggle-btn.active{background:#38bdf838;border-color:#38bdf8;color:#38bdf8;box-shadow:0 0 16px #38bdf880}.loop-toggle-btn:active{transform:scale(.92)}.user-badge{display:flex;align-items:center;gap:8px;background:#ffffff12;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}.user-badge:active{transform:scale(.94);background:#ffffff29;border-color:#ffffff40}.user-avatar{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#38bdf8}.logout-icon{display:flex;align-items:center;justify-content:center;opacity:.6;margin-left:2px;transition:opacity .2s ease}.user-badge:hover .logout-icon{opacity:1}.user-name{font-size:.95rem;font-weight:700;color:#e2e8f0}.breadcrumb{font-size:1.05rem;font-weight:800;color:#38bdf8;text-shadow:0 0 16px rgba(56,189,248,.4);max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.status-indicator{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--text-muted);background:#0000004d;padding:4px 10px;border-radius:999px}.indicator-dot{width:8px;height:8px;border-radius:50%;background-color:#64748b;transition:background-color .3s ease}.status-indicator.active .indicator-dot{background-color:#10b981;box-shadow:0 0 8px #10b981}.cards-carousel-container{flex:1;display:flex;align-items:center;position:relative;overflow:hidden}.cards-scroll-track{display:flex;gap:20px;height:90%;align-items:center;padding:0 12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.cards-scroll-track::-webkit-scrollbar{display:none}.card-item{flex:0 0 calc(52vw - 20px);max-width:240px;height:95%;background:var(--bg-card);border:2px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:center;box-shadow:0 10px 24px -6px #00000080;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,box-shadow .2s ease;cursor:pointer;position:relative}.card-item:active{transform:scale(.95);border-color:var(--primary);box-shadow:0 0 20px var(--primary-glow)}.card-item.is-folder{border-color:#818cf84d}.card-item.is-active-track,.card-item.is-active-folder{border-width:3.5px!important;border-color:#38bdf8!important;box-shadow:0 0 25px #38bdf88c,inset 0 0 15px #38bdf826!important;animation:pulse-active-glow 2.5s ease-in-out infinite alternate}@keyframes pulse-active-glow{0%{box-shadow:0 0 16px #38bdf859;border-color:#38bdf8}to{box-shadow:0 0 28px #38bdf8b3,inset 0 0 10px #38bdf840;border-color:#7dd3fc}}.card-type-badge.folder.is-playing-parent{color:#fff;background:linear-gradient(135deg,#10b981,#059669);border:1px solid #34d399;box-shadow:0 0 14px #10b98180;font-weight:800}.card-image-wrap{flex:1;position:relative;overflow:hidden;background:#1e293b}.card-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.card-type-badge{position:absolute;top:10px;right:10px;background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px}.card-type-badge svg{width:14px;height:14px;stroke-width:2.2}.card-type-badge.folder{color:#a5b4fc}.card-type-badge.song{color:#38bdf8}.card-type-badge.story{color:#f472b6}.card-title-bar{padding:8px 12px;background:#0f172af2;min-height:62px;display:flex;flex-direction:column;justify-content:center}.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-title-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.card-title{font-size:.95rem;line-height:1.25;font-weight:700;color:#fff;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.card-meta{font-size:.75rem;color:var(--text-muted)}.card-play-btn{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#38bdf826;border:1.5px solid rgba(56,189,248,.45);color:#38bdf8;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 4px 10px #0000004d}.card-play-btn:hover{background:#38bdf8;color:#0f172a;border-color:#38bdf8;transform:scale(1.08);box-shadow:0 0 14px #38bdf8b3}.card-play-btn:active{transform:scale(.92)}.card-play-btn.is-playing{background:linear-gradient(135deg,#10b981,#059669);border-color:#34d399;color:#fff;box-shadow:0 0 14px #10b98199}.bottom-section{height:40%;background:linear-gradient(180deg,#111827,#070a12);display:flex;flex-direction:column;justify-content:space-between;padding:16px 20px calc(env(safe-area-inset-bottom,16px) + 12px) 20px;box-shadow:0 -12px 30px #0009;z-index:10}.now-playing-info{display:flex;align-items:center;justify-content:space-between;gap:12px}.now-playing-clickable{display:flex;align-items:center;gap:14px;flex:1;min-width:0;cursor:pointer;border-radius:var(--radius-md);padding:4px 6px;margin:-4px -6px;transition:transform .15s ease,opacity .15s ease;-webkit-user-select:none;user-select:none}.now-playing-clickable:active{transform:scale(.97);opacity:.85}.now-playing-clickable:hover .track-thumb-wrapper{border-color:#38bdf8;box-shadow:0 0 16px #38bdf873}.now-playing-clickable:hover .track-title{color:#38bdf8}.track-thumb-wrapper{position:relative;width:58px;height:58px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;border:2px solid rgba(255,255,255,.12);box-shadow:0 4px 14px #0006}.track-thumb{width:100%;height:100%;object-fit:cover}.playing-wave{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;gap:3px}.playing-wave span{width:4px;height:16px;background-color:#38bdf8;border-radius:2px;animation:wave 1s ease-in-out infinite alternate}.playing-wave span:nth-child(2){animation-delay:.25s;height:24px}.playing-wave span:nth-child(3){animation-delay:.5s}@keyframes wave{0%{transform:scaleY(.4)}to{transform:scaleY(1.1)}}.track-text{flex:1;min-width:0}.track-title{font-size:1.1rem;line-height:1.25;font-weight:800;color:#fff;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.track-subtitle{font-size:.85rem;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-container{display:flex;align-items:center;gap:12px;margin:6px 0}.time-label{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:38px}.progress-bar-wrap{flex:1;height:18px;background:#ffffff1f;border-radius:999px;position:relative;cursor:pointer;touch-action:none}.progress-bar-wrap:before{content:"";position:absolute;top:-14px;bottom:-14px;left:0;right:0}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#38bdf8,#818cf8);border-radius:999px;position:relative;pointer-events:none}.progress-handle{position:absolute;top:50%;left:0%;width:28px;height:28px;background:#fff;box-shadow:0 0 12px #38bdf8e6;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;touch-action:none;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.progress-handle.dragging,.progress-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.3);background:#38bdf8;box-shadow:0 0 22px #38bdf8,0 0 38px #38bdf8b3}.massive-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;height:88px}.control-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 18px #00000059;transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease;min-width:0}.control-btn:active{transform:scale(.92);background:#ffffff29}.btn-caption{font-size:.75rem;font-weight:800;margin-top:3px;letter-spacing:.2px}.btn-nav-track{flex:.95;height:82px}.btn-nav-track svg{width:28px;height:28px}.btn-seek{flex:1.05;height:82px}.btn-seek svg{width:26px;height:26px}.btn-play-pause{flex:1.6;height:88px;background:linear-gradient(135deg,#38bdf8,#6366f1);border:none;box-shadow:0 10px 25px #38bdf873}.btn-play-pause:active{transform:scale(.92);box-shadow:0 4px 15px #38bdf84d}.btn-play-pause svg{width:38px;height:38px;fill:#fff}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050810f2;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.pin-card{width:100%;max-width:340px;background:#1e293bcc;border:2px solid rgba(255,255,255,.12);border-radius:32px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 50px #000000b3}.pin-icon{font-size:2.8rem;margin-bottom:8px}.pin-title{font-size:1.6rem;font-weight:800;color:#fff}.pin-subtitle{font-size:.9rem;color:var(--text-muted);margin-top:4px}.pin-dots{display:flex;gap:16px;margin:20px 0 14px}.dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.dot.filled{background:#38bdf8;border-color:#38bdf8;box-shadow:0 0 14px #38bdf8cc;transform:scale(1.15)}.pin-error{font-size:.85rem;font-weight:600;color:#f87171;min-height:20px;margin-bottom:10px;text-align:center}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}.key-btn{aspect-ratio:1;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:#fff;font-size:1.6rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000040;transition:transform .12s ease,background-color .15s ease}.key-btn:active{transform:scale(.9);background:#38bdf84d}.clear-key,.backspace-key{font-size:1.25rem;color:#94a3b8}.hidden{display:none!important}