/* Visibility is Bootstrap classes (d-none / show / d-block). Do not reimplement layout here. */
[x-cloak],
[hidden],
.hidden {
  display: none !important;
}

.logo-accent {
  color: var(--bs-primary);
}

.email-text {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-uuid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-google {
  background: #fff;
  color: #222;
  border: 1px solid #ddd;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
}

.btn-google:hover {
  background: #f5f5f5;
}

.site-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(13, 110, 253, 0.2);
  border-top-color: var(--bs-primary);
  border-radius: 50%;
  animation: site-spin 0.7s linear infinite;
  vertical-align: middle;
}

.site-spinner-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

.site-spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

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

.status-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge-active { background: rgba(25, 135, 84, 0.15); color: #198754; }
.status-badge-pending_payment { background: rgba(255, 193, 7, 0.2); color: #997404; }
.status-badge-trialing { background: rgba(13, 110, 253, 0.15); color: #0d6efd; }
.status-badge-grace_period { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
.status-badge-expired { background: rgba(108, 117, 125, 0.2); color: #495057; }
.status-badge-cancelled,
.status-badge-none { background: rgba(108, 117, 125, 0.15); color: #6c757d; }

.dot-ok {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #198754;
}

.plan-opt.selected {
  border-color: var(--bs-primary);
  background: rgba(13, 110, 253, 0.06);
}

.history-card-body,
.history-card-translated,
.history-card-prompt {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  margin: 0;
}

.history-card-translated {
  color: var(--bs-secondary-color);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--bs-border-color);
}

.history-card-prompt {
  color: var(--bs-secondary-color);
  margin-top: 0.5rem;
}

.history-card-locked {
  color: #dc3545;
  font-family: inherit;
  font-size: 0.8125rem;
}

.history-card-detect {
  color: #198754;
  font-weight: 600;
}

.timeline-host {
  min-height: 400px;
}