.homepage{min-height:100vh;background:linear-gradient(180deg,#000 0%,#0a0a0a 100%);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.homepage .top-strip{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.homepage .top-strip:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.homepage .brand{font-size:20px;font-weight:700;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.broadcast-button{padding:8px 16px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #8b5cf64d}.broadcast-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf666}.main-content{padding:24px;max-width:600px;margin:0 auto}.hero-section{text-align:center;margin-bottom:32px}.hero-title{font-size:32px;font-weight:700;margin-bottom:8px;letter-spacing:-.8px;background:linear-gradient(135deg,#fff 0%,#e5e5e7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:16px;color:#a1a1aa;font-weight:500;margin:0}.empty-state{text-align:center;padding:60px 20px}.empty-icon{font-size:64px;margin-bottom:24px;opacity:.6}.empty-title{font-size:24px;font-weight:700;margin-bottom:12px;color:#fff;letter-spacing:-.5px}.empty-message{font-size:16px;color:#a1a1aa;margin-bottom:32px;line-height:1.5;max-width:300px;margin-left:auto;margin-right:auto}.start-broadcast-button{padding:16px 24px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);color:#fff;border:none;border-radius:16px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #8b5cf64d,inset 0 1px #fff3;letter-spacing:-.3px}.start-broadcast-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px #8b5cf666,inset 0 1px #fff3}.sessions-list{display:flex;flex-direction:column;gap:12px}.session-card{background:linear-gradient(145deg,#1c1c1e 0%,#2c2c2e 100%);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 16px #0003,inset 0 1px #ffffff0d}.session-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d,inset 0 1px #ffffff1a;border-color:#8b5cf64d}.session-content{flex:1}.session-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.session-title{font-size:18px;font-weight:600;color:#fff;letter-spacing:-.3px;margin-right:12px}.live-indicator{display:flex;align-items:center;gap:6px;padding:4px 8px;background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);border-radius:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 12px #ff3b304d}.live-dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:pulse 2s infinite}.session-meta{display:flex;align-items:center;gap:12px;font-size:14px;color:#a1a1aa}.session-duration{font-weight:600}.broadcaster-name{font-weight:500}.session-arrow{font-size:24px;color:#666;margin-left:16px;transition:all .2s ease}.session-card:hover .session-arrow{color:#8b5cf6;transform:translate(4px)}@media (max-width: 480px){.main-content{padding:20px 16px}.homepage .top-strip{padding:14px 20px}.hero-title{font-size:28px}.session-card{padding:16px}.session-header{flex-direction:column;align-items:flex-start;gap:8px}.session-title{margin-right:0}.empty-state{padding:40px 16px}.empty-icon{font-size:48px}}.broadcast-page{min-height:100vh;background:linear-gradient(180deg,#000 0%,#0a0a0a 100%);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:0;margin:0;overflow-x:hidden}.top-strip{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);position:relative}.top-strip:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.brand{font-size:20px;font-weight:700;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.status-pill{padding:6px 14px;border-radius:14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-pill.ready{background:rgba(55,55,55,.8);color:#e5e5e7;border-color:#ffffff26}.status-pill.live{background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);color:#fff;border-color:#ff3b304d;box-shadow:0 0 20px #ff3b304d}.status-pill.ended{background:rgba(99,99,102,.8);color:#e5e5e7;border-color:#ffffff1a}.main-panel{margin:16px;background:linear-gradient(145deg,#1c1c1e 0%,#2c2c2e 100%);border-radius:20px;padding:28px;min-height:calc(100vh - 120px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px #0006,inset 0 1px #ffffff1a}.hero-section{text-align:center;margin-bottom:36px}.hero-button{width:100%;padding:18px 24px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);color:#fff;border:none;border-radius:16px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #8b5cf64d,inset 0 1px #fff3;letter-spacing:-.3px}.hero-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px #8b5cf666,inset 0 1px #fff3}.hero-button:active{transform:translateY(0)}.hero-button:disabled{background:linear-gradient(135deg,#333 0%,#444 100%);color:#888;cursor:not-allowed;transform:none;box-shadow:none}.live-hero{background:linear-gradient(145deg,#2c2c2e 0%,#3c3c3e 100%);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;margin-bottom:36px;box-shadow:0 8px 24px #0000004d,inset 0 1px #ffffff1a}.live-title{font-size:22px;font-weight:700;margin-bottom:12px;color:#fff;letter-spacing:-.5px}.live-status{display:flex;align-items:center;gap:10px;margin-bottom:20px}.live-dot{width:10px;height:10px;background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 12px #ff3b3080}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.live-actions{display:flex;gap:14px}.live-action-row{display:flex;gap:14px;margin-bottom:14px}.live-action-row button{flex:1}.action-button{padding:14px 18px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:linear-gradient(145deg,#3c3c3e 0%,#4c4c4e 100%);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0003,inset 0 1px #ffffff1a}.action-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0000004d,inset 0 1px #ffffff1a}.action-button.muted{background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);border-color:#ff3b304d;box-shadow:0 4px 12px #ff3b304d,inset 0 1px #fff3}.end-button{width:100%;padding:14px 18px;background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 18px #ff3b304d,inset 0 1px #fff3}.end-button:hover{transform:translateY(-1px);box-shadow:0 8px 24px #ff3b3066,inset 0 1px #fff3}.native-rows{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.05);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #0003,inset 0 1px #ffffff0d}.native-row{background:linear-gradient(145deg,#2c2c2e 0%,#3c3c3e 100%);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s ease;border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.05)}.native-row:hover{background:linear-gradient(145deg,#3a3a3c 0%,#4a4a4c 100%);transform:translateY(-1px);box-shadow:0 2px 8px #0003}.native-row:first-child{border-top-left-radius:16px;border-top-right-radius:16px}.native-row:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px;border-bottom:1px solid rgba(255,255,255,.08)}.row-content{display:flex;flex-direction:column;gap:6px}.row-label{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.2px}.row-subtitle{font-size:14px;color:#a1a1aa;font-weight:500}.row-value{font-size:16px;color:#a1a1aa;font-weight:600}.row-value.connected{color:#10b981;text-shadow:0 0 8px rgba(16,185,129,.3)}.row-value.error{color:#ef4444;text-shadow:0 0 8px rgba(239,68,68,.3)}.title-edit{width:100%;background:linear-gradient(145deg,#1c1c1e 0%,#2c2c2e 100%);border:1px solid rgba(139,92,246,.3);border-radius:12px;padding:14px 18px;color:#fff;font-size:16px;font-weight:500;outline:none;transition:all .2s ease;box-shadow:0 4px 12px #8b5cf61a,inset 0 1px #ffffff1a}.title-edit:focus{border-color:#8b5cf699;box-shadow:0 6px 20px #8b5cf633,inset 0 1px #ffffff1a}.title-edit::placeholder{color:#71717a}.mic-level{display:flex;align-items:center;gap:12px}.level-bar{width:64px;height:6px;background:linear-gradient(90deg,#27272a 0%,#3f3f46 100%);border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 2px #0000004d}.level-fill{height:100%;background:linear-gradient(90deg,#10b981 0%,#34d399 50%,#6ee7b7 100%);border-radius:3px;transition:width .1s ease;box-shadow:0 0 8px #10b98166}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:linear-gradient(145deg,#2c2c2e 0%,#3c3c3e 100%);border-radius:20px;padding:28px;margin:20px;max-width:340px;width:100%;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #00000080,inset 0 1px #ffffff1a;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-title{font-size:20px;font-weight:700;margin-bottom:12px;text-align:center;color:#fff;letter-spacing:-.3px}.modal-message{font-size:16px;color:#a1a1aa;margin-bottom:28px;text-align:center;line-height:1.5;font-weight:500}.modal-actions{display:flex;gap:14px}.modal-button{flex:1;padding:14px 18px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0003,inset 0 1px #ffffff1a}.modal-button.secondary{background:linear-gradient(145deg,#3a3a3c 0%,#4a4a4c 100%);color:#fff;border:1px solid rgba(255,255,255,.15)}.modal-button.secondary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0000004d,inset 0 1px #ffffff1a}.modal-button.danger{background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);color:#fff;border:1px solid rgba(255,59,48,.3);box-shadow:0 4px 12px #ff3b304d,inset 0 1px #fff3}.modal-button.danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px #ff3b3066,inset 0 1px #fff3}.ended-section{text-align:center;padding:48px 24px}.ended-title{font-size:24px;font-weight:700;margin-bottom:12px;color:#fff;letter-spacing:-.5px}.ended-message{font-size:16px;color:#a1a1aa;margin-bottom:36px;font-weight:500;line-height:1.4}.restart-button{width:100%;padding:18px 24px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);color:#fff;border:none;border-radius:16px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #8b5cf64d,inset 0 1px #fff3;letter-spacing:-.3px}.restart-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px #8b5cf666,inset 0 1px #fff3}@media (max-width: 480px){.main-panel{margin:12px;padding:24px;border-radius:18px}.top-strip{padding:14px 20px}.brand{font-size:18px}.hero-button{padding:16px 20px;font-size:17px}.native-row{padding:16px 20px}.modal{margin:16px;padding:24px}.ended-section{padding:40px 20px}.ended-title{font-size:22px}}@media (max-width: 360px){.main-panel{margin:8px;padding:20px}.top-strip{padding:12px 16px}.hero-button{padding:14px 18px;font-size:16px}.live-action-row{gap:10px}.action-button{padding:12px 14px;font-size:15px}}.listener-page{min-height:100vh;background:linear-gradient(180deg,#000 0%,#0a0a0a 100%);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.listener-page .top-strip{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.listener-page .top-strip:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.back-button{background:none;border:none;color:#8b5cf6;font-size:16px;font-weight:600;cursor:pointer;padding:8px 0;transition:all .2s ease}.back-button:hover{color:#a855f7;transform:translate(-2px)}.listener-page .brand{font-size:20px;font-weight:700;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.listener-count{font-size:14px;color:#a1a1aa;font-weight:500}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(139,92,246,.3);border-top:3px solid #8B5CF6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:16px;color:#a1a1aa;font-weight:500}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px;text-align:center}.error-icon{font-size:64px;margin-bottom:24px;opacity:.6}.error-title{font-size:24px;font-weight:700;margin-bottom:12px;color:#fff;letter-spacing:-.5px}.error-message{font-size:16px;color:#a1a1aa;margin-bottom:32px;line-height:1.5;max-width:300px}.back-home-button{padding:14px 24px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 50%,#C084FC 100%);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #8b5cf64d}.back-home-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #8b5cf666}.listener-page .main-content{padding:24px;max-width:600px;margin:0 auto}.broadcast-info{text-align:center;margin-bottom:32px;padding:24px;background:linear-gradient(145deg,#1c1c1e 0%,#2c2c2e 100%);border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px #0000004d,inset 0 1px #ffffff1a}.broadcast-title{font-size:28px;font-weight:700;margin-bottom:16px;color:#fff;letter-spacing:-.7px;line-height:1.2}.broadcast-status{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}.broadcast-status .live-indicator{display:flex;align-items:center;gap:8px;padding:6px 12px;background:linear-gradient(135deg,#ff3b30 0%,#ff6b6b 100%);border-radius:12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 16px #ff3b3066}.broadcast-status .live-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 2s infinite}.broadcast-duration{font-size:14px;color:#a1a1aa;font-weight:600;padding:6px 12px;background:rgba(255,255,255,.05);border-radius:8px}.broadcaster-info{font-size:16px;color:#a1a1aa;font-weight:500}.audio-player-section{margin-bottom:32px}.audio-placeholder{background:linear-gradient(145deg,#1c1c1e 0%,#2c2c2e 100%);border-radius:20px;padding:40px 24px;text-align:center;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px #0000004d,inset 0 1px #ffffff1a}.audio-icon{font-size:48px;margin-bottom:16px;opacity:.7}.audio-title{font-size:20px;font-weight:700;margin-bottom:8px;color:#fff;letter-spacing:-.3px}.audio-message{font-size:14px;color:#a1a1aa;margin-bottom:24px;line-height:1.5;max-width:400px;margin-left:auto;margin-right:auto}.audio-controls-placeholder{display:flex;align-items:center;justify-content:center;gap:20px}.play-button-placeholder{width:60px;height:60px;background:linear-gradient(135deg,#8B5CF6 0%,#A855F7 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;opacity:.6;box-shadow:0 4px 16px #8b5cf64d}.volume-control-placeholder{display:flex;align-items:center;gap:12px}.volume-bar{width:100px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}.volume-fill{height:100%;background:linear-gradient(90deg,#8B5CF6 0%,#A855F7 100%);border-radius:2px;opacity:.6}.listener-info{display:grid;grid-template-columns:1fr 1fr;gap:16px}.info-card{background:linear-gradient(145deg,#1c1c1e 0%,#2c2c2e 100%);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px #0003,inset 0 1px #ffffff0d}.info-label{font-size:12px;color:#a1a1aa;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.info-value{font-size:16px;color:#fff;font-weight:600;word-break:break-all}@media (max-width: 480px){.listener-page .main-content{padding:20px 16px}.listener-page .top-strip{padding:14px 20px}.broadcast-title{font-size:24px}.broadcast-status{flex-direction:column;gap:12px}.audio-placeholder{padding:32px 20px}.audio-controls-placeholder{flex-direction:column;gap:16px}.listener-info{grid-template-columns:1fr}.info-card{padding:16px}}.audio-status{margin-bottom:16px}.connection-indicator{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600}.connection-indicator.connecting{background:rgba(255,193,7,.2);color:#ffc107;border:1px solid rgba(255,193,7,.3)}.connection-indicator.connected{background:rgba(16,185,129,.2);color:#10b981;border:1px solid rgba(16,185,129,.3)}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.connection-indicator.connecting .status-dot{background:#ffc107}.connection-indicator.connected .status-dot{background:#10b981}.audio-info{margin-top:16px;padding:12px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(255,255,255,.1)}.track-info{font-size:14px;color:#a1a1aa;text-align:center;font-weight:500}