:root{font-family:Pretendard Variable,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#0f172a;background-color:#f8fafc;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(circle at 10% 20%,#e0f2ff,#f8fafc 35%,#eef2ff);overflow:hidden}img{max-width:100%;display:block}button{font-family:inherit}#root{width:100%;height:100%;margin:0;padding:0}.app-shell{position:relative;display:flex;flex-direction:column;height:100%;padding:24px;box-sizing:border-box;background:radial-gradient(circle at top,rgba(79,70,229,.2),transparent 55%) #0f172a;gap:16px}button{border:none;border-radius:12px;padding:12px 20px;font-size:1rem;font-weight:600;cursor:pointer;background:#4f46e5;color:#fff;transition:transform .15s ease,opacity .15s ease}button:disabled{opacity:.6;cursor:not-allowed}button:hover:not(:disabled){transform:translateY(-1px)}button.ghost{background:#e2e8ff33;color:#e0e7ff;border:1px solid rgba(226,232,255,.4)}.main-layout{flex:1;display:flex;gap:24px;height:100%;padding-top:64px;box-sizing:border-box;overflow:hidden;min-height:0}.player-stage{position:relative;flex:1;min-height:0;height:100%;border-radius:28px;background:radial-gradient(circle at 20% 20%,#4f46e559,#111827f2);padding:32px;display:flex;align-items:stretch;box-shadow:0 30px 60px #0f172a59;overflow:hidden}.player-surface{display:flex;flex-direction:column;gap:24px;width:100%;height:100%}.player-wrapper{flex:1;border-radius:20px;overflow:hidden;background:#000;min-height:0}.player-wrapper>div{height:100%}.player-wrapper iframe{width:100%;height:100%;border:none;display:block}.player-info{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#e2e8f0}.player-info h3{margin:4px 0;font-size:1.4rem}.player-info p{margin:0;color:#cbd5f5}.now-playing-label{text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;opacity:.8}.player-placeholder{flex:1;border-radius:20px;border:1px dashed rgba(226,232,255,.3);color:#e2e8f0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.player-controls{display:flex;gap:12px;flex-wrap:wrap}.player-controls .ghost{background:transparent;color:#e0e7ff;border:1px solid rgba(226,232,255,.6)}.panel-toggle{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;border:1px solid rgba(226,232,255,.5);background:#0f172ab3;color:#e2e8f0;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 10px 25px #0f172a66}.side-panel{width:0;height:100%;border-radius:28px;background:#fff;box-shadow:0 30px 60px #0f172a26;overflow:hidden;transition:width .35s ease,opacity .3s ease;opacity:0;pointer-events:none;display:flex}.side-panel.open{width:min(40vw,520px);opacity:1;pointer-events:auto}.panel-scroll{padding:32px;display:flex;flex-direction:column;gap:24px;width:100%;overflow-y:auto;height:100%}.panel-section{background:#f8fafc;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px}.panel-section header h2{margin:0;font-size:1.1rem;color:#1e1b4b}.panel-section header p{margin:6px 0 0;color:#64748b;font-size:.9rem}.search-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.field{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}.field label{font-size:.85rem;font-weight:600;color:#475569}.field input{border-radius:12px;border:1px solid #cbd5f5;padding:12px 14px;font-size:1rem}.results-grid{display:flex;flex-direction:column;gap:16px}.result-card{border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:#fff}.result-card img{width:100%;aspect-ratio:16 / 9;object-fit:cover}.result-body{padding:16px;display:flex;flex-direction:column;gap:8px}.result-body h3{margin:0;font-size:1rem;color:#0f172a}.meta{margin:0;font-size:.9rem;color:#475569}.description{margin:0;font-size:.85rem;color:#64748b;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.actions{margin-top:auto;display:flex}.restriction{margin:0;color:#b91c1c;font-size:.85rem}.queue-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.queue-header button.ghost{background:#4f46e51a;color:#312e81;border:1px solid rgba(79,70,229,.2)}.queue-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.queue-list li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid #e2e8f0;background:#fff}.queue-list img{width:64px;height:40px;border-radius:8px;object-fit:cover}.queue-list strong{display:block;font-size:.95rem}.queue-list p{margin:4px 0 0;font-size:.85rem;color:#64748b}.queue-actions{margin-left:auto;display:flex;gap:6px}.queue-actions button{width:32px;height:32px;padding:0;background:#e0e7ff;color:#312e81}.status-banner{position:absolute;top:24px;left:24px;right:24px;padding:12px 20px;border-radius:16px;font-weight:500;z-index:5}.status-banner.info{background:#e0f2fe;color:#0c4a6e}.status-banner.success{background:#dcfce7;color:#166534}.status-banner.error{background:#fee2e2;color:#b91c1c}.empty{text-align:center;color:#94a3b8;margin:16px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-width:1024px){.main-layout{flex-direction:column}.side-panel,.side-panel.open{width:100%}.panel-toggle{right:24px}}@media(max-width:640px){.app-shell{padding:16px}.main-layout{padding-top:80px}.player-stage{padding:24px}}