:root {
  --vtr-navy: #061426;
  --vtr-blue: #0768e9;
  --vtr-cyan: #12c8f4;
  --vtr-line: rgba(18, 200, 244, .28);
}

body.task-login {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(7, 104, 233, .28), transparent 34rem),
    radial-gradient(circle at 82% 74%, rgba(18, 200, 244, .16), transparent 30rem),
    linear-gradient(145deg, #020914 0%, var(--vtr-navy) 52%, #071d35 100%);
}

body.task-login #layout {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

html:has(body.task-login),
.task-login #layout-content {
  background: transparent !important;
}

body.task-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(18, 200, 244, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 200, 244, .08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}

.vtr-code-scene {
  display: none;
}

.task-login .vtr-code-scene {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(4, 19, 37, .18), rgba(2, 9, 20, .82) 72%),
    linear-gradient(145deg, #020914, #061426 52%, #071d35);
}

.task-login .vtr-code-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(18, 200, 244, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 200, 244, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(58deg) scale(1.5) translateY(18%);
  transform-origin: center bottom;
  animation: vtr-grid-flow 9s linear infinite;
}

.vtr-code-rain {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: rgba(77, 211, 255, .34);
  font: 500 .82rem/1.35 Consolas, Monaco, monospace;
  text-shadow: 0 0 10px rgba(18, 200, 244, .42);
  white-space: nowrap;
  animation: vtr-code-rise 15s linear infinite;
}

.vtr-code-rain-a { left: 4%; top: 84%; }
.vtr-code-rain-b { right: 4%; top: 70%; animation-delay: -6s; animation-duration: 18s; }
.vtr-code-rain-c { left: 68%; top: 105%; animation-delay: -11s; animation-duration: 21s; }

.vtr-tech-symbol {
  position: absolute;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(18, 200, 244, .34);
  border-radius: 18px;
  color: rgba(151, 231, 255, .68);
  background: rgba(7, 104, 233, .08);
  box-shadow: inset 0 0 22px rgba(18, 200, 244, .08), 0 0 24px rgba(7, 104, 233, .12);
  font: 700 .82rem Consolas, Monaco, monospace;
  animation: vtr-symbol-float 6s ease-in-out infinite;
}

.symbol-a { left: 10%; top: 18%; }
.symbol-b { right: 12%; top: 13%; animation-delay: -1.4s; }
.symbol-c { left: 14%; bottom: 15%; animation-delay: -2.8s; }
.symbol-d { right: 15%; bottom: 17%; animation-delay: -4.2s; }
.symbol-e { right: 31%; top: 10%; animation-delay: -3.3s; }

@keyframes vtr-grid-flow {
  to { background-position: 0 44px, 44px 0; }
}

@keyframes vtr-code-rise {
  from { transform: translateY(0); opacity: 0; }
  12%, 82% { opacity: 1; }
  to { transform: translateY(-125vh); opacity: 0; }
}

@keyframes vtr-symbol-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

.task-login #layout-content {
  color: #dbeafe;
}

.task-login #logo {
  width: min(500px, 86vw);
  height: auto;
  max-height: 215px;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .46));
}

.task-login #login-form {
  width: min(390px, 88vw);
  padding: 1.7rem;
  border: 1px solid var(--vtr-line);
  border-radius: 20px;
  background: rgba(5, 20, 38, .86);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  backdrop-filter: blur(18px);
}

.task-login #login-form::before {
  content: "Acesso seguro ao email";
  display: block;
  margin: 0 0 1rem;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 700;
  text-align: center;
}

.task-login .input-group {
  margin-bottom: .8rem;
}

.task-login .form-control,
.task-login .input-group-text {
  min-height: 46px;
  color: #eaf7ff;
  border-color: rgba(148, 197, 231, .24);
  background: rgba(255, 255, 255, .07);
}

.task-login .form-control::placeholder {
  color: #9fb5ca;
}

.task-login .btn-primary,
.task-login .button.mainaction {
  min-height: 46px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--vtr-blue), var(--vtr-cyan));
  box-shadow: 0 10px 28px rgba(7, 104, 233, .32);
  font-weight: 700;
}

.task-login #login-footer,
.task-login #login-footer a {
  color: #91abc2;
}

#taskmenu,
#layout-menu {
  background: linear-gradient(180deg, var(--vtr-navy), #092341);
}

#taskmenu a.selected,
#taskmenu a:hover,
#layout-menu .popover-header {
  background-color: rgba(18, 200, 244, .16);
}

.btn-primary,
.button.mainaction {
  border-color: var(--vtr-blue);
  background-color: var(--vtr-blue);
}

.listing li.selected,
.listing tr.selected td,
.menu a.active,
.navlist li.selected > a {
  background-color: rgba(7, 104, 233, .14);
}

@media (max-width: 600px) {
  .task-login #logo {
    width: min(360px, 88vw);
  }

  .task-login #login-form {
    padding: 1.25rem;
  }

  .vtr-code-rain-c,
  .symbol-c,
  .symbol-d,
  .symbol-e {
    display: none;
  }

  .vtr-code-rain {
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-login .vtr-code-scene::before,
  .vtr-code-rain,
  .vtr-tech-symbol {
    animation: none;
  }
}