@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; }

:root {
  --black:    #141414;
  --white:    #FFFFFF;
  --bg:       #FAFAF9;
  --input-bg: #F4F4F2;
  --muted:    #A0A09A;
  --border:   #EDEDEB;
  --font:     'Bricolage Grotesque', system-ui, sans-serif;
}

body {
  font-family: var(--font);
  background:  var(--bg);
  min-height:  100vh;
  display:     flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px 64px;
  color: var(--black);
}

.wrap {
  width:     100%;
  max-width: 480px;
}

/* ── Logo ── */
.logo {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 56px;
}

.logo-icon {
  width:         44px;
  height:        44px;
  background:    var(--black);
  border-radius: 14px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.logo-name {
  font-size:      20px;
  font-weight:    600;
  letter-spacing: -0.4px;
  color:          var(--black);
}

/* ── Heading ── */
.eyebrow {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          #C8C8C4;
  margin-bottom:  14px;
}

.heading {
  font-size:      40px;
  font-weight:    600;
  letter-spacing: -1.8px;
  line-height:    1.0;
  color:          var(--black);
  margin-bottom:  40px;
}

/* ── Alerts ── */
.alert {
  border-radius: 12px;
  padding:       12px 16px;
  font-size:     13px;
  font-weight:   400;
  margin-bottom: 16px;
  display:       none;
}

.alert-error   { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }

/* ── Fields ── */
.field { margin-bottom: 12px; }

.field label {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          #C0C0BC;
  margin-bottom:  8px;
}

input {
  width:         100%;
  background:    var(--input-bg);
  border:        2px solid transparent;
  border-radius: 16px;
  padding:       17px 20px;
  font-size:     16px;
  font-weight:   300;
  color:         var(--black);
  font-family:   var(--font);
  outline:       none;
  transition:    all 0.18s ease;
  -webkit-appearance: none;
}

input::placeholder { color: #C0C0BC; }
input:focus        { background: var(--white); border-color: var(--black); }
input.error        { background: #FEF2F2; border-color: #FECACA; }

/* ── Password strength ── */
.password-hint {
  font-size:   12px;
  font-weight: 400;
  color:       #C8C8C4;
  margin-top:  6px;
  margin-left: 4px;
}

.strength-bar {
  height:        3px;
  border-radius: 2px;
  background:    var(--border);
  margin-top:    8px;
  overflow:      hidden;
}

.strength-fill {
  height:        100%;
  border-radius: 2px;
  width:         0%;
  transition:    width 0.3s ease, background 0.3s ease;
}

/* ── Button ── */
.btn {
  width:         100%;
  background:    var(--black);
  color:         var(--white);
  border:        none;
  border-radius: 16px;
  padding:       19px;
  font-size:     16px;
  font-weight:   600;
  font-family:   var(--font);
  cursor:        pointer;
  letter-spacing: -0.3px;
  transition:    opacity 0.15s, transform 0.1s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap: 10px;
}

.btn:hover    { opacity: 0.85; }
.btn:active   { transform: scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cta-row { margin-top: 8px; }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width:        18px;
  height:       18px;
  border:       2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation:    spin 0.7s linear infinite;
}

/* ── Forgot ── */
.forgot-row {
  display:         flex;
  justify-content: flex-end;
  margin:          8px 0 24px;
}

.forgot {
  font-size:   13px;
  font-weight: 400;
  color:       #BEBEB8;
  text-decoration: none;
  transition:  color 0.15s;
}

.forgot:hover { color: var(--black); }

/* ── Legal ── */
.legal {
  font-size:   12px;
  font-weight: 300;
  color:       #C8C8C4;
  margin-top:  16px;
  text-align:  center;
  line-height: 1.6;
}

.legal a {
  color:           #A0A09A;
  text-decoration: none;
  border-bottom:   1px solid #E0E0DC;
}

/* ── Divider ── */
.divider {
  display:     flex;
  align-items: center;
  gap:         16px;
  margin:      24px 0;
}

.divider-line { flex: 1; height: 1px; background: var(--border); }
.divider-text { font-size: 12px; color: #CCCCC8; }

/* ── Switch link ── */
.switch-link {
  text-align:  center;
  font-size:   14px;
  font-weight: 400;
  color:       var(--muted);
}

.switch-link a { color: var(--black); text-decoration: none; font-weight: 600; }

/* ── Trust ── */
.trust {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  margin-top:      44px;
  padding-top:     28px;
  border-top:      1px solid var(--border);
}

.trust-item {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      11px;
  font-weight:    500;
  color:          #C8C8C4;
  letter-spacing: 0.2px;
}

.trust-icon { width: 14px; height: 14px; opacity: 0.5; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo        { animation: fadeUp 0.4s ease both 0.00s; }
.eyebrow     { animation: fadeUp 0.4s ease both 0.05s; }
.heading     { animation: fadeUp 0.4s ease both 0.10s; }
.field       { animation: fadeUp 0.4s ease both 0.15s; }
.forgot-row  { animation: fadeUp 0.4s ease both 0.18s; }
.cta-row     { animation: fadeUp 0.4s ease both 0.20s; }
.legal       { animation: fadeUp 0.4s ease both 0.22s; }
.divider     { animation: fadeUp 0.4s ease both 0.24s; }
.switch-link { animation: fadeUp 0.4s ease both 0.26s; }
.trust       { animation: fadeUp 0.4s ease both 0.28s; }

/* ── Responsive ── */
@media (max-width: 480px) {
  body    { padding: 36px 20px 48px; }
  .heading { font-size: 32px; }
  .trust   { flex-wrap: wrap; gap: 12px; }
}