/*
 * Energoskan Development Portal
 * Unified article theme
 * Knowledge Base · Documentation · Administration
 */

/* =====================================================
   Shared article layout
   ===================================================== */

.knowledge-article,
.kb-article,
.content-article,
#kb-content .content-article,
#docs-content .content-article,
#admin-content .content-article {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  color: #172126;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

/* =====================================================
   Typography
   ===================================================== */

.knowledge-article h1,
.kb-article h1,
.content-article h1 {
  margin: 0 0 20px;
  color: #0f1a1e;
  font-family:
    Montserrat,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.knowledge-article h2,
.kb-article h2,
.content-article h2 {
  margin: 42px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 110, 120, 0.18);
  color: #152329;
  font-family:
    Montserrat,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: clamp(23px, 3vw, 29px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

.knowledge-article h3,
.kb-article h3,
.content-article h3 {
  margin: 30px 0 12px;
  color: #1d2c32;
  font-family:
    Montserrat,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.knowledge-article h4,
.kb-article h4,
.content-article h4 {
  margin: 24px 0 10px;
  color: #24363d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.knowledge-article p,
.kb-article p,
.content-article p {
  margin: 0 0 17px;
  color: #172126;
}

.knowledge-article strong,
.kb-article strong,
.content-article strong {
  color: #101b20;
  font-weight: 700;
}

.knowledge-article a,
.kb-article a,
.content-article a {
  color: #006e78;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.knowledge-article a:hover,
.kb-article a:hover,
.content-article a:hover {
  color: #004f57;
}

.knowledge-article ul,
.knowledge-article ol,
.kb-article ul,
.kb-article ol,
.content-article ul,
.content-article ol {
  margin: 0 0 20px;
  padding-left: 26px;
}

.knowledge-article li,
.kb-article li,
.content-article li {
  margin: 7px 0;
  color: #172126;
}

.knowledge-article li::marker,
.kb-article li::marker,
.content-article li::marker {
  color: #006e78;
  font-weight: 700;
}

/* =====================================================
   Article header
   ===================================================== */

.article-header {
  margin-bottom: 30px;
}

.article-header__meta,
.article-meta,
.page-meta {
  margin-bottom: 12px;
  color: #40565e;
  font-family:
    Montserrat,
    Inter,
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  opacity: 1;
}

.article-lead {
  margin: 22px 0 32px;
  padding: 20px 24px;
  border: 1px solid #9bc7ca;
  border-left: 5px solid #006e78;
  border-radius: 8px;
  background: #e7f3f3;
  color: #14272c;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
}

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

/* =====================================================
   Standard content sections — Kiselev-style structure
   ===================================================== */

.article-section,
.content-section,
.material-section {
  margin: 24px 0;
  padding: 22px 24px;
  border: 1px solid #c4d0d5;
  border-left: 4px solid #006e78;
  border-radius: 6px;
  background: #edf2f4;
  color: #172126;
}

.article-section > :first-child,
.content-section > :first-child,
.material-section > :first-child {
  margin-top: 0;
}

.article-section > :last-child,
.content-section > :last-child,
.material-section > :last-child {
  margin-bottom: 0;
}

/* =====================================================
   Callouts
   ===================================================== */

.article-callout,
.article-note,
.info-box,
.notice,
.warning,
.tip {
  position: relative;
  margin: 22px 0;
  padding: 19px 22px;
  border: 1px solid #a9cfd2;
  border-left: 5px solid #006e78;
  border-radius: 8px;
  background: #e8f4f4;
  color: #14272c;
  line-height: 1.62;
  box-shadow: 0 2px 7px rgba(29, 37, 44, 0.04);
}

.article-callout > :first-child,
.article-note > :first-child,
.info-box > :first-child,
.notice > :first-child,
.warning > :first-child,
.tip > :first-child {
  margin-top: 0;
}

.article-callout > :last-child,
.article-note > :last-child,
.info-box > :last-child,
.notice > :last-child,
.warning > :last-child,
.tip > :last-child {
  margin-bottom: 0;
}

.article-callout strong,
.article-note strong,
.info-box strong,
.notice strong,
.warning strong,
.tip strong {
  color: #102428;
}

.article-callout--info,
.article-callout.info,
.info-box,
.notice {
  border-color: #9bc7ca;
  border-left-color: #006e78;
  background: #e6f2f3;
}

.article-callout--important,
.article-callout.important {
  border-color: #60a5aa;
  border-left-color: #005e67;
  background: #d7ecee;
}

.article-callout--warning,
.article-callout.warning,
.warning {
  border-color: #efb478;
  border-left-color: #f58220;
  background: #fff0df;
  color: #392416;
}

.article-callout--warning strong,
.article-callout.warning strong,
.warning strong {
  color: #482714;
}

.article-callout--success,
.article-callout.success,
.article-callout--tip,
.article-callout.tip,
.tip {
  border-color: #9bc5a8;
  border-left-color: #398653;
  background: #e9f5ec;
  color: #183322;
}

.article-callout--danger,
.article-callout.danger {
  border-color: #e4a0a0;
  border-left-color: #b53b3b;
  background: #fceaea;
  color: #411c1c;
}

.article-callout__title,
.callout-title {
  display: block;
  margin-bottom: 6px;
  font-family:
    Montserrat,
    Inter,
    sans-serif;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.025em;
}

/* =====================================================
   Cards and grids
   ===================================================== */

.article-grid,
.card-grid,
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.article-card,
.content-card,
.option-card {
  padding: 20px;
  border: 1px solid #bdcbd0;
  border-radius: 8px;
  background: #f5f7f8;
  color: #172126;
  box-shadow: 0 2px 8px rgba(29, 37, 44, 0.045);
}

.article-card > :first-child,
.content-card > :first-child,
.option-card > :first-child {
  margin-top: 0;
}

.article-card > :last-child,
.content-card > :last-child,
.option-card > :last-child {
  margin-bottom: 0;
}

.article-card:hover,
.content-card:hover,
.option-card:hover {
  border-color: #74aeb2;
  background: #f0f6f6;
}

/* =====================================================
   Steps
   ===================================================== */

.article-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.article-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding: 19px 20px;
  border: 1px solid #c3d0d5;
  border-left: 4px solid #006e78;
  border-radius: 7px;
  background: #eef2f4;
  color: #172126;
}

.article-step__number {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #006e78;
  color: #ffffff;
  font-family:
    Montserrat,
    Inter,
    sans-serif;
  font-size: 14px;
  font-weight: 750;
}

/* =====================================================
   Tables
   ===================================================== */

.knowledge-article table,
.kb-article table,
.content-article table {
  width: 100%;
  margin: 22px 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #b9c7cc;
  border-radius: 7px;
  background: #ffffff;
  color: #172126;
}

.knowledge-article th,
.kb-article th,
.content-article th {
  padding: 13px 15px;
  border-right: 1px solid #b8c7cb;
  border-bottom: 1px solid #aebfc4;
  background: #dfe8eb;
  color: #132229;
  font-weight: 700;
  text-align: left;
}

.knowledge-article td,
.kb-article td,
.content-article td {
  padding: 13px 15px;
  border-right: 1px solid #d0dadd;
  border-bottom: 1px solid #d0dadd;
  color: #172126;
  vertical-align: top;
}

.knowledge-article tr:nth-child(even) td,
.kb-article tr:nth-child(even) td,
.content-article tr:nth-child(even) td {
  background: #f4f7f8;
}

.knowledge-article th:last-child,
.knowledge-article td:last-child,
.kb-article th:last-child,
.kb-article td:last-child,
.content-article th:last-child,
.content-article td:last-child {
  border-right: 0;
}

.knowledge-article tr:last-child td,
.kb-article tr:last-child td,
.content-article tr:last-child td {
  border-bottom: 0;
}

/* =====================================================
   Code, commands and paths
   ===================================================== */

.knowledge-article code,
.kb-article code,
.content-article code {
  padding: 2px 6px;
  border: 1px solid #b8c6cb;
  border-radius: 4px;
  background: #e7ecee;
  color: #172126;
  font-family:
    "JetBrains Mono",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 0.9em;
  font-weight: 600;
}

.knowledge-article pre,
.kb-article pre,
.content-article pre,
.code-block {
  position: relative;
  margin: 22px 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid #33464e;
  border-left: 5px solid #f58220;
  border-radius: 7px;
  background: #1d252c;
  color: #f4f7f8;
  font-family:
    "JetBrains Mono",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 14px;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
}

.knowledge-article pre code,
.kb-article pre code,
.content-article pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}

/* =====================================================
   Quotes and separators
   ===================================================== */

.knowledge-article blockquote,
.kb-article blockquote,
.content-article blockquote {
  margin: 22px 0;
  padding: 16px 21px;
  border-left: 5px solid #006e78;
  background: #edf3f4;
  color: #24363d;
  font-style: normal;
}

.knowledge-article hr,
.kb-article hr,
.content-article hr {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid #bdcbd0;
}

/* =====================================================
   Buttons and badges inside articles
   ===================================================== */

.article-button,
.content-article .button,
.content-article .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid #005e67;
  border-radius: 5px;
  background: #006e78;
  color: #ffffff;
  font-family:
    Montserrat,
    Inter,
    sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.article-button:hover,
.content-article .button:hover,
.content-article .btn:hover {
  border-color: #004d54;
  background: #005e67;
  color: #ffffff;
}

.article-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #8db9bc;
  border-radius: 999px;
  background: #e1f0f1;
  color: #174147;
  font-size: 12px;
  font-weight: 700;
}

/* =====================================================
   Related articles
   ===================================================== */

.article-related {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.article-related a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 17px 19px;
  border: 1px solid #b9c8cd;
  border-left: 4px solid #006e78;
  border-radius: 7px;
  background: #f3f6f7;
  color: #172126;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.article-related a:hover {
  border-color: #006e78;
  background: #eaf3f3;
  transform: translateY(-1px);
}

.article-related strong {
  color: #132229;
  font-size: 15px;
  font-weight: 700;
}

.article-related span {
  color: #40545c;
  font-size: 13px;
  opacity: 1;
}

.article-related a:hover strong {
  color: #005e67;
}

.article-footer {
  margin-top: 34px;
  padding-top: 17px;
  border-top: 1px solid #bdcbd0;
  color: #465a62;
  font-size: 13px;
  opacity: 1;
}

/* =====================================================
   Unified sidebars
   ===================================================== */

#kb-side,
#docs-side,
#admin-side {
  padding: 10px;
}

#kb-side .kb-item,
#docs-side .kb-item,
#admin-side .kb-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  margin: 3px 0;
  padding: 9px 12px;
  appearance: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: 0.18s ease;
}

