body.auth-page{
  --auth-bg:#102030;
  --auth-panel:#1a2b3c;
  --auth-panel-soft:rgba(25, 40, 57, 0.56);
  --auth-line:rgba(255,255,255,.12);
  --auth-line-strong:rgba(196,154,82,.24);
  --auth-accent:#c49a52;
  --auth-accent-strong:#dfb878;
  --auth-accent-shadow:rgba(196,154,82,.22);
  --auth-cold:#9fb5d7;
  --auth-text:#f4f7fb;
  --auth-muted:#c7d1df;
  --auth-title-font:"Segoe UI Variable","Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(196,154,82,.13), transparent 60%),
    radial-gradient(980px 620px at 88% 18%, rgba(135,170,221,.16), transparent 58%),
    linear-gradient(180deg, #102030 0%, #132434 52%, #172938 100%);
  color:var(--auth-text);
}

body.auth-page *,
body.auth-page *::before,
body.auth-page *::after{
  box-sizing:border-box;
}

body.auth-page::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.08));
  opacity:.22;
  pointer-events:none;
  z-index:-1;
}

body.auth-page #bg-layer{
  filter:blur(1px) saturate(.86) brightness(.76);
  transform:scale(1.04);
}

body.auth-page #bg-overlay{
  background:
    linear-gradient(115deg, rgba(11,19,29,.52) 0%, rgba(13,22,33,.28) 38%, rgba(14,24,36,.56) 100%);
}

body.auth-page .overlay{
  background:
    radial-gradient(800px 480px at 14% 14%, rgba(196,154,82,.12), transparent 64%),
    radial-gradient(900px 540px at 84% 16%, rgba(108,138,184,.20), transparent 60%),
    radial-gradient(760px 420px at 50% 100%, rgba(154,210,193,.08), transparent 60%),
    rgba(8,13,19,.12);
  mix-blend-mode:screen;
}

body.auth-page .topbar{
  padding:18px 28px;
  background:linear-gradient(180deg, rgba(21,32,45,.58), rgba(21,32,45,.34));
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 38px rgba(9,16,25,.16);
}

.auth-brand{
  gap:14px;
}

.auth-brand__copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.auth-brand__name{
  font-family:var(--auth-title-font);
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}

.auth-brand__meta{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

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

.auth-topnav__label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.54);
}

.auth-topnav__cta{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

body.auth-page .center-wrap.auth-wrap{
  min-height:100vh;
  padding:112px 28px 56px;
}

.auth-shell{
  position:relative;
  max-width:1280px;
  width:100%;
  padding:36px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(23,35,48,.74), rgba(19,31,44,.64)),
    radial-gradient(circle at 0 0, rgba(196,154,82,.10), transparent 48%),
    radial-gradient(circle at 100% 0, rgba(129,168,228,.10), transparent 34%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  box-shadow:
    0 28px 70px rgba(8,14,22,.18),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-shell::before,
.auth-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.auth-shell::before{
  inset:0;
  background:
    linear-gradient(130deg, rgba(255,255,255,.08), transparent 32%, transparent 68%, rgba(196,154,82,.08) 100%);
  opacity:.78;
}

.auth-shell::after{
  width:320px;
  height:320px;
  right:-110px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(196,154,82,.12) 0%, rgba(196,154,82,0) 68%);
}

.auth-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.16fr) minmax(380px, .94fr);
  gap:34px;
  align-items:stretch;
}

.auth-story{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:22px;
  min-height:100%;
  padding:6px 8px 6px 2px;
}

.auth-story__badge-row{
  margin-bottom:18px;
}

.auth-story__badge{
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-kicker{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--auth-accent-strong);
}

.auth-title{
  margin:0;
  max-width:12ch;
  font-family:var(--auth-title-font);
  font-size:clamp(2.8rem, 4.2vw, 4.8rem);
  font-weight:750;
  line-height:.98;
  letter-spacing:-.04em;
  color:var(--auth-text);
}

.auth-lines{
  display:grid;
  gap:14px;
  margin-top:8px;
}

.auth-line{
  display:grid;
  gap:4px;
  padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.auth-line__label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
}

.auth-line strong{
  max-width:44ch;
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  color:rgba(242,246,251,.92);
}

.auth-protocol{
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}

