:root{--font-family:"Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--bg-color:#0b0c10;--bg-gradient:linear-gradient(135deg, #1f2833 0%, #0b0c10 100%);--surface-color:#1f283399;--surface-border:#ffffff1a;--text-primary:#fff;--text-secondary:#c5c6c7;--accent-color:#66fcf1;--accent-hover:#45a29e;--danger-color:#ff4b4b}body{font-family:var(--font-family);background:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-attachment:fixed;justify-content:center;align-items:flex-start;min-height:100vh;margin:0;padding:0;display:flex}#root{box-sizing:border-box;width:100%;max-width:800px;padding:2rem}.glass-panel{background:var(--surface-color);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:16px;padding:24px;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 32px #0000005e}.glass-panel:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000073}h1,h2,h3{letter-spacing:-.02em;margin-top:0;font-weight:600}h1{background:-webkit-linear-gradient(#fff,#66fcf1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem}p{color:var(--text-secondary);line-height:1.6}.input-group{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.input-group label{color:var(--text-secondary);font-size:.9rem;font-weight:500}input[type=text],input[type=url]{border:1px solid var(--surface-border);color:var(--text-primary);font-size:1rem;font-family:var(--font-family);background:#0003;border-radius:8px;outline:none;padding:12px 16px;transition:border-color .2s,box-shadow .2s}input[type=text]:focus,input[type=url]:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px #66fcf133}button{background:var(--accent-color);color:#0b0c10;font-size:1rem;font-weight:600;font-family:var(--font-family);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;transition:all .2s;display:inline-flex}button:hover{background:var(--accent-hover);transform:translateY(-1px)}button.danger{color:var(--danger-color);border:1px solid var(--danger-color);background:0 0}button.danger:hover{background:#ff4b4b1a}.playlist-item{background:#0003;border:1px solid #ffffff0d;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:16px;transition:background .2s;display:flex}.playlist-item:hover{background:#0006}.playlist-info h3{color:#fff;margin:0 0 4px;font-size:1.1rem}.playlist-info p{opacity:.7;margin:0;font-size:.85rem}.status-badge{text-transform:uppercase;border-radius:12px;padding:4px 8px;font-size:.75rem;font-weight:600;display:inline-block}.status-processing{color:#f39c12;background:#f39c121a}.status-ready{color:#2ecc71;background:#2ecc711a}.status-error{color:#e74c3c;background:#e74c3c1a}