/* Knowledge pages (additive). Keep consistent with existing UI. */
.kb_breadcrumbs{
  display:flex; gap:8px; align-items:center;
  padding:12px 16px; margin:16px 16px 0;
  border-radius:14px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
}
body.dark .kb_breadcrumbs{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.kb_breadcrumbs a{ text-decoration:none; opacity:.9; }
.kb_breadcrumbs span{ opacity:.6; }

.kb_controls{
  display:flex; flex-direction:column; gap:12px;
  padding:16px; margin:12px 16px 0;
  border-radius:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
}
body.dark .kb_controls{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.kb_search input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  outline:none;
}
body.dark .kb_search input{
  background: rgba(20,20,20,.8);
  border:1px solid rgba(255,255,255,.10);
  color:#F2F2F2;
}

.kb_chips{ display:flex; flex-wrap:wrap; gap:8px; }
.kb_chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  cursor:pointer;
  user-select:none;
}
body.dark .kb_chip{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,20,20,.6);
  color:#F2F2F2;
}
.kb_chip.active{
  border-color: rgba(255,255,255,.20);
  background: rgba(143, 35, 35, .35);
}
body.dark .kb_chip.active{
  background: rgba(143, 35, 35, .45);
}

.kb_grid{ padding: 0 16px 16px; }
.kb_section{ margin-top: 16px; }
.kb_section_head{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px;
  border-radius:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
}
body.dark .kb_section_head{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.kb_section_title{ margin:0; font-size:20px; }
.kb_section_hint{ opacity:.75; }

.kb_cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
@media (max-width: 980px){ .kb_cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .kb_cards{ grid-template-columns: 1fr; } }

.kb_card{
  text-decoration:none;
  border-radius:16px;
  padding:14px 14px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  transition: transform .12s ease, border-color .12s ease;
  display:block;
}
body.dark .kb_card{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.kb_card:hover{
  transform: translateY(-2px);
  border-color: rgba(143,35,35,.35);
}
.kb_card_title{ font-size:16px; font-weight:700; }
.kb_card_sub{ margin-top:6px; opacity:.75; }
.kb_badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.kb_badge{
  font-size:12px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  opacity:.9;
}
body.dark .kb_badge{ border:1px solid rgba(255,255,255,.10); }
.kb_badge_t1{ background: rgba(60,160,90,.14); }
.kb_badge_t2{ background: rgba(90,120,190,.14); }
.kb_badge_t3{ background: rgba(190,140,40,.14); }

.kb_article{
  margin: 12px 16px 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
}
body.dark .kb_article{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
}
.kb_article h2{ margin-top: 0; font-size: 20px; }
.kb_article h3{ font-size: 16px; margin-top: 16px; }
.kb_kv{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 10px 0 0;
}
.kb_kv span{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.10);
  font-size: 12px;
}
body.dark .kb_kv span{ border:1px solid rgba(255,255,255,.10); }

/* =========================
   PREMIUM DARK LITE (Knowledge)
   Add to end of css/knowledge.css
   ========================= */

:root{
  --kb-gold: rgba(255, 205, 120, .50);
  --kb-gold-soft: rgba(255, 205, 120, .16);

  --kb-dark-bg: rgba(18, 18, 18, .42);
  --kb-dark-bg-2: rgba(0, 0, 0, .16);
  --kb-dark-border: rgba(255, 255, 255, .10);
  --kb-dark-text: rgba(242, 242, 242, .92);
  --kb-dark-muted: rgba(242, 242, 242, .74);

  --kb-shadow: 0 18px 60px rgba(0,0,0,.55);
  --kb-shadow-soft: 0 10px 40px rgba(0,0,0,.35);
}

/* 1) Чуть “поднять” общий фон контента */
body.dark .main_page{
  background: #141414; /* было темнее/глухо — делаем чуть “дороже” */
}

/* 2) Хлебные крошки: более светлое стекло + золото */
body.dark .kb_breadcrumbs{
  background: linear-gradient(180deg, rgba(28,28,28,.60), rgba(12,12,12,.22));
  border: 1px solid rgba(255,205,120,.14);
  box-shadow: var(--kb-shadow-soft);
}
body.dark .kb_breadcrumbs a{
  color: var(--kb-dark-text);
  opacity: .92;
}
body.dark .kb_breadcrumbs span{
  opacity: .55;
}

/* 3) Панель поиска/фильтров: “окно клиента” */
body.dark .kb_controls{
  background: linear-gradient(180deg, var(--kb-dark-bg), var(--kb-dark-bg-2));
  border: 1px solid rgba(255,205,120,.12);
  box-shadow: var(--kb-shadow);
}
body.dark .kb_search input{
  background: rgba(28,28,28,.78);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--kb-dark-text);
}
body.dark .kb_search input::placeholder{
  color: rgba(242,242,242,.50);
}

