.codex-oauth-card {
  align-items: center;
  background: color-mix(in srgb, var(--panel, #0b1722) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, #294052) 82%, transparent);
  border-radius: 12px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 16px;
}

.codex-oauth-card[data-tone="ok"] { border-color: #36d99a; }
.codex-oauth-card[data-tone="bad"] { border-color: #ff6c7d; }
.codex-oauth-card[data-tone="warn"] { border-color: #ffc55d; }

.codex-oauth-copy { display: grid; gap: 4px; }
.codex-oauth-copy span { color: var(--muted, #91a4b4); font-size: .82rem; }
.codex-oauth-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.codex-device-dialog { max-width: min(480px, calc(100vw - 28px)); }
.codex-device-content { display: grid; gap: 16px; padding: 22px; }

.codex-device-code {
  background: #071019;
  border: 1px solid #436177;
  border-radius: 10px;
  color: #f7fbff;
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  font-weight: 800;
  letter-spacing: .12em;
  padding: 18px;
  text-align: center;
}

@media (max-width: 620px) {
  .codex-oauth-card { align-items: stretch; flex-direction: column; }
  .codex-oauth-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .codex-oauth-card, .codex-device-dialog { scroll-behavior: auto; }
}