/* Octo Code (varian terang) — tema RJA Mitra Management System.
   Struktur, spasi, radius, dan tipografi mengikuti octo-code-DESIGN.md;
   hanya token warnanya yang dipetakan ke palet terang. */

:root,
[data-bs-theme='light'] {
  /* Palet */
  --octo-bg: #f6f8fa;
  --octo-surface: #ffffff;
  --octo-overlay: #ffffff;
  --octo-modal: #ffffff;
  --octo-input: #ffffff;
  --octo-subtle: #f6f8fa;
  --octo-border: #d0d7de;
  --octo-border-hover: #afb8c1;
  --octo-text: #1f2328;
  --octo-text-muted: #59636e;
  --octo-placeholder: #818b98;
  --octo-primary: #0969da;
  --octo-primary-hover: #0550ae;
  --octo-link: #0969da;
  --octo-green: #1f883d;
  --octo-green-hover: #1a7f37;
  --octo-success: #1a7f37;
  --octo-warning: #9a6700;
  --octo-danger: #cf222e;
  --octo-accent: #fd8c73;

  /* Di tema terang, kedalaman butuh bayangan halus — permukaan putih di atas
     kanvas abu tidak cukup memisahkan popover dan modal. */
  --octo-shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
  --octo-shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15);
  --octo-shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);

  /* Bootstrap remap */
  --bs-body-bg: var(--octo-bg);
  --bs-body-color: var(--octo-text);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-font-monospace: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --bs-border-color: var(--octo-border);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-primary: var(--octo-primary);
  --bs-primary-rgb: 9, 105, 218;
  --bs-link-color: var(--octo-link);
  --bs-link-hover-color: var(--octo-primary-hover);
  --bs-secondary-color: var(--octo-text-muted);
  --bs-secondary-bg: var(--octo-subtle);
  --bs-tertiary-bg: var(--octo-subtle);
  --bs-emphasis-color: #000;
  --bs-heading-color: var(--octo-text);
}

body {
  background-color: var(--octo-bg);
  color: var(--octo-text);
  font-family: var(--bs-body-font-family);
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
}

/* Bobot maksimum 600 — antarmuka harus terasa presisi, bukan berteriak. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--octo-text);
}

h1, .h1 { font-size: 1.25rem; }
h2, .h2 { font-size: 1.125rem; }
h3, .h3 { font-size: 1rem; }

.text-muted, .text-secondary { color: var(--octo-text-muted) !important; }
.text-meta { font-size: 0.75rem; color: var(--octo-text-muted); }

code, kbd, pre, samp, .font-mono, .mono {
  font-family: var(--bs-font-monospace);
  font-variant-ligatures: contextual;
}

code {
  background: rgba(129, 139, 152, 0.12);
  color: var(--octo-text);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.8125rem;
}

/* Transisi tidak pernah lebih dari 150ms — antarmuka harus terasa instan. */
a, .btn, .card, .nav-link, .form-control, .form-select, .list-row {
  transition: all 0.12s ease-in-out;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.app-navbar {
  background: var(--octo-surface);
  border-bottom: 1px solid var(--octo-border);
  height: 64px;
  box-shadow: var(--octo-shadow-sm);
}

.app-brand {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--octo-text) !important;
  font-size: 0.9375rem;
}

.app-sidebar {
  background: var(--octo-surface);
  border-right: 1px solid var(--octo-border);
  width: 240px;
  padding: 16px 8px;
  /* Menempel di bawah navbar dan punya gulungan sendiri: menggulir isi halaman
     tidak ikut menggeser menu. align-self mencegah flex meregangkannya, karena
     elemen yang diregangkan setinggi konten tidak pernah "menempel". */
  position: sticky;
  top: 64px;
  align-self: flex-start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Tetap bisa digulir (roda mouse/sentuh) bila menu lebih panjang dari
     layar, tapi batang gulirnya tidak ditampilkan. */
  scrollbar-width: none;
}

.app-sidebar::-webkit-scrollbar { display: none; }

.app-sidebar .nav-link {
  color: var(--octo-text);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 2px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-sidebar .nav-link:hover {
  background: var(--octo-subtle);
  text-decoration: none;
}

.app-sidebar .nav-link.active {
  background: var(--octo-subtle);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--octo-accent);
}

.app-sidebar .nav-section {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--octo-text-muted);
  padding: 16px 12px 6px;
  font-weight: 500;
}

.app-main { padding: 24px; max-width: 1280px; }

.page-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }

/* ---------- Kartu & panel ---------- */
.card {
  background: var(--octo-surface);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
}

.card:hover { border-color: var(--octo-border-hover); }
.card-static:hover { border-color: var(--octo-border); }

.card-header {
  background: var(--octo-subtle);
  border-bottom: 1px solid var(--octo-border);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.875rem;
}

