:root {
  color-scheme: light;
  --text: #545454;
  --muted: #747474;
  --paper: #fffdf7;
  --cream: #fff8e7;
  --sand: #ebcfb3;
  --blue: #96c3ea;
  --blue-hover: #80b3df;
  --border: #dedbd3;
  --danger-bg: #faece8;
  --danger: #7a514b;
  --success-bg: #e5f2d9;
  --success: #526648;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 14% 12%, rgba(235,207,179,.48), transparent 30rem), radial-gradient(circle at 92% 4%, rgba(150,195,234,.24), transparent 26rem), var(--cream); }
button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(150,195,234,.58); outline-offset: 2px; }
.login-shell { width: min(960px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 48px 0; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(340px, 1.1fr); align-items: center; gap: clamp(32px, 7vw, 88px); }
.login-brand { text-align: center; }
.login-brand img { width: 144px; height: 144px; object-fit: cover; border-radius: 28px; box-shadow: 0 12px 32px rgba(84,84,84,.12); }
.login-brand > p:first-of-type, .eyebrow { margin: 20px 0 4px; color: #4f687a; font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.login-brand h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.04em; }
.brand-copy { max-width: 340px; margin: 16px auto 0; color: var(--muted); line-height: 1.8; }
.login-card { padding: clamp(28px, 5vw, 48px); border: 1px solid var(--border); border-top: 4px solid var(--sand); border-radius: 16px; background: var(--paper); box-shadow: 0 12px 36px rgba(84,84,84,.09); }
.login-card .eyebrow { margin-top: 0; }
h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.guidance { margin: 10px 0 24px; color: var(--muted); line-height: 1.7; }
label { display: grid; gap: 8px; font-weight: 700; }
input { min-height: 48px; width: 100%; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: #fff; font-size: 16px; }
input:focus { border-color: var(--blue-hover); }
form > button { width: 100%; min-height: 48px; margin-top: 18px; border: 0; border-radius: 8px; background: var(--blue); color: var(--text); font-weight: 800; cursor: pointer; }
form > button:hover { background: var(--blue-hover); }
button:disabled { opacity: .55; cursor: wait; }
.secondary-actions { display: flex; margin-top: 16px; justify-content: space-between; gap: 12px; }
.text-button { padding: 6px 0; border: 0; background: transparent; color: #4f687a; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.message { margin: 20px 0 0; padding: 12px 14px; border-radius: 8px; line-height: 1.6; }
.message.error { color: var(--danger); background: var(--danger-bg); }
.message.success { color: var(--success); background: var(--success-bg); }
.privacy { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (max-width: 720px) { .login-shell { width: min(100% - 24px, 500px); padding: 28px 0; grid-template-columns: 1fr; gap: 24px; } .login-brand img { width: 104px; height: 104px; border-radius: 20px; } .brand-copy { display: none; } .login-card { padding: 26px 20px; } .secondary-actions { align-items: flex-start; flex-direction: column; } }