@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");


/* =========================================================
   ROOT
========================================================= */

:root {

  --bg-top: #2f1640;
  --bg-mid: #1c0c26;
  --bg-deep: #0c050d;

  --purple: #8a3aa3;

  --lime: #b5f01c;
  --lime-deep: #8ec50a;

  --text: #ece7ef;
  --muted: #b9a6c6;

  --red: #ff4d5e;

  --font-display:
    "Anton",
    Impact,
    "Arial Narrow",
    sans-serif;

  --font-body:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;

  --spin-time: 3.5s;
  --spin-turns: 5turn;

  color-scheme: dark;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  height: 100%;
}


body {

  background-color:
    var(--bg-deep);

  background-image:

    radial-gradient(
      circle at 62% 40%,
      rgba(138, 58, 163, 0.5) 0%,
      rgba(138, 58, 163, 0.18) 30%,
      transparent 55%
    ),

    radial-gradient(
      ellipse at 8% 108%,
      rgba(150, 170, 20, 0.16) 0%,
      transparent 45%
    ),

    linear-gradient(
      135deg,
      var(--bg-top) 0%,
      var(--bg-mid) 45%,
      var(--bg-deep) 100%
    );

  color:
    var(--text);

  font-family:
    var(--font-body);

  overflow:
    hidden;
}


::selection {

  background:
    var(--lime);

  color:
    #12091a;

}


[hidden] {

  display:
    none !important;

}


/* =========================================================
   MAIN APP
========================================================= */

#app {

  position:
    relative;

  isolation:
    isolate;

  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    1rem;

}


/* =========================================================
   ORBIT RINGS
========================================================= */

#app::before,
#app::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border-radius:
    50%;

  pointer-events:
    none;

  z-index:
    -1;

}


#app::before {

  width:
    min(1000px, 140vw);

  height:
    min(420px, 60vh);

  border:
    1px solid
    rgba(181, 240, 28, 0.16);

  box-shadow:
    0 0 60px
    rgba(181, 240, 28, 0.05);

  transform:
    translate(-50%, -50%)
    rotate(-18deg);

}


#app::after {

  width:
    min(560px, 90vw);

  height:
    min(900px, 130vh);

  border:
    1px dashed
    rgba(255, 255, 255, 0.08);

  transform:
    translate(-50%, -50%)
    rotate(20deg);

}


/* =========================================================
   LOGIN CARD
========================================================= */

#login-page {

  position:
    relative;

  width:
    min(100%, 380px);

  display:
    flex;

  flex-direction:
    column;

  gap:
    1rem;

  padding:
    2rem;

  background:
    rgba(24, 10, 32, 0.72);

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    18px;

  box-shadow:

    0 30px 80px
    rgba(0, 0, 0, 0.55),

    0 0 70px
    rgba(138, 58, 163, 0.25);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);

}


/* =========================================================
   STATUS DOT
========================================================= */

#login-page::after {

  content:
    "";

  position:
    absolute;

  top:
    16px;

  right:
    16px;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--red);

  box-shadow:
    0 0 10px 2px
    rgba(255, 77, 94, 0.7);

  animation:
    pulse
    2.4s
    ease-in-out
    infinite;

}


@keyframes pulse {

  0%,
  100% {

    opacity:
      1;

  }

  50% {

    opacity:
      0.35;

  }

}


/* =========================================================
   LOGIN FORM
========================================================= */

#login-form {

  display:
    flex;

  flex-direction:
    column;

  gap:
    0.75rem;

}


/* =========================================================
   INPUTS
========================================================= */

input,
button {

  font:
    inherit;

  padding:
    0.9rem
    1rem;

  border-radius:
    10px;

}


input {

  background:
    rgba(255, 255, 255, 0.04);

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  color:
    var(--text);

  transition:

    border-color 0.2s,

    box-shadow 0.2s,

    background-color 0.2s;

}


input::placeholder {

  color:
    #9d8aad;

}


input:hover {

  border-color:
    rgba(255, 255, 255, 0.22);

}


input:focus {

  outline:
    none;

  border-color:
    var(--lime);

  background:
    rgba(181, 240, 28, 0.04);

  box-shadow:
    0 0 0 3px
    rgba(181, 240, 28, 0.16);

}


/* =========================================================
   AUTOFILL
========================================================= */

input:-webkit-autofill {

  -webkit-text-fill-color:
    var(--text);

  box-shadow:
    0 0 0 100px
    #24102f
    inset;

  caret-color:
    var(--text);

}


