:root {
  color-scheme: dark;
  --accent: #2fe0cf;
  --accent-soft: #9afff4;
  --accent-2: #737cff;
  --accent-dark: #0b8f8c;
  --ink: #f9fbff;
  --muted: rgba(255,255,255,.58);
  --glass: rgba(15, 22, 34, .34);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
button { touch-action:manipulation; }
body.modal-open { overflow:hidden; }
.animations-paused *, .animations-paused *::before, .animations-paused *::after { animation-play-state:paused!important; }
.low-effects .message,.low-effects .message-input-wrap,.low-effects .glass-button,.low-effects .notice-bar,.low-effects .modal { backdrop-filter:none!important; }
.low-effects .ambient,.low-effects .ad-card::before,.low-effects .ad-card::after,.low-effects .ad-logo,.low-effects .ad-spark,.low-effects .verified-badge,.low-effects .verified-badge::before,.low-effects .verified-badge::after,.low-effects .verified-badge i::after { animation:none!important; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  display: flex;
  justify-content: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 15%, rgba(47, 224, 207, .2), transparent 30%),
    radial-gradient(circle at 86% 76%, rgba(115, 124, 255, .2), transparent 34%),
    linear-gradient(135deg, #05080c, #14252d 46%, #101225);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
  background: #05070a;
  box-shadow: 0 0 72px rgba(0, 3, 8, .82), 0 0 0 1px rgba(255,255,255,.06);
  isolation: isolate;
}

.welcome {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(circle at 50% 30%, rgba(47, 224, 207, .12), transparent 34%),
    linear-gradient(155deg, rgba(6, 13, 25, .96), rgba(8, 10, 28, .99));
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

.welcome.leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }

.ambient { position: absolute; border-radius: 50%; filter: blur(14px); opacity: .5; animation: drift 8s ease-in-out infinite alternate; }
.ambient-one { width: 250px; height: 250px; right: -100px; top: 8%; background: rgba(115,124,255,.2); }
.ambient-two { width: 320px; height: 320px; left: -180px; bottom: 4%; background: rgba(47,224,207,.16); animation-delay: -3s; }
@keyframes drift { to { transform: translate3d(24px, -18px, 0) scale(1.08); } }

.welcome-content { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; width: 100%; padding: 28px; transform: translateY(-2vh); }
.welcome h1 { margin: 23px 0 6px; color: rgba(239,255,253,.86); font-size: 16px; font-weight: 550; letter-spacing: .06em; }
.welcome p { margin: 0 0 28px; color: rgba(219,239,241,.44); font-size: 13px; }
.welcome-foot { position: absolute; bottom: max(25px, env(safe-area-inset-bottom)); color: rgba(255,255,255,.18); font-size: 10px; letter-spacing: .18em; }

.brand-mark {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 50% 38%, rgba(47,224,207,.25), transparent 27%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(255,255,255,.05) 15px 16px),
    linear-gradient(145deg, #101a2b, #040811);
  box-shadow: 0 18px 50px rgba(0,0,0,.48), 0 0 28px rgba(47,224,207,.1), inset 0 0 38px rgba(255,255,255,.03);
}
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: rotate(-35deg); }
.brand-mark::after { transform: rotate(35deg); }
.brand-mark-large { width: 132px; height: 132px; border-radius: 28px; }
.brand-mark b { position: relative; z-index: 1; font-family: STKaiti, KaiTi, serif; font-size: 34px; letter-spacing: -.08em; transform: skew(-6deg); text-shadow: 0 2px 12px rgba(255,255,255,.28); }
.brand-mark small { position: relative; z-index: 1; margin-top: 3px; font-size: 7px; letter-spacing: .28em; color: rgba(255,255,255,.56); }
.brand-star { position: absolute; top: 12px; right: 17px; color: var(--accent-soft); font-size: 18px; }

