:root {
  color-scheme: dark;
  --cc-bg: #0f1420;
  --cc-panel: #172338;
  --cc-panel-2: #0c111c;
  --cc-border: #2c3c58;
  --cc-text: #eef3fb;
  --cc-muted: #9fb0cb;
  --cc-accent: #2498eb;
  --cc-accent-strong: #1769aa;
  --cc-good: #4fd47f;
  --cc-warn: #f2c14e;
  --cc-danger: #ff7777;
  --cc-radius: 12px;
  --cc-radius-sm: 8px;
  --cc-font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cc-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6f7d92;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  vertical-align: -3px;
}

.cc-dot[data-state="good"] {
  background: var(--cc-good);
  box-shadow: 0 0 0 2px rgba(79, 212, 127, 0.18);
}

.cc-dot[data-state="warn"] {
  background: var(--cc-warn);
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.18);
}

.cc-dot[data-state="danger"] {
  background: var(--cc-danger);
  box-shadow: 0 0 0 2px rgba(255, 119, 119, 0.18);
}

.cc-status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.cc-room-menu { width: min(820px, calc(100% - 32px)); margin: 24px auto 18px; }
.cc-room-menu[hidden] { display: none; }
.cc-room-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--cc-panel);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
}
.cc-room-menu-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-room-menu-list li + li::before { content: "→"; color: var(--cc-muted); }
.cc-room-menu-item {
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--cc-text);
  text-decoration: none;
  white-space: nowrap;
}
.cc-room-menu-item:hover { border-color: var(--cc-accent); }
.cc-room-menu-item.is-current {
  border-color: var(--cc-accent);
  background: var(--cc-panel-2);
  font-weight: 650;
}
.cc-room-menu-item.is-disabled { color: var(--cc-muted); opacity: 0.65; cursor: not-allowed; }

@media (max-width: 600px) {
  .cc-room-menu-list li + li::before { display: none; }
}