/* 4) Чипсы (расы): премиальнее и читабельнее */
body.dark .kb_chip{
  background: rgba(28,28,28,.62);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(242,242,242,.88);
}
body.dark .kb_chip.active{
  background: rgba(255,205,120,.14);
  border-color: rgba(255,205,120,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* 5) Заголовок секции (раса): “бар” */
body.dark .kb_section_head{
  background: linear-gradient(180deg, rgba(30,30,30,.62), rgba(10,10,10,.18));
  border: 1px solid rgba(255,205,120,.12);
  box-shadow: var(--kb-shadow-soft);
}
body.dark .kb_section_title{
  color: var(--kb-dark-text);
}
body.dark .kb_section_hint{
  color: var(--kb-dark-muted);
}

/* 6) Карточки квестов: светлее, “стекло”, мягкий glow */
body.dark .kb_card{
  background: linear-gradient(180deg, rgba(34,34,34,.58), rgba(10,10,10,.14));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 14px 42px rgba(0,0,0,.38);
}
body.dark .kb_card:hover{
  border-color: rgba(255,205,120,.22);
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
  transform: translateY(-2px);
}
body.dark .kb_card_title{
  color: var(--kb-dark-text);
}
body.dark .kb_card_sub{
  color: var(--kb-dark-muted);
}

/* 7) Бейджи: меньше “серого”, больше статусов */
body.dark .kb_badge{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(242,242,242,.86);
}
body.dark .kb_badge_t1{ background: rgba(90, 200, 120, .12); }
body.dark .kb_badge_t2{ background: rgba(120, 170, 255, .12); }
body.dark .kb_badge_t3{ background: rgba(255, 205, 120, .14); border-color: rgba(255,205,120,.18); }

/* 8) Страница квеста: “лист гайда” светлее */
body.dark .kb_article{
  background: linear-gradient(180deg, rgba(30,30,30,.62), rgba(10,10,10,.16));
  border: 1px solid rgba(255,205,120,.10);
  box-shadow: var(--kb-shadow);
}
body.dark .kb_article h2,
body.dark .kb_article h3{
  color: var(--kb-dark-text);
}
body.dark .kb_article p,
body.dark .kb_article li{
  color: rgba(242,242,242,.80);
}
body.dark .kb_kv span{
  background: rgba(255,205,120,.10);
  border-color: rgba(255,205,120,.18);
  color: rgba(242,242,242,.90);
}

/* =========================
   SECTION HEAD (Race header) polish
   affects: .kb_section_head / .kb_section_title / .kb_section_hint
   ========================= */

.kb_section_head{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 14px 16px;

  /* “приятное стекло” */
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 45px rgba(0,0,0,.10);
}

body.dark .kb_section_head{
  background: linear-gradient(180deg, rgba(34,34,34,.62), rgba(10,10,10,.14));
  border: 1px solid rgba(255,205,120,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* тонкий “золотой” кант сверху + мягкий блик */
.kb_section_head::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,120,.35), transparent);
  opacity: .9;
  pointer-events:none;
}

.kb_section_head::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 20% 20%, rgba(255,205,120,.18), transparent 55%);
  opacity: .55;
  pointer-events:none;
}

/* Заголовок “Гномы” — как label в клиенте */
.kb_section_title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

body.dark .kb_section_title{
  color: rgba(242,242,242,.92);
}

/* Строка классов — читаемая, не шумная */
.kb_section_hint{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: .01em;
  opacity: .78;
}

body.dark .kb_section_hint{
  color: rgba(242,242,242,.74);
}

/* Красивый акцент стрелки → (чуть “дороже”) */
.kb_section_hint{
  font-variant-ligatures: contextual;
}
/* =========================
   CARDS polish (Catalog)
   affects: .kb_card + badges + typography
   ========================= */

/* база карточки */
.kb_card{
  position: relative;
  border-radius: 16px;
  padding: 14px 14px 13px;
  text-decoration: none;
  overflow: hidden;
  transform: translateZ(0);

  /* светлая тема */
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.46));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 44px rgba(0,0,0,.08);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}