.enter-button {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 164px;
  justify-content: center;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(105deg, #087f80, #5962dc);
  box-shadow: 0 11px 32px rgba(32,177,174,.25), 0 6px 28px rgba(89,98,220,.2), inset 0 1px rgba(255,255,255,.2);
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.enter-button:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(47,224,207,.28), 0 8px 32px rgba(115,124,255,.24); }
.enter-button i { font-style: normal; font-size: 18px; transition: transform .2s ease; }
.enter-button:hover i { transform: translateX(3px); }

.room {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  background: #030508;
}

.room::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.1) 22%, transparent 48%, rgba(0,0,0,.18) 65%, rgba(0,0,0,.82) 100%); pointer-events: none; }
.room > * { position: relative; z-index: 2; }

.room-header { position: absolute; z-index: 9; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 10px 4px; pointer-events: none; }
.room-header > * { pointer-events: auto; }
.host-pill { display: flex; align-items: center; gap: 8px; min-width: 0; height: 50px; padding: 4px 10px 4px 4px; border: 1px solid rgba(174,229,255,.14); border-radius: 999px; background: linear-gradient(108deg,rgba(5,10,16,.84),rgba(12,18,30,.66)); backdrop-filter: blur(16px) saturate(1.18); box-shadow: 0 7px 22px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05), inset 0 0 18px rgba(39,154,255,.025); }
.avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 2px; border: 1px solid rgba(207,240,255,.62); border-radius: 50%; background: linear-gradient(145deg,rgba(65,212,255,.84),rgba(47,91,201,.58) 58%,rgba(8,14,25,.92)); box-shadow: 0 0 0 2px rgba(37,155,229,.14), 0 4px 14px rgba(0,0,0,.34); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.avatar::after { content:""; position:absolute; inset:-3px; border:1px solid rgba(95,203,255,.2); border-radius:inherit; pointer-events:none; }
.avatar:hover { transform: scale(1.035); box-shadow: 0 0 0 3px rgba(39,182,255,.2), 0 6px 18px rgba(0,0,0,.36); }
.avatar span { font: 700 18px STKaiti, KaiTi, serif; transform: rotate(-10deg); }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.host-copy { display: flex; flex-direction: column; justify-content:center; min-width: 64px; line-height: 1.2; }
.host-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.host-copy strong { overflow: hidden; max-width: 98px; color:rgba(255,255,255,.96); font-size: 13px; font-weight: 720; letter-spacing:.01em; text-overflow: ellipsis; white-space: nowrap; text-shadow:0 1px 5px rgba(0,0,0,.38); }
.host-copy small { display:flex; align-items:center; gap:3px; margin-top:3px; color: rgba(255,255,255,.54); font-size: 9px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.heart { color: #70f4df; filter:drop-shadow(0 0 4px rgba(65,238,212,.42)); }
.verified-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  isolation: isolate;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,70,180,.44)) drop-shadow(0 0 4px rgba(49,185,255,.3));
  animation: verified-hover 3.6s ease-in-out infinite;
}
.verified-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 20deg,#bff7ff,#33c4ff 23%,#215eef 48%,#674ee9 68%,#55d9ff 86%,#bff7ff);
  box-shadow: 0 0 7px rgba(44,164,255,.3);
  animation: verified-orbit 5.5s linear infinite;
}
.verified-badge::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: linear-gradient(145deg,#3fc9ff 0%,#1169ec 52%,#3e3acb 100%);
  box-shadow: inset 1px 1px rgba(255,255,255,.56), inset -1px -1px 3px rgba(7,25,111,.5);
}
.verified-badge i { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; color: white; font-size: 8px; font-weight: 900; font-style: italic; line-height: 1; text-indent: -1px; text-shadow: 0 1px 2px rgba(1,22,92,.72); }
.verified-badge i::after { content: ""; position: absolute; top: -45%; bottom: -45%; left: -105%; width: 38%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent); transform: rotate(18deg); animation: verified-flash 4.4s ease-in-out infinite; }
@keyframes verified-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes verified-orbit { to { transform: rotate(360deg); } }
@keyframes verified-flash { 0%,58% { left:-105%; opacity:0; } 67% { opacity:1; } 78%,100% { left:145%; opacity:0; } }