#kb-side .kb-item:hover,
#docs-side .kb-item:hover,
#admin-side .kb-item:hover {
  border-left-color: #006e78;
  background: rgba(0, 110, 120, 0.08);
  color: hsl(var(--foreground));
  transform: translateX(2px);
}

#kb-side .kb-item.active,
#docs-side .kb-item.active,
#admin-side .kb-item.active {
  border-left-color: #006e78;
  background: linear-gradient(
    90deg,
    rgba(0, 110, 120, 0.16),
    rgba(0, 110, 120, 0.035)
  );
  color: hsl(var(--foreground));
  font-weight: 700;
  box-shadow: none;
}

.kb-item-icon,
#kb-side .kb-item-icon,
#docs-side .kb-item-icon,
#admin-side .kb-item-icon {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: currentColor;
}

.kb-item-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   Dark theme
   ===================================================== */

html.dark .knowledge-article,
html.dark .kb-article,
html.dark .content-article,
html.dark .knowledge-article p,
html.dark .kb-article p,
html.dark .content-article p,
html.dark .knowledge-article li,
html.dark .kb-article li,
html.dark .content-article li {
  color: #e5edf0;
}

html.dark .knowledge-article h1,
html.dark .knowledge-article h2,
html.dark .knowledge-article h3,
html.dark .knowledge-article h4,
html.dark .kb-article h1,
html.dark .kb-article h2,
html.dark .kb-article h3,
html.dark .kb-article h4,
html.dark .content-article h1,
html.dark .content-article h2,
html.dark .content-article h3,
html.dark .content-article h4,
html.dark .knowledge-article strong,
html.dark .kb-article strong,
html.dark .content-article strong {
  color: #ffffff;
}