/* =========================================================
   BUTTONS
========================================================= */

button {

  cursor:
    pointer;

  font-size:
    0.8rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

  border:
    1px solid
    transparent;

  transition:

    transform 0.15s,

    filter 0.2s,

    box-shadow 0.2s,

    border-color 0.2s,

    color 0.2s,

    background-color 0.2s;

}


button:active:not(:disabled) {

  transform:
    translateY(1px);

}


/* =========================================================
   LOGIN BUTTON
========================================================= */

#login-btn {

  background:
    linear-gradient(
      135deg,
      var(--lime-deep),
      var(--lime)
    );

  color:
    #10091a;

  box-shadow:
    0 10px 30px
    rgba(181, 240, 28, 0.25);

}


#login-btn:hover:not(:disabled) {

  filter:
    brightness(1.08);

  box-shadow:

    0 12px 38px
    rgba(181, 240, 28, 0.38);

}


/* =========================================================
   CREATE BUTTON
========================================================= */

#create-btn {

  background:
    rgba(138, 58, 163, 0.14);

  border-color:
    rgba(255, 255, 255, 0.14);

  color:
    #d9c8e4;

}


#create-btn:hover:not(:disabled) {

  border-color:
    var(--lime);

  color:
    var(--lime);

  background:
    rgba(181, 240, 28, 0.06);

}


/* =========================================================
   DISABLED BUTTON
========================================================= */

button:disabled {

  opacity:
    0.55;

  cursor:
    not-allowed;

}


button:focus-visible {

  outline:
    2px solid
    var(--lime);

  outline-offset:
    3px;

}


/* =========================================================
   LOGIN / REGISTER MESSAGE
========================================================= */

.login-message {

  margin:
    0;

  padding:
    0.7rem
    1rem;

  border:
    1px solid
    transparent;

  border-radius:
    10px;

  font-size:
    0.92rem;

  line-height:
    1.45;

}


.login-message.error {

  color:
    #ff8a95;

  background:
    rgba(255, 77, 94, 0.08);

  border-color:
    rgba(255, 77, 94, 0.45);

}


.login-message.success {

  color:
    var(--lime);

  background:
    rgba(181, 240, 28, 0.08);

  border-color:
    rgba(181, 240, 28, 0.4);

}


.login-message.show {

  animation:
    message-in
    0.3s
    ease;

}


@keyframes message-in {

  from {

    opacity:
      0;

    transform:
      translateY(-6px);

  }

  to {

    opacity:
      1;

    transform:
      none;

  }

}


/* =========================================================
   ERROR FIELD EFFECT
========================================================= */

#login-form:has(
  .login-message.error:not([hidden])
)
input:not(:focus) {

  border-color:
    rgba(255, 77, 94, 0.55);

}


/* =========================================================
   COMING SOON
========================================================= */

#coming-soon-page {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

}


#coming-soon-page h1 {

  margin:
    0;

  font-family:
    var(--font-display);

  font-weight:
    400;

  text-transform:
    uppercase;

  font-size:
    clamp(
      3rem,
      13vw,
      8.5rem
    );

  line-height:
    0.95;

  letter-spacing:
    -0.01em;

  color:
    var(--lime);

  text-shadow:

    0 0 28px
    rgba(181, 240, 28, 0.45),

    0 0 90px
    rgba(181, 240, 28, 0.2);

}


/* =========================================================
   SPIN
========================================================= */

#app.spinning {

  animation:
    spin
    var(--spin-time)
    cubic-bezier(
      0.12,
      0.6,
      0.15,
      1
    )
    forwards;

}


@keyframes spin {

  from {

    transform:
      rotate(0turn);

  }

  to {

    transform:
      rotate(var(--spin-turns));

  }

}


/* =========================================================
   LOGIN SUCCESS OVERLAY
========================================================= */

.login-success-overlay {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    rgba(2, 4, 3, 0.78);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

}


.login-success-overlay.active {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

}


/* =========================================================
   SUCCESS POPUP
========================================================= */

