.auth-nav {
  height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(calc((100vw - 1240px)/2),24px)
}

.auth-nav>div {
  display:flex; gap:15px; align-items:center; color:#7b8d98; font-size:12px
}

.auth-layout {
  display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 72px)
}

.auth-left {
  padding:8vh 7vw; display:flex; align-items:center; justify-content:center
}

.auth-form {
  max-width:465px; width:100%
}

.auth-form h1 {
  font-size:46px; margin:16px 0 10px
}

.auth-form>p:not([class]) {
  font-size:16px; color:#7a8b9b; margin-bottom:32px
}

.field {
  margin-bottom:20px
}

.field label {
  display:block; font-size:13px; font-weight:800; margin-bottom:9px
}

.input-wrap {
  position:relative
}

.input {
  height:51px; border:1px solid #d6e0e4; background:#fff; border-radius:10px; padding:13px 16px; width:100%; color:var(--ink)
}

.input::placeholder {
  color:#a0acb6
}

.pw-eye {
  position:absolute; right:8px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:#758796
}

.pw-eye:hover {
  background:#f1f6f7; color:var(--teal)
}

.pw-eye.revealed {
  color:var(--teal)
}

.pw-eye .cs-icon {
  width:17px; height:17px
}

.password-strength {
  display:flex; gap:5px; margin-top:8px
}

/* Nothing typed yet: an empty 3-segment bar reads as a stray underline. */
.password-strength[data-score="0"] {
  display:none
}

.password-strength span {
  flex:1; height:4px; border-radius:20px; background:#e3ebee; transition:background var(--speed) var(--ease)
}

.password-strength[data-score="1"] span:nth-child(-n+1) {
  background:#d98b3a
}

.password-strength[data-score="2"] span:nth-child(-n+2) {
  background:#3fa88f
}

.password-strength[data-score="3"] span {
  background:var(--teal)
}

.formhint {
  font-size:11px; color:#8b9ca7; margin-top:5px
}

.checkbox-row {
  display:flex; align-items:center; gap:10px; color:#788d9d; font-size:12px; margin:27px 0 22px
}

.checkbox-row a {
  color:var(--teal); text-decoration:underline
}

.checkbox-row.compact {
  margin:0; font-size:12px
}

.checkbox-row input {
  accent-color:var(--teal); width:16px; height:16px; flex:none
}

.auth-form-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:18px 0 2px
}

.auth-submit {
  margin-top:22px
}

.auth-form>p.auth-note {
  margin:14px 0 0; font-size:12px; text-align:center
}

.auth-form>p.auth-switch {
  margin:14px 0 0; font-size:12px; text-align:center; color:var(--muted)
}

.auth-form>p.form-status {
  margin:14px 0 0; font-size:12.5px
}

.auth-state {
  display:flex; gap:13px; align-items:flex-start; margin:18px 0 4px; padding:14px 16px; border:1px solid #d8ece7; border-radius:var(--radius-md); background:#f2faf8; color:#3d6a61; font-size:12.5px; line-height:1.6
}

.auth-state strong {
  display:block; margin-bottom:3px; font-size:13px
}

.auth-state-icon {
  width:30px; height:30px; border-radius:50%; background:#dcf2eb; color:var(--teal); display:grid; place-items:center; flex:none
}

.auth-state-icon .cs-icon {
  width:16px; height:16px
}

.auth-state.warning {
  border-color:#f0e0c2; background:#fffbf3; color:#86672f
}

.auth-state.warning .auth-state-icon {
  background:#f8ecd4; color:#a9741a
}

.auth-form-static .btn {
  margin-top:18px
}

.auth-form-static h1 {
  font-size:40px
}

.auth-panel {
  display:flex; flex-direction:column; background:#152d3f; color:white; position:relative; overflow:hidden
}

/* Photo plate sits exactly where the artboard puts it. The artboard's own
   search card is baked into the plate and sliced by the photo's edge, so the
   card is drawn as real markup over that area instead — pinned to the same
   rectangle and allowed to hang slightly past the photo, which keeps it whole
   at every width. */
.auth-photo {
  position:relative; flex:none; aspect-ratio:863/435; overflow:visible; background:#22404f
}

.auth-photo>img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 0; filter:saturate(.88)
}

.auth-panel .eyebrow {
  color:#8fd8cc
}

.auth-panel .eyebrow:before {
  background:#8fd8cc
}

.auth-panel-content {
  position:relative; flex:1; display:flex; flex-direction:column; justify-content:center;
  margin-top:0; padding:36px 8% 38px
}

.auth-panel-content h2 {
  font-size:clamp(28px,3vw,40px); color:white; max-width:450px; margin:14px 0
}

.auth-panel-content>p {
  color:#b1c5cc; max-width:440px
}

.auth-benefits {
  display:flex; gap:20px; border-top:1px solid #405868; padding-top:22px; margin-top:30px; color:#d1dde1; font-size:12px
}

.auth-example {
  position:absolute; left:38%; right:4%; top:61.5%; bottom:-9%;
  display:flex; flex-direction:column; justify-content:center;
  background:#fff; border:1px solid rgba(15,45,58,.06); border-radius:13px;
  padding:12px 15px 14px; box-shadow:0 20px 46px rgba(6,26,33,.34); color:var(--ink)
}

.auth-example-head {
  display:flex; align-items:center; gap:9px;
  padding-bottom:9px; margin-bottom:2px; border-bottom:1px solid var(--line);
  font-size:12px; color:#8095a2
}

.auth-example-head kbd {
  margin-left:auto; border:1px solid #e4eaed; border-radius:5px; padding:2px 5px;
  font:inherit; font-size:9.5px; color:#93a5b1; background:#f7fafb
}

.stamp-icon {
  width:23px; height:23px; border-radius:6px; flex:none;
  display:grid; place-items:center; background:#eef4f6; color:#7b909d
}

.stamp-icon .cs-icon {
  width:13px; height:13px
}

.auth-example-row {
  display:grid; grid-template-columns:38px 70px 1fr; gap:8px; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--line);
  font-size:11px; line-height:1.55; color:#5f7684
}

.auth-example-row:last-child {
  border-bottom:0; padding-bottom:0
}

.auth-example-row .stamp {
  color:#8ea1ae; font-size:10px; font-variant-numeric:tabular-nums
}

.auth-example-row .speaker-a,.auth-example-row .speaker-b {
  justify-self:start; border-radius:5px; padding:1px 6px;
  font-size:10px; font-weight:700; line-height:1.5; white-space:nowrap
}

.auth-example-row .speaker-a {
  color:#2f6fd0; background:#eef4fd
}

.auth-example-row .speaker-b {
  color:#177a68; background:#e9f7f3
}

/* Narrow panel: the pinned card would have to squeeze three-line rows, so
   frame the plate above the baked card and drop the overlay entirely. 1280 is
   the width where the card still has room above its own bottom edge. */
@media(max-width:1280px) {
  .auth-photo {
    aspect-ratio:863/254; overflow:hidden
  }
  .auth-photo>img {
    object-position:50% 8%
  }
  .auth-example {
    display:none
  }
}

@media(max-width:1150px) {
  .auth-panel-content h2 {
    font-size:35px
  }
}

@media(max-width:780px) {
  .auth-layout {
    grid-template-columns:1fr
  }
  .auth-nav {
    padding:0 18px
  }
  .auth-left {
    padding:58px 20px
  }
  .auth-panel {
    min-height:0
  }
  .auth-panel-content {
    padding:26px 22px 32px
  }
  .auth-benefits {
    flex-wrap:wrap
  }
}