/* ============================================================================
   Sweet Login — FULL, RESPONSIVE, MOBILE-SAFE (fixed palette, no dark mode)
   - Global reset removes top gap (body margin) on all browsers
   - Header spans full width and respects safe-area insets (notches)
   - Body is a 3-row grid: header / main (fills) / footer
   - Centered card; fluid sizes with clamp(); mobile-first
   ============================================================================ */

/* ---------- Global reset (fixes the top gap) ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{background:#f4f6f9}
body{margin:0}

/* ---------- Tokens ---------- */
:root{
  --blue-50:#f2f6ff; --blue-100:#dce7ff; --blue-200:#b3caff;
  --blue-300:#89adff; --blue-400:#5e8eff; --blue-500:#2f6fff;
  --blue-600:#1f57d4; --blue-700:#1640a0;

  --sky-50:#e8faff; --sky-100:#ccf3ff; --sky-200:#99e6ff;
  --sky-300:#66d9ff; --sky-400:#33ccff; --sky-500:#00b5ff; --sky-600:#0092cc;

  --ink-900:#0f1417; --ink-800:#171c20; --ink-700:#21282f;
  --cloud-25:#ffffff; --cloud-50:#f4f6f9; --cloud-100:#e9edf2; --cloud-200:#dde3eb;

  --red-50:#fff5f5; --red-100:#ffdcdc; --red-500:#e24c4c; --red-600:#c73535;

  --bg: var(--cloud-50);
  --surface: var(--cloud-25);
  --text: var(--ink-900);
  --muted:#6b7582;
  --border:rgba(15,20,23,.10);

  --shadow-1:0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(15,20,23,.08);
  --shadow-2:0 14px 38px rgba(15,20,23,.12);

  --r-sm:.6rem; --r-md:.9rem; --r-lg:1.1rem; --r-xl:1.4rem;

  --step--1:clamp(.82rem, .75rem + .35vw, .95rem);
  --step-0: clamp(1rem, .95rem + .35vw, 1.06rem);
  --step-1:clamp(1.18rem, 1.02rem + .8vw, 1.38rem);
  --step-2:clamp(1.45rem, 1.15rem + 1.4vw, 1.8rem);
  --step-3:clamp(1.8rem,  1.3rem + 2vw, 2.2rem);

  --focus-ring: 0 0 0 3px rgba(255,255,255,.85), 0 0 0 6px var(--blue-400);

  --pad-1: clamp(.5rem, .4rem + .6vw, .8rem);
  --pad-2: clamp(.85rem, .7rem + .8vw, 1.2rem);
  --pad-3: clamp(1.2rem, .9rem + 1.2vw, 1.8rem);
  --pad-4: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);

  --container: 68rem;
}

/* ---------- Base & overlay ---------- */
body.sweet-bg{
  display:grid; grid-template-rows:auto 1fr auto;        /* header / main / footer */
  min-height:100dvh;                                     /* fill viewport on mobile */
  background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}

/* Full-page overlay (under everything) */
body.sweet-bg::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 10% -12%, var(--blue-100), transparent 62%),
    radial-gradient(1400px 900px at 100% -6%, var(--sky-100), transparent 62%);
}

header, main, footer { position:relative; z-index:1 }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
:focus{outline:none}

