:root {
  --black:#080808;
  --black-2:#111111;
  --black-3:#181818;

  --white:#ffffff;
  --muted:#ababab;

  --orange:#ff5a00;
  --orange-2:#ff8700;
  --orange-3:#ffb347;

  --line:rgba(255,255,255,.12);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;

  min-height:100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color:var(--white);

  background:
    radial-gradient(
      circle at 82% 13%,
      rgba(255,179,71,.7) 0,
      rgba(255,90,0,.22) 14%,
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #ff8100 0,
      #ff5500 190px,
      #1b0d07 440px,
      #080808 720px
    );

  background-attachment:fixed;
}

a {
  color:inherit;
  text-decoration:none;
}

.login-header {
  position:sticky;
  top:0;
  z-index:20;

  min-height:72px;

  display:flex;
  align-items:center;

  gap:28px;

  padding:
    18px
    30px;

  background:
    rgba(8,8,8,.94);

  border-bottom:
    1px solid
    rgba(255,90,0,.4);
}

.login-header .brand {
  margin-right:auto;

  font-size:1.1rem;

  font-weight:900;

  text-transform:uppercase;
}

.login-header nav {
  display:flex;

  gap:20px;
}

.login-header nav a {
  color:#ddd;

  font-size:.86rem;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.06em;
}

.login-shell {
  width:
    min(
      1120px,
      calc(100% - 30px)
    );

  margin:0 auto;

  padding:
    34px 0
    90px;
}

.login-hero {
  min-height:330px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:
    48px
    42px;

  border-radius:26px;

  overflow:hidden;

  position:relative;

  background:
    radial-gradient(
      circle at 80% 38%,
      #ffd38a 0,
      #ff8a00 13%,
      rgba(255,90,0,.1) 31%,
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #ff7800 0%,
      #df3e00 38%,
      #140b07 72%,
      #080808 100%
    );

  box-shadow:
    0 26px 70px
    rgba(0,0,0,.32);
}

.login-hero::after {
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:38%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.65)
    );
}

.login-hero > * {
  position:relative;

  z-index:2;
}

.eyebrow {
  color:#ffe2b7;

  font-size:.74rem;

  font-weight:900;

  letter-spacing:.16em;

  text-transform:uppercase;
}

.login-hero h1 {
  max-width:760px;

  margin:
    10px 0
    15px;

  font-size:
    clamp(
      3.3rem,
      8vw,
      7rem
    );

  line-height:.86;

  letter-spacing:-.065em;

  text-transform:uppercase;
}

.login-hero p {
  max-width:620px;

  margin:0;

  color:
    rgba(255,255,255,.84);

  font-size:1rem;

  line-height:1.6;
}

.auth-panel {
  margin-top:24px;
}

.auth-grid {
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:18px;
}

.auth-card {
  position:relative;

  overflow:hidden;

  padding:30px;

  border:
    1px solid
    var(--line);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #191919,
      #0d0d0d
    );

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.24);
}

.auth-card::before {
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:5px;

  background:
    linear-gradient(
      90deg,
      var(--orange),
      var(--orange-2),
      var(--orange-3)
    );
}

.auth-number {
  margin-bottom:16px;

  color:var(--orange-2);

  font-size:2.3rem;

  font-weight:1000;
}

.auth-card h2 {
  margin:
    0 0
    20px;

  font-size:2rem;

  letter-spacing:-.04em;

  text-transform:uppercase;
}

label {
  display:block;

  margin:
    15px 0;

  color:#ddd;

  font-size:.82rem;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.04em;
}

input {
  width:100%;

  margin-top:8px;

  padding:
    13px
    14px;

  border:
    1px solid
    #343434;

  border-radius:10px;

  outline:none;

  background:#080808;

  color:var(--white);

  font:inherit;
}

input:focus {
  border-color:
    var(--orange-2);

  box-shadow:
    0 0 0 3px
    rgba(255,90,0,.12);
}

button,
.primary-link {
  min-height:46px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:
    0
    18px;

  border:0;

  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      var(--orange-2),
      var(--orange)
    );

  color:white;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.04em;

  cursor:pointer;
}

.secondary-button {
  background:#252525;

  border:
    1px solid
    #3b3b3b;
}

.auth-status {
  min-height:22px;

  padding-top:12px;

  color:var(--muted);

  font-size:.88rem;

  line-height:1.45;
}

.auth-status.error {
  color:#ffb4a8;
}

.auth-status.success {
  color:#ffd29b;
}

.logged-in-card {
  max-width:720px;

  margin:0 auto;
}

.logged-in-card p {
  color:var(--muted);
}

.logged-in-actions {
  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-top:24px;
}

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

  .login-hero {
    min-height:300px;

    padding:
      40px
      25px;
  }
}

@media(max-width:520px) {
  .login-header {
    padding:
      16px
      18px;
  }

  .login-header nav {
    display:none;
  }

  .auth-card {
    padding:24px;
  }

  .logged-in-actions {
    flex-direction:column;
  }

  button,
  .primary-link {
    width:100%;
  }
}