@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body[data-page="auth.register"]{
  --reg-violet:#7c2cff;
  --reg-violet-2:#5b18e7;
  --reg-green:#31efa3;
  --reg-text:#f6f7fb;
  --reg-muted:#bac3cf;
  --reg-line:rgba(255,255,255,.18);
  --reg-glass:linear-gradient(145deg,rgba(8,13,22,.91),rgba(8,12,19,.80));
  position:relative;
  min-height:100svh;
  overflow-x:hidden;
  color:var(--reg-text);
  background:#071017;
  font-family:'DM Sans',Inter,Arial,sans-serif;
}
body[data-page="auth.register"]::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:url('../img/landing-cyclist.jpg');
  background-size:cover;
  background-position:58% 50%;
}
body[data-page="auth.register"]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 18%,rgba(124,44,255,.12),transparent 32rem),
    linear-gradient(90deg,rgba(3,10,18,.94) 0%,rgba(3,10,18,.78) 40%,rgba(3,10,18,.40) 70%,rgba(3,10,18,.56) 100%),
    linear-gradient(180deg,rgba(3,10,18,.30) 0%,rgba(3,10,18,.08) 45%,rgba(3,10,18,.88) 100%);
  box-shadow:inset 0 0 220px rgba(0,0,0,.35);
}