html.dark .article-header__meta,
html.dark .article-meta,
html.dark .page-meta,
html.dark .article-footer {
  color: #a9bbc2;
}

html.dark .article-lead {
  border-color: rgba(41, 171, 181, 0.5);
  border-left-color: #29abb5;
  background: rgba(0, 110, 120, 0.2);
  color: #edf7f8;
}

html.dark .article-section,
html.dark .content-section,
html.dark .material-section,
html.dark .article-steps li {
  border-color: #40535b;
  border-left-color: #29abb5;
  background: #27343a;
  color: #e5edf0;
}

html.dark .article-callout,
html.dark .article-note,
html.dark .info-box,
html.dark .notice {
  border-color: rgba(41, 171, 181, 0.48);
  border-left-color: #29abb5;
  background: rgba(0, 110, 120, 0.2);
  color: #edf7f8;
}

html.dark .article-callout--warning,
html.dark .article-callout.warning,
html.dark .warning {
  border-color: rgba(245, 130, 32, 0.55);
  border-left-color: #f58220;
  background: rgba(245, 130, 32, 0.14);
  color: #fff1e4;
}

html.dark .article-callout--success,
html.dark .article-callout.success,
html.dark .article-callout--tip,
html.dark .article-callout.tip,
html.dark .tip {
  border-color: rgba(87, 177, 114, 0.5);
  border-left-color: #57b172;
  background: rgba(57, 134, 83, 0.18);
  color: #ecfff1;
}