/* тёмная тема — “премиум стекло” */
body.dark .kb_card{
  background: linear-gradient(180deg, rgba(34,34,34,.62), rgba(10,10,10,.14));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 60px rgba(0,0,0,.50);
}

/* мягкий блик + тонкий кант (как у UI слотов) */
.kb_card::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 20% 20%, rgba(255,205,120,.16), transparent 55%);
  opacity: .55;
  pointer-events:none;
}
.kb_card::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

/* hover: не “кричим”, а дорого подсвечиваем */
.kb_card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,205,120,.20);
  box-shadow: 0 26px 84px rgba(0,0,0,.64);
  filter: saturate(1.02);
}
.kb_card:active{
  transform: translateY(0);
}

/* accessibility: фокус с клавиатуры */
.kb_card:focus-visible{
  outline: none;
  box-shadow: 0 26px 84px rgba(0,0,0,.64), 0 0 0 3px rgba(255,205,120,.18);
  border-color: rgba(255,205,120,.26);
}

/* заголовок: плотнее, как “название в клиенте” */
.kb_card_title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-top: 2px;
}
body.dark .kb_card_title{
  color: rgba(242,242,242,.92);
}

/* подзаголовок: читаемый, но не шумит */
.kb_card_sub{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.25;
  opacity: .78;
}
body.dark .kb_card_sub{
  color: rgba(242,242,242,.74);
}

/* бейджи: аккуратнее и “дороже” */
.kb_badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,205,120,.10);
}
body.dark .kb_badges{
  border-bottom-color: rgba(255,205,120,.12);
}

.kb_badge{
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  opacity: .95;
}
body.dark .kb_badge{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,242,242,.84);
}

/* статусы проф */
.kb_badge_t1{ background: rgba(90, 200, 120, .14); border-color: rgba(90,200,120,.20); }
.kb_badge_t2{ background: rgba(120, 170, 255, .14); border-color: rgba(120,170,255,.20); }
.kb_badge_t3{ background: rgba(255, 205, 120, .16); border-color: rgba(255,205,120,.22); }

/* на мобилке делаем плотнее */
@media (max-width: 480px){
  .kb_card{ padding: 13px 12px 12px; border-radius: 14px; }
  .kb_card::after{ inset: 7px; border-radius: 11px; }
  .kb_card_title{ font-size: 15px; }
}

/* =========================
   CARD COLOR ACCENTS BY PROFESSION
   (structure unchanged)
   ========================= */

/* базу оставляем как сейчас, только чуть мягче */
body.dark .kb_card{
  background: linear-gradient(180deg, rgba(32,32,32,.62), rgba(10,10,10,.18));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}

/* =========================
   1 PROFESSION — GREEN (START)
   ========================= */
body.dark .kb_card:has(.kb_badge_t1){
  border-color: rgba(90,200,120,.22);
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(90,200,120,.10) inset;
}
body.dark .kb_card:has(.kb_badge_t1)::before{
  background: radial-gradient(circle at 20% 15%, rgba(90,200,120,.22), transparent 55%);
}

/* =========================
   2 PROFESSION — BLUE (PROGRESSION)
   ========================= */
body.dark .kb_card:has(.kb_badge_t2){
  border-color: rgba(120,170,255,.22);
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,170,255,.10) inset;
}
body.dark .kb_card:has(.kb_badge_t2)::before{
  background: radial-gradient(circle at 20% 15%, rgba(120,170,255,.22), transparent 55%);
}

/* =========================
   3 PROFESSION — GOLD (ENDGAME)
   ========================= */
body.dark .kb_card:has(.kb_badge_t3){
  border-color: rgba(255,205,120,.26);
  box-shadow:
    0 20px 65px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,205,120,.14) inset;
}
body.dark .kb_card:has(.kb_badge_t3)::before{
  background: radial-gradient(circle at 20% 15%, rgba(255,205,120,.26), transparent 55%);
}

/* =========================
   HOVER — усиление “клиентского” свечения
   ========================= */
body.dark .kb_card:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
}

/* усиливаем glow именно по цвету профы */
body.dark .kb_card:hover:has(.kb_badge_t1){
  box-shadow:
    0 28px 85px rgba(0,0,0,.75),
    0 0 28px rgba(90,200,120,.18);
}
body.dark .kb_card:hover:has(.kb_badge_t2){
  box-shadow:
    0 28px 85px rgba(0,0,0,.75),
    0 0 28px rgba(120,170,255,.18);
}
body.dark .kb_card:hover:has(.kb_badge_t3){
  box-shadow:
    0 32px 95px rgba(0,0,0,.80),
    0 0 34px rgba(255,205,120,.24);
}

