:root{
  --bg:#000;              /* page background */
  --card:#ffffff;         /* card background */
  --text:#0f0f13;         /* dark text on card */
  --muted:#6b7280;        /* muted text */
  --pink:#E91E63;         /* primary accent (pink) */
  --pink-600:#D81B60;
  --border:#ececf1;       /* light border */
  --shadow: 0 20px 60px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#fff;
}

/* --- Top-left brand only (no navbar) --- */
.brandbar{
  position:fixed; top:0; left:0; right:0;
  height:75px;
  display:flex; align-items:center;
  padding:0 22px;
  background:rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:1000;
}
.brandbar .brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff;
}
.brandbar .brand img{
  width: 110px;   /* was 175px */
  height: auto;
}
.brandbar .brand .title{
  font-family: "Inter", sans-serif !important;
  font-size:26px; letter-spacing:.3px;
  line-height:1;
}

/* --- Center container --- */
.wrap{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:110px 16px 24px; /* room for brand bar */
}

/* --- Card --- */
.card{
  width:100%;
  max-width:460px;
  background:var(--card);
  color:var(--text);
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  overflow:hidden;
}
.card-head{
  padding:28px 28px 8px;
  text-align:center;
}
.card-logo{
  width:180px; height:180px; object-fit:contain; margin-bottom:6px;
}
.card-title{
  margin:8px 0 0;
  font:700 28px/1.2 "Saira", sans-serif;
  color:var(--text);
}
.card-subtitle{
  margin:10px 0 0;
  font:500 13px/1.4 "Inter", sans-serif;
  color:var(--muted);
}

.card-body{
  padding:20px 28px 28px;
}

/* fields */
.field{display:block; margin-bottom:16px;}
.field-label{
  display:block; font:600 13px/1 "Inter", sans-serif; color:#111827; margin-bottom:6px;
}
.req{color:var(--pink); margin-left:2px}
input[type="email"], input[type="password"]{
  width:100%; padding:12px 14px;
  font:500 15px/1 "Inter", sans-serif;
  color:#111827; background:#fff;
  border:1px solid var(--border); border-radius:12px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input[type="email"]:focus, input[type="password"]:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(233,30,99,.15);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  padding:12px 16px;
  border-radius:12px; border:1px solid transparent;
  font:700 15px/1 "Saira", sans-serif;
  cursor:pointer; text-decoration:none;
  transition:transform .04s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--pink); color:#fff;
  box-shadow:0 10px 24px rgba(233,30,99,.28);
  margin-top:6px;
}
.btn-primary:hover{ background:var(--pink-600); }

.btn-google{
  background:#ffffff; color:#111827; border:1px solid var(--border);
  margin-top:12px;
}
.btn-google img{ width:18px; height:18px; }
.btn-google.disabled{ pointer-events:none; opacity:.55; }

/* helper text */
.alt{
  text-align:center; color:var(--muted);
  font:500 13px/1.6 "Inter", sans-serif;
  margin:14px 0 2px;
}
.alt a{ color:var(--pink); text-decoration:none; font-weight:700; }
.alt a:hover{ text-decoration:underline; }

/* consent */
.consent{
  margin-top:14px;
  padding:10px 0 0;
  border-top:1px dashed #eee;
}
.checkbox{
  display:flex; align-items:flex-start; gap:10px;
  color:#111827; font:500 13px/1.5 "Inter", sans-serif;
}
.checkbox input{ margin-top:2px; transform:scale(1.15); }
.checkbox a{ color:var(--pink); text-decoration:none; font-weight:700; }
.checkbox a:hover{ text-decoration:underline; }

.error{
  color:#c53030;
  font:600 13px/1.5 "Inter", sans-serif;
  margin-top:8px; text-align:center;
  display:none;
}

/* responsive */
@media (max-width:520px){
  .card{ border-radius:16px; }
  .card-title{ font-size:24px; }
}

/* --- a11y polish --- */
:where(input, .btn):focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important}
}

/* --- mobile polish (keeps laptop unchanged) --- */
@media (max-width:520px){
  /* brand bar a bit tighter + safe area */
  .brandbar{
    height:64px;
    padding:0 14px;
    padding-top: max(env(safe-area-inset-top), 0px);
  }
  .brandbar .brand img{ width:72px; }
  .brandbar .brand .title{ font-size:20px; }

  /* ensure content starts below brand bar and respects notches */
  .wrap{
    min-height:100svh; /* better on mobile than 100dvh */
    padding-top: calc(64px + 12px + max(env(safe-area-inset-top), 0px));
    padding-left:16px;
    padding-right:16px;
  }

  /* compact card spacing */
  .card{ border-radius:16px; max-width:420px; }
  .card-head{ padding:20px 20px 6px; }
  .card-logo{ width:120px; height:120px; }
  .card-title{ font-size:24px; }
  .card-body{ padding:16px 20px 20px; }

  /* prevent iOS zoom on focus + bigger tap targets */
  input[type="email"], input[type="password"]{
    font-size:16px;     /* >=16px avoids iOS zoom */
    padding:14px;
  }
  .btn{ padding:14px 16px; }
}

/* clarify disabled state for screen readers + visuals */
.btn-google.disabled{
  pointer-events:none;
  opacity:.55;
  filter: grayscale(0.2);
}