.auth-protocol__title{
  margin-bottom:14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

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

.auth-protocol__item{
  min-height:100%;
  padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:14px;
  line-height:1.6;
  color:rgba(242,246,251,.72);
}

.auth-workspace{
  display:block;
  align-self:start;
}

.auth-panel{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(26,39,55,.76), rgba(21,33,48,.66)),
    radial-gradient(circle at 100% 0, rgba(196,154,82,.10), transparent 45%),
    radial-gradient(circle at 0 100%, rgba(136,173,224,.08), transparent 40%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
}

.auth-panel{
  padding:26px;
  box-shadow:
    0 18px 42px rgba(9,16,25,.16),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(196,154,82,.28), rgba(255,255,255,.04));
}

.auth-panel__head{
  margin-bottom:22px;
}

.auth-panel__head h2,
.auth-register__intro h2{
  margin:0;
  font-family:var(--auth-title-font);
  font-size:clamp(1.6rem, 2vw, 2.2rem);
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--auth-text);
}

.auth-panel__head p:last-child,
.auth-register__lead{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.65;
  color:rgba(242,246,251,.76);
}

.auth-panel__eyebrow{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--auth-accent-strong);
}

.auth-form{
  display:grid;
  gap:14px;
}

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

.auth-field > span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

body.auth-page .auth-field input{
  min-height:58px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(16,26,37,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.02);
}

body.auth-page .auth-field input::placeholder{
  color:rgba(170,184,204,.72);
}

body.auth-page .auth-field input:focus{
  border-color:rgba(196,154,82,.42);
  box-shadow:
    0 0 0 4px rgba(196,154,82,.10),
    0 14px 26px rgba(11,18,28,.10),
    inset 0 1px 0 rgba(255,255,255,.07);
  background:rgba(22,34,48,.54);
}

.auth-form__actions{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  margin-top:6px;
}

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

body.auth-page .btn.auth-submit{
  min-height:56px;
  border-radius:18px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  color:#12171d;
  background:linear-gradient(135deg, #ddb879 0%, #c49a52 52%, #a97934 100%);
  box-shadow:0 18px 34px rgba(169,121,52,.18);
}

body.auth-page .btn.auth-submit:hover{
  box-shadow:0 22px 38px rgba(169,121,52,.24);
}

body.auth-page .btn.auth-secondary{
  min-height:56px;
  border-radius:18px;
  padding-inline:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.auth-assistance{
  display:grid;
  gap:8px;
  margin-top:10px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}

.auth-assistance__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.54);
}

.auth-assistance p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:rgba(242,246,251,.76);
}

.auth-foot{
  padding:0 0 32px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.50);
}

body.auth-page .modal.auth-modal{
  padding:28px;
  background:rgba(12,18,27,.52);
  backdrop-filter:blur(14px);
}

.auth-register{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1fr);
  gap:28px;
  max-width:1040px;
  width:min(100%, 1040px);
  padding:30px;
  border-radius:30px;
  background:
    linear-gradient(135deg, rgba(23,35,48,.82), rgba(18,30,42,.74)),
    radial-gradient(circle at 0 0, rgba(196,154,82,.12), transparent 48%),
    radial-gradient(circle at 100% 0, rgba(129,168,228,.10), transparent 34%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 72px rgba(8,14,22,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-register__intro{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-width:0;
  padding:8px 4px 6px;
}

.auth-register__badge{
  display:inline-flex;
  align-self:flex-start;
  width:auto;
  max-width:100%;
}

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

.auth-register__point{
  padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:14px;
  line-height:1.6;
  color:rgba(242,246,251,.80);
}

.auth-register__form-block{
  position:relative;
  min-width:0;
  padding:22px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(18,30,42,.20);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.86);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:transform var(--speed), background var(--speed), border-color var(--speed);
}

.auth-modal__close:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
}

.auth-form--register{
  gap:16px;
  padding-top:26px;
}

.auth-register__note{
  margin:0;
  line-height:1.6;
}

body.auth-page #toasts{
  top:20px;
  right:20px;
  gap:12px;
}