/* Recommendations block */
.kb_reco_grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 980px){
  .kb_reco_grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .kb_reco_grid{ grid-template-columns: 1fr; }
}

.kb_reco_card{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(34,34,34,.58), rgba(10,10,10,.14));
  box-shadow: 0 14px 44px rgba(0,0,0,.40);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.kb_reco_card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,205,120,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
}
.kb_reco_title{
  font-weight:800;
  letter-spacing:.01em;
  color: rgba(242,242,242,.92);
}
.kb_reco_meta{
  margin-top:6px;
  font-size:12px;
  opacity:.72;
  color: rgba(242,242,242,.78);
}

/* =========================================================
   KNOWLEDGE PAGE — PREMIUM READING UI (NO HTML CHANGES)
   Paste at END of css/knowledge.css
   ========================================================= */

:root{
  --kb-text: rgba(242,242,242,.90);
  --kb-muted: rgba(242,242,242,.72);
  --kb-soft: rgba(255,255,255,.06);
  --kb-border: rgba(255,255,255,.10);
  --kb-gold: rgba(255,205,120,.22);
  --kb-gold2: rgba(255,205,120,.12);
}

/* 1) Ограничиваем “линию чтения” и делаем воздух */
.kb_article{
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  padding: 18px 18px;
}

@media (max-width: 980px){
  .kb_article{ max-width: 100%; padding: 16px 14px; }
}

/* 2) База текста: шрифт/межстрочный/контраст */
body.dark .kb_article{
  color: var(--kb-text);
}

body.dark .kb_article p,
body.dark .kb_article li{
  color: var(--kb-text);
  line-height: 1.62;
  font-size: 15px;
  letter-spacing: .01em;
}

/* абзацы: чтобы не было “каши” */
.kb_article p{
  margin: 10px 0;
}

/* 3) Заголовки: клиентский стиль — компактно и весомо */
.kb_article h2{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 10px;
}

.kb_article h3{
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin: 0 0 10px;
  color: rgba(242,242,242,.88);
}

/* 4) Разделители/ритм — делаем блоки “структурными” */
body.dark .kb_article{
  border: 1px solid var(--kb-border);
  background: linear-gradient(180deg, rgba(30,30,30,.62), rgba(10,10,10,.16));
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* лёгкий орнамент/блик сверху (очень аккуратно) */
body.dark .kb_article::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kb-gold), transparent);
  opacity: .95;
  pointer-events:none;
}
body.dark .kb_article::after{
  content:"";
  position:absolute;
  inset:-70%;
  background: radial-gradient(circle at 18% 18%, rgba(255,205,120,.12), transparent 55%);
  opacity: .55;
  pointer-events:none;
}

/* 5) Списки: читаемые, не “дисковые простыни” */
.kb_article ul,
.kb_article ol{
  margin: 10px 0;
  padding-left: 18px;
}

.kb_article li{
  margin: 7px 0;
}

body.dark .kb_article li::marker{
  color: rgba(255,205,120,.55);
}

/* 6) Ссылки: премиальный hover, без синей “веб-старости” */
body.dark .kb_article a{
  color: rgba(255,205,120,.92);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,205,120,.40);
  transition: border-color .14s ease, filter .14s ease;
}
body.dark .kb_article a:hover{
  border-bottom-color: rgba(255,205,120,.85);
  filter: saturate(1.05);
}

/* 7) “Чипсы” (kb_kv): делаем аккуратнее и единообразнее */
.kb_kv{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}

body.dark .kb_kv span{
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,242,242,.86);
  font-size: 12px;
  letter-spacing: .02em;
}

/* 8) Breadcrumbs: компактнее, как “панель навигации” */
body.dark .kb_breadcrumbs{
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255,205,120,.12);
  background: linear-gradient(180deg, rgba(28,28,28,.62), rgba(10,10,10,.18));
  box-shadow: 0 14px 44px rgba(0,0,0,.50);
  border-radius: 14px;
}
@media (max-width: 980px){
  body.dark .kb_breadcrumbs{ max-width: 100%; }
}

/* 9) Блок “Рекомендуем”: чтобы выглядел как часть UI */
body.dark #kb-reco h3{
  margin-bottom: 12px;
}
body.dark .kb_reco_card{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(34,34,34,.58), rgba(10,10,10,.14));
}

