:root{  
  --aiabc-accent: #16a34a;          /* зелёный акцент */  
  --aiabc-accent-2: #22c55e;        /* светлее */  
  --aiabc-bg: #f7faf7;              /* светлый фон */  
  --aiabc-border: rgba(22,163,74,.25);  
  --aiabc-text: #0f172a;  
  --aiabc-muted: rgba(15,23,42,.65);  
  --aiabc-radius: 14px;  
  --aiabc-gap: 10px;  
  --aiabc-shadow: 0 10px 30px rgba(2, 44, 19, .08);  
  --aiabc-letter-size: 14px;  
}  
  
.aiabc{  
  background: var(--aiabc-bg);  
  border: 1px solid var(--aiabc-border);  
  border-radius: var(--aiabc-radius);  
  padding: 18px;  
  box-shadow: var(--aiabc-shadow);  
  color: var(--aiabc-text);  
}  
  
.aiabc__index{  
  display:flex;  
  flex-wrap:wrap;  
  gap: var(--aiabc-gap);  
  margin-bottom: 14px;  
}  
  
.aiabc__letter{  
  display:inline-flex;  
  align-items:center;  
  justify-content:center;  
  min-width: 48px;  
  height: 44px;  
  padding: 0 14px;  
  border-radius: 14px;  
  border: 1px solid rgba(255,255,255,.12);  
  text-decoration:none;  
  font-size: 16px;  
  font-weight: 700;  
  color: #fff;  
  background: linear-gradient(135deg, var(--aiabc-accent), var(--aiabc-accent-2));  
  box-shadow: 0 10px 25px rgba(22,163,74,.22);  
  transition: transform .12s ease, filter .12s ease;  
}  
  
.aiabc__letter:hover{  
  transform: translateY(-1px);  
  filter: brightness(1.05);  
}  
  
.aiabc__letter.is-disabled{  
  opacity:.35;  
  pointer-events:none;  
  filter: grayscale(1);  
}
  
.aiabc__group-title{  
  margin: 0 0 10px 0;  
  font-size: 18px;  
  line-height: 1.2;  
  color: var(--aiabc-accent);  
}  
  
.aiabc__list{  
  list-style:none;  
  margin: 0;  
  padding: 0;  
  display:grid;  
  gap: 8px 16px;  
}  
  
.aiabc__list--cols-1{ grid-template-columns: 1fr; }  
.aiabc__list--cols-2{ grid-template-columns: repeat(2, 1fr); }  
.aiabc__list--cols-3{ grid-template-columns: repeat(3, 1fr); }  
.aiabc__list--cols-4{ grid-template-columns: repeat(4, 1fr); }  
.aiabc__list--cols-5{ grid-template-columns: repeat(5, 1fr); }  
.aiabc__list--cols-6{ grid-template-columns: repeat(6, 1fr); }  
  
@media (max-width: 900px){  
  .aiabc__list--cols-4,  
  .aiabc__list--cols-5,  
  .aiabc__list--cols-6{ grid-template-columns: repeat(3, 1fr); }  
}  
@media (max-width: 640px){  
  .aiabc__list{ grid-template-columns: 1fr !important; }  
}  
  
.aiabc__link{  
  color: var(--aiabc-text);  
  text-decoration:none;  
  border-bottom: 1px dashed rgba(22,163,74,.35);  
}  
  
.aiabc__link:hover{  
  color: var(--aiabc-accent);  
  border-bottom-color: rgba(22,163,74,.75);  
}  
  
.aiabc__count{  
  color: var(--aiabc-muted);  
  margin-left: 6px;  
  font-size: 12px;  
}