.login-success-popup {

  position:
    relative;

  width:
    min(400px, 90vw);

  min-height:
    360px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    40px 30px;

  overflow:
    hidden;

  border-radius:
    22px;

  background:

    radial-gradient(
      circle at 50% 35%,
      rgba(181, 240, 28, 0.08),
      transparent 45%
    ),

    linear-gradient(
      145deg,
      rgba(20, 31, 12, 0.98),
      rgba(7, 10, 6, 0.98)
    );

  border:
    1px solid
    rgba(181, 240, 28, 0.75);

  box-shadow:

    0 0 12px
    rgba(181, 240, 28, 0.75),

    0 0 35px
    rgba(181, 240, 28, 0.4),

    0 0 90px
    rgba(181, 240, 28, 0.18),

    inset 0 0 40px
    rgba(181, 240, 28, 0.04);

  transform:
    scale(0.65)
    translateY(20px);

  opacity:
    0;

  transition:

    transform
      0.5s
      cubic-bezier(
        0.17,
        0.89,
        0.32,
        1.28
      ),

    opacity
      0.3s
      ease;

}


.login-success-overlay.active
.login-success-popup {

  transform:
    scale(1)
    translateY(0);

  opacity:
    1;

}


/* =========================================================
   MOVING NEON BORDER
========================================================= */

.login-success-popup::before {

  content:
    "";

  position:
    absolute;

  inset:
    -2px;

  border-radius:
    24px;

  border:
    1px solid
    rgba(181, 240, 28, 0.95);

  box-shadow:

    0 0 8px
    var(--lime),

    0 0 22px
    rgba(181, 240, 28, 0.8),

    0 0 50px
    rgba(181, 240, 28, 0.35);

  opacity:
    0;

  animation:
    popup-border-pulse
    1.5s
    ease-in-out
    infinite
    alternate;

}


.login-success-overlay.active
.login-success-popup::before {

  opacity:
    1;

}


@keyframes popup-border-pulse {

  from {

    box-shadow:

      0 0 6px
      var(--lime),

      0 0 18px
      rgba(181, 240, 28, 0.55),

      0 0 35px
      rgba(181, 240, 28, 0.2);

  }

  to {

    box-shadow:

      0 0 12px
      var(--lime),

      0 0 30px
      rgba(181, 240, 28, 0.9),

      0 0 65px
      rgba(181, 240, 28, 0.4);

  }

}


/* =========================================================
   SUCCESS ICON
========================================================= */

