:root {
  --sec-bg: #0f172a;
  --sec-panel: rgba(15, 23, 42, 0.88);
  --sec-accent: #38bdf8;
  --sec-accent-2: #22c55e;
}

html,
body.task-login,
body.task-login #layout {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 20%, rgba(56, 189, 248, .22), transparent 32rem),
    radial-gradient(circle at 86% 72%, rgba(34, 197, 94, .14), transparent 28rem),
    linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%);
}

.task-login #layout-content {
  min-height: 100vh;
  background: transparent;
}

.task-login #logo {
  max-height: 118px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
}

#login-form {
  max-width: 380px;
  padding: 1.35rem 1.25rem 1rem;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 28px 90px rgba(2, 6, 23, .55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#login-form .form-control {
  border-radius: 12px;
}

#login-form label,
#login-form .input-group-text,
#login-footer {
  color: rgba(226, 232, 240, .88);
}

#rcmloginsubmit,
.btn-primary {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284c7, #16a34a) !important;
  box-shadow: 0 10px 24px rgba(2, 132, 199, .28);
}

#rcmloginsubmit:hover,
.btn-primary:hover {
  filter: brightness(1.08);
}

#login-footer > div {
  background: rgba(2, 6, 23, .32);
  color: rgba(226, 232, 240, .72);
}

#layout-menu,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header {
  border-color: rgba(56, 189, 248, .18);
}

#taskmenu a.selected,
#taskmenu a:hover {
  color: #38bdf8;
}

.button.mainaction,
input.button.mainaction {
  background: linear-gradient(135deg, #0284c7, #16a34a) !important;
  border-color: transparent !important;
}

@media screen and (max-width: 480px) {
  #login-form {
    max-width: calc(100% - 2rem);
    border-radius: 18px;
  }
  .task-login #logo {
    max-width: 78%;
  }
}