/* ═══════════════════════════════════════════════════════════════════════
   01 - SETTINGS
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   1.1. COLOR PRIMITIVES
   ============================================================ */

:root {
    /* ===== BRAND (Mint) ===== */
    --pr-color-mint: #3d9c8c;
    --pr-color-mint-hover: #4dac9c;
    --pr-color-mint-pressed: #2d8c7c;
    --pr-color-mint-dark: #2d7a6b;
    --pr-color-mint-light: rgba(61, 156, 140, 0.12);
    --pr-color-mint-alpha-5: rgba(61, 156, 140, 0.05);
    --pr-color-mint-alpha-10: rgba(61, 156, 140, 0.1);
    --pr-color-mint-alpha-20: rgba(61, 156, 140, 0.2);
    --pr-color-mint-alpha-30: rgba(61, 156, 140, 0.3);
    --pr-color-mint-alpha-40: rgba(61, 156, 140, 0.4);

    /* ===== SECONDARY (Navy) ===== */
    --pr-color-navy: #2c4a5e;
    --pr-color-navy-hover: #1f3a4a;
    --pr-color-navy-pressed: #152d3a;

    /* ===== GRAY SCALE ===== */
    --pr-color-gray-50: #f7f9f8;
    --pr-color-gray-100: #f0f3f1;
    --pr-color-gray-200: #e0e6e4;
    --pr-color-gray-300: #c8cecb;
    --pr-color-gray-400: #a8aeab;
    --pr-color-gray-500: #888e8b;
    --pr-color-gray-600: #5a6062;
    --pr-color-gray-700: #3a4850;
    --pr-color-gray-800: #1a2228;
    --pr-color-gray-900: #0e1418;

    /* ===== DARK THEME COLORS ===== */
    --pr-color-dark-bg: #0e161a;
    --pr-color-dark-surface: #182228;
    --pr-color-dark-surface-hover: #223238;
    --pr-color-dark-text-primary: #eef0ef;
    --pr-color-dark-text-secondary: #b0b8b6;
    --pr-color-dark-text-tertiary: #707a78;
    --pr-color-dark-border: #283238;
    --pr-color-dark-border-light: #384248;

    /* ===== LIGHT THEME COLORS ===== */
    --pr-color-light-bg: #f7f9f8;
    --pr-color-light-surface: #ffffff;
    --pr-color-light-surface-hover: #f0f3f1;
    --pr-color-light-text-primary: #1a2228;
    --pr-color-light-text-secondary: #3a4850;
    --pr-color-light-text-tertiary: #6a7880;
    --pr-color-light-border: #e0e6e4;

    /* ===== BASE (по умолчанию - LIGHT) ===== */
    --pr-color-bg: var(--pr-color-light-bg);
    --pr-color-surface: var(--pr-color-light-surface);
    --pr-color-surface-hover: var(--pr-color-light-surface-hover);
    --pr-color-text-primary: var(--pr-color-light-text-primary);
    --pr-color-text-secondary: var(--pr-color-light-text-secondary);
    --pr-color-text-tertiary: var(--pr-color-light-text-tertiary);
    --pr-color-border: var(--pr-color-light-border);

    /* ===== WHITE / BLACK ===== */
    --pr-color-white: #ffffff;
    --pr-color-black: #000000;

    /* ============================================================
       1.2. GRADIENTS
       ============================================================ */

    --pr-gradient-horizontal: linear-gradient(90deg, #3d9c8c, #4dac9c, #3d9c8c);
    --pr-gradient-vertical: linear-gradient(145deg, #f7f9f8 0%, #ffffff 100%);
    --pr-gradient-dark-vertical: linear-gradient(145deg, #182228 0%, #0e161a 100%);
    --pr-gradient-button: linear-gradient(135deg, #3d9c8c, #2d8c7c);
    --pr-gradient-button-hover: linear-gradient(135deg, #4dac9c, #3d9c8c);
    --pr-gradient-contacts: linear-gradient(145deg, #1a2228, #2a3840);
    --pr-gradient-sidebar: linear-gradient(145deg, #1a2228, #3a4850);
    --pr-gradient-glass: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7),
        rgba(255, 255, 255, 0.3)
    );
    --pr-gradient-glass-dark: linear-gradient(135deg, rgba(24, 34, 40, 0.7), rgba(14, 22, 26, 0.3));

    /* ===== PROGRESS BAR GRADIENT ===== */
    --pr-gradient-progress: linear-gradient(90deg, #3d9c8c, #4dac9c, #3d9c8c);

    /* ============================================================
       1.3. TYPOGRAPHY
       ============================================================ */

    --pr-font-family: 'Inter', system-ui, -apple-system, sans-serif;

    --pr-font-size-3xs: 0.625rem; /* 10px */
    --pr-font-size-2xs: 0.6875rem; /* 11px */
    --pr-font-size-xs: 0.75rem; /* 12px */
    --pr-font-size-sm: 0.875rem; /* 14px */
    --pr-font-size-md: 1rem; /* 16px */
    --pr-font-size-lg: 1.125rem; /* 18px */
    --pr-font-size-xl: 1.25rem; /* 20px */
    --pr-font-size-2xl: 1.5rem; /* 24px */
    --pr-font-size-3xl: 2rem; /* 32px */
    --pr-font-size-4xl: 2.5rem; /* 40px */
    --pr-font-size-5xl: 3rem; /* 48px */

    --pr-line-height-tight: 1.2;
    --pr-line-height-normal: 1.5;
    --pr-line-height-relaxed: 1.7;
    --pr-line-height-heading: 1.1;

    --pr-letter-spacing-tight: -0.02em;
    --pr-letter-spacing-normal: 0;
    --pr-letter-spacing-wide: 0.02em;

    /* ============================================================
       1.4. SPACING
       ============================================================ */

    --pr-space-3xs: 0.125rem; /* 2px */
    --pr-space-2xs: 0.25rem; /* 4px */
    --pr-space-xs: 0.375rem; /* 6px */
    --pr-space-sm: 0.5rem; /* 8px */
    --pr-space-md: 0.75rem; /* 12px */
    --pr-space-lg: 1rem; /* 16px */
    --pr-space-xl: 1.5rem; /* 24px */
    --pr-space-2xl: 2rem; /* 32px */
    --pr-space-3xl: 2.5rem; /* 40px */
    --pr-space-4xl: 3rem; /* 48px */
    --pr-space-5xl: 4rem; /* 64px */

    /* ============================================================
       1.5. RADIUS
       ============================================================ */

    --pr-radius-xs: 4px;
    --pr-radius-sm: 6px;
    --pr-radius-md: 10px;
    --pr-radius-lg: 16px;
    --pr-radius-xl: 20px;
    --pr-radius-2xl: 24px;
    --pr-radius-3xl: 32px;
    --pr-radius-full: 9999px;
    --pr-radius-input: 8px;
    --pr-radius-button: 10px;
    --pr-radius-card: 16px;
    --pr-radius-modal: 16px;

    /* ============================================================
       1.6. SHADOWS
       ============================================================ */

    --pr-shadow-xs: 0 1px 2px 0 rgba(26, 34, 40, 0.04);
    --pr-shadow-sm: 0 2px 8px -2px rgba(26, 34, 40, 0.06);
    --pr-shadow-md: 0 8px 24px -6px rgba(26, 34, 40, 0.1);
    --pr-shadow-lg: 0 16px 40px -8px rgba(26, 34, 40, 0.14);
    --pr-shadow-xl: 0 24px 56px -12px rgba(26, 34, 40, 0.18);
    --pr-shadow-2xl: 0 32px 72px -16px rgba(26, 34, 40, 0.24);

    --pr-shadow-glow-primary: 0 0 40px rgba(61, 156, 140, 0.18);
    --pr-shadow-glow-secondary: 0 0 40px rgba(61, 156, 140, 0.12);

    --pr-shadow-dark-sm: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    --pr-shadow-dark-md: 0 12px 28px -8px rgba(0, 0, 0, 0.25);
    --pr-shadow-dark-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.3);

    /* ============================================================
       1.7. MOTION
       ============================================================ */

    --pr-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --pr-ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --pr-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --pr-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    --pr-duration-fast: 150ms;
    --pr-duration-base: 250ms;
    --pr-duration-slow: 350ms;
    --pr-duration-slower: 500ms;

    /* ============================================================
       1.8. Z-INDEX
       ============================================================ */

    --pr-z-negative: -1;
    --pr-z-elevate: 1;
    --pr-z-dropdown: 10;
    --pr-z-sticky: 100;
    --pr-z-modal: 1000;
    --pr-z-toast: 500;
    --pr-z-tooltip: 600;

    /* ============================================================
       1.9. CONTAINER
       ============================================================ */

    --pr-container-width: min(1440px, 100% - 2rem);
    --pr-container-padding: clamp(1rem, 3vw, 2rem);

    /* ============================================================
       1.10. BREAKPOINTS - ЕДИНАЯ СИСТЕМА
       ============================================================ */

    --bp-mobile: 767px;
    --bp-tablet: 1023px;
    --bp-laptop: 1279px;
    --bp-desktop: 1280px;

    /*  ============================================================
        1.10.1. LANDSCAPE BREAKPOINTS
        ============================================================ */

    --bp-landscape-height: 500px; /* высота, при которой включается ландшафтный режим */
    --bp-landscape-width: 1024px; /* максимальная ширина для ландшафтного режима */

    /* ============================================================
       1.11. SECTION SIZING
       ============================================================ */

    --pr-hero-min-height: clamp(400px, 70vh, 800px);
    --pr-section-padding: clamp(30px, 8vh, 120px);
}

/* ============================================================
   1.12. LIGHT THEME (по умолчанию)
   ============================================================ */

:root {
    --theme-bg-page: var(--pr-color-light-bg);
    --theme-bg-surface: var(--pr-color-light-surface);
    --theme-bg-surface-hover: var(--pr-color-light-surface-hover);

    --theme-text-primary: var(--pr-color-light-text-primary);
    --theme-text-secondary: var(--pr-color-light-text-secondary);
    --theme-text-tertiary: var(--pr-color-light-text-tertiary);
    --theme-text-inverse: var(--pr-color-white);
    --theme-text-heading: var(--pr-color-light-text-primary);
    --theme-text-link: var(--pr-color-mint);
    --theme-text-link-hover: var(--pr-color-mint-hover);

    --theme-border-light: var(--pr-color-light-border);
    --theme-border-medium: var(--pr-color-gray-300);
    --theme-border-strong: var(--pr-color-gray-400);
    --theme-border-focus: var(--pr-color-mint);

    --theme-brand-primary: var(--pr-color-mint);
    --theme-brand-primary-hover: var(--pr-color-mint-hover);
    --theme-brand-primary-pressed: var(--pr-color-mint-pressed);
    --theme-brand-primary-light: var(--pr-color-mint-light);
    --theme-brand-primary-alpha-5: var(--pr-color-mint-alpha-5);
    --theme-brand-primary-alpha-10: var(--pr-color-mint-alpha-10);
    --theme-brand-primary-alpha-20: var(--pr-color-mint-alpha-20);
    --theme-brand-primary-alpha-30: var(--pr-color-mint-alpha-30);
    --theme-brand-primary-alpha-40: var(--pr-color-mint-alpha-40);

    --theme-brand-secondary: var(--pr-color-navy);
    --theme-brand-secondary-hover: var(--pr-color-navy-hover);
    --theme-brand-secondary-pressed: var(--pr-color-navy-pressed);

    --theme-accent-primary: var(--pr-color-mint);
    --theme-accent-primary-hover: var(--pr-color-mint-hover);

    --theme-status-success: #10b981;
    --theme-status-warning: #f59e0b;
    --theme-status-error: #dc3545;

    --theme-shadow-xs: var(--pr-shadow-xs);
    --theme-shadow-sm: var(--pr-shadow-sm);
    --theme-shadow-md: var(--pr-shadow-md);
    --theme-shadow-lg: var(--pr-shadow-lg);
    --theme-shadow-xl: var(--pr-shadow-xl);
    --theme-shadow-2xl: var(--pr-shadow-2xl);
    --theme-shadow-glow-primary: var(--pr-shadow-glow-primary);
    --theme-shadow-glow-secondary: var(--pr-shadow-glow-secondary);

    --theme-radius-xs: var(--pr-radius-xs);
    --theme-radius-sm: var(--pr-radius-sm);
    --theme-radius-md: var(--pr-radius-md);
    --theme-radius-lg: var(--pr-radius-lg);
    --theme-radius-xl: var(--pr-radius-xl);
    --theme-radius-2xl: var(--pr-radius-2xl);
    --theme-radius-3xl: var(--pr-radius-3xl);
    --theme-radius-full: var(--pr-radius-full);
    --theme-radius-input: var(--pr-radius-input);
    --theme-radius-button: var(--pr-radius-button);
    --theme-radius-card: var(--pr-radius-card);
    --theme-radius-modal: var(--pr-radius-modal);

    --theme-gradient-brand-horizontal: var(--pr-gradient-horizontal);
    --theme-gradient-brand-vertical: var(--pr-gradient-vertical);
    --theme-gradient-button: var(--pr-gradient-button);
    --theme-gradient-button-hover: var(--pr-gradient-button-hover);
    --theme-gradient-contacts: var(--pr-gradient-contacts);
    --theme-gradient-sidebar: var(--pr-gradient-sidebar);
    --theme-gradient-glass: var(--pr-gradient-glass);
    --theme-gradient-progress: var(--pr-gradient-progress);

    --theme-surface-card: var(--pr-color-light-surface);
    --theme-surface-card-hover: var(--pr-color-light-surface-hover);
    --theme-surface-modal: rgba(255, 255, 255, 0.9);
    --theme-surface-header: rgba(255, 255, 255, 0.85);
    --theme-surface-footer: var(--pr-color-gray-900);
    --theme-surface-overlay-modal: rgba(14, 22, 26, 0.4);

    --theme-header-shadow: 0 4px 20px rgba(26, 34, 40, 0.03);
}

/* ============================================================
   1.13. DARK THEME
   ============================================================ */

body.dark-theme {
    --theme-bg-page: var(--pr-color-dark-bg);
    --theme-bg-surface: var(--pr-color-dark-surface);
    --theme-bg-surface-hover: var(--pr-color-dark-surface-hover);

    --theme-text-primary: var(--pr-color-dark-text-primary);
    --theme-text-secondary: var(--pr-color-dark-text-secondary);
    --theme-text-tertiary: var(--pr-color-dark-text-tertiary);
    --theme-text-inverse: var(--pr-color-white);
    --theme-text-heading: var(--pr-color-dark-text-primary);
    --theme-text-link: var(--pr-color-mint);
    --theme-text-link-hover: var(--pr-color-mint-hover);

    --theme-border-light: var(--pr-color-dark-border);
    --theme-border-medium: var(--pr-color-dark-border-light);
    --theme-border-strong: var(--pr-color-dark-border-light);
    --theme-border-focus: var(--pr-color-mint);

    --theme-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --theme-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
    --theme-shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
    --theme-shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7);
    --theme-shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.8);
    --theme-shadow-2xl: 0 32px 72px -16px rgba(0, 0, 0, 0.9);

    --theme-shadow-glow-primary: 0 0 40px rgba(61, 156, 140, 0.2);
    --theme-shadow-glow-secondary: 0 0 40px rgba(61, 156, 140, 0.15);

    --theme-gradient-brand-vertical: var(--pr-gradient-dark-vertical);
    --theme-gradient-glass: var(--pr-gradient-glass-dark);
    --theme-gradient-progress: linear-gradient(90deg, #4dac9c, #5dbdac, #4dac9c);

    --theme-surface-card: var(--pr-color-dark-surface);
    --theme-surface-card-hover: var(--pr-color-dark-surface-hover);
    --theme-surface-modal: rgba(24, 34, 40, 0.9);
    --theme-surface-header: rgba(14, 22, 26, 0.9);
    --theme-surface-overlay-modal: rgba(14, 22, 26, 0.6);

    --theme-header-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   02 - GENERIC
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   2.1. RESET - универсальный сброс
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   2.2. DOCUMENT
   ============================================================ */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
    color-scheme: light dark;
    scrollbar-gutter: stable;
    height: 100%;
    background-color: transparent;
    interpolate-size: allow-keywords;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--pr-font-family);
    background: var(--theme-bg-page);
    color: var(--theme-text-primary);
    line-height: var(--pr-line-height-relaxed);
    transition:
        background-color var(--pr-duration-fast) var(--pr-ease-out-cubic),
        color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* ============================================================
   2.3. ACCESSIBILITY
   ============================================================ */

/* ===== Focus-visible ===== */
:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
    box-shadow: 0 0 0 4px var(--theme-brand-primary-alpha-20);
    transition: outline-color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ===== Visually Hidden ===== */
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* ===== Интерактивный минимум - 44px ===== */
button,
.btn,
.tool-tag,
.tools-badge,
.payment-badge,
.files-header-btn,
.theme-btn,
.carousel-arrow,
[role='button'],
a[href],
.modal-close,
.drop-zone,
.file-item button,
.tool-select,
.tool-tab,
.case-card:focus-within,
.service-card:focus-within {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   2.4. SELECTION
   ============================================================ */

::selection {
    background: var(--theme-brand-primary);
    color: var(--pr-color-white);
}

::-moz-selection {
    background: var(--theme-brand-primary);
    color: var(--pr-color-white);
}

/* ============================================================
   2.5. SCROLLBAR
   ============================================================ */

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--theme-bg-surface);
            border-radius: var(--theme-radius-full);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--theme-brand-primary);
            border-radius: var(--theme-radius-full);
        }
    }
}

/* ============================================================
   2.6. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn::before,
    .service-card::before,
    .case-card::before,
    .micro-tool::before {
        display: none !important;
    }

    .modal-content {
        animation: none !important;
    }

    .hero-photo:hover,
    .btn:hover,
    .service-card:hover,
    .case-card:hover {
        transform: none !important;
    }
}

/* ============================================================
   2.7. HIGH CONTRAST
   ============================================================ */

@media (prefers-contrast: more) {
    :root {
        --pr-color-mint: #1a3f5a;
        --pr-color-mint-hover: #1a3f5a;
    }

    .btn-outline {
        border-width: 2px;
    }

    .service-card,
    .case-card,
    .contacts-grid {
        border-width: 2px;
    }
}

/* ============================================================
   2.8. iOS FILL-AVAILABLE
   ============================================================ */

@supports (-webkit-touch-callout: none) {
    html,
    body {
        height: -webkit-fill-available;
    }

    body {
        min-height: -webkit-fill-available;
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1 0 auto;
        min-height: auto;
    }

    .header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    .footer {
        flex-shrink: 0;
        margin-top: auto;
    }
}

/* ============================================================
   2.9. PRINT
   ============================================================ */

@media print {
    .header,
    .footer,
    .modal,
    .tools-badge,
    .payment-badge,
    .files-header-btn,
    .theme-switch,
    .btn-outline,
    .service-tools,
    .contacts-form,
    .micro-tool,
    .carousel-controls,
    .carousel-indicator,
    .pdf-viewer-btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .container {
        max-width: 100%;
        padding: 0.5in;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    h1,
    h2,
    h3 {
        color: black;
        page-break-after: avoid;
    }

    .service-card,
    .case-card,
    .why-content,
    .contacts-grid {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
        background: white;
        color: black;
    }

    .cases-carousel {
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .cases-carousel__track {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        width: 100%;
    }

    .cases-carousel .case-card {
        width: auto !important;
        page-break-inside: avoid;
        background: white;
        color: black;
    }

    .contacts-grid {
        background: white;
        color: black;
        border: 2px solid #333;
    }

    .contact-item {
        border-bottom: 1px solid #eee;
    }

    .contact-item a {
        color: black;
    }

    .case-card {
        color: black;
    }

    .case-category {
        color: #e27c3e;
    }

    .case-meta {
        color: #666;
    }

    @page {
        margin: 2cm;
        size: A4;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   03 - ELEMENTS
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   3.1. HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: var(--pr-line-height-heading);
    color: var(--theme-text-heading);
    text-wrap: balance;
    letter-spacing: var(--pr-letter-spacing-tight);
    max-width: clamp(65ch, 75ch, 85ch);
}

h1 {
    font-size: clamp(var(--pr-font-size-3xl), 5vw, var(--pr-font-size-5xl));
    margin-bottom: var(--pr-space-xl);
    font-weight: 700;
}

h2 {
    font-size: clamp(var(--pr-font-size-2xl), 4vw, var(--pr-font-size-4xl));
    margin-bottom: var(--pr-space-lg);
}

h3 {
    font-size: clamp(var(--pr-font-size-xl), 3.5vw, var(--pr-font-size-3xl));
    margin-bottom: var(--pr-space-md);
}

h4 {
    font-size: clamp(var(--pr-font-size-lg), 3vw, var(--pr-font-size-2xl));
    margin-bottom: var(--pr-space-sm);
}

h5 {
    font-size: clamp(var(--pr-font-size-md), 2.5vw, var(--pr-font-size-xl));
    margin-bottom: var(--pr-space-sm);
}

h6 {
    font-size: clamp(var(--pr-font-size-sm), 2vw, var(--pr-font-size-lg));
    margin-bottom: var(--pr-space-sm);
}

/* ============================================================
   3.2. PARAGRAPHS
   ============================================================ */

p {
    margin-bottom: var(--pr-space-md);
    color: var(--theme-text-secondary);
    text-wrap: pretty;
    max-width: clamp(65ch, 75ch, 85ch);
    line-height: var(--pr-line-height-relaxed);
    letter-spacing: 0.01em;
}

/* Исключение для служебных страниц */
.privacy-content p,
.legal-content p,
.offline-card p {
    max-width: 100%;
}

/* ============================================================
   3.3. LINKS
   ============================================================ */

a {
    color: var(--theme-text-link);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-weight: 500;
}

a:hover {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

/* ============================================================
   3.4. BUTTONS
   ============================================================ */

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
    box-shadow: 0 0 0 4px var(--theme-brand-primary-alpha-20);
}

/* ============================================================
   3.5. FORM ELEMENTS
   ============================================================ */

input,
select,
textarea {
    font-family: var(--pr-font-family);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-normal);
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-input);
    padding: var(--pr-space-sm) var(--pr-space-md);
    background: var(--theme-bg-surface);
    color: var(--theme-text-primary);
    transition:
        border-color var(--pr-duration-fast) var(--pr-ease-out-cubic),
        box-shadow var(--pr-duration-fast) var(--pr-ease-out-cubic),
        background-color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    width: 100%;
    min-height: 44px;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--theme-border-strong);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--theme-border-focus);
    box-shadow: 0 0 0 4px var(--theme-brand-primary-alpha-20);
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--theme-bg-surface-hover);
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--theme-text-tertiary);
    opacity: 0.6;
}

/* ============================================================
   3.6. RANGE INPUT
   ============================================================ */

input[type='range'] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    padding: 0;
    min-height: 44px;
    border: none;
    border-radius: 0;
}

input[type='range']::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
    border: none;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
    margin-top: -8px;
    box-shadow: 0 2px 8px rgba(61, 156, 140, 0.3);
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

input[type='range']::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: var(--theme-brand-primary-hover);
    box-shadow: 0 4px 12px rgba(61, 156, 140, 0.4);
}

input[type='range']::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
    border: none;
}

input[type='range']::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

input[type='range']::-moz-range-thumb:hover {
    transform: scale(1.15);
    background: var(--theme-brand-primary-hover);
}

input[type='range']:focus {
    outline: none;
    box-shadow: none;
}

input[type='range']:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

/* ============================================================
   3.7. LISTS
   ============================================================ */

ul,
ol {
    list-style: none;
    padding-left: 0;
}

li {
    margin-bottom: var(--pr-space-xs);
}

/* ============================================================
   3.8. IMAGES
   ============================================================ */

img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}

/* ============================================================
   3.9. MEDIA - DARK THEME OVERRIDES
   ============================================================ */

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme input:hover,
body.dark-theme select:hover,
body.dark-theme textarea:hover {
    border-color: var(--pr-color-dark-border-light);
}

body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus {
    border-color: var(--theme-border-focus);
    box-shadow: 0 0 0 4px rgba(61, 156, 140, 0.2);
}

body.dark-theme input::placeholder,
body.dark-theme select::placeholder,
body.dark-theme textarea::placeholder {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme input[type='range']::-webkit-slider-runnable-track {
    background: var(--pr-color-dark-border);
}

body.dark-theme input[type='range']::-webkit-slider-thumb {
    background: var(--theme-brand-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-theme input[type='range']::-moz-range-track {
    background: var(--pr-color-dark-border);
}

body.dark-theme input[type='range']::-moz-range-thumb {
    background: var(--theme-brand-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   04 - OBJECTS
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   4.1. CONTAINER - ЕДИНЫЙ КОНТЕЙНЕР ДЛЯ ВСЕЙ СТРАНИЦЫ
   ============================================================ */

.container {
    container-type: inline-size;
    container-name: container;
    max-width: var(--pr-container-width);
    margin: 0 auto;
    padding: 0 var(--pr-container-padding);
    width: 100%;
    padding-left: max(var(--pr-container-padding), env(safe-area-inset-left));
    padding-right: max(var(--pr-container-padding), env(safe-area-inset-right));
}

/* ЦЕНТРИРОВАНИЕ ГЕРОЯ ТОЛЬКО ДЛЯ СТРАНИЦ УСЛУГ (БЕЗ .hero-grid) */
.hero:not(:has(.hero-grid)) .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

@media print {
    .container {
        max-width: 100%;
        padding: 0.5in;
    }
}

/* ============================================================
   4.2. BUTTON - ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ КНОПОК
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-sm);
    padding: var(--pr-space-md) var(--pr-space-xl);
    border-radius: var(--theme-radius-button);
    font-weight: 600;
    font-size: var(--pr-font-size-md);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    letter-spacing: 0.02em;
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
    isolation: isolate;
}

/* Световой эффект при наведении */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    translate: -100% 0;
    transition: translate var(--pr-duration-slower) var(--pr-ease-out-expo);
    pointer-events: none;
    z-index: var(--pr-z-negative);
}

.btn:hover::before {
    translate: 100% 0;
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--theme-brand-primary-alpha-20);
}

/* ===== btn-primary ===== */
.btn-primary {
    background: var(--theme-gradient-button);
    color: var(--theme-text-inverse);
    box-shadow: var(--theme-shadow-sm), var(--theme-shadow-glow-primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-primary:hover {
    background: var(--theme-gradient-button-hover);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-md), var(--theme-shadow-glow-primary);
}

.btn-primary:active {
    transform: translateY(0);
}

body.dark-theme .btn-primary {
    box-shadow:
        var(--theme-shadow-md),
        0 0 20px rgba(61, 156, 140, 0.2);
}

/* ===== btn-outline ===== */
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}

.btn-outline:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm);
}

body.dark-theme .btn-outline {
    border-color: var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}

body.dark-theme .btn-outline:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
}

/* ===== btn-block ===== */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* ===== btn-sm ===== */
.btn-sm {
    padding: var(--pr-space-sm) var(--pr-space-lg);
    font-size: var(--pr-font-size-sm);
    min-height: 36px;
}

/* ===== btn-lg ===== */
.btn-lg {
    padding: var(--pr-space-lg) var(--pr-space-2xl);
    font-size: var(--pr-font-size-lg);
}

/* ===== btn-icon ===== */
.btn-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--theme-radius-button);
    padding: 0;
    background: var(--theme-bg-surface);
    border: 1px solid var(--theme-border-medium);
    color: var(--theme-text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-width: 44px;
    min-height: 44px;
}

.btn-icon:hover {
    background: var(--theme-bg-surface-hover);
    color: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
    transform: scale(1.05);
}

body.dark-theme .btn-icon {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .btn-icon:hover {
    background: var(--pr-color-dark-surface-hover);
    color: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   4.3. BLUR - УНИФИЦИРОВАННЫЕ ЭФФЕКТЫ
   ============================================================ */

.blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.blur-xl {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ═══════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ по ГРУППАМ
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════════════
   5.1. ГРУППА 1: ГЛОБАЛЬНЫЕ (Media Queries)
   ============================================================ */

/* ============================================================
   5.1.1. HEADER - БАЗОВЫЕ СТИЛИ
   ============================================================ */

.header {
    padding: var(--pr-space-md) 0;
    background: var(--theme-surface-header);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: var(--pr-z-sticky);
    transition:
        transform var(--pr-duration-base) var(--pr-ease-out-expo),
        background var(--pr-duration-base) var(--pr-ease-out-expo),
        box-shadow var(--pr-duration-base) var(--pr-ease-out-expo);
    height: auto;
    min-height: 80px;
    width: 100%;
    box-shadow: var(--theme-header-shadow);
}

/* Декоративная линия */
.header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.3;
    pointer-events: none;
}

@supports (backdrop-filter: blur(16px)) {
    .header {
        background: var(--theme-surface-header);
    }
}

body.dark-theme .header {
    background: rgba(14, 22, 26, 0.9);
    border-bottom: 1px solid rgba(61, 156, 140, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@supports (backdrop-filter: blur(16px)) {
    body.dark-theme .header {
        background: rgba(14, 22, 26, 0.85);
    }
}

.header.header-hidden {
    transform: translateY(-100%);
}

/* ============================================================
   5.1.2. HEADER__INNER
   ============================================================ */

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pr-space-md);
}

/* ============================================================
   5.1.3. LOGO
   ============================================================ */

.logo {
    font-weight: 700;
    color: var(--pr-color-mint-dark);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: var(--pr-letter-spacing-tight);
    white-space: nowrap;
    max-width: 100%;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo:hover {
    color: var(--theme-brand-primary-hover);
}

.logo:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

body.dark-theme .logo {
    color: var(--pr-color-mint-dark);
}

body.dark-theme .logo:hover {
    color: var(--theme-brand-primary-hover);
}

/* ============================================================
   5.1.4. HEADER-ACTIONS
   ============================================================ */

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.header-actions > * {
    flex-shrink: 0;
}

/* ============================================================
   5.1.5. CITY-BADGE
   ============================================================ */

.city-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 16px;
    border-radius: var(--theme-radius-md);
    box-sizing: border-box;
    flex-shrink: 0;
    gap: 6px;
    min-width: 44px;
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--theme-border-light);
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
    box-shadow: var(--theme-shadow-xs);
    white-space: nowrap;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    cursor: default;
}

.city-badge:hover {
    border-color: var(--theme-brand-primary);
    transform: translateY(-1px);
    background: var(--theme-bg-surface-hover);
    box-shadow: var(--theme-shadow-sm);
}

.city-badge:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

body.dark-theme .city-badge {
    background: rgba(24, 34, 40, 0.7);
    border-color: rgba(61, 156, 140, 0.15);
    color: var(--pr-color-dark-text-primary);
}

.city-badge #currentTime {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(61, 156, 140, 0.15);
    font-weight: 400;
    color: var(--theme-text-tertiary);
    font-size: 12px;
}

body.dark-theme .city-badge #currentTime {
    border-left-color: rgba(61, 156, 140, 0.1);
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.1.6. THEME-SWITCH
   ============================================================ */

.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--theme-radius-md);
    padding: 3px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    gap: 2px;
    box-sizing: border-box;
    flex-shrink: 0;
}

body.dark-theme .theme-switch {
    background: rgba(24, 34, 40, 0.7);
    border-color: rgba(61, 156, 140, 0.15);
}

/* ============================================================
   5.1.7. THEME-BTN
   ============================================================ */

.theme-btn {
    border-radius: var(--theme-radius-sm);
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 14px;
    background: transparent;
    color: var(--theme-text-tertiary);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-btn i {
    font-size: 14px;
    line-height: 1;
}

.theme-btn.active {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-btn:hover:not(.active) {
    color: var(--theme-brand-primary);
    background: rgba(255, 255, 255, 0.5);
}

.theme-btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

body.dark-theme .theme-btn.active {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-theme .theme-btn:not(.active) {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .theme-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-brand-primary-hover);
}

/* ============================================================
   5.1.8. TOOLS-BADGE / FILES-HEADER-BTN / PAYMENT-BADGE
   ============================================================ */

.files-header-btn,
.tools-badge,
.payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 16px;
    border-radius: var(--theme-radius-md);
    box-sizing: border-box;
    flex-shrink: 0;
    gap: 6px;
    min-width: 44px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    position: relative;
    background: var(--theme-gradient-button);
    color: var(--theme-text-inverse);
    box-shadow: 0 2px 8px rgba(61, 156, 140, 0.2);
}

.files-header-btn {
    padding: 0 14px;
}

.tools-badge,
.payment-badge {
    padding: 0 16px;
}

.files-header-btn i,
.tools-badge i,
.payment-badge i {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.files-header-btn span:not(.files-count-badge),
.tools-badge span,
.payment-badge span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.files-header-btn:hover,
.tools-badge:hover,
.payment-badge:hover {
    background: var(--theme-gradient-button-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(61, 156, 140, 0.3);
}

.files-header-btn:active,
.tools-badge:active,
.payment-badge:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(61, 156, 140, 0.15);
}

.files-header-btn:focus-visible,
.tools-badge:focus-visible,
.payment-badge:focus-visible {
    outline: 2px solid var(--theme-brand-primary);
    outline-offset: 2px;
}

body.dark-theme .files-header-btn,
body.dark-theme .tools-badge,
body.dark-theme .payment-badge {
    background: var(--theme-gradient-button);
    color: var(--theme-text-inverse);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .files-header-btn:hover,
body.dark-theme .tools-badge:hover,
body.dark-theme .payment-badge:hover {
    background: var(--theme-gradient-button-hover);
    box-shadow: 0 4px 16px rgba(61, 156, 140, 0.2);
}

/* ============================================================
   5.1.9. FILES-COUNT-BADGE
   ============================================================ */

.files-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: var(--theme-radius-full);
    background: var(--theme-status-error);
    color: var(--theme-text-inverse);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--pr-color-white);
    line-height: 1;
    box-sizing: border-box;
}

body.dark-theme .files-count-badge {
    border-color: #1a1a1e;
}

/* ============================================================
   5.1.10. FOOTER
   ============================================================ */

.footer {
    background: var(--theme-surface-footer);
    padding: var(--pr-space-3xl) 0;
    margin-top: var(--pr-space-4xl);
    position: relative;
    border-top: 1px solid rgba(61, 156, 140, 0.08);
    flex-shrink: 0;
    width: 100%;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pr-space-lg);
}

/* ============================================================
   5.1.11. FOOTER-BRAND
   ============================================================ */

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    transition: opacity var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.footer-brand strong {
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(
        135deg,
        var(--theme-brand-primary),
        var(--theme-brand-primary-hover),
        var(--pr-color-mint)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(61, 156, 140, 0.1);
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

/* ===== ТРЕК (серый фон, статичный) ===== */
.footer-brand strong::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-xs);
    opacity: 0.2;
    transition: opacity var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

/* ===== ЗАПОЛНИТЕЛЬ (оригинальный градиент + эффект при наведении) ===== */
.footer-brand strong::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--theme-brand-primary) 20%,
        var(--pr-color-mint) 50%,
        var(--theme-brand-primary-hover) 80%,
        transparent 100%
    );
    border-radius: var(--theme-radius-xs);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
}

/* ===== HOVER - ЭФФЕКТ КАК В ОРИГИНАЛЕ ===== */
.footer-brand:hover strong::before {
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--theme-brand-primary) 0%,
        var(--pr-color-mint) 50%,
        var(--theme-brand-primary-hover) 100%
    );
    box-shadow: 0 0 20px rgba(61, 156, 140, 0.25);
}

.footer-brand:hover strong::after {
    opacity: 0.4;
}

.footer-brand:hover strong {
    text-shadow: 0 0 40px rgba(61, 156, 140, 0.2);
}

/* ===== СПАН (подпись) ===== */
.footer-brand span {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--theme-text-tertiary);
    letter-spacing: 0.04em;
    -webkit-text-fill-color: var(--theme-text-tertiary);
    padding-left: 2px;
    transition: all var(--pr-duration-base) var(--pr-ease-out-cubic);
    position: relative;
    display: inline-block;
}

.footer-brand span::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--theme-brand-primary), transparent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-brand:hover span {
    color: var(--theme-brand-primary);
    -webkit-text-fill-color: var(--theme-brand-primary);
    letter-spacing: 0.06em;
}

.footer-brand:hover span::before {
    opacity: 0.3;
    transform: scaleX(0.6);
}

/* ===== DARK THEME ===== */
body.dark-theme .footer-brand strong {
    text-shadow: 0 0 40px rgba(61, 156, 140, 0.15);
}

body.dark-theme .footer-brand span {
    color: var(--pr-color-dark-text-tertiary);
    -webkit-text-fill-color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .footer-brand:hover span {
    color: var(--theme-brand-primary);
    -webkit-text-fill-color: var(--theme-brand-primary);
}

body.dark-theme .footer-brand strong::after {
    background: var(--pr-color-dark-border);
}

body.dark-theme .footer-brand:hover strong::before {
    box-shadow: 0 0 30px rgba(61, 156, 140, 0.3);
}

/* ============================================================
   5.1.12. FOOTER-NAV
   ============================================================ */

.footer a {
    color: var(--theme-brand-primary-hover);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    padding: var(--pr-space-xs) var(--pr-space-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-xs);
    min-height: 44px;
    font-weight: 600;
}

.footer a:hover {
    color: var(--theme-brand-primary-hover);
    text-shadow: 0 0 30px rgba(61, 156, 140, 0.15);
}

.footer a:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

/* ============================================================
   5.1.13. COOKIE-BANNER
   ============================================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--pr-z-toast);
    background: var(--theme-surface-card);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 40px rgba(26, 34, 40, 0.08);
    padding: 16px 0;
    transform: translateY(100%);
    transition: transform var(--pr-duration-slower) cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.visible {
    transform: translateY(0);
}

body.dark-theme .cookie-banner {
    background: var(--pr-color-dark-surface);
    border-top-color: rgba(61, 156, 140, 0.08);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   5.1.14. COOKIE-BANNER__CONTENT
   ============================================================ */

.cookie-banner__content {
    max-width: var(--pr-container-width);
    margin: 0 auto;
    padding: 0 var(--pr-container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* ============================================================
   5.1.15. COOKIE-BANNER__TEXT
   ============================================================ */

.cookie-banner__text {
    flex: 1;
    min-width: 200px;
}

.cookie-banner__title {
    font-weight: 600;
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-heading);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.dark-theme .cookie-banner__title {
    color: var(--pr-color-dark-text-primary);
}

.cookie-banner__description {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-secondary);
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
}

body.dark-theme .cookie-banner__description {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.1.16. COOKIE-BANNER__LINK
   ============================================================ */

.cookie-banner__link {
    color: #2a7a6e;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.cookie-banner__link:hover {
    color: #1d5f54;
}

.cookie-banner__link:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

body.dark-theme .cookie-banner__link {
    color: #5dbfae;
}

body.dark-theme .cookie-banner__link:hover {
    color: #7acfc0;
}

/* ============================================================
   5.1.17. COOKIE-BANNER__ACTIONS
   ============================================================ */

.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cookie-banner__btn {
    padding: 8px 20px;
    border-radius: var(--theme-radius-button);
    font-size: var(--pr-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-expo);
    border: none;
    min-height: 40px;
    white-space: nowrap;
}

.cookie-banner__btn--accept {
    background: var(--theme-gradient-button);
    color: var(--theme-text-inverse);
    box-shadow: var(--theme-shadow-xs);
}

.cookie-banner__btn--accept:hover {
    background: var(--theme-gradient-button-hover);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm);
}

.cookie-banner__btn--decline {
    background: transparent;
    color: var(--theme-text-secondary);
    border: 1.5px solid var(--theme-border-medium);
}

.cookie-banner__btn--decline:hover {
    background: var(--theme-bg-surface-hover);
    color: var(--theme-text-primary);
    border-color: var(--theme-border-strong);
}

body.dark-theme .cookie-banner__btn--decline {
    color: var(--pr-color-dark-text-secondary);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .cookie-banner__btn--decline:hover {
    background: var(--pr-color-dark-surface-hover);
    color: var(--pr-color-dark-text-primary);
    border-color: var(--pr-color-dark-border-light);
}

/* ============================================================
   5.1.18. SCROLL-TOP-BTN
   ============================================================ */

.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: var(--theme-radius-button);
    background: var(--theme-surface-card);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--theme-text-secondary);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    box-shadow: var(--theme-shadow-sm);
    font-size: 1.5rem;
    z-index: var(--pr-z-tooltip);
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

.scroll-top-btn:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: var(--theme-shadow-md), var(--theme-shadow-glow-primary);
}

.scroll-top-btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

body.dark-theme .scroll-top-btn {
    background: var(--pr-color-dark-surface);
    border-color: rgba(61, 156, 140, 0.15);
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .scroll-top-btn:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   5.2. ГРУППА 2: ГЕРОЙ (Container Queries)
   ============================================================ */

/* ============================================================
   5.2.1. HERO
   ============================================================ */

.hero {
    padding: var(--pr-space-4xl) 0;
    background: var(--theme-gradient-brand-vertical);
    position: relative;
    isolation: isolate;
    min-height: var(--pr-hero-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero h1 {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero .hero-subtitle {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

body.dark-theme .hero {
    background: var(--theme-gradient-brand-vertical);
}

/* Декоративная линия внизу */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--theme-brand-primary-alpha-30),
        transparent
    );
    z-index: var(--pr-z-negative);
}

/* ============================================================
   5.2.2. HERO-GRID
   ============================================================ */

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--pr-space-3xl);
    align-items: center;
}

.hero-grid > div:first-child {
    max-width: 600px;
    justify-self: start;
}

/* ============================================================
   5.2.3. HERO-CONTENT
   ============================================================ */

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-md);
}

/* ============================================================
   5.2.4. HERO-STATUS-WRAPPER
   ============================================================ */

.hero-status-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--pr-space-xs);
}

/* ============================================================
   5.2.5. STATUS-BADGE
   ============================================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-xs);
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: var(--pr-space-2xs) var(--pr-space-md);
    border-radius: var(--theme-radius-md);
    font-size: var(--pr-font-size-xs);
    border: 1px solid var(--theme-border-light);
    color: var(--theme-text-secondary);
    box-shadow: var(--theme-shadow-xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.status-badge:hover {
    border-color: var(--theme-brand-primary);
    transform: translateY(-1px);
    background: var(--theme-bg-surface-hover);
}

body.dark-theme .status-badge {
    background: rgba(24, 34, 40, 0.7);
    border-color: rgba(61, 156, 140, 0.15);
    color: var(--pr-color-dark-text-primary);
}

.status-badge__icon {
    color: var(--theme-status-success);
    font-size: var(--pr-font-size-sm);
}

/* ============================================================
   5.2.6. HERO-TITLE
   ============================================================ */

.hero-title {
    font-size: var(--pr-font-size-5xl);
    font-weight: 700;
    line-height: var(--pr-line-height-heading);
    color: var(--theme-text-heading);
    letter-spacing: var(--pr-letter-spacing-tight);
    margin-bottom: var(--pr-space-sm);
}

/* ============================================================
   5.2.7. TRUST-LINK-WRAPPER
   ============================================================ */

.trust-link-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: var(--pr-space-sm);
    margin-bottom: var(--pr-space-md);
}

/* ============================================================
   5.2.8. TRUST-LINK
   ============================================================ */

.trust-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--theme-text-tertiary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--theme-radius-xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    cursor: pointer;
}

.trust-link i {
    color: var(--theme-brand-primary);
    font-size: 0.95rem;
}

.trust-link:hover {
    color: var(--theme-brand-primary);
    background: var(--theme-brand-primary-alpha-10);
    transform: translateY(-1px);
}

.trust-link:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

/* ============================================================
   5.2.9. HERO-NAV
   ============================================================ */

.hero-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 800px;
}

/* ============================================================
   5.2.10. HERO-DROPDOWNS
   ============================================================ */

.hero-dropdowns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 24px 0;
    width: 100%;
}

.hero-dropdowns .dropdown-wrapper {
    flex: 1 1 0; /* ← растягиваются равномерно */
    min-width: 160px;
    max-width: 220px;
}

.hero-dropdowns .dropdown-toggle {
    width: 100%;
}

/* ============================================================
   5.2.11. DROPDOWN-WRAPPER
   ============================================================ */

.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* ============================================================
   5.2.12. DROPDOWN-TOGGLE
   ============================================================ */

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: var(--pr-font-size-md);
    font-weight: 600;
    border-radius: var(--theme-radius-button);
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1.5px solid var(--theme-brand-primary);
    color: var(--theme-brand-primary);
    cursor: pointer;
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    min-width: 160px;
    justify-content: center;
    position: relative;
    z-index: calc(var(--pr-z-dropdown) + 1);
    white-space: nowrap;
    min-height: 48px;
}

.dropdown-toggle:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm), var(--theme-shadow-glow-primary);
}

.dropdown-toggle:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

.dropdown-toggle .bi-chevron-down {
    transition: transform var(--pr-duration-base) var(--pr-ease-out-expo);
    font-size: 0.8rem;
}

.dropdown-toggle.active .bi-chevron-down {
    transform: rotate(180deg);
}

.dropdown-toggle i:first-child {
    font-size: 1.1rem;
}

body.dark-theme .dropdown-toggle {
    background: rgba(24, 34, 40, 0.8);
    color: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
}

body.dark-theme .dropdown-toggle:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
}

/* ============================================================
   5.2.13. DROPDOWN-MENU
   ============================================================ */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--theme-surface-modal);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--theme-radius-lg);
    padding: 8px 0;
    border: 1px solid var(--theme-border-light);
    box-shadow: var(--theme-shadow-lg), var(--theme-shadow-glow-secondary);
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    z-index: var(--pr-z-dropdown);
    pointer-events: none;
    transform-origin: top left;
}

.dropdown-wrapper:hover .dropdown-menu,
.dropdown-wrapper.active .dropdown-menu,
.dropdown-wrapper:focus-within .dropdown-menu {
    z-index: calc(var(--pr-z-dropdown) + 5);
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--theme-text-primary);
    text-decoration: none;
    font-size: var(--pr-font-size-sm);
    font-weight: 500;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border-left: 3px solid transparent;
    min-height: 44px;
    background: transparent;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background: var(--theme-brand-primary-alpha-10);
    border-left-color: var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}

.dropdown-menu a:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: -3px;
}

.dropdown-menu[data-align='right'] {
    left: auto;
    right: 0;
    transform-origin: top right;
}

body.dark-theme .dropdown-menu {
    background: rgba(24, 34, 40, 0.95);
    border-color: rgba(61, 156, 140, 0.15);
    box-shadow: var(--theme-shadow-lg), var(--theme-shadow-glow-secondary);
}

body.dark-theme .dropdown-menu a {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .dropdown-menu a:hover,
body.dark-theme .dropdown-menu a:focus {
    background: rgba(61, 156, 140, 0.1);
    border-left-color: var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}

/* Клавиатурная навигация */
.dropdown-toggle:focus-visible + .dropdown-menu,
.dropdown-toggle:focus-visible ~ .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dropdown-wrapper.active .dropdown-menu {
    z-index: calc(var(--pr-z-dropdown) + 5);
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ============================================================
   5.2.14. HERO-ACTIONS
   ============================================================ */

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 40px 0;
    width: 100%;
}

.hero-actions .btn {
    flex: 1 1 0; /* ← растягиваются равномерно */
    min-width: 160px;
    max-width: 220px;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    font-size: var(--pr-font-size-md);
    font-weight: 600;
    border-radius: var(--theme-radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* ============================================================
   5.2.15. MICRO-TOOL
   ============================================================ */

.micro-tool {
    position: relative;
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--theme-radius-lg);
    padding: var(--pr-space-xl) var(--pr-space-2xl);
    margin-top: var(--pr-space-2xl);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 40px rgba(26, 34, 40, 0.08),
        0 2px 12px rgba(26, 34, 40, 0.04);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    overflow: hidden;
    isolation: isolate;
}

.micro-tool::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pr-space-2xl);
    right: var(--pr-space-2xl);
    height: 2px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.3;
    border-radius: var(--theme-radius-xs);
    z-index: var(--pr-z-negative);
    box-shadow: var(--theme-shadow-glow-primary);
}

.micro-tool:hover {
    box-shadow: var(--theme-shadow-xl), var(--theme-shadow-glow-accent);
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.4);
    background: var(--theme-bg-surface);
}

.micro-tool:focus-within {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-lg);
}

body.dark-theme .micro-tool {
    background: rgba(24, 34, 40, 0.7);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

body.dark-theme .micro-tool::before {
    background: var(--theme-gradient-brand-horizontal);
}

body.dark-theme .micro-tool:hover {
    background: rgba(34, 50, 56, 0.8);
}

/* ============================================================
   5.2.16. MICRO-TOOL__TITLE
   ============================================================ */

.micro-tool__title {
    margin-bottom: var(--pr-space-xs);
    font-size: var(--pr-font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    color: var(--theme-text-heading);
}

.micro-tool__title i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    background: var(--theme-brand-primary-alpha-10);
    padding: var(--pr-space-xs);
    border-radius: var(--theme-radius-full);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}

.micro-tool:hover .micro-tool__title i {
    background: var(--theme-brand-primary-alpha-20);
    transform: scale(1.1) rotate(5deg);
}

/* ============================================================
   5.2.17. MICRO-TOOL__SUBTITLE
   ============================================================ */

.micro-tool__subtitle {
    color: var(--theme-text-secondary);
    margin-bottom: var(--pr-space-lg);
    max-width: 90%;
    font-size: var(--pr-font-size-md);
}

body.dark-theme .micro-tool__subtitle {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.2.18. MICRO-TOOL-FORM
   ============================================================ */

.micro-tool-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pr-space-sm);
    width: 100%;
}

/* ✅ СБРАСЫВАЕМ margin-bottom у селекта */
.micro-tool-form .tool-select {
    flex: 1;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 40px 0 16px;
    box-sizing: border-box;
    margin-bottom: 0 !important; /* ← ГЛАВНЫЙ ФИКС! */
    vertical-align: middle;
    align-self: center;
}

.micro-tool-form .btn {
    flex: 0 0 auto;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 24px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    align-self: center;
    margin: 0 !important;
}

/* ============================================================
   5.2.19. TOOL-SELECT - ГЛОБАЛЬНЫЙ СТИЛЬ
   ============================================================ */

.tool-select {
    flex: 1;
    padding: var(--pr-space-md) var(--pr-space-lg);
    padding-right: 40px;
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-input);
    font-size: var(--pr-font-size-md);
    font-weight: 500;
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--theme-text-primary);
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 48px;

    /* ✅ Убираем браузерную стрелку */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* ✅ Кастомная стрелка (ПРАВИЛЬНАЯ) - с !important */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236a7880' d='M6 8L1 0h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
}

.tool-select:hover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface-hover);
}

.tool-select:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-color: var(--theme-brand-primary);
}

/* ✅ ТЁМНАЯ ТЕМА - СВЕТЛАЯ СТРЕЛКА (ТОЖЕ С !important) */
body.dark-theme .tool-select {
    background: rgba(24, 34, 40, 0.7);
    border-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707a78' d='M6 8L1 0h10z'/%3E%3C/svg%3E") !important;
    background-size: 12px 8px !important;
}

body.dark-theme .tool-select:hover {
    border-color: var(--theme-brand-primary);
    background: rgba(34, 50, 56, 0.8);
}

/* ============================================================
   5.2.20. MICRO-TOOL__FOOTER
   ============================================================ */

.micro-tool__footer {
    margin-top: var(--pr-space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pr-space-sm);
}

.micro-tool__footer .btn {
    min-height: 44px;
}

/* ============================================================
   5.2.21. HERO-PHOTO
   ============================================================ */

.hero-photo {
    width: 100%;
    max-width: 480px;
    justify-self: end;
    aspect-ratio: 1/1;
    border-radius: var(--theme-radius-xl);
    overflow: hidden;
    box-shadow: var(--theme-shadow-2xl), var(--theme-shadow-glow-primary);
    border: 1px solid var(--theme-border-inverse);
    transition:
        transform var(--pr-duration-base) var(--pr-ease-out-expo),
        box-shadow var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
}

.hero-photo:hover {
    transform: scale(1.02);
    box-shadow: var(--theme-shadow-2xl), var(--theme-shadow-glow-accent);
}

.hero-photo:focus-within {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--pr-duration-slow) var(--pr-ease-out-expo);
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-photo img:active {
    animation: spinY 1.9s var(--pr-ease-elastic);
}

.hero-photo:hover img {
    transform: scale(1.05);
}

.hero-photo img:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

@keyframes spinY {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    100% {
        transform: rotateY(360deg) scale(1);
    }
}

.logo-image-spin {
    animation: spinY 1.9s var(--pr-ease-elastic);
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo img:active {
        animation: none !important;
    }
    .logo-image-spin {
        animation: none !important;
    }
}

/* ============================================================
   5.3. ГРУППА 3: УСЛУГИ (Container Queries)
   ============================================================ */

/* ============================================================
   5.3.1. SERVICES-SECTION
   ============================================================ */

.services-section {
    padding: var(--pr-section-padding) 0;
}

/* ============================================================
   5.3.2. SERVICES-SECTION__HEADER
   ============================================================ */

.services-section__header {
    text-align: center;
    margin-bottom: var(--pr-space-3xl);
}

/* ============================================================
   5.3.3. SERVICES-SECTION__TITLE
   ============================================================ */

.services-section__title {
    font-size: var(--pr-font-size-4xl);
    margin-bottom: var(--pr-space-sm);
    color: var(--theme-text-heading);
}

/* ============================================================
   5.3.4. SERVICES-SECTION__SUBTITLE
   ============================================================ */

.services-section__subtitle {
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================================
   5.3.5. SERVICES-GRID
   ============================================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pr-space-lg);
    margin: var(--pr-space-3xl) 0;
}

/* ============================================================
   5.3.6. SERVICE-CARD
   ============================================================ */

.service-card {
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-card);
    box-shadow: var(--theme-shadow-sm);
    padding: var(--pr-space-xl);
    border: 1px solid var(--theme-border-light);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Декоративная линия сверху */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0;
    transition: opacity var(--pr-duration-base) var(--pr-ease-out-cubic);
}

/* Ховер-эффект */
.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--theme-brand-primary);
    box-shadow: var(--theme-shadow-md);
    background: var(--theme-surface-card-hover);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:focus-within {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-card);
}

body.dark-theme .service-card {
    background: var(--pr-color-dark-surface);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

body.dark-theme .service-card:hover {
    background: var(--pr-color-dark-surface-hover);
    border-color: var(--theme-brand-primary);
    box-shadow:
        0 12px 56px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(61, 156, 140, 0.08);
}

/* ============================================================
   5.3.7. SERVICE-ICON
   ============================================================ */

.service-icon {
    font-size: 2.5rem;
    margin-bottom: var(--pr-space-md);
    transition: transform var(--pr-duration-base) var(--pr-ease-out-expo);
    color: var(--theme-brand-primary);
}

.service-card:hover .service-icon {
    color: var(--theme-brand-primary-hover);
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

/* ============================================================
   5.3.8. SERVICE-TITLE
   ============================================================ */

.service-title {
    margin-bottom: var(--pr-space-sm);
    font-size: var(--pr-font-size-xl);
    font-weight: 600;
    line-height: var(--pr-line-height-heading);
    color: var(--theme-text-heading);
}

.service-title a {
    color: var(--theme-text-heading);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.service-title a:hover {
    color: var(--theme-brand-primary);
}

.service-title a:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

body.dark-theme .service-title {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .service-title a {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .service-title a:hover {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.3.9. SERVICE-DESCRIPTION
   ============================================================ */

.service-description {
    color: var(--theme-text-secondary);
    margin-bottom: var(--pr-space-md);
    flex: 1;
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
}

body.dark-theme .service-description {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.3.10. SERVICE-TOOLS
   ============================================================ */

.service-tools {
    margin-top: auto;
    display: flex;
    gap: var(--pr-space-xs);
    flex-wrap: wrap;
}

/* ============================================================
   5.3.11. TOOL-TAG
   ============================================================ */

.tool-tag {
    background: var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
    padding: var(--pr-space-xs) var(--pr-space-md);
    border-radius: var(--theme-radius-md);
    font-size: var(--pr-font-size-sm);
    cursor: pointer;
    border: 1px solid var(--theme-brand-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 44px;
    font-weight: 600;
    box-shadow: var(--theme-shadow-xs);
    text-decoration: none;
}

.tool-tag:hover {
    background: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(44, 74, 94, 0.3);
    border-color: var(--theme-brand-secondary-hover);
}

.tool-tag:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
}

body.dark-theme .tool-tag {
    background: var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-secondary);
}

body.dark-theme .tool-tag:hover {
    background: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-secondary-hover);
}

/* ============================================================
   5.3.12. GEO-NOTE
   ============================================================ */

.geo-note {
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-xs);
    margin-top: var(--pr-space-md);
    font-weight: 500;
}

body.dark-theme .geo-note {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.4. ГРУППА 4: КЕЙСЫ (Container Queries)
   ============================================================ */

/* ============================================================
   5.4.1. CASES-SECTION
   ============================================================ */

.cases-section {
    padding: var(--pr-section-padding) 0;
}

/* ============================================================
   5.4.2. CASES-SECTION__HEADER
   ============================================================ */

.cases-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pr-space-xl);
    flex-wrap: wrap;
    gap: var(--pr-space-md);
}

/* ============================================================
   5.4.3. CASES-SECTION__HEADER-LEFT
   ============================================================ */

.cases-section__header-left {
    flex: 1;
    min-width: 200px;
}

/* ============================================================
   5.4.4. CASES-SECTION__TITLE
   ============================================================ */

.cases-section__title {
    font-size: var(--pr-font-size-4xl);
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-heading);
}

/* ============================================================
   5.4.5. CASES-SECTION__SUBTITLE
   ============================================================ */

.cases-section__subtitle {
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-secondary);
}

/* ============================================================
   5.4.6. CASES-SECTION__FOOTER
   ============================================================ */

.cases-section__footer {
    text-align: center;
    margin-top: var(--pr-space-xl);
}

/* ============================================================
   5.4.7. CAROUSEL-CONTROLS
   ============================================================ */

.carousel-controls {
    display: flex;
    gap: var(--pr-space-xs);
    flex-shrink: 0;
}

/* ============================================================
   5.4.8. CAROUSEL-ARROW
   ============================================================ */

.carousel-arrow {
    width: 48px;
    height: 48px;
    border-radius: var(--theme-radius-button);
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--theme-border-light);
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    box-shadow: var(--theme-shadow-sm);
    font-size: var(--pr-font-size-lg);
    min-width: 48px;
    min-height: 48px;
}

.carousel-arrow:hover:not(:disabled) {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
    transform: scale(1.1);
    box-shadow: var(--theme-shadow-md), var(--theme-shadow-glow-primary);
}

.carousel-arrow:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

.carousel-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   5.4.9. CASES-CAROUSEL
   ============================================================ */

.cases-carousel {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-brand-primary) var(--theme-border-medium);
    padding-bottom: var(--pr-space-lg);
    margin: 0;
    padding-left: var(--pr-container-padding);
    padding-right: var(--pr-container-padding);
    scroll-snap-type: x mandatory;
}

/* Стилизация скроллбара */
.cases-carousel::-webkit-scrollbar {
    height: 8px;
}

.cases-carousel::-webkit-scrollbar-track {
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
}

.cases-carousel::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
    transition: background var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.cases-carousel::-webkit-scrollbar-thumb:hover {
    background: var(--theme-brand-primary-pressed);
}

/* Скрытие скроллбара на мобильных */
.cases-carousel {
    -ms-overflow-style: none;
}

@media (max-width: 767px) {
    .cases-carousel::-webkit-scrollbar {
        display: none;
    }
    .cases-carousel {
        scrollbar-width: none;
    }
}

/* ============================================================
   5.4.10. CASES-CAROUSEL__TRACK
   ============================================================ */

.cases-carousel__track {
    display: flex;
    gap: var(--pr-space-lg);
    width: max-content;
    min-width: 100%;
}

/* ============================================================
   5.4.11. CASE-CARD
   ============================================================ */

.case-card {
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-card);
    box-shadow: var(--theme-shadow-sm);
    padding: var(--pr-space-xl);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 380px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    width: 360px;
    flex-shrink: 0;
}

/* Декоративная линия сверху */
.case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0;
    transition: opacity var(--pr-duration-base) var(--pr-ease-out-cubic);
    box-shadow: var(--theme-shadow-glow-primary);
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--theme-shadow-md);
    border-color: var(--theme-brand-primary);
    background: var(--theme-surface-card-hover);
}

.case-card:hover::before {
    opacity: 1;
}

.case-card:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-card);
}

body.dark-theme .case-card {
    background: var(--pr-color-dark-surface);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .case-card:hover {
    border-color: var(--theme-brand-primary);
    background: var(--pr-color-dark-surface-hover);
    box-shadow:
        0 12px 56px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(61, 156, 140, 0.08);
}

/* ============================================================
   5.4.12. CASE-CATEGORY
   ============================================================ */

.case-category {
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
    color: var(--theme-text-heading);
    font-weight: 700;
    font-size: var(--pr-font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--pr-space-sm);
}

.case-category i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-md);
}

body.dark-theme .case-category {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.4.13. CASE-RESULT
   ============================================================ */

.case-result {
    font-size: var(--pr-font-size-3xl);
    font-weight: 700;
    color: var(--pr-color-mint-dark);
    margin: var(--pr-space-sm) 0 var(--pr-space-md);
    line-height: 1.2;
    word-break: break-word;
}

/* ============================================================
   5.4.14. CASE-TEXT
   ============================================================ */

.case-text {
    color: var(--theme-text-primary);
    margin-bottom: var(--pr-space-md);
    font-size: var(--pr-font-size-md);
    line-height: 1.6;
    flex: 1;
    font-weight: 450;
}

body.dark-theme .case-text {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.4.15. CASE-META
   ============================================================ */

.case-meta {
    margin: var(--pr-space-sm) 0;
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-2xs);
    font-weight: 500;
}

.case-meta span {
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
}

.case-meta i {
    color: var(--theme-brand-primary);
    width: 18px;
    font-size: var(--pr-font-size-md);
}

/* ============================================================
   5.4.16. PDF-VIEWER-BTN
   ============================================================ */

.pdf-viewer-btn {
    background: var(--theme-brand-secondary);
    border: 1px solid var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
    margin-top: var(--pr-space-md);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border-radius: var(--theme-radius-button);
    padding: var(--pr-space-xs) var(--pr-space-md);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    min-height: 40px;
    box-shadow: var(--theme-shadow-xs);
    text-decoration: none;
    font-size: var(--pr-font-size-sm);
}

.pdf-viewer-btn:hover {
    background: var(--theme-brand-secondary-hover);
    border-color: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm);
}

.pdf-viewer-btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

body.dark-theme .pdf-viewer-btn {
    background: var(--theme-brand-secondary);
    border-color: var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
}

body.dark-theme .pdf-viewer-btn:hover {
    background: var(--theme-brand-secondary-hover);
    border-color: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
}

/* ============================================================
   5.4.17. CAROUSEL-INDICATOR
   ============================================================ */

.carousel-indicator {
    display: flex;
    justify-content: center;
    gap: var(--pr-space-xs);
    margin-top: var(--pr-space-lg);
    flex-wrap: wrap;
    align-items: center;
}

/* ============================================================
   5.4.18. CAROUSEL-INDICATOR__ITEM
   ============================================================ */

.carousel-indicator__item {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: var(--theme-radius-full);
    background: var(--theme-border-strong);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    cursor: pointer;
    margin: 0 4px;
    display: inline-block;
}

/* Увеличенная область клика */
.carousel-indicator__item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.carousel-indicator__item:hover {
    background: var(--theme-text-tertiary);
}

.carousel-indicator__item:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

.carousel-indicator__item.active {
    width: 40px;
    border-radius: var(--theme-radius-full);
    background: var(--theme-gradient-brand-horizontal);
    cursor: default;
    box-shadow: var(--theme-shadow-glow-primary);
}

/* ============================================================
   5.5. ГРУППА 5: ПОЧЕМУ ВЫБИРАЮТ (Container Queries)
   ============================================================ */

/* ============================================================
   5.5.1. WHY-SECTION
   ============================================================ */

.why-section {
    padding: var(--pr-section-padding) 0;
}

/* ============================================================
   5.5.2. WHY-TITLE
   ============================================================ */

.why-title {
    font-size: var(--pr-font-size-4xl);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--pr-space-2xl);
    color: var(--theme-text-heading);
    line-height: var(--pr-line-height-heading);
}

/* ============================================================
   5.5.3. WHY-CONTENT
   ============================================================ */

.why-content {
    max-width: 900px;
    margin: 0 auto;
    font-size: var(--pr-font-size-lg);
    line-height: var(--pr-line-height-relaxed);
    color: var(--theme-text-secondary);
}

.why-content p {
    margin-bottom: var(--pr-space-lg);
}

.why-content p:last-child {
    margin-bottom: 0;
}

.why-content strong {
    color: var(--theme-text-primary);
    font-weight: 600;
}

.why-content a {
    color: var(--theme-text-link);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.why-content a:hover {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.dark-theme .why-content {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .why-content strong {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.6. ГРУППА 6: FAQ (Container Queries)
   ============================================================ */

/* ============================================================
   5.6.1. FAQ-SECTION
   ============================================================ */

.faq-section {
    padding: var(--pr-section-padding) 0;
}

/* ============================================================
   5.6.2. FAQ-SECTION__HEADER
   ============================================================ */

.faq-section__header {
    text-align: center;
    margin-bottom: var(--pr-space-2xl);
}

/* ============================================================
   5.6.3. FAQ-SECTION__TITLE
   ============================================================ */

.faq-section__title {
    font-size: var(--pr-font-size-4xl);
    margin-bottom: var(--pr-space-sm);
    color: var(--theme-text-heading);
}

/* ============================================================
   5.6.4. FAQ-SECTION__SUBTITLE
   ============================================================ */

.faq-section__subtitle {
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================================
   5.6.5. FAQ-GRID
   ============================================================ */

.faq-grid {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================================
   5.6.6. FAQ-ITEM
   ============================================================ */

.faq-item {
    border-bottom: 1px solid var(--theme-border-inverse);
    transition: border-color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item:hover {
    border-bottom-color: var(--theme-brand-primary);
}

.faq-item:focus-within {
    border-bottom-color: var(--theme-brand-primary);
}

body.dark-theme .faq-item {
    border-bottom-color: rgba(61, 156, 140, 0.08);
}

body.dark-theme .faq-item:hover {
    border-bottom-color: var(--theme-brand-primary);
}

/* ============================================================
   5.6.7. FAQ-QUESTION
   ============================================================ */

.faq-question {
    width: 100%;
    padding: var(--pr-space-lg) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pr-space-md);
    font-weight: 600;
    font-size: var(--pr-font-size-lg);
    cursor: pointer;
    min-height: 70px;
    text-align: left;
    background: none;
    border: none;
}

.faq-question button {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pr-space-md);
    color: var(--theme-text-heading);
    font-weight: 600;
    font-size: var(--pr-font-size-lg);
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.faq-question button > :nth-child(2) {
    flex: 1;
    text-align: left;
}

.faq-question button span {
    flex: 1;
    text-align: left;
}

.faq-question i:first-child,
.faq-question button i:first-child,
.faq-question span i:first-child {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    flex-shrink: 0;
}

.faq-question .bi-chevron-down,
.faq-question .bi-chevron-up,
.faq-question button .bi-chevron-down,
.faq-question button .bi-chevron-up {
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-xl);
    transition:
        transform var(--pr-duration-base) var(--pr-ease-out-expo),
        color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    flex-shrink: 0;
}

.faq-question[aria-expanded='true'] .bi-chevron-down {
    transform: rotate(180deg);
}

.faq-question:hover,
.faq-question button:hover {
    color: var(--theme-brand-primary);
}

.faq-question:hover i:first-child,
.faq-question button:hover i:first-child,
.faq-question span:hover i:first-child {
    color: var(--theme-brand-primary-hover);
}

.faq-question:hover .bi-chevron-down,
.faq-question:hover .bi-chevron-up,
.faq-question button:hover .bi-chevron-down,
.faq-question button:hover .bi-chevron-up {
    color: var(--theme-brand-primary);
}

.faq-question:focus-visible,
.faq-question button:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

body.dark-theme .faq-question,
body.dark-theme .faq-question button,
body.dark-theme .faq-question span,
body.dark-theme .faq-question button span {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .faq-question i:first-child,
body.dark-theme .faq-question button i:first-child,
body.dark-theme .faq-question span i:first-child {
    color: var(--theme-brand-primary);
}

body.dark-theme .faq-question .bi-chevron-down,
body.dark-theme .faq-question .bi-chevron-up,
body.dark-theme .faq-question button .bi-chevron-down,
body.dark-theme .faq-question button .bi-chevron-up {
    color: var(--theme-brand-primary);
}

body.dark-theme .faq-question:hover,
body.dark-theme .faq-question button:hover,
body.dark-theme .faq-question span:hover,
body.dark-theme .faq-question button span:hover {
    color: var(--theme-brand-primary);
}

body.dark-theme .faq-question:hover i:first-child,
body.dark-theme .faq-question button:hover i:first-child,
body.dark-theme .faq-question span:hover i:first-child {
    color: var(--theme-brand-primary-hover);
}

body.dark-theme .faq-question:hover .bi-chevron-down,
body.dark-theme .faq-question:hover .bi-chevron-up,
body.dark-theme .faq-question button:hover .bi-chevron-down,
body.dark-theme .faq-question button:hover .bi-chevron-up {
    color: var(--theme-brand-primary-hover);
}

/* ============================================================
   5.6.8. FAQ-ANSWER
   ============================================================ */

.faq-answer {
    padding: 0 0 var(--pr-space-lg) 0;
    color: var(--theme-text-secondary);
    line-height: var(--pr-line-height-relaxed);
    display: none;
    font-size: var(--pr-font-size-md);
    text-align: left;
}

.faq-answer.active {
    display: block;
    animation: faqFadeIn var(--pr-duration-base) var(--pr-ease-out-cubic);
}

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

.faq-answer a {
    color: var(--theme-text-link);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.faq-answer a:hover {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.dark-theme .faq-answer {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.7. ГРУППА 7: КОНТАКТЫ (Container Queries)
   ============================================================ */

/* ============================================================
   5.7.1. CONTACTS-SECTION
   ============================================================ */

.contacts-section {
    padding: var(--pr-section-padding) 0;
}

/* ============================================================
   5.7.2. CONTACTS-GRID
   ============================================================ */

.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pr-space-2xl);
    background: var(--theme-gradient-contacts);
    color: var(--theme-text-inverse);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-3xl);
    margin: var(--pr-space-2xl) 0;
    position: relative;
    box-shadow: 0 8px 48px rgba(26, 34, 40, 0.2);
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}

.contacts-grid > * {
    position: relative;
    z-index: var(--pr-z-elevate);
}

.contacts-grid:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(26, 34, 40, 0.04);
}

body.dark-theme .contacts-grid {
    isolation: isolate;
}

body.dark-theme .contacts-grid::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--theme-radius-card);
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0;
    transition: opacity var(--pr-duration-base) var(--pr-ease-out-expo);
    z-index: var(--pr-z-negative);
    filter: blur(6px);
}

body.dark-theme .contacts-grid:hover {
    border-color: rgba(61, 156, 140, 0.25);
    transform: translateY(-3px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(61, 156, 140, 0.04);
}

body.dark-theme .contacts-grid:hover::before {
    opacity: 0.2;
}

/* ============================================================
   5.7.3. CONTACTS-INFO
   ============================================================ */

.contacts-info {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
}

/* ============================================================
   5.7.4. CONTACTS-INFO__TITLE
   ============================================================ */

.contacts-info__title {
    font-size: var(--pr-font-size-3xl);
    color: var(--theme-text-inverse);
    margin-bottom: var(--pr-space-md);
}

/* ============================================================
   5.7.5. CONTACTS-INFO__ADDRESS
   ============================================================ */

.contacts-info__address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-xs);
}

/* ============================================================
   5.7.6. CONTACT-ITEM
   ============================================================ */

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    padding: var(--pr-space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.contact-item:hover {
    border-bottom-color: var(--theme-brand-primary);
    transform: translateX(4px);
}

.contact-item:focus-within {
    border-bottom-color: var(--theme-brand-primary);
}

.contact-item:last-child {
    border-bottom: none;
}

/* ============================================================
   5.7.7. CONTACT-ITEM__ICON
   ============================================================ */

.contact-item__icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
    min-width: 24px;
    text-align: center;
    transition: transform var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.contact-item:hover .contact-item__icon {
    transform: scale(1.2) rotate(5deg);
}

/* ============================================================
   5.7.8. CONTACT-ITEM__LINK
   ============================================================ */

.contact-item__link {
    color: var(--theme-text-inverse);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-weight: 500;
    font-size: var(--pr-font-size-md);
    word-break: break-word;
}

.contact-item__link:hover {
    color: var(--theme-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-item__link:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

/* ============================================================
   5.7.9. CONTACT-ITEM__TEXT
   ============================================================ */

.contact-item__text {
    color: var(--theme-text-inverse);
    font-size: var(--pr-font-size-md);
    word-break: break-word;
}

/* ============================================================
   5.7.10. CONTACT-ITEM--HOURS
   ============================================================ */

.contact-item--hours {
    border-bottom: none;
}

/* ============================================================
   5.7.11. CONTACT-ICON-MAX
   ============================================================ */

.contact-icon-max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-brand-primary);
}

.contact-icon-max svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.dark-theme .contact-icon-max {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.7.12. CONTACTS-FORM-WRAPPER
   ============================================================ */

.contacts-form-wrapper {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   5.7.13. CONTACTS-FORM-WRAPPER__TITLE
   ============================================================ */

.contacts-form-wrapper__title {
    font-size: var(--pr-font-size-2xl);
    color: var(--theme-text-inverse);
    margin-bottom: var(--pr-space-md);
}

/* ============================================================
   5.7.14. CONTACTS-FORM
   ============================================================ */

.contacts-form {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
}

/* ============================================================
   5.7.15. FORM-INPUT
   ============================================================ */

.form-input {
    width: 100%;
    padding: var(--pr-space-md) var(--pr-space-lg);
    border-radius: var(--theme-radius-input);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--theme-text-inverse);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-family: var(--pr-font-family);
    font-size: var(--pr-font-size-md);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    min-height: 48px;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.form-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-brand-primary);
    box-shadow: 0 0 0 4px rgba(61, 156, 140, 0.15);
}

.form-input:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

/* ============================================================
   5.7.16. FORM-TEXTAREA
   ============================================================ */

.form-textarea {
    width: 100%;
    padding: var(--pr-space-md) var(--pr-space-lg);
    border-radius: var(--theme-radius-input);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--theme-text-inverse);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-family: var(--pr-font-family);
    font-size: var(--pr-font-size-md);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    min-height: 100px;
    resize: vertical;
}

.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-textarea:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.form-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-brand-primary);
    box-shadow: 0 0 0 4px rgba(61, 156, 140, 0.15);
}

.form-textarea:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

/* ============================================================
   5.7.17. FORM-SUBMIT
   ============================================================ */

.form-submit {
    background: var(--theme-gradient-button);
    color: var(--theme-text-inverse);
    border: none;
    font-weight: 700;
    margin-top: var(--pr-space-sm);
    width: 100%;
    padding: var(--pr-space-md) var(--pr-space-xl);
    font-size: var(--pr-font-size-md);
    border-radius: var(--theme-radius-button);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    box-shadow: var(--theme-shadow-sm), var(--theme-shadow-glow-primary);
    cursor: pointer;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-sm);
}

.form-submit:hover {
    background: var(--theme-gradient-button-hover);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-md), var(--theme-shadow-glow-accent);
}

.form-submit:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    background: var(--theme-brand-primary-hover);
}

.form-submit:active {
    transform: translateY(0);
}

/* ============================================================
   5.7.18. CHECKBOXES - ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ЧЕКБОКСОВ
   ============================================================ */

.privacy-checkbox,
.consultation-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-sm);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    line-height: var(--pr-line-height-normal);
}

.privacy-checkbox input[type='checkbox'],
.consultation-checkbox input[type='checkbox'] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--theme-brand-primary);
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--theme-radius-xs);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    position: relative;
}

.privacy-checkbox input[type='checkbox']:checked,
.consultation-checkbox input[type='checkbox']:checked {
    background: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.privacy-checkbox input[type='checkbox']:focus-visible,
.consultation-checkbox input[type='checkbox']:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

.privacy-checkbox span,
.consultation-checkbox span {
    flex: 1;
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-normal);
}

.privacy-checkbox a,
.consultation-checkbox a {
    color: var(--theme-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.privacy-checkbox a:hover,
.consultation-checkbox a:hover {
    color: var(--theme-brand-primary-hover);
}

.consultation-checkbox {
    align-items: center;
    margin-bottom: var(--pr-space-sm);
}

/* ============================================================
   5.7.19. МОБИЛЬНАЯ АДАПТАЦИЯ ЧЕКБОКСОВ
   ============================================================ */

@container container (max-width: 767px) {
    .privacy-checkbox input[type='checkbox'],
    .consultation-checkbox input[type='checkbox'] {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        max-width: 16px;
        max-height: 16px;
        margin-top: 1px;
        background-size: 10px;
    }

    .privacy-checkbox input[type='checkbox']:checked,
    .consultation-checkbox input[type='checkbox']:checked {
        background-size: 10px;
    }

    .privacy-checkbox,
    .consultation-checkbox {
        gap: var(--pr-space-xs);
    }

    .privacy-checkbox span,
    .consultation-checkbox span {
        font-size: var(--pr-font-size-xs);
    }
}

@container container (max-width: 479px) {
    .privacy-checkbox input[type='checkbox'],
    .consultation-checkbox input[type='checkbox'] {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        max-width: 14px;
        max-height: 14px;
        margin-top: 1px;
        background-size: 9px;
    }

    .privacy-checkbox input[type='checkbox']:checked,
    .consultation-checkbox input[type='checkbox']:checked {
        background-size: 9px;
    }

    .privacy-checkbox,
    .consultation-checkbox {
        gap: var(--pr-space-2xs);
    }

    .privacy-checkbox span,
    .consultation-checkbox span {
        font-size: var(--pr-font-size-2xs);
    }

    .privacy-checkbox a,
    .consultation-checkbox a {
        white-space: normal;
        word-break: break-word;
    }
}

@container container (max-width: 359px) {
    .privacy-checkbox input[type='checkbox'],
    .consultation-checkbox input[type='checkbox'] {
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
        max-width: 12px;
        max-height: 12px;
        margin-top: 0;
        background-size: 8px;
    }

    .privacy-checkbox input[type='checkbox']:checked,
    .consultation-checkbox input[type='checkbox']:checked {
        background-size: 8px;
    }

    .privacy-checkbox,
    .consultation-checkbox {
        gap: var(--pr-space-2xs);
    }

    .privacy-checkbox span,
    .consultation-checkbox span {
        font-size: var(--pr-font-size-3xs);
    }
}

/* ============================================================
   5.8. ГРУППА 8: КАРТА (Container Queries)
   ============================================================ */

/* ============================================================
   5.8.1. MAP-SECTION
   ============================================================ */

.map-section {
    padding: var(--pr-section-padding) 0;
}

/* ============================================================
   5.8.2. MAP-SECTION__TITLE
   ============================================================ */

.map-section__title {
    font-size: var(--pr-font-size-4xl);
    text-align: center;
    margin-bottom: var(--pr-space-sm);
    color: var(--theme-text-heading);
}

.accent-gold {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.8.3. MAP-SECTION__SUBTITLE
   ============================================================ */

.map-section__subtitle {
    text-align: center;
    color: var(--theme-text-secondary);
    margin-bottom: var(--pr-space-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--pr-font-size-md);
}

/* ============================================================
   5.8.4. MAP-CONTAINER
   ============================================================ */

.map-container {
    border-radius: var(--theme-radius-card);
    overflow: hidden;
    box-shadow: var(--theme-shadow-xl);
    border: 1px solid var(--theme-border-medium);
    margin-bottom: var(--pr-space-2xl);
    transition: box-shadow var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
}

.map-container:hover {
    box-shadow: var(--theme-shadow-2xl);
}

/* ============================================================
   5.8.5. MAP-IFRAME
   ============================================================ */

.map-iframe {
    display: block;
    width: 100%;
    height: 450px;
    min-height: 350px;
    background: var(--theme-bg-surface-hover);
    border: none;
}

/* ============================================================
   5.8.6. MAP-DIRECTIONS
   ============================================================ */

.map-directions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pr-space-lg);
    margin-top: var(--pr-space-xl);
}

/* ============================================================
   5.8.7. DIRECTION-CARD
   ============================================================ */

.direction-card {
    background: var(--theme-surface-card);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-lg);
    border: 1px solid var(--theme-border-medium);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    box-shadow: var(--theme-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.direction-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-md);
    border-color: var(--theme-brand-primary);
}

body.dark-theme .direction-card {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .direction-card:hover {
    border-color: var(--theme-brand-primary);
    box-shadow: var(--pr-shadow-dark-md);
}

/* ============================================================
   5.8.8. DIRECTION-CARD__HEADER
   ============================================================ */

.direction-card__header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-md);
}

/* ============================================================
   5.8.9. DIRECTION-CARD__ICON
   ============================================================ */

.direction-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--theme-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.direction-card__icon i {
    font-size: 1.3rem;
}

/* ✅ Все span внутри direction-card - единый стиль (светлая тема) */
.direction-card span {
    font-size: var(--pr-font-size-xs);
    color: var(--pr-color-gray-800);
    font-weight: 600;
    display: block;
}

/* ✅ ТЁМНАЯ ТЕМА ДЛЯ SPAN */
body.dark-theme .direction-card span {
    color: var(--pr-color-dark-text-primary);
}

/* Если нужно отделить заголовок от описания */
.direction-card .direction-card__text {
    font-weight: 400;
    color: var(--pr-color-gray-700);
}

/* ✅ ТЁМНАЯ ТЕМА ДЛЯ ТЕКСТА */
body.dark-theme .direction-card .direction-card__text {
    color: var(--pr-color-dark-text-secondary);
}

/* ✅ ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ИКОНОК (светлая тема) */
.direction-card:nth-child(1) .direction-card__icon,
.direction-card:nth-child(2) .direction-card__icon,
.direction-card:nth-child(3) .direction-card__icon {
    background: var(--theme-brand-primary-alpha-10);
    color: var(--pr-color-mint-dark);
}

/* ✅ ТЁМНАЯ ТЕМА - ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ИКОНОК */
body.dark-theme .direction-card:nth-child(1) .direction-card__icon,
body.dark-theme .direction-card:nth-child(2) .direction-card__icon,
body.dark-theme .direction-card:nth-child(3) .direction-card__icon {
    background: var(--theme-brand-primary-alpha-10);
    color: var(--pr-color-mint);
}

/* ============================================================
   5.8.10. DIRECTION-CARD__INFO
   ============================================================ */

.direction-card__info {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   5.8.11. DIRECTION-CARD__TITLE
   ============================================================ */

.direction-card__title {
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-heading);
    display: block;
    line-height: 1.2;
    font-weight: 600;
}

body.dark-theme .direction-card__title {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.8.12. DIRECTION-CARD__TIME
   ============================================================ */

.direction-card__time {
    font-size: var(--pr-font-size-xs);
    color: var(--pr-color-gray-800);
    font-weight: 600;
    display: block;
}

body.dark-theme .direction-card__time {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.8.13. DIRECTION-CARD__TEXT
   ============================================================ */

.direction-card__text {
    color: var(--pr-color-gray-700);
    margin: 0 0 var(--pr-space-sm) 0;
    line-height: 1.6;
    flex: 1;
    font-size: var(--pr-font-size-sm);
}

body.dark-theme .direction-card__text {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.8.14. DIRECTION-CARD__FOOTER
   ============================================================ */

.direction-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
    color: var(--theme-accent-primary);
    font-weight: 500;
    font-size: var(--pr-font-size-sm);
    padding-top: var(--pr-space-sm);
    border-top: 1px solid var(--theme-border-light);
}

.direction-card__footer i {
    flex-shrink: 0;
}

body.dark-theme .direction-card__footer {
    border-top-color: var(--pr-color-dark-border);
    color: var(--theme-brand-primary);
}
/* ============================================================
   5.9. ГРУППА 9: МОДАЛКИ (ТОП-СТАНДАРТЫ PlentyONE/CoreUI/Tailwind)
   ============================================================ */

/* ============================================================
   5.9.1. MODAL - БАЗОВЫЙ КОНТЕЙНЕР
   ============================================================ */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--pr-z-modal);
    background: var(--theme-surface-overlay-modal);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    align-items: center;
    justify-content: center;
    padding: var(--pr-space-md);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: modalOverlayFade var(--pr-duration-base) var(--pr-ease-out-cubic);
}

.modal.active {
    display: flex;
}

/* Анимация для оверлея */
@keyframes modalOverlayFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================
   5.9.2. MODAL-OVERLAY
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    z-index: 1;
    background: var(--theme-surface-overlay-modal);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* ============================================================
   5.9.3. MODAL-CONTENT
   ============================================================ */

.modal-content {
    position: relative;
    z-index: 2; /* ← поверх overlay */
    background: var(--theme-surface-modal);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: var(--theme-radius-modal);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        var(--theme-shadow-2xl),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    border: 1px solid var(--theme-border-inverse);
    animation: modalContentSlideUp var(--pr-duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-brand-primary) var(--theme-border-medium);
    transform-origin: center bottom;
}

/* Пружинная анимация (как в Tailwind + PlentyONE) */
@keyframes modalContentSlideUp {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* На мобильных - выезжает снизу (PlentyONE стиль) */
@media (max-width: 767px) {
    @keyframes modalContentSlideUp {
        from {
            opacity: 0;
            transform: translateY(40px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-content {
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
        max-height: 92vh;
        animation: modalContentSlideUp var(--pr-duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

/* Стилизация скроллбара */
.modal-content::-webkit-scrollbar {
    width: 6px;
}
.modal-content::-webkit-scrollbar-track {
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
}
.modal-content::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
    transition: background var(--pr-duration-fast) var(--pr-ease-out-cubic);
}
.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--theme-brand-primary-pressed);
}

body.dark-theme .modal-content {
    background: rgba(24, 34, 40, 0.95);
    border-color: rgba(61, 156, 140, 0.08);
}

/* ============================================================
   5.9.4. MODAL-CONTENT - ВАРИАНТЫ ШИРИНЫ
   ============================================================ */

.modal-content--wide {
    max-width: 1000px;
}
.modal-content--files {
    max-width: 700px;
    width: 95%;
}
.modal-content--full {
    max-width: 95vw;
    max-height: 95vh;
}

/* ============================================================
   5.9.5. MODAL-HEADER (с разделителем-градиентом)
   ============================================================ */

.modal-header {
    padding: var(--pr-space-lg) var(--pr-space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    min-height: 72px;
    gap: var(--pr-space-md);
    border-bottom: 1px solid var(--theme-border-inverse);
}

/* Декоративный градиент под хедером (CoreUI style) */
.modal-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.2;
    border-radius: var(--theme-radius-full);
    pointer-events: none;
}

body.dark-theme .modal-header {
    border-bottom-color: rgba(61, 156, 140, 0.08);
}

/* ============================================================
   5.9.6. MODAL-TITLE
   ============================================================ */

.modal-title {
    font-size: var(--pr-font-size-xl);
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-heading);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
}
.modal-title i {
    color: var(--theme-brand-primary);
}
body.dark-theme .modal-title {
    color: var(--pr-color-soft-dark-text-primary);
}

/* ============================================================
   5.9.7. MODAL-CLOSE - С АНИМАЦИЕЙ
   ============================================================ */

.modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--theme-text-tertiary);
    padding: 0;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    flex-shrink: 0;
    position: relative;
    text-align: center;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.modal-close::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--theme-radius-full);
    background: var(--theme-brand-primary-alpha-10);
    opacity: 0;
    transition: opacity var(--pr-duration-fast) var(--pr-ease-out-cubic);
    transform: scale(0.8);
}
.modal-close:hover::before {
    opacity: 1;
    transform: scale(1);
}
.modal-close:hover {
    color: var(--theme-brand-primary);
    transform: rotate(90deg);
}
.modal-close:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}
body.dark-theme .modal-close {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .modal-close:hover {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.9.8. MODAL-BODY
   ============================================================ */

.modal-body {
    padding: var(--pr-space-xl);
    text-align: left;
}
.modal-body--pdf {
    padding: 0;
    background: var(--theme-surface-footer);
    border-radius: 0px 0px var(--theme-radius-modal) var(--theme-radius-modal);
    overflow: hidden;
}
.modal-body--no-padding {
    padding: 0;
}

/* ============================================================
   5.9.9. PDF-IFRAME
   ============================================================ */

.pdf-iframe {
    display: block;
    width: 100%;
    height: 70vh;
    border: none;
}

/* ============================================================
   5.9.10. МОДАЛКА ИНСТРУМЕНТОВ (#toolsModal) - Tailwind сетка
   ============================================================ */

/* Вкладки - как в CoreUI */
.tools-tabs {
    display: flex;
    gap: var(--pr-space-2xs);
    border-bottom: 1px solid var(--theme-border-inverse);
    margin-bottom: var(--pr-space-lg);
    padding-bottom: var(--pr-space-xs);
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: center;
    position: relative;
}
.tools-tabs::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.1;
}
.tools-tabs::-webkit-scrollbar {
    display: none;
}
body.dark-theme .tools-tabs {
    border-bottom-color: rgba(61, 156, 140, 0.08);
}

.tool-tab {
    padding: var(--pr-space-sm) var(--pr-space-lg);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-tertiary);
    font-weight: 600;
    border-radius: var(--theme-radius-input) var(--theme-radius-input) 0px 0px;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-size: var(--pr-font-size-sm);
    white-space: nowrap;
    min-height: 44px;
    flex: 0 1 auto;
    position: relative;
}
.tool-tab:hover {
    color: var(--theme-brand-primary);
    background: var(--theme-brand-primary-alpha-10);
}
.tool-tab.active {
    color: var(--theme-brand-primary);
    border-bottom: 2px solid var(--theme-brand-primary);
    background: transparent;
}
.tool-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--theme-gradient-brand-horizontal);
    border-radius: var(--theme-radius-full);
}
.tool-tab:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}
body.dark-theme .tool-tab {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .tool-tab:hover {
    color: var(--theme-brand-primary);
    background: rgba(61, 156, 140, 0.05);
}
body.dark-theme .tool-tab.active {
    color: var(--theme-brand-primary);
    border-bottom-color: var(--theme-brand-primary);
}

/* Панели */
.tool-panel {
    display: none;
}
.tool-panel.active {
    display: block;
    animation: fadeIn var(--pr-duration-base) var(--pr-ease-out-cubic);
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Drop Zone */
.drop-zone {
    border: 2px dashed var(--theme-brand-primary-alpha-20);
    border-radius: var(--theme-radius-button);
    padding: var(--pr-space-2xl);
    text-align: center;
    cursor: pointer;
    margin-bottom: var(--pr-space-lg);
    transition: all var(--pr-duration-base) var(--pr-ease-out-cubic);
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.drop-zone:hover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface);
    transform: scale(1.01);
}
.drop-zone.dragover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-brand-primary-alpha-10);
    transform: scale(1.02);
}
.drop-zone:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}
.drop-zone i {
    font-size: 2.5rem;
    color: var(--theme-brand-primary);
    margin-bottom: var(--pr-space-md);
}
.drop-zone p {
    color: var(--theme-text-secondary);
    margin-bottom: var(--pr-space-xs);
    font-size: var(--pr-font-size-sm);
}
body.dark-theme .drop-zone {
    border-color: rgba(61, 156, 140, 0.15);
    background: rgba(24, 34, 40, 0.5);
}
body.dark-theme .drop-zone:hover {
    border-color: var(--theme-brand-primary);
    background: rgba(34, 50, 56, 0.7);
}
body.dark-theme .drop-zone.dragover {
    background: rgba(61, 156, 140, 0.15);
}
body.dark-theme .drop-zone i {
    color: var(--theme-brand-primary);
}
body.dark-theme .drop-zone p {
    color: var(--pr-color-soft-dark-text-secondary);
}
.drop-zone__hint {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    margin-top: var(--pr-space-xs);
}
body.dark-theme .drop-zone__hint {
    color: var(--pr-color-soft-dark-text-tertiary);
}

/* File List */
.file-list {
    border: 1px solid var(--theme-border-inverse);
    border-radius: var(--theme-radius-lg);
    padding: var(--pr-space-md);
    margin-bottom: var(--pr-space-lg);
    max-height: 200px;
    overflow-y: auto;
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-brand-primary) var(--theme-border-medium);
}
.file-list::-webkit-scrollbar {
    width: 4px;
}
.file-list::-webkit-scrollbar-track {
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
}
.file-list::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
}
.file-list.hidden {
    display: none;
}
body.dark-theme .file-list {
    border-color: rgba(61, 156, 140, 0.08);
    background: rgba(24, 34, 40, 0.5);
}
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pr-space-xs) var(--pr-space-md);
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--theme-radius-input);
    margin-bottom: var(--pr-space-xs);
    border: 1px solid var(--theme-border-inverse);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-size: var(--pr-font-size-sm);
    cursor: pointer;
}
.file-item:hover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface);
    transform: translateX(4px);
}
.file-item.selected {
    background: var(--theme-brand-primary-alpha-10);
    border-color: var(--theme-brand-primary);
}
.file-item:focus-within {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface);
}
.file-item:last-child {
    margin-bottom: 0;
}
body.dark-theme .file-item {
    background: rgba(24, 34, 40, 0.5);
    border-color: rgba(61, 156, 140, 0.05);
    color: var(--pr-color-soft-dark-text-primary);
}
body.dark-theme .file-item:hover {
    border-color: var(--theme-brand-primary);
    background: rgba(34, 50, 56, 0.7);
}
body.dark-theme .file-item.selected {
    background: rgba(61, 156, 140, 0.1);
    border-color: var(--theme-brand-primary);
}
.file-item button {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--theme-text-tertiary);
    padding: var(--pr-space-2xs) var(--pr-space-xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--theme-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-item button:hover {
    color: var(--theme-brand-primary);
    background: var(--theme-brand-primary-alpha-10);
    transform: scale(1.1);
}
.file-item button:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}
body.dark-theme .file-item button {
    color: var(--pr-color-soft-dark-text-tertiary);
}
body.dark-theme .file-item button:hover {
    color: var(--theme-brand-primary);
    background: rgba(61, 156, 140, 0.1);
}

/* Select */
.tool-select {
    width: 100%;
    padding: var(--pr-space-md) var(--pr-space-lg);
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-input);
    font-size: var(--pr-font-size-md);
    font-weight: 500;
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--theme-text-primary);
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 48px;
    margin-bottom: var(--pr-space-md);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236a7880' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.tool-select:hover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface-hover);
}
.tool-select:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-color: var(--theme-brand-primary);
}
body.dark-theme .tool-select {
    background: rgba(24, 34, 40, 0.7);
    border-color: var(--pr-color-soft-dark-border);
    color: var(--pr-color-soft-dark-text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23707a78' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
body.dark-theme .tool-select:hover {
    border-color: var(--theme-brand-primary);
    background: rgba(34, 50, 56, 0.8);
}

/* Quality Control */
.quality-control {
    margin: var(--pr-space-md) 0;
}
.quality-control label {
    display: block;
    margin-bottom: var(--pr-space-2xs);
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-secondary);
}
.quality-control input[type='range'] {
    width: 100%;
}

/* Resize Controls */
.resize-controls {
    margin: var(--pr-space-md) 0;
}
.resize-controls__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: var(--pr-space-sm);
}
.resize-controls__separator {
    color: var(--theme-text-tertiary);
    font-weight: 600;
}
.resize-controls__aspect {
    margin: var(--pr-space-sm) 0;
}
.resize-controls__aspect label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
}
.resize-controls__aspect input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-brand-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.resize-controls__hint {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    text-align: center;
    margin-top: var(--pr-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-2xs);
}
.resize-controls__hint i {
    color: var(--theme-brand-primary);
}

/* Extracted Text */
.extracted-text {
    margin-top: var(--pr-space-md);
    padding: var(--pr-space-md);
    background: var(--theme-bg-surface-hover);
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-lg);
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Courier New', monospace;
    font-size: var(--pr-font-size-sm);
    line-height: 1.7;
    color: var(--theme-text-primary);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}
.extracted-text.hidden {
    display: none !important;
}
body.dark-theme .extracted-text {
    background: var(--pr-color-soft-dark-surface);
    border-color: var(--pr-color-soft-dark-border);
    color: var(--pr-color-soft-dark-text-primary);
}
.extracted-text::-webkit-scrollbar {
    width: 6px;
}
.extracted-text::-webkit-scrollbar-track {
    background: var(--theme-bg-surface-hover);
    border-radius: var(--theme-radius-full);
}
.extracted-text::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
}
.extracted-text::-webkit-scrollbar-thumb:hover {
    background: var(--theme-brand-primary-hover);
}
body.dark-theme .extracted-text::-webkit-scrollbar-track {
    background: var(--pr-color-soft-dark-border);
}

/* Text Actions */
.text-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--pr-space-sm);
}
.text-actions.hidden {
    display: none !important;
}
.text-actions .btn-sm {
    flex: 1;
    min-width: 100px;
    justify-content: center;
}

/* Сетка для кнопок (как в Tailwind) */
.tool-panel .btn {
    min-height: 48px;
    font-size: var(--pr-font-size-sm);
    padding: var(--pr-space-sm) var(--pr-space-lg);
    border-radius: var(--theme-radius-button);
}
.tool-panel .flex-gap-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tool-panel .flex-gap-12 .btn {
    width: 100%;
}
.tool-panel .btn-block {
    width: 100%;
}

/* Отступы */
.mt-16 {
    margin-top: var(--pr-space-md);
}
.mt-8 {
    margin-top: var(--pr-space-xs);
}
.mb-16 {
    margin-bottom: var(--pr-space-md);
}

/* ============================================================
   5.9.11. ФАЙЛЫ (#filesModal) - счётчик с анимацией (PlentyONE)
   ============================================================ */

.files-stats {
    display: flex;
    justify-content: space-between;
    padding: var(--pr-space-md) var(--pr-space-lg);
    background: var(--theme-bg-surface-hover);
    border-radius: var(--theme-radius-card);
    margin-bottom: var(--pr-space-lg);
    border: 1px solid var(--theme-border-inverse);
}
body.dark-theme .files-stats {
    background: var(--pr-color-soft-dark-surface-hover);
    border-color: var(--pr-color-soft-dark-border);
}
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-label {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
}
.stat-value {
    font-size: var(--pr-font-size-lg);
    font-weight: 600;
    color: var(--theme-brand-primary);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}
.stat-value.pop {
    animation: statPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes statPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Фильтры - как в CoreUI */
.files-filters {
    display: flex;
    gap: var(--pr-space-xs);
    margin-bottom: var(--pr-space-lg);
    flex-wrap: wrap;
}
.files-filter-btn {
    padding: var(--pr-space-xs) var(--pr-space-md);
    border: 1px solid var(--theme-border-medium);
    background: none;
    border-radius: var(--theme-radius-button);
    cursor: pointer;
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 40px;
}
.files-filter-btn:hover {
    border-color: var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}
.files-filter-btn.active {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
}
.files-filter-btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

/* Список файлов */
.files-list-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 4px;
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-card);
    margin-bottom: var(--pr-space-lg);
    background: var(--theme-bg-surface);
}
.files-list-container::-webkit-scrollbar {
    width: 4px;
}
.files-list-container::-webkit-scrollbar-track {
    background: var(--theme-bg-surface-hover);
    border-radius: var(--theme-radius-full);
}
.files-list-container::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
}
.files-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--theme-brand-primary-hover);
}
body.dark-theme .files-list-container {
    border-color: var(--pr-color-soft-dark-border);
    background: var(--pr-color-soft-dark-surface);
}
body.dark-theme .files-list-container::-webkit-scrollbar-track {
    background: var(--pr-color-soft-dark-border);
}
body.dark-theme .files-list-container::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
}

.loading-files {
    text-align: center;
    padding: var(--pr-space-2xl);
    color: var(--theme-text-tertiary);
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border-medium);
    border-top-color: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
    animation: spin 1s linear infinite;
    margin: 0 auto var(--pr-space-md);
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   СПИННЕР С ЛОГОТИПОМ (ГРАДИЕНТ + АНИМАЦИЯ)
   ============================================================ */

.spinner-with-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    margin: 0 auto var(--pr-space-md);
}

/* Внешнее кольцо - градиент + анимация */
.spinner-with-logo .spinner-ring-outer {
    position: absolute;
    inset: -2px;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    box-sizing: border-box;
    background: conic-gradient(
        from 0deg,
        var(--pr-color-mint-light),
        var(--pr-color-mint),
        var(--pr-color-mint-hover),
        var(--pr-color-mint-light)
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 4px),
        #fff calc(100% - 4px)
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
}

/* Внутреннее кольцо - градиент + анимация (против часовой) */
.spinner-with-logo .spinner-ring-inner {
    position: absolute;
    inset: 4px;
    border: 3.5px solid transparent;
    border-radius: 50%;
    animation: spinReverse 0.9s linear infinite;
    box-sizing: border-box;
    background: conic-gradient(
        from 180deg,
        var(--pr-color-mint-light),
        var(--pr-color-mint),
        var(--pr-color-mint-hover),
        var(--pr-color-mint-light)
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 3.5px),
        #fff calc(100% - 3.5px)
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #fff calc(100% - 3.5px));
}

/* 🔥 ЛОГОТИП - без изменений */
.spinner-with-logo .spinner-logo {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    background: var(--theme-surface-card);
    padding: 4px;
    box-shadow: var(--theme-shadow-sm);
    animation: spinY 3s var(--pr-ease-elastic) infinite;
}

/* Анимации */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes spinY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* Тёмная тема */
body.dark-theme .spinner-with-logo .spinner-ring-outer {
    background: conic-gradient(
        from 0deg,
        rgba(61, 156, 140, 0.15),
        var(--pr-color-mint),
        var(--pr-color-mint-hover),
        rgba(61, 156, 140, 0.15)
    );
}

body.dark-theme .spinner-with-logo .spinner-ring-inner {
    background: conic-gradient(
        from 180deg,
        rgba(61, 156, 140, 0.15),
        var(--pr-color-mint),
        var(--pr-color-mint-hover),
        rgba(61, 156, 140, 0.15)
    );
}

body.dark-theme .spinner-with-logo .spinner-logo {
    background: var(--pr-color-dark-surface);
}

.files-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--pr-space-sm);
    margin-top: var(--pr-space-lg);
}
.empty-files {
    text-align: center;
    padding: var(--pr-space-2xl);
    color: var(--theme-text-tertiary);
}
.empty-files i {
    font-size: 3rem;
    margin-bottom: var(--pr-space-md);
    color: var(--theme-border-medium);
}

/* ============================================================
   5.9.12. КОНСУЛЬТАЦИЯ (#consultationModal) - с бейджами (CoreUI)
   ============================================================ */

.consultation-modal-content {
    max-width: 700px;
    width: 95%;
}
.consultation-hero {
    text-align: center;
    margin-bottom: var(--pr-space-xl);
}
.consultation-hero__icon {
    font-size: 4rem;
    color: var(--theme-brand-primary);
    margin-bottom: var(--pr-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.consultation-hero__title {
    font-size: var(--pr-font-size-2xl);
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-heading);
}
body.dark-theme .consultation-hero__title {
    color: var(--pr-color-soft-dark-text-primary);
}
.consultation-hero__text {
    color: var(--theme-text-secondary);
    max-width: 550px;
    margin: 0 auto;
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
}
body.dark-theme .consultation-hero__text {
    color: var(--pr-color-soft-dark-text-secondary);
}

/* Ценник с бейджем */
.consultation-price-block {
    background: linear-gradient(
        135deg,
        var(--theme-brand-primary-alpha-10),
        var(--theme-brand-primary-alpha-5)
    );
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-xl);
    margin-bottom: var(--pr-space-xl);
    border: 1px solid var(--theme-brand-primary-alpha-20);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.consultation-price-block::before {
    content: '★';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 6rem;
    color: var(--theme-brand-primary-alpha-5);
    pointer-events: none;
}
.consultation-price-block__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--pr-font-size-2xl);
    font-weight: 700;
}
.consultation-price-block__row span:last-child {
    color: var(--theme-brand-primary);
}
.consultation-price-block__note {
    margin-top: var(--pr-space-sm);
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-2xs);
}
.consultation-price-block__note i {
    color: var(--theme-brand-primary);
}
body.dark-theme .consultation-price-block__note {
    color: var(--pr-color-soft-dark-text-tertiary);
}

/* Шаги */
.consultation-steps {
    margin-bottom: var(--pr-space-xl);
}
.consultation-steps__title {
    font-size: var(--pr-font-size-lg);
    margin-bottom: var(--pr-space-md);
    color: var(--theme-text-heading);
}
body.dark-theme .consultation-steps__title {
    color: var(--pr-color-soft-dark-text-primary);
}
.consultation-step {
    display: flex;
    gap: var(--pr-space-md);
    margin-bottom: var(--pr-space-md);
    border-radius: var(--theme-radius-input);
    padding: var(--pr-space-xs) var(--pr-space-sm);
    transition: background var(--pr-duration-fast) var(--pr-ease-out-cubic);
}
.consultation-step:hover {
    background: var(--theme-brand-primary-alpha-5);
}
.consultation-step:last-child {
    margin-bottom: 0;
}
.consultation-step-number {
    width: 32px;
    height: 32px;
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-radius: var(--theme-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    font-size: var(--pr-font-size-sm);
}
.consultation-step-text {
    flex: 1;
}
.consultation-step-text strong {
    display: block;
    margin-bottom: var(--pr-space-2xs);
    color: var(--theme-text-heading);
    font-weight: 600;
}
.consultation-step-text p {
    color: var(--theme-text-secondary);
    margin: 0;
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-relaxed);
}
body.dark-theme .consultation-step-text strong {
    color: var(--pr-color-soft-dark-text-primary);
}
body.dark-theme .consultation-step-text p {
    color: var(--pr-color-soft-dark-text-secondary);
}

/* Фичи - сетка 4 колонки (как в CoreUI) */
.consultation-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pr-space-md);
    margin: var(--pr-space-xl) 0;
    padding: var(--pr-space-md);
    background: var(--theme-bg-surface-hover);
    border-radius: var(--theme-radius-card);
    border: 1px solid var(--theme-border-inverse);
}
body.dark-theme .consultation-features {
    background: var(--pr-color-soft-dark-surface);
    border-color: var(--pr-color-soft-dark-border);
}
.consultation-feature {
    text-align: center;
}
.consultation-feature i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    display: block;
    margin-bottom: var(--pr-space-2xs);
}
.consultation-feature p {
    font-size: var(--pr-font-size-xs);
    margin: 0;
    color: var(--theme-text-secondary);
    font-weight: 500;
}
body.dark-theme .consultation-feature p {
    color: var(--pr-color-soft-dark-text-secondary);
}

/* Действия */
.consultation-actions {
    display: flex;
    gap: var(--pr-space-sm);
    margin-top: var(--pr-space-xl);
}
.consultation-actions .btn {
    flex: 1;
}
.consultation-actions__note {
    text-align: center;
    margin-top: var(--pr-space-md);
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-2xs);
}
.consultation-actions__note i {
    color: var(--theme-brand-primary);
}
body.dark-theme .consultation-actions__note {
    color: var(--pr-color-soft-dark-text-tertiary);
}

/* ============================================================
   5.9.13. ОПЛАТА (#paymentModal) - с карточкой (PlentyONE)
   ============================================================ */

.payment-summary {
    text-align: center;
    margin-bottom: var(--pr-space-xl);
}
.payment-summary__label {
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-tertiary);
}
.payment-summary__amount {
    font-size: var(--pr-font-size-4xl);
    font-weight: 700;
    color: var(--theme-brand-primary);
    margin: var(--pr-space-2xs) 0;
}
.payment-summary__description {
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-tertiary);
}

/* QR-код с карточкой */
.payment-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--pr-space-xl);
    margin: 0 auto var(--pr-space-xl);
    background: var(--theme-bg-surface);
    border-radius: var(--theme-radius-card);
    border: 2px dashed var(--theme-border-medium);
    max-width: 280px;
    width: 100%;
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
}
.payment-qr::after {
    content: 'QR-код';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-bg-surface);
    padding: 0 12px;
    font-size: var(--pr-font-size-2xs);
    color: var(--theme-text-tertiary);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.payment-qr:hover {
    border-color: var(--theme-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm);
}
body.dark-theme .payment-qr {
    background: var(--pr-color-soft-dark-surface);
    border-color: var(--pr-color-soft-dark-border);
}
body.dark-theme .payment-qr::after {
    background: var(--pr-color-soft-dark-surface);
    color: var(--pr-color-soft-dark-text-tertiary);
}
body.dark-theme .payment-qr:hover {
    border-color: var(--theme-brand-primary);
}
.payment-qr__image {
    border-radius: var(--theme-radius-lg);
    max-width: 100%;
    height: auto;
    background: var(--pr-color-white);
    display: block;
    box-shadow: var(--theme-shadow-sm);
}
.payment-qr__hint {
    margin-top: var(--pr-space-md);
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
}
.payment-qr__hint i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-md);
}
body.dark-theme .payment-qr__hint {
    color: var(--pr-color-soft-dark-text-tertiary);
}

/* Действия */
.payment-actions {
    display: flex;
    gap: var(--pr-space-sm);
    justify-content: center;
    flex-wrap: wrap;
}
.payment-actions .btn {
    min-width: 180px;
}

/* Реквизиты */
.payment-requisites {
    margin-top: var(--pr-space-xl);
    padding: var(--pr-space-md) var(--pr-space-xl);
    background: var(--theme-bg-surface-hover);
    border-radius: var(--theme-radius-lg);
    text-align: left;
    font-size: var(--pr-font-size-sm);
    line-height: 1.8;
    border: 1px solid var(--theme-border-inverse);
}
.payment-requisites p {
    margin: 0;
    color: var(--theme-text-secondary);
}
.payment-requisites strong {
    color: var(--theme-text-primary);
}
body.dark-theme .payment-requisites {
    background: var(--pr-color-soft-dark-surface);
    border-color: var(--pr-color-soft-dark-border);
}
body.dark-theme .payment-requisites p {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .payment-requisites strong {
    color: var(--pr-color-soft-dark-text-primary);
}

.payment-notice {
    margin-top: var(--pr-space-md);
    padding: var(--pr-space-sm) var(--pr-space-md);
    background: var(--theme-brand-primary-alpha-10);
    border-radius: var(--theme-radius-md);
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-secondary);
    text-align: center;
}
.payment-notice i {
    color: var(--theme-brand-primary);
}
.payment-notice a {
    color: var(--theme-brand-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}
.payment-notice a:hover {
    color: var(--theme-brand-primary-hover);
    text-decoration: underline;
}
body.dark-theme .payment-notice {
    background: rgba(61, 156, 140, 0.08);
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .payment-notice a {
    color: var(--theme-brand-primary);
}
body.dark-theme .payment-notice a:hover {
    color: var(--theme-brand-primary-hover);
}

/* Приписки в модалке оплаты документа.
   Сбрасываем глобальный max-width от `p` (3.2),
   чтобы `<p>` занимал всю ширину модалки и центрировался. */
#documentPaymentWidget p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Разделитель «или оплатите вручную» в модалке оплаты документа.
   Модификатор .payment-notice — переопределяет фон и добавляет
   горизонтальные линии по бокам текста. */
.payment-notice--divider {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    background: transparent;
    border: none;
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--pr-letter-spacing-wide);
    padding: var(--pr-space-sm) 0;
    margin: var(--pr-space-lg) 0;
}

.payment-notice--divider::before,
.payment-notice--divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--theme-border-light);
}

body.dark-theme .payment-notice--divider {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .payment-notice--divider::before,
body.dark-theme .payment-notice--divider::after {
    background: var(--pr-color-dark-border);
}

/* ============================================================
   5.9.14. МОДАЛКА ГОСПОШЛИН (#feesModal) - с таблицей
   ============================================================ */

.fees-section-title {
    margin-bottom: var(--pr-space-md);
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
    font-weight: 600;
    position: relative;
    padding-bottom: var(--pr-space-xs);
}
.fees-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--theme-gradient-brand-horizontal);
    border-radius: var(--theme-radius-full);
}
body.dark-theme .fees-section-title {
    color: var(--theme-brand-primary);
}

.fees-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--pr-space-xl);
    font-size: var(--pr-font-size-sm);
    border-radius: var(--theme-radius-card);
    overflow: hidden;
}
.fees-table thead tr {
    background: var(--theme-brand-primary-alpha-10);
    border-bottom: 2px solid var(--theme-brand-primary-alpha-20);
}
.fees-table th {
    text-align: left;
    padding: var(--pr-space-sm) var(--pr-space-md);
    color: var(--theme-text-primary);
    font-weight: 600;
    font-size: var(--pr-font-size-sm);
    white-space: nowrap;
}
.fees-table td {
    padding: var(--pr-space-sm) var(--pr-space-md);
    border-bottom: 1px solid var(--theme-brand-primary-alpha-10);
    color: var(--theme-text-secondary);
}
.fees-table tbody tr:hover {
    background: var(--theme-brand-primary-alpha-10);
}
.fees-table td:last-child {
    text-align: right;
    font-weight: 500;
    color: var(--theme-text-heading);
    font-family: 'Inter', 'SF Mono', Monaco, Consolas, monospace;
}
body.dark-theme .fees-table thead tr {
    background: rgba(61, 156, 140, 0.1);
    border-bottom-color: rgba(61, 156, 140, 0.15);
}
body.dark-theme .fees-table th {
    color: var(--pr-color-soft-dark-text-primary);
}
body.dark-theme .fees-table td {
    border-bottom-color: rgba(61, 156, 140, 0.08);
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .fees-table tbody tr:hover {
    background: rgba(61, 156, 140, 0.05);
}
body.dark-theme .fees-table td:last-child {
    color: var(--pr-color-soft-dark-text-primary);
}

.fees-highlight {
    background: var(--theme-brand-primary-alpha-10);
    padding: var(--pr-space-lg);
    border-radius: var(--theme-radius-card);
    margin-bottom: var(--pr-space-xl);
}
.fees-highlight p {
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-primary);
    font-size: var(--pr-font-size-sm);
    display: flex;
    align-items: baseline;
    gap: var(--pr-space-xs);
}
.fees-highlight p:last-child {
    margin-bottom: 0;
}
.fees-highlight strong {
    color: var(--theme-brand-primary);
    font-weight: 600;
    min-width: 200px;
    display: inline-block;
}
body.dark-theme .fees-highlight {
    background: rgba(61, 156, 140, 0.08);
    border-left-color: var(--theme-brand-primary);
}
body.dark-theme .fees-highlight p {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .fees-highlight strong {
    color: var(--theme-brand-primary);
}

/* Exempt */
.fees-exempt {
    border-radius: var(--theme-radius-card);
    margin-bottom: var(--pr-space-xl);
}
.fees-exempt__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pr-space-lg);
}
.fees-exempt__grid p {
    font-weight: 600;
    margin-bottom: var(--pr-space-sm);
    color: var(--theme-text-primary);
}
.fees-exempt__grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fees-exempt__grid ul li {
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
}
.fees-exempt__grid ul li i {
    color: var(--theme-brand-primary);
}
body.dark-theme .fees-exempt__grid p {
    color: var(--pr-color-soft-dark-text-primary);
}
body.dark-theme .fees-exempt__grid ul li {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .fees-exempt__grid ul li i {
    color: var(--theme-brand-primary);
}

.fees-exempt__svo {
    margin-top: var(--pr-space-lg);
    padding: var(--pr-space-md) var(--pr-space-lg);
    background: var(--theme-brand-primary-alpha-10);
    border-radius: var(--theme-radius-card);
}
.fees-exempt__svo p {
    font-weight: 600;
    margin-bottom: var(--pr-space-sm);
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
}
.fees-exempt__svo p i {
    color: var(--theme-brand-primary);
}
body.dark-theme .fees-exempt__svo {
    background: rgba(61, 156, 140, 0.08);
    border-left-color: var(--theme-brand-primary);
}
body.dark-theme .fees-exempt__svo p {
    color: var(--pr-color-soft-dark-text-primary);
}
.fees-exempt__svo-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--pr-space-sm) 0;
}
.fees-exempt__svo-list li {
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
}
.fees-exempt__svo-list li i {
    color: var(--theme-brand-primary);
}
body.dark-theme .fees-exempt__svo-list li {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .fees-exempt__svo-list li i {
    color: var(--theme-brand-primary);
}
.fees-exempt__svo-note {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    margin-top: var(--pr-space-xs);
    font-style: italic;
}
body.dark-theme .fees-exempt__svo-note {
    color: var(--pr-color-soft-dark-text-tertiary);
}

.fees-exempt__extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pr-space-lg);
    margin-top: var(--pr-space-lg);
}
.fees-exempt__extra p:first-child {
    font-weight: 600;
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
}
.fees-exempt__extra p:first-child i {
    color: var(--theme-brand-primary);
}
.fees-exempt__extra p:last-child {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
    margin: 0;
}
body.dark-theme .fees-exempt__extra p:first-child {
    color: var(--pr-color-soft-dark-text-primary);
}
body.dark-theme .fees-exempt__extra p:last-child {
    color: var(--pr-color-soft-dark-text-secondary);
}
.fees-exempt__footer {
    margin-top: var(--pr-space-lg);
    padding-top: var(--pr-space-md);
    border-top: 1px solid var(--theme-border-light);
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    text-align: center;
}
body.dark-theme .fees-exempt__footer {
    border-top-color: var(--pr-color-soft-dark-border);
    color: var(--pr-color-soft-dark-text-tertiary);
}

/* New Rules */
.fees-new-rules {
    margin-top: var(--pr-space-xl);
    padding: var(--pr-space-lg);
    background: var(--theme-brand-primary-alpha-5);
    border-radius: var(--theme-radius-card);
    border: 1px solid var(--theme-brand-primary-alpha-20);
}
.fees-new-rules h4 {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-md);
    color: var(--theme-text-heading);
    font-size: var(--pr-font-size-lg);
}
.fees-new-rules h4 i {
    color: var(--theme-brand-primary);
}
.fees-new-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fees-new-rules ul li {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-sm);
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-relaxed);
}
.fees-new-rules ul li:last-child {
    margin-bottom: 0;
}
.fees-new-rules ul li i {
    color: var(--theme-brand-primary);
    margin-top: 2px;
    flex-shrink: 0;
}
body.dark-theme .fees-new-rules {
    background: rgba(61, 156, 140, 0.05);
    border-color: rgba(61, 156, 140, 0.1);
}
body.dark-theme .fees-new-rules h4 {
    color: var(--pr-color-soft-dark-text-primary);
}
body.dark-theme .fees-new-rules h4 i {
    color: var(--theme-brand-primary);
}
body.dark-theme .fees-new-rules ul li {
    color: var(--pr-color-soft-dark-text-secondary);
}
body.dark-theme .fees-new-rules ul li i {
    color: var(--theme-brand-primary);
}

.fees-note {
    margin-top: var(--pr-space-xl);
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-top: 1px solid var(--theme-brand-primary-alpha-20);
    padding-top: var(--pr-space-lg);
    font-style: italic;
}
body.dark-theme .fees-note {
    color: var(--pr-color-soft-dark-text-tertiary);
    border-top-color: rgba(61, 156, 140, 0.1);
}

/* ============================================================
   5.9.15. МОДАЛКА ЧЕК-ЛИСТА (#checklistModal)
   ============================================================ */

/* --- HEADER --- */
.checklist-header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    margin-bottom: var(--pr-space-lg);
    padding-bottom: var(--pr-space-sm);
    border-bottom: 2px solid var(--theme-brand-primary-alpha-20);
    position: relative;
}

.checklist-header i {
    font-size: 2rem;
    color: var(--theme-brand-primary);
    flex-shrink: 0;
}

.checklist-header h3 {
    font-size: var(--pr-font-size-xl);
    margin: 0;
    color: var(--theme-text-heading);
}

body.dark-theme .checklist-header {
    border-bottom-color: rgba(61, 156, 140, 0.15);
}

body.dark-theme .checklist-header h3 {
    color: var(--pr-color-dark-text-primary);
}

/* --- ПОДСКАЗКА --- */
#checklistBody > p {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-md);
    margin-bottom: var(--pr-space-lg);
}

body.dark-theme #checklistBody > p {
    color: var(--pr-color-dark-text-secondary);
}

/* --- ITEMS --- */
.checklist-items {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-xl);
}

/* --- ITEM --- */
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-md);
    padding: var(--pr-space-sm) var(--pr-space-md);
    background: var(--theme-bg-surface);
    border-radius: var(--theme-radius-card);
    border: 1px solid var(--theme-border-light);
    cursor: pointer;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 56px;
}

.checklist-item:hover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface-hover);
    transform: translateX(4px);
}

.checklist-item:focus-within {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-card);
}

body.dark-theme .checklist-item {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .checklist-item:hover {
    border-color: var(--theme-brand-primary);
    background: var(--pr-color-dark-surface-hover);
}

/* --- CHECKBOX --- */
.checklist-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    margin-top: 2px;
    cursor: pointer;
    background: var(--theme-surface-dropzone);
    border: 2px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    flex-shrink: 0;
    position: relative;
}

.checklist-checkbox:checked {
    background: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.checklist-checkbox:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

body.dark-theme .checklist-checkbox {
    background: rgba(24, 34, 40, 0.5);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .checklist-checkbox:checked {
    background: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
}

/* --- ITEM SPAN --- */
.checklist-item span {
    flex: 1;
    font-size: var(--pr-font-size-md);
    color: var(--theme-text-primary);
    line-height: var(--pr-line-height-normal);
}

.checklist-item span .checklist-hint {
    display: block;
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    margin-top: 2px;
    font-weight: 400;
}

body.dark-theme .checklist-item span {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .checklist-item span .checklist-hint {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.9.15.1. ПРОГРЕСС-БАР - ОСНОВНЫЕ СТИЛИ
   ============================================================ */

.checklist-progress {
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-lg);
    margin: var(--pr-space-lg) 0;
    border: 1px solid var(--theme-border-inverse);
}

body.dark-theme .checklist-progress {
    background: rgba(24, 34, 40, 0.5);
    border-color: var(--pr-color-dark-border);
}

/* ✅ ТРЕК - серый фон */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
    overflow: hidden;
    margin-bottom: var(--pr-space-xs);
    position: relative;
}

body.dark-theme .progress-bar {
    background: var(--pr-color-dark-border);
}

/* ✅ ЗАПОЛНИТЕЛЬ - градиент как у кнопок (единый стиль) */
.progress-fill {
    height: 100%;
    width: 0%;
    /* Используем тот же градиент, что и у btn-primary */
    background: var(--theme-gradient-button) !important;
    transition: width var(--pr-duration-base) var(--pr-ease-out-expo);
    border-radius: var(--theme-radius-full);
    position: relative;
}

/* ✨ ЭФФЕКТ СВЕЧЕНИЯ (как в PlentyONE) */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: progressShine 2s ease-in-out infinite;
    border-radius: var(--theme-radius-full);
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 🎯 ЭФФЕКТ ПРИ ЗАПОЛНЕНИИ (CoreUI style) */
.progress-fill:not([style*='width: 0%']) {
    box-shadow: 0 0 20px rgba(61, 156, 140, 0.3);
}

.progress-text {
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-align: right;
}

body.dark-theme .progress-text {
    color: var(--pr-color-dark-text-secondary);
}

/* --- КНОПКА "ЗАПИСАТЬСЯ" (Tailwind стиль) --- */
#checklistBody > div:last-child {
    display: flex;
    gap: 12px;
    margin-top: var(--pr-space-md);
}

#checklistBody > div:last-child .btn {
    flex: 1;
}

/* 📱 Адаптация для мобильных (Container Queries) */
@container container (max-width: 767px) {
    .checklist-progress {
        padding: var(--pr-space-md);
        margin: var(--pr-space-md) 0;
        border-radius: var(--theme-radius-card);
    }

    .progress-bar {
        height: 6px;
    }

    .progress-text {
        font-size: var(--pr-font-size-xs);
    }

    #checklistBody > div:last-child {
        flex-direction: column;
        gap: 8px;
    }

    #checklistBody > div:last-child .btn {
        width: 100%;
    }
}

@container container (max-width: 479px) {
    .checklist-progress {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .progress-text {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ============================================================
   5.9.15.2. CONTAINER QUERY - АДАПТАЦИЯ ЧЕК-ЛИСТА
   ============================================================ */

@container container (max-width: 767px) {
    .checklist-header {
        gap: var(--pr-space-sm);
        margin-bottom: var(--pr-space-md);
    }

    .checklist-header i {
        font-size: 1.5rem;
        padding: var(--pr-space-2xs);
    }

    .checklist-header h3 {
        font-size: var(--pr-font-size-lg);
    }

    #checklistBody > p {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-md);
    }

    .checklist-items {
        gap: var(--pr-space-xs);
        margin-bottom: var(--pr-space-lg);
    }

    .checklist-item {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        gap: var(--pr-space-sm);
        min-height: 48px;
        border-radius: var(--theme-radius-card);
    }

    .checklist-checkbox {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
        margin-top: 1px;
    }

    .checklist-item span {
        font-size: var(--pr-font-size-sm);
    }

    .checklist-item span .checklist-hint {
        font-size: var(--pr-font-size-2xs);
    }

    .checklist-progress {
        padding: var(--pr-space-md);
        margin: var(--pr-space-md) 0;
        border-radius: var(--theme-radius-card);
    }

    .progress-bar {
        height: 6px;
    }

    .progress-text {
        font-size: var(--pr-font-size-xs);
    }

    #checklistBody > div:last-child {
        flex-direction: column;
        gap: 8px;
        margin-top: var(--pr-space-sm);
    }

    #checklistBody > div:last-child .btn {
        width: 100%;
    }
}

@container container (max-width: 479px) {
    .checklist-header i {
        font-size: 1.2rem;
        padding: var(--pr-space-xs);
    }

    .checklist-header h3 {
        font-size: var(--pr-font-size-md);
    }

    #checklistBody > p {
        font-size: var(--pr-font-size-xs);
    }

    .checklist-item {
        padding: var(--pr-space-xs);
        min-height: 44px;
        border-radius: var(--theme-radius-card);
        gap: var(--pr-space-xs);
    }

    .checklist-checkbox {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        max-width: 18px;
        max-height: 18px;
        background-size: 10px;
    }

    .checklist-checkbox:checked {
        background-size: 10px;
    }

    .checklist-item span {
        font-size: var(--pr-font-size-xs);
    }

    .checklist-item span .checklist-hint {
        font-size: var(--pr-font-size-3xs);
    }

    .checklist-progress {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .progress-text {
        font-size: var(--pr-font-size-2xs);
    }
}
/* ============================================================
   5.9.16. ОБЩИЕ УТИЛИТЫ ДЛЯ МОДАЛОК
   ============================================================ */

.text-gold {
    color: var(--theme-brand-primary);
}
.text-primary {
    color: var(--theme-brand-primary);
}
.flex-1 {
    flex: 1;
}
.flex {
    display: flex;
}
.min-w-180 {
    min-width: 180px;
}
.fw-600 {
    font-weight: 600;
}
.list-none {
    list-style: none;
    padding: 0;
}
.p-0 {
    padding: 0;
}
.gap-6 {
    gap: var(--pr-space-xs);
}
.mb-6 {
    margin-bottom: var(--pr-space-xs);
}
.bg-primary-alpha-10 {
    background: var(--theme-brand-primary-alpha-10);
}
.py-2 {
    padding-top: var(--pr-space-sm);
    padding-bottom: var(--pr-space-sm);
}
.gap-8 {
    gap: var(--pr-space-sm);
}
.mb-12 {
    margin-bottom: var(--pr-space-md);
}
.text-accent {
    color: var(--theme-accent-primary);
}
.fs-1-1 {
    font-size: var(--pr-font-size-lg);
}

/* ============================================================
   5.10. ГРУППА 10: КНОПКИ (Container Queries)
   ============================================================ */

/* ============================================================
   5.10.1. BTN - БАЗОВЫЙ КЛАСС
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-sm);
    padding: var(--pr-space-md) var(--pr-space-xl);
    border-radius: var(--theme-radius-button);
    font-weight: 600;
    font-size: var(--pr-font-size-md);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    letter-spacing: 0.02em;
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
    isolation: isolate;
}

/* Световой эффект при наведении */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    translate: -100% 0;
    transition: translate var(--pr-duration-slower) var(--pr-ease-out-expo);
    pointer-events: none;
    z-index: var(--pr-z-negative);
}

.btn:hover::before {
    translate: 100% 0;
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--theme-brand-primary-alpha-20);
}

/* ============================================================
   5.10.2. BTN-PRIMARY
   ============================================================ */

.btn-primary {
    background: var(--theme-gradient-button);
    color: var(--theme-text-inverse);
    box-shadow: var(--theme-shadow-sm), var(--theme-shadow-glow-primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-primary:hover {
    background: var(--theme-gradient-button-hover);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-md), var(--theme-shadow-glow-primary);
}

.btn-primary:active {
    transform: translateY(0);
}

body.dark-theme .btn-primary {
    box-shadow:
        var(--theme-shadow-md),
        0 0 20px rgba(61, 156, 140, 0.2);
}

/* ============================================================
   5.10.3. BTN-OUTLINE
   ============================================================ */

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}

.btn-outline:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm);
}

body.dark-theme .btn-outline {
    border-color: var(--theme-brand-primary);
    color: var(--theme-brand-primary);
}

body.dark-theme .btn-outline:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   5.10.4. BTN-BLOCK
   ============================================================ */

.btn-block {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   5.10.5. BTN-SM
   ============================================================ */

.btn-sm {
    padding: var(--pr-space-sm) var(--pr-space-lg);
    font-size: var(--pr-font-size-sm);
    min-height: 36px;
    gap: var(--pr-space-2xs);
}

/* ============================================================
   5.10.6. BTN-LG
   ============================================================ */

.btn-lg {
    padding: var(--pr-space-lg) var(--pr-space-2xl);
    font-size: var(--pr-font-size-lg);
    min-height: 56px;
}

/* ============================================================
   5.10.7. BTN-ICON
   ============================================================ */

.btn-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--theme-radius-button);
    padding: 0;
    background: var(--theme-bg-surface);
    border: 1px solid var(--theme-border-medium);
    color: var(--theme-text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-width: 44px;
    min-height: 44px;
}

.btn-icon:hover {
    background: var(--theme-bg-surface-hover);
    color: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
    transform: scale(1.05);
}

body.dark-theme .btn-icon {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .btn-icon:hover {
    background: var(--pr-color-dark-surface-hover);
    color: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   5.10.8. BTN-DISABLED
   ============================================================ */

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.btn:disabled::before,
.btn.disabled::before {
    display: none;
}

/* ============================================================
   5.10.9. BTN-LOADING
   ============================================================ */

.btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--theme-text-inverse);
    border-radius: var(--theme-radius-full);
    animation: spin 0.8s linear infinite;
}

.btn-outline.btn-loading::after {
    border: 2px solid rgba(61, 156, 140, 0.3);
    border-top-color: var(--theme-brand-primary);
}

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

/* ============================================================
   5.10.10. BTN-GHOST
   ============================================================ */

.btn-ghost {
    background: transparent;
    color: var(--theme-text-secondary);
    border: 1px solid transparent;
    padding: var(--pr-space-sm) var(--pr-space-md);
}

.btn-ghost:hover {
    background: var(--theme-bg-surface-hover);
    color: var(--theme-text-primary);
    border-color: var(--theme-border-medium);
    transform: translateY(-1px);
}

body.dark-theme .btn-ghost {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .btn-ghost:hover {
    background: var(--pr-color-dark-surface-hover);
    color: var(--pr-color-dark-text-primary);
    border-color: var(--pr-color-dark-border);
}

/* ============================================================
   5.10.11. BTN-WITH-ICON
   ============================================================ */

.btn .bi,
.btn i {
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

.btn-sm .bi,
.btn-sm i {
    font-size: 1em;
}

.btn-lg .bi,
.btn-lg i {
    font-size: 1.2em;
}

.btn-icon .bi,
.btn-icon i {
    font-size: 1.2rem;
}

/* ============================================================
   5.10.12. BTN-GROUP
   ============================================================ */

.btn-group {
    display: inline-flex;
    gap: 0;
    border-radius: var(--theme-radius-button);
    overflow: hidden;
}

.btn-group .btn {
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-group .btn:first-child {
    border-radius: var(--theme-radius-button) 0 0 var(--theme-radius-button);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--theme-radius-button) var(--theme-radius-button) 0;
    border-right: none;
}

.btn-group .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.btn-group .btn:hover {
    z-index: var(--pr-z-elevate);
}

/* Тёмная тема */
body.dark-theme .btn-group .btn {
    border-right-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   5.10.13. BTN-LINK
   ============================================================ */

.btn-link {
    background: transparent;
    border: none;
    color: var(--theme-text-link);
    padding: var(--pr-space-xs) var(--pr-space-sm);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.btn-link:hover {
    color: var(--theme-text-link-hover);
    text-decoration-thickness: 2px;
}

body.dark-theme .btn-link {
    color: var(--theme-text-link);
}

body.dark-theme .btn-link:hover {
    color: var(--theme-text-link-hover);
}

/* ============================================================
   5.10.14. BTN-GROUP-VERTICAL
   ============================================================ */

.btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--theme-radius-button);
    overflow: hidden;
}

.btn-group-vertical .btn {
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-group-vertical .btn:first-child {
    border-radius: var(--theme-radius-button) var(--theme-radius-button) 0 0;
}

.btn-group-vertical .btn:last-child {
    border-radius: 0 0 var(--theme-radius-button) var(--theme-radius-button);
    border-bottom: none;
}

.btn-group-vertical .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* ============================================================
   5.10.12. TOOL-TAG - СПЕЦИАЛЬНАЯ КНОПКА
   ============================================================ */

.tool-tag {
    background: var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
    padding: var(--pr-space-xs) var(--pr-space-md);
    border-radius: var(--theme-radius-md);
    font-size: var(--pr-font-size-sm);
    cursor: pointer;
    border: 1px solid var(--theme-brand-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    min-height: 44px;
    font-weight: 600;
    box-shadow: var(--theme-shadow-xs);
    text-decoration: none;
    white-space: nowrap;
}

.tool-tag:hover {
    background: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(44, 74, 94, 0.3);
    border-color: var(--theme-brand-secondary-hover);
}

.tool-tag:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
}

.tool-tag .bi,
.tool-tag i {
    font-size: 1em;
    line-height: 1;
}

body.dark-theme .tool-tag {
    background: var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-secondary);
}

body.dark-theme .tool-tag:hover {
    background: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-secondary-hover);
}

/* ============================================================
   5.10.13. PDF-VIEWER-BTN
   ============================================================ */

.pdf-viewer-btn {
    background: var(--theme-brand-secondary);
    border: 1px solid var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
    margin-top: var(--pr-space-md);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border-radius: var(--theme-radius-button);
    padding: var(--pr-space-xs) var(--pr-space-md);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    min-height: 40px;
    box-shadow: var(--theme-shadow-xs);
    text-decoration: none;
    font-size: var(--pr-font-size-sm);
    white-space: nowrap;
}

.pdf-viewer-btn:hover {
    background: var(--theme-brand-secondary-hover);
    border-color: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-sm);
}

.pdf-viewer-btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

.pdf-viewer-btn .bi,
.pdf-viewer-btn i {
    font-size: 1em;
    line-height: 1;
}

body.dark-theme .pdf-viewer-btn {
    background: var(--theme-brand-secondary);
    border-color: var(--theme-brand-secondary);
    color: var(--theme-text-inverse);
}

body.dark-theme .pdf-viewer-btn:hover {
    background: var(--theme-brand-secondary-hover);
    border-color: var(--theme-brand-secondary-hover);
    color: var(--theme-text-inverse);
}

/* ============================================================
   5.11. ГРУППА 11: СТРАНИЦЫ УСЛУГ (Container Queries)
   ============================================================ */

/* ============================================================
   5.11.1. BREADCRUMBS - ХЛЕБНЫЕ КРОШКИ
   ============================================================ */

.breadcrumbs {
    padding: var(--pr-space-md) 0;
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--theme-text-link);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-weight: 500;
}

.breadcrumbs a:hover {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumbs a:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

.breadcrumbs span[aria-current='page'] {
    color: var(--theme-text-primary);
    font-weight: 600;
}

body.dark-theme .breadcrumbs {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .breadcrumbs a {
    color: var(--theme-text-link);
}

body.dark-theme .breadcrumbs a:hover {
    color: var(--theme-text-link-hover);
}

body.dark-theme .breadcrumbs span[aria-current='page'] {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.11.2. SERVICE-HERO - ГЕРОЙ СТРАНИЦЫ УСЛУГИ
   ============================================================ */

.service-hero {
    padding: var(--pr-space-2xl) 0 var(--pr-space-lg);
    background: var(--theme-gradient-brand-vertical);
    position: relative;
    isolation: isolate;
    text-align: center;
}

body.dark-theme .service-hero {
    background: var(--theme-gradient-brand-vertical);
}

/* Декоративная линия внизу */
.service-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.2;
    pointer-events: none;
    z-index: var(--pr-z-negative);
}

.service-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pr-space-md);
}

.service-hero h1 {
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
    font-size: var(--pr-font-size-4xl);
    line-height: var(--pr-line-height-heading);
    color: var(--theme-text-heading);
}

body.dark-theme .service-hero h1 {
    color: var(--pr-color-dark-text-primary);
}

.service-hero-subtitle {
    max-width: 800px;
    text-align: center;
    margin: 0 auto var(--pr-space-md);
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-secondary);
    line-height: var(--pr-line-height-relaxed);
}

body.dark-theme .service-hero-subtitle {
    color: var(--pr-color-dark-text-secondary);
}

/* ✅ hero-subtitle - для страниц услуг (используется в <p class="hero-subtitle">) */
.hero-subtitle {
    max-width: 800px;
    text-align: center;
    margin: 0 auto var(--pr-space-md);
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-secondary);
    line-height: var(--pr-line-height-relaxed);
}

body.dark-theme .hero-subtitle {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.11.2.1. HERO-NAV (внутри service-hero)
   ============================================================ */

.service-hero .hero-nav {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.service-hero .hero-dropdowns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 20px 0;
    width: 100%;
}

.service-hero .hero-dropdowns .dropdown-wrapper {
    flex: 1 1 0;
    min-width: 160px;
    max-width: 220px;
}

.service-hero .hero-dropdowns .dropdown-toggle {
    width: 100%;
}

.service-hero .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.service-hero .hero-actions .btn {
    flex: 1 1 0;
    min-width: 160px;
    max-width: 220px;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    font-size: var(--pr-font-size-md);
    font-weight: 600;
    border-radius: var(--theme-radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* ============================================================
   5.11.2.2. CONTAINER QUERY - АДАПТАЦИЯ ГЕРОЯ УСЛУГИ
   ============================================================ */

@container container (max-width: 1023px) {
    .service-hero {
        padding: var(--pr-space-xl) 0 var(--pr-space-lg);
    }

    .service-hero h1 {
        font-size: var(--pr-font-size-3xl);
        text-align: center;
        margin: 0 auto;
    }

    .service-hero-subtitle,
    .hero-subtitle {
        font-size: var(--pr-font-size-md);
    }

    .service-hero .hero-actions .btn {
        min-width: 140px;
        max-width: 200px;
        padding: 0 16px;
        font-size: var(--pr-font-size-sm);
    }

    .service-hero .hero-dropdowns .dropdown-wrapper {
        min-width: 140px;
        max-width: 200px;
    }

    .service-hero .hero-dropdowns .dropdown-toggle {
        padding: 10px 14px;
        font-size: var(--pr-font-size-sm);
        min-height: 44px;
    }
}

@container container (max-width: 767px) {
    .service-hero {
        padding: var(--pr-space-lg) 0;
    }

    .service-hero h1 {
        font-size: var(--pr-font-size-2xl);
        margin-bottom: var(--pr-space-sm);
        text-align: center;
        margin: 0 auto;
    }

    .service-hero-subtitle,
    .hero-subtitle {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-md);
        padding: 0 var(--pr-container-padding);
    }

    .service-hero .hero-dropdowns {
        flex-direction: column;
        gap: 8px;
        margin: 0 0 16px 0;
    }

    .service-hero .hero-dropdowns .dropdown-wrapper {
        min-width: 100%;
        max-width: 100%;
    }

    .service-hero .hero-dropdowns .dropdown-toggle {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: var(--pr-font-size-sm);
        min-height: 48px;
    }

    .service-hero .hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .service-hero .hero-actions .btn {
        flex: 1 1 100%;
        min-width: unset;
        max-width: unset;
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 14px 20px;
        font-size: var(--pr-font-size-md);
    }

    .service-hero .dropdown-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        min-width: 100%;
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--theme-radius-md);
        padding: 6px 0;
        transform: translateY(-8px) scale(0.96);
        transform-origin: top left;
    }

    .service-hero .dropdown-menu a {
        padding: 12px 16px;
        font-size: var(--pr-font-size-sm);
        min-height: 48px;
    }
}

@container container (max-width: 479px) {
    .service-hero h1 {
        font-size: var(--pr-font-size-xl);
        text-align: center;
        margin: 0 auto;
    }

    .service-hero-subtitle,
    .hero-subtitle {
        font-size: var(--pr-font-size-xs);
    }

    .service-hero .hero-dropdowns .dropdown-toggle {
        padding: 10px 14px;
        font-size: var(--pr-font-size-xs);
        min-height: 44px;
    }

    .service-hero .dropdown-menu {
        max-height: 160px;
        padding: 4px 0;
    }

    .service-hero .dropdown-menu a {
        padding: 10px 14px;
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
    }

    .service-hero .hero-actions .btn {
        font-size: var(--pr-font-size-sm);
        padding: 12px 16px;
        min-height: 44px;
    }
}
/* ============================================================
   5.11.3. SERVICE-CONTENT - ОСНОВНОЙ КОНТЕНТ УСЛУГИ
   ============================================================ */

.service-content {
    padding: var(--pr-space-2xl) 0;
}

/* ============================================================
   5.11.3.1. SERVICE-GRID - СЕТКА
   ============================================================ */

.service-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--pr-space-2xl);
    align-items: start;
}

/* ============================================================
   5.11.3.2. SERVICE-MAIN - ЛЕВАЯ КОЛОНКА
   ============================================================ */

.service-main {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-xl);
}

/* ============================================================
   5.11.3.3. SECTION-TITLE - ЗАГОЛОВКИ РАЗДЕЛОВ
   ============================================================ */

.section-title {
    font-size: var(--pr-font-size-3xl);
    font-weight: 600;
    line-height: var(--pr-line-height-heading);
    color: var(--theme-text-heading);
    letter-spacing: var(--pr-letter-spacing-tight);
    margin-bottom: var(--pr-space-md);
    position: relative;
    padding-bottom: var(--pr-space-sm);
}

body.dark-theme .section-title {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.11.3.4. LAW-LIST - СПИСКИ
   ============================================================ */

.law-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-xs);
}

.law-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-md);
    padding: var(--pr-space-sm) 0;
    border-bottom: 1px solid var(--theme-border-inverse);
    color: var(--theme-text-primary);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
}

.law-list-item:hover {
    border-bottom-color: var(--theme-brand-primary);
    transform: translateX(4px);
}

.law-list-item:last-child {
    border-bottom: none;
}

body.dark-theme .law-list-item {
    border-bottom-color: rgba(61, 156, 140, 0.08);
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .law-list-item:hover {
    border-bottom-color: var(--theme-brand-primary);
}

.list-icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
    min-width: 24px;
    margin-top: 2px;
    flex-shrink: 0;
    transition: transform var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.law-list-item:hover .list-icon {
    transform: scale(1.2);
}

body.dark-theme .list-icon {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.11.3.5. TEXT GRAY
   ============================================================ */

.text-gray-600 {
    color: var(--theme-text-secondary);
}

body.dark-theme .text-gray-600 {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.11.3.6. MT-48 - УТИЛИТА
   ============================================================ */

.mt-48 {
    margin-top: var(--pr-space-4xl);
}

/* ============================================================
   5.11.3.7. CONTAINER QUERY - АДАПТАЦИЯ
   ============================================================ */

@container container (max-width: 1023px) {
    .service-content {
        padding: var(--pr-space-xl) 0;
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: var(--pr-space-xl);
    }

    .section-title {
        font-size: var(--pr-font-size-2xl);
    }

    .section-title::after {
        width: 50px;
    }

    .law-list-item {
        font-size: var(--pr-font-size-sm);
        padding: var(--pr-space-xs) 0;
        gap: var(--pr-space-sm);
    }

    .list-icon {
        font-size: var(--pr-font-size-md);
        min-width: 20px;
    }
}

@container container (max-width: 767px) {
    .service-content {
        padding: var(--pr-space-lg) 0;
    }

    .service-grid {
        gap: var(--pr-space-lg);
    }

    .service-main {
        gap: var(--pr-space-lg);
    }

    .section-title {
        font-size: var(--pr-font-size-xl);
        margin-bottom: var(--pr-space-sm);
        padding-bottom: var(--pr-space-2xs);
    }

    .section-title::after {
        width: 40px;
        height: 2px;
    }

    .law-list-item {
        font-size: var(--pr-font-size-sm);
        padding: var(--pr-space-2xs) 0;
        gap: var(--pr-space-xs);
        line-height: var(--pr-line-height-normal);
    }

    .list-icon {
        font-size: var(--pr-font-size-sm);
        min-width: 18px;
        margin-top: 1px;
    }

    .mt-48 {
        margin-top: var(--pr-space-2xl);
    }
}

@container container (max-width: 479px) {
    .section-title {
        font-size: var(--pr-font-size-lg);
    }

    .law-list-item {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) 0;
    }

    .list-icon {
        font-size: var(--pr-font-size-xs);
        min-width: 16px;
    }

    .mt-48 {
        margin-top: var(--pr-space-xl);
    }
}

/* ============================================================
   5.11.4. SIDEBAR - БОКОВАЯ ПАНЕЛЬ
   ============================================================ */

.sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-lg);
    padding: var(--pr-space-xl);
    background: var(--theme-gradient-sidebar);
    border-radius: var(--theme-radius-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--theme-shadow-xl), var(--theme-shadow-glow-primary);
    isolation: isolate;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--theme-text-inverse);
}

body.dark-theme .sidebar {
    background: var(--theme-gradient-sidebar-dark);
    border-color: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   5.11.4.1. SIDEBAR - ДЕКОРАТИВНАЯ ЛИНИЯ
   ============================================================ */

.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.3;
    z-index: var(--pr-z-negative);
}

/* ============================================================
   5.11.4.2. SIDEBAR-TITLE
   ============================================================ */

.sidebar-title {
    font-size: var(--pr-font-size-xl);
    font-weight: 600;
    color: var(--theme-text-inverse);
    margin: 0;
    line-height: var(--pr-line-height-heading);
    letter-spacing: var(--pr-letter-spacing-tight);
}

.sidebar-title:not(:first-child) {
    margin-top: var(--pr-space-xs);
}

/* ============================================================
   5.11.4.3. SIDEBAR-TEXT
   ============================================================ */

.sidebar-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
    margin: 0 0 var(--pr-space-sm) 0;
    max-width: 100%;
}

body.dark-theme .sidebar-text {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.11.4.4. SIDEBAR-BTN
   ============================================================ */

.sidebar-btn {
    width: 100%;
    justify-content: center;
    margin-top: var(--pr-space-2xs);
}

/* ============================================================
   5.11.4.5. SIDEBAR-DIVIDER
   ============================================================ */

.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: var(--pr-space-md) 0;
}

body.dark-theme .sidebar-divider {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   5.11.4.6. SIDEBAR-LINKS
   ============================================================ */

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-xs);
}

/* ============================================================
   5.11.4.7. SIDEBAR-LINK
   ============================================================ */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    padding: var(--pr-space-sm) var(--pr-space-md);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--pr-font-size-sm);
    font-weight: 500;
    border-radius: var(--theme-radius-md);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border: 1px solid transparent;
    position: relative;
}

.sidebar-link i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-md);
    min-width: 20px;
    transition: transform var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--theme-text-inverse);
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.sidebar-link:hover i {
    transform: scale(1.15);
}

.sidebar-link:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-md);
}

.sidebar-link span:not(.sidebar-link__badge) {
    flex: 1;
}

body.dark-theme .sidebar-link:hover {
    background: rgba(61, 156, 140, 0.08);
    border-color: rgba(61, 156, 140, 0.15);
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.11.4.8. SIDEBAR-LINK - АКТИВНЫЙ
   ============================================================ */

.sidebar-link.active {
    background: var(--theme-brand-primary-alpha-20);
    border-color: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
}

.sidebar-link.active i {
    color: var(--theme-brand-primary);
}

.sidebar-link.active .sidebar-link__badge {
    color: var(--theme-brand-primary);
}

body.dark-theme .sidebar-link.active {
    background: rgba(61, 156, 140, 0.15);
    border-color: var(--theme-brand-primary);
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.11.4.9. SIDEBAR-LINK__BADGE
   ============================================================ */

.sidebar-link__badge {
    font-size: var(--pr-font-size-2xs);
    color: var(--theme-text-tertiary);
    font-weight: 400;
    opacity: 0.7;
    padding-left: var(--pr-space-xs);
    white-space: nowrap;
}

body.dark-theme .sidebar-link__badge {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.11.4.10. SIDEBAR-CONTACTS
   ============================================================ */

.sidebar-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-xs);
    padding-top: var(--pr-space-2xs);
}

/* ============================================================
   5.11.4.11. SIDEBAR-CONTACT
   ============================================================ */

.sidebar-contact {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--pr-font-size-sm);
    padding: var(--pr-space-2xs) 0;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.sidebar-contact i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-md);
    min-width: 20px;
}

.sidebar-contact .contact-icon-max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--theme-brand-primary);
}

.sidebar-contact .contact-icon-max svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sidebar-contact a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-weight: 500;
    word-break: break-word;
}

.sidebar-contact a:hover {
    color: var(--theme-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sidebar-contact a:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-xs);
}

body.dark-theme .sidebar-contact {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .sidebar-contact a {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .sidebar-contact a:hover {
    color: var(--theme-brand-primary);
}

body.dark-theme .sidebar-contact .contact-icon-max {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.11.4.12. CONTAINER QUERY - АДАПТАЦИЯ САЙДБАРА
   ============================================================ */

@container container (max-width: 1023px) {
    .sidebar {
        position: static;
        max-width: 500px;
        margin: 0 auto;
        padding: var(--pr-space-lg);
        border-radius: var(--theme-radius-card);
        gap: var(--pr-space-md);
    }

    .sidebar-title {
        font-size: var(--pr-font-size-lg);
    }

    .sidebar-text {
        font-size: var(--pr-font-size-sm);
    }

    .sidebar-link {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-sm);
    }

    .sidebar-link i {
        font-size: var(--pr-font-size-sm);
        min-width: 18px;
    }

    .sidebar-contacts {
        gap: var(--pr-space-2xs);
    }

    .sidebar-contact {
        font-size: var(--pr-font-size-sm);
    }

    .sidebar-contact i {
        font-size: var(--pr-font-size-sm);
        min-width: 18px;
    }

    .sidebar-divider {
        margin: var(--pr-space-sm) 0;
    }
}

@container container (max-width: 767px) {
    .sidebar {
        padding: var(--pr-space-md);
        gap: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        max-width: 100%;
    }

    .sidebar-title {
        font-size: var(--pr-font-size-md);
        margin: 0;
    }

    .sidebar-text {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-xs);
    }

    .sidebar-link {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
        border-radius: var(--theme-radius-sm);
        min-height: 44px;
    }

    .sidebar-link i {
        font-size: var(--pr-font-size-xs);
        min-width: 16px;
    }

    .sidebar-link__badge {
        font-size: var(--pr-font-size-3xs);
        padding-left: var(--pr-space-2xs);
    }

    .sidebar-btn {
        min-height: 44px;
        font-size: var(--pr-font-size-sm);
        padding: var(--pr-space-sm) var(--pr-space-md);
    }

    .sidebar-divider {
        margin: var(--pr-space-xs) 0;
    }

    .sidebar-contacts {
        gap: var(--pr-space-2xs);
    }

    .sidebar-contact {
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
    }

    .sidebar-contact i {
        font-size: var(--pr-font-size-xs);
        min-width: 16px;
    }

    .sidebar-contact .contact-icon-max {
        width: 16px;
        height: 16px;
    }

    .sidebar-contact a {
        font-size: var(--pr-font-size-xs);
    }
}

@container container (max-width: 479px) {
    .sidebar {
        padding: var(--pr-space-sm);
        gap: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .sidebar-title {
        font-size: var(--pr-font-size-sm);
    }

    .sidebar-text {
        font-size: var(--pr-font-size-xs);
        margin-bottom: var(--pr-space-2xs);
    }

    .sidebar-link {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        font-size: var(--pr-font-size-2xs);
        min-height: 40px;
        border-radius: var(--theme-radius-xs);
    }

    .sidebar-link i {
        font-size: var(--pr-font-size-2xs);
        min-width: 14px;
    }

    .sidebar-btn {
        min-height: 40px;
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) var(--pr-space-sm);
    }

    .sidebar-contact {
        font-size: var(--pr-font-size-2xs);
        padding: var(--pr-space-2xs) 0;
    }

    .sidebar-contact a {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ============================================================
   5.11.5. CASE-MINI - МИНИ-КЕЙСЫ НА СТРАНИЦАХ УСЛУГ
   ============================================================ */

.case-mini {
    background: var(--theme-surface-dropzone);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--theme-border-inverse);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-lg);
    margin-bottom: var(--pr-space-md);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
    overflow: hidden;
}

.case-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0;
    transition: opacity var(--pr-duration-base) var(--pr-ease-out-cubic);
}

.case-mini:hover {
    border-color: var(--theme-brand-primary);
    box-shadow: var(--theme-shadow-md);
    transform: translateY(-4px);
    background: var(--theme-bg-surface);
}

.case-mini:hover::before {
    opacity: 1;
}

.case-mini:focus-within {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-card);
}

body.dark-theme .case-mini {
    background: rgba(24, 34, 40, 0.5);
    border-color: rgba(61, 156, 140, 0.08);
}

body.dark-theme .case-mini:hover {
    border-color: var(--theme-brand-primary);
    background: rgba(34, 50, 56, 0.7);
}

/* ============================================================
   5.11.5.1. CASE-MINI - ХЕДЕР
   ============================================================ */

.case-mini .case-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--pr-space-xs);
    margin-bottom: var(--pr-space-xs);
}

/* ============================================================
   5.11.5.2. CASE-MINI - ЗАГОЛОВОК
   ============================================================ */

.case-mini .case-title {
    font-size: var(--pr-font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
    color: var(--theme-text-heading);
    font-weight: 600;
    margin: 0;
    line-height: var(--pr-line-height-heading);
}

.case-mini .case-title i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-md);
}

body.dark-theme .case-mini .case-title {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .case-mini .case-title i {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.11.5.3. CASE-MINI - БЕЙДЖ
   ============================================================ */

.case-mini .case-badge {
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-tertiary);
    background: var(--theme-bg-surface-hover);
    padding: 2px 12px;
    border-radius: var(--theme-radius-full);
    white-space: nowrap;
    font-weight: 500;
}

body.dark-theme .case-mini .case-badge {
    background: var(--pr-color-dark-surface-hover);
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.11.5.4. CASE-MINI - РЕЗУЛЬТАТ
   ============================================================ */

.case-mini .case-result {
    color: var(--pr-color-mint-dark);
    font-weight: 600;
    margin: var(--pr-space-2xs) 0 var(--pr-space-xs);
    font-size: var(--pr-font-size-md);
    display: flex;
    align-items: center;
    gap: var(--pr-space-2xs);
}

.case-mini .case-result.gold {
    color: var(--pr-color-mint);
}

body.dark-theme .case-mini .case-result {
    color: var(--theme-brand-primary);
}

body.dark-theme .case-mini .case-result.gold {
    color: var(--pr-color-mint);
}

/* ============================================================
   5.11.5.5. CASE-MINI - ТЕКСТ
   ============================================================ */

.case-mini .case-text {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-relaxed);
    margin-bottom: var(--pr-space-sm);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;
}

.case-mini .case-text strong {
    color: var(--theme-brand-primary);
    font-weight: 600;
}

.case-mini .case-text strong.gold {
    color: var(--pr-color-mint);
}

body.dark-theme .case-mini .case-text {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .case-mini .case-text strong {
    color: var(--theme-brand-primary);
}

body.dark-theme .case-mini .case-text strong.gold {
    color: var(--pr-color-mint);
}

/* ============================================================
   5.11.5.6. CASE-MINI - МЕТАДАННЫЕ
   ============================================================ */

.case-mini .case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pr-space-md);
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    margin-bottom: var(--pr-space-sm);
}

.case-mini .case-meta span {
    display: flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    font-weight: 500;
}

.case-mini .case-meta i {
    font-size: 0.9rem;
    color: var(--theme-text-tertiary);
}

.case-mini .case-meta i.primary {
    color: var(--theme-brand-primary);
}

.case-mini .case-meta i.gold {
    color: var(--pr-color-mint);
}

body.dark-theme .case-mini .case-meta {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .case-mini .case-meta i {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .case-mini .case-meta i.primary {
    color: var(--theme-brand-primary);
}

body.dark-theme .case-mini .case-meta i.gold {
    color: var(--pr-color-mint);
}

/* ============================================================
   5.11.5.7. CASE-MINI - КНОПКА PDF
   ============================================================ */

.case-mini .btn-pdf {
    margin-top: 0;
}

/* ============================================================
   5.11.5.8. CONTAINER QUERY - АДАПТАЦИЯ CASE-MINI
   ============================================================ */

@container container (max-width: 1023px) {
    .case-mini {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-sm);
    }

    .case-mini .case-title {
        font-size: var(--pr-font-size-md);
    }

    .case-mini .case-title i {
        font-size: var(--pr-font-size-sm);
    }

    .case-mini .case-result {
        font-size: var(--pr-font-size-sm);
    }

    .case-mini .case-text {
        font-size: var(--pr-font-size-sm);
        line-height: var(--pr-line-height-normal);
    }

    .case-mini .case-meta {
        gap: var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
    }

    .case-mini .case-badge {
        font-size: var(--pr-font-size-xs);
        padding: 1px 10px;
    }
}

@container container (max-width: 767px) {
    .case-mini {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .case-mini .case-header {
        flex-direction: column;
        gap: var(--pr-space-xs);
        margin-bottom: var(--pr-space-2xs);
    }

    .case-mini .case-title {
        font-size: var(--pr-font-size-sm);
        gap: var(--pr-space-2xs);
    }

    .case-mini .case-title i {
        font-size: var(--pr-font-size-xs);
    }

    .case-mini .case-badge {
        font-size: var(--pr-font-size-2xs);
        padding: 1px 8px;
        align-self: flex-start;
    }

    .case-mini .case-result {
        font-size: var(--pr-font-size-sm);
        margin: var(--pr-space-2xs) 0;
    }

    .case-mini .case-text {
        font-size: var(--pr-font-size-xs);
        line-height: var(--pr-line-height-normal);
        margin-bottom: var(--pr-space-xs);
    }

    .case-mini .case-meta {
        gap: var(--pr-space-xs);
        font-size: var(--pr-font-size-2xs);
        margin-bottom: var(--pr-space-xs);
    }

    .case-mini .case-meta span {
        gap: var(--pr-space-2xs);
    }

    .case-mini .case-meta i {
        font-size: 0.75rem;
    }

    .case-mini .btn-pdf {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        min-height: 36px;
    }
}

@container container (max-width: 479px) {
    .case-mini {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .case-mini .case-title {
        font-size: var(--pr-font-size-xs);
    }

    .case-mini .case-title i {
        font-size: var(--pr-font-size-2xs);
    }

    .case-mini .case-badge {
        font-size: var(--pr-font-size-3xs);
        padding: 0 6px;
    }

    .case-mini .case-result {
        font-size: var(--pr-font-size-xs);
    }

    .case-mini .case-text {
        font-size: var(--pr-font-size-2xs);
        line-height: var(--pr-line-height-tight);
    }

    .case-mini .case-meta {
        font-size: var(--pr-font-size-3xs);
        gap: var(--pr-space-2xs);
    }

    .case-mini .btn-pdf {
        font-size: var(--pr-font-size-2xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        min-height: 32px;
    }
}

/* ============================================================
   5.11.5.9. CASE-CARD - ПОЛНОШИРИННЫЕ КЕЙСЫ В .service-main
   ============================================================ */

.service-main .case-card {
    width: 100%;
    flex-shrink: 1;
    margin-bottom: var(--pr-space-lg);
}

.service-main .case-card:last-child {
    margin-bottom: 0;
}

@container container (max-width: 767px) {
    .service-main .case-card {
        margin-bottom: var(--pr-space-md);
    }
}

/* ============================================================
   5.11.6. TL;DR - ИЗВЛЕКАЕМОЕ РЕЗЮМЕ
   ============================================================ */

.tldr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pr-space-lg);
    margin: var(--pr-space-2xl) 0 var(--pr-space-3xl);
}

.tldr-item {
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-lg) var(--pr-space-xl);
    border: 1px solid var(--theme-border-light);
    box-shadow: var(--theme-shadow-xs);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
    overflow: hidden;
}

/* Декоративная линия сверху */
.tldr-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0;
    transition: opacity var(--pr-duration-base) var(--pr-ease-out-cubic);
}

.tldr-item:hover {
    transform: translateY(-4px);
    border-color: var(--theme-brand-primary);
    box-shadow: var(--theme-shadow-md);
}

.tldr-item:hover::before {
    opacity: 1;
}

.tldr-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--theme-radius-full);
    background: var(--theme-brand-primary-alpha-10);
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    margin-bottom: var(--pr-space-sm);
    flex-shrink: 0;
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}

.tldr-item:hover .tldr-item__icon {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    transform: scale(1.05);
}

.tldr-item__label {
    font-size: var(--pr-font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-text-tertiary);
    font-weight: 600;
    display: block;
    margin-bottom: var(--pr-space-2xs);
}

.tldr-item__title {
    font-size: var(--pr-font-size-md);
    font-weight: 600;
    color: var(--theme-text-heading);
    display: block;
    margin-bottom: var(--pr-space-2xs);
    line-height: var(--pr-line-height-tight);
}

.tldr-item__text {
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-secondary);
    line-height: var(--pr-line-height-relaxed);
    margin: 0;
}

/* ===== DARK THEME ===== */

body.dark-theme .tldr-item {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .tldr-item:hover {
    border-color: var(--theme-brand-primary);
    background: var(--pr-color-dark-surface-hover);
}

body.dark-theme .tldr-item__title {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .tldr-item__text {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .tldr-item__label {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.11.6.1. CONTAINER QUERY - АДАПТАЦИЯ TL;DR
   ============================================================ */

@container container (max-width: 1023px) {
    .tldr-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--pr-space-md);
        margin: var(--pr-space-xl) 0 var(--pr-space-2xl);
    }

    .tldr-item {
        padding: var(--pr-space-md) var(--pr-space-lg);
    }

    .tldr-item__title {
        font-size: var(--pr-font-size-sm);
    }

    .tldr-item__text {
        font-size: var(--pr-font-size-xs);
    }
}

@container container (max-width: 767px) {
    .tldr-grid {
        grid-template-columns: 1fr;
        gap: var(--pr-space-sm);
        margin: var(--pr-space-lg) 0 var(--pr-space-xl);
    }

    .tldr-item {
        padding: var(--pr-space-md);
    }

    .tldr-item__icon {
        width: 36px;
        height: 36px;
        font-size: var(--pr-font-size-lg);
        margin-bottom: var(--pr-space-2xs);
    }

    .tldr-item__label {
        font-size: var(--pr-font-size-3xs);
    }

    .tldr-item__title {
        font-size: var(--pr-font-size-sm);
    }

    .tldr-item__text {
        font-size: var(--pr-font-size-xs);
    }
}

@container container (max-width: 479px) {
    .tldr-grid {
        gap: var(--pr-space-2xs);
        margin: var(--pr-space-md) 0 var(--pr-space-lg);
    }

    .tldr-item {
        padding: var(--pr-space-sm);
    }

    .tldr-item__icon {
        width: 32px;
        height: 32px;
        font-size: var(--pr-font-size-md);
    }

    .tldr-item__title {
        font-size: var(--pr-font-size-xs);
    }

    .tldr-item__text {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ============================================================
   5.11.7. CTA-BLOCK - ПРИЗЫВ К ДЕЙСТВИЮ
   ============================================================ */

.cta-block {
    background: var(--theme-gradient-contacts);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-3xl) var(--pr-space-2xl);
    text-align: center;
    color: var(--theme-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--theme-shadow-xl), var(--theme-shadow-glow-primary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Декоративный элемент (световая линия сверху) */
.cta-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0.3;
    border-radius: var(--theme-radius-full);
    z-index: var(--pr-z-negative);
}

/* Эффект при наведении */
.cta-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-2xl), var(--theme-shadow-glow-primary);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ===== ЗАГОЛОВОК ===== */
.cta-block h3 {
    color: var(--theme-text-inverse);
    font-size: var(--pr-font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--pr-space-sm);
    line-height: var(--pr-line-height-heading);
    letter-spacing: var(--pr-letter-spacing-tight);
}

/* ===== ТЕКСТ ===== */
.cta-block p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--pr-space-md);
    max-width: 100%;
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
}

.cta-block p:last-of-type {
    margin-bottom: var(--pr-space-lg);
}

/* ===== МАЛЕНЬКИЙ ТЕКСТ (подпись) ===== */
.cta-block .cta-block__note {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--pr-font-size-sm);
    display: block;
    margin-bottom: var(--pr-space-lg);
    font-weight: 400;
}

/* ===== КНОПКА ===== */
.cta-block .btn {
    margin: 0 auto;
}

/* ============================================================
   5.11.7.1. CONTAINER QUERY - АДАПТАЦИЯ CTA
   ============================================================ */

@container container (max-width: 1023px) {
    .cta-block {
        padding: var(--pr-space-2xl) var(--pr-space-xl);
    }

    .cta-block h3 {
        font-size: var(--pr-font-size-xl);
    }

    .cta-block p {
        font-size: var(--pr-font-size-sm);
    }
}

@container container (max-width: 767px) {
    .cta-block {
        padding: var(--pr-space-xl) var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .cta-block h3 {
        font-size: var(--pr-font-size-lg);
        margin-bottom: var(--pr-space-xs);
    }

    .cta-block p {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-sm);
    }

    .cta-block .cta-block__note {
        font-size: var(--pr-font-size-xs);
        margin-bottom: var(--pr-space-md);
    }

    .cta-block .btn {
        width: 100%;
        justify-content: center;
    }
}

@container container (max-width: 479px) {
    .cta-block {
        padding: var(--pr-space-lg) var(--pr-space-sm);
    }

    .cta-block h3 {
        font-size: var(--pr-font-size-md);
    }

    .cta-block p {
        font-size: var(--pr-font-size-xs);
    }

    .cta-block .cta-block__note {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ============================================================
   5.11.7.2. DARK THEME - НАСЛЕДУЕТСЯ ЧЕРЕЗ ПЕРЕМЕННЫЕ
   ============================================================ */

body.dark-theme .cta-block {
    background: var(--theme-gradient-contacts);
    border-color: rgba(255, 255, 255, 0.04);
}

body.dark-theme .cta-block:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .cta-block::before {
    background: var(--theme-gradient-brand-horizontal);
}
/* ============================================================
   B.1. БАЗОВЫЕ КОМПОНЕНТЫ ДЛЯ СЛУЖЕБНЫХ СТРАНИЦ
   ============================================================ */

/* ============================================================
   B.1.1. BACK-LINK - ССЫЛКА "НАЗАД"
   ============================================================ */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-sm);
    margin: var(--pr-space-xl) 0 var(--pr-space-3xl);
    color: var(--theme-text-link);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    padding: var(--pr-space-md) var(--pr-space-xl);
    border-radius: var(--theme-radius-button);
    background: var(--theme-surface-card);
    border: 1px solid var(--theme-border-light);
    box-shadow: var(--theme-shadow-sm);
}

.back-link:hover {
    background: var(--pr-color-gray-50);
    border-color: var(--theme-brand-primary);
    transform: translateX(-4px);
    box-shadow: var(--theme-shadow-md);
}

.back-link:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-full);
}

body.dark-theme .back-link {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
    color: var(--theme-brand-primary-hover);
}

body.dark-theme .back-link:hover {
    border-color: var(--theme-brand-primary-hover);
    background: var(--pr-color-dark-surface-hover);
}

/* ============================================================
   B.1.2. LAST-UPDATED - ДАТА ОБНОВЛЕНИЯ
   ============================================================ */

.last-updated {
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-sm);
    margin-top: var(--pr-space-4xl);
    padding-top: var(--pr-space-2xl);
    border-top: 1px solid var(--theme-border-light);
    text-align: center;
    font-style: italic;
}

body.dark-theme .last-updated {
    color: var(--pr-color-dark-text-tertiary);
    border-top-color: var(--pr-color-dark-border);
}

/* ============================================================
   B.1.3. ICON-HEADER - ЗАГОЛОВОК С ИКОНКОЙ
   ============================================================ */

.icon-header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    margin-bottom: var(--pr-space-2xl);
    padding-bottom: var(--pr-space-md);
    border-bottom: 2px solid var(--theme-brand-primary-alpha-20);
    position: relative;
}

.icon-header i {
    font-size: 2.5rem;
    color: var(--theme-brand-primary);
    flex-shrink: 0;
}

.icon-header h1 {
    font-size: var(--pr-font-size-4xl);
    margin: 0;
    color: var(--theme-text-heading);
}

body.dark-theme .icon-header {
    border-bottom-color: rgba(61, 156, 140, 0.15);
}

body.dark-theme .icon-header h1 {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   B.1.4. LEGAL-CONTENT - ОБЩИЙ КОНТЕЙНЕР
   ============================================================ */

.legal-content {
    margin: var(--pr-space-3xl) auto;
    padding: var(--pr-space-3xl);
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-card);
    border: 1px solid var(--theme-border-light);
    box-shadow: var(--theme-shadow-sm);
    container-type: inline-size;
    container-name: legal;
}

body.dark-theme .legal-content {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

/* ─── Адаптация ─── */
@container legal (max-width: 767px) {
    .legal-content {
        padding: var(--pr-space-lg);
        margin: var(--pr-space-lg) auto;
        border-radius: var(--theme-radius-card);
    }

    .legal-content .section-title {
        font-size: var(--pr-font-size-xl);
    }

    .legal-content .section-title::after {
        width: 40px;
    }

    .legal-content .icon-header {
        flex-direction: column;
        text-align: center;
        gap: var(--pr-space-sm);
        margin-bottom: var(--pr-space-lg);
    }

    .legal-content .icon-header i {
        font-size: 2rem;
    }

    .legal-content .icon-header h1 {
        font-size: var(--pr-font-size-2xl);
    }

    .legal-content .legal-list li {
        font-size: var(--pr-font-size-sm);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        padding-left: var(--pr-space-lg);
    }

    .legal-content .legal-list li::before {
        width: 5px;
        height: 5px;
        top: var(--pr-space-xs);
    }

    .legal-content .sub-list {
        padding-left: var(--pr-space-md);
    }

    .legal-content .sub-list li {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        padding-left: var(--pr-space-md);
    }

    .legal-content .contact-info {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-md) 0;
    }

    .legal-content .contact-info p {
        font-size: var(--pr-font-size-sm);
        word-break: break-word;
    }

    .legal-content .last-updated {
        margin-top: var(--pr-space-2xl);
        padding-top: var(--pr-space-lg);
        font-size: var(--pr-font-size-xs);
    }
}

@container legal (max-width: 479px) {
    .legal-content {
        padding: var(--pr-space-sm);
        margin: var(--pr-space-sm) auto;
        border-radius: var(--theme-radius-card);
    }

    .legal-content .section-title {
        font-size: var(--pr-font-size-lg);
    }

    .legal-content .icon-header h1 {
        font-size: var(--pr-font-size-xl);
    }

    .legal-content .icon-header i {
        font-size: 1.6rem;
    }

    .legal-content .legal-list li {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        padding-left: var(--pr-space-md);
    }

    .legal-content .legal-list li::before {
        width: 4px;
        height: 4px;
    }

    .legal-content .contact-info p {
        font-size: var(--pr-font-size-xs);
    }

    .legal-content .last-updated {
        font-size: var(--pr-font-size-2xs);
        margin-top: var(--pr-space-xl);
        padding-top: var(--pr-space-md);
    }
}

/* ============================================================
   B.2. ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ
   ============================================================ */

/* ============================================================
   B.2.1. LEGAL-LIST - СПИСКИ В СЛУЖЕБНЫХ СТРАНИЦАХ
   ============================================================ */

.legal-list {
    list-style: none;
    padding: 0;
    margin: var(--pr-space-md) 0 var(--pr-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
}

.legal-list li {
    padding: var(--pr-space-sm) var(--pr-space-md);
    padding-left: var(--pr-space-2xl);
    position: relative;
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
    border-left: 3px solid transparent;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.legal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--pr-space-sm);
    width: 6px;
    height: 6px;
    border-radius: var(--theme-radius-full);
    background: var(--theme-brand-primary);
    opacity: 0.5;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.legal-list li:hover {
    border-left-color: var(--theme-brand-primary);
    background: var(--theme-brand-primary-alpha-5);
}

.legal-list li:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

body.dark-theme .legal-list li {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .legal-list li:hover {
    background: rgba(61, 156, 140, 0.05);
}

/* ============================================================
   B.2.2. SUB-LIST - ВЛОЖЕННЫЕ СПИСКИ
   ============================================================ */

.sub-list {
    list-style: none;
    padding: var(--pr-space-xs) 0 var(--pr-space-xs) var(--pr-space-xl);
    margin: var(--pr-space-xs) 0;
}

.sub-list li {
    padding: var(--pr-space-2xs) var(--pr-space-sm);
    padding-left: var(--pr-space-lg);
    font-size: var(--pr-font-size-sm);
    border-left: none !important;
    background: transparent !important;
}

.sub-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: var(--pr-space-2xs);
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-md);
    opacity: 0.7;
}

.sub-list li:hover {
    background: transparent !important;
    border-left: none !important;
}

.sub-list li:hover::before {
    opacity: 1;
    transform: none;
}

/* ============================================================
   NOTE - Важное уведомление
   ============================================================ */

.note {
    padding: var(--pr-space-xl);
    background: var(--theme-brand-primary-alpha-10);
    border-radius: var(--theme-radius-card);
    margin: var(--pr-space-xl) 0;
    container-type: inline-size;
    container-name: note;
}

.note__header {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-md);
}

.note__icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    flex-shrink: 0;
    margin-top: 2px;
}

.note__title {
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-heading);
    line-height: var(--pr-line-height-heading);
}

.note__text {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
    margin-bottom: var(--pr-space-lg);
    max-width: 100%;
}

.note__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--pr-space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
}

.note__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-sm);
    padding: var(--pr-space-xs) var(--pr-space-sm);
    border-radius: var(--theme-radius-sm);
    transition: background var(--pr-duration-fast) var(--pr-ease-out-cubic);
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
}

.note__list-item:hover {
    background: var(--theme-brand-primary-alpha-5);
}

.note__list-icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
    min-width: 24px;
    margin-top: 2px;
    flex-shrink: 0;
}

.note__list-item strong {
    color: var(--theme-text-heading);
    font-weight: 600;
}

.note__sublist {
    list-style: none;
    padding: var(--pr-space-xs) 0 var(--pr-space-xs) var(--pr-space-xl);
    margin: var(--pr-space-xs) 0;
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-2xs);
}

.note__sublist-item {
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-normal);
    padding-left: var(--pr-space-xs);
}

.note__sublist-item strong {
    color: var(--theme-text-secondary);
    font-weight: 600;
}

.note__divider {
    border: none;
    border-top: 1px solid var(--theme-border-light);
    margin: var(--pr-space-lg) 0;
}

.note__subtitle {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-md);
    color: var(--theme-text-heading);
    font-size: var(--pr-font-size-md);
}

.note__subtitle-icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
    flex-shrink: 0;
}

.note__footer {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-sm);
    margin-top: var(--pr-space-lg);
    padding: var(--pr-space-md);
    background: var(--theme-brand-primary-alpha-5);
    border-radius: var(--theme-radius-md);
    border: 1px solid var(--theme-brand-primary-alpha-20);
}

.note__footer-icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    flex-shrink: 0;
    margin-top: 2px;
}

.note__footer-text {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-relaxed);
}

/* ─── Тёмная тема ─── */

body.dark-theme .note {
    background: rgba(61, 156, 140, 0.08);
    border-left-color: var(--theme-brand-primary);
}

body.dark-theme .note__title {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .note__text {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .note__list-item {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .note__list-item:hover {
    background: rgba(61, 156, 140, 0.05);
}

body.dark-theme .note__list-item strong {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .note__sublist-item {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .note__sublist-item strong {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .note__divider {
    border-top-color: var(--pr-color-dark-border);
}

body.dark-theme .note__subtitle {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .note__footer {
    background: rgba(61, 156, 140, 0.05);
    border-color: rgba(61, 156, 140, 0.1);
}

body.dark-theme .note__footer-text {
    color: var(--pr-color-dark-text-secondary);
}

/* ─── Container Query адаптация ─── */

@container note (max-width: 767px) {
    .note {
        padding: var(--pr-space-md);
        margin: var(--pr-space-md) 0;
        border-radius: var(--theme-radius-card);
    }

    .note__header {
        gap: var(--pr-space-xs);
        margin-bottom: var(--pr-space-sm);
        flex-wrap: wrap;
    }

    .note__icon {
        font-size: var(--pr-font-size-lg);
    }

    .note__title {
        font-size: var(--pr-font-size-md);
    }

    .note__text {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-md);
    }

    .note__list {
        gap: var(--pr-space-xs);
        margin-bottom: var(--pr-space-md);
    }

    .note__list-item {
        padding: var(--pr-space-xs);
        font-size: var(--pr-font-size-sm);
        gap: var(--pr-space-xs);
        flex-wrap: wrap;
    }

    .note__list-icon {
        font-size: var(--pr-font-size-md);
        min-width: 20px;
    }

    .note__sublist {
        padding-left: var(--pr-space-md);
        gap: var(--pr-space-2xs);
        width: 100%;
    }

    .note__sublist-item {
        font-size: var(--pr-font-size-xs);
    }

    .note__divider {
        margin: var(--pr-space-md) 0;
    }

    .note__subtitle {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-sm);
        flex-wrap: wrap;
    }

    .note__subtitle-icon {
        font-size: var(--pr-font-size-md);
    }

    .note__footer {
        flex-direction: column;
        gap: var(--pr-space-xs);
        padding: var(--pr-space-sm);
        margin-top: var(--pr-space-md);
        border-radius: var(--theme-radius-sm);
    }

    .note__footer-icon {
        font-size: var(--pr-font-size-lg);
    }

    .note__footer-text {
        font-size: var(--pr-font-size-xs);
    }
}

@container note (max-width: 479px) {
    .note {
        padding: var(--pr-space-sm);
        margin: var(--pr-space-sm) 0;
        border-radius: var(--theme-radius-card);
    }

    .note__header {
        gap: var(--pr-space-2xs);
        margin-bottom: var(--pr-space-2xs);
    }

    .note__icon {
        font-size: var(--pr-font-size-md);
    }

    .note__title {
        font-size: var(--pr-font-size-sm);
    }

    .note__text {
        font-size: var(--pr-font-size-xs);
        margin-bottom: var(--pr-space-sm);
    }

    .note__list-item {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs);
        gap: var(--pr-space-2xs);
    }

    .note__list-icon {
        font-size: var(--pr-font-size-sm);
        min-width: 16px;
    }

    .note__sublist-item {
        font-size: var(--pr-font-size-2xs);
        padding-left: var(--pr-space-2xs);
    }

    .note__subtitle {
        font-size: var(--pr-font-size-xs);
    }

    .note__footer-text {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ============================================================
   B.2.4. CONTACT-INFO - РЕКВИЗИТЫ
   ============================================================ */

.contact-info {
    padding: var(--pr-space-xl);
    background: var(--theme-bg-surface-hover);
    border-radius: var(--theme-radius-card);
    border: 1px solid var(--theme-border-light);
    margin: var(--pr-space-xl) 0;
}

.contact-info p {
    margin-bottom: var(--pr-space-xs);
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-md);
}

.contact-info p:last-child {
    margin-bottom: 0;
}

.contact-info strong {
    color: var(--theme-text-primary);
    font-weight: 600;
}

.contact-info a {
    color: var(--theme-text-link);
    text-decoration: none;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.contact-info a:hover {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
}

body.dark-theme .contact-info {
    background: var(--pr-color-dark-surface-hover);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .contact-info p {
    color: var(--pr-color-dark-text-secondary);
}

body.dark-theme .contact-info strong {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   B.3. ПОЛИТИКА COOKIE
   ============================================================ */

/* ============================================================
   B.3.1. BADGE-PRIMARY - КРУГЛЫЙ БЕЙДЖ
   ============================================================ */

.badge-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-radius: var(--theme-radius-full);
    font-size: var(--pr-font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

body.dark-theme .badge-primary {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
}

/* ============================================================
   B.3.2. BADGE-YANDEX / BADGE-GOOGLE - БЕЙДЖИ ДЛЯ КОМПАНИЙ
   ============================================================ */

.badge-yandex,
.badge-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: var(--theme-radius-xs);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    height: 22px;
}

.badge-yandex {
    background: #fc3f1d;
    color: #ffffff;
}

.badge-google {
    background: #4285f4;
    color: #ffffff;
}

/* ============================================================
   B.3.3. FLEX-ALIGN-START - УТИЛИТА ДЛЯ ВЫРАВНИВАНИЯ
   ============================================================ */

.flex-align-start {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-md);
}

/* ============================================================
   B.4. ЛИЦЕНЗИИ
   ============================================================ */

/* ============================================================
   B.4.1. LICENSES-CONTENT - КОНТЕЙНЕР
   ============================================================ */

.licenses-content {
    margin: var(--pr-space-4xl) auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ============================================================
   B.4.2. LICENSES-HEADER - ЗАГОЛОВОК СТРАНИЦЫ
   ============================================================ */

.licenses-header {
    text-align: center;
    margin-bottom: var(--pr-space-4xl);
}

.licenses-header i {
    font-size: 3rem;
    color: var(--theme-brand-primary);
    margin-bottom: var(--pr-space-lg);
}

.licenses-header h1 {
    font-size: var(--pr-font-size-4xl);
    margin: 0 0 var(--pr-space-lg);
    color: var(--theme-text-heading);
}

.licenses-header p {
    max-width: 800px;
    margin: 0 auto;
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-lg);
}

body.dark-theme .licenses-header h1 {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .licenses-header p {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   B.4.3. LICENSE-CARD - КАРТОЧКА ЛИЦЕНЗИИ
   ============================================================ */

.license-card {
    margin: var(--pr-space-3xl) 0;
    padding: var(--pr-space-3xl);
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-2xl);
    border: 2px solid var(--theme-brand-primary-alpha-20);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    position: relative;
    overflow: hidden;
    box-shadow: var(--theme-shadow-lg);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.license-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-brand-primary);
    box-shadow: var(--theme-shadow-xl);
}

body.dark-theme .license-card {
    background: var(--pr-color-dark-surface-elevated);
    border-color: var(--theme-brand-primary-alpha-30);
}

/* ============================================================
   B.4.4. LICENSE-CARD--AUTHOR
   ============================================================ */

.license-card--author {
    border: 2px solid var(--pr-color-mint-alpha-30);
    background: linear-gradient(145deg, var(--theme-surface-card), var(--pr-color-gray-50));
    margin-top: var(--pr-space-4xl);
}

.license-card--author:hover {
    border-color: var(--pr-color-mint);
    box-shadow: 0 20px 40px -12px rgba(61, 156, 140, 0.3);
}

.license-card--author .license-header i {
    color: var(--pr-color-mint);
}

.license-card--author .license-header h2 {
    color: var(--pr-color-mint);
}

.license-card--author .meta-item i {
    color: var(--pr-color-mint);
}

body.dark-theme .license-card--author {
    background: linear-gradient(
        145deg,
        var(--pr-color-dark-surface-elevated),
        var(--pr-color-dark-surface)
    );
    border-color: var(--pr-color-mint-alpha-40);
}

/* ============================================================
   B.4.5. LICENSE-HEADER
   ============================================================ */

.license-header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-lg);
    margin-bottom: var(--pr-space-2xl);
    cursor: pointer;
    padding: var(--pr-space-sm) 0;
    border-bottom: 1px solid var(--theme-border-light);
    user-select: none;
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
}

.license-header i {
    font-size: 1.8rem;
    color: var(--theme-brand-primary);
    transition: transform var(--pr-duration-base) var(--pr-ease-out-expo);
}

.license-header:hover i {
    transform: rotate(90deg);
}

.license-header h2 {
    margin: 0;
    font-size: var(--pr-font-size-2xl);
    color: var(--theme-text-heading);
}

body.dark-theme .license-header {
    border-bottom-color: var(--pr-color-dark-border);
}

body.dark-theme .license-header h2 {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   B.4.6. LICENSE-META
   ============================================================ */

.license-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--pr-space-xl);
    margin: var(--pr-space-2xl) 0;
    padding: var(--pr-space-xl);
    background: var(--pr-color-gray-50);
    border-radius: var(--theme-radius-xl);
    border: 1px solid var(--theme-border-light);
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
}

body.dark-theme .license-meta {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

/* ============================================================
   B.4.7. META-ITEM
   ============================================================ */

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    font-size: var(--pr-font-size-md);
}

.meta-item i {
    color: var(--theme-accent-primary);
    font-size: var(--pr-font-size-xl);
    min-width: 24px;
}

.meta-item a {
    color: var(--theme-text-link);
    text-decoration: none;
    word-break: break-all;
}

.meta-item a:hover {
    text-decoration: underline;
}

body.dark-theme .meta-item i {
    color: var(--theme-accent-primary);
}

body.dark-theme .meta-item a {
    color: var(--theme-text-link);
}

/* ============================================================
   B.4.8. LICENSE-TEXT
   ============================================================ */

.license-text {
    margin-top: var(--pr-space-2xl);
    padding: var(--pr-space-2xl);
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-xl);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--pr-font-size-sm);
    line-height: var(--pr-line-height-normal);
    color: var(--theme-text-secondary);
    white-space: pre-wrap;
    border: 1px solid var(--theme-border-light);
    max-height: 400px;
    overflow-y: auto;
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
}

.license-text::-webkit-scrollbar {
    width: 8px;
}

.license-text::-webkit-scrollbar-track {
    background: var(--pr-color-gray-100);
    border-radius: var(--theme-radius-full);
}

.license-text::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
}

body.dark-theme .license-text {
    background: var(--pr-color-dark-surface-elevated);
    color: var(--pr-color-dark-text-secondary);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .license-text::-webkit-scrollbar-track {
    background: var(--pr-color-dark-border);
}

body.dark-theme .license-text::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
}

/* ============================================================
   B.4.9. LEGAL-DECLARATION
   ============================================================ */

.legal-declaration {
    margin-top: var(--pr-space-2xl);
    padding: var(--pr-space-xl);
    background: var(--theme-brand-primary-alpha-5);
    border-radius: var(--theme-radius-xl);
    border: 1px solid var(--theme-brand-primary-alpha-20);
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
}

.legal-declaration__header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-md);
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-heading);
}

.legal-declaration__header i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
}

.legal-declaration p {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
    margin-bottom: var(--pr-space-md);
}

.legal-declaration p:last-child {
    margin-bottom: 0;
}

.legal-declaration .text-gold {
    color: var(--theme-brand-primary);
}

.legal-declaration a {
    color: var(--theme-text-link);
    text-decoration: none;
    font-weight: 500;
}

.legal-declaration a:hover {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
}

.legal-declaration__footer {
    margin-top: var(--pr-space-md);
    padding-top: var(--pr-space-md);
    border-top: 1px solid var(--theme-border-light);
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
}

.legal-declaration__footer i:first-child {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
    flex-shrink: 0;
}

body.dark-theme .legal-declaration__footer {
    border-top-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-secondary);
}
/* ============================================================
   B.5. АДАПТАЦИЯ СЛУЖЕБНЫХ СТРАНИЦ
   ============================================================ */

@container container (max-width: 1023px) {
    .legal-content {
        padding: var(--pr-space-2xl);
        margin: var(--pr-space-xl) auto;
        border-radius: var(--theme-radius-card);
    }

    .icon-header h1 {
        font-size: var(--pr-font-size-3xl);
    }

    .icon-header i {
        font-size: 2rem;
        padding: var(--pr-space-md);
    }

    .licenses-content {
        margin: var(--pr-space-2xl) auto;
    }

    .licenses-header h1 {
        font-size: var(--pr-font-size-3xl);
    }

    .license-card {
        padding: var(--pr-space-xl);
        margin: var(--pr-space-xl) 0;
        border-radius: var(--theme-radius-xl);
    }

    .license-card--author {
        margin-top: var(--pr-space-3xl);
    }

    .license-header h2 {
        font-size: var(--pr-font-size-xl);
    }

    .license-meta {
        grid-template-columns: 1fr 1fr;
        gap: var(--pr-space-md);
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-lg);
    }

    .meta-item {
        font-size: var(--pr-font-size-sm);
    }

    .meta-item i {
        font-size: var(--pr-font-size-lg);
    }

    .legal-list li {
        font-size: var(--pr-font-size-sm);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        padding-left: var(--pr-space-xl);
    }

    .note {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-md) 0;
    }

    .note ul li {
        font-size: var(--pr-font-size-sm);
    }

    .contact-info {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-md) 0;
    }

    .contact-info p {
        font-size: var(--pr-font-size-sm);
    }

    .legal-declaration {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-lg);
    }

    .legal-declaration p {
        font-size: var(--pr-font-size-sm);
    }
}

@container container (max-width: 767px) {
    .back-link {
        margin: var(--pr-space-md) 0 var(--pr-space-xl);
        padding: var(--pr-space-sm) var(--pr-space-md);
        font-size: var(--pr-font-size-sm);
        border-radius: var(--theme-radius-button);
        width: 100%;
        justify-content: center;
    }

    .last-updated {
        margin-top: var(--pr-space-2xl);
        padding-top: var(--pr-space-lg);
        font-size: var(--pr-font-size-xs);
    }

    .legal-content {
        padding: var(--pr-space-lg);
        margin: var(--pr-space-lg) auto;
        border-radius: var(--theme-radius-card);
    }

    .icon-header {
        flex-direction: column;
        text-align: center;
        gap: var(--pr-space-sm);
        margin-bottom: var(--pr-space-lg);
    }

    .icon-header::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .icon-header h1 {
        font-size: var(--pr-font-size-2xl);
    }

    .icon-header i {
        font-size: 1.8rem;
        padding: var(--pr-space-sm);
    }

    .legal-list li {
        font-size: var(--pr-font-size-sm);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        padding-left: var(--pr-space-lg);
    }

    .legal-list li::before {
        top: var(--pr-space-xs);
        width: 5px;
        height: 5px;
    }

    .sub-list {
        padding-left: var(--pr-space-md);
    }

    .sub-list li {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        padding-left: var(--pr-space-md);
    }

    .note {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-sm) 0;
    }

    .note p {
        font-size: var(--pr-font-size-sm);
    }

    .note ul li {
        font-size: var(--pr-font-size-sm);
        gap: var(--pr-space-xs);
        padding: var(--pr-space-xs) 0;
    }

    .note ul li i {
        font-size: var(--pr-font-size-md);
        min-width: 20px;
    }

    .contact-info {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-sm) 0;
    }

    .contact-info p {
        font-size: var(--pr-font-size-sm);
        word-break: break-word;
    }

    .badge-primary {
        min-width: 24px;
        height: 24px;
        font-size: var(--pr-font-size-2xs);
        padding: 0 6px;
    }

    .badge-yandex,
    .badge-google {
        font-size: 8px;
        padding: 1px 6px;
        height: 18px;
    }

    .flex-align-start {
        gap: var(--pr-space-sm);
    }

    .licenses-content {
        margin: var(--pr-space-lg) auto;
        padding: 0 var(--pr-container-padding);
    }

    .licenses-header {
        margin-bottom: var(--pr-space-2xl);
    }

    .licenses-header i {
        font-size: 2.5rem;
        padding: var(--pr-space-md);
    }

    .licenses-header h1 {
        font-size: var(--pr-font-size-2xl);
    }

    .licenses-header p {
        font-size: var(--pr-font-size-md);
    }

    .license-card {
        padding: var(--pr-space-lg);
        margin: var(--pr-space-lg) 0;
        border-radius: var(--theme-radius-card);
    }

    .license-card--author {
        margin-top: var(--pr-space-2xl);
    }

    .license-header {
        gap: var(--pr-space-sm);
        margin-bottom: var(--pr-space-lg);
    }

    .license-header h2 {
        font-size: var(--pr-font-size-lg);
    }

    .license-meta {
        grid-template-columns: 1fr;
        gap: var(--pr-space-sm);
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .meta-item {
        font-size: var(--pr-font-size-sm);
        gap: var(--pr-space-2xs);
    }

    .meta-item i {
        font-size: var(--pr-font-size-md);
        min-width: 20px;
    }

    .license-text {
        padding: var(--pr-space-md);
        font-size: var(--pr-font-size-xs);
        max-height: 300px;
        border-radius: var(--theme-radius-md);
    }

    .legal-declaration {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-md);
    }

    .legal-declaration__header {
        font-size: var(--pr-font-size-md);
        flex-wrap: wrap;
    }

    .legal-declaration p {
        font-size: var(--pr-font-size-sm);
    }

    .legal-declaration__footer {
        font-size: var(--pr-font-size-xs);
        flex-wrap: wrap;
        gap: var(--pr-space-2xs);
    }
}

@container container (max-width: 479px) {
    .icon-header h1 {
        font-size: var(--pr-font-size-xl);
    }

    .icon-header i {
        font-size: 1.5rem;
        padding: var(--pr-space-xs);
    }

    .legal-list li {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        padding-left: var(--pr-space-md);
    }

    .legal-list li::before {
        top: var(--pr-space-xs);
        width: 4px;
        height: 4px;
    }

    .note {
        padding: var(--pr-space-xs);
        border-left-width: 3px;
        border-radius: var(--theme-radius-card);
    }

    .note p {
        font-size: var(--pr-font-size-xs);
    }

    .note ul li {
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
        padding: var(--pr-space-2xs) 0;
    }

    .note ul li i {
        font-size: var(--pr-font-size-sm);
        min-width: 16px;
    }

    .contact-info {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .contact-info p {
        font-size: var(--pr-font-size-xs);
    }

    .licenses-header h1 {
        font-size: var(--pr-font-size-xl);
    }

    .licenses-header p {
        font-size: var(--pr-font-size-sm);
    }

    .license-card {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-md) 0;
    }

    .license-header h2 {
        font-size: var(--pr-font-size-md);
    }

    .license-header i {
        font-size: 1.3rem;
    }

    .license-text {
        padding: var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
        max-height: 200px;
        border-radius: var(--theme-radius-sm);
    }

    .legal-declaration {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-sm);
    }

    .legal-declaration__header {
        font-size: var(--pr-font-size-sm);
        gap: var(--pr-space-2xs);
    }

    .legal-declaration p {
        font-size: var(--pr-font-size-xs);
    }

    .legal-declaration__footer {
        font-size: var(--pr-font-size-2xs);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pr-space-2xs);
    }

    .last-updated {
        font-size: var(--pr-font-size-2xs);
        margin-top: var(--pr-space-xl);
        padding-top: var(--pr-space-md);
    }

    .back-link {
        padding: var(--pr-space-xs) var(--pr-space-md);
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
    }
}

/* ============================================================
   5.12. ГРУППА 12: ОФЛАЙН-ПОМОЩНИК (Container Queries)
   ============================================================ */

/* ============================================================
   5.12.1. OFFLINE-HUB - ОСНОВНОЙ КОНТЕЙНЕР
   ============================================================ */

.offline-hub {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: var(--pr-space-xl) var(--pr-container-padding);
    background: var(--theme-gradient-brand-vertical);
    position: relative;
    isolation: isolate;
}

body.dark-theme .offline-hub {
    background: var(--theme-gradient-brand-vertical);
}

.offline-hub::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 30% 50%,
        var(--theme-brand-primary-alpha-10) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: var(--pr-z-negative);
}

/* ============================================================
   5.12.2. OFFLINE-CARD - КАРТОЧКА ОФЛАЙН-ПОМОЩНИКА
   ============================================================ */

.offline-card {
    background: var(--theme-surface-modal);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: var(--theme-radius-2xl);
    padding: var(--pr-space-4xl);
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-shadow:
        var(--theme-shadow-2xl),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    border: 1px solid var(--theme-border-inverse);
    animation: offlineCardSlideUp var(--pr-duration-slower) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes offlineCardSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.dark-theme .offline-card {
    background: rgba(24, 34, 40, 0.95);
    border-color: rgba(61, 156, 140, 0.08);
}

/* ============================================================
   5.12.3. OFFLINE-HEADER - ЗАГОЛОВОК
   ============================================================ */

.offline-header {
    margin-bottom: var(--pr-space-2xl);
}

/* ============================================================
   5.12.4. OFFLINE-ICON - ИКОНКА
   ============================================================ */

.offline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: var(--theme-brand-primary);
    background: var(--theme-brand-primary-alpha-10);
    width: 100px;
    height: 100px;
    border-radius: var(--theme-radius-full);
    margin-bottom: var(--pr-space-xl);
    animation: offlinePulse 2.5s ease-in-out infinite;
    transition: transform var(--pr-duration-base) var(--pr-ease-out-expo);
}

.offline-icon:hover {
    transform: scale(1.05) rotate(-5deg);
}

@keyframes offlinePulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 var(--theme-brand-primary-alpha-20);
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
        box-shadow: 0 0 40px 10px var(--theme-brand-primary-alpha-10);
    }
}

body.dark-theme .offline-icon {
    background: rgba(61, 156, 140, 0.15);
    color: var(--theme-brand-primary);
}

.offline-header h1 {
    font-size: var(--pr-font-size-4xl);
    color: var(--theme-text-heading);
    margin: 0 0 var(--pr-space-sm);
    line-height: var(--pr-line-height-heading);
}

body.dark-theme .offline-header h1 {
    color: var(--pr-color-dark-text-primary);
}

.offline-header p {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-lg);
    margin: 0;
    max-width: 100%;
}

body.dark-theme .offline-header p {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.12.5. OFFLINE-ACTIONS - КНОПКИ
   ============================================================ */

.offline-actions {
    display: flex;
    gap: var(--pr-space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin: var(--pr-space-2xl) 0 var(--pr-space-xl);
}

.offline-actions .btn {
    min-width: 180px;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    font-size: var(--pr-font-size-md);
    font-weight: 600;
    border-radius: var(--theme-radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-sm);
}

/* ============================================================
   5.12.6. EMERGENCY-SECTION - БЛОК ЭКСТРЕННЫХ ПАМЯТОК
   ============================================================ */

.emergency-section {
    margin-top: var(--pr-space-3xl);
    padding-top: var(--pr-space-2xl);
    border-top: 1px solid var(--theme-border-inverse);
    text-align: left;
}

body.dark-theme .emergency-section {
    border-top-color: rgba(61, 156, 140, 0.08);
}

.emergency-section h2 {
    font-size: var(--pr-font-size-xl);
    color: var(--theme-text-heading);
    display: flex;
    align-items: center;
    gap: var(--pr-space-sm);
    margin-bottom: var(--pr-space-lg);
}

.emergency-section h2 i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-2xl);
}

body.dark-theme .emergency-section h2 {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.12.7. EMERGENCY-GRID - СЕТКА КАРТОЧЕК
   ============================================================ */

.emergency-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pr-space-lg);
}

/* ============================================================
   5.12.8. EMERGENCY-CARD - КАРТОЧКА ПАМЯТКИ
   ============================================================ */

.emergency-card {
    background: var(--theme-bg-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-lg);
    border: 1px solid var(--theme-border-inverse);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
}

.emergency-card:hover {
    border-color: var(--theme-brand-primary);
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-md);
}

.emergency-card:focus-within {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-card);
}

body.dark-theme .emergency-card {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .emergency-card:hover {
    border-color: var(--theme-brand-primary);
}

.emergency-card h3 {
    font-size: var(--pr-font-size-md);
    color: var(--theme-text-heading);
    margin: 0 0 var(--pr-space-xs);
    display: flex;
    align-items: center;
    gap: var(--pr-space-xs);
}

.emergency-card h3 i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-lg);
}

body.dark-theme .emergency-card h3 {
    color: var(--pr-color-dark-text-primary);
}

.emergency-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-2xs);
    flex: 1;
}

.emergency-card ul li {
    font-size: var(--pr-font-size-sm);
    color: var(--theme-text-secondary);
    line-height: var(--pr-line-height-normal);
    padding-left: var(--pr-space-lg);
    position: relative;
}

.emergency-card ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--theme-brand-primary);
    font-weight: 700;
}

body.dark-theme .emergency-card ul li {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.12.9. EMERGENCY-CARD__PHONE - ТЕЛЕФОННЫЙ НОМЕР В КАРТОЧКЕ
   ============================================================ */

.emergency-card__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-2xs);
    margin-top: var(--pr-space-sm);
    padding: var(--pr-space-2xs) var(--pr-space-sm);
    background: var(--theme-brand-primary-alpha-10);
    border-radius: var(--theme-radius-button);
    color: var(--theme-brand-primary);
    font-weight: 600;
    font-size: var(--pr-font-size-sm);
    text-decoration: none;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    align-self: flex-start;
}

.emergency-card__phone:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    transform: translateX(4px);
}

.emergency-card__phone:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-full);
}

body.dark-theme .emergency-card__phone {
    background: rgba(61, 156, 140, 0.15);
    color: var(--theme-brand-primary);
}

body.dark-theme .emergency-card__phone:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
}

/* ============================================================
   5.12.10. OFFLINE-CONTACT - КОНТАКТНЫЙ БЛОК
   ============================================================ */

.offline-contact {
    margin-top: var(--pr-space-2xl);
    padding-top: var(--pr-space-xl);
    border-top: 1px solid var(--theme-border-inverse);
    text-align: center;
}

body.dark-theme .offline-contact {
    border-top-color: rgba(61, 156, 140, 0.08);
}

/* ============================================================
   5.12.11. OFFLINE-CONTACT__PHONE - ТЕЛЕФОН
   ============================================================ */

.offline-contact__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-sm);
    font-size: var(--pr-font-size-3xl);
    font-weight: 700;
    color: var(--theme-brand-primary);
    text-decoration: none;
    padding: var(--pr-space-sm) var(--pr-space-xl);
    border-radius: var(--theme-radius-button);
    border: 2px solid var(--theme-brand-primary-alpha-20);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}

.offline-contact__phone:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
    transform: scale(1.02);
    box-shadow: var(--theme-shadow-md), var(--theme-shadow-glow-primary);
}

.offline-contact__phone:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-radius: var(--theme-radius-full);
}

body.dark-theme .offline-contact__phone {
    border-color: rgba(61, 156, 140, 0.2);
    color: var(--theme-brand-primary);
}

body.dark-theme .offline-contact__phone:hover {
    background: var(--theme-brand-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   5.12.12. OFFLINE-CONTACT__NOTE
   ============================================================ */

.offline-contact__note {
    margin-top: var(--pr-space-md);
    color: var(--theme-text-tertiary);
    font-size: var(--pr-font-size-sm);
    max-width: 100%;
}

body.dark-theme .offline-contact__note {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.12.13. CONTAINER QUERY - АДАПТАЦИЯ ОФЛАЙН-ПОМОЩНИКА
   ============================================================ */

@container container (max-width: 1023px) {
    .offline-hub {
        min-height: calc(100vh - 160px);
        padding: var(--pr-space-xl) var(--pr-container-padding);
    }

    .offline-card {
        padding: var(--pr-space-2xl);
        border-radius: var(--theme-radius-xl);
    }

    .offline-icon {
        font-size: 3.5rem;
        width: 80px;
        height: 80px;
        margin-bottom: var(--pr-space-lg);
    }

    .offline-header h1 {
        font-size: var(--pr-font-size-3xl);
    }

    .offline-header p {
        font-size: var(--pr-font-size-md);
    }

    .emergency-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--pr-space-md);
    }

    .emergency-card {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .emergency-card h3 {
        font-size: var(--pr-font-size-sm);
    }

    .emergency-card ul li {
        font-size: var(--pr-font-size-xs);
    }

    .offline-contact__phone {
        font-size: var(--pr-font-size-2xl);
        padding: var(--pr-space-sm) var(--pr-space-lg);
    }

    .offline-actions .btn {
        min-width: 160px;
        height: 44px;
        min-height: 44px;
        font-size: var(--pr-font-size-sm);
        padding: 0 20px;
    }
}

@container container (max-width: 767px) {
    .offline-hub {
        min-height: calc(100vh - 140px);
        padding: var(--pr-space-lg) var(--pr-container-padding);
    }

    .offline-card {
        padding: var(--pr-space-xl);
        border-radius: var(--theme-radius-card);
    }

    .offline-icon {
        font-size: 3rem;
        width: 70px;
        height: 70px;
        margin-bottom: var(--pr-space-md);
    }

    .offline-header h1 {
        font-size: var(--pr-font-size-2xl);
    }

    .offline-header p {
        font-size: var(--pr-font-size-sm);
    }

    .offline-actions {
        flex-direction: column;
        gap: var(--pr-space-xs);
        margin: var(--pr-space-lg) 0;
    }

    .offline-actions .btn {
        width: 100%;
        min-width: unset;
        max-width: unset;
        height: 44px;
        min-height: 44px;
    }

    .emergency-section {
        margin-top: var(--pr-space-xl);
        padding-top: var(--pr-space-lg);
    }

    .emergency-section h2 {
        font-size: var(--pr-font-size-lg);
        margin-bottom: var(--pr-space-md);
    }

    .emergency-grid {
        grid-template-columns: 1fr;
        gap: var(--pr-space-sm);
    }

    .emergency-card {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        gap: var(--pr-space-xs);
    }

    .emergency-card h3 {
        font-size: var(--pr-font-size-sm);
        gap: var(--pr-space-2xs);
    }

    .emergency-card h3 i {
        font-size: var(--pr-font-size-md);
    }

    .emergency-card ul {
        gap: var(--pr-space-2xs);
    }

    .emergency-card ul li {
        font-size: var(--pr-font-size-xs);
        padding-left: var(--pr-space-md);
        line-height: var(--pr-line-height-normal);
    }

    .emergency-card__phone {
        font-size: var(--pr-font-size-xs);
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        margin-top: var(--pr-space-2xs);
    }

    .offline-contact {
        margin-top: var(--pr-space-lg);
        padding-top: var(--pr-space-md);
    }

    .offline-contact__phone {
        font-size: var(--pr-font-size-xl);
        padding: var(--pr-space-xs) var(--pr-space-md);
        border-width: 1.5px;
    }

    .offline-contact__note {
        font-size: var(--pr-font-size-xs);
        margin-top: var(--pr-space-sm);
    }
}

@container container (max-width: 479px) {
    .offline-card {
        padding: var(--pr-space-lg);
        border-radius: var(--theme-radius-card);
    }

    .offline-icon {
        font-size: 2.5rem;
        width: 60px;
        height: 60px;
        margin-bottom: var(--pr-space-sm);
    }

    .offline-header h1 {
        font-size: var(--pr-font-size-xl);
    }

    .offline-header p {
        font-size: var(--pr-font-size-xs);
    }

    .offline-actions .btn {
        height: 40px;
        min-height: 40px;
        font-size: var(--pr-font-size-xs);
        padding: 0 16px;
    }

    .emergency-section h2 {
        font-size: var(--pr-font-size-md);
    }

    .emergency-section h2 i {
        font-size: var(--pr-font-size-lg);
    }

    .emergency-card {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .emergency-card h3 {
        font-size: var(--pr-font-size-xs);
    }

    .emergency-card h3 i {
        font-size: var(--pr-font-size-sm);
    }

    .emergency-card ul li {
        font-size: var(--pr-font-size-2xs);
        padding-left: var(--pr-space-sm);
        line-height: var(--pr-line-height-tight);
    }

    .emergency-card__phone {
        font-size: var(--pr-font-size-2xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
    }

    .offline-contact__phone {
        font-size: var(--pr-font-size-lg);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        gap: var(--pr-space-2xs);
    }

    .offline-contact__note {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   5.13. ГРУППА 13: СОСТОЯНИЯ ЗАГРУЗКИ (Container Queries)
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   5.13.1. SKELETON
   ============================================================ */

.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    width: 100%;
}
.skeleton-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--theme-surface-card, #ffffff);
    border-radius: var(--theme-radius-card, 16px);
    border: 1px solid var(--theme-border-light, #e0e6e4);
    animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-line {
    background: var(--theme-border-medium, #e0e6e4);
    border-radius: var(--theme-radius-sm, 6px);
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.skeleton-line--icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-line--icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-line--title {
    width: 60%;
    height: 20px;
}
.skeleton-line--title-md {
    width: 70%;
    height: 24px;
}
.skeleton-line--desc {
    width: 90%;
    height: 14px;
}
.skeleton-line--text {
    width: 100%;
    height: 14px;
}
.skeleton-line--meta {
    width: 50%;
    height: 12px;
}
.skeleton-line--result {
    width: 40%;
    height: 28px;
}
.skeleton-line--category {
    width: 30%;
    height: 16px;
}
.skeleton-line--action {
    width: 40%;
    height: 36px;
    border-radius: var(--theme-radius-button, 10px);
}
.skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@keyframes skeletonShimmer {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}
@keyframes skeletonPulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}
body.dark-theme .skeleton-item {
    background: var(--pr-color-dark-surface, #182228);
    border-color: var(--pr-color-dark-border, #283238);
}
body.dark-theme .skeleton-line {
    background: var(--pr-color-dark-border, #283238);
}

/* ============================================================
   5.13.2. COMPLETE ANIMATION
   ============================================================ */

.complete-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    animation: completeFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.complete-icon {
    width: 64px;
    height: 64px;
    color: var(--theme-status-success, #10b981);
    animation: completePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.complete-icon svg {
    width: 100%;
    height: 100%;
}
.complete-text {
    font-size: var(--pr-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--theme-text-primary, #1a2228);
    text-align: center;
}
@keyframes completeFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes completePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
body.dark-theme .complete-text {
    color: var(--pr-color-dark-text-primary, #eef0ef);
}

/* ═══════════════════════════════════════════════════════════════════════
   5.13.3. TOASTS (УВЕДОМЛЕНИЯ)
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   5.13.3.1. БАЗОВЫЙ КОНТЕЙНЕР
   ============================================================ */

.toast-container {
    position: fixed;
    z-index: calc(var(--pr-z-modal) * 100);
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-md) var(--pr-space-xl);
    box-shadow: var(--theme-shadow-xl);
    border: 1px solid var(--theme-border-light);
    opacity: 0;
    pointer-events: none;
    transition: all var(--pr-duration-slow) var(--pr-ease-out-expo);
    max-width: 90%;
    font-size: var(--pr-font-size-sm);
    font-weight: 500;
    color: var(--theme-text-primary);
    min-height: 56px;
}

/* ============================================================
   5.13.3.2. ВИДИМЫЙ ТОСТ
   ============================================================ */

.toast-container.toast-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   5.13.3.3. ПОЗИЦИОНИРОВАНИЕ
   ============================================================ */

/* По умолчанию - сверху по центру (для мобилок) */
.toast-container--top-center {
    top: var(--pr-space-xl);
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
}
.toast-container--top-center.toast-visible {
    transform: translateX(-50%) translateY(0);
}

/* Снизу по центру */
.toast-container--bottom-center {
    bottom: var(--pr-space-xl);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
}
.toast-container--bottom-center.toast-visible {
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   5.13.3.4. ТИПЫ (ВИЗУАЛЬНОЕ ВЫДЕЛЕНИЕ ЧЕРЕЗ ТЕНИ)
   ============================================================ */

/* Базовый тост - лёгкая тень */
.toast-container {
    box-shadow: var(--theme-shadow-md);
    border: 1px solid var(--theme-border-light);
}

/* Успех - зелёный акцент через тень */
.toast-container--success {
    box-shadow:
        0 8px 32px -8px rgba(16, 185, 129, 0.25),
        var(--theme-shadow-md);
    border-color: rgba(16, 185, 129, 0.15);
}

/* Ошибка - красный акцент через тень */
.toast-container--error {
    box-shadow:
        0 8px 32px -8px rgba(220, 53, 69, 0.25),
        var(--theme-shadow-md);
    border-color: rgba(220, 53, 69, 0.15);
}

/* Информация - фирменный акцент через тень */
.toast-container--info {
    box-shadow:
        0 8px 32px -8px rgba(61, 156, 140, 0.3),
        var(--theme-shadow-md);
    border-color: rgba(61, 156, 140, 0.15);
}

/* Предупреждение - жёлтый акцент через тень */
.toast-container--warning {
    box-shadow:
        0 8px 32px -8px rgba(245, 158, 11, 0.25),
        var(--theme-shadow-md);
    border-color: rgba(245, 158, 11, 0.15);
}

/* Тёмная тема - более плотные тени */
body.dark-theme .toast-container--success {
    box-shadow:
        0 8px 32px -8px rgba(16, 185, 129, 0.15),
        var(--theme-shadow-md);
}
body.dark-theme .toast-container--error {
    box-shadow:
        0 8px 32px -8px rgba(220, 53, 69, 0.15),
        var(--theme-shadow-md);
}
body.dark-theme .toast-container--info {
    box-shadow:
        0 8px 32px -8px rgba(61, 156, 140, 0.2),
        var(--theme-shadow-md);
}
body.dark-theme .toast-container--warning {
    box-shadow:
        0 8px 32px -8px rgba(245, 158, 11, 0.15),
        var(--theme-shadow-md);
}

/* ============================================================
   5.13.3.5. ИКОНКА
   ============================================================ */

.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--pr-font-size-xl);
    line-height: 1;
    width: 28px;
    height: 28px;
}

.toast-icon i {
    display: block;
    font-size: var(--pr-font-size-xl);
}

/* ============================================================
   5.13.3.6. СООБЩЕНИЕ
   ============================================================ */

.toast-message {
    flex: 1;
    text-align: center;
    word-break: break-word;
    line-height: var(--pr-line-height-normal);
}

/* ============================================================
   5.13.3.7. КНОПКА ЗАКРЫТИЯ
   ============================================================ */

.toast-close {
    background: none;
    border: none;
    font-size: var(--pr-font-size-xl);
    cursor: pointer;
    color: var(--theme-text-tertiary);
    padding: var(--pr-space-2xs) var(--pr-space-xs);
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius-full);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    flex-shrink: 0;
    line-height: 1;
}

.toast-close:hover {
    background: var(--theme-bg-surface-hover);
    color: var(--theme-text-primary);
}

.toast-close:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 2px;
}

/* ============================================================
   5.13.3.8. ТЁМНАЯ ТЕМА
   ============================================================ */

body.dark-theme .toast-container {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .toast-close {
    color: var(--pr-color-dark-text-tertiary);
}

body.dark-theme .toast-close:hover {
    background: var(--pr-color-dark-surface-hover);
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.13.3.9. МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */

@media (max-width: 767px) {
    .toast-container {
        padding: var(--pr-space-sm) var(--pr-space-md);
        font-size: var(--pr-font-size-xs);
        min-height: 48px;
        gap: var(--pr-space-sm);
        max-width: 95%;
        border-radius: var(--theme-radius-lg);
    }

    .toast-container--top-center {
        top: var(--pr-space-sm);
    }

    .toast-container--bottom-center {
        bottom: var(--pr-space-sm);
    }

    .toast-icon {
        font-size: var(--pr-font-size-lg);
        width: 24px;
        height: 24px;
    }

    .toast-icon i {
        font-size: var(--pr-font-size-lg);
    }

    .toast-close {
        font-size: var(--pr-font-size-lg);
        min-width: 32px;
        min-height: 32px;
        padding: var(--pr-space-2xs);
    }
}

@media (max-width: 479px) {
    .toast-container {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
        min-height: 40px;
        gap: var(--pr-space-2xs);
        border-radius: var(--theme-radius-md);
        max-width: 96%;
    }

    .toast-container--top-center {
        top: var(--pr-space-2xs);
    }

    .toast-container--bottom-center {
        bottom: var(--pr-space-2xs);
    }

    .toast-icon {
        font-size: var(--pr-font-size-md);
        width: 20px;
        height: 20px;
    }

    .toast-icon i {
        font-size: var(--pr-font-size-md);
    }

    .toast-close {
        font-size: var(--pr-font-size-md);
        min-width: 28px;
        min-height: 28px;
        padding: var(--pr-space-3xs);
    }

    .toast-message {
        font-size: var(--pr-font-size-2xs);
    }
}

/* ============================================================
   5.13.3.10. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .toast-container {
        transition: none !important;
        animation: none !important;
    }

    .toast-container.toast-visible {
        opacity: 1;
        transform: none !important;
    }
}

/* ============================================================
   5.13.3.11. HIGH CONTRAST
   ============================================================ */

@media (prefers-contrast: more) {
    .toast-container {
        border-width: 2px;
    }

    .toast-container--success {
        border-left-color: #0a7a5a;
    }
    .toast-container--error {
        border-left-color: #b91c1c;
    }
    .toast-container--info {
        border-left-color: #1a5a4a;
    }
    .toast-container--warning {
        border-left-color: #b45309;
    }
}

/* ============================================================
   5.13.4. SAVE NOTIFICATION
   ============================================================ */

.save-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--theme-surface-card, #ffffff);
    border-left: 4px solid var(--theme-status-success, #28a745);
    border-radius: 4px;
    padding: 12px 16px;
    box-shadow: var(--theme-shadow-md, 0 2px 10px rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    animation: slideIn 0.3s ease;
    color: var(--theme-text-primary, #1a2228);
    font-size: var(--pr-font-size-sm, 0.875rem);
}

.save-notification__icon {
    color: var(--theme-status-success, #28a745);
    font-size: var(--pr-font-size-xl, 1.25rem);
}

.save-notification__text {
    flex: 1;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

body.dark-theme .save-notification {
    background: var(--pr-color-dark-surface, #182228);
    color: var(--pr-color-dark-text-primary, #eef0ef);
    border-color: var(--theme-status-success, #28a745);
}

body.dark-theme .save-notification__icon {
    color: var(--theme-status-success, #28a745);
}

/* ============================================================
   5.13.1.5. PROGRESS INDICATOR
   ============================================================ */

.progress-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--theme-surface-card, #ffffff);
    border-radius: var(--theme-radius-xl, 20px);
    padding: 32px 40px;
    box-shadow: var(--theme-shadow-2xl, 0 32px 72px -16px rgba(26, 34, 40, 0.24));
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 320px;
    border: 1px solid var(--theme-border-light, #e0e6e4);
}

.progress-indicator.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.progress-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--theme-border-medium, #e0e6e4);
    border-top-color: var(--theme-brand-primary, #3d9c8c);
    border-radius: 50%;
    animation: spinnerSpin 1s linear infinite;
}

.progress-text {
    font-size: var(--pr-font-size-md, 1rem);
    color: var(--theme-text-secondary, #3a4850);
    font-weight: 500;
    text-align: center;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--theme-border-medium, #e0e6e4);
    border-radius: var(--theme-radius-full, 9999px);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--theme-gradient-button, linear-gradient(135deg, #3d9c8c, #2d8c7c));
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: var(--theme-radius-full, 9999px);
}

@keyframes spinnerSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== ТЁМНАЯ ТЕМА ===== */
body.dark-theme .progress-indicator {
    background: var(--pr-color-dark-surface, #182228);
    border-color: var(--pr-color-dark-border, #283238);
}

body.dark-theme .progress-text {
    color: var(--pr-color-dark-text-primary, #eef0ef);
}

body.dark-theme .progress-spinner {
    border-color: var(--pr-color-dark-border, #283238);
    border-top-color: var(--theme-brand-primary, #3d9c8c);
}

body.dark-theme .progress-bar-container {
    background: var(--pr-color-dark-border, #283238);
}

/* ═══════════════════════════════════════════════════════════════════════
   5.14. ГРУППА 14: ФИЛОСОФИЯ ПРОЕКТА (Container Queries)
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   5.14.1. PHILOSOPHY-CONTENT - STRUCTURE BLOCK
   ============================================================ */

.philosophy-content {
    padding: var(--pr-section-padding) 0;
    background: var(--theme-bg-page);
}

body.dark-theme .philosophy-content {
    background: var(--pr-color-dark-bg);
}

/* Используем единый .container, добавляем только gap */
.philosophy-content .container {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-5xl);
}

/* ============================================================
   5.14.2. PHILOSOPHY-BLOCK - STRUCTURE BLOCK
   ============================================================ */

.philosophy-block {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-md);
    padding: var(--pr-space-4xl) var(--pr-space-3xl);
    background: var(--theme-surface-card);
    border-radius: var(--theme-radius-card);
    border: 1px solid var(--theme-border-light);
    box-shadow: var(--theme-shadow-sm);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.philosophy-block:hover {
    transform: translateY(-4px);
    border-color: var(--theme-brand-primary-alpha-30);
    box-shadow: var(--theme-shadow-md);
}

body.dark-theme .philosophy-block {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .philosophy-block:hover {
    border-color: var(--theme-brand-primary-alpha-30);
    box-shadow: var(--pr-shadow-dark-md);
}

/* ============================================================
   5.14.3. PHILOSOPHY-BLOCK__HEADER - CONTENT BLOCK
   ============================================================ */

.philosophy-block__header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    padding-bottom: var(--pr-space-sm);
    border-bottom: 2px solid var(--theme-brand-primary-alpha-10);
}

.philosophy-block__header i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-2xl);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-brand-primary-alpha-10);
    border-radius: var(--theme-radius-full);
    transition:
        background var(--pr-duration-fast) var(--pr-ease-out-cubic),
        color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.philosophy-block:hover .philosophy-block__header i {
    background: var(--theme-brand-primary-alpha-20);
    color: var(--theme-brand-primary-hover);
}

.philosophy-block__header h2 {
    font-size: var(--pr-font-size-3xl);
    font-weight: 700;
    color: var(--theme-text-heading);
    margin: 0;
    line-height: var(--pr-line-height-heading);
}

body.dark-theme .philosophy-block__header {
    border-bottom-color: rgba(61, 156, 140, 0.1);
}

body.dark-theme .philosophy-block__header i {
    background: rgba(61, 156, 140, 0.12);
}

body.dark-theme .philosophy-block__header h2 {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.14.4. PHILOSOPHY-BLOCK__TEXT - CONTENT BLOCK
   ============================================================ */

.philosophy-block__text {
    color: var(--theme-text-secondary);
    font-size: var(--pr-font-size-lg);
    line-height: var(--pr-line-height-relaxed);
    margin: 0;
}

.philosophy-block__text:not(:last-of-type) {
    margin-bottom: var(--pr-space-md);
}

body.dark-theme .philosophy-block__text {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.14.5. PHILOSOPHY-BLOCK--HIGHLIGHT - VARIANT
   ============================================================ */

.philosophy-block--highlight {
    background: var(--theme-brand-primary-alpha-5);
    border-color: var(--theme-brand-primary-alpha-20);
}

body.dark-theme .philosophy-block--highlight {
    background: rgba(61, 156, 140, 0.06);
    border-color: rgba(61, 156, 140, 0.1);
}

/* ============================================================
   5.14.6. PHILOSOPHY-DIVIDER
   ============================================================ */

.philosophy-divider {
    width: 100%;
    height: 1px;
    background: var(--theme-border-light);
    border: none;
    margin: 0;
}

body.dark-theme .philosophy-divider {
    background: var(--pr-color-dark-border);
}

/* ============================================================
   5.14.7. PHILOSOPHY-RULE - STRUCTURE BLOCK
   ============================================================ */

.philosophy-rule {
    background: var(--theme-gradient-brand-vertical);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-4xl) var(--pr-space-3xl);
    border: 2px solid var(--theme-brand-primary-alpha-20);
    box-shadow: var(--theme-shadow-lg);
    text-align: left;
}

body.dark-theme .philosophy-rule {
    background: linear-gradient(
        145deg,
        var(--pr-color-dark-surface),
        var(--pr-color-dark-surface-hover)
    );
    border-color: var(--theme-brand-primary-alpha-20);
}

/* ============================================================
   5.14.8. PHILOSOPHY-RULE__HEADER - CONTENT BLOCK
   ============================================================ */

.philosophy-rule__header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    margin-bottom: var(--pr-space-md);
}

.philosophy-rule__header i {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-3xl);
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-brand-primary-alpha-15);
    border-radius: var(--theme-radius-full);
}

.philosophy-rule__header h2 {
    font-size: var(--pr-font-size-4xl);
    font-weight: 700;
    color: var(--theme-text-heading);
    margin: 0;
    line-height: var(--pr-line-height-heading);
}

body.dark-theme .philosophy-rule__header i {
    background: rgba(61, 156, 140, 0.15);
}

body.dark-theme .philosophy-rule__header h2 {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.14.9. PHILOSOPHY-RULE__TEXT - CONTENT BLOCK
   ============================================================ */

.philosophy-rule__text {
    font-size: var(--pr-font-size-xl);
    color: var(--theme-text-secondary);
    line-height: var(--pr-line-height-relaxed);
    margin: 0 0 var(--pr-space-md) 0;
}

.philosophy-rule__text:last-of-type {
    margin-bottom: 0;
}

body.dark-theme .philosophy-rule__text {
    color: var(--pr-color-dark-text-secondary);
}

.philosophy-rule__text strong {
    color: var(--theme-brand-primary);
    font-weight: 700;
}

body.dark-theme .philosophy-rule__text strong {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.14.10. RULE-ITEMS - STRUCTURE BLOCK
   ============================================================ */

.rule-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pr-space-lg) var(--pr-space-2xl);
    margin: var(--pr-space-xl) 0 var(--pr-space-lg);
}

/* ============================================================
   5.14.11. RULE-ITEM - STRUCTURE + CONTENT
   ============================================================ */

.rule-item {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    padding: var(--pr-space-md);
    background: var(--theme-brand-primary-alpha-5);
    border-radius: var(--theme-radius-md);
    transition: background var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.rule-item:hover {
    background: var(--theme-brand-primary-alpha-12);
}

.rule-item i {
    font-size: var(--pr-font-size-2xl);
    color: var(--theme-brand-primary);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-brand-primary-alpha-10);
    border-radius: var(--theme-radius-full);
    flex-shrink: 0;
}

.rule-item span {
    font-size: var(--pr-font-size-lg);
    color: var(--theme-text-secondary);
    font-weight: 500;
}

body.dark-theme .rule-item {
    background: rgba(61, 156, 140, 0.04);
}

body.dark-theme .rule-item:hover {
    background: rgba(61, 156, 140, 0.08);
}

body.dark-theme .rule-item i {
    background: rgba(61, 156, 140, 0.12);
}

body.dark-theme .rule-item span {
    color: var(--pr-color-dark-text-secondary);
}

/* ============================================================
   5.14.12. CONTAINER QUERY - АДАПТАЦИЯ
   ============================================================ */

@container container (max-width: 1023px) {
    .philosophy-content {
        padding: var(--pr-space-3xl) 0;
    }

    .philosophy-content .container {
        gap: var(--pr-space-4xl);
    }

    .philosophy-block {
        padding: var(--pr-space-2xl) var(--pr-space-xl);
    }

    .philosophy-block__header h2 {
        font-size: var(--pr-font-size-2xl);
    }

    .philosophy-block__header i {
        font-size: var(--pr-font-size-xl);
        width: 44px;
        height: 44px;
    }

    .philosophy-block__text {
        font-size: var(--pr-font-size-md);
    }

    .philosophy-rule {
        padding: var(--pr-space-3xl) var(--pr-space-2xl);
    }

    .philosophy-rule__header h2 {
        font-size: var(--pr-font-size-3xl);
    }

    .philosophy-rule__header i {
        font-size: var(--pr-font-size-2xl);
        width: 56px;
        height: 56px;
    }

    .philosophy-rule__text {
        font-size: var(--pr-font-size-lg);
    }

    .rule-items {
        gap: var(--pr-space-md);
    }

    .rule-item {
        padding: var(--pr-space-sm) var(--pr-space-md);
        gap: var(--pr-space-sm);
    }

    .rule-item i {
        font-size: var(--pr-font-size-xl);
        width: 40px;
        height: 40px;
    }

    .rule-item span {
        font-size: var(--pr-font-size-md);
    }
}

@container container (max-width: 767px) {
    .philosophy-content {
        padding: var(--pr-space-2xl) 0;
    }

    .philosophy-content .container {
        gap: var(--pr-space-3xl);
    }

    .philosophy-block {
        padding: var(--pr-space-xl) var(--pr-space-lg);
    }

    .philosophy-block__header {
        gap: var(--pr-space-sm);
        flex-wrap: wrap;
    }

    .philosophy-block__header h2 {
        font-size: var(--pr-font-size-xl);
    }

    .philosophy-block__header i {
        font-size: var(--pr-font-size-lg);
        width: 40px;
        height: 40px;
    }

    .philosophy-block__text {
        font-size: var(--pr-font-size-md);
    }

    .philosophy-block--highlight {
        padding: var(--pr-space-lg) var(--pr-space-md);
    }

    .philosophy-rule {
        padding: var(--pr-space-2xl) var(--pr-space-lg);
    }

    .philosophy-rule__header {
        gap: var(--pr-space-sm);
        flex-wrap: wrap;
    }

    .philosophy-rule__header h2 {
        font-size: var(--pr-font-size-2xl);
    }

    .philosophy-rule__header i {
        font-size: var(--pr-font-size-xl);
        width: 48px;
        height: 48px;
    }

    .philosophy-rule__text {
        font-size: var(--pr-font-size-md);
    }

    .rule-items {
        grid-template-columns: 1fr;
        gap: var(--pr-space-sm);
    }

    .rule-item {
        padding: var(--pr-space-sm) var(--pr-space-md);
        gap: var(--pr-space-sm);
    }

    .rule-item i {
        font-size: var(--pr-font-size-lg);
        width: 36px;
        height: 36px;
    }

    .rule-item span {
        font-size: var(--pr-font-size-sm);
    }
}

@container container (max-width: 479px) {
    .philosophy-content {
        padding: var(--pr-space-xl) 0;
    }

    .philosophy-content .container {
        gap: var(--pr-space-2xl);
    }

    .philosophy-block {
        padding: var(--pr-space-lg) var(--pr-space-md);
    }

    .philosophy-block__header h2 {
        font-size: var(--pr-font-size-lg);
    }

    .philosophy-block__header i {
        font-size: var(--pr-font-size-md);
        width: 36px;
        height: 36px;
    }

    .philosophy-block__text {
        font-size: var(--pr-font-size-sm);
    }

    .philosophy-block--highlight {
        padding: var(--pr-space-md) var(--pr-space-sm);
    }

    .philosophy-rule {
        padding: var(--pr-space-xl) var(--pr-space-md);
    }

    .philosophy-rule__header h2 {
        font-size: var(--pr-font-size-xl);
    }

    .philosophy-rule__header i {
        font-size: var(--pr-font-size-lg);
        width: 40px;
        height: 40px;
    }

    .philosophy-rule__text {
        font-size: var(--pr-font-size-sm);
    }

    .rule-items {
        gap: var(--pr-space-xs);
    }

    .rule-item {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        gap: var(--pr-space-xs);
    }

    .rule-item i {
        font-size: var(--pr-font-size-md);
        width: 32px;
        height: 32px;
    }

    .rule-item span {
        font-size: var(--pr-font-size-xs);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   5.15. ГРУППА 15: КОНСТРУКТОР ДОКУМЕНТОВ (Container Queries)
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   5.15.3. CONSTRUCTOR-SECTION - СЕКЦИЯ ФОРМЫ
   ============================================================ */

.constructor-section {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-lg);
    padding: var(--pr-space-xl);
    background: var(--theme-surface-card);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--theme-radius-card);
    box-shadow: var(--theme-shadow-sm);
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}

.constructor-section:hover {
    border-color: var(--theme-brand-primary-alpha-30);
    box-shadow: var(--theme-shadow-md);
}

body.dark-theme .constructor-section {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .constructor-section:hover {
    border-color: var(--theme-brand-primary-alpha-30);
    box-shadow: var(--pr-shadow-dark-md);
}

/* ============================================================
   5.15.4. CONSTRUCTOR-SECTION__TITLE - ЗАГОЛОВОК СЕКЦИИ
   ============================================================ */

.constructor-section__title {
    font-size: var(--pr-font-size-xl);
    font-weight: 600;
    line-height: var(--pr-line-height-heading);
    color: var(--theme-text-heading);
    letter-spacing: var(--pr-letter-spacing-tight);
    margin: 0;
    padding-bottom: var(--pr-space-sm);
    border-bottom: 2px solid var(--theme-brand-primary-alpha-10);
    position: relative;
}

.constructor-section__title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--theme-gradient-brand-horizontal);
    border-radius: var(--theme-radius-full);
}

body.dark-theme .constructor-section__title {
    color: var(--pr-color-dark-text-primary);
    border-bottom-color: var(--theme-brand-primary-alpha-10);
}

/* ============================================================
   5.15.5. CONSTRUCTOR-FORM-FIELDS - КОНТЕЙНЕР ПОЛЕЙ
   ============================================================ */

.constructor-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-xl);
    width: 100%;
}

/* ============================================================
   5.15.6. CONSTRUCTOR-FORM-GROUP - ОБЁРТКА ПОЛЯ
   ============================================================ */

.constructor-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-sm);
    width: 100%;
}

/* ============================================================
   5.15.7. CONSTRUCTOR-LABEL - ПОДПИСЬ ПОЛЯ
   ============================================================ */

.constructor-label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--pr-space-2xs);
    font-size: var(--pr-font-size-sm);
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: var(--pr-line-height-normal);
    cursor: pointer;
    transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.constructor-label:hover {
    color: var(--theme-brand-primary);
}

body.dark-theme .constructor-label {
    color: var(--pr-color-dark-text-primary);
}

body.dark-theme .constructor-label:hover {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.15.8. CONSTRUCTOR-LABEL__REQUIRED - ЗВЁЗДОЧКА
   ============================================================ */

.constructor-label__required {
    color: var(--theme-status-error);
    font-weight: 700;
    font-size: var(--pr-font-size-md);
    line-height: 1;
    user-select: none;
}

body.dark-theme .constructor-label__required {
    color: var(--theme-status-error);
}

/* ============================================================
   5.15.9. CONSTRUCTOR-CHECKBOX - ЧЕКБОКС
   ============================================================ */
/* В базе 3.5 нет стилизации чекбоксов - задаём свой */

.constructor-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    cursor: pointer;
    background: var(--theme-bg-surface);
    border: 2px solid var(--theme-border-medium);
    border-radius: var(--theme-radius-xs);
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    flex-shrink: 0;
    position: relative;
    margin: 0;
    align-self: flex-start;
}

.constructor-checkbox:hover {
    border-color: var(--theme-brand-primary);
    background: var(--theme-bg-surface-hover);
}

.constructor-checkbox:checked {
    background: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.constructor-checkbox:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
}

body.dark-theme .constructor-checkbox {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .constructor-checkbox:hover {
    border-color: var(--theme-brand-primary);
    background: var(--pr-color-dark-surface-hover);
}

body.dark-theme .constructor-checkbox:checked {
    background: var(--theme-brand-primary);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   5.15.10. CONSTRUCTOR-HINT - ПОДСКАЗКА ПОД ПОЛЕМ
   ============================================================ */

.constructor-hint {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    line-height: var(--pr-line-height-normal);
    margin: 0;
    max-width: 100%;
    font-weight: 400;
}

body.dark-theme .constructor-hint {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.15.11. CONSTRUCTOR-PREVIEW-WRAPPER - ПРАВАЯ КОЛОНКА
   ============================================================ */

.constructor-preview-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-md);
    background: var(--theme-surface-card);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--theme-radius-card);
    padding: var(--pr-space-xl);
    box-shadow: var(--theme-shadow-sm);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-brand-primary) var(--theme-border-medium);
    width: 100%;
}

.constructor-preview-wrapper::-webkit-scrollbar {
    width: 6px;
}

.constructor-preview-wrapper::-webkit-scrollbar-track {
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-full);
}

.constructor-preview-wrapper::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
    border-radius: var(--theme-radius-full);
}

.constructor-preview-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--theme-brand-primary-pressed);
}

body.dark-theme .constructor-preview-wrapper {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .constructor-preview-wrapper::-webkit-scrollbar-track {
    background: var(--pr-color-dark-border);
}

body.dark-theme .constructor-preview-wrapper::-webkit-scrollbar-thumb {
    background: var(--theme-brand-primary);
}

/* ============================================================
   5.15.12. CONSTRUCTOR-PREVIEW - КОНТЕЙНЕР ПРЕВЬЮ
   ============================================================ */

.constructor-preview {
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--theme-text-primary);
    overflow: visible;
}

body.dark-theme .constructor-preview {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.15.13. CONSTRUCTOR-PREVIEW__TEXT - ТЕКСТ ПРЕВЬЮ
   ============================================================ */

.constructor-preview__text {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: var(--pr-font-size-md);
    line-height: var(--pr-line-height-relaxed);
    color: var(--theme-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    background: transparent;
    border: none;
    text-align: left;
    letter-spacing: var(--pr-letter-spacing-normal);
}

body.dark-theme .constructor-preview__text {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.15.13.1. PREMIUM-ЗАЩИТА ПРЕВЬЮ (user-select + печать)
   ------------------------------------------------------------
   Применяется к #constructorPreview, когда:
     - документ premium
     - и НЕ оплачен (ConstructorStorage.isDocumentPaid === false)

   Даёт:
     1) position: relative - база для ::after
     2) user-select: none - мягкая защита от выделения (без oncopy)
     3) ::after - печать-логотип по центру превью

   Никаких oncopy/oncontextmenu - Ctrl+C, F12, правый клик работают.
   ============================================================ */

/* 1. Контейнер - position: relative для ::after */
.constructor-preview--protected {
    position: relative;
}

/* 2. user-select: none - на контейнере И на <pre>.
   Дублирование нужно из-за браузерной ловушки: некоторые UA-стили
   игнорируют user-select на родителе, если внутри есть <pre>. */
.constructor-preview--protected,
.constructor-preview--protected .constructor-preview__text {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

/* 3. Печать: логотип проекта по центру превью.
   Логотип - PNG с прозрачным фоном. opacity низкая, чтобы
   не мешать чтению текста. pointer-events: none - клики
   проходят сквозь печать. */
.constructor-preview--protected::after {
    content: '';

    position: absolute;
    inset: 0;

    background-image: url('/assets/icons/logo_400.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;

    opacity: 0.08;

    pointer-events: none;
    z-index: var(--pr-z-tooltip);

    /* Не даём печати выходить за пределы превью */
    overflow: hidden;
}

/* 📱 Адаптация размера печати на мобильных */
@container container (max-width: 767px) {
    .constructor-preview--protected::after {
        background-size: 55%;
    }
}

@container container (max-width: 479px) {
    .constructor-preview--protected::after {
        background-size: 65%;
    }
}

/* ============================================================
   5.15.14. LAW-LIST-BTN - КЛИКАБЕЛЬНЫЙ ДОКУМЕНТ
   ============================================================ */

.law-list-btn {
    display: flex;
    align-items: center;
    gap: var(--pr-space-md);
    width: 100%;
    padding: var(--pr-space-md) var(--pr-space-lg);
    background: var(--theme-surface-card);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--theme-radius-card);
    cursor: pointer;
    text-align: left;
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    min-height: 64px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.law-list-btn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--theme-gradient-brand-horizontal);
    opacity: 0;
    transition: opacity var(--pr-duration-fast) var(--pr-ease-out-cubic);
    border-radius: var(--theme-radius-full);
}

.law-list-btn:hover {
    background: var(--theme-surface-card-hover);
    border-color: var(--theme-brand-primary);
    transform: translateX(4px);
    box-shadow: var(--theme-shadow-sm);
}

.law-list-btn:hover::before {
    opacity: 1;
}

.law-list-btn:focus-visible {
    outline: 3px solid var(--theme-border-focus);
    outline-offset: 3px;
    border-color: var(--theme-brand-primary);
}

.law-list-btn:active {
    transform: translateX(2px);
    box-shadow: none;
}

.law-list-btn .list-icon {
    color: var(--theme-brand-primary);
    font-size: var(--pr-font-size-xl);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
    transition: transform var(--pr-duration-fast) var(--pr-ease-out-cubic);
    margin: 0;
}

.law-list-btn:hover .list-icon {
    transform: scale(1.15);
}

body.dark-theme .law-list-btn {
    background: var(--pr-color-dark-surface);
    border-color: var(--pr-color-dark-border);
}

body.dark-theme .law-list-btn:hover {
    background: var(--pr-color-dark-surface-hover);
    border-color: var(--theme-brand-primary);
}

body.dark-theme .law-list-btn .list-icon {
    color: var(--theme-brand-primary);
}

/* ============================================================
   5.15.15. LAW-LIST-BTN__TITLE - ЗАГОЛОВОК ДОКУМЕНТА
   ============================================================ */

.law-list-btn__title {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-3xs);
    flex: 1;
    min-width: 0;
}

.law-list-btn__title strong {
    font-size: var(--pr-font-size-md);
    font-weight: 600;
    line-height: var(--pr-line-height-normal);
    color: var(--theme-text-heading);
    word-break: break-word;
    overflow-wrap: break-word;
}

body.dark-theme .law-list-btn__title strong {
    color: var(--pr-color-dark-text-primary);
}

/* ============================================================
   5.15.16. LAW-LIST-BTN__ARTICLE - ССЫЛКА НА СТАТЬЮ
   ============================================================ */

.law-list-btn__article {
    font-size: var(--pr-font-size-xs);
    color: var(--theme-text-tertiary);
    font-weight: 500;
    line-height: var(--pr-line-height-tight);
    letter-spacing: var(--pr-letter-spacing-normal);
}

body.dark-theme .law-list-btn__article {
    color: var(--pr-color-dark-text-tertiary);
}

/* ============================================================
   5.15.17. DOCUMENT-BADGE - БЕЙДЖ ДОСТУПА
   ============================================================ */

.document-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-3xs);
    padding: var(--pr-space-3xs) var(--pr-space-sm);
    border-radius: var(--theme-radius-full);
    font-size: var(--pr-font-size-2xs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--pr-letter-spacing-wide);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    text-transform: uppercase;
}

/* ============================================================
   5.15.18. DOCUMENT-BADGE--FREE
   ============================================================ */

.document-badge--free {
    background: var(--theme-status-success);
    color: var(--pr-color-white);
    border-color: var(--theme-status-success);
}

body.dark-theme .document-badge--free {
    background: var(--theme-status-success);
    color: var(--pr-color-white);
    border-color: var(--theme-status-success);
}

/* ============================================================
   5.15.19. DOCUMENT-BADGE--PREMIUM
   ============================================================ */

.document-badge--premium {
    background: var(--theme-brand-primary);
    color: var(--pr-color-white);
    border-color: var(--theme-brand-primary);
}

body.dark-theme .document-badge--premium {
    background: var(--theme-brand-primary);
    color: var(--pr-color-white);
    border-color: var(--theme-brand-primary);
}

/* ============================================================
   5.15.20. CONTAINER QUERY - АДАПТАЦИЯ
   ============================================================ */

@container container (max-width: 1023px) {
    .constructor-tabs {
        gap: var(--pr-space-3xs);
        margin-bottom: var(--pr-space-lg);
    }

    .constructor-tab {
        padding: var(--pr-space-xs) var(--pr-space-md);
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
    }

    .constructor-section {
        padding: var(--pr-space-lg);
        gap: var(--pr-space-md);
    }

    .constructor-section__title {
        font-size: var(--pr-font-size-lg);
    }

    .constructor-form-fields {
        gap: var(--pr-space-lg);
    }

    .constructor-label {
        font-size: var(--pr-font-size-sm);
    }

    .constructor-preview-wrapper {
        position: static;
        max-height: none;
        padding: var(--pr-space-lg);
    }

    .constructor-preview__text {
        font-size: var(--pr-font-size-sm);
    }

    .law-list-btn {
        padding: var(--pr-space-sm) var(--pr-space-md);
        gap: var(--pr-space-sm);
        min-height: 56px;
    }

    .law-list-btn .list-icon {
        font-size: var(--pr-font-size-lg);
        min-width: 20px;
    }

    .law-list-btn__title strong {
        font-size: var(--pr-font-size-sm);
    }

    .law-list-btn__article {
        font-size: var(--pr-font-size-2xs);
    }

    .document-badge {
        font-size: var(--pr-font-size-3xs);
        padding: var(--pr-space-3xs) var(--pr-space-xs);
    }
}

@container container (max-width: 767px) {
    .constructor-tabs {
        justify-content: flex-start;
        gap: var(--pr-space-3xs);
        margin-bottom: var(--pr-space-md);
        padding-bottom: var(--pr-space-2xs);
    }

    .constructor-tab {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 38px;
    }

    .constructor-tab.active::after {
        left: 10%;
        right: 10%;
    }

    .constructor-section {
        padding: var(--pr-space-md);
        gap: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .constructor-section__title {
        font-size: var(--pr-font-size-md);
        padding-bottom: var(--pr-space-2xs);
    }

    .constructor-section__title::after {
        width: 40px;
    }

    .constructor-form-fields {
        gap: var(--pr-space-md);
    }

    .constructor-form-group {
        gap: var(--pr-space-xs);
    }

    .constructor-label {
        font-size: var(--pr-font-size-xs);
    }

    .constructor-label__required {
        font-size: var(--pr-font-size-sm);
    }

    .constructor-checkbox {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
        background-size: 12px;
    }

    .constructor-checkbox:checked {
        background-size: 12px;
    }

    .constructor-hint {
        font-size: var(--pr-font-size-2xs);
    }

    .constructor-preview-wrapper {
        padding: var(--pr-space-md);
        gap: var(--pr-space-sm);
    }

    .constructor-preview__text {
        font-size: var(--pr-font-size-xs);
        line-height: var(--pr-line-height-normal);
    }

    .law-list-btn {
        padding: var(--pr-space-sm);
        gap: var(--pr-space-xs);
        min-height: 52px;
        flex-wrap: wrap;
    }

    .law-list-btn:hover {
        transform: translateX(2px);
    }

    .law-list-btn .list-icon {
        font-size: var(--pr-font-size-md);
        min-width: 18px;
    }

    .law-list-btn__title strong {
        font-size: var(--pr-font-size-sm);
    }

    .law-list-btn__article {
        font-size: var(--pr-font-size-2xs);
    }

    .document-badge {
        font-size: var(--pr-font-size-3xs);
        padding: var(--pr-space-3xs) var(--pr-space-xs);
        align-self: flex-end;
        margin-left: auto;
    }
}

@container container (max-width: 479px) {
    .constructor-tabs {
        gap: var(--pr-space-3xs);
        margin-bottom: var(--pr-space-sm);
    }

    .constructor-tab {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        font-size: var(--pr-font-size-2xs);
        min-height: 36px;
    }

    .constructor-section {
        padding: var(--pr-space-sm);
        gap: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .constructor-section__title {
        font-size: var(--pr-font-size-sm);
    }

    .constructor-section__title::after {
        width: 30px;
    }

    .constructor-form-fields {
        gap: var(--pr-space-sm);
    }

    .constructor-form-group {
        gap: var(--pr-space-2xs);
    }

    .constructor-label {
        font-size: var(--pr-font-size-2xs);
    }

    .constructor-checkbox {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        max-width: 18px;
        max-height: 18px;
        background-size: 10px;
    }

    .constructor-checkbox:checked {
        background-size: 10px;
    }

    .constructor-hint {
        font-size: var(--pr-font-size-3xs);
    }

    .constructor-preview-wrapper {
        padding: var(--pr-space-sm);
        gap: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .constructor-preview__text {
        font-size: var(--pr-font-size-2xs);
        line-height: var(--pr-line-height-tight);
    }

    .law-list-btn {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        gap: var(--pr-space-2xs);
        min-height: 48px;
        border-radius: var(--theme-radius-card);
    }

    .law-list-btn .list-icon {
        font-size: var(--pr-font-size-sm);
        min-width: 16px;
    }

    .law-list-btn__title strong {
        font-size: var(--pr-font-size-xs);
    }

    .law-list-btn__article {
        font-size: var(--pr-font-size-3xs);
    }

    .document-badge {
        font-size: var(--pr-font-size-3xs);
        padding: var(--pr-space-3xs) var(--pr-space-2xs);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   06 - ЕДИНАЯ ТОЧКА УПРАВЛЕНИЯ (Container Query)
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   6.1. ДЕСКТОП (>1280px) - БАЗА (задаётся вне 5.11)
   ============================================================ */

/* Базовые стили уже определены в компонентах (5.2–5.10) */
/* Здесь только адаптации для меньших экранов */

/* ============================================================
   6.2. НОУТБУК (1024-1279px)
   ============================================================ */

@container container (max-width: 1279px) {
    /* --- УСЛУГИ --- */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--pr-space-md);
    }

    /* --- КЕЙСЫ --- */
    .cases-section__title {
        font-size: var(--pr-font-size-3xl);
    }

    /* --- КАРТА --- */
    .map-section__title {
        font-size: var(--pr-font-size-3xl);
    }

    .map-iframe {
        height: 350px;
        min-height: 280px;
    }

    .map-directions {
        gap: var(--pr-space-md);
    }

    .direction-card {
        padding: var(--pr-space-md);
    }

    .direction-card__title {
        font-size: var(--pr-font-size-md);
    }

    .direction-card__text {
        font-size: var(--pr-font-size-sm);
    }

    .direction-card__footer {
        font-size: var(--pr-font-size-xs);
    }
}

/* ============================================================
   6.3. ПЛАНШЕТ (768-1023px)
   ============================================================ */

@container container (max-width: 1023px) {
    /* --- ГЕРОЙ --- */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--pr-space-xl);
    }

    .hero-grid > div:first-child {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-photo {
        max-width: 400px;
        margin: 0 auto;
        border-radius: var(--theme-radius-xl);
    }

    .hero-title {
        font-size: var(--pr-font-size-4xl);
    }

    .hero-status-wrapper,
    .trust-link-wrapper {
        justify-content: center;
    }

    .hero-content {
        align-items: center;
    }

    /* --- УСЛУГИ --- */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pr-space-md);
    }

    .service-card {
        padding: var(--pr-space-lg);
    }

    .service-title {
        font-size: var(--pr-font-size-lg);
    }

    .service-icon {
        font-size: 2rem;
    }

    /* --- КЕЙСЫ --- */
    .case-card {
        width: 320px;
        min-width: 320px;
        padding: var(--pr-space-lg);
    }

    .carousel-controls {
        display: flex;
    }

    .cases-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pr-space-md);
    }

    .cases-section__title {
        font-size: var(--pr-font-size-3xl);
    }

    /* --- ПОЧЕМУ --- */
    .why-title {
        font-size: var(--pr-font-size-3xl);
        margin-bottom: var(--pr-space-xl);
    }

    .why-content {
        font-size: var(--pr-font-size-md);
    }

    /* --- FAQ --- */
    .faq-section__title {
        font-size: var(--pr-font-size-3xl);
    }

    .faq-section__subtitle {
        font-size: var(--pr-font-size-md);
    }

    /* --- КОНТАКТЫ --- */
    .contacts-grid {
        grid-template-columns: 1fr;
        gap: var(--pr-space-xl);
        padding: var(--pr-space-xl);
    }

    .contacts-info__title {
        font-size: var(--pr-font-size-2xl);
    }

    .contacts-form-wrapper__title {
        font-size: var(--pr-font-size-xl);
    }

    /* --- КАРТА --- */
    .map-section__title {
        font-size: var(--pr-font-size-3xl);
    }

    .map-iframe {
        height: 350px;
        min-height: 280px;
    }

    .map-directions {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pr-space-md);
    }

    .direction-card {
        padding: var(--pr-space-md);
    }

    .direction-card__title {
        font-size: var(--pr-font-size-md);
    }

    .direction-card__text {
        font-size: var(--pr-font-size-sm);
    }

    .direction-card__footer {
        font-size: var(--pr-font-size-xs);
    }

    .direction-card:nth-child(3) {
        grid-column: span 2;
    }

    .direction-card:nth-child(3) .direction-card__text {
        max-width: 80%;
    }

    /* --- КНОПКИ --- */
    .btn {
        padding: var(--pr-space-sm) var(--pr-space-lg);
        font-size: var(--pr-font-size-sm);
        min-height: 40px;
    }

    .btn-lg {
        padding: var(--pr-space-md) var(--pr-space-xl);
        font-size: var(--pr-font-size-md);
    }

    .btn-sm {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 32px;
    }

    .tool-tag {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 36px;
    }

    .pdf-viewer-btn {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 36px;
    }
}

/* ============================================================
   6.4. МОБИЛЬНЫЙ (<768px)
   ============================================================ */

@container container (max-width: 767px) {
    /* --- ГЕРОЙ --- */
    .hero {
        padding: var(--pr-space-2xl) 0;
    }

    .hero-photo {
        max-width: 280px;
        border-radius: var(--theme-radius-xl);
    }

    .hero-title {
        font-size: var(--pr-font-size-3xl);
        text-align: center;
    }

    .hero-dropdowns {
        flex-direction: column;
        gap: 8px;
        margin: 12px 0 16px 0;
    }

    .hero-dropdowns .dropdown-wrapper {
        min-width: 100%;
        max-width: 100%;
    }

    .hero-dropdowns .dropdown-toggle {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: var(--pr-font-size-sm);
        min-width: unset;
        min-height: 48px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        min-width: unset;
        max-width: unset;
    }

    .hero-nav {
        padding-left: var(--pr-container-padding);
        padding-right: var(--pr-container-padding);
    }

    .micro-tool {
        padding: 20px;
        border-radius: var(--theme-radius-card);
        margin: 20px var(--pr-container-padding) 0;
        width: calc(100% - (var(--pr-container-padding) * 2));
    }

    .micro-tool::before {
        left: 20px;
        right: 20px;
    }

    .micro-tool__title {
        font-size: 1.2rem;
    }

    .micro-tool__title i {
        font-size: 1.3rem;
        padding: 6px;
        border-radius: var(--theme-radius-full);
    }

    .micro-tool__subtitle {
        font-size: 0.95rem;
        margin-bottom: clamp(12px, 2vh, 20px);
    }

    .micro-tool-form {
        flex-direction: column;
        gap: 12px;
    }

    .micro-tool-form .btn {
        width: 100%;
        min-width: unset;
    }

    .tool-select {
        padding: 12px 16px;
        font-size: 0.95rem;
        min-height: 48px;
        border-radius: var(--theme-radius-input);
    }

    .dropdown-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        min-width: 100%;
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--theme-radius-md);
        padding: 6px 0;
        transform: translateY(-8px) scale(0.96);
        transform-origin: top left;
    }

    .dropdown-menu a {
        padding: 12px 16px;
        font-size: var(--pr-font-size-sm);
        min-height: 48px;
    }

    /* --- УСЛУГИ --- */
    .services-section {
        padding: var(--pr-space-2xl) 0;
    }

    .services-section__header {
        margin-bottom: var(--pr-space-xl);
    }

    .services-section__title {
        font-size: var(--pr-font-size-3xl);
    }

    .services-section__subtitle {
        font-size: var(--pr-font-size-md);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: var(--pr-space-xl) 0;
    }

    .service-card {
        padding: var(--pr-space-lg);
        border-radius: var(--theme-radius-card);
    }

    .service-icon {
        font-size: 2rem;
        margin-bottom: var(--pr-space-sm);
    }

    .service-title {
        font-size: var(--pr-font-size-lg);
        margin-bottom: var(--pr-space-xs);
    }

    .service-description {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-sm);
    }

    .service-tools {
        gap: var(--pr-space-xs);
    }

    .tool-tag {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 44px;
        border-radius: var(--theme-radius-md);
    }

    .geo-note {
        font-size: 0.75rem;
        margin-top: var(--pr-space-sm);
    }

    /* --- КЕЙСЫ --- */
    .cases-section {
        padding: var(--pr-space-xl) 0;
    }

    .cases-section__header {
        flex-direction: column;
        text-align: center;
        gap: var(--pr-space-md);
    }

    .cases-section__header-left {
        text-align: center;
    }

    .cases-section__title {
        font-size: var(--pr-font-size-2xl);
    }

    .cases-section__subtitle {
        font-size: var(--pr-font-size-md);
    }

    .cases-carousel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--pr-container-padding);
        padding: 0 0 16px 0;
    }

    .cases-carousel::-webkit-scrollbar {
        display: none;
    }

    .cases-carousel {
        scrollbar-width: none;
    }

    .cases-carousel__track {
        gap: 12px;
        padding: 0 var(--pr-container-padding);
    }

    .case-card {
        width: calc(100vw - (var(--pr-container-padding) * 2) - 16px);
        min-width: calc(100vw - (var(--pr-container-padding) * 2) - 16px);
        padding: var(--pr-space-lg);
        min-height: 360px;
        border-radius: var(--theme-radius-card);
    }

    .case-result {
        font-size: var(--pr-font-size-2xl);
    }

    .case-category {
        font-size: var(--pr-font-size-sm);
    }

    .case-meta {
        font-size: var(--pr-font-size-xs);
    }

    .carousel-indicator {
        margin-top: var(--pr-space-md);
        gap: 8px;
    }

    .carousel-indicator__item {
        width: 8px;
        height: 8px;
        border-radius: var(--theme-radius-full);
    }

    .carousel-indicator__item.active {
        width: 28px;
    }

    .cases-section__footer {
        margin-top: var(--pr-space-lg);
    }

    /* --- ПОЧЕМУ --- */
    .why-section {
        padding: var(--pr-space-xl) 0;
    }

    .why-title {
        font-size: var(--pr-font-size-2xl);
        margin-bottom: var(--pr-space-lg);
    }

    .why-content {
        font-size: var(--pr-font-size-md);
        padding: 0;
    }

    .why-content p {
        margin-bottom: var(--pr-space-md);
    }

    /* --- FAQ --- */
    .faq-section {
        padding: var(--pr-space-xl) 0;
    }

    .faq-section__header {
        margin-bottom: var(--pr-space-lg);
    }

    .faq-section__title {
        font-size: var(--pr-font-size-2xl);
    }

    .faq-section__subtitle {
        font-size: var(--pr-font-size-sm);
    }

    .faq-grid {
        margin: var(--pr-space-lg) auto;
    }

    .faq-question {
        padding: var(--pr-space-md) 0;
        font-size: var(--pr-font-size-md);
        min-height: 60px;
    }

    .faq-question i:first-child {
        font-size: var(--pr-font-size-lg);
    }

    .faq-answer {
        font-size: var(--pr-font-size-sm);
        padding-bottom: var(--pr-space-md);
    }

    /* --- КОНТАКТЫ --- */
    .contacts-section {
        padding: var(--pr-space-xl) 0;
    }

    .contacts-grid {
        padding: var(--pr-space-lg);
        gap: var(--pr-space-lg);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-lg) 0;
    }

    .contacts-info__title {
        font-size: var(--pr-font-size-xl);
        margin-bottom: var(--pr-space-sm);
    }

    .contact-item {
        padding: var(--pr-space-sm) 0;
        gap: var(--pr-space-sm);
    }

    .contact-item__link,
    .contact-item__text {
        font-size: var(--pr-font-size-sm);
        word-break: break-word;
    }

    .contact-item__icon {
        font-size: var(--pr-font-size-md);
        min-width: 20px;
    }

    .contacts-form-wrapper__title {
        font-size: var(--pr-font-size-lg);
        margin-bottom: var(--pr-space-sm);
    }

    .contacts-form {
        gap: var(--pr-space-xs);
    }

    .form-input,
    .form-textarea {
        padding: var(--pr-space-sm) var(--pr-space-md);
        font-size: var(--pr-font-size-sm);
        min-height: 44px;
    }

    .form-textarea {
        min-height: 80px;
    }

    .form-submit {
        padding: var(--pr-space-sm) var(--pr-space-lg);
        font-size: var(--pr-font-size-sm);
        min-height: 44px;
    }

    .privacy-checkbox {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-checkbox {
        font-size: var(--pr-font-size-xs);
    }

    /* --- КАРТА --- */
    .map-section {
        padding: var(--pr-space-xl) 0;
    }

    .map-section__title {
        font-size: var(--pr-font-size-2xl);
        margin-bottom: var(--pr-space-sm);
    }

    .map-section__subtitle {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-lg);
        padding: 0 var(--pr-space-sm);
    }

    .map-container {
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-lg);
    }

    .map-iframe {
        height: 250px;
        min-height: 200px;
        aspect-ratio: 16/9;
    }

    .map-directions {
        grid-template-columns: 1fr;
        gap: var(--pr-space-md);
        margin-top: var(--pr-space-lg);
    }

    .direction-card {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        min-height: auto;
    }

    .direction-card:nth-child(3) {
        grid-column: span 1;
    }

    .direction-card:nth-child(3) .direction-card__text {
        max-width: 100%;
    }

    .direction-card__header {
        gap: var(--pr-space-xs);
        margin-bottom: var(--pr-space-sm);
    }

    .direction-card__icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .direction-card__icon i {
        font-size: 1.1rem;
    }

    .direction-card__title {
        font-size: var(--pr-font-size-md);
    }

    .direction-card__time {
        font-size: var(--pr-font-size-2xs);
    }

    .direction-card__text {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-sm);
        line-height: 1.5;
    }

    .direction-card__footer {
        font-size: var(--pr-font-size-xs);
        padding-top: var(--pr-space-sm);
        flex-wrap: wrap;
        gap: var(--pr-space-xs);
    }

    /* --- КНОПКИ --- */
    .btn {
        padding: var(--pr-space-sm) var(--pr-space-md);
        font-size: var(--pr-font-size-sm);
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    .btn-lg {
        padding: var(--pr-space-md) var(--pr-space-lg);
        font-size: var(--pr-font-size-sm);
    }

    .btn-sm {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
        min-height: 32px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: var(--theme-radius-button);
    }

    .tool-tag {
        padding: 6px 10px;
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
        border-radius: var(--theme-radius-md);
    }

    .pdf-viewer-btn {
        font-size: var(--pr-font-size-xs);
        padding: 6px 10px;
        min-height: 36px;
        border-radius: var(--theme-radius-button);
    }

    /* --- МИКРО-АДАПТАЦИИ --- */
    .trust-link-wrapper {
        margin-top: 12px;
    }

    .trust-link {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

/* ============================================================
   6.5. МАЛЕНЬКИЙ МОБИЛЬНЫЙ (360-479px)
   ============================================================ */

@container container (max-width: 479px) {
    /* --- ГЕРОЙ --- */
    .hero-title {
        font-size: var(--pr-font-size-2xl);
        text-align: center;
    }

    .hero-photo {
        max-width: 240px;
    }

    .micro-tool {
        padding: 16px;
        margin: 16px var(--pr-container-padding) 0;
        border-radius: var(--theme-radius-card);
    }

    .hero-dropdowns {
        gap: 6px;
        margin: 8px 0 16px 0;
    }

    .hero-dropdowns .dropdown-toggle {
        padding: 10px 14px;
        font-size: var(--pr-font-size-xs);
        min-height: 44px;
    }

    .dropdown-menu {
        max-height: 160px;
        padding: 4px 0;
        top: calc(100% + 4px);
    }

    .dropdown-menu a {
        padding: 10px 14px;
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
    }

    /* --- УСЛУГИ --- */
    .service-card {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .service-icon {
        font-size: 1.8rem;
    }

    .service-title {
        font-size: var(--pr-font-size-md);
    }

    .service-description {
        font-size: var(--pr-font-size-xs);
    }

    .tool-tag {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-height: 40px;
        border-radius: var(--theme-radius-md);
    }

    /* --- КЕЙСЫ --- */
    .case-card {
        padding: var(--pr-space-md);
        min-height: 340px;
        border-radius: var(--theme-radius-card);
    }

    .case-result {
        font-size: var(--pr-font-size-xl);
    }

    .case-category {
        font-size: var(--pr-font-size-xs);
    }

    .case-text {
        font-size: var(--pr-font-size-sm);
    }

    .case-meta {
        font-size: var(--pr-font-size-xs);
    }

    .case-meta span {
        font-size: var(--pr-font-size-2xs);
    }

    .pdf-viewer-btn {
        font-size: var(--pr-font-size-xs);
        padding: 6px 10px;
        min-height: 36px;
        border-radius: var(--theme-radius-button);
    }

    /* --- ПОЧЕМУ --- */
    .why-title {
        font-size: var(--pr-font-size-xl);
    }

    .why-content {
        font-size: var(--pr-font-size-sm);
    }

    /* --- FAQ --- */
    .faq-section__title {
        font-size: var(--pr-font-size-xl);
    }

    .faq-question {
        font-size: var(--pr-font-size-sm);
        min-height: 52px;
        padding: var(--pr-space-sm) 0;
    }

    .faq-answer {
        font-size: var(--pr-font-size-xs);
        padding-bottom: var(--pr-space-sm);
    }

    /* --- КОНТАКТЫ --- */
    .contacts-grid {
        padding: var(--pr-space-md);
        gap: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .contacts-info__title {
        font-size: var(--pr-font-size-lg);
    }

    .contact-item__link,
    .contact-item__text {
        font-size: var(--pr-font-size-xs);
    }

    .contact-item__icon {
        font-size: var(--pr-font-size-sm);
        min-width: 18px;
    }

    .contacts-form-wrapper__title {
        font-size: var(--pr-font-size-md);
    }

    .form-input,
    .form-textarea {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
    }

    .form-textarea {
        min-height: 60px;
    }

    .form-submit {
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
        padding: var(--pr-space-xs) var(--pr-space-md);
    }

    .privacy-checkbox {
        font-size: var(--pr-font-size-2xs);
        gap: var(--pr-space-2xs);
    }

    .consultation-checkbox {
        font-size: var(--pr-font-size-2xs);
        gap: var(--pr-space-2xs);
    }

    /* --- КАРТА --- */
    .map-section__title {
        font-size: var(--pr-font-size-xl);
    }

    .map-iframe {
        height: 200px;
        min-height: 180px;
    }

    .map-directions {
        gap: var(--pr-space-sm);
        margin-top: var(--pr-space-md);
    }

    .direction-card {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .direction-card__icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .direction-card__icon i {
        font-size: 0.9rem;
    }

    .direction-card__title {
        font-size: var(--pr-font-size-sm);
    }

    .direction-card__text {
        font-size: var(--pr-font-size-xs);
        margin-bottom: var(--pr-space-xs);
        line-height: 1.4;
    }

    .direction-card__footer {
        font-size: var(--pr-font-size-2xs);
        padding-top: var(--pr-space-xs);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pr-space-2xs);
    }

    .direction-card__footer i {
        font-size: 0.8rem;
    }

    /* --- КНОПКИ --- */
    .btn {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
        min-width: 40px;
        border-radius: var(--theme-radius-button);
    }

    .btn-lg {
        padding: var(--pr-space-xs) var(--pr-space-md);
        font-size: var(--pr-font-size-xs);
        border-radius: var(--theme-radius-button);
    }

    .btn-sm {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        font-size: var(--pr-font-size-3xs);
        min-height: 28px;
        border-radius: var(--theme-radius-button);
    }

    .tool-tag {
        padding: 4px 8px;
        font-size: var(--pr-font-size-2xs);
        min-height: 36px;
        border-radius: var(--theme-radius-md);
    }

    .pdf-viewer-btn {
        font-size: var(--pr-font-size-2xs);
        padding: 4px 8px;
        min-height: 32px;
        border-radius: var(--theme-radius-button);
    }
}

/* ============================================================
   6.6. ОЧЕНЬ МАЛЕНЬКИЙ МОБИЛЬНЫЙ (320-359px)
   ============================================================ */

@container container (max-width: 359px) {
    /* --- ГЕРОЙ --- */
    .hero-title {
        font-size: var(--pr-font-size-xl);
        text-align: center;
    }

    .hero-photo {
        max-width: 200px;
    }

    /* --- УСЛУГИ --- */
    .service-card {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .service-icon {
        font-size: 1.6rem;
    }

    .tool-tag {
        font-size: 0.75rem;
        padding: 4px 8px;
        min-height: 36px;
        border-radius: var(--theme-radius-md);
    }

    /* --- КЕЙСЫ --- */
    .case-card {
        padding: var(--pr-space-sm);
        min-height: 320px;
        border-radius: var(--theme-radius-card);
    }

    .case-result {
        font-size: var(--pr-font-size-lg);
    }

    /* --- ПОЧЕМУ --- */
    .why-title {
        font-size: var(--pr-font-size-lg);
    }

    .why-content {
        font-size: var(--pr-font-size-xs);
    }

    /* --- FAQ --- */
    .faq-question {
        font-size: var(--pr-font-size-xs);
        min-height: 44px;
    }

    .faq-answer {
        font-size: var(--pr-font-size-2xs);
    }

    /* --- КОНТАКТЫ --- */
    .contacts-grid {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .contact-item {
        padding: var(--pr-space-2xs) 0;
    }

    .contact-item__link,
    .contact-item__text {
        font-size: var(--pr-font-size-2xs);
    }

    .form-input,
    .form-textarea {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        font-size: var(--pr-font-size-2xs);
        min-height: 36px;
    }

    .form-textarea {
        min-height: 50px;
    }

    .form-submit {
        font-size: var(--pr-font-size-2xs);
        min-height: 36px;
        padding: var(--pr-space-2xs) var(--pr-space-sm);
    }

    /* --- КАРТА --- */
    .map-iframe {
        height: 160px;
        min-height: 140px;
    }

    .direction-card {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .direction-card__header {
        flex-wrap: wrap;
        gap: var(--pr-space-2xs);
    }

    .direction-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .direction-card__icon i {
        font-size: 0.8rem;
    }

    .direction-card__title {
        font-size: var(--pr-font-size-xs);
    }

    .direction-card__text {
        font-size: var(--pr-font-size-2xs);
    }

    .direction-card__footer {
        font-size: var(--pr-font-size-2xs);
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* --- КНОПКИ --- */
    .btn {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        font-size: var(--pr-font-size-2xs);
        min-height: 36px;
        min-width: 36px;
        border-radius: var(--theme-radius-button);
    }

    .btn-lg {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
        border-radius: var(--theme-radius-button);
    }

    .btn-sm {
        padding: var(--pr-space-3xs) var(--pr-space-2xs);
        font-size: var(--pr-font-size-3xs);
        min-height: 24px;
        border-radius: var(--theme-radius-button);
    }

    .tool-tag {
        font-size: var(--pr-font-size-3xs);
        padding: 2px 6px;
        min-height: 32px;
        border-radius: var(--theme-radius-md);
    }

    .pdf-viewer-btn {
        font-size: var(--pr-font-size-3xs);
        padding: 2px 6px;
        min-height: 28px;
        border-radius: var(--theme-radius-button);
    }

    .btn-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: var(--theme-radius-button);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   07 - ADAPTIVE (MEDIA QUERIES) - ТОЛЬКО ГЛОБАЛЬНЫЕ ЭЛЕМЕНТЫ
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   7.1. ПЛАНШЕТЫ (768-1023px)
   ============================================================ */

@media (max-width: 1023px) {
    /* --- ХЕДЕР --- */
    .header {
        padding: var(--pr-space-sm) 0;
        min-height: 64px;
    }

    .header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--pr-space-xs);
        flex-wrap: nowrap;
    }

    .header .logo {
        font-size: clamp(0.9rem, 1.8vw, 1.2rem);
        flex: 0 1 auto;
        min-width: 0;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- HEADER-ACTIONS --- */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    /* --- CITY-BADGE --- */
    .city-badge {
        padding: 0 10px;
        font-size: var(--pr-font-size-2xs);
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        gap: 4px;
    }

    .city-badge #currentTime {
        display: none;
    }

    .city-badge span:not(.bi) {
        font-size: var(--pr-font-size-2xs);
    }

    .city-badge .bi-geo-alt {
        font-size: 12px;
    }

    /* --- TOOLS / FILES / PAYMENT BADGES --- */
    .files-header-btn,
    .tools-badge,
    .payment-badge {
        padding: 0 8px;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        font-size: 0;
        gap: 0;
        border-radius: var(--theme-radius-md);
    }

    .files-header-btn i,
    .tools-badge i,
    .payment-badge i {
        font-size: 14px;
        margin: 0;
    }

    .files-header-btn span:not(.files-count-badge),
    .tools-badge span,
    .payment-badge span {
        display: none;
    }

    /* --- THEME-SWITCH --- */
    .theme-switch {
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        padding: 2px;
        min-width: 54px;
        gap: 2px;
        border-radius: var(--theme-radius-md);
    }

    .theme-btn {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        font-size: 0;
        padding: 0;
        border-radius: var(--theme-radius-sm);
    }

    .theme-btn i {
        font-size: 11px;
        line-height: 1;
    }

    /* --- FILES-COUNT-BADGE --- */
    .files-count-badge {
        min-width: 16px;
        height: 16px;
        font-size: 8px;
        top: -4px;
        right: -4px;
        border-width: 1.5px;
        padding: 0 3px;
    }

    /* --- ФУТЕР --- */
    .footer {
        padding: var(--pr-space-2xl) 0;
        margin-top: var(--pr-space-2xl);
    }

    .footer .container {
        flex-direction: column;
        text-align: center;
        gap: var(--pr-space-md);
    }

    .footer-brand {
        align-items: center;
    }

    .footer-brand strong {
        font-size: 1rem;
    }

    .footer-brand span {
        font-size: 0.65rem;
    }

    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--pr-space-xs);
    }

    .footer a {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-sm);
        min-height: 36px;
    }

    /* --- МОДАЛКИ --- */
    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal-overlay {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1;
    }

    .modal-content {
        position: relative;
        z-index: 2;
        max-width: 100%;
        margin: 0;
        max-height: 95vh;
        min-height: 92vh;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
        width: 100%;
        overflow-y: auto;
        animation: modalContentSlideUp var(--pr-duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-body {
        padding: var(--pr-space-xl);
        padding-bottom: calc(var(--pr-space-2xl) + 20px);
    }

    .modal-content--wide {
        max-width: 100%;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .modal-content--files {
        max-width: 100%;
        width: 100%;
        padding: 0;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .modal-header {
        padding: var(--pr-space-md) var(--pr-space-lg);
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
        min-height: 60px;
        position: sticky;
        top: 0;
        z-index: calc(var(--pr-z-modal) + 2);
        background: inherit;
        backdrop-filter: inherit;
        -webkit-backdrop-filter: inherit;
    }

    .modal-title {
        font-size: var(--pr-font-size-md);
        gap: var(--pr-space-2xs);
    }

    .modal-title i {
        font-size: var(--pr-font-size-md);
    }

    .modal-close {
        font-size: 1.5rem;
        min-width: 40px;
        min-height: 40px;
        border-radius: var(--theme-radius-button);
    }

    .modal-body {
        padding: var(--pr-space-md);
        padding-bottom: calc(var(--pr-space-md) + 16px);
    }

    .modal-body--pdf {
        padding: 0;
        border-radius: 0px;
    }

    .modal-body--pdf iframe {
        height: 50vh;
        border-radius: 0px;
    }

    .modal-body--pdf .pdf-iframe {
        height: 50vh;
        border-radius: 0px;
    }

    /* --- CONSULTATION MODAL --- */
    .consultation-modal-content {
        max-width: 100%;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .consultation-hero {
        margin-bottom: var(--pr-space-lg);
    }

    .consultation-hero__icon {
        font-size: 3rem;
    }

    .consultation-hero__icon i {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-hero__title {
        font-size: var(--pr-font-size-lg);
    }

    .consultation-hero__text {
        font-size: var(--pr-font-size-sm);
        padding: 0 var(--pr-space-sm);
    }

    .consultation-price-block {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .consultation-price-block__row {
        font-size: var(--pr-font-size-lg);
        flex-direction: row;
        justify-content: space-between;
    }

    .consultation-price-block__row span:last-child {
        font-size: var(--pr-font-size-xl);
    }

    .consultation-price-block__note {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-steps__title {
        font-size: var(--pr-font-size-md);
        margin-bottom: var(--pr-space-sm);
    }

    .consultation-step {
        gap: var(--pr-space-sm);
        margin-bottom: var(--pr-space-sm);
        border-radius: var(--theme-radius-input);
    }

    .consultation-step-number {
        width: 28px;
        height: 28px;
        font-size: var(--pr-font-size-xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-step-text strong {
        font-size: var(--pr-font-size-sm);
    }

    .consultation-step-text p {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-features {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pr-space-xs);
        padding: var(--pr-space-sm);
        margin: var(--pr-space-md) 0;
        border-radius: var(--theme-radius-card);
    }

    .consultation-feature i {
        font-size: var(--pr-font-size-lg);
    }

    .consultation-feature p {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-actions {
        flex-direction: column;
        gap: var(--pr-space-sm);
        margin-top: var(--pr-space-lg);
    }

    .consultation-actions .btn {
        flex: none;
        width: 100%;
    }

    .consultation-actions__note {
        font-size: var(--pr-font-size-2xs);
        margin-top: var(--pr-space-sm);
    }

    /* --- FILES MODAL --- */
    .files-stats {
        flex-direction: column;
        gap: var(--pr-space-sm);
        padding: var(--pr-space-sm) var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-md);
    }

    .stat-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .stat-label {
        font-size: var(--pr-font-size-2xs);
    }

    .stat-value {
        font-size: var(--pr-font-size-sm);
    }

    .files-filters {
        justify-content: center;
        gap: 4px;
        padding: 0 4px;
        margin-bottom: var(--pr-space-md);
    }

    .files-filter-btn {
        padding: 4px 10px;
        font-size: var(--pr-font-size-2xs);
        min-height: 32px;
        border-radius: var(--theme-radius-button);
    }

    .files-list-container {
        max-height: 300px;
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-md);
    }

    .files-list-container .file-item {
        flex-wrap: wrap;
        padding: var(--pr-space-sm);
        border-radius: 0;
    }

    .files-actions {
        flex-direction: column;
        gap: var(--pr-space-xs);
        margin-top: var(--pr-space-md);
    }

    .files-actions .btn {
        width: 100%;
    }

    /* --- PAYMENT MODAL --- */
    .payment-summary {
        margin-bottom: var(--pr-space-lg);
    }

    .payment-summary__amount {
        font-size: var(--pr-font-size-3xl);
        margin: var(--pr-space-xs) 0;
    }

    .payment-summary__label {
        font-size: var(--pr-font-size-xs);
    }

    .payment-summary__description {
        font-size: var(--pr-font-size-xs);
    }

    .payment-qr {
        max-width: 200px;
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin: 0 auto var(--pr-space-lg);
    }

    .payment-qr__image {
        border-radius: var(--theme-radius-md);
        max-width: 140px;
    }

    .payment-qr__hint {
        font-size: var(--pr-font-size-2xs);
    }

    .payment-actions {
        flex-direction: column;
        gap: var(--pr-space-sm);
        align-items: center;
    }

    .payment-actions .btn {
        min-width: 100%;
        width: 100%;
        justify-content: center;
    }

    .payment-requisites {
        padding: var(--pr-space-sm) var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        font-size: var(--pr-font-size-2xs);
        line-height: 1.6;
        margin-top: var(--pr-space-lg);
    }

    .payment-requisites p {
        font-size: var(--pr-font-size-2xs);
    }

    .payment-notice {
        margin-top: var(--pr-space-sm);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
        border-radius: var(--theme-radius-md);
    }

    /* --- FEES MODAL --- */
    .fees-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-radius: var(--theme-radius-card);
        font-size: var(--pr-font-size-sm);
    }

    .fees-table th,
    .fees-table td {
        padding: 6px 10px;
    }

    .fees-table td:last-child {
        white-space: nowrap;
        font-family: 'Inter', 'SF Mono', monospace;
    }

    .fees-highlight strong {
        min-width: 180px;
    }

    .fees-highlight p {
        font-size: var(--pr-font-size-sm);
    }

    .fees-exempt__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--pr-space-md);
    }

    .fees-exempt__extra {
        grid-template-columns: 1fr 1fr;
        gap: var(--pr-space-md);
    }

    .fees-new-rules h4 {
        font-size: var(--pr-font-size-md);
    }

    .fees-new-rules ul li {
        font-size: var(--pr-font-size-xs);
    }

    /* --- COOKIE-BANNER --- */
    .cookie-banner {
        padding: 12px 0;
    }

    .cookie-banner__content {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        text-align: center;
    }

    .cookie-banner__text {
        text-align: center;
    }

    .cookie-banner__title {
        justify-content: center;
        font-size: var(--pr-font-size-xs);
    }

    .cookie-banner__description {
        font-size: var(--pr-font-size-2xs);
    }

    .cookie-banner__actions {
        justify-content: center;
        gap: 8px;
    }

    .cookie-banner__btn {
        padding: 6px 16px;
        font-size: var(--pr-font-size-xs);
        min-height: 36px;
        border-radius: var(--theme-radius-button);
    }

    /* --- SCROLL-TOP-BTN --- */
    .scroll-top-btn {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
        font-size: 1.3rem;
        border-radius: var(--theme-radius-button);
    }
}

/* ============================================================
   7.2. МОБИЛЬНЫЕ (до 767px)
   ============================================================ */

@media (max-width: 767px) {
    /* --- ХЕДЕР --- */
    .header {
        padding: var(--pr-space-sm) 0;
        min-height: 120px !important; /* ← УВЕЛИЧИВАЕМ, чтобы перекрыть actions */
        background: var(--theme-surface-header);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: var(--theme-header-shadow);
        position: sticky;
        top: 0;
        z-index: var(--pr-z-sticky);
        width: 100%;
    }

    body.dark-theme .header {
        background: rgba(14, 22, 26, 0.9);
        border-bottom: 1px solid rgba(61, 156, 140, 0.08);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .header .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--pr-space-xs);
        padding: 0 var(--pr-container-padding);
        max-width: var(--pr-container-width);
        margin: 0 auto;
        width: 100%;
        background: transparent !important;
    }

    .header .logo {
        font-size: clamp(0.9rem, 2vw, 1.2rem);
        text-align: center;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
        flex-shrink: 0;
        color: var(--pr-color-mint-dark);
        font-weight: 700;
        transition: color var(--pr-duration-fast) var(--pr-ease-out-cubic);
        text-decoration: none;
        padding: 4px 0 8px;
        border-bottom: 1px solid var(--theme-border-light);
        margin-bottom: 4px;
    }

    body.dark-theme .header .logo {
        color: var(--theme-brand-primary);
        border-bottom-color: rgba(61, 156, 140, 0.15);
    }

    .header-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 100%;
        flex-wrap: wrap;
        padding: 4px 0 8px; /* ← добавляем отступы */
    }

    /* ❌ CITY-BADGE СКРЫТ */
    .header-actions .city-badge {
        display: none !important;
    }

    /* ✅ ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ КНОПОК - ПРОЗРАЧНЫЙ ФОН */
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn,
    .header-actions .theme-switch {
        border-radius: var(--theme-radius-md) !important;
        background: transparent !important; /* ← УБИРАЕМ СОЛИДНЫЙ ФОН! */
        border: 1px solid var(--theme-border-light) !important;
        box-shadow: none !important; /* ← УБИРАЕМ ТЕНЬ! */
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        color: var(--theme-text-primary) !important;
        padding: 0 4px !important;
        transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic) !important;
    }

    body.dark-theme .header-actions .tools-badge,
    body.dark-theme .header-actions .payment-badge,
    body.dark-theme .header-actions .files-header-btn,
    body.dark-theme .header-actions .theme-switch {
        background: transparent !important;
        border-color: rgba(61, 156, 140, 0.15) !important;
        color: var(--pr-color-dark-text-primary) !important;
    }

    /* ✅ ЕДИНЫЙ РАЗМЕР: 44×44px */
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 !important;
    }

    /* ✅ THEME-SWITCH - ШИРЕ ДЛЯ ДВУХ ИКОНОК */
    .header-actions .theme-switch {
        width: auto !important;
        min-width: 76px !important;
        max-width: none !important;
        padding: 3px !important;
        gap: 2px !important;
    }

    /* ✅ ЕДИНЫЙ ЦВЕТ ИКОНОК */
    .header-actions .tools-badge i,
    .header-actions .payment-badge i,
    .header-actions .files-header-btn i,
    .header-actions .theme-switch i {
        color: var(--theme-text-primary) !important;
    }

    body.dark-theme .header-actions .tools-badge i,
    body.dark-theme .header-actions .payment-badge i,
    body.dark-theme .header-actions .files-header-btn i,
    body.dark-theme .header-actions .theme-switch i {
        color: var(--pr-color-dark-text-primary) !important;
    }

    .header-actions .tools-badge i,
    .header-actions .payment-badge i,
    .header-actions .files-header-btn i {
        font-size: 1.2rem !important;
        line-height: 1 !important;
    }

    /* ✅ СКРЫВАЕМ ТЕКСТ (ТОЛЬКО ИКОНКИ) */
    .header-actions .tools-badge span,
    .header-actions .payment-badge span,
    .header-actions .files-header-btn span:not(.files-count-badge) {
        display: none !important;
    }

    /* ✅ THEME-BTN ВНУТРИ ПЕРЕКЛЮЧАТЕЛЯ */
    .header-actions .theme-btn {
        border-radius: var(--theme-radius-sm) !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        color: var(--theme-text-tertiary) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic) !important;
    }

    .header-actions .theme-btn i {
        font-size: 1rem !important;
        line-height: 1 !important;
        color: var(--theme-text-tertiary) !important;
    }

    body.dark-theme .header-actions .theme-btn:not(.active) {
        color: var(--pr-color-dark-text-secondary) !important;
    }

    body.dark-theme .header-actions .theme-btn:not(.active) i {
        color: var(--pr-color-dark-text-secondary) !important;
    }

    .header-actions .theme-btn.active {
        background: var(--theme-brand-primary) !important;
        color: var(--theme-text-inverse) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .header-actions .theme-btn.active i {
        color: var(--theme-text-inverse) !important;
    }

    body.dark-theme .header-actions .theme-btn.active {
        background: var(--theme-brand-primary) !important;
        color: var(--theme-text-inverse) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    body.dark-theme .header-actions .theme-btn.active i {
        color: var(--theme-text-inverse) !important;
    }

    .header-actions .theme-btn:hover:not(.active) {
        color: var(--theme-brand-primary) !important;
        background: var(--theme-brand-primary-alpha-10) !important;
    }

    .header-actions .theme-btn:hover:not(.active) i {
        color: var(--theme-brand-primary) !important;
    }

    body.dark-theme .header-actions .theme-btn:hover:not(.active) {
        background: rgba(61, 156, 140, 0.1) !important;
        color: var(--theme-brand-primary-hover) !important;
    }

    body.dark-theme .header-actions .theme-btn:hover:not(.active) i {
        color: var(--theme-brand-primary-hover) !important;
    }

    /* ✅ FILES-COUNT-BADGE */
    .header-actions .files-header-btn {
        position: relative !important;
    }

    .header-actions .files-header-btn .files-count-badge {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
        border-width: 2px !important;
        border-radius: var(--theme-radius-full) !important;
        background: var(--theme-status-error) !important;
        color: var(--theme-text-inverse) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        border: 2px solid var(--pr-color-white) !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    body.dark-theme .header-actions .files-header-btn .files-count-badge {
        border-color: #1a1a1e !important;
    }

    /* --- ФУТЕР --- */
    .footer {
        padding: var(--pr-space-xl) 0;
        margin-top: var(--pr-space-xl);
    }

    .footer .container {
        flex-direction: column;
        gap: var(--pr-space-sm);
        text-align: center;
    }

    .footer-brand {
        align-items: center;
    }

    .footer-brand strong {
        font-size: 0.95rem;
    }

    .footer-brand span {
        font-size: 0.6rem;
    }

    .footer-nav {
        flex-direction: column;
        gap: var(--pr-space-2xs);
        width: 100%;
    }

    .footer a {
        justify-content: center;
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-xs);
        min-height: 40px;
        width: 100%;
        border-radius: var(--theme-radius-sm);
        border: 1px solid rgba(61, 156, 140, 0.06);
    }

    .footer a:hover {
        border-color: rgba(61, 156, 140, 0.2);
    }

    /* --- МОДАЛКИ --- */
    .modal {
        padding: var(--pr-space-sm);
        align-items: flex-end;
    }

    .modal-content {
        max-width: 100%;
        margin: 0;
        max-height: 92vh;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
        width: 100%;
    }

    .modal-content--files {
        max-width: 100%;
        width: 100%;
        padding: 0;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .modal-content--wide {
        max-width: 100%;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .modal-header {
        padding: var(--pr-space-md) var(--pr-space-lg);
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
        min-height: 60px;
        position: sticky;
        top: 0;
        z-index: calc(var(--pr-z-modal) + 2);
        background: inherit;
        backdrop-filter: inherit;
        -webkit-backdrop-filter: inherit;
    }

    .modal-title {
        font-size: var(--pr-font-size-md);
        gap: var(--pr-space-2xs);
    }

    .modal-title i {
        font-size: var(--pr-font-size-md);
    }

    .modal-close {
        font-size: 1.5rem;
        min-width: 40px;
        min-height: 40px;
        border-radius: var(--theme-radius-button);
    }

    .modal-body {
        padding: var(--pr-space-md);
    }

    .modal-body--pdf {
        border-radius: 0px;
    }

    .modal-body--pdf iframe {
        height: 50vh;
        border-radius: 0px;
    }

    .modal-body--pdf .pdf-iframe {
        height: 50vh;
        border-radius: 0px;
    }

    .consultation-modal-content {
        max-width: 100%;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .consultation-hero {
        margin-bottom: var(--pr-space-lg);
    }

    .consultation-hero__icon {
        font-size: 3rem;
    }

    .consultation-hero__icon i {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-hero__title {
        font-size: var(--pr-font-size-lg);
    }

    .consultation-hero__text {
        font-size: var(--pr-font-size-sm);
        padding: 0 var(--pr-space-sm);
    }

    .consultation-price-block {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .consultation-price-block__row {
        font-size: var(--pr-font-size-lg);
        flex-direction: row;
        justify-content: space-between;
    }

    .consultation-price-block__row span:last-child {
        font-size: var(--pr-font-size-xl);
    }

    .consultation-price-block__note {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-steps__title {
        font-size: var(--pr-font-size-md);
        margin-bottom: var(--pr-space-sm);
    }

    .consultation-step {
        gap: var(--pr-space-sm);
        margin-bottom: var(--pr-space-sm);
        border-radius: var(--theme-radius-input);
    }

    .consultation-step-number {
        width: 28px;
        height: 28px;
        font-size: var(--pr-font-size-xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-step-text strong {
        font-size: var(--pr-font-size-sm);
    }

    .consultation-step-text p {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-features {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pr-space-xs);
        padding: var(--pr-space-sm);
        margin: var(--pr-space-md) 0;
        border-radius: var(--theme-radius-card);
    }

    .consultation-feature i {
        font-size: var(--pr-font-size-lg);
    }

    .consultation-feature p {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-actions {
        flex-direction: column;
        gap: var(--pr-space-sm);
        margin-top: var(--pr-space-lg);
    }

    .consultation-actions .btn {
        flex: none;
        width: 100%;
    }

    .consultation-actions__note {
        font-size: var(--pr-font-size-2xs);
        margin-top: var(--pr-space-sm);
    }

    /* --- МОДАЛКА ФАЙЛОВ --- */
    .files-stats {
        flex-direction: column;
        gap: var(--pr-space-sm);
        padding: var(--pr-space-sm) var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-md);
    }

    .stat-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .stat-label {
        font-size: var(--pr-font-size-2xs);
    }

    .stat-value {
        font-size: var(--pr-font-size-sm);
    }

    .files-filters {
        justify-content: center;
        gap: 4px;
        padding: 0 4px;
        margin-bottom: var(--pr-space-md);
    }

    .files-filter-btn {
        padding: 4px 10px;
        font-size: var(--pr-font-size-2xs);
        min-height: 32px;
        border-radius: var(--theme-radius-button);
    }

    .files-list-container {
        max-height: 300px;
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-md);
    }

    .files-list-container .file-item {
        flex-wrap: wrap;
        padding: var(--pr-space-sm);
        border-radius: 0;
    }

    .files-actions {
        flex-direction: column;
        gap: var(--pr-space-xs);
        margin-top: var(--pr-space-md);
    }

    .files-actions .btn {
        width: 100%;
    }

    /* --- МОДАЛКА ОПЛАТЫ --- */
    .payment-summary {
        margin-bottom: var(--pr-space-lg);
    }

    .payment-summary__amount {
        font-size: var(--pr-font-size-3xl);
        margin: var(--pr-space-xs) 0;
    }

    .payment-summary__label {
        font-size: var(--pr-font-size-xs);
    }

    .payment-summary__description {
        font-size: var(--pr-font-size-xs);
    }

    .payment-qr {
        max-width: 200px;
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin: 0 auto var(--pr-space-lg);
    }

    .payment-qr__image {
        border-radius: var(--theme-radius-md);
        max-width: 140px;
    }

    .payment-qr__hint {
        font-size: var(--pr-font-size-2xs);
    }

    .payment-actions {
        flex-direction: column;
        gap: var(--pr-space-sm);
        align-items: center;
    }

    .payment-actions .btn {
        min-width: 100%;
        width: 100%;
        justify-content: center;
    }

    .payment-requisites {
        padding: var(--pr-space-sm) var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        font-size: var(--pr-font-size-2xs);
        line-height: 1.6;
        margin-top: var(--pr-space-lg);
    }

    .payment-requisites p {
        font-size: var(--pr-font-size-2xs);
    }

    .payment-notice {
        margin-top: var(--pr-space-sm);
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-2xs);
        border-radius: var(--theme-radius-md);
    }

    /* --- МОДАЛКА ГОСПОШЛИН --- */
    .fees-section-title {
        font-size: var(--pr-font-size-md);
        margin-bottom: var(--pr-space-sm);
    }

    .fees-section-title::after {
        width: 40px;
        height: 2px;
        border-radius: var(--theme-radius-full);
    }

    .fees-table {
        font-size: var(--pr-font-size-xs);
        margin-bottom: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .fees-table th,
    .fees-table td {
        padding: 4px 8px;
    }

    .fees-highlight {
        padding: var(--pr-space-md);
        margin-bottom: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .fees-highlight p {
        font-size: var(--pr-font-size-xs);
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .fees-highlight strong {
        min-width: auto;
        width: 100%;
    }

    .fees-exempt__grid {
        grid-template-columns: 1fr;
        gap: var(--pr-space-md);
    }

    .fees-exempt__grid ul li {
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
    }

    .fees-exempt__svo {
        padding: var(--pr-space-sm) var(--pr-space-md);
        border-radius: var(--theme-radius-card);
    }

    .fees-exempt__svo p {
        font-size: var(--pr-font-size-sm);
    }

    .fees-exempt__svo-list li {
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
    }

    .fees-exempt__svo-note {
        font-size: var(--pr-font-size-2xs);
    }

    .fees-exempt__extra {
        grid-template-columns: 1fr;
        gap: var(--pr-space-md);
    }

    .fees-exempt__extra p:first-child {
        font-size: var(--pr-font-size-sm);
    }

    .fees-exempt__extra p:last-child {
        font-size: var(--pr-font-size-xs);
    }

    .fees-exempt__footer {
        font-size: var(--pr-font-size-2xs);
        margin-top: var(--pr-space-md);
        padding-top: var(--pr-space-sm);
    }

    .fees-new-rules {
        padding: var(--pr-space-md);
        border-radius: var(--theme-radius-card);
        margin-top: var(--pr-space-md);
    }

    .fees-new-rules h4 {
        font-size: var(--pr-font-size-sm);
        margin-bottom: var(--pr-space-sm);
    }

    .fees-new-rules ul li {
        font-size: var(--pr-font-size-xs);
        gap: var(--pr-space-2xs);
        margin-bottom: var(--pr-space-xs);
    }

    .fees-note {
        margin-top: var(--pr-space-md);
        font-size: var(--pr-font-size-2xs);
        max-width: 100%;
        padding-top: var(--pr-space-sm);
    }

    /* --- COOKIE-BANNER --- */
    .cookie-banner {
        padding: 10px 0;
    }

    .cookie-banner__content {
        flex-direction: column;
        gap: 10px;
        padding: 0 var(--pr-container-padding);
    }

    .cookie-banner__title {
        font-size: var(--pr-font-size-2xs);
        justify-content: center;
    }

    .cookie-banner__description {
        font-size: var(--pr-font-size-2xs);
        text-align: center;
    }

    .cookie-banner__actions {
        flex-direction: row;
        justify-content: center;
        width: 100%;
        gap: 6px;
    }

    .cookie-banner__btn {
        flex: 1;
        justify-content: center;
        padding: 6px 12px;
        font-size: var(--pr-font-size-2xs);
        min-height: 36px;
        border-radius: var(--theme-radius-button);
        max-width: 140px;
    }

    /* --- SCROLL-TOP-BTN --- */
    .scroll-top-btn {
        width: 40px;
        height: 40px;
        bottom: 16px;
        right: 16px;
        font-size: 1.1rem;
        border-radius: var(--theme-radius-button);
        box-shadow: var(--theme-shadow-sm);
    }

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

/* ============================================================
   7.2.1. ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ (ВСЕ УСТРОЙСТВА)
   ============================================================ */

/* --- 1. ТЕЛЕФОНЫ И ПЛАНШЕТЫ В ЛАНДШАФТЕ (до 1024px) --- */
@media (max-width: 1024px) and (orientation: landscape) {
    /* --- ХЕДЕР --- */
    .header {
        padding: 4px 0 !important;
        min-height: 48px !important;
    }

    .header .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: var(--pr-space-sm) !important;
        padding: 0 var(--pr-container-padding) !important;
        height: auto !important;
    }

    .header .logo {
        font-size: clamp(0.85rem, 1.5vw, 1.2rem) !important;
        text-align: left !important;
        width: auto !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 60% !important;
    }

    .header-actions {
        justify-content: flex-end !important;
        gap: 4px !important;
        width: auto !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ❌ Скрываем city-badge */
    .header-actions .city-badge {
        display: none !important;
    }

    /* ✅ Все кнопки - ПРЯМОУГОЛЬНЫЕ (как на десктопе) */
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn,
    .header-actions .theme-switch {
        border-radius: var(--theme-radius-md) !important;
        background: var(--theme-bg-surface) !important;
        border: 1px solid var(--theme-border-light) !important;
        box-shadow: var(--theme-shadow-xs) !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        color: var(--theme-text-primary) !important;
        padding: 0 4px !important;
    }

    /* ✅ Единый размер: 36×36px (компактно для ландшафта) */
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
    }

    /* ✅ Theme-switch - шире для двух иконок */
    .header-actions .theme-switch {
        width: auto !important;
        min-width: 64px !important;
        max-width: none !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    /* ✅ Скрываем текст (только иконки) */
    .header-actions .tools-badge span,
    .header-actions .payment-badge span,
    .header-actions .files-header-btn span:not(.files-count-badge) {
        display: none !important;
    }

    .header-actions .tools-badge i,
    .header-actions .payment-badge i,
    .header-actions .files-header-btn i {
        font-size: 15px !important;
        line-height: 1 !important;
        color: var(--theme-text-primary) !important;
    }

    /* ✅ Theme-btn внутри переключателя */
    .header-actions .theme-btn {
        border-radius: var(--theme-radius-sm) !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 12px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        color: var(--theme-text-tertiary) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic) !important;
    }

    .header-actions .theme-btn i {
        font-size: 12px !important;
        line-height: 1 !important;
        color: var(--theme-text-tertiary) !important;
    }

    .header-actions .theme-btn.active {
        background: var(--theme-brand-primary) !important;
        color: var(--theme-text-inverse) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .header-actions .theme-btn.active i {
        color: var(--theme-text-inverse) !important;
    }

    .header-actions .theme-btn:hover:not(.active) {
        color: var(--theme-brand-primary) !important;
        background: var(--theme-brand-primary-alpha-10) !important;
    }

    .header-actions .theme-btn:hover:not(.active) i {
        color: var(--theme-brand-primary) !important;
    }

    /* --- DARK THEME --- */
    body.dark-theme .header-actions .tools-badge,
    body.dark-theme .header-actions .payment-badge,
    body.dark-theme .header-actions .files-header-btn,
    body.dark-theme .header-actions .theme-switch {
        background: rgba(24, 34, 40, 0.7) !important;
        border-color: rgba(61, 156, 140, 0.15) !important;
        color: var(--pr-color-dark-text-primary) !important;
    }

    body.dark-theme .header-actions .tools-badge i,
    body.dark-theme .header-actions .payment-badge i,
    body.dark-theme .header-actions .files-header-btn i,
    body.dark-theme .header-actions .theme-switch i {
        color: var(--pr-color-dark-text-primary) !important;
    }

    body.dark-theme .header-actions .theme-btn:not(.active) {
        color: var(--pr-color-dark-text-secondary) !important;
    }

    body.dark-theme .header-actions .theme-btn:not(.active) i {
        color: var(--pr-color-dark-text-secondary) !important;
    }

    body.dark-theme .header-actions .theme-btn:hover:not(.active) {
        background: rgba(61, 156, 140, 0.1) !important;
        color: var(--theme-brand-primary-hover) !important;
    }

    body.dark-theme .header-actions .theme-btn:hover:not(.active) i {
        color: var(--theme-brand-primary-hover) !important;
    }

    body.dark-theme .header-actions .theme-btn.active {
        background: var(--theme-brand-primary) !important;
        color: var(--theme-text-inverse) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    body.dark-theme .header-actions .theme-btn.active i {
        color: var(--theme-text-inverse) !important;
    }

    /* ✅ FILES-COUNT-BADGE */
    .header-actions .files-header-btn {
        position: relative !important;
    }

    .header-actions .files-header-btn .files-count-badge {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        min-width: 14px !important;
        height: 14px !important;
        font-size: 7px !important;
        border-width: 1.5px !important;
        border-radius: var(--theme-radius-full) !important;
        background: var(--theme-status-error) !important;
        color: var(--theme-text-inverse) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 3px !important;
        border: 1.5px solid var(--pr-color-white) !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    body.dark-theme .header-actions .files-header-btn .files-count-badge {
        border-color: #1a1a1e !important;
    }
}

/* --- 2. ШИРОКИЕ ПЛАНШЕТЫ В ЛАНДШАФТЕ (1025-1280px) --- */
@media (min-width: 1025px) and (max-width: 1280px) and (orientation: landscape) {
    /* --- ХЕДЕР --- */
    .header {
        padding: var(--pr-space-sm) 0 !important;
        min-height: 56px !important;
    }

    .header .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: var(--pr-space-md) !important;
        padding: 0 var(--pr-container-padding) !important;
    }

    .header .logo {
        font-size: clamp(1rem, 1.8vw, 1.4rem) !important;
        text-align: left !important;
        width: auto !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 50% !important;
    }

    .header-actions {
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ❌ city-badge - показываем компактно */
    .header-actions .city-badge {
        display: inline-flex !important;
        padding: 0 12px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: var(--pr-font-size-2xs) !important;
        gap: 4px !important;
    }

    .header-actions .city-badge #currentTime {
        display: none !important;
    }

    .header-actions .city-badge span:not(.bi) {
        display: inline !important;
        font-size: var(--pr-font-size-2xs) !important;
    }

    /* ✅ Все кнопки - ПРЯМОУГОЛЬНЫЕ */
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn,
    .header-actions .theme-switch {
        border-radius: var(--theme-radius-md) !important;
        background: var(--theme-bg-surface) !important;
        border: 1px solid var(--theme-border-light) !important;
        box-shadow: var(--theme-shadow-xs) !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        color: var(--theme-text-primary) !important;
        padding: 0 8px !important;
    }

    /* ✅ Размер кнопок: 36×36px */
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
    }

    /* ✅ Theme-switch - шире для двух иконок */
    .header-actions .theme-switch {
        width: auto !important;
        min-width: 64px !important;
        max-width: none !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .header-actions .tools-badge i,
    .header-actions .payment-badge i,
    .header-actions .files-header-btn i {
        font-size: 15px !important;
        line-height: 1 !important;
        color: var(--theme-text-primary) !important;
    }

    /* ✅ Скрываем текст (только иконки) */
    .header-actions .tools-badge span,
    .header-actions .payment-badge span,
    .header-actions .files-header-btn span:not(.files-count-badge) {
        display: none !important;
    }

    /* ✅ Theme-btn */
    .header-actions .theme-btn {
        border-radius: var(--theme-radius-sm) !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 12px !important;
        padding: 0 !important;
    }

    .header-actions .theme-btn i {
        font-size: 12px !important;
    }

    .header-actions .theme-btn.active {
        background: var(--theme-brand-primary) !important;
        color: var(--theme-text-inverse) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .header-actions .theme-btn.active i {
        color: var(--theme-text-inverse) !important;
    }

    .header-actions .theme-btn:hover:not(.active) {
        color: var(--theme-brand-primary) !important;
        background: var(--theme-brand-primary-alpha-10) !important;
    }

    .header-actions .theme-btn:hover:not(.active) i {
        color: var(--theme-brand-primary) !important;
    }

    /* --- DARK THEME --- */
    body.dark-theme .header-actions .tools-badge,
    body.dark-theme .header-actions .payment-badge,
    body.dark-theme .header-actions .files-header-btn,
    body.dark-theme .header-actions .theme-switch {
        background: rgba(24, 34, 40, 0.7) !important;
        border-color: rgba(61, 156, 140, 0.15) !important;
        color: var(--pr-color-dark-text-primary) !important;
    }

    body.dark-theme .header-actions .tools-badge i,
    body.dark-theme .header-actions .payment-badge i,
    body.dark-theme .header-actions .files-header-btn i,
    body.dark-theme .header-actions .theme-switch i {
        color: var(--pr-color-dark-text-primary) !important;
    }

    body.dark-theme .header-actions .theme-btn:not(.active) {
        color: var(--pr-color-dark-text-secondary) !important;
    }

    body.dark-theme .header-actions .theme-btn:not(.active) i {
        color: var(--pr-color-dark-text-secondary) !important;
    }

    body.dark-theme .header-actions .theme-btn:hover:not(.active) {
        background: rgba(61, 156, 140, 0.1) !important;
        color: var(--theme-brand-primary-hover) !important;
    }

    body.dark-theme .header-actions .theme-btn:hover:not(.active) i {
        color: var(--theme-brand-primary-hover) !important;
    }

    body.dark-theme .header-actions .theme-btn.active {
        background: var(--theme-brand-primary) !important;
        color: var(--theme-text-inverse) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    body.dark-theme .header-actions .theme-btn.active i {
        color: var(--theme-text-inverse) !important;
    }

    /* ✅ FILES-COUNT-BADGE */
    .header-actions .files-header-btn {
        position: relative !important;
    }

    .header-actions .files-header-btn .files-count-badge {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        min-width: 14px !important;
        height: 14px !important;
        font-size: 7px !important;
        border-width: 1.5px !important;
        border-radius: var(--theme-radius-full) !important;
        background: var(--theme-status-error) !important;
        color: var(--theme-text-inverse) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 3px !important;
        border: 1.5px solid var(--pr-color-white) !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    body.dark-theme .header-actions .files-header-btn .files-count-badge {
        border-color: #1a1a1e !important;
    }

    /* ✅ city-badge в тёмной теме */
    body.dark-theme .header-actions .city-badge {
        background: rgba(24, 34, 40, 0.7) !important;
        border-color: rgba(61, 156, 140, 0.15) !important;
        color: var(--pr-color-dark-text-primary) !important;
    }
}

/* ============================================================
   7.3. МАЛЕНЬКИЕ МОБИЛЬНЫЕ (до 479px)
   ============================================================ */

@media (max-width: 479px) {
    /* --- ХЕДЕР --- */
    .header {
        padding: 6px 0;
        min-height: 56px;
    }

    .header .logo {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        text-align: center;
        width: 100%;
        word-break: break-word;
    }

    .header-actions {
        gap: 3px;
    }

    .header-actions .city-badge,
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        border-radius: var(--theme-radius-full);
        padding: 0;
    }

    .header-actions .city-badge .bi-geo-alt {
        font-size: 14px;
    }

    .header-actions .theme-switch {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 2px;
        border-radius: var(--theme-radius-full);
    }

    .header-actions .theme-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 10px;
        border-radius: var(--theme-radius-full);
    }

    .header-actions .theme-btn i {
        font-size: 10px;
    }

    .header-actions .tools-badge i,
    .header-actions .payment-badge i,
    .header-actions .files-header-btn i {
        font-size: 14px;
    }

    .header-actions .files-header-btn .files-count-badge {
        min-width: 14px;
        height: 14px;
        font-size: 7px;
        top: -2px;
        right: -2px;
        border-width: 1px;
    }

    /* --- ФУТЕР --- */
    .footer {
        padding: var(--pr-space-lg) 0;
        margin-top: var(--pr-space-lg);
    }

    .footer-brand strong {
        font-size: 0.85rem;
    }

    .footer a {
        font-size: var(--pr-font-size-2xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        min-height: 36px;
    }

    /* --- МОДАЛКИ --- */
    .modal-header {
        padding: var(--pr-space-sm) var(--pr-space-md);
        min-height: 52px;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .modal-title {
        font-size: var(--pr-font-size-sm);
    }

    .modal-title i {
        font-size: var(--pr-font-size-sm);
    }

    .modal-close {
        font-size: 1.3rem;
        min-width: 36px;
        min-height: 36px;
        border-radius: var(--theme-radius-button);
    }

    .modal-body {
        padding: var(--pr-space-sm);
    }

    .modal-body--pdf iframe {
        height: 40vh;
    }

    .modal-body--pdf .pdf-iframe {
        height: 40vh;
    }

    .consultation-hero__icon {
        font-size: 2.5rem;
    }

    .consultation-hero__icon i {
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-hero__title {
        font-size: var(--pr-font-size-md);
    }

    .consultation-hero__text {
        font-size: var(--pr-font-size-xs);
        padding: 0;
    }

    .consultation-price-block {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .consultation-price-block__row {
        font-size: var(--pr-font-size-md);
        flex-direction: column;
        gap: var(--pr-space-xs);
    }

    .consultation-price-block__row span:last-child {
        font-size: var(--pr-font-size-lg);
    }

    .consultation-price-block__note {
        font-size: var(--pr-font-size-2xs);
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--pr-space-2xs);
    }

    .consultation-step {
        gap: var(--pr-space-xs);
        margin-bottom: var(--pr-space-xs);
        border-radius: var(--theme-radius-input);
    }

    .consultation-step-number {
        width: 24px;
        height: 24px;
        font-size: var(--pr-font-size-2xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-step-text strong {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-step-text p {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-features {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pr-space-2xs);
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .consultation-feature i {
        font-size: var(--pr-font-size-md);
    }

    .consultation-feature p {
        font-size: var(--pr-font-size-3xs);
    }

    .consultation-actions__note {
        font-size: var(--pr-font-size-3xs);
    }

    .files-stats {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        gap: 4px;
        border-radius: var(--theme-radius-card);
    }

    .stat-label {
        font-size: var(--pr-font-size-2xs);
    }

    .stat-value {
        font-size: var(--pr-font-size-xs);
    }

    .files-filter-btn {
        padding: 4px 8px;
        font-size: var(--pr-font-size-2xs);
        min-height: 30px;
        border-radius: var(--theme-radius-button);
    }

    .files-list-container {
        max-height: 250px;
        border-radius: var(--theme-radius-card);
    }

    .files-list-container .file-item {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
    }

    .payment-summary__amount {
        font-size: var(--pr-font-size-2xl);
    }

    .payment-qr {
        max-width: 160px;
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .payment-qr__image {
        border-radius: var(--theme-radius-md);
        max-width: 120px;
    }

    .payment-actions .btn {
        min-height: 40px;
        padding: var(--pr-space-xs) var(--pr-space-sm);
        font-size: var(--pr-font-size-sm);
        min-width: 100%;
    }

    .payment-requisites {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        font-size: var(--pr-font-size-2xs);
        line-height: 1.5;
    }

    .payment-requisites p {
        font-size: var(--pr-font-size-2xs);
    }

    .payment-notice {
        font-size: var(--pr-font-size-3xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        border-radius: var(--theme-radius-md);
    }

    .fees-table {
        font-size: var(--pr-font-size-2xs);
    }

    .fees-table th,
    .fees-table td {
        padding: 3px 6px;
    }

    .fees-highlight {
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .fees-highlight p {
        font-size: var(--pr-font-size-2xs);
    }

    .fees-exempt__grid ul li {
        font-size: var(--pr-font-size-2xs);
    }

    .fees-exempt__svo-list li {
        font-size: var(--pr-font-size-2xs);
    }

    .fees-new-rules ul li {
        font-size: var(--pr-font-size-2xs);
    }

    .fees-note {
        font-size: var(--pr-font-size-3xs);
    }

    /* --- COOKIE-BANNER --- */
    .cookie-banner {
        padding: 8px 0;
    }

    .cookie-banner__content {
        gap: 8px;
    }

    .cookie-banner__title {
        font-size: var(--pr-font-size-3xs);
    }

    .cookie-banner__description {
        font-size: var(--pr-font-size-3xs);
    }

    .cookie-banner__btn {
        padding: 4px 10px;
        font-size: var(--pr-font-size-3xs);
        min-height: 32px;
        border-radius: var(--theme-radius-button);
        max-width: 100px;
    }

    /* --- SCROLL-TOP-BTN --- */
    .scroll-top-btn {
        width: 36px;
        height: 36px;
        bottom: 12px;
        right: 12px;
        font-size: 0.9rem;
        border-radius: var(--theme-radius-button);
    }
}

/* ============================================================
   7.4. ОЧЕНЬ МАЛЕНЬКИЕ МОБИЛЬНЫЕ (до 359px)
   ============================================================ */

@media (max-width: 359px) {
    /* --- ХЕДЕР --- */
    .header {
        padding: 4px 0;
        min-height: 48px;
    }

    .header .logo {
        font-size: 0.75rem;
        text-align: center;
    }

    .header-actions {
        gap: 2px;
    }

    .header-actions .city-badge,
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        border-radius: var(--theme-radius-full);
        padding: 0;
        font-size: 0;
    }

    .header-actions .city-badge .bi-geo-alt {
        font-size: 12px;
    }

    .header-actions .theme-switch {
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding: 2px;
        border-radius: var(--theme-radius-full);
    }

    .header-actions .theme-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 9px;
        border-radius: var(--theme-radius-full);
    }

    .header-actions .theme-btn i {
        font-size: 9px;
    }

    .header-actions .tools-badge i,
    .header-actions .payment-badge i,
    .header-actions .files-header-btn i {
        font-size: 12px;
    }

    .header-actions .files-header-btn .files-count-badge {
        min-width: 12px;
        height: 12px;
        font-size: 6px;
        top: -2px;
        right: -2px;
        border-width: 1px;
    }

    /* --- МОДАЛКИ --- */
    .modal-header {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        min-height: 44px;
        border-radius: var(--theme-radius-modal) var(--theme-radius-modal) 0px 0px;
    }

    .modal-title {
        font-size: var(--pr-font-size-xs);
    }

    .modal-close {
        font-size: 1.1rem;
        min-width: 32px;
        min-height: 32px;
        border-radius: var(--theme-radius-button);
    }

    .modal-body {
        padding: var(--pr-space-xs);
    }

    .modal-body--pdf iframe {
        height: 30vh;
    }

    .modal-body--pdf .pdf-iframe {
        height: 30vh;
    }

    .consultation-hero__icon {
        font-size: 2rem;
    }

    .consultation-hero__icon i {
        padding: var(--pr-space-2xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-hero__title {
        font-size: var(--pr-font-size-sm);
    }

    .consultation-hero__text {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-price-block {
        padding: var(--pr-space-2xs) var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
    }

    .consultation-price-block__row {
        font-size: var(--pr-font-size-sm);
        flex-direction: column;
        gap: var(--pr-space-2xs);
    }

    .consultation-price-block__row span:last-child {
        font-size: var(--pr-font-size-md);
    }

    .consultation-step {
        gap: var(--pr-space-2xs);
        margin-bottom: var(--pr-space-2xs);
        border-radius: var(--theme-radius-input);
    }

    .consultation-step-number {
        width: 20px;
        height: 20px;
        font-size: var(--pr-font-size-3xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-step-text strong {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-step-text p {
        font-size: var(--pr-font-size-3xs);
    }

    .consultation-features {
        grid-template-columns: 1fr 1fr;
        gap: var(--pr-space-2xs);
        padding: var(--pr-space-2xs);
        border-radius: var(--theme-radius-card);
    }

    .consultation-feature i {
        font-size: var(--pr-font-size-sm);
    }

    .consultation-feature p {
        font-size: var(--pr-font-size-3xs);
    }

    .payment-summary__amount {
        font-size: var(--pr-font-size-xl);
    }

    .payment-qr {
        max-width: 140px;
        padding: var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .payment-qr__image {
        border-radius: var(--theme-radius-sm);
        max-width: 100px;
    }

    .payment-actions .btn {
        font-size: var(--pr-font-size-xs);
        min-height: 36px;
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        min-width: 100%;
    }

    .payment-requisites {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
        font-size: var(--pr-font-size-3xs);
        line-height: 1.4;
    }

    .payment-requisites p {
        font-size: var(--pr-font-size-3xs);
    }

    .payment-notice {
        font-size: var(--pr-font-size-3xs);
        padding: var(--pr-space-2xs) var(--pr-space-2xs);
        border-radius: var(--theme-radius-card);
    }

    .files-stats {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        gap: 2px;
        border-radius: var(--theme-radius-card);
    }

    .stat-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .stat-label {
        font-size: var(--pr-font-size-3xs);
    }

    .stat-value {
        font-size: var(--pr-font-size-2xs);
    }

    .files-filter-btn {
        padding: 2px 6px;
        font-size: var(--pr-font-size-3xs);
        min-height: 28px;
        border-radius: var(--theme-radius-button);
    }

    .files-list-container {
        max-height: 200px;
        border-radius: var(--theme-radius-card);
    }

    .files-list-container .file-item {
        padding: var(--pr-space-2xs);
    }

    .fees-table {
        font-size: var(--pr-font-size-3xs);
    }

    .fees-table th,
    .fees-table td {
        padding: 2px 4px;
    }

    .fees-highlight {
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
    }

    .fees-highlight p {
        font-size: var(--pr-font-size-3xs);
    }

    .fees-exempt__grid ul li {
        font-size: var(--pr-font-size-3xs);
        gap: var(--pr-space-2xs);
    }

    .fees-exempt__svo-list li {
        font-size: var(--pr-font-size-3xs);
    }

    .fees-new-rules ul li {
        font-size: var(--pr-font-size-3xs);
    }

    /* --- COOKIE-BANNER --- */
    .cookie-banner {
        padding: 6px 0;
    }

    .cookie-banner__content {
        gap: 6px;
    }

    .cookie-banner__title {
        font-size: var(--pr-font-size-3xs);
    }

    .cookie-banner__description {
        font-size: var(--pr-font-size-3xs);
        line-height: 1.3;
    }

    .cookie-banner__btn {
        padding: 4px 8px;
        font-size: var(--pr-font-size-3xs);
        min-height: 28px;
        border-radius: var(--theme-radius-button);
        max-width: 80px;
    }

    /* --- SCROLL-TOP-BTN --- */
    .scroll-top-btn {
        width: 32px;
        height: 32px;
        bottom: 10px;
        right: 10px;
        font-size: 0.8rem;
        border-radius: var(--theme-radius-button);
    }
}

/* ============================================================
   7.5. ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ НА МОБИЛЬНЫХ
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* --- ХЕДЕР --- */
    .header {
        padding: 4px 0;
        min-height: 48px;
    }

    .header .logo {
        font-size: clamp(0.8rem, 1.5vw, 1rem);
    }

    .header-actions .city-badge,
    .header-actions .tools-badge,
    .header-actions .payment-badge,
    .header-actions .files-header-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        border-radius: var(--theme-radius-full);
        padding: 0;
    }

    .header-actions .theme-switch {
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 2px;
        border-radius: var(--theme-radius-full);
    }

    .header-actions .theme-btn {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        font-size: 10px;
        border-radius: var(--theme-radius-full);
    }

    /* --- МОДАЛКИ --- */
    .modal-content {
        max-height: 95vh;
    }

    .modal-body--pdf iframe {
        height: 50vh;
    }

    .modal-body--pdf .pdf-iframe {
        height: 50vh;
    }

    .payment-summary {
        margin-bottom: var(--pr-space-sm);
    }

    .payment-summary__amount {
        font-size: var(--pr-font-size-2xl);
        margin: var(--pr-space-2xs) 0;
    }

    .payment-qr {
        max-width: 140px;
        padding: var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        margin: 0 auto var(--pr-space-sm);
    }

    .payment-qr__image {
        border-radius: var(--theme-radius-md);
        max-width: 100px;
    }

    .payment-requisites {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        font-size: var(--pr-font-size-2xs);
        line-height: 1.4;
        margin-top: var(--pr-space-sm);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--pr-space-md);
    }

    .payment-requisites p {
        font-size: var(--pr-font-size-2xs);
        margin: 0;
    }

    .payment-notice {
        font-size: var(--pr-font-size-2xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
        margin-top: var(--pr-space-2xs);
    }

    .consultation-hero {
        margin-bottom: var(--pr-space-sm);
    }

    .consultation-hero__icon {
        font-size: 2rem;
    }

    .consultation-hero__icon i {
        padding: var(--pr-space-2xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-hero__title {
        font-size: var(--pr-font-size-md);
    }

    .consultation-hero__text {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-price-block {
        padding: var(--pr-space-xs) var(--pr-space-sm);
        border-radius: var(--theme-radius-card);
        margin-bottom: var(--pr-space-sm);
    }

    .consultation-price-block__row {
        font-size: var(--pr-font-size-md);
    }

    .consultation-step {
        gap: var(--pr-space-2xs);
        margin-bottom: var(--pr-space-2xs);
        border-radius: var(--theme-radius-input);
    }

    .consultation-step-number {
        width: 20px;
        height: 20px;
        font-size: var(--pr-font-size-2xs);
        border-radius: var(--theme-radius-full);
    }

    .consultation-step-text strong {
        font-size: var(--pr-font-size-xs);
    }

    .consultation-step-text p {
        font-size: var(--pr-font-size-2xs);
    }

    .consultation-features {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--pr-space-2xs);
        padding: var(--pr-space-2xs) var(--pr-space-xs);
        border-radius: var(--theme-radius-card);
        margin: var(--pr-space-xs) 0;
    }

    .consultation-feature i {
        font-size: var(--pr-font-size-sm);
    }

    .consultation-feature p {
        font-size: var(--pr-font-size-3xs);
    }

    .consultation-actions {
        margin-top: var(--pr-space-sm);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   08 - UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   8.1. DISPLAY
   ============================================================ */

.d-none {
    display: none;
}
.d-block {
    display: block;
}
.d-flex {
    display: flex;
}
.d-grid {
    display: grid;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}
.d-inline-flex {
    display: inline-flex;
}

/* ============================================================
   8.2. FLEX & ALIGN
   ============================================================ */

/* --- Direction --- */
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-1 {
    flex: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}

/* --- Justify --- */
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}

/* --- Align --- */
.align-start {
    align-items: flex-start;
}
.align-end {
    align-items: flex-end;
}
.align-center {
    align-items: center;
}
.align-stretch {
    align-items: stretch;
}
.align-baseline {
    align-items: baseline;
}

/* ============================================================
   8.3. TEXT
   ============================================================ */

/* --- Alignment --- */
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}

/* --- Font Size --- */
.text-xs {
    font-size: var(--pr-font-size-xs);
}
.text-sm {
    font-size: var(--pr-font-size-sm);
}
.text-md {
    font-size: var(--pr-font-size-md);
}
.text-lg {
    font-size: var(--pr-font-size-lg);
}
.text-xl {
    font-size: var(--pr-font-size-xl);
}

.fs-0-8 {
    font-size: 0.8rem;
}
.fs-0-85 {
    font-size: 0.85rem;
}
.fs-0-9 {
    font-size: 0.9rem;
}
.fs-0-95 {
    font-size: 0.95rem;
}
.fs-1-1 {
    font-size: 1.1rem;
}
.fs-1-2 {
    font-size: 1.2rem;
}
.fs-4rem {
    font-size: 4rem;
}

/* --- Font Weight --- */
.font-normal {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}

/* --- Font Misc --- */
.font-inherit {
    font-family: inherit;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-capitalize {
    text-transform: capitalize;
}
.text-decoration-none {
    text-decoration: none;
}
.no-underline {
    text-decoration: none;
}
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.word-break {
    word-break: break-word;
}
.overflow-wrap {
    overflow-wrap: break-word;
}

/* --- Text Colors --- */
.text-primary {
    color: var(--theme-brand-primary);
}
.text-accent {
    color: var(--theme-accent-primary);
}
.text-gold {
    color: var(--theme-brand-primary);
}
.text-white {
    color: var(--pr-color-white);
}
.text-brand {
    color: var(--theme-brand-primary);
}
.text-brand-light {
    color: var(--theme-brand-primary-hover);
}
.text-gray-500 {
    color: var(--pr-color-gray-500);
}
.text-gray-600 {
    color: var(--pr-color-gray-600);
}
.text-gray-700 {
    color: var(--pr-color-gray-700);
}
.text-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Dark Theme Overrides --- */
body.dark-theme .text-primary {
    color: var(--theme-brand-primary);
}
body.dark-theme .text-accent {
    color: var(--theme-accent-primary);
}
body.dark-theme .text-gold {
    color: var(--theme-brand-primary);
}
body.dark-theme .text-brand {
    color: var(--theme-brand-primary);
}
body.dark-theme .text-brand-light {
    color: var(--theme-brand-primary-hover);
}

/* ============================================================
   8.4. BACKGROUND
   ============================================================ */

.bg-primary {
    background: var(--theme-brand-primary);
}
.bg-accent {
    background: var(--theme-accent-primary);
}
.bg-gold {
    background: var(--theme-brand-primary);
}
.bg-surface {
    background: var(--theme-bg-surface);
}
.bg-gray-50 {
    background: var(--pr-color-gray-50);
}
.bg-white {
    background: var(--pr-color-white);
}
.bg-white-70 {
    background: rgba(255, 255, 255, 0.7);
}
.bg-primary-alpha-10 {
    background: var(--theme-brand-primary-alpha-10);
}
.bg-transparent {
    background: transparent;
}
.bg-white-10 {
    background: rgba(255, 255, 255, 0.1);
}
.bg-white-20 {
    background: rgba(255, 255, 255, 0.2);
}
.bg-black-40 {
    background: rgba(0, 0, 0, 0.4);
}
.bg-black-60 {
    background: rgba(0, 0, 0, 0.6);
}

/* --- Dark Theme Overrides --- */
body.dark-theme .bg-surface {
    background: var(--pr-color-dark-surface);
}
body.dark-theme .bg-gray-50 {
    background: var(--pr-color-dark-surface);
}
body.dark-theme .bg-white {
    background: var(--pr-color-dark-surface);
}
body.dark-theme .bg-white-70 {
    background: rgba(24, 34, 40, 0.7);
}
body.dark-theme .bg-white-10 {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-theme .bg-white-20 {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   8.5. SPACING - MARGIN
   ============================================================ */

/* --- Zero --- */
.m-0 {
    margin: 0;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mt-auto {
    margin-top: auto;
}
.mb-auto {
    margin-bottom: auto;
}
.ml-auto {
    margin-left: auto;
}
.mr-auto {
    margin-right: auto;
}

/* --- Margin Top --- */
.mt-8 {
    margin-top: var(--pr-space-xs);
}
.mt-12 {
    margin-top: var(--pr-space-sm);
}
.mt-16 {
    margin-top: var(--pr-space-md);
}
.mt-20 {
    margin-top: var(--pr-space-lg);
}
.mt-24 {
    margin-top: var(--pr-space-xl);
}
.mt-32 {
    margin-top: var(--pr-space-2xl);
}
.mt-40 {
    margin-top: var(--pr-space-3xl);
}
.mt-48 {
    margin-top: var(--pr-space-4xl);
}
.mt-60 {
    margin-top: var(--pr-space-5xl);
}
.mt-0 {
    margin-top: 0;
}

/* --- Margin Bottom --- */
.mb-8 {
    margin-bottom: var(--pr-space-xs);
}
.mb-12 {
    margin-bottom: var(--pr-space-sm);
}
.mb-16 {
    margin-bottom: var(--pr-space-md);
}
.mb-20 {
    margin-bottom: var(--pr-space-lg);
}
.mb-24 {
    margin-bottom: var(--pr-space-xl);
}
.mb-32 {
    margin-bottom: var(--pr-space-2xl);
}
.mb-40 {
    margin-bottom: var(--pr-space-3xl);
}
.mb-48 {
    margin-bottom: var(--pr-space-4xl);
}
.mb-0 {
    margin-bottom: 0;
}

/* --- Margin Right --- */
.mr-8 {
    margin-right: var(--pr-space-xs);
}
.mr-12 {
    margin-right: var(--pr-space-sm);
}
.mr-16 {
    margin-right: var(--pr-space-md);
}

/* --- Margin Y (top + bottom) --- */
.my-16 {
    margin-top: var(--pr-space-md);
    margin-bottom: var(--pr-space-md);
}
.my-24 {
    margin-top: var(--pr-space-xl);
    margin-bottom: var(--pr-space-xl);
}

/* ============================================================
   8.6. SPACING - PADDING
   ============================================================ */

/* --- Zero --- */
.p-0 {
    padding: 0;
}
.pt-0 {
    padding-top: 0;
}

/* --- All Sides --- */
.p-12 {
    padding: var(--pr-space-sm);
}
.p-16 {
    padding: var(--pr-space-md);
}
.p-20 {
    padding: var(--pr-space-lg);
}
.p-24 {
    padding: var(--pr-space-xl);
}

/* --- Padding Top --- */
.pt-8 {
    padding-top: var(--pr-space-xs);
}
.pt-12 {
    padding-top: var(--pr-space-sm);
}
.pt-16 {
    padding-top: var(--pr-space-md);
}
.pt-20 {
    padding-top: var(--pr-space-lg);
}
.pt-24 {
    padding-top: var(--pr-space-xl);
}

/* --- Padding Bottom --- */
.pb-8 {
    padding-bottom: var(--pr-space-xs);
}
.pb-12 {
    padding-bottom: var(--pr-space-sm);
}
.pb-16 {
    padding-bottom: var(--pr-space-md);
}
.pb-20 {
    padding-bottom: var(--pr-space-lg);
}

/* --- Padding Y (top + bottom) --- */
.py-16 {
    padding-top: var(--pr-space-md);
    padding-bottom: var(--pr-space-md);
}
.py-20 {
    padding-top: var(--pr-space-lg);
    padding-bottom: var(--pr-space-lg);
}
.py-24 {
    padding-top: var(--pr-space-xl);
    padding-bottom: var(--pr-space-xl);
}
.py-40 {
    padding-top: var(--pr-space-3xl);
    padding-bottom: var(--pr-space-3xl);
}
.py-60 {
    padding-top: var(--pr-space-5xl);
    padding-bottom: var(--pr-space-5xl);
}
.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Padding X (left + right) --- */
.px-16 {
    padding-left: var(--pr-space-md);
    padding-right: var(--pr-space-md);
}
.px-20 {
    padding-left: var(--pr-space-lg);
    padding-right: var(--pr-space-lg);
}
.px-24 {
    padding-left: var(--pr-space-xl);
    padding-right: var(--pr-space-xl);
}

/* ============================================================
   8.7. GAPS
   ============================================================ */

.gap-6 {
    gap: var(--pr-space-xs);
}
.gap-8 {
    gap: var(--pr-space-sm);
}
.gap-12 {
    gap: var(--pr-space-md);
}
.gap-16 {
    gap: var(--pr-space-lg);
}
.gap-20 {
    gap: var(--pr-space-xl);
}
.gap-24 {
    gap: var(--pr-space-2xl);
}

/* ============================================================
   8.8. BORDER & RADIUS
   ============================================================ */

/* --- Border --- */
.border-none {
    border: none;
}
.border-dashed {
    border-style: dashed;
}
.border-top-gray {
    border-top: 1px solid var(--theme-border-light);
}
.border-bottom-gray {
    border-bottom: 1px solid var(--theme-border-light);
}
.border-dashed-gray {
    border: 2px dashed var(--theme-border-medium);
}
.border-gray-200 {
    border: 1px solid var(--pr-color-gray-200);
}
.border-left-accent {
    border-left: 4px solid var(--theme-accent-primary);
}
.border-left-primary {
    border-left: 4px solid var(--theme-brand-primary);
}
.border-top-dashed {
    border-top: 1px dashed var(--theme-border-medium);
}

/* --- Dark Theme Overrides --- */
body.dark-theme .border-gray-200 {
    border-color: var(--pr-color-dark-border);
}
body.dark-theme .border-top-gray {
    border-top-color: var(--pr-color-dark-border);
}
body.dark-theme .border-bottom-gray {
    border-bottom-color: var(--pr-color-dark-border);
}
body.dark-theme .border-dashed-gray {
    border-color: var(--pr-color-dark-border);
}

/* --- Radius --- */
.rounded-8 {
    border-radius: var(--pr-radius-sm);
}
.rounded-12 {
    border-radius: var(--pr-radius-md);
}
.rounded-16 {
    border-radius: var(--pr-radius-lg);
}
.rounded-20 {
    border-radius: var(--pr-radius-xl);
}
.rounded-lg {
    border-radius: var(--pr-radius-lg);
}
.rounded-md {
    border-radius: var(--pr-radius-md);
}
.rounded-sm {
    border-radius: var(--pr-radius-sm);
}
.rounded-xl {
    border-radius: var(--pr-radius-xl);
}
.rounded-2xl {
    border-radius: var(--pr-radius-2xl);
}
.rounded-3xl {
    border-radius: var(--pr-radius-3xl);
}
.rounded-full {
    border-radius: var(--pr-radius-full);
}

/* ============================================================
   8.9. SIZING
   ============================================================ */

.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}
.max-w-100 {
    max-width: 100%;
}
.max-w-600 {
    max-width: 600px;
}
.max-w-800 {
    max-width: 800px;
}
.max-w-900 {
    max-width: 900px;
}
.max-w-200 {
    max-width: 200px;
}
.min-w-180 {
    min-width: 180px;
}
.h-auto {
    height: auto;
}

/* Width */
.w-full {
    width: 100%;
}
.w-1\/2 {
    width: 50%;
}
.w-1\/3 {
    width: 33.333333%;
}
.w-2\/3 {
    width: 66.666667%;
}
.w-1\/4 {
    width: 25%;
}
.w-3\/4 {
    width: 75%;
}
.w-auto {
    width: auto;
}
.w-screen {
    width: 100vw;
}
.w-min {
    width: min-content;
}
.w-max {
    width: max-content;
}
.w-fit {
    width: fit-content;
}

/* Height */
.h-full {
    height: 100%;
}
.h-auto {
    height: auto;
}
.h-screen {
    height: 100vh;
}
.h-min {
    height: min-content;
}
.h-max {
    height: max-content;
}
.h-fit {
    height: fit-content;
}

/* Min/Max */
.min-w-0 {
    min-width: 0;
}
.min-w-full {
    min-width: 100%;
}
.max-w-none {
    max-width: none;
}
.max-w-full {
    max-width: 100%;
}
.max-w-screen {
    max-width: 100vw;
}

.min-h-0 {
    min-height: 0;
}
.min-h-full {
    min-height: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.max-h-full {
    max-height: 100%;
}
.max-h-screen {
    max-height: 100vh;
}
/* ============================================================
   8.10. CURSOR & LIST
   ============================================================ */

.cursor-pointer {
    cursor: pointer;
}
.list-none {
    list-style: none;
    padding: 0;
}
.list-disc {
    list-style: disc;
    padding-left: var(--pr-space-xl);
}

/* ============================================================
   8.11. MISC
   ============================================================ */

.resize-vertical {
    resize: vertical;
}
.word-break {
    word-break: break-word;
}
.overflow-wrap {
    overflow-wrap: break-word;
}
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* ============================================================
   8.12. TRANSITIONS & EFFECTS
   ============================================================ */

.transition-fast {
    transition: all var(--pr-duration-fast) var(--pr-ease-out-cubic);
}
.transition-base {
    transition: all var(--pr-duration-base) var(--pr-ease-out-expo);
}
.transition-slow {
    transition: all var(--pr-duration-slow) var(--pr-ease-out-expo);
}

.shadow-md {
    box-shadow: var(--theme-shadow-md);
}
.shadow-sm {
    box-shadow: var(--theme-shadow-sm);
}
.shadow-lg {
    box-shadow: var(--theme-shadow-lg);
}
.shadow-xl {
    box-shadow: var(--theme-shadow-xl);
}

/* Blur эффекты */
.blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.blur-xl {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ============================================================
   8.13. POSITIONING
   ============================================================ */

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.fixed {
    position: fixed;
}
.sticky {
    position: sticky;
}
.static {
    position: static;
}

/* --- Top / Bottom / Left / Right --- */
.top-0 {
    top: 0;
}
.bottom-0 {
    bottom: 0;
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}

.inset-0 {
    inset: 0;
}

/* --- Z-Index --- */
.z-negative {
    z-index: var(--pr-z-negative);
}
.z-elevate {
    z-index: var(--pr-z-elevate);
}
.z-dropdown {
    z-index: var(--pr-z-dropdown);
}
.z-sticky {
    z-index: var(--pr-z-sticky);
}
.z-modal {
    z-index: var(--pr-z-modal);
}
.z-toast {
    z-index: var(--pr-z-toast);
}
.z-tooltip {
    z-index: var(--pr-z-tooltip);
}

/* ============================================================
   8.14. OVERFLOW
   ============================================================ */

.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.overflow-scroll {
    overflow: scroll;
}
.overflow-visible {
    overflow: visible;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-auto {
    overflow-y: auto;
}

/* ============================================================
   8.15. ANCHOR OFFSET - ТЕХНИЧЕСКИЙ ЯКОРЬ
   ============================================================ */

.anchor-offset {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* ============================================================
   8.16. UNDERLINE-GRADIENT - ЭФФЕКТ ПОДЧЁРКИВАНИЯ
   ============================================================ */

.underline-gradient {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

.underline-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--theme-border-medium);
    border-radius: var(--theme-radius-xs);
    opacity: 0.2;
    transition: opacity var(--pr-duration-fast) var(--pr-ease-out-cubic);
}

.underline-gradient::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--theme-brand-primary) 20%,
        var(--pr-color-mint) 50%,
        var(--theme-brand-primary-hover) 80%,
        transparent 100%
    );
    border-radius: var(--theme-radius-xs);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
}

.underline-gradient:hover::before {
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--theme-brand-primary) 0%,
        var(--pr-color-mint) 50%,
        var(--theme-brand-primary-hover) 100%
    );
    box-shadow: 0 0 20px rgba(61, 156, 140, 0.25);
}

.underline-gradient:hover::after {
    opacity: 0.4;
}

.underline-gradient:hover {
    text-shadow: 0 0 40px rgba(61, 156, 140, 0.2);
}

body.dark-theme .underline-gradient::after {
    background: var(--pr-color-dark-border);
}

body.dark-theme .underline-gradient:hover::before {
    box-shadow: 0 0 30px rgba(61, 156, 140, 0.3);
}

/* ============================================================
   8.17. CONTAINER QUERY ADAPTATIONS
   ============================================================ */

@container container (max-width: 767px) {
    .fs-0-8,
    .fs-0-85,
    .fs-0-9,
    .fs-0-95 {
        font-size: 0.75rem;
    }

    .fs-1-1,
    .fs-1-2 {
        font-size: 1rem;
    }

    .text-xs {
        font-size: var(--pr-font-size-2xs);
    }
    .text-sm {
        font-size: var(--pr-font-size-xs);
    }
    .text-md {
        font-size: var(--pr-font-size-sm);
    }
    .text-lg {
        font-size: var(--pr-font-size-md);
    }
    .text-xl {
        font-size: var(--pr-font-size-lg);
    }

    .px-24 {
        padding-left: var(--pr-space-md);
        padding-right: var(--pr-space-md);
    }
    .py-40 {
        padding-top: var(--pr-space-xl);
        padding-bottom: var(--pr-space-xl);
    }
    .py-60 {
        padding-top: var(--pr-space-2xl);
        padding-bottom: var(--pr-space-2xl);
    }
    .mt-48 {
        margin-top: var(--pr-space-2xl);
    }
    .mt-60 {
        margin-top: var(--pr-space-3xl);
    }
    .mb-48 {
        margin-bottom: var(--pr-space-2xl);
    }
}

@container container (max-width: 479px) {
    .px-24 {
        padding-left: var(--pr-space-sm);
        padding-right: var(--pr-space-sm);
    }
    .px-20 {
        padding-left: var(--pr-space-xs);
        padding-right: var(--pr-space-xs);
    }
    .py-40 {
        padding-top: var(--pr-space-lg);
        padding-bottom: var(--pr-space-lg);
    }
    .py-60 {
        padding-top: var(--pr-space-xl);
        padding-bottom: var(--pr-space-xl);
    }
    .mt-40 {
        margin-top: var(--pr-space-xl);
    }
    .mt-48 {
        margin-top: var(--pr-space-xl);
    }
    .mb-40 {
        margin-bottom: var(--pr-space-xl);
    }
    .mb-48 {
        margin-bottom: var(--pr-space-xl);
    }
    .gap-16 {
        gap: var(--pr-space-sm);
    }
    .gap-20 {
        gap: var(--pr-space-sm);
    }
    .gap-24 {
        gap: var(--pr-space-md);
    }
}

@container container (max-width: 359px) {
    .px-20 {
        padding-left: var(--pr-space-2xs);
        padding-right: var(--pr-space-2xs);
    }
    .px-16 {
        padding-left: var(--pr-space-2xs);
        padding-right: var(--pr-space-2xs);
    }
    .py-40 {
        padding-top: var(--pr-space-md);
        padding-bottom: var(--pr-space-md);
    }
    .py-60 {
        padding-top: var(--pr-space-lg);
        padding-bottom: var(--pr-space-lg);
    }
}

/* ============================================================
   8.18. MEDIA QUERY ADAPTATIONS (глобальные утилиты)
   ============================================================ */

@media (max-width: 767px) {
    .text-left-mobile {
        text-align: left;
    }
    .text-center-mobile {
        text-align: center;
    }
    .text-right-mobile {
        text-align: right;
    }
    .flex-column-mobile {
        flex-direction: column;
    }
    .flex-wrap-mobile {
        flex-wrap: wrap;
    }
    .w-100-mobile {
        width: 100%;
    }
    .gap-8-mobile {
        gap: var(--pr-space-sm);
    }
    .gap-12-mobile {
        gap: var(--pr-space-md);
    }
}

@media (max-width: 479px) {
    .text-left-small {
        text-align: left;
    }
    .text-center-small {
        text-align: center;
    }
    .text-right-small {
        text-align: right;
    }
    .flex-column-small {
        flex-direction: column;
    }
    .w-100-small {
        width: 100%;
    }
    .gap-4-small {
        gap: var(--pr-space-2xs);
    }
}

/* ============================================================
   U - УТИЛИТЫ ДЛЯ СЛУЖЕБНЫХ СТРАНИЦ
   ============================================================ */

/* ─── Отступы для контента ─── */
.u-mt-0 {
    margin-top: 0;
}
.u-mt-1 {
    margin-top: var(--pr-space-sm);
}
.u-mt-2 {
    margin-top: var(--pr-space-md);
}
.u-mt-3 {
    margin-top: var(--pr-space-lg);
}
.u-mt-4 {
    margin-top: var(--pr-space-xl);
}
.u-mt-5 {
    margin-top: var(--pr-space-2xl);
}

.u-mb-0 {
    margin-bottom: 0;
}
.u-mb-1 {
    margin-bottom: var(--pr-space-sm);
}
.u-mb-2 {
    margin-bottom: var(--pr-space-md);
}
.u-mb-3 {
    margin-bottom: var(--pr-space-lg);
}
.u-mb-4 {
    margin-bottom: var(--pr-space-xl);
}
.u-mb-5 {
    margin-bottom: var(--pr-space-2xl);
}

.u-my-1 {
    margin-top: var(--pr-space-sm);
    margin-bottom: var(--pr-space-sm);
}
.u-my-2 {
    margin-top: var(--pr-space-md);
    margin-bottom: var(--pr-space-md);
}
.u-my-3 {
    margin-top: var(--pr-space-lg);
    margin-bottom: var(--pr-space-lg);
}
.u-my-4 {
    margin-top: var(--pr-space-xl);
    margin-bottom: var(--pr-space-xl);
}

/* ─── Паддинги для контента ─── */
.u-pt-1 {
    padding-top: var(--pr-space-sm);
}
.u-pt-2 {
    padding-top: var(--pr-space-md);
}
.u-pt-3 {
    padding-top: var(--pr-space-lg);
}
.u-pt-4 {
    padding-top: var(--pr-space-xl);
}

.u-pb-1 {
    padding-bottom: var(--pr-space-sm);
}
.u-pb-2 {
    padding-bottom: var(--pr-space-md);
}
.u-pb-3 {
    padding-bottom: var(--pr-space-lg);
}
.u-pb-4 {
    padding-bottom: var(--pr-space-xl);
}

.u-py-1 {
    padding-top: var(--pr-space-sm);
    padding-bottom: var(--pr-space-sm);
}
.u-py-2 {
    padding-top: var(--pr-space-md);
    padding-bottom: var(--pr-space-md);
}
.u-py-3 {
    padding-top: var(--pr-space-lg);
    padding-bottom: var(--pr-space-lg);
}
.u-py-4 {
    padding-top: var(--pr-space-xl);
    padding-bottom: var(--pr-space-xl);
}

/* ─── Размеры текста ─── */
.u-text-sm {
    font-size: var(--pr-font-size-sm);
}
.u-text-md {
    font-size: var(--pr-font-size-md);
}
.u-text-lg {
    font-size: var(--pr-font-size-lg);
}
.u-text-xl {
    font-size: var(--pr-font-size-xl);
}
.u-text-2xl {
    font-size: var(--pr-font-size-2xl);
}

/* ─── Цвета ─── */
.u-text-primary {
    color: var(--theme-brand-primary);
}
.u-text-secondary {
    color: var(--theme-text-secondary);
}
.u-text-tertiary {
    color: var(--theme-text-tertiary);
}

/* ─── Выравнивание ─── */
.u-text-center {
    text-align: center;
}
.u-text-left {
    text-align: left;
}
.u-text-right {
    text-align: right;
}

/* ─── Отображение ─── */
.u-flex {
    display: flex;
}
.u-grid {
    display: grid;
}
.u-block {
    display: block;
}
.u-hidden {
    display: none;
}

/* ─── Flex-утилиты ─── */
.u-flex-center {
    align-items: center;
    justify-content: center;
}
.u-flex-start {
    align-items: flex-start;
    justify-content: flex-start;
}
.u-flex-between {
    align-items: center;
    justify-content: space-between;
}
.u-flex-column {
    flex-direction: column;
}
.u-flex-row {
    flex-direction: row;
}
.u-flex-wrap {
    flex-wrap: wrap;
}
.u-flex-1 {
    flex: 1;
}
.u-gap-1 {
    gap: var(--pr-space-sm);
}
.u-gap-2 {
    gap: var(--pr-space-md);
}
.u-gap-3 {
    gap: var(--pr-space-lg);
}

/* ─── Радиусы ─── */
.u-rounded-sm {
    border-radius: var(--theme-radius-sm);
}
.u-rounded-md {
    border-radius: var(--theme-radius-md);
}
.u-rounded-lg {
    border-radius: var(--theme-radius-lg);
}
.u-rounded-full {
    border-radius: var(--theme-radius-full);
}

/* ─── Тени ─── */
.u-shadow-sm {
    box-shadow: var(--theme-shadow-sm);
}
.u-shadow-md {
    box-shadow: var(--theme-shadow-md);
}
.u-shadow-lg {
    box-shadow: var(--theme-shadow-lg);
}

/* ─── Ширина ─── */
.u-w-100 {
    width: 100%;
}
.u-max-w-100 {
    max-width: 100%;
}
.u-max-w-200 {
    max-width: 200px;
}
.u-h-auto {
    height: auto;
}

/* ─── Цвет фона ─── */
.u-bg-primary-alpha-5 {
    background: var(--theme-brand-primary-alpha-5);
}
.u-bg-primary-alpha-10 {
    background: var(--theme-brand-primary-alpha-10);
}
.u-bg-surface {
    background: var(--theme-bg-surface);
}
.u-bg-transparent {
    background: transparent;
}

/* ─── Остальное ─── */
.u-relative {
    position: relative;
}
.u-absolute {
    position: absolute;
}
.u-overflow-hidden {
    overflow: hidden;
}
.u-overflow-auto {
    overflow: auto;
}
.u-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}