.success-icon {

  position:
    relative;

  width:
    150px;

  height:
    150px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.success-svg {

  width:
    150px;

  height:
    150px;

  overflow:
    visible;

}


/* =========================================================
   SUCCESS CIRCLE
========================================================= */

.success-circle {

  fill:
    rgba(181, 240, 28, 0.025);

  stroke:
    var(--lime);

  stroke-width:
    4;

  stroke-linecap:
    round;

  stroke-dasharray:
    327;

  stroke-dashoffset:
    327;

  filter:

    drop-shadow(
      0 0 5px
      var(--lime)
    )

    drop-shadow(
      0 0 14px
      rgba(181, 240, 28, 0.9)
    );

}


.login-success-overlay.active
.success-circle {

  animation:

    draw-success-circle
    0.8s
    cubic-bezier(
      0.65,
      0,
      0.35,
      1
    )
    forwards;

}


@keyframes draw-success-circle {

  from {

    stroke-dashoffset:
      327;

  }

  to {

    stroke-dashoffset:
      0;

  }

}


/* =========================================================
   CHECK MARK
========================================================= */

.success-check {

  fill:
    none;

  stroke:
    var(--lime);

  stroke-width:
    7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  stroke-dasharray:
    100;

  stroke-dashoffset:
    100;

  filter:

    drop-shadow(
      0 0 6px
      var(--lime)
    )

    drop-shadow(
      0 0 15px
      rgba(181, 240, 28, 0.9)
    );

}


.login-success-overlay.active
.success-check {

  animation:

    draw-success-check
    0.28s
    cubic-bezier(
      0.15,
      0.8,
      0.25,
      1
    )
    0.78s
    forwards;

}


@keyframes draw-success-check {

  0% {

    stroke-dashoffset:
      100;

    opacity:
      1;

  }

  100% {

    stroke-dashoffset:
      0;

    opacity:
      1;

  }

}


/* =========================================================
   SUCCESS TITLE
========================================================= */

.success-title {

  margin-top:
    18px;

  color:
    #ffffff;

  font-family:
    var(--font-display);

  font-size:
    27px;

  font-weight:
    400;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  text-align:
    center;

  opacity:
    0;

  transform:
    translateY(10px);

  text-shadow:

    0 0 8px
    rgba(181, 240, 28, 0.8),

    0 0 25px
    rgba(181, 240, 28, 0.3);

}


.login-success-overlay.active
.success-title {

  animation:

    success-title-in
    0.35s
    ease
    1.02s
    forwards;

}


@keyframes success-title-in {

  from {

    opacity:
      0;

    transform:
      translateY(10px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* =========================================================
   SUCCESS SUBTITLE
========================================================= */

.success-subtitle {

  margin-top:
    8px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    14px;

  letter-spacing:
    0.04em;

  text-align:
    center;

  opacity:
    0;

}


.login-success-overlay.active
.success-subtitle {

  animation:

    success-subtitle-in
    0.3s
    ease
    1.12s
    forwards;

}


@keyframes success-subtitle-in {

  from {

    opacity:
      0;

  }

  to {

    opacity:
      1;

  }

}


/* =========================================================
   NEON LIGHT BURST
========================================================= */

.success-icon::before {

  content:
    "";

  position:
    absolute;

  width:
    80px;

  height:
    80px;

  border-radius:
    50%;

  background:
    rgba(181, 240, 28, 0.08);

  box-shadow:

    0 0 35px
    rgba(181, 240, 28, 0.18),

    0 0 80px
    rgba(181, 240, 28, 0.1);

  opacity:
    0;

  transform:
    scale(0.3);

  pointer-events:
    none;

}


.login-success-overlay.active
.success-icon::before {

  animation:

    success-light-burst
    0.7s
    ease-out
    0.65s
    forwards;

}


@keyframes success-light-burst {

  0% {

    opacity:
      0;

    transform:
      scale(0.3);

  }

  35% {

    opacity:
      1;

  }

  100% {

    opacity:
      0;

    transform:
      scale(1.8);

  }

}


/* =========================================================
   FULL SCREEN SYSTEM LOADING
========================================================= */

.system-loading-overlay {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    #050608;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;

}


.system-loading-overlay.active {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

}


/* =========================================================
   LOADING BACKGROUND
========================================================= */

.system-loading-overlay::before {

  content:
    "";

  position:
    absolute;

  inset:
    -20%;

  background:

    radial-gradient(
      circle at 50% 45%,
      rgba(181, 240, 28, 0.12),
      transparent 18%
    ),

    radial-gradient(
      circle at 50% 50%,
      rgba(138, 58, 163, 0.14),
      transparent 42%
    );

  animation:
    system-background-pulse
    3s
    ease-in-out
    infinite;

}


@keyframes system-background-pulse {

  0%,
  100% {

    transform:
      scale(1);

    opacity:
      0.65;

  }

  50% {

    transform:
      scale(1.08);

    opacity:
      1;

  }

}


/* =========================================================
   SYSTEM CONTAINER
========================================================= */

.system-loading-container {

  position:
    relative;

  z-index:
    2;

  width:
    min(680px, 90vw);

  min-height:
    620px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    50px 35px;

}


/* =========================================================
   DIGITAL GRID
========================================================= */

.system-grid {

  position:
    absolute;

  inset:
    -50%;

  opacity:
    0.22;

  background-image:

    linear-gradient(
      rgba(181, 240, 28, 0.08)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(181, 240, 28, 0.08)
      1px,
      transparent 1px
    );

  background-size:
    45px 45px;

  transform:
    perspective(500px)
    rotateX(65deg)
    translateY(25%);

  animation:
    system-grid-move
    4s
    linear
    infinite;

  pointer-events:
    none;

}


@keyframes system-grid-move {

  from {

    background-position:
      0 0;

  }

  to {

    background-position:
      0 90px;

  }

}


/* =========================================================
   SCANLINES
========================================================= */

.system-scanlines {

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.08;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.12) 4px,
      transparent 5px
    );

  animation:
    scanlines
    0.15s
    linear
    infinite;

}


@keyframes scanlines {

  from {

    transform:
      translateY(0);

  }

  to {

    transform:
      translateY(5px);

  }

}


/* =========================================================
   CENTRAL LOADER
========================================================= */

.system-loader {

  position:
    relative;

  width:
    230px;

  height:
    230px;

  margin-bottom:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  filter:
    drop-shadow(
      0 0 18px
      rgba(181, 240, 28, 0.25)
    );

}


/* =========================================================
   LOADER RINGS
========================================================= */

.system-loader-ring {

  position:
    absolute;

  border-radius:
    50%;

  pointer-events:
    none;

}


.system-loader-ring-outer {

  width:
    220px;

  height:
    220px;

  border:
    1px solid
    rgba(181, 240, 28, 0.2);

  border-top:
    2px solid
    var(--lime);

  border-right:
    1px solid
    rgba(181, 240, 28, 0.1);

  animation:
    loader-outer
    3s
    linear
    infinite;

}


.system-loader-ring-middle {

  width:
    175px;

  height:
    175px;

  border:
    2px dashed
    rgba(181, 240, 28, 0.4);

  border-left-color:
    var(--lime);

  animation:
    loader-middle
    2.2s
    linear
    infinite reverse;

}


.system-loader-ring-inner {

  width:
    130px;

  height:
    130px;

  border:
    2px solid
    rgba(138, 58, 163, 0.7);

  border-bottom-color:
    var(--lime);

  border-top-color:
    transparent;

  box-shadow:
    inset 0 0 25px
    rgba(181, 240, 28, 0.08);

  animation:
    loader-inner
    1.4s
    linear
    infinite;

}


@keyframes loader-outer {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


@keyframes loader-middle {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


@keyframes loader-inner {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================================
   LOADER CORE
========================================================= */

.system-loader-core {

  width:
    65px;

  height:
    65px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(181, 240, 28, 0.18),
      rgba(181, 240, 28, 0.02) 60%,
      transparent 70%
    );

  border:
    1px solid
    rgba(181, 240, 28, 0.7);

  box-shadow:

    0 0 15px
    rgba(181, 240, 28, 0.7),

    0 0 45px
    rgba(181, 240, 28, 0.25),

    inset 0 0 20px
    rgba(181, 240, 28, 0.15);

  animation:
    core-pulse
    1.2s
    ease-in-out
    infinite;

}


.system-loader-core-dot {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    var(--lime);

  box-shadow:

    0 0 10px
    var(--lime),

    0 0 25px
    var(--lime),

    0 0 45px
    rgba(181, 240, 28, 0.7);

}


@keyframes core-pulse {

  0%,
  100% {

    transform:
      scale(0.88);

    box-shadow:

      0 0 15px
      rgba(181, 240, 28, 0.7),

      0 0 45px
      rgba(181, 240, 28, 0.25),

      inset 0 0 20px
      rgba(181, 240, 28, 0.15);

  }

  50% {

    transform:
      scale(1.08);

    box-shadow:

      0 0 25px
      rgba(181, 240, 28, 0.95),

      0 0 70px
      rgba(181, 240, 28, 0.4),

      inset 0 0 30px
      rgba(181, 240, 28, 0.25);

  }

}


/* =========================================================
   SYSTEM HEADER
========================================================= */

.system-loading-header {

  color:
    var(--lime);

  font-family:
    var(--font-display);

  font-size:
    18px;

  letter-spacing:
    0.5em;

  text-transform:
    uppercase;

  text-shadow:

    0 0 8px
    rgba(181, 240, 28, 0.9),

    0 0 25px
    rgba(181, 240, 28, 0.35);

  margin-bottom:
    8px;

  animation:
    system-text-flicker
    2.4s
    ease-in-out
    infinite;

}


/* =========================================================
   SYSTEM TITLE
========================================================= */

.system-loading-title {

  color:
    #ffffff;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      27px,
      5vw,
      42px
    );

  letter-spacing:
    0.08em;

  text-align:
    center;

  text-transform:
    uppercase;

  text-shadow:

    0 0 8px
    rgba(181, 240, 28, 0.7),

    0 0 30px
    rgba(181, 240, 28, 0.25);

}


/* =========================================================
   SYSTEM STATUS
========================================================= */

.system-loading-status {

  margin-top:
    8px;

  min-height:
    22px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    13px;

  letter-spacing:
    0.04em;

  text-align:
    center;

}


/* =========================================================
   PROGRESS
========================================================= */

.system-progress-wrapper {

  width:
    min(520px, 100%);

  margin-top:
    28px;

}


.system-progress-track {

  position:
    relative;

  width:
    100%;

  height:
    5px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.08);

  box-shadow:
    inset
    0 0 8px
    rgba(0, 0, 0, 0.7);

}


.system-progress-bar {

  position:
    relative;

  width:
    0%;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--lime-deep),
      var(--lime)
    );

  box-shadow:

    0 0 10px
    rgba(181, 240, 28, 0.8),

    0 0 25px
    rgba(181, 240, 28, 0.4);

  transition:
    width 0.08s linear;

}


