/* ============================================================
   COTA·I Brand System — Custom CSS for DLE Maxus Template
   Source: cota-i-brandbook.html (canonical)
   ============================================================ */

/* ===== 12.1 COLOR PALETTE (Brandbook canonical) ===== */
:root {
  --cota-bg: #0d1117;
  --cota-surface: #131920;
  --cota-surface-2: #182028;
  --cota-surface-offset: #1e2832;
  --cota-surface-dynamic: #25303d;
  --cota-divider: rgba(255,255,255,0.07);
  --cota-border: rgba(255,255,255,0.10);
  --cota-text: #e8edf2;
  --cota-text-muted: #8899aa;
  --cota-text-faint: #4a5a6a;
  --cota-primary: #22808c;
  --cota-primary-light: #2d9fad;
  --cota-primary-dark: #185f68;
  --cota-primary-glow: rgba(34,128,140,0.20);
  --cota-primary-subtle: rgba(34,128,140,0.10);
  --cota-amber: #f5a623;
  --cota-amber-light: #f7ba52;
  --cota-amber-dark: #c47d0e;
  --cota-amber-subtle: rgba(245,166,35,0.12);
  --cota-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --cota-shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --cota-shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --cota-shadow-teal: 0 4px 24px rgba(34,128,140,0.25);
  --cota-radius-sm: 0.25rem;
  --cota-radius-md: 0.5rem;
  --cota-radius-lg: 0.75rem;
  --cota-radius-xl: 1rem;
  --cota-radius-2xl: 1.5rem;
  --cota-radius-full: 9999px;
  --cota-transition: 180ms cubic-bezier(0.16,1,0.3,1);
}

/* ===== 12.3 TYPOGRAPHY ===== */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.logo, .post-title, .section-title {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
}

/* ===== 12.1 DARK MODE (Brandbook default) ===== */
[data-scheme="dark"], body[data-scheme="dark"] {
  background-color: var(--cota-bg) !important;
  color: var(--cota-text) !important;
}

[data-scheme="dark"] .header,
body[data-scheme="dark"] .header {
  background-color: var(--cota-surface) !important;
  border-bottom-color: var(--cota-border) !important;
}

[data-scheme="dark"] .card,
[data-scheme="dark"] .post-card,
[data-scheme="dark"] .widget,
[data-scheme="dark"] .modal__window,
body[data-scheme="dark"] .card,
body[data-scheme="dark"] .post-card,
body[data-scheme="dark"] .widget,
body[data-scheme="dark"] .modal__window {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
}

[data-scheme="dark"] .card:hover,
[data-scheme="dark"] .post-card:hover,
body[data-scheme="dark"] .card:hover,
body[data-scheme="dark"] .post-card:hover {
  box-shadow: var(--cota-shadow-md) !important;
  border-color: var(--cota-primary) !important;
}

/* ===== 12.4 UI COMPONENTS ===== */

/* Buttons */
.btn-primary,
[data-scheme="dark"] .btn-primary,
body[data-scheme="dark"] .btn-primary {
  background-color: var(--cota-primary) !important;
  border-color: var(--cota-primary) !important;
  color: #ffffff !important;
  border-radius: var(--cota-radius-md) !important;
  font-weight: 600 !important;
  transition: all var(--cota-transition) !important;
}

.btn-primary:hover,
[data-scheme="dark"] .btn-primary:hover,
body[data-scheme="dark"] .btn-primary:hover {
  background-color: var(--cota-primary-light) !important;
  border-color: var(--cota-primary-light) !important;
  box-shadow: var(--cota-shadow-teal) !important;
}

/* Links */
a {
  color: var(--cota-primary) !important;
  transition: color var(--cota-transition) !important;
}

a:hover {
  color: var(--cota-primary-light) !important;
}

/* Cards */
.card, .post-card {
  background-color: var(--cota-surface-2) !important;
  border: 1px solid var(--cota-border) !important;
  border-radius: var(--cota-radius-xl) !important;
  transition: all var(--cota-transition) !important;
}

.card:hover, .post-card:hover {
  box-shadow: var(--cota-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Post title */
.post-title, .post-title a {
  color: var(--cota-text) !important;
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 700 !important;
}

.post-title a:hover {
  color: var(--cota-primary) !important;
}

/* Text colors */
[data-scheme="dark"] .text-muted,
body[data-scheme="dark"] .text-muted {
  color: var(--cota-text-muted) !important;
}

/* Badges */
.badge-primary {
  background-color: var(--cota-primary-subtle) !important;
  color: var(--cota-primary) !important;
  border: 1px solid rgba(34,128,140,0.3) !important;
}

.badge-amber, .badge-warning {
  background-color: var(--cota-amber-subtle) !important;
  color: var(--cota-amber) !important;
  border: 1px solid rgba(245,166,35,0.3) !important;
}

/* Inputs */
[data-scheme="dark"] input,
[data-scheme="dark"] select,
[data-scheme="dark"] textarea,
body[data-scheme="dark"] input,
body[data-scheme="dark"] select,
body[data-scheme="dark"] textarea {
  background-color: var(--cota-surface-offset) !important;
  border-color: var(--cota-border) !important;
  color: var(--cota-text) !important;
  border-radius: var(--cota-radius-md) !important;
}

[data-scheme="dark"] input:focus,
[data-scheme="dark"] select:focus,
[data-scheme="dark"] textarea:focus,
body[data-scheme="dark"] input:focus,
body[data-scheme="dark"] select:focus,
body[data-scheme="dark"] textarea:focus {
  border-color: var(--cota-primary) !important;
  box-shadow: 0 0 0 3px var(--cota-primary-subtle) !important;
}

/* Dropdown menus */
[data-scheme="dark"] .dropdown-menu,
body[data-scheme="dark"] .dropdown-menu {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
  border-radius: var(--cota-radius-lg) !important;
}

[data-scheme="dark"] .dropdown-item:hover,
body[data-scheme="dark"] .dropdown-item:hover {
  background-color: var(--cota-primary-subtle) !important;
  color: var(--cota-primary-light) !important;
}

/* Notifications bell */
.btn-notification {
  color: var(--cota-text-muted) !important;
  transition: color var(--cota-transition) !important;
}

.btn-notification:hover {
  color: var(--cota-primary) !important;
}

.notification-count {
  background-color: var(--cota-amber) !important;
  color: #0d1117 !important;
}

/* Scrollbar */
[data-scheme="dark"] ::-webkit-scrollbar,
body[data-scheme="dark"] ::-webkit-scrollbar {
  width: 6px !important;
}

[data-scheme="dark"] ::-webkit-scrollbar-track,
body[data-scheme="dark"] ::-webkit-scrollbar-track {
  background: var(--cota-surface) !important;
}

[data-scheme="dark"] ::-webkit-scrollbar-thumb,
body[data-scheme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--cota-surface-dynamic) !important;
  border-radius: 3px !important;
}

[data-scheme="dark"] ::-webkit-scrollbar-thumb:hover,
body[data-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--cota-primary) !important;
}

/* Selection */
::selection {
  background: var(--cota-primary-glow) !important;
  color: var(--cota-text) !important;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--cota-primary) !important;
  outline-offset: 2px !important;
}

/* ===== 12.4 LOCK ICON ON PAID CONTENT ===== */
.payhide-lock {
  position: absolute !important;
  top: var(--space-3) !important;
  right: var(--space-3) !important;
  z-index: 10 !important;
}

.payhide-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(13,17,23,0.7) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== 12.4 ROLE BADGES ===== */
.badge-creator {
  background: var(--cota-amber-subtle) !important;
  color: var(--cota-amber) !important;
  border: 1px solid rgba(245,166,35,0.3) !important;
}

.badge-level-novice {
  background: rgba(76,175,80,0.1) !important;
  color: #4caf50 !important;
}

.badge-level-master {
  background: var(--cota-amber-subtle) !important;
  color: var(--cota-amber) !important;
  border: 1px solid rgba(245,166,35,0.3) !important;
}

.badge-level-expert {
  background: var(--cota-primary-subtle) !important;
  color: var(--cota-primary) !important;
  border: 1px solid rgba(34,128,140,0.3) !important;
}

.badge-level-legend {
  background: linear-gradient(135deg, var(--cota-amber-subtle), var(--cota-primary-subtle)) !important;
  color: var(--cota-amber) !important;
  border: 1px solid rgba(245,166,35,0.5) !important;
}

/* ===== 12.4 AVATAR STYLES ===== */
.avatar-master {
  border: 2px solid var(--cota-amber) !important;
  box-shadow: 0 0 8px rgba(245,166,35,0.3) !important;
}

.avatar-expert {
  border: 2px solid var(--cota-primary) !important;
}

.avatar-legend {
  border: 2px solid var(--cota-amber) !important;
  box-shadow: 0 0 12px rgba(245,166,35,0.5) !important;
  animation: legend-glow 2s ease-in-out infinite !important;
}

@keyframes legend-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(245,166,35,0.3) !important; }
  50% { box-shadow: 0 0 16px rgba(245,166,35,0.6) !important; }
}

/* ===== 12.4 TOAST NOTIFICATIONS ===== */
.toast-cota {
  background: var(--cota-surface-2) !important;
  border: 1px solid var(--cota-border) !important;
  border-left: 4px solid var(--cota-primary) !important;
  border-radius: var(--cota-radius-lg) !important;
  color: var(--cota-text) !important;
  box-shadow: var(--cota-shadow-lg) !important;
}

.toast-cota.toast-success {
  border-left-color: #4caf50 !important;
}

.toast-cota.toast-error {
  border-left-color: #f44336 !important;
}

.toast-cota.toast-warning {
  border-left-color: var(--cota-amber) !important;
}

/* ===== 12.4 MODAL WINDOWS ===== */
[data-scheme="dark"] .modal__window,
body[data-scheme="dark"] .modal__window {
  background-color: var(--cota-surface-2) !important;
  border: 1px solid var(--cota-border) !important;
  border-radius: var(--cota-radius-2xl) !important;
}

[data-scheme="dark"] .modal__window_header,
body[data-scheme="dark"] .modal__window_header {
  border-bottom-color: var(--cota-border) !important;
}

/* ===== 12.4 TABLES ===== */
[data-scheme="dark"] table,
[data-scheme="dark"] th,
[data-scheme="dark"] td,
body[data-scheme="dark"] table,
body[data-scheme="dark"] th,
body[data-scheme="dark"] td {
  border-color: var(--cota-border) !important;
}

[data-scheme="dark"] th,
body[data-scheme="dark"] th {
  background-color: var(--cota-surface-offset) !important;
  color: var(--cota-text-muted) !important;
}

/* ===== 12.4 PAGINATION ===== */
[data-scheme="dark"] .pagination .page-link,
body[data-scheme="dark"] .pagination .page-link {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
  color: var(--cota-text-muted) !important;
}

[data-scheme="dark"] .pagination .page-item.active .page-link,
body[data-scheme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--cota-primary) !important;
  border-color: var(--cota-primary) !important;
  color: #ffffff !important;
}

/* ===== 12.4 COMMENTS ===== */
[data-scheme="dark"] .comment-item,
body[data-scheme="dark"] .comment-item {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
}

/* ===== 12.4 SIDEBAR WIDGETS ===== */
[data-scheme="dark"] .widget-title,
body[data-scheme="dark"] .widget-title {
  color: var(--cota-text) !important;
  border-bottom-color: var(--cota-border) !important;
}

/* ===== 12.5 RESPONSIVE ===== */
@media (max-width: 768px) {
  .header__inner {
    padding: 0.5rem 1rem !important;
  }
  
  .post-card {
    border-radius: var(--cota-radius-lg) !important;
  }
  
  .btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .container {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1200px !important;
  }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.post-card {
  animation: fadeIn 0.3s ease-out !important;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== LOGO WORDMARK ===== */
.cota-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--cota-text);
  line-height: 1;
}

.cota-wordmark-cota {
  color: #ffffff;
}

.cota-wordmark-dot {
  width: 8px;
  height: 8px;
  background: var(--cota-amber);
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
}

.cota-wordmark-i {
  color: #ffffff;
}

/* ===== BADGE COLORS FIX ===== */
.badge-item:hover img {
  border-color: var(--cota-primary) !important;
  box-shadow: 0 0 8px var(--cota-primary-glow) !important;
}

.badge-item.active img {
  border-color: var(--cota-primary) !important;
  box-shadow: 0 0 10px var(--cota-primary-glow) !important;
}

/* ===== SOCIAL LINKS ===== */
.social .social__link {
  color: var(--cota-text-muted) !important;
  transition: color var(--cota-transition) !important;
}

.social .social__link:hover {
  color: var(--cota-primary) !important;
}

.social .social__link svg {
  fill: var(--cota-text-muted) !important;
  transition: fill var(--cota-transition) !important;
}

.social .social__link:hover svg {
  fill: var(--cota-primary) !important;
}

/* ===== HEADER ===== */
[data-scheme="dark"] .header,
body[data-scheme="dark"] .header {
  background-color: var(--cota-surface) !important;
  border-bottom: 1px solid var(--cota-border) !important;
}

[data-scheme="dark"] .header[data-scheme="inverse"],
body[data-scheme="dark"] .header[data-scheme="inverse"] {
  background-color: var(--cota-surface) !important;
}

/* ===== SIDEBAR WIDGETS ===== */
[data-scheme="dark"] .widget,
body[data-scheme="dark"] .widget {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
}

[data-scheme="dark"] .widgettitle,
body[data-scheme="dark"] .widgettitle {
  color: var(--cota-text) !important;
  border-bottom-color: var(--cota-border) !important;
}

/* ===== BOTTOMBAR / FOOTER ===== */
[data-scheme="dark"] .bottombar,
body[data-scheme="dark"] .bottombar {
  background-color: var(--cota-surface) !important;
  border-top: 1px solid var(--cota-border) !important;
}

.bottombar_name_site {
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  color: var(--cota-text) !important;
  letter-spacing: 0.05em !important;
}

.footer__copyright {
  color: var(--cota-text-faint) !important;
  font-size: var(--cota-text-xs, 0.75rem) !important;
}

/* ===== NAVIGATION MENU ===== */
[data-scheme="dark"] .menu-item a,
body[data-scheme="dark"] .menu-item a {
  color: var(--cota-text-muted) !important;
  transition: color var(--cota-transition) !important;
}

[data-scheme="dark"] .menu-item a:hover,
body[data-scheme="dark"] .menu-item a:hover {
  color: var(--cota-primary) !important;
}

[data-scheme="dark"] .menu-item.current_page_item a,
body[data-scheme="dark"] .menu-item.current_page_item a {
  color: var(--cota-primary) !important;
}

/* ===== SHARE DROPDOWN ===== */
[data-scheme="dark"] .dropdown-menu,
body[data-scheme="dark"] .dropdown-menu {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
}

[data-scheme="dark"] .dropdown-item,
body[data-scheme="dark"] .dropdown-item {
  color: var(--cota-text) !important;
}

[data-scheme="dark"] .dropdown-item:hover,
body[data-scheme="dark"] .dropdown-item:hover {
  background-color: var(--cota-primary-subtle) !important;
  color: var(--cota-primary-light) !important;
}

/* ===== POST CARD TYPOGRAPHY ===== */
[data-scheme="dark"] .pc-title a,
body[data-scheme="dark"] .pc-title a {
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 700 !important;
  color: var(--cota-text) !important;
}

[data-scheme="dark"] .pc-title a:hover,
body[data-scheme="dark"] .pc-title a:hover {
  color: var(--cota-primary) !important;
}

[data-scheme="dark"] .pc-excerpt,
body[data-scheme="dark"] .pc-excerpt {
  color: var(--cota-text-muted) !important;
}

[data-scheme="dark"] .pc-theme-date a,
body[data-scheme="dark"] .pc-theme-date a {
  color: var(--cota-primary) !important;
}

[data-scheme="dark"] .posted-date,
body[data-scheme="dark"] .posted-date {
  color: var(--cota-text-faint) !important;
}

/* ===== WIDGET THEME ITEMS ===== */
[data-scheme="dark"] .wid-theme-item a,
body[data-scheme="dark"] .wid-theme-item a {
  color: var(--cota-text-muted) !important;
}

[data-scheme="dark"] .wid-theme-item a:hover,
body[data-scheme="dark"] .wid-theme-item a:hover {
  color: var(--cota-primary) !important;
  background-color: var(--cota-primary-subtle) !important;
}

/* ===== NOTIFICATION BELL ===== */
[data-scheme="dark"] .btn-notification,
body[data-scheme="dark"] .btn-notification {
  color: var(--cota-text-muted) !important;
}

[data-scheme="dark"] .btn-notification:hover,
body[data-scheme="dark"] .btn-notification:hover {
  color: var(--cota-primary) !important;
}

[data-scheme="dark"] .notification-count,
body[data-scheme="dark"] .notification-count {
  background-color: var(--cota-amber) !important;
  color: #0d1117 !important;
}

/* ===== SCROLL TOP BUTTON ===== */
[data-scheme="dark"] .scroll-top,
body[data-scheme="dark"] .scroll-top {
  background-color: var(--cota-surface-2) !important;
  color: var(--cota-primary) !important;
  border: 1px solid var(--cota-border) !important;
}

[data-scheme="dark"] .scroll-top:hover,
body[data-scheme="dark"] .scroll-top:hover {
  background-color: var(--cota-primary) !important;
  color: #ffffff !important;
}

/* ===== SEARCH FORM ===== */
[data-scheme="dark"] .search__input,
body[data-scheme="dark"] .search__input {
  background-color: var(--cota-surface-offset) !important;
  border-color: var(--cota-border) !important;
  color: var(--cota-text) !important;
}

[data-scheme="dark"] .search__input:focus,
body[data-scheme="dark"] .search__input:focus {
  border-color: var(--cota-primary) !important;
  box-shadow: 0 0 0 3px var(--cota-primary-subtle) !important;
}

[data-scheme="dark"] .search__submit,
body[data-scheme="dark"] .search__submit {
  background-color: var(--cota-primary) !important;
  color: #ffffff !important;
}

/* ===== STORIES MODULE ===== */
[data-scheme="dark"] .story-ring,
body[data-scheme="dark"] .story-ring {
  background: linear-gradient(135deg, var(--cota-primary), var(--cota-amber)) !important;
}

[data-scheme="dark"] .story-ring.seen,
body[data-scheme="dark"] .story-ring.seen {
  background: var(--cota-surface-dynamic) !important;
}

[data-scheme="dark"] .add-story .story-ring,
body[data-scheme="dark"] .add-story .story-ring {
  border: 2px dashed var(--cota-primary) !important;
  background: none !important;
}

[data-scheme="dark"] .add-plus,
body[data-scheme="dark"] .add-plus {
  background-color: var(--cota-primary) !important;
}

/* ===== PERIOD SELECTOR ===== */
[data-scheme="dark"] select[name="period"],
body[data-scheme="dark"] select[name="period"] {
  background-color: var(--cota-surface-offset) !important;
  border-color: var(--cota-border) !important;
  color: var(--cota-text) !important;
}

/* ===== FOOTER MENU ITEMS ===== */
[data-scheme="dark"] .bottombar .menu-item a,
body[data-scheme="dark"] .bottombar .menu-item a {
  color: var(--cota-text-muted) !important;
}

