:root {
  --page: #f4f5fa;
  --surface: #ffffff;
  --ink: #20212b;
  --muted: #858695;
  --line: #e8e8f0;
  --purple: #6c5ce7;
  --purple-dark: #5746d6;
  --purple-soft: #eeebff;
  --green: #35b98a;
  --shadow: 0 18px 55px rgba(40, 34, 90, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(108, 92, 231, .25); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.page-width { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 760; letter-spacing: -.7px; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: linear-gradient(145deg, #8070f1, #5b48db); box-shadow: 0 7px 18px rgba(108, 92, 231, .28); }
.brand-mark svg { width: 22px; height: 22px; margin-left: 2px; }
.brand-dot { color: var(--purple); }
.online-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(53, 185, 138, .1); }

.landing { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 20%, #fff 0, #f8f8fc 38%, #f3f3f9 100%); }
.ambient { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.ambient-one { width: 440px; height: 440px; left: -230px; top: 18%; background: radial-gradient(circle, rgba(133, 113, 244, .14), transparent 68%); }
.ambient-two { width: 520px; height: 520px; right: -240px; bottom: -100px; background: radial-gradient(circle, rgba(244, 172, 139, .13), transparent 70%); }
.landing-nav { position: relative; z-index: 1; height: 94px; display: flex; align-items: center; justify-content: space-between; }
.nav-note { display: flex; align-items: center; gap: 9px; color: #747583; font-size: 13px; }
.landing-main { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; padding-block: 45px 65px; }
.hero { padding-bottom: 8px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 11px; font-weight: 750; letter-spacing: 2.6px; color: var(--purple); }
.eyebrow span { width: 26px; height: 2px; border-radius: 2px; background: var(--purple); }
.hero h1 { margin: 0; font-size: clamp(48px, 5.4vw, 74px); line-height: 1.16; letter-spacing: -4px; font-weight: 800; }
.hero h1 span { color: var(--purple); background: linear-gradient(100deg, #6754e5 20%, #9178ed 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { margin: 24px 0 36px; color: #777886; font-size: 17px; line-height: 1.8; }
.feature-row { display: flex; gap: 26px; }
.feature { display: flex; align-items: center; gap: 11px; }
.feature-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; }
.feature-icon svg { width: 18px; height: 18px; }
.feature-icon.purple { color: #7461dc; background: #ebe7ff; }
.feature-icon.orange { color: #dd8e5f; background: #fff0e5; }
.feature-icon.green { color: #42a986; background: #e3f6ee; }
.feature strong, .feature small { display: block; white-space: nowrap; }
.feature strong { margin-bottom: 4px; font-size: 13px; font-weight: 650; }
.feature small { color: #9293a0; font-size: 11px; }
.social-proof { display: flex; align-items: center; gap: 12px; margin-top: 44px; }
.social-proof p { margin: 0; color: #92939e; font-size: 12px; }
.mini-avatars { display: flex; padding-left: 8px; }
.mini-avatars span { width: 29px; height: 29px; display: grid; place-items: center; margin-left: -8px; border: 2px solid white; border-radius: 50%; color: white; background: #8c7bd8; font-size: 10px; }
.mini-avatars span:nth-child(2) { background: #dd9b7c; }
.mini-avatars span:nth-child(3) { color: #7060c7; background: #e9e5fb; }
.mini-avatars svg { width: 12px; height: 12px; }

.entry-card { position: relative; width: 100%; max-width: 440px; justify-self: end; padding: 38px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; background: rgba(255, 255, 255, .88); box-shadow: 0 30px 80px rgba(42, 33, 90, .12), 0 2px 6px rgba(42, 33, 90, .03); backdrop-filter: blur(18px); overflow: hidden; }
.entry-decoration { position: absolute; display: flex; gap: 5px; top: 25px; right: 27px; }
.entry-decoration span { width: 4px; height: 4px; border-radius: 50%; background: #d9d5ef; }
.entry-heading { margin-bottom: 27px; }
.entry-kicker { color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.entry-heading h2 { margin: 9px 0 8px; font-size: 23px; letter-spacing: -.7px; }
.entry-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.entry-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin-bottom: 25px; border-radius: 13px; background: #f2f1f7; }
.entry-tab { border: 0; border-radius: 9px; padding: 11px; color: #888794; background: transparent; font-size: 13px; font-weight: 550; transition: .2s ease; }
.entry-tab.active { color: var(--purple); background: white; box-shadow: 0 3px 12px rgba(38, 31, 82, .08); font-weight: 650; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 600; color: #62626f; }
.field input { width: 100%; height: 49px; padding: 0 15px; border: 1px solid #e2e1ea; border-radius: 11px; outline: 0; color: var(--ink); background: #fbfbfd; font-size: 14px; transition: .2s ease; }
.field input::placeholder { color: #b0afba; }
.field input:focus { border-color: #9a8deb; background: white; box-shadow: 0 0 0 3px rgba(108, 92, 231, .09); }
#joinCodeInput { font-size: 18px; font-weight: 700; letter-spacing: 7px; text-transform: uppercase; }
#joinCodeInput::placeholder { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.primary-button { border: 0; border-radius: 12px; color: white; background: linear-gradient(115deg, #7463e8, #6552db); box-shadow: 0 10px 24px rgba(108, 92, 231, .25); transition: transform .15s, box-shadow .15s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(108, 92, 231, .32); }
.primary-button:active { transform: translateY(0); }
.entry-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 8px; font-size: 14px; font-weight: 650; }
.entry-submit svg { width: 17px; height: 17px; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 21px 0 0; color: #aaa9b4; font-size: 10px; }
.privacy-note svg { width: 12px; height: 12px; }
.landing-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; padding-block: 22px; border-top: 1px solid rgba(216, 215, 228, .65); color: #a2a1ad; font-size: 11px; }

.room-view { min-height: 100vh; }
.room-topbar { height: 74px; display: flex; align-items: center; gap: 28px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .92); }
.room-brand { font-size: 20px; }
.room-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.room-brand .brand-mark svg { width: 19px; height: 19px; }
.room-status-group { display: flex; align-items: center; gap: 12px; margin-left: 18px; }
.room-label { color: #9695a2; font-size: 12px; }
.room-code { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border: 1px solid #e4e1f5; border-radius: 10px; color: var(--purple); background: #f7f5ff; }
.room-code strong { font-size: 15px; letter-spacing: 2px; }
.room-code svg { width: 14px; height: 14px; color: #9489bd; }
.room-code:hover { background: #efebff; }
.connection-status { padding-left: 2px; color: #9998a5; font-size: 11px; }
.connection-status.offline { color: #d77979; }
.room-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.header-avatars { display: flex; align-items: center; padding-left: 8px; }
.header-avatar { position: relative; width: 31px; height: 31px; display: grid; place-items: center; margin-left: -8px; border: 2px solid white; border-radius: 50%; color: #62537e; background: #e7ddf5; font-size: 11px; font-weight: 650; }
.header-avatar:nth-child(2) { color: #84654f; background: #f4e1d2; }
.header-avatar.online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--green); }
.ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.ghost-button:hover { background: #f7f6fa; }
.leave-button { height: 35px; padding: 0 12px; color: #777684; font-size: 12px; }
.leave-button svg { width: 15px; height: 15px; }

.room-layout { width: min(1540px, 100%); margin: 0 auto; padding: 22px 26px 26px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; height: calc(100vh - 74px); min-height: 650px; }
.watch-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.player-card, .playlist-card, .chat-card { border: 1px solid #e7e6ee; border-radius: 17px; background: var(--surface); box-shadow: 0 4px 20px rgba(37, 31, 70, .025); overflow: hidden; }
.player-card { flex: 0 0 auto; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 305px); min-height: 300px; overflow: hidden; background: #14131d; }
.stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #111017; }
.stage.audio-mode video { opacity: 0; }
.stage.empty video, .stage.empty .stage-topline { display: none; }
.empty-player { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; background: radial-gradient(circle at 50% 30%, #302849, #17151f 62%); text-align: center; padding: 24px; }
.empty-visual { position: relative; width: 90px; height: 90px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 50%; color: white; background: linear-gradient(145deg, #7762df, #5c48c3); box-shadow: 0 15px 35px rgba(77, 54, 167, .35); }
.empty-visual > svg { width: 32px; height: 32px; margin-left: 5px; }
.orbit { position: absolute; inset: -18px; border: 1px solid rgba(158, 139, 230, .18); border-radius: 50%; }
.orbit-two { inset: -38px; border-color: rgba(158, 139, 230, .08); }
.empty-player h2 { margin: 8px 0; font-size: 23px; font-weight: 650; letter-spacing: -.5px; }
.empty-player p { margin: 0 0 25px; color: #aaa3bb; font-size: 13px; }
.upload-empty-button { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; color: #e8e3fa; background: rgba(255, 255, 255, .08); font-size: 12px; }
.upload-empty-button:hover { background: rgba(255, 255, 255, .13); }
.upload-empty-button svg { width: 16px; height: 16px; }
.stage-topline { position: absolute; z-index: 2; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; pointer-events: none; }
.sync-badge, .media-kind-badge { display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; color: #ded9ec; background: rgba(18, 15, 28, .58); backdrop-filter: blur(8px); font-size: 10px; }
.sync-badge { margin-left: auto; }
.media-kind-badge { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-artwork { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; background: radial-gradient(circle at 50% 35%, #372d57, #17151f 65%); }
.record { position: relative; width: 128px; height: 128px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid #5e506f; border-radius: 50%; background: repeating-radial-gradient(circle, #282231 0 4px, #2c2537 5px 7px); box-shadow: 0 15px 45px #0a0810; }
.record::after { content: ""; position: absolute; width: 23px; height: 23px; border: 6px solid #8170b4; border-radius: 50%; background: #17151f; }
.record svg { width: 35px; height: 35px; color: #aea0d1; }
.record > span { position: absolute; inset: -10px; border: 1px solid rgba(170, 146, 216, .12); border-radius: 50%; }
.audio-artwork strong { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 550; }
.audio-artwork small { margin-top: 9px; color: #92889f; font-size: 11px; }
.audio-mode.playing .record { animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.resume-button { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; color: white; background: rgba(108, 92, 231, .88); box-shadow: 0 10px 35px rgba(0, 0, 0, .25); }
.resume-button svg { width: 29px; height: 29px; margin-left: 4px; }

.player-controls { padding: 13px 17px 14px; }
.timeline-row { display: flex; align-items: center; gap: 11px; color: #9b9aa6; font-size: 10px; font-variant-numeric: tabular-nums; }
.timeline { --progress: 0%; flex: 1; height: 4px; margin: 0; border-radius: 4px; appearance: none; background: linear-gradient(to right, var(--purple) var(--progress), #e8e6ef var(--progress)); cursor: pointer; }
.timeline::-webkit-slider-thumb { width: 12px; height: 12px; appearance: none; border: 2px solid white; border-radius: 50%; background: var(--purple); box-shadow: 0 1px 5px rgba(57, 42, 136, .35); }
.timeline::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--purple); }
.control-row { display: flex; align-items: center; margin-top: 12px; }
.main-controls, .secondary-controls { display: flex; align-items: center; gap: 5px; }
.control-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #666572; background: transparent; }
.control-button:hover { color: var(--purple); background: #f3f1fc; }
.control-button svg { width: 18px; height: 18px; }
.play-control { color: white; background: var(--purple); border-radius: 10px; margin-right: 3px; }
.play-control:hover { color: white; background: var(--purple-dark); }
.play-control svg { width: 17px; height: 17px; }
.now-playing { flex: 1; min-width: 0; margin: 0 16px; overflow: hidden; color: #777582; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.volume { width: 62px; height: 3px; accent-color: var(--purple); cursor: pointer; }

.playlist-card { flex: 1; min-height: 170px; display: flex; flex-direction: column; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; }
.section-header h2, .chat-header h2 { margin: 0; font-size: 14px; font-weight: 650; }
.section-header p { margin: 5px 0 0; color: #a1a0ab; font-size: 10px; }
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 19px; margin-left: 5px; padding: 0 5px; border-radius: 6px; color: #8b80bd; background: #f0edf9; font-size: 10px; vertical-align: 1px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 35px; padding: 0 12px; border: 1px solid #e2ddf4; border-radius: 9px; color: var(--purple); background: #faf9ff; font-size: 11px; font-weight: 550; white-space: nowrap; }
.secondary-button:hover { background: #f0ecff; }
.secondary-button svg { width: 14px; height: 14px; }
.media-list { min-height: 0; padding: 0 12px 12px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-content: start; }
.empty-playlist { grid-column: 1 / -1; padding: 24px 12px 27px; border: 1px dashed #e7e3f0; border-radius: 11px; color: #aaa8b3; text-align: center; font-size: 11px; }
.media-item { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 10px; background: #faf9fc; text-align: left; transition: .15s ease; }
.media-item:hover { border-color: #e6e1f5; background: #f7f5fd; }
.media-item.active { border-color: #e0d9fb; background: #f3f0ff; }
.media-thumb { position: relative; flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #8b7cc6; background: #eae5f7; }
.media-thumb svg { width: 17px; height: 17px; }
.media-item.active .media-thumb { color: white; background: var(--purple); }
.media-copy { flex: 1; min-width: 0; }
.media-copy strong, .media-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-copy strong { margin-bottom: 5px; font-size: 11px; font-weight: 550; }
.media-copy small { color: #a2a0ad; font-size: 9px; }
.playing-indicator { display: flex; align-items: end; gap: 2px; height: 13px; margin-right: 3px; }
.playing-indicator i { width: 2px; height: 5px; border-radius: 2px; background: var(--purple); animation: sound .8s ease-in-out infinite alternate; }
.playing-indicator i:nth-child(2) { height: 12px; animation-delay: -.3s; }
.playing-indicator i:nth-child(3) { height: 8px; animation-delay: -.55s; }
.upload-progress { margin: 0 20px 14px; padding: 12px; border-radius: 10px; background: #f7f5fd; }
.upload-progress-copy { display: flex; align-items: center; gap: 9px; }
.upload-progress-copy > svg { width: 17px; height: 17px; color: var(--purple); }
.upload-progress-copy > div { flex: 1; min-width: 0; }
.upload-progress-copy strong, .upload-progress-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-copy strong { font-size: 11px; }
.upload-progress-copy small { margin-top: 4px; color: #9992ad; font-size: 9px; }
#uploadPercent { color: var(--purple); font-size: 11px; font-variant-numeric: tabular-nums; }
.progress-track { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #e3def1; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--purple); transition: width .2s; }

.chat-card { min-height: 0; display: flex; flex-direction: column; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px 15px; border-bottom: 1px solid #f0eff4; }
.chat-header p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #9c9ba7; font-size: 10px; }
.chat-header .online-dot { width: 5px; height: 5px; box-shadow: none; }
.chat-header-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #8b7cc6; background: #f2effa; }
.chat-header-icon svg { width: 15px; height: 15px; }
.voice-panel { margin: 12px 13px 3px; padding: 12px; border: 1px solid #ebe8f2; border-radius: 12px; background: #faf9fc; }
.voice-heading { display: flex; align-items: center; gap: 9px; }
.voice-icon { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #96909f; background: #eceaf0; }
.voice-icon.active { color: var(--purple); background: var(--purple-soft); }
.voice-icon svg { width: 15px; height: 15px; }
.voice-heading > div { flex: 1; min-width: 0; }
.voice-heading strong, .voice-heading small { display: block; }
.voice-heading strong { font-size: 11px; font-weight: 600; }
.voice-heading small { margin-top: 4px; overflow: hidden; color: #a3a1ac; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.voice-toggle { min-width: 43px; height: 26px; padding: 0 9px; border: 1px solid #ddd7ed; border-radius: 7px; color: #807493; background: white; font-size: 9px; }
.voice-toggle.active { border-color: #e7c8c8; color: #be6f73; background: #fff8f8; }
.voice-controls { margin-top: 12px; }
.voice-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 8px; background: #efedf3; }
.voice-modes button { padding: 6px; border: 0; border-radius: 6px; color: #9995a3; background: transparent; font-size: 9px; }
.voice-modes button.active { color: var(--purple); background: white; box-shadow: 0 2px 5px rgba(43, 34, 73, .07); }
.hold-to-talk { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; padding: 9px; border: 1px solid #e2dcf0; border-radius: 8px; color: #7d70a1; background: white; font-size: 10px; touch-action: none; user-select: none; }
.hold-to-talk svg { width: 13px; height: 13px; }
.hold-to-talk small { color: #aaa5b4; font-size: 8px; }
.hold-to-talk.talking { color: white; border-color: var(--purple); background: var(--purple); }
.hold-to-talk.talking small { color: #dcd4ff; }
.free-talk { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 9px; padding: 10px; border-radius: 8px; color: var(--purple); background: var(--purple-soft); }
.free-talk strong, .free-talk small { display: block; }
.free-talk strong { font-size: 10px; }
.free-talk small { margin-top: 3px; color: #968bb9; font-size: 8px; }
.sound-bars { height: 20px; display: flex; align-items: center; gap: 3px; }
.sound-bars i { width: 3px; height: 7px; border-radius: 3px; background: var(--purple); animation: sound .7s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { height: 17px; animation-delay: -.2s; }
.sound-bars i:nth-child(3) { height: 12px; animation-delay: -.4s; }
.sound-bars i:nth-child(4) { height: 5px; animation-delay: -.1s; }
@keyframes sound { to { height: 18px; } }
.messages { flex: 1; min-height: 160px; padding: 15px 15px 8px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.time-divider { display: flex; justify-content: center; margin: 13px 0 16px; }
.time-divider span { padding: 4px 8px; border-radius: 6px; color: #aaa8b2; background: #f3f2f6; font-size: 9px; }
.system-message { display: flex; justify-content: center; margin: 8px 0 14px; text-align: center; }
.system-message span { max-width: 95%; padding: 4px 9px; border-radius: 6px; color: #a09ca9; background: #f4f2f6; font-size: 9px; line-height: 1.5; }
.message-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 15px; }
.message-row.own { flex-direction: row-reverse; }
.message-avatar { flex: 0 0 auto; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #68597f; background: #e8e0ee; font-size: 10px; font-weight: 650; }
.message-row.own .message-avatar { color: #6c5bb3; background: #e5dffa; }
.message-content { max-width: calc(100% - 50px); }
.message-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 5px 2px; color: #aaa7b1; font-size: 9px; }
.message-meta strong { color: #8a8593; font-weight: 500; }
.message-row.own .message-meta { justify-content: flex-end; margin: 0 2px 5px 0; }
.message-bubble { width: fit-content; max-width: 100%; padding: 9px 12px; border-radius: 4px 12px 12px 12px; color: #5c5865; background: #f1eff5; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.own .message-bubble { margin-left: auto; border-radius: 12px 4px 12px 12px; color: white; background: linear-gradient(135deg, #7967df, #6956d2); }
.chat-composer { padding: 11px 13px 12px; border-top: 1px solid #efedf3; }
.composer-box { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid #e5e1eb; border-radius: 12px; background: #faf9fc; transition: .15s; }
.composer-box:focus-within { border-color: #bfb4e5; background: white; box-shadow: 0 0 0 3px rgba(108, 92, 231, .06); }
.composer-box textarea { flex: 1; min-width: 0; max-height: 92px; padding: 5px 0; border: 0; outline: 0; resize: none; color: #5d5965; background: transparent; font-size: 12px; line-height: 1.5; }
.composer-box textarea::placeholder { color: #b0acb7; }
.send-button { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: white; background: var(--purple); }
.send-button:hover { background: var(--purple-dark); }
.send-button svg { width: 14px; height: 14px; }
.composer-hint { display: flex; justify-content: space-between; margin-top: 7px; padding: 0 2px; color: #b2afb9; font-size: 8px; }

.toast-region { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; max-width: 100%; padding: 11px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; color: white; background: rgba(37, 34, 47, .94); box-shadow: 0 10px 35px rgba(22, 18, 38, .2); backdrop-filter: blur(10px); font-size: 12px; animation: toast-in .2s ease-out; }
.toast.success::before { content: "✓"; color: #7ee0b9; font-weight: 700; }
.toast.error::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: white; background: #d8757a; font-size: 10px; font-weight: 700; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 1500px) {
  .room-layout { grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; padding: 26px 30px 30px; }
  .messages { padding-inline: 19px; }
  .message-bubble { font-size: 13px; }
}

@media (max-width: 1100px) {
  .landing-main { gap: 45px; }
  .feature-row { gap: 17px; }
  .feature small { display: none; }
  .room-layout { grid-template-columns: minmax(0, 1fr) 320px; padding-inline: 18px; gap: 15px; }
  .room-status-group { margin-left: 0; }
  .connection-status, .room-label { display: none; }
  .stage { min-height: 280px; }
  .now-playing { margin-inline: 8px; }
  .volume { display: none; }
}

@media (max-width: 820px) {
  .page-width { width: min(100% - 36px, 580px); }
  .landing-nav { height: 78px; }
  .landing-main { grid-template-columns: 1fr; gap: 38px; padding-block: 40px 48px; }
  .hero { text-align: center; }
  .eyebrow { justify-content: center; }
  .hero h1 { font-size: 56px; }
  .hero-copy { margin-block: 18px 28px; }
  .feature-row { justify-content: center; gap: 30px; }
  .feature small { display: block; }
  .social-proof { justify-content: center; margin-top: 30px; }
  .entry-card { justify-self: center; max-width: 460px; }
  .room-topbar { height: 64px; padding: 0 16px; gap: 16px; }
  .room-brand > span:last-child { display: none; }
  .room-brand .brand-mark { width: 32px; height: 32px; }
  .room-status-group { gap: 7px; }
  .room-actions { gap: 10px; }
  .room-layout { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 15px; }
  .watch-column { display: contents; }
  .player-card { order: 0; }
  .chat-card { order: 2; min-height: 600px; }
  .playlist-card { order: 1; min-height: 160px; }
  .stage { min-height: 0; max-height: none; }
  .media-list { max-height: 250px; }
  .messages { min-height: 300px; max-height: 55vh; }
  .voice-panel { margin-inline: 15px; }
  .chat-header { padding-inline: 18px; }
  .chat-composer { padding: 12px 15px calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .page-width { width: calc(100% - 28px); }
  .landing-nav { height: 70px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .nav-note { font-size: 10px; }
  .landing-main { padding-top: 30px; gap: 30px; }
  .hero h1 { font-size: 45px; letter-spacing: -2.5px; }
  .eyebrow { margin-bottom: 16px; font-size: 9px; }
  .hero-copy { font-size: 14px; }
  .feature-row { gap: 15px; }
  .feature { gap: 7px; }
  .feature-icon { width: 33px; height: 33px; border-radius: 10px; }
  .feature strong { font-size: 11px; }
  .feature small { display: none; }
  .social-proof { margin-top: 25px; }
  .entry-card { padding: 27px 22px; border-radius: 21px; }
  .entry-heading h2 { font-size: 21px; }
  .landing-footer { justify-content: center; text-align: center; }
  .landing-footer span:last-child { display: none; }
  .room-topbar { padding: 0 11px; gap: 11px; }
  .room-status-group { flex: 1; }
  .room-code { height: 34px; padding: 0 9px; }
  .room-code strong { font-size: 13px; }
  .room-code svg { width: 12px; height: 12px; }
  .header-avatars { display: none; }
  .leave-button { width: 34px; padding: 0; }
  .leave-button span { display: none; }
  .room-layout { padding: 10px; gap: 12px; }
  .watch-column { gap: 12px; }
  .player-card, .playlist-card, .chat-card { border-radius: 14px; }
  .empty-player h2 { font-size: 19px; }
  .empty-player p { margin-bottom: 18px; font-size: 11px; }
  .empty-visual { width: 66px; height: 66px; margin-bottom: 14px; }
  .empty-visual > svg { width: 24px; height: 24px; }
  .orbit { inset: -13px; }
  .orbit-two { inset: -26px; }
  .upload-empty-button { padding: 9px 13px; font-size: 10px; }
  .player-controls { padding: 11px 10px 12px; }
  .control-row { margin-top: 10px; }
  .control-button { width: 32px; height: 32px; }
  .now-playing { display: none; }
  .secondary-controls { margin-left: auto; }
  .section-header { padding: 15px 14px 12px; }
  .section-header p { display: none; }
  .media-list { grid-template-columns: 1fr; padding-inline: 9px; }
  .media-item { padding: 9px; }
  .chat-card { min-height: 560px; }
  .message-bubble { font-size: 13px; }
  .voice-heading strong { font-size: 12px; }
  .voice-heading small { font-size: 10px; }
  .voice-toggle { height: 30px; font-size: 10px; }
  .voice-modes button, .hold-to-talk { font-size: 11px; }
  .composer-hint { font-size: 9px; }
  .toast-region { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}