:root{color-scheme:dark}
*{box-sizing:border-box}
.auth-page{
  min-height:100vh; margin:0; overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 82%,rgba(255,220,21,.075),transparent 29rem),
    radial-gradient(circle at 82% 12%,rgba(255,255,255,.035),transparent 25rem),
    #09090a;
  color:var(--cream); font-family:'Inter',sans-serif;
}
.auth-page::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.auth-header{
  position:relative; z-index:2; width:min(1380px,calc(100% - 64px)); min-height:116px;
  margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid rgba(255,255,255,.085);
}
.auth-logo{width:138px}
.auth-header-link{color:var(--muted); font-size:12px; text-decoration:none}
.auth-header-link strong{color:var(--cream); margin-left:8px; font-weight:650}
.auth-header-link:hover strong{color:var(--gold)}
.auth-main{
  position:relative; z-index:1; width:min(1180px,calc(100% - 64px)); min-height:calc(100vh - 117px);
  margin:0 auto; display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,.72fr);
  gap:clamp(60px,9vw,150px); align-items:center; padding:58px 0 76px;
}
.auth-intro{max-width:625px}
.auth-kicker{
  margin:0 0 26px; color:var(--gold); font-size:10px; font-weight:750;
  letter-spacing:.2em; text-transform:uppercase;
}
.auth-intro h1{
  margin:0; max-width:650px; font-family:'Unbounded',sans-serif; color:#f3efe7;
  font-size:clamp(42px,5.1vw,73px); line-height:.98; letter-spacing:-.055em;
}
.auth-intro>p:not(.auth-kicker){
  max-width:500px; margin:28px 0 0; color:var(--muted); font-size:15px; line-height:1.65;
}
.auth-benefits{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:54px;
  border-top:1px solid var(--line); padding-top:19px;
}
.auth-benefits span{display:grid; gap:11px; color:#57575e; font-size:9px; font-weight:700; letter-spacing:.14em}
.auth-benefits b{color:var(--muted); font-size:10px; letter-spacing:.03em; text-transform:uppercase}
.auth-card{
  width:100%; min-height:560px; padding:34px 36px 30px; border:1px solid rgba(255,255,255,.1);
  border-radius:18px; background:rgba(18,18,20,.83); box-shadow:0 32px 80px rgba(0,0,0,.36);
  backdrop-filter:blur(24px);
}
.auth-progress__meta{display:flex; align-items:center; justify-content:space-between; color:#67676e; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase}
.auth-progress__meta span:last-child{color:var(--cream)}
.auth-progress__track{height:2px; margin-top:13px; overflow:hidden; border-radius:2px; background:#2a2a2e}
.auth-progress__track i{display:block; width:25%; height:100%; background:var(--gold); transition:width .45s cubic-bezier(.2,.7,.2,1)}
.auth-reason{
  display:flex; align-items:center; gap:10px; margin:22px 0 -5px; padding:11px 13px;
  border-radius:8px; background:rgba(255,220,21,.08); color:#d7d0b2; font-size:11px; line-height:1.4;
}
.auth-reason svg{width:15px; height:15px; flex:none; fill:var(--gold)}
.auth-step{padding-top:36px; animation:auth-in .35s ease both}
@keyframes auth-in{from{opacity:0; transform:translateX(9px)}to{opacity:1; transform:none}}
.auth-step__head{margin-bottom:27px}
.auth-step__head>span{color:var(--gold); font-size:9px; font-weight:750; letter-spacing:.16em; text-transform:uppercase}
.auth-step__head h2{
  margin:8px 0 0; font-family:'Unbounded',sans-serif; color:#f4f0e8;
  font-size:clamp(23px,2.5vw,31px); line-height:1.12; letter-spacing:-.035em;
}
.auth-step__head p{margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.5}
.auth-field{display:grid; gap:8px; margin-bottom:18px}
.auth-field>span{color:#a3a1a0; font-size:10px; font-weight:650; letter-spacing:.09em; text-transform:uppercase}
.auth-field input{
  width:100%; height:50px; padding:0 15px; border:1px solid #303034; border-radius:8px;
  outline:none; background:#0c0c0e; color:var(--cream); font:inherit; font-size:14px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.auth-field input::placeholder{color:#4e4e54}
.auth-field input:focus{border-color:#66665f; background:#101011; box-shadow:0 0 0 3px rgba(255,220,21,.055)}
.auth-field.has-error input{border-color:#bd5d53}
.auth-field small,.auth-check-error{min-height:13px; color:#de8077; font-size:10px; line-height:1.3}
.auth-field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.auth-check{display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; cursor:pointer; color:#77777e; font-size:11px; line-height:1.48}
.auth-check input{position:absolute; opacity:0; pointer-events:none}
.auth-check__box{width:17px; height:17px; border:1px solid #3b3b41; border-radius:4px; background:#0b0b0d; transition:.2s}
.auth-check input:checked+.auth-check__box{border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 4px #151513}
.auth-check input:focus-visible+.auth-check__box{outline:2px solid var(--gold); outline-offset:3px}
.auth-check-error{display:block; margin:6px 0 0 28px}
.password-field{position:relative}
.password-field input{padding-right:80px}
.password-toggle{
  position:absolute; top:50%; right:12px; transform:translateY(-50%); padding:5px;
  border:0; background:none; color:#737379; font:inherit; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.password-toggle:hover{color:var(--cream)}
.password-strength{display:flex; align-items:center; gap:10px; margin:-7px 0 18px}
.password-strength>div{height:2px; flex:1; overflow:hidden; background:#28282c}
.password-strength i{display:block; width:0; height:100%; background:#9d4c45; transition:width .25s,background .25s}
.password-strength span{width:120px; color:#66666d; font-size:9px; text-align:right}
.genre-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.genre-grid input{position:absolute; opacity:0}
.genre-grid span{
  min-height:42px; display:flex; align-items:center; justify-content:center; border:1px solid #303034;
  border-radius:8px; background:#0c0c0e; color:#89888b; cursor:pointer; font-size:11px;
  transition:.2s;
}
.genre-grid span:hover{border-color:#505055; color:var(--cream)}
.genre-grid input:checked+span{border-color:var(--gold); background:rgba(255,220,21,.1); color:var(--gold)}
.genre-grid input:focus-visible+span{outline:2px solid var(--gold); outline-offset:2px}
.register-summary{
  margin-top:18px; padding-top:15px; border-top:1px solid var(--line);
  color:#6c6c72; font-size:10px; line-height:1.55;
}
.register-summary b{color:var(--cream)}
.auth-form-error{min-height:16px; margin:10px 0 0; color:#de8077; font-size:11px}
.auth-actions{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px}
.auth-back,.auth-next{
  min-height:46px; display:inline-flex; align-items:center; justify-content:space-between; gap:30px;
  padding:0 18px; border-radius:7px; font:inherit; font-size:10px; font-weight:750;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer;
}
.auth-back{border:1px solid #303034; background:none; color:#85858b}
.auth-back:hover{border-color:#525258; color:var(--cream)}
.auth-next{min-width:184px; border:1px solid var(--gold); background:var(--gold); color:#12110b}
.auth-next:hover{background:#ffdf35; transform:translateY(-1px)}
.auth-next:disabled{opacity:.55; cursor:wait; transform:none}
.auth-success{padding:66px 0 20px; text-align:center; animation:auth-in .4s ease both}
.auth-success__mark{
  display:inline-grid; place-items:center; width:66px; height:66px; border-radius:50%;
  background:var(--gold); color:#111; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.auth-success h2{margin:25px auto 12px; font-family:'Unbounded',sans-serif; font-size:30px; line-height:1.12}
.auth-success p{max-width:380px; margin:0 auto 28px; color:var(--muted); font-size:13px; line-height:1.6}
.auth-success>div{display:grid; justify-content:center; gap:16px}
.auth-text-link{color:var(--muted); font-size:11px}
.auth-text-link:hover{color:var(--cream)}
.auth-card--login{min-height:0; padding-block:46px}
.auth-next--wide{width:100%; margin-top:5px}
.auth-card-footer{margin:25px 0 0; padding-top:21px; border-top:1px solid var(--line); color:#696970; font-size:11px; text-align:center}
.auth-card-footer a{color:var(--cream)}
.auth-card-footer a:hover{color:var(--gold)}
.auth-film-strip{display:flex; flex-wrap:wrap; gap:9px; margin-top:50px}
.auth-film-strip span{padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:#77777d; font-size:10px; letter-spacing:.06em; text-transform:uppercase}

@media(max-width:900px){
  .auth-main{grid-template-columns:1fr; gap:42px; max-width:650px; padding-top:48px}
  .auth-intro{text-align:center; margin-inline:auto}
  .auth-intro>p:not(.auth-kicker){margin-inline:auto}
  .auth-benefits{max-width:540px; margin-inline:auto}
  .auth-film-strip{justify-content:center}
}
@media(max-width:600px){
  .auth-header{width:calc(100% - 40px); min-height:88px}
  .auth-logo{width:108px}
  .auth-header-link{font-size:0}
  .auth-header-link strong{font-size:10px; margin:0}
  .auth-main{width:calc(100% - 32px); padding:42px 0}
  .auth-intro h1{font-size:clamp(32px,9.8vw,41px); overflow-wrap:anywhere}
  .auth-intro>p:not(.auth-kicker){font-size:13px}
  .auth-benefits{grid-template-columns:1fr; gap:13px; text-align:left}
  .auth-benefits span{grid-template-columns:28px 1fr; align-items:center; gap:7px}
  .auth-card{min-height:0; padding:28px 20px 24px; border-radius:14px}
  .auth-field-row{grid-template-columns:1fr; gap:0}
  .auth-actions{justify-content:stretch}
  .auth-back{flex:1}
  .auth-next{min-width:0; flex:2}
}
@media(prefers-reduced-motion:reduce){.auth-step,.auth-success{animation:none}.auth-progress__track i{transition:none}}