:root{
  --auth-bg:#eef5ef;
  --auth-bg-soft:#f8fbf8;
  --auth-panel:rgba(255,255,255,0.82);
  --auth-panel-strong:#ffffff;
  --auth-panel-muted:rgba(255,255,255,0.58);
  --auth-ink:#10211a;
  --auth-muted:#5f6f68;
  --auth-border:rgba(16,33,26,0.10);
  --auth-border-strong:rgba(16,33,26,0.16);
  --auth-accent:#14866c;
  --auth-accent-cold:#2278d4;
  --auth-accent-soft:rgba(20,134,108,0.14);
  --auth-highlight:#d8a34d;
  --auth-highlight-soft:rgba(216,163,77,0.16);
  --auth-ok:#139d6c;
  --auth-ok-soft:rgba(19,157,108,0.12);
  --auth-danger:#d85656;
  --auth-danger-soft:rgba(216,86,86,0.12);
  --auth-shadow:0 30px 70px rgba(16,51,38,0.14);
  --auth-shadow-soft:0 16px 34px rgba(16,51,38,0.08);
  --auth-radius-xl:34px;
  --auth-radius-lg:24px;
  --auth-radius-md:18px;
  --auth-radius-sm:14px;
  --auth-ring:0 0 0 4px rgba(20,134,108,0.18);
  --auth-body:"Avenir Next","Segoe UI Variable Text","Trebuchet MS",sans-serif;
  --auth-heading:"Avenir Next Condensed","Franklin Gothic Medium","Arial Narrow",sans-serif;
  --auth-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{
  box-sizing:border-box;
}

html,body{
  min-height:100%;
}

body.auth-screen{
  margin:0;
  font-family:var(--auth-body);
  color:var(--auth-ink);
  background:
    radial-gradient(circle at 12% 14%, rgba(20,134,108,0.22), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(34,120,212,0.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(20,134,108,0.10), transparent 30%),
    linear-gradient(160deg, var(--auth-bg), var(--auth-bg-soft) 52%, #e7f0ea 100%);
  position:relative;
  overflow-x:hidden;
}

body.auth-screen::before,
body.auth-screen::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:0;
  border-radius:999px;
  filter:blur(10px);
}

body.auth-screen::before{
  width:360px;
  height:360px;
  top:-120px;
  right:-90px;
  background:radial-gradient(circle, rgba(34,120,212,0.20), transparent 70%);
}

body.auth-screen::after{
  width:460px;
  height:460px;
  left:-180px;
  bottom:-170px;
  background:radial-gradient(circle, rgba(20,134,108,0.18), transparent 72%);
}

@keyframes authRise{
  from{
    opacity:0;
    transform:translateY(18px) scale(0.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.auth-page{
  position:relative;
  z-index:1;
  width:min(1240px, calc(100% - 28px));
  margin:0 auto;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:28px 0;
}

.auth-shell{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(320px, 0.78fr);
  gap:22px;
}

.auth-card,
.auth-side{
  position:relative;
  overflow:hidden;
  border:1px solid var(--auth-border);
  border-radius:var(--auth-radius-xl);
  background:var(--auth-panel);
  box-shadow:var(--auth-shadow);
  backdrop-filter:blur(18px) saturate(170%);
  animation:authRise 0.56s ease both;
}

.auth-card{
  padding:32px;
  animation-delay:0.03s;
}

.auth-card::before,
.auth-side::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg, var(--auth-accent), var(--auth-accent-cold), rgba(216,163,77,0.72));
}

.auth-card::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(20,134,108,0.11), transparent 72%);
  pointer-events:none;
}

.auth-side{
  display:grid;
  gap:22px;
  align-content:start;
  padding:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.52)),
    radial-gradient(circle at top right, rgba(34,120,212,0.12), transparent 28%);
  animation-delay:0.11s;
}

.auth-side::after{
  content:"";
  position:absolute;
  inset:auto -50px -70px auto;
  width:200px;
  height:200px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(216,163,77,0.13), transparent 72%);
  pointer-events:none;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.auth-mark{
  width:76px;
  height:76px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.38);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.86), transparent 34%),
    linear-gradient(145deg, var(--auth-accent), var(--auth-accent-cold));
  box-shadow:0 20px 42px rgba(20,134,108,0.24);
  position:relative;
  flex:0 0 auto;
}

.auth-mark::after{
  content:"";
  position:absolute;
  inset:15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.42);
}