/* 10) Общая плотность между kb_article блоками */
.kb_article + .kb_article{
  margin-top: 12px;
}


/* =========================
   Quest steps — client style
   ========================= */

.kb_article ol{
  counter-reset: quest-step;
}

.kb_article ol > li{
  list-style: none;
  counter-increment: quest-step;
  position: relative;
  padding-left: 38px;
  margin: 14px 0;
}

.kb_article ol > li::before{
  content: counter(quest-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 13px;
  color: #141414;

  background: linear-gradient(180deg, rgba(255,205,120,.95), rgba(255,185,90,.85));
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
/* =========================
   Emphasis polish (NPC / items)
   ========================= */

body.dark .kb_article b{
  color: rgba(255,205,120,.95);
  font-weight: 800;
}
/* =========================================================
   Quest meta (kb_kv) — semantic color accents
   ========================================================= */

body.dark .kb_kv span{
  position: relative;
  border-radius: 999px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,242,242,.86);
  font-size: 12px;
  letter-spacing: .02em;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* 1 профа — зелёный (tier 1) */
body.dark .kb_kv span:nth-child(1){
  border-color: rgba(90,200,120,.35);
  color: rgba(160,230,185,.95);
  box-shadow:
    0 6px 22px rgba(0,0,0,.45),
    0 0 0 1px rgba(90,200,120,.20) inset;
}

/* Раса — тёплый бронзовый */
body.dark .kb_kv span:nth-child(2){
  border-color: rgba(200,160,90,.35);
  color: rgba(235,205,150,.95);
}

/* Уровень — холодный системный */
body.dark .kb_kv span:nth-child(3){
  border-color: rgba(120,170,255,.35);
  color: rgba(180,205,255,.95);
}

/* Локации — нейтрально */
body.dark .kb_kv span:nth-child(4){
  color: rgba(242,242,242,.82);
  border-color: rgba(255,255,255,.12);
}

/* Награда — золото (цель квеста) */
body.dark .kb_kv span:nth-child(5){
  border-color: rgba(255,205,120,.45);
  color: rgba(255,220,160,.98);
  box-shadow:
    0 8px 28px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,205,120,.22) inset;
}
	/* =========================
   KB Ads (inline banners)
   ========================= */

.kb_ad{
  max-width: 940px;
  margin: 12px auto 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

body.dark .kb_ad{
  background: linear-gradient(180deg, rgba(30,30,30,.62), rgba(10,10,10,.16));
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
  border-color: rgba(255,205,120,.12);
}

.kb_ad_head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,205,120,.10);
  background: rgba(255,255,255,.03);
}

.kb_ad_badge{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,205,120,.20);
  background: rgba(255,205,120,.10);
  color: rgba(255,220,160,.98);
}

.kb_ad_note{
  font-size: 12px;
  opacity: .72;
  color: rgba(242,242,242,.80);
}

.kb_ad_body{
  display:block;
  text-decoration:none;
  padding: 14px 12px 14px;
}

.kb_ad_title{
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(242,242,242,.92);
  font-size: 15px;
}

.kb_ad_text{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .78;
  color: rgba(242,242,242,.80);
}

/* лёгкий “клиентский” hover */
.kb_ad:hover{
  transform: translateY(-1px);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  border-color: rgba(255,205,120,.20);
  box-shadow: 0 26px 84px rgba(0,0,0,.70);
}

/* моб: плотнее */
@media (max-width: 560px){
  .kb_ad_head{ padding: 9px 10px; }
  .kb_ad_body{ padding: 12px 10px; }
}
/* =========================
   KB Banner Ad (GIF/PNG)
   ========================= */

.kb_ad{
  max-width: 940px;
  margin: 12px auto 0;
}

.kb_ad_link{
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;

  /* рамка + стекло (как в клиенте) */
  border: 1px solid rgba(255,205,120,.12);
  background: linear-gradient(180deg, rgba(30,30,30,.62), rgba(10,10,10,.16));
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
  transform: translateZ(0);
}

/* тонкая золотая линия сверху */
.kb_ad_link::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,120,.26), transparent);
  opacity: .95;
  pointer-events:none;
  z-index: 3;
}

/* мягкий “блик” */
.kb_ad_link::after{
  content:"";
  position:absolute;
  inset:-70%;
  background: radial-gradient(circle at 18% 18%, rgba(255,205,120,.14), transparent 55%);
  opacity: .55;
  pointer-events:none;
  z-index: 2;
}