.system-progress-bar::after {

  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    80px;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.85),
      transparent
    );

  animation:
    progress-shine
    1s
    linear
    infinite;

}


@keyframes progress-shine {

  from {

    transform:
      translateX(-100px);

  }

  to {

    transform:
      translateX(100px);

  }

}


.system-progress-info {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    9px;

  color:
    rgba(255, 255, 255, 0.45);

  font-family:
    monospace;

  font-size:
    11px;

  letter-spacing:
    0.14em;

}


#system-progress-percent {

  color:
    var(--lime);

  text-shadow:
    0 0 8px
    rgba(181, 240, 28, 0.6);

}


/* =========================================================
   SYSTEM LOG
========================================================= */

.system-log {

  width:
    min(520px, 100%);

  margin-top:
    25px;

  padding:
    13px 16px;

  border-left:
    2px solid
    rgba(181, 240, 28, 0.45);

  background:
    rgba(181, 240, 28, 0.025);

  font-family:
    monospace;

  font-size:
    11px;

  line-height:
    1.8;

  color:
    rgba(255, 255, 255, 0.3);

}


.system-log-line {

  opacity:
    0.25;

  transform:
    translateX(-8px);

  transition:

    opacity 0.3s ease,

    transform 0.3s ease;

}


.system-log-line.active {

  opacity:
    1;

  transform:
    translateX(0);

  color:
    rgba(181, 240, 28, 0.8);

  text-shadow:
    0 0 8px
    rgba(181, 240, 28, 0.25);

}


