/* 
 * Liquid Glass Design System
 * Apple-inspired glassmorphism theme (2025)
 * Поддержка темной и светлой темы
 */

:root {
    /* ========== RESPONSIVE BREAKPOINTS ========== */
    
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;

    /* iOS/Android вырезы; с meta viewport-fit=cover */
    --platform-safe-top: env(safe-area-inset-top, 0px);
    --platform-safe-right: env(safe-area-inset-right, 0px);
    --platform-safe-bottom: env(safe-area-inset-bottom, 0px);
    --platform-safe-left: env(safe-area-inset-left, 0px);
    
    /* ========== ЦВЕТОВАЯ ПАЛИТРА ========== */
    
    /* Основной фон с градиентом */
    --bg-gradient: linear-gradient(
        135deg,
        #1a1a2e 0%,
        #16213e 25%,
        #0f3460 50%,
        #1a1a2e 75%,
        #16213e 100%
    );
    
    /* Фоновые цвета */
    --bg-primary: #16213e;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #1e2a47;
    --bg-elevated: #253659;
    --bg-surface: #1e2a47;
    
    /* ========== GLASS MORPHISM ========== */
    
    /* Glass уровни прозрачности */
    --glass-tint-subtle: rgba(255, 255, 255, 0.03);
    --glass-tint-medium: rgba(255, 255, 255, 0.05);
    --glass-tint-strong: rgba(255, 255, 255, 0.08);
    
    /* Glass фоны с градиентом для глубины */
    --glass-bg-subtle: linear-gradient(
        135deg,
        rgba(32, 32, 48, 0.6) 0%,
        rgba(24, 24, 40, 0.8) 100%
    );
    --glass-bg-medium: linear-gradient(
        135deg,
        rgba(40, 40, 60, 0.7) 0%,
        rgba(30, 30, 50, 0.85) 100%
    );
    --glass-bg-strong: linear-gradient(
        135deg,
        rgba(45, 45, 70, 0.85) 0%,
        rgba(35, 35, 55, 0.95) 100%
    );
    
    /* Glass solid backgrounds (for backdrop-filter) */
    --glass-solid-subtle: rgba(28, 28, 46, 0.75);
    --glass-solid-medium: rgba(35, 35, 55, 0.85);
    --glass-solid-strong: rgba(40, 40, 64, 0.92);
    
    /* Blur уровни */
    --glass-blur-subtle: 20px;
    --glass-blur-medium: 40px;
    --glass-blur-strong: 60px;
    --glass-blur-ultra: 80px;
    
    /* Glass границы с свечением */
    --glass-border-subtle: rgba(255, 255, 255, 0.08);
    --glass-border-medium: rgba(255, 255, 255, 0.12);
    --glass-border-strong: rgba(255, 255, 255, 0.18);
    --glass-border-glow: rgba(255, 255, 255, 0.25);
    
    /* Внутреннее свечение (top highlight) */
    --glass-inner-glow-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-inner-glow-medium: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --glass-inner-glow-strong: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    
    /* Glass тени (многослойные для глубины) */
    --glass-shadow-subtle: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.1);
    --glass-shadow-medium: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
    --glass-shadow-strong: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.25);
    --glass-shadow-ultra: 
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* ========== АКЦЕНТНЫЕ ЦВЕТА ========== */
    
    /* Основной акцент (violet) */
    --accent: #99A6F9;
    --accent-hover: #8794F0;
    --accent-active: #7682E0;
    --accent-subtle: rgba(153, 166, 249, 0.15);
    --accent-glow: 0 0 24px rgba(153, 166, 249, 0.4);
    --accent-gradient: linear-gradient(258.06deg, #FAD17A 13.41%, #FF9A76 50.99%, #99A6F9 95.5%);
    
    /* Вторичный акцент (orange) */
    --accent-secondary: #FF885C;
    --accent-secondary-hover: #F2784A;
    --accent-secondary-subtle: rgba(255, 136, 92, 0.15);
    --accent-secondary-glow: 0 0 24px rgba(255, 136, 92, 0.4);
    
    /* Третичный акцент (фиолетовый) */
    --accent-tertiary: #8b5cf6;
    --accent-tertiary-subtle: rgba(139, 92, 246, 0.15);
    --accent-quaternary: #f59e0b;
    --accent-quaternary-subtle: rgba(245, 158, 11, 0.15);
    
    /* ========== ТЕКСТ ========== */
    
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-tertiary: rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.25);
    --text-inverse: #0f0f1a;
    
    /* ========== ГРАНИЦЫ ========== */
    
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-focus: var(--accent);

    /* ========== PLATFORM DATE PICKER ========== */

    --platform-date-picker-popup-bg: var(--glass-solid-strong);
    --platform-date-picker-popup-border: var(--border-default);
    --platform-date-picker-day-hover-bg: var(--glass-solid-medium);
    --platform-date-picker-day-hover-border: var(--border-default);
    --platform-date-picker-range-bg: var(--accent-subtle);
    --platform-date-picker-range-text: var(--accent-secondary);
    
    /* ========== СОСТОЯНИЯ ========== */
    
    --error: #f43f5e;
    --error-bg: rgba(244, 63, 94, 0.12);
    --error-border: rgba(244, 63, 94, 0.3);
    --error-glow: 0 0 16px rgba(244, 63, 94, 0.3);
    
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --warning-border: rgba(245, 158, 11, 0.3);
    
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.12);
    --success-border: rgba(16, 185, 129, 0.3);
    
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.12);
    --info-border: rgba(59, 130, 246, 0.3);
    
    /* ========== ТИПОГРАФИКА ========== */
    
    --font-sans: 'Onest', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
    
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    
    /* ========== ПРОСТРАНСТВО ========== */
    
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    
    /* ========== РАДИУСЫ ========== */
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
    
    /* ========== АНИМАЦИИ ========== */
    
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    /* Модальные окна: overlay + панель (glass-modal, modal.styles, кастомные .backdrop/.modal) */
    --modal-overlay-duration: 400ms;
    --modal-panel-duration: 560ms;
    --modal-panel-easing: var(--easing-smooth);
    /* Появление панели: мягкое замедление в конце */
    --modal-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --modal-popover-duration: 180ms;
    
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========== Z-INDEX ========== */
    
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
    --z-max: 9999;
    /* Совпадает с дефолтом platform-notification-manager */
    --z-notification-panel: 30000;
    
    /* ========== РАЗМЕРЫ КОМПОНЕНТОВ ========== */
    
    --navbar-width: 380px;
    --navbar-collapsed-width: 72px;
    --header-height: 64px;
    --input-height: 48px;
    --button-height: 44px;
    --icon-size-sm: 18px;
    --icon-size-md: 22px;
    --icon-size-lg: 28px;
    
    /* ========== СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ ========== */
    
    /* Hover glow для интерактивных элементов */
    --hover-glow: 0 0 0 4px rgba(153, 166, 249, 0.15);
    --focus-ring: 0 0 0 3px rgba(153, 166, 249, 0.4);

    /* ========== PLATFORM BUTTON TOKENS ========== */

    --btn-radius: 22px;
    --btn-padding: 8px 24px;
    --btn-font-size: 16px;
    --btn-line-height: 20px;
    --btn-font-weight: 400;

    --platform-btn-primary-bg: var(--accent);
    --platform-btn-primary-bg-hover: var(--accent-hover);
    --platform-btn-primary-text: #ffffff;
    --platform-btn-primary-border: var(--accent);
    --platform-btn-primary-border-hover: var(--accent-hover);
    --platform-btn-primary-shadow: none;
    --platform-btn-primary-shadow-hover: 0 0 10px rgba(153, 166, 249, 0.6);

    --platform-btn-accent-bg: var(--accent-secondary);
    --platform-btn-accent-bg-hover: var(--accent-secondary-hover);
    --platform-btn-accent-text: #ffffff;
    --platform-btn-accent-border: var(--accent-secondary);
    --platform-btn-accent-border-hover: var(--accent-secondary-hover);
    --platform-btn-accent-shadow: none;
    --platform-btn-accent-shadow-hover: 0 0 10px rgba(255, 136, 92, 0.6);

    --platform-btn-secondary-bg: rgba(153, 166, 249, 0.15);
    --platform-btn-secondary-bg-hover: rgba(153, 166, 249, 0.1);
    --platform-btn-secondary-text: var(--accent);
    --platform-btn-secondary-border: transparent;
    --platform-btn-secondary-border-hover: transparent;
    --platform-btn-secondary-shadow: none;
    --platform-btn-secondary-shadow-hover: 0 0 10px rgba(153, 166, 249, 0.2);

    --platform-btn-accent-secondary-bg: rgba(255, 136, 92, 0.15);
    --platform-btn-accent-secondary-bg-hover: rgba(255, 136, 92, 0.1);
    --platform-btn-accent-secondary-text: #FF9A76;
    --platform-btn-accent-secondary-shadow-hover: 0 0 10px rgba(255, 136, 92, 0.2);

    /* ========== CRM SEMANTIC TOKENS ========== */

    --crm-surface: var(--glass-solid-medium);
    --crm-surface-muted: var(--glass-solid-subtle);
    --crm-surface-elevated: var(--glass-solid-strong);
    --crm-surface-tint: var(--glass-tint-subtle);
    --crm-surface-tint-strong: var(--glass-tint-medium);

    --crm-stroke: var(--glass-border-subtle);
    --crm-stroke-strong: var(--glass-border-medium);

    --crm-selected-bg: rgba(153, 166, 249, 0.2);
    --crm-selected-stroke: var(--crm-button-primary-bg);
    --crm-selected-text: var(--crm-button-primary-bg);

    --crm-info-bg: rgba(59, 130, 246, 0.12);
    --crm-info-stroke: rgba(59, 130, 246, 0.28);
    --crm-info-text: #60a5fa;

    --crm-danger-bg: rgba(244, 63, 94, 0.12);
    --crm-danger-stroke: rgba(244, 63, 94, 0.28);

    --crm-nav-notes-gradient: linear-gradient(145deg, #ffd60a 0%, #ff9500 100%);
    --crm-nav-notes-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);

    --crm-nav-entities-gradient: linear-gradient(145deg, #5ac8fa 0%, #007aff 100%);
    --crm-nav-entities-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);

    --crm-nav-graph-gradient: linear-gradient(145deg, #af52de 0%, #5856d6 100%);
    --crm-nav-graph-shadow: 0 2px 8px rgba(88, 86, 214, 0.3);

    --crm-nav-tasks-gradient: linear-gradient(145deg, #34c759 0%, #30d158 100%);
    --crm-nav-tasks-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);

    --crm-nav-calendar-gradient: linear-gradient(145deg, #ff3b30 0%, #ff453a 100%);
    --crm-nav-calendar-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);

    --crm-daily-notes-cta-bg: #8f9cf6;
    --crm-daily-notes-cta-hover: #7f8eec;
    --crm-button-primary-bg: var(--platform-btn-primary-bg);
    --crm-button-primary-hover: var(--platform-btn-primary-bg-hover);
    --crm-button-primary-text: var(--platform-btn-primary-text);
    --crm-button-secondary-bg: var(--platform-btn-accent-bg);
    --crm-button-secondary-hover: var(--platform-btn-accent-bg-hover);
    --crm-button-secondary-text: var(--platform-btn-accent-text);

    --crm-main-gradient: var(--accent-gradient);
    --crm-summary-bg: rgba(95, 101, 150, 0.26);
    --crm-summary-stroke: rgba(136, 145, 204, 0.42);
    --crm-summary-title-gradient: var(--crm-main-gradient);
    --crm-summary-meta: rgba(255, 255, 255, 0.58);
    --crm-summary-chip-blue-bg: rgba(126, 142, 255, 0.25);
    --crm-summary-chip-cyan-bg: rgba(117, 219, 246, 0.28);
    --crm-summary-chip-orange-bg: rgba(255, 171, 120, 0.3);
    --crm-summary-chip-rose-bg: rgba(250, 176, 187, 0.32);
    
    /* ========== SYNC SEMANTIC TOKENS ========== */

    --sync-bubble-own-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.18) 0%, rgba(255, 136, 92, 0.10) 100%);
    --sync-bubble-own-border: rgba(153, 166, 249, 0.30);
    --sync-bubble-other-bg: linear-gradient(135deg, rgba(147, 197, 253, 0.22) 0%, rgba(96, 165, 250, 0.14) 100%);
    --sync-bubble-other-border: rgba(96, 165, 250, 0.24);
    --sync-bubble-radius: var(--radius-md);
    --sync-bubble-radius-grouped: 6px;
    --sync-header-blur: var(--glass-blur-strong);
    --sync-composer-bg: var(--glass-solid-subtle);
    --sync-video-radius: var(--radius-lg);
    --sync-active-row-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.14) 0%, rgba(255, 136, 92, 0.08) 100%);

    /* Shimmer эффект для загрузки */
    --shimmer-gradient: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