/* картинка баннера */
.kb_ad_img{
  display:block;
  width: 100%;
  height: auto;
  /* если баннеры разного размера — можно включить фикс. высоту:
     height: 130px; object-fit: cover; */
}

/* Бейдж “Реклама” */
.kb_ad_badge{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 4;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;

  padding: 6px 9px;
  border-radius: 999px;

  border: 1px solid rgba(255,205,120,.22);
  background: rgba(255,205,120,.10);
  color: rgba(255,220,160,.98);

  backdrop-filter: blur(10px);
}

/* hover / active */
.kb_ad_link{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}
.kb_ad_link:hover{
  transform: translateY(-2px);
  border-color: rgba(255,205,120,.20);
  box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 34px rgba(255,205,120,.12);
  filter: saturate(1.03);
}
.kb_ad_link:active{
  transform: translateY(0);
}

/* моб — компактнее */
@media (max-width: 560px){
  .kb_ad_link{ border-radius: 14px; }
  .kb_ad_badge{ top: 8px; right: 8px; padding: 5px 8px; font-size: 10px; }
}
.kb_ad_img{
  width:100%;
  height:130px;
  object-fit: cover;
}
/* =========================================================
   KB Section Headings (h3) — L2 Client Style
   ========================================================= */

body.dark .kb_article h3{
  position: relative;
  margin: 4px 0 12px;
  padding-bottom: 10px;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,220,160,.95);
}

/* золотая линия под заголовком */
body.dark .kb_article h3::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,205,120,.55),
    transparent
  );

  opacity: .95;
}

/* мягкий ореол */
body.dark .kb_article h3::before{
  content:"";
  position:absolute;
  left: -20%;
  right: -20%;
  bottom: -6px;
  height: 24px;

  background: radial-gradient(
    ellipse at center,
    rgba(255,205,120,.18),
    transparent 60%
  );

  opacity: .6;
  pointer-events:none;
}

/* мобильная версия — компактнее */
@media (max-width: 560px){
  body.dark .kb_article h3{
    font-size: 12px;
    letter-spacing: .12em;
    padding-bottom: 9px;
  }
}

/* =========================
   KB (Knowledge) – Premium polish for professions index
   Paste at the VERY END of knowledge.css
   ========================= */

/* Base spacing */
.kb_breadcrumbs {
  margin-bottom: 14px;
  opacity: .86;
}
.kb_breadcrumbs a { opacity: .9; }
.kb_breadcrumbs span { opacity: .65; }

/* Controls wrapper */
.kb_controls {
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

/* Search input */
.kb_search input,
#kbSearch {
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.kb_search input::placeholder,
#kbSearch::placeholder {
  opacity: .68;
}

.kb_search input:focus,
#kbSearch:focus {
  border-color: rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}