/* ---------- Utilities ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1rem, 3vw, 2rem)}
.stack>*+*{margin-top:var(--pad-1)}
.small{font-size:var(--step--1); color:var(--muted)}
.elev-2{box-shadow:var(--shadow-2)}

/* ================= Header (full width + safe-area) ================= */
.site-header{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding-top: max(0px, env(safe-area-inset-top));  /* fixes notches & top gaps */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:var(--pad-1) 0;
}
.brand{display:flex; align-items:center; gap:.85rem; min-width:0}
.brand-logo{height:clamp(32px, 4.5vw, 44px); width:auto; border-radius:.4rem; flex:0 0 auto}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-top{font-size:var(--step--1); color:var(--muted); letter-spacing:.02em; white-space:nowrap}
.brand-bottom{
  font-size:clamp(1.05rem,.9rem + 1vw,1.45rem);
  font-weight:800; letter-spacing:-.01em; line-height:1.2;
  background:linear-gradient(90deg, var(--blue-600), var(--sky-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Mobile header: center the brand */
@media (max-width:600px){
  .header-inner{justify-content:center}
  .brand{gap:.7rem}
  .brand-top{display:none}
}

/* ================= Main (centers card, fills viewport) ================= */
main{ width:100% }
.login-wrap{
  display:grid; place-items:center;
  padding-block: var(--pad-3);
  min-height: 100%; /* fills the 1fr row between header & footer */
}

/* Card */
.login-card{
  width:min(44rem, 100%);
  border:0; border-radius: var(--r-xl);
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg,
    color-mix(in oklab, #fff 90%, var(--blue-50)),
    color-mix(in oklab, #fff 90%, var(--sky-50))
  );
  outline:1px solid rgba(15,20,23,.06);
  box-shadow: 0 12px 36px rgba(15,20,23,.12);
  transition:outline-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.login-card:hover{ outline-color: rgba(15,20,23,.10); box-shadow:0 18px 44px rgba(15,20,23,.14) }
.login-card:focus-within{
  outline-color: color-mix(in oklab, var(--blue-400) 35%, rgba(15,20,23,.08));
  box-shadow: 0 20px 54px rgba(47,111,255,.16);
}

.login-icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius:16px;
  color:var(--blue-700);
  background:linear-gradient(135deg, var(--blue-100), #fff);
  box-shadow:var(--shadow-1); margin-bottom:.5rem;
}
.login-title{font-size:var(--step-2); font-weight:800; letter-spacing:-.01em}
.login-subtitle{color:var(--muted); margin-top:.35rem; margin-bottom:1rem}

/* Very small phones */
@media (max-width:420px){
  .login-card{padding:1rem; border-radius: var(--r-lg)}
  .login-title{font-size:clamp(1.25rem,4.5vw,1.5rem)}
}

/* ================= Form ================= */
.form{margin-top:1rem}
.field{display:grid; gap:.45rem}
.label{font-weight:700}
.input{
  width:100%;
  border:1px solid var(--border); border-radius:1rem;
  padding:.85rem 1rem; background:var(--surface); color:var(--text);
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.input::placeholder{color:color-mix(in oklab, var(--muted) 80%, transparent)}
.input:focus-visible{box-shadow:var(--focus-ring)}
/* No default red; only when flagged */
.input:invalid{border-color:var(--border); box-shadow:none}
.input.error, .input[aria-invalid="true"]{border-color:var(--red-500); box-shadow:0 0 0 3px rgba(226,76,76,.12)}
.input:-webkit-autofill{box-shadow:0 0 0 30px var(--surface) inset}

/* Actions */
.login-actions{
  display:flex; align-items:center; gap:.9rem;
  justify-content:space-between; margin-top:1rem; flex-wrap:wrap;
}
.link.subtle{color:var(--muted)}
.link.subtle:hover{color:color-mix(in oklab, var(--muted) 70%, var(--blue-600) 30%)}

/* Small screens: full-width CTA */
@media (max-width:520px){
  .login-actions{flex-direction:column; align-items:stretch; gap:.6rem}
  .login-actions .button{width:100%}
  .link.subtle{text-align:center}
}

/* ================= Buttons ================= */
.button{
  --btn-bg:var(--blue-500); --btn-bg-h:var(--blue-600); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.1rem; border-radius:1rem;
  border:1px solid color-mix(in oklab, var(--btn-bg) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in oklab, var(--btn-bg) 90%, white), var(--btn-bg));
  color:var(--btn-fg); font-weight:800; letter-spacing:.02em;
  box-shadow:var(--shadow-1);
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  text-decoration:none;
}
.button:hover{background:linear-gradient(180deg, color-mix(in oklab, var(--btn-bg-h) 90%, white), var(--btn-bg-h))}
.button:active{transform:translateY(1px)}
.button:focus-visible{box-shadow:var(--focus-ring)}
.button.warm{--btn-bg:var(--sky-500); --btn-bg-h:var(--sky-600)}

/* ================= Callouts ================= */
.callout{
  border:1px solid color-mix(in oklab, var(--blue-400) 25%, var(--border));
  background:color-mix(in oklab, var(--blue-50) 35%, var(--surface));
  color:color-mix(in oklab, var(--blue-700) 70%, var(--text));
  border-radius:1rem; padding:.75rem 1rem; margin:.5rem 0 1rem; box-shadow:var(--shadow-1);
}
.callout.error{border-color:var(--red-500); background:var(--red-50); color:var(--red-600)}

/* ================= Footer (full width, minimal) ================= */
.site-footer{width:100%; padding:var(--pad-2) 0; color:var(--muted); background:transparent; border-top:0}
.footer-inner{text-align:center}

/* ================= Desktop finesse ================= */
@media (min-width:1024px){
  .login-card{max-width:44rem; border-radius:1.1rem}
  .login-title{font-size:clamp(1.6rem, 1.1rem + 1vw, 2rem)}
  .input{padding:1rem 1.1rem; border-radius:.95rem}
  .button{
    background:linear-gradient(180deg, color-mix(in oklab, var(--blue-500) 92%, white), var(--blue-500));
    box-shadow:0 3px 10px rgba(47,111,255,.18);
  }
}

/* Ultra-wide: soften overlay edges */
@media (min-width:1400px){
  body.sweet-bg::before{
    background:
      radial-gradient(1200px 700px at 15% -20%, var(--blue-100), transparent 68%),
      radial-gradient(1300px 800px at 110% -10%, var(--sky-100), transparent 68%);
  }
}

/* Motion respect */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}