.action-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.card-actions {
  flex-wrap: wrap;
}

.card-actions .btn {
  min-width: 120px;
}

.badge.reconnecting, .badge.connecting {
  color: var(--blue);
  background: rgba(88, 166, 255, .12);
}

.auth-wait {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b0f15;
}

.auth-wait div {
  display: grid;
  gap: 5px;
}

.auth-wait small {
  color: var(--muted);
}

.auth-qr {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: #0b0f15;
}

.auth-qr img {
  width: min(280px, 75vw);
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}

.auth-qr small {
  color: #4b5563;
}

dialog {
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

dialog.wide-dialog {
  width: min(94vw, 720px);
}

.modal-card {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card.wide {
  width: 100%;
}

.error-detail {
  color: var(--red);
  line-height: 1.4;
  white-space: normal;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 210, 41, .18);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.badge.connecting,
.badge.qr_loading,
.badge.qr_required,
.badge.code_required,
.badge.password_required {
  color: var(--blue);
  background: rgba(88, 166, 255, .12);
}

@media (max-width: 760px) {
  .action-group { width: 100%; }
  .action-group .btn { flex: 1; }
  .page-actions { flex-wrap: wrap; }
  .page-actions p { max-width: 100%; }
  dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .modal-card { max-height: calc(100dvh - 20px); padding: 16px; gap: 12px; }
  .modal-actions { position: sticky; bottom: -16px; padding-top: 12px; background: var(--surface); }
}