@import"https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--bg-top: #0b0f14;--bg-bottom: #0b0f14;--ink: #edf2ff;--ink-soft: #a8b3cb;--card: rgba(17, 23, 34, .78);--card-strong: rgba(17, 23, 34, .93);--line: rgba(139, 92, 246, .3);--accent: #22c55e;--accent-strong: #16a34a;--brand-purple: #8b5cf6;--brand-purple-strong: #6d3fe6;--danger: #f87171;--shadow: 0 18px 46px rgba(0, 0, 0, .48)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;width:100%}body{font-family:Space Grotesk,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(1000px 620px at -8% -22%,rgba(139,92,246,.32),transparent 60%),radial-gradient(920px 640px at 112% 110%,rgba(34,197,94,.2),transparent 62%),linear-gradient(160deg,var(--bg-top),var(--bg-bottom))}.app-shell{min-height:100vh;position:relative;overflow-x:hidden}.playlist-toggle{position:fixed;left:18px;top:18px;z-index:30;border:0;border-radius:16px;width:52px;height:52px;background:linear-gradient(145deg,var(--brand-purple),var(--brand-purple-strong));box-shadow:var(--shadow);color:#f5ebff;cursor:pointer;display:grid;place-items:center}.playlist-toggle-logo{width:26px;height:26px;display:block}.playlist-drawer{position:fixed;left:0;top:0;bottom:0;width:min(370px,87vw);padding:86px 16px 18px;border-right:1px solid rgba(139,92,246,.34);background:var(--card);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transition:transform .22s ease;z-index:20;display:grid;grid-template-rows:auto 1fr auto;gap:14px}.playlist-drawer.closed{transform:translate(-102%)}.drawer-header{padding:6px 8px}.drawer-header h3{margin:0;font-family:Archivo,Space Grotesk,sans-serif;font-weight:800;letter-spacing:.01em;font-size:1.14rem}.drawer-meta{margin-top:8px;font-size:.85rem;color:var(--ink-soft);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.save-playlist-btn{border:0;border-radius:8px;padding:4px 10px;background:#22c55e;color:#072212;font-size:.74rem;font-weight:700;cursor:pointer}.playlist-items{overflow:auto;padding-right:4px}.empty-list{border:1px dashed var(--line);border-radius:18px;padding:16px;color:var(--ink-soft);font-size:.92rem;background:#8b5cf614}.playlist-item{border:1px solid var(--line);border-radius:16px;background:#141a26d9;margin-bottom:10px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:12px}.playlist-item.current{border-color:#22c55ebf;box-shadow:0 10px 22px #22c55e29}.playlist-item-main{border:0;background:transparent;text-align:left;padding:0;cursor:pointer;color:inherit}.item-title{font-family:Archivo,Space Grotesk,sans-serif;font-size:.96rem;line-height:1.28;font-weight:700}.item-url{margin-top:5px;font-size:.74rem;color:var(--ink-soft);word-break:break-all}.item-meta{display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;gap:8px}.item-duration{font-size:.75rem;color:var(--ink-soft)}.item-actions{position:relative}.ellipsis-btn{border:0;background:#8b5cf638;color:#efe7ff;width:28px;height:24px;border-radius:9px;cursor:pointer;line-height:1;font-weight:700}.item-menu{position:absolute;right:0;top:calc(100% + 6px);background:#111722fa;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:102px;padding:5px;z-index:4}.item-menu-remove{width:100%;border:0;border-radius:7px;padding:7px 10px;text-align:left;background:#f8717124;color:#ffd7d7;cursor:pointer}.item-menu-rename{width:100%;border:0;border-radius:7px;padding:7px 10px;text-align:left;background:#8b5cf633;color:#efe7ff;cursor:pointer;margin-bottom:4px}.drawer-footer{padding-top:4px}.drawer-footer-grid{display:grid;gap:8px}.drawer-nav-btn{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#8b5cf629;color:var(--ink);text-align:left;cursor:pointer}.drawer-nav-btn.secondary{background:#22c55e29}.player-column{padding:72px 24px 30px;transition:padding-left .22s ease}.player-column.shifted{padding-left:min(400px,calc(87vw + 24px))}.player-shell{position:relative;min-height:min(72vh,760px);border:1px solid rgba(139,92,246,.38);border-radius:34px;overflow:hidden;box-shadow:var(--shadow);background:radial-gradient(1200px 760px at 70% -8%,rgba(139,92,246,.35),transparent 58%),radial-gradient(850px 540px at -10% 118%,rgba(34,197,94,.2),transparent 60%),linear-gradient(145deg,#0b0f14,#0f1621 42%,#111a29)}.player-frame{border:0;width:100%;height:100%;position:absolute;inset:0}.overlay-controls{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;opacity:0;transition:opacity .18s ease;pointer-events:none}.overlay-controls.visible{opacity:1;pointer-events:auto}.overlay-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;background:linear-gradient(to bottom,#020f1cc7,#020f1c08);border-radius:18px;padding:12px 14px}.overlay-title{font-family:Archivo,Space Grotesk,sans-serif;color:#f2f9ff;font-weight:700;line-height:1.24;max-width:min(740px,100%)}.overlay-subtitle{margin-top:4px;color:#f1fbffb3;font-size:.78rem;max-width:min(740px,100%);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.overlay-duration{color:#e5f6ff;font-size:.78rem;font-weight:700;white-space:nowrap;margin-top:2px}.overlay-bottom{background:linear-gradient(to top,#020f1cd1,#020f1c14);border-radius:18px;padding:12px}.control-row{display:flex;flex-wrap:wrap;gap:8px}.control-row button{border:0;border-radius:999px;padding:8px 14px;background:#8b5cf62e;color:#f1ecff;font-family:Space Grotesk,sans-serif;cursor:pointer;transition:background-color .14s ease}.control-row button:hover{background:#8b5cf654}.timeline-track{margin-top:10px;border-radius:999px;height:6px;background:#ffffff38;overflow:hidden}.timeline-progress{height:100%;border-radius:inherit;background:linear-gradient(90deg,#33d070,#22c55e);transition:width .18s linear}.completion-note{margin:9px 1px 0;color:#e0f1ffbf;font-size:.75rem}.empty-player{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:30px;color:#deefff}.empty-player-title{font-family:Archivo,Space Grotesk,sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800}.empty-player p{margin:0 auto;max-width:640px;color:#dcf1ffd6;line-height:1.5}.now-meta{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.clear-history-btn{border:0;border-radius:8px;padding:4px 9px;background:#8b5cf638;color:var(--ink);cursor:pointer;font-size:.74rem}.clear-history-btn:disabled{opacity:.5;cursor:not-allowed}.history-empty{margin-top:10px;font-size:.88rem;color:var(--ink-soft)}.history-list{margin-top:10px;display:grid;gap:8px;max-height:220px;overflow:auto;padding-right:4px}.history-item{border:1px solid var(--line);border-radius:12px;padding:9px;background:#8b5cf614}.history-item-title{font-size:.9rem;font-weight:700}.history-item-url{margin-top:3px;color:var(--ink-soft);font-size:.75rem;word-break:break-all}.history-item-duration{margin-top:5px;font-size:.72rem;color:#8ad9a6}.saved-playlist-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:9px;background:#22c55e14}.saved-playlist-item.active{border-color:#22c55ebf}.saved-playlist-main{border:0;background:transparent;text-align:left;color:var(--ink);cursor:pointer;padding:0}.stat-card{border:1px solid var(--line);border-radius:16px;padding:12px;background:#121823d1}.stat-label{font-size:.78rem;color:var(--ink-soft)}.duration-help{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;margin-left:5px;font-size:.64rem;color:#f6f0ff;background:#8b5cf68c;vertical-align:text-top;cursor:help}.stat-value{font-family:Archivo,Space Grotesk,sans-serif;font-size:1.22rem;margin-top:5px}.floating-add{position:fixed;right:20px;bottom:22px;z-index:35;border:0;width:68px;height:68px;border-radius:22px;color:#f4fffb;background:linear-gradient(145deg,var(--accent),var(--accent-strong));font-size:2rem;cursor:pointer;box-shadow:0 16px 34px #00574257}.overlay{position:fixed;inset:0;z-index:40;display:grid;place-content:center;padding:16px;background:#06111b47;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.add-modal{width:min(580px,100%);border:1px solid var(--line);border-radius:22px;background:var(--card-strong);padding:20px;box-shadow:var(--shadow)}.add-modal h2{margin:0;font-family:Archivo,Space Grotesk,sans-serif}.add-modal p{margin:8px 0 14px;color:var(--ink-soft);font-size:.92rem}.add-modal input{width:100%;border:1px solid rgba(139,92,246,.4);border-radius:12px;padding:10px 12px;background:#0b0f14bd;color:var(--ink);font-size:.94rem}.modal-actions{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}.ghost-btn,.solid-btn{border:0;border-radius:999px;padding:9px 14px;cursor:pointer;font-family:Space Grotesk,sans-serif}.ghost-btn{background:#8b5cf633;color:var(--ink)}.solid-btn{background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:#f4fffb}.progress-modal{width:min(360px,100%);border:1px solid var(--line);border-radius:20px;background:var(--card-strong);box-shadow:var(--shadow);padding:16px}.progress-modal-header{font-family:Archivo,Space Grotesk,sans-serif;font-size:1.08rem;font-weight:700}.progress-message{font-size:.84rem;color:var(--ink-soft);margin-top:4px}.stage-list{margin-top:10px;display:grid;gap:7px}.stage{display:flex;align-items:center;gap:7px;font-size:.85rem;color:#e4edffb8}.stage-dot{width:9px;height:9px;border-radius:999px;background:#e4edff57}.stage-active{color:#fff}.stage-active .stage-dot{background:var(--accent);animation:pulse 1s ease-in-out infinite}.stage-done .stage-dot{background:var(--accent-strong)}.inline-error{margin:10px 0 0;color:var(--danger);font-size:.84rem}.drop-overlay{position:fixed;inset:0;z-index:50;border:2px dashed rgba(139,92,246,.74);background:#8b5cf633;display:grid;place-content:center;color:#efe7ff;font-size:clamp(1rem,3vw,1.4rem);font-family:Archivo,Space Grotesk,sans-serif}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.66}}@media(max-width:980px){.player-column{padding:76px 14px 20px}.player-column.shifted{padding-left:14px}.player-shell{min-height:56vh;border-radius:24px}.now-meta{grid-template-columns:1fr}.floating-add{width:62px;height:62px;border-radius:20px}}