html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--hk-bg);
  color: var(--hk-text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--hk-font-size-base);
  line-height: 1.45;
}

a {
  color: var(--hk-primary);
  text-decoration: none;
}

a:hover {
  color: var(--hk-primary-hover);
}

.form-control,
.form-select {
  min-height: var(--hk-input-height);
  border-color: var(--hk-border);
  border-radius: var(--hk-radius-md);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(31, 78, 121, 0.4);
  box-shadow: 0 0 0 0.2rem rgba(31, 78, 121, 0.08);
}

.form-label {
  font-size: var(--hk-font-size-sm);
  font-weight: 600;
  margin-bottom: 6px;
}

.btn {
  border-radius: var(--hk-radius-md);
  min-height: var(--hk-btn-height);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
}

/* Stage UX: buttons and text alignment */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--hk-btn-height);
  padding: 0 14px;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.1;
}

.btn-outline-secondary {
  background: #f3f6f9;
  border-color: #b8c4d1;
  color: #445566;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background: #e7edf3;
  border-color: #95a7ba;
  color: #2f4050;
}

.btn-outline-primary {
  background: #eef5ff;
  border-color: #6fa0ff;
  color: #1659d4;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: #dfeeff;
  border-color: #4f88f0;
  color: #0d49b4;
}

.btn-outline-warning {
  background: #fff7e6;
  border-color: #e5b84f;
  color: #ad7a00;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
  background: #ffefcc;
  border-color: #d0a43d;
  color: #8c6200;
}

.btn-outline-danger {
  background: #fff1f1;
  border-color: #df8f8f;
  color: #c33a3a;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
  background: #ffe4e4;
  border-color: #d26f6f;
  color: #a62828;
}

.btn-outline-success {
  background: #ecfbf1;
  border-color: #73c48f;
  color: #1d8a49;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  background: #dff7e7;
  border-color: #53b374;
  color: #176f3a;
}

.btn-outline-info {
  background: #edf9fd;
  border-color: #6cb8cf;
  color: #0b7694;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
  background: #ddf2f8;
  border-color: #4da4bd;
  color: #075f79;
}