:root{
  --brn-bg:#03040b;
  --brn-panel:rgba(8,10,24,.82);
  --brn-line:rgba(255,255,255,.12);
  --brn-blue:#22d3ee;
  --brn-cyan:#38bdf8;
  --brn-violet:#8b5cf6;
  --brn-pink:#ec4899;
  --brn-orange:#ff8a00;
  --brn-text:#f8fafc;
  --brn-muted:#a9b1c7;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body.brn-auth{
  min-height:100vh;
  overflow-x:hidden;
  display:grid;
  place-items:center;
  padding:32px 18px;
  color:var(--brn-text);
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 12% 18%,rgba(34,211,238,.20),transparent 28%),
    radial-gradient(circle at 85% 14%,rgba(236,72,153,.20),transparent 30%),
    radial-gradient(circle at 52% 88%,rgba(139,92,246,.18),transparent 34%),
    var(--brn-bg);
}
body.brn-auth::before,
body.brn-auth::after{
  content:"";
  position:fixed;
  inset:-25%;
  pointer-events:none;
  z-index:0;
  filter:blur(22px);
  opacity:.72;
}
body.brn-auth::before{
  background:conic-gradient(from 20deg,transparent 0 20%,rgba(34,211,238,.16),transparent 35% 52%,rgba(236,72,153,.15),transparent 68% 82%,rgba(255,138,0,.13));
  animation:brn-spin 24s linear infinite;
}
body.brn-auth::after{
  background:radial-gradient(ellipse at center,transparent 0 30%,rgba(139,92,246,.09) 48%,transparent 70%);
  animation:brn-pulse 7s ease-in-out infinite alternate;
}
@keyframes brn-spin{to{transform:rotate(360deg)}}
@keyframes brn-pulse{from{transform:scale(.92);opacity:.45}to{transform:scale(1.08);opacity:.85}}

.brn-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(56,189,248,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,72,153,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 96%);
  animation:gridMove 16s linear infinite;
}
@keyframes gridMove{to{background-position:54px 54px}}

.brn-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px);animation:floatOrb 9s ease-in-out infinite alternate}
.brn-orb.one{width:210px;height:210px;left:-60px;top:18%;background:radial-gradient(circle,rgba(34,211,238,.25),transparent 68%)}
.brn-orb.two{width:270px;height:270px;right:-90px;bottom:8%;background:radial-gradient(circle,rgba(236,72,153,.24),transparent 68%);animation-delay:-3s}
.brn-orb.three{width:170px;height:170px;right:16%;top:-60px;background:radial-gradient(circle,rgba(255,138,0,.20),transparent 70%);animation-delay:-5s}
@keyframes floatOrb{to{transform:translate3d(28px,-22px,0) scale(1.12)}}

