@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/Auth.razor.rz.scp.css */
@media (max-width: 640px) {
    .span[b-gwmxl50nat] {
        display: block; /* Для лучшего позиционирования текста */
        font-size: 10px; /* Уменьшаем текст */
        margin-top: 10px; /* Отступ для разделения контента */
    }
}
/* /Components/Layout/CultureSelector.razor.rz.scp.css */
/* Контейнер переключателя */
.language-selector[b-vl3so8hxpi] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

    /* Ховер-эффект для всего блока */
    .language-selector:hover[b-vl3so8hxpi] {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
    }

/* Иконка глобуса */
.culture-icon[b-vl3so8hxpi] {
    font-size: 1.25rem;
    color: #64748b;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.language-selector:hover .culture-icon[b-vl3so8hxpi] {
    color: #3b82f6; /* Иконка мягко синеет при наведении */
}

/* Обертка для текста и селекта */
.select-wrapper[b-vl3so8hxpi] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Маленький аккуратный лейбл сверху */
.lang-label[b-vl3so8hxpi] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 1px;
    font-weight: 700;
    user-select: none;
}

/* Сам селект */
.form-select-modern[b-vl3so8hxpi] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: transparent;
    padding: 0 24px 0 0;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    /* Красивая кастомная стрелочка через SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}

    /* Убираем синее выделение в Firefox */
    .form-select-modern:-moz-focusring[b-vl3so8hxpi] {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }

    .form-select-modern:focus[b-vl3so8hxpi] {
        color: #0f172a;
    }
/* /Components/Layout/Login.razor.rz.scp.css */
/* Контейнер модалки */
.modal-login-modern[b-osrx0twwpq] {
    max-width: 450px !important;
}

.modal-content.shadow-premium[b-osrx0twwpq] {
    background: #ffffff;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Иконка в заголовке */
.login-icon-box[b-osrx0twwpq] {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto;
}

/* Современные инпуты */
.modern-input[b-osrx0twwpq] {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    background-color: #f8fafc !important;
    transition: all 0.2s ease !important;
}

    .modern-input:focus[b-osrx0twwpq] {
        background-color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    }

/* Кнопка глаза в инпуте */
.btn-outline-input[b-osrx0twwpq] {
    border: 1.5px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    border-radius: 0 12px 12px 0 !important;
    color: #64748b !important;
}

/* Разделитель */
.divider[b-osrx0twwpq] {
    text-align: center;
    position: relative;
    z-index: 1;
}

    .divider[b-osrx0twwpq]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #e2e8f0;
        z-index: -1;
    }

    .divider span[b-osrx0twwpq] {
        background: #fff;
        padding: 0 15px;
        color: #94a3b8;
        font-size: 0.85rem;
    }

/* Анимация появления */
.fade-in[b-osrx0twwpq] {
    animation: fadeIn-b-osrx0twwpq 0.4s ease-out;
}

@keyframes fadeIn-b-osrx0twwpq {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* Иконка глаза для пароля */
.password-visibility[b-osrx0twwpq] {
    position: absolute;
    right: 15px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

    .password-visibility:hover[b-osrx0twwpq] {
        color: #5e38a3;
    }

/* Кнопка входа */
.btn-login[b-osrx0twwpq] {
    background: linear-gradient(135deg, #61c142 0%, #579a35 100%);
    border: none !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    font-size: 1.1rem !important;
}

    .btn-login:hover[b-osrx0twwpq] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(111, 66, 193, 0.4);
    }

/* Анимация ошибки */
.alert-warning[b-osrx0twwpq] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 10px;
    font-size: 0.85rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   ������������ ����� �������� � ������� ������ (.page, .top-row, #blazor-error-ui)
   ========================================================================== */

.page[b-2kf5dbfddy] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

main[b-2kf5dbfddy] {
    flex: 1;
    min-width: 0;
}

.top-row[b-2kf5dbfddy] {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 1.5rem;
}

    .top-row[b-2kf5dbfddy]  a,
    .top-row[b-2kf5dbfddy]  .btn-link {
        white-space: nowrap;
        margin-left: 1rem;
        text-decoration: none !important;
        color: #e2e8f0 !important;
        font-weight: 600;
        font-size: 0.88rem;
        background: linear-gradient(180deg, #475569 0%, #334155 100%);
        border: 1px solid #1e293b;
        border-top-color: #64748b;
        border-bottom-color: #0f172a;
        padding: 6px 14px;
        border-radius: 8px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
    }

        .top-row[b-2kf5dbfddy]  a:hover,
        .top-row[b-2kf5dbfddy]  .btn-link:hover {
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
            color: #ffffff !important;
            border-color: #1e3a8a !important;
            border-top-color: #93c5fd !important;
            border-bottom-color: #1e40af !important;
            transform: translateY(-1px) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4) !important;
        }

        .top-row[b-2kf5dbfddy]  a:active,
        .top-row[b-2kf5dbfddy]  .btn-link:active {
            transform: translateY(1px) !important;
            background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%) !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
        }

        .top-row[b-2kf5dbfddy]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640px) {
    .top-row[b-2kf5dbfddy] {
        justify-content: space-between;
        padding: 0 1rem;
    }

        .top-row[b-2kf5dbfddy]  a,
        .top-row[b-2kf5dbfddy]  .btn-link {
            margin-left: 0;
            white-space: pre-line;
            padding: 4px 10px;
            font-size: 0.8rem;
        }
}

@media (min-width: 641px) {
    .page[b-2kf5dbfddy] {
        flex-direction: row;
    }

    .top-row[b-2kf5dbfddy] {
        position: sticky;
        top: 0;
    }

        .top-row.auth[b-2kf5dbfddy]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: #94a3b8 !important;
        }

    .top-row[b-2kf5dbfddy], article[b-2kf5dbfddy] {
        padding-left: 0.5rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-2kf5dbfddy] {
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%) !important;
    color: #fef2f2 !important;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9999999;
    display: none;
    padding: 0.8rem 1.5rem;
    border-top: 1px solid #f87171 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 -6px 20px rgba(153, 27, 27, 0.6) !important;
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9);
}

    #blazor-error-ui .dismiss[b-2kf5dbfddy] {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
        border: 1px solid #fca5a5;
        border-top-color: #ffffff;
        border-bottom-color: #7f1d1d;
        border-radius: 6px;
        padding: 2px 10px;
        color: #ffffff;
        font-weight: bold;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4);
        transition: all 0.1s ease;
    }

        #blazor-error-ui .dismiss:hover[b-2kf5dbfddy] {
            background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 255, 255, 0.5);
        }

        #blazor-error-ui .dismiss:active[b-2kf5dbfddy] {
            transform: translateY(-50%) scale(0.95);
            background: linear-gradient(180deg, #7f1d1d 0%, #991b1b 100%);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
        }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   ����������� ������� ������ � ��������� (.sidebar)
   ========================================================================== */

.sidebar[b-ereq1nvqjv] {
    width: 230px;
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #1e293b !important;
    border-right: 1px solid #334155 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-item[b-ereq1nvqjv] {
    font-size: 0.925rem;
    padding: 0.2rem 0.75rem;
}

    .nav-item:first-of-type[b-ereq1nvqjv] {
        padding-top: 1.25rem;
    }

    .nav-item:last-of-type[b-ereq1nvqjv] {
        padding-bottom: 1.25rem;
    }

    .nav-item[b-ereq1nvqjv]  .nav-link {
        color: #94a3b8 !important;
        background: transparent !important;
        border: 1px solid transparent;
        border-radius: 8px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 12px;
        font-weight: 500;
        transition: all 0.15s ease-in-out !important;
    }

        .nav-item[b-ereq1nvqjv]  .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.06) !important;
            color: #f8fafc !important;
            transform: translateX(3px) !important;
        }

    .nav-item[b-ereq1nvqjv]  a.active {
        background-color: rgba(249, 115, 22, 0.12) !important;
        color: #fb923c !important;
        border: 1px solid rgba(249, 115, 22, 0.25) !important;
        border-left: 3px solid #f97316 !important;
        font-weight: 600;
        transform: translateX(0) !important;
        padding-left: 11px !important;
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15) !important;
    }

@media (max-width: 640px) {
    .sidebar[b-ereq1nvqjv] {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: 260px;
        box-shadow: none !important;
    }

        .sidebar.expanded[b-ereq1nvqjv] {
            transform: translateX(0);
            box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35) !important;
        }

    .navbar-toggler[b-ereq1nvqjv] {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 4;
        background-color: #334155 !important;
        color: #f8fafc !important;
        border: 1px solid #475569 !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        cursor: pointer;
        transition: background-color 0.15s ease, transform 0.1s ease !important;
    }

        .navbar-toggler:active[b-ereq1nvqjv] {
            transform: scale(0.96) !important;
            background-color: #1e293b !important;
        }

    .sidebar-overlay[b-ereq1nvqjv] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(4px);
        z-index: 2;
    }
}

@media (min-width: 641px) and (max-width: 1366px) {
    .sidebar[b-ereq1nvqjv] {
        width: 200px;
    }

    .nav-item[b-ereq1nvqjv] {
        font-size: 0.85rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* --- 1. Управление видимостью элементов состояния (Логика Blazor) --- */
.components-reconnect-first-attempt-visible[b-46vu63ki0x],
.components-reconnect-repeated-attempt-visible[b-46vu63ki0x],
.components-reconnect-failed-visible[b-46vu63ki0x],
.components-pause-visible[b-46vu63ki0x],
.components-resume-failed-visible[b-46vu63ki0x],
.components-rejoining-animation[b-46vu63ki0x] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-retrying[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-failed[b-46vu63ki0x],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-46vu63ki0x] {
    display: block;
}

/* --- 2. Внешний вид диалогового окна --- */
#components-reconnect-modal[b-46vu63ki0x] {
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    width: 22rem;
    max-width: 90vw;
    margin: 20vh auto;
    padding: 2rem 1.75rem;
    border: 0;
    border-top: 4px solid #da532c; /* Фирменный красный акцент CCS */
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(11, 37, 68, 0.25);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-46vu63ki0x 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-46vu63ki0x 1.2s cubic-bezier(.05, .89, .25, 1.02) 0.2s, components-reconnect-modal-fadeInOpacity-b-46vu63ki0x 0.4s ease-in-out 0.2s;
        animation-fill-mode: both;
    }
}

    /* Затемнение и размытие фона */
    #components-reconnect-modal[b-46vu63ki0x]::backdrop {
        background-color: rgba(11, 25, 44, 0.75); /* Темно-синий фирменный тон */
        backdrop-filter: blur(6px);
        animation: components-reconnect-modal-fadeInOpacity-b-46vu63ki0x 0.4s ease-in-out;
        opacity: 1;
    }

/* --- 3. Контейнер, типографика и кнопки --- */
.components-reconnect-container[b-46vu63ki0x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

#components-reconnect-modal p[b-46vu63ki0x] {
    margin: 0;
    text-align: center;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

#components-reconnect-modal span#components-seconds-to-next-attempt[b-46vu63ki0x] {
    color: #da532c;
    font-weight: 700;
}

#components-reconnect-modal button[b-46vu63ki0x] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border: 0;
    background-color: #0b2544; /* Фирменный тёмно-синий CCS */
    color: #ffffff;
    padding: 0.6rem 1.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    #components-reconnect-modal button:hover[b-46vu63ki0x] {
        background-color: #1e3a8a;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(11, 37, 68, 0.3);
    }

    #components-reconnect-modal button:active[b-46vu63ki0x] {
        background-color: #0b2544;
        transform: translateY(0);
    }

/* --- 4. Анимация пульсации (Спиннер) --- */
.components-rejoining-animation[b-46vu63ki0x] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-46vu63ki0x] {
        position: absolute;
        border: 3px solid #da532c; /* Акцентный красный цвет анимации */
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-46vu63ki0x 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-46vu63ki0x] {
            animation-delay: -0.5s;
            border-color: #0b2544; /* Синий цвет для второго кольца */
        }

