@page { size: A4; margin: 22mm 20mm 20mm 20mm; }

:root {
  --ink: #1a1d21;
  --muted: #5d646d;
  --rule: #d9dde2;
  --accent: #2b4c7e;
}

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10.5pt;
  line-height: 1.55;
}

header.doc {
  border-bottom: 1.5pt solid var(--accent);
  padding-bottom: 10pt;
  margin-bottom: 16pt;
}

header.doc .app {
  font-size: 9pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

h1 {
  font-size: 22pt;
  line-height: 1.2;
  margin: 4pt 0 6pt;
  font-weight: 700;
}

header.doc .meta { color: var(--muted); font-size: 9.5pt; }

h2 {
  font-size: 12.5pt;
  margin: 18pt 0 6pt;
  font-weight: 600;
  break-after: avoid;
}

h2 .n { color: var(--accent); margin-right: 6pt; }

h3 {
  font-size: 10.5pt;
  margin: 10pt 0 4pt;
  font-weight: 600;
  break-after: avoid;
}

p { margin: 0 0 7pt; }

ul, ol { margin: 0 0 8pt; padding-left: 16pt; }
li { margin: 0 0 4pt; }
li::marker { color: var(--accent); }

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

table {
  width: 100%;
  border-collapse: collapse;
  margin: 4pt 0 10pt;
  font-size: 9.8pt;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 5pt 7pt;
  border-bottom: 0.75pt solid var(--rule);
}

th { font-weight: 600; background: #f3f5f7; }
td:first-child { width: 26%; font-weight: 600; }
tr { break-inside: avoid; }

.callout {
  border-left: 2.5pt solid var(--accent);
  background: #f3f6fa;
  padding: 8pt 11pt;
  margin: 6pt 0 10pt;
  break-inside: avoid;
}

.callout p:last-child { margin-bottom: 0; }

footer.doc {
  margin-top: 20pt;
  padding-top: 8pt;
  border-top: 0.75pt solid var(--rule);
  color: var(--muted);
  font-size: 9pt;
}

/* Те же страницы в браузере: поля вместо @page и колонка для чтения. */
@media screen {
  body {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 20px 40px;
    font-size: 16px;
  }

  table { font-size: 15px; }
  td:first-child { width: auto; white-space: nowrap; }
  a:hover { text-decoration: underline; }
}