/* ============================================================
   ОБЩИЙ СТИЛЬ ДЛЯ ВСЕХ ИКОНОК
   Каждая иконка — это <i class="icon icon-name"></i>.
   SVG встроен как CSS mask, цвет задаётся через background-color
   и наследует currentColor родителя.
   ============================================================ */
.icon {
    display: inline-block;
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Иконка в главном пункте меню — чуть крупнее */
.dropdown-toggle > .icon {
    width: var(--icon-size-lg, 18px);
    height: var(--icon-size-lg, 18px);
    opacity: 0.85;
}

.dropdown-toggle:hover > .icon {
    opacity: 1;
    background-color: var(--accent-color);
}

/* Иконка в подменю */
.dropdown-menu a .icon {
    opacity: 0.75;
}

.dropdown-menu a:hover .icon {
    opacity: 1;
    background-color: var(--accent-color);
}

/* Иконка баланса */
.balance .icon-card {
    width: var(--icon-size-lg, 18px);
    height: var(--icon-size-lg, 18px);
    background-color: var(--success-color, #28a745);
    opacity: 0.9;
}

/* ============================================================
   SVG МАСКИ (data-URI)
   ============================================================ */

/* ============================================================
   FloodCRM Icon Pack — svg.css
   Minimalist stroke icons • 24×24 • currentColor
   Works with light & dark themes automatically
   ============================================================ */

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* Размеры */
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* ---------- 1. Email ---------- */
.icon-email {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* ---------- 2. Phone ---------- */
.icon-phone {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ---------- 3. SMS ---------- */
.icon-sms {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='8' cy='10' r='1' fill='black'/%3E%3Ccircle cx='12' cy='10' r='1' fill='black'/%3E%3Ccircle cx='16' cy='10' r='1' fill='black'/%3E%3C/svg%3E");
}

/* ---------- 4. Affiliate (партнёрка) ---------- */
.icon-affiliate {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
}

/* ---------- 5. Bitcoin ---------- */
.icon-bitcoin {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10 7v10'/%3E%3Cpath d='M10 7h3.5a2.5 2.5 0 0 1 0 5H10'/%3E%3Cpath d='M10 12h4a2.5 2.5 0 0 1 0 5h-4'/%3E%3Cpath d='M11.5 4.5v3M13.5 4.5v3M11.5 16.5v3M13.5 16.5v3'/%3E%3C/svg%3E");
}

/* ---------- 6. Litecoin ---------- */
.icon-litecoin {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M11 6v11h7'/%3E%3Cline x1='8' y1='14' x2='14' y2='10'/%3E%3C/svg%3E");
}

/* ---------- 7. Message (сообщение) ---------- */
.icon-message {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

.icon-message-new {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3Ccircle cx='19' cy='5' r='5' fill='black' stroke='none'/%3E%3C/svg%3E");
  background-image: radial-gradient(circle at 79% 21%, #e5484d 5px, transparent 5px);
  animation: pulse-dot 2s infinite;
}




/* ---------- 8. Profile (профиль) ---------- */
.icon-profile {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* ---------- 9. Settings (настройки) ---------- */
.icon-settings {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* ---------- 10. API ---------- */
.icon-api {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* ---------- 11. Contacts (контакты) ---------- */
.icon-contacts {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* ---------- 12. Rules (правила) ---------- */
.icon-rules {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpolyline points='9 15 11 17 15 13'/%3E%3C/svg%3E");
}

/* ---------- 13. Delete (удалить) ---------- */
/* ---------- 13. Delete (удалить) — без спец. цвета ---------- */
.icon-delete {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

.icon-delete:hover {
    background: red;
}
/* ---------- 14. Description (описание) ---------- */
.icon-desc {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E");
}

/* ---------- 15. Edit (редактировать) ---------- */
.icon-edit {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

/* ---------- 16. Start (запуск) ---------- */
.icon-start {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l14 8-14 8z'/%3E%3C/svg%3E");
}

/* ---------- 17. Pause (пауза) ---------- */
.icon-pause {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='5' x2='8' y2='19'/%3E%3Cline x1='16' y1='5' x2='16' y2='19'/%3E%3C/svg%3E");
}

/* ---------- 18. Time (установка времени) ---------- */
.icon-time {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* ---------- 19. Calendar (календарь) ---------- */
.icon-calendar {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* ---------- 20. FAQ ---------- */
.icon-faq {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* ---------- 21. Help (помощь) ---------- */
.icon-help {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3Cpath d='M2 12h2M20 12h2M12 2v2M12 20v2'/%3E%3C/svg%3E");
}

/* ---------- 22. Logout (выход) ---------- */
.icon-exit {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* ---------- 23. Plus (+) ---------- */
.icon-plus {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* ---------- 24. Minus (−) ---------- */
.icon-minus {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}


.icon-stats1 {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3Cpath d='M22 12A10 10 0 0 0 12 2v10z'/%3E%3C/svg%3E");
}

.icon-stats2 {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E");
}

/* ---------- Statistics (статистика) ---------- */
.icon-stats3 {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3Cline x1='12' y1='20' x2='12' y2='8'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3C/svg%3E");
}

.icon-referrals {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}

.icon-subaccounts {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='6' height='16' rx='1.5'/%3E%3Crect x='9' y='4' width='6' height='16' rx='1.5'/%3E%3Crect x='16' y='4' width='6' height='16' rx='1.5'/%3E%3Cline x1='4' y1='8' x2='6' y2='8'/%3E%3Cline x1='11' y1='8' x2='13' y2='8'/%3E%3Cline x1='18' y1='8' x2='20' y2='8'/%3E%3C/svg%3E");
}

.icon-calculator {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Ccircle cx='8' cy='10' r='1' fill='black'/%3E%3Ccircle cx='12' cy='10' r='1' fill='black'/%3E%3Ccircle cx='16' cy='10' r='1' fill='black'/%3E%3Ccircle cx='8' cy='14' r='1' fill='black'/%3E%3Ccircle cx='12' cy='14' r='1' fill='black'/%3E%3Ccircle cx='16' cy='14' r='1' fill='black'/%3E%3Ccircle cx='8' cy='18' r='1' fill='black'/%3E%3Ccircle cx='12' cy='18' r='1' fill='black'/%3E%3Ccircle cx='16' cy='18' r='1' fill='black'/%3E%3C/svg%3E");
}

.icon-news {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0V8h4'/%3E%3Cline x1='10' y1='7' x2='18' y2='7'/%3E%3Cline x1='10' y1='11' x2='18' y2='11'/%3E%3Cline x1='10' y1='15' x2='14' y2='15'/%3E%3C/svg%3E");
}

/* Утилиты цвета */
.icon-default { color: var(--icon-color); }
.icon-muted   { color: var(--icon-color-muted); }
.icon-primary { color: #0a6ebd; }
.icon-danger  { color: #e5484d; }
.icon-success { color: #10b981; }
.icon-warning { color: #f59e0b; }

/* Иконка API чуть крупнее остальных в футере */
.footer-link .icon-api {
    width: 18px;
    height: 18px;
}








/* ============================================================
   FloodCRM — Logo Pack
   Цветные: background-image
   Монохром: mask + currentColor
   ============================================================ */

.logo {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

.logo-mono {
  display: inline-block;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}


/* ---------- 1. Знак — светлая тема (96×80) ---------- */
.logo-mark-light {
  width: 96px; height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 80'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%230d5a99'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%2338BDF8' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M8 8 H46 M8 8 V56 M8 34 H36' stroke='url(%23a)' stroke-width='7'/%3E%3Cpath d='M16 66 C 28 60, 42 60, 54 66 S 72 72, 84 66' stroke='url(%23b)' stroke-width='7'/%3E%3Cpath d='M24 74 C 36 70, 48 70, 60 74' stroke='url(%23b)' stroke-width='4' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 2. Знак — тёмная тема (96×80) ---------- */
.logo-mark-dark {
  width: 96px; height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 80'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%230A6EBD'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%237DD3FC' stop-opacity='0.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M8 8 H46 M8 8 V56 M8 34 H36' stroke='url(%23a)' stroke-width='7'/%3E%3Cpath d='M16 66 C 28 60, 42 60, 54 66 S 72 72, 84 66' stroke='url(%23b)' stroke-width='7'/%3E%3Cpath d='M24 74 C 36 70, 48 70, 60 74' stroke='url(%23b)' stroke-width='4' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------- 3. Wordmark + волна — светлая тема (200×60) ---------- */
.logo-word-light {
  width: 100px; height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cdefs%3E%3ClinearGradient id='u' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%2338BDF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='6' y='40' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%230A6EBD'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%230F172A'%3ECRM%3C/tspan%3E%3C/text%3E%3Cpath d='M6 50 C 40 46, 75 46, 94 50 S 148 54, 182 50' fill='none' stroke='url(%23u)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 4. Wordmark + волна — тёмная тема (200×60) ---------- */
.logo-word-dark {
  width: 100px; height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cdefs%3E%3ClinearGradient id='u' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%237DD3FC'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='6' y='40' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%2338BDF8'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%23F1F5F9'%3ECRM%3C/tspan%3E%3C/text%3E%3Cpath d='M6 50 C 40 46, 75 46, 94 50 S 148 54, 182 50' fill='none' stroke='url(%23u)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ---------- 5. Wordmark минимальный — светлая (200×48) ---------- */
.logo-word-min-light {
  width: 200px; height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48'%3E%3Ctext x='6' y='36' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%230A6EBD'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%230F172A'%3ECRM%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* ---------- 6. Wordmark минимальный — тёмная (200×48) ---------- */
.logo-word-min-dark {
  width: 200px; height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48'%3E%3Ctext x='6' y='36' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%2338BDF8'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%23F1F5F9'%3ECRM%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}


/* ---------- 7. Полный (знак + текст) — светлая (300×80) ---------- */
.logo-full-light {
  width: 300px; height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%230d5a99'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%2338BDF8' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M10 8 H48 M10 8 V56 M10 34 H38' stroke='url(%23a)' stroke-width='7'/%3E%3Cpath d='M18 66 C 30 60, 44 60, 56 66 S 74 72, 86 66' stroke='url(%23b)' stroke-width='7'/%3E%3Cpath d='M26 74 C 38 70, 50 70, 62 74' stroke='url(%23b)' stroke-width='4' opacity='0.6'/%3E%3C/g%3E%3Ctext x='110' y='50' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%230A6EBD'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%230F172A'%3ECRM%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* ---------- 8. Полный — тёмная (300×80) ---------- */
.logo-full-dark {
  width: 300px; height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%230A6EBD'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%237DD3FC' stop-opacity='0.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M10 8 H48 M10 8 V56 M10 34 H38' stroke='url(%23a)' stroke-width='7'/%3E%3Cpath d='M18 66 C 30 60, 44 60, 56 66 S 74 72, 86 66' stroke='url(%23b)' stroke-width='7'/%3E%3Cpath d='M26 74 C 38 70, 50 70, 62 74' stroke='url(%23b)' stroke-width='4' opacity='0.6'/%3E%3C/g%3E%3Ctext x='110' y='50' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%2338BDF8'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%23F1F5F9'%3ECRM%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}


/* ---------- 9. Вертикальный — светлая (180×150) ---------- */
.logo-vertical-light {
  width: 180px; height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%230d5a99'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%2338BDF8' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke-linecap='round' fill='none' transform='translate(42,8)'%3E%3Cpath d='M8 8 H46 M8 8 V56 M8 34 H36' stroke='url(%23a)' stroke-width='7'/%3E%3Cpath d='M16 66 C 28 60, 42 60, 54 66 S 72 72, 84 66' stroke='url(%23b)' stroke-width='7'/%3E%3C/g%3E%3Ctext x='90' y='126' text-anchor='middle' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='28' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%230A6EBD'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%230F172A'%3ECRM%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* ---------- 10. Вертикальный — тёмная (180×150) ---------- */
.logo-vertical-dark {
  width: 180px; height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%230A6EBD'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%237DD3FC' stop-opacity='0.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke-linecap='round' fill='none' transform='translate(42,8)'%3E%3Cpath d='M8 8 H46 M8 8 V56 M8 34 H36' stroke='url(%23a)' stroke-width='7'/%3E%3Cpath d='M16 66 C 28 60, 42 60, 54 66 S 72 72, 84 66' stroke='url(%23b)' stroke-width='7'/%3E%3C/g%3E%3Ctext x='90' y='126' text-anchor='middle' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='28' letter-spacing='-0.03em'%3E%3Ctspan font-weight='800' fill='%2338BDF8'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300' fill='%23F1F5F9'%3ECRM%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}


/* ---------- 11. Favicon / app icon (64×64) ---------- */
.logo-favicon {
  width: 64px; height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230A6EBD'/%3E%3Cstop offset='1' stop-color='%2338BDF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Cg stroke='%23FFFFFF' stroke-linecap='round' fill='none'%3E%3Cpath d='M14 12 H36 M14 12 V42 M14 26 H32' stroke-width='5'/%3E%3Cpath d='M16 46 C 24 42, 34 42, 42 46 S 54 50, 58 46' stroke-width='5'/%3E%3Cpath d='M22 54 C 30 51, 38 51, 46 54' stroke-width='3.5' opacity='0.65'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------- 12. Монохром — знак (через mask) ---------- */
.logo-mark-mono {
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 80'%3E%3Cg stroke='black' stroke-linecap='round' fill='none'%3E%3Cpath d='M8 8 H46 M8 8 V56 M8 34 H36' stroke-width='7'/%3E%3Cpath d='M16 66 C 28 60, 42 60, 54 66 S 72 72, 84 66' stroke-width='7'/%3E%3Cpath d='M24 74 C 36 70, 48 70, 60 74' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  width: 96px; height: 80px;
}

/* ---------- 13. Монохром — wordmark (через mask) ---------- */
.logo-word-mono {
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Ctext x='6' y='40' font-family='Inter, -apple-system, Segoe UI, Arial, sans-serif' font-size='34' letter-spacing='-0.03em' fill='black'%3E%3Ctspan font-weight='800'%3EFlood%3C/tspan%3E%3Ctspan font-weight='300'%3ECRM%3C/tspan%3E%3C/text%3E%3Cpath d='M6 50 C 40 46, 75 46, 94 50 S 148 54, 182 50' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 200px; height: 60px;
}

/* ============================================================
   Авто-переключение темы (light/dark)
   ============================================================ */

/* ============================================================
   ЛОГОТИП
   Один <a>, внутри 4 <div> с фоновыми логотипами.
   Виден только один — через display.
   SVG-классы (.logo-word-light и т.д.) — из svg.css.
   ============================================================ */
.logo {
    display: block;
    align-items: center;
    height: 100%;
    text-decoration: none;
    transition: opacity var(--transition);
}

.logo:hover {
    opacity: 0.8;
}

.logo-item {
    display: none;                /* по умолчанию скрыты все */
    width: 100px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* ============================================================
   1. СВЕТЛАЯ ТЕМА + ДЕСКТОП (по умолчанию)
   ============================================================ */
.logo-word-light {
    display: block;
}

/* ============================================================
   2. ТЁМНАЯ ТЕМА + ДЕСКТОП
   ============================================================ */
[data-theme="dark"] .logo-word-light {
    display: none;
}

[data-theme="dark"] .logo-word-dark {
    display: block;
}

/* ============================================================
   3. СВЕТЛАЯ ТЕМА + МОБИЛЬНЫЙ (≤ 480px)
   ============================================================ */
@media (max-width: 380px) {
    .logo-item {
        width: 30px;
        height: 28px;
        background-position: center;
    }

    .logo-word-light,
    .logo-word-dark {
        display: none;
    }

    .logo-mark-light {
        display: block;
    }
}

/* ============================================================
   4. ТЁМНАЯ ТЕМА + МОБИЛЬНЫЙ (≤ 480px)
   ============================================================ */
@media (max-width: 380px) {
    [data-theme="dark"] .logo-mark-light {
        display: none;
    }
	[data-theme="dark"] .logo-word-dark {
        display: none;
    }

    [data-theme="dark"] .logo-mark-dark {
        display: block;
    }
}