/* =========================================================
   SYSTEM FOOTER
========================================================= */

.system-loading-footer {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    24px;

  color:
    rgba(255, 255, 255, 0.35);

  font-family:
    monospace;

  font-size:
    10px;

  letter-spacing:
    0.18em;

}


.system-status-dot {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--lime);

  box-shadow:

    0 0 8px
    var(--lime),

    0 0 16px
    rgba(181, 240, 28, 0.5);

  animation:
    status-dot
    1s
    ease-in-out
    infinite;

}


@keyframes status-dot {

  0%,
  100% {

    opacity:
      1;

    transform:
      scale(1);

  }

  50% {

    opacity:
      0.3;

    transform:
      scale(0.75);

  }

}


/* =========================================================
   SYSTEM TEXT FLICKER
========================================================= */

@keyframes system-text-flicker {

  0%,
  100% {

    opacity:
      1;

  }

  48% {

    opacity:
      1;

  }

  50% {

    opacity:
      0.55;

  }

  52% {

    opacity:
      1;

  }

}


/* =========================================================
   SYSTEM LOADING EXIT
========================================================= */

.system-loading-overlay.closing {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #app.spinning {

    animation:
      fade
      0.4s
      ease
      forwards;

  }


  @keyframes fade {

    from {

      opacity:
        1;

    }

    to {

      opacity:
        0;

    }

  }


  .login-message.show,
  #login-page::after {

    animation:
      none;

  }


  .login-success-overlay.active
  .success-circle {

    animation:
      none;

    stroke-dashoffset:
      0;

  }


  .login-success-overlay.active
  .success-check {

    animation:
      none;

    stroke-dashoffset:
      0;

  }


  .system-loader-ring,
  .system-loader-core,
  .system-grid,
  .system-scanlines {

    animation:
      none;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  #login-page {

    width:
      min(100%, 350px);

    padding:
      1.5rem;

  }


  .login-success-popup {

    width:
      min(92vw, 360px);

    min-height:
      330px;

    padding:
      30px 20px;

  }


  .success-icon,
  .success-svg {

    width:
      135px;

    height:
      135px;

  }


  .success-title {

    font-size:
      23px;

  }


  .system-loading-container {

    min-height:
      100vh;

    width:
      94vw;

    padding:
      30px 18px;

  }


  .system-loader {

    width:
      190px;

    height:
      190px;

    margin-bottom:
      22px;

  }


  .system-loader-ring-outer {

    width:
      185px;

    height:
      185px;

  }


  .system-loader-ring-middle {

    width:
      150px;

    height:
      150px;

  }


  .system-loader-ring-inner {

    width:
      112px;

    height:
      112px;

  }


  .system-loader-core {

    width:
      56px;

    height:
      56px;

  }


  .system-loading-header {

    font-size:
      14px;

    letter-spacing:
      0.35em;

  }


  .system-loading-title {

    font-size:
      25px;

  }


  .system-loading-status {

    font-size:
      11px;

  }


  .system-progress-wrapper {

    margin-top:
      22px;

  }


  .system-log {

    margin-top:
      20px;

    font-size:
      9px;

  }

}