[hidden]{display:none!important}:root{--bg:#07090c;--panel:#11161c;--panel2:#171d24;--line:rgba(255,255,255,.12);--text:#fff;--muted:#aeb7c2;--gold:#d7a62f;--green:#138d43;--red:#d11920;--reserved:#b77a08;--oos:#b75b00}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.dashboard{width:100vw;height:100vh;display:grid;grid-template-rows:92px minmax(0,1fr);background:linear-gradient(135deg,#07090c,#0d1217)}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 26px;border-bottom:1px solid var(--line);background:#05070a}.brand-clock{display:flex;align-items:center;gap:20px}.logo{display:block;width:285px;max-width:32vw;height:62px;object-fit:contain;object-position:left center}.brand-clock i{width:1px;height:58px;background:rgba(255,255,255,.35)}.brand-clock b{display:block;font-size:34px;line-height:1;font-weight:950;white-space:nowrap}.brand-clock span{display:block;margin-top:7px;font-size:13px;font-weight:700;color:#d6d9dd;white-space:nowrap}.motion{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:#0c1116;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.motion:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.motion em{width:15px;height:15px;border-radius:50%;background:#76808a;box-shadow:0 0 0 4px rgba(118,128,138,.13)}.motion strong{display:block;font-size:13px;letter-spacing:.04em}.motion small{display:block;margin-top:3px;color:#8f9aa5;font-size:10px;font-weight:800}body.motion-active .motion em{background:#21c96a;box-shadow:0 0 16px rgba(33,201,106,.75)}body.motion-active .motion small{color:#4fe887}.main{min-height:0;display:grid;grid-template-columns:minmax(0,65fr) minmax(330px,35fr);gap:13px;padding:13px}.left{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 52px;gap:10px}.stage{position:relative;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#111820}.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}.placeholder{position:absolute;inset:0;display:grid;z-index:0;align-content:center;padding:6%;background:radial-gradient(circle at 75% 35%,#19365a 0,#0b1727 42%,#05090f 100%)}.placeholder small{color:var(--gold);font-weight:950;letter-spacing:.18em}.placeholder h1{margin:12px 0;font-size:clamp(42px,5.5vw,82px);line-height:.96;text-shadow:0 4px 24px #000}.placeholder h1 em{font-style:normal;color:var(--gold)}.placeholder p{font-size:clamp(14px,1.4vw,22px);font-weight:650}.dots{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px}.dots i{display:block;width:9px;height:9px;border-radius:50%;background:#ffffff70}.dots i.active{width:24px;border-radius:20px;background:var(--gold)}.announcement{display:flex;align-items:center;gap:12px;padding:0 18px;border:1px solid var(--line);border-radius:13px;background:#090d11;font-weight:750;overflow:hidden}.announcement strong{color:var(--gold);font-size:11px;letter-spacing:.08em;white-space:nowrap}.announcement span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{min-height:0;display:grid;grid-template-rows:auto auto auto minmax(115px,1fr);gap:10px}.card,.status{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel),var(--panel2));padding:16px;box-shadow:0 9px 26px #00000028}.card label{display:block;margin-bottom:11px;color:#e8ebee;font-size:11px;font-weight:950;letter-spacing:.09em}.person-row{display:flex;align-items:center;gap:14px}.avatar{width:72px;height:72px;border-radius:12px;border:2px solid var(--gold);flex:none}.person-row img{object-fit:cover}.fallback{display:grid;place-items:center;background:#242b32;font-size:29px;font-weight:950}.person h2{margin:0;font-size:21px}.person p{margin:4px 0;color:var(--gold);font-size:14px;font-weight:800}.person small{color:#ffb36b;font-size:10px;font-weight:900}.row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 0;border-top:1px solid var(--line)}.row span{color:var(--muted);font-size:12px}.row b{font-size:13px;text-align:right}.reservation h3{margin:0;color:var(--gold);font-size:20px}.reservation p{margin:5px 0 2px;font-weight:850}.reservation small{color:var(--muted)}.status{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:0;background:var(--green)}.status h2{margin:0;font-size:clamp(32px,3.3vw,56px);line-height:1;font-weight:950}.status p{margin:9px 0 0;font-size:16px;font-weight:800}body.room-state-occupied .status{background:var(--red)}body.room-state-reserved .status{background:var(--reserved)}body.room-state-out-of-service .status{background:var(--oos)}#motionVideo,#motionCanvas{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}@media(max-width:900px){.dashboard{grid-template-rows:76px minmax(0,1fr)}.header{padding:9px 14px}.logo{width:190px;height:48px}.brand-clock i{height:45px}.brand-clock b{font-size:23px}.brand-clock span{font-size:10px}.motion{padding:7px 10px}.motion strong{font-size:10px}.main{grid-template-columns:minmax(0,62fr) minmax(265px,38fr);gap:7px;padding:7px}.left{grid-template-rows:minmax(0,1fr) 40px;gap:6px}.right{gap:6px}.card,.status{padding:10px;border-radius:11px}.avatar{width:50px;height:50px}.person h2{font-size:15px}.person p{font-size:11px}.row{padding:5px 0}.row span,.row b{font-size:10px}.reservation h3{font-size:14px}.status h2{font-size:27px}.status p{font-size:11px}.announcement{padding:0 10px;font-size:10px}}


/* =========================================================
   ROOM PERSON FALLBACK + COMPACT STATUS + ICONS
   ========================================================= */
.person .fallback[hidden],
.person-row .fallback[hidden],
#personFallback[hidden],
#roomPersonPhoto[hidden] {
  display: none !important;
}

.card label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-icon {
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
}

.row span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.row-icon {
  width: 18px;
  color: var(--gold);
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

/* Do not let the status card consume the remaining sidebar height. */
.right {
  grid-template-rows: auto auto auto auto !important;
  align-content: start;
}

.status {
  min-height: 112px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px;
  padding: 16px 20px !important;
  text-align: left !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
}

.status-icon-wrap {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.14);
}

.status-icon {
  display: none;
  color: #fff;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

body.room-state-available .status-icon-available,
body.room-state-occupied .status-icon-occupied,
body.room-state-reserved .status-icon-reserved,
body.room-state-out-of-service .status-icon-out {
  display: block;
}

.status-copy {
  min-width: 0;
}

.status-copy small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.86);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .10em;
}

.status h2 {
  margin: 0 !important;
  font-size: clamp(27px,2.55vw,43px) !important;
  line-height: .98 !important;
  text-align: left !important;
}

.status p {
  margin: 6px 0 0 !important;
  font-size: 14px !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  .status {
    min-height: 82px;
    gap: 10px;
    padding: 10px 12px !important;
  }
  .status-icon-wrap {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 11px;
  }
  .status-icon {
    font-size: 25px;
  }
  .status-copy small {
    font-size: 8px;
    margin-bottom: 3px;
  }
  .status h2 {
    font-size: 24px !important;
  }
  .status p {
    font-size: 10px !important;
  }
  .label-icon,
  .row-icon {
    font-size: 13px;
  }
}