/* Shared ivory auth design system — Login, Beta signup, Beta verify.
   Self-contained pages (Layout = null) link this + the Fraunces/Jakarta fonts. */
:root {
  --paper:#f7f3ea; --paper-2:#efe8da; --card:#fffdf8; --ink:#191713; --ink-soft:#57534a;
  --ink-faint:#8a8479; --line:#e4dccb; --amber:#d98a1c; --amber-deep:#b9720f; --amber-wash:#f6e6c8;
  --good:#1c7a4f; --err:#b3261e; --on-accent:#2a1c05;
  --shadow:0 30px 70px -30px rgba(25,23,19,.35);
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem; background:var(--paper); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 60%),
    radial-gradient(760px 520px at -8% 12%, color-mix(in srgb, #0e4c45 8%, transparent), transparent 55%);
  background-attachment:fixed;
}
a { color:inherit; text-decoration:none; }

.card { width:min(440px,100%); background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:2.4rem 2.2rem 2rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; letter-spacing:-.02em; }
.brand .mark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--ink); color:var(--amber); font-family:"Fraunces",serif; font-weight:700; font-size:.85rem; }

.eyebrow { margin:1.6rem 0 .3rem; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-deep); }
h1 { margin:0 0 .35rem; font-family:"Fraunces",serif; font-weight:600; font-size:2rem; letter-spacing:-.02em; }
.sub { margin:0 0 1.5rem; color:var(--ink-soft); font-size:.95rem; }

.alert { border-radius:12px; padding:.75rem .9rem; font-size:.9rem; margin-bottom:1rem; }
.alert-error { background:color-mix(in srgb, var(--err) 8%, transparent); border:1px solid color-mix(in srgb, var(--err) 30%, transparent); color:var(--err); }
.alert-info { background:var(--amber-wash); border:1px solid color-mix(in srgb, var(--amber) 30%, transparent); color:var(--amber-deep); }
.alert-ok { background:color-mix(in srgb, var(--good) 10%, transparent); border:1px solid color-mix(in srgb, var(--good) 30%, transparent); color:var(--good); }
.alert a { color:inherit; text-decoration:underline; }

.field { margin-bottom:1rem; }
.field label, .field-row label { display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:.4rem; }
.field input, .field-row input {
  width:100%; padding:.8rem .9rem; font-family:inherit; font-size:.98rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:11px; transition:border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field-row input:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }
.field .error, .error { display:block; margin-top:.35rem; font-size:.82rem; color:var(--err); }
.field .hint { display:block; margin-top:.35rem; font-size:.8rem; color:var(--ink-faint); }
.field-row { display:flex; gap:.75rem; margin-bottom:1rem; }
.field-row > div { flex:1; min-width:0; }

.check { display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--ink-soft); cursor:pointer; margin:.2rem 0 1.3rem; }
.check input { width:16px; height:16px; margin-top:2px; flex:0 0 auto; accent-color:var(--amber-deep); }
.check a { color:var(--amber-deep); font-weight:600; text-decoration:underline; }

.btn-primary {
  width:100%; display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; font-family:inherit; font-size:1rem; font-weight:700; border:none; border-radius:12px;
  background:var(--amber); color:var(--on-accent); cursor:pointer;
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--amber) 70%, transparent);
  transition:transform .14s ease, background .14s ease;
}
.btn-primary:hover { transform:translateY(-1px); background:var(--amber-deep); color:#fff; }

.divider { display:flex; align-items:center; gap:.9rem; margin:1.5rem 0; color:var(--ink-faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* Google — official multicolour mark on a clean white button */
.gbtn {
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.82rem 1rem; font-family:inherit; font-size:.96rem; font-weight:600; color:#3c4043;
  background:#fff; border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.gbtn:hover { background:#faf8f3; border-color:#cabfa9; box-shadow:0 6px 16px -10px rgba(25,23,19,.4); }
.gbtn svg { width:18px; height:18px; flex:0 0 auto; }
.gbtn.disabled { cursor:not-allowed; color:var(--ink-faint); }

.foot { margin-top:1.5rem; text-align:center; font-size:.92rem; color:var(--ink-soft); }
.foot a { color:var(--amber-deep); font-weight:600; }
.foot a:hover { text-decoration:underline; }
.backhome { display:block; text-align:center; margin-top:1.1rem; font-size:.85rem; color:var(--ink-faint); }
.backhome:hover { color:var(--ink-soft); }

/* Beta data-safety notice */
.notice { display:flex; gap:.7rem; align-items:flex-start; margin:.3rem 0 1.2rem; padding:.85rem 1rem; border:1px solid color-mix(in srgb, var(--amber) 22%, transparent); background:var(--amber-wash); border-radius:12px; font-size:.83rem; line-height:1.45; color:var(--ink-soft); }
.notice strong { color:var(--ink); }
.notice .ico { color:var(--amber-deep); flex:0 0 auto; font-size:18px; margin-top:1px; }

/* Verify-code screen */
.otp { width:100%; text-align:center; letter-spacing:.5em; font-family:ui-monospace,"SF Mono",monospace; font-size:1.7rem; font-weight:600; padding:.85rem; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.otp:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }
.resend { margin-top:1.2rem; text-align:center; font-size:.88rem; color:var(--ink-soft); }
.resend button { background:none; border:none; color:var(--amber-deep); font-weight:600; font-family:inherit; font-size:.88rem; cursor:pointer; text-decoration:underline; padding:0; }
.resend button:disabled { color:var(--ink-faint); cursor:default; text-decoration:none; }
.micro { display:block; text-align:center; margin-top:.7rem; font-size:.8rem; color:var(--ink-faint); }