html.dark .article-callout strong,
html.dark .article-note strong,
html.dark .info-box strong,
html.dark .notice strong,
html.dark .warning strong,
html.dark .tip strong {
  color: #ffffff;
}

html.dark .article-card,
html.dark .content-card,
html.dark .option-card {
  border-color: #40535b;
  background: #27343a;
  color: #e5edf0;
}

html.dark .article-related a {
  border-color: #40535b;
  border-left-color: #29abb5;
  background: #27343a;
  color: #e5edf0;
}

html.dark .article-related strong {
  color: #ffffff;
}

html.dark .article-related span {
  color: #b8c8ce;
}

html.dark .knowledge-article table,
html.dark .kb-article table,
html.dark .content-article table {
  border-color: #455961;
  background: #202b30;
  color: #e5edf0;
}

html.dark .knowledge-article th,
html.dark .kb-article th,
html.dark .content-article th {
  border-color: #50636b;
  background: #314149;
  color: #ffffff;
}

html.dark .knowledge-article td,
html.dark .kb-article td,
html.dark .content-article td {
  border-color: #3b4c53;
  color: #e5edf0;
}

html.dark .knowledge-article tr:nth-child(even) td,
html.dark .kb-article tr:nth-child(even) td,
html.dark .content-article tr:nth-child(even) td {
  background: #27353b;
}

html.dark .knowledge-article code,
html.dark .kb-article code,
html.dark .content-article code {
  border-color: #50636b;
  background: #2c3b42;
  color: #ffffff;
}

html.dark .knowledge-article blockquote,
html.dark .kb-article blockquote,
html.dark .content-article blockquote {
  border-left-color: #29abb5;
  background: #27343a;
  color: #dce7eb;
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 760px) {
  .knowledge-article,
  .kb-article,
  .content-article {
    font-size: 15px;
    line-height: 1.68;
  }

  .knowledge-article h1,
  .kb-article h1,
  .content-article h1 {
    font-size: 29px;
  }

  .knowledge-article h2,
  .kb-article h2,
  .content-article h2 {
    margin-top: 34px;
    font-size: 23px;
  }

  .article-lead,
  .article-callout,
  .article-note,
  .article-section,
  .content-section,
  .material-section {
    padding: 17px 18px;
  }

  .article-grid,
  .card-grid,
  .options-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-article table,
  .kb-article table,
  .content-article table {
    display: block;
    overflow-x: auto;
  }
}

/* Knowledge Base: grouped sidebar */
.kb-group {
  margin: 0 0 18px;
}

.kb-group:last-child {
  margin-bottom: 0;
}

.kb-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #8fa6ad);
}

.kb-group-title svg {
  width: 17px;
  height: 17px;
  min-width: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kb-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-group-items .kb-item {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px 9px 20px;
  text-align: left;
}

.kb-group-items .kb-item span {
  display: block;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.35;
}


/* =========================================================
   ENERGOSKAN KNOWLEDGE BASE — READABILITY v1
   Только статьи раздела «База знаний»
   ========================================================= */

/* Удобная ширина чтения */
.view-kb .kb-content .kb-article {
  width: min(100%, 900px);
  max-width: 900px;
  margin: 0 auto;
  padding: 4px 10px 64px;
  box-sizing: border-box;
  color: hsl(var(--foreground));
}

/* Метаинформация */
.view-kb .kb-article .page-meta {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  color: hsl(var(--primary));
}

/* Главный заголовок */
.view-kb .kb-article h1 {
  margin: 0 0 18px;
  max-width: 760px;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: hsl(var(--foreground));
}

/* Вводный абзац */
.view-kb .kb-article .lead,
.view-kb .kb-article .article-lead {
  max-width: 760px;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

/* Основной текст */
.view-kb .kb-article p {
  max-width: 780px;
  margin: 0 0 16px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.78;
  color: hsl(var(--foreground) / .9);
}

/* Разделы статьи */
.view-kb .kb-article h2 {
  position: relative;
  margin: 42px 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 23px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: hsl(var(--foreground));
}

.view-kb .kb-article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 54px;
  height: 2px;
  background: hsl(var(--primary));
}

.view-kb .kb-article h3 {
  margin: 28px 0 12px;
  padding: 0;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: hsl(var(--foreground));
}

/* Списки */
.view-kb .kb-article ul,
.view-kb .kb-article ol {
  max-width: 760px;
  margin: 10px 0 22px;
  padding-left: 26px;
}

.view-kb .kb-article li {
  margin: 0 0 9px;
  padding-left: 4px;
  font-size: 15.5px;
  line-height: 1.7;
  color: hsl(var(--foreground) / .9);
}

.view-kb .kb-article li::marker {
  color: hsl(var(--primary));
  font-weight: 700;
}

/* Информационные блоки */
.view-kb .kb-article .note,
.view-kb .kb-article .warning {
  max-width: 780px;
  margin: 24px 0 30px;
  padding: 17px 20px;
  border: 1px solid hsl(var(--border));
  border-left-width: 4px;
  border-radius: 7px;
  box-sizing: border-box;
}

.view-kb .kb-article .note {
  border-left-color: hsl(var(--primary));
  background: hsl(var(--primary) / .055);
}

.view-kb .kb-article .warning {
  border-left-color: #f0a44b;
  background: rgba(240, 164, 75, .07);
}

.view-kb .kb-article .note > strong,
.view-kb .kb-article .warning > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  color: hsl(var(--foreground));
}