.auth-shell{
  position:relative;
  z-index:2;
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  min-height:640px;
  border:1px solid var(--brn-line);
  border-radius:30px;
  overflow:hidden;
  background:rgba(3,5,14,.66);
  box-shadow:0 32px 100px rgba(0,0,0,.62),0 0 70px rgba(139,92,246,.11);
  backdrop-filter:blur(22px);
}
.auth-visual{
  position:relative;
  min-height:100%;
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(150deg,rgba(7,10,26,.65),rgba(9,6,28,.84)),
    radial-gradient(circle at 50% 36%,rgba(56,189,248,.19),transparent 34%);
  border-right:1px solid var(--brn-line);
  overflow:hidden;
}
.auth-visual::before{
  content:"";
  position:absolute;
  width:470px;height:470px;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(56,189,248,.22);
  box-shadow:0 0 80px rgba(139,92,246,.25),inset 0 0 70px rgba(236,72,153,.08);
  animation:ring 6s ease-in-out infinite alternate;
}
.auth-visual::after{
  content:"";
  position:absolute;
  width:340px;height:340px;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(236,72,153,.30);
  animation:ringRotate 22s linear infinite;
}
@keyframes ring{to{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 110px rgba(236,72,153,.26)}}
@keyframes ringRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
.auth-brand,.auth-copy,.auth-footnote{position:relative;z-index:2}
.auth-brand img{display:block;width:min(360px,88%);height:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.42))}
.auth-copy{max-width:510px;margin-top:auto;margin-bottom:auto;padding:26px 0}
.auth-kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(34,211,238,.34);background:rgba(34,211,238,.08);color:#8ff5ff;padding:8px 13px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.auth-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:#39ffb6;box-shadow:0 0 14px #39ffb6}
.auth-copy h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.03;margin:20px 0 16px;font-weight:800;letter-spacing:-.045em}
.auth-copy h2 span{background:linear-gradient(90deg,var(--brn-orange),var(--brn-pink),var(--brn-cyan),var(--brn-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-copy p{color:var(--brn-muted);font-size:.98rem;line-height:1.75;max-width:48ch}
.auth-footnote{font-size:.78rem;color:#8790a8;letter-spacing:.08em;text-transform:uppercase}

.auth-panel{
  position:relative;
  padding:52px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(180deg,rgba(9,11,27,.80),rgba(5,7,17,.92));
}
.auth-toplink{position:absolute;top:22px;right:24px;color:#c8d0e5;text-decoration:none;font-size:.82rem;display:inline-flex;align-items:center;gap:8px;transition:.25s}
.auth-toplink:hover{color:#fff;transform:translateX(-3px)}
.auth-mobile-logo{display:none;width:190px;margin:0 auto 22px}
.auth-header{margin-bottom:28px}
.auth-header .eyebrow{color:#7deaf9;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.auth-header h1{font-size:clamp(1.8rem,3vw,2.45rem);line-height:1.15;margin-bottom:10px;font-weight:700}
.auth-header p{color:var(--brn-muted);font-size:.92rem;line-height:1.6}
.auth-form{display:flex;flex-direction:column;gap:15px}
.input-field{position:relative}
.input-field label{display:block;font-size:.78rem;color:#c9d1e4;margin-bottom:7px;font-weight:600}
.input-wrap{display:flex;align-items:center;min-height:54px;border:1px solid rgba(148,163,184,.20);border-radius:15px;background:rgba(255,255,255,.045);transition:.25s;overflow:hidden}
.input-wrap:focus-within{border-color:rgba(34,211,238,.75);box-shadow:0 0 0 3px rgba(34,211,238,.09),0 0 25px rgba(139,92,246,.09);background:rgba(255,255,255,.065)}
.input-wrap i{width:48px;text-align:center;color:#8693ad;font-size:1.05rem;flex:0 0 auto}
.input-wrap input{width:100%;height:52px;border:0;outline:0;background:transparent;color:#fff;padding:0 14px 0 0;font:inherit;font-size:.93rem}
.input-wrap input::placeholder{color:#707a91}
.input-wrap .toggle-pass{width:44px;cursor:pointer;color:#8a95ad;transition:.2s}
.input-wrap .toggle-pass:hover{color:#fff}
.auth-button{position:relative;min-height:54px;margin-top:4px;border:0;border-radius:15px;color:#fff;font:inherit;font-weight:700;letter-spacing:.02em;cursor:pointer;overflow:hidden;background:linear-gradient(110deg,var(--brn-orange),var(--brn-pink) 36%,var(--brn-violet) 68%,var(--brn-cyan));box-shadow:0 14px 36px rgba(139,92,246,.23);transition:.25s}
.auth-button::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.32),transparent 70%);transform:translateX(-120%);transition:.55s}
.auth-button:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(236,72,153,.25)}
.auth-button:hover::before{transform:translateX(120%)}
.auth-button:disabled{opacity:.65;cursor:not-allowed;transform:none}
.auth-switch{margin-top:22px;text-align:center;color:var(--brn-muted);font-size:.87rem}
.auth-switch a{color:#7deaf9;text-decoration:none;font-weight:700}.auth-switch a:hover{text-decoration:underline}
.auth-alert{display:none;margin-bottom:15px;padding:12px 14px;border-radius:13px;font-size:.84rem;line-height:1.45;text-align:left}
.auth-alert.error{color:#ffc1cc;background:rgba(244,63,94,.11);border:1px solid rgba(244,63,94,.25)}
.auth-alert.success{color:#8fffd4;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.25)}
.loader{display:none;width:76px;height:76px;position:relative;margin:30px auto}.loader.active{display:block}.loader::before,.loader::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #69ebff;animation:authLoader 1.7s linear infinite}.loader::after{border-color:#ec4899;animation-delay:.8s}@keyframes authLoader{0%{transform:scale(.15);opacity:1}100%{transform:scale(1.2);opacity:0}}
.auth-meta{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:#7f899f;font-size:.72rem}
.auth-meta span{display:flex;align-items:center;gap:6px}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:#fff;transition:background-color 5000s ease-in-out 0s}

@media(max-width:860px){
  body.brn-auth{padding:18px 12px}
  .auth-shell{grid-template-columns:1fr;min-height:auto;max-width:560px;border-radius:24px}
  .auth-visual{display:none}
  .auth-panel{padding:52px 28px 32px;min-height:min(720px,calc(100vh - 36px))}
  .auth-mobile-logo{display:block}
  .auth-toplink{top:16px;right:18px}
}
@media(max-width:480px){
  body.brn-auth{padding:0}
  .auth-shell{min-height:100vh;border:0;border-radius:0;max-width:none}
  .auth-panel{padding:54px 20px 26px;justify-content:center}
  .auth-mobile-logo{width:168px;margin-bottom:18px}
  .auth-header{margin-bottom:22px}
  .auth-meta{flex-direction:column;align-items:center}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}