form { width: 100%; margin-top: 10vh; }
form { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; row-gap: 1rem; }
form { padding-bottom: calc(env(safe-area-inset-bottom) + 6rem); }

.home-link { margin-bottom: 10vh; font-size: 2rem; }

.input-wrapper { position: relative; }
input { padding: var(--s); font-size: 1.2rem; }

/* Social sign-in (Google / Apple) */
.oauth-divider { display: flex; align-items: center; gap: var(--s); width: min(30rem, calc(100vw - 3rem)); color: var(--text-color, #666); opacity: 0.6; font-size: 0.9rem; }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.4; }
.oauth-buttons { display: flex; flex-direction: column; gap: 0.75rem; width: min(30rem, calc(100vw - 3rem)); }
.oauth-button { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.8rem 1rem; font-size: 1.05rem; font-weight: 600; color: #1f1f1f; background: #fff; border: 1.5px solid #dadce0; border-radius: 100vmin; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.oauth-button:hover { background: #f7f8fa; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.oauth-button:active { transform: translateY(1px); }
.oauth-button:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.oauth-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
input + label { position: absolute; top: 50%; left: 2px; padding: 0 var(--s); background-color: white; transition: top 0.3s ease-in-out, transform 0.5s ease-in-out; color: var(--text-color); }
input + label { top: 0; transform: translate(0%, -85%); }
input:invalid + label { top: 50%; transform: translate(0%, -50%); }
input:focus + label { top: 0; transform: translate(0%, -85%); }