#pentatonic-app .training-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

#pentatonic-app .training-sections button {
  --section-color: #efb95e;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  gap: 5px 8px;
  min-width: 0;
  min-height: 70px;
  padding: 12px 14px 12px 60px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--section-color) 4%, var(--surface)), var(--surface));
  color: var(--text);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#pentatonic-app .training-sections button::before,
#pentatonic-app .training-sections button::after {
  position: absolute;
  top: 50%;
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}

#pentatonic-app .training-sections button::before {
  left: 13px;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--section-color) 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--section-color) 9%, transparent);
}

#pentatonic-app .training-sections button::after {
  left: 21px;
  width: 20px;
  height: 20px;
  background: var(--section-color);
  mask: var(--section-icon) center / contain no-repeat;
}

#pentatonic-app .training-sections [data-training-section-button="pentatonic"] {
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5 3v18M12 3v18M19 3v18' opacity='.45'/%3E%3Cpath d='M3 8h4M3 15h4M10 8h4M10 15h4M17 8h4' stroke-width='4.5'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="scales"] {
  --section-color: #7cb5f5;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-5h5v-5h5V5h3M18 5V2'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="rhythm"] {
  --section-color: #f5a165;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l5 18H4L9 3ZM12 17l5-9'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='black'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="slap"] {
  --section-color: #bd9ae9;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12V5a1.5 1.5 0 0 1 3 0v6-8a1.5 1.5 0 0 1 3 0v8-6a1.5 1.5 0 0 1 3 0v8l2-2a1.5 1.5 0 0 1 2 2l-4 6a7 7 0 0 1-12-2l-2-5a1.5 1.5 0 0 1 2.8-1L8 14'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="improvisation"] {
  --section-color: #66c8bc;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17V6l10-3v12M6 10l10-3M20 3v4m-2-2h4'/%3E%3Cellipse cx='4' cy='18' rx='2.5' ry='2'/%3E%3Cellipse cx='14' cy='16' rx='2.5' ry='2'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="grooves"] {
  --section-color: #ce9e7c;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 10v4M8 6v12M12 3v18M16 7v10M20 10v4'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="ear-training"] {
  --section-color: #8daecc;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 11 3c-1 2-4 3-4 6a4 4 0 0 1-8 0M9 8a3 3 0 1 1 5 2c-1 1-2 2-2 4M6 11v2'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections [data-training-section-button="songs"] {
  --section-color: #d393ae;
  --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 18V5l12-3v13M8 9l12-3'/%3E%3Cellipse cx='5' cy='19' rx='3' ry='2'/%3E%3Cellipse cx='17' cy='16' rx='3' ry='2'/%3E%3C/svg%3E");
}

#pentatonic-app .training-sections:not(:has([data-training-section-button="songs"])) [data-training-section-button="improvisation"] { grid-column: span 2; }
#pentatonic-app .training-sections:has([data-training-section-button="songs"]) [data-training-section-button="improvisation"] { grid-column: auto; }
#pentatonic-app .training-sections button[title="Скоро"] { order: 1; border-style: dashed; color: #c0c4cc; cursor: default; }
#pentatonic-app .training-section__label { min-width: 0; }
#pentatonic-app .training-sections .lite-pro-option__badge { min-height: 19px; padding: 1px 6px; font-size: .61rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
#pentatonic-app .training-sections [title="Скоро"] .lite-pro-option__badge { border-color: #555b66; background: #ffffff04; color: #a8adb8; }
#pentatonic-app .training-sections button:disabled { opacity: 1; cursor: default; }
#pentatonic-app .training-sections button:not(:disabled):hover { border-color: color-mix(in srgb, var(--section-color) 65%, var(--border)); background: color-mix(in srgb, var(--section-color) 8%, var(--surface)); }
#pentatonic-app .training-sections button.is-active { border-color: var(--accent); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 17%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); }
#pentatonic-app .training-sections button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

@media (max-width: 700px) {
  #pentatonic-app .training-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pentatonic-app .training-sections button { min-height: 68px; padding: 11px 10px 11px 54px; font-size: .8rem; gap: 4px 6px; }
  #pentatonic-app .training-sections button::before { left: 10px; width: 32px; height: 32px; }
  #pentatonic-app .training-sections button::after { left: 17px; }
}

@media (max-width: 360px) {
  #pentatonic-app .training-sections { gap: 8px; }
  #pentatonic-app .training-sections button { padding-left: 46px; padding-right: 8px; font-size: .75rem; }
  #pentatonic-app .training-sections button::before { left: 8px; width: 28px; height: 30px; border-radius: 8px; }
  #pentatonic-app .training-sections button::after { left: 13px; width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  #pentatonic-app .training-sections button { transition: none; }
}

@media print {
  #pentatonic-app .training-sections { display: none; }
}