:root {
  color-scheme: dark;
  --live-bg: #07100d;
  --live-surface: #101b17;
  --live-surface-2: #182620;
  --live-line: #2a3a34;
  --live-text: #eff8f4;
  --live-muted: #92a79f;
  --live-accent: #67e0ad;
  --live-danger: #ff737f;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--live-bg); color: var(--live-text); }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.live-platform { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; overflow: hidden; }
.live-directory, .live-chat-panel { min-height: 0; display: flex; flex-direction: column; background: #0c1512; z-index: 10; }
.live-directory { border-right: 1px solid var(--live-line); padding: 21px 16px max(16px, env(safe-area-inset-bottom)); }
.live-directory header, .live-chat-panel > header, .host-console > header, .live-dialog header { display: flex; align-items: center; gap: 11px; }
.live-directory header > a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--live-line); border-radius: 11px; color: var(--live-text); text-decoration: none; }
.live-directory header div, .live-chat-panel > header div, .host-console > header div { flex: 1; }
.live-directory header p, .live-chat-panel header p, .host-console header p { margin: 0 0 3px; color: var(--live-accent); font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.live-directory header h1, .live-chat-panel header h2, .host-console header h2 { margin: 0; font-size: 20px; }
[data-directory-close] { display: none; }
.live-directory header > button, .host-console header > button, .live-dialog header > button { border: 0; background: transparent; color: var(--live-muted); font-size: 27px; }
.live-directory form { display: grid; grid-template-columns: 1fr 95px; gap: 8px; margin: 20px 0 14px; }
.live-directory input, .live-directory select, .chat-composer input, .live-dialog input, .live-dialog select, .live-dialog textarea { min-width: 0; min-height: 40px; border: 1px solid var(--live-line); border-radius: 10px; background: #08110e; padding: 9px 11px; outline: 0; }
.live-directory input { grid-column: 1 / -1; }
.live-directory input:focus, .live-directory select:focus, .chat-composer input:focus, .live-dialog input:focus, .live-dialog select:focus, .live-dialog textarea:focus { border-color: var(--live-accent); box-shadow: 0 0 0 3px rgba(103, 224, 173, .1); }
.live-directory form button, .host-console-button, .live-dialog footer button:last-child, .live-empty button { border: 0; border-radius: 10px; color: #092218; background: var(--live-accent); font-weight: 800; }
.live-room-list { min-height: 0; display: grid; gap: 9px; overflow-y: auto; padding-right: 3px; }
.live-room-list > p { color: var(--live-muted); font-size: 13px; }
.room-card { width: 100%; border: 1px solid var(--live-line); border-radius: 13px; padding: 9px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; text-align: left; background: var(--live-surface); transition: border-color .2s ease, transform .2s ease; }
.room-card:hover { transform: translateY(-1px); border-color: #49665c; }
.room-card.active { border-color: var(--live-accent); background: #13261f; }
.room-card img { width: 76px; height: 62px; border-radius: 9px; object-fit: cover; background: var(--live-surface-2); }
.room-card div { min-width: 0; align-self: center; }
.room-card strong, .room-card span, .room-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card strong { font-size: 13px; }
.room-card span { margin-top: 5px; color: var(--live-muted); font-size: 10px; }
.room-card small { margin-top: 6px; color: var(--live-accent); font-size: 9px; }
.host-console-button { margin-top: 14px; min-height: 43px; display: grid; place-items: center; text-decoration: none; font-size: 13px; }
.live-stage { position: relative; min-width: 0; overflow: hidden; background: #050a08; }
.live-media, .live-media img, .live-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-media img, .live-media video { object-fit: cover; background: #050a08; }
.live-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 7, 5, .55), transparent 32%, transparent 57%, rgba(2, 7, 5, .86)); pointer-events: none; }
.live-empty { position: absolute; left: 50%; top: 50%; width: min(430px, calc(100% - 40px)); transform: translate(-50%, -50%); padding: 28px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; text-align: center; background: rgba(5, 13, 10, .72); backdrop-filter: blur(14px); }
.live-empty[hidden] { display: none; }
.live-empty span { display: inline-block; padding: 5px 9px; border-radius: 6px; background: var(--live-danger); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.live-empty h2 { margin: 12px 0 8px; }
.live-empty p { color: var(--live-muted); font-size: 13px; line-height: 1.6; }
.live-empty button { padding: 10px 16px; }
.stage-toolbar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; padding: max(16px, env(safe-area-inset-top)) 18px 14px; display: flex; align-items: center; gap: 9px; }
.stage-toolbar > button { min-height: 38px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 0 11px; color: #fff; background: rgba(5, 13, 10, .5); backdrop-filter: blur(9px); }
.stage-toolbar > button:first-child { display: none; font-size: 18px; }
.host-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.host-chip img { width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: var(--live-surface); }
.host-chip span { min-width: 0; }
.host-chip strong, .host-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-chip strong { font-size: 13px; }
.host-chip small { color: rgba(255, 255, 255, .7); margin-top: 3px; font-size: 10px; }
.host-chip small i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--live-accent); }
.room-description { position: absolute; left: clamp(18px, 4vw, 46px); right: 18px; bottom: max(32px, calc(18px + env(safe-area-inset-bottom))); z-index: 4; max-width: 650px; text-shadow: 0 2px 14px #000; }
.room-description > span { padding: 5px 8px; border-radius: 6px; background: var(--live-danger); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.room-description h2 { margin: 13px 0 7px; font: 700 clamp(24px, 4vw, 44px) Georgia, "Noto Serif SC", serif; line-height: 1.15; }
.room-description p { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.6; }
.live-chat-panel { border-left: 1px solid var(--live-line); }
.live-chat-panel > header { min-height: 78px; padding: 17px 18px; border-bottom: 1px solid var(--live-line); }
.live-chat-panel > header > span { color: var(--live-muted); font-size: 10px; }
.live-chat-log { min-height: 0; flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.chat-message, .system-message { margin: 0 0 12px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-message strong { color: var(--live-accent); margin-right: 6px; }
.chat-message time { display: block; margin-top: 3px; color: var(--live-muted); font-size: 8px; }
.system-message { padding: 10px; border-radius: 9px; color: #b7dfcf; background: rgba(53, 131, 98, .15); }
.chat-composer { padding: 12px 13px max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; border-top: 1px solid var(--live-line); }
.chat-composer button { min-width: 58px; border: 0; border-radius: 10px; color: #092218; background: var(--live-accent); font-weight: 800; }
.chat-composer input:disabled, .chat-composer button:disabled { cursor: not-allowed; opacity: .5; }
.live-backdrop { position: fixed; inset: 0; z-index: 30; border: 0; background: rgba(0, 0, 0, .62); }
.host-console { position: fixed; right: 0; top: 0; bottom: 0; z-index: 31; width: min(520px, 92vw); padding: max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; background: #0d1713; border-left: 1px solid var(--live-line); box-shadow: -25px 0 60px #0009; transform: translateX(102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.host-console.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
[data-host-content] { display: grid; gap: 12px; margin-top: 20px; }
.host-status, .host-room { border: 1px solid var(--live-line); border-radius: 13px; padding: 15px; background: var(--live-surface); }
.host-status h3, .host-room h3 { margin: 8px 0 5px; }
.host-status p, .host-room p { margin: 5px 0; color: var(--live-muted); font-size: 12px; overflow-wrap: anywhere; }
.host-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.host-actions button { min-height: 36px; border: 1px solid var(--live-line); border-radius: 9px; padding: 7px 11px; background: var(--live-surface-2); }
.host-actions button.primary { color: #092218; border-color: var(--live-accent); background: var(--live-accent); font-weight: 800; }
.host-actions button.danger { color: var(--live-danger); }
.live-toast { position: fixed; left: 50%; bottom: 25px; z-index: 80; margin: 0; padding: 10px 15px; border: 1px solid var(--live-line); border-radius: 99px; color: var(--live-text); background: #13201b; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s ease, transform .2s ease; }
.live-toast.show { opacity: 1; transform: translate(-50%, 0); }
.live-dialog { width: min(630px, calc(100% - 24px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid var(--live-line); border-radius: 17px; color: var(--live-text); background: var(--live-surface); box-shadow: 0 30px 90px #000c; }
.live-dialog::backdrop { background: rgba(0, 0, 0, .74); backdrop-filter: blur(4px); }
.live-dialog form { max-height: calc(100vh - 30px); display: flex; flex-direction: column; }
.live-dialog header, .live-dialog footer { padding: 16px 19px; justify-content: space-between; border-bottom: 1px solid var(--live-line); }
.live-dialog header h2 { margin: 0; font-size: 19px; }
.live-dialog [data-dialog-fields] { padding: 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-dialog label { display: grid; gap: 6px; color: var(--live-muted); font-size: 11px; }
.live-dialog label.wide { grid-column: 1 / -1; }
.live-dialog textarea { min-height: 95px; resize: vertical; }
.live-dialog [data-dialog-error] { min-height: 18px; margin: 0; padding: 0 18px 10px; color: var(--live-danger); }
.live-dialog footer { border-top: 1px solid var(--live-line); border-bottom: 0; justify-content: flex-end; }
.live-dialog footer button { min-height: 39px; border: 1px solid var(--live-line); border-radius: 9px; padding: 8px 13px; background: var(--live-surface-2); }
.live-dialog footer button:last-child { min-width: 75px; }

@media (max-width: 1120px) {
  .live-platform { grid-template-columns: 260px minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
  .live-platform { grid-template-columns: minmax(0, 1fr) 310px; }
  .live-directory { position: fixed; left: 0; top: 0; bottom: 0; z-index: 31; width: min(330px, 90vw); box-shadow: 20px 0 60px #0009; transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .live-directory.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  [data-directory-close] { display: block; }
  .stage-toolbar > button:first-child { display: block; }
}

@media (max-width: 650px) {
  body { overflow: auto; }
  .live-platform { min-height: 100vh; min-height: 100dvh; height: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(58vh, 68dvh) minmax(32vh, auto); overflow: visible; }
  .live-stage { min-height: 58vh; }
  .live-chat-panel { min-height: 32vh; max-height: 42vh; border-left: 0; border-top: 1px solid var(--live-line); }
  .live-chat-panel > header { min-height: 60px; }
  .room-description { bottom: 20px; }
  .room-description h2 { font-size: 27px; }
  .stage-toolbar { padding: max(10px, env(safe-area-inset-top)) 10px 8px; gap: 6px; }
  .stage-toolbar > button { min-height: 34px; padding: 0 8px; font-size: 11px; }
  .host-chip img { width: 35px; height: 35px; }
  .host-chip strong { font-size: 11px; }
  .live-dialog [data-dialog-fields] { grid-template-columns: 1fr; }
  .live-dialog label.wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .live-directory, .host-console, .live-toast, .room-card { transition: none; }
}