/* ── Base ────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: 420px;
}

.container--prose {
  max-width: 640px;
}

.container--room {
  max-width: 960px;
}

.page-main {
  padding-block: var(--space-8);
  min-height: calc(100dvh - var(--header-height) - 48px);
}

.page-main--centered {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block-start: var(--space-12);
}

.page-main--centered .container {
  width: 100%;
}

.page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-block: 0 var(--space-6);
  color: var(--color-text);
}

.section-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-block: 0 var(--space-4);
  color: var(--color-text);
}

/* ── Site header ─────────────────────────────────────────── */
.site-header {
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__logo {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.site-header__logo:hover {
  color: var(--color-accent-hover);
}

/* ── Navigation ─────────────────────────────────────────── */
.site-nav {
  flex: 1;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  padding-block: var(--space-1);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-text);
}
.site-nav a[aria-current="page"] {
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Language toggle ─────────────────────────────────────── */
.lang-form {
  display: contents;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.lang-sep {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  opacity: 0.5;
  user-select: none;
}

.lang-option {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}

.lang-option:hover {
  color: var(--color-text);
}

.lang-option--active {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: default;
}

/* ── Dark mode toggle ────────────────────────────────────── */
.btn-theme {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s, border-color 0.15s;
}
.btn-theme:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text-muted);
}

.btn-theme__icon::before {
  content: '☀';
}
[data-theme="dark"] .btn-theme__icon::before {
  content: '☾';
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-theme__icon::before {
    content: '☾';
  }
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-height: 44px;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text-muted);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-surface);
  border-color: var(--color-danger);
}
.btn--danger:hover {
  opacity: 0.9;
}

.btn--wide {
  width: 100%;
}

.btn--sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
}

/* Button that looks like a link (e.g. logout in nav) */
.btn-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  min-height: 0;
}
.btn-link:hover {
  color: var(--color-text);
}

.inline-form {
  display: contents;
}

/* Focus ring — consistent and accessible */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-full);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--live {
  background: var(--color-live);
  color: var(--color-surface);
}

.badge--scheduled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.badge--ended {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  opacity: 0.7;
}

.badge--listeners {
  background: var(--color-listeners);
  color: #ffffff;
}

.badge--none {
  background: var(--color-secondary);
  color: #ffffff;
}

.badge--hidden {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
}

.lang-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-1);
}

/* ── Forms ───────────────────────────────────────────────── */
.form-field {
  margin-block-end: var(--space-4);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.form-input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
  outline: none;
}
.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}

.form-textarea {
  resize: vertical;
  min-height: 88px;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233F506B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: var(--space-8);
}

.form-input--narrow {
  max-width: 120px;
}

.form-input-file {
  display: block;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-2) 0;
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block: var(--space-1) 0;
}

.form-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  font-weight: 600;
  margin-block: var(--space-2) 0;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* ── Alert / Notice ──────────────────────────────────────── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-4);
  font-size: var(--text-sm);
}

.alert--error {
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
}
.alert p { margin: 0; }

.notice {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-6);
  font-weight: 500;
}

.notice--ended {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.notice--waiting {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.notice p { margin: 0 0 var(--space-2); }
.notice p:last-child { margin-bottom: 0; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-notice {
  color: var(--color-text-muted);
  font-style: italic;
  margin-block: var(--space-4);
}

/* ── Room list (index page) ──────────────────────────────── */
.room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
}

.room-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}
.room-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}

.room-card--live {
  border-left: 3px solid var(--color-live);
}

.room-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-4) var(--space-6);
}

.room-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.room-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.room-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.room-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.room-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.room-card__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.room-card__time {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.room-card__countdown {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: 600;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.room-card__duration {
  color: var(--color-text-muted);
}

/* ── Feed subscribe section ──────────────────────────────── */
.feed-section {
  border-top: 1px solid var(--color-border);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-8);
  padding-block-end: var(--space-8);
}

.feed-section__heading {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}

.feed-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 560px) {
  .feed-cards { grid-template-columns: 1fr; }
}

.feed-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feed-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feed-card__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.feed-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.feed-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.feed-card__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-start: auto;
}

.feed-card__input {
  font-size: var(--text-sm);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 0;
  flex: 1;
  cursor: text;
}

.feed-card__copy,
.feed-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
}

.feed-card__copy:hover,
.feed-card__link:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface-alt);
}

/* ── Help page ───────────────────────────────────────────── */
.help-section {
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.help-section:last-child {
  border-bottom: none;
}

.help-section__heading {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent);
  margin-block: 0 var(--space-3);
}

.help-section p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  margin-block: 0 var(--space-3);
}

.help-section p:last-child {
  margin-block-end: 0;
}

/* ── Auth form ───────────────────────────────────────────── */
.auth-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

/* ── Admin ───────────────────────────────────────────────── */
.admin-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block-end: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.admin-room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-room-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
}

