:root {
  --kf-bg: #0b0708;
  --kf-panel: #120a0b;
  --kf-panel-2: #1a0d0f;
  --kf-border: rgba(255, 255, 255, 0.1);
  --kf-blood: #b0121b;
  --kf-blood-2: #7f0b12;
  --kf-blood-3: #ff5a63;
  --kf-text: rgba(255, 255, 255, 0.92);
  --kf-text-muted: rgba(255, 255, 255, 0.72);
  --bs-body-bg: var(--kf-bg);
  --bs-body-color: var(--kf-text);
  --bs-secondary-color: var(--kf-text-muted);
  --bs-primary: var(--kf-blood);
  --bs-link-color: var(--kf-blood-3);
  --bs-link-hover-color: #ff8a90;
}

body {
  min-height: 100vh;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;

  background-image: url("/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: brightness(0.55) contrast(0.95) saturate(0.95) blur(1px);
  transform: scale(1.02);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: radial-gradient(
    1200px 700px at 50% 20%,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.78) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

.navbar {
  border-color: var(--kf-blood-2) !important;
}

.navbar .logo {
  display: block;
  height: 64px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}

@media (min-width: 768px) {
  .navbar .logo { height: 88px; }
}


.muted {
  color: var(--kf-text-muted);
}

.card {
  background: var(--kf-panel);
  border-color: var(--kf-border);
}

.table {
  --bs-table-color: var(--kf-text);
  --bs-table-striped-color: var(--kf-text);
  --bs-table-hover-color: var(--kf-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
}

.table td,
.table th {
  border-color: var(--kf-border);
}

code {
  color: var(--kf-blood-3);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
}

.text-info {
  color: var(--kf-blood-3) !important;
}

.form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--kf-text);
  border-color: rgba(255, 255, 255, 0.14);
}

.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--kf-text);
  border-color: rgba(255, 90, 99, 0.55);
  box-shadow: 0 0 0 0.25rem rgba(255, 90, 99, 0.12);
}

.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--kf-blood);
  --bs-btn-border-color: var(--kf-blood);
  --bs-btn-hover-bg: var(--kf-blood-2);
  --bs-btn-hover-border-color: var(--kf-blood-2);
  --bs-btn-active-bg: var(--kf-blood-2);
  --bs-btn-active-border-color: var(--kf-blood-2);
}

.sticky-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.k-num {
  font-variant-numeric: tabular-nums;
}

.perk-header button {
  text-decoration: none;
}

#uploadForm label {
  border-style: dashed !important; border-color: var(--kf-border) !important; background: rgba(255,255,255,.03); cursor: pointer;
}

#uploadStatus {
  display: none;
}