[data-scheme="dark"] .bottombar .menu-item a:hover,
body[data-scheme="dark"] .bottombar .menu-item a:hover {
  color: var(--cota-primary) !important;
}

/* ===== COMMENT ITEMS ===== */
[data-scheme="dark"] .comment-item,
body[data-scheme="dark"] .comment-item {
  background-color: var(--cota-surface-2) !important;
  border-color: var(--cota-border) !important;
}

[data-scheme="dark"] .pcc-content,
body[data-scheme="dark"] .pcc-content {
  color: var(--cota-text) !important;
}

[data-scheme="dark"] .pcc-date,
body[data-scheme="dark"] .pcc-date {
  color: var(--cota-text-faint) !important;
}
/* ============================================================
   LOGO SYSTEM — Adaptive colors per theme
   Brandbook: 4 variants (dark, light, teal, amber)
   ============================================================ */

/* --- Logo SVG color variables (dark theme = default) --- */
.cota-logo {
  --logo-outer: #f5a623;
  --logo-inner: #131920;
  --logo-stroke: #f5a623;
  --logo-rect: #22808c;
  --logo-wordmark: #ffffff;
  --logo-dot: #f5a623;
}

/* Light theme override */
[data-scheme="light"] .cota-logo,
[data-scheme='light'] .cota-logo {
  --logo-inner: #f4f6f8;
  --logo-wordmark: #1a2332;
}

/* Dark theme explicit */
[data-scheme="dark"] .cota-logo,
body.dle_theme_dark .cota-logo {
  --logo-inner: #131920;
  --logo-wordmark: #ffffff;
}

/* --- SVG elements --- */
.cota-logo .logo-outer {
  fill: var(--logo-outer);
}

.cota-logo .logo-inner {
  fill: var(--logo-inner);
}

.cota-logo .logo-stroke {
  stroke: var(--logo-stroke);
}

.cota-logo .logo-rect {
  fill: var(--logo-rect);
}

/* --- Wordmark --- */
.cota-logo .cota-wordmark-cota {
  color: var(--logo-wordmark);
}

.cota-logo .cota-wordmark-i {
  color: var(--logo-wordmark);
}

.cota-logo .cota-wordmark-dot {
  background: var(--logo-dot);
}

/* --- Header logo size --- */
.header__logo .cota-icon {
  width: 40px !important;
  height: 40px !important;
}

.header__logo .cota-wordmark {
  font-size: 1.2rem;
}

/* --- Offcanvas logo size --- */
.offcanvas__header .cota-icon {
  width: 48px !important;
  height: 48px !important;
}

.offcanvas__header .cota-wordmark {
  font-size: 1.4rem;
}
/* ============================================================
   COLOR OVERRIDES — Brandbook §02 Цвета
   All non-brand colors overridden to match brandbook
   ============================================================ */

/* ===== DLE CSS VARIABLES (dark theme) ===== */
[data-scheme="dark"],
body.dle_theme_dark {
  --color-primary: #22808c;
  --color-primary-contrast: #ffffff;
  --color-accent: #22808c;
  --color-accent-rgb: 34,128,140;
  --color-secondary: #8899aa;
  --color-border: rgba(255,255,255,0.10);
  --color-input: #1e2832;
  --color-input-contrast: #e8edf2;
  --color-button: #22808c;
  --color-button-contrast: #ffffff;
  --color-contrast-100: #182028;
  --color-contrast-200: #1e2832;
  --color-text: #e8edf2;
  --color-text-rgb: 232,237,242;
  --layout-background: #0d1117;
  --color-box-shadow-rgb: 0,0,0;
  --light-accent-color: #4caf50;
  --color-tag: #22808c;
  --tag-border-radius: 4px;
  --input-border-radius: 8px;
  --button-border-radius: 8px;
  --layout-elements-border-radius: 12px;
  --thumbnail-border-radius: 12px;
  --font-primary-family: 'Inter';
  --font-secondary-family: 'Inter';
  --font-headings-family: 'Exo 2';
  --font-input-family: 'Inter';
  --font-primary-size: 14px;
  --font-secondary-size: 13px;
  --font-input-size: 14px;
  --font-primary-weight: 500;
  --font-headings-weight: 700;
  --font-primary-line-height: 1.5;
  --font-headings-line-height: 1.2;
  --font-headings-text-transform: none;
  --font-headings-letter-spacing: 0;
  --heading-1-font-size: 48px;
  --heading-2-font-size: 36px;
  --heading-3-font-size: 24px;
  --heading-4-font-size: 20px;
  --heading-5-font-size: 16px;
}

/* ===== BOOTFAST OVERRIDES (non-brand → brand) ===== */

/* Primary blue → Teal */
[data-scheme="dark"] .btn-primary,
body.dle_theme_dark .btn-primary {
  background-color: #22808c !important;
  border-color: #22808c !important;
}

[data-scheme="dark"] .btn-primary:hover,
body.dle_theme_dark .btn-primary:hover {
  background-color: #2d9fad !important;
  border-color: #2d9fad !important;
}

[data-scheme="dark"] .btn-primary:active,
body.dle_theme_dark .btn-primary:active {
  background-color: #185f68 !important;
  border-color: #185f68 !important;
}

/* Outline primary → Teal */
[data-scheme="dark"] .btn-outline-primary,
body.dle_theme_dark .btn-outline-primary {
  border-color: #22808c !important;
  color: #22808c !important;
}

[data-scheme="dark"] .btn-outline-primary:hover,
body.dle_theme_dark .btn-outline-primary:hover {
  background-color: #22808c !important;
  color: #ffffff !important;
}

/* Warning → Amber */
[data-scheme="dark"] .btn-warning,
body.dle_theme_dark .btn-warning {
  background-color: #f5a623 !important;
  border-color: #f5a623 !important;
  color: #1a2332 !important;
}

[data-scheme="dark"] .btn-warning:hover,
body.dle_theme_dark .btn-warning:hover {
  background-color: #f7ba52 !important;
  border-color: #f7ba52 !important;
}

/* Badge primary → Teal */
[data-scheme="dark"] .badge.bg-primary,
body.dle_theme_dark .badge.bg-primary {
  background-color: #22808c !important;
}

/* Badge warning → Amber */
[data-scheme="dark"] .badge.bg-warning,
body.dle_theme_dark .badge.bg-warning {
  background-color: #f5a623 !important;
  color: #1a2332 !important;
}

/* Badge info → Teal light */
[data-scheme="dark"] .badge.bg-info,
body.dle_theme_dark .badge.bg-info {
  background-color: #2d9fad !important;
}

/* Links → Teal */
[data-scheme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button),
body.dle_theme_dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button) {
  color: #22808c !important;
}

[data-scheme="dark"] a:hover:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button),
body.dle_theme_dark a:hover:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button) {
  color: #2d9fad !important;
}

/* Form focus → Teal */
[data-scheme="dark"] .form-control:focus,
body.dle_theme_dark .form-control:focus {
  border-color: #22808c !important;
  box-shadow: 0 0 0 3px rgba(34,128,140,0.20) !important;
}

[data-scheme="dark"] .form-select:focus,
body.dle_theme_dark .form-select:focus {
  border-color: #22808c !important;
  box-shadow: 0 0 0 3px rgba(34,128,140,0.20) !important;
}

/* Checked checkboxes/radios → Teal */
[data-scheme="dark"] .form-check-input:checked,
body.dle_theme_dark .form-check-input:checked {
  background-color: #22808c !important;
  border-color: #22808c !important;
}

/* Active nav → Teal */
[data-scheme="dark"] .nav-link.active,
body.dle_theme_dark .nav-link.active {
  color: #22808c !important;
}

[data-scheme="dark"] .nav-link.active::after,
body.dle_theme_dark .nav-link.active::after {
  background: #22808c !important;
}

/* Progress bar → Teal */
[data-scheme="dark"] .progress-bar,
body.dle_theme_dark .progress-bar {
  background-color: #22808c !important;
}

[data-scheme="dark"] .vote_bar_in,
body.dle_theme_dark .vote_bar_in {
  background: #22808c !important;
}

/* Alert primary → Teal */
[data-scheme="dark"] .alert-primary,
body.dle_theme_dark .alert-primary {
  background-color: rgba(34,128,140,0.10) !important;
  border-color: rgba(34,128,140,0.30) !important;
  color: #2d9fad !important;
}

/* Alert warning → Amber */
[data-scheme="dark"] .alert-warning,
body.dle_theme_dark .alert-warning {
  background-color: rgba(245,166,35,0.10) !important;
  border-color: rgba(245,166,35,0.30) !important;
  color: #f5a623 !important;
}

/* Pagination → Teal */
[data-scheme="dark"] .page-link,
body.dle_theme_dark .page-link {
  color: #22808c !important;
}

[data-scheme="dark"] .page-item.active .page-link,
body.dle_theme_dark .page-item.active .page-link {
  background-color: #22808c !important;
  border-color: #22808c !important;
  color: #ffffff !important;
}

/* Text-muted → brand muted */
[data-scheme="dark"] .text-muted,
body.dle_theme_dark .text-muted {
  color: #8899aa !important;
}

/* Text-dark → brand text */
[data-scheme="dark"] .text-dark,
body.dle_theme_dark .text-dark {
  color: #e8edf2 !important;
}

/* Bootstrap bg-* overrides */
[data-scheme="dark"] .bg-white,
body.dle_theme_dark .bg-white {
  background-color: #131920 !important;
}

[data-scheme="dark"] .bg-light,
body.dle_theme_dark .bg-light {
  background-color: #182028 !important;
}

[data-scheme="dark"] .bg-dark,
body.dle_theme_dark .bg-dark {
  background-color: #0d1117 !important;
}

[data-scheme="dark"] .bg-primary,
body.dle_theme_dark .bg-primary {
  background-color: #22808c !important;
}

[data-scheme="dark"] .bg-warning,
body.dle_theme_dark .bg-warning {
  background-color: #f5a623 !important;
}

[data-scheme="dark"] .bg-info,
body.dle_theme_dark .bg-info {
  background-color: #2d9fad !important;
}

[data-scheme="dark"] .bg-success,
body.dle_theme_dark .bg-success {
  background-color: #4caf50 !important;
}

[data-scheme="dark"] .bg-danger,
body.dle_theme_dark .bg-danger {
  background-color: #f44336 !important;
}