.card-body { padding: 16px; }

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: var(--bs-font-monospace);
}

.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--octo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Tombol ---------- */
.btn {
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 5px 16px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-sm { min-height: 28px; padding: 3px 12px; font-size: 0.75rem; }

.btn-primary {
  background: var(--octo-green);
  border-color: rgba(31, 35, 40, 0.15);
  color: #fff;
  box-shadow: var(--octo-shadow-sm);
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--octo-green-hover);
  border-color: rgba(31, 35, 40, 0.15);
  color: #fff;
}

.btn-outline-secondary {
  background: var(--octo-subtle);
  border-color: var(--octo-border);
  color: var(--octo-text);
  box-shadow: var(--octo-shadow-sm);
}

.btn-outline-secondary:hover {
  background: #eef1f4;
  border-color: var(--octo-border-hover);
  color: var(--octo-text);
}

.btn-danger {
  background: var(--octo-surface);
  border-color: var(--octo-border);
  color: var(--octo-danger);
  box-shadow: var(--octo-shadow-sm);
}

.btn-danger:hover {
  background: var(--octo-danger);
  border-color: var(--octo-danger);
  color: #fff;
}

.btn-link { color: var(--octo-link); }

.btn:focus-visible {
  outline: 2px solid var(--octo-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- Form ---------- */
.form-control, .form-select {
  background: var(--octo-input);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  color: var(--octo-text);
  padding: 6px 12px;
  font-size: 0.875rem;
  min-height: 32px;
}

.form-control:focus, .form-select:focus {
  background: var(--octo-input);
  border-color: var(--octo-primary);
  color: var(--octo-text);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.25);
}

.form-control::placeholder { color: var(--octo-placeholder); }
.form-control:disabled, .form-control[readonly] { background: var(--octo-subtle); color: var(--octo-text-muted); }

.form-label { font-size: 0.8125rem; font-weight: 500; margin-bottom: 6px; color: var(--octo-text); }
.form-text { font-size: 0.75rem; color: var(--octo-text-muted); }

.form-check-input {
  background-color: var(--octo-input);
  border: 1px solid #868f99;
  border-radius: 3px;
  width: 16px;
  height: 16px;
}

.form-check-input:checked { background-color: var(--octo-primary); border-color: var(--octo-primary); }
.form-check-input:focus { border-color: var(--octo-primary); box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.25); }

.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--octo-danger) !important; }
.invalid-feedback { color: var(--octo-danger); font-size: 0.75rem; }

.input-group-text {
  background: var(--octo-subtle);
  border-color: var(--octo-border);
  color: var(--octo-text-muted);
}

/* ---------- Badge / chip ---------- */
.badge {
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  line-height: 1.4;
}