body.auth-page .toast{
  min-width:300px;
  border-radius:18px;
  background:rgba(22,33,46,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 36px rgba(8,14,22,.18);
}

@media (min-width:901px){
  body.auth-page{
    overflow:hidden;
  }

  body.auth-page .center-wrap.auth-wrap{
    min-height:100svh;
    align-items:center;
    padding:92px 28px 74px;
  }

  .auth-shell{
    display:flex;
    align-items:center;
    max-height:calc(100svh - 166px);
    padding:26px 28px;
  }

  .auth-grid{
    width:100%;
    gap:28px;
  }

  .auth-story{
    gap:16px;
    padding:2px 4px 2px 0;
  }

  .auth-story__badge-row{
    margin-bottom:10px;
  }

  .auth-kicker{
    margin-bottom:10px;
  }

  .auth-title{
    max-width:11ch;
    font-size:clamp(2.5rem, 3.5vw, 4.1rem);
  }

  .auth-lines{
    gap:10px;
    margin-top:2px;
  }

  .auth-line{
    gap:3px;
    padding-bottom:10px;
  }

  .auth-line strong{
    font-size:15px;
    line-height:1.42;
  }

  .auth-panel{
    padding:22px;
  }

  .auth-panel__head{
    margin-bottom:18px;
  }

  .auth-panel__head h2,
  .auth-register__intro h2{
    font-size:clamp(1.45rem, 1.8vw, 2rem);
  }

  .auth-panel__head p:last-child,
  .auth-register__lead{
    margin-top:10px;
    font-size:14px;
    line-height:1.55;
  }

  .auth-form{
    gap:12px;
  }

  body.auth-page .auth-field input{
    min-height:54px;
    padding:15px 16px;
  }

  .auth-form__actions{
    gap:10px;
    margin-top:2px;
  }

  body.auth-page .btn.auth-submit,
  body.auth-page .btn.auth-secondary{
    min-height:52px;
  }

  .auth-assistance{
    gap:6px;
    margin-top:6px;
    padding-top:12px;
  }

  .auth-assistance p{
    font-size:13px;
    line-height:1.5;
  }

  .auth-foot{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:8;
    padding:0 0 16px;
  }

  body.auth-page .modal.auth-modal{
    padding:24px;
    overflow:hidden;
  }

  .auth-register{
    max-width:1000px;
    max-height:calc(100svh - 48px);
    padding:24px;
    gap:24px;
  }

  .auth-register__intro{
    gap:14px;
    padding:4px 2px 2px;
  }

  .auth-register__points{
    gap:10px;
    margin-top:4px;
  }

  .auth-register__point{
    padding-top:10px;
    font-size:13px;
    line-height:1.45;
  }

  .auth-register__form-block{
    padding:20px;
  }

  .auth-form--register{
    gap:12px;
    padding-top:18px;
  }

  .auth-register__note{
    font-size:12px;
    line-height:1.5;
  }
}

@media (max-width:1180px){
  .auth-grid{
    grid-template-columns:1fr;
  }

  .auth-story{
    padding-right:0;
  }

  .auth-title{
    max-width:14ch;
  }

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

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

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

  .auth-topnav__label{
    display:none;
  }

  body.auth-page .center-wrap.auth-wrap{
    padding:98px 16px 40px;
  }

  .auth-shell{
    padding:22px;
    border-radius:24px;
  }

  .auth-title{
    max-width:none;
    font-size:clamp(2.3rem, 10vw, 3.4rem);
  }

  .auth-register{
    grid-template-columns:1fr;
    padding:22px;
  }
}

@media (max-width:640px){
  body.auth-page .topbar{
    padding:14px 14px;
  }

  .auth-brand__meta{
    display:none;
  }

  body.auth-page .center-wrap.auth-wrap{
    padding:88px 12px 28px;
  }

  .auth-shell{
    padding:18px;
    border-radius:22px;
  }

  .auth-panel,
  .auth-register__form-block{
    padding:18px;
    border-radius:22px;
  }

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

  body.auth-page .modal.auth-modal{
    padding:12px;
  }

  .auth-register{
    width:100%;
    padding:16px;
    border-radius:24px;
  }

  .auth-modal__close{
    top:12px;
    right:12px;
  }

  body.auth-page .toast{
    min-width:0;
    width:min(100vw - 24px, 340px);
  }

  .auth-foot{
    padding-bottom:24px;
    font-size:11px;
    letter-spacing:.08em;
  }
}

@media (prefers-reduced-motion: reduce){
  .auth-shell,
  .auth-panel,
  .auth-register,
  .auth-modal__close,
  body.auth-page .btn{
    animation:none !important;
    transition:none !important;
  }
}