/* ============================================================
   enhance.css — тёмная тема, поиск, подписка, похожие статьи
   Добавлено поверх существующего дизайна. Ничего не удаляет.
   ============================================================ */

/* ---------- 1. ТЁМНАЯ ТЕМА: инверсия переменных ---------- */
html[data-theme="dark"]{
  --bg:#1A1D1F;
  --surface:#22272A;
  --paper:#1E2224;
  --ink:#E8E4D9;
  --ink-2:#C4BCA9;
  --muted:#8A8578;
  --line:#2E3437;
  --border:#2E3437;
  --accent:#4A9099;
  --accent-2:#6FB3BB;
  --accent-dark:#6FB3BB;
  --gold:#D4A24A;
  --gold-hi:#E4B863;
  color-scheme: dark;
}

/* Шапки с зашитым светлым фоном */
[data-theme="dark"] header.nav{background:rgba(26,29,31,.92)}
[data-theme="dark"] header.site{background:rgba(26,29,31,.92)}
[data-theme="dark"] footer{background:var(--surface)}

/* Плашка-анонс (фон = var(--ink), в темноте становится светлым) */
[data-theme="dark"] .anno{background:#111517;color:#E8E4D9}

/* Зашитые светлые фоны в инлайн-стилях */
[data-theme="dark"] [style*="background:#F5F1E8"],
[data-theme="dark"] [style*="background:#FBF8F0"]{background:#1A1D1F!important}
[data-theme="dark"] [style*="background:#F9F8F5"],
[data-theme="dark"] [style*="background:#F1EDE0"],
[data-theme="dark"] [style*="background:#EAE5D6"],
[data-theme="dark"] [style*="background:#EFE9D9"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background:#FFF"]{background:#22272A!important}

/* Блок «Из книги» в статьях блога */
[data-theme="dark"] .from-book{background:#26221B!important;border-left-color:#D4A24A!important}
[data-theme="dark"] .from-book,
[data-theme="dark"] .from-book div,
[data-theme="dark"] .from-book p,
[data-theme="dark"] .from-book blockquote{color:#DCD1BB!important}
[data-theme="dark"] .from-book a{color:#D4A24A!important;border-bottom-color:#D4A24A!important}

/* Тёмные картинки чуть мягче */
[data-theme="dark"] img{filter:brightness(.94) contrast(1.02)}
[data-theme="dark"] .frame img{filter:none}

/* ---------- 2. КНОПКИ В ШАПКЕ ---------- */
.ux-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ux-btn{
  display:inline-grid;place-items:center;
  width:38px;height:38px;padding:0;
  background:transparent;color:var(--ink-2,var(--ink));
  border:1px solid var(--line);border-radius:999px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  line-height:0;
}
.ux-btn:hover{color:var(--accent);border-color:var(--accent)}
.ux-btn svg{width:18px;height:18px;display:block}
.ux-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ux-btn svg.ux-i-moon{display:none}
html[data-theme="dark"] .ux-btn svg.ux-i-sun{display:none}
html[data-theme="dark"] .ux-btn svg.ux-i-moon{display:block}
@media (max-width:560px){
  .ux-btn{width:34px;height:34px}
  .ux-btn svg{width:16px;height:16px}
  .ux-actions{gap:4px}
}

/* ---------- 3. МОДАЛКА ПОИСКА ---------- */
.ux-search-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(16,20,22,.55);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;
  padding:12vh 16px 16px;
}
.ux-search-overlay.open{display:flex}
.ux-search-box{
  width:100%;max-width:600px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.28);
  overflow:hidden;
}
.ux-search-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ux-search-head svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.ux-search-input{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:inherit;font-size:17px;color:var(--ink);outline:none;
}
.ux-search-input::placeholder{color:var(--muted)}
.ux-search-close{
  background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:5px 8px;cursor:pointer;font-family:inherit;
}
.ux-search-close:hover{color:var(--accent);border-color:var(--accent)}
.ux-search-results{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.ux-search-results li{margin:0}
.ux-search-results a{
  display:block;padding:12px 14px;border-radius:12px;
  color:var(--ink);text-decoration:none;
}
.ux-search-results a:hover,.ux-search-results a:focus{background:var(--paper);color:var(--ink)}
.ux-sr-title{font-weight:600;font-size:15.5px;line-height:1.3;margin-bottom:4px;color:var(--ink)}
.ux-sr-desc{font-size:13.5px;color:var(--muted);line-height:1.45}
.ux-sr-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:5px}
.ux-search-empty{padding:22px 18px;color:var(--muted);font-size:14.5px;text-align:center}
.ux-search-hint{padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

/* ---------- 4. ФОРМА ПОДПИСКИ ---------- */
.ux-subscribe{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;margin:32px 0;text-align:left;
}
.ux-subscribe h3{
  font-family:'Zodiak',Georgia,serif;font-weight:500;
  font-size:24px;line-height:1.2;margin:0 0 8px;color:var(--ink);
}
.ux-subscribe p{font-size:14.5px;color:var(--muted);margin:0 0 16px;line-height:1.55}
.ux-sub-row{display:flex;gap:10px;flex-wrap:wrap}
.ux-sub-row input[type="email"]{
  flex:1 1 220px;min-width:0;
  padding:13px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg,var(--paper));color:var(--ink);
  font-family:inherit;font-size:15px;
}
.ux-sub-row input[type="email"]:focus{outline:none;border-color:var(--accent)}
.ux-sub-row button{
  padding:13px 24px;border:0;border-radius:999px;
  background:var(--accent);color:#fff;font-family:inherit;
  font-weight:600;font-size:15px;cursor:pointer;transition:background .2s;
}
.ux-sub-row button:hover{background:var(--accent-2,var(--accent-dark))}
.ux-sub-msg{margin:12px 0 0;font-size:14px;color:var(--accent);font-weight:600;display:none}
.ux-sub-msg.show{display:block}
.ux-sub-note{margin:10px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- 5. ПОХОЖИЕ СТАТЬИ ---------- */
.ux-related{margin:56px 0 8px;border-top:1px solid var(--line);padding-top:36px}
.ux-related h3{
  font-family:'Zodiak',Georgia,serif;font-weight:500;font-size:26px;
  margin:0 0 20px;color:var(--ink);
}
.ux-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:800px){.ux-related-grid{grid-template-columns:1fr}}
.ux-rel-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.ux-rel-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px -18px rgba(0,0,0,.28)}
.ux-rel-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.ux-rel-title{
  font-family:'Zodiak',Georgia,serif;font-weight:500;font-size:18px;line-height:1.25;
  color:var(--ink);text-decoration:none;
}
.ux-rel-card:hover .ux-rel-title{color:var(--accent)}
.ux-rel-desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}

/* Компактное меню, чтобы две новые кнопки не переносили навигацию */
@media (min-width:901px){
  header.nav nav.menu a{margin-left:13px;font-size:13px}
  header.nav .nav-cta{padding:9px 14px;font-size:13px}
  header.nav .brand span{max-width:none}
}

@media (max-width:1000px){header.nav nav.menu{display:none}}

/* Тёмные блоки, у которых фон = var(--ink): в тёмной теме делаем графитовыми */
html[data-theme="dark"] [style*="background:var(--ink"]{background:#12171A!important}
html[data-theme="dark"] footer[style*="var(--ink"],
html[data-theme="dark"] section[style*="var(--ink"]{border-color:var(--line)}
html[data-theme="dark"] .roles-dark{background:#12171A;color:#E8E4D9}