.admin-room-item__info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
}

.admin-room-item__title {
  font-weight: 600;
  color: var(--color-text);
}

a.admin-room-item__title {
  color: var(--color-primary);
  text-decoration: underline;
}

.admin-room-item__slug {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.admin-room-item__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* Embed code panel */
.embed-panel {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.embed-panel__heading {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-block: 0 var(--space-3);
  color: var(--color-text);
}

.embed-mode-toggle {
  display: flex;
  gap: var(--space-4);
  margin-block-end: var(--space-3);
}

.embed-code {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-block-end: var(--space-3);
  color: var(--color-text);
}

/* Settings fieldset groups */
.settings-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-block-end: var(--space-6);
}

.settings-group__legend {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding-inline: var(--space-2);
}

.form-textarea--tall {
  min-height: 120px;
}

/* Home content (rendered markdown on front page) */
.home-content {
  margin-block-end: var(--space-8);
  color: var(--color-text);
}

.home-content h1,
.home-content h2,
.home-content h3 {
  font-weight: 700;
  margin-block: 0 var(--space-3);
  color: var(--color-text);
  line-height: 1.25;
}

.home-content h1 { font-size: var(--text-xl); }
.home-content h2 { font-size: var(--text-lg); }
.home-content h3 { font-size: var(--text-base); }

.home-content p {
  margin-block: 0 var(--space-3);
  color: var(--color-text-muted);
}

.home-content p:last-child { margin-block-end: 0; }

.home-content a {
  color: var(--color-accent);
  text-underline-offset: 2px;
}

.home-content a:hover { color: var(--color-accent-hover); }

.home-content strong { font-weight: 700; }
.home-content em { font-style: italic; }

.home-content ul,
.home-content ol {
  margin-block: 0 var(--space-3);
  padding-inline-start: var(--space-6);
  color: var(--color-text-muted);
}

/* Avatar in admin */
.avatar-current {
  margin-block: var(--space-4);
}

.avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
}

/* ── Room header (room page, top section) ────────────────── */
.room-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.room-header__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

.room-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
}

.room-header__sep {
  color: var(--color-border);
  user-select: none;
}

.room-header__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.room-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

.room-header__share {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.room-header__share:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text-muted);
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Collapsible description */
.room-header__details {
  margin: 0;
}

.room-header__summary {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  user-select: none;
}

.room-header__summary::-webkit-details-marker { display: none; }

.room-header__summary::before {
  content: '▶';
  font-size: 0.55rem;
  display: inline-block;
  transition: transform 0.15s;
}

details[open] .room-header__summary::before {
  transform: rotate(90deg);
}

.room-header__description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-block: var(--space-2) 0;
}
.room-header__description > * {
  margin-block: 0 var(--space-3);
}
.room-header__description > *:last-child {
  margin-block-end: 0;
}
.room-header__description a {
  color: var(--color-accent);
  text-decoration: underline;
}
.room-header__description a:hover {
  color: var(--color-accent-hover);
}
.room-header__description ul,
.room-header__description ol {
  padding-inline-start: var(--space-6);
}

/* ── Join panel ──────────────────────────────────────────── */
.join-panel {
  max-width: 420px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  margin-block-end: var(--space-6);
}

.join-panel__heading {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-block: 0 var(--space-6);
  color: var(--color-text);
  text-align: center;
}

.scheduled-detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-block: 0 var(--space-2);
}

.join-panel .countdown {
  text-align: center;
  margin-block: 0 var(--space-6);
}

.join-panel .btn {
  display: flex;
  margin-block-start: var(--space-3);
}

.join-panel .inline-form {
  margin-block-start: var(--space-3);
  display: flex;
  justify-content: center;
}

/* ── Section heading row (heading + action button) ──────── */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-4);
}
.section-heading-row .section-heading {
  margin-block-end: 0;
}

/* ── Room dialog ─────────────────────────────────────────── */
.room-dialog {
  width: min(540px, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0;
  box-shadow: var(--shadow-md);
}
.room-dialog[open] {
  display: flex;
  flex-direction: column;
}
.room-dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}
.room-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.room-dialog__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}
.room-dialog__close {
  background: none;
  border: none;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.room-dialog__close:hover {
  color: var(--color-text);
  background: var(--color-surface);
}
.room-dialog__body {
  overflow-y: auto;
  padding: var(--space-6);
  flex: 1 1 auto;
}

/* ── Site footer ─────────────────────────────────────────── */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
  text-align: center;
}

.site-footer__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── Utility ─────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .site-header__inner {
    gap: var(--space-2);
  }

  .site-nav ul {
    gap: var(--space-3);
  }

  .auth-form {
    padding: var(--space-6);
  }

  .admin-section {
    padding: var(--space-4);
  }

  .join-panel {
    padding: var(--space-6);
  }
}