*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}:root{--bg-color: #0f0f0f;--card-bg: #1a1a1a;--text-main: #ffffff;--text-muted: #a0a0a0;--border-color: rgba(255, 255, 255, .1);--primary: #8a2be2;--secondary: #4169e1;--accent: #bb86fc;--gradient: linear-gradient(135deg, var(--primary), var(--secondary));--glow: 0 0 40px rgba(138, 43, 226, .5);--success: #2ecc71}[data-theme=light]{--bg-color: #f8f9fa;--card-bg: #ffffff;--text-main: #121212;--text-muted: #555555;--border-color: rgba(0, 0, 0, .1);--glow: 0 5px 20px rgba(138, 43, 226, .3)}html,body{height:100%;background-color:var(--bg-color);color:var(--text-main);transition:background-color .3s ease,color .3s ease}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(138,43,226,.05) 0%,transparent 70%);animation:rotate 20s linear infinite;z-index:-1}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.listen-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.listen-card{max-width:560px;width:100%;background:var(--card-bg);border-radius:12px;padding:48px;text-align:center;box-shadow:0 20px 60px #0000004d;position:relative;overflow:hidden;animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.listen-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient);opacity:0;transition:opacity .3s}h1{font-size:2rem;font-weight:700;margin-bottom:12px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-muted);font-size:1rem;line-height:1.6;margin-bottom:32px}.room-code-section{background:#8a2be214;border:2px solid rgba(138,43,226,.2);border-radius:16px;padding:24px;margin-bottom:32px;position:relative}.room-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600;margin-bottom:8px}.room-code{font-size:2.5rem;font-weight:800;letter-spacing:8px;font-family:monospace;word-break:break-all}.room-code.empty{color:var(--text-muted);font-size:1.2rem;letter-spacing:2px;font-family:Inter,sans-serif}.copy-btn{position:absolute;top:16px;right:16px;background:transparent;border:1px solid var(--border-color);color:var(--text-main);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .3s;display:flex;align-items:center;gap:6px}.copy-btn:hover{background:var(--gradient);border-color:var(--primary);color:#fff;transform:translateY(-2px)}.copy-btn.copied{background:var(--success);border-color:var(--success);color:#fff}.listen-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;text-decoration:none;font-weight:600;transition:all .3s;border:none;cursor:pointer;font-size:.95rem}.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 4px 15px #8a2be24d}.btn-primary:hover{box-shadow:var(--glow);transform:translateY(-2px)}.btn-secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-main)}.btn-secondary:hover{background:var(--border-color);border-color:var(--primary)}.info-section{margin-top:32px;padding-top:32px;border-top:1px solid var(--border-color)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:20px}.info-item{text-align:center;padding:16px;background:#ffffff05;border-radius:12px}.info-item i{font-size:1.5rem;color:var(--primary);margin-bottom:8px}.info-item h4{font-size:.85rem;color:var(--text-muted);font-weight:600;margin-bottom:4px}.info-item p{font-size:.9rem;color:var(--text-main)}.back-link{margin-top:24px;display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);text-decoration:none;font-size:.9rem;transition:color .3s}.back-link:hover{color:var(--primary)}@media(max-width:600px){.listen-card{padding:32px 24px}h1{font-size:1.5rem}.room-code{font-size:1.8rem;letter-spacing:4px}.listen-actions{flex-direction:column}.btn{width:100%;justify-content:center}.info-grid{grid-template-columns:1fr}.copy-btn{position:static;margin-top:12px;width:100%;justify-content:center}}