/* Chips row */
.kb_chips {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.kb_chip {
  border-radius: 999px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.kb_chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.kb_chip.active {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

/* Grid layout */
.kb_grid {
  margin-top: 12px;
}

/* Sections */
.kb_section {
  margin-top: 18px;
}

.kb_section_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;

  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.kb_section_title {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .2px;
}

.kb_section_hint {
  opacity: .72;
  font-size: 14px;
  line-height: 1.25;
  max-width: 760px;
}

/* Cards container */
.kb_cards {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Card */
.kb_card {
  display: block;
  text-decoration: none !important;
  color: inherit;

  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 26px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
  overflow: hidden;
}

.kb_card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 16px 42px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.kb_card:active {
  transform: translateY(0px);
}

/* Card inner */
.kb_card_top {
  padding: 14px;
}

.kb_card_title {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .2px;
}

.kb_card_sub {
  margin-top: 8px;
  opacity: .74;
  font-size: 14px;
  line-height: 1.25;
}

/* Badges */
.kb_badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.kb_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  line-height: 1;
  opacity: .92;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

/* Tier highlight (1/2/3 prof) – аккуратно, без кричащих цветов */
.kb_badge_t1 {
  border-color: rgba(120, 220, 255, .22);
  background: rgba(120, 220, 255, .08);
}

.kb_badge_t2 {
  border-color: rgba(170, 255, 190, .22);
  background: rgba(170, 255, 190, .08);
}

.kb_badge_t3 {
  border-color: rgba(255, 210, 120, .22);
  background: rgba(255, 210, 120, .08);
}

/* Make card “feel” clickable */
.kb_card .kb_card_title,
.kb_card .kb_card_sub {
  transition: opacity .14s ease, transform .14s ease;
}
.kb_card:hover .kb_card_title { transform: translateY(-1px); }
.kb_card:hover .kb_card_sub { opacity: .82; }

/* Responsive */
@media (max-width: 1100px) {
  .kb_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .kb_controls {
    padding: 12px;
    border-radius: 16px;
  }

  .kb_section_head {
    padding: 12px;
    border-radius: 16px;
  }

  .kb_section_title { font-size: 20px; }
  .kb_cards { grid-template-columns: 1fr; }

  /* Chips usability on mobile */
  .kb_chips {
    position: sticky;
    top: 10px;
    z-index: 3;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
  }
}

/* Optional: smoother focus for keyboard users */
.kb_card:focus-visible,
.kb_chip:focus-visible,
.kb_search input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

/* ==========================================================
   L2-SERVER KB — Premium L2 UI (Professions Index)
   Paste at the VERY END of knowledge.css
   (No HTML changes, only UI/spacing/visual hierarchy)
   ========================================================== */

/* ---------- L2 UI tokens (neutral + essence red accent) ---------- */
:root{
  --l2-bg-0: rgba(0,0,0,.18);
  --l2-bg-1: rgba(255,255,255,.04);
  --l2-bg-2: rgba(255,255,255,.06);

  --l2-brd-1: rgba(255,255,255,.10);
  --l2-brd-2: rgba(255,255,255,.14);

  --l2-txt-1: rgba(255,255,255,.92);
  --l2-txt-2: rgba(255,255,255,.74);
  --l2-txt-3: rgba(255,255,255,.58);

  /* Accent (Essence-like dark red) */
  --l2-accent: 187, 52, 66; /* rgb */
  --l2-accent-soft: rgba(var(--l2-accent), .14);
  --l2-accent-mid: rgba(var(--l2-accent), .26);
  --l2-accent-brd: rgba(var(--l2-accent), .36);

  --l2-shadow-1: 0 10px 28px rgba(0,0,0,.38);
  --l2-shadow-2: 0 18px 50px rgba(0,0,0,.48);
  --l2-inset: inset 0 1px 0 rgba(255,255,255,.05);
  --l2-radius-1: 16px;
  --l2-radius-2: 18px;
}

/* ---------- Breadcrumbs ---------- */
.kb_breadcrumbs{
  margin-bottom: 14px;
  opacity: .88;
}
.kb_breadcrumbs a{
  color: inherit;
  text-decoration: none;
  opacity: .92;
}
.kb_breadcrumbs a:hover{ opacity: 1; }
.kb_breadcrumbs span{ opacity: .62; }

/* ---------- Controls (Search + Chips) as premium panel ---------- */
.kb_controls{
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: var(--l2-radius-2);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border: 1px solid var(--l2-brd-1);
  box-shadow: var(--l2-shadow-1), var(--l2-inset);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* Accent hairline */
.kb_controls::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(600px 120px at 18% 0%, var(--l2-accent-soft), transparent 60%),
    radial-gradient(520px 120px at 82% 0%, rgba(255,255,255,.06), transparent 60%);
  opacity: .9;
}

/* Search input */
.kb_search input,
#kbSearch{
  width: 100%;
  border-radius: var(--l2-radius-1);
  padding: 12px 14px;
  border: 1px solid var(--l2-brd-1);
  background: rgba(0,0,0,.22);
  color: var(--l2-txt-1);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.kb_search input::placeholder,
#kbSearch::placeholder{ opacity: .68; }

.kb_search input:focus,
#kbSearch:focus{
  border-color: var(--l2-accent-brd);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 4px rgba(var(--l2-accent), .12);
}

/* Chips row */
.kb_chips{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

/* Chip button */
.kb_chip{
  border-radius: 999px;
  padding: 9px 12px;
  border: 1px solid var(--l2-brd-1);
  background: rgba(255,255,255,.04);
  color: var(--l2-txt-1);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.kb_chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: var(--l2-brd-2);
}

.kb_chip.active{
  background: linear-gradient(180deg, rgba(var(--l2-accent), .22), rgba(var(--l2-accent), .12));
  border-color: var(--l2-accent-brd);
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
}

/* ---------- Sections “by race” ---------- */
.kb_section{
  margin-top: 18px;
}

.kb_section_head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;

  padding: 14px 14px 12px;
  border-radius: var(--l2-radius-2);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--l2-inset);
  position: relative;
  overflow: hidden;
}

.kb_section_head::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 12px;
  width: 56px;
  height: 2px;
  background: rgba(var(--l2-accent), .55);
  border-radius: 999px;
  opacity: .9;
}

.kb_section_title{
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .2px;
}

.kb_section_hint{
  opacity: .72;
  font-size: 14px;
  line-height: 1.25;
  max-width: 760px;
}

/* ---------- Cards grid ---------- */
.kb_cards{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* ---------- Card (premium L2 tile) ---------- */
.kb_card{
  display:block;
  color: inherit;
  text-decoration: none !important;

  border-radius: var(--l2-radius-2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.028));
  border: 1px solid var(--l2-brd-1);
  box-shadow: var(--l2-shadow-1), var(--l2-inset);
  overflow: hidden;
  position: relative;

  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.kb_card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(520px 140px at 20% 0%, rgba(var(--l2-accent), .12), transparent 62%),
    radial-gradient(420px 120px at 90% 0%, rgba(255,255,255,.06), transparent 60%);
  opacity: .9;
}

.kb_card:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--l2-accent), .38);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.032));
  box-shadow: var(--l2-shadow-2), var(--l2-inset);
}