/* ========== СВЕТЛАЯ ТЕМА ========== */

[data-theme="light"] {
    /* Фоновые цвета */
    --bg-gradient: linear-gradient(
        135deg,
        #f8fafc 0%,
        #e2e8f0 25%,
        #f1f5f9 50%,
        #e2e8f0 75%,
        #f8fafc 100%
    );
    
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --bg-elevated: #ffffff;
    --bg-surface: #ffffff;
    
    /* Glass для светлой темы */
    --glass-tint-subtle: rgba(15, 23, 42, 0.02);
    --glass-tint-medium: rgba(15, 23, 42, 0.04);
    --glass-tint-strong: rgba(15, 23, 42, 0.06);
    
    --glass-bg-subtle: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(248, 250, 252, 0.85) 100%
    );
    --glass-bg-medium: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(248, 250, 252, 0.92) 100%
    );
    --glass-bg-strong: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(248, 250, 252, 0.98) 100%
    );
    
    --glass-solid-subtle: rgba(255, 255, 255, 0.8);
    --glass-solid-medium: rgba(255, 255, 255, 0.9);
    --glass-solid-strong: rgba(255, 255, 255, 0.96);
    
    --glass-border-subtle: rgba(15, 23, 42, 0.06);
    --glass-border-medium: rgba(15, 23, 42, 0.1);
    --glass-border-strong: rgba(15, 23, 42, 0.15);
    --glass-border-glow: rgba(15, 23, 42, 0.2);
    
    --glass-inner-glow-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --glass-inner-glow-medium: inset 0 1px 0 rgba(255, 255, 255, 1);
    --glass-inner-glow-strong: inset 0 2px 0 rgba(255, 255, 255, 1);
    
    --glass-shadow-subtle: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04);
    --glass-shadow-medium: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-shadow-strong: 
        0 16px 48px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.06);
    --glass-shadow-ultra: 
        0 24px 80px rgba(0, 0, 0, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.08);
    
    /* Текст для светлой темы */
    --text-primary: rgba(15, 23, 42, 0.95);
    --text-secondary: rgba(15, 23, 42, 0.65);
    --text-tertiary: rgba(15, 23, 42, 0.45);
    --text-disabled: rgba(15, 23, 42, 0.25);
    --text-inverse: #ffffff;
    
    /* Границы для светлой темы */
    --border-subtle: rgba(15, 23, 42, 0.06);
    --border-default: rgba(15, 23, 42, 0.1);
    --border-strong: rgba(15, 23, 42, 0.15);

    --platform-date-picker-popup-bg: var(--glass-solid-strong);
    --platform-date-picker-popup-border: var(--border-default);
    --platform-date-picker-day-hover-bg: var(--glass-solid-medium);
    --platform-date-picker-day-hover-border: var(--border-default);
    --platform-date-picker-range-bg: var(--accent-subtle);
    --platform-date-picker-range-text: var(--accent-secondary);
    
    /* Акценты для светлой темы */
    --accent: #8794F0;
    --accent-hover: #99A6F9;
    --accent-subtle: rgba(135, 148, 240, 0.12);
    --accent-glow: 0 0 24px rgba(135, 148, 240, 0.25);
    --accent-secondary: #F2784A;
    --accent-secondary-hover: #FF885C;
    --accent-secondary-subtle: rgba(242, 120, 74, 0.12);
    --accent-quaternary-subtle: rgba(245, 158, 11, 0.12);
    
    /* Sync semantic tokens (light) */
    --sync-bubble-own-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.22) 0%, rgba(135, 148, 240, 0.14) 100%);
    --sync-bubble-own-border: rgba(135, 148, 240, 0.25);
    --sync-bubble-other-bg: linear-gradient(135deg, rgba(219, 234, 254, 0.85) 0%, rgba(191, 219, 254, 0.65) 100%);
    --sync-bubble-other-border: rgba(59, 130, 246, 0.22);
    --sync-composer-bg: rgba(255, 255, 255, 0.85);
    --sync-active-row-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.15) 0%, rgba(135, 148, 240, 0.08) 100%);

    /* Shimmer для светлой темы */
    --shimmer-gradient: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.04) 50%,
        transparent 100%
    );

    --crm-surface: var(--glass-solid-medium);
    --crm-surface-muted: var(--glass-solid-subtle);
    --crm-surface-elevated: var(--glass-solid-strong);
    --crm-surface-tint: var(--glass-tint-subtle);
    --crm-surface-tint-strong: var(--glass-tint-medium);

    --crm-stroke: var(--glass-border-subtle);
    --crm-stroke-strong: var(--glass-border-medium);

    --crm-selected-bg: rgba(153, 166, 249, 0.26);
    --crm-selected-stroke: var(--crm-button-primary-bg);
    --crm-selected-text: #6f7ee8;

    --crm-info-bg: rgba(59, 130, 246, 0.1);
    --crm-info-stroke: rgba(59, 130, 246, 0.22);
    --crm-info-text: #2563eb;

    --crm-danger-bg: rgba(244, 63, 94, 0.08);
    --crm-danger-stroke: rgba(244, 63, 94, 0.2);

    --crm-nav-notes-gradient: linear-gradient(145deg, #facc15 0%, #f59e0b 100%);
    --crm-nav-notes-shadow: 0 2px 8px rgba(245, 158, 11, 0.28);

    --crm-nav-entities-gradient: linear-gradient(145deg, #38bdf8 0%, #3b82f6 100%);
    --crm-nav-entities-shadow: 0 2px 8px rgba(59, 130, 246, 0.28);

    --crm-nav-graph-gradient: linear-gradient(145deg, #a78bfa 0%, #6366f1 100%);
    --crm-nav-graph-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);

    --crm-nav-tasks-gradient: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    --crm-nav-tasks-shadow: 0 2px 8px rgba(34, 197, 94, 0.28);

    --crm-nav-calendar-gradient: linear-gradient(145deg, #f87171 0%, #ef4444 100%);
    --crm-nav-calendar-shadow: 0 2px 8px rgba(239, 68, 68, 0.28);

    --crm-daily-notes-cta-bg: #8f9cf6;
    --crm-daily-notes-cta-hover: #7f8eec;
    --crm-button-primary-bg: var(--platform-btn-primary-bg);
    --crm-button-primary-hover: var(--platform-btn-primary-bg-hover);
    --crm-button-primary-text: var(--platform-btn-primary-text);
    --crm-button-secondary-bg: var(--platform-btn-accent-bg);
    --crm-button-secondary-hover: var(--platform-btn-accent-bg-hover);
    --crm-button-secondary-text: var(--platform-btn-accent-text);

    --crm-main-gradient: var(--accent-gradient);
    --crm-summary-bg: rgba(174, 180, 224, 0.28);
    --crm-summary-stroke: rgba(141, 149, 205, 0.45);
    --crm-summary-title-gradient: var(--crm-main-gradient);
    --crm-summary-meta: rgba(15, 23, 42, 0.45);
    --crm-summary-chip-blue-bg: rgba(126, 142, 255, 0.25);
    --crm-summary-chip-cyan-bg: rgba(117, 219, 246, 0.32);
    --crm-summary-chip-orange-bg: rgba(255, 171, 120, 0.35);
    --crm-summary-chip-rose-bg: rgba(250, 176, 187, 0.38);
}

/* ========== Office / Documents service palette ========== */
:root {
    --documents-gradient: linear-gradient(105deg, #3ec9d8 0%, #6cb1e1 42%, #737ce9 100%);
    --documents-gradient-hover: linear-gradient(105deg, #48d4e2 0%, #78b9ea 42%, #828df0 100%);
    --documents-selected-bg: #dff3f9;
    --documents-selected-stroke: rgba(120, 127, 246, 0.38);
    --documents-selected-text: #4659b8;
    --documents-surface-muted: #eef8fc;
    --documents-stroke: rgba(100, 170, 215, 0.45);
    --documents-link-hover: #3585c4;
    --documents-btn-shadow: 0 2px 14px rgba(70, 89, 184, 0.22);
    --documents-btn-shadow-hover: 0 4px 20px rgba(70, 89, 184, 0.32);
}

/* ========== УТИЛИТЫ ========== */

/* Glass панели */
.glass-subtle {
    background: var(--glass-solid-subtle);
    backdrop-filter: blur(var(--glass-blur-subtle));
    -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--glass-shadow-subtle), var(--glass-inner-glow-subtle);
}

.glass-medium {
    background: var(--glass-solid-medium);
    backdrop-filter: blur(var(--glass-blur-medium));
    -webkit-backdrop-filter: blur(var(--glass-blur-medium));
    border: 1px solid var(--glass-border-medium);
    box-shadow: var(--glass-shadow-medium), var(--glass-inner-glow-medium);
}

.glass-strong {
    background: var(--glass-solid-strong);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-shadow-strong), var(--glass-inner-glow-strong);
}

/* Hover эффект для glass элементов */
.glass-interactive {
    transition: all var(--duration-normal) var(--easing-default);
}

.glass-interactive:hover {
    border-color: var(--glass-border-glow);
    box-shadow: var(--glass-shadow-medium), var(--glass-inner-glow-medium), var(--hover-glow);
    transform: translateY(-1px);
}

/* Accent градиентные кнопки */
.gradient-accent {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(153, 166, 249, 0.3);
}

.gradient-accent:hover {
    box-shadow: 0 6px 24px rgba(153, 166, 249, 0.4);
    transform: translateY(-2px);
}