/* ============================================================
   LangExchange — тёмная тема
   ПОДКЛЮЧАТЬ ПОСЛЕДНИМ в <head>
   ============================================================ */

/* ---------- БАЗА ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] .page,
html[data-theme="dark"] .screen,
html[data-theme="dark"] main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .inner,
html[data-theme="dark"] .view-wrapper {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

/* ---------- ШАПКА ---------- */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header-container,
html[data-theme="dark"] .view,
html[data-theme="dark"] .chat-head {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .text-wrapper,
html[data-theme="dark"] .text-wrapper-2,
html[data-theme="dark"] .logo-letter {
  color: #f1f5f9 !important;
}

/* Вся навигация */
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .navbar .div,
html[data-theme="dark"] .login-link,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .profile-link,
html[data-theme="dark"] .logout-link {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .navbar .div:hover,
html[data-theme="dark"] .login-link:hover,
html[data-theme="dark"] .back-link:hover {
  color: #60a5fa !important;
}
html[data-theme="dark"] .nav-link.is-active,
html[data-theme="dark"] .navbar .div.is-active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

/* ---------- ВСЕ ЗАГОЛОВКИ И ТЕКСТ СТРАНИЦЫ ---------- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .topic-title,
html[data-theme="dark"] .topic-line-title,
html[data-theme="dark"] .lesson-title,
html[data-theme="dark"] .lesson-h1,
html[data-theme="dark"] .article-title,
html[data-theme="dark"] .room-title,
html[data-theme="dark"] .room-general-title,
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .stat-big-value,
html[data-theme="dark"] .level-item-count,
html[data-theme="dark"] .chat-room-title,
html[data-theme="dark"] .test-title,
html[data-theme="dark"] .test-card-title,
html[data-theme="dark"] .question-text,
html[data-theme="dark"] .option-text,
html[data-theme="dark"] .reply-author,
html[data-theme="dark"] .topic-author-name,
html[data-theme="dark"] .top-user-name,
html[data-theme="dark"] .message-author,
html[data-theme="dark"] .msg-author,
html[data-theme="dark"] .info-value,
html[data-theme="dark"] .reply-text,
html[data-theme="dark"] .topic-body,
html[data-theme="dark"] .lesson-body,
html[data-theme="dark"] .lesson-lead,
html[data-theme="dark"] .result-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .stat-block-title,
html[data-theme="dark"] .results-title,
html[data-theme="dark"] .replies-title,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .reply-label,
html[data-theme="dark"] .author-name {
  color: #f1f5f9 !important;
}

/* Приглушённый текст */
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .topic-meta,
html[data-theme="dark"] .topic-footer,
html[data-theme="dark"] .reply-time,
html[data-theme="dark"] .msg-time,
html[data-theme="dark"] .stat-big-sub,
html[data-theme="dark"] .info-label,
html[data-theme="dark"] .profile-email,
html[data-theme="dark"] .author-email,
html[data-theme="dark"] .article-desc,
html[data-theme="dark"] .lesson-desc,
html[data-theme="dark"] .room-desc,
html[data-theme="dark"] .room-general-desc,
html[data-theme="dark"] .test-desc,
html[data-theme="dark"] .test-card-desc,
html[data-theme="dark"] .test-card-meta,
html[data-theme="dark"] .result-num,
html[data-theme="dark"] .result-date,
html[data-theme="dark"] .reply-hint,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .field-counter,
html[data-theme="dark"] .meta-text,
html[data-theme="dark"] .bar-label,
html[data-theme="dark"] .top-user-rank,
html[data-theme="dark"] .reg-axis,
html[data-theme="dark"] .modal-text,
html[data-theme="dark"] .actions-status {
  color: #94a3b8 !important;
}

/* ---------- БЕЛЫЕ КАРТОЧКИ И БЛОКИ ---------- */
html[data-theme="dark"] .view-2,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .reply,
html[data-theme="dark"] .reply-form,
html[data-theme="dark"] .test-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .lesson-card-link,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] #article,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .results-block,
html[data-theme="dark"] .stat-big,
html[data-theme="dark"] .stat-block,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-row,
html[data-theme="dark"] .message-card,
html[data-theme="dark"] .room,
html[data-theme="dark"] .room-general,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .actions-bar,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .chat-card,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .state-box,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .topic,
html[data-theme="dark"] .hero-section,
html[data-theme="dark"] .level-picker-section,
html[data-theme="dark"] .div-2 {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* ---------- МЯГКИЙ ФОН ---------- */
html[data-theme="dark"] .field,
html[data-theme="dark"] .field-textarea,
html[data-theme="dark"] .reply-textarea,
html[data-theme="dark"] .composer-input,
html[data-theme="dark"] .search,
html[data-theme="dark"] .level-item,
html[data-theme="dark"] .top-user,
html[data-theme="dark"] .result-row,
html[data-theme="dark"] .info-banner,
html[data-theme="dark"] .messages-wrap,
html[data-theme="dark"] .messages,
html[data-theme="dark"] .table-head {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* ---------- ИНПУТЫ ---------- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b !important;
}

/* ---------- ЧИПЫ И ТАБЫ ---------- */
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .badge-topic,
html[data-theme="dark"] .topic-tag {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .chip.is-active,
html[data-theme="dark"] .tab.is-active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

/* ---------- БЕЙДЖИ УРОВНЕЙ ---------- */
html[data-theme="dark"] .level-badge,
html[data-theme="dark"] .badge-level,
html[data-theme="dark"] .result-level,
html[data-theme="dark"] .top-user-level,
html[data-theme="dark"] .room-item-badge,
html[data-theme="dark"] .text-wrapper-9 {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}
html[data-theme="dark"] .badge-pinned { background: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
html[data-theme="dark"] .badge-locked { background: rgba(100, 116, 139, 0.2) !important; color: #94a3b8 !important; }
html[data-theme="dark"] .badge-admin  { background: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }

/* ---------- КНОПКИ ---------- */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .div-wrapper-3 {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .div-wrapper-3:hover {
  background: #334155 !important;
}

/* ---------- РАЗДЕЛИТЕЛИ ---------- */
html[data-theme="dark"] .divider,
html[data-theme="dark"] hr {
  background: #334155 !important;
  border-color: #334155 !important;
}

/* ---------- ЛОГИН / РЕГИСТРАЦИЯ ---------- */
html[data-theme="dark"] .screen .view,
html[data-theme="dark"] .screen .view-2,
html[data-theme="dark"] .screen .div-3,
html[data-theme="dark"] .screen .div-4 {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .screen .text-wrapper-4,
html[data-theme="dark"] .screen .text-wrapper-5,
html[data-theme="dark"] .screen .text-wrapper-11 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .screen .p,
html[data-theme="dark"] .screen .text-wrapper-7,
html[data-theme="dark"] .screen .text-wrapper-10,
html[data-theme="dark"] .screen .text-wrapper-6 {
  color: #94a3b8 !important;
}

/* ---------- ГЛАВНАЯ ---------- */
html[data-theme="dark"] .langexchange-landing .header-container {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .langexchange-landing .hero-section,
html[data-theme="dark"] .langexchange-landing .level-picker-section {
  background: #0f172a !important;
}
html[data-theme="dark"] .langexchange-landing .p,
html[data-theme="dark"] .langexchange-landing .text-wrapper-8,
html[data-theme="dark"] .langexchange-landing .text-wrapper-11,
html[data-theme="dark"] .langexchange-landing .text-wrapper-7 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .langexchange-landing .text-wrapper-5,
html[data-theme="dark"] .langexchange-landing .text-wrapper-10,
html[data-theme="dark"] .langexchange-landing .text-wrapper-12 {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .langexchange-landing .navbar .div {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .langexchange-landing .div-2 {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .langexchange-landing .frame-10,
html[data-theme="dark"] .langexchange-landing .frame-4 {
  background: rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] .langexchange-landing .frame-4 {
  border-color: #60a5fa !important;
}
html[data-theme="dark"] .langexchange-landing .text-wrapper-4,
html[data-theme="dark"] .langexchange-landing .text-wrapper-9 {
  color: #60a5fa !important;
}

/* ---------- ЧАТ ---------- */
html[data-theme="dark"] .sidebar { background: #1e293b !important; }
html[data-theme="dark"] .room-item {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .room-item.is-active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
html[data-theme="dark"] .msg-bubble {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .msg.is-own .msg-bubble {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
html[data-theme="dark"] .msg-date-divider {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* ---------- ТЕСТЫ ---------- */
html[data-theme="dark"] .option {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .option:hover {
  background: #334155 !important;
}
html[data-theme="dark"] .option:has(input:checked) {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #60a5fa !important;
}
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .progress-rest {
  background: #334155 !important;
}
html[data-theme="dark"] .explanation {
  background: #1e293b !important;
  color: #94a3b8 !important;
}

/* ---------- ФОРУМ ---------- */
html[data-theme="dark"] .reply-reaction {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .reply-action {
  color: #60a5fa !important;
}
html[data-theme="dark"] .locked-notice {
  background: #334155 !important;
  color: #94a3b8 !important;
}

/* ---------- УРОКИ / СТАТЬИ ---------- */
html[data-theme="dark"] .lesson-body code,
html[data-theme="dark"] #article code {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f9a8d4 !important;
}
html[data-theme="dark"] .lesson-body pre,
html[data-theme="dark"] #article pre {
  background: #0a0f1e !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .lesson-body blockquote,
html[data-theme="dark"] #article blockquote {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .lesson-body table,
html[data-theme="dark"] #article table {
  background: #1e293b !important;
}
html[data-theme="dark"] .lesson-body th,
html[data-theme="dark"] #article th {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .lesson-body td,
html[data-theme="dark"] #article td {
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* ---------- ПРОФИЛЬ ---------- */
html[data-theme="dark"] .profile-streak {
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.35) 0%, rgba(180, 83, 9, 0.25) 100%) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}
html[data-theme="dark"] .streak-num,
html[data-theme="dark"] .streak-label,
html[data-theme="dark"] .streak-record {
  color: #fcd34d !important;
}
html[data-theme="dark"] .theme-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .result-row {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* ---------- АДМИН ---------- */
html[data-theme="dark"] .admin-badge {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}
html[data-theme="dark"] .level-item { background: #0f172a !important; }
html[data-theme="dark"] .level-item-code { color: #60a5fa !important; }
html[data-theme="dark"] .top-user { background: #0f172a !important; }
html[data-theme="dark"] .bar-track { background: #334155 !important; }
html[data-theme="dark"] .bar-fill { background: #60a5fa !important; }
html[data-theme="dark"] .table-head {
  background: #334155 !important;
  color: #94a3b8 !important;
}

/* ---------- ХОВЕРЫ КАРТОЧЕК ---------- */
html[data-theme="dark"] .topic:hover,
html[data-theme="dark"] .test-card:hover,
html[data-theme="dark"] .lesson-card-link:hover,
html[data-theme="dark"] .article-card:hover,
html[data-theme="dark"] .room:hover,
html[data-theme="dark"] .room-general:hover {
  background: #1e293b !important;
  border-color: #60a5fa !important;
}

/* ---------- SKELETON ---------- */
html[data-theme="dark"] .sidebar-skeleton,
html[data-theme="dark"] .skeleton-line {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%) !important;
  background-size: 200% 100% !important;
}

/* ============================================================
   ФУТЕР — тёмная тема
   ============================================================ */

html[data-theme="dark"] .site-footer {
  background: #0b1220 !important;
  color: #94a3b8 !important;
  border-top-color: #1e293b !important;
}

html[data-theme="dark"] .footer-grid {
  border-bottom-color: #1e293b !important;
}

html[data-theme="dark"] .footer-title,
html[data-theme="dark"] .footer-col-title {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .footer-subtitle,
html[data-theme="dark"] .footer-copy,
html[data-theme="dark"] .footer-author {
  color: #64748b !important;
}

html[data-theme="dark"] .footer-col a {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .footer-col a:hover {
  color: #60a5fa !important;
}

html[data-theme="dark"] .footer-bottom {
  color: #475569 !important;
}

html[data-theme="dark"] .footer-author a {
  color: #60a5fa !important;
}

/* ============================================================
   НАДПИСЬ "LangExchange" В ШАПКЕ
   ============================================================ */

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .text-wrapper,
html[data-theme="dark"] .logo-text,
html[data-theme="dark"] a.brand,
html[data-theme="dark"] .brand {
  color: #f1f5f9 !important;
}

/* ============================================================
   БЕЛАЯ ПОЛОСА СПРАВА — фон html + растяжка контейнера
   ============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] html {
  background: #0f172a !important;
}

html[data-theme="dark"] body {
  background: #0f172a !important;
  min-width: 100% !important;
}

/* Figma-экспорт даёт фиксированную 1440px — растягиваем на всю ширину */
html[data-theme="dark"] .langexchange-landing,
html[data-theme="dark"] .langexchange-landing .header-container,
html[data-theme="dark"] .langexchange-landing .hero-section,
html[data-theme="dark"] .langexchange-landing .level-picker-section {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* ============================================================
   ПУСТЫЕ СОСТОЯНИЯ — форум, тесты, чаты
   ============================================================ */

html[data-theme="dark"] .empty-state {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .empty-icon {
  background: #0f172a !important;
  color: #64748b !important;
}

html[data-theme="dark"] .empty-title {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .empty-subtitle {
  color: #94a3b8 !important;
}

/* State-box (заглушки загрузки) */
html[data-theme="dark"] .state-box {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* Бейдж-огонёк рядом с ником */
html[data-theme="dark"] .streak-badge {
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.4) 0%, rgba(180, 83, 9, 0.3) 100%) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fcd34d !important;
}

/* ============================================================
   СТАТЬИ — тёмная тема (текст статьи)
   ============================================================ */

html[data-theme="dark"] #article,
html[data-theme="dark"] #article p,
html[data-theme="dark"] #article li,
html[data-theme="dark"] #article strong,
html[data-theme="dark"] #article em,
html[data-theme="dark"] #article h1,
html[data-theme="dark"] #article h2,
html[data-theme="dark"] #article h3,
html[data-theme="dark"] #article h4 {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] #article blockquote,
html[data-theme="dark"] #article blockquote p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] #article a {
  color: #60a5fa !important;
}

html[data-theme="dark"] #article code {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f9a8d4 !important;
}/* ============================================================
   УРОКИ — тёмная тема (текст материала)
   ============================================================ */

html[data-theme="dark"] .lesson-body,
html[data-theme="dark"] .lesson-body p,
html[data-theme="dark"] .lesson-body li,
html[data-theme="dark"] .lesson-body strong,
html[data-theme="dark"] .lesson-body em,
html[data-theme="dark"] .lesson-body span,
html[data-theme="dark"] .lesson-body h1,
html[data-theme="dark"] .lesson-body h2,
html[data-theme="dark"] .lesson-body h3,
html[data-theme="dark"] .lesson-body h4 {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .lesson-body em {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .lesson-body a {
  color: #60a5fa !important;
}

html[data-theme="dark"] .lesson-body blockquote,
html[data-theme="dark"] .lesson-body blockquote p {
  color: #94a3b8 !important;
}

/* Разделители под h2 */
html[data-theme="dark"] .lesson-body h2 {
  border-bottom-color: #334155 !important;
}

/* Таблицы */
html[data-theme="dark"] .lesson-body table {
  background: #1e293b !important;
}
html[data-theme="dark"] .lesson-body th {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .lesson-body td {
  color: #f1f5f9 !important;
  border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .lesson-body tr:hover td {
  background: #334155 !important;
}

/* Заголовок и описание урока */
html[data-theme="dark"] .lesson-h1,
html[data-theme="dark"] .lesson-title {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .lesson-lead,
html[data-theme="dark"] .lesson-desc {
  color: #94a3b8 !important;
}

/* Теги темы */
html[data-theme="dark"] .level-badge,
html[data-theme="dark"] .topic-tag {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}
html[data-theme="dark"] .topic-tag {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
/* ============================================================
   КНОПКА ТЕМЫ — фокус
   ============================================================ */

.theme-btn:focus,
.theme-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
  border-color: #60a5fa !important;
}

/* В тёмной теме — то же */
html[data-theme="dark"] .theme-btn:focus,
html[data-theme="dark"] .theme-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
  border-color: #60a5fa !important;
}

/* ============================================================
   КНОПКА ТЕМЫ — круглая, аккуратная
   ============================================================ */

.theme-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line, #e5e7eb) !important;
  background: transparent !important;
  color: var(--muted, #4b5563) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.theme-btn:hover {
  background: var(--bg-soft, #f9fafb) !important;
  color: var(--blue, #2563eb) !important;
  border-color: var(--blue, #2563eb) !important;
}

.theme-btn:active {
  transform: scale(.94);
}

.theme-btn:focus,
.theme-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
  border-color: var(--blue, #2563eb) !important;
}

.theme-btn svg {
  width: 18px;
  height: 18px;
}

/* Тёмная тема */
html[data-theme="dark"] .theme-btn {
  background: transparent !important;
  border-color: #334155 !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .theme-btn:hover {
  background: #1e293b !important;
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}
html[data-theme="dark"] .theme-btn:focus,
html[data-theme="dark"] .theme-btn:focus-visible {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

/* Мобильный */
@media (max-width: 900px) {
  .theme-btn {
    width: 34px !important;
    height: 34px !important;
  }
  .theme-btn svg {
    width: 16px;
    height: 16px;
  }
}
/* ============================================================
   МАГИЧЕСКИЙ ТУМБЛЕР ТЕМЫ
   ============================================================ */

.theme-toggle {
  position: relative;
  width: 60px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.5),
    0 4px 14px rgba(251, 191, 36, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  transition:
    background .45s cubic-bezier(.4, 0, .2, 1),
    box-shadow .45s cubic-bezier(.4, 0, .2, 1);
  flex-shrink: 0;
  overflow: hidden;
}

/* Мерцание на светлой теме — «солнечные лучи» */
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.7) 0%, transparent 25%),
    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 20%);
  opacity: 0.8;
  transition: opacity .45s;
  pointer-events: none;
}

.theme-toggle:hover::before {
  opacity: 1;
}

/* Ползунок */
.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  transition:
    left .45s cubic-bezier(.4, 0, .2, 1),
    background .45s,
    box-shadow .45s;
  z-index: 1;
}

/* Солнышко внутри ползунка */
.theme-toggle__sun {
  color: #f59e0b;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s;
  transform: rotate(0deg) scale(1);
}

/* Луна — спрятана под солнцем */
.theme-toggle__moon {
  position: absolute;
  color: #93c5fd;
  opacity: 0;
  transform: rotate(-90deg) scale(0.3);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s;
}

.theme-toggle:active .theme-toggle__thumb {
  transform: scale(0.92);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.5),
    0 4px 14px rgba(251, 191, 36, 0.35),
    0 0 0 4px rgba(251, 191, 36, 0.25);
}

/* ============================================================
   ТЁМНАЯ ТЕМА — ночное небо
   ============================================================ */

html[data-theme="dark"] .theme-toggle {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.3),
    0 4px 14px rgba(59, 130, 246, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

/* Звёзды на тёмной теме */
html[data-theme="dark"] .theme-toggle::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.9) 0.5px, transparent 1.5px),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.6) 0.5px, transparent 1.5px),
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.8) 0.5px, transparent 1.5px),
    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.5) 0.5px, transparent 1.5px),
    radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1.5px);
  opacity: 1;
}

html[data-theme="dark"] .theme-toggle__thumb {
  left: 31px;
  background: #e2e8f0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(147, 197, 253, 0.3);
}

html[data-theme="dark"] .theme-toggle__sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.3);
}

html[data-theme="dark"] .theme-toggle__moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

html[data-theme="dark"] .theme-toggle:focus-visible {
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.3),
    0 4px 14px rgba(59, 130, 246, 0.25),
    0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* Мобильный */
@media (max-width: 900px) {
  .theme-toggle {
    width: 54px;
    height: 30px;
  }
  .theme-toggle__thumb {
    width: 24px;
    height: 24px;
    top: 3px;
    left: 3px;
  }
  html[data-theme="dark"] .theme-toggle__thumb {
    left: 27px;
  }
  .theme-toggle__sun { width: 13px; height: 13px; }
  .theme-toggle__moon { width: 11px; height: 11px; }
}