/* --- 5. Keyframes --- */
@keyframes components-reconnect-modal-slideUp-b-46vu63ki0x {
    0% {
        transform: translateY(30px) scale(0.96);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-46vu63ki0x {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-46vu63ki0x {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes components-rejoining-animation-b-46vu63ki0x {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Modals/FooterModal.razor.rz.scp.css */



@media (max-width: 640px) {
    .modal-footer[b-f8pip9mcj9] {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }
}
/* /Components/Modals/ModalMessageClient.razor.rz.scp.css */
/* Общий вид модалки */
.custom-modal[b-7y5g33x397] {
    transition: all 0.3s ease-out;
}

.modern-shadow[b-7y5g33x397] {
    border: none;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background: #ffffff;
}

/* Эффект размытия заднего плана */
.blur-backdrop[b-7y5g33x397] {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Шапка и иконка */
.header-icon-wrapper[b-7y5g33x397] {
    background: #f0f2f5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-right: 15px;
    color: #5d5fef; /* Приятный акцентный цвет */
}

.modal-title[b-7y5g33x397] {
    font-weight: 600;
    color: #2d3436;
    letter-spacing: -0.5px;
}

/* Контейнер сообщения */
.message-container[b-7y5g33x397] {
    font-size: 1.05rem;
    color: #636e72;
    line-height: 1.6;
    text-align: center;
}

/* Кнопки */
.btn-modern[b-7y5g33x397] {
    border-radius: 12px;
    padding: 10px 25px;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 110px;
    border: none;
}

    .btn-modern:hover[b-7y5g33x397] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .btn-modern:active[b-7y5g33x397] {
        transform: translateY(0);
    }

.btn-primary-gradient[b-7y5g33x397] {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
}

.btn-secondary[b-7y5g33x397] {
    background-color: #f1f2f6;
    color: #2f3542;
}

    .btn-secondary:hover[b-7y5g33x397] {
        background-color: #dfe4ea;
        color: #2f3542;
    }
/* /Components/Modals/ModalOrder.razor.rz.scp.css */
/* =========================================
   1. ОБЩИЙ КОНТЕЙНЕР: Физическая панель (Apple Glass/Metal Card)
   ========================================= */
.logic-card[b-rewhtvyfu0] {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-top-color: rgba(255, 255, 255, 1) !important;
    border-bottom-color: rgba(148, 163, 184, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   2. РАДИО-ПЛАШКИ: Выпуклые физические плитки
   ========================================= */
.custom-radio[b-rewhtvyfu0] {
    position: relative;
    padding: 16px 20px 16px 50px !important;
    margin: 0;
    cursor: pointer;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.6) !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #cbd5e1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

    .custom-radio:hover[b-rewhtvyfu0] {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%) !important;
        border-color: #94a3b8 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 5px 12px rgba(15, 23, 42, 0.09), 0 2px 4px rgba(15, 23, 42, 0.05) !important;
    }

    .custom-radio:has(input:checked)[b-rewhtvyfu0] {
        background: linear-gradient(180deg, #e0e7ff 0%, #ede9fe 50%, #f3e8ff 100%) !important;
        border: 1px solid #6366f1 !important;
        border-top-color: #4f46e5 !important;
        border-bottom-color: #818cf8 !important;
        box-shadow: inset 0 3px 6px rgba(79, 70, 229, 0.2), inset 0 1px 3px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(255, 255, 255, 0.8) !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    /* =========================================
       3. САМО ПОЛЕ ВВОДА (Кружок радиокнопки)
       ========================================= */
    .custom-radio .form-check-input[b-rewhtvyfu0] {
        width: 22px;
        height: 22px;
        margin-top: 0;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border-radius: 50% !important;
        background: linear-gradient(180deg, #cbd5e1 0%, #f1f5f9 100%) !important;
        border: 1px solid #94a3b8 !important;
        border-top-color: #64748b !important;
        border-bottom-color: #cbd5e1 !important;
        box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.25), 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .custom-radio .form-check-input:checked[b-rewhtvyfu0] {
            background: radial-gradient(circle at 35% 35%, #a5b4fc 0%, #6366f1 50%, #4338ca 100%) !important;
            border-color: #312e81 !important;
            border-top-color: #1e1b4b !important;
            border-bottom-color: #4f46e5 !important;
            box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.45), 0 0 10px rgba(99, 102, 241, 0.5) !important;
        }

    .custom-radio .form-check-label[b-rewhtvyfu0] {
        cursor: pointer;
        user-select: none;
        line-height: 1.3;
        font-weight: 600;
        color: #0f172a !important;
    }

    .custom-radio small[b-rewhtvyfu0] {
        display: block;
        margin-top: 3px;
        font-size: 0.75rem;
        color: #475569 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

/* ==========================================================================
   КОМПАКТНАЯ АППАРАТНАЯ ПАНЕЛЬ РАСЧЕТА (Apple Studio Hardware / OLED Strip)
   ========================================================================== */

.hw-calc-strip[b-rewhtvyfu0] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    margin-top: 6px;
    background: linear-gradient(180deg, #1e2530 0%, #11151c 100%) !important;
    border: 1px solid #090b0e !important;
    border-radius: 9px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.hw-calc-main[b-rewhtvyfu0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    white-space: nowrap;
}

.hw-label[b-rewhtvyfu0] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.6px;
    line-height: 1;
    margin-bottom: 3px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hw-value-total[b-rewhtvyfu0] {
    font-family: 'SF Mono', 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ff453a;
    line-height: 1;
    text-shadow: 0 0 2px rgba(255, 69, 58, 0.9), 0 0 10px rgba(255, 69, 58, 0.45) !important;
    letter-spacing: 0.5px;
}

    .hw-value-total small[b-rewhtvyfu0] {
        font-size: 0.65rem;
        color: #475569;
        font-weight: 700;
        text-shadow: none !important;
        margin-left: 2px;
    }

/* =========================================
   4. АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ========================================= */
@media (max-width: 768px) {
    .logic-card .d-flex[b-rewhtvyfu0] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .logic-card[b-rewhtvyfu0] {
        padding: 1rem;
    }

    .custom-radio[b-rewhtvyfu0] {
        width: 100%;
    }
}
/* /Components/Modals/ModalRegistrationSuccess.razor.rz.scp.css */
/* Стили для карточек шагов */
.steps-container[b-cpeh9ij9mo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-item[b-cpeh9ij9mo] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .step-item:hover[b-cpeh9ij9mo] {
        border-color: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.05);
    }

/* Круглые цифры */
.step-number[b-cpeh9ij9mo] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: #6366f1;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
}

/* Тэги документов */
.badge-doc[b-cpeh9ij9mo] {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-right: 5px;
    font-weight: 600;
}

/* Важное примечание */
.important-note[b-cpeh9ij9mo] {
    background: #fff1f2;
    color: #e11d48;
    padding: 12px 15px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
}

/* Кнопка */
.btn-primary-modern[b-cpeh9ij9mo] {
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

    .btn-primary-modern:hover[b-cpeh9ij9mo] {
        background: #4f46e5;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
    }

/* Ссылка WhatsApp */
.whatsapp-link[b-cpeh9ij9mo] {
    color: #25d366;
    text-decoration: none;
    font-weight: 700;
}

    .whatsapp-link:hover[b-cpeh9ij9mo] {
        text-decoration: underline;
    }
/* /Components/Modals/ModalRequestSend.razor.rz.scp.css */
/* /Components/Modals/ModalUser.razor.rz.scp.css */
/* =========================================
    СКЕВОМОРФНЫЙ ПОДВАЛ ФОРМЫ (MODAL FOOTER)
   ========================================= */

/* Подложка футера (тяжелая нижняя консоль) */
.modal-footer[b-cby8d0a7od] {
    background: linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%) !important;
    border-top: 1px solid #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 -4px 10px rgba(0, 0, 0, 0.05);
    padding-bottom: 1rem !important;
}

    /* Вдавленная панель согласия (колодец) */
    .modal-footer .col-12.bg-white[b-cby8d0a7od] {
        background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%) !important;
        border-top: 1px solid #cbd5e1 !important;
        border-bottom: 1px solid #ffffff !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12) !important;
        margin-bottom: 1rem;
    }

    /* Физический объемный чекбокс */
    .modal-footer .form-check-input[b-cby8d0a7od] {
        border: 1px solid #94a3b8 !important;
        border-top-color: #64748b !important;
        border-bottom-color: #ffffff !important;
        border-radius: 5px !important;
        box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 #ffffff !important;
        transition: all 0.2s ease;
    }

        /* Включенный чекбокс (зеленый подсвеченный индикатор) */
        .modal-footer .form-check-input:checked[b-cby8d0a7od] {
            border-color: #15803d !important;
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 0 8px rgba(34, 197, 94, 0.5) !important;
        }








/* =========================================
    СКЕВОМОРФИЗМ ДЛЯ КАРТОЧЕК, ИНПУТОВ И ПАНЕЛЕЙ
   ========================================= */

/* 1. Главная карточка (объемная монолитная плитка) */
.card[b-cby8d0a7od] {
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 100%) !important;
    border: 1px solid #adb5bd !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #868e96 !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 20px !important;
    padding: 24px !important;
}

/* 2. Вдавленные инпуты (эффект колодца) */
.modern-input[b-cby8d0a7od] {
    background: linear-gradient(180deg, #e9ecef 0%, #ffffff 100%) !important;
    border: 1px solid #adb5bd !important;
    border-top-color: #868e96 !important; /* Тёмная верхняя грань создает тень */
    border-bottom-color: #ffffff !important; /* Светлый нижний блик */
    border-radius: 8px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #2d3436 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}

    .modern-input:focus[b-cby8d0a7od] {
        background: #ffffff !important;
        border-color: #0d6efd !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(13, 110, 253, 0.2) !important;
    }

/* 3. Боковая акцентная панель (вдавленный модуль или консоль) */
.info-sidebar[b-cby8d0a7od],
.info-sidebar-floating[b-cby8d0a7od] {
    background: linear-gradient(180deg, #edf2ff 0%, #e0e7ff 100%) !important;
    border: 1px solid #c7d2fe !important;
    border-top-color: #a5b4fc !important;
    border-bottom-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 5. Выпуклые иконки/префиксы в инпутах */
.input-group-text[b-cby8d0a7od] {
    background: linear-gradient(180deg, #ffffff 0%, #e9ecef 100%) !important;
    border: 1px solid #adb5bd !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #ced4da !important;
    color: #6c757d !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Физическая плавающая обертка */
.floating-container[b-cby8d0a7od] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
    border-top-color: #ffffff;
    border-bottom-color: #94a3b8;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 #ffffff;
    transition: all 0.2s ease;
}

    .floating-container:focus-within[b-cby8d0a7od] {
        border-color: #0d6efd;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(13, 110, 253, 0.18);
    }

/* Бейдж возраста (подсвеченный цифровой шильдик) */
.age-inside[b-cby8d0a7od] {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    padding: 0 1rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1.1rem;
    border: 1px solid #60a5fa;
    border-top-color: #93c5fd;
    border-bottom-color: #2563eb;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Блок требований к паролю (вдавленный информационный планшет) */
.password-requirements[b-cby8d0a7od] {
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-top-color: #94a3b8;
    border-bottom-color: #ffffff;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 0 #ffffff;
    padding: 12px;
    transition: all 0.25s ease;
}

    /* Эффект всплытия планшета при наведении */
    .password-requirements:hover[b-cby8d0a7od] {
        background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
        box-shadow: inset 0 1px 1px #ffffff, 0 6px 16px rgba(0, 0, 0, 0.12) !important;
        transform: translateY(-2px);
    }

    /* Заголовок блока требований */
    .password-requirements .fw-bold[b-cby8d0a7od] {
        letter-spacing: 0.05rem;
        color: #334155;
        font-size: 0.75rem;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    /* Стилизация пунктов требований */
    .password-requirements .col-6[b-cby8d0a7od] {
        display: flex;
        align-items: center;
        padding: 4px 8px;
        color: #475569;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    /* Иконки с эффектом штампа */
    .password-requirements .bi[b-cby8d0a7od] {
        font-size: 0.85rem;
        margin-right: 8px;
        filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8));
    }

/* Подсвеченный объемный щит безопасности */
.bi-shield-check[b-cby8d0a7od] {
    filter: drop-shadow(0 2px 4px rgba(13, 202, 240, 0.4)) !important;
}

/* Вдавленная разделительная линия */
.password-requirements .d-flex[b-cby8d0a7od] {
    border-bottom: 1px solid #cbd5e1;
    box-shadow: 0 1px 0 #ffffff;
    padding-bottom: 8px;
}
/* /Components/MyComponents/AccessCard.razor.rz.scp.css */
.MyContent[b-4ljekhee7j] {
    background: radial-gradient(circle at top left, #f8f9fa 0%, #e9ecef 100%);
    overflow: hidden;
}

.access-card[b-4ljekhee7j] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    max-width: 550px;
    width: 100%;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .access-card:hover[b-4ljekhee7j] {
        transform: translateY(-5px);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    }

/* Анимированная иконка */
.icon-wrapper[b-4ljekhee7j] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 30%;
    font-size: 3rem;
    color: #dc3545; /* Цвет ошибки/запрета */
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.2);
}

.icon-pulse[b-4ljekhee7j] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30%;
    background: rgba(220, 53, 69, 0.1);
    animation: pulse-ring-b-4ljekhee7j 2s infinite;
}

@keyframes pulse-ring-b-4ljekhee7j {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.divider[b-4ljekhee7j] {
    height: 3px;
    width: 60px;
    background: linear-gradient(90deg, #dc3545, #ffc107);
    border-radius: 2px;
}

.btn-modern[b-4ljekhee7j] {
    background: #212529;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.3s ease;
}

    .btn-modern:hover[b-4ljekhee7j] {
        background: #000;
        color: #fff;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        transform: scale(1.02);
    }

/* Для любителей чистоты и порядка: заголовки */
.display-6[b-4ljekhee7j] {
    letter-spacing: -1px;
}
/* /Components/MyComponents/CheckboxCashondelivery.razor.rz.scp.css */
.CheckboxCashondelivery-container[b-io79d8pboc] {
    padding-left: 5px;
    padding-right: 5px;
}
.CheckboxCashondelivery-container input[type="checkbox"][b-io79d8pboc] {
    display: none;
}

.CheckboxCashondelivery[b-io79d8pboc] {
    width: 18px;
    height: 17px;
    background-color: #FFFFFF;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center; /* Центрирование иконки */
    border: 1px solid #ccc; /* Граница для пустого чекбокса */
}

    .CheckboxCashondelivery i[b-io79d8pboc] {
        position: relative;
        top: -3px;
        font-size: 16px; /* Размер иконки */
        color: #54afdb; /* Цвет иконки */
        opacity: 0;
        transition: opacity 0.3s;
    }

.CheckboxCashondelivery-container input[type="checkbox"]:checked + .CheckboxCashondelivery[b-io79d8pboc] {
    background-color: black;
}

    .CheckboxCashondelivery-container input[type="checkbox"]:checked + .CheckboxCashondelivery i[b-io79d8pboc] {
        opacity: 1; /* Показываем иконку молнии при checked */
    }

.CheckboxCashondelivery:hover[b-io79d8pboc] {
    background-color: #ddd;
}

.CheckboxCashondelivery:active[b-io79d8pboc] {
    background-color: #ccc;
}
/* /Components/MyComponents/CheckboxPayment.razor.rz.scp.css */
.CheckboxPayment-container[b-cqk7fdna16] {
    padding-left: 5px;
    padding-right: 5px;
}
.CheckboxPayment-container input[type="checkbox"][b-cqk7fdna16] {
    display: none;    
}

.CheckboxPayment[b-cqk7fdna16] {
    width: 19px;
    height: 17px;
    background-color: #FFFFFF;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center; /* Центрирование иконки */
    border: 1px solid #ccc; /* Граница для пустого чекбокса */
}

    .CheckboxPayment i[b-cqk7fdna16] {
        position: relative;
        top: -3px;
        font-size: 16px; /* Размер иконки */
        color: #8bc34a; /* Цвет иконки */
        opacity: 0;
        transition: opacity 0.3s;
    }

.CheckboxPayment-container input[type="checkbox"]:checked + .CheckboxPayment[b-cqk7fdna16] {
    background-color: black;
}

    .CheckboxPayment-container input[type="checkbox"]:checked + .CheckboxPayment i[b-cqk7fdna16] {
        opacity: 1; /* Показываем иконку молнии при checked */
    }

.CheckboxPayment:hover[b-cqk7fdna16] {
    background-color: #ddd;
}

.CheckboxPayment:active[b-cqk7fdna16] {
    background-color: #ccc;
}
/* /Components/MyComponents/CheckboxUrgency.razor.rz.scp.css */
.CheckboxUrgency-container[b-ho2h2xmg2o] {
    padding-left: 5px;
    padding-right: 5px;
}
.CheckboxUrgency-container input[type="checkbox"][b-ho2h2xmg2o] {
    display: none;
}

.CheckboxUrgency[b-ho2h2xmg2o] {
    width: 18px;
    height: 17px;
    background-color: #FFFFFF;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center; /* Центрирование иконки */
    border: 1px solid #ccc; /* Граница для пустого чекбокса */
}

    .CheckboxUrgency i[b-ho2h2xmg2o] {
        position: relative;
        top: -3px;
        font-size: 16px; /* Размер иконки */
        color: #ff9800; /* Цвет молнии */
        opacity: 0;
        transition: opacity 0.3s;
    }

.CheckboxUrgency-container input[type="checkbox"]:checked + .CheckboxUrgency[b-ho2h2xmg2o] {
    background-color: black;
}

    .CheckboxUrgency-container input[type="checkbox"]:checked + .CheckboxUrgency i[b-ho2h2xmg2o] {
        opacity: 1; /* Показываем иконку молнии при checked */
    }

.CheckboxUrgency:hover[b-ho2h2xmg2o] {
    background-color: #ddd;
}

.CheckboxUrgency:active[b-ho2h2xmg2o] {
    background-color: #ccc;
}
/* /Components/MyComponents/CrudPage.razor.rz.scp.css */
/* ==========================================================================
   СKEВОМОРФНЫЙ ТУЛБАР УПРАВЛЕНИЯ (Apple Dark Titanium / Slate Console)
   ========================================================================== */

.crud-container[b-nzbz3u6byt] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 15px;
    margin-bottom: 0px;
}

/* Металлическая литая панель управления */
.crud-container-fluid[b-nzbz3u6byt] {
    width: auto;
    margin-left: -3px;
    margin-right: -18px;
    padding: 10px 14px 8px 14px;
    box-sizing: border-box;
    /* Градиент тёмного шлифованного титана с линзовым перегибом */
    background: linear-gradient( 180deg, #334155 0%, #1e293b 48%, #0f172a 50%, #1e293b 100% ) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    /* Металлические грани (Фаска: свет сверху, глубокая тень снизу) */
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid #020617 !important;
    /* Многослойная тень литого блока */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 193, 7, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideDown-b-nzbz3u6byt 0.4s ease-out;
}

@keyframes slideDown-b-nzbz3u6byt {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   APPLE AQUA & ALUMINUM SKEUOMORPHIC SWITCH (FULL POLISH)
   ========================================================================== */

/* 1. Вогнутый металлический желобок (Recessed Aluminum Track) */
.switch-container[b-nzbz3u6byt] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important; /* Увеличен зазор между текстом и шариком */
    padding: 5px 8px 5px 16px !important; /* Увеличены внутренние отступы */
    min-height: 38px !important; /* Высота подогнана под стандарты кнопок */
    margin: 2px !important;
    border-radius: 22px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.95rem !important; /* Увеличен шрифт (было 0.82rem) */
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 35%, #e2e8f0 70%, #f8fafc 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.35) !important;
    border-top-color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.35), inset 0 -1px 2px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

    .switch-container:hover[b-nzbz3u6byt] {
        background: linear-gradient(180deg, #64748b 0%, #94a3b8 35%, #cbd5e1 70%, #f1f5f9 100%) !important;
        color: #0f172a !important;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 2px rgba(255, 255, 255, 1), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    /* 2. Текст с глубоким тиснением */
    .switch-container label[b-nzbz3u6byt],
    .switch-container span[b-nzbz3u6byt] {
        max-width: 140px !important; /* Расширен лимит под крупный текст */
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        color: inherit !important;
        letter-spacing: -0.01em !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        transition: text-shadow 0.2s ease, color 0.2s ease !important;
    }

    .switch-container .form-check[b-nzbz3u6byt] {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 3. Выпуклая кнопка-ползунок (Крупная ручка) */
    .switch-container input[type="checkbox"][b-nzbz3u6byt] {
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative !important;
        width: 26px !important; /* Увеличен размер ручки с 22px до 26px */
        height: 26px !important; /* Увеличен размер ручки с 22px до 26px */
        margin: 0 !important;
        outline: none !important;
        cursor: pointer !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 45%, #cbd5e1 50%, #94a3b8 100%) !important;
        border: 1px solid rgba(0, 0, 0, 0.4) !important;
        border-top-color: rgba(255, 255, 255, 1) !important;
        border-bottom-color: rgba(0, 0, 0, 0.6) !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease !important;
    }

        .switch-container input[type="checkbox"][b-nzbz3u6byt]::after {
            content: "" !important;
            position: absolute !important;
            top: 1px !important;
            left: 2px !important;
            right: 2px !important;
            height: 45% !important;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
            border-radius: 10px 10px 4px 4px !important;
            pointer-events: none !important;
        }

        .switch-container:active input[type="checkbox"][b-nzbz3u6byt],
        .switch-container input[type="checkbox"]:active[b-nzbz3u6byt] {
            transform: scale(0.88) !important;
        }

    /* 4. Включенное состояние */
    .switch-container:has(input:checked)[b-nzbz3u6byt],
    .switch-container.active[b-nzbz3u6byt] {
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 48%, #1e40af 50%, #1d4ed8 100%) !important;
        border-color: #172554 !important;
        border-top-color: rgba(0, 0, 0, 0.6) !important;
        border-bottom-color: rgba(191, 219, 254, 0.9) !important;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.4), 0 0 8px rgba(37, 99, 235, 0.5) !important;
        color: #ffffff !important;
    }

        .switch-container:has(input:checked) label[b-nzbz3u6byt],
        .switch-container:has(input:checked) span[b-nzbz3u6byt],
        .switch-container.active label[b-nzbz3u6byt],
        .switch-container.active span[b-nzbz3u6byt] {
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 0 4px rgba(255, 255, 255, 0.3) !important;
        }

    /* Ход ползунка во включенном состоянии */
    .switch-container input[type="checkbox"]:checked[b-nzbz3u6byt] {
        transform: translateX(10px) !important; /* Ход ручки увеличен до 22px */
        background: linear-gradient(180deg, #ffffff 0%, #eff6ff 45%, #bfdbfe 50%, #60a5fa 100%) !important;
        border-color: #1e40af !important;
        border-top-color: #ffffff !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -1px 2px rgba(30, 64, 175, 0.4), 0 0 6px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    }

        .switch-container:active input[type="checkbox"]:checked[b-nzbz3u6byt],
        .switch-container input[type="checkbox"]:checked:active[b-nzbz3u6byt] {
            transform: translateX(10px) scale(0.88) !important;
        }

    /* 5. Доступность */
    .switch-container input[type="checkbox"]:focus-visible[b-nzbz3u6byt] {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6, 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }



/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
   ========================================= */

@media (max-width: 768px) {
    /* Тактильная компактная кнопка (Keycap) */
    .crud-btn[b-nzbz3u6byt] {
        position: relative !important;
        padding: 8px 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        border-radius: 7px !important;
        border: 1px solid rgba(0, 0, 0, 0.5) !important;
        border-top-color: rgba(255, 255, 255, 0.4) !important;
        border-bottom-color: rgba(0, 0, 0, 0.7) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.1s ease !important;
    }

        .crud-btn:active[b-nzbz3u6byt] {
            transform: translateY(1.5px) scale(0.97) !important;
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7) !important;
        }

        /* Прячем текст на мобильных */
        .crud-btn .btn-text[b-nzbz3u6byt] {
            display: none !important;
        }

    .crud-container .row[b-nzbz3u6byt] {
        justify-content: flex-start;
        gap: 6px !important;
    }



    /* Физическая кнопка «Корзина» (Красный рубиновый тумблер) */
    .trash-btn[b-nzbz3u6byt] {
        width: 44px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px !important;
        border: 1px solid #7f1d1d !important;
        border-top-color: #fca5a5 !important;
        border-bottom-color: #450a0a !important;
        background: linear-gradient( 180deg, #ef4444 0%, #dc2626 48%, #b91c1c 50%, #991b1b 100% ) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3) !important;
        color: #ffffff !important;
    }

        .trash-btn:active[b-nzbz3u6byt] {
            transform: translateY(1.5px) scale(0.96) !important;
            background: linear-gradient(180deg, #7f1d1d 0%, #b91c1c 100%) !important;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important;
        }
}

/* =========================================
   ДЕСКТОП
   ========================================= */
@media (min-width: 769px) {
    .crud-btn[b-nzbz3u6byt] {
        min-width: 160px;
    }
}
/* /Components/MyComponents/DropDownListFilter.razor.rz.scp.css */
/* ==========================================================================
   СКЕВОМОРФНЫЙ ДРОПДАУН И АВТОКОМПЛИТ (Skeuomorphic Dropdown / Autocomplete)
   ========================================================================== */

/* 2. Тактильная кнопка сброса «×» (Micro-Button) */
.position-relative .btn-secondary.position-absolute[b-3ye1ww94n3] {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    line-height: 20px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Выпуклая пластиковая шайба */
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%) !important;
    border: 1px solid #94a3b8 !important;
    color: #475569 !important;
    text-shadow: 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 1px #ffffff, inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.15s ease !important;
}

    .position-relative .btn-secondary.position-absolute:hover[b-3ye1ww94n3] {
        background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
        border-color: #991b1b !important;
        color: #ffffff !important;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(220, 38, 38, 0.3) !important;
    }

    .position-relative .btn-secondary.position-absolute:active[b-3ye1ww94n3] {
        transform: translateY(-50%) scale(0.9) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    }

/* 3. Приподнятая панель выпадающего списка (Pop-out Tray) */
.DropDownULStyle[b-3ye1ww94n3] {
    top: calc(100% + 6px) !important;
    max-height: 280px !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #cbd5e1 !important;
    /* Тень приподнятой панели с белым верховым бликом */
    box-shadow: inset 0 1px 0 #ffffff, 0 12px 28px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

    /* 4. Пункты выпадающего списка */
    .DropDownULStyle li[b-3ye1ww94n3] {
        padding: 10px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 3px !important;
        color: #334155;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all 0.15s ease !important;
    }

        .DropDownULStyle li:last-child[b-3ye1ww94n3] {
            margin-bottom: 0 !important;
        }

        /* Наведение и выделение элемента (Глянцевая плашка) */
        .DropDownULStyle li:hover[b-3ye1ww94n3],
        .DropDownULStyle li.active[b-3ye1ww94n3],
        .DropDownULStyle li.selected[b-3ye1ww94n3] {
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
            color: #ffffff !important;
            border-color: #1e40af !important;
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(29, 78, 216, 0.3) !important;
        }

        /* Стилизация разделителя двух колонок */
        .DropDownULStyle li .border-secondary[b-3ye1ww94n3] {
            border-left-color: rgba(148, 163, 184, 0.4) !important;
            box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8);
        }

        .DropDownULStyle li:hover .border-secondary[b-3ye1ww94n3],
        .DropDownULStyle li.active .border-secondary[b-3ye1ww94n3] {
            border-left-color: rgba(255, 255, 255, 0.3) !important;
            box-shadow: none;
        }

        /* 5. Состояние «Поиск не дал результатов» */
        .DropDownULStyle li[style*="darkred"][b-3ye1ww94n3] {
            background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%) !important;
            border: 1px solid #fca5a5 !important;
            border-radius: 10px !important;
            color: #991b1b !important;
            font-weight: 700 !important;
            text-shadow: 0 1px 0 #ffffff;
            box-shadow: inset 0 1px 2px rgba(185, 28, 28, 0.1) !important;
            padding: 12px !important;
        }

    /* 6. Скевоморфный полосатый скроллбар для списка */
    .DropDownULStyle[b-3ye1ww94n3]::-webkit-scrollbar {
        width: 8px;
    }

    .DropDownULStyle[b-3ye1ww94n3]::-webkit-scrollbar-track {
        background: #e2e8f0;
        border-radius: 10px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        margin: 4px;
    }

    .DropDownULStyle[b-3ye1ww94n3]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
        border-radius: 10px;
        border: 1px solid #475569;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

        .DropDownULStyle[b-3ye1ww94n3]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #64748b 0%, #475569 100%);
        }
/* /Components/MyComponents/EmployeeDetails.razor.rz.scp.css */
/* Основной контейнер-карточка (Выпуклая плашка) */
.employee-card-modern[b-z86a0nu3yq] {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-top: 1px solid #ffffff; /* Верхний блик */
    border-bottom: 1px solid #94a3b8; /* Нижняя граница тени */
    border-radius: 16px;
    padding: 20px;
    position: relative;
    /* Тройная тень для создания мягкого объема над поверхностью */
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
}

/* Аватар с эффектом глубокой фоторамки */
.avatar-container[b-z86a0nu3yq] {
    height: 100%;
    min-height: 140px;
}

.avatar-wrapper[b-z86a0nu3yq] {
    background: linear-gradient(180deg, #e2e8f0 0%, #ffffff 100%);
    padding: 5px;
    border: 1px solid #94a3b8;
    border-radius: 14px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Вдавленное паспарту */
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.15), 0 1px 2px rgba(255, 255, 255, 0.8);
}

    .avatar-wrapper img[b-z86a0nu3yq] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 9px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .avatar-wrapper:hover img[b-z86a0nu3yq] {
        transform: scale(1.04);
        filter: brightness(1.03);
    }

/* Типографика с эффектом тиснения (Debossed Text) */
.info-item label[b-z86a0nu3yq] {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    text-shadow: 0 1px 0 #ffffff; /* Белая подложка создает ощущение вдавленности */
}

.info-value-name[b-z86a0nu3yq] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Роль (Объемный глянцевый бейдж / Plastic Gel Badge) */
.badge-role-modern[b-z86a0nu3yq] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border-top: 1px solid #a5b4fc;
    border-bottom: 1px solid #312e81;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 6px rgba(67, 56, 202, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

    /* Светящийся индикатор-светодиод */
    .badge-role-modern .dot[b-z86a0nu3yq] {
        width: 8px;
        height: 8px;
        background: radial-gradient(circle at 30% 30%, #a5b4fc, #38edf8);
        border-radius: 50%;
        margin-right: 8px;
        box-shadow: 0 0 6px #38edf8, inset 0 -1px 1px rgba(0, 0, 0, 0.5);
    }

/* Телефон и ID */
.info-value-phone[b-z86a0nu3yq] {
    font-size: 1.1rem;
    color: #1e293b;
    text-shadow: 0 1px 0 #ffffff;
}

/* Вдавленный шильдик кода */
.info-value-id code[b-z86a0nu3yq] {
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
    color: #334155;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 0 #ffffff;
}

/* Панель индексов (Утопленный в корпус экран) */
.indices-panel[b-z86a0nu3yq] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08), 0 1px 0 #ffffff;
    overflow: hidden;
}

.indices-header-modern[b-z86a0nu3yq] {
    padding: 10px 15px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #475569;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
    border-bottom: 1px solid #cbd5e1;
    text-shadow: 0 1px 0 #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.indices-scroll-body[b-z86a0nu3yq] {
    padding: 12px;
    font-size: 0.85rem;
    max-height: 130px;
    overflow-y: auto;
    color: #475569;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Объемная круглая кнопка-монетка */
.icon-circle-small[b-z86a0nu3yq] {
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff;
    transition: all 0.15s ease;
}

    .icon-circle-small:hover[b-z86a0nu3yq] {
        background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
    }

    .icon-circle-small:active[b-z86a0nu3yq] {
        background: #e2e8f0;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .employee-card-modern[b-z86a0nu3yq] {
        padding: 15px;
    }

    .border-end-md[b-z86a0nu3yq], .border-end-lg[b-z86a0nu3yq] {
        border: none !important;
    }

    .avatar-container[b-z86a0nu3yq] {
        min-height: 180px;
        margin-bottom: 1rem;
    }
}

/* Тактильный скроллбар с улобком и ползунком */
.custom-scrollbar-thin[b-z86a0nu3yq]::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar-thin[b-z86a0nu3yq]::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.custom-scrollbar-thin[b-z86a0nu3yq]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

    .custom-scrollbar-thin[b-z86a0nu3yq]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    }
/* /Components/MyComponents/LoadingOverlay.razor.rz.scp.css */
/* ==========================================================================
   СKEВОМОРФНЫЙ МОДАЛЬНЫЙ ЛОАДЕР (Apple Aqua / Glassmorphic Loader)
   ========================================================================== */

.modal-overlay[b-oz8tpdgg54] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Выравнивание спиннера и текста по вертикали */
    justify-content: center;
    align-items: center;
    z-index: 99999;
    border-radius: inherit;
    /* Хрустальное стекло Apple с глубокой виньеткой */
    background: radial-gradient( circle at center, rgba(255, 255, 255, 0.7) 0%, rgba(215, 225, 238, 0.8) 100% ) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    /* Внутреннее свечение по периметру оверлея */
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease;
}

/* Хромированное объёмное кольцо-спиннер (Aqua Ring) */
.deluxe-loader[b-oz8tpdgg54] {
    position: relative;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    /* Трёхмерное металлическое основание с акцентной синей дугой */
    border: 5px solid rgba(203, 213, 225, 0.8) !important;
    border-top-color: #007aff !important; /* Классический Apple Aqua Blue */
    border-right-color: #3b82f6 !important;
    border-radius: 50% !important;
    /* Внутренние тени создают эффект «утопленного» металлического желоба */
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.35), inset 0 -1px 2px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 122, 255, 0.35), 0 2px 6px rgba(15, 23, 42, 0.15) !important;
    animation: rotation-b-oz8tpdgg54 0.85s cubic-bezier(0.4, 0.1, 0.3, 0.9) infinite !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

    /* Внутренний стеклянный блик на спиннере */
    .deluxe-loader[b-oz8tpdgg54]::before {
        content: "" !important;
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.6);
        pointer-events: none;
    }

/* Выпуклая стеклянная плашка с тиснённым текстом */
.loader-text[b-oz8tpdgg54] {
    position: relative;
    margin-top: 18px !important;
    padding: 6px 16px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    color: #334155 !important;
    /* Линзовый градиент полированного пластика */
    background: linear-gradient( 180deg, #ffffff 0%, #f1f5f9 48%, #e2e8f0 50%, #cbd5e1 100% ) !important;
    /* Металлическая фаска плашки */
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-top-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.35) !important;
    border-radius: 20px !important;
    /* Объёмные тени кнопки */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(15, 23, 42, 0.15) !important;
    /* Выгравированный эффект надписи (Letterpress) */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

@keyframes rotation-b-oz8tpdgg54 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================================= */
@media (max-width: 575.98px) {
    .modal-overlay[b-oz8tpdgg54] {
        background: radial-gradient( circle at center, rgba(255, 255, 255, 0.85) 0%, rgba(226, 232, 240, 0.9) 100% ) !important;
    }

    .deluxe-loader[b-oz8tpdgg54] {
        width: 44px;
        height: 44px;
        border-width: 4px !important;
    }

    .loader-text[b-oz8tpdgg54] {
        font-size: 0.65rem !important;
        letter-spacing: 1.5px !important;
        margin-top: 14px !important;
        padding: 5px 12px !important;
    }
}
/* /Components/MyComponents/PaginationMy.razor.rz.scp.css */

/* ==========================================================================
   СKEВОМОРФНАЯ ПАГИНАЦИЯ (Apple Segmented Control / Aqua Buttons)
   ========================================================================== */

/* Панель-гнездо для кнопок */
.pagination[b-3m7fywlgog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 0px;
    padding: 5px 8px;
    /* Углубленный желобок в корпусе */
    background: linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 100%) !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.25), 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

    /* Физическая клавиша пагинации */
    .pagination button[b-3m7fywlgog] {
        position: relative !important;
        margin: 0 !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        font-family: inherit;
        border-radius: 6px !important;
        cursor: pointer;
        user-select: none;
        box-sizing: border-box !important;
        overflow: hidden;
        /* Ободок кнопки */
        border: 1px solid rgba(0, 0, 0, 0.3) !important;
        border-top-color: rgba(255, 255, 255, 0.9) !important;
        border-bottom-color: rgba(0, 0, 0, 0.4) !important;
        /* Стеклянный градиент Apple */
        background: linear-gradient( 180deg, #ffffff 0%, #f1f5f9 48%, #e2e8f0 50%, #cbd5e1 100% ) !important;
        /* Многослойные тени */
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(15, 23, 42, 0.15) !important;
        color: #334155 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
        transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

        /* Верхняя линза отблеска */
        .pagination button[b-3m7fywlgog]::after {
            content: "" !important;
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            height: 48%;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 100% ) !important;
            pointer-events: none;
            border-radius: 5px 5px 0 0;
        }

        /* --- HOVER ОБЫЧНОЙ КНОПКИ --- */
        .pagination button:not(.active):not(:disabled):hover[b-3m7fywlgog] {
            background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 48%, #e2e8f0 50%, #d1d5db 100% ) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 3px 8px rgba(15, 23, 42, 0.2) !important;
            transform: translateY(-0.5px) !important;
        }

        /* --- ACTIVE (КЛИК) --- */
        .pagination button:not(.active):not(:disabled):active[b-3m7fywlgog] {
            background: linear-gradient( 180deg, #94a3b8 0%, #cbd5e1 30%, #e2e8f0 70%, #f1f5f9 100% ) !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 0 1px rgba(0, 0, 0, 0.2) !important;
            transform: translateY(1px) scale(0.97) !important;
        }

        /* =========================================
   АКТИВНАЯ СТРАНИЦА (Apple Aqua Blue Gloss Button)
   ========================================= */
        .pagination button.active[b-3m7fywlgog] {
            border-color: #1d4ed8 !important;
            border-top-color: #93c5fd !important;
            border-bottom-color: #1e40af !important;
            /* Сочный синий линзовый градиент */
            background: linear-gradient( 180deg, #60a5fa 0%, #3b82f6 48%, #2563eb 50%, #1d4ed8 100% ) !important;
            /* Неоновое свечение активной кнопки */
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(59, 130, 246, 0.5), 0 2px 5px rgba(15, 23, 42, 0.25) !important;
            color: #ffffff !important;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
        }

            .pagination button.active[b-3m7fywlgog]::after {
                background: linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.05) 100% ) !important;
            }

        /* =========================================
   НЕАКТИВНАЯ КНОПКА (Disabled / Locked)
   ========================================= */
        .pagination button:disabled[b-3m7fywlgog] {
            cursor: not-allowed !important;
            opacity: 0.55 !important;
            background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%) !important;
            border-color: #94a3b8 !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            color: #64748b !important;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            transform: none !important;
        }

            .pagination button:disabled[b-3m7fywlgog]::after {
                display: none !important;
            }
/* /Components/MyComponents/ToastNotification.razor.rz.scp.css */
/* =========================================
   1. КОНТЕЙНЕР: Глобальное позиционирование
   ========================================= */
.toast-container[b-7ahddukec2] {
    z-index: 2147483647 !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 1rem !important; /* Чуть увеличили отступ, так как "физические" объекты выглядят массивнее */
}

/* =========================================
   2. ГЛАВНАЯ ПЛАШКА: Скевоморфизм (Матовый пластик/Металл)
   ========================================= */
.modern-toast[b-7ahddukec2] {
    /* Градиент, имитирующий освещение сверху вниз */
    background: linear-gradient(180deg, #e8ecef 0%, #cfd4d9 100%) !important;
    /* Имитация 3D-фаски: светлый край сверху, темный снизу */
    border: 1px solid #9fa6ad !important;
    border-top-color: #f8f9fa !important;
    border-bottom-color: #868e96 !important;
    /* 
       Объем: 
       1. Блик на верхнем внутреннем крае
       2. Затенение на нижнем внутреннем крае
       3. Жесткая падающая тень от физического объекта 
    */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important; /* Скевоморфизм любит более "острые", индустриальные углы */
    min-width: 350px;
    max-width: 420px;
    overflow: hidden;
    color: #212529 !important;
    /* Эффект выдавленного текста/поверхности */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: slideInRight-b-7ahddukec2 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

    /* Убираем "левитацию" при ховере — физические объекты не взлетают от взгляда.
       Оставляем только остановку таймера. */
    .modern-toast:hover .toast-progress-bar[b-7ahddukec2] {
        animation-play-state: paused !important;
    }

/* =========================================
   3. ПРОГРЕСС-БАР: Углубление с LED-подсветкой
   ========================================= */
.toast-progress-bar[b-7ahddukec2] {
    position: absolute;
    bottom: 0; /* Перенесем вниз для большей "основательности" */
    left: 0;
    height: 4px;
    /* Физический индикатор: градиент + тень внутри желобка */
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), /* Тень от углубления */
    0 1px 0 rgba(255, 255, 255, 0.8), /* Блик под желобком */
    0 -1px 4px rgba(2, 132, 199, 0.6); /* Свечение от диода */

    opacity: 1;
    animation: toastProgressLoaded-b-7ahddukec2 5s linear forwards;
    border-radius: 0 0 0 8px; /* Согласуем с основным радиусом */
}

/* =========================================
   4. ШАПКА: Типографика и физический разделитель (шов)
   ========================================= */
.toast-header[b-7ahddukec2] {
    padding: 1rem 1.25rem 0.75rem 1.25rem !important;
    background: transparent !important;
    /* Физический вдавленный шов между шапкой и телом */
    border-bottom: 1px solid #a3abb1 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

    .toast-header i[b-7ahddukec2] {
        font-size: 1.1rem;
        color: #495057;
        /* Тень для объема иконки */
        filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.2)) drop-shadow(0 1px 1px rgba(255,255,255,0.8));
    }

.tracking-wider[b-7ahddukec2] {
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #343a40 !important;
    text-transform: uppercase;
}

.toast-header small[b-7ahddukec2] {
    color: #545d65 !important;
    font-size: 0.7rem;
    font-weight: 600;
}

/* =========================================
   5. ТЕЛО: Основной контент
   ========================================= */
.toast-body[b-7ahddukec2] {
    padding: 0.75rem 1.25rem 1.25rem 1.25rem !important;
}

.toast-content[b-7ahddukec2] {
    font-size: 0.9rem;
    font-weight: 500; /* В скевоморфизме текст обычно плотнее для читаемости на текстурах */
    line-height: 1.5;
    color: #343a40 !important;
}

/* =========================================
   КЛЮЧЕВЫЕ КАДРЫ (ANIMATIONS)
   ========================================= */
@keyframes slideInRight-b-7ahddukec2 {
    0% {
        transform: translateX(110%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastProgressLoaded-b-7ahddukec2 {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}
/* /Components/Pages/Admin.razor.rz.scp.css */
.deluxe-settings-page[b-twzm7rs0a5] {
    color: #fff;
    background: linear-gradient(359deg, #0f172a 0%, var(--bs-gray-500) 100%);
    border-radius: 20px;
    min-height: 80vh;
}

/* Основная карточка настроек */
.settings-card[b-twzm7rs0a5] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}
    .settings-card.clickable:hover[b-twzm7rs0a5] {
        cursor: pointer;
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.08);
    }
    .settings-card.clickable[b-twzm7rs0a5] {
        cursor: pointer;
    }

    .settings-card:hover[b-twzm7rs0a5] {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(13, 110, 253, 0.4);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

/* Контейнер для иконки */
.icon-box[b-twzm7rs0a5] {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

/* Акценты для иконок */
.accent-blue[b-twzm7rs0a5] {
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.1);
}

.accent-amber[b-twzm7rs0a5] {
    color: #ffca28;
    background: rgba(255, 202, 40, 0.1);
}

.accent-purple[b-twzm7rs0a5] {
    color: #a29bfe;
    background: rgba(162, 155, 254, 0.1);
}

.accent-red[b-twzm7rs0a5] {
    color: #ff7675;
    background: rgba(255, 118, 117, 0.1);
}

.settings-card:hover .icon-box[b-twzm7rs0a5] {
    transform: scale(1.1) rotate(5deg);
}

/* Заголовки и текст */
.settings-card h5[b-twzm7rs0a5] {
    color: #fff;
    font-weight: 700;
    margin-bottom: 8px;
}

.settings-card p[b-twzm7rs0a5] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Разделитель с эффектом свечения */
.divider-glow[b-twzm7rs0a5] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.5), transparent);
}

.text-glow[b-twzm7rs0a5] {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Убираем стандартное подчеркивание ссылок */
.settings-card-link[b-twzm7rs0a5] {
    text-decoration: none !important;
}











/* Карточка системной статистики */
.system-stat-card[b-twzm7rs0a5] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1); /* Пунктирная граница для отличия от кнопок */
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .system-stat-card:hover[b-twzm7rs0a5] {
        background: rgba(255, 255, 255, 0.04);
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.2);
    }

.stat-main[b-twzm7rs0a5] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.stat-icon[b-twzm7rs0a5] {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Пульсирующие эффекты для статуса "Живой системы" */
.pulse-blue[b-twzm7rs0a5] {
    color: #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);
    animation: pulse-b-b-twzm7rs0a5 2s infinite;
}

.pulse-green[b-twzm7rs0a5] {
    color: #2ecc71;
    animation: pulse-g 2s infinite;
}

.pulse-amber[b-twzm7rs0a5] {
    color: #f1c40f;
}

@keyframes pulse-b-b-twzm7rs0a5 {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.2);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 210, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
    }
}

.stat-label[b-twzm7rs0a5] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

.stat-number[b-twzm7rs0a5] {
    margin: 0;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
}

    .stat-number.small-text[b-twzm7rs0a5] {
        font-size: 1.1rem;
        letter-spacing: 0;
    }

.stat-footer[b-twzm7rs0a5] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* ==========================================================================
   2. ТИПОГРАФИКА И УТИЛИТЫ (Typography & Utilities — Skeuomorphic)
   ========================================================================== */
.fw-black[b-cdzqf91sxw] {
    font-weight: 900 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.text-orange-dark[b-cdzqf91sxw] {
    color: var(--mypost-orange-dark) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 1px rgba(0, 0, 0, 0.4);
}

/* Объемные глянцевые градиенты для текста */
.text-gradient-orange[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ff8c00 0%, #ff3d00 50%, #d50000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.text-gradient-blue[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 50%, #0f172a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900 !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.tracking-widest[b-cdzqf91sxw] {
    letter-spacing: 0.15em;
}

.ls-wide[b-cdzqf91sxw] {
    letter-spacing: 2px;
}

/* Объёмные фоны */
.bg-blue[b-cdzqf91sxw] {
    background: linear-gradient(180deg, var(--mypost-blue) 0%, #0d47a1 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 5px rgba(0, 0, 0, 0.4);
}

.bg-gradient-orange[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffaa00 0%, #ff4500 50%, #cc3700 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.bg-dark[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #3a4759 0%, #222a36 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.6);
}

.bg-light-blue[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #e3f2fd 100%);
    color: #0d47a1;
    border: 1px solid #b3e5fc;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bg-primary-subtle-custom[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #f5f7ff 0%, #e0e7ff 100%) !important;
    border: 1px solid #c7d2fe;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 4px rgba(99, 102, 241, 0.1);
}

/* ==========================================================================
   3. АНИМАЦИИ (Animations — Skeuomorphic)
   ========================================================================== */
@keyframes heroFadeIn-b-cdzqf91sxw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink-b-cdzqf91sxw {
    50% {
        opacity: 0.3;
    }
}

@keyframes pulse-blue-b-cdzqf91sxw {
    0% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(21, 114, 161, 0.6);
    }

    70% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 0 0 16px rgba(21, 114, 161, 0);
    }

    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(21, 114, 161, 0);
    }
}

@keyframes float-b-cdzqf91sxw {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.15));
    }

    50% {
        transform: translateY(-15px);
        filter: drop-shadow(0 25px 15px rgba(0, 0, 0, 0.08));
    }
}

.animate-fade-in[b-cdzqf91sxw] {
    opacity: 0;
    animation: heroFadeIn-b-cdzqf91sxw 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.animate-float[b-cdzqf91sxw] {
    animation: float-b-cdzqf91sxw 4s ease-in-out infinite;
}

.shadow-pulse[b-cdzqf91sxw] {
    animation: pulse-blue-b-cdzqf91sxw 2s infinite;
}

.hover-up[b-cdzqf91sxw] {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .hover-up:hover[b-cdzqf91sxw] {
        transform: translateY(-5px);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 12px 24px rgba(0, 0, 0, 0.2) !important;
    }

/* ==========================================================================
   4. НАВИГАЦИЯ (Navbar — Hardware Panel Edition)
   ========================================================================== */
.modern-nav[b-cdzqf91sxw] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(235, 240, 245, 0.9) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff;
    transition: all 0.3s ease-in-out;
}

.nav-link-modern[b-cdzqf91sxw] {
    color: #334155 !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
    margin: 0 0.2rem;
    text-decoration: none;
    position: relative;
    display: inline-block;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05);
    text-shadow: 0 1px 0 #ffffff;
    transition: all 0.2s ease;
}

    .nav-link-modern:hover[b-cdzqf91sxw] {
        color: #4f46e5 !important;
        background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 100%);
        border-color: #a5b4fc;
        box-shadow: inset 0 1px 0 #ffffff, 0 4px 8px rgba(99, 102, 241, 0.15);
        transform: translateY(-1px);
    }

    .nav-link-modern:active[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #cbd5e1 0%, #f1f5f9 100%);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: translateY(1px);
    }

    .nav-link-modern[b-cdzqf91sxw]::after {
        display: none; /* Отключена плоская полоска */
    }

.navbar-toggler[b-cdzqf91sxw] {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .navbar-toggler:active[b-cdzqf91sxw] {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .navbar-toggler:focus[b-cdzqf91sxw] {
        box-shadow: inset 0 1px 0 #ffffff, 0 0 0 3px rgba(99, 102, 241, 0.3);
    }

/* ==========================================================================
   5. ГЛАВНЫЙ БЛОК И СЛАЙДЕР (Hero & Slider — Skeuomorphic Frame)
   ========================================================================== */
.home-modern[b-cdzqf91sxw] {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.bg-holder-modern[b-cdzqf91sxw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover;
    z-index: -1;
}

.bg-overlay[b-cdzqf91sxw] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,244,248,0.85) 100%);
}

.content-box[b-cdzqf91sxw] {
    opacity: 0;
    animation: heroFadeIn-b-cdzqf91sxw 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.logo-container[b-cdzqf91sxw] {
    display: inline-block;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15));
}

.hero-logo[b-cdzqf91sxw] {
    max-width: 280px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .hero-logo:hover[b-cdzqf91sxw] {
        transform: scale(1.03);
    }

.modern-slider[b-cdzqf91sxw] {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: 24px;
    border: 4px solid #ffffff;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 15px 35px rgba(0, 0, 0, 0.2);
}

.slides-container[b-cdzqf91sxw] {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1);
}

.slide[b-cdzqf91sxw] {
    position: relative;
    overflow: hidden;
    min-width: 100%;
    height: 100%;
}

    .slide img[b-cdzqf91sxw] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.slide-overlay[b-cdzqf91sxw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.slide-caption[b-cdzqf91sxw] {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-40%);
    z-index: 2;
    opacity: 0;
    transition: all 0.8s ease 0.4s;
}

    .slide-caption.active[b-cdzqf91sxw] {
        opacity: 1;
        transform: translateY(-50%);
    }

    .slide-caption h2[b-cdzqf91sxw] {
        text-shadow: 0 3px 6px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
        line-height: 1.1;
    }

    .slide-caption p[b-cdzqf91sxw] {
        font-size: 1.5rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

/* ==========================================================================
   6. ТЕЛЕФОНЫ И ОВЕРЛЕИ (Glass & Plastic Badges)
   ========================================================================== */
.phone-overlay[b-cdzqf91sxw] {
    position: absolute;
    top: 45px;
    left: 70px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.phone-item[b-cdzqf91sxw] {
    position: absolute;
    padding: 12px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(220, 230, 242, 0.85) 100%);
    backdrop-filter: blur(12px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.2);
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
}

    .phone-item:hover[b-cdzqf91sxw] {
        transform: scale(1.06) translateY(-4px);
        background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
        box-shadow: inset 0 2px 4px #ffffff, inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 15px 30px rgba(0, 0, 0, 0.25);
    }

    .phone-item:active[b-cdzqf91sxw] {
        transform: scale(0.98) translateY(1px);
        box-shadow: inset 0 3px 6px rgba(0,0,0,0.2);
    }

.phone-1[b-cdzqf91sxw] {
    top: 25%;
    right: 5%;
}

.phone-2[b-cdzqf91sxw] {
    top: 45%;
    right: 15%;
}

.phone-3[b-cdzqf91sxw] {
    top: 65%;
    right: 10%;
}

/* ==========================================================================
   7. КНОПКИ (Tactile 3D Buttons)
   ========================================================================== */
.btn-action[b-cdzqf91sxw] {
    padding: 16px 32px;
    border-radius: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
    border: 1px solid rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

    .btn-action.primary[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #38bdf8 0%, #1d4ed8 60%, #1e40af 100%);
        color: white;
        text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -3px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(29, 78, 216, 0.35);
    }

        .btn-action.primary:hover[b-cdzqf91sxw] {
            background: linear-gradient(180deg, #60a5fa 0%, #2563eb 60%, #1d4ed8 100%);
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), inset 0 -3px 4px rgba(0, 0, 0, 0.4), 0 10px 22px rgba(29, 78, 216, 0.45);
            transform: translateY(-2px);
        }

        .btn-action.primary:active[b-cdzqf91sxw] {
            background: linear-gradient(180deg, #1e40af 0%, #1d4ed8 100%);
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
            transform: translateY(3px);
        }

    .btn-action.secondary[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
        color: var(--mypost-blue);
        border: 1px solid #cbd5e1;
        text-shadow: 0 1px 0 #ffffff;
        box-shadow: inset 0 2px 1px #ffffff, inset 0 -2px 3px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    }

        .btn-action.secondary:hover[b-cdzqf91sxw] {
            background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
            transform: translateY(-2px);
            box-shadow: inset 0 2px 1px #ffffff, inset 0 -2px 3px rgba(0, 0, 0, 0.15), 0 8px 18px rgba(0, 0, 0, 0.12);
        }

        .btn-action.secondary:active[b-cdzqf91sxw] {
            background: linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 100%);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
            transform: translateY(2px);
        }

.btn-partner[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    text-shadow: 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 2px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    text-decoration: none;
}

    .btn-partner:hover[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
        border-color: #1e40af;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(29, 78, 216, 0.3);
    }

/* Глянцевая золотая кнопка авторизации */
.btn-login-original[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #fff3c4 0%, #fde047 45%, #eab308 50%, #ca8a04 100%);
    border: 1px solid #a16207;
    color: #422006;
    padding: 18px 36px !important;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8), inset 0 -3px 4px rgba(113, 63, 18, 0.4), 0 6px 16px rgba(0, 0, 0, 0.15);
    outline: none;
}

    .btn-login-original:hover[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #fef08a 0%, #facc15 45%, #eab308 50%, #a16207 100%);
        color: #000000;
        box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 4px rgba(113, 63, 18, 0.5), 0 10px 22px rgba(234, 179, 8, 0.4);
        transform: translateY(-2px);
    }

    .btn-login-original:active[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #ca8a04 0%, #eab308 100%);
        box-shadow: inset 0 3px 6px rgba(66, 32, 6, 0.7);
        transform: translateY(2px);
    }

    .btn-login-original[b-cdzqf91sxw]::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -100%;
        width: 30%;
        height: 200%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
        transform: rotate(25deg);
        transition: all 0.6s ease;
    }

    .btn-login-original:hover[b-cdzqf91sxw]::after {
        left: 150%;
    }

.btn-register-pulse[b-cdzqf91sxw] {
    padding: 12px 25px;
    font-weight: 800;
    text-transform: uppercase;
    animation: pulse-blue-b-cdzqf91sxw 2s infinite;
}

.btnbig-group[b-cdzqf91sxw] {
    display: flex;
    justify-content: space-between;
}

/* ==========================================================================
   СКЕВОМОРФНАЯ КРУПНАЯ КНОПКА-КУПОЛ (.btn-big) — HARDWARE DOME EDITION
   ========================================================================== */
.btn-big[b-cdzqf91sxw] {
    position: relative !important;
    width: 220px !important;
    height: 220px !important;
    padding: 20px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
    background: radial-gradient(circle at 38% 30%, #60a5fa 0%, #2563eb 40%, #1d4ed8 70%, #0f172a 100%) !important;
    box-shadow: inset 0 8px 12px rgba(255, 255, 255, 0.5), inset 0 -16px 24px rgba(15, 23, 42, 0.9), inset 0 0 20px rgba(37, 99, 235, 0.6), 0 0 0 6px #1e293b, 0 0 0 8px #475569, 0 0 0 9px #0f172a, 0 16px 32px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease, background 0.2s ease !important;
}

    .btn-big[b-cdzqf91sxw]::after {
        content: "" !important;
        position: absolute !important;
        top: 6px !important;
        left: 12% !important;
        width: 76% !important;
        height: 44% !important;
        border-radius: 50% !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease, transform 0.15s ease !important;
    }

    .btn-big:hover:not(.disabled):not(:disabled)[b-cdzqf91sxw] {
        transform: translateY(-3px) !important;
        background: radial-gradient(circle at 38% 30%, #93c5fd 0%, #3b82f6 40%, #2563eb 70%, #1e3a8a 100%) !important;
        box-shadow: inset 0 10px 16px rgba(255, 255, 255, 0.75), inset 0 -16px 24px rgba(15, 23, 42, 0.8), inset 0 0 25px rgba(59, 130, 246, 0.8), 0 0 0 6px #334155, 0 0 0 8px #64748b, 0 0 0 9px #0f172a, 0 22px 40px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(37, 99, 235, 0.35) !important;
    }

    .btn-big:active:not(.disabled):not(:disabled)[b-cdzqf91sxw] {
        transform: translateY(5px) !important;
        background: radial-gradient(circle at 50% 60%, #1d4ed8 0%, #1e3a8a 60%, #0b1329 100%) !important;
        box-shadow: inset 0 12px 20px rgba(0, 0, 0, 0.9), inset 0 -4px 8px rgba(255, 255, 255, 0.2), 0 0 0 6px #0f172a, 0 0 0 8px #1e293b, 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    }

        .btn-big:active:not(.disabled):not(:disabled)[b-cdzqf91sxw]::after {
            opacity: 0.25 !important;
            transform: translateY(2px) scale(0.95) !important;
        }

    .btn-big:focus-visible[b-cdzqf91sxw] {
        outline: none !important;
        box-shadow: inset 0 8px 12px rgba(255, 255, 255, 0.5), inset 0 -16px 24px rgba(15, 23, 42, 0.9), 0 0 0 6px #1e293b, 0 0 0 10px #38bdf8, 0 16px 32px rgba(0, 0, 0, 0.6) !important;
    }

    .btn-big.disabled[b-cdzqf91sxw],
    .btn-big:disabled[b-cdzqf91sxw] {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
        transform: none !important;
        background: radial-gradient(circle at 38% 30%, #475569 0%, #1e293b 70%, #0f172a 100%) !important;
        box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.2), inset 0 -8px 12px rgba(0, 0, 0, 0.8), 0 0 0 6px #1e293b, 0 0 0 8px #334155, 0 6px 12px rgba(0, 0, 0, 0.4) !important;
        color: #64748b !important;
    }

        .btn-big.disabled[b-cdzqf91sxw]::after,
        .btn-big:disabled[b-cdzqf91sxw]::after {
            opacity: 0.15 !important;
        }

/* Аппаратная пульсация */
.blinking[b-cdzqf91sxw] {
    animation: dome-hardware-pulse-b-cdzqf91sxw 2s infinite ease-in-out !important;
}

@keyframes dome-hardware-pulse-b-cdzqf91sxw {
    0%, 100% {
        box-shadow: inset 0 8px 12px rgba(255, 255, 255, 0.5), inset 0 -16px 24px rgba(15, 23, 42, 0.9), inset 0 0 15px rgba(37, 99, 235, 0.4), 0 0 0 6px #1e293b, 0 0 0 8px #475569, 0 0 0 9px #0f172a, 0 16px 32px rgba(0, 0, 0, 0.6) !important;
    }

    50% {
        box-shadow: inset 0 8px 14px rgba(255, 255, 255, 0.7), inset 0 -16px 24px rgba(15, 23, 42, 0.7), inset 0 0 35px rgba(56, 189, 248, 0.9), 0 0 0 6px #1d4ed8, 0 0 0 8px #3b82f6, 0 0 25px rgba(59, 130, 246, 0.7), 0 20px 40px rgba(0, 0, 0, 0.7) !important;
    }
}

/* ==========================================================================
   8. КАРТОЧКИ И БЛОКИ (Skeuomorphic Plates & Panels)
   ========================================================================== */
.service-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
    border-radius: 24px;
    box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px rgba(0,0,0,0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

    .service-card:hover[b-cdzqf91sxw] {
        transform: translateY(-8px);
        box-shadow: inset 0 1px 2px #ffffff, inset 0 -2px 4px rgba(0,0,0,0.05), 0 18px 35px rgba(21, 114, 161, 0.18);
    }

    .service-card.featured[b-cdzqf91sxw] {
        border: 1px solid #93c5fd;
        background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
        box-shadow: inset 0 1px 2px #ffffff, 0 12px 28px rgba(37, 99, 235, 0.12);
    }

    .service-card:hover .icon-box[b-cdzqf91sxw] {
        background: linear-gradient(180deg, var(--mypost-blue) 0%, #0d47a1 100%);
        box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
        transform: rotate(-5deg) scale(1.05);
    }

        .service-card:hover .icon-box img[b-cdzqf91sxw] {
            filter: brightness(0) invert(1);
        }

/* Вдавленная ниша для иконки (Recessed Slot) */
.icon-box[b-cdzqf91sxw] {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15), 0 1px 0 #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.card-footer-accent[b-cdzqf91sxw] {
    height: 8px;
    width: 100%;
    margin-top: auto;
    background: linear-gradient(180deg, var(--mypost-blue) 0%, #0f172a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.job-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    height: 100%;
    overflow: hidden;
    box-shadow: inset 0 1px 0 #ffffff, 0 6px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .job-card:hover[b-cdzqf91sxw] {
        transform: translateY(-5px);
        box-shadow: inset 0 1px 0 #ffffff, 0 14px 28px rgba(0, 0, 0, 0.12);
    }

.job-card-header[b-cdzqf91sxw] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.highlight-card-dark[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
    border: 1px solid #475569;
    color: white;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.3);
}

.highlight-card-blue[b-cdzqf91sxw] {
    background: linear-gradient(180deg, var(--mypost-blue) 0%, #0c3559 100%);
    border: 1px solid #2563eb;
    color: white;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.4), 0 10px 25px rgba(12, 53, 89, 0.3);
}

.coop-card[b-cdzqf91sxw] {
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

    .coop-card:hover[b-cdzqf91sxw] {
        transform: translateY(-5px);
        border-color: #818cf8 !important;
        box-shadow: inset 0 1px 0 #ffffff, 0 12px 25px rgba(99, 102, 241, 0.15) !important;
    }

    .coop-card i[b-cdzqf91sxw] {
        font-size: 1.5rem;
    }

    .coop-card:hover .icon-circle[b-cdzqf91sxw] {
        transform: rotate(10deg);
    }

/* Статистика */
.stats-grid[b-cdzqf91sxw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: -60px;
    position: relative;
    z-index: 1;
}

.stat-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    padding: 30px 20px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 3px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

    .stat-card:hover[b-cdzqf91sxw] {
        transform: translateY(-8px);
        box-shadow: inset 0 1px 0 #ffffff, 0 16px 32px rgba(0,0,0,0.12);
    }

.stat-icon-box[b-cdzqf91sxw] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: white;
    border: 1px solid rgba(0,0,0,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.color-courier[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #8d6e63 0%, #4e342e 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(121, 85, 72, 0.4);
}

.color-postman[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #29b6f6 0%, #0277bd 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(21, 114, 161, 0.4);
}

.color-division[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #8bc34a 0%, #33691e 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(99, 161, 43, 0.4);
}

.color-stock[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ff9800 0%, #e65100 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(201, 97, 23, 0.4);
}

.color-delivery[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #424242 0%, #212121 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(33, 37, 41, 0.4);
}

.stat-content h2[b-cdzqf91sxw] {
    font-weight: 900;
    margin-bottom: 5px;
    color: #1e293b;
    text-shadow: 0 1px 0 #ffffff;
}

.stat-content p[b-cdzqf91sxw] {
    font-size: 0.85rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.featured-stat[b-cdzqf91sxw] {
    border: 2px solid var(--mypost-blue);
    background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
}

.company-content-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    box-shadow: inset 0 1px 0 #ffffff, 0 10px 30px rgba(0,0,0,0.05);
}

.company-intro[b-cdzqf91sxw] {
    color: #334155;
    border-left: 5px solid var(--mypost-blue);
    padding-left: 20px;
    font-size: 1.1rem;
}

.income-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    overflow: hidden;
    box-shadow: inset 0 1px 0 #ffffff, 0 15px 35px rgba(0,0,0,0.12);
}

.income-header[b-cdzqf91sxw] {
    background: linear-gradient(180deg, var(--mypost-blue) 0%, #0d47a1 100%);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 5px rgba(0,0,0,0.2);
}

.income-body[b-cdzqf91sxw] {
    padding: 25px;
}

.income-example .value[b-cdzqf91sxw] {
    font-size: 1.8rem;
    font-weight: 900;
    display: block;
    color: #1e293b;
    text-shadow: 0 1px 0 #ffffff;
}

.income-steps .step-item[b-cdzqf91sxw] {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #475569;
}

/* Мелкие блоки */
.benefit-small-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0 !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(0, 0, 0, 0.04);
}

.benefit-glass-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    border-left: 6px solid var(--mypost-blue);
    box-shadow: inset 0 1px 0 #ffffff, 0 8px 20px rgba(0, 0, 0, 0.06);
}

.benefit-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 #ffffff, 0 4px 15px rgba(0,0,0,0.05);
}

.requirement-card[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    color: white;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #475569;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0,0,0,0.2);
}

.cta-banner[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #fef9c3 0%, #fef08a 100%);
    border: 1px dashed #ca8a04;
    box-shadow: inset 0 1px 0 #ffffff, 0 4px 10px rgba(202, 138, 4, 0.15);
}

.divider[b-cdzqf91sxw], .divider-custom[b-cdzqf91sxw], .divider-accent[b-cdzqf91sxw] {
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.divider[b-cdzqf91sxw] {
    height: 4px;
    width: 50px;
    background: linear-gradient(90deg, var(--mypost-blue), #60a5fa);
    border-radius: 2px;
    margin-top: 15px;
}

.divider-custom[b-cdzqf91sxw] {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 2px;
    margin-top: 20px;
}

.divider-accent[b-cdzqf91sxw] {
    width: 80px;
    height: 5px;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    margin-top: 15px;
    border-radius: 10px;
}

/* ==========================================================================
   9. СПИСКИ И ЭЛЕМЕНТЫ (Lists & Interactive Items)
   ========================================================================== */
.custom-features-list[b-cdzqf91sxw] {
    padding-left: 0;
    margin-top: 1.5rem;
}

    .custom-features-list li[b-cdzqf91sxw] {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1rem !important;
        transition: transform 0.2s ease;
    }

        .custom-features-list li:hover[b-cdzqf91sxw] {
            transform: translateX(4px);
        }

    .custom-features-list i[b-cdzqf91sxw] {
        color: var(--mypost-success) !important;
        font-size: 1.2rem;
        flex-shrink: 0;
        margin-top: 2px;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    }

.service-features li[b-cdzqf91sxw] {
    padding: 10px 0;
    display: flex;
    align-items: center;
    color: #334155;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 #ffffff;
}

    .service-features li:last-child[b-cdzqf91sxw] {
        border-bottom: none;
        box-shadow: none;
    }

.service-features i[b-cdzqf91sxw] {
    margin-right: 12px;
    font-size: 1.1rem;
    color: var(--mypost-blue);
}

.job-list[b-cdzqf91sxw] {
    list-style: none;
    padding: 0;
}

    .job-list li[b-cdzqf91sxw] {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #334155;
    }

    .job-list i[b-cdzqf91sxw] {
        color: var(--mypost-blue);
        width: 20px;
    }

.benefit-list li[b-cdzqf91sxw] {
    margin-bottom: 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.benefit-list i[b-cdzqf91sxw] {
    color: var(--mypost-blue);
    width: 20px;
}

.benefits-grid li[b-cdzqf91sxw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 #ffffff;
    font-weight: 600;
}

.value-item[b-cdzqf91sxw] {
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
    border: 1px solid #dbeafe;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition: 0.3s ease;
}

    .value-item i[b-cdzqf91sxw] {
        font-size: 1.5rem;
    }

    .value-item:hover[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 100%);
        transform: translateY(-4px);
        box-shadow: inset 0 1px 0 #ffffff, 0 8px 18px rgba(99, 102, 241, 0.12);
    }

.benefit-item[b-cdzqf91sxw] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

    .benefit-item i[b-cdzqf91sxw] {
        font-size: 1.2rem;
        color: #16a34a;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    }

/* Объемная кнопка-значок шага */
.step-badge[b-cdzqf91sxw] {
    width: 36px;
    height: 36px;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-radius: 10px;
    border: 1px solid #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.15);
}

.zone-tag[b-cdzqf91sxw] {
    display: inline-block;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 15px;
    border-radius: 50px;
    margin: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.1);
}

.badge-partner[b-cdzqf91sxw] {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
}

    .badge-partner:hover[b-cdzqf91sxw] {
        background: linear-gradient(180deg, var(--mypost-blue) 0%, #0d47a1 100%);
        color: white;
        border-color: #0d47a1;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.15);
    }

.delivery-type-tag[b-cdzqf91sxw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

    .delivery-type-tag i[b-cdzqf91sxw] {
        width: 20px;
    }

/* Объемный таймлайн */
.modern-timeline[b-cdzqf91sxw] {
    position: relative;
    padding-left: 30px;
}

    .modern-timeline[b-cdzqf91sxw]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
        border-radius: 2px;
        box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), 1px 0 0 #ffffff;
    }

.timeline-item[b-cdzqf91sxw] {
    position: relative;
    padding-bottom: 40px;
    padding-left: 30px;
}

/* Хромированная/выпуклая заклёпка с номером */
.timeline-number[b-cdzqf91sxw] {
    position: absolute;
    left: -48px;
    top: 0;
    width: 36px;
    height: 36px;
    background: radial-gradient(circle at 35% 35%, #60a5fa 0%, #1d4ed8 70%, #0f172a 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 2px solid #ffffff;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8), inset 0 -3px 4px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}

/* ==========================================================================
   10. РАЗНОЕ И СЕКЦИИ (Forms & Hardware Elements)
   ========================================================================== */
.video-container-modern[b-cdzqf91sxw] {
    position: relative;
    border-radius: 20px;
    border: 4px solid #ffffff;
    overflow: hidden;
    transform: rotate(1deg);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 12px 28px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
}

    .video-container-modern:hover[b-cdzqf91sxw] {
        transform: rotate(0deg);
    }

.video-label[b-cdzqf91sxw] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.partners-section[b-cdzqf91sxw] {
    background-color: #f8fafc;
    position: relative;
}

.partner-logo-box[b-cdzqf91sxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 18px;
    height: 120px;
    transition: all 0.3s ease;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

    .partner-logo-box:hover[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
        border-color: var(--mypost-blue);
        box-shadow: inset 0 1px 0 #ffffff, 0 10px 22px rgba(21, 114, 161, 0.15);
        transform: translateY(-4px);
    }

.logo-gray[b-cdzqf91sxw] {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
    max-height: 90px;
    object-fit: contain;
}

.partner-logo-box:hover .logo-gray[b-cdzqf91sxw] {
    filter: grayscale(0%);
    opacity: 1;
}

/* Вогнутая ниша-заглушка */
.partner-placeholder[b-cdzqf91sxw] {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    padding: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 0 #ffffff;
}

.callback-section[b-cdzqf91sxw] {
    background: linear-gradient(180deg, var(--mypost-blue) 0%, #0a2540 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -5px 15px rgba(0,0,0,0.5);
}

/* Вдавленные поля ввода (Debossed input slots) */
.form-control[b-cdzqf91sxw] {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 0 #ffffff !important;
    transition: all 0.2s ease !important;
}

    .form-control:focus[b-cdzqf91sxw] {
        background-color: #ffffff !important;
        border-color: #f59e0b !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(245, 158, 11, 0.25) !important;
    }

.sticky-sidebar[b-cdzqf91sxw] {
    position: sticky;
    top: 100px;
}

/* Футер */
.footer-links li[b-cdzqf91sxw] {
    margin-bottom: 10px;
}

.footer-links a[b-cdzqf91sxw] {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: 0.2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

    .footer-links a:hover[b-cdzqf91sxw] {
        color: #fbbf24;
        padding-left: 5px;
    }

/* Объемные круглые кнопки соцсетей */
.social-btn[b-cdzqf91sxw] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

    .social-btn:hover[b-cdzqf91sxw] {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 6px 12px rgba(0,0,0,0.3);
    }

    .social-btn:active[b-cdzqf91sxw] {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    }

    .social-btn.facebook:hover[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #4267B2 0%, #29487d 100%);
        color: white;
    }

/* ==========================================================================
   11. МЕДИА-ЗАПРОСЫ (Responsive / Media Queries)
   ========================================================================== */
@media (min-width: 1200px) {
    .pe-xl-5-custom[b-cdzqf91sxw] {
        padding-right: 4.5rem !important;
    }
}

@media (max-width: 1555px) {
    .btn-big[b-cdzqf91sxw] {
        font-size: 1.2rem !important;
        border: 6px solid #2196F3 !important;
        width: 180px !important;
        height: 180px !important;
    }
}

@media (max-width: 1355px) {
    .btn-big[b-cdzqf91sxw] {
        font-size: 0.8rem !important;
        border: 4px solid #2196F3 !important;
        width: 120px !important;
        height: 120px !important;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse[b-cdzqf91sxw] {
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
        margin-top: 1rem;
        padding: 1.5rem;
        border-radius: 20px;
        box-shadow: inset 0 1px 0 #ffffff, 0 15px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid #cbd5e1;
    }

    .nav-link-modern[b-cdzqf91sxw] {
        padding: 0.8rem 1rem;
        display: block;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

        .nav-link-modern:last-child[b-cdzqf91sxw] {
            border-bottom: none;
            margin-bottom: 0;
        }
}

@media (max-width: 768px) {
    .slide-caption h2[b-cdzqf91sxw] {
        font-size: 2rem;
    }

    .slide-caption p[b-cdzqf91sxw] {
        font-size: 1.1rem;
    }

    .phone-overlay[b-cdzqf91sxw] {
        left: 0;
        top: 40px;
    }

    .phone-item[b-cdzqf91sxw] {
        font-size: 1rem;
        padding: 8px 16px;
    }

    .px-7[b-cdzqf91sxw] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .custom-features-list[b-cdzqf91sxw] {
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
        display: block !important;
    }

    .text-gradient-orange[b-cdzqf91sxw], .text-gradient-blue[b-cdzqf91sxw] {
        display: block;
        margin-top: 0.25rem;
    }
}

@media (max-width: 640px) {
    .btn-big[b-cdzqf91sxw] {
        margin-right: 0 !important;
        margin-bottom: 2rem !important;
        font-size: 1.2rem !important;
        border: 6px solid #2196F3 !important;
        width: 200px !important;
        height: 200px !important;
    }

    .btnbig-group[b-cdzqf91sxw] {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* ==========================================================================
   СKEВОМОРФНЫЙ СТИЛЬ (SKEUOMORPHIC UI)
   ========================================================================== */

/* --- Карточка подразделения --- */
.division-card[b-citdlkuhdk] {
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 1);
}

    .division-card:hover[b-citdlkuhdk] {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 1);
    }

.bg-primary-light[b-citdlkuhdk] {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.division-info-grid i[b-citdlkuhdk] {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.division-info-grid label[b-citdlkuhdk] {
    letter-spacing: 0.5px;
    font-size: 0.7rem !important;
    text-shadow: 0 1px 0 #ffffff;
}

@media (max-width: 576px) {
    .division-card[b-citdlkuhdk] {
        padding: 1.5rem !important;
    }
}


/* --- Шапка профиля и роли --- */
.profile-header[b-citdlkuhdk] {
    --role-color: #64748b;
    text-align: center;
    --padding: 2rem;
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.08), -6px -6px 15px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 1);
    transition: all 0.4s ease;
}

.role-admin[b-citdlkuhdk] {
    --role-color: #1e293b;
}

.role-curator[b-citdlkuhdk] {
    --role-color: #8b5cf6;
}

.role-postman[b-citdlkuhdk] {
    --role-color: #0ea5e9;
}

.role-courier[b-citdlkuhdk] {
    --role-color: #f59e0b;
}

.role-head[b-citdlkuhdk] {
    --role-color: #10b981;
}

.role-coordinator[b-citdlkuhdk] {
    --role-color: #6366f1;
}

.role-storekeeper[b-citdlkuhdk] {
    --role-color: #64748b;
}

.avatar-wrapper[b-citdlkuhdk] {
    font-size: 4rem;
    color: var(--role-color);
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

    .avatar-wrapper:hover[b-citdlkuhdk] {
        transform: scale(1.08) rotate(2deg);
    }

.welcome-text[b-citdlkuhdk] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #64748b;
    margin-bottom: 0.2rem;
    text-shadow: 0 1px 0 #ffffff;
}

.user-name[b-citdlkuhdk] {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--role-color);
    text-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Глянцевый ролевой бейдж */
.role-badge[b-citdlkuhdk] {
    background: linear-gradient(180deg, var(--role-color) 0%, rgba(0, 0, 0, 0.2) 100%), var(--role-color);
    color: white;
    font-size: 0.8rem;
    padding: 5px 14px;
    border-radius: 50px;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}


/* --- Дашборд и карточки статистики --- */
.summary-dashboard[b-citdlkuhdk] {
    padding-bottom: 0px;
}

.stat-card[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    padding: 10px 14px !important;
    height: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.08), -3px -3px 8px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 1);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .stat-card:hover[b-citdlkuhdk] {
        transform: translateY(-4px);
        box-shadow: 6px 12px 18px rgba(0, 0, 0, 0.12), -3px -3px 10px rgba(255, 255, 255, 1);
    }

.stat-header[b-citdlkuhdk] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: #475569;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 0 #ffffff;
}

.stat-body[b-citdlkuhdk] {
    flex: 1;
    overflow-y: auto;
}

.small-info[b-citdlkuhdk] {
    font-size: 0.85rem;
    margin-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 #ffffff;
}

.stat-row[b-citdlkuhdk] {
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    box-shadow: 0 1px 0 #ffffff;
}

.stat-card.highlight[b-citdlkuhdk] {
    border-top: 4px solid #fd7e14;
    background: linear-gradient(145deg, #ffffff 0%, #fff4e6 100%);
}

.stat-card.accent-green[b-citdlkuhdk] {
    background: linear-gradient(145deg, #f0fff4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    box-shadow: 4px 6px 12px rgba(34, 197, 94, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

    .stat-card.accent-green .stat-header[b-citdlkuhdk] {
        color: #15803d;
    }

.earned-row[b-citdlkuhdk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: #15803d;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Двуколоночный вывод в карточке "Заработано" */
.earned-grid[b-citdlkuhdk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 2px;
}

    /* Итоговая строка "Всего" растягивается на обе колонки */
    .earned-grid .earned-total[b-citdlkuhdk] {
        grid-column: span 2;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: 4px;
        padding-top: 4px;
    }

/* --- Главная карточка профиля и действия --- */
.main-profile-card[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
}

.profile-content[b-citdlkuhdk] {
    padding: 25px;
    flex-grow: 1;
}

.profile-actions[b-citdlkuhdk] {
    padding: 20px 25px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    border-top: 1px solid #94a3b8;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 15px;
}

    .profile-actions .btn[b-citdlkuhdk] {
        padding: 10px 20px;
        border-radius: 10px;
        font-weight: 600;
        background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
        border: 1px solid #94a3b8;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15), inset 0 1px 0 #ffffff;
        text-shadow: 0 1px 0 #ffffff;
        transition: all 0.2s ease;
    }

        .profile-actions .btn:hover[b-citdlkuhdk] {
            background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
            transform: translateY(-1px);
        }

        .profile-actions .btn:active[b-citdlkuhdk] {
            transform: translateY(1px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }


/* --- Сайдбар с навигацией --- */
.resource-sidebar[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #cbd5e1;
    box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
}

.sidebar-title[b-citdlkuhdk] {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 0 1px 0 #ffffff;
}

.nav-link-custom[b-citdlkuhdk] {
    display: flex;
    align-items: center;
    padding: 6px 10px !important; 
    font-size: 0.8125rem; 
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    margin-bottom: 6px;
    transition: all 0.2s;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 #ffffff;
    text-shadow: 0 1px 0 #ffffff;
}

    .nav-link-custom i[b-citdlkuhdk] {
        width: 25px;
        font-size: 1.1rem;
        color: #2563eb;
        margin-right: 10px;
        filter: drop-shadow(0 1px 0 #ffffff);
    }

    .nav-link-custom:hover[b-citdlkuhdk] {
        background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
        border-color: #94a3b8;
        color: #0f172a;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff;
    }

    .nav-link-custom:active[b-citdlkuhdk] {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .nav-link-custom.highlight[b-citdlkuhdk] {
        background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
        border-color: #fdba74;
        color: #c2410c;
    }

        .nav-link-custom.highlight i[b-citdlkuhdk] {
            color: #ea580c;
        }

    .nav-link-custom.pdf i[b-citdlkuhdk] {
        color: #dc2626;
    }

.sidebar-divider[b-citdlkuhdk] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin: 15px 0 10px 5px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #ffffff;
}

.docx-link[b-citdlkuhdk] {
    background-color: transparent;
    border-color: transparent;
    color: #6c757d;
    padding: 4px 8px !important;
}

    .docx-link:hover[b-citdlkuhdk] {
        background-color: #f1f3f5;
        color: #0d6efd;
    }

    .docx-link i[b-citdlkuhdk] {
        color: #2b579a; /* Цвет Word */
    }

.nav-link-custom.disabled[b-citdlkuhdk] {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(1);
    box-shadow: none;
    background: #e2e8f0;
}


/* --- Панель быстрых кнопок-плиток --- */
.action-toolbar[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
}

.btn-action[b-citdlkuhdk], .btn-action-secondary[b-citdlkuhdk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    height: 100%;
    min-height: 85px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    gap: 8px;
}

    .btn-action i[b-citdlkuhdk], .btn-action-secondary i[b-citdlkuhdk] {
        font-size: 1.4rem;
    }

    .btn-action span[b-citdlkuhdk], .btn-action-secondary span[b-citdlkuhdk] {
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
    }

/* Выпуклая синяя кнопка */
.btn-action[b-citdlkuhdk] {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.12), inset 0 1px 1px #ffffff;
    text-shadow: 0 1px 0 #ffffff;
}

    .btn-action:hover[b-citdlkuhdk] {
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        color: #ffffff;
        border-color: #1e40af;
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    }

    .btn-action:active[b-citdlkuhdk] {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

/* Выпуклая серая кнопка */
.btn-action-secondary[b-citdlkuhdk] {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff;
    text-shadow: 0 1px 0 #ffffff;
}

    .btn-action-secondary:hover:not(:disabled)[b-citdlkuhdk] {
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
        color: #0f172a;
        transform: translateY(-3px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12);
    }

    .btn-action-secondary:disabled[b-citdlkuhdk] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
        background: #e2e8f0;
    }


/* --- Дополнительные карточки профиля и статусы --- */
.profile-card[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 16px;
    box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.profile-body[b-citdlkuhdk] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Вдавленная область статистики */
.stats-section[b-citdlkuhdk] {
    background: #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    box-shadow: inset 2px 3px 6px rgba(0, 0, 0, 0.12), inset -1px -1px 3px rgba(255, 255, 255, 0.7);
    border: 1px solid #cbd5e1;
}

.stats-label[b-citdlkuhdk] {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #475569;
    margin-bottom: 8px;
    font-weight: 700;
    text-shadow: 0 1px 0 #ffffff;
}

.stats-content[b-citdlkuhdk] {
    --max-height: 100px;
    overflow-y: auto;
    font-size: 0.95rem;
    color: #0f172a;
    white-space: pre-line;
}

/* Объемные статусы (Плашки) */
.status-badge[b-citdlkuhdk] {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.status-icon[b-citdlkuhdk] {
    font-size: 1.5rem;
    margin-right: 15px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.status-text[b-citdlkuhdk] {
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 600;
}

/* Темы статусов */
.waiting[b-citdlkuhdk] {
    background: linear-gradient(180deg, #fffde7 0%, #fff59d 100%);
    border-color: #fbc02d;
    color: #f57f17;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.approved[b-citdlkuhdk] {
    background: linear-gradient(180deg, #e3f2fd 0%, #90caf9 100%);
    border-color: #42a5f5;
    color: #1565c0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hired[b-citdlkuhdk] {
    background: linear-gradient(180deg, #e8f5e9 0%, #a5d6a7 100%);
    border-color: #66bb6a;
    color: #2e7d32;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.denied[b-citdlkuhdk], .fired[b-citdlkuhdk] {
    background: linear-gradient(180deg, #ffebee 0%, #ef9a9a 100%);
    border-color: #ef5350;
    color: #c62828;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}


/* --- Инфо-карточки и списки записок --- */
.info-card[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 16px;
    box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    height: 350px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.scroll-area[b-citdlkuhdk] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.request-item[b-citdlkuhdk] {
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
    border-left: 5px solid #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .request-item:hover[b-citdlkuhdk] {
        transform: translateX(4px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .request-item.accepted[b-citdlkuhdk] {
        border-left-color: #22c55e;
        background: linear-gradient(180deg, #f0fff4 0%, #dcfce7 100%);
        color: #14532d;
    }

    .request-item.pending[b-citdlkuhdk] {
        border-left-color: #64748b;
    }

.clickable-row[b-citdlkuhdk] {
    cursor: pointer;
    transition: background 0.2s;
}

    .clickable-row:hover[b-citdlkuhdk] {
        background-color: #e0f2fe !important;
    }

.form-check-input[b-citdlkuhdk] {
    cursor: pointer;
    width: 1.1rem;
    height: 1.1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sticky-top[b-citdlkuhdk] {
    z-index: 2;
    background: #f1f5f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.form-select-sm[b-citdlkuhdk] {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}


/* --- Блок уведомлений и ввода --- */
.notification-card[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 16px;
    box-shadow: 8px 12px 24px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
    border: 1px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    height: 350px;
    overflow: hidden;
    font-family: 'Inter', -apple-system, sans-serif;
}

.card-header-custom[b-citdlkuhdk] {
    padding: 16px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #cbd5e1;
    color: #0f172a;
    box-shadow: 0 1px 0 #ffffff;
}

    .card-header-custom h5[b-citdlkuhdk] {
        font-size: 1rem;
        font-weight: 700;
        text-shadow: 0 1px 0 #ffffff;
    }

.card-body-custom[b-citdlkuhdk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}

.notification-list[b-citdlkuhdk] {
    flex: 1;
    overflow-y: auto;
    margin-right: -5px;
    padding-right: 5px;
}

.notification-item[b-citdlkuhdk] {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .notification-item:hover[b-citdlkuhdk] {
        background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .notification-item.unread[b-citdlkuhdk] {
        background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
        border-left: 5px solid #f59e0b;
    }

.status-icon[b-citdlkuhdk] {
    margin-right: 12px;
    margin-top: 2px;
}

.notification-content[b-citdlkuhdk] {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.4;
}

.card-footer-custom[b-citdlkuhdk] {
    padding: 15px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    border-top: 1px solid #94a3b8;
}

/* Поле ввода с эффектом вдавленности */
.input-group .form-control[b-citdlkuhdk] {
    border-radius: 10px 0 0 10px;
    border: 1px solid #94a3b8;
    resize: none;
    font-size: 0.9rem;
    background: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

    .input-group .form-control:focus[b-citdlkuhdk] {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 5px rgba(13, 110, 253, 0.5);
        border-color: #2563eb;
    }

.input-group .btn[b-citdlkuhdk] {
    z-index: 1;
}

/* Выпуклая кнопка отправки */
.btn-send[b-citdlkuhdk] {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-radius: 0 10px 10px 0;
    padding: 0 20px;
    border: 1px solid #1e40af;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
}

    .btn-send:hover[b-citdlkuhdk] {
        background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
        color: white;
    }

    .btn-send:active[b-citdlkuhdk] {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }

/* Объёмный скроллбар */
.custom-scrollbar[b-citdlkuhdk]::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar[b-citdlkuhdk]::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.custom-scrollbar[b-citdlkuhdk]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 10px;
    border: 1px solid #cbd5e1;
}

.section[b-citdlkuhdk] {
    margin: 0px;
    padding: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.insection[b-citdlkuhdk] {
    margin: 0px;
    padding: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}


/* --- Сканер QR кодов (Физические кнопки и затворы) --- */
.scan-footer[b-citdlkuhdk] {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    padding: 10px 0;
    z-index: 999;
}

.scan-btn[b-citdlkuhdk] {
    border-radius: 50%;
    width: 55px;
    height: 55px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ffffff 0%, #cbd5e1 100%);
    border: 2px solid #94a3b8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 2px 3px #ffffff;
    color: #0f172a;
}

    .scan-btn:active[b-citdlkuhdk] {
        transform: scale(0.95);
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
    }

.camera-container[b-citdlkuhdk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1000;
}

#qr-video[b-citdlkuhdk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay[b-citdlkuhdk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
}

.scanner-frame[b-citdlkuhdk] {
    width: 250px;
    height: 250px;
    border: 4px solid #38bdf8;
    border-radius: 24px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), inset 0 0 15px rgba(56, 189, 248, 0.4);
}

.back-btn[b-citdlkuhdk], .flash-btn[b-citdlkuhdk] {
    background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 100%);
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px #ffffff;
    color: #0f172a;
}

.back-btn[b-citdlkuhdk] {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 42px;
    height: 42px;
}

.flash-btn[b-citdlkuhdk] {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
}

    .back-btn:active[b-citdlkuhdk], .flash-btn:active[b-citdlkuhdk] {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

.bottom-buttons[b-citdlkuhdk] {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
}

    .bottom-buttons .btn[b-citdlkuhdk] {
        background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
        padding: 10px 20px;
        border-radius: 12px;
        border: 1px solid #cbd5e1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 #ffffff;
        font-weight: 600;
        color: #0f172a;
    }


/* --- Контейнер профиля и фоновые утилиты --- */
.profile-container[b-citdlkuhdk] {
    padding: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.1), inset 0 1px 2px #ffffff;
    max-width: 900px;
    margin: 0 auto;
}

.profile-title[b-citdlkuhdk] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1b6495;
    text-shadow: 0 1px 0 #ffffff;
}

.profile-status[b-citdlkuhdk] {
    font-size: 1.25rem;
    color: #c14f2b;
    margin-top: 10px;
    text-shadow: 0 1px 0 #ffffff;
}

.status-message[b-citdlkuhdk] {
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 1.1rem;
    --color: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Цветовые подложки с объемом */
.bg-gray[b-citdlkuhdk] {
    background: linear-gradient(180deg, #78909C 0%, #455A64 100%);
    color: #fff;
}

.bg-orange[b-citdlkuhdk] {
    background: linear-gradient(180deg, #A15842 0%, #7B3D2B 100%);
    color: #fff;
}

.bg-turquoise[b-citdlkuhdk] {
    background: linear-gradient(180deg, #486E6B 0%, #2E4947 100%);
    color: #fff;
}

.bg-braun[b-citdlkuhdk] {
    background: linear-gradient(180deg, #8D6E63 0%, #5D4037 100%);
    color: #fff;
}

.bg-yellow[b-citdlkuhdk] {
    background: linear-gradient(180deg, #FBC02D 0%, #F57F17 100%);
    color: #fff;
}

.bg-blue[b-citdlkuhdk] {
    background: linear-gradient(180deg, #42A5F5 0%, #1E88E5 100%);
    color: #fff;
}

.bg-green[b-citdlkuhdk] {
    background: linear-gradient(180deg, #66BB6A 0%, #388E3C 100%);
    color: #fff;
}

.bg-red[b-citdlkuhdk] {
    background: linear-gradient(180deg, #EF5350 0%, #E53935 100%);
    color: #fff;
}

h5[b-citdlkuhdk], h2[b-citdlkuhdk] {
    color: #1d4ed8;
    text-shadow: 0 1px 0 #ffffff;
}

h1[b-citdlkuhdk] {
    text-align: center;
    font-size: 2.5em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

h2[b-citdlkuhdk] {
    margin-top: 30px;
    color: #1d4ed8;
}

p[b-citdlkuhdk] {
    margin: 10px 0;
}

ul[b-citdlkuhdk] {
    margin: 10px 0 20px 20px;
    list-style: disc;
}

.highlight[b-citdlkuhdk] {
    color: #dc2626;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.icon[b-citdlkuhdk] {
    font-size: 1.2em;
    margin-right: 5px;
    filter: drop-shadow(0 1px 0 #ffffff);
}

.link[b-citdlkuhdk] {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 1px 0 #ffffff;
}

    .link:hover[b-citdlkuhdk] {
        text-decoration: underline;
    }


/* --- Предупреждение об истечении сессии --- */
.session-expired[b-citdlkuhdk] {
    text-align: center;
    padding: 25px;
    border: 1px solid #f87171;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #fef2f2 100%);
    box-shadow: 8px 12px 20px rgba(239, 68, 68, 0.15), inset 0 1px 2px #ffffff;
    max-width: 400px;
    margin: 50px auto;
}

    .session-expired .icon[b-citdlkuhdk] {
        font-size: 48px;
        color: #ef4444;
        margin-bottom: 10px;
        filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
    }

@media (max-width: 640px) {
    table tr[b-citdlkuhdk] {
        margin-bottom: 0px;
        border: 0px solid #ccc;
    }

    table td[b-citdlkuhdk] {
        display: block;
    }

    .section[b-citdlkuhdk] {
        padding: 4px;
    }

    .insection[b-citdlkuhdk] {
        padding: 4px;
    }
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* ==========================================================================
   СКЕВОМОРФНЫЙ ГЛОБАЛЬНЫЙ СТИЛЬ И ИНТЕРФЕЙСНЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */

/* 1. Глобальный фикс и фоновая текстура консоли */
body[b-05114l0rgi] {
    overflow: hidden;
    background-color: #0f172a;
    /* Текстура легкого матового металла/пластика */
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 75%), linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    background-attachment: fixed;
}

/* 2. Объемные скевоморфные плашки Bootstrap 5.3 (Badge / Subtle Containers) */
.bg-body-tertiary[b-05114l0rgi] {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    border: 1px solid #0f172a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Синяя индикаторная плашка */
.bg-primary-subtle[b-05114l0rgi] {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #1e3a8a !important;
    border: 1px solid #93c5fd !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #60a5fa !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Голубая индикаторная плашка */
.bg-info-subtle[b-05114l0rgi] {
    background: linear-gradient(180deg, #cff4fc 0%, #a5f3fc 100%) !important;
    color: #164e63 !important;
    border: 1px solid #67e8f9 !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #22d3ee !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Зеленая индикаторная плашка */
.bg-success-subtle[b-05114l0rgi] {
    background: linear-gradient(180deg, #d1e7dd 0%, #a7f3d0 100%) !important;
    color: #064e3b !important;
    border: 1px solid #6ee7b7 !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #34d399 !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Красная индикаторная плашка */
.bg-danger-subtle[b-05114l0rgi] {
    background: linear-gradient(180deg, #f8d7da 0%, #fecdd3 100%) !important;
    color: #881337 !important;
    border: 1px solid #fda4af !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #fb7185 !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.border-primary-subtle[b-05114l0rgi] {
    border-color: #60a5fa !important;
}

.border-info-subtle[b-05114l0rgi] {
    border-color: #38bdf8 !important;
}

.rounded-4[b-05114l0rgi] {
    border-radius: 1rem !important;
}

/* 3. Шрифты и таблицы (Приборная панель управления) */

/* Цифровое табло / Моноширинный индикатор */
.font-numeric[b-05114l0rgi] {
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f8fafc;
}

/* Металлическая шапка таблицы */
.custom-table th[b-05114l0rgi] {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #334155 !important;
    text-shadow: 0 1px 0 #ffffff;
    border-bottom: 2px solid #cbd5e1 !important;
    border-top: 1px solid #ffffff !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 10px 14px;
}

/* Физические строки таблицы (Плашки-рейки) */
.interactive-row[b-05114l0rgi] {
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

    /* Подсветка строки при наведении (Всплытие пластины) */
    .interactive-row:hover[b-05114l0rgi] {
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
        box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(0, 0, 0, 0.12) !important;
        transform: translateY(-1px);
    }

    /* Клик по строке (Нажатие на клавишу) */
    .interactive-row:active[b-05114l0rgi] {
        background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(1px);
    }

/* 4. Скевоморфные карточки KPI (Модули приборов) */
.kpi-card[b-05114l0rgi] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
    border-top-color: #ffffff;
    border-bottom-color: #94a3b8;
    border-radius: 14px;
    /* Двойной фасетчатый объем */
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 4px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* При наведении карточка-модуль приподнимается */
    .kpi-card:hover[b-05114l0rgi] {
        transform: translateY(-4px);
        box-shadow: inset 0 1px 0 #ffffff, 0 14px 28px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.12) !important;
    }

/* 5. Механический переключатель вкладок (.tab-switch) */

/* Вдавленный корытообразный канал-основание */
.tab-switch[b-05114l0rgi] {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid #334155;
    border-top-color: #020617;
    border-bottom-color: #475569;
    display: flex;
    gap: 15px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1);
}

    /* Выключенная кнопка-вкладка (Утопленная плашка) */
    .tab-switch .btn[b-05114l0rgi] {
        border-radius: 8px;
        color: #94a3b8;
        font-weight: 600;
        font-size: 0.88rem;
        border: 1px solid transparent;
        padding: 6px 16px;
        background: transparent;
        transition: all 0.15s ease;
    }

        .tab-switch .btn:hover:not(.active)[b-05114l0rgi] {
            color: #f8fafc;
            background: rgba(255, 255, 255, 0.05);
        }

        /* Активная кнопка-вкладка (Выпуклая клавиша с подсветкой) */
        .tab-switch .btn.active[b-05114l0rgi] {
            background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
            color: #0f172a !important;
            font-weight: 700;
            border: 1px solid #94a3b8 !important;
            border-top-color: #ffffff !important;
            border-bottom-color: #64748b !important;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
        }

/* 6. Скевоморфный скроллбар (Вдавленный трек + объемный ползунок) */
.custom-scrollbar[b-05114l0rgi]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Желоб скроллбара (Вдавленный канатик) */
.custom-scrollbar[b-05114l0rgi]::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid #334155;
}

/* Ползунок (Объемная пластиковая/металлическая ручка) */
.custom-scrollbar[b-05114l0rgi]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #64748b 0%, #334155 100%);
    border-radius: 10px;
    border: 1px solid #475569;
    border-top-color: #94a3b8;
    border-bottom-color: #1e293b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

    .custom-scrollbar[b-05114l0rgi]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
        border-top-color: #cbd5e1;
    }

    .custom-scrollbar[b-05114l0rgi]::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        border-color: #1e3a8a;
        border-top-color: #60a5fa;
    }
/* /Components/Pages/StaticPages/Home.razor.rz.scp.css */
/* ==========================================================================
   СКЕВОМОРФНАЯ СПРАВОЧНАЯ ПАНЕЛЬ И МОДУЛИ КОММУНИКАЦИИ
   ========================================================================== */

/* Общий фон страницы справки */
.help-page[b-x6k3j5lqhv] {
    background-color: #0f172a !important;
}

/* Основной контейнер-шасси */
.container[b-x6k3j5lqhv] {
    max-width: 1000px;
    margin: 20px auto;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #334155;
    border-top-color: #475569;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

/* 1. Блоки секций справки (.help-section) */
.help-section[b-x6k3j5lqhv] {
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%) !important;
    border-radius: 16px !important;
    padding: 30px;
    margin-bottom: 30px;
    /* Металлическая фаска и двойная граница */
    border: 1px solid #0f172a !important;
    border-top: 1px solid #475569 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

    .help-section:hover[b-x6k3j5lqhv] {
        transform: translateY(-3px) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 28px rgba(0, 0, 0, 0.5) !important;
    }

.section-header[b-x6k3j5lqhv] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

/* Выпуклый номерной шильдик */
.num-badge[b-x6k3j5lqhv] {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1.2rem;
    color: white !important;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: 1px solid #1e40af;
    border-top-color: #93c5fd;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Интерактивный Степпер (Stepper) */
.stepper-wrapper[b-x6k3j5lqhv] {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Выдавленный металлический рельс/паз */
.stepper-line[b-x6k3j5lqhv] {
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    height: 6px;
    background: #090d16 !important;
    border-bottom: 1px solid #334155;
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9) !important;
    z-index: 0;
}

.step-link[b-x6k3j5lqhv] {
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: 25%;
    text-decoration: none !important;
}

/* Объемные ручки/круги шагов */
.step-circle[b-x6k3j5lqhv] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-weight: bold;
    color: #e2e8f0 !important;
    background: radial-gradient(circle at 35% 35%, #475569 0%, #1e293b 100%) !important;
    border: 1px solid #0f172a;
    border-top-color: #64748b;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s ease !important;
}

.step-link:hover .step-circle[b-x6k3j5lqhv] {
    transform: scale(1.15) translateY(-2px);
    background: radial-gradient(circle at 35% 35%, #60a5fa 0%, #2563eb 100%) !important;
    border-color: #1e3a8a;
    border-top-color: #bfdbfe;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 12px rgba(37, 99, 235, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

.step-label[b-x6k3j5lqhv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8 !important;
}

/* 3. Подсвеченные бейджи статусов (Glass Light Badges) */
.badge-status[b-x6k3j5lqhv] {
    padding: 3px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.82rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.bg-success-light[b-x6k3j5lqhv] {
    background: linear-gradient(180deg, #065f46 0%, #047857 100%) !important;
    color: #a7f3d0 !important;
    border: 1px solid #022c22;
    border-top-color: #34d399;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(16, 185, 129, 0.3) !important;
}

.bg-warning-light[b-x6k3j5lqhv] {
    background: linear-gradient(180deg, #92400e 0%, #b45309 100%) !important;
    color: #fde68a !important;
    border: 1px solid #451a03;
    border-top-color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(245, 158, 11, 0.3) !important;
}

.bg-info-light[b-x6k3j5lqhv] {
    background: linear-gradient(180deg, #075985 0%, #0369a1 100%) !important;
    color: #bae6fd !important;
    border: 1px solid #0c4a6e;
    border-top-color: #38bdf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

.bg-primary-light[b-x6k3j5lqhv] {
    background: linear-gradient(180deg, #3730a3 0%, #4338ca 100%) !important;
    color: #c7d2fe !important;
    border: 1px solid #1e1b4b;
    border-top-color: #818cf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(99, 102, 241, 0.3) !important;
}

/* 4. Списки с объемными галочками и цифрами */
.simple-list[b-x6k3j5lqhv] {
    list-style: none;
    padding: 0;
}

    .simple-list li[b-x6k3j5lqhv] {
        position: relative;
        padding-left: 28px;
        margin-bottom: 10px;
        color: #cbd5e1 !important;
    }

        .simple-list li[b-x6k3j5lqhv]::before {
            content: "✔";
            position: absolute;
            left: 0;
            color: #34d399 !important;
            font-weight: bold;
            text-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
        }

.step-num-small[b-x6k3j5lqhv] {
    width: 24px;
    height: 24px;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid #1e3a8a;
    border-top-color: #93c5fd;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   СКЕВОМОРФНЫЙ ДВУХКОЛОНОЧНЫЙ МОДУЛЬ «10 ПРАВИЛ ОБЩЕНИЯ»
   ========================================================================== */

/* Главный корпус панели */
.comms-wrapper[b-x6k3j5lqhv] {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    border: 1px solid #334155 !important;
    border-top-color: #475569 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 30px;
}

/* Шапка блока */
.comms-header[b-x6k3j5lqhv] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #334155 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.comms-icon-box[b-x6k3j5lqhv] {
    width: 56px;
    height: 56px;
    background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%) !important;
    color: #818cf8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 26px;
    border: 1px solid #4338ca;
    border-top-color: #a5b4fc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 15px rgba(99, 102, 241, 0.35) !important;
    text-shadow: 0 0 8px rgba(129, 140, 248, 0.6);
}

.comms-title h2[b-x6k3j5lqhv] {
    font-weight: 800;
    margin: 0;
    color: #f8fafc !important;
    font-size: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.comms-title p[b-x6k3j5lqhv] {
    margin: 4px 0 0;
    color: #94a3b8 !important;
    font-size: 0.9rem;
}

/* --- СЕТКА И ДВЕ КОЛОНКИ (GRID & COLUMNS) --- */

.comms-grid[b-x6k3j5lqhv] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Чёткое разделение 50% / 50% */
    gap: 24px !important; /* Расстояние между правой и левой панелью */
    align-items: start;
}

/* Вдавленный отсек/палуба для каждой из двух колонок */
.comms-column[b-x6k3j5lqhv] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.4) !important;
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid #1e293b !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Отдельная плашка-кассета правила (.comms-item) */
.comms-item[b-x6k3j5lqhv] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
    /* Объемная выпуклая карточка */
    background: linear-gradient(180deg, #1e293b 0%, #131c2e 100%) !important;
    border-radius: 12px !important;
    border: 1px solid #0f172a !important;
    border-top-color: #334155 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

    .comms-item:hover[b-x6k3j5lqhv] {
        transform: translateY(-2px) !important;
        background: linear-gradient(180deg, #283548 0%, #1a2436 100%) !important;
        border-top-color: #475569 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 18px rgba(0, 0, 0, 0.45) !important;
    }

/* Цифровой дисплей/номер правила */
.comms-num[b-x6k3j5lqhv] {
    font-family: 'JetBrains Mono', monospace, sans-serif;
    background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%) !important;
    color: #a5b4fc !important;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    margin-top: 2px;
    border: 1px solid #4338ca;
    border-top-color: #818cf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 0 6px rgba(129, 140, 248, 0.5);
}

/* Текстовые метки */
.comms-text label[b-x6k3j5lqhv] {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #94a3b8 !important;
    margin-bottom: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.comms-text p[b-x6k3j5lqhv] {
    margin: 0;
    font-size: 13.5px;
    color: #e2e8f0 !important;
    line-height: 1.45;
    font-weight: 500;
}

/* --- НЕОНОВЫЕ ИНДИКАТОРЫ СИТУАЦИЙ (ПРАВАЯ КОЛОНКА) --- */

/* Предупреждение / Спор (Warning) */
.comms-item.warning[b-x6k3j5lqhv] {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(180deg, #261f15 0%, #17120a 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), -3px 0 10px rgba(245, 158, 11, 0.25), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

    .comms-item.warning .comms-num[b-x6k3j5lqhv] {
        background: linear-gradient(180deg, #78350f 0%, #451a03 100%) !important;
        color: #fde68a !important;
        border-color: #b45309;
        border-top-color: #fef08a;
        text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
    }

/* Финансы / Деньги (Accent) */
.comms-item.accent[b-x6k3j5lqhv] {
    border-left: 4px solid #6366f1 !important;
    background: linear-gradient(180deg, #1b1d3a 0%, #101124 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), -3px 0 10px rgba(99, 102, 241, 0.25), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Грубость / Тревога (Danger) */
.comms-item.danger[b-x6k3j5lqhv] {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(180deg, #2b1717 0%, #1a0a0a 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), -3px 0 10px rgba(239, 68, 68, 0.25), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

    .comms-item.danger .comms-num[b-x6k3j5lqhv] {
        background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important;
        color: #fecdd3 !important;
        border-color: #b91c1c;
        border-top-color: #fca5a5;
        text-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
    }

/* Успешный финал (Success) */
.comms-item.success[b-x6k3j5lqhv] {
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(180deg, #122820 0%, #0a1712 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), -3px 0 10px rgba(16, 185, 129, 0.25), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

    .comms-item.success .comms-num[b-x6k3j5lqhv] {
        background: linear-gradient(180deg, #065f46 0%, #022c22 100%) !important;
        color: #a7f3d0 !important;
        border-color: #047857;
        border-top-color: #6ee7b7;
        text-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
    }

/* Адаптивность для мобильных экранов */
@media (max-width: 992px) {
    .comms-grid[b-x6k3j5lqhv] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* 6. Общие секции, заголовки и изображения */
h1[b-x6k3j5lqhv], h2[b-x6k3j5lqhv], h3[b-x6k3j5lqhv] {
    color: #f8fafc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.section[b-x6k3j5lqhv] {
    margin-top: 30px;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, #172033 0%, #0f172a 100%) !important;
    border: 1px solid #334155;
    border-top-color: #020617;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.features-list li[b-x6k3j5lqhv],
.details-list li[b-x6k3j5lqhv],
.earnings-list li[b-x6k3j5lqhv],
.benefits-list li[b-x6k3j5lqhv] {
    padding: 12px;
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%) !important;
    margin-bottom: 8px;
    border-radius: 8px;
    color: #e2e8f0 !important;
    border: 1px solid #0f172a;
    border-top-color: #334155;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.highlight[b-x6k3j5lqhv] {
    font-weight: bold;
    color: #38bdf8 !important;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.img-thumbnail[b-x6k3j5lqhv] {
    max-width: 250px;
    border-radius: 12px;
    border: 2px solid #334155 !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6) !important;
}
/* /Components/Pages/StaticPages/InstructionsPoint.razor.rz.scp.css */
.manual-container[b-hed47yqaq8] {
    background-color: #f4f7f9;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Системные карточки */
.manual-card[b-hed47yqaq8] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px; /* Менее закругленные углы для строгости */
    padding: 24px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.card-num[b-hed47yqaq8] {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #607d8b;
    color: white;
    font-weight: bold;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Список процессов */
.process-list[b-hed47yqaq8] {
    padding-left: 1.2rem;
    counter-reset: step;
    list-style: none;
}

    .process-list li[b-hed47yqaq8] {
        counter-increment: step;
        position: relative;
        margin-bottom: 1.2rem;
        font-size: 0.95rem;
    }

        .process-list li[b-hed47yqaq8]::before {
            content: counter(step);
            position: absolute;
            left: -1.8rem;
            top: 2px;
            width: 20px;
            height: 20px;
            background: #eceff1;
            color: #455a64;
            border-radius: 4px;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

/* Таймлайн регистрации */
.t-step[b-hed47yqaq8] {
    border-left: 2px solid #cfd8dc;
    padding-left: 20px;
    padding-bottom: 15px;
    position: relative;
}

    .t-step[b-hed47yqaq8]::after {
        content: "";
        position: absolute;
        left: -7px;
        top: 0;
        width: 12px;
        height: 12px;
        background: #607d8b;
        border-radius: 50%;
    }

    .t-step h6[b-hed47yqaq8] {
        font-weight: 700;
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .t-step p[b-hed47yqaq8] {
        font-size: 0.85rem;
        color: #546e7a;
    }

/* Акценты */
.alert-indigo[b-hed47yqaq8] {
    background-color: #e8eaf6;
    border-left: 4px solid #3f51b5;
    color: #283593;
}

.highlight-gold[b-hed47yqaq8] {
    border-top: 4px solid #ffc107;
}

@media (min-width: 768px) {
    .border-end-md[b-hed47yqaq8] {
        border-right: 1px solid #edf2f7;
    }
}
/* /Components/Pages/StaticPages/InstructionsStock.razor.rz.scp.css */
/* Переменные для удобства поддержки как в коде */
:root[b-2rf19ozoge] {
    --mypost-primary: #2563eb;
    --mypost-success: #16a34a;
    --mypost-warning: #ca8a04;
    --mypost-danger: #dc2626;
    --mypost-dark: #1e293b;
    --mypost-bg-light: #f8fafc;
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Контейнер инструкции */
.manual-container[b-2rf19ozoge] {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--mypost-dark);
    line-height: 1.6;
}

/* Карточки-модули */
.manual-card[b-2rf19ozoge] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .manual-card:hover[b-2rf19ozoge] {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        border-color: var(--mypost-primary);
    }

/* Нумерация шагов (как индексы в массиве) */
.card-num[b-2rf19ozoge] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--mypost-primary);
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Заголовки */
.manual-header h1[b-2rf19ozoge] {
    letter-spacing: -0.025em;
    color: var(--mypost-dark);
}

/* Стили для Timeline (Процессы) */
.timeline-steps[b-2rf19ozoge] {
    border-left: 2px solid #e2e8f0;
    padding-left: 1.5rem;
}

.t-step[b-2rf19ozoge] {
    position: relative;
    padding-bottom: 1.5rem;
}

    .t-step[b-2rf19ozoge]::before {
        content: '';
        position: absolute;
        left: calc(-1.5rem - 7px);
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--mypost-primary);
        border: 2px solid white;
    }

    .t-step h6[b-2rf19ozoge] {
        font-weight: 700;
        color: var(--mypost-primary);
        margin-bottom: 0.25rem;
    }

/* Золотые правила (Highlight) */
.highlight-gold[b-2rf19ozoge] {
    background: linear-gradient(135deg, #fffcf0 0%, #fff9db 100%);
    border: 1px solid #fab005 !important;
}

/* Список процессов */
.process-list[b-2rf19ozoge] {
    padding-left: 1.2rem;
}

    .process-list li[b-2rf19ozoge] {
        margin-bottom: 0.75rem;
        position: relative;
    }

        .process-list li[b-2rf19ozoge]::marker {
            color: var(--mypost-primary);
            font-weight: bold;
        }

/* Бейджи и алерты */
.alert-indigo[b-2rf19ozoge] {
    background-color: #f0f5ff;
    border-left: 4px solid var(--mypost-primary);
    color: #1e3a8a;
}

/* Адаптивность для границ */
.border-start-md[b-2rf19ozoge] {
    border-left: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .border-start-md[b-2rf19ozoge] {
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding-top: 1.5rem;
        margin-top: 1rem;
    }
}

/* Утилиты для текста */
.extra-small[b-2rf19ozoge] {
    font-size: 0.85rem;
    line-height: 1.4;
}

.text-uppercase-spaced[b-2rf19ozoge] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}
/* /Components/Pages/StaticPages/LogisticsCycle.razor.rz.scp.css */
/* ==========================================================================
   СKEВОМОРФНЫЙ СТИЛЬ (SKEUOMORPHIC UI)
   ========================================================================== */

.logistics-header h3[b-gsvacka73z] {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    color: #1e293b;
    /* Эффект выдавленного текста (Letterpress) */
    text-shadow: 0 1px 1px #ffffff, 0 -1px 1px rgba(0, 0, 0, 0.2);
}

    .logistics-header h3[b-gsvacka73z]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        height: 5px;
        /* Выпуклая полоска-индикатор */
        background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
        border-radius: 3px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    }

/* Главная подложка-панель */
.logistics-circle-container[b-gsvacka73z] {
    padding: 60px 20px;
    /* Выпуклая пластиковая/металлическая плита */
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 30px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #cbd5e1;
    box-shadow: 15px 15px 30px #d1d5db, -15px -15px 30px #ffffff, inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Текстуры фонов с эффектом перфорации/вдавленности */
.mosaic-geo[b-gsvacka73z] {
    background: linear-gradient(135deg, #e2e8f0 25%, transparent 25%) -50px 0, linear-gradient(225deg, #e2e8f0 25%, transparent 25%) -50px 0, linear-gradient(315deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, #e2e8f0 25%, transparent 25%);
    background-size: 100px 100px;
    background-color: #f8fafc;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mosaic-dots[b-gsvacka73z] {
    background-color: #f8fafc;
    background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mosaic-grid[b-gsvacka73z] {
    background-color: #f1f5f9;
    background-image: linear-gradient(#cbd5e1 1px, transparent 1px), linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Основной эллипс — выгравированный в панели желоб (трек) */
.logistics-orbit[b-gsvacka73z] {
    position: relative;
    width: 600px;
    height: 400px;
    border: 3px solid #b2cceb;
    border-radius: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Внутренняя тень создает эффект канавки */
    box-shadow: inset 2px 3px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.9), 0 1px 0 #ffffff;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(226, 232, 240, 0.2) 100%);
}

/* Мосты / Соединительные линии (Вдавленные проводники) */
.bridge-partner[b-gsvacka73z] {
    position: absolute;
    top: 0;
    width: 70%;
    height: 4px;
    background: repeating-linear-gradient(to right, #3F51B5 0, #3F51B5 10px, transparent 10px, transparent 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    filter: drop-shadow(0 1px 0 #ffffff);
}

    .bridge-partner span[b-gsvacka73z] {
        background: linear-gradient(180deg, #5c6bc0 0%, #3f51b5 100%);
        color: white;
        padding: 5px 14px;
        border: 1px solid #303f9f;
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: bold;
        white-space: nowrap;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    }

.dev-bridge[b-gsvacka73z] {
    position: absolute;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(to right, #4482cd 0, #4482cd 10px, transparent 10px, transparent 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    filter: drop-shadow(0 1px 0 #ffffff);
}

    .dev-bridge span[b-gsvacka73z] {
        background: linear-gradient(180deg, #3b82f6 0%, #1e7ddf 100%);
        color: #ffffff;
        padding: 5px 14px;
        border: 1px solid #1d4ed8;
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: bold;
        white-space: nowrap;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    }

.bridge[b-gsvacka73z] {
    position: absolute;
    top: 392px;
    width: 70%;
    height: 4px;
    background: repeating-linear-gradient(to right, #94a3b8 0, #94a3b8 10px, transparent 10px, transparent 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    filter: drop-shadow(0 1px 0 #ffffff);
}

    .bridge span[b-gsvacka73z] {
        width: auto;
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
        color: #64748b;
        padding: 5px 14px;
        border: 1px solid #cbd5e1;
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: bold;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 #ffffff;
        text-shadow: 0 1px 0 #ffffff;
    }

/* Общие стили узлов */
.orbit-node[b-gsvacka73z] {
    position: absolute;
    z-index: 1;
}

/* Объемные 3D-карточки (выпуклые линзы / физические шайбы) */
.node-box[b-gsvacka73z] {
    background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    padding: 15px;
    border-radius: 50%;
    height: 225px;
    width: 225px;
    display: flex;
    text-align: center;
    /* Составная реалистичная тень: внешняя падающая + внутренние блики */
    box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .node-box:hover[b-gsvacka73z] {
        transform: scale(1.06) translateY(-2px);
        box-shadow: 12px 18px 25px rgba(0, 0, 0, 0.2), -4px -4px 15px rgba(255, 255, 255, 1), inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(99, 102, 241, 0.2);
        border-color: #818cf8;
    }

    .node-box label[b-gsvacka73z] {
        display: block;
        font-size: 10px;
        color: #4f46e5;
        font-weight: 800;
        text-transform: uppercase;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .node-box strong[b-gsvacka73z] {
        display: block;
        font-size: 16px;
        color: #0f172a;
        margin: 4px 0;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .node-box small[b-gsvacka73z] {
        font-size: 11px;
        color: #475569;
    }

    /* Акценты узлов с отдельными объёмными градиентами */
    .node-box.accent[b-gsvacka73z] {
        border: 2px solid #6366f1;
        background: linear-gradient(145deg, #ffffff 0%, #e0e7ff 100%);
        box-shadow: 8px 12px 20px rgba(99, 102, 241, 0.25), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -4px 6px rgba(99, 102, 241, 0.2);
    }

    .node-box.accent-head[b-gsvacka73z] {
        border: 2px solid #38bdf8;
        background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 100%);
        box-shadow: 8px 12px 20px rgba(56, 189, 248, 0.25), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -4px 6px rgba(56, 189, 248, 0.2);
    }

    .node-box.accent-post[b-gsvacka73z] {
        border: 2px solid #84cc16;
        background: linear-gradient(145deg, #ffffff 0%, #ecfccb 100%);
        box-shadow: 8px 12px 20px rgba(132, 204, 22, 0.25), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -4px 6px rgba(132, 204, 22, 0.2);
    }

/* Физическая бирка/тег */
.bag-tag[b-gsvacka73z] {
    margin-top: 8px;
    background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
    color: white;
    font-size: 11px;
    padding: 3px 15px;
    border-radius: 12px;
    display: inline-block;
    text-transform: uppercase;
    border: 1px solid #312e81;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Позиционирование по точкам компаса */
.node-center[b-gsvacka73z] {
    left: -50px;
    transform: translateX(-50%);
}

.node-top[b-gsvacka73z] {
    top: 0;
    transform: translateY(-50%);
}

.node-top-left[b-gsvacka73z] {
    top: 0;
    left: 0px;
    transform: translateY(-50%);
}

.node-left[b-gsvacka73z] {
    left: -50px;
    transform: translateX(-50%);
}

.node-bottom-left[b-gsvacka73z] {
    bottom: 0;
    left: 0px;
    transform: translateY(50%);
}

.node-top-right[b-gsvacka73z] {
    top: 0;
    right: -0px;
    transform: translateY(-50%);
}

.node-right[b-gsvacka73z] {
    right: -50px;
    transform: translateX(50%);
}

.node-bottom-right[b-gsvacka73z] {
    bottom: 0;
    right: 0px;
    transform: translateY(50%);
}

.node-bottom[b-gsvacka73z] {
    bottom: 0;
    transform: translateY(50%);
}

/* Стрелки с объемом и свечением */
.node-center[b-gsvacka73z]::after,
.node-bottom-left[b-gsvacka73z]::after,
.node-left[b-gsvacka73z]::after,
.node-top-left[b-gsvacka73z]::after,
.node-top-right[b-gsvacka73z]::after,
.node-right[b-gsvacka73z]::after {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
    text-shadow: 0 1px 0 #ffffff, 0 0 6px rgba(225, 74, 74, 0.5);
}

.node-center[b-gsvacka73z]::after {
    content: '⇢';
    position: absolute;
    top: 148%;
    left: 125%;
    font-size: 40px;
    color: #e14a4a;
    transform: rotate(0deg);
}

.node-bottom-left[b-gsvacka73z]::after {
    content: '⇢';
    position: absolute;
    top: -12%;
    left: 12%;
    font-size: 40px;
    color: #e14a4a;
    transform: rotate(-130deg);
}

.node-left[b-gsvacka73z]::after {
    content: '⇢';
    position: absolute;
    top: -5%;
    left: 82%;
    font-size: 40px;
    color: #e14a4a;
    transform: rotate(-50deg);
}

.node-top-left[b-gsvacka73z]::after {
    content: '⇢';
    position: absolute;
    top: 48%;
    left: 125%;
    font-size: 40px;
    color: #e14a4a;
    transform: rotate(0deg);
}

.node-top-right[b-gsvacka73z]::after {
    content: '⇢';
    position: absolute;
    top: 85%;
    left: 72%;
    font-size: 40px;
    color: #e14a4a;
    transform: rotate(55deg);
}

.node-right[b-gsvacka73z]::after {
    content: '⇢';
    position: absolute;
    top: 75%;
    left: 0%;
    font-size: 40px;
    color: #e14a4a;
    transform: rotate(130deg);
}

/* ==========================================================================
   АДАПТИВ (MOBILE)
   ========================================================================== */
@media (max-width: 800px) {
    .logistics-orbit[b-gsvacka73z] {
        width: 100%;
        height: auto;
        border: none;
        box-shadow: none;
        background: transparent;
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }

    .orbit-node[b-gsvacka73z] {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .node-box[b-gsvacka73z] {
        margin: 0 auto;
    }

    .dev-bridge[b-gsvacka73z] {
        position: relative;
        width: 4px;
        height: 30px;
        margin: 10px 0;
        background: repeating-linear-gradient(to bottom, #4482cd 0, #4482cd 5px, transparent 5px, transparent 10px);
    }

        .dev-bridge span[b-gsvacka73z] {
            transform: rotate(0deg);
            font-size: 9px;
            text-align: center;
        }

    .bridge-partner[b-gsvacka73z] {
        position: relative;
        width: 4px;
        height: 30px;
        margin: 10px 0;
        background: repeating-linear-gradient(to bottom, #3F51B5 0, #3F51B5 5px, transparent 5px, transparent 10px);
        top: auto;
    }

        .bridge-partner span[b-gsvacka73z] {
            font-size: 9px;
            padding: 4px 10px;
        }

    .orbit-node[b-gsvacka73z]::after {
        content: '↓' !important;
        position: absolute !important;
        bottom: -25px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 24px !important;
        color: #64748b !important;
        top: auto !important;
        filter: drop-shadow(0 1px 0 #ffffff);
    }

    .node-bottom-right[b-gsvacka73z]::after {
        display: none;
    }
}
/* /Components/Pages/StaticPages/RoleDiagram.razor.rz.scp.css */
/* ==========================================================================
   СKEВОМОРФНЫЙ СТИЛЬ (SKEUOMORPHIC UI)
   ========================================================================== */

/* Заголовок с эффектом вдавленного текста */
.logistics-header h3[b-j3fmr7da0y] {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    color: #1e293b;
    text-shadow: 0 1px 1px #ffffff, 0 -1px 1px rgba(0, 0, 0, 0.2);
}

    .logistics-header h3[b-j3fmr7da0y]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        height: 4px;
        background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    }

/* Главный контейнер-плита */
.logistics-circle-container[b-j3fmr7da0y] {
    padding: 60px 20px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 30px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #cbd5e1;
    box-shadow: 12px 12px 24px #d1d5db, -12px -12px 24px #ffffff, inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Выгравированный эллипс-путь */
.logistics-orbit[b-j3fmr7da0y] {
    position: relative;
    width: 100%;
    height: 400px;
    border: 3px solid #93c5fd;
    border-radius: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 2px 3px 6px rgba(0, 0, 0, 0.18), inset -2px -2px 4px rgba(255, 255, 255, 0.8), 0 1px 0 #ffffff;
}

/* Текстуры фонов с эффектом перфорации */
.mosaic-dots[b-j3fmr7da0y] {
    background-color: #f8fafc;
    background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mosaic-grid[b-j3fmr7da0y] {
    background-color: #f1f5f9;
    background-image: linear-gradient(#cbd5e1 1px, transparent 1px), linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Общие стили узлов */
.orbit-node[b-j3fmr7da0y] {
    position: absolute;
    z-index: 1;
}

/* Выпуклые объёмные диски узлов */
.node-box[b-j3fmr7da0y] {
    background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    padding: 15px;
    border-radius: 50%;
    height: 160px;
    width: 160px;
    display: flex;
    text-align: center;
    box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .node-box:hover[b-j3fmr7da0y] {
        transform: scale(1.06) translateY(-2px);
        border-color: #6366f1;
        box-shadow: 10px 15px 22px rgba(0, 0, 0, 0.18), -4px -4px 12px rgba(255, 255, 255, 1), inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(99, 102, 241, 0.2);
    }

    .node-box label[b-j3fmr7da0y] {
        display: block;
        font-size: 10px;
        color: #4f46e5;
        font-weight: 800;
        text-transform: uppercase;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .node-box strong[b-j3fmr7da0y] {
        display: block;
        font-size: 16px;
        color: #0f172a;
        margin: 4px 0;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .node-box small[b-j3fmr7da0y] {
        font-size: 11px;
        color: #475569;
    }

    /* Акцентные карточки (объемные градиенты) */
    .node-box.accent[b-j3fmr7da0y] {
        border: 2px solid #6366f1;
        background: linear-gradient(145deg, #ffffff 0%, #e0e7ff 100%);
        box-shadow: 6px 10px 18px rgba(99, 102, 241, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(99, 102, 241, 0.2);
    }

    .node-box.accent-courier[b-j3fmr7da0y] {
        border: 2px solid #f59e0b;
        background: linear-gradient(145deg, #ffffff 0%, #fef3c7 100%);
        box-shadow: 6px 10px 18px rgba(245, 158, 11, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(245, 158, 11, 0.2);
    }

    .node-box.accent-head[b-j3fmr7da0y] {
        border: 2px solid #38bdf8;
        background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 100%);
        box-shadow: 6px 10px 18px rgba(56, 189, 248, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(56, 189, 248, 0.2);
    }

    .node-box.accent-post[b-j3fmr7da0y] {
        border: 2px solid #84cc16;
        background: linear-gradient(145deg, #ffffff 0%, #ecfccb 100%);
        box-shadow: 6px 10px 18px rgba(132, 204, 22, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 -3px 5px rgba(132, 204, 22, 0.2);
    }

/* Объемная пластиковая бирка */
.bag-tag[b-j3fmr7da0y] {
    margin-top: 8px;
    background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
    color: white;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
    text-transform: uppercase;
    border: 1px solid #312e81;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Позиционирование узлов */
.node-curator[b-j3fmr7da0y] {
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
}

.node-ppo1[b-j3fmr7da0y] {
    top: -30px;
    left: 20%;
    transform: translateX(-50%);
}

.node-ppo2[b-j3fmr7da0y] {
    top: -30px;
    right: 2%;
    transform: translateX(-50%);
}

.node-courier1[b-j3fmr7da0y] {
    top: 150px;
    left: 20%;
    transform: translateX(-50%);
}

.node-courier2[b-j3fmr7da0y] {
    top: 150px;
    right: 2%;
    transform: translateX(-50%);
}

.node-bottom-left[b-j3fmr7da0y] {
    bottom: 0;
    left: 0px;
    transform: translateY(50%);
}

.node-bottom1[b-j3fmr7da0y] {
    bottom: 0;
    left: 25%;
    transform: translateY(50%);
}

.node-bottom2[b-j3fmr7da0y] {
    bottom: 0;
    right: 25%;
    transform: translateY(50%);
}

.node-bottom-right[b-j3fmr7da0y] {
    bottom: 0;
    right: 0px;
    transform: translateY(50%);
}

/* Базовый стиль коннектора-проводника (3D-линии) */
.connector[b-j3fmr7da0y] {
    position: absolute;
    background: linear-gradient(180deg, #b0d3ff 0%, #60a5fa 100%);
    height: 3px;
    transform-origin: left center;
    z-index: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

    /* Наконечник стрелки */
    .connector[b-j3fmr7da0y]::after {
        content: '';
        position: absolute;
        right: -2px;
        top: -4px;
        width: 0;
        height: 0;
        border-left: 9px solid #ef4444;
        border-top: 5.5px solid transparent;
        border-bottom: 5.5px solid transparent;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
    }

/* 1. От Куратора к Отделениям */
.arrow-curator-ppo1[b-j3fmr7da0y] {
    top: -50px;
    left: 50%;
    width: 170px;
    transform: rotate(160deg);
    background: linear-gradient(180deg, #818cf8 0%, #4338ca 100%);
}

.arrow-curator-ppo2[b-j3fmr7da0y] {
    top: -50px;
    left: 50%;
    width: 150px;
    transform: rotate(20deg);
    background: linear-gradient(180deg, #818cf8 0%, #4338ca 100%);
}

/* 2. От Отделения 1 вниз */
.arrow-ppo1-courier1[b-j3fmr7da0y] {
    top: 50px;
    left: 20%;
    width: 95px;
    transform: rotate(90deg);
}

.arrow-ppo1-post1[b-j3fmr7da0y] {
    top: 50px;
    left: 12%;
    width: 275px;
    transform: rotate(100deg);
}

.arrow-ppo1-post2[b-j3fmr7da0y] {
    top: 50px;
    left: 28%;
    width: 273px;
    transform: rotate(80deg);
}

/* 3. От Отделения 2 вниз */
.arrow-ppo2-courier2[b-j3fmr7da0y] {
    top: 50px;
    right: 10%;
    width: 95px;
    transform: rotate(90deg);
}

.arrow-ppo2-post1[b-j3fmr7da0y] {
    top: 50px;
    right: -4%;
    width: 270px;
    transform: rotate(99deg);
}

.arrow-ppo2-post2[b-j3fmr7da0y] {
    top: 50px;
    right: -165px;
    width: 265px;
    transform: rotate(84deg);
}

/* 4. От Курьера к Почтальонам */
.arrow-courier1-post1[b-j3fmr7da0y] {
    top: 230px;
    left: 20%;
    width: 100px;
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
    transform: rotate(120deg);
}

.arrow-courier1-post2[b-j3fmr7da0y] {
    top: 230px;
    left: 20%;
    width: 120px;
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
    transform: rotate(52deg);
}

.arrow-courier2-post1[b-j3fmr7da0y] {
    top: 230px;
    right: 9%;
    width: 110px;
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
    transform: rotate(121deg);
}

.arrow-courier2-post2[b-j3fmr7da0y] {
    top: 230px;
    right: 6%;
    width: 100px;
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
    transform: rotate(60deg);
}

/* ==========================================================================
   АДАПТИВ (MOBILE)
   ========================================================================== */
@media (max-width: 767px) {
    .logistics-orbit[b-j3fmr7da0y] {
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        flex-direction: column;
        gap: 40px;
        padding: 20px 0;
    }

    .orbit-node[b-j3fmr7da0y] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .node-box[b-j3fmr7da0y] {
        width: 90% !important;
        height: auto !important;
        border-radius: 20px !important;
        padding: 20px !important;
        /* Объемный скругленный прямоугольник */
        box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 2px 3px rgba(255, 255, 255, 1);
    }

    .connector[b-j3fmr7da0y] {
        display: none !important;
    }

    /* Объёмный стержень таймлайна */
    .orbit-node:not(:last-child)[b-j3fmr7da0y]::after {
        content: '';
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 4px;
        height: 25px;
        background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }
}
/* /Components/Pages/StaticPages/SubscriptionPayment.razor.rz.scp.css */
.extra-small[b-j42rksp6nk] {
    font-size: 0.75rem;
    line-height: 1.4;
}

.uppercase[b-j42rksp6nk] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-card[b-j42rksp6nk] {
    transition: transform 0.3s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
}

    .price-card:hover[b-j42rksp6nk] {
        transform: translateY(-10px);
    }

.color-1[b-j42rksp6nk] {
    background: #4e73df;
}

.color-2[b-j42rksp6nk] {
    background: #1cc88a;
}

.color-3[b-j42rksp6nk] {
    background: #36b9cc;
}

.color-4[b-j42rksp6nk] {
    background: #5a5c69;
}




.custom-accordion .accordion-button:not(.collapsed)[b-j42rksp6nk] {
    background-color: #f8f9fa;
    color: var(--bs-primary);
    box-shadow: none;
}

.custom-accordion .accordion-button[b-j42rksp6nk] {
    padding: 1.25rem;
    border-radius: 12px !important;
}

.custom-accordion .accordion-item[b-j42rksp6nk] {
    border: 1px solid #eee !important;
}

.summary-card[b-j42rksp6nk] {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.subscription-page[b-j42rksp6nk] {
    background-color: #fdfdfd;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Hero Section */
.hero-section[b-j42rksp6nk] {
    background: linear-gradient(135deg, #1a237e 0%, #1572a1 100%);
    border-radius: 0 0 50% 50% / 10%;
    margin-bottom: 3rem;
}

/* Cards */
.price-card[b-j42rksp6nk] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

    .price-card:hover[b-j42rksp6nk] {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }

    .price-card.featured[b-j42rksp6nk] {
        border: 2px solid #1572a1;
        transform: scale(1.05);
    }

.price-header[b-j42rksp6nk] {
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
}

    .price-header .price[b-j42rksp6nk] {
        font-size: 2rem;
        font-weight: 800;
        margin-top: 10px;
    }

        .price-header .price span[b-j42rksp6nk] {
            font-size: 0.9rem;
            opacity: 0.8;
        }

/* Цвета заголовков */
.color-1[b-j42rksp6nk] {
    background: #795548;
}
/* Коричневый */
.color-2[b-j42rksp6nk] {
    background: #1572a1;
}
/* Синий */
.color-3[b-j42rksp6nk] {
    background: #63a12b;
}
/* Зеленый */
.color-4[b-j42rksp6nk] {
    background: #c96117;
}
/* Оранжевый */

/* Features */
.feature-pills[b-j42rksp6nk] {
    list-style: none;
    padding: 0;
}

    .feature-pills li[b-j42rksp6nk] {
        background: white;
        padding: 12px 15px;
        margin-bottom: 10px;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        font-size: 0.95rem;
    }

.custom-list[b-j42rksp6nk] {
    padding: 0;
}

    .custom-list li[b-j42rksp6nk] {
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.9rem;
    }

/* Steps */
.steps-vertical[b-j42rksp6nk] {
    border-left: 2px dashed rgba(255,255,255,0.3);
    margin-left: 15px;
    padding-left: 30px;
}

.step-line[b-j42rksp6nk] {
    position: relative;
    margin-bottom: 25px;
}

.step-num[b-j42rksp6nk] {
    position: absolute;
    left: -42px;
    width: 24px;
    height: 24px;
    background: #ffc107;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Icons */
.icon-circle[b-j42rksp6nk] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
/* /Components/Pages/Tracking.razor.rz.scp.css */
/* Основная карточка результата */
.card.shadow-sm[b-6aliwx82g2] {
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
}

/* Шапка с общей информацией */
.text-success.mb-3[b-6aliwx82g2] {
    font-weight: 800;
    color: #10b981 !important; /* Более сочный зеленый */
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 25px !important;
}

.mb-4 strong[b-6aliwx82g2] {
    color: #475569;
    font-weight: 600;
}

/* Контейнер временной шкалы */
.position-relative[style*="border-left"][b-6aliwx82g2] {
    /* Переопределяем инлайновый стиль через классы */
    border-left: 2px solid #e2e8f0 !important;
    border-image: none !important;
    padding-left: 30px !important;
    margin-bottom: 0 !important;
    padding-bottom: 30px;
}

    /* Последний элемент шкалы не должен иметь линии вниз */
    .position-relative[style*="border-left"]:last-child[b-6aliwx82g2] {
        border-left-color: transparent !important;
    }

/* Точки на шкале */
.rounded-circle.bg-primary[b-6aliwx82g2] {
    width: 14px !important;
    height: 14px !important;
    left: -8px !important; /* Центрирование по линии */
    background-color: #6366f1 !important; /* Индиго */
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px rgba(99, 102, 241, 0.1);
    z-index: 2;
}

/* Текст внутри таймлайна */
.text-muted[b-6aliwx82g2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8 !important;
}

/* Анимация появления */
.fade-in[b-6aliwx82g2] {
    animation: slideUp-b-6aliwx82g2 0.5s ease-out forwards;
}

@keyframes slideUp-b-6aliwx82g2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стиль для "Не найдено" */
.alert-warning[b-6aliwx82g2] {
    background-color: #fffbeb;
    border: 1px solid #fef3c7;
    color: #92400e;
    border-radius: 12px;
    font-weight: 600;
}












/* Основной контейнер страницы */
.MyContent[b-6aliwx82g2] {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    margin-top: 2rem;
}

/* Стилизация заголовка H1 */
h1.justify-content-center[b-6aliwx82g2] {
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -1px;
    text-transform: none;
}

/* Стилизация пояснительного текста (Label) */
.form-label[b-6aliwx82g2] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    display: block;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 25px auto;
}

/* Поле ввода (Input) */
.form-control[b-6aliwx82g2] {
    height: 60px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    padding: 0 25px;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

    .form-control:focus[b-6aliwx82g2] {
        background-color: #ffffff;
        border-color: #6366f1; /* Индиго акцент */
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        outline: none;
    }

/* Кнопка "Отследить" */
.btn-primary[b-6aliwx82g2] {
    height: 60px;
    padding: 0 40px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    background: #6366f1;
    border: none;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

    .btn-primary:hover[b-6aliwx82g2] {
        background: #4f46e5;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

    .btn-primary:active[b-6aliwx82g2] {
        transform: translateY(0);
    }

/* Блок с описанием трек-кода (внизу) */
.MyContent .container:last-child[b-6aliwx82g2] {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed #e2e8f0;
}

    .MyContent .container:last-child .form-label[b-6aliwx82g2] {
        font-size: 0.85rem;
        color: #94a3b8;
        font-style: italic;
        text-align: justify;
    }

/* Стилизация сообщения об ошибке валидации */
.validation-message[b-6aliwx82g2] {
    position: absolute;
    top: -25px;
    font-size: 0.8rem;
    color: #ef4444;
    font-weight: 600;
}

/* Контейнер для input и button для позиционирования валидации */
.d-flex.justify-content-center.mb-3[b-6aliwx82g2] {
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .d-flex.justify-content-center.mb-3[b-6aliwx82g2] {
        flex-direction: column;
        gap: 15px;
    }

    .btn-primary[b-6aliwx82g2] {
        width: 100%;
        margin-left: 0 !important;
    }

    .form-control[b-6aliwx82g2] {
        text-align: center;
    }
}

























.fade-in[b-6aliwx82g2] {
    animation: fadeIn-b-6aliwx82g2 0.7s ease-in-out;
}

@keyframes fadeIn-b-6aliwx82g2 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loader[b-6aliwx82g2] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin-b-6aliwx82g2 0.8s linear infinite;
    margin: 20px auto;
}

@keyframes spin-b-6aliwx82g2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


h1[b-6aliwx82g2], h2[b-6aliwx82g2] {
    text-align: center;
    color: #2C3E50;
}

.container[b-6aliwx82g2] {
    max-width: 850px;
    margin: 20px auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.features-list[b-6aliwx82g2], .details-list[b-6aliwx82g2], .earnings-list[b-6aliwx82g2], .benefits-list[b-6aliwx82g2] {
    list-style: none;
    padding: 0;
}

    .features-list li[b-6aliwx82g2], .details-list li[b-6aliwx82g2], .earnings-list li[b-6aliwx82g2], .benefits-list li[b-6aliwx82g2] {
        padding: 10px;
        background: #ffffff;
        margin-bottom: 8px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

.highlight[b-6aliwx82g2] {
    font-weight: bold;
    color: #2980B9;
}

.section[b-6aliwx82g2] {
    margin-top: 30px;
    padding: 20px;
    border-radius: 10px;
    background: #ECF0F1;
}

.image-container[b-6aliwx82g2] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.img-thumbnail[b-6aliwx82g2] {
    max-width: 250px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-info[b-6aliwx82g2] {
    text-align: center;
    font-size: 16px;
}

    .contact-info a[b-6aliwx82g2] {
        color: #2980B9;
        font-weight: bold;
        text-decoration: none;
    }