.view-kb .kb-article .note p,
.view-kb .kb-article .warning p {
  margin: 0;
  max-width: none;
  font-size: 14.5px;
  line-height: 1.65;
}

/* Таблицы */
.view-kb .kb-article .table-wrap {
  width: 100%;
  max-width: 820px;
  margin: 22px 0 30px;
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
}

.view-kb .kb-article table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.view-kb .kb-article th,
.view-kb .kb-article td {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  vertical-align: top;
}

.view-kb .kb-article th {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--secondary) / .6);
}

.view-kb .kb-article tbody tr:last-child td {
  border-bottom: 0;
}

.view-kb .kb-article tbody tr:hover td {
  background: hsl(var(--primary) / .035);
}

/* Блоки команд и кода */
.view-kb .kb-article pre {
  position: relative;
  max-width: 780px;
  margin: 16px 0 26px;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: rgba(3, 12, 17, .72);
  box-shadow: inset 3px 0 0 hsl(var(--primary) / .7);
}

.view-kb .kb-article pre code {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: #dce8ec;
  white-space: pre;
}

.view-kb .kb-article :not(pre) > code {
  padding: 2px 6px;
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  background: hsl(var(--secondary) / .65);
  font-family: var(--font-mono);
  font-size: .88em;
  color: hsl(var(--primary));
}

/* Ссылки */
.view-kb .kb-article a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-decoration-color: hsl(var(--primary) / .4);
  text-underline-offset: 3px;
}

.view-kb .kb-article a:hover {
  text-decoration-color: currentColor;
}

/* Светлая тема */
html:not(.dark) .view-kb .kb-article {
  color: #26343c;
}

html:not(.dark) .view-kb .kb-article p,
html:not(.dark) .view-kb .kb-article li {
  color: #34434c;
}

html:not(.dark) .view-kb .kb-article .lead,
html:not(.dark) .view-kb .kb-article .article-lead {
  color: #52636c;
}

html:not(.dark) .view-kb .kb-article .note {
  background: rgba(0, 110, 120, .055);
  border-color: rgba(0, 110, 120, .18);
  border-left-color: #007d88;
}

html:not(.dark) .view-kb .kb-article .warning {
  background: rgba(213, 116, 22, .06);
  border-color: rgba(213, 116, 22, .18);
  border-left-color: #d57416;
}

html:not(.dark) .view-kb .kb-article pre {
  background: #162229;
  border-color: #2e424c;
}

html:not(.dark) .view-kb .kb-article pre code {
  color: #edf5f7;
}

html:not(.dark) .view-kb .kb-article :not(pre) > code {
  color: #006e78;
  background: #eef5f6;
}

/* Планшеты и телефоны */
@media (max-width: 760px) {
  .view-kb .kb-content .kb-article {
    width: 100%;
    padding: 0 2px 48px;
  }

  .view-kb .kb-article h1 {
    font-size: 30px;
  }

  .view-kb .kb-article h2 {
    margin-top: 34px;
    font-size: 21px;
  }

  .view-kb .kb-article p,
  .view-kb .kb-article li {
    font-size: 15px;
  }

  .view-kb .kb-article .note,
  .view-kb .kb-article .warning {
    padding: 15px 16px;
  }

  .view-kb .kb-article th,
  .view-kb .kb-article td {
    min-width: 170px;
    padding: 11px 13px;
  }
}