.desktop-live-dialog {
  width: min(1100px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #46516a;
  border-radius: 16px;
  color: #edf2ff;
  background: #111722;
  box-shadow: 0 24px 90px rgb(0 0 0 / 70%);
}
.desktop-live-dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(5px); }
.desktop-live-dialog--fallback { position: fixed; inset: 20px; z-index: 2147483647; margin: auto; }
.desktop-live { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; font-family: "Microsoft YaHei UI", sans-serif; }
.desktop-live__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #303a4d; background: #171f2d; }
.desktop-live__header div { display: grid; gap: 3px; }
.desktop-live__header strong { font-size: 17px; }
.desktop-live__header span { color: #9aa8bd; font-size: 12px; }
.desktop-live__header button { width: 36px; height: 36px; border: 1px solid #526078; border-radius: 9px; color: #fff; background: #263147; font-size: 20px; cursor: pointer; }
.desktop-live__body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .8fr); min-height: 0; }
.desktop-live__main { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; min-width: 0; padding: 14px; }
.desktop-live__video { position: relative; min-height: 0; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 25%, #313d56, #05070c 70%); }
.desktop-live__video video { width: 100%; height: 100%; object-fit: contain; background: #05070c; }
.desktop-live__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; color: #c8d3e5; }
.desktop-live__placeholder b { font-size: 38px; }
.desktop-live.is-playing .desktop-live__placeholder { display: none; }
.desktop-live__badges { position: absolute; inset: 10px 10px auto; display: flex; justify-content: space-between; pointer-events: none; }
.desktop-live__badges span { padding: 5px 10px; border-radius: 999px; background: rgb(8 11 17 / 76%); }
.desktop-live__badges span:first-child { background: #c71f37; }
.desktop-live__info { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.desktop-live__info div { display: grid; gap: 2px; }
.desktop-live__info span { color: #9caabd; font-size: 12px; }
.desktop-live__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.desktop-live__device { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 1px solid #52617a; border-radius: 8px; color: #b9c5d7; background: #1b2535; font-size: 12px; }
.desktop-live__device select { max-width: 220px; border: 0; color: #fff; background: transparent; font: inherit; }
.desktop-live__device select option { color: #fff; background: #172031; }
.desktop-live button { min-height: 34px; padding: 6px 12px; border: 1px solid #52617a; border-radius: 8px; color: #edf2ff; background: #263247; font: inherit; cursor: pointer; }
.desktop-live button:hover { filter: brightness(1.16); }
.desktop-live button.is-primary { border-color: #e53b52; background: #be1c35; }
.desktop-live button.is-danger { border-color: #d83549; color: #ffced5; }
.desktop-live__side { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 14px; border-left: 1px solid #303a4d; background: #151c28; }
.desktop-live__notice { display: block; min-height: 20px; padding: 8px 10px; border-radius: 8px; color: #b9c4d6; background: #202a3b; font-size: 12px; }
.desktop-live__notice.is-error { color: #ffc3cc; background: #591b27; }
.desktop-live__create { display: grid; gap: 8px; padding: 10px; border: 1px solid #344158; border-radius: 10px; }
.desktop-live__create label { display: grid; gap: 4px; color: #b6c2d4; font-size: 12px; }
.desktop-live__create input,.desktop-live__create select,.desktop-live__create textarea { box-sizing: border-box; width: 100%; padding: 8px; border: 1px solid #4d5a72; border-radius: 7px; color: #fff; background: #0f1520; font: inherit; }
.desktop-live__rooms { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 8px; }
.desktop-live__room { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid #344158; border-radius: 9px; background: #1c2534; }
.desktop-live__room div { display: grid; gap: 3px; min-width: 0; }
.desktop-live__room strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-live__room span { color: #97a6ba; font-size: 11px; }
.desktop-live__empty { padding: 20px 10px; color: #8f9db1; text-align: center; border: 1px dashed #3b475b; border-radius: 9px; }
.desktop-live__compliance { margin: 0; color: #8290a4; font-size: 10px; line-height: 1.55; }
@media (max-width: 820px) { .desktop-live-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); } .desktop-live__body { grid-template-columns: 1fr; overflow: auto; } .desktop-live__main { min-height: 60vh; } .desktop-live__side { border-left: 0; border-top: 1px solid #303a4d; } }
@media (max-height: 520px) {
  .desktop-live-dialog { height: calc(100vh - 16px); }
  .desktop-live__header { padding: 7px 12px; }
  .desktop-live__header span { display: none; }
  .desktop-live__main,
  .desktop-live__side { padding: 8px; }
  .desktop-live__side { overflow-y: auto; }
}