:root {
  --uc-bg: #06080d;
  --uc-panel: rgba(11, 16, 25, .94);
  --uc-panel-soft: rgba(17, 24, 36, .88);
  --uc-line: rgba(53, 238, 201, .2);
  --uc-cyan: #35eec9;
  --uc-cyan-soft: #82ffe7;
  --uc-pink: #fe4da7;
  --uc-text: #e8fff9;
  --uc-muted: #829b99;
}

html, body {
  background: var(--uc-bg);
  color: var(--uc-text);
}

body {
  background-image:
    linear-gradient(rgba(53, 238, 201, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 238, 201, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(24, 99, 91, .24), transparent 43%);
  background-size: 36px 36px, 36px 36px, auto;
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content,
.popover,
.menu.pagenav,
.listing li,
.listing tbody td,
.listing tbody th {
  background-color: var(--uc-panel);
  border-color: var(--uc-line);
}

#layout-menu {
  background: #080c13;
  box-shadow: inset -1px 0 rgba(53, 238, 201, .14);
}

a,
.listing li.selected > a,
.listing tr.selected td,
.menu a:hover,
.menu a:focus {
  color: var(--uc-cyan-soft);
}

.btn-primary,
button.mainaction,
input.button.mainaction {
  background: linear-gradient(110deg, #10a98d, var(--uc-cyan));
  border: 0;
  color: #02100d;
  box-shadow: 0 0 22px rgba(53, 238, 201, .18);
  font-weight: 700;
}

.btn-primary:hover,
button.mainaction:hover,
input.button.mainaction:hover {
  background: var(--uc-cyan-soft);
  color: #020a09;
}

input,
select,
textarea,
.form-control {
  background-color: rgba(2, 6, 11, .88) !important;
  border-color: rgba(53, 238, 201, .28) !important;
  color: var(--uc-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--uc-cyan) !important;
  box-shadow: 0 0 0 .18rem rgba(53, 238, 201, .12) !important;
}

body.task-login {
  min-height: 100vh;
  overflow: hidden;
}

body.task-login::before,
body.task-login::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.task-login::before {
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, .2) 50%);
  background-size: 100% 4px;
  opacity: .3;
  z-index: 4;
}

body.task-login::after {
  background: radial-gradient(circle at center, transparent 25%, rgba(0, 0, 0, .72) 100%);
}

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

.task-login #login-form {
  width: min(390px, calc(100vw - 40px));
  padding: 38px 36px 34px;
  background: linear-gradient(145deg, rgba(13, 20, 30, .96), rgba(5, 9, 15, .96));
  border: 1px solid rgba(53, 238, 201, .27);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 0 45px rgba(53, 238, 201, .07);
}

.task-login #login-form::before {
  content: 'ultracyborg';
  display: block;
  width: max-content;
  margin: 0 0 29px 50%;
  color: var(--uc-text);
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1;
  text-align: center;
  text-transform: lowercase;
  text-shadow: 2px 0 var(--uc-pink), -2px 0 var(--uc-cyan), 0 0 24px rgba(53, 238, 201, .32);
  transform: translateX(-50%);
  animation: uc-glitch 4.8s infinite steps(1, end);
}

.task-login #logo {
  display: none !important;
}

.task-login .form-group {
  margin-bottom: 17px;
}

.task-login label {
  color: var(--uc-muted);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.task-login input {
  min-height: 46px;
  border-radius: 7px;
}

.task-login button {
  min-height: 46px;
  border-radius: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.task-login #login-footer,
.task-login .support-link,
.task-login .productname {
  color: var(--uc-muted);
}

@keyframes uc-glitch {
  0%, 89%, 100% { transform: translateX(-50%); filter: none; }
  90% { transform: translate(calc(-50% - 2px), 1px); filter: hue-rotate(20deg); }
  91% { transform: translate(calc(-50% + 3px), -1px); }
  92% { transform: translate(calc(-50% - 1px), 0); }
  93% { transform: translateX(-50%); filter: none; }
}

@media (max-width: 480px) {
  .task-login #login-form {
    padding: 31px 24px 28px;
  }
}