.auth-brand-copy{
  min-width:0;
}

.auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--auth-panel-muted);
  border:1px solid var(--auth-border);
  color:var(--auth-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.auth-kicker strong{
  color:var(--auth-ink);
}

.auth-title{
  margin:18px 0 0;
  font-family:var(--auth-heading);
  font-size:clamp(2.3rem, 5vw, 4rem);
  line-height:0.94;
  letter-spacing:0.02em;
  max-width:10ch;
}

.auth-lead{
  margin:16px 0 0;
  max-width:52ch;
  color:var(--auth-muted);
  font-size:16px;
  line-height:1.72;
}

.auth-panel-grid{
  display:grid;
  gap:22px;
}

.auth-status{
  display:grid;
  gap:10px;
  margin-top:24px;
}

.auth-alert{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--auth-border);
  font-size:14px;
  line-height:1.55;
  box-shadow:var(--auth-shadow-soft);
}

.auth-alert.success{
  background:var(--auth-ok-soft);
  border-color:rgba(19,157,108,0.22);
}

.auth-alert.error{
  background:var(--auth-danger-soft);
  border-color:rgba(216,86,86,0.22);
}

.auth-form{
  position:relative;
  z-index:1;
  display:grid;
  gap:16px;
  margin-top:24px;
}

.auth-field{
  display:grid;
  gap:8px;
}

.auth-field label{
  font-size:13px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--auth-muted);
}

.auth-input-wrap{
  position:relative;
}

.auth-input{
  width:100%;
  min-height:58px;
  border:1px solid var(--auth-border);
  background:rgba(255,255,255,0.82);
  color:var(--auth-ink);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:var(--auth-shadow-soft);
  font:inherit;
  transition:border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.auth-input::placeholder{
  color:#8b9892;
}

.auth-input:focus{
  outline:none;
  border-color:var(--auth-border-strong);
  box-shadow:var(--auth-ring);
}

.auth-input.is-invalid{
  border-color:rgba(216,86,86,0.34);
  box-shadow:0 0 0 3px rgba(216,86,86,0.10);
}

.auth-invalid{
  color:#b64040;
  font-size:13px;
  line-height:1.5;
}

.auth-password-toggle{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  min-height:36px;
  padding:0 12px;
  border:none;
  border-radius:12px;
  background:rgba(16,33,26,0.06);
  color:var(--auth-muted);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.auth-password-toggle:hover{
  background:rgba(16,33,26,0.10);
}

.auth-password-toggle:focus{
  outline:none;
  box-shadow:var(--auth-ring);
}

.auth-choice{
  display:grid;
  gap:10px;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid var(--auth-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.50));
}

.auth-choice label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  cursor:pointer;
}

.auth-choice input{
  margin-top:2px;
  accent-color:var(--auth-accent);
}

.auth-choice strong{
  display:block;
  font-size:14px;
}

.auth-choice span{
  display:block;
  margin-top:4px;
  color:var(--auth-muted);
  font-size:13px;
  line-height:1.55;
}

.auth-submit,
.auth-button,
.auth-link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  border-radius:18px;
  border:1px solid transparent;
  font:inherit;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.auth-submit{
  color:#ffffff;
  background:linear-gradient(135deg, var(--auth-accent-cold), var(--auth-accent));
  box-shadow:0 18px 34px rgba(20,134,108,0.24);
}

.auth-button,
.auth-link-button{
  color:var(--auth-ink);
  background:rgba(255,255,255,0.72);
  border-color:var(--auth-border);
  box-shadow:var(--auth-shadow-soft);
}

.auth-submit:hover,
.auth-button:hover,
.auth-link-button:hover{
  transform:translateY(-1px);
  text-decoration:none;
}

.auth-submit:focus,
.auth-button:focus,
.auth-link-button:focus{
  outline:none;
  box-shadow:var(--auth-ring);
}

.auth-footnote{
  margin-top:16px;
  color:var(--auth-muted);
  font-size:13px;
  line-height:1.6;
}

.auth-side-title{
  margin:0;
  font-family:var(--auth-heading);
  font-size:2rem;
  line-height:0.96;
  letter-spacing:0.01em;
}

.auth-side-copy{
  margin:10px 0 0;
  color:var(--auth-muted);
  font-size:15px;
  line-height:1.7;
}

.auth-feature-grid{
  display:grid;
  gap:12px;
}