/* Border colors */
[data-scheme="dark"] .border,
body.dle_theme_dark .border {
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .border-primary,
body.dle_theme_dark .border-primary {
  border-color: #22808c !important;
}

[data-scheme="dark"] .border-warning,
body.dle_theme_dark .border-warning {
  border-color: #f5a623 !important;
}

/* Dropdown divider */
[data-scheme="dark"] .dropdown-divider,
body.dle_theme_dark .dropdown-divider {
  border-color: rgba(255,255,255,0.10) !important;
}

/* Card borders */
[data-scheme="dark"] .card,
body.dle_theme_dark .card {
  border-color: rgba(255,255,255,0.10) !important;
}

/* Table borders */
[data-scheme="dark"] .table,
body.dle_theme_dark .table {
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .table td,
[data-scheme="dark"] .table th,
body.dle_theme_dark .table td,
body.dle_theme_dark .table th {
  border-color: rgba(255,255,255,0.10) !important;
}

/* Specific non-brand color fixes */

/* #007bff → #22808c */
[data-scheme="dark"] .btn-upload,
body.dle_theme_dark .btn-upload {
  background: linear-gradient(135deg, #22808c 0%, #185f68 100%) !important;
}

/* #28a745 → success green (keep) */
/* #dc3545 → error red (keep) */
/* #ffc107 → #f5a623 */
[data-scheme="dark"] .text-warning,
body.dle_theme_dark .text-warning {
  color: #f5a623 !important;
}

/* #fd7e14 → #f5a623 */
[data-scheme="dark"] .badge.bg-orange,
body.dle_theme_dark .badge.bg-orange {
  background-color: #f5a623 !important;
}

/* Confidence colors (keep semantic meaning) */
/* .confidence-high #27ae60 → keep (success) */
/* .confidence-medium #f39c12 → #f5a623 */
[data-scheme="dark"] .confidence-medium,
body.dle_theme_dark .confidence-medium {
  color: #f5a623 !important;
}

/* .confidence-low #e74c3c → keep (error) */

/* Stat card gradients → brand */
[data-scheme="dark"] .stat-card:nth-child(2) .stat-icon,
body.dle_theme_dark .stat-card:nth-child(2) .stat-icon {
  background: linear-gradient(135deg, #22808c, #185f68) !important;
}

[data-scheme="dark"] .stat-card:nth-child(3) .stat-icon,
body.dle_theme_dark .stat-card:nth-child(3) .stat-icon {
  background: linear-gradient(135deg, #f5a623, #c47d0e) !important;
}

[data-scheme="dark"] .forecast-icon,
body.dle_theme_dark .forecast-icon {
  background: linear-gradient(135deg, #22808c, #185f68) !important;
}

/* IG blue → brand teal */
[data-scheme="dark"] .add-plus,
body.dle_theme_dark .add-plus {
  background-color: #22808c !important;
}

[data-scheme="dark"] .add-story .username,
body.dle_theme_dark .add-story .username {
  color: #22808c !important;
}

[data-scheme="dark"] .stories-notification.info,
body.dle_theme_dark .stories-notification.info {
  background: #22808c !important;
}

[data-scheme="dark"] .add-text-btn,
body.dle_theme_dark .add-text-btn {
  background: #22808c !important;
}

[data-scheme="dark"] .post-btn,
body.dle_theme_dark .post-btn {
  background: #22808c !important;
}

[data-scheme="dark"] .text-control-btn.active,
body.dle_theme_dark .text-control-btn.active {
  background: #22808c !important;
}

/* Success notification → keep green */
[data-scheme="dark"] .stories-notification.success,
body.dle_theme_dark .stories-notification.success {
  background: #4caf50 !important;
}

/* Error notification → keep red */
[data-scheme="dark"] .stories-notification.error,
body.dle_theme_dark .stories-notification.error {
  background: #f44336 !important;
}

/* Hover blue → teal */
[data-scheme="dark"] .badge_icon .user-badge-img:hover,
body.dle_theme_dark .badge_icon .user-badge-img:hover {
  border-color: #2d9fad !important;
}

[data-scheme="dark"] .badge-item:hover img,
body.dle_theme_dark .badge-item:hover img {
  border-color: #2d9fad !important;
}

[data-scheme="dark"] .badge-item.active img,
body.dle_theme_dark .badge-item.active img {
  border-color: #2d9fad !important;
}

/* Option hover → teal */
[data-scheme="dark"] option:checked,
[data-scheme="dark"] option:focus,
[data-scheme="dark"] option:hover,
body.dle_theme_dark option:checked,
body.dle_theme_dark option:focus,
body.dle_theme_dark option:hover {
  background-color: #22808c !important;
}

/* Emoji picker bg → brand surface */
[data-scheme="dark"] .emoji-picker,
body.dle_theme_dark .emoji-picker {
  background: #131920 !important;
  color: #e8edf2 !important;
}

[data-scheme="dark"] .emoji-picker-dropdown,
body.dle_theme_dark .emoji-picker-dropdown {
  background: #131920 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .emoji-tabs,
body.dle_theme_dark .emoji-tabs {
  background: #182028 !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .emoji-tab,
body.dle_theme_dark .emoji-tab {
  color: #8899aa !important;
}

[data-scheme="dark"] .emoji-tab.active,
body.dle_theme_dark .emoji-tab.active {
  color: #22808c !important;
}

[data-scheme="dark"] .emoji-categories,
body.dle_theme_dark .emoji-categories {
  background: #131920 !important;
}

[data-scheme="dark"] .emoji-category,
body.dle_theme_dark .emoji-category {
  background: #182028 !important;
  color: #8899aa !important;
}

[data-scheme="dark"] .emoji-category.active,
body.dle_theme_dark .emoji-category.active {
  background: #22808c !important;
  color: #ffffff !important;
}

[data-scheme="dark"] .emoji,
body.dle_theme_dark .emoji {
  color: #e8edf2 !important;
}

/* Upload components → brand */
[data-scheme="dark"] .image-upload-popup,
body.dle_theme_dark .image-upload-popup {
  background: #131920 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #e8edf2 !important;
}

[data-scheme="dark"] .upload-preview,
body.dle_theme_dark .upload-preview {
  background: #182028 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .upload-progress,
body.dle_theme_dark .upload-progress {
  background: #182028 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .preview-item,
body.dle_theme_dark .preview-item {
  background: #131920 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .btn-upload-cancel,
body.dle_theme_dark .btn-upload-cancel {
  background: #182028 !important;
  color: #e8edf2 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .editor-wrapper,
body.dle_theme_dark .editor-wrapper {
  background: #131920 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .bb-editor textarea,
body.dle_theme_dark .bb-editor textarea {
  background-color: #131920 !important;
  color: #e8edf2 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Message preview */
[data-scheme="dark"] #message-preview,
body.dle_theme_dark #message-preview {
  background-color: #131920 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Profile select */
[data-scheme="dark"] .edit-profile select,
body.dle_theme_dark .edit-profile select {
  color: #e8edf2 !important;
  background: #1e2832 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

[data-scheme="dark"] .edit-profile select:focus,
body.dle_theme_dark .edit-profile select:focus {
  border-color: #22808c !important;
  box-shadow: 0 0 0 0.2rem rgba(34,128,140,0.2) !important;
}

[data-scheme="dark"] .edit-profile select:hover,
body.dle_theme_dark .edit-profile select:hover {
  background: #25303d !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: 0 0 0 0.2rem rgba(34,128,140,0.2) !important;
}

/* Optgroup */
[data-scheme="dark"] optgroup,
body.dle_theme_dark optgroup {
  color: #8899aa !important;
  background: #131920 !important;
}

[data-scheme="dark"] option,
body.dle_theme_dark option {
  color: #e8edf2 !important;
  background: #131920 !important;
}

/* Poll block */
[data-scheme="dark"] .poll_block,
body.dle_theme_dark .poll_block {
  background-color: #182028 !important;
}

[data-scheme="dark"] .poll_block_in,
body.dle_theme_dark .poll_block_in {
  background-color: #0d1117 !important;
}

[data-scheme="dark"] .vote_result_btn,
body.dle_theme_dark .vote_result_btn {
  background-color: #182028 !important;
}

[data-scheme="dark"] .vote_result_btn:hover,
body.dle_theme_dark .vote_result_btn:hover {
  background-color: #1e2832 !important;
}

/* Comment quote */
[data-scheme="dark"] .comment-content .quote,
body.dle_theme_dark .comment-content .quote {
  background: #0d1117 !important;
  color: #e8edf2 !important;
}

/* Story avatar border */
[data-scheme="dark"] .story-avatar,
body.dle_theme_dark .story-avatar {
  border: 3px solid #131920 !important;
  background: #131920 !important;
}

/* No images message */
[data-scheme="dark"] .no-images-message,
body.dle_theme_dark .no-images-message {
  color: #8899aa !important;
}

/* User cards */
[data-scheme="dark"] .user-card_name,
body.dle_theme_dark .user-card_name {
  color: #e8edf2 !important;
}

[data-scheme="dark"] .user-card_subtitle,
body.dle_theme_dark .user-card_subtitle {
  color: #8899aa !important;
}
/* ============================================================
   LIGHT THEME — Brandbook §02 Цвета (светлая тема)
   Source: cota-i-brandbook.html lines 93-122
   ============================================================ */

/* ===== CSS VARIABLES (light theme) ===== */
[data-scheme="light"],
[data-scheme='light'] {
  --cota-bg: #f4f6f8;
  --cota-surface: #ffffff;
  --cota-surface-2: #f9fafb;
  --cota-surface-offset: #eef1f4;
  --cota-surface-dynamic: #e4e8ed;
  --cota-divider: rgba(0,0,0,0.06);
  --cota-border: rgba(0,0,0,0.10);
  --cota-text: #1a2332;
  --cota-text-muted: #5a6a7a;
  --cota-text-faint: #b0bec5;
  --cota-primary: #1a6b76;
  --cota-primary-light: #22808c;
  --cota-primary-dark: #0f4a52;
  --cota-primary-glow: rgba(26,107,118,0.15);
  --cota-primary-subtle: rgba(26,107,118,0.08);
  --cota-amber: #d4891a;
  --cota-amber-light: #f5a623;
  --cota-amber-dark: #a86010;
  --cota-amber-subtle: rgba(212,137,26,0.10);
  --cota-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --cota-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --cota-shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  --cota-shadow-teal: 0 4px 24px rgba(26,107,118,0.18);
}

/* ===== DLE CSS VARIABLES (light theme) ===== */
[data-scheme="light"],
[data-scheme='light'] {
  --color-primary: #1a6b76;
  --color-primary-contrast: #ffffff;
  --color-accent: #1a6b76;
  --color-accent-rgb: 26,107,118;
  --color-secondary: #5a6a7a;
  --color-border: rgba(0,0,0,0.10);
  --color-input: #ffffff;
  --color-input-contrast: #1a2332;
  --color-button: #1a6b76;
  --color-button-contrast: #ffffff;
  --color-contrast-100: #f9fafb;
  --color-contrast-200: #eef1f4;
  --color-text: #1a2332;
  --color-text-rgb: 26,35,50;
  --layout-background: #f4f6f8;
  --color-box-shadow-rgb: 0,0,0;
  --light-accent-color: #4caf50;
}

/* ===== BODY ===== */
[data-scheme="light"] body,
[data-scheme='light'] body {
  background-color: #f4f6f8 !important;
  color: #1a2332 !important;
}

/* ===== HEADER ===== */
[data-scheme="light"] .header,
[data-scheme='light'] .header {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .header[data-scheme="inverse"],
[data-scheme='light'] .header[data-scheme="inverse"] {
  background-color: #ffffff !important;
}

/* ===== LOGO (light theme) ===== */
[data-scheme="light"] .cota-logo,
[data-scheme='light'] .cota-logo {
  --logo-inner: #f4f6f8;
  --logo-wordmark: #1a2332;
  --logo-dot: #d4891a;
}

[data-scheme="light"] .cota-logo .cota-wordmark-cota,
[data-scheme='light'] .cota-logo .cota-wordmark-cota {
  color: #1a2332 !important;
}

[data-scheme="light"] .cota-logo .cota-wordmark-i,
[data-scheme='light'] .cota-logo .cota-wordmark-i {
  color: #1a2332 !important;
}

[data-scheme="light"] .cota-logo .cota-wordmark-dot,
[data-scheme='light'] .cota-logo .cota-wordmark-dot {
  background: #d4891a !important;
}

/* ===== CARDS ===== */
[data-scheme="light"] .card,
[data-scheme="light"] .post-card,
[data-scheme="light"] .widget,
[data-scheme='light'] .card,
[data-scheme='light'] .post-card,
[data-scheme='light'] .widget {
  background-color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .card:hover,
[data-scheme="light"] .post-card:hover,
[data-scheme='light'] .card:hover,
[data-scheme='light'] .post-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
  border-color: #1a6b76 !important;
}

/* ===== POST TITLES ===== */
[data-scheme="light"] .pc-title a,
[data-scheme='light'] .pc-title a {
  color: #1a2332 !important;
}

[data-scheme="light"] .pc-title a:hover,
[data-scheme='light'] .pc-title a:hover {
  color: #1a6b76 !important;
}

/* ===== POST EXCERPT ===== */
[data-scheme="light"] .pc-excerpt,
[data-scheme='light'] .pc-excerpt {
  color: #5a6a7a !important;
}

/* ===== POST META ===== */
[data-scheme="light"] .posted-date,
[data-scheme='light'] .posted-date {
  color: #b0bec5 !important;
}

[data-scheme="light"] .pc-theme-date a,
[data-scheme='light'] .pc-theme-date a {
  color: #1a6b76 !important;
}

/* ===== LINKS ===== */
[data-scheme="light"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button),
[data-scheme='light'] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button) {
  color: #1a6b76 !important;
}

[data-scheme="light"] a:hover:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button),
[data-scheme='light'] a:hover:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.billing-pay-btn):not(.ui-button) {
  color: #22808c !important;
}

/* ===== BUTTONS ===== */
[data-scheme="light"] .btn-primary,
[data-scheme='light'] .btn-primary {
  background-color: #1a6b76 !important;
  border-color: #1a6b76 !important;
}

[data-scheme="light"] .btn-primary:hover,
[data-scheme='light'] .btn-primary:hover {
  background-color: #22808c !important;
  border-color: #22808c !important;
}

[data-scheme="light"] .btn-primary:active,
[data-scheme='light'] .btn-primary:active {
  background-color: #0f4a52 !important;
  border-color: #0f4a52 !important;
}

[data-scheme="light"] .btn-outline-primary,
[data-scheme='light'] .btn-outline-primary {
  border-color: #1a6b76 !important;
  color: #1a6b76 !important;
}

[data-scheme="light"] .btn-outline-primary:hover,
[data-scheme='light'] .btn-outline-primary:hover {
  background-color: #1a6b76 !important;
  color: #ffffff !important;
}

[data-scheme="light"] .btn-warning,
[data-scheme='light'] .btn-warning {
  background-color: #d4891a !important;
  border-color: #d4891a !important;
}

[data-scheme="light"] .btn-warning:hover,
[data-scheme='light'] .btn-warning:hover {
  background-color: #f5a623 !important;
  border-color: #f5a623 !important;
}

/* ===== FORMS ===== */
[data-scheme="light"] input,
[data-scheme="light"] select,
[data-scheme="light"] textarea,
[data-scheme='light'] input,
[data-scheme='light'] select,
[data-scheme='light'] textarea {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #1a2332 !important;
}

[data-scheme="light"] input:focus,
[data-scheme="light"] select:focus,
[data-scheme="light"] textarea:focus,
[data-scheme='light'] input:focus,
[data-scheme='light'] select:focus,
[data-scheme='light'] textarea:focus {
  border-color: #1a6b76 !important;
  box-shadow: 0 0 0 3px rgba(26,107,118,0.15) !important;
}

/* ===== DROPDOWN ===== */
[data-scheme="light"] .dropdown-menu,
[data-scheme='light'] .dropdown-menu {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .dropdown-item,
[data-scheme='light'] .dropdown-item {
  color: #1a2332 !important;
}

[data-scheme="light"] .dropdown-item:hover,
[data-scheme='light'] .dropdown-item:hover {
  background-color: rgba(26,107,118,0.08) !important;
  color: #1a6b76 !important;
}

[data-scheme="light"] .dropdown-divider,
[data-scheme='light'] .dropdown-divider {
  border-color: rgba(0,0,0,0.06) !important;
}

/* ===== SIDEBAR ===== */
[data-scheme="light"] .left__sidebar,
[data-scheme='light'] .left__sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .widget,
[data-scheme='light'] .widget {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .widgettitle,
[data-scheme='light'] .widgettitle {
  color: #1a2332 !important;
  border-bottom-color: rgba(0,0,0,0.10) !important;
}

/* ===== SIDEBAR MENU ===== */
[data-scheme="light"] .menu-item a,
[data-scheme='light'] .menu-item a {
  color: #5a6a7a !important;
}

[data-scheme="light"] .menu-item a:hover,
[data-scheme='light'] .menu-item a:hover {
  color: #1a6b76 !important;
}

[data-scheme="light"] .menu-item.current_page_item a,
[data-scheme='light'] .menu-item.current_page_item a {
  color: #1a6b76 !important;
}

[data-scheme="light"] .menu-item-icon,
[data-scheme='light'] .menu-item-icon {
  fill: #5a6a7a !important;
}

/* ===== THEME WIDGET ITEMS ===== */
[data-scheme="light"] .wid-theme-item a,
[data-scheme='light'] .wid-theme-item a {
  color: #5a6a7a !important;
}

[data-scheme="light"] .wid-theme-item a:hover,
[data-scheme='light'] .wid-theme-item a:hover {
  color: #1a6b76 !important;
  background-color: rgba(26,107,118,0.08) !important;
}

/* ===== BOTTOMBAR / FOOTER ===== */
[data-scheme="light"] .bottombar,
[data-scheme='light'] .bottombar {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .bottombar_name_site,
[data-scheme='light'] .bottombar_name_site {
  color: #1a2332 !important;
}

[data-scheme="light"] .footer__copyright,
[data-scheme='light'] .footer__copyright {
  color: #b0bec5 !important;
}

[data-scheme="light"] .bottombar .menu-item a,
[data-scheme='light'] .bottombar .menu-item a {
  color: #5a6a7a !important;
}

[data-scheme="light"] .bottombar .menu-item a:hover,
[data-scheme='light'] .bottombar .menu-item a:hover {
  color: #1a6b76 !important;
}

/* ===== SOCIAL LINKS ===== */
[data-scheme="light"] .social .social__link,
[data-scheme='light'] .social .social__link {
  color: #5a6a7a !important;
}

[data-scheme="light"] .social .social__link:hover,
[data-scheme='light'] .social .social__link:hover {
  color: #1a6b76 !important;
}

[data-scheme="light"] .social .social__link svg,
[data-scheme='light'] .social .social__link svg {
  fill: #5a6a7a !important;
}

[data-scheme="light"] .social .social__link:hover svg,
[data-scheme='light'] .social .social__link:hover svg {
  fill: #1a6b76 !important;
}

/* ===== NOTIFICATION BELL ===== */
[data-scheme="light"] .btn-notification,
[data-scheme='light'] .btn-notification {
  color: #5a6a7a !important;
}

[data-scheme="light"] .btn-notification:hover,
[data-scheme='light'] .btn-notification:hover {
  color: #1a6b76 !important;
}

[data-scheme="light"] .notification-count,
[data-scheme='light'] .notification-count {
  background-color: #d4891a !important;
  color: #ffffff !important;
}

/* ===== SCHEME TOGGLE ===== */
[data-scheme="light"] .site-scheme-toggle,
[data-scheme='light'] .site-scheme-toggle {
  background: #f9fafb !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .site-scheme-toggle .header__scheme-toggle-icons > span,
[data-scheme='light'] .site-scheme-toggle .header__scheme-toggle-icons > span {
  color: #5a6a7a !important;
}

[data-scheme="light"] .site-scheme-toggle .header__scheme-toggle-icons > span.light-mode,
[data-scheme='light'] .site-scheme-toggle .header__scheme-toggle-icons > span.light-mode {
  background: #1a6b76 !important;
  color: #ffffff !important;
}

[data-scheme="light"] .site-scheme-toggle .header__scheme-toggle-icons > span.dark-mode,
[data-scheme='light'] .site-scheme-toggle .header__scheme-toggle-icons > span.dark-mode {
  background: transparent !important;
  color: #5a6a7a !important;
}

/* ===== SEARCH ===== */
[data-scheme="light"] .search__input,
[data-scheme='light'] .search__input {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #1a2332 !important;
}

[data-scheme="light"] .search__input:focus,
[data-scheme='light'] .search__input:focus {
  border-color: #1a6b76 !important;
  box-shadow: 0 0 0 3px rgba(26,107,118,0.15) !important;
}

[data-scheme="light"] .search__submit,
[data-scheme='light'] .search__submit {
  background-color: #1a6b76 !important;
  color: #ffffff !important;
}

/* ===== BADGES ===== */
[data-scheme="light"] .badge.bg-primary,
[data-scheme='light'] .badge.bg-primary {
  background-color: #1a6b76 !important;
}

[data-scheme="light"] .badge.bg-warning,
[data-scheme='light'] .badge.bg-warning {
  background-color: #d4891a !important;
  color: #ffffff !important;
}

[data-scheme="light"] .badge.bg-info,
[data-scheme='light'] .badge.bg-info {
  background-color: #22808c !important;
}

/* ===== ALERTS ===== */
[data-scheme="light"] .alert-primary,
[data-scheme='light'] .alert-primary {
  background-color: rgba(26,107,118,0.08) !important;
  border-color: rgba(26,107,118,0.30) !important;
  color: #1a6b76 !important;
}

[data-scheme="light"] .alert-warning,
[data-scheme='light'] .alert-warning {
  background-color: rgba(212,137,26,0.08) !important;
  border-color: rgba(212,137,26,0.30) !important;
  color: #d4891a !important;
}

/* ===== PAGINATION ===== */
[data-scheme="light"] .page-link,
[data-scheme='light'] .page-link {
  color: #1a6b76 !important;
}

[data-scheme="light"] .page-item.active .page-link,
[data-scheme='light'] .page-item.active .page-link {
  background-color: #1a6b76 !important;
  border-color: #1a6b76 !important;
  color: #ffffff !important;
}

/* ===== PROGRESS BAR ===== */
[data-scheme="light"] .progress-bar,
[data-scheme='light'] .progress-bar {
  background-color: #1a6b76 !important;
}

[data-scheme="light"] .vote_bar_in,
[data-scheme='light'] .vote_bar_in {
  background: #1a6b76 !important;
}

/* ===== ACTIVE NAV ===== */
[data-scheme="light"] .nav-link.active,
[data-scheme='light'] .nav-link.active {
  color: #1a6b76 !important;
}

[data-scheme="light"] .nav-link.active::after,
[data-scheme='light'] .nav-link.active::after {
  background: #1a6b76 !important;
}

[data-scheme="light"] .nav-link:hover,
[data-scheme='light'] .nav-link:hover {
  color: #1a6b76 !important;
}

/* ===== FORM CHECK ===== */
[data-scheme="light"] .form-check-input:checked,
[data-scheme='light'] .form-check-input:checked {
  background-color: #1a6b76 !important;
  border-color: #1a6b76 !important;
}

/* ===== TEXT MUTED ===== */
[data-scheme="light"] .text-muted,
[data-scheme='light'] .text-muted {
  color: #5a6a7a !important;
}

/* ===== TABLES ===== */
[data-scheme="light"] .table td,
[data-scheme="light"] .table th,
[data-scheme='light'] .table td,
[data-scheme='light'] .table th {
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .table th,
[data-scheme='light'] .table th {
  background-color: #f9fafb !important;
  color: #5a6a7a !important;
}

/* ===== MODAL ===== */
[data-scheme="light"] .modal__window,
[data-scheme='light'] .modal__window {
  background-color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .modal__window_header,
[data-scheme='light'] .modal__window_header {
  border-bottom-color: rgba(0,0,0,0.10) !important;
}

/* ===== COMMENTS ===== */
[data-scheme="light"] .comment-item,
[data-scheme='light'] .comment-item {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .pcc-content,
[data-scheme='light'] .pcc-content {
  color: #1a2332 !important;
}

[data-scheme="light"] .pcc-date,
[data-scheme='light'] .pcc-date {
  color: #b0bec5 !important;
}

/* ===== STORIES ===== */
[data-scheme="light"] .story-ring,
[data-scheme='light'] .story-ring {
  background: linear-gradient(135deg, #1a6b76, #d4891a) !important;
}

[data-scheme="light"] .story-ring.seen,
[data-scheme='light'] .story-ring.seen {
  background: #e4e8ed !important;
}

[data-scheme="light"] .add-story .story-ring,
[data-scheme='light'] .add-story .story-ring {
  border: 2px dashed #1a6b76 !important;
  background: none !important;
}

[data-scheme="light"] .add-plus,
[data-scheme='light'] .add-plus {
  background-color: #1a6b76 !important;
}

[data-scheme="light"] .add-story .username,
[data-scheme='light'] .add-story .username {
  color: #1a6b76 !important;
}

[data-scheme="light"] .story-avatar,
[data-scheme='light'] .story-avatar {
  border: 3px solid #ffffff !important;
  background: #ffffff !important;
}

/* ===== SCROLL TOP ===== */
[data-scheme="light"] .scroll-top,
[data-scheme='light'] .scroll-top {
  background-color: #ffffff !important;
  color: #1a6b76 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .scroll-top:hover,
[data-scheme='light'] .scroll-top:hover {
  background-color: #1a6b76 !important;
  color: #ffffff !important;
}

/* ===== PERIOD SELECTOR ===== */
[data-scheme="light"] select[name="period"],
[data-scheme='light'] select[name="period"] {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #1a2332 !important;
}

/* ===== NOTIFICATION DROPDOWN ===== */
[data-scheme="light"] .notification-dropdown-header-title,
[data-scheme='light'] .notification-dropdown-header-title {
  color: #1a2332 !important;
}

[data-scheme="light"] .notification-item,
[data-scheme='light'] .notification-item {
  color: #1a2332 !important;
}

[data-scheme="light"] .notification-item:hover,
[data-scheme='light'] .notification-item:hover {
  background-color: rgba(26,107,118,0.08) !important;
}

/* ===== USER AVATAR ===== */
[data-scheme="light"] .header-avatar,
[data-scheme='light'] .header-avatar {
  border: 2px solid rgba(0,0,0,0.10) !important;
}

/* ===== SHARE DROPDOWN ===== */
[data-scheme="light"] .pc-footer-social-share,
[data-scheme='light'] .pc-footer-social-share {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .pc-footer-social-share .dropdown-item,
[data-scheme='light'] .pc-footer-social-share .dropdown-item {
  color: #1a2332 !important;
}

[data-scheme="light"] .pc-footer-social-share .dropdown-item:hover,
[data-scheme='light'] .pc-footer-social-share .dropdown-item:hover {
  background-color: rgba(26,107,118,0.08) !important;
  color: #1a6b76 !important;
}

/* ===== POST CARD FOOTER BUTTONS ===== */
[data-scheme="light"] .pc-footer-button,
[data-scheme='light'] .pc-footer-button {
  color: #5a6a7a !important;
}

[data-scheme="light"] .pc-footer-button:hover,
[data-scheme='light'] .pc-footer-button:hover {
  color: #1a6b76 !important;
}

/* ===== ACTIVE AUTHORS WIDGET ===== */
[data-scheme="light"] .wta-author-name,
[data-scheme='light'] .wta-author-name {
  color: #1a2332 !important;
}

[data-scheme="light"] .wta-karma,
[data-scheme='light'] .wta-karma {
  color: #1a6b76 !important;
}

/* ===== RECENT COMMENTS WIDGET ===== */
[data-scheme="light"] .pcc-name a,
[data-scheme='light'] .pcc-name a {
  color: #1a6b76 !important;
}

[data-scheme="light"] .pcc-title-post,
[data-scheme='light'] .pcc-title-post {
  color: #1a6b76 !important;
}

/* ===== CUSTOM POSTS WIDGET ===== */
[data-scheme="light"] .widget-custom-post-title,
[data-scheme='light'] .widget-custom-post-title {
  color: #1a2332 !important;
}

[data-scheme="light"] .widget-custom-post-title:hover,
[data-scheme='light'] .widget-custom-post-title:hover {
  color: #1a6b76 !important;
}

/* ===== LOAD MORE THEMES ===== */
[data-scheme="light"] .load-more-themes,
[data-scheme='light'] .load-more-themes {
  color: #1a6b76 !important;
}

[data-scheme="light"] .load-more-themes svg,
[data-scheme='light'] .load-more-themes svg {
  fill: #1a6b76 !important;
}

/* ===== BADGE HOVER ===== */
[data-scheme="light"] .badge-item:hover img,
[data-scheme='light'] .badge-item:hover img {
  border-color: #1a6b76 !important;
}

[data-scheme="light"] .badge-item.active img,
[data-scheme='light'] .badge-item.active img {
  border-color: #1a6b76 !important;
}

[data-scheme="light"] .badge_icon .user-badge-img:hover,
[data-scheme='light'] .badge_icon .user-badge-img:hover {
  border-color: #22808c !important;
}

/* ===== STORIES NOTIFICATION ===== */
[data-scheme="light"] .stories-notification.info,
[data-scheme='light'] .stories-notification.info {
  background: #1a6b76 !important;
}

/* ===== OPTION HOVER ===== */
[data-scheme="light"] option:checked,
[data-scheme="light"] option:focus,
[data-scheme="light"] option:hover,
[data-scheme='light'] option:checked,
[data-scheme='light'] option:focus,
[data-scheme='light'] option:hover {
  background-color: #1a6b76 !important;
  color: #ffffff !important;
}

/* ===== EDIT PROFILE SELECT ===== */
[data-scheme="light"] .edit-profile select:focus,
[data-scheme='light'] .edit-profile select:focus {
  border-color: #1a6b76 !important;
  box-shadow: 0 0 0 0.2rem rgba(26,107,118,0.15) !important;
}
/* ============================================================
   TYPOGRAPHY — Brandbook §03 Типографика
   Exo 2 (headings) + Inter (body) + JetBrains Mono (code)
   ============================================================ */

/* ===== FONT IMPORTS (already in cota-brand.css) ===== */
/* Exo 2: 300-900 + italic */
/* Inter: 300-700 */
/* JetBrains Mono: 400-500 */

/* ===== ROOT VARIABLES ===== */
:root {
  --font-display: 'Exo 2', 'Arial', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* Brandbook size scale (clamp for fluid) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);  /* 12-14px */
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);       /* 14-16px */
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);   /* 16-18px */
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);     /* 18-24px */
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);    /* 24-36px */
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);     /* 32-56px */
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);        /* 40-80px */
}

/* ===== BODY ===== */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: var(--text-base) !important;
  line-height: 1.7 !important;
}

/* ===== HEADINGS — Exo 2 ===== */
h1, h2, h3, h4, h5, h6,
.entry__title,
.pc-title,
.widgettitle,
.section-title,
.logo,
.modal__window_header-title {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
}

/* H1 — Exo 2 / 800 / 48px / 1.1 */
h1, .entry__title h1 {
  font-size: clamp(2rem, 3vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* H2 — Exo 2 / 700 / 36px / 1.15 */
h2, .entry__title h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* H3 — Exo 2 / 600 / 24px / 1.2 */
h3 {
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* H4 — Exo 2 / 600 / 20px / 1.25 */
h4 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* H5 — Exo 2 / 600 / 16px / 1.3 */
h5 {
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* H6 — Exo 2 / 600 / 14px / 1.4 */
h6 {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* ===== POST CARD TITLES ===== */
.pc-title a,
.entry__title a {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ===== LEAD TEXT — Inter / 400 / 20px / 1.6 ===== */
.lead,
.section-lead,
.entry-type-summary {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* ===== BODY TEXT — Inter / 400 / 16px / 1.7 ===== */
p,
.post-content,
.entry-content,
.comment-content,
.pc-excerpt {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

/* ===== UI TEXT — Inter / 600 / 14px / 1.4 ===== */
.btn,
.nav-link,
.dropdown-item,
.menu-item a,
.form-label,
.form-check-label,
label {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* ===== SMALL TEXT — Inter / 400 / 13px / 1.5 ===== */
small,
.text-sm,
.pc-theme-date,
.posted-date,
.meta-reading-time,
.widget-custom-meta-footer,
.user-card_subtitle,
.wta-author-name + div {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;  /* 13px */
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ===== MICRO TEXT — Inter / 400 / 12px / 1.4 ===== */
.badge,
.version-badge,
.version-tag,
.notification-count,
.pc-footer-button_label,
.wc-footer-button_label,
.pcc-date,
.username,
.story-time,
.section-number,
.section-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;  /* 12px */
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* ===== MONO TEXT — JetBrains Mono / 400 / 13px / 1.5 ===== */
code,
pre,
kbd,
samp,
.font-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 0.8125rem !important;  /* 13px */
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ===== WIDGET TITLES ===== */
.widgettitle {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ===== LOGO WORDMARK ===== */
.cota-wordmark {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* ===== BUTTONS — Inter / 600 / 14px ===== */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ===== NAVIGATION ===== */
.nav-link,
.menu-item a,
.sidebar-link {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

/* ===== FORM INPUTS ===== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
}

/* ===== SEARCH INPUT ===== */
.search__input {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
}

/* ===== DROPDOWN ITEMS ===== */
.dropdown-item {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

/* ===== COMMENTS ===== */
.comment-content {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-base) !important;
  line-height: 1.7 !important;
}

.comment-content .quote {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  font-style: italic !important;
}

.pcc-name a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.pcc-content {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
}

/* ===== STAT CARDS ===== */
.stat-content h3,
.period-card-header h3,
.chart-container h3,
.detail-card h3,
.forecast-header h2,
.top-days-header h2 {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 600 !important;
}

.stat-value,
.forecast-value,
.period-stat-value,
.quick-value {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 700 !important;
}

/* ===== NOTIFICATIONS ===== */
.notification-dropdown-header-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.notification-item {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
}

/* ===== MODAL ===== */
.modal__window_header-title {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 700 !important;
}

.modal__window_body {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
}

/* ===== TABLES ===== */
.table th {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.table td {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
}

/* ===== PROFILE ===== */
.profile-name h1 {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 800 !important;
}

.user-card_name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.user-card_subtitle {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

/* ===== STORIES ===== */
.story-ring .username {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* ===== BADGES ===== */
.badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* ===== FOOTER ===== */
.bottombar_name_site {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.footer__copyright {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-xs) !important;
}

/* ===== SPEEDBAR / BREADCRUMBS ===== */
.speedbar {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-xs) !important;
}

/* ===== ALERTS ===== */
.alert {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
}

/* ===== PAGINATION ===== */
.pagination .page-link {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

/* ===== SCROLL TOP ===== */
.scroll-top {
  font-family: 'Inter', sans-serif !important;
}

/* ===== STORIES NOTIFICATION ===== */
.stories-notification {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
}

/* ===== VOTE / POLL ===== */
.vote_title {
  font-family: 'Exo 2', 'Arial', sans-serif !important;
  font-weight: 700 !important;
}

.vote_list .pollanswer>input+label,
.vote_list .vote>input+label {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
}

/* ===== PERIOD SELECTOR ===== */
.period-stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ===== CONFIDENCE BADGE ===== */
.confidence-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* ===== CUSTOM POSTS WIDGET ===== */
.widget-custom-post-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* ===== USER SUBSCRIBERS COUNT ===== */
.user-subscribers-count {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-xs) !important;
}

/* ===== LOADING ===== */
.loading {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-base) !important;
}

/* ===== INSTRUCTIONS ===== */
.instructions {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
}
/* ============================================================
   SPACING — Brandbook §04 Сетка и отступы
   4px grid system, content widths, border radius
   ============================================================ */

/* ===== ROOT VARIABLES ===== */
:root {
  /* Spacing tokens (4px grid) */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Content widths */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* Border radius */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Transition */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== CONTAINER ===== */
.container {
  max-width: var(--content-wide) !important;
}

/* ===== POST CARDS — spacing ===== */
.post-card {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  margin-bottom: var(--space-4) !important;
}

.post-card__header {
  margin-bottom: var(--space-3) !important;
}

.pc-title {
  margin-bottom: var(--space-3) !important;
}

.pc-excerpt {
  margin-bottom: var(--space-4) !important;
}

.pc-footer-meta {
  padding-top: var(--space-3) !important;
  gap: var(--space-3) !important;
}

/* ===== WIDGETS — spacing ===== */
.widget {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  margin-bottom: var(--space-4) !important;
}

.widgettitle {
  padding-bottom: var(--space-3) !important;
  margin-bottom: var(--space-4) !important;
}

/* ===== SIDEBAR — spacing ===== */
.left__sidebar {
  padding-right: var(--space-4) !important;
}

.sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4) !important;
}

/* ===== HEADER — spacing ===== */
.header__inner {
  padding: var(--space-3) 0 !important;
  gap: var(--space-4) !important;
}

/* ===== MENU ITEMS — spacing ===== */
.menu-item {
  margin-bottom: var(--space-1) !important;
}

.menu-item a {
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

/* ===== FOOTER / BOTTOMBAR — spacing ===== */
.bottombar {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  margin-top: var(--space-4) !important;
}

.bottombar .menu-item {
  margin-bottom: var(--space-1) !important;
}

.bottombar .menu-item a {
  padding: var(--space-2) var(--space-3) !important;
}

.social {
  margin-top: var(--space-4) !important;
  gap: var(--space-3) !important;
}

.footer__copyright {
  margin-top: var(--space-4) !important;
  padding-top: var(--space-3) !important;
}

/* ===== COMMENTS — spacing ===== */
.comment-item {
  padding: var(--space-4) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--space-3) !important;
}

.pcc-avatar {
  margin-bottom: var(--space-3) !important;
  gap: var(--space-3) !important;
}

.pcc-content {
  margin-bottom: var(--space-3) !important;
}

/* ===== FORMS — spacing ===== */
.form-control,
.form-select {
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-3) !important;
}

.form-label {
  margin-bottom: var(--space-2) !important;
}

/* ===== BUTTONS — spacing ===== */
.btn {
  padding: var(--space-2) var(--space-5) !important;
  border-radius: var(--radius-md) !important;
}

.btn-sm {
  padding: var(--space-1) var(--space-3) !important;
}

.btn-lg {
  padding: var(--space-3) var(--space-8) !important;
}

/* ===== DROPDOWN — spacing ===== */
.dropdown-menu {
  padding: var(--space-2) !important;
  border-radius: var(--radius-lg) !important;
}

.dropdown-item {
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

/* ===== MODAL — spacing ===== */
.modal__window {
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-6) !important;
}

.modal__window_header {
  padding-bottom: var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}

.modal__window_body {
  padding: var(--space-4) 0 !important;
}

/* ===== TABLE — spacing ===== */
.table th,
.table td {
  padding: var(--space-3) var(--space-4) !important;
}

/* ===== BADGES — spacing ===== */
.badge {
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
}

/* ===== ALERTS — spacing ===== */
.alert {
  padding: var(--space-4) var(--space-5) !important;
  border-radius: var(--radius-lg) !important;
  gap: var(--space-3) !important;
}

/* ===== PAGINATION — spacing ===== */
.pagination {
  gap: var(--space-1) !important;
}

.page-link {
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

/* ===== NOTIFICATION BELL — spacing ===== */
.btn-notification {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-md) !important;
}

/* ===== SCHEME TOGGLE — spacing ===== */
.site-scheme-toggle {
  width: 80px !important;
  height: 36px !important;
  border-radius: var(--radius-md) !important;
}

/* ===== SCROLL TOP — spacing ===== */
.scroll-top {
  border-radius: var(--radius-full) !important;
}

/* ===== STORIES — spacing ===== */
.stories-bar {
  padding: var(--space-2) 0 !important;
}

.story-item {
  width: 76px !important;
}

.story-ring {
  border-radius: var(--radius-full) !important;
}

/* ===== STAT CARDS — spacing ===== */
.stat-card {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  gap: var(--space-5) !important;
}

.stat-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: var(--radius-full) !important;
}

/* ===== PERIOD CARDS — spacing ===== */
.period-card {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
}

.period-card-header {
  margin-bottom: var(--space-5) !important;
  padding-bottom: var(--space-4) !important;
}

/* ===== CHART CONTAINERS — spacing ===== */
.chart-container,
.detail-card {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
}

/* ===== QUICK STATS — spacing ===== */
.quick-stats {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  gap: var(--space-4) !important;
}

.quick-stat {
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-lg) !important;
}

/* ===== USER AVATAR — spacing ===== */
.header-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-full) !important;
}

/* ===== SEARCH — spacing ===== */
.search__input {
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
}

.search__submit {
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
}

/* ===== POST CARD HEADER — spacing ===== */
.post-card-group-img {
  margin-right: var(--space-3) !important;
}

.post-card-auth-theme {
  gap: var(--space-1) !important;
}

/* ===== SIDEBAR MENU SPACING ===== */
.widget_nav_menu .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1) !important;
}

/* ===== LOAD MORE THEMES — spacing ===== */
.load-more-themes {
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  margin-top: var(--space-2) !important;
}

/* ===== CUSTOM POSTS WIDGET — spacing ===== */
.widget-custom-post {
  padding: var(--space-3) 0 !important;
  gap: var(--space-3) !important;
}

.widget-custom-post + .widget-custom-post {
  border-top: 1px solid var(--cota-border, rgba(255,255,255,0.10)) !important;
  padding-top: var(--space-3) !important;
}

/* ===== ACTIVE AUTHORS WIDGET — spacing ===== */
.widget-top-authors {
  display: flex;
  flex-direction: column;
  gap: var(--space-3) !important;
}

.widget-top-authors li {
  padding: var(--space-2) 0 !important;
}

/* ===== RECENT COMMENTS WIDGET — spacing ===== */
.recent-comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3) !important;
}

/* ===== SELECT — spacing ===== */
select,
.form-select {
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
}

/* ===== OPTGROUP — spacing ===== */
optgroup {
  padding: var(--space-2) 0 !important;
}

option {
  padding: var(--space-2) var(--space-3) !important;
}

/* ===== EMOJI PICKER — spacing ===== */
.emoji-picker {
  border-radius: var(--radius-lg) !important;
}

.emoji-tabs {
  padding: var(--space-2) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ===== UPLOAD — spacing ===== */
.upload-progress {
  padding: var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  margin-top: var(--space-3) !important;
}

/* ===== TOAST NOTIFICATIONS — spacing ===== */
.stories-notification {
  padding: var(--space-3) var(--space-6) !important;
  border-radius: var(--radius-lg) !important;
}

/* ===== PROFILE — spacing ===== */
.profile-name {
  gap: var(--space-3) !important;
}

/* ===== VOTE / POLL — spacing ===== */
.poll_block {
  padding: var(--space-6) !important;
  border-radius: var(--radius-xl) !important;
  margin: var(--space-6) 0 !important;
}

.poll_block_in {
  padding: var(--space-8) !important;
  border-radius: var(--radius-xl) !important;
}

.vote_list {
  margin: var(--space-6) var(--space-4) !important;
}

.addvote {
  padding: var(--space-4) !important;
}

/* ===== COMMENT QUOTE — spacing ===== */
.comment-content .quote {
  padding: var(--space-6) var(--space-5) var(--space-5) var(--space-8) !important;
  border-radius: var(--radius-lg) !important;
  margin: var(--space-4) 0 !important;
}

/* ===== STATISTICS PAGE — spacing ===== */
.stats-header {
  padding: var(--space-6) !important;
  border-radius: var(--radius-xl) !important;
  gap: var(--space-6) !important;
  margin-bottom: var(--space-8) !important;
}

.tab-body {
  padding: var(--space-8) !important;
  border-radius: var(--radius-xl) !important;
}

.stats-grid {
  gap: var(--space-6) !important;
  margin-bottom: var(--space-8) !important;
}

.periods-grid {
  gap: var(--space-6) !important;
}

.charts-grid {
  gap: var(--space-8) !important;
}

.details-grid {
  gap: var(--space-8) !important;
}

.forecast-grid {
  gap: var(--space-6) !important;
  margin-bottom: var(--space-8) !important;
}

/* ===== DETAIL CARD — spacing ===== */
.detail-card h3 {
  margin-bottom: var(--space-6) !important;
  padding-bottom: var(--space-4) !important;
}

.detail-list {
  gap: var(--space-4) !important;
}

.detail-item {
  padding: var(--space-3) 0 !important;
}

/* ===== ACTION BUTTONS — spacing ===== */
.action-buttons {
  gap: var(--space-4) !important;
}

/* ===== PERIOD SELECTOR — spacing ===== */
.period-selector {
  gap: var(--space-4) !important;
}

/* ===== FORECAST ITEM — spacing ===== */
.forecast-item {
  padding: var(--space-5) !important;
  border-radius: var(--radius-xl) !important;
  gap: var(--space-4) !important;
}

/* ===== CONFIDENCE BADGE — spacing ===== */
.confidence-badge {
  padding: var(--space-2) var(--space-5) !important;
  border-radius: var(--radius-full) !important;
}

/* ===== PERIOD DAYS BADGE — spacing ===== */
.period-days-badge {
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
}

/* ===== TOTAL DAYS — spacing ===== */
.total-days {
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-full) !important;
}
/* ============================================================
   ICONS — Brandbook §05 Иконографика
   Lucide Icons: stroke-width 1.5, fill none, stroke currentColor
   Sizes: 12px (micro), 16px (small), 20px (base), 24px (medium), 32px (large)
   ============================================================ */

/* ===== ICON SIZES (brandbook) ===== */

/* Micro — 12px */
.badge svg,
.version-badge svg,
.version-tag svg,
.notification-count svg,
.speedbar svg {
  width: 12px !important;
  height: 12px !important;
}

/* Small — 16px */
.pc-footer-button_icon svg,
.comment-item-button_icon svg,
.pcc-reply svg,
.meta-reading-time svg,
.load-more-themes svg {
  width: 16px !important;
  height: 16px !important;
}

/* Base — 20px */
.menu-item-icon svg,
.wid-theme-item svg,
.nav-item svg,
.nav-link svg {
  width: 20px !important;
  height: 20px !important;
}

/* Medium — 24px */
.header__offcanvas-toggle svg,
.header__search-toggle svg,
.header__scheme-toggle-icon svg,
.btn-notification svg,
.scroll-top svg,
.entry-prev-next__icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* ===== ICON COLORS ===== */

/* Default icon color */
svg {
  color: var(--cota-text-muted, #8899aa);
}

/* Primary icons (interactive) */
.header__search-toggle:hover svg,
.btn-notification:hover svg,
.menu-item a:hover svg,
.wid-theme-item a:hover svg,
.nav-link:hover svg,
.nav-item:hover svg,
.load-more-themes:hover svg,
.pcc-reply:hover svg,
.pc-footer-button:hover svg {
  color: var(--cota-primary, #22808c) !important;
}

/* Active icons */
.menu-item.current_page_item svg,
.nav-item.active svg,
.nav-link.active svg {
  color: var(--cota-primary, #22808c) !important;
}

/* ===== SOCIAL ICONS (keep original colors) ===== */
.social__link svg,
.pc-footer-social-share svg {
  fill: currentColor !important;
  
  
}

/* ===== NOTIFICATION ICONS ===== */
.btn-notification svg {
  width: 24px !important;
  height: 24px !important;
  fill: var(--color-primary) !important;
  
  
}

/* ===== SEARCH ICON ===== */
.header__search-toggle svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== THEME TOGGLE ICONS ===== */
.header__scheme-toggle-icon {
  width: 16px !important;
  height: 16px !important;
}

/* ===== BOOKMARK ICONS ===== */
.bookmark-button svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* Active bookmark (filled) */
.bookmark-button.bookmark-active svg,
svg[fill="#f39c12"] {
  fill: var(--cota-amber, #f5a623) !important;
  
}

/* ===== SHARE ICON ===== */
.pc-footer-button_icon svg[viewBox="0 0 256 256"] {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  
}

/* ===== EYE ICON (views) ===== */
.pc-footer-button_icon svg[viewBox="0 0 24 24"] {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== COMMENT ICON ===== */
.pc-footer-button_icon svg[viewBox="0 0 24 24"] {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== LIKE ICON ===== */
.comment-item-button_icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== CLOSE ICON (modals) ===== */
.modal__close svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== DROPDOWN TOGGLE ICON ===== */
.lastmodified-date svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  
  stroke-width: 1.5 !important;
}

/* ===== CATEGORY ICONS ===== */
.logo-theme img,
.wid-theme-item__logo img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  border-radius: var(--radius-sm, 4px) !important;
}

/* ===== BADGE ICONS ===== */
.user-badge {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* ===== MEDAL ICONS ===== */
.medal-icon {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* ===== LOADER ===== */
.loader {
  width: 32px !important;
  height: 32px !important;
}

/* ===== SCROLL TOP ICON ===== */
.scroll-top .icon-chevron-up {
  width: 24px !important;
  height: 24px !important;
}

/* ===== ADD POST ICON ===== */
.btn-addpost svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
  
}

/* ===== OFFCANVAS TOGGLE ===== */
.header__offcanvas-toggle svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== CHEVRON ICONS ===== */
.icon-chevron-up,
.icon-chevron-left,
.icon-chevron-right {
  width: 24px !important;
  height: 24px !important;
}

/* ===== STORIES ICONS ===== */
.story-ring .add-plus {
  width: 28px !important;
  height: 28px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

/* ===== NOTIFICATION DROPDOWN ICONS ===== */
.notification-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  
}

/* ===== SEND PM ICON ===== */
#dle-pm-send-button svg,
#dle-reason-send svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== VOTE ICONS ===== */
.vote_result_btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* ===== POLL ICONS ===== */
.vote_list .pollanswer>input+label:before,
.vote_list .vote>input+label:before {
  width: 16px !important;
  height: 16px !important;
}

/* ===== STAT ICONS ===== */
.stat-icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: white !important;
  stroke-width: 1.5 !important;
}

/* ===== FORECAST ICONS ===== */
.forecast-icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: white !important;
  stroke-width: 1.5 !important;
}

/* ===== CHART ICONS ===== */
.chart-container h3 svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== PERIOD CARD ICONS ===== */
.period-card-header h3 svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== DETAIL CARD ICONS ===== */
.detail-card h3 svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== NO DATA ICON ===== */
.no-data i {
  font-size: 48px !important;
  opacity: 0.3 !important;
}

/* ===== ICON FONT FALLBACK ===== */
/* For <i class="icon icon-*"> elements */
i.icon {
  font-style: normal !important;
  line-height: 1 !important;
}

i.icon::before {
  font-size: inherit !important;
  line-height: 1 !important;
}

/* ===== SVG IN BUTTONS ===== */
.btn svg {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  fill: none !important;
  
  stroke-width: 1.5 !important;
}

/* ===== SVG IN DROPDOWN ITEMS ===== */
.dropdown-item svg {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  fill: currentColor !important;
  
  stroke-width: 1.5 !important;
  margin-right: var(--space-2, 8px) !important;
}

/* ===== SVG IN MENU ITEMS ===== */
.menu-item a svg {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle !important;
  fill: var(--cota-text-muted, #8899aa) !important;
  
  
  transition: fill var(--transition, 180ms) !important;
}

[data-scheme="dark"] .menu-item a:hover svg,
body.dle_theme_dark .menu-item a:hover svg {
  fill: var(--cota-primary, #22808c) !important;
}

[data-scheme="light"] .menu-item a:hover svg,
[data-scheme='light'] .menu-item a:hover svg {
  fill: #1a6b76 !important;
}

/* ===== WIDGET TITLE ICONS ===== */
.widgettitle svg {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle !important;
  margin-right: var(--space-2, 8px) !important;
}

/* ===== STORY CONTROLS ===== */
.viewer-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: white !important;
  
}

/* ===== CAMERA ICONS ===== */
.camera-close svg,
.camera-flip svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: white !important;
  stroke-width: 1.5 !important;
}

/* ===== CAPTURE BUTTON ===== */
.capture-btn {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
}

.capture-btn-inner {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
}

/* ===== GALLERY BUTTON ===== */
.gallery-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: var(--radius-lg, 12px) !important;
  font-size: 24px !important;
}
/* ============================================================
   MOTION — Brandbook §06 Анимация и движение
   Precise, functional, fast — inform, not entertain
   ============================================================ */

/* ===== ROOT VARIABLES ===== */
:root {
  /* Main curve (hover/focus) */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Entry elements */
  --transition-entry: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Modal/dropdown */
  --transition-modal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Scroll reveal */
  --transition-reveal: 500ms ease;
  
  /* Loading/skeleton */
  --transition-loading: 1500ms linear infinite;
}

/* ===== GLOBAL TRANSITION RESET ===== */
/* Apply brandbook transition to all interactive elements */
a, button, .btn, .dropdown-item, .nav-link, .menu-item a,
.card, .post-card, .widget, .badge, .alert,
.form-control, .form-select, .form-check-input,
.modal__window, .dropdown-menu,
.scroll-top, .site-scheme-toggle, .btn-notification {
  transition: all var(--transition) !important;
}

/* ===== HOVER EFFECTS ===== */

/* Cards — lift on hover */
.card:hover,
.post-card:hover,
.widget:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--cota-shadow-md, 0 4px 16px rgba(0,0,0,0.4)) !important;
}

/* Buttons — brightness on hover */
.btn:hover {
  filter: brightness(1.1) !important;
}

.btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.95) !important;
}

/* Links — color transition */
a {
  transition: color var(--transition) !important;
}

/* ===== FOCUS EFFECTS ===== */
/* Teal ring on focus */
*:focus-visible {
  outline: 2px solid var(--cota-primary, #22808c) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm, 4px) !important;
}

/* ===== MODAL ANIMATIONS ===== */
.modal {
  transition: opacity var(--transition-modal) !important;
}

.modal__window {
  transition: transform var(--transition-modal), opacity var(--transition-modal) !important;
  animation: modalIn var(--transition-modal) forwards !important;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== DROPDOWN ANIMATIONS ===== */
.dropdown-menu {
  transition: opacity var(--transition-modal), transform var(--transition-modal) !important;
  animation: dropdownIn var(--transition-modal) forwards !important;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal) !important;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== POST CARD ANIMATION ===== */
.post-card {
  animation: fadeIn var(--transition-reveal) ease-out !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== LOADING / SKELETON ===== */
.loader {
  animation: spin var(--transition-loading) !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shimmer effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--cota-surface-offset, #1e2832) 25%,
    var(--cota-surface-dynamic, #25303d) 50%,
    var(--cota-surface-offset, #1e2832) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s linear infinite !important;
}

/* ===== NOTIFICATION ANIMATION ===== */
.stories-notification {
  transition: opacity var(--transition), transform var(--transition) !important;
}

.stories-notification.show {
  animation: slideDown var(--transition-modal) forwards !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ===== SCROLL TOP BUTTON ===== */
.scroll-top {
  transition: opacity var(--transition), transform var(--transition), background var(--transition) !important;
}

.scroll-top:hover {
  transform: translateY(-2px) !important;
}

/* ===== BADGE PULSE ===== */
.badge-pulse {
  animation: badgePulse 0.5s ease-in-out !important;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ===== STORY RING ===== */
.story-ring {
  transition: transform var(--transition) !important;
}

.story-ring:hover {
  transform: scale(1.06) !important;
}

/* ===== VIEWER ANIMATIONS ===== */
.viewer {
  transition: opacity var(--transition-modal) !important;
}

.viewer-backdrop {
  animation: fadeIn var(--transition-modal) !important;
}

.viewer-content-container {
  animation: scaleIn var(--transition-modal) !important;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== CAROUSEL ===== */
.carousel-track {
  transition: transform var(--transition-entry) !important;
}

.carousel-dot {
  transition: all var(--transition) !important;
}

/* ===== PANORAMA DRAG ===== */
.panorama-strip {
  transition: transform 50ms linear !important;
}

.panorama-progress-fill {
  transition: width 50ms linear !important;
}

/* ===== VIDEO CONTROLS ===== */
.video-progress {
  transition: height var(--transition) !important;
}

.video-progress:hover {
  height: 6px !important;
}

.video-progress-fill {
  transition: width 100ms linear !important;
}

.video-progress-thumb {
  transition: opacity var(--transition) !important;
}

.video-progress:hover .video-progress-thumb {
  opacity: 1 !important;
}

/* ===== AUDIO PLAYER ===== */
.audio-track {
  transition: height var(--transition) !important;
}

.audio-track:hover {
  height: 6px !important;
}

.audio-track-thumb {
  transition: opacity var(--transition) !important;
}

.audio-track:hover .audio-track-thumb {
  opacity: 1 !important;
}

/* ===== WAVEFORM ===== */
.wf-cursor {
  transition: left 100ms linear !important;
}

/* ===== FORM INPUTS ===== */
.form-control,
.form-select {
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px var(--cota-primary-glow, rgba(34,128,140,0.20)) !important;
}

/* ===== CHECKBOX / RADIO ===== */
.form-check-input {
  transition: background-color var(--transition), border-color var(--transition) !important;
}

.form-switch .form-check-input {
  transition: background-position var(--transition) !important;
}

/* ===== TOGGLE ===== */
.site-scheme-toggle {
  transition: background var(--transition), border-color var(--transition) !important;
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
  transition: width 300ms linear !important;
}

.vote_bar_in {
  transition: width 500ms ease !important;
}

/* ===== TABLE ROW HOVER ===== */
.table tr {
  transition: background var(--transition) !important;
}

.table tr:hover {
  background: var(--cota-surface-offset, #1e2832) !important;
}

/* ===== PAGATION ===== */
.page-link {
  transition: all var(--transition) !important;
}

/* ===== EMOJI ===== */
.emoji, .sticker, .custom-emoji {
  transition: background var(--transition) !important;
}

/* ===== AVOID LINEAR (except progress) ===== */
/* Linear only for progress indicators */
.progress-bar,
.vote_bar_in,
.panorama-strip,
.panorama-progress-fill,
.video-progress-fill,
.audio-track-fill {
  transition-timing-function: linear !important;
}

/* All other elements use ease-out */
*:not(.progress-bar):not(.vote_bar_in):not(.panorama-strip):not(.video-progress-fill):not(.audio-track-fill) {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* ============================================================
   UI COMPONENTS — Brandbook §07 Компоненты
   Buttons, Badges, Cards, Inputs, Alerts
   ============================================================ */

/* ===== BUTTONS ===== */

/* Base button */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2, 8px) !important;
  padding: var(--space-2, 8px) var(--space-5, 20px) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm, 14px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--radius-md, 8px) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

/* Primary button — Teal */
.btn-primary {
  background-color: var(--cota-primary, #22808c) !important;
  color: #ffffff !important;
  border-color: var(--cota-primary, #22808c) !important;
}

.btn-primary:hover {
  background-color: var(--cota-primary-light, #2d9fad) !important;
  border-color: var(--cota-primary-light, #2d9fad) !important;
  box-shadow: var(--cota-shadow-teal, 0 4px 24px rgba(34,128,140,0.25)) !important;
}

.btn-primary:active {
  background-color: var(--cota-primary-dark, #185f68) !important;
  border-color: var(--cota-primary-dark, #185f68) !important;
}

/* Secondary button */
.btn-secondary {
  background-color: var(--cota-surface-offset, #1e2832) !important;
  color: var(--cota-text, #e8edf2) !important;
  border-color: var(--cota-border, rgba(255,255,255,0.10)) !important;
}

.btn-secondary:hover {
  border-color: var(--cota-primary, #22808c) !important;
  color: var(--cota-primary, #22808c) !important;
}

/* Ghost button */
.btn-ghost {
  background: transparent !important;
  color: var(--cota-text-muted, #8899aa) !important;
  border-color: var(--cota-border, rgba(255,255,255,0.10)) !important;
}

.btn-ghost:hover {
  color: var(--cota-text, #e8edf2) !important;
  background: var(--cota-surface-offset, #1e2832) !important;
}

/* Amber button */
.btn-amber {
  background-color: var(--cota-amber, #f5a623) !important;
  color: #1a2332 !important;
  border-color: var(--cota-amber, #f5a623) !important;
}

.btn-amber:hover {
  background-color: var(--cota-amber-light, #f7ba52) !important;
  border-color: var(--cota-amber-light, #f7ba52) !important;
}

.btn-amber:active {
  background-color: var(--cota-amber-dark, #c47d0e) !important;
  border-color: var(--cota-amber-dark, #c47d0e) !important;
}

/* Button sizes */
.btn-sm {
  padding: var(--space-1, 4px) var(--space-3, 12px) !important;
  font-size: var(--text-xs, 12px) !important;
}

.btn-lg {
  padding: var(--space-3, 12px) var(--space-8, 32px) !important;
  font-size: var(--text-base, 16px) !important;
}

/* Disabled button */
.btn:disabled,
.btn[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Light theme buttons */
[data-scheme="light"] .btn-primary,
[data-scheme='light'] .btn-primary {
  background-color: #1a6b76 !important;
  border-color: #1a6b76 !important;
}

[data-scheme="light"] .btn-primary:hover,
[data-scheme='light'] .btn-primary:hover {
  background-color: #22808c !important;
  border-color: #22808c !important;
}

[data-scheme="light"] .btn-secondary,
[data-scheme='light'] .btn-secondary {
  background-color: #f9fafb !important;
  color: #1a2332 !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .btn-secondary:hover,
[data-scheme='light'] .btn-secondary:hover {
  border-color: #1a6b76 !important;
  color: #1a6b76 !important;
}

[data-scheme="light"] .btn-ghost,
[data-scheme='light'] .btn-ghost {
  color: #5a6a7a !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .btn-ghost:hover,
[data-scheme='light'] .btn-ghost:hover {
  color: #1a2332 !important;
  background: #eef1f4 !important;
}

[data-scheme="light"] .btn-amber,
[data-scheme='light'] .btn-amber {
  background-color: #d4891a !important;
  border-color: #d4891a !important;
}

[data-scheme="light"] .btn-amber:hover,
[data-scheme='light'] .btn-amber:hover {
  background-color: #f5a623 !important;
  border-color: #f5a623 !important;
}

/* ===== BADGES ===== */

/* Base badge */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3em !important;
  padding: var(--space-1, 4px) var(--space-3, 12px) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-xs, 12px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
  border-radius: var(--radius-full, 9999px) !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

/* Primary badge — Teal */
.badge-primary {
  background: var(--cota-primary-subtle, rgba(34,128,140,0.10)) !important;
  color: var(--cota-primary, #22808c) !important;
  border: 1px solid rgba(34,128,140,0.3) !important;
}

/* Amber badge */
.badge-amber {
  background: var(--cota-amber-subtle, rgba(245,166,35,0.12)) !important;
  color: var(--cota-amber, #f5a623) !important;
  border: 1px solid rgba(245,166,35,0.3) !important;
}

/* Neutral badge */
.badge-neutral {
  background: var(--cota-surface-offset, #1e2832) !important;
  color: var(--cota-text-muted, #8899aa) !important;
  border: 1px solid var(--cota-border, rgba(255,255,255,0.10)) !important;
}

/* Success badge */
.badge-success {
  background: rgba(76,175,80,0.1) !important;
  color: #4caf50 !important;
  border: 1px solid rgba(76,175,80,0.3) !important;
}

/* Dot variant */
.badge-dot::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  margin-right: var(--space-1, 4px) !important;
  display: inline-block !important;
}

/* Light theme badges */
[data-scheme="light"] .badge-primary,
[data-scheme='light'] .badge-primary {
  background: rgba(26,107,118,0.08) !important;
  color: #1a6b76 !important;
  border: 1px solid rgba(26,107,118,0.3) !important;
}

[data-scheme="light"] .badge-amber,
[data-scheme='light'] .badge-amber {
  background: rgba(212,137,26,0.08) !important;
  color: #d4891a !important;
  border: 1px solid rgba(212,137,26,0.3) !important;
}

[data-scheme="light"] .badge-neutral,
[data-scheme='light'] .badge-neutral {
  background: #eef1f4 !important;
  color: #5a6a7a !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .badge-success,
[data-scheme='light'] .badge-success {
  background: rgba(76,175,80,0.08) !important;
  color: #388e3c !important;
  border: 1px solid rgba(76,175,80,0.3) !important;
}

/* ===== CARDS ===== */

/* Base card */
.card {
  background: var(--cota-surface-2, #182028) !important;
  border-radius: var(--radius-xl, 16px) !important;
  border: 1px solid var(--cota-border, rgba(255,255,255,0.10)) !important;
  padding: var(--space-5, 20px) !important;
  box-shadow: var(--cota-shadow-sm, 0 1px 3px rgba(0,0,0,0.3)) !important;
  transition: box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover {
  box-shadow: var(--cota-shadow-md, 0 4px 16px rgba(0,0,0,0.4)) !important;
  transform: translateY(-2px) !important;
}

.card-title {
  font-family: 'Exo 2', sans-serif !important;
  font-size: var(--text-lg, 18px) !important;
  font-weight: 700 !important;
  color: var(--cota-text, #e8edf2) !important;
  margin-bottom: var(--space-2, 8px) !important;
}

.card-body {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm, 14px) !important;
  color: var(--cota-text-muted, #8899aa) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--space-4, 16px) !important;
}

.card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: var(--space-4, 16px) !important;
  border-top: 1px solid var(--cota-divider, rgba(255,255,255,0.07)) !important;
}

/* Light theme cards */
[data-scheme="light"] .card,
[data-scheme='light'] .card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

[data-scheme="light"] .card:hover,
[data-scheme='light'] .card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .card-title,
[data-scheme='light'] .card-title {
  color: #1a2332 !important;
}

[data-scheme="light"] .card-body,
[data-scheme='light'] .card-body {
  color: #5a6a7a !important;
}

[data-scheme="light"] .card-footer,
[data-scheme='light'] .card-footer {
  border-top-color: rgba(0,0,0,0.06) !important;
}

/* ===== INPUTS ===== */

/* Base input */
.input,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  display: block !important;
  width: 100% !important;
  padding: var(--space-3, 12px) var(--space-4, 16px) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--cota-text, #e8edf2) !important;
  background-color: var(--cota-surface-offset, #1e2832) !important;
  border: 1px solid var(--cota-border, rgba(255,255,255,0.10)) !important;
  border-radius: var(--radius-md, 8px) !important;
  transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.input::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--cota-text-faint, #4a5a6a) !important;
}

.input:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--cota-primary, #22808c) !important;
  box-shadow: 0 0 0 3px var(--cota-primary-glow, rgba(34,128,140,0.20)) !important;
}

/* Input group */
.input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2, 8px) !important;
}

/* Input label */
.input-label,
.form-label,
label {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm, 14px) !important;
  font-weight: 500 !important;
  color: var(--cota-text, #e8edf2) !important;
}

/* Input hint */
.input-hint {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-xs, 12px) !important;
  color: var(--cota-text-faint, #4a5a6a) !important;
}

/* Light theme inputs */
[data-scheme="light"] .input,
[data-scheme="light"] .form-control,
[data-scheme="light"] input,
[data-scheme="light"] select,
[data-scheme="light"] textarea,
[data-scheme='light'] .input,
[data-scheme='light'] .form-control,
[data-scheme='light'] input,
[data-scheme='light'] select,
[data-scheme='light'] textarea {
  background-color: #ffffff !important;
  color: #1a2332 !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-scheme="light"] .input:focus,
[data-scheme="light"] .form-control:focus,
[data-scheme="light"] input:focus,
[data-scheme="light"] select:focus,
[data-scheme="light"] textarea:focus,
[data-scheme='light'] .input:focus,
[data-scheme='light'] .form-control:focus,
[data-scheme='light'] input:focus,
[data-scheme='light'] select:focus,
[data-scheme='light'] textarea:focus {
  border-color: #1a6b76 !important;
  box-shadow: 0 0 0 3px rgba(26,107,118,0.15) !important;
}

[data-scheme="light"] .input::placeholder,
[data-scheme="light"] .form-control::placeholder,
[data-scheme="light"] input::placeholder,
[data-scheme='light'] .input::placeholder,
[data-scheme='light'] .form-control::placeholder,
[data-scheme='light'] input::placeholder {
  color: #b0bec5 !important;
}

[data-scheme="light"] .input-label,
[data-scheme="light"] .form-label,
[data-scheme="light"] label,
[data-scheme='light'] .input-label,
[data-scheme='light'] .form-label,
[data-scheme='light'] label {
  color: #1a2332 !important;
}

[data-scheme="light"] .input-hint,
[data-scheme='light'] .input-hint {
  color: #b0bec5 !important;
}

/* ===== ALERTS ===== */

/* Base alert */
.alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3, 12px) !important;
  padding: var(--space-4, 16px) var(--space-5, 20px) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--text-sm, 14px) !important;
  line-height: 1.5 !important;
  border-radius: var(--radius-lg, 12px) !important;
  border: 1px solid !important;
}

.alert-icon {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.alert-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* Primary alert — Teal */
.alert-primary {
  background: var(--cota-primary-subtle, rgba(34,128,140,0.10)) !important;
  border-color: rgba(34,128,140,0.3) !important;
  color: var(--cota-primary-light, #2d9fad) !important;
}

/* Amber alert */
.alert-amber {
  background: var(--cota-amber-subtle, rgba(245,166,35,0.12)) !important;
  border-color: rgba(245,166,35,0.3) !important;
  color: var(--cota-amber, #f5a623) !important;
}

/* Success alert */
.alert-success {
  background: rgba(76,175,80,0.1) !important;
  border-color: rgba(76,175,80,0.3) !important;
  color: #4caf50 !important;
}

/* Danger alert */
.alert-danger {
  background: rgba(244,67,54,0.1) !important;
  border-color: rgba(244,67,54,0.3) !important;
  color: #f44336 !important;
}

/* Light theme alerts */
[data-scheme="light"] .alert-primary,
[data-scheme='light'] .alert-primary {
  background: rgba(26,107,118,0.08) !important;
  border-color: rgba(26,107,118,0.3) !important;
  color: #1a6b76 !important;
}

[data-scheme="light"] .alert-amber,
[data-scheme='light'] .alert-amber {
  background: rgba(212,137,26,0.08) !important;
  border-color: rgba(212,137,26,0.3) !important;
  color: #d4891a !important;
}

[data-scheme="light"] .alert-success,
[data-scheme='light'] .alert-success {
  background: rgba(76,175,80,0.08) !important;
  border-color: rgba(76,175,80,0.3) !important;
  color: #388e3c !important;
}

[data-scheme="light"] .alert-danger,
[data-scheme='light'] .alert-danger {
  background: rgba(244,67,54,0.08) !important;
  border-color: rgba(244,67,54,0.3) !important;
  color: #d32f2f !important;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-cota {
  background: var(--cota-surface-2, #182028) !important;
  border: 1px solid var(--cota-border, rgba(255,255,255,0.10)) !important;
  border-left: 4px solid var(--cota-primary, #22808c) !important;
  border-radius: var(--radius-lg, 12px) !important;
  color: var(--cota-text, #e8edf2) !important;
  box-shadow: var(--cota-shadow-lg, 0 12px 40px rgba(0,0,0,0.5)) !important;
  padding: var(--space-4, 16px) var(--space-5, 20px) !important;
}

.toast-cota.toast-success {
  border-left-color: #4caf50 !important;
}

.toast-cota.toast-error {
  border-left-color: #f44336 !important;
}

.toast-cota.toast-warning {
  border-left-color: var(--cota-amber, #f5a623) !important;
}

/* Light theme toasts */
[data-scheme="light"] .toast-cota,
[data-scheme='light'] .toast-cota {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #1a2332 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
}
/* ============================================================
   USAGE — Brandbook §09 Применение
   Dark-first, touch targets, logo clear space, color rules
   ============================================================ */

/* ===== DARK THEME AS PRIMARY ===== */
/* Ensure dark theme is default even if JS fails */
body.dle_theme_dark {
  background-color: #0d1117 !important;
  color: #e8edf2 !important;
}

/* ===== TOUCH TARGETS (mobile min 44px) ===== */
@media (max-width: 768px) {
  /* All interactive elements min 44px */
  .btn,
  .dropdown-item,
  .nav-link,
  .menu-item a,
  .sidebar-link,
  .pc-footer-button,
  .widget-custom-post-title,
  .load-more-themes,
  .notification-item,
  .search__input,
  .search__submit,
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea,
  .page-link,
  .carousel-btn,
  .lightbox-nav,
  .lightbox-close,
  .viewer-btn,
  .scroll-top,
  .btn-notification,
  .site-scheme-toggle,
  .header__offcanvas-toggle,
  .header__search-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Buttons with padding */
  .btn {
    padding: var(--space-3, 12px) var(--space-5, 20px) !important;
  }
  
  /* Form inputs */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* Menu items */
  .menu-item a {
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
  }
  
  /* Dropdown items */
  .dropdown-item {
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
  }
  
  /* Footer buttons */
  .pc-footer-button {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Carousel buttons */
  .carousel-btn {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Lightbox buttons */
  .lightbox-nav,
  .lightbox-close {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Viewer buttons */
  .viewer-btn {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Scroll top */
  .scroll-top {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ===== LOGO CLEAR SPACE ===== */
/* Minimum distance: 1× height of letter "C" */
.header__logo {
  padding: var(--space-3, 12px) !important;
}

.offcanvas__header .header__logo {
  padding: var(--space-4, 16px) !important;
}

/* Logo minimum width: 120px */
.header__logo .cota-wordmark {
  min-width: 120px !important;
}

/* ===== COLOR RULES ===== */
/* Teal only for CTA, active states, interactive */
/* Amber only for logo, second-priority accents */
/* Already implemented in colors.css and components.css */

/* ===== FONT RULES ===== */
/* Only Exo 2, Inter, JetBrains Mono */
/* Already implemented in typography.css */

/* ===== MOBILE LAYOUT ===== */
@media (max-width: 768px) {
  /* Single column layout */
  .layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  
  /* Hide sidebar on mobile */
  .left__sidebar {
    display: none !important;
  }
  
  /* Full width main content */
  .main-content {
    width: 100% !important;
    padding: var(--space-4, 16px) !important;
  }
  
  /* Stack grid items */
  .demo-grid-2,
  .demo-grid-3,
  .components-grid,
  .voice-grid,
  .usage-platform-grid,
  .logo-rules,
  .color-usage-grid,
  .neutral-row {
    grid-template-columns: 1fr !important;
  }
  
  /* Post cards full width */
  .post-card {
    border-radius: var(--radius-lg, 12px) !important;
  }
  
  /* Widgets full width */
  .widget {
    border-radius: var(--radius-lg, 12px) !important;
  }
}

/* ===== TABLET LAYOUT ===== */
@media (min-width: 768px) and (max-width: 1279px) {
  .container {
    max-width: 100% !important;
    padding-left: var(--space-6, 24px) !important;
    padding-right: var(--space-6, 24px) !important;
  }
}

/* ===== DESKTOP LAYOUT ===== */
@media (min-width: 1280px) {
  .container {
    max-width: var(--content-wide, 1200px) !important;
  }
}

/* ===== GRID: 9 columns main + 3 columns sidebar ===== */
@media (min-width: 992px) {
/* Theme color for mobile browsers */
meta[name="theme-color"] {
  content: #0d1117 !important;
}

[data-scheme="light"] meta[name="theme-color"],
[data-scheme='light'] meta[name="theme-color"] {
  content: #f4f6f8 !important;
}
/* ============================================================
@media (min-width: 768px) and (max-width: 991px) {
  .layout {
    grid-template-columns: 260px 1fr !important;
  }
}
/* ============================================================
   SIDEBAR FIX v3 — Wider sidebar + no content clipping
   ============================================================ */

/* Desktop sidebar */
@media (min-width: 992px) {
  .layout {
    grid-template-columns: 300px 1fr !important;
  }
  .left__sidebar {
    width: 300px !important;
  }
  .left__sidebar .offcanvas__inner {
    overflow-x: visible !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Tablet sidebar */
@media (min-width: 768px) and (max-width: 991px) {
  .layout {
    grid-template-columns: 280px 1fr !important;
  }
  .left__sidebar {
    width: 280px !important;
  }
  .left__sidebar .offcanvas__inner {
    overflow-x: visible !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* ============================================================
/* Main toggle container */
.site-scheme-toggle .header__scheme-toggle {
  padding: 6px !important;
  min-width: 72px !important;
}

/* Icon containers — larger hit target */
.site-scheme-toggle .header__scheme-toggle-icons > span {
  width: 32px !important;
  height: 32px !important;
}

/* Icons themselves */
.site-scheme-toggle .header__scheme-toggle-icons .header__scheme-toggle-icon {
  width: 18px !important;
  height: 18px !important;
}
/* ============================================================
   SCHEME TOGGLE FIX — Correct width
   ============================================================ */
.site-scheme-toggle {
  width: 80px !important;
}
/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================
   ICONS v2 — Fix fill-based icons, preserve stroke-based
   ============================================================ */

/* Fill-based icons: no stroke, use currentColor fill */
svg path:not([fill='none']) {
  stroke: none !important;
  stroke-width: 0 !important;
  fill: currentColor !important;
}

/* Stroke-based icons: keep stroke, no fill */
svg path[fill='none'] {
  stroke: currentColor !important;
  fill: none !important;
}

/* Logo — preserve colors */
.cota-icon .logo-outer { fill: #f5a623 !important; }
.cota-icon .logo-inner { fill: var(--logo-inner) !important; }
.cota-icon .logo-stroke { fill: none !important; stroke: #f5a623 !important; stroke-width: 5.5 !important; }
.cota-icon .logo-rect { fill: #22808c !important; }

/* ============================================================
   HOVER FIX — btn-notification & btn-addpost
   Override style.css hover that uses --layout-background
   ============================================================ */

[data-scheme='dark'] .btn-notification:hover,
[data-scheme='dark'] .btn-addpost:hover {
  background: var(--color-highlight-background) !important;
}

[data-scheme='light'] .btn-notification:hover,
[data-scheme='light'] .btn-addpost:hover {
  background: var(--color-highlight-background) !important;
}

/* ============================================================
   SEARCH — Brandbook colors for search icon, input, close
   ============================================================ */

/* Search toggle icon in header */
[data-scheme='dark'] .header__search-toggle,
[data-scheme='dark'] .header__search-toggle .icon {
    color: var(--cota-text-muted, #8b949e) !important;
}

[data-scheme='light'] .header__search-toggle,
[data-scheme='light'] .header__search-toggle .icon {
    color: var(--cota-text-muted, #5a6a7a) !important;
}

/* Search input field */
[data-scheme='dark'] .search__input {
    background: var(--cota-surface, #161b22) !important;
    color: var(--cota-text, #e6edf3) !important;
    border-color: var(--cota-border, #30363d) !important;
}

[data-scheme='light'] .search__input {
    background: var(--cota-surface, #ffffff) !important;
    color: var(--cota-text, #1a2332) !important;
    border-color: var(--cota-border, #e4e8ed) !important;
}

/* Search submit button */
[data-scheme='dark'] .search__submit {
    background: var(--cota-primary, #22808c) !important;
    color: #ffffff !important;
    border: none !important;
}

[data-scheme='light'] .search__submit {
    background: var(--cota-primary-light, #1a6b76) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Close icon in search */
[data-scheme='dark'] .search__close {
    color: var(--cota-text-muted, #8b949e) !important;
}

[data-scheme='light'] .search__close {
    color: var(--cota-text-muted, #5a6a7a) !important;
}

/* Search container background */
[data-scheme='dark'] .search {
    background: var(--cota-surface, #0d1117) !important;
}

[data-scheme='light'] .search {
    background: var(--cota-surface, #f4f6f8) !important;
}
/* ============================================================
   FIX ALL — Comprehensive brandbook fixes
   ============================================================ */

/* === 1. COMMENTS SECTION — light theme === */
[data-scheme='light'] .entry__comments-inner {
    background: #ffffff !important;
    border: 1px solid #e4e8ed !important;
}

[data-scheme='dark'] .entry__comments-inner {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
}

/* === 2. SCROLL-TO-TOP BUTTON === */
.scroll-top {
    width: 44px !important;
    height: 44px !important;
    bottom: 2rem !important;
    right: 2rem !important;
    background: transparent !important;
    border: none !important;
}

.scroll-top .icon-chevron-up {
    color: #22808c !important;
    font-size: 20px !important;
    z-index: 2 !important;
    position: relative !important;
}

.scroll-top-border path {
    stroke: #30363d !important;
}

[data-scheme='light'] .scroll-top-border path {
    stroke: #e4e8ed !important;
}

.scroll-top-progress path {
    stroke: #22808c !important;
}

[data-scheme='light'] .scroll-top .icon-chevron-up {
    color: #1a6b76 !important;
}

[data-scheme='light'] .scroll-top-progress path {
    stroke: #1a6b76 !important;
}

/* === 3. NOTIFICATION EMOJI === */
.notification-item {
    padding: 12px 16px !important;
}

.notification-not {
    text-align: center !important;
    padding: 24px 16px !important;
}

.notification-not > div:first-child {
    font-size: 32px !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

/* === 4. UPLOAD BUTTON === */
.qq-upload-button {
    background: #22808c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.18s ease-out !important;
}

.qq-upload-button:hover {
    background: #2d9fad !important;
    transform: translateY(-1px) !important;
}

[data-scheme='light'] .qq-upload-button {
    background: #1a6b76 !important;
}

[data-scheme='light'] .qq-upload-button:hover {
    background: #22808c !important;
}

/* === 5. NOTIFICATION SETTINGS MODAL === */
.modal__window_header {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
}

[data-scheme='light'] .modal__window_header {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e8ed !important;
}

.modal__window_header-title {
    color: #e6edf3 !important;
}

[data-scheme='light'] .modal__window_header-title {
    color: #1a2332 !important;
}

.modal__close svg {
    fill: #8b949e !important;
}

[data-scheme='light'] .modal__close svg {
    fill: #5a6a7a !important;
}

/* Modal body */
.modal__window_body {
    background: #0d1117 !important;
}

[data-scheme='light'] .modal__window_body {
    background: #f4f6f8 !important;
}

/* Notification settings form */
.notify-setting-modal {
    padding: 0 !important;
}

.notify-setting-modal label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    color: #e6edf3 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

[data-scheme='light'] .notify-setting-modal label {
    color: #1a2332 !important;
}

.notify-setting-modal input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #22808c !important;
}

.notify-setting-modal-footer {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #30363d !important;
    display: flex !important;
    justify-content: flex-end !important;
}

[data-scheme='light'] .notify-setting-modal-footer {
    border-top-color: #e4e8ed !important;
}

.notify-setting-modal-footer button {
    background: #22808c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease-out !important;
}

.notify-setting-modal-footer button:hover {
    background: #2d9fad !important;
}

[data-scheme='light'] .notify-setting-modal-footer button {
    background: #1a6b76 !important;
}

[data-scheme='light'] .notify-setting-modal-footer button:hover {
    background: #22808c !important;
}

/* Remove horizontal scrollbar */
.modal__window {
    max-width: 90vw !important;
    overflow-x: hidden !important;
}

.modal__window_body {
    overflow-x: hidden !important;
}

/* === 6. SEARCH ICONS === */
.header__search-toggle {
    color: #8b949e !important;
}

[data-scheme='light'] .header__search-toggle {
    color: #5a6a7a !important;
}

.search__input {
    background: #161b22 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
}

[data-scheme='light'] .search__input {
    background: #ffffff !important;
    color: #1a2332 !important;
    border: 1px solid #e4e8ed !important;
}

.search__submit {
    background: #22808c !important;
    color: #ffffff !important;
    border: none !important;
}

[data-scheme='light'] .search__submit {
    background: #1a6b76 !important;
}

.search__close {
    color: #8b949e !important;
}

[data-scheme='light'] .search__close {
    color: #5a6a7a !important;
}

.search {
    background: #0d1117 !important;
}

[data-scheme='light'] .search {
    background: #f4f6f8 !important;
}

/* === 7. BILLING PAGES BRAND BOOK === */
.billing-panel {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

[data-scheme='light'] .billing-panel {
    background: #ffffff !important;
    border-color: #e4e8ed !important;
}

.billing-foto {
    border: 2px solid #30363d !important;
}

[data-scheme='light'] .billing-foto {
    border-color: #e4e8ed !important;
}

.billing-balance {
    color: #e6edf3 !important;
}

[data-scheme='light'] .billing-balance {
    color: #1a2332 !important;
}

.billing-balance span {
    color: #8b949e !important;
}

[data-scheme='light'] .billing-balance span {
    color: #5a6a7a !important;
}

/* Пополнить button */
.ui-button.billing-pay-btn,
a.billing-pay-btn {
    background: #22808c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.18s ease-out !important;
}

.ui-button.billing-pay-btn:hover,
a.billing-pay-btn:hover {
    background: #2d9fad !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(34, 128, 140, 0.3) !important;
}

[data-scheme='light'] .ui-button.billing-pay-btn,
[data-scheme='light'] a.billing-pay-btn {
    background: #1a6b76 !important;
}

[data-scheme='light'] .ui-button.billing-pay-btn:hover,
[data-scheme='light'] a.billing-pay-btn:hover {
    background: #22808c !important;
}

/* Back link */
.billing-back-link {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    color: #22808c !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    border: 1px solid #30363d !important;
    background: #161b22 !important;
    transition: all 0.18s ease-out !important;
    margin-bottom: 20px !important;
}

.billing-back-link:hover {
    background: #1c2128 !important;
    border-color: #22808c !important;
    color: #2d9fad !important;
}

[data-scheme='light'] .billing-back-link {
    color: #1a6b76 !important;
    border-color: #e4e8ed !important;
    background: #ffffff !important;
}

[data-scheme='light'] .billing-back-link:hover {
    background: #f0f2f5 !important;
    border-color: #1a6b76 !important;
    color: #22808c !important;
}

/* Billing menu tabs */
.billing-menu {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow-x: auto !important;
}

[data-scheme='light'] .billing-menu {
    background: #ffffff !important;
    border-color: #e4e8ed !important;
}

.billing-menu-content {
    border-top: none !important;
    border-bottom: 2px solid #30363d !important;
    display: flex !important;
    padding: 0 !important;
}

[data-scheme='light'] .billing-menu-content {
    border-bottom-color: #e4e8ed !important;
}

.billing-item {
    color: #8b949e !important;
    border-top: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.18s ease-out !important;
    margin-bottom: -2px !important;
}

.billing-item:hover {
    color: #22808c !important;
    background: #1c2128 !important;
}

[data-scheme='light'] .billing-item {
    color: #5a6a7a !important;
}

[data-scheme='light'] .billing-item:hover {
    color: #1a6b76 !important;
    background: #f0f2f5 !important;
}

.billing-item-active {
    color: #22808c !important;
    border-top: none !important;
    border-bottom: 2px solid #22808c !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: -2px !important;
}

[data-scheme='light'] .billing-item-active {
    color: #1a6b76 !important;
    border-bottom-color: #1a6b76 !important;
}

/* Billing content */
.billing-content {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 16px !important;
}

[data-scheme='light'] .billing-content {
    background: #ffffff !important;
    border-color: #e4e8ed !important;
}

/* Billing tables */
.billing-table {
    color: #e6edf3 !important;
}

[data-scheme='light'] .billing-table {
    color: #1a2332 !important;
}

.billing-table tr {
    border-top-color: #30363d !important;
}

[data-scheme='light'] .billing-table tr {
    border-top-color: #e4e8ed !important;
}

/* Billing pagination */
.billing-pagination a,
.billing-pagination strong {
    background: #161b22 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
}

[data-scheme='light'] .billing-pagination a,
[data-scheme='light'] .billing-pagination strong {
    background: #ffffff !important;
    color: #1a2332 !important;
    border-color: #e4e8ed !important;
}

.billing-pagination strong {
    background: #22808c !important;
    color: #ffffff !important;
    border-color: #22808c !important;
}

[data-scheme='light'] .billing-pagination strong {
    background: #1a6b76 !important;
    border-color: #1a6b76 !important;
}

.billing-pagination a:hover {
    background: #22808c !important;
    color: #ffffff !important;
    border-color: #22808c !important;
}

[data-scheme='light'] .billing-pagination a:hover {
    background: #1a6b76 !important;
    border-color: #1a6b76 !important;
}

/* ============================================================
   FIX v12 — All remaining issues
   ============================================================ */

/* === 1. Search group background === */
.form-box .form-group {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

[data-scheme='light'] .form-box .form-group {
    background-color: #ffffff !important;
    border-color: #e4e8ed !important;
}

/* === 2. Notification emoji not clipped === */
.notification-item.notification-not:before {
    width: 64px !important;
    height: 64px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 auto 16px !important;
}

/* === 3. Notification settings modal === */
#notify-setting .modal__window {
    max-width: 480px !important;
    width: 90vw !important;
}

#notify-setting .modal__window_body {
    padding: 20px 24px !important;
}

.notify-setting-modal label {
    padding: 6px 0 !important;
    gap: 10px !important;
}

.notify-setting-modal br {
    display: none !important;
}

.notify-setting-modal-footer {
    padding: 16px 0 0 !important;
    justify-content: flex-end !important;
}

.notify-setting-modal-footer button {
    padding: 10px 28px !important;
}

/* === 4. Dashboard & Billing fixes === */

/* Пополнить button text visible */
.ui-button.billing-pay-btn,
a.billing-pay-btn {
    color: #ffffff !important;
    background: #22808c !important;
}

[data-scheme='light'] .ui-button.billing-pay-btn,
[data-scheme='light'] a.billing-pay-btn {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

/* Billing panel spacing */
.billing-panel {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

.billing-balance {
    flex: 1 !important;
}

.billing-balance div {
    margin-top: 10px !important;
}

/* Billing menu tabs - same style as Пополнить */
.billing-item {
    color: #8b949e !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.18s ease-out !important;
    margin-bottom: -2px !important;
}

.billing-item:hover {
    color: #22808c !important;
    background: rgba(34, 128, 140, 0.08) !important;
}

[data-scheme='light'] .billing-item {
    color: #5a6a7a !important;
}

[data-scheme='light'] .billing-item:hover {
    color: #1a6b76 !important;
    background: rgba(26, 107, 118, 0.08) !important;
}

.billing-item-active {
    color: #22808c !important;
    border: none !important;
    border-bottom: 2px solid #22808c !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: -2px !important;
}

[data-scheme='light'] .billing-item-active {
    color: #1a6b76 !important;
    border-bottom-color: #1a6b76 !important;
}

/* Back button - same style as Пополнить */
.billing-back-link {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    color: #ffffff !important;
    background: #22808c !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.18s ease-out !important;
    margin-bottom: 20px !important;
}

.billing-back-link:hover {
    background: #2d9fad !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(34, 128, 140, 0.3) !important;
}

[data-scheme='light'] .billing-back-link {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

[data-scheme='light'] .billing-back-link:hover {
    background: #22808c !important;
    color: #ffffff !important;
}

/* Tables - proper alignment and padding */
.billing-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.billing-table th {
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #8b949e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: #161b22 !important;
    border-bottom: 2px solid #30363d !important;
}

[data-scheme='light'] .billing-table th {
    color: #5a6a7a !important;
    background: #f4f6f8 !important;
    border-bottom-color: #e4e8ed !important;
}

.billing-table td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.billing-table tr {
    border-top: 1px solid #30363d !important;
}

[data-scheme='light'] .billing-table tr {
    border-top-color: #e4e8ed !important;
}

.billing-table tr:hover {
    background: #1c2128 !important;
}

[data-scheme='light'] .billing-table tr:hover {
    background: #f0f2f5 !important;
}

/* Billing content area */
.billing-content {
    margin-top: 16px !important;
}

/* History item image */
.billing-history-item-image {
    border: 1px solid #30363d !important;
    border-radius: 50% !important;
}

[data-scheme='light'] .billing-history-item-image {
    border-color: #e4e8ed !important;
}

/* === 5. Comment text color light theme === */
[data-scheme='light'] .comment-item .comm-text,
[data-scheme='light'] .comment-item p,
[data-scheme='light'] .comment-item {
    color: #1a2332 !important;
}

[data-scheme='light'] .comment-item a {
    color: #1a6b76 !important;
}

/* ============================================================
   FIX v13 — All remaining issues
   ============================================================ */

/* === 1. Top authors list marker padding === */
.widget-top-authors {
    padding-left: 20px !important;
}

.widget-top-authors li {
    padding-left: 8px !important;
}

.widget-top-authors li::marker {
    color: #8b949e !important;
    font-size: 14px !important;
}

[data-scheme='light'] .widget-top-authors li::marker {
    color: #5a6a7a !important;
}

/* === 4. Notification settings modal height === */
#notify-setting .modal__window {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}

#notify-setting .modal__window_body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px 16px !important;
}

.notify-setting-modal-footer {
    padding: 12px 24px 20px !important;
    justify-content: flex-start !important;
}

.notify-setting-modal-footer button {
    margin-left: 0 !important;
}

/* === 5. Пополнить button text visible === */
.ui-button.billing-pay-btn,
a.billing-pay-btn {
    color: #ffffff !important;
    background: #22808c !important;
    border: none !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ui-button.billing-pay-btn:hover,
a.billing-pay-btn:hover {
    color: #ffffff !important;
    background: #2d9fad !important;
}

[data-scheme='light'] .ui-button.billing-pay-btn,
[data-scheme='light'] a.billing-pay-btn {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

[data-scheme='light'] .ui-button.billing-pay-btn:hover,
[data-scheme='light'] a.billing-pay-btn:hover {
    color: #ffffff !important;
    background: #22808c !important;
}

/* === 6. Billing menu tabs styled like Пополнить === */
.billing-item {
    color: #ffffff !important;
    background: #22808c !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    transition: all 0.18s ease-out !important;
}

.billing-item:hover {
    background: #2d9fad !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

[data-scheme='light'] .billing-item {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

[data-scheme='light'] .billing-item:hover {
    background: #22808c !important;
    color: #ffffff !important;
}

.billing-item-active {
    color: #ffffff !important;
    background: #f5a623 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
}

[data-scheme='light'] .billing-item-active {
    color: #ffffff !important;
    background: #d4891a !important;
}

/* === 7. Back button — text visible, no arrow === */
.billing-back-link {
    color: #ffffff !important;
    background: #22808c !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: none !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transition: all 0.18s ease-out !important;
    margin-bottom: 20px !important;
}

.billing-back-link svg {
    display: none !important;
}

.billing-back-link:hover {
    background: #2d9fad !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

[data-scheme='light'] .billing-back-link {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

[data-scheme='light'] .billing-back-link:hover {
    background: #22808c !important;
    color: #ffffff !important;
}

/* === 8. Comment text color light theme === */
[data-scheme='light'] .comment-content,
[data-scheme='light'] .comment-text,
[data-scheme='light'] .comment-content p,
[data-scheme='light'] div[id^='comm-id-'] {
    color: #1a2332 !important;
}

[data-scheme='dark'] .comment-content,
[data-scheme='dark'] .comment-text,
[data-scheme='dark'] .comment-content p,
[data-scheme='dark'] div[id^='comm-id-'] {
    color: #e6edf3 !important;
}

/* Comment metadata */
[data-scheme='light'] .comment-metadata a {
    color: #5a6a7a !important;
}

[data-scheme='dark'] .comment-metadata a {
    color: #8b949e !important;
}

/* Comment author name */
[data-scheme='light'] .comment-author .fn a {
    color: #1a6b76 !important;
}

[data-scheme='dark'] .comment-author .fn a {
    color: #22808c !important;
}

/* === 9. Scroll-to-top — simplify, remove progress circle === */
.scroll-top {
    width: 44px !important;
    height: 44px !important;
    background: #161b22 !important;
    border: 2px solid #30363d !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scroll-top-border,
.scroll-top-progress {
    display: none !important;
}

.scroll-top .icon-chevron-up {
    color: #22808c !important;
    font-size: 18px !important;
}

[data-scheme='light'] .scroll-top {
    background: #ffffff !important;
    border-color: #e4e8ed !important;
}

[data-scheme='light'] .scroll-top .icon-chevron-up {
    color: #1a6b76 !important;
}

.scroll-top:hover {
    background: #22808c !important;
    border-color: #22808c !important;
}

.scroll-top:hover .icon-chevron-up {
    color: #ffffff !important;
}

[data-scheme='light'] .scroll-top:hover {
    background: #1a6b76 !important;
    border-color: #1a6b76 !important;
}

[data-scheme='light'] .scroll-top:hover .icon-chevron-up {
    color: #ffffff !important;
}

/* Billing panel spacing */
.billing-panel {
    gap: 20px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

.billing-balance {
    flex: 1 !important;
}

.billing-balance div {
    margin-top: 10px !important;
}

/* ============================================================
   FIX v14 — All remaining issues
   ============================================================ */

/* === 1. Search results dropdown dark theme === */
.result-search,
.result-search-list {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
}

.result_item {
    color: #e6edf3 !important;
    border-bottom: 1px solid #30363d !important;
}

.result_item:hover {
    background: #1c2128 !important;
}

.result_item_post_title {
    color: #e6edf3 !important;
}

.seperator a {
    color: #8b949e !important;
}

[data-scheme='light'] .result-search,
[data-scheme='light'] .result-search-list {
    background: #ffffff !important;
    border-color: #e4e8ed !important;
}

[data-scheme='light'] .result_item {
    color: #1a2332 !important;
    border-bottom-color: #e4e8ed !important;
}

[data-scheme='light'] .result_item:hover {
    background: #f0f2f5 !important;
}

[data-scheme='light'] .result_item_post_title {
    color: #1a2332 !important;
}

[data-scheme='light'] .seperator a {
    color: #5a6a7a !important;
}

/* === 2. Light theme text colors — PM, category titles, descriptions === */
[data-scheme='light'] .pm-empty,
[data-scheme='light'] .pm-empty p,
[data-scheme='light'] .pm-no-messages {
    color: #1a2332 !important;
}

[data-scheme='light'] .block-categories__list .cat-title,
[data-scheme='light'] .block-categories__list .cat-title a,
[data-scheme='light'] .categorilist__wrapper .category-title,
[data-scheme='light'] .categorilist__wrapper .category-title a {
    color: #1a2332 !important;
}

[data-scheme='light'] .categorilist__wrapper .category-description,
[data-scheme='light'] .block-categories__list .cat-desc {
    color: #5a6a7a !important;
}

[data-scheme='light'] .categorilist__wrapper .category-count,
[data-scheme='light'] .block-categories__list .cat-count {
    color: #5a6a7a !important;
}

/* Override the broad color:primary rule for light theme */
[data-scheme='light'] .entry-content b,
[data-scheme='light'] .entry-content strong,
[data-scheme='light'] .entry-content h1,
[data-scheme='light'] .entry-content h2,
[data-scheme='light'] .entry-content h3,
[data-scheme='light'] .entry-content h4,
[data-scheme='light'] .entry-content h5,
[data-scheme='light'] .entry-content h6 {
    color: #1a2332 !important;
}

/* === 3. User cards font === */
.user-cards {
    font-family: 'Inter', sans-serif !important;
}

.user-name-link {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #22808c !important;
}

[data-scheme='light'] .user-name-link {
    color: #1a6b76 !important;
}

.user-group {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #8b949e !important;
}

[data-scheme='light'] .user-group {
    color: #5a6a7a !important;
}

.rating-value {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700 !important;
}

.rating-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #8b949e !important;
}

[data-scheme='light'] .rating-label {
    color: #5a6a7a !important;
}

/* === 4. Users search button brandbook === */
.search-container .btn-search,
.search-container .submit,
button#sul-searchsubmit {
    background: #22808c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.18s ease-out !important;
}

.search-container .btn-search:hover,
.search-container .submit:hover,
button#sul-searchsubmit:hover {
    background: #2d9fad !important;
    color: #ffffff !important;
}

[data-scheme='light'] .search-container .btn-search,
[data-scheme='light'] .search-container .submit,
[data-scheme='light'] button#sul-searchsubmit {
    background: #1a6b76 !important;
    color: #ffffff !important;
}

[data-scheme='light'] .search-container .btn-search:hover,
[data-scheme='light'] .search-container .submit:hover,
[data-scheme='light'] button#sul-searchsubmit:hover {
    background: #22808c !important;
    color: #ffffff !important;
}

.search-container .search-input {
    border-radius: 8px 0 0 8px !important;
}

.search-container .search-input:focus {
    border-color: #22808c !important;
}

[data-scheme='light'] .search-container .search-input:focus {
    border-color: #1a6b76 !important;
}

/* === 5. Fix a:not rule — add billing exceptions === */
[data-scheme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-pay-btn):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.ui-button),
body.dle_theme_dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-pay-btn):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.ui-button) {
  color: #22808c !important;
}

[data-scheme="light"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-pay-btn):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.ui-button),
[data-scheme='light'] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.menu-item a):not(.sidebar-link):not(.pc-author a):not(.pcc-name a):not(.pcc-title-post):not(.billing-pay-btn):not(.billing-item):not(.billing-item-active):not(.billing-back-link):not(.ui-button) {
  color: #1a6b76 !important;
}

/* === Billing buttons — force white text === */
.ui-button.billing-pay-btn,
a.billing-pay-btn,
a.ui-button.billing-pay-btn {
    color: #ffffff !important;
    background: #22808c !important;
}

.billing-item {
    color: #ffffff !important;
    background: #22808c !important;
}

.billing-item-active {
    color: #ffffff !important;
    background: #f5a623 !important;
}

.billing-back-link {
    color: #ffffff !important;
    background: #22808c !important;
}

[data-scheme='light'] .ui-button.billing-pay-btn,
[data-scheme='light'] a.billing-pay-btn {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

[data-scheme='light'] .billing-item {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

[data-scheme='light'] .billing-item-active {
    color: #ffffff !important;
    background: #d4891a !important;
}

[data-scheme='light'] .billing-back-link {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

/* === Users search form — remove icon, align heights === */
.search-container .search-icon,
.search-container .feather-search {
    display: none !important;
}

.search-container .search-input,
.search-container .form-control.search-input {
    height: 42px !important;
    border-radius: 8px !important;
    padding-left: 16px !important;
    background: #161b22 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
}

[data-scheme='light'] .search-container .search-input,
[data-scheme='light'] .search-container .form-control.search-input {
    background: #ffffff !important;
    color: #1a2332 !important;
    border-color: #e4e8ed !important;
}

.search-container .btn-search,
.search-container .submit,
button#sul-searchsubmit {
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Font headings family fix */
:root {
    --font-headings-family: 'Exo 2', sans-serif !important;
    --font-section-headings-family: 'Exo 2', sans-serif !important;
}

.position-number {
    font-family: 'Exo 2', sans-serif !important;
}

/* === Fix form-control margin for search input === */
.search-container .form-control,
.search-container .search-input {
    margin-bottom: 0 !important;
}

/* === Fix billing buttons text color in light theme === */
[data-scheme='light'] a.billing-item,
[data-scheme='light'] a.billing-item-active,
[data-scheme='light'] a.billing-back-link,
[data-scheme='light'] a.billing-pay-btn,
[data-scheme='light'] a.ui-button.billing-pay-btn {
    color: #ffffff !important;
}

/* Override the a:not rule for billing buttons */
a.billing-item,
a.billing-item-active,
a.billing-back-link,
a.billing-pay-btn,
a.ui-button.billing-pay-btn {
    color: #ffffff !important;
}

/* Dark theme body text */
[data-scheme='dark'] body,
body.dle_theme_dark {
    color: #e6edf3 !important;
}

/* Light theme body text */

/* ============================================================
   MOBILE HEADER — @media max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Burger icon alignment */
    .header__offcanvas-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* 2. Remove padding from header columns */
    .header__col.col-left:not(:only-child) {
        padding-right: 0 !important;
    }

    .header__col.col-right:not(:only-child) {
        padding-left: 0 !important;
    }

    /* 3. Remove logo margin */
    h1.logo {
        margin: 0 !important;
    }

    .header__logo {
        margin: 0 !important;
    }

    /* Header alignment */
    .header__col {
        display: flex !important;
        align-items: center !important;
    }
}
}

/* ============================================================
   MOBILE FIXES — @media max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Notifications dropdown — remove fixed width */
    #notifications-dropdown {
        width: calc(100vw - 32px) !important;
        max-width: 375px !important;
        right: -60px !important;
    }

    /* 2. Notification emoji — bigger, not clipped */
    .notification-item.notification-not:before {
        width: 80px !important;
        height: 80px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin: 0 auto 16px !important;
    }

    /* 3. Modal — remove width limits, no horizontal scroll */
    .modal__window {
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 16px !important;
    }

    .modal__window_body {
        overflow-x: hidden !important;
        padding: 16px !important;
    }

    /* Save button left align */
    .notify-setting-modal-footer {
        justify-content: flex-start !important; padding: 30px !important;
    }

    /* 4. Modal header — dark theme */
    .modal__window_header {
        background: #161b22 !important;
        border-bottom: 1px solid #30363d !important;
    }

    [data-scheme='light'] .modal__window_header {
        background: #ffffff !important;
        border-bottom-color: #e4e8ed !important;
    }

    .modal__window_header-title {
        color: #e6edf3 !important;
    }

    [data-scheme='light'] .modal__window_header-title {
        color: #1a2332 !important;
    }

    .modal__close svg {
        fill: #8b949e !important;
    }

    [data-scheme='light'] .modal__close svg {
        fill: #5a6a7a !important;
    }

    /* 5. Search results — dark theme */
    .result-search,
    .result-search-list {
        background: #161b22 !important;
        border: 1px solid #30363d !important;
    }

    [data-scheme='light'] .result-search,
    [data-scheme='light'] .result-search-list {
        background: #ffffff !important;
        border-color: #e4e8ed !important;
    }

    .result_item {
        color: #e6edf3 !important;
        border-bottom-color: #30363d !important;
    }

    [data-scheme='light'] .result_item {
        color: #1a2332 !important;
        border-bottom-color: #e4e8ed !important;
    }

    .result_item_post_title {
        color: #e6edf3 !important;
    }

    [data-scheme='light'] .result_item_post_title {
        color: #1a2332 !important;
    }
}

/* ============================================================
   MOBILE FIXES v2 — @media max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Scroll-to-top progress — hide */
    .scroll-top-progress {
        display: none !important;
    }

    /* 2. Comments section — light theme */
    [data-scheme='light'] .entry__comments-inner {
        background: #ffffff !important;
        border: 1px solid #e4e8ed !important;
    }

    [data-scheme='light'] .comment-body,
    [data-scheme='light'] .comment-meta,
    [data-scheme='light'] .comment-content,
    [data-scheme='light'] .reply {
        color: #1a2332 !important;
    }

    [data-scheme='light'] .comment-author .fn a {
        color: #1a6b76 !important;
    }

    [data-scheme='light'] .comment-metadata a {
        color: #5a6a7a !important;
    }

    [data-scheme='light'] .comment-reply-link {
        color: #1a6b76 !important;
    }

    /* 3. Like button icon */
    .like-comm-btn svg,
    .comment-item-button_icon svg {
        fill: currentColor !important;
    }

    /* 4. Users search form — match desktop */
    .search-container .form-control.search-input {
        height: 42px !important;
        border-radius: 8px !important;
        background: #161b22 !important;
        color: #e6edf3 !important;
        border: 1px solid #30363d !important;
        padding-left: 16px !important;
    }

    [data-scheme='light'] .search-container .form-control.search-input {
        background: #ffffff !important;
        color: #1a2332 !important;
        border-color: #e4e8ed !important;
    }

    .search-container .btn-search,
    button#sul-searchsubmit {
        height: 42px !important;
        background: #22808c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 0 20px !important;
        font-weight: 600 !important;
    }

    [data-scheme='light'] .search-container .btn-search,
    [data-scheme='light'] button#sul-searchsubmit {
        background: #1a6b76 !important;
    }

    /* 5. User cards — fonts */
    .user-cards {
        font-family: 'Inter', sans-serif !important;
    }

    .position-number {
        font-family: 'Exo 2', sans-serif !important;
        font-weight: 800 !important;
    }

    .user-name-link {
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
    }

    .user-group {
        font-family: 'Inter', sans-serif !important;
        color: #8b949e !important;
    }

    [data-scheme='light'] .user-group {
        color: #5a6a7a !important;
    }

    .rating-value {
        font-family: 'Exo 2', sans-serif !important;
        font-weight: 700 !important;
    }

    .rating-label {
        font-family: 'Inter', sans-serif !important;
        color: #8b949e !important;
    }

    [data-scheme='light'] .rating-label {
        color: #5a6a7a !important;
    }

    /* 6. Profile buttons — full width */
    .profile-btn-subscribe {
        flex-direction: column !important;
        width: 100% !important;
    }

    .profile-btn-subscribe .user-subscribe-button {
        width: 100% !important;
        justify-content: center !important;
    }

    .profile-btn-subscribe a {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 20px !important;
        background: #22808c !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }

    [data-scheme='light'] .profile-btn-subscribe a {
        background: #1a6b76 !important;
    }

    /* 8. Edit profile active tab — remove background */
    .edit-profile .nav-underline .nav-link.active,
    .edit-profile .nav-underline .show > .nav-link {
        background: transparent !important;
    }

    /* 9. Editor buttons — margin */
    .editor-button button {
        margin: 4px 0 !important;
    }

    /* 10. Captcha — column layout */
    .row.align-items-center:has(#dle-captcha) {
        flex-direction: column !important;
    }

    .row.align-items-center:has(#dle-captcha) .col-auto,
    .row.align-items-center:has(#dle-captcha) .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* 11. PM menu — spacing */
    #pm-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }

    #pm-menu a {
        display: block !important;
    }

    #pm-menu .button {
        display: block !important;
        padding: 12px 20px !important;
        background: #22808c !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        text-align: center !important;
        font-weight: 600 !important;
    }

    [data-scheme='light'] #pm-menu .button {
        background: #1a6b76 !important;
    }
}

/* ============================================================
   MOBILE FIXES v3 — @media max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Subscribe button height */
    .profile-btn-subscribe .usp-button.user-subscribe-button {
        height: 50px !important;
    }

    /* 2. Scroll-top-border — hide */
    .scroll-top-border {
        display: none !important;
    }

    /* 3. Users search — remove icon and margin */
    .search-container .feather-search,
    .search-container .search-icon {
        display: none !important;
    }

    .search-container .form-control.search-input {
        margin-bottom: 0 !important;
    }

    /* 4. "Написать ПС" button — visible text */
    .profile-btn-subscribe a {
        color: #ffffff !important;
    }
}

/* ============================================================
   BILLING MOBILE — @media max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* Panel */
    .billing-panel {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 16px !important;
        background: #161b22 !important;
        border: 1px solid #30363d !important;
    border-radius: 12px !important;
    }

    [data-scheme='light'] .billing-panel {
        background: #ffffff !important;
        border-color: #e4e8ed !important;
    }

    .billing-foto {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        border: 2px solid #30363d !important;
    }

    [data-scheme='light'] .billing-foto {
        border-color: #e4e8ed !important;
    }

    .billing-balance {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #e6edf3 !important;
        font-family: 'Exo 2', sans-serif !important;
    }

    [data-scheme='light'] .billing-balance {
        color: #1a2332 !important;
    }

    .billing-balance span {
        font-size: 12px !important;
        color: #8b949e !important;
    }

    [data-scheme='light'] .billing-balance span {
        color: #5a6a7a !important;
    }

    .billing-balance div {
        margin-top: 10px !important;
    }

    /* Pay button */
    a.billing-pay-btn,
    .ui-button.billing-pay-btn {
        display: inline-block !important;
        padding: 12px 24px !important;
        background: #22808c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        text-align: center !important;
    }

    [data-scheme='light'] a.billing-pay-btn,
    [data-scheme='light'] .ui-button.billing-pay-btn {
        background: #1a6b76 !important;
    }

    /* Menu tabs */
    .billing-menu {
        background: #161b22 !important;
        border: 1px solid #30363d !important;
    border-radius: 12px !important;
        overflow-x: auto !important;
    }

    [data-scheme='light'] .billing-menu {
        background: #ffffff !important;
        border-color: #e4e8ed !important;
    }

    .billing-menu-content {
        border-top: none !important;
        border-bottom: 2px solid #30363d !important;
        display: flex !important;
        padding: 0 !important;
    }

    [data-scheme='light'] .billing-menu-content {
        border-bottom-color: #e4e8ed !important;
    }

    .billing-item {
        color: #ffffff !important;
        background: #22808c !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: inline-block !important;
        margin: 8px 8px 8px 0 !important;
        white-space: nowrap !important;
    }

    [data-scheme='light'] .billing-item {
        background: #1a6b76 !important;
        color: #ffffff !important;
    }

    .billing-item-active {
        color: #ffffff !important;
        background: #f5a623 !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        display: inline-block !important;
        margin: 8px 8px 8px 0 !important;
        white-space: nowrap !important;
    }

    [data-scheme='light'] .billing-item-active {
        background: #d4891a !important;
    }

    /* Content area */
    .billing-content {
        background: #161b22 !important;
        border: 1px solid #30363d !important;
    border-radius: 12px !important;
        padding: 16px !important;
        margin-top: 16px !important;
    }

    [data-scheme='light'] .billing-content {
        background: #ffffff !important;
        border-color: #e4e8ed !important;
    }

    /* Tables */
    .billing-table {
        width: 100% !important;
        border-collapse: collapse !important;
        color: #e6edf3 !important;
    }

    [data-scheme='light'] .billing-table {
        color: #1a2332 !important;
    }

    .billing-table th {
        text-align: center !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #8b949e !important;
        text-transform: uppercase !important;
        background: #0d1117 !important;
        border-bottom: 2px solid #30363d !important;
    }

    [data-scheme='light'] .billing-table th {
        color: #5a6a7a !important;
        background: #f4f6f8 !important;
        border-bottom-color: #e4e8ed !important;
    }

    .billing-table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
        border-top: 1px solid #30363d !important;
    }

    [data-scheme='light'] .billing-table td {
        border-top-color: #e4e8ed !important;
    }

    .billing-table tr:hover {
        background: #1c2128 !important;
    }

    [data-scheme='light'] .billing-table tr:hover {
        background: #f0f2f5 !important;
    }

    /* Back link */
    a.billing-back-link {
        display: inline-block !important;
        padding: 12px 24px !important;
        background: #22808c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }

    a.billing-back-link svg {
        display: none !important;
    }

    [data-scheme='light'] a.billing-back-link {
        background: #1a6b76 !important;
        color: #ffffff !important;
    }

    /* Pagination */
    .billing-pagination {
        text-align: center !important;
        padding: 16px 0 !important;
    }

    .billing-pagination a,
    .billing-pagination strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        margin: 0 2px !important;
        font-size: 13px !important;
        background: #161b22 !important;
        color: #e6edf3 !important;
        border: 1px solid #30363d !important;
        border-radius: 8px !important;
        text-decoration: none !important;
    }

    [data-scheme='light'] .billing-pagination a,
    [data-scheme='light'] .billing-pagination strong {
        background: #ffffff !important;
        color: #1a2332 !important;
        border-color: #e4e8ed !important;
    }

    .billing-pagination strong {
        background: #22808c !important;
        color: #ffffff !important;
        border-color: #22808c !important;
    }

    [data-scheme='light'] .billing-pagination strong {
        background: #1a6b76 !important;
        border-color: #1a6b76 !important;
    }
}

/* PM link in profile — visible text */
.profile-btn-subscribe a[onclick*='DLESendPM'],
.profile-btn-subscribe a[href*='do=pm'] {
    color: #ffffff !important;
    background: #22808c !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

[data-scheme='light'] .profile-btn-subscribe a[onclick*='DLESendPM'],
[data-scheme='light'] .profile-btn-subscribe a[href*='do=pm'] {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

/* Force white color on profile PM link */
div.profile-btn-subscribe a {
    color: #ffffff !important;
    background: #22808c !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

[data-scheme='light'] div.profile-btn-subscribe a {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

/* PM write link — force white text */
.pm-write-link {
    color: #ffffff !important;
    background: #22808c !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

[data-scheme='light'] .pm-write-link {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

/* PM link wrapper — force white text */
.pm-link-wrapper a {
    color: #ffffff !important;
    background: #22808c !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

[data-scheme='light'] .pm-link-wrapper a {
    color: #ffffff !important;
    background: #1a6b76 !important;
}

/* ============================================================
   MENU GROUPS — Collapsible accordion style
   ============================================================ */

.menu-group {
    border-top: 1px solid var(--cota-border, #30363d);
}

.menu-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cota-text-muted, #8b949e);
    transition: color 0.18s ease-out;
}

.menu-group-toggle:hover {
    color: var(--cota-primary, #22808c);
}

.menu-group-toggle svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.menu-group.open .menu-group-toggle svg {
    transform: rotate(180deg);
}

.menu-group-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-group.open .menu-group-list {
    display: block;
}

.menu-group-list .menu-item {
    padding: 0;
}

.menu-group-list .menu-item a {
    display: block;
    padding: 8px 16px 8px 24px;
    font-size: 14px;
    color: var(--cota-text, #e6edf3);
    text-decoration: none;
    transition: background 0.18s ease-out, color 0.18s ease-out;
}

.menu-group-list .menu-item a:hover {
    background: var(--cota-card-hover, #1c2128);
    color: var(--cota-primary, #22808c);
}

[data-scheme='light'] .menu-group {
    border-top-color: #e4e8ed;
}

[data-scheme='light'] .menu-group-toggle {
    color: #5a6a7a;
}

[data-scheme='light'] .menu-group-toggle:hover {
    color: #1a6b76;
}

[data-scheme='light'] .menu-group-list .menu-item a {
    color: #1a2332;
}

[data-scheme='light'] .menu-group-list .menu-item a:hover {
    background: #f0f2f5;
    color: #1a6b76;
}

/* ============================================================
   FIX v17 — Multiple issues
   ============================================================ */

/* 1. Billing buttons Оплатить/Удалить — same as billing-item */
.billing-btn_clear {
    color: #ffffff !important;
    background: #22808c !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease-out !important;
    display: inline-block !important;
    margin: 2px !important;
}

.billing-btn_clear:hover {
    background: #2d9fad !important;
    color: #ffffff !important;
}

[data-scheme='light'] .billing-btn_clear {
    background: #1a6b76 !important;
    color: #ffffff !important;
}

[data-scheme='light'] .billing-btn_clear:hover {
    background: #22808c !important;
}

/* 2. Menu widgets — remove background and borders */
.widget_nav_menu,
.esn_themes_widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.widget_nav_menu .menu-osnovnoe-menyu-container,
.esn_themes_widget .wid-themes {
    background: transparent !important;
    border: none !important;
}

/* 3. Content area — white background with border like sidebars */
[data-scheme='light'] .content-area {
    background: #ffffff !important;
    border: 1px solid #e4e8ed !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

[data-scheme='dark'] .content-area {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

/* 4. Text color in light theme */
[data-scheme='light'] .entry-content p,
[data-scheme='light'] .entry-content li,
[data-scheme='light'] .entry-content td,
[data-scheme='light'] .post p,
[data-scheme='light'] .comment-content p {
    color: #5a6a7a !important;
}

/* 5. Post cards — pointer cursor on clickable cards only */
.post-card[data-url],
.post-card[data-url] a {
    cursor: pointer !important;
}

/* 6. User fullname instead of username handled in template */

/* 7. Notifications pagination */
.notifications-pagination,
.notifications-pagination a,
.notifications-pagination strong,
.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.notifications-pagination a,
.pagination a,
.pagination span:not(.dots) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    background: #161b22 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

[data-scheme='light'] .notifications-pagination a,
[data-scheme='light'] .pagination a,
[data-scheme='light'] .pagination span:not(.dots) {
    background: #ffffff !important;
    color: #1a2332 !important;
    border-color: #e4e8ed !important;
}

.notifications-pagination a:hover,
.pagination a:hover {
    background: #22808c !important;
    color: #ffffff !important;
    border-color: #22808c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 128, 140, 0.3) !important;
}

[data-scheme='light'] .notifications-pagination a:hover,
[data-scheme='light'] .pagination a:hover {
    background: #1a6b76 !important;
    border-color: #1a6b76 !important;
}

.notifications-pagination strong,
.pagination strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    background: #22808c !important;
    color: #ffffff !important;
    border: 1px solid #22808c !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

[data-scheme='light'] .notifications-pagination strong,
[data-scheme='light'] .pagination strong {
    background: #1a6b76 !important;
    border-color: #1a6b76 !important;
}

/* ============================================================
   FIX v18 — Menu widgets borders, post background, fullname
   ============================================================ */

/* 1. Menu widgets — remove borders, hover, background */
.widget.widget_nav_menu,
.widget.esn_themes_widget,
.widget.esn_themes_widget-2 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.widget.widget_nav_menu:hover,
.widget.esn_themes_widget:hover,
.widget.esn_themes_widget-2:hover {
    transform: none !important;
    box-shadow: none !important;
}

.widget.widget_nav_menu .menu-osnovnoe-menyu-container {
    background: transparent !important;
    border: none !important;
}

[data-scheme='light'] .widget.widget_nav_menu,
[data-scheme='light'] .widget.esn_themes_widget,
[data-scheme='light'] .widget.esn_themes_widget-2 {
    background: transparent !important;
    border: none !important;
}

[data-scheme='dark'] .widget.widget_nav_menu,
[data-scheme='dark'] .widget.esn_themes_widget,
[data-scheme='dark'] .widget.esn_themes_widget-2 {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
}

/* 2. Post element — remove background */
.post {
    background: transparent !important;
}

[data-scheme='light'] .post {
    background: transparent !important;
}

[data-scheme='dark'] .post {
    background: transparent !important;
}

/* ============================================================
   v21 — Left sidebar: rounded top corners + border
   ============================================================ */
.left__sidebar {
    border-radius: 12px !important;
    background: var(--layout-background);
    overflow: hidden;
    
    top: calc(var(--header-height) + 1.5rem);
    height: calc(100vh - var(--header-height) - 40px);
    border: 1px solid #e4e8ed !important;
}

[data-scheme='dark'] .left__sidebar {
    border: 1px solid #30363d !important;
}

/* v22 — Dark mode active menu item highlight */
[data-scheme='dark'] .current-menu-item,
[data-scheme='dark'] .current-page-ancestor,
[data-scheme='dark'] .current-post-ancestor,
[data-scheme='dark'] .current_page_item {
    background: #182028 !important;
}

/* v23 — Fix comments hidden by DLE 20 AJAX container CSS */
.entry__comments-inner:has(#dle-ajax-comments:empty) {
    display: block !important;
}

.entry__comments-inner:has(#dle-ajax-comments:empty) #dle-ajax-comments {
    min-height: 40px;
}

/* v24 — Margin bottom between comments */
.comment-body {
    margin-bottom: 16px !important;
}