body[data-page="auth.register"] .topbar{
  position:relative;
  top:auto;
  border:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-page="auth.register"] .nav-shell{
  width:min(1500px,calc(100% - 10vw));
  height:auto;
  padding:32px 0 0;
}
body[data-page="auth.register"] .brand{
  gap:13px;
  color:#fff;
  font-size:30px;
  font-weight:800;
  letter-spacing:-1.3px;
  text-shadow:0 2px 20px #0009;
}
body[data-page="auth.register"] .brand-mark{
  width:46px;
  height:46px;
  filter:drop-shadow(0 4px 14px #0008);
}
body[data-page="auth.register"] .public-nav{
  margin-left:auto;
}
body[data-page="auth.register"] .public-nav a{
  display:none;
}
body[data-page="auth.register"] .public-nav a:nth-child(4){
  display:inline-flex;
  align-items:center;
  padding:10px 0 10px 12px;
  color:#fff;
  font-size:17px;
  font-weight:600;
  background:none;
  box-shadow:none;
  text-shadow:0 2px 18px #000;
}
body[data-page="auth.register"] .public-nav a:nth-child(4)::after{
  content:"↗";
  margin-left:9px;
  font-size:21px;
  font-weight:400;
}

body[data-page="auth.register"] .page-shell{
  width:min(1500px,100%);
  min-height:calc(100svh - 78px);
  margin:0 auto;
  padding:34px 5vw 54px;
}
body[data-page="auth.register"] .flash-stack{max-width:680px;margin:0 0 18px auto}
body[data-page="auth.register"] .site-footer{display:none}

body[data-page="auth.register"] .registration-shell{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:calc(100svh - 166px);
  padding:20px 0 34px;
}
body[data-page="auth.register"] .registration-story{
  align-self:center;
  max-width:700px;
  padding:10px 0 34px;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
body[data-page="auth.register"] .registration-story .story-eyebrow{
  margin:0 0 15px;
  color:#cbd2df;
  font-size:17px;
  font-weight:500;
}
body[data-page="auth.register"] .registration-story h2{
  max-width:690px;
  margin:0;
  color:#fff;
  font-size:clamp(54px,5.8vw,88px);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.91;
  text-wrap:balance;
}
body[data-page="auth.register"] .registration-story > p{
  max-width:620px;
  margin:25px 0 0;
  color:#dde3ea;
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.45;
}
body[data-page="auth.register"] .story-sync{
  display:flex;
  align-items:center;
  gap:15px;
  width:min(100%,590px);
  margin-top:30px;
  padding:15px 17px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:17px;
  background:rgba(7,13,22,.58);
  box-shadow:0 20px 48px rgba(0,0,0,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body[data-page="auth.register"] .story-sync img{
  flex:0 0 auto;
  width:38px;
  max-height:34px;
  object-fit:contain;
}
body[data-page="auth.register"] .story-sync div{display:grid;gap:2px}
body[data-page="auth.register"] .story-sync strong{color:#fff;font-size:14px}
body[data-page="auth.register"] .story-sync span{color:#bbc4cf;font-size:12px;line-height:1.4}
body[data-page="auth.register"] .story-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
body[data-page="auth.register"] .story-points span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#dce2e9;
  background:rgba(7,13,22,.42);
  font-size:11px;
  backdrop-filter:blur(12px);
}

body[data-page="auth.register"] .registration-card{
  --muted:var(--reg-muted);
  width:100%;
  overflow:visible;
  color:var(--reg-text);
  border:1px solid rgba(255,255,255,.24);
  border-radius:28px;
  background:var(--reg-glass);
  box-shadow:0 28px 70px rgba(0,0,0,.38);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}
body[data-page="auth.register"] .registration-card h1,
body[data-page="auth.register"] .registration-card h2,
body[data-page="auth.register"] .registration-card strong,
body[data-page="auth.register"] .registration-card label,
body[data-page="auth.register"] .registration-card legend{color:#fff}
body[data-page="auth.register"] .registration-card a{color:#d9c8ff}
body[data-page="auth.register"] .registration-head{
  padding:27px 30px 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
body[data-page="auth.register"] .registration-head > .eyebrow{
  margin:0 0 7px;
  color:#baa4ef;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}
body[data-page="auth.register"] .registration-title-row{gap:16px}
body[data-page="auth.register"] .registration-title-row h1{
  margin:4px 0 6px;
  color:#fff;
  font-size:clamp(1.65rem,3vw,2.15rem);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.04;
}
body[data-page="auth.register"] .registration-title-row p{
  max-width:445px;
  color:#b8c1cd;
  font-size:13px;
  line-height:1.45;
}
body[data-page="auth.register"] .registration-title-row > strong{
  margin-top:7px;
  padding:6px 9px;
  color:#e3d9ff;
  border:1px solid rgba(192,167,255,.28);
  border-radius:999px;
  background:rgba(124,44,255,.13);
  font-size:11px;
  white-space:nowrap;
}
body[data-page="auth.register"] .registration-progress{margin:20px 0 0}
body[data-page="auth.register"] .registration-progress li{color:#76808d}
body[data-page="auth.register"] .registration-progress li::before{background:rgba(255,255,255,.12)}
body[data-page="auth.register"] .registration-progress span{
  width:28px;
  height:28px;
  color:#9098a3;
  border:1px solid rgba(255,255,255,.18);
  background:#10151e;
}
body[data-page="auth.register"] .registration-progress .active span,
body[data-page="auth.register"] .registration-progress .done span{
  color:#fff;
  border-color:#8d4fff;
  background:linear-gradient(135deg,var(--reg-violet-2),var(--reg-violet));
  box-shadow:0 0 0 4px rgba(124,44,255,.10);
}
body[data-page="auth.register"] .registration-progress .done::before,
body[data-page="auth.register"] .registration-progress .active::before{background:#7c2cff}
body[data-page="auth.register"] .registration-progress .active small,
body[data-page="auth.register"] .registration-progress .done small{color:#dce1e8}
body[data-page="auth.register"] .registration-progress small{font-size:10px}

body[data-page="auth.register"] .registration-step{
  gap:17px;
  padding:25px 30px 29px;
}
body[data-page="auth.register"] .step-heading{align-items:flex-start}
body[data-page="auth.register"] .step-icon{
  display:grid;
  flex:0 0 auto;
  width:39px;
  height:39px;
  place-items:center;
  color:#d8c9ff;
  border:1px solid rgba(177,145,255,.26);
  border-radius:12px;
  background:rgba(124,44,255,.12);
}
body[data-page="auth.register"] .step-icon svg{width:19px;height:19px}
body[data-page="auth.register"] .step-heading h2{
  margin:0 0 3px;
  font-size:17px;
  letter-spacing:-.02em;
}
body[data-page="auth.register"] .step-heading p{
  margin:0;
  color:#aeb8c5;
  font-size:12.5px;
  line-height:1.45;
}
body[data-page="auth.register"] .registration-form{gap:14px}
body[data-page="auth.register"] .registration-field{gap:7px;font-size:12px}
body[data-page="auth.register"] .registration-field > small{color:#929daa;font-size:11px}
body[data-page="auth.register"] .registration-card input[type="text"],
body[data-page="auth.register"] .registration-card input[type="email"],
body[data-page="auth.register"] .registration-card input[type="password"],
body[data-page="auth.register"] .registration-card input[type="search"],
body[data-page="auth.register"] .registration-card select{
  min-height:50px;
  padding:12px 14px;
  color:#fff;
  caret-color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  background:rgba(4,9,15,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body[data-page="auth.register"] .registration-card input:hover,
body[data-page="auth.register"] .registration-card select:hover{border-color:rgba(192,167,255,.45);background:rgba(5,10,18,.68)}
body[data-page="auth.register"] .registration-card input:focus,
body[data-page="auth.register"] .registration-card select:focus{
  border-color:#9562ff;
  background:rgba(5,10,18,.78);
  box-shadow:0 0 0 4px rgba(124,44,255,.14);
}
body[data-page="auth.register"] .registration-card input::placeholder{color:#6f7884}
body[data-page="auth.register"] .registration-card .button.primary{
  min-height:54px;
  color:#fff;
  border:0;
  border-radius:15px;
  background:linear-gradient(90deg,var(--reg-violet-2),var(--reg-violet));
  box-shadow:0 14px 32px rgba(70,0,230,.30);
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease;
}
body[data-page="auth.register"] .registration-card .button.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(70,0,230,.40);
}
body[data-page="auth.register"] .language-cards{gap:9px}
body[data-page="auth.register"] .language-cards legend{font-size:12px}
body[data-page="auth.register"] .language-card{
  min-height:66px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
  background:rgba(4,9,15,.48);
}
body[data-page="auth.register"] .language-card:hover{border-color:rgba(192,167,255,.46)}
body[data-page="auth.register"] .language-card:has(input:checked){
  border-color:#8d4fff;
  background:rgba(124,44,255,.12);
  box-shadow:inset 0 0 0 1px rgba(141,79,255,.12);
}
body[data-page="auth.register"] .language-card small{color:#8f99a5}
body[data-page="auth.register"] .language-card:has(input:checked) i{color:#fff;background:#7c2cff}
body[data-page="auth.register"] .country-picker{gap:6px;font-size:12px;font-weight:700}
body[data-page="auth.register"] .country-options{
  border-color:rgba(255,255,255,.18);
  background:#10151e;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
body[data-page="auth.register"] .country-options button{color:#edf1f6}
body[data-page="auth.register"] .country-options button:hover,
body[data-page="auth.register"] .country-options button:focus{background:rgba(124,44,255,.14)}
body[data-page="auth.register"] .form-hint{
  margin:-5px 0 0;
  color:#8f99a5;
  font-size:11px;
}
body[data-page="auth.register"] .email-sent-notice{
  padding:14px;
  border-color:rgba(49,239,163,.25);
  background:rgba(49,239,163,.08);
}
body[data-page="auth.register"] .email-sent-notice > span{color:var(--reg-green)}
body[data-page="auth.register"] .email-sent-notice p{color:#9ba6b3;font-size:12px}
body[data-page="auth.register"] .verification-code{font-size:1.55rem}
body[data-page="auth.register"] .inline-action button{color:#cbb8ff}
body[data-page="auth.register"] .inline-action small{color:#7f8995;font-size:11px}
body[data-page="auth.register"] .check-line{color:#c2c9d2!important;font-size:12px;line-height:1.45}
body[data-page="auth.register"] .check-line input{accent-color:#7c2cff}
body[data-page="auth.register"] .password-control button{color:#c7b6f2}
body[data-page="auth.register"] .password-control button:hover,
body[data-page="auth.register"] .password-control button:focus-visible{background:rgba(124,44,255,.12)}
body[data-page="auth.register"] .registration-footer{
  padding:15px 30px 18px;
  color:#8e98a5;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:11px;
}
body[data-page="auth.register"] .registration-footer svg{color:var(--reg-green)}
body[data-page="auth.register"] .registration-session-error{
  margin:18px 30px 0;
  border-color:rgba(192,167,255,.26);
  background:rgba(124,44,255,.09);
}
body[data-page="auth.register"] .registration-session-error-icon{color:#d4c4ff;background:rgba(124,44,255,.14)}
body[data-page="auth.register"] .registration-browser-help{background:rgba(0,0,0,.17)}
body[data-page="auth.register"] .registration-browser-help ol{color:#c5ccd5}
body[data-page="auth.register"] .strava-next-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(255,255,255,.04);
}
body[data-page="auth.register"] .strava-next-step img{width:31px;max-height:31px;object-fit:contain}
body[data-page="auth.register"] .strava-next-step strong{display:block;font-size:12px}
body[data-page="auth.register"] .strava-next-step span{display:block;margin-top:2px;color:#929daa;font-size:11px;line-height:1.4}

@media(max-width:1050px){
  body[data-page="auth.register"] .nav-shell{width:calc(100% - 56px);padding-top:25px}
  body[data-page="auth.register"] .page-shell{padding:28px 28px 48px}
  body[data-page="auth.register"] .registration-card{max-width:540px}
  body[data-page="auth.register"] .registration-story h2{font-size:clamp(48px,6.6vw,72px)}
  body[data-page="auth.register"] .registration-story > p{font-size:17px}
}
@media(max-width:820px){
  body[data-page="auth.register"]::before{background-position:65% 50%}
  body[data-page="auth.register"]::after{background:linear-gradient(180deg,rgba(3,10,18,.79) 0%,rgba(3,10,18,.58) 32%,rgba(3,10,18,.88) 67%,rgba(3,10,18,.97) 100%)}
  body[data-page="auth.register"] .nav-shell{width:calc(100% - 40px);padding-top:20px}
  body[data-page="auth.register"] .brand{gap:8px;font-size:22px;letter-spacing:-.8px}
  body[data-page="auth.register"] .brand-mark{width:36px;height:36px}
  body[data-page="auth.register"] .public-nav a:nth-child(4){font-size:13px;padding-top:8px}
  body[data-page="auth.register"] .public-nav a:nth-child(4)::after{font-size:17px;margin-left:5px}
  body[data-page="auth.register"] .page-shell{padding:26px 20px 42px}
  body[data-page="auth.register"] .registration-shell{display:flex;justify-content:center;min-height:auto;padding:10px 0 26px}
  body[data-page="auth.register"] .registration-story{max-width:620px;padding:24px 2px 28px}
  body[data-page="auth.register"] .registration-story .story-eyebrow{font-size:14px}
  body[data-page="auth.register"] .registration-story h2{max-width:580px;font-size:clamp(43px,10vw,62px)}
  body[data-page="auth.register"] .registration-story > p{max-width:560px;margin-top:18px;font-size:16px}
  body[data-page="auth.register"] .story-sync{margin-top:20px}
  body[data-page="auth.register"] .registration-card{max-width:620px;margin:0 auto;border-radius:22px}
}
@media(max-width:560px){
  body[data-page="auth.register"] .nav-shell{width:calc(100% - 32px)}
  body[data-page="auth.register"] .page-shell{padding:16px 12px 32px}
  body[data-page="auth.register"] .registration-story{padding:20px 5px 22px}
  body[data-page="auth.register"] .registration-story h2{font-size:44px;line-height:.93}
  body[data-page="auth.register"] .registration-story > p{font-size:14px}
  body[data-page="auth.register"] .story-sync{padding:12px 13px;border-radius:14px}
  body[data-page="auth.register"] .story-sync span{font-size:10px}
  body[data-page="auth.register"] .story-points{display:none}
  body[data-page="auth.register"] .registration-card{border-radius:18px}
  body[data-page="auth.register"] .registration-head,
  body[data-page="auth.register"] .registration-step{padding-left:18px;padding-right:18px}
  body[data-page="auth.register"] .registration-head{padding-top:22px}
  body[data-page="auth.register"] .registration-title-row{display:flex}
  body[data-page="auth.register"] .registration-title-row h1{font-size:1.55rem}
  body[data-page="auth.register"] .registration-title-row p{font-size:11px}
  body[data-page="auth.register"] .registration-progress{margin-top:17px}
  body[data-page="auth.register"] .language-cards{grid-template-columns:1fr 1fr}
  body[data-page="auth.register"] .language-card{min-height:61px;padding:9px}
  body[data-page="auth.register"] .language-card img{width:29px;height:auto}
  body[data-page="auth.register"] .language-card small{font-size:10px}
  body[data-page="auth.register"] .registration-footer{padding-left:18px;padding-right:18px}
}
@media(max-width:380px){
  body[data-page="auth.register"] .registration-story h2{font-size:39px}
  body[data-page="auth.register"] .registration-title-row > strong{display:none}
}

/* Minimal registration copy: keep the only footer action aligned cleanly. */
body[data-page="auth.register"] .registration-footer:has(> a:only-child){justify-content:flex-end}

/* Login page aligned with the public landing and registration funnel. */
body[data-page="auth.login"]{
  --login-violet:#7c2cff;
  --login-violet-2:#5b18e7;
  --login-text:#f6f7fb;
  position:relative;
  min-height:100svh;
  overflow-x:hidden;
  color:var(--login-text);
  background:#071017;
  font-family:'DM Sans',Inter,Arial,sans-serif;
}
body[data-page="auth.login"]::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:url('../img/landing-cyclist.jpg');
  background-size:cover;
  background-position:58% 50%;
}
body[data-page="auth.login"]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 18%,rgba(124,44,255,.12),transparent 32rem),
    linear-gradient(90deg,rgba(3,10,18,.94) 0%,rgba(3,10,18,.78) 40%,rgba(3,10,18,.40) 70%,rgba(3,10,18,.56) 100%),
    linear-gradient(180deg,rgba(3,10,18,.30) 0%,rgba(3,10,18,.08) 45%,rgba(3,10,18,.88) 100%);
  box-shadow:inset 0 0 220px rgba(0,0,0,.35);
}
body[data-page="auth.login"] .topbar{
  position:relative;
  top:auto;
  border:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-page="auth.login"] .nav-shell{
  width:min(1500px,calc(100% - 10vw));
  height:auto;
  padding:32px 0 0;
}
body[data-page="auth.login"] .brand{
  gap:13px;
  color:#fff;
  font-size:30px;
  font-weight:800;
  letter-spacing:-1.3px;
  text-shadow:0 2px 20px #0009;
}
body[data-page="auth.login"] .brand-mark{
  width:46px;
  height:46px;
  filter:drop-shadow(0 4px 14px #0008);
}
body[data-page="auth.login"] .public-nav{margin-left:auto}
body[data-page="auth.login"] .public-nav a{display:none}
body[data-page="auth.login"] .public-nav a:nth-child(6){
  display:inline-flex;
  align-items:center;
  padding:10px 0 10px 12px;
  color:#fff;
  border:0;
  background:none;
  box-shadow:none;
  font-size:17px;
  font-weight:600;
  text-shadow:0 2px 18px #000;
}
body[data-page="auth.login"] .public-nav a:nth-child(6)::after{
  content:"↗";
  margin-left:9px;
  font-size:21px;
  font-weight:400;
}
body[data-page="auth.login"] .page-shell{
  width:min(1500px,100%);
  min-height:calc(100svh - 78px);
  margin:0 auto;
  padding:34px 5vw 54px;
}
body[data-page="auth.login"] .flash-stack{max-width:520px;margin:0 0 18px auto}
body[data-page="auth.login"] .site-footer{display:none}
body[data-page="auth.login"] .auth-shell{
  display:flex;
  min-height:calc(100svh - 166px);
  align-items:center;
  justify-content:center;
  padding:20px 0 34px;
}
body[data-page="auth.login"] .auth-card{
  width:min(100%,520px);
  padding:0;
  overflow:hidden;
  color:var(--login-text);
  border:1px solid rgba(255,255,255,.24);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(8,13,22,.91),rgba(8,12,19,.80));
  box-shadow:0 28px 70px rgba(0,0,0,.38);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}
body[data-page="auth.login"] .login-head{padding:31px 32px 24px;border-bottom:1px solid rgba(255,255,255,.12)}
body[data-page="auth.login"] .login-head .eyebrow{
  display:block;
  margin:0 0 8px;
  color:#baa4ef;
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}
body[data-page="auth.login"] .login-head h1{
  margin:0;
  color:#fff;
  font-size:clamp(2.15rem,5vw,3.3rem);
  font-weight:800;
  letter-spacing:-.05em;
  line-height:1;
}
body[data-page="auth.login"] .login-head p{
  margin:11px 0 0;
  color:#aeb8c5;
  font-size:15px;
  line-height:1.5;
}
body[data-page="auth.login"] .login-fields{display:grid;gap:17px;padding:25px 32px 4px}
body[data-page="auth.login"] .login-field{
  display:grid;
  gap:8px;
  margin:0;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
body[data-page="auth.login"] .login-field-label{display:flex;align-items:center;gap:8px}
body[data-page="auth.login"] .login-field-label svg{width:18px;height:18px;color:#d8c9ff}
body[data-page="auth.login"] .auth-card input[type="email"],
body[data-page="auth.login"] .auth-card input[type="password"]{
  width:100%;
  min-height:52px;
  padding:13px 15px;
  color:#fff;
  caret-color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  outline:0;
  background:rgba(4,9,15,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body[data-page="auth.login"] .auth-card input[type="email"]:hover,
body[data-page="auth.login"] .auth-card input[type="password"]:hover{border-color:rgba(192,167,255,.45);background:rgba(5,10,18,.68)}
body[data-page="auth.login"] .auth-card input[type="email"]:focus,
body[data-page="auth.login"] .auth-card input[type="password"]:focus{border-color:#9562ff;background:rgba(5,10,18,.78);box-shadow:0 0 0 4px rgba(124,44,255,.14)}
body[data-page="auth.login"] .auth-card input::placeholder{color:#6f7884}
body[data-page="auth.login"] .auth-card input:-webkit-autofill,
body[data-page="auth.login"] .auth-card input:-webkit-autofill:hover,
body[data-page="auth.login"] .auth-card input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #0c1119 inset,0 0 0 4px rgba(124,44,255,.12)}
body[data-page="auth.login"] .password-control button{color:#c7b6f2}
body[data-page="auth.login"] .password-control button:hover,
body[data-page="auth.login"] .password-control button:focus-visible{background:rgba(124,44,255,.12)}
body[data-page="auth.login"] .login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 32px 22px;
}
body[data-page="auth.login"] .login-options .check-line{margin:0;color:#c2c9d2;font-size:13px}
body[data-page="auth.login"] .login-options input{accent-color:var(--login-violet)}
body[data-page="auth.login"] .login-options a{color:#cbb8ff;font-size:13px;font-weight:650}
body[data-page="auth.login"] .auth-card>.button.primary{
  width:calc(100% - 64px);
  min-height:54px;
  margin:0 32px 27px;
  color:#fff;
  border:0;
  border-radius:15px;
  background:linear-gradient(90deg,var(--login-violet-2),var(--login-violet));
  box-shadow:0 14px 32px rgba(70,0,230,.30);
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease;
}
body[data-page="auth.login"] .auth-card>.button.primary:hover{transform:translateY(-1px);box-shadow:0 18px 38px rgba(70,0,230,.40)}
body[data-page="auth.login"] .login-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:17px 24px 19px;
  color:#8e98a5;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:13px;
}
body[data-page="auth.login"] .login-footer a{color:#d9c8ff;font-weight:750}

@media(max-width:820px){
  body[data-page="auth.login"]::before{background-position:65% 50%}
  body[data-page="auth.login"]::after{background:linear-gradient(180deg,rgba(3,10,18,.79) 0%,rgba(3,10,18,.58) 32%,rgba(3,10,18,.88) 67%,rgba(3,10,18,.97) 100%)}
  body[data-page="auth.login"] .nav-shell{width:calc(100% - 40px);padding-top:20px}
  body[data-page="auth.login"] .brand{gap:8px;font-size:22px;letter-spacing:-.8px}
  body[data-page="auth.login"] .brand-mark{width:36px;height:36px}
  body[data-page="auth.login"] .public-nav a:nth-child(6){font-size:13px;padding-top:8px}
  body[data-page="auth.login"] .public-nav a:nth-child(6)::after{font-size:17px;margin-left:5px}
  body[data-page="auth.login"] .page-shell{padding:26px 20px 42px}
  body[data-page="auth.login"] .auth-shell{min-height:auto;justify-content:center;padding:10px 0 26px}
  body[data-page="auth.login"] .auth-card{max-width:620px;border-radius:22px}
}
@media(max-width:560px){
  body[data-page="auth.login"] .nav-shell{width:calc(100% - 32px)}
  body[data-page="auth.login"] .page-shell{padding:16px 12px 32px}
  body[data-page="auth.login"] .auth-card{border-radius:18px}
  body[data-page="auth.login"] .login-head{padding:25px 20px 21px}
  body[data-page="auth.login"] .login-head h1{font-size:2.2rem}
  body[data-page="auth.login"] .login-fields{padding:22px 20px 4px}
  body[data-page="auth.login"] .login-options{align-items:flex-start;flex-direction:column;padding:13px 20px 21px}
  body[data-page="auth.login"] .auth-card>.button.primary{width:calc(100% - 40px);margin:0 20px 24px}
  body[data-page="auth.login"] .login-footer{align-items:flex-start;flex-direction:column;padding:16px 20px 18px}
}