/* Дополнительные стили модуля */
.module-toc-mobile-toggle { display: none; }

@media (max-width: 880px) {
  .module-toc-mobile-toggle {
    display: block;
    width: 100%;
    margin-bottom: var(--space-md);
  }
  .module-toc { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
  .module-toc.is-open { max-height: 1000px; }
}

.module-progress-mini {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.module-progress-mini .progressbar { position: relative; flex: 1; height: 6px; background: #fff; border-radius: 999px; overflow: hidden; }
.module-progress-mini .progressbar__fill { background: var(--color-primary); border-radius: 999px; }

.module-content article {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-counter {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 4px;
}

.kbd {
  display: inline-block;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  vertical-align: baseline;
}

table.simple {
  margin: var(--space-md) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.simple th, table.simple td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
table.simple thead { background: var(--color-bg-soft); }
table.simple tbody tr:last-child td { border-bottom: none; }
table.simple tbody tr:nth-child(even) { background: #fafbfd; }

.icon-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.icon-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.icon-tile svg { margin: 0 auto var(--space-sm); }
.icon-tile h4 { color: var(--color-primary-dark); font-size: 0.92rem; margin-bottom: 4px; }
.icon-tile p { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md) 0;
  position: relative;
  padding-left: 24px;
  border-left: 2px solid var(--color-border-strong);
}
.timeline__item { position: relative; padding-left: 8px; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline__time {
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: 0.92rem;
}

.banner {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}
.banner h3 { color: #fff; margin-top: 0; }
.banner p:last-child { margin-bottom: 0; }

.shield-illustration {
  width: 280px;
  margin: var(--space-md) auto;
  display: block;
}