.accent-button { border: 0; background: linear-gradient(105deg, #087f80, #5962dc); box-shadow: 0 5px 18px rgba(47,224,207,.18); cursor: pointer; }
.compact { padding: 8px 12px; border-radius: 999px; font-size: 10px; }

.live-pill { display: flex; align-items: center; gap: 6px; min-width: 82px; margin-right: 2px; padding: 5px 8px 5px 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(10,11,14,.5); backdrop-filter: blur(14px); color: rgba(255,255,255,.78); font-size: 9px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.live-pill:hover { border-color: rgba(255,255,255,.2); background: rgba(18,19,23,.62); }
.live-pill .live-dot { display: none; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #42ee92; box-shadow: 0 0 0 3px rgba(66,238,146,.13), 0 0 9px rgba(66,238,146,.8); }
.live-pill b { font-weight: 500; }
.live-pill.on .live-dot { display: block; animation: blink 1.4s infinite; }
.live-pill.on b { color: #eafff3; }
.audience-faces { display: flex; align-items: center; width: 42px; height: 24px; flex: none; }
.audience-faces i { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -7px; border: 1.5px solid rgba(8,10,13,.92); border-radius: 50%; box-shadow: 0 2px 7px rgba(0,0,0,.26); color: rgba(255,255,255,.9); font-size: 8px; font-style: normal; font-weight: 650; }
.audience-faces i:nth-child(1) { background: linear-gradient(145deg, #25bdb0, #315ac5); }
.audience-faces i:nth-child(2) { background: linear-gradient(145deg, #875fe8, #d45796); }
.audience-faces i:nth-child(3) { background: linear-gradient(145deg, #44505d, #1a2028); }
.live-pill.on .audience-faces { display: none; }
@keyframes blink { 50% { opacity: .45; } }

.notice-share-row { position: absolute; z-index: 8; top: max(62px, calc(env(safe-area-inset-top) + 52px)); right: 10px; left: 10px; display: flex; align-items: center; gap: 7px; pointer-events: none; }
.notice-share-row > * { pointer-events: auto; }
.viewers, .glass-button { border: 1px solid rgba(255,255,255,.08); background: rgba(10,11,14,.42); box-shadow: 0 4px 14px rgba(0,0,0,.16); backdrop-filter: blur(14px); }
.viewers { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 999px; color: rgba(255,255,255,.8); font-size: 9px; }
.viewers i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #43e889; box-shadow: 0 0 8px #43e889; }
.viewers i::after { content: ""; position: absolute; inset: -4px; border: 1px solid #43e889; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { to { transform: scale(1.45); opacity: 0; } }
.viewers b { font-weight: 600; }
.tool-actions { display: flex; gap: 6px; }
.glass-button { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; color: rgba(255,255,255,.76); font-size: 10px; cursor: pointer; }
.glass-button svg { width: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-share-button { min-height: 29px; margin-left: 0; padding: 6px 10px; flex: none; }
.mic-request-button.waiting { border-color: rgba(255,205,100,.35); color: #ffe1a0; }
.mic-request-button.live { border-color: rgba(47,224,207,.48); background: rgba(47,224,207,.13); color: var(--accent-soft); box-shadow: 0 0 14px rgba(47,224,207,.16); }

.notice-bar { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 29px; flex: 1; padding: 5px 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 7px 999px 999px 7px; background: linear-gradient(90deg, rgba(10,11,14,.62), rgba(10,11,14,.3)); box-shadow: 0 5px 16px rgba(0,0,0,.16); backdrop-filter: blur(12px); color: white; }
.notice-bar svg { width: 12px; flex: none; fill: none; stroke: var(--accent-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marquee { overflow: hidden; flex: 1; }
.marquee b { display: inline-block; min-width: 100%; padding-left: 100%; font-size: 10px; font-weight: 450; white-space: nowrap; animation: marquee 15s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.room > .video-stage { position: absolute; z-index: 0; inset: 0; }
.video-stage { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 0; background: radial-gradient(circle at 50% 42%, #0b1b2a, #03070f 67%); box-shadow: inset 0 0 72px rgba(0,0,0,.5); }
.video-stage video { display: none; width: 100%; height: 100%; background: #02050b; object-fit: cover; }
.video-stage.playing video { display: block; }
.video-stage.playing .offline { display: none; }
.video-shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, transparent 42%, rgba(0,0,0,.16) 100%), linear-gradient(180deg, rgba(0,0,0,.06), transparent 38%, rgba(0,0,0,.22)); }
.offline { display: flex; align-items: center; flex-direction: column; gap: 11px; color: rgba(220,243,245,.48); }
.offline p { margin: 0; font-size: 13px; }
.offline button { padding: 6px 12px; border: 1px solid rgba(122,255,242,.15); border-radius: 999px; background: rgba(47,224,207,.06); color: rgba(222,255,251,.6); font-size: 10px; cursor: pointer; }
.offline button[hidden] { display: none; }
.offline[data-state="connecting"] .offline-art { animation: player-connect 1.8s ease-in-out infinite; }
.offline[data-state="error"] p { color: rgba(255,210,210,.76); }
@keyframes player-connect { 50% { transform: scale(.985); opacity: .72; } }
.offline-art { position: relative; display: grid; place-content: center; justify-items: center; width: 160px; height: 160px; overflow: hidden; border: 1px solid rgba(122,255,242,.1); border-radius: 26px; background: radial-gradient(circle, rgba(47,224,207,.12), transparent 52%), radial-gradient(circle at 75% 20%, rgba(115,124,255,.13), transparent 35%), linear-gradient(145deg,#101b2c,#050912); box-shadow: 0 18px 45px rgba(0,0,0,.26), inset 0 0 35px rgba(47,224,207,.025); }
.offline-art strong { z-index: 1; font: 700 37px STKaiti, KaiTi, serif; letter-spacing: -.1em; color: rgba(255,255,255,.88); }
.offline-art > span { position: absolute; top: 27px; color: var(--accent); font-size: 21px; }
.offline-art small { color: rgba(255,255,255,.28); letter-spacing: .35em; font-size: 8px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.orbit-one { width: 125px; height: 125px; }
.orbit-two { width: 92px; height: 92px; border-color: rgba(47,224,207,.14); }

.chat-panel { position: absolute; z-index: 6; right: 0; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); left: 0; display: flex; align-items: flex-start; flex-direction: column; height: 236px; overflow: hidden; padding: 8px 110px 8px 10px; background: transparent; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000); pointer-events: none; }
.chat-panel .message { pointer-events: auto; }
.chat-panel::before { content: ""; width: 1px; margin-top: auto; }
.message { flex: none; width: fit-content; max-width: 100%; margin: 2px 0; padding: 5px 8px; border: 0; border-radius: 4px 11px 11px 11px; background: rgba(8,9,12,.45); backdrop-filter: blur(8px); color: rgba(255,255,255,.92); font-size: 12px; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.32); overflow-wrap: anywhere; animation: message-in .24s ease both; }
.message.no-message-animation { animation: none; }
.message > span, .message-author { margin-right: 4px; color: var(--accent-soft); font-weight: 650; }
.message-author { display: inline; padding: 0; border: 0; outline-offset: 1px; background: none; font: inherit; line-height: inherit; cursor: pointer; }
.message-author:hover { color: #c3fff8; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 58%, transparent); }
.message-author:active { transform: none; }
.message .mention-token { margin: 0 1px; padding: 1px 4px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: #8ffff3; font-weight: 720; }
.message.mentions-me { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, #06101b 68%, var(--accent) 10%); box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 13%, transparent); }
.message-role-badge { display:inline-flex; align-items:center; margin:0 4px 0 0!important; padding:1px 5px; border-radius:999px; background:linear-gradient(105deg,#168ec7,#5e5de4); color:white!important; font-size:8px; font-weight:750; line-height:1.45; text-shadow:none; }
.message.host-message { background:linear-gradient(105deg,rgba(16,111,142,.56),rgba(51,57,135,.52)); box-shadow:0 5px 18px rgba(24,130,190,.12); }
.message.admin-message { background:rgba(99,71,158,.52); }
.system-message { background: color-mix(in srgb, var(--accent) 13%, rgba(8,9,12,.45)); color: rgba(236,255,253,.74); }
.system-message > span { color: var(--accent-soft); }
.sticker-message { padding: 7px 8px; background: rgba(4,12,23,.58); }
.sticker-bubble { display: grid; grid-template-columns: 34px auto; align-items: center; gap: 7px; min-width: 86px; }
.sticker-bubble i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, rgba(47,224,207,.15), rgba(115,124,255,.16)); font-size: 21px; font-style: normal; }
.sticker-bubble div { display: flex; flex-direction: column; line-height: 1.2; }
.sticker-bubble div .message-author { margin: 0; color: var(--accent-soft); font-size: 9px; }
.sticker-bubble div b { margin-top: 3px; color: rgba(255,255,255,.86); font-size: 11px; font-weight: 550; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } }

.ad-card { position: absolute; z-index: 7; right: 10px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); width: 82px; height: 104px; min-height: 104px; overflow: hidden; padding: 11px 5px 24px; border: 1px solid rgba(146,225,255,.35); border-radius: 18px; background: linear-gradient(145deg, rgba(10,27,39,.96), rgba(6,12,25,.96)); box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(75,188,255,.055), inset 0 1px rgba(255,255,255,.11); color: #effffd; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; animation: ad-float 5.2s ease-in-out infinite, ad-glow 4.8s ease-in-out infinite; }
.ad-card:hover { transform: translateY(-3px) scale(1.025); border-color: rgba(160,239,255,.72); box-shadow:0 18px 38px rgba(0,0,0,.48),0 0 18px rgba(42,169,255,.2); animation-play-state: paused; }
.ad-card:active { transform:scale(.97); }
.ad-card::before { content: ""; position: absolute; z-index: 3; top: -55%; bottom: -55%; left: -95%; width: 42%; pointer-events: none; background: linear-gradient(105deg, transparent 12%, rgba(255,255,255,.04) 30%, rgba(199,250,255,.42) 50%, rgba(255,255,255,.06) 70%, transparent 88%); transform: rotate(12deg); animation: ad-sheen 5.2s ease-in-out infinite; }
.ad-card::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 22px; border-top:1px solid rgba(255,255,255,.13); background: linear-gradient(102deg, #079aa8, #247dcc 58%, #3f68d8); }
.ad-card b { position: relative; z-index: 1; display: block; white-space: pre-line; font-family: STKaiti, KaiTi, serif; font-size: 14px; line-height: 1.15; }
.ad-card small { position: absolute; z-index: 5; right: 0; bottom: 4px; left: 0; overflow:hidden; padding:0 6px; color: #fff; font-size: 9px; font-weight:680; line-height:1.5; text-overflow:ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.38); white-space:nowrap; }
.ad-spark { position: absolute; z-index: 5; top: 6px; right: 7px; display:grid; place-items:center; width:14px; height:14px; color: #d7fbff; font-size:12px; text-shadow: 0 0 7px rgba(69,201,255,.82), 0 1px 2px rgba(0,0,0,.55); animation: ad-sparkle 3.2s ease-in-out infinite; }
.ad-logo { width: 45px; height: 45px; margin: 1px auto 5px; border-radius: 12px; object-fit: cover; box-shadow: 0 5px 14px rgba(0,0,0,.28); }
.ad-card.has-logo { min-height: 104px; padding: 0 0 22px; }
.ad-card.has-logo .ad-logo { position: absolute; z-index: 1; inset: 0 0 22px; display: block; width: 82px; height: 82px; margin: 0; border-radius: 17px 17px 0 0; object-fit: cover; object-position: center 48%; box-shadow: none; transform: scale(1.001); transform-origin:center; animation: ad-logo-breathe 6.4s ease-in-out infinite alternate; }
.ad-card.has-logo b { display: none; }
@keyframes ad-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ad-glow { 0%, 100% { box-shadow: 0 12px 28px rgba(0,5,15,.4), 0 0 0 1px rgba(54,177,255,.055), inset 0 1px rgba(255,255,255,.1); } 50% { box-shadow: 0 14px 31px rgba(0,5,15,.45), 0 0 11px rgba(46,168,255,.13), inset 0 1px rgba(255,255,255,.13); } }
@keyframes ad-sheen { 0%, 35% { left: -95%; opacity: 0; } 48% { opacity: .85; } 72%, 100% { left: 145%; opacity: 0; } }
@keyframes ad-sparkle { 0%, 100% { transform: scale(.82) rotate(0); opacity: .62; } 50% { transform: scale(1.08) rotate(18deg); opacity: 1; } }
@keyframes ad-logo-breathe { from { transform: scale(1.001); filter: saturate(1) contrast(1); } to { transform: scale(1.012); filter: saturate(1.035) contrast(1.015); } }

.mention-picker { position: absolute; z-index: 13; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); left: 8px; width: min(276px, calc(100% - 16px)); overflow: hidden; padding: 10px; border: 1px solid rgba(133,255,242,.16); border-radius: 17px; background: radial-gradient(circle at 92% 0%, rgba(115,124,255,.2), transparent 38%), rgba(4,8,13,.96); box-shadow: 0 18px 50px rgba(0,0,0,.5); backdrop-filter: blur(20px); animation: tray-in .18s ease both; }
.mention-picker[hidden] { display: none; }
.mention-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 3px 8px; color: rgba(255,255,255,.8); font-size: 11px; }
.mention-picker-head span { color: rgba(255,255,255,.36); font-size: 9px; }
.mention-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mention-option { max-width: 100%; overflow: hidden; padding: 7px 10px; border: 1px solid rgba(122,255,242,.11); border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(236,255,253,.82); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mention-option::before { content: "@"; margin-right: 2px; color: var(--accent); font-weight: 750; }
.mention-option:hover { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.05)); }

.emoji-tray { position: absolute; z-index: 12; right: 8px; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); left: 8px; padding: 12px; border: 1px solid rgba(133,255,242,.14); border-radius: 19px; background: radial-gradient(circle at 85% 0%, rgba(115,124,255,.18), transparent 34%), rgba(4,8,13,.96); box-shadow: 0 18px 50px rgba(0,0,0,.52); backdrop-filter: blur(20px); animation: tray-in .2s ease both; }
.emoji-tray[hidden] { display: none; }
@keyframes tray-in { from { opacity: 0; transform: translateY(7px) scale(.98); } }
.emoji-tray-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: rgba(255,255,255,.72); font-size: 11px; }
.emoji-tray-head button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.54); cursor: pointer; }
.emoji-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 9px; }
.emoji-row button { display: grid; place-items: center; min-height: 35px; padding: 0; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.045); font-size: 18px; cursor: pointer; }
.sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sticker-option { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 5px; min-height: 44px; padding: 6px; border: 1px solid rgba(125,255,242,.08); border-radius: 12px; background: linear-gradient(145deg, rgba(47,224,207,.07), rgba(115,124,255,.06)); color: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.sticker-option i { font-size: 21px; font-style: normal; }
.sticker-option b { font-size: 10px; font-weight: 550; }

.composer { position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 6px; min-height: 62px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(0,0,0,.38)); border-top: 0; }
.message-input-wrap { display: flex; flex: 1; min-width: 0; padding: 10px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(16,17,20,.6); box-shadow: inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(14px); }
.message-input-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: white; font-size: 12px; }
.message-input-wrap input::placeholder { color: rgba(255,255,255,.38); }
.emoji-button { display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: rgba(16,17,20,.54); backdrop-filter: blur(12px); color: rgba(255,255,255,.82); cursor: pointer; }
.composer-tool-actions { flex: none; gap: 4px; }
.composer .glass-button { position: relative; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border-color: rgba(255,255,255,.08); border-radius: 50%; background: rgba(16,17,20,.54); }
.composer .glass-button svg { width: 14px; }
.composer .glass-button #micButtonLabel, .composer .glass-button .shortcut-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.send-button { padding: 10px 14px; border: 0; border-radius: 999px; background: linear-gradient(105deg, #0c9b94, #5864e8); box-shadow: 0 5px 18px rgba(47,224,207,.2); font-size: 11px; font-weight: 650; cursor: pointer; }
.send-button:disabled, .message-input-wrap input:disabled { opacity: .42; cursor: not-allowed; }
.composer .emoji-button,.composer .glass-button { width:44px; height:44px; }
.composer .send-button,.modal button,.live-pill,.notice-bar,.top-share-button { min-height:44px; }

.modal-backdrop { position: absolute; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3,8,12,.68); backdrop-filter: blur(12px); }
.field-label { display:block; margin:0 0 7px; color:rgba(255,255,255,.64); font-size:12px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 320px); padding: 24px; border: 1px solid rgba(133,255,242,.14); border-radius: 22px; background: radial-gradient(circle at 88% 0%, rgba(115,124,255,.15), transparent 34%), linear-gradient(145deg, rgba(9,24,34,.98), rgba(4,8,17,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06); animation: modal-in .25s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(9px) scale(.97); } }
.modal h2 { margin: 0 0 18px; font-size: 15px; font-weight: 650; }
.modal h2 span { color: var(--accent); }
.modal p { min-height: 42px; margin: 0 0 18px; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.modal input { width: 100%; margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; outline: 0; background: rgba(255,255,255,.08); color: white; }
.modal input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.audience-modal { width: min(100%, 360px); overflow: hidden; padding: 0; }
.audience-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.audience-modal-head > div { min-width: 0; }
.audience-modal .audience-modal-head h2 { margin: 0 0 4px; font-size: 16px; }
.audience-modal .audience-modal-head p { min-height: 0; margin: 0; color: rgba(255,255,255,.44); font-size: 10px; line-height: 1.4; }
.audience-close { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: rgba(255,255,255,.055); color: rgba(255,255,255,.62); font-size: 18px; cursor: pointer; }
.audience-sort-note { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px 8px; }
.audience-sort-note span { color: var(--accent-soft); font-size: 10px; font-weight: 650; }
.audience-sort-note small { color: rgba(255,255,255,.33); font-size: 9px; }
.audience-list { max-height: min(56vh, 430px); overflow-y: auto; padding: 2px 10px 14px; scrollbar-width: none; }
.audience-list::-webkit-scrollbar { display: none; }
.audience-row { display: grid; grid-template-columns: 26px 38px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 56px; padding: 6px 8px; border-radius: 14px; }
.audience-row:hover { background: rgba(255,255,255,.035); }
.audience-rank { color: rgba(255,255,255,.3); font-size: 10px; text-align: center; }
.audience-row.top-three .audience-rank { color: #ffe69a; font-size: 12px; font-weight: 750; }
.audience-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: linear-gradient(145deg, hsl(var(--avatar-hue) 72% 58%), hsl(calc(var(--avatar-hue) + 52) 65% 32%)); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 13px rgba(0,0,0,.22); color: white; font-size: 12px; font-weight: 680; }
.audience-copy { min-width: 0; }
.audience-name { display: flex; align-items: center; gap: 5px; overflow: hidden; color: rgba(255,255,255,.88); font-size: 11px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.audience-self { padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-soft); font-size: 8px; font-weight: 550; }
.audience-copy small { display: block; margin-top: 3px; color: rgba(255,255,255,.34); font-size: 9px; }
.audience-duration { color: rgba(255,255,255,.68); font-size: 10px; font-variant-numeric: tabular-nums; }
.audience-duration::before { content: "◷"; margin-right: 4px; color: var(--accent); }
.audience-loading, .audience-empty { display: grid; place-items: center; min-height: 150px; color: rgba(255,255,255,.36); font-size: 11px; }
.host-profile-modal { width: min(100%, 340px); overflow: hidden; padding: 0 18px 18px; }
.host-profile-close { position: absolute; z-index: 3; top: 13px; right: 13px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(5,8,13,.48); color: rgba(255,255,255,.65); font-size: 18px; cursor: pointer; }
.host-profile-hero { position: relative; display: flex; align-items: center; flex-direction: column; margin: 0 -18px; padding: 27px 20px 19px; overflow: hidden; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%), linear-gradient(145deg, rgba(14,29,39,.88), rgba(7,8,17,.54)); }
.host-profile-hero::after { content: ""; position: absolute; right: -35px; bottom: -70px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.018), 0 0 0 56px rgba(255,255,255,.012); }
.profile-avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; overflow: hidden; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; background: radial-gradient(circle at 65% 25%, var(--accent), #18214d 45%, #03070e); box-shadow: 0 10px 30px rgba(0,0,0,.32), 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent); font: 700 27px STKaiti, KaiTi, serif; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.host-profile-modal .profile-name-row h2 { margin: 0; font-size: 16px; }
.host-profile-modal .host-profile-hero p { position: relative; z-index: 1; min-height: 0; margin: 6px 0 10px; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.4; }
.host-profile-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(0,0,0,.18); color: rgba(255,255,255,.5); font-size: 9px; }
.host-profile-status i { width: 6px; height: 6px; border-radius: 50%; background: #899197; }
.host-profile-status.live { color: #dffff0; }
.host-profile-status.live i { background: #42ee92; box-shadow: 0 0 8px #42ee92; animation: blink 1.4s infinite; }
.host-stat-grid { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.025); }
.host-stat-grid > div { display: flex; align-items: center; flex-direction: column; padding: 15px 8px; }
.host-stat-grid > div + div { border-left: 1px solid rgba(255,255,255,.07); }
.host-stat-grid strong { color: rgba(255,255,255,.92); font-size: 15px; font-variant-numeric: tabular-nums; }
.host-stat-grid small { margin-top: 4px; color: rgba(255,255,255,.36); font-size: 9px; }
.current-live-time { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: rgba(255,255,255,.56); font-size: 9px; }
.current-live-time[hidden] { display: none; }
.current-live-time strong { color: var(--accent-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.host-contact-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); }
.host-contact-card > div { min-width: 0; }
.host-contact-card span { display: block; color: rgba(255,255,255,.35); font-size: 9px; }
.host-contact-card strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 560; }
.host-contact-card button { flex: none; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-soft); font-size: 9px; cursor: pointer; }
.modal-actions { display: flex; gap: 8px; }
.modal-primary, .modal-secondary { flex: 1; padding: 11px 16px; border: 0; border-radius: 13px; cursor: pointer; }
.modal-primary { background: linear-gradient(105deg, #087f80, #5962dc); }
.modal-secondary { background: rgba(255,255,255,.1); }
.mic-modal { text-align: center; }
.mic-modal h2 { margin-top: 14px; }
.mic-orb { position: relative; display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto; border: 1px solid rgba(47,224,207,.24); border-radius: 50%; background: radial-gradient(circle, rgba(47,224,207,.22), rgba(115,124,255,.07)); box-shadow: 0 0 30px rgba(47,224,207,.12); }
.mic-orb span { width: 17px; height: 26px; border: 2px solid var(--accent-soft); border-radius: 10px; }
.mic-orb span::after { content: ""; position: absolute; width: 29px; height: 29px; top: 22px; left: 17px; border: 2px solid transparent; border-right-color: var(--accent-soft); border-bottom-color: var(--accent-soft); border-radius: 50%; transform: rotate(45deg); }
.mic-orb.active { animation: mic-pulse 1.35s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 11px rgba(47,224,207,.05), 0 0 35px rgba(47,224,207,.2); } }

.toast { position: absolute; z-index: 80; bottom: 78px; left: 50%; max-width: calc(100% - 40px); padding: 9px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(5,8,13,.82); backdrop-filter: blur(10px); box-shadow: 0 9px 30px rgba(0,0,0,.3); color: rgba(255,255,255,.86); font-size: 11px; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
button:active { transform: translateY(1px); }

@media (max-height: 640px) {
  .welcome-content { transform: translateY(0); }
  .brand-mark-large { width: 112px; height: 112px; }
  .welcome h1 { margin-top: 16px; }
}

@media (max-width: 440px) {
  .room-header { padding-right: 8px; padding-left: 8px; }
  .notice-share-row { right: 8px; left: 8px; }
  .tool-actions { gap: 3px; }
  .glass-button { gap: 3px; padding: 6px 7px; font-size: 9px; }
  .composer { gap: 4px; padding-right: 6px; padding-left: 6px; }
  .composer .message-input-wrap { padding-right: 9px; padding-left: 9px; }
  .composer .glass-button { padding: 0; }
  .composer .emoji-button { width: 32px; height: 32px; }
  .composer .send-button { padding-right: 11px; padding-left: 11px; }
  .host-copy strong { max-width: 84px; }
  .emoji-row { grid-template-columns: repeat(8, 1fr); gap: 3px; }
  .sticker-grid { gap: 4px; }
}

@media (min-width: 561px) {
  .app-shell { border-right: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
}

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