/* /login/: the same card as the Android app's Login screen - the photo in
   the top of one card fading into the sign-in options, on a clean white
   dotted page. No site header/footer on this page. */
:root { --lc-navy:#0E1F3D; --lc-ink:#14223A; --lc-muted:#52647D; --lc-blue:#1F6FD1; --lc-line:#DCE4EF; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body.lc-page { font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--lc-ink); min-height:100vh; position:relative; overflow-x:hidden;
  /* Clean white page: a fine dot grid and a soft blue glow at the top. */
  background-color:#F7F9FC;
  background-image:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(147,190,245,.28), rgba(147,190,245,0) 70%),
    radial-gradient(rgba(18,58,112,.13) 1.1px, transparent 1.3px);
  background-size:100% 100%, 20px 20px;
  background-attachment:fixed, fixed; }
.lc-wrap { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.lc-card { width:min(440px,100%); background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 18px 50px rgba(18,58,112,.18); }
.lc-photo { position:relative; aspect-ratio:1 / 1; overflow:hidden; }
.lc-photo > img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.lc-photo::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(191,216,247,.35) 18%, rgba(255,255,255,0) 18.2%), linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%); pointer-events:none; }
.lc-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 75%, rgba(255,255,255,.85) 90%, #fff 100%); pointer-events:none; }
.lc-logo { position:absolute; top:12px; left:12px; z-index:1; width:44px; height:44px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(18,58,112,.18); }
.lc-body { padding:0 18px 18px; margin-top:-14px; position:relative; display:grid; gap:12px; }
.lc-welcome { margin:0; display:flex; align-items:center; justify-content:center; gap:12px; font-size:14px; color:var(--lc-ink); }
.lc-welcome span { width:26px; height:2px; border-radius:1px; background:#9CC2F2; }
.lc-brand { margin:-6px 0 0; text-align:center; font-size:25px; font-weight:600; color:var(--lc-navy); letter-spacing:-.3px; }
.lc-brand b { color:#2D6FD6; font-weight:600; }
.lc-sub { margin:-8px 0 2px; text-align:center; font-size:13px; color:var(--lc-muted); }
.lc-plan { padding:10px 12px; border-radius:11px; background:#F0F6FD; font-size:13px; display:grid; gap:2px; }
.lc-plan[hidden] { display:none; }
.lc-row { display:flex; gap:10px; }
.lc-pill { flex:1; min-height:44px; border-radius:11px; border:1px solid #DCE6F3; background:#F4F8FE; color:var(--lc-navy); font:inherit; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background .15s, transform .05s; }
.lc-pill:hover { background:#E6EEF9; }
.lc-pill:active { transform:scale(.98); }
.lc-pill:disabled { opacity:.6; cursor:progress; }
.lc-pill svg { flex:none; }
.lc-email { display:grid; gap:10px; }
.lc-email[hidden], .lc-row[hidden] { display:none; }
.lc-field { position:relative; display:flex; align-items:center; height:44px; border-radius:11px; background:#F6F9FD; border:1px solid var(--lc-line); padding:0 12px 0 14px; gap:10px; }
.lc-field:focus-within { border-color:#7FAEEB; background:#fff; }
.lc-field input { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:14px; color:var(--lc-ink); outline:none; height:100%; }
.lc-show { border:0; background:none; color:var(--lc-muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.lc-right { margin:-4px 0 0; text-align:right; font-size:13px; }
a { color:#123A70; font-weight:700; text-decoration:none; }
a:hover { text-decoration:underline; }
.lc-primary { min-height:44px; border:0; border-radius:11px; color:#fff; font:inherit; font-size:14.5px; font-weight:800; cursor:pointer; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(90deg, #3B8BEB, #123A70); transition:transform .05s, filter .15s; }
.lc-primary:hover { filter:brightness(1.06); }
.lc-primary:active { transform:scale(.99); }
.lc-primary:disabled { opacity:.55; cursor:progress; }
.lc-back { border:0; background:none; color:#123A70; font:inherit; font-size:13px; font-weight:700; cursor:pointer; justify-self:center; padding:4px; }
.lc-error { margin:0; font-size:12.5px; color:#B42318; min-height:0; }
.lc-error:empty { display:none; }
.lc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13.5px; color:#65718D; }
.lc-foot span a { color:var(--lc-blue); }
.lc-buy { padding:6px 14px; border-radius:11px; background:#fff; border:1.2px solid #8DB6EE; color:var(--lc-blue); }
.lc-buy:hover { background:#EEF4FC; text-decoration:none; }
@media (max-height:760px) and (min-width:700px) { .lc-photo { aspect-ratio:4 / 3; } }