*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #4f6ef7;--primary-hover: #3b5adb;--danger: #e74c3c;--danger-hover: #c0392b;--success: #27ae60;--warning: #f39c12;--bg: #f0f2f5;--card-bg: #ffffff;--text: #1a1a2e;--text-secondary: #6b7280;--border: #e5e7eb;--radius: 12px;--shadow: 0 2px 12px rgba(0, 0, 0, .06)}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.page{display:none;flex-direction:column;min-height:100vh}.page.active{display:flex}.page-header{position:sticky;top:0;z-index:10;background:var(--card-bg);padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);box-shadow:0 1px 3px #0000000a}.page-header h1{font-size:18px;font-weight:600;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-btn{background:none;border:none;color:var(--primary);font-size:15px;cursor:pointer;padding:4px 8px;flex-shrink:0;min-width:auto;width:auto}.back-btn:hover{color:var(--primary-hover)}.page-content{flex:1;padding:20px;display:flex;flex-direction:column;gap:16px}.loading-tip,.empty-tip{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:15px}.room-cards{display:flex;flex-direction:column;gap:12px}.room-card{background:var(--card-bg);border-radius:var(--radius);padding:16px 20px;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;border:1px solid var(--border)}.room-card:active{transform:scale(.98);box-shadow:0 1px 4px #00000014}.room-card-title{font-size:16px;font-weight:600;margin-bottom:6px}.room-card-meta{font-size:13px;color:var(--text-secondary);display:flex;gap:16px;flex-wrap:wrap}.room-card-status{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:10px;font-weight:500}.room-card-status.live{background:#fee2e2;color:#dc2626}.room-card-status.live:before{content:"";width:6px;height:6px;border-radius:50%;background:#dc2626;animation:pulse-dot 1.5s ease-in-out infinite}.room-card-status.not-started{background:#fef3c7;color:#b45309}.room-card-status.ended{background:#e5e7eb;color:#6b7280}.room-info{background:var(--card-bg);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);border:1px solid var(--border)}.enter-room-title{font-size:18px;font-weight:600;margin-bottom:8px}.enter-room-host,.enter-room-status{font-size:14px;color:var(--text-secondary);margin-bottom:4px}.label{color:var(--text-secondary)}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:500;color:var(--text)}input[type=text]{width:100%;padding:14px 16px;font-size:16px;border:1px solid var(--border);border-radius:var(--radius);outline:none;background:var(--card-bg);transition:border-color .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f6ef71f}button{width:100%;padding:14px;font-size:16px;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:background .2s,opacity .2s}button:disabled{opacity:.6;cursor:not-allowed}.primary-btn{background:var(--primary);color:#fff}.primary-btn:hover:not(:disabled){background:var(--primary-hover)}.danger-btn{background:var(--danger);color:#fff}.danger-btn:hover:not(:disabled){background:var(--danger-hover)}.error{color:var(--danger);font-size:14px;text-align:center;padding:8px;background:#fef2f2;border-radius:8px}.hidden{display:none!important}.player-container{background:var(--card-bg);border-radius:var(--radius);padding:24px 20px 20px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:16px}.player-visualizer{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;position:relative}.audio-wave{display:flex;align-items:center;gap:3px;height:50px}.audio-wave span{width:4px;height:20px;background:#fffc;border-radius:2px;animation:wave 1.2s ease-in-out infinite}.audio-wave span:nth-child(1){animation-delay:0s;height:16px}.audio-wave span:nth-child(2){animation-delay:.1s;height:24px}.audio-wave span:nth-child(3){animation-delay:.2s;height:36px}.audio-wave span:nth-child(4){animation-delay:.3s;height:44px}.audio-wave span:nth-child(5){animation-delay:.4s;height:50px}.audio-wave span:nth-child(6){animation-delay:.5s;height:44px}.audio-wave span:nth-child(7){animation-delay:.6s;height:36px}.audio-wave span:nth-child(8){animation-delay:.7s;height:24px}.audio-wave span:nth-child(9){animation-delay:.8s;height:16px}.audio-wave span:nth-child(10){animation-delay:.9s;height:8px}@keyframes wave{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}#audio-player{width:100%;height:40px}#audio-player::-webkit-media-controls-panel{background:transparent}.status-tip{display:flex;flex-direction:column;gap:8px}.status-indicator{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--radius);font-size:14px;font-weight:500}.status-loading{background:#f0f2f5;color:var(--text-secondary)}.status-waiting{background:#fef3c7;color:#92400e}.status-live{background:#fee2e2;color:#991b1b}.status-ended{background:#e5e7eb;color:#6b7280}.status-buffering{background:#f0f2f5;color:var(--text-secondary)}.live-dot{width:8px;height:8px;border-radius:50%;background:#dc2626;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.status-icon{font-size:18px}.spinner{width:18px;height:18px;border:2px solid #d1d5db;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.retry-area{text-align:center;padding:40px 20px}.retry-area p{color:var(--text-secondary);margin-bottom:16px;font-size:15px}.retry-btn{display:inline-block;padding:10px 24px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:14px;cursor:pointer;width:auto;min-width:120px}.retry-btn:hover{background:var(--primary-hover)}@media (max-width: 420px){.page-content{padding:16px}.room-card,.room-info{padding:14px 16px}}