@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root{
  --auth-bg:#f3f6fb;
  --auth-surface:#ffffff;
  --auth-surface-strong:rgba(255,255,255,.88);
  --auth-ink:#09121f;
  --auth-text:#223247;
  --auth-muted:#63748a;
  --auth-line:rgba(9,18,31,.10);
  --auth-line-strong:rgba(9,18,31,.16);
  --auth-blue:#1463ff;
  --auth-blue-deep:#0b3ea9;
  --auth-cyan:#0aa7a0;
  --auth-danger-bg:#fff3f4;
  --auth-danger-border:#efb4ba;
  --auth-danger-text:#a71d2a;
  --auth-shadow:0 30px 90px rgba(9,18,31,.14);
  --auth-hero-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body.auth-page{
  margin:0;
  color:var(--auth-text);
  font-family:"Manrope","Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(70rem 32rem at -5% 0%, rgba(20,99,255,.16), transparent 58%),
    radial-gradient(54rem 30rem at 105% 0%, rgba(10,167,160,.14), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f0f4f9 100%);
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-shell{
  width:min(1120px, 100%);
  min-height:700px;
  display:grid;
  grid-template-columns:minmax(320px, 1.05fr) minmax(360px, .95fr);
  border-radius:32px;
  overflow:hidden;
  background:var(--auth-surface-strong);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--auth-shadow);
  backdrop-filter:blur(18px);
}

.auth-shell.auth-shell-narrow{
  width:min(980px, 100%);
  min-height:640px;
  grid-template-columns:minmax(280px, .92fr) minmax(360px, 1fr);
}

.auth-shell.auth-shell-signin .auth-hero{
  min-height:700px;
}

.auth-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding:48px 44px;
  color:#f4f8ff;
  background:
    radial-gradient(26rem 26rem at 88% 16%, rgba(10,167,160,.26), transparent 62%),
    radial-gradient(24rem 24rem at 0% 100%, rgba(20,99,255,.28), transparent 58%),
    linear-gradient(155deg, #08111d 0%, #10233f 56%, #123153 100%);
  box-shadow:var(--auth-hero-shadow);
}

.auth-hero::before{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.auth-hero-compact{
  justify-content:center;
}

.auth-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#d9ebff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.auth-hero-copy{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:32rem;
}

.auth-hero h1,
.auth-panel h2{
  margin:0;
  font-family:"Space Grotesk","Manrope","Segoe UI","Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.035em;
}

.auth-hero h1{
  font-size:clamp(2.6rem, 4vw, 4.4rem);
  line-height:.96;
}

.auth-hero p{
  margin:0;
  color:rgba(232,241,255,.82);
  font-size:1rem;
  line-height:1.75;
}

.auth-hero-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.auth-hero-card{
  padding:18px 18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.auth-hero-card strong{
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.auth-hero-card span{
  color:rgba(232,241,255,.76);
  font-size:13px;
  line-height:1.6;
}

.auth-panel{
  background:rgba(255,255,255,.94);
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
}

.auth-panel-head{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.auth-kicker{
  color:var(--auth-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.auth-panel h2{
  font-size:clamp(2rem, 3vw, 2.9rem);
  color:var(--auth-ink);
  line-height:1;
}

.auth-panel p,
.auth-footnote,
.auth-setup-copy{
  margin:0;
  color:var(--auth-muted);
  font-size:14px;
  line-height:1.7;
}

.auth-security-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.auth-security-strip span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(20,99,255,.07);
  border:1px solid rgba(20,99,255,.10);
  color:var(--auth-ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.auth-field span{
  color:var(--auth-ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.auth-field input{
  height:56px;
  border-radius:18px;
  border:1px solid var(--auth-line);
  padding:0 16px;
  background:#fff;
  color:var(--auth-ink);
  font-size:16px;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

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

.auth-field input:focus{
  outline:none;
  border-color:rgba(20,99,255,.46);
  box-shadow:0 0 0 4px rgba(20,99,255,.10);
  transform:translateY(-1px);
}

.auth-btn{
  appearance:none;
  border:none;
  border-radius:18px;
  min-height:56px;
  padding:0 20px;
  background:linear-gradient(135deg, var(--auth-blue) 0%, var(--auth-cyan) 100%);
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 18px 36px rgba(20,99,255,.22);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.auth-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 22px 44px rgba(20,99,255,.26);
}

.auth-btn:disabled{
  cursor:not-allowed;
  opacity:.78;
  filter:saturate(.8);
}

.auth-alert{
  border-radius:16px;
  border:1px solid var(--auth-danger-border);
  background:var(--auth-danger-bg);
  color:var(--auth-danger-text);
  padding:12px 14px;
  font-size:14px;
  line-height:1.55;
}

.auth-setup{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(20,99,255,.10);
  background:linear-gradient(180deg, rgba(20,99,255,.04), rgba(10,167,160,.04));
}

.auth-qr-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 0;
}

.auth-qr-wrap img{
  width:204px;
  height:204px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(9,18,31,.08);
  padding:10px;
  object-fit:contain;
}

.auth-secret-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.auth-secret-label{
  color:var(--auth-ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.auth-secret{
  display:block;
  border-radius:16px;
  border:1px dashed var(--auth-line-strong);
  background:#fff;
  padding:12px 14px;
  color:var(--auth-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  word-break:break-all;
}

.auth-link{
  color:var(--auth-blue);
  text-decoration:none;
  font-weight:700;
}

.auth-link:hover{
  color:var(--auth-blue-deep);
  text-decoration:underline;
}

@media (max-width: 960px){
  body.auth-page{
    padding:18px;
  }

  .auth-shell,
  .auth-shell.auth-shell-narrow{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .auth-hero,
  .auth-panel{
    padding:30px 24px;
  }

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

  .auth-qr-wrap img{
    width:184px;
    height:184px;
  }
}