.kb_card:active{ transform: translateY(0); }

.kb_card_top{
  padding: 14px;
  position: relative;
  z-index: 1;
}

.kb_card_title{
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .2px;
  color: var(--l2-txt-1);
}

.kb_card_sub{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.25;
  color: var(--l2-txt-2);
}

/* ---------- Badges ---------- */
.kb_badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}

.kb_badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
}

/* Tier badges: subtle, premium */
.kb_badge_t1{
  border-color: rgba(120, 220, 255, .22);
  background: rgba(120, 220, 255, .08);
}
.kb_badge_t2{
  border-color: rgba(170, 255, 190, .22);
  background: rgba(170, 255, 190, .08);
}
.kb_badge_t3{
  border-color: rgba(255, 210, 120, .22);
  background: rgba(255, 210, 120, .08);
}

/* Tiny “L2 accent dot” on tier badge only */
.kb_badge_t1::before,
.kb_badge_t2::before,
.kb_badge_t3::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  margin-right: 6px;
  background: rgba(var(--l2-accent), .65);
  box-shadow: 0 0 0 3px rgba(var(--l2-accent), .12);
}

/* ---------- Focus accessibility ---------- */
.kb_card:focus-visible,
.kb_chip:focus-visible,
.kb_search input:focus-visible{
  outline: none;
  border-color: rgba(var(--l2-accent), .50) !important;
  box-shadow: 0 0 0 4px rgba(var(--l2-accent), .12) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .kb_cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .kb_controls{
    padding: 12px;
    border-radius: 16px;
  }
  .kb_section_head{
    padding: 12px;
    border-radius: 16px;
  }
  .kb_section_title{ font-size: 20px; }
  .kb_cards{ grid-template-columns: 1fr; }

  /* Chips become sticky for fast browsing */
  .kb_chips{
    position: sticky;
    top: 10px;
    z-index: 3;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
  }
}

/* ---------- Optional: nicer spacing if your layout wraps main_content ---------- */
.main_content .kb_grid{ margin-top: 12px; }

/* Dashboard header feel */
.kb_controls { position: sticky; top: 12px; z-index: 5; }
@media (max-width: 640px){ .kb_controls { position: static; } }

/* Card hover "glow" */
.kb_card:hover { box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }


/* ===== KB Recommendations (L2 UI) ===== */
.kb_reco{
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(25,25,25,.72), rgba(10,10,10,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.kb_reco_h{
  margin: 0 0 12px 0;
  font-family: 'HelveticaNeue-Bold';
  font-size: 18px;
  line-height: 1.2;
  color: rgba(242,242,242,.95);
}
.kb_reco_list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.kb_reco_card{
  display: block;
  padding: 14px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  transition: .15s ease;
}
.kb_reco_card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 26px 84px rgba(0,0,0,.55);
}
.kb_reco_title{
  font-family: 'HelveticaNeue-Bold';
  font-size: 14px;
  line-height: 1.25;
  color: rgba(242,242,242,.95);
}
.kb_reco_meta{
  margin-top: 8px;
  font-size: 12.5px;
  opacity: .78;
  color: rgba(242,242,242,.80);
}
@media (max-width: 1100px){
  .kb_reco_list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .kb_reco_list{ grid-template-columns: 1fr; }
}