@import url('https://fonts.googleapis.com/css2?family=Satoshi:wght@400;500;700;800;900&display=swap');

:root {
  --ink: #0e1c16;
  --green: #117a55;
  --green-dark: #0a573d;
  --green-soft: #dff3df;
  --muted: #69766f;
  --line: #e2e8e3;
  --surface: #f5f7f5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.reset-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 42vw) minmax(420px, 1fr);
}
.reset-shell.is-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 7vw, 72px) 22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(223,243,223,.72), transparent 22%),
    linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
}

.reset-story {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background:
    radial-gradient(80% 60% at 20% 54%, rgba(223,243,223,.82), transparent 56%),
    linear-gradient(180deg, #f8fbf9 0%, #eef7f1 100%);
  border-right: 1px solid var(--line);
  padding: clamp(28px, 4vw, 54px);
  display: flex;
  flex-direction: column;
}
.reset-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.reset-brand-mascot { height: 42px; width: 42px; border-radius: 12px; object-fit: contain; display: block; }
.reset-brand-logo { height: 34px; width: auto; display: block; }
.reset-mobile-brand { display: none; margin-bottom: 44px; }
.reset-mobile-brand .reset-brand-mascot { height: 36px; width: 36px; border-radius: 10px; }
.reset-mobile-brand .reset-brand-logo { height: 29px; }

.reset-story-copy {
  width: min(100%, 360px);
  margin-top: clamp(70px, 13vh, 130px);
}
.reset-story-copy h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 900;
  margin-bottom: 16px;
}
.reset-story-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 320px;
}

.reset-art {
  position: relative;
  flex: 1;
  min-height: 320px;
}
.reset-art-card {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 50px rgba(14,28,22,.1);
  display: grid;
  place-items: center;
}
.reset-art-card svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reset-art-card.mail { left: 0; top: 54px; }
.reset-art-card.lock { left: 148px; top: 158px; width: 76px; height: 76px; }
.reset-art-card.code { left: 48px; top: 288px; width: 104px; height: 62px; font-size: 26px; font-weight: 900; letter-spacing: 6px; color: var(--green); }
.reset-art-path {
  position: absolute;
  left: 67px;
  top: 111px;
  width: 146px;
  height: 210px;
  border: 2px dashed rgba(17,122,85,.26);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(19deg);
}
.spark {
  position: absolute;
  width: 8px;
  height: 8px;
  color: rgba(17,122,85,.42);
}
.spark::before,
.spark::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
}
.spark::before { width: 8px; height: 2px; left: 0; top: 3px; }
.spark::after { width: 2px; height: 8px; left: 3px; top: 0; }
.spark.s1 { left: 150px; top: 32px; }
.spark.s2 { left: 32px; top: 190px; }
.spark.s3 { left: 206px; top: 270px; }

.reset-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(34px, 6vw, 72px) clamp(24px, 5vw, 62px);
}
.reset-card {
  width: min(100%, 430px);
}
.reset-card.is-center {
  text-align: center;
  max-width: 500px;
}
.reset-card h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 900;
  margin-bottom: 12px;
}
.reset-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 30px;
}
.reset-sub strong { color: var(--ink); }

.reset-field { margin-bottom: 22px; text-align: left; }
.reset-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.reset-input-wrap { position: relative; }
.reset-input-wrap svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #98a6a0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.reset-input-wrap input {
  width: 100%;
  height: 52px;
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 0 44px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.reset-input-wrap input::placeholder { color: #aab4ad; }
.reset-input-wrap input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(17,122,85,.12);
}

.reset-eye {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #98a6a0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.reset-eye svg { position: static; transform: none; width: 19px; height: 19px; stroke: currentColor; }

.reset-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}

.reset-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  background: linear-gradient(135deg, var(--green), #0d8f61);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 16px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(17,122,85,.25);
  transition: transform .18s, box-shadow .18s;
}
.reset-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(17,122,85,.33); }
.reset-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.reset-btn.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.reset-btn.secondary:hover { box-shadow: 0 10px 24px rgba(14,28,22,.08); }

.reset-back {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
}
.reset-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.success-orb {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  margin: 0 auto 28px;
  background: rgba(223,243,223,.8);
  display: grid;
  place-items: center;
}
.success-orb-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #0d8f61);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(17,122,85,.25);
}
.success-orb svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.email-orb {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  margin: 0 auto 28px;
  background: rgba(223,243,223,.8);
  display: grid;
  place-items: center;
  color: var(--green);
}
.email-orb svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.email-orb .check-badge {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  transform: translate(42px, 28px);
  border: 4px solid #fff;
}
.email-orb .check-badge svg { width: 20px; height: 20px; stroke: currentColor; }

.pw-rules-reset {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.pw-rules-reset li { display: flex; align-items: center; gap: 9px; }
.pw-rules-reset svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 880px) {
  .reset-shell { grid-template-columns: 1fr; }
  .reset-story { display: none; }
  .reset-panel {
    min-height: 100vh;
    align-items: stretch;
    justify-content: flex-start;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px 40px;
  }
  .reset-shell.is-centered {
    min-height: 100vh;
    align-items: stretch;
    justify-content: flex-start;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px 40px;
  }
  .reset-mobile-brand {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}