:root { --brand:#175e4e; --gold:#e9c32c; --bg:#eaf4ef; --card:#ffffff; --fg:#12241f; --muted:#55675f; --line:#dbe5e0; --link:#175e4e;
  --display:"Montserrat","Arial Black",Arial,sans-serif; --body:"Figtree","Segoe UI",Arial,sans-serif; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b1c18; --card:#112923; --fg:#edf4f1; --muted:#a4b9b1; --line:#2a4a40; --link:#7fd0b1; color-scheme: dark; } }
:root[data-theme="dark"] { --bg:#0b1c18; --card:#112923; --fg:#edf4f1; --muted:#a4b9b1; --line:#2a4a40; --link:#7fd0b1; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); background-image: radial-gradient(900px 500px at 10% -10%, rgba(23,94,78,0.14), transparent 60%), radial-gradient(700px 500px at 110% 110%, rgba(233,195,44,0.14), transparent 60%); background-attachment: fixed;
  color: var(--fg); font: 400 17px/1.55 var(--body); display: grid; place-items: center;
  padding: max(32px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.abox { width: 100%; max-width: 440px; display: grid; gap: 20px; }
.alogo { justify-self: center; }
.alogo img { height: 56px; width: auto; display: block; }
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none !important; } :root:not([data-theme="light"]) .logo-dark { display: block !important; } }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
.acard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; display: grid; gap: 18px; box-shadow: 0 30px 60px -40px rgba(10,40,32,0.45); }
.acard h1 { font: 900 1.75rem/1.1 var(--display); margin: 0; letter-spacing: -0.02em; }
.sub { margin: -8px 0 0; color: var(--muted); }
.sub a, .terms a, .afoot a, .row a { color: var(--link); font-weight: 700; }
.terms { margin: 0; font-size: 0.86rem; color: var(--muted); }
.btn-google, .btn-main, .btn-ghost { height: 50px; width: 100%; border-radius: 999px; font: 700 1rem var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.btn-google { background: var(--card); color: var(--fg); border: 2px solid var(--line); }
.btn-google:hover { border-color: var(--brand); }
.btn-google svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-main { background: var(--brand); color: #ffffff; border: 0; }
.btn-main:hover { background: #124c3f; }
.btn-ghost { background: transparent; color: var(--fg); border: 2px solid var(--line); }
button:disabled { opacity: 0.6; cursor: progress; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.aform { display: grid; gap: 14px; }
.aform label { display: grid; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.req { color: #b3401a; }
.aform input[type="email"], .aform input[type="password"], .aform input[type="text"] { height: 50px; border: 2px solid var(--line); border-radius: 10px; padding: 0 12px; font: 500 1rem var(--body); color: var(--fg); background: var(--card); width: 100%; min-width: 0; }
.aform input:focus { outline: none; border-color: var(--brand); }
.pw { position: relative; }
.pw input { padding-right: 70px !important; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 38px; padding: 0 12px; border: 0; background: none; color: var(--link); font: 700 0.9rem var(--body); cursor: pointer; border-radius: 8px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.92rem; }
.keep { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; font-size: 0.92rem !important; }
.keep input { width: 20px; height: 20px; accent-color: #175e4e; margin: 0; }
.astatus { margin: 0; border-radius: 10px; padding: 12px 14px; font-size: 0.93rem; background: rgba(233,195,44,0.2); color: var(--fg); }
.astatus.err { background: rgba(217,101,59,0.14); }
.astatus.ok { background: rgba(23,94,78,0.12); }
.afoot { text-align: center; font-size: 0.9rem; color: var(--muted); margin: 0; }
.who { display: flex; gap: 14px; align-items: center; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #ffffff; display: grid; place-items: center; font: 800 1.2rem var(--display); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who b { display: block; font-size: 1.05rem; }
.who span { color: var(--muted); font-size: 0.92rem; word-break: break-all; }
.soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.soon li { padding-left: 30px; position: relative; color: var(--muted); }
.soon li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #ffffff; font-size: 0.7rem; font-weight: 800; }