/* "Continue with Google" button: Google Identity branding (neutral button, official mark). */
.gsi-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 46px; padding: 0 16px; border-radius: 999px;
  background: #131314; border: 1px solid #8e918f; color: #e3e3e3;
  font: 500 15px/1 Roboto, var(--font); letter-spacing: 0.01em; cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.gsi-btn:hover { background: #1f1f21; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.gsi-btn:active { background: #2a2a2d; }
.gsi-mark { width: 20px; height: 20px; flex: none; }

@media (prefers-color-scheme: light) {
  .gsi-btn { background: #fff; border-color: #747775; color: #1f1f1f; }
  .gsi-btn:hover { background: #f8f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25); }
  .gsi-btn:active { background: #eeeeee; }
}

.gsi-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px;
  color: var(--text-3); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.gsi-or::before, .gsi-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.connected-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.connected-row .gsi-mark { width: 22px; height: 22px; }
.connected-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.connected-who p { margin: 0; }

.gsi-hint { margin: 10px 0 0; text-align: center; }
.gsi-existing {
  margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); font-size: 14px; line-height: 1.5;
}
.gsi-existing.is-first { border-color: var(--accent); }