.auth-feature{
  display:grid;
  grid-template-columns:48px minmax(0, 1fr);
  gap:12px;
  align-items:start;
  padding:16px;
  border-radius:22px;
  border:1px solid var(--auth-border);
  background:var(--auth-panel-muted);
}

.auth-feature-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(34,120,212,0.14), rgba(20,134,108,0.18));
  color:var(--auth-ink);
  font-family:var(--auth-heading);
  font-size:1.2rem;
  font-weight:800;
}

.auth-feature strong{
  display:block;
  font-size:15px;
  line-height:1.35;
}

.auth-feature span{
  display:block;
  margin-top:4px;
  color:var(--auth-muted);
  font-size:13px;
  line-height:1.6;
}

.auth-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.auth-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--auth-border);
  background:var(--auth-panel-muted);
  font-size:12px;
  font-weight:800;
}

.auth-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--auth-accent);
}

.auth-note{
  padding:16px 18px;
  border-radius:22px;
  border:1px dashed var(--auth-border-strong);
  background:linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.46));
  color:var(--auth-muted);
  font-size:14px;
  line-height:1.65;
}

.auth-verify-shell{
  grid-template-columns:minmax(0, 0.94fr) minmax(280px, 0.72fr);
}

.auth-steps{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
}

.auth-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid var(--auth-border);
  background:rgba(255,255,255,0.68);
  font-size:13px;
  font-weight:700;
}

.auth-step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--auth-panel-muted);
}

.auth-step.is-active{
  border-color:rgba(20,134,108,0.24);
  background:var(--auth-accent-soft);
}

.auth-code-wrap{
  display:grid;
  gap:10px;
}

.auth-code-input{
  min-height:82px;
  border-radius:24px;
  border:1px solid var(--auth-border);
  background:rgba(255,255,255,0.86);
  color:var(--auth-ink);
  box-shadow:var(--auth-shadow-soft);
  font-family:var(--auth-mono);
  font-size:clamp(1.8rem, 6vw, 2.6rem);
  font-weight:800;
  text-align:center;
  letter-spacing:0.34em;
  padding:0 0 0 0.34em;
}

.auth-code-input:focus{
  outline:none;
  box-shadow:var(--auth-ring);
}

.auth-code-hint{
  color:var(--auth-muted);
  font-size:14px;
  line-height:1.6;
}

.auth-actions{
  display:grid;
  gap:12px;
  margin-top:8px;
}

.auth-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.auth-email-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:44px;
  margin-top:16px;
  padding:10px 14px;
  border-radius:16px;
  background:var(--auth-highlight-soft);
  border:1px solid rgba(216,163,77,0.26);
  font-weight:800;
  word-break:break-word;
}

.auth-code-meta{
  display:grid;
  gap:12px;
}

.auth-meta-card{
  padding:16px;
  border-radius:20px;
  border:1px solid var(--auth-border);
  background:var(--auth-panel-muted);
}

.auth-meta-card strong{
  display:block;
  font-size:14px;
}

.auth-meta-card span{
  display:block;
  margin-top:4px;
  color:var(--auth-muted);
  font-size:13px;
  line-height:1.55;
}

@media (max-width: 980px){
  .auth-shell,
  .auth-verify-shell{
    grid-template-columns:1fr;
  }

  .auth-page{
    padding:20px 0;
  }

  .auth-card,
  .auth-side{
    padding:24px;
  }

  .auth-title{
    max-width:none;
  }
}

@media (max-width: 640px){
  .auth-page{
    width:min(100%, calc(100% - 20px));
  }

  .auth-card,
  .auth-side{
    border-radius:26px;
    padding:20px;
  }

  .auth-brand{
    align-items:flex-start;
  }

  .auth-mark{
    width:64px;
    height:64px;
    border-radius:20px;
  }

  .auth-mark::after{
    inset:12px;
    border-radius:14px;
  }

  .auth-title{
    font-size:2.3rem;
  }

  .auth-actions-grid{
    grid-template-columns:1fr;
  }

  .auth-step{
    width:100%;
    justify-content:flex-start;
  }

  .auth-steps{
    flex-direction:column;
    align-items:stretch;
  }

  .auth-code-input{
    font-size:1.7rem;
    letter-spacing:0.24em;
    padding-left:0.24em;
  }
}

@media (prefers-reduced-motion: reduce){
  .auth-card,
  .auth-side{
    animation:none;
  }

  .auth-submit,
  .auth-button,
  .auth-link-button,
  .auth-input{
    transition:none;
  }
}