/* Wspólna powłoka wizualna modułów (LEX / Frameworks / CVE / …) — białe tło */
body.ksc-mod {
  background: #fff;
}
body.ksc-mod main.container {
  background: transparent;
}

.ksc-mod-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.ksc-mod-wrap--narrow {
  max-width: 960px;
}

.ksc-mod-hero {
  text-align: center;
  margin: 0 auto 1.75rem;
  max-width: 42rem;
}
.ksc-mod-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.65rem;
}
.ksc-mod-hero h1 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  color: #212529;
}
.ksc-mod-hero p {
  font-size: 1.02rem;
  line-height: 1.5;
  color: #6c757d;
  margin: 0;
}
.ksc-mod-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.ksc-mod-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
  text-align: center;
}
.ksc-mod-section-title::before,
.ksc-mod-section-title::after {
  content: "";
  width: 4.5rem;
  height: 1px;
  flex: 0 0 auto;
}
.ksc-mod-section-title::before {
  background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.4));
}
.ksc-mod-section-title::after {
  background: linear-gradient(90deg, rgba(13, 110, 253, 0.4), transparent);
}
.ksc-mod-section-title--warn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.55));
}
.ksc-mod-section-title--warn::after {
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.55), transparent);
}
.ksc-mod-section-title--teal::before {
  background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.5));
}
.ksc-mod-section-title--teal::after {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.5), transparent);
}
.ksc-mod-section-title--purple::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5));
}
.ksc-mod-section-title--purple::after {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.5), transparent);
}
.ksc-mod-section-title--orange::before {
  background: linear-gradient(90deg, transparent, rgba(251, 146, 60, 0.55));
}
.ksc-mod-section-title--orange::after {
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.55), transparent);
}
.ksc-mod-section-title--pink::before {
  background: linear-gradient(90deg, transparent, rgba(230, 73, 128, 0.5));
}
.ksc-mod-section-title--pink::after {
  background: linear-gradient(90deg, rgba(230, 73, 128, 0.5), transparent);
}
.ksc-mod-section-title--info::before {
  background: linear-gradient(90deg, transparent, rgba(13, 202, 240, 0.5));
}
.ksc-mod-section-title--info::after {
  background: linear-gradient(90deg, rgba(13, 202, 240, 0.5), transparent);
}

.ksc-mod-panel {
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}
.ksc-mod-panel--soft {
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.04) 0%, #fff 70%);
}

.ksc-mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
  .ksc-mod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .ksc-mod-grid { grid-template-columns: 1fr; }
}

.ksc-mod-tile {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.15rem 1.1rem 1.05rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.ksc-mod-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.08);
  color: inherit;
}
.ksc-mod-tile h2 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: #212529;
}
.ksc-mod-tile p {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #6c757d;
  margin: 0;
  flex: 1 1 auto;
}

.ksc-mod-table-wrap {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}
.ksc-mod-table-head {
  padding: 0.75rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ksc-mod-table-wrap .table {
  margin: 0;
}

.ksc-mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.ksc-mod-note {
  font-size: 0.86rem;
  color: #6c757d;
  text-align: center;
  margin-bottom: 1rem;
}