/* ============================================================
   Тёмная тема — активируется классом .dark на <html>.
   Переопределяет Tailwind-утилиты, реально используемые в шаблонах
   (slate + белые поверхности + светлые акцентные фоны).
   ============================================================ */

html.dark {
    color-scheme: dark;
}

/* ---------- Базовые поверхности ---------- */
html.dark body {
    background-color: #0d1320;
    color: #e2e8f0;
}

html.dark .bg-white,
html.dark .bg-white\/70 {
    background-color: #182136;
}
html.dark .bg-slate-50 {
    background-color: #0f172a;
}
html.dark .bg-slate-50\/50 {
    background-color: rgba(15, 23, 42, .5);
}
html.dark .bg-slate-100 {
    background-color: #1e2a3f;
}
html.dark .bg-slate-200 {
    background-color: #2c3a52;
}
html.dark .bg-slate-300 {
    background-color: #3c4b66;
}

/* ---------- Текст ---------- */
html.dark .text-slate-900 {
    color: #f1f5f9;
}
html.dark .text-slate-800 {
    color: #e2e8f0;
}
html.dark .text-slate-700 {
    color: #cbd5e1;
}
html.dark .text-slate-600 {
    color: #94a3b8;
}
html.dark .text-slate-500 {
    color: #8496ad;
}
html.dark .text-slate-400 {
    color: #64748b;
}
html.dark .text-slate-300 {
    color: #a7b6c9;
}
html.dark .text-slate-200 {
    color: #cbd5e1;
}

/* ---------- Рамки ---------- */
html.dark .border-slate-100,
html.dark .border-slate-200 {
    border-color: #24344d;
}
html.dark .border-slate-300 {
    border-color: #33415c;
}
html.dark .border-slate-800,
html.dark .border-slate-900 {
    border-color: #24344d;
}

/* ---------- Hover-состояния ---------- */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
    background-color: #1e2a3f;
}
html.dark .hover\:bg-slate-200:hover {
    background-color: #2c3a52;
}
html.dark .hover\:bg-slate-700:hover {
    background-color: #334155;
}
html.dark .hover\:bg-slate-800:hover {
    background-color: #1e293b;
}
html.dark .hover\:bg-indigo-50:hover,
html.dark .hover\:bg-indigo-50\/40:hover {
    background-color: rgba(99, 102, 241, .12);
}
html.dark .hover\:bg-rose-50:hover,
html.dark .hover\:bg-emerald-50:hover {
    background-color: rgba(244, 63, 94, .12);
}
html.dark .hover\:bg-emerald-50:hover {
    background-color: rgba(16, 185, 129, .12);
}
html.dark .hover\:border-indigo-400:hover,
html.dark .hover\:border-indigo-300:hover,
html.dark .hover\:border-indigo-500:hover {
    border-color: #6366f1;
}
html.dark .hover\:text-slate-900:hover {
    color: #f1f5f9;
}
html.dark .hover\:text-slate-700:hover {
    color: #cbd5e1;
}
html.dark .hover\:text-rose-600:hover {
    color: #fb7185;
}
html.dark .hover\:text-indigo-600:hover {
    color: #818cf8;
}

/* ---------- Липкая шапка (.glass) ---------- */
html.dark .glass {
    background: rgba(13, 19, 32, .88);
    backdrop-filter: blur(12px);
}

/* ---------- Поля ввода ---------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.dark textarea,
html.dark select {
    background-color: #141d30;
    color: #e2e8f0;
    border-color: #33415c;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #5b6b82;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #6366f1;
}
html.dark select option {
    background-color: #141d30;
    color: #e2e8f0;
}

/* ---------- Светлые акцентные фоны -> тёмные translucent ---------- */
html.dark .bg-indigo-50,
html.dark .bg-indigo-50\/40,
html.dark .bg-indigo-50\/50 {
    background-color: rgba(99, 102, 241, .12);
}
html.dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, .18);
}
html.dark .bg-violet-50 {
    background-color: rgba(139, 92, 246, .12);
}
html.dark .bg-rose-50,
html.dark .bg-rose-50\/40 {
    background-color: rgba(244, 63, 94, .12);
}
html.dark .bg-rose-100 {
    background-color: rgba(244, 63, 94, .18);
}
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/40 {
    background-color: rgba(16, 185, 129, .12);
}
html.dark .has-\[\:checked\]\:bg-emerald-50\/50:has(:checked) {
    background-color: rgba(16, 185, 129, .12);
}
html.dark .bg-emerald-100 {
    background-color: rgba(16, 185, 129, .18);
}
html.dark .bg-amber-50,
html.dark .bg-amber-50\/40 {
    background-color: rgba(245, 158, 11, .12);
}
html.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, .18);
}
html.dark .bg-sky-50,
html.dark .bg-sky-50\/50 {
    background-color: rgba(14, 165, 233, .12);
}
html.dark .bg-sky-100 {
    background-color: rgba(14, 165, 233, .18);
}
html.dark .bg-blue-50,
html.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, .14);
}

