:root {
  --wf-bg: #f4f7fb;
  --wf-surface: #ffffff;
  --wf-text: #111827;
  --wf-muted: #4b5563;
  --wf-primary: #0d7fc9;
  --wf-primary-2: #39a6e6;
  --wf-primary-dark: #0b5f95;
  --wf-border: #dbe5f0;
  --wf-code-bg: #eef5fb;
}

body {
  background: radial-gradient(circle at top left, #eefaf8 0%, var(--wf-bg) 45%);
  color: var(--wf-text);
}

.container {
  max-width: 1160px;
}

.navbar {
  background: linear-gradient(90deg, var(--wf-primary-dark) 0%, var(--wf-primary) 55%, var(--wf-primary-2) 100%);
  border: 0;
  box-shadow: 0 8px 22px rgba(11, 95, 149, 0.24);
}

.navbar a,
.navbar-brand {
  color: #f8fafc !important;
  letter-spacing: 0.1px;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  background: rgba(255, 255, 255, 0.14) !important;
}

.navbar .dropdown-menu {
  background: #ffffff;
  border: 1px solid #c9d8e6;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  padding: 8px;
  min-width: 260px;
}

.navbar .dropdown-menu > li > a {
  color: #0f172a !important;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 600;
}

.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus {
  background: #e9f5fe !important;
  color: var(--wf-primary-dark) !important;
  text-decoration: none;
}

.navbar .dropdown-menu > .active > a,
.navbar .dropdown-menu > .active > a:hover,
.navbar .dropdown-menu > .active > a:focus {
  background: var(--wf-primary) !important;
  color: #ffffff !important;
}

.bs-sidebar {
  background: var(--wf-surface);
  border: 1px solid var(--wf-border);
  border-radius: 12px;
  padding: 10px;
}

.bs-sidebar .nav > li > a {
  border-radius: 8px;
  color: #334155;
  margin-bottom: 4px;
}

.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li.active > a {
  background: #e6fffb;
  color: #115e59;
}

.col-md-9[role='main'] {
  background: var(--wf-surface);
  border: 1px solid var(--wf-border);
  border-radius: 14px;
  padding: 28px 34px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

h1,
h2,
h3,
h4 {
  color: #0f172a;
  font-weight: 700;
}

h1 {
  border-bottom: 2px solid #d8edea;
  padding-bottom: 10px;
}

a {
  color: #0f766e;
  text-decoration: none;
}

a:hover {
  color: #0a5b56;
  text-decoration: underline;
}

pre,
code {
  border-radius: 8px;
}

code {
  background: var(--wf-code-bg);
  color: #0b3b4f;
  padding: 2px 6px;
}

pre code {
  background: transparent;
  color: #e2e8f0;
}

pre {
  background: #102a43;
  border: 0;
  padding: 14px;
}

table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--wf-border);
}

table thead {
  background: #e6fffb;
}

table th,
table td {
  border-color: var(--wf-border) !important;
}

blockquote {
  border-left: 4px solid var(--wf-primary);
  background: #ecfeff;
  border-radius: 8px;
  padding: 10px 14px;
}

@media (max-width: 991px) {
  .col-md-9[role='main'] {
    padding: 20px;
  }
}