:root {
  --ke-black: #1a1a1a;
  --ke-red: #b02318;
  --ke-green: #0a7d33;
  --ke-blue: #eef4fb;
  --ke-ink: #2b2b2b;
  --ke-muted: #6c6a63;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--ke-ink);
  background: var(--ke-blue);
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
.brand {
  font-weight: 700;
  letter-spacing: -.01em;
}

.brand-flag {
  display: inline-flex;
  gap: 3px;
  margin-right: 8px;
}

.brand-flag span {
  width: 4px;
  height: 22px;
  border-radius: 2px;
}

.text-red {
  color: var(--ke-red) !important;
}

.text-green {
  color: var(--ke-green) !important;
}

.text-muted-ke {
  color: var(--ke-muted) !important;
}

.btn-green {
  background: var(--ke-green);
  border-color: var(--ke-green);
  color: #fff;
  font-weight: 500;
}

.btn-green:hover {
  background: #086628;
  border-color: #086628;
  color: #fff;
}

.btn-green:disabled {
  background: #6fb488;
  border-color: #6fb488;
}

.btn-outline-green {
  border-color: var(--ke-green);
  color: var(--ke-green);
  font-weight: 500;
}

.btn-outline-green:hover {
  background: var(--ke-green);
  color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ke-green);
  box-shadow: 0 0 0 .2rem rgba(10, 125, 51, .15);
}

.form-check-input:checked {
  background-color: var(--ke-green);
  border-color: var(--ke-green);
}

.hero-stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--ke-black) 0 33.3%, var(--ke-red) 33.3% 66.6%, var(--ke-green) 66.6% 100%);
}

.auth-card {
  background: #fff;
  border: 1px solid #d7e3f0;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(20, 50, 90, .08);
}

.nav-pills .nav-link {
  color: var(--ke-ink);
  font-weight: 500;
}

.nav-pills .nav-link.active {
  background: var(--ke-green);
  color: #fff;
}

.side-panel {
  background: var(--ke-black);
  color: #fff;
  border-radius: 18px 0 0 18px;
}

.side-panel .point {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.side-panel .point i {
  color: #6fd08c;
  margin-top: 3px;
}

#su_knec {
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width:991px) {
  .side-panel {
    border-radius: 18px 18px 0 0;
  }
}