.access-card {
  margin-top: 16px;
  margin-bottom: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #fff 0%, #f0f7e9 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.access-card h2 { margin: 4px 0 6px; font-size: 1.35rem; }
.access-card p { margin: 0; color: var(--muted); }
.access-card > div,
.connected-summary { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.access-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .7fr) auto; gap: 10px; align-items: end; min-width: min(100%, 610px); }
.access-form label { font-size: .82rem; font-weight: 800; color: var(--muted); }
.access-form input { display: block; width: 100%; margin-top: 6px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #111; }
.access-card .form-note { width: 100%; margin-top: 12px; min-height: 0; color: #9a2d2d; }
.account-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.text-button { border: 0; background: transparent; padding: 10px; color: var(--muted); font-weight: 750; cursor: pointer; }
.account-summary h2 { font-size: 1.7rem; margin: 8px 0; }
.account-summary p { color: var(--muted); }
.account-summary button { margin-top: 20px; }
.primary-button:disabled,
.secondary-button:disabled,
.light-button:disabled { opacity: .45; cursor: not-allowed; }
#syncStatus[data-tone="success"] { color: #2d682a; }
#syncStatus[data-tone="error"] { color: #9a2d2d; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
  .access-card > div,
  .connected-summary { align-items: stretch; flex-direction: column; }
  .access-form { grid-template-columns: 1fr; width: 100%; min-width: 0; }
  .account-actions { width: 100%; }
  .account-actions button { flex: 1; }
}