.badge-status-active     { background: #dafbe1; color: #1a7f37; }
.badge-status-pending    { background: #fff8c5; color: #7d4e00; }
.badge-status-dormant    { background: #eaeef2; color: #59636e; }
.badge-status-suspended  { background: #ffe7d6; color: #bc4c00; }
.badge-status-terminated { background: #ffebe9; color: #cf222e; }

.badge-level-affiliator { background: #eaeef2; color: #59636e; }
.badge-level-reseller   { background: #ddf4ff; color: #0969da; }
.badge-level-agen       { background: #fbefff; color: #8250df; }
.badge-level-prioritas  { background: #fff8c5; color: #7d4e00; }

.chip-mono {
  font-family: var(--bs-font-monospace);
  background: #ddf4ff;
  color: #0969da;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.8125rem;
}

/* ---------- Tabel ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--octo-text);
  --bs-table-border-color: var(--octo-border);
  --bs-table-hover-bg: var(--octo-subtle);
  --bs-table-hover-color: var(--octo-text);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.table > thead > tr > th {
  background: var(--octo-subtle);
  border-bottom: 1px solid var(--octo-border);
  color: var(--octo-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  white-space: nowrap;
}

.table > tbody > tr > td { padding: 10px 16px; border-color: var(--octo-border); vertical-align: middle; }
.table > tbody > tr:hover > td { background: var(--octo-subtle); }

/* ---------- Nav tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--octo-border); gap: 8px; }

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--octo-text-muted);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 0.875rem;
  background: transparent;
}

.nav-tabs .nav-link:hover { border-color: transparent; color: var(--octo-text); text-decoration: none; }

.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--octo-text);
  font-weight: 600;
  border-bottom-color: var(--octo-accent);
}

/* ---------- Dropdown, modal, tooltip ---------- */
.dropdown-menu {
  background: var(--octo-overlay);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 4px;
  box-shadow: var(--octo-shadow-md);
}

.dropdown-item { color: var(--octo-text); border-radius: 3px; padding: 6px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--octo-primary); color: #fff; }
.dropdown-divider { border-color: var(--octo-border); }

.modal-content {
  background: var(--octo-modal);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  box-shadow: var(--octo-shadow-lg);
}

.modal-header, .modal-footer { border-color: var(--octo-border); }
.modal-backdrop.show { background: rgba(31, 35, 40, 0.5); opacity: 1; }

.tooltip-inner {
  background: #1f2328;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  max-width: 250px;
}

.alert { border-radius: 6px; border: 1px solid var(--octo-border); font-size: 0.875rem; }
.alert-success { background: #dafbe1; border-color: rgba(31, 136, 61, 0.4); color: #1a7f37; }
.alert-danger  { background: #ffebe9; border-color: rgba(207, 34, 46, 0.4);  color: #cf222e; }
.alert-warning { background: #fff8c5; border-color: rgba(154, 103, 0, 0.4);  color: #7d4e00; }
.alert-info    { background: #ddf4ff; border-color: rgba(9, 105, 218, 0.4);  color: #0550ae; }

/* ---------- DataTables ---------- */
.dataTables_wrapper { color: var(--octo-text); font-size: 0.875rem; }

div.dt-container .dt-search input,
div.dt-container .dt-length select {
  background: var(--octo-input);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  color: var(--octo-text);
  padding: 5px 10px;
  min-height: 32px;
}

div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
  border-color: var(--octo-primary);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.25);
  outline: none;
}

div.dt-container .dt-info, div.dt-container .dt-length label, div.dt-container .dt-search label {
  color: var(--octo-text-muted);
  font-size: 0.8125rem;
}

div.dt-container .dt-paging .page-link {
  background: var(--octo-surface);
  border: 1px solid var(--octo-border);
  color: var(--octo-text);
  border-radius: 6px;
  margin: 0 2px;
  font-size: 0.8125rem;
  padding: 4px 10px;
}

div.dt-container .dt-paging .page-link:hover { background: var(--octo-subtle); border-color: var(--octo-border-hover); }
div.dt-container .dt-paging .active > .page-link { background: var(--octo-primary); border-color: var(--octo-primary); color: #fff; }
div.dt-container .dt-paging .disabled > .page-link { background: transparent; color: var(--octo-placeholder); }

table.dataTable > thead > tr > th.dt-orderable-asc:hover,
table.dataTable > thead > tr > th.dt-orderable-desc:hover { background: #eef1f4; }
table.dataTable > thead > tr > th span.dt-column-order:before,
table.dataTable > thead > tr > th span.dt-column-order:after { color: var(--octo-text-muted); }

table.dataTable.no-footer { border-bottom: 1px solid var(--octo-border); }

/* Baris anak hasil lipatan kolom (ekstensi Responsive) */
table.dataTable > tbody > tr.dtr-expanded > td { background: var(--octo-subtle); }
table.dataTable > tbody > tr.child { background: var(--octo-subtle); }
table.dataTable > tbody > tr.child > td.child { padding: 8px 16px 12px; }
table.dataTable ul.dtr-details { width: 100%; margin: 0; padding: 0; list-style: none; }
table.dataTable ul.dtr-details > li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--octo-border); font-size: 0.8125rem; }
table.dataTable ul.dtr-details > li:last-child { border-bottom: none; }
table.dataTable ul.dtr-details > li .dtr-title { min-width: 40%; color: var(--octo-text-muted); font-weight: 500; }
table.dataTable ul.dtr-details > li .dtr-data { flex: 1; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background: var(--octo-green); border: none; box-shadow: none; color: #fff; font-weight: 600;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before { background: var(--octo-danger); }

/* ---------- Select2 ---------- */
.select2-container--bootstrap-5 .select2-selection {
  background: var(--octo-input);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  color: var(--octo-text);
  min-height: 32px;
  font-size: 0.875rem;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--octo-primary);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.25);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--octo-text);
  padding: 4px 12px;
  line-height: 1.6;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--octo-placeholder); }

.select2-container--bootstrap-5 .select2-dropdown {
  background: var(--octo-overlay);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  box-shadow: var(--octo-shadow-md);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background: var(--octo-input);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  color: var(--octo-text);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__option { color: var(--octo-text); font-size: 0.875rem; padding: 6px 12px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted { background: var(--octo-primary); color: #fff; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected { background: var(--octo-subtle); color: var(--octo-text); }

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background: var(--octo-subtle);
  border: 1px solid var(--octo-border);
  border-radius: 9999px;
  color: var(--octo-text);
  font-size: 0.75rem;
}

/* ---------- SweetAlert2 ---------- */
.swal2-popup.octo-swal {
  background: var(--octo-modal);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  color: var(--octo-text);
  font-family: var(--bs-body-font-family);
  font-size: 0.875rem;
  box-shadow: var(--octo-shadow-lg);
}

.swal2-popup.octo-swal .swal2-title { color: var(--octo-text); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }

/* Toast notifikasi sukses — lebih ringkas daripada dialog penuh. */
.swal2-popup.octo-toast { padding: 10px 14px; box-shadow: var(--octo-shadow-md); }
.swal2-popup.octo-toast .swal2-title { font-size: 0.875rem; font-weight: 500; letter-spacing: 0; margin: 0; }
.swal2-popup.octo-toast .swal2-timer-progress-bar { background: var(--octo-green); }
.swal2-popup.octo-swal .swal2-html-container { color: var(--octo-text-muted); font-size: 0.875rem; }
.swal2-container.swal2-backdrop-show { background: rgba(31, 35, 40, 0.5); }
.swal2-popup.octo-swal .swal2-input,
.swal2-popup.octo-swal .swal2-textarea {
  background: var(--octo-input);
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  color: var(--octo-text);
  font-size: 0.875rem;
  box-shadow: none;
}

/* ---------- Halaman publik ---------- */
.public-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.public-card { width: 100%; max-width: 640px; }
.verify-card { width: 100%; max-width: 420px; }

.verify-hero {
  border-radius: 6px 6px 0 0;
  padding: 24px 16px;
  text-align: center;
  border-bottom: 1px solid var(--octo-border);
}

.verify-field { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--octo-border); }
.verify-field:last-child { border-bottom: none; }
.verify-field dt { color: var(--octo-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.verify-field dd { margin: 0; font-size: 0.875rem; text-align: right; font-weight: 500; }

/* ---------- Portal mitra ---------- */
.portal-tabs {
  background: var(--octo-surface);
  border-bottom: 1px solid var(--octo-border);
}

.portal-tabs .app-main { padding-top: 0; padding-bottom: 0; }
.portal-tabs .nav-link { padding: 12px 14px; gap: 6px; display: inline-flex; align-items: center; }

.otp-input {
  font-family: var(--bs-font-monospace);
  font-size: 1.75rem;
  letter-spacing: 0.6em;
  text-align: center;
  padding-left: 0.6em;
  min-height: 56px;
}

.level-track { height: 6px; background: var(--octo-bg); border-radius: 9999px; overflow: hidden; }
.level-track > div { height: 100%; background: var(--octo-green); border-radius: 9999px; }

/* ---------- Pratinjau kartu digital ---------- */
.card-preview {
  min-width: 560px;
  background: #ffffff;
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--octo-shadow-md);
}

.card-preview-accent { height: 6px; background: var(--octo-green); }

.card-preview-qr { background: #fff; padding: 6px; border: 1px solid var(--octo-border); border-radius: 6px; }

/* ---------- Responsif ---------- */
@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform 0.12s ease-in-out;
    box-shadow: var(--octo-shadow-lg);
  }
  .app-sidebar.show { transform: translateX(0); }
  .app-main { padding: 16px; }
}

@media (max-width: 575.98px) {
  .app-main { padding: 12px; }
  .card-body { padding: 12px; }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 8px 10px; }
  .verify-field { flex-direction: column; gap: 2px; }
  .verify-field dd { text-align: left; }
  .card-preview { min-width: 480px; }
}

/* Tabel lebar tetap bisa digeser, bukan memaksa halaman scroll horizontal. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Dokumen panduan (Markdown yang dirender) ---------- */
.doc { line-height: 1.7; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 12px; }
.doc h2 {
  font-size: 1.125rem; font-weight: 600; margin: 32px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--octo-border); scroll-margin-top: 80px;
}
.doc h3 { font-size: 1rem; font-weight: 600; margin: 24px 0 8px; }
.doc p, .doc ul, .doc ol { margin-bottom: 12px; }
.doc li { margin-bottom: 4px; }
.doc table {
  width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 0.875rem; display: block;
  overflow-x: auto;
}
.doc th, .doc td { padding: 8px 12px; border-bottom: 1px solid var(--octo-border); text-align: left;
  vertical-align: top; }
.doc th { background: var(--octo-subtle); font-weight: 600; white-space: nowrap; }
.doc blockquote {
  margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--octo-warning);
  background: var(--octo-subtle); border-radius: 0 6px 6px 0;
}
.doc blockquote p:last-child { margin-bottom: 0; }
.doc code {
  background: var(--octo-subtle); padding: 2px 5px; border-radius: 4px;
  font-size: 0.85em; color: var(--octo-text);
}
.doc hr { margin: 28px 0; border-color: var(--octo-border); }

@media print {
  .app-sidebar, .app-navbar, .d-print-none { display: none !important; }
  .doc h2 { break-after: avoid; }
}