:root {
  --wicsora-bg: #070b14;
  --wicsora-panel: rgba(15, 23, 40, 0.96);
  --wicsora-line: #2b3751;
  --wicsora-text: #f7f8ff;
  --wicsora-muted: #a3aec0;
  --wicsora-violet: #7848ff;
  --wicsora-cyan: #1fa9ff;
}

html,
body,
.login-pf {
  min-height: 100%;
  background: var(--wicsora-bg) !important;
}

.login-pf body {
  background:
    radial-gradient(circle at 18% 8%, rgba(77, 53, 167, 0.38), transparent 35%),
    radial-gradient(circle at 88% 90%, rgba(20, 130, 188, 0.18), transparent 32%),
    var(--wicsora-bg) !important;
  color: var(--wicsora-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pf-v5-c-login__container {
  grid-template-columns: minmax(0, 470px) !important;
  justify-content: center;
  padding: 5vh 20px;
}

.pf-v5-c-login__header {
  margin-bottom: 24px;
}

#kc-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--wicsora-text);
  font-size: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#kc-header-wrapper::before {
  width: 58px;
  height: 38px;
  content: "";
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 42'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23168cff'/%3E%3Cstop offset='.52' stop-color='%237045ff'/%3E%3Cstop offset='1' stop-color='%23ec32e8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M2 5C.4 2.3 2.3 0 5.4 0h8.8c2 0 3.8 1 4.8 2.8L32 25.4 45 2.8A5.6 5.6 0 0 1 49.8 0h8.8c3.1 0 5 2.3 3.4 5L37 39a6 6 0 0 1-10 0L2 5Z'/%3E%3Cpath fill='%237345ff' d='M22.2 8.2c-1.2-2.1.3-4.7 2.7-4.7h14.2c2.4 0 3.9 2.6 2.7 4.7l-7.1 12.3a3.1 3.1 0 0 1-5.4 0L22.2 8.2Z'/%3E%3C/svg%3E");
}

#kc-header-wrapper::after {
  content: "Wicsora Access";
  font-size: 25px;
}

.pf-v5-c-login__main {
  overflow: hidden;
  border: 1px solid var(--wicsora-line);
  border-radius: 24px;
  background: var(--wicsora-panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  background: transparent;
}

.pf-v5-c-title,
.pf-v5-c-form__label,
.pf-v5-c-check__label {
  color: var(--wicsora-text) !important;
}

.pf-v5-c-form-control,
.pf-v5-c-input-group__item {
  border-color: #3c4963 !important;
  background: #0a1221 !important;
  color: var(--wicsora-text) !important;
}

.pf-v5-c-button.pf-m-primary {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #4a67f3, var(--wicsora-violet));
  box-shadow: 0 12px 34px rgba(110, 70, 255, 0.24);
  font-weight: 700;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: linear-gradient(135deg, #5576ff, #8a5aff);
}

a,
a:hover {
  color: #a998ff;
}

.pf-v5-c-form__helper-text,
.pf-v5-c-login__main-footer,
.pf-v5-c-helper-text {
  color: var(--wicsora-muted);
}

@media (max-width: 520px) {
  .pf-v5-c-login__container {
    padding: 24px 14px;
  }

  .pf-v5-c-login__main {
    border-radius: 18px;
  }
}