@font-face {
  font-family: "Raleway Local";
  src: url("assets/raleway.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Roboto Local";
  src: url("assets/roboto.woff2") format("woff2");
  font-display: swap;
}

:root {
  --red: #f0163e;
  --red-dark: #c90d31;
  --black: #171717;
  --gray: #77777d;
  --light-gray: #dedde0;
  --bone: #f6f4f1;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--black);
  font-family: "Roboto Local", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.auth-page {
  position: relative;
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  background: linear-gradient(135deg, #f6f4f1 0%, #f5f1ed 52%, #f6e9ec 100%);
}

.background { pointer-events: none; }

.mesh {
  position: fixed;
  inset: -25%;
  background: radial-gradient(480px at 22% 28%, rgba(240,22,62,.102), transparent 70%), radial-gradient(420px at 78% 70%, rgba(42,38,35,.078), transparent 70%), radial-gradient(360px at 62% 18%, rgba(240,22,62,.071), transparent 70%), radial-gradient(300px at 35% 85%, rgba(192,16,50,.059), transparent 70%);
  animation: mesh-drift 16s ease-in-out infinite alternate;
}

.orbit-wrap { position: fixed; top: 50%; left: 50%; width: 0; height: 0; }

.ring {
  position: absolute;
  display: block;
  border: 1.5px solid rgba(240,22,62,.122);
  border-radius: 50%;
  translate: -50% -50%;
}

.ring-1 { width: 540px; height: 540px; border-style: dashed; animation: spin 50s linear infinite; }
.ring-2 { width: 700px; height: 700px; border-color: rgba(42,38,35,.122); animation: spin 75s linear infinite reverse; }
.ring-3 { width: 880px; height: 880px; border-color: rgba(240,22,62,.059); animation: spin 100s linear infinite; }

.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
}

.orbit-dot-red { background: var(--red); box-shadow: 0 0 12px rgba(240,22,62,.6); animation: orbit-red 50s linear infinite; }
.orbit-dot-black { width: 6px; height: 6px; margin: -3px; background: #2a2623; box-shadow: 0 0 10px rgba(42,38,35,.5); animation: orbit-black 75s linear infinite reverse; }

.particle {
  position: fixed;
  bottom: -12px;
  display: block;
  border-radius: 50%;
  background: rgba(240,22,62,.48);
  animation: float-up linear infinite;
}

.particle.dark { background: rgba(20,20,20,.24); }
.p1 { left: 12%; width: 5px; height: 5px; animation-duration: 14s; }
.p2 { left: 28%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 3s; }
.p3 { left: 66%; width: 6px; height: 6px; animation-duration: 16s; animation-delay: 6s; }
.p4 { left: 84%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 1.5s; }
.p5 { left: 48%; width: 3px; height: 3px; animation-duration: 22s; animation-delay: 9s; }

.top-fade { position: fixed; z-index: 2; top: 0; right: 0; left: 0; height: 112px; background: linear-gradient(#f6f4f1 15%, rgba(246,244,241,.7), transparent); }

.slogan {
  position: fixed;
  z-index: 3;
  right: 0;
  bottom: 24px;
  left: 0;
  margin: 0;
  color: rgba(23,23,23,.45);
  font-family: "Raleway Local", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: .025em;
  text-align: center;
}

.slogan strong { color: var(--red); font-weight: 700; }

.auth-card {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 400px;
  padding: 40px 40px 36px;
  border: 1px solid rgba(240,22,62,.122);
  border-radius: 22px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 18px 50px rgba(240,22,62,.129);
  backdrop-filter: blur(14px);
  animation: card-breath 6s ease-in-out 1.4s infinite;
}

.auth-card::before {
  position: absolute;
  z-index: 1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--border-angle), transparent 0 31%, rgba(240,22,62,.16) 43%, rgba(255,255,255,.7) 50%, rgba(240,22,62,.11) 57%, transparent 69% 100%);
  content: "";
  opacity: .55;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-wave 9s linear infinite;
}

.logo-wrap { display: flex; justify-content: center; }
.logo { position: relative; display: flex; width: 132px; height: 122px; align-items: center; justify-content: center; animation: logo-float 6s ease-in-out 1.4s infinite; }
.logo img { position: relative; z-index: 2; width: auto; height: 90px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(42,38,35,.302)); }
.logo-halo, .logo-ring { position: absolute; border-radius: 50%; }
.logo-halo { width: 134px; height: 134px; background: radial-gradient(circle, rgba(240,22,62,.239), transparent 70%); animation: halo-pulse 4s ease-in-out infinite; }
.logo-ring { width: 124px; height: 124px; border: 1.2px dashed rgba(42,38,35,.322); animation: spin 18s linear infinite reverse; }

.heading { margin: 12px 0 25.75px; text-align: center; }
.heading h1 { margin: 0; font-family: "Raleway Local", Arial, sans-serif; font-size: 23px; font-weight: 800; line-height: 34.5px; letter-spacing: -.025em; }
.heading h1 span { color: var(--red); }
.heading p { margin: 4px 0 0; color: var(--gray); font-size: 13.5px; line-height: 20.25px; }

label { color: rgba(23,23,23,.8); font-size: 13px; font-weight: 600; line-height: 19.5px; }
.input-wrap { position: relative; margin-top: 6px; }
.input-wrap > svg { position: absolute; top: 50%; left: 14px; width: 16px; height: 16px; color: var(--gray); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; }
.input-wrap > .check { right: 14px; left: auto; color: var(--red); opacity: 0; transform: translateY(-50%) scale(.5); transition: .3s; }
.input-wrap.valid > .check { opacity: 1; transform: translateY(-50%) scale(1); }

input {
  width: 100%;
  height: 44px;
  padding: 0 40px;
  border: 1px solid var(--light-gray);
  border-radius: 11px;
  outline: none;
  background: white;
  color: var(--black);
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

input::placeholder { color: rgba(119,119,125,.7); }
input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(240,22,62,.15); }

.hint, .submit-inner p { margin: 0; padding-top: 12px; color: rgba(119,119,125,.8); font-size: 12.5px; line-height: 18.75px; text-align: center; }
.hint { transition: opacity .25s, height .4s, padding .4s; }
.hint.hidden { height: 0; padding: 0; opacity: 0; overflow: hidden; }

.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease-out; }
.collapsible.open { grid-template-rows: 1fr; }
.collapsible-inner { min-height: 0; padding-top: 0; overflow: hidden; transition: padding-top .5s; }
.collapsible.open .collapsible-inner { padding-top: 16px; }
.password-head { display: flex; align-items: center; justify-content: space-between; }
.password-head button { border: 0; padding: 0; background: transparent; color: rgba(119,119,125,.7); font-size: 12px; cursor: pointer; pointer-events: auto; }
.password-head button:hover { color: var(--black); }

.submit { position: relative; width: 100%; height: 46px; overflow: hidden; border: 0; border-radius: 11px; background: linear-gradient(90deg, var(--red-dark), var(--red)); box-shadow: 0 5px 15px rgba(240,22,62,.18); color: white; font-family: "Raleway Local", Arial, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.submit::after { position: absolute; top: -50%; left: -80%; width: 38%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); content: ""; transform: skewX(-20deg); animation: shine 4s ease-in-out infinite 1.5s; }
.submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(240,22,62,.4); }
.message { min-height: 0; margin: 10px 0 -5px; color: var(--red-dark); font-size: 12px; text-align: center; }

.reveal { opacity: 0; animation: reveal .65s ease-out forwards; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .18s; }
.delay-3 { animation-delay: .28s; }
.delay-4 { animation-delay: .38s; }
.delay-6 { animation-delay: .58s; }

@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mesh-drift { from { transform: translate(0) scale(1); } to { transform: translate(40px, -30px) scale(1.07); } }
@keyframes card-breath { 0%, 100% { transform: translateY(0); box-shadow: 0 18px 50px rgba(240,22,62,.129); } 50% { transform: translateY(-7px); box-shadow: 0 28px 64px rgba(240,22,62,.18); } }
@property --border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-wave { to { --border-angle: 360deg; } }
@keyframes orbit-red { from { transform: rotate(0) translate(270px); } to { transform: rotate(360deg) translate(270px); } }
@keyframes orbit-black { from { transform: rotate(90deg) translate(350px); } to { transform: rotate(450deg) translate(350px); } }
@keyframes float-up { from { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 85% { opacity: .35; } to { transform: translateY(-110vh); opacity: 0; } }
@keyframes halo-pulse { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes logo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shine { 0%, 65% { left: -80%; } 90%, 100% { left: 140%; } }

@media (max-width: 480px) {
  .auth-card { padding-right: 28px; padding-left: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}