/* ---------- Текст на акцентных плашках (бейджи статусов, флэши) ---------- */
html.dark .text-emerald-800 {
    color: #6ee7b7;
}
html.dark .text-emerald-700 {
    color: #6ee7b7;
}
html.dark .text-amber-800 {
    color: #fcd34d;
}
html.dark .text-amber-700 {
    color: #fcd34d;
}
html.dark .text-rose-800 {
    color: #fda4af;
}
html.dark .text-rose-700 {
    color: #fda4af;
}
html.dark .text-sky-800 {
    color: #7dd3fc;
}
html.dark .text-sky-700 {
    color: #7dd3fc;
}
html.dark .text-blue-800 {
    color: #93c5fd;
}
html.dark .text-blue-700 {
    color: #93c5fd;
}
html.dark .text-indigo-700 {
    color: #a5b4fc;
}

/* ---------- Границы акцентных плашек ---------- */
html.dark .border-emerald-200 {
    border-color: rgba(16, 185, 129, .3);
}
html.dark .border-amber-200,
html.dark .border-amber-300 {
    border-color: rgba(245, 158, 11, .3);
}
html.dark .border-rose-200,
html.dark .border-rose-300 {
    border-color: rgba(244, 63, 94, .3);
}
html.dark .border-sky-200 {
    border-color: rgba(14, 165, 233, .3);
}
html.dark .border-indigo-100 {
    border-color: rgba(99, 102, 241, .3);
}

/* ---------- Блоки кода / pre ---------- */
html.dark pre {
    background-color: #0a0f1c;
}

/* ---------- Тень на карточках мягче в тёмной теме ---------- */
html.dark .shadow-lg,
html.dark .shadow-2xl,
html.dark .card-hover:hover {
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
}

/* ---------- Скроллбар ---------- */
html.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #33415c;
    border-radius: 5px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #3c4b66;
}

/* ---------- Кнопка «в избранное» (обе темы) ---------- */
.fav-btn {
    width: 34px; height: 34px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.94); color: #64748b;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 2px 10px rgba(15,23,42,.16);
    backdrop-filter: blur(6px);
    cursor: pointer; transition: all .18s ease;
}
.fav-btn:hover { color: #f43f5e; transform: scale(1.12); box-shadow: 0 4px 14px rgba(244,63,94,.30); }
.fav-btn:active { transform: scale(.9); }
.fav-btn.is-fav { background: linear-gradient(135deg, #fb4f6e, #e11d48); border-color: #f43f5e; color: #fff; box-shadow: 0 4px 16px rgba(244,63,94,.5); }
.fav-btn.is-fav i { animation: favPop .32s cubic-bezier(.2,1.6,.4,1); }
@keyframes favPop { 0% { transform: scale(.3); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
html.dark .fav-btn { background: rgba(30,41,59,.92); color: #94a3b8; border-color: rgba(255,255,255,.12); }
html.dark .fav-btn:hover { color: #fb7185; }
html.dark .fav-btn.is-fav { background: linear-gradient(135deg, #fb4f6e, #e11d48); border-color: #fb7185; color: #fff; }

/* ---------- Логотип в hero: размер из админки = потолок, на узких экранах сжимается ---------- */
.hero-logo-img {
    height: min(var(--hero-logo-h, 160px), max(110px, 24vw));
    width: auto;
    max-width: min(46vw, 560px);
    object-fit: contain;
}