/* /Components/ChatWindow/ChatWindow.razor.rz.scp.css */
.chatwindow[b-cpuu9vdw03] {
    font-family: 'Montserrat', sans-serif;
    position: fixed;
    top: 80px;
    right: calc(max((100vw - 1700px)/2, 0px) + 20px);
    width: 370px;
    height: auto;
    min-height: 360px;
    max-height: 700px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    display: none;
    flex-direction: column;
    z-index: 1200;
    overflow: hidden;
    transition: height .2s ease;
}

    .chatwindow.show[b-cpuu9vdw03] {
        display: flex;
    }

.chatwindow-header[b-cpuu9vdw03] {
    display: flex;
    align-items: center;
    padding: 15px;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

    .chatwindow-header[b-cpuu9vdw03]::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10px;
        right: 10px;
        border-bottom: 1px solid #909090;
    }

.chatwindow-avatar[b-cpuu9vdw03] {
    width: 42px;
    height: 42px;
    margin-right: 12px;
    object-fit: cover;
}

.chatwindow-user-info[b-cpuu9vdw03] {
    flex: 1;
}

.chatwindow-user-name[b-cpuu9vdw03] {
    font-weight: 400;
    font-size: 16px;
    color: #000;
}

.chatwindow-body[b-cpuu9vdw03] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1 1 auto;
}

.chatwindow-incoming[b-cpuu9vdw03],
.chatwindow-outgoing[b-cpuu9vdw03] {
    flex: none;
    display: inline-block;
    max-width: 80%;
    width: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 8px 12px;
    margin-top: 15px;
}

/* incoming (left side) */
.chatwindow-incoming[b-cpuu9vdw03] {
    align-self: flex-start;
    background: #EFF4FF;
    color: #000;
    border-radius: 16px 16px 16px 0;
}

/* outgoing (right side) */
.chatwindow-outgoing[b-cpuu9vdw03] {
    align-self: flex-end;
    background: #4D7CFE;
    color: #fff;
    border-radius: 16px 16px 0 16px;
}

/* special placeholder bubble shape */
.chatwindow-incoming.chatwindow-placeholder[b-cpuu9vdw03] {
    cursor: default;
    background: #EFF4FF;
    border-radius: 32px 32px 32px 0;
}

.chatwindow-msg-time[b-cpuu9vdw03] {
    font-weight: 400;
    font-size: 13px;
    color: #AFB8CF;
    margin-top: 4px;
}

.chatwindow-incoming + .chatwindow-msg-time[b-cpuu9vdw03],
.chatwindow-placeholder-time[b-cpuu9vdw03] {
    text-align: left;
    align-self: flex-start;
}

.chatwindow-outgoing + .chatwindow-msg-time[b-cpuu9vdw03] {
    text-align: right;
    align-self: flex-end;
}

.chatwindow-input[b-cpuu9vdw03] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
}

    .chatwindow-input textarea[b-cpuu9vdw03] {
        width: 328px;
        height: 117px;
        resize: none;
        border: 1px solid #6E6E6E;
        border-radius: 10px;
        padding: 8px;
        font-family: inherit;
        font-size: 14px;
        color: #555;
        margin: 0 auto;
    }

.chatwindow-input-actions[b-cpuu9vdw03] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* Send message button styling */
.chatwindow-message-btn[b-cpuu9vdw03] {
    width: auto;
    min-width: 140px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #4D7CFE;
    background-color: #fff;
    border: 2px solid #4D7CFE;
    border-radius: 22px;
    padding: 0 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

    /* Icon color styling commented out for now
    .chatwindow-message-btn .chatwindow-paper-plane-icon {
        filter: brightness(0) invert(1);
    }
    */

    .chatwindow-message-btn:hover:not([disabled])[b-cpuu9vdw03] {
        background-color: #4D7CFE;
        color: #fff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .chatwindow-message-btn:active:not([disabled])[b-cpuu9vdw03] {
        transform: translateY(0);
    }

    .chatwindow-message-btn[disabled][b-cpuu9vdw03] {
        background-color: #ccc !important;
        border-color: #ccc !important;
        color: #666 !important;
        cursor: not-allowed !important;
        opacity: 0.7;
        box-shadow: none;
    }

        .chatwindow-message-btn[disabled] .chatwindow-paper-plane-icon[b-cpuu9vdw03] {
            filter: none;
        }

.chatwindow-paper-plane-icon[b-cpuu9vdw03] {
    width: 17px;
    height: 17px;
}

/* Report button styling */
.chatwindow-report-btn[b-cpuu9vdw03] {
    height: 44px;
    border-radius: 22px;
    background: #fff;
    border: 2px solid #FF6243;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 20px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

    .chatwindow-report-btn:hover[b-cpuu9vdw03] {
        background: #FF6243;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

        .chatwindow-report-btn:hover .chatwindow-report-text[b-cpuu9vdw03] {
            color: white;
        }

    .chatwindow-report-btn:active[b-cpuu9vdw03] {
        transform: translateY(0);
    }

.chatwindow-report-text[b-cpuu9vdw03] {
    color: #FF6243;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.chatwindow-report-btn:hover .chatwindow-report-text[b-cpuu9vdw03] {
    color: white;
}

/* Report dialog styling */
.chatwindow-report-dialog-overlay[b-cpuu9vdw03] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.chatwindow-report-dialog[b-cpuu9vdw03] {
    background: white;
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.chatwindow-report-dialog-header[b-cpuu9vdw03] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

    .chatwindow-report-dialog-header h3[b-cpuu9vdw03] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.chatwindow-close-button[b-cpuu9vdw03] {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

    .chatwindow-close-button:hover[b-cpuu9vdw03] {
        color: #000;
    }

.chatwindow-report-dialog-content[b-cpuu9vdw03] {
    padding: 24px;
}

    .chatwindow-report-dialog-content p[b-cpuu9vdw03] {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: #333;
    }

.chatwindow-report-textarea[b-cpuu9vdw03] {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border: 1px solid #6E6E6E;
    border-radius: 10px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    color: #555;
    box-sizing: border-box;
}

.chatwindow-report-dialog-actions[b-cpuu9vdw03] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e0e0e0;
}

.chatwindow-cancel-button[b-cpuu9vdw03] {
    background: #fff;
    border: 2px solid #FF6243;
    color: #FF6243;
    border-radius: 24px;
    padding: 10px 28px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

    .chatwindow-cancel-button:hover[b-cpuu9vdw03] {
        background-color: #FF6243;
        color: white;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .chatwindow-cancel-button:active[b-cpuu9vdw03] {
        transform: translateY(0);
    }

/* Report submit button styling - matches chat send button */
.chatwindow-submit-btn[b-cpuu9vdw03] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #4D7CFE;
    border: 2px solid #4D7CFE;
    border-radius: 24px;
    padding: 10px 28px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

    /* Icon color styling commented out for now
    .chatwindow-submit-btn .chatwindow-paper-plane-icon {
        filter: brightness(0) invert(1);
    }
    */

    .chatwindow-submit-btn:hover:not([disabled])[b-cpuu9vdw03] {
        background-color: #4D7CFE;
        color: #fff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .chatwindow-submit-btn:active:not([disabled])[b-cpuu9vdw03] {
        transform: translateY(0);
    }

    .chatwindow-submit-btn[disabled][b-cpuu9vdw03] {
        background: #ccc !important;
        border-color: #ccc !important;
        color: #666 !important;
        cursor: not-allowed !important;
        opacity: 0.7;
        box-shadow: none;
    }

        .chatwindow-submit-btn[disabled] .chatwindow-paper-plane-icon[b-cpuu9vdw03] {
            filter: none;
        }

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .chatwindow[b-cpuu9vdw03] {
        width: 90%;
        right: 5%;
        left: 5%;
        max-width: none;
    }

    .chatwindow-report-dialog[b-cpuu9vdw03] {
        width: 90%;
    }
}
/* /Components/Landing/Cookiebanner.razor.rz.scp.css */
* Cookie consent banner styles */
.cookie-banner[b-j3m2jo7vzf] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    z-index: 999;
    pointer-events: none;
    padding: var(--spacing-l);
}

.cookie-inner[b-j3m2jo7vzf] {
    pointer-events: auto;
    max-width: 1100px;
    width: 100%;
    background: var(--bg-white);
    box-shadow: var(--shadow);
    border-radius: var(--radius-s);
    padding: var(--spacing-l);
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    margin: 0 auto;
}

.cookie-message[b-j3m2jo7vzf] {
    font-size: var(--text-xs);
    color: var(--text-dark);
    flex: 1 1 auto;
}

.cookie-actions[b-j3m2jo7vzf] {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
}

.cookie-btn[b-j3m2jo7vzf] {
    border: none;
    padding: var(--spacing-m) var(--spacing-l);
    border-radius: var(--radius-s);
    font-weight: 600;
    cursor: pointer;
}

.cookie-accept[b-j3m2jo7vzf] {
    background: var(--primary-color);
    color: #fff;
}

.cookie-decline[b-j3m2jo7vzf] {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.cookie-link[b-j3m2jo7vzf] {
    color: var(--text-light);
    text-decoration: underline;
    font-size: var(--text-xs);
    margin-left: var(--spacing-s);
}

/* Cookie banner responsive - vertical layout on mobile */
@media (max-width: 768px) {
    .cookie-inner[b-j3m2jo7vzf] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-m);
    }

    .cookie-message[b-j3m2jo7vzf] {
        flex: 1 1 auto;
        margin-bottom: var(--spacing-s);
    }

    .cookie-actions[b-j3m2jo7vzf] {
        flex-direction: column;
        width: 100%;
    }

    .cookie-btn[b-j3m2jo7vzf] {
        width: 100%;
    }

    .cookie-link[b-j3m2jo7vzf] {
        text-align: center;
        margin-left: 0;
        display: block;
        padding: var(--spacing-m) 0;
    }
}
/* /Components/Landing/Footer.razor.rz.scp.css */
/* =====================================================
   Footer Section
   ===================================================== */
.footer-section[b-zld9n06cef] {
    padding: var(--spacing-xl) var(--spacing-l);
    background: var(--bg-light);
}

.footer-container[b-zld9n06cef] {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-content[b-zld9n06cef] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacing-xl);
}

.footer-column[b-zld9n06cef] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    opacity: 1 !important;
}

.footer-column-logo[b-zld9n06cef] {
    justify-content: space-between;
    align-items: flex-start;
}

.footer-column-title[b-zld9n06cef] {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.footer-logo[b-zld9n06cef] {
    height: var(--icon-l);
    width: auto;
}

.footer-links[b-zld9n06cef] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

    .footer-links a[b-zld9n06cef] {
        color: var(--text-light);
        text-decoration: none;
        font-size: var(--text-xs);
        transition: color var(--transition-fast);
    }

        .footer-links a:hover[b-zld9n06cef] {
            color: var(--text-dark);
        }

.footer-email[b-zld9n06cef] {
    color: var(--text-light);
    font-size: var(--text-xs);
    transition: color var(--transition-fast);
}

    .footer-email:hover[b-zld9n06cef] {
        color: var(--text-dark);
    }

.footer-social[b-zld9n06cef] {
    display: flex;
    gap: var(--spacing-m);
}

.footer-social-link[b-zld9n06cef] {
    padding: var(--spacing-s);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
}

    .footer-social-link:hover[b-zld9n06cef] {
        background: var(--bg-white);
        border-color: var(--border-color);
        transform: scale(1.15);
    }

    .footer-social-link img[b-zld9n06cef] {
        width: var(--icon-s);
        height: var(--icon-s);
    }

.footer-copyright[b-zld9n06cef] {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
}

/* Footer responsive - stack on mobile */
@media (max-width: 768px) {
    .socials-link[b-zld9n06cef] {
        flex-direction: column;
    }

    .footer-content[b-zld9n06cef] {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .footer-column[b-zld9n06cef],
    .footer-column-logo[b-zld9n06cef] {
        align-items: center;
    }

    .footer-links[b-zld9n06cef] {
        align-items: center;
    }

    .footer-social[b-zld9n06cef] {
        justify-content: center;
    }
}
/* /Components/Landing/Nav.razor.rz.scp.css */
/* =====================================================
   Navigation
   ===================================================== */
.nav-header[b-r2utnl2vi1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    height: calc(70px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background-color: rgba(255, 255, 255, 0.05);
}

    .nav-header[b-r2utnl2vi1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top, 0px);
        background-color: #ffffff;
        z-index: -1;
    }

.nav-blur[b-r2utnl2vi1] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

    .nav-blur .blur-filter[b-r2utnl2vi1] {
        position: absolute;
        inset: 0;
    }

        .nav-blur .blur-filter:nth-child(1)[b-r2utnl2vi1] {
            backdrop-filter: blur(32px);
            mask: linear-gradient(to bottom, black 0%, transparent 100%);
            -webkit-mask: linear-gradient(to bottom, black 0%, transparent 100%);
        }

        .nav-blur .blur-filter:nth-child(2)[b-r2utnl2vi1] {
            backdrop-filter: blur(16px);
            mask: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
            -webkit-mask: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
        }

        .nav-blur .blur-filter:nth-child(3)[b-r2utnl2vi1] {
            backdrop-filter: blur(8px);
            mask: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
            -webkit-mask: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
        }

        .nav-blur .blur-filter:nth-child(4)[b-r2utnl2vi1] {
            backdrop-filter: blur(4px);
            mask: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
            -webkit-mask: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
        }

.nav-container[b-r2utnl2vi1] {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-l);
}

.nav-left[b-r2utnl2vi1],
.nav-right[b-r2utnl2vi1] {
    width: 164px;
    height: 40px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.nav-left[b-r2utnl2vi1] {
    justify-content: flex-start;
}

.nav-right[b-r2utnl2vi1] {
    justify-content: flex-end;
}

.nav-logo[b-r2utnl2vi1] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

    .nav-logo img[b-r2utnl2vi1] {
        height: var(--icon-m);
        width: auto;
    }

.nav-help[b-r2utnl2vi1] {
    flex-shrink: 0;
    width: 164px;
    height: 40px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.3px;
    text-decoration: none;
}

    .nav-help:hover[b-r2utnl2vi1] {
        background-color: #4D7CFE;
        color: #fff !important;
        border-color: #4D7CFE;
        box-shadow: 0 6px 20px rgba(77, 124, 254, 0.25);
        transform: translateY(-2px);
    }

    .nav-help:active[b-r2utnl2vi1] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.help-button-icon[b-r2utnl2vi1] {
    display: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    transition: font-size 0.3s ease;
}

.nav-menu-btn[b-r2utnl2vi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: unset;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    position: relative;
}

    .nav-menu-btn:hover[b-r2utnl2vi1] {
        opacity: 0.7;
    }

/* Flag hamburger menu */
.flag-hamburger[b-r2utnl2vi1] {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.flag-bar[b-r2utnl2vi1] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.flag-bar-black[b-r2utnl2vi1] {
    background: #000000;
}

.flag-bar-red[b-r2utnl2vi1] {
    background: #e43e2d;
}

.flag-bar-yellow[b-r2utnl2vi1] {
    background: #fdbf0e;
}

/* Open state - form X */
.nav-menu-btn.open .flag-bar-black[b-r2utnl2vi1] {
    transform: translateY(8px) rotate(45deg);
}

.nav-menu-btn.open .flag-bar-red[b-r2utnl2vi1] {
    opacity: 0;
    transform: scaleX(0);
}

.nav-menu-btn.open .flag-bar-yellow[b-r2utnl2vi1] {
    transform: translateY(-8px) rotate(-45deg);
}

/* =====================================================
   Menu Overlay
   ===================================================== */
.menu-overlay[b-r2utnl2vi1] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

    .menu-overlay.open[b-r2utnl2vi1] {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
    }

.menu-blur[b-r2utnl2vi1] {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.8);
}

.menu-content[b-r2utnl2vi1] {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xxl);
    padding: 70px var(--spacing-l) var(--spacing-xl);
}

.menu-links[b-r2utnl2vi1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-l);
    flex: 1;
    justify-content: center;
}

.menu-link[b-r2utnl2vi1] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    .menu-link:hover[b-r2utnl2vi1] {
        color: var(--text-light);
    }

    /* SplitText line wrappers for menu links */
    .menu-link .line-wrapper[b-r2utnl2vi1] {
        overflow: hidden;
        display: block;
    }

    .menu-link .line[b-r2utnl2vi1] {
        display: block;
    }

.menu-email[b-r2utnl2vi1] {
    font-size: var(--text-s);
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    .menu-email:hover[b-r2utnl2vi1] {
        color: var(--text-dark);
    }

.menu-socials[b-r2utnl2vi1] {
    display: flex;
    gap: var(--spacing-l);
}

    .menu-socials a[b-r2utnl2vi1] {
        width: var(--icon-m);
        height: var(--icon-m);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all var(--transition-normal);
        border: 1px solid transparent;
    }

        .menu-socials a:hover[b-r2utnl2vi1] {
            background: var(--bg-light);
            border-color: var(--border-color);
            transform: scale(1.1);
        }

    .menu-socials img[b-r2utnl2vi1] {
        width: var(--icon-s);
        height: var(--icon-s);
    }

/* =====================================================
   Responsive Styles - Match LeftSideNavLayout
   ===================================================== */

/* Gradual header shrink: 900px */
@media (max-width: 900px) {
    .nav-left[b-r2utnl2vi1],
    .nav-right[b-r2utnl2vi1] {
        width: 156px;
        height: 38px;
    }

    .nav-help[b-r2utnl2vi1] {
        height: 38px;
        width: 156px;
        font-size: 13px;
        border-radius: 19px;
    }
}

/* Mobile - show icon only */
@media (max-width: 700px) {
    .nav-left[b-r2utnl2vi1],
    .nav-right[b-r2utnl2vi1] {
        width: 42px;
        height: 36px;
    }

    .nav-help[b-r2utnl2vi1] {
        width: 42px;
        height: 36px;
        border-radius: 18px;
    }

    .help-button-text[b-r2utnl2vi1] {
        display: none;
    }

    .help-button-icon[b-r2utnl2vi1] {
        display: inline;
        font-size: 22px;
    }
}

/* Gradual header shrink: 600px */
@media (max-width: 600px) {
    .nav-left[b-r2utnl2vi1],
    .nav-right[b-r2utnl2vi1] {
        width: 40px;
        height: 34px;
    }

    .nav-help[b-r2utnl2vi1] {
        width: 40px;
        height: 34px;
        border-radius: 17px;
    }

    .help-button-icon[b-r2utnl2vi1] {
        font-size: 21px;
    }
}

/* Gradual header shrink: 500px */
@media (max-width: 500px) {
    .nav-left[b-r2utnl2vi1],
    .nav-right[b-r2utnl2vi1] {
        width: 38px;
        height: 32px;
    }

    .nav-help[b-r2utnl2vi1] {
        width: 38px;
        height: 32px;
        border-radius: 16px;
    }

    .help-button-icon[b-r2utnl2vi1] {
        font-size: 20px;
    }
}

/* Small mobile devices */
@media (max-width: 450px) {
    .nav-left[b-r2utnl2vi1],
    .nav-right[b-r2utnl2vi1] {
        width: 36px;
        height: 28px;
    }

    .nav-help[b-r2utnl2vi1] {
        width: 36px;
        height: 28px;
        border-radius: 14px;
    }

    .help-button-icon[b-r2utnl2vi1] {
        font-size: 18px;
    }
}

/* Extra small */
@media (max-width: 380px) {
    .nav-left[b-r2utnl2vi1],
    .nav-right[b-r2utnl2vi1] {
        width: 34px;
        height: 26px;
    }

    .nav-help[b-r2utnl2vi1] {
        width: 34px;
        height: 26px;
        border-radius: 13px;
    }

    .help-button-icon[b-r2utnl2vi1] {
        font-size: 17px;
    }
}
/* /Components/NavButtons.razor.rz.scp.css */
.navigation-buttons[b-t1okxt72u6] {
    display: flex;
    justify-content: flex-end;
    max-width: 1650px;
    gap: 15px;
    margin-top: 50px;
}

.nav-left[b-t1okxt72u6] {
    width: 292px;
    height: 42px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background-color: #fff;
    border: 1px solid #414141;
    color: #414141;
    box-sizing: border-box;
}

    .nav-left:hover[b-t1okxt72u6] {
        background-color: #4D7CFE;
        border-color: transparent;
        color: #fff;
    }

.nav-right[b-t1okxt72u6] {
    width: 157px;
    height: 42px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background-color: #fff;
    border: 1px solid;
    box-sizing: border-box;
}

    .nav-right:hover[b-t1okxt72u6] {
        background-color: #92CD4D;
        border-color: transparent;
        color: #fff;
    }

.pdf-download[b-t1okxt72u6] {
    width: auto;
    min-width: 157px;
}

/* Responsive styles for tablets and mobile */
@media (max-width: 768px) {
    .navigation-buttons[b-t1okxt72u6] {
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }

    .nav-left[b-t1okxt72u6],
    .nav-right[b-t1okxt72u6] {
        width: 100%;
        max-width: 100%;
    }

    .pdf-download[b-t1okxt72u6] {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .nav-left[b-t1okxt72u6],
    .nav-right[b-t1okxt72u6] {
        font-size: 14px;
        height: 38px;
    }
}
/* /Layout/AutoHideSidebar.razor.rz.scp.css */
.container[b-i51bf9h3tt] {
    display: flex;
    flex-direction: column;
    background: #ff00dc;
    border-radius: 0 10px 10px 0;
}

.expand[b-i51bf9h3tt]{
    width: 6rem;
}
.collapse[b-i51bf9h3tt]{
    width: 3rem;
}

.menu-icon[b-i51bf9h3tt]
{ 
color: white;
}

.menu-name[b-i51bf9h3tt] 
{
color: white;
visibility: hidden;
}

.expand .menu-name[b-i51bf9h3tt] {
    visibility: visible;
}
/* /Layout/LeftSideNavLayout.razor.rz.scp.css */
.layout-container[b-cll9n72cd4] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: white;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    max-width: 1700px;
    margin: 0 auto;
    user-select: none;
    min-width: 350px;
    position: relative;
}

.header[b-cll9n72cd4] {
    position: sticky;
    top: 0;
    background: transparent;
    padding: 1rem 0;
    z-index: 900;
    border-bottom: none !important;
    text-decoration: none !important;
    transition: padding 0.3s ease;
    pointer-events: none;
    margin-left: 300px;
}

    .header[b-cll9n72cd4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: -1;
    }

.top-nav-container[b-cll9n72cd4] {
    max-width: calc(1700px - 300px);
    margin: 0 auto;
    padding: 0 2rem;
    transition: padding 0.3s ease;
    pointer-events: auto;
}

.top-nav[b-cll9n72cd4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 40px;
    transition: height 0.3s ease;
}

.logo-container[b-cll9n72cd4] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    z-index: 950;
}

.logo[b-cll9n72cd4] {
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-button-container[b-cll9n72cd4] {
    margin-left: auto;
    width: 164px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    transition: all 0.3s ease;
}

.help-button[b-cll9n72cd4] {
    flex-shrink: 0;
    width: 164px;
    height: 40px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.3px;
}

    .help-button:hover[b-cll9n72cd4] {
        background-color: #4D7CFE;
        color: #fff;
        border-color: #4D7CFE;
        box-shadow: 0 6px 20px rgba(77, 124, 254, 0.25);
        transform: translateY(-2px);
    }

    .help-button:active[b-cll9n72cd4] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .help-button:has(.close-icon)[b-cll9n72cd4] {
        background-color: #fff;
        color: #FF4245;
        border-color: #FF4245;
        box-shadow: 0 2px 8px rgba(255, 66, 69, 0.06);
    }

        .help-button:has(.close-icon):hover[b-cll9n72cd4] {
            background-color: #FF4245;
            color: #fff;
            border-color: #FF4245;
            box-shadow: 0 6px 20px rgba(255, 66, 69, 0.25);
            transform: translateY(-2px);
        }

        .help-button:has(.close-icon):active[b-cll9n72cd4] {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(255, 66, 69, 0.06);
        }

.help-button-icon[b-cll9n72cd4] {
    display: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    transition: font-size 0.3s ease;
}

.help-button .close-icon[b-cll9n72cd4] {
    font-size: 30px;
    font-weight: normal;
    transition: font-size 0.3s ease;
}

.content-wrapper[b-cll9n72cd4] {
    display: flex;
    flex: 1;
    position: relative;
    isolation: isolate;
    padding-left: 300px;
}

/* Mobile Close Button - Hidden on Desktop */
.mobile-close-button[b-cll9n72cd4] {
    display: none;
}

/* Professional Fixed Left Navigation */
aside.left-navmenu[b-cll9n72cd4] {
    position: fixed;
    top: 0;
    left: max(0px, calc((100vw - 1700px) / 2));
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    background: #fff;
    border-right: none;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1100;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    aside.left-navmenu[b-cll9n72cd4]::-webkit-scrollbar {
        display: none;
    }

    aside.left-navmenu .flex-column[b-cll9n72cd4] {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 2rem;
        gap: 0.5rem;
    }

    aside.left-navmenu .nav-item[b-cll9n72cd4] {
        margin-left: 0;
        margin-top: 0;
        transition: transform 0.2s ease;
    }

        aside.left-navmenu .nav-item:hover[b-cll9n72cd4] {
            transform: translateX(4px);
        }

    aside.left-navmenu[b-cll9n72cd4]  .nav-link {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 32px;
        letter-spacing: 0.5px;
        color: #1a1a1a;
        text-decoration: none;
        padding: 0.75rem 1.25rem;
        display: block;
        border-radius: 8px;
        transition: all 0.2s ease;
        position: relative;
    }

        aside.left-navmenu[b-cll9n72cd4]  .nav-link:hover {
            color: #4D7CFE;
        }

        aside.left-navmenu[b-cll9n72cd4]  .nav-link.active {
            color: #4D7CFE;
            font-weight: 600;
        }

            aside.left-navmenu[b-cll9n72cd4]  .nav-link.active::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 60%;
                background: #4D7CFE;
                border-radius: 0 2px 2px 0;
            }

    /* Footer Section */
    aside.left-navmenu .nav-footer[b-cll9n72cd4] {
        margin-top: auto;
        padding-top: 2rem;
    }

    aside.left-navmenu .help-header[b-cll9n72cd4] {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 0.5px;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    aside.left-navmenu .help-icon[b-cll9n72cd4] {
        width: 20px;
        opacity: 0.7;
    }

    aside.left-navmenu .help-divider[b-cll9n72cd4] {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin: 1rem 0;
    }

    aside.left-navmenu .help-links[b-cll9n72cd4] {
        display: flex;
        justify-content: space-between;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 1rem;
    }

    aside.left-navmenu .help-link[b-cll9n72cd4] {
        color: #666;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        aside.left-navmenu .help-link:hover[b-cll9n72cd4] {
            color: #4D7CFE;
        }

    aside.left-navmenu .legal-links[b-cll9n72cd4] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 11px;
        letter-spacing: 0.3px;
        color: #999;
    }

    aside.left-navmenu .legal-link[b-cll9n72cd4] {
        color: #999;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        aside.left-navmenu .legal-link:hover[b-cll9n72cd4] {
            color: #4D7CFE;
        }

/* Library Dropdown */
.library-header[b-cll9n72cd4] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .library-header[b-cll9n72cd4]::after {
        content: "";
        width: 24px;
        height: 24px;
        background-image: url('images/arrow-right.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 12px;
        transition: transform 0.3s ease;
    }

.library.expanded .library-header[b-cll9n72cd4]::after {
    transform: rotate(90deg);
}

.library-dropdown[b-cll9n72cd4] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.library.expanded .library-dropdown[b-cll9n72cd4] {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.25rem;
}

aside.left-navmenu .library .library-dropdown[b-cll9n72cd4]  .nav-link {
    padding-left: 2.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 22px;
    margin: 0;
    line-height: 1.2;
}

/* Badges */
aside.left-navmenu[b-cll9n72cd4]  .nav-link.badge-container {
    position: relative;
}

aside.left-navmenu .badge-container .notification-badge[b-cll9n72cd4] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 50%;
    background: #FF4245;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    z-index: 1;
}

.notification-line[b-cll9n72cd4] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background-color: #FF4245;
    border-radius: 2px;
}

.disabled-link[b-cll9n72cd4] {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.premium-feature-badge[b-cll9n72cd4] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 11px;
    background: linear-gradient(135deg, #92CD4D 0%, #7AB83D 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.3px;
    -moz-box-shadow: inherit;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    : 0 2px 8px rgba(146, 205, 77, 0.3);
}

/* Main Content */
main[b-cll9n72cd4] {
    flex: 1;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* Footer */
footer.footer[b-cll9n72cd4] {
    background-color: white;
    color: #000;
    padding: 2rem;
}

.footer-container[b-cll9n72cd4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
}

.footer-column h3[b-cll9n72cd4] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.37;
    margin-bottom: 0.5rem;
    text-align: left;
}

.footer-column ul[b-cll9n72cd4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-column ul li[b-cll9n72cd4] {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.37;
        margin-bottom: 0.5rem;
        text-align: left;
    }

        .footer-column ul li a[b-cll9n72cd4] {
            color: #000;
            text-decoration: none;
        }

            .footer-column ul li a:hover[b-cll9n72cd4] {
                text-decoration: underline;
            }

.footer-logo[b-cll9n72cd4] {
    max-width: 100%;
    height: auto;
}

.social-icons[b-cll9n72cd4] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

    .social-icons a img[b-cll9n72cd4] {
        width: 24px;
        height: auto;
    }

/* Mobile Toggle */
.navbar-toggler[b-cll9n72cd4],
.navmenu-toggle[b-cll9n72cd4] {
    display: none;
}

.flag-hamburger[b-cll9n72cd4] {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.flag-bar[b-cll9n72cd4] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.flag-bar-black[b-cll9n72cd4] {
    background: #000000;
}

.flag-bar-red[b-cll9n72cd4] {
    background: #e43e2d;
}

.flag-bar-yellow[b-cll9n72cd4] {
    background: #fdbf0e;
}

.navmenu-toggle.open .flag-bar-black[b-cll9n72cd4] {
    transform: translateY(8px) rotate(45deg);
}

.navmenu-toggle.open .flag-bar-red[b-cll9n72cd4] {
    opacity: 0;
    transform: scaleX(0);
}

.navmenu-toggle.open .flag-bar-yellow[b-cll9n72cd4] {
    transform: translateY(-8px) rotate(-45deg);
}

.blur-overlay[b-cll9n72cd4] {
    display: none;
}

/* Tablet and Mobile Responsive */
@media (max-width: 1100px) {
    .header[b-cll9n72cd4] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0;
        background: white;
        z-index: 1800;
        pointer-events: auto;
    }

    .logo-container[b-cll9n72cd4] {
        position: absolute;
        left: 50%;
        z-index: inherit;
    }

    .help-button-container[b-cll9n72cd4] {
        z-index: inherit;
    }

    .header[b-cll9n72cd4]::before {
        display: none;
    }

    .content-wrapper[b-cll9n72cd4] {
        padding-left: 0;
        padding-top: calc(40px + 2rem);
        isolation: auto;
    }

    .top-nav-container[b-cll9n72cd4] {
        padding: 0 2rem;
        max-width: 1700px;
    }

    .navmenu-toggle[b-cll9n72cd4] {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2000;
        width: 40px;
        height: 40px;
        padding: 0;
        transition: transform 0.3s ease;
        position: fixed;
        top: 1rem;
        left: 2rem;
    }

        .navmenu-toggle:hover[b-cll9n72cd4] {
            transform: scale(1.1);
        }

        .navmenu-toggle:active[b-cll9n72cd4] {
            transform: scale(0.95);
        }

    .mobile-close-button[b-cll9n72cd4] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
        background: #fff;
        border: 2px solid #1a1a1a;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
    }

        .mobile-close-button:hover[b-cll9n72cd4] {
            background: #FF4245;
            border-color: #FF4245;
            transform: rotate(90deg);
        }

            .mobile-close-button:hover .close-x[b-cll9n72cd4] {
                color: #fff;
            }

        .mobile-close-button:active[b-cll9n72cd4] {
            transform: rotate(90deg) scale(0.95);
        }

        .mobile-close-button .close-x[b-cll9n72cd4] {
            font-size: 32px;
            font-weight: 300;
            line-height: 1;
            color: #1a1a1a;
            transition: color 0.3s ease;
        }

    aside.left-navmenu[b-cll9n72cd4] {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1700;
        padding-top: 5rem;
        box-shadow: none;
    }

        aside.left-navmenu .flex-column[b-cll9n72cd4] {
            margin-top: 1rem;
        }

    #nav-toggler:checked ~ .content-wrapper > aside.left-navmenu[b-cll9n72cd4] {
        transform: translateX(0);
    }

    .blur-overlay[b-cll9n72cd4] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        backdrop-filter: blur(4px);
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 1500;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #nav-toggler:checked ~ .blur-overlay[b-cll9n72cd4] {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    main[b-cll9n72cd4] {
        padding: 1.5rem;
    }
}

@media (max-width: 900px) {
    .header[b-cll9n72cd4] {
        padding: 0.85rem 0;
    }

    .content-wrapper[b-cll9n72cd4] {
        padding-top: calc(38px + 1.7rem);
    }

    .top-nav[b-cll9n72cd4] {
        height: 38px;
    }

    .logo[b-cll9n72cd4] {
        height: 38px;
    }

    .help-button-container[b-cll9n72cd4] {
        height: 38px;
        width: 156px;
    }

    .help-button[b-cll9n72cd4] {
        height: 38px;
        width: 156px;
        font-size: 13px;
        border-radius: 19px;
    }

    .navmenu-toggle[b-cll9n72cd4] {
        top: 0.85rem;
    }
}

@media (max-width: 700px) {
    .header[b-cll9n72cd4] {
        padding: 0.75rem 0;
    }

    .content-wrapper[b-cll9n72cd4] {
        padding-top: calc(36px + 1.5rem);
    }

    .top-nav-container[b-cll9n72cd4] {
        padding: 0 1rem;
    }

    .top-nav[b-cll9n72cd4] {
        height: 36px;
    }

    .logo[b-cll9n72cd4] {
        height: 35px;
    }

    .help-button[b-cll9n72cd4] {
        width: 42px;
        height: 36px;
        border-radius: 18px;
    }

    .help-button-text[b-cll9n72cd4] {
        display: none;
    }

    .help-button-icon[b-cll9n72cd4] {
        display: inline;
        font-size: 22px;
    }

    .help-button-container[b-cll9n72cd4] {
        width: 42px;
        height: 36px;
    }

    main[b-cll9n72cd4] {
        padding: 1rem;
    }

    .navmenu-toggle[b-cll9n72cd4] {
        top: 0.75rem;
        left: 1rem;
    }

    aside.left-navmenu[b-cll9n72cd4] {
        width: 360px;
        max-width: 90vw;
        padding: 5rem 1.25rem 1.5rem;
    }

        aside.left-navmenu[b-cll9n72cd4]  .nav-link {
            font-size: 30px;
            padding: 0.65rem 1.1rem;
        }

        aside.left-navmenu .library .library-dropdown[b-cll9n72cd4]  .nav-link {
            padding-left: 2.25rem;
            padding-top: 0.35rem;
            padding-bottom: 0.35rem;
            font-size: 24px;
            line-height: 1.3;
        }

    .mobile-close-button[b-cll9n72cd4] {
        top: 1.25rem;
        right: 1.25rem;
        width: 40px;
        height: 40px;
    }

        .mobile-close-button .close-x[b-cll9n72cd4] {
            font-size: 28px;
        }
}

@media (max-width: 500px) {
    aside.left-navmenu[b-cll9n72cd4] {
        width: 340px;
        max-width: 92vw;
        padding-top: 5rem;
    }

        aside.left-navmenu[b-cll9n72cd4]  .nav-link {
            font-size: 28px;
            padding: 0.6rem 1rem;
        }

        aside.left-navmenu .library .library-dropdown[b-cll9n72cd4]  .nav-link {
            font-size: 22px;
        }

    main[b-cll9n72cd4] {
        padding: 0.75rem;
    }
}

@media (max-width: 450px) {
    .layout-container[b-cll9n72cd4] {
        min-width: 350px;
    }

    aside.left-navmenu[b-cll9n72cd4] {
        width: 320px;
        max-width: 94vw;
        padding: 5rem 1rem 1rem;
    }

        aside.left-navmenu[b-cll9n72cd4]  .nav-link {
            font-size: 26px;
            padding: 0.55rem 0.9rem;
        }

        aside.left-navmenu .library .library-dropdown[b-cll9n72cd4]  .nav-link {
            font-size: 20px;
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            line-height: 1.3;
        }

    .mobile-close-button[b-cll9n72cd4] {
        top: 1rem;
        right: 1rem;
        width: 38px;
        height: 38px;
    }

        .mobile-close-button .close-x[b-cll9n72cd4] {
            font-size: 26px;
        }
}
/* /Layout/MainLayout.razor.rz.scp.css */
*[b-3ljwtt8n2z], *[b-3ljwtt8n2z]::before, *[b-3ljwtt8n2z]::after {
    box-sizing: border-box;
}

.layout-container[b-3ljwtt8n2z] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    min-width: 350px;
}

/* ========== Header (matching LeftSideNavLayout) ========== */
.header[b-3ljwtt8n2z] {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    padding: 1rem 0;
    z-index: 1100;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: padding 0.3s ease;
}

.top-nav-container[b-3ljwtt8n2z] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 2rem;
    transition: padding 0.3s ease;
}

.top-nav[b-3ljwtt8n2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 40px;
    transition: height 0.3s ease;
}

.logo-container[b-3ljwtt8n2z] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

.logo[b-3ljwtt8n2z] {
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .logo:hover[b-3ljwtt8n2z] {
        transform: translateY(-3px) scale(1.05);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    }

    .logo:active[b-3ljwtt8n2z] {
        transform: translateY(-1px) scale(1.02);
    }

.help-button-container[b-3ljwtt8n2z] {
    margin-left: auto;
    width: 164px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    transition: all 0.3s ease;
}

.help-button[b-3ljwtt8n2z] {
    flex-shrink: 0;
    width: 164px;
    height: 40px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.3px;
}

    .help-button:hover[b-3ljwtt8n2z] {
        background-color: #4D7CFE;
        color: #fff;
        border-color: #4D7CFE;
        box-shadow: 0 6px 20px rgba(77, 124, 254, 0.25);
        transform: translateY(-2px);
    }

    .help-button:active[b-3ljwtt8n2z] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    /* Red styling when showing "Закрыть" (close) text */
    .help-button:has(.close-icon)[b-3ljwtt8n2z] {
        background-color: #fff;
        color: #FF4245;
        border-color: #FF4245;
        box-shadow: 0 2px 8px rgba(255, 66, 69, 0.06);
    }

        .help-button:has(.close-icon):hover[b-3ljwtt8n2z] {
            background-color: #FF4245;
            color: #fff;
            border-color: #FF4245;
            box-shadow: 0 6px 20px rgba(255, 66, 69, 0.25);
            transform: translateY(-2px);
        }

        .help-button:has(.close-icon):active[b-3ljwtt8n2z] {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(255, 66, 69, 0.06);
        }

.help-button-icon[b-3ljwtt8n2z] {
    display: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    transition: font-size 0.3s ease;
}

.help-button .close-icon[b-3ljwtt8n2z] {
    font-size: 30px;
    font-weight: normal;
    transition: font-size 0.3s ease;
}

/* ========== Main ========== */
main[b-3ljwtt8n2z] {
    flex: 1 0 auto;
    padding-top: 35px;
    width: 100%;
}

/* ========== Footer (matching PublicLayout) ========== */
.footer[b-3ljwtt8n2z] {
    margin-top: auto;
    background-color: #fff;
    padding: 2rem 0;
    font-family: 'Montserrat', sans-serif;
}

.footer-content[b-3ljwtt8n2z] {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    gap: 2rem;
}

.footer-logo img[b-3ljwtt8n2z] {
    width: 211px;
    height: 182px;
    max-width: 40vw;
}

.footer-documents[b-3ljwtt8n2z], .footer-contacts[b-3ljwtt8n2z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 10px;
}

    .footer-documents h4[b-3ljwtt8n2z], .footer-contacts h4[b-3ljwtt8n2z] {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .footer-documents[b-3ljwtt8n2z]  a,
    .footer-documents[b-3ljwtt8n2z]  .nav-link,
    .footer-contacts a[b-3ljwtt8n2z] {
        font-size: 16px;
        color: #333 !important;
        text-decoration: none !important;
        display: block;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .footer-documents[b-3ljwtt8n2z]  a:hover,
        .footer-documents[b-3ljwtt8n2z]  .nav-link:hover,
        .footer-contacts a:hover[b-3ljwtt8n2z] {
            color: #1b6ec2 !important;
            text-decoration: none !important;
        }

        .footer-documents[b-3ljwtt8n2z]  a.active,
        .footer-documents[b-3ljwtt8n2z]  .nav-link.active {
            color: #333 !important;
            text-decoration: none !important;
        }

    .footer-contacts .social-icons[b-3ljwtt8n2z] {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

        .footer-contacts .social-icons img[b-3ljwtt8n2z] {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }

        .footer-contacts .social-icons a:hover img[b-3ljwtt8n2z] {
            transform: scale(1.5);
        }

/* ========== Responsive Breakpoints ========== */
@media (max-width: 1100px) {
    main[b-3ljwtt8n2z] {
        padding-top: 35px;
    }

    .footer-content[b-3ljwtt8n2z] {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .footer-logo img[b-3ljwtt8n2z] {
        width: 150px;
        height: auto;
    }
}

/* Gradual header shrink: 900px */
@media (max-width: 900px) {
    .header[b-3ljwtt8n2z] {
        padding: 0.85rem 0;
    }

    .top-nav[b-3ljwtt8n2z] {
        height: 38px;
    }

    .logo[b-3ljwtt8n2z] {
        height: 38px;
    }

    .help-button-container[b-3ljwtt8n2z] {
        height: 38px;
        width: 156px;
    }

    .help-button[b-3ljwtt8n2z] {
        height: 38px;
        width: 156px;
        font-size: 13px;
        border-radius: 19px;
    }

    main[b-3ljwtt8n2z] {
        padding-top: 20px;
    }

    .top-nav-container[b-3ljwtt8n2z] {
        padding: 0 1rem;
    }

    .footer-content[b-3ljwtt8n2z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }

    .footer-logo img[b-3ljwtt8n2z] {
        width: 110px;
    }
}

/* Gradual header shrink: 700px */
@media (max-width: 700px) {
    .header[b-3ljwtt8n2z] {
        padding: 0.75rem 0;
    }

    .top-nav[b-3ljwtt8n2z] {
        height: 36px;
    }

    .logo[b-3ljwtt8n2z] {
        height: 35px;
    }

        .logo:hover[b-3ljwtt8n2z] {
            transform: translateY(-2px) scale(1.03);
        }

    .top-nav-container[b-3ljwtt8n2z] {
        padding: 0 1rem;
    }

    .help-button[b-3ljwtt8n2z] {
        width: 42px;
        height: 36px;
        border-radius: 18px;
    }

    .help-button-text[b-3ljwtt8n2z] {
        display: none;
    }

    .help-button-icon[b-3ljwtt8n2z] {
        display: inline;
        font-size: 22px;
    }

    .help-button-container[b-3ljwtt8n2z] {
        width: 42px;
        height: 36px;
    }
}

/* Gradual header shrink: 600px */
@media (max-width: 600px) {
    .header[b-3ljwtt8n2z] {
        padding: 0.65rem 0;
    }

    .top-nav[b-3ljwtt8n2z] {
        height: 34px;
    }

    .logo[b-3ljwtt8n2z] {
        height: 32px;
    }

    .help-button[b-3ljwtt8n2z] {
        width: 40px;
        height: 34px;
        border-radius: 17px;
    }

    .help-button-container[b-3ljwtt8n2z] {
        width: 40px;
        height: 34px;
    }

    .help-button-icon[b-3ljwtt8n2z] {
        font-size: 21px;
    }

    .help-button .close-icon[b-3ljwtt8n2z] {
        font-size: 28px;
    }

    main[b-3ljwtt8n2z] {
        padding-top: 10px;
    }

    .top-nav-container[b-3ljwtt8n2z] {
        padding: 0 0.5rem;
    }

    .footer-content[b-3ljwtt8n2z] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .footer-logo img[b-3ljwtt8n2z] {
        width: 80px;
        height: auto;
    }

    .footer-documents h4[b-3ljwtt8n2z], .footer-contacts h4[b-3ljwtt8n2z] {
        font-size: 14px;
    }

    .footer-documents[b-3ljwtt8n2z]  a,
    .footer-documents[b-3ljwtt8n2z]  .nav-link,
    .footer-contacts a[b-3ljwtt8n2z] {
        font-size: 14px;
    }
}

/* Gradual header shrink: 500px */
@media (max-width: 500px) {
    .header[b-3ljwtt8n2z] {
        padding: 0.55rem 0;
    }

    .top-nav[b-3ljwtt8n2z] {
        height: 32px;
    }

    .logo[b-3ljwtt8n2z] {
        height: 30px;
    }

    .help-button[b-3ljwtt8n2z] {
        width: 38px;
        height: 32px;
        border-radius: 16px;
    }

    .help-button-container[b-3ljwtt8n2z] {
        width: 38px;
        height: 32px;
    }

    .help-button-icon[b-3ljwtt8n2z] {
        font-size: 20px;
    }

    .help-button .close-icon[b-3ljwtt8n2z] {
        font-size: 27px;
    }
}

/* Gradual header shrink: 450px */
@media (max-width: 450px) {
    .header[b-3ljwtt8n2z] {
        padding: 0.5rem 0;
    }

    .top-nav[b-3ljwtt8n2z] {
        height: 28px;
    }

    .logo[b-3ljwtt8n2z] {
        height: 28px;
    }

        .logo:hover[b-3ljwtt8n2z] {
            transform: translateY(-1px) scale(1.02);
        }

    .top-nav-container[b-3ljwtt8n2z] {
        padding: 0 0.5rem;
    }

    .help-button[b-3ljwtt8n2z] {
        width: 36px;
        height: 28px;
        border-radius: 14px;
    }

    .help-button-container[b-3ljwtt8n2z] {
        width: 36px;
        height: 28px;
    }

    .help-button-icon[b-3ljwtt8n2z] {
        font-size: 18px;
    }

    .help-button .close-icon[b-3ljwtt8n2z] {
        font-size: 24px;
    }
}

/* Extra small - 350px minimum */
@media (max-width: 380px) {
    .header[b-3ljwtt8n2z] {
        padding: 0.4rem 0;
    }

    .top-nav[b-3ljwtt8n2z] {
        height: 26px;
    }

    .logo[b-3ljwtt8n2z] {
        height: 26px;
    }

    .help-button[b-3ljwtt8n2z] {
        width: 34px;
        height: 26px;
        border-radius: 13px;
    }

    .help-button-container[b-3ljwtt8n2z] {
        width: 34px;
        height: 26px;
    }

    .help-button-icon[b-3ljwtt8n2z] {
        font-size: 17px;
    }

    .help-button .close-icon[b-3ljwtt8n2z] {
        font-size: 22px;
    }
}
/* /Pages/ChatPage.razor.rz.scp.css */
.chat-container[b-0cwfvfzxei] {
    font-family: 'Montserrat', sans-serif;
    max-width: 1150px;
    margin: 0 auto;
    background: #fff;
    height: calc(100vh - 100px);
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}

.chat-page[b-0cwfvfzxei] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.chat-main[b-0cwfvfzxei] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.chat-content[b-0cwfvfzxei] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.chat-background[b-0cwfvfzxei] {
    position: absolute;
    width: 1200px;
    height: 2000px;
    top: 5px;
    transform: translateX(-30%);
    transform: translateY(-25%);
    z-index: 0;
    pointer-events: none;
}

/* Header */
.chat-header[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    user-select: none;
    border-bottom: none !important;
    flex-shrink: 0;
}

    .chat-header .avatar[b-0cwfvfzxei] {
        width: 48px;
        height: 48px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .chat-header .user-info[b-0cwfvfzxei] {
        flex-grow: 1;
        min-width: 0;
        overflow: hidden;
    }

    .chat-header .user-name[b-0cwfvfzxei] {
        font-size: 18px;
        font-weight: 500;
        color: #000;
    }

        .chat-header .user-name > div[b-0cwfvfzxei] {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .chat-header .user-status[b-0cwfvfzxei] {
        font-size: 12px;
        font-weight: 400;
        color: #92CD4D;
        margin-top: 2px;
    }

.back-to-users-btn[b-0cwfvfzxei] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #4D7CFE;
    background-color: #EFF4FF;
    border: 1px solid #B9CCF9;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

    .back-to-users-btn:hover[b-0cwfvfzxei] {
        background-color: #DDE8FF;
    }

/* User List */
.user-list[b-0cwfvfzxei] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 1000px;
    margin: 20px;
}

.user-list-header[b-0cwfvfzxei] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.user-list-title[b-0cwfvfzxei] {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
    color: #333;
}

.show-all-users-btn[b-0cwfvfzxei] {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #4D7CFE;
    background-color: #EFF4FF;
    border: 1px solid #B9CCF9;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .show-all-users-btn:hover[b-0cwfvfzxei] {
        background-color: #DDE8FF;
    }

.user-list-items[b-0cwfvfzxei] {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .user-list-items[b-0cwfvfzxei]::-webkit-scrollbar {
        display: none;
    }

.user-item[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background 0.2s;
}

    .user-item:last-child[b-0cwfvfzxei] {
        border-bottom: none;
    }

    .user-item:hover[b-0cwfvfzxei] {
        background: #f5f5f5;
    }

.user-avatar[b-0cwfvfzxei] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

.user-name-text[b-0cwfvfzxei] {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
}

.unread-indicator[b-0cwfvfzxei] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #FF4245;
    border-radius: 50%;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Chat Body */
.chat-body[b-0cwfvfzxei] {
    position: relative;
    z-index: 1;
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .chat-body[b-0cwfvfzxei]::-webkit-scrollbar {
        display: none;
    }

.placeholder-container[b-0cwfvfzxei] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.placeholder-text[b-0cwfvfzxei] {
    font-weight: 400;
    font-size: 32px;
    letter-spacing: 1.6px;
    margin-bottom: 20px;
    user-select: none;
}

.placeholder-img[b-0cwfvfzxei] {
    max-width: 250px;
    width: 100%;
    height: auto;
}

/* Messages */
.incoming[b-0cwfvfzxei],
.outgoing[b-0cwfvfzxei] {
    display: inline-block;
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 16px;
    margin-top: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.incoming[b-0cwfvfzxei] {
    background: #EFF4FF;
    color: #000;
    align-self: flex-start;
    border-radius: 16px 16px 16px 0;
}

.outgoing[b-0cwfvfzxei] {
    background: #4D7CFE;
    color: #fff;
    align-self: flex-end;
    border-radius: 16px 16px 0 16px;
}

.msg-meta[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
}

.incoming-meta[b-0cwfvfzxei] {
    justify-content: flex-start;
}

.outgoing-meta[b-0cwfvfzxei] {
    justify-content: flex-end;
}

.msg-time[b-0cwfvfzxei] {
    font-size: 13px;
    color: #AFB8CF;
}

.sender-info[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.sender-avatar[b-0cwfvfzxei] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.sender-name[b-0cwfvfzxei] {
    font-size: 13px;
    color: #888;
}

/* Attachments & Audio */
.attachment-message[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .attachment-message a[b-0cwfvfzxei] {
        color: inherit;
        text-decoration: underline;
    }

.audio-message-container[b-0cwfvfzxei] {
    display: flex;
    margin-top: 10px;
    max-width: 80%;
    padding: 8px 12px;
}

.audio-message-incoming[b-0cwfvfzxei] {
    align-self: flex-start;
    background: #EFF4FF;
    border-radius: 16px 16px 16px 0;
}

.audio-message-outgoing[b-0cwfvfzxei] {
    align-self: flex-end;
    background: #4D7CFE;
    border-radius: 16px 16px 0 16px;
}

.staged-attachment[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f0f0f0;
    border-radius: 8px;
    margin-bottom: 10px;
}

.delete-staged-btn[b-0cwfvfzxei] {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
    padding: 0 5px;
    line-height: 1;
}

    .delete-staged-btn:hover[b-0cwfvfzxei] {
        color: #000;
    }

.file-icon[b-0cwfvfzxei] {
    width: 24px;
    height: 24px;
}

.incoming .file-icon[b-0cwfvfzxei] {
    filter: invert(1);
}

.outgoing .file-icon[b-0cwfvfzxei] {
    filter: invert(0);
}

/* Input Area */
.chat-input-area[b-0cwfvfzxei] {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 20px;
    flex-shrink: 0;
}

.chat-input[b-0cwfvfzxei] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.message-input[b-0cwfvfzxei] {
    flex: 1;
    height: 42px;
    max-height: 126px;
    padding: 8px 12px;
    border: 1px solid #000;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.5;
    font-family: inherit;
    overflow-y: auto;
    resize: none;
    margin-right: 10px;
}

.attach-btn[b-0cwfvfzxei] {
    flex: 0 0 auto;
    margin-left: 10px;
    width: 42px;
    height: 42px;
    border: none;
    background: #92CD4D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(146, 205, 77, 0.3);
    flex-shrink: 0;
}

    .attach-btn:hover:not(:disabled)[b-0cwfvfzxei] {
        transform: translateY(-2px);
        background: #7db83a;
        box-shadow: 0 8px 20px rgba(146, 205, 77, 0.4);
    }

    .attach-btn:active:not(:disabled)[b-0cwfvfzxei] {
        transform: translateY(0);
    }

    .attach-btn:disabled[b-0cwfvfzxei] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    .attach-btn img[b-0cwfvfzxei] {
        width: 24px;
        height: 24px;
    }

.send-chat-button[b-0cwfvfzxei] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 24px 0 16px;
    width: auto;
    min-width: 120px;
    height: 42px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

    .send-chat-button:hover[b-0cwfvfzxei] {
        background: #4D7CFE;
        border-color: #4D7CFE;
        color: #fff;
        box-shadow: 0 4px 12px rgba(36, 72, 205, 0.35);
        transform: translateY(-1px);
    }

    .send-chat-button:active[b-0cwfvfzxei] {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(36, 72, 205, 0.2);
    }

    .send-chat-button:disabled[b-0cwfvfzxei] {
        background: #e8e8e8;
        border-color: #d0d0d0;
        color: #999;
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.6;
    }

.send-icon[b-0cwfvfzxei] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    order: -1;
}

.send-chat-button:not(:disabled):hover .send-icon[b-0cwfvfzxei] {
    filter: brightness(0) invert(1);
}

.send-chat-button:disabled .send-icon[b-0cwfvfzxei] {
    opacity: 0.5;
}

/* Loading & Spinners */
.chat-loading-container[b-0cwfvfzxei] {
    text-align: center;
    padding: 3rem;
}

.page-loading-spinner[b-0cwfvfzxei] {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px auto;
    position: relative;
}

    .page-loading-spinner[b-0cwfvfzxei]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #000;
        animation: spin-b-0cwfvfzxei 1s linear infinite;
        box-sizing: border-box;
    }

    .page-loading-spinner[b-0cwfvfzxei]::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('/favicon.svg') no-repeat center center;
        background-size: contain;
        z-index: 5;
    }

.loading-more-spinner[b-0cwfvfzxei] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin-b-0cwfvfzxei 1s linear infinite;
    margin: 10px auto;
}

.button-spinner[b-0cwfvfzxei] {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-0cwfvfzxei 1s linear infinite;
    margin: 0 auto;
}

.send-chat-button:hover .button-spinner[b-0cwfvfzxei] {
    border-top-color: #fff;
}

.date-separator[b-0cwfvfzxei] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    gap: 12px;
}

    .date-separator[b-0cwfvfzxei]::before,
    .date-separator[b-0cwfvfzxei]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e0e0e0;
    }

.date-separator__text[b-0cwfvfzxei] {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
    background: #fff;
    padding: 0 8px;
}

.chat-link[b-0cwfvfzxei] {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.incoming .chat-link[b-0cwfvfzxei] {
    color: #4D7CFE;
}

.outgoing .chat-link[b-0cwfvfzxei] {
    color: #fff;
    text-decoration: underline;
}

.loading-top-indicator[b-0cwfvfzxei] {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 5;
    border-bottom: 1px solid #e0e0e0;
}

.loading-top-spinner[b-0cwfvfzxei] {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-0cwfvfzxei 0.8s linear infinite;
}

@keyframes spin-b-0cwfvfzxei {
    to {
        transform: rotate(360deg);
    }
}

/* Tablet breakpoint */
@media (max-width: 1100px) {
    .chat-container[b-0cwfvfzxei] {
        left: 0;
        margin-top: 0;
        height: calc(100vh - 80px);
    }
}

/* Mobile breakpoint - Optimized for iOS and Android */
@media (max-width: 768px) {
    /* Prevent body scroll - only chat-body should scroll */
    html[b-0cwfvfzxei], body[b-0cwfvfzxei] {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .chat-container[b-0cwfvfzxei] {
        position: fixed;
        top: 60px; /* Account for layout header (adjust based on your header height) */
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-width: 100vw;
        width: 100vw;
        padding: 0;
        margin: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .chat-page[b-0cwfvfzxei] {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .chat-main[b-0cwfvfzxei] {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
    }

    .chat-content[b-0cwfvfzxei] {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .chat-background[b-0cwfvfzxei] {
        display: none;
    }
    /* Chat Header - Fixed at top */
    .chat-header[b-0cwfvfzxei] {
        position: sticky;
        top: 0;
        padding: 12px 10px;
        flex-wrap: nowrap;
        gap: 6px;
        flex-shrink: 0;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        z-index: 10;
    }

        .chat-header .avatar[b-0cwfvfzxei] {
            width: 36px;
            height: 36px;
            margin-right: 8px;
            flex-shrink: 0;
        }

        .chat-header .user-info[b-0cwfvfzxei] {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .chat-header .user-name[b-0cwfvfzxei] {
            font-size: 15px;
            line-height: 1.2;
            font-weight: 500;
        }

            .chat-header .user-name span[b-0cwfvfzxei] {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .chat-header .user-name > div[b-0cwfvfzxei] {
                font-size: 11px !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 2px;
                color: #888;
            }

    .back-to-users-btn[b-0cwfvfzxei] {
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
        margin-right: 0 !important;
    }

        .back-to-users-btn:first-of-type[b-0cwfvfzxei] {
            margin-right: 4px !important;
        }
    /* Chat Body - ONLY scrollable area */
    .chat-body[b-0cwfvfzxei] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px 10px;
        padding-bottom: 20px;
        margin-bottom: 70px;
        position: relative;
    }
    /* Redesigned Input Footer - Fixed to bottom, Safari safe area aware */
    .chat-input-area[b-0cwfvfzxei] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 8px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* iOS safe area */
        background: #fff;
        border-top: 1px solid #e0e0e0;
        flex-shrink: 0;
        z-index: 1000;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    }

    .chat-input[b-0cwfvfzxei] {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        width: 100%;
    }

    .message-input[b-0cwfvfzxei] {
        flex: 1;
        min-height: 40px;
        max-height: 120px;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 10px 14px;
        margin: 0;
        border: 1px solid #ddd;
        border-radius: 20px;
        line-height: 1.4;
        background: #f8f8f8;
    }

        .message-input:focus[b-0cwfvfzxei] {
            border-color: #4D7CFE;
            background: #fff;
            outline: none;
        }
    /* Hide send button text on mobile */
    .send-chat-button span[b-0cwfvfzxei] {
        display: none;
    }
    /* Compact circular buttons */
    .attach-btn[b-0cwfvfzxei],
    .send-chat-button[b-0cwfvfzxei] {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        line-height: 1;
        box-sizing: border-box;
    }

        .attach-btn:active[b-0cwfvfzxei],
        .send-chat-button:active[b-0cwfvfzxei] {
            transform: scale(0.92);
        }

    .attach-btn[b-0cwfvfzxei] {
        background: #92CD4D;
        box-shadow: 0 4px 12px rgba(146, 205, 77, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .attach-btn:hover:not(:disabled)[b-0cwfvfzxei] {
            transform: translateY(-2px);
            background: #7db83a;
            box-shadow: 0 8px 20px rgba(146, 205, 77, 0.4);
        }

        .attach-btn:active:not(:disabled)[b-0cwfvfzxei] {
            transform: translateY(0);
        }

        .attach-btn:disabled[b-0cwfvfzxei] {
            background: #d0d0d0;
            box-shadow: none;
            opacity: 0.6;
        }

        .attach-btn img[b-0cwfvfzxei] {
            width: 20px;
            height: 20px;
            transition: transform 0.2s ease;
        }

        .attach-btn:active:not(:disabled) img[b-0cwfvfzxei] {
            transform: scale(0.9);
        }

    .send-chat-button[b-0cwfvfzxei] {
        background: #f0f0f0;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

        .send-chat-button:hover[b-0cwfvfzxei] {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .send-chat-button.has-text[b-0cwfvfzxei] {
            background: #4D7CFE;
            box-shadow: 0 3px 8px rgba(36, 72, 205, 0.4);
        }

            .send-chat-button.has-text:hover[b-0cwfvfzxei] {
                box-shadow: 0 4px 12px rgba(36, 72, 205, 0.5);
            }

        .send-chat-button:disabled[b-0cwfvfzxei] {
            background: #d0d0d0;
            box-shadow: none;
            opacity: 0.6;
        }

    .send-icon[b-0cwfvfzxei] {
        width: 20px;
        height: 20px;
        transition: all 0.2s ease;
        filter: none;
    }

    .send-chat-button.has-text .send-icon[b-0cwfvfzxei] {
        filter: brightness(0) invert(1);
    }

    .staged-attachment[b-0cwfvfzxei] {
        gap: 6px;
        padding: 8px 10px;
        margin-bottom: 8px;
        font-size: 13px;
        border-radius: 12px;
        background-color: #f5f5f5;
    }

        .staged-attachment a[b-0cwfvfzxei] {
            font-size: 13px;
            word-break: break-all;
            flex: 1;
            min-width: 0;
        }

        .staged-attachment .delete-staged-btn[b-0cwfvfzxei] {
            font-size: 20px;
            color: #ff4245;
        }
    /* User List - Admin View */
    .user-list[b-0cwfvfzxei] {
        margin: 10px;
        padding: 12px;
        max-height: none;
        height: calc(100vh - 100px);
        border-radius: 12px;
        overflow: hidden;
    }

    .user-list-header[b-0cwfvfzxei] {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }

    .user-list-title[b-0cwfvfzxei] {
        font-size: 18px;
        text-align: left;
    }

    .show-all-users-btn[b-0cwfvfzxei] {
        width: 100%;
        padding: 10px 12px;
        font-size: 13px;
    }

    .user-list-items[b-0cwfvfzxei] {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 200px);
    }

    .user-item[b-0cwfvfzxei] {
        padding: 12px 8px;
        border-radius: 8px;
    }

        .user-item:hover[b-0cwfvfzxei] {
            background: #f8f8f8;
        }

    .user-avatar[b-0cwfvfzxei] {
        width: 40px;
        height: 40px;
    }

    .user-name-text[b-0cwfvfzxei] {
        font-size: 15px;
    }

    .user-item span:not(.user-name-text):not(.unread-indicator)[b-0cwfvfzxei] {
        font-size: 12px !important;
    }

    .placeholder-text[b-0cwfvfzxei] {
        font-size: 18px;
        letter-spacing: 0.5px;
        padding: 0 20px;
    }

    .placeholder-img[b-0cwfvfzxei] {
        max-width: 180px;
    }

    .incoming[b-0cwfvfzxei], .outgoing[b-0cwfvfzxei] {
        max-width: 85%;
        font-size: 15px;
        padding: 10px 14px;
    }

    .msg-time[b-0cwfvfzxei] {
        font-size: 11px;
    }

    .sender-name[b-0cwfvfzxei] {
        font-size: 11px;
    }

    .sender-avatar[b-0cwfvfzxei] {
        width: 14px;
        height: 14px;
    }

    .audio-message-container[b-0cwfvfzxei] {
        max-width: 85%;
    }

    .attachment-message a[b-0cwfvfzxei] {
        font-size: 14px;
    }

    .page-loading-spinner[b-0cwfvfzxei] {
        width: 60px;
        height: 60px;
    }

        .page-loading-spinner[b-0cwfvfzxei]::before {
            width: 24px;
            height: 24px;
        }

    .date-separator[b-0cwfvfzxei] {
        margin: 12px 0;
        gap: 8px;
    }

    .date-separator__text[b-0cwfvfzxei] {
        font-size: 11px;
    }
}

/* Extra small devices - Further optimizations */
@media (max-width: 400px) {
    .chat-container[b-0cwfvfzxei] {
        top: 60px; /* Adjust if your header is smaller on very small screens */
    }

    .chat-header[b-0cwfvfzxei] {
        padding: 10px 8px;
    }

        .chat-header .avatar[b-0cwfvfzxei] {
            width: 32px;
            height: 32px;
        }

        .chat-header .user-name[b-0cwfvfzxei] {
            font-size: 14px;
        }

            .chat-header .user-name > div[b-0cwfvfzxei] {
                font-size: 10px !important;
            }

    .back-to-users-btn[b-0cwfvfzxei] {
        font-size: 10px;
        padding: 5px 8px;
    }

    .chat-input-area[b-0cwfvfzxei] {
        padding: 8px 6px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .chat-input[b-0cwfvfzxei] {
        gap: 6px;
    }

    .message-input[b-0cwfvfzxei] {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 16px !important;
    }

    .attach-btn[b-0cwfvfzxei],
    .send-chat-button[b-0cwfvfzxei] {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

        .attach-btn img[b-0cwfvfzxei],
        .send-icon[b-0cwfvfzxei] {
            width: 18px;
            height: 18px;
        }
}
/* /Pages/Completion.razor.rz.scp.css */
.completion-summary-page[b-5aocwl25xo] {
    --completion-color-text: #1a1a1a;
    --completion-color-muted: #666;
    --completion-color-border: #e0e0e0;
    --completion-color-primary: #4D7CFE;
    --completion-color-success: #92CD4D;
    --completion-color-error: #FF4245;
    --completion-color-accent: #FF6243;
    --completion-radius: 12px;
    --completion-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --completion-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --completion-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
    --completion-gap: 28px;
    --completion-vh: 1640px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--completion-color-text);
    max-width: 1700px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    position: relative;
    user-select: none;
    min-height: 100vh;
}

    .completion-summary-page *[b-5aocwl25xo] {
        user-select: none;
    }

    .completion-summary-page textarea[b-5aocwl25xo],
    .completion-summary-page input[b-5aocwl25xo],
    .completion-summary-page button[b-5aocwl25xo] {
        font-family: inherit;
    }

/* Inputs */
.completion-comment-wrapper[b-5aocwl25xo] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.completion-comment-footer[b-5aocwl25xo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.completion-comment-input[b-5aocwl25xo] {
    user-select: text;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 16px 40px 16px;
    font-size: 15px;
    line-height: 1.6;
    border: 2px solid transparent;
    border-radius: calc(var(--completion-radius) - 2px);
    background: rgba(0, 0, 0, 0.02);
    resize: none;
    transition: all 0.3s ease;
    min-height: 120px;
}

    .completion-comment-input:hover[b-5aocwl25xo] {
        background: rgba(0, 0, 0, 0.03);
    }

    .completion-comment-input:focus[b-5aocwl25xo] {
        outline: none;
        border: 2px solid var(--completion-color-primary);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(77, 124, 254, 0.1);
    }

    .completion-comment-input[b-5aocwl25xo]::placeholder {
        color: var(--completion-color-muted);
        opacity: 0.6;
    }

    .completion-comment-input:disabled[b-5aocwl25xo] {
        opacity: 0.6;
        cursor: not-allowed;
        background: #f5f5f5;
    }

.completion-char-counter[b-5aocwl25xo] {
    font-size: 12px;
    color: var(--completion-color-muted);
    font-weight: 500;
}

.completion-save-comment-btn[b-5aocwl25xo] {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid var(--completion-color-primary);
    border-radius: 18px;
    background: #fff;
    color: var(--completion-color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

    .completion-save-comment-btn:hover:not(:disabled)[b-5aocwl25xo] {
        background: var(--completion-color-primary);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--completion-shadow-sm);
    }

    .completion-save-comment-btn:active:not(:disabled)[b-5aocwl25xo] {
        transform: translateY(0);
    }

    .completion-save-comment-btn:disabled[b-5aocwl25xo] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.completion-comment-saved-badge[b-5aocwl25xo] {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    background: var(--completion-color-success);
    color: #fff;
    border-radius: 18px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* Save Success Toast */
.completion-save-toast[b-5aocwl25xo] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--completion-color-success);
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--completion-radius);
    box-shadow: var(--completion-shadow-hover);
    font-size: 14px;
    font-weight: 600;
    z-index: 10001;
    animation: completion-toast-slide-in-b-5aocwl25xo 0.3s ease, completion-toast-slide-out-b-5aocwl25xo 0.3s ease 2.7s;
}

@keyframes completion-toast-slide-in-b-5aocwl25xo {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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

@keyframes completion-toast-slide-out-b-5aocwl25xo {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Confirmation Modal */
.completion-confirmation-overlay[b-5aocwl25xo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    user-select: auto;
}

.completion-confirmation-modal[b-5aocwl25xo] {
    background: #fff;
    border-radius: var(--completion-radius);
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: completion-modal-appear-b-5aocwl25xo 0.3s ease;
    user-select: auto;
    position: relative;
    z-index: 10001;
}

@keyframes completion-modal-appear-b-5aocwl25xo {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

.completion-confirmation-title[b-5aocwl25xo] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: var(--completion-color-text);
    text-align: center;
    user-select: auto;
}

.completion-confirmation-text[b-5aocwl25xo] {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 32px 0;
    color: var(--completion-color-text);
    text-align: center;
    user-select: auto;
}

.completion-confirmation-buttons[b-5aocwl25xo] {
    display: flex;
    gap: 16px;
    justify-content: center;
    user-select: none;
}

.completion-confirmation-btn[b-5aocwl25xo] {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    min-width: 120px;
    border: 2px solid;
    user-select: none;
    position: relative;
    z-index: 10002;
}

.completion-btn-no[b-5aocwl25xo] {
    border-color: var(--completion-color-muted);
    background: #fff;
    color: var(--completion-color-muted);
}

    .completion-btn-no:hover[b-5aocwl25xo] {
        background: var(--completion-color-muted);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: var(--completion-shadow-sm);
    }

    .completion-btn-no:active[b-5aocwl25xo] {
        transform: translateY(0);
    }

.completion-btn-yes[b-5aocwl25xo] {
    border-color: var(--completion-color-success);
    background: var(--completion-color-success);
    color: #fff;
}

    .completion-btn-yes:hover[b-5aocwl25xo] {
        background: #7ab93d;
        border-color: #7ab93d;
        transform: translateY(-2px);
        box-shadow: var(--completion-shadow-md);
    }

    .completion-btn-yes:active[b-5aocwl25xo] {
        transform: translateY(0);
    }

/* Header */
.completion-header-row[b-5aocwl25xo] {
    width: var(--completion-vh);
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.completion-module-label[b-5aocwl25xo] {
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--completion-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.completion-page-title[b-5aocwl25xo] {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--completion-color-text);
    letter-spacing: -0.5px;
}

/* Layout */
.completion-content-sections[b-5aocwl25xo] {
    display: flex;
    flex-direction: column;
    gap: var(--completion-gap);
}

.completion-grid-container[b-5aocwl25xo] {
    width: var(--completion-vh);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 790px 830px;
    grid-auto-rows: minmax(200px, auto);
    gap: var(--completion-gap);
    grid-template-areas:
        "topic teacher-comment"
        "vocab self-comment";
}

.completion-section-box[b-5aocwl25xo] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 28px;
    background: #fff;
    border: 2px solid var(--completion-color-border);
    border-radius: var(--completion-radius);
    box-shadow: var(--completion-shadow-sm);
    transition: all 0.3s ease;
}

.completion-topic-box[b-5aocwl25xo] {
    grid-area: topic;
}

.completion-vocab-box[b-5aocwl25xo] {
    grid-area: vocab;
}

.completion-comment-box[b-5aocwl25xo] {
    grid-area: teacher-comment;
}

.completion-self-comment-box[b-5aocwl25xo] {
    grid-area: self-comment;
}

.completion-topic-box[b-5aocwl25xo],
.completion-vocab-box[b-5aocwl25xo] {
    border-color: var(--completion-color-success);
    border-left-width: 6px;
}

.completion-comment-box[b-5aocwl25xo],
.completion-self-comment-box[b-5aocwl25xo] {
    border-color: var(--completion-color-primary);
    border-left-width: 6px;
}

.completion-mistakes-box[b-5aocwl25xo] {
    border-color: var(--completion-color-accent);
    border-left-width: 6px;
}

.completion-topic-box[b-5aocwl25xo],
.completion-vocab-box[b-5aocwl25xo],
.completion-comment-box[b-5aocwl25xo],
.completion-self-comment-box[b-5aocwl25xo] {
    min-height: 200px;
}

.completion-wide-box[b-5aocwl25xo] {
    width: var(--completion-vh);
    margin: 0 auto;
    min-height: 300px;
}

.completion-section-title[b-5aocwl25xo] {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: var(--completion-color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.completion-section-content[b-5aocwl25xo] {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    overflow: auto;
    color: var(--completion-color-text);
}

/* Rating */
.completion-rating-box[b-5aocwl25xo] {
    padding: 28px;
    text-align: right;
    border: 2px solid var(--completion-color-border);
    background: #fff;
    box-shadow: var(--completion-shadow-sm);
    min-width: 280px;
}

.completion-rating-row[b-5aocwl25xo] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.completion-stars[b-5aocwl25xo] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.completion-star-icon[b-5aocwl25xo] {
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

    .completion-star-icon:hover[b-5aocwl25xo] {
        transform: scale(1.15);
    }

    .completion-star-icon:active[b-5aocwl25xo] {
        transform: scale(1.05);
    }

/* Navigation */
.completion-navigation-buttons[b-5aocwl25xo] {
    width: var(--completion-vh);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

    .completion-navigation-buttons button[b-5aocwl25xo] {
        height: 52px;
        padding: 0 32px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 26px;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: var(--completion-shadow-sm);
        letter-spacing: 0.3px;
    }

        .completion-navigation-buttons button:hover[b-5aocwl25xo] {
            box-shadow: var(--completion-shadow-hover);
            transform: translateY(-2px);
        }

        .completion-navigation-buttons button:active[b-5aocwl25xo] {
            transform: translateY(0);
        }

.completion-nav-right[b-5aocwl25xo] {
    width: 180px;
    border: 2px solid var(--completion-color-success);
    color: var(--completion-color-success);
}

    .completion-nav-right:hover[b-5aocwl25xo] {
        background: var(--completion-color-success);
        color: #fff;
        border-color: var(--completion-color-success);
    }

.completion-back-button[b-5aocwl25xo] {
    width: 300px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--completion-color-primary);
    color: var(--completion-color-primary);
}

    .completion-back-button:hover[b-5aocwl25xo] {
        background: var(--completion-color-primary);
        color: #fff;
        border-color: var(--completion-color-primary);
    }

.completion-char-counter[b-5aocwl25xo] {
    font-size: 12px;
    color: var(--completion-color-muted);
    font-weight: 500;
}

/* Mistakes grid */
.completion-mistakes-box .completion-modules-grid[b-5aocwl25xo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.completion-module-card[b-5aocwl25xo] {
    background: rgba(0, 0, 0, 0.02);
    border: 2px solid var(--completion-color-border);
    border-radius: calc(var(--completion-radius) - 2px);
    padding: 20px;
    transition: all 0.3s ease;
}

.completion-module-header[b-5aocwl25xo] {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--completion-color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.completion-mistake-list[b-5aocwl25xo] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.completion-mistake-item[b-5aocwl25xo] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.7;
    border-bottom: 1px solid var(--completion-color-border);
}

    .completion-mistake-item:last-child[b-5aocwl25xo] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.completion-question-prompt[b-5aocwl25xo] {
    margin-bottom: 12px;
    font-weight: 500;
}

    .completion-question-prompt strong[b-5aocwl25xo] {
        font-weight: 600;
        color: var(--completion-color-text);
    }

.completion-blank-item p[b-5aocwl25xo] {
    margin: 8px 0;
    padding: 0;
}

.completion-template-line[b-5aocwl25xo] {
    font-weight: 500;
    margin-bottom: 10px !important;
}

.completion-mistake-item strong[b-5aocwl25xo] {
    color: var(--completion-color-text);
    font-weight: 600;
}

.completion-mistake-item .completion-user-answer[b-5aocwl25xo],
.completion-mistake-item .completion-user-answer .completion-answer[b-5aocwl25xo] {
    color: var(--completion-color-error);
    font-weight: 600;
}

.completion-mistake-item .completion-correct-answer[b-5aocwl25xo],
.completion-mistake-item .completion-correct-answer .completion-answer[b-5aocwl25xo] {
    color: var(--completion-color-success);
    font-weight: 600;
}

.completion-mistake-item p[b-5aocwl25xo] {
    margin: 6px 0;
}

.completion-no-errors[b-5aocwl25xo] {
    font-style: italic;
    color: var(--completion-color-muted);
    text-align: center;
    padding: 40px;
    font-size: 16px;
}

/* Load More Button */
.completion-load-more-container[b-5aocwl25xo] {
    text-align: center;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px dashed var(--completion-color-border);
}

.completion-load-more-btn[b-5aocwl25xo] {
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid var(--completion-color-primary);
    border-radius: 24px;
    background: #fff;
    color: var(--completion-color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--completion-shadow-sm);
    letter-spacing: 0.3px;
}

    .completion-load-more-btn:hover[b-5aocwl25xo] {
        background: var(--completion-color-primary);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: var(--completion-shadow-hover);
    }

    .completion-load-more-btn:active[b-5aocwl25xo] {
        transform: translateY(0);
    }

.completion-mistakes-counter[b-5aocwl25xo] {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--completion-color-muted);
    font-weight: 500;
}

/* Loading Overlay */
.completion-loading-page-overlay[b-5aocwl25xo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.completion-loading-page-container[b-5aocwl25xo] {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto;
}

.completion-loading-page-progress[b-5aocwl25xo] {
    position: absolute;
    width: 130px;
    height: 130px;
    animation: completion-spin-loader-b-5aocwl25xo 1.5s linear infinite;
}

    .completion-loading-page-progress circle[b-5aocwl25xo] {
        fill: none;
        stroke: var(--completion-color-primary);
        stroke-width: 3;
        stroke-dasharray: 150;
        stroke-dashoffset: 0;
    }

.completion-loading-page-logo[b-5aocwl25xo] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
}

@keyframes completion-spin-loader-b-5aocwl25xo {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Stage 2: Fluid two-column layout for medium screens */
@media (max-width: 1700px) {
    .completion-summary-page[b-5aocwl25xo] {
        padding: 40px 20px 60px;
    }

    .completion-header-row[b-5aocwl25xo],
    .completion-grid-container[b-5aocwl25xo],
    .completion-wide-box[b-5aocwl25xo],
    .completion-navigation-buttons[b-5aocwl25xo] {
        width: 100%;
        --completion-vh: 100%;
    }

    .completion-header-row[b-5aocwl25xo] {
        gap: 20px;
    }

    .completion-grid-container[b-5aocwl25xo] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "topic teacher-comment"
            "vocab self-comment";
    }

    .completion-navigation-buttons[b-5aocwl25xo] {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding: 0;
        box-sizing: border-box;
    }

    .completion-nav-right[b-5aocwl25xo],
    .completion-back-button[b-5aocwl25xo] {
        flex-grow: 0;
        min-width: auto;
    }

    .completion-nav-right[b-5aocwl25xo] {
        width: 180px;
    }

    .completion-back-button[b-5aocwl25xo] {
        width: 300px;
    }
}

/* Switch header to column at smaller breakpoint */
@media (max-width: 1200px) {
    .completion-header-row[b-5aocwl25xo] {
        flex-direction: column;
        align-items: stretch;
    }

    .completion-rating-box[b-5aocwl25xo] {
        text-align: center;
    }

    .completion-rating-row[b-5aocwl25xo] {
        justify-content: center;
    }

    .completion-stars[b-5aocwl25xo] {
        justify-content: center;
    }
}

/* Stage 3: Stacked single-column layout for narrow screens */
@media (max-width: 992px) {
    .completion-summary-page[b-5aocwl25xo] {
        padding: 30px 16px 50px;
    }

    .completion-page-title[b-5aocwl25xo] {
        font-size: 36px;
    }

    .completion-grid-container[b-5aocwl25xo] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topic"
            "vocab"
            "teacher-comment"
            "self-comment";
    }

    .completion-navigation-buttons[b-5aocwl25xo] {
        flex-direction: column;
        align-items: stretch;
    }

    .completion-nav-right[b-5aocwl25xo],
    .completion-back-button[b-5aocwl25xo] {
        width: 100%;
    }

    .completion-star-icon[b-5aocwl25xo] {
        width: 32px;
        height: 32px;
    }
    /* Mistakes grid adjustments */
    .completion-mistakes-box .completion-modules-grid[b-5aocwl25xo] {
        grid-template-columns: 1fr;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .completion-summary-page[b-5aocwl25xo] {
        padding: 20px 12px 40px;
    }

    .completion-page-title[b-5aocwl25xo] {
        font-size: 28px;
    }

    .completion-section-box[b-5aocwl25xo] {
        padding: 20px;
    }

    .completion-star-icon[b-5aocwl25xo] {
        width: 28px;
        height: 28px;
    }

    .completion-stars[b-5aocwl25xo] {
        gap: 6px;
    }

    .completion-rating-box[b-5aocwl25xo] {
        padding: 20px;
    }

    .completion-load-more-btn[b-5aocwl25xo] {
        width: 100%;
        padding: 16px;
    }

    .completion-navigation-buttons button[b-5aocwl25xo] {
        padding: 0 24px;
    }

    .completion-confirmation-modal[b-5aocwl25xo] {
        padding: 24px;
    }

    .completion-confirmation-title[b-5aocwl25xo] {
        font-size: 20px;
    }

    .completion-confirmation-text[b-5aocwl25xo] {
        font-size: 14px;
    }

    .completion-confirmation-buttons[b-5aocwl25xo] {
        flex-direction: column;
    }

    .completion-confirmation-btn[b-5aocwl25xo] {
        width: 100%;
    }

    .completion-save-toast[b-5aocwl25xo] {
        top: 10px;
        right: 10px;
        left: 10px;
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* Disabled state */
.completion-disabled[b-5aocwl25xo] {
    opacity: 0.5;
    pointer-events: none;
}

    .completion-disabled:hover[b-5aocwl25xo] {
        transform: none !important;
        box-shadow: var(--completion-shadow-sm) !important;
    }

.completion-premium-badge[b-5aocwl25xo] {
    display: inline-block;
    background: var(--completion-color-primary);
    color: white;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
}

/* Self-comment warning */
.completion-self-comment-warning[b-5aocwl25xo] {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(255, 98, 67, 0.1);
    border-left: 3px solid var(--completion-color-accent);
    border-radius: 6px;
    font-size: 13px;
    color: var(--completion-color-accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.completion-self-comment-warning-permanent[b-5aocwl25xo] {
    animation: none;
}
/* /Pages/LandingPage.razor.rz.scp.css */
/* =====================================================
   LandingPage — Page-specific styles
   ===================================================== */
.content-wrapper[b-f1gi914oma] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.content-wrapper.loaded[b-f1gi914oma] {
    opacity: 1;
}

.landing-page[b-f1gi914oma] {
    width: 100%;
    font-size: var(--text-s);
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-dark);
    outline: none;
}

.loading-page-overlay[b-f1gi914oma] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100lvh;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Desktop/Mobile visibility */
[b-f1gi914oma] .desktop-only {
    display: block;
}

[b-f1gi914oma] .mobile-only {
    display: block;
}

@media (min-width: 1024px) {
    [b-f1gi914oma] .mobile-only {
        display: none;
    }
}

@media (max-width: 1023px) {
    [b-f1gi914oma] .desktop-only {
        display: none;
    }
}

/* =====================================================
   Shared utilities (::deep → cascade into child components)
   ===================================================== */
[b-f1gi914oma] a {
    all: unset;
    color: var(--primary-dark);
    font-weight: 500;
    transition: var(--transition-fast);
}

[b-f1gi914oma] a:hover {
    cursor: pointer;
    color: var(--text-light);
}

[b-f1gi914oma] a img {
    transition: var(--transition-fast);
}

[b-f1gi914oma] a:hover img {
    opacity: 0.5;
}

/* Section base */
[b-f1gi914oma] .section {
    display: flex;
    align-items: center;
    padding: var(--spacing-xxl) var(--spacing-l);
    position: relative;
}

[b-f1gi914oma] .section-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
    align-items: center;
    width: 100%;
}

[b-f1gi914oma] .section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-l);
    z-index: 2;
}

/* Title sizes */
[b-f1gi914oma] .title-xxl {
    font-size: var(--text-xxl);
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    text-align: center;
}

[b-f1gi914oma] .title-xl {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    text-align: center;
}

[b-f1gi914oma] .title-lg {
    font-size: var(--text-l);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    text-align: center;
}

[b-f1gi914oma] .title-m {
    font-size: var(--text-m);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    text-align: center;
}

[b-f1gi914oma] .title-s {
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
    text-align: center;
}

/* Text utilities */
[b-f1gi914oma] .text-muted {
    color: var(--text-light);
}

[b-f1gi914oma] .text-bold {
    font-weight: 600;
}

[b-f1gi914oma] .text-italic {
    font-style: italic;
}

[b-f1gi914oma] .text-center {
    text-align: center;
}

[b-f1gi914oma] .text-xs {
    font-size: var(--text-xs);
}

[b-f1gi914oma] .text-centered-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Button utilities */
[b-f1gi914oma] .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
    padding: var(--spacing-l) var(--spacing-xl);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--transition-normal);
    border: none;
    cursor: pointer;
}

[b-f1gi914oma] .btn-primary {
    background: var(--primary-color);
    color: var(--bg-white);
}

[b-f1gi914oma] .btn-primary:hover {
    opacity: 0.7 !important;
    color: var(--bg-white);
}

[b-f1gi914oma] .btn-secondary {
    background: var(--primary-dark);
    color: var(--bg-white);
}

[b-f1gi914oma] .btn-secondary:hover {
    opacity: 0.7 !important;
    color: var(--bg-white);
}

[b-f1gi914oma] .button-inline {
    display: flex;
    gap: var(--spacing-s);
    align-items: center;
}

/* Icon animation */
[b-f1gi914oma] .icon-float {
    animation: levitate-b-f1gi914oma 3s ease-in-out infinite;
}

@keyframes levitate-b-f1gi914oma {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Shared slider */
[b-f1gi914oma] .slider-container {
    width: clamp(300px, calc(100vw - var(--spacing-l) * 2), 500px);
    cursor: grab;
}

[b-f1gi914oma] .slider-container.dragging {
    cursor: grabbing;
}

[b-f1gi914oma] .slider-track {
    display: flex;
    gap: var(--spacing-l);
    padding: var(--spacing-l) 0;
    width: max-content;
}

[b-f1gi914oma] .slider-card {
    flex-shrink: 0;
    width: clamp(300px, calc(100vw - var(--spacing-l) * 2), 500px);
}

/* Slider dots */
[b-f1gi914oma] .slider-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-s);
    padding: var(--spacing-l) 0;
}

[b-f1gi914oma] .slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

[b-f1gi914oma] .slider-dot:hover {
    background: var(--text-light);
}

[b-f1gi914oma] .slider-dot.active {
    background: var(--primary-color);
    width: 24px;
    border-radius: 4px;
}

/* Shared video wrap */
[b-f1gi914oma] .video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: var(--shadow);
}

[b-f1gi914oma] .video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Shared feature card base (used by Features + Features2) */
[b-f1gi914oma] .feature-card {
    position: relative;
    width: 100%;
    height: 350px;
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: var(--spacing-xxl) var(--spacing-xl) 0;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-s);
    overflow: hidden;
    transform-origin: top center;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

[b-f1gi914oma] .feature-card:hover .feature-icon {
    scale: 1.1;
}

[b-f1gi914oma] .feature-icon {
    position: absolute;
    bottom: 0;
    order: 1;
    flex: 1;
    display: flex;
    align-items: flex-end;
    transform-origin: bottom center;
    mix-blend-mode: darken;
    transition: scale var(--transition-normal);
    pointer-events: none;
    z-index: 0;
}

[b-f1gi914oma] .feature-icon img {
    width: auto;
    height: var(--icon-xxl);
}

/* Shared list styles (used by Features4 + OrbitMap) */
[b-f1gi914oma] .features4-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

[b-f1gi914oma] .features4-list-summary {
    order: -1;
    font-weight: 600;
    padding-bottom: var(--spacing-m);
}

[b-f1gi914oma] .features4-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-m);
}

[b-f1gi914oma] .features4-list-icon {
    width: var(--icon-s);
    height: var(--icon-s);
}

/* Shared legend (used by Features4 + OrbitMap) */
[b-f1gi914oma] .orbitmap-legend-items {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-m);
}

[b-f1gi914oma] .orbitmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
    font-size: 0.9rem;
    color: var(--text-muted);
}

[b-f1gi914oma] .orbitmap-legend-icon {
    width: 20px;
    height: 20px;
}

[b-f1gi914oma] .orbitmap-legend-inline {
    margin-top: var(--spacing-m);
}

/* Cookie consent banner */
[b-f1gi914oma] .cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    z-index: 999;
    pointer-events: none;
    padding: var(--spacing-l);
}

[b-f1gi914oma] .cookie-inner {
    pointer-events: auto;
    max-width: 1100px;
    width: 100%;
    background: var(--bg-white);
    box-shadow: var(--shadow);
    border-radius: var(--radius-s);
    padding: var(--spacing-l);
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    margin: 0 auto;
}

[b-f1gi914oma] .cookie-message {
    font-size: var(--text-xs);
    color: var(--text-dark);
    flex: 1 1 auto;
}

[b-f1gi914oma] .cookie-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
}

[b-f1gi914oma] .cookie-btn {
    border: none;
    padding: var(--spacing-m) var(--spacing-l);
    border-radius: var(--radius-s);
    font-weight: 600;
    cursor: pointer;
}

[b-f1gi914oma] .cookie-accept {
    background: var(--primary-color);
    color: #fff;
}

[b-f1gi914oma] .cookie-decline {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

[b-f1gi914oma] .cookie-link {
    color: var(--text-light);
    text-decoration: underline;
    font-size: var(--text-xs);
    margin-left: var(--spacing-s);
}

@media (max-width: 768px) {
    [b-f1gi914oma] .cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-m);
    }

    [b-f1gi914oma] .cookie-message {
        flex: 1 1 auto;
        margin-bottom: var(--spacing-s);
    }

    [b-f1gi914oma] .cookie-actions {
        flex-direction: column;
        width: 100%;
    }

    [b-f1gi914oma] .cookie-btn {
        width: 100%;
    }

    [b-f1gi914oma] .cookie-link {
        text-align: center;
        margin-left: 0;
        display: block;
        padding: var(--spacing-m) 0;
    }
}
/* /Pages/Login_Register/Contact.razor.rz.scp.css */
:root[b-on1kudrw6x] {
    --primary-text-color: #000;
    --secondary-text-color: #6E6E6E;
    --error-color: #FF0000;
    --primary-brand-color: #4D7CFE;
    --background-color: #fff;
    --border-color: #6E6E6E;
    --border-radius-sm: 10px;
    --border-radius-lg: 20px;
}

body[b-on1kudrw6x], .container[b-on1kudrw6x], .container *[b-on1kudrw6x] {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    user-select: none;
}

.container[b-on1kudrw6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    min-height: auto;
    margin: 0 auto;
    padding: calc(70px + var(--spacing-xxl)) 1rem 3rem;
}

.left-col[b-on1kudrw6x] {
    display: none;
}

.right-col[b-on1kudrw6x] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
}

.help-title[b-on1kudrw6x] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    letter-spacing: 0.6px;
    text-align: center;
}

    .help-title .highlight[b-on1kudrw6x] {
        position: relative;
        display: inline-block;
    }

        .help-title .highlight[b-on1kudrw6x]::before {
            content: "";
            position: absolute;
            top: calc(50% + 5px);
            left: 50%;
            width: 140px;
            height: 60px;
            background: url('images/highlight-yellow.svg') no-repeat center center;
            background-size: contain;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

.help-form[b-on1kudrw6x] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.field-container[b-on1kudrw6x] {
    position: relative;
}

.input-row[b-on1kudrw6x] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.help-input[b-on1kudrw6x] {
    width: 100%;
    height: 40px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
}

.help-input-full[b-on1kudrw6x] {
    width: 100%;
    height: 40px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
}

.help-textarea[b-on1kudrw6x] {
    width: 100%;
    height: 120px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    resize: none;
}

.submit-button[b-on1kudrw6x] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--primary-text-color);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    font-size: 1rem;
    color: var(--primary-text-color);
    background-color: var(--background-color);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0;
}

    .submit-button:hover:not(:disabled)[b-on1kudrw6x] {
        background-color: var(--primary-brand-color);
        color: var(--background-color);
        border-color: transparent;
    }

        .submit-button:hover:not(:disabled) .send-icon[b-on1kudrw6x] {
            filter: brightness(0) invert(1);
        }

    .submit-button:disabled[b-on1kudrw6x] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.send-icon[b-on1kudrw6x] {
    width: 20px;
    height: 20px;
    transition: filter 0.3s;
}

.contact-buttons[b-on1kudrw6x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.telegram-button[b-on1kudrw6x] {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    font-size: 1rem;
    color: var(--background-color);
    background-color: var(--primary-brand-color);
    transition: background-color 0.3s;
}

    .telegram-button:hover[b-on1kudrw6x] {
        background-color: #1e3ca8;
    }

    .telegram-button img[b-on1kudrw6x] {
        width: 24px;
        height: 24px;
        filter: brightness(0) invert(1);
    }

.email-button[b-on1kudrw6x] {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid transparent;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    font-size: 1rem;
    color: var(--background-color);
    background-color: #92CD4D;
    transition: background-color 0.3s;
}

    .email-button:hover[b-on1kudrw6x] {
        background-color: #7fb042;
    }

    .email-button img[b-on1kudrw6x] {
        width: 22px;
        height: 22px;
        filter: brightness(0) invert(1);
    }

.error-input[b-on1kudrw6x] {
    border-color: var(--error-color) !important;
}

.error-text[b-on1kudrw6x] {
    color: var(--error-color);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 4px;
    padding-left: 2px;
}

/* ======= RESPONSIVE OVERRIDES: MOBILE ======= */
@media (max-width: 600px) {
    .container[b-on1kudrw6x] {
        padding: calc(70px + var(--spacing-xxl)) 1rem 2rem;
    }

    .help-title .highlight[b-on1kudrw6x]::before {
        width: 100px;
        height: 45px;
    }
}

/* ======= RESPONSIVE OVERRIDES: TABLET AND UP ======= */
@media (min-width: 768px) {
    .container[b-on1kudrw6x] {
        padding: calc(70px + var(--spacing-xxl)) 1rem 3rem;
    }

    .right-col[b-on1kudrw6x] {
        max-width: 550px;
    }

    .help-title[b-on1kudrw6x] {
        font-size: 2.25rem;
    }

        .help-title .highlight[b-on1kudrw6x]::before {
            width: 160px;
            height: 70px;
        }

    .input-row[b-on1kudrw6x] {
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }

        .input-row > div[b-on1kudrw6x] {
            flex: 1;
        }

        .input-row .help-input[b-on1kudrw6x] {
            width: 100%;
        }

    .submit-button[b-on1kudrw6x] {
        align-self: flex-end;
        width: 220px;
    }

    .contact-buttons[b-on1kudrw6x] {
        flex-direction: row;
        gap: 1rem;
        align-self: flex-end;
        width: auto;
        margin-top: 1.5rem;
    }

    .telegram-button[b-on1kudrw6x],
    .email-button[b-on1kudrw6x] {
        flex: 0 0 auto;
        width: auto;
        min-width: 164px;
    }

    .telegram-button[b-on1kudrw6x] {
        padding: 0 1.5rem;
    }

    .email-button[b-on1kudrw6x] {
        padding: 0 1.5rem;
    }
}

/* ======= RESPONSIVE OVERRIDES: LARGE DESKTOP ======= */
@media (min-width: 1200px) {
    .container[b-on1kudrw6x] {
        padding: calc(70px + var(--spacing-xxl)) 1rem 4rem;
    }

    .right-col[b-on1kudrw6x] {
        max-width: 655px;
    }

    .help-title .highlight[b-on1kudrw6x]::before {
        width: 190px;
        height: 80px;
    }
}
/* /Pages/Login_Register/Register.razor.rz.scp.css */
:root[b-bkzaux6oay] {
    --primary-text-color: #000;
    --secondary-text-color: #6E6E6E;
    --error-color: #FF0000;
    --primary-brand-color: #4D7CFE;
    --background-color: #fff;
    --border-color: #6E6E6E;
    --border-radius-sm: 10px;
    --border-radius-lg: 20px;
}

body[b-bkzaux6oay], .container[b-bkzaux6oay], .container *[b-bkzaux6oay] {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    user-select: none;
}

.container[b-bkzaux6oay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    min-height: auto;
    margin: 0 auto;
    padding: calc(70px + var(--spacing-xxl)) 1rem 3rem;
}

.right-col[b-bkzaux6oay] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
}

.login-title[b-bkzaux6oay] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    letter-spacing: 0.6px;
    text-align: center;
}

.login-form[b-bkzaux6oay] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.field-container[b-bkzaux6oay] {
    position: relative;
}

.login-input[b-bkzaux6oay] {
    width: 100%;
    height: 40px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
}

.password-container[b-bkzaux6oay] {
    position: relative;
}

    .password-container input[b-bkzaux6oay] {
        width: 100%;
        height: 40px;
        padding: 0.5rem 2.5rem 0.5rem 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

.eye-icon[b-bkzaux6oay] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 24px;
    height: 24px;
}

    .eye-icon img[b-bkzaux6oay] {
        width: 100%;
        height: 100%;
        display: block;
    }

.extra-links[b-bkzaux6oay] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

    .extra-links span[b-bkzaux6oay] {
        font-size: 0.75rem;
        font-weight: 400;
        letter-spacing: 0.5px;
        text-decoration: underline;
        color: var(--primary-text-color);
        cursor: pointer;
    }

.login-button[b-bkzaux6oay] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--primary-text-color);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    font-size: 1rem;
    color: var(--primary-text-color);
    background-color: var(--background-color);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

    .login-button:hover:not(:disabled)[b-bkzaux6oay] {
        background-color: var(--primary-brand-color);
        color: var(--background-color);
        border-color: transparent;
    }

        .login-button:hover:not(:disabled) .rocket-icon[b-bkzaux6oay] {
            filter: brightness(0) invert(1);
        }

    .login-button:disabled[b-bkzaux6oay] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.rocket-icon[b-bkzaux6oay] {
    width: 20px;
    height: 20px;
    transition: filter 0.3s;
}

.social-login-divider[b-bkzaux6oay] {
    text-align: center;
    margin: 1rem 0;
    font-size: 1rem;
    color: var(--secondary-text-color);
}

.social-buttons[b-bkzaux6oay] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-button[b-bkzaux6oay] {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: background-color 0.3s;
    gap: 10px;
}

    .social-button:hover[b-bkzaux6oay] {
        background-color: #f3f3f3;
    }

    .social-button img[b-bkzaux6oay] {
        height: 18px;
        width: 18px;
    }

    .social-button .social-text[b-bkzaux6oay] {
        display: inline;
        font-size: 0.9rem;
        font-weight: 500;
    }

.error-input[b-bkzaux6oay] {
    border-color: var(--error-color) !important;
}

.error-text[b-bkzaux6oay] {
    color: var(--error-color);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 4px;
    padding-left: 2px;
}

/* Styles specific to Register page */
.checkbox-container[b-bkzaux6oay] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.checkbox-label[b-bkzaux6oay] {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--secondary-text-color);
}

    .checkbox-label input[type="checkbox"][b-bkzaux6oay] {
        width: 16px;
        height: 16px;
    }

    .checkbox-label a[b-bkzaux6oay] {
        color: var(--primary-text-color);
    }

.checkbox-error[b-bkzaux6oay] {
    color: var(--error-color);
}

/* ======= RESPONSIVE OVERRIDES: MOBILE ======= */
@media (max-width: 600px) {
    .container[b-bkzaux6oay] {
        padding: calc(70px + var(--spacing-xxl)) 1rem 2rem;
    }
}

/* ======= RESPONSIVE OVERRIDES: TABLET AND UP ======= */
@media (min-width: 768px) {
    .container[b-bkzaux6oay] {
        padding: calc(70px + var(--spacing-xxl)) 1rem 3rem;
    }

    .right-col[b-bkzaux6oay] {
        max-width: 550px;
    }

    .login-title[b-bkzaux6oay] {
        font-size: 2.25rem;
    }

    .login-button[b-bkzaux6oay] {
        align-self: flex-end;
        width: 220px;
    }

    .social-buttons[b-bkzaux6oay] {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }

    .social-button[b-bkzaux6oay] {
        flex: 0 1 auto;
        border-radius: var(--border-radius-lg);
        gap: 15px;
        padding: 0 1rem;
        width: 240px;
        height: 42px;
    }
}

/* ======= RESPONSIVE OVERRIDES: LARGE DESKTOP ======= */
@media (min-width: 1200px) {
    .container[b-bkzaux6oay] {
        padding: calc(70px + var(--spacing-xxl)) 1rem 4rem;
    }

    .right-col[b-bkzaux6oay] {
        max-width: 655px;
    }

    .social-button[b-bkzaux6oay] {
        width: 280px;
    }

        .social-button .social-text[b-bkzaux6oay] {
            display: inline;
        }
}
/* /Pages/ModuleSelection.razor.rz.scp.css */
.select-module-page[b-nk0xv2ngbn] {
    font-family: 'Montserrat', sans-serif;
    background-color: #fff;
    padding: 0.5rem;
    user-select: none;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    min-width: 800px;
}

    .select-module-page.simple-view h2[b-nk0xv2ngbn] {
        font-size: 24px;
        font-weight: normal;
        margin-bottom: 1rem;
        text-align: left;
    }

    .select-module-page.simple-view .sub-text[b-nk0xv2ngbn] {
        font-size: 24px;
        font-weight: normal;
        color: #000;
        text-align: left;
        display: block;
    }

ul.module-items[b-nk0xv2ngbn],
ul.module-items li[b-nk0xv2ngbn],
ul.submodules-ul[b-nk0xv2ngbn],
ul.submodules-ul li[b-nk0xv2ngbn] {
    list-style: none;
}

    ul.module-items li:focus[b-nk0xv2ngbn],
    ul.submodules-ul li:focus[b-nk0xv2ngbn] {
        outline: none;
    }

.module-name-debug[b-nk0xv2ngbn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Progress circle and module header hover interactions */
.module-header[b-nk0xv2ngbn] {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 20px;
}

.module-header-info[b-nk0xv2ngbn] {
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-height: 108px;
    align-self: center;
    transition: transform 0.2s ease-in-out;
    transform-origin: left center;
    width: fit-content;
    max-width: calc(100% - 128px - 20px);
}

    .module-header-info:hover[b-nk0xv2ngbn],
    .module-header .progress-circle:hover + .module-header-info[b-nk0xv2ngbn] {
        transform: scale(1.03);
    }

.module-header .progress-circle[b-nk0xv2ngbn] {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
}

    .module-header .progress-circle:hover[b-nk0xv2ngbn],
    .module-header-info:hover ~ .progress-circle[b-nk0xv2ngbn],
    .module-header .module-header-info:hover + .back-button ~ .progress-circle[b-nk0xv2ngbn] {
        transform: scale(1.05);
    }

/* Main module items hover effects */
.module-item.main-module[b-nk0xv2ngbn] {
    margin-bottom: 50px;
    position: relative;
}

.module-item-info[b-nk0xv2ngbn] {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    min-height: 108px;
    transition: transform 0.2s ease-in-out;
    transform-origin: left center;
    width: fit-content;
    max-width: calc(100% - 128px - 20px);
}

    .module-item-info:hover[b-nk0xv2ngbn],
    .module-item .progress-circle:hover + .module-item-info[b-nk0xv2ngbn] {
        transform: scale(1.1);
    }

.module-item .progress-circle[b-nk0xv2ngbn] {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
}

    .module-item .progress-circle:hover[b-nk0xv2ngbn],
    .module-item-info:hover ~ .progress-circle[b-nk0xv2ngbn] {
        transform: scale(1.1);
    }

/* Handle the specific case where progress-circle comes before module-item-info in main modules */
.module-item.main-module:has(.progress-circle:hover) .module-item-info[b-nk0xv2ngbn],
.module-item.main-module:has(.module-item-info:hover) .progress-circle[b-nk0xv2ngbn] {
    transform: scale(1.1);
}

/* Submodule hover interactions */
.item-text[b-nk0xv2ngbn] {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.2s ease-in-out;
    transform-origin: left center;
    width: fit-content;
    max-width: calc(100% - 65px);
}

    .item-text:hover[b-nk0xv2ngbn],
    .submodule .item-check-icon:hover + .item-text[b-nk0xv2ngbn],
    .submodule .item-circle-icon:hover + .item-text[b-nk0xv2ngbn] {
        transform: scale(1.03);
    }

.submodule .item-check-icon[b-nk0xv2ngbn] {
    width: 35px;
    height: 35px;
    background: url('/images/module-select-check.svg') no-repeat center;
    background-size: contain;
    margin-right: 30px;
    opacity: 1;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity 0.2s;
    transform-origin: center;
    flex-shrink: 0;
}

    .submodule .item-check-icon:hover[b-nk0xv2ngbn],
    .submodule .item-text:hover ~ .item-check-icon[b-nk0xv2ngbn] {
        transform: scale(1.2);
    }

.submodule .item-circle-icon[b-nk0xv2ngbn] {
    width: 35px;
    height: 35px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 30px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, border-color 0.2s;
    transform-origin: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .submodule .item-circle-icon:hover[b-nk0xv2ngbn],
    .submodule .item-text:hover ~ .item-circle-icon[b-nk0xv2ngbn] {
        transform: scale(1.2);
    }

/* Handle the specific case where icons come before item-text in submodules */
.submodule:has(.item-check-icon:hover) .item-text[b-nk0xv2ngbn],
.submodule:has(.item-circle-icon:hover) .item-text[b-nk0xv2ngbn] {
    transform: scale(1.03);
}

.submodule:has(.item-text:hover) .item-check-icon[b-nk0xv2ngbn],
.submodule:has(.item-text:hover) .item-circle-icon[b-nk0xv2ngbn] {
    transform: scale(1.2);
}

.progress-circle[b-nk0xv2ngbn] {
    width: 108px;
    height: 108px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#92CD4D calc(var(--progress) * 3.6deg), #e0f7e9 0deg 360deg);
    box-sizing: border-box;
    z-index: 1;
    margin-right: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

    .progress-circle[b-nk0xv2ngbn]::after {
        content: "";
        position: absolute;
        width: 98px;
        height: 98px;
        background: #fff;
        border-radius: 50%;
        z-index: 2;
    }

.progress-value[b-nk0xv2ngbn] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: #92CD4D;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.module-description[b-nk0xv2ngbn] {
    font-size: 16px;
    color: #555;
    text-align: left;
    margin-top: 4px;
    margin-bottom: 0;
}

.module-item-info h3[b-nk0xv2ngbn],
.module-header-info h2[b-nk0xv2ngbn] {
    font-size: 24px;
    font-weight: normal;
    color: #000;
    margin: 0;
    cursor: pointer;
    text-align: left;
}

.back-button[b-nk0xv2ngbn] {
    margin-left: auto;
    background-color: #eee;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .back-button:hover[b-nk0xv2ngbn] {
        background-color: #ddd;
    }

.item-text strong[b-nk0xv2ngbn] {
    font-size: 24px;
    font-weight: normal;
}

.sub-description[b-nk0xv2ngbn] {
    font-size: 16px;
    color: #333;
    margin: 0.25rem 0 0;
    text-align: left;
}

.lesson-completed .item-text strong[b-nk0xv2ngbn] {
    color: gray;
    text-decoration: line-through;
}

.lesson-completed .item-check-icon[b-nk0xv2ngbn] {
    opacity: 1;
}

.lesson-active .item-text strong[b-nk0xv2ngbn] {
    font-weight: normal;
    color: #000;
}

.lesson-active .item-text p[b-nk0xv2ngbn] {
    color: #333;
}

.lesson-locked .item-text strong[b-nk0xv2ngbn] {
    color: gray;
}

.lesson-locked .item-text p[b-nk0xv2ngbn] {
    color: #777;
}

.module-item[b-nk0xv2ngbn] {
    list-style: none;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
}

.debug-control[b-nk0xv2ngbn] {
    font-size: 12px;
    color: #666;
}

    .debug-control label[b-nk0xv2ngbn] {
        margin-right: 0.5rem;
    }

    .debug-control input[type="range"][b-nk0xv2ngbn] {
        width: 200px;
        vertical-align: middle;
    }

.submodules-list[b-nk0xv2ngbn] {
    margin-bottom: 50px;
    margin-left: 50px;
}

.submodules-ul[b-nk0xv2ngbn] {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Simple view hover effects */
.select-module-page.simple-view .sub-text[b-nk0xv2ngbn] {
    transition: transform 0.2s ease-in-out;
    transform-origin: left center;
    display: inline-block;
    width: fit-content;
}

    .select-module-page.simple-view .sub-text:hover[b-nk0xv2ngbn] {
        transform: scale(1.03);
    }

.module-loading-container[b-nk0xv2ngbn] {
    text-align: center;
    padding: 3rem;
}

.loading-spinner[b-nk0xv2ngbn] {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px auto;
    position: relative;
}

    .loading-spinner[b-nk0xv2ngbn]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #000;
        animation: spin-b-nk0xv2ngbn 1s linear infinite;
        box-sizing: border-box;
    }

    .loading-spinner[b-nk0xv2ngbn]::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('/favicon.svg') no-repeat center center;
        background-size: contain;
        z-index: 5;
    }

@keyframes spin-b-nk0xv2ngbn {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Styling for locked modules */
.lesson-locked .item-check-icon[b-nk0xv2ngbn],
.lesson-locked .item-circle-icon[b-nk0xv2ngbn] {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: default;
}

.lesson-locked .progress-circle[b-nk0xv2ngbn] {
    background: conic-gradient(#cccccc calc(var(--progress) * 3.6deg), #eeeeee 0deg 360deg);
    opacity: 0.7;
    cursor: default;
}

.lesson-locked .progress-value[b-nk0xv2ngbn] {
    background-color: #cccccc;
}

/* Responsive styles - Tablet and below */
@media (max-width: 768px) {
    .select-module-page[b-nk0xv2ngbn] {
        min-width: 0;
        padding: 1.5rem;
        margin-top: 30px;
    }

    .module-header[b-nk0xv2ngbn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

        .module-header .back-button[b-nk0xv2ngbn] {
            margin-left: 0;
            order: -1;
            align-self: flex-end;
            margin-bottom: 0.5rem;
        }

        .module-header .progress-circle[b-nk0xv2ngbn] {
            order: 0;
            margin-right: 0;
            margin-bottom: 0.75rem;
        }

    .module-header-info[b-nk0xv2ngbn] {
        order: 1;
        min-height: unset;
        width: 100%;
        max-width: 100%;
    }

    .module-item.main-module[b-nk0xv2ngbn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 35px;
    }

        .module-item.main-module .progress-circle[b-nk0xv2ngbn] {
            margin-right: 0;
            margin-bottom: 0.75rem;
        }

    .module-item-info[b-nk0xv2ngbn] {
        min-height: unset;
        width: 100%;
        max-width: 100%;
    }

    .item-text[b-nk0xv2ngbn] {
        width: 100%;
        max-width: 100%;
    }

    .progress-circle[b-nk0xv2ngbn] {
        width: 90px;
        height: 90px;
        margin-right: 0;
    }

        .progress-circle[b-nk0xv2ngbn]::after {
            width: 80px;
            height: 80px;
        }

    .progress-value[b-nk0xv2ngbn] {
        font-size: 14px;
        padding: 0.2rem 0.6rem;
    }

    .module-item-info h3[b-nk0xv2ngbn],
    .module-header-info h2[b-nk0xv2ngbn] {
        font-size: 20px;
    }

    .item-text strong[b-nk0xv2ngbn] {
        font-size: 20px;
    }

    .select-module-page.simple-view .sub-text[b-nk0xv2ngbn] {
        font-size: 20px;
    }

    .select-module-page.simple-view h2[b-nk0xv2ngbn] {
        font-size: 20px;
    }

    .module-description[b-nk0xv2ngbn],
    .sub-description[b-nk0xv2ngbn] {
        font-size: 14px;
    }

    .submodules-list[b-nk0xv2ngbn] {
        margin-left: 10px;
        margin-bottom: 35px;
    }

    .submodules-ul[b-nk0xv2ngbn] {
        gap: 40px;
    }

    .submodule .item-check-icon[b-nk0xv2ngbn],
    .submodule .item-circle-icon[b-nk0xv2ngbn] {
        width: 32px;
        height: 32px;
        margin-right: 20px;
    }

    .back-button[b-nk0xv2ngbn] {
        font-size: 13px;
        padding: 0.45rem 0.9rem;
    }
}

/* Responsive styles - Mobile devices (350px - 480px) */
@media (max-width: 480px) {
    .select-module-page[b-nk0xv2ngbn] {
        padding: 1rem;
        margin-top: 20px;
    }

    .module-header[b-nk0xv2ngbn] {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

        .module-header .progress-circle[b-nk0xv2ngbn] {
            margin-bottom: 0.5rem;
        }

    .progress-circle[b-nk0xv2ngbn] {
        width: 70px;
        height: 70px;
    }

        .progress-circle[b-nk0xv2ngbn]::after {
            width: 62px;
            height: 62px;
        }

    .progress-value[b-nk0xv2ngbn] {
        font-size: 12px;
        padding: 0.15rem 0.5rem;
    }

    .module-item-info h3[b-nk0xv2ngbn],
    .module-header-info h2[b-nk0xv2ngbn] {
        font-size: 18px;
        line-height: 1.3;
    }

    .item-text strong[b-nk0xv2ngbn] {
        font-size: 18px;
        line-height: 1.3;
    }

    .select-module-page.simple-view .sub-text[b-nk0xv2ngbn] {
        font-size: 18px;
        line-height: 1.3;
    }

    .select-module-page.simple-view h2[b-nk0xv2ngbn] {
        font-size: 18px;
        line-height: 1.3;
    }

    .module-description[b-nk0xv2ngbn],
    .sub-description[b-nk0xv2ngbn] {
        font-size: 13px;
        line-height: 1.4;
    }

    .module-item.main-module[b-nk0xv2ngbn] {
        margin-bottom: 25px;
        gap: 0.5rem;
    }

        .module-item.main-module .progress-circle[b-nk0xv2ngbn] {
            margin-bottom: 0.5rem;
        }

    .submodules-list[b-nk0xv2ngbn] {
        margin-left: 5px;
        margin-bottom: 25px;
    }

    .submodules-ul[b-nk0xv2ngbn] {
        gap: 30px;
    }

    .submodule .item-check-icon[b-nk0xv2ngbn],
    .submodule .item-circle-icon[b-nk0xv2ngbn] {
        width: 28px;
        height: 28px;
        margin-right: 15px;
    }

    .back-button[b-nk0xv2ngbn] {
        font-size: 12px;
        padding: 0.4rem 0.8rem;
    }

    .loading-spinner[b-nk0xv2ngbn] {
        width: 50px;
        height: 50px;
    }

        .loading-spinner[b-nk0xv2ngbn]::before {
            width: 20px;
            height: 20px;
        }
    /* Disable hover effects on mobile for better touch interaction */
    .module-header-info:hover[b-nk0xv2ngbn],
    .module-item-info:hover[b-nk0xv2ngbn],
    .item-text:hover[b-nk0xv2ngbn],
    .module-header .progress-circle:hover + .module-header-info[b-nk0xv2ngbn],
    .module-item .progress-circle:hover + .module-item-info[b-nk0xv2ngbn],
    .submodule .item-check-icon:hover + .item-text[b-nk0xv2ngbn],
    .submodule .item-circle-icon:hover + .item-text[b-nk0xv2ngbn] {
        transform: none;
    }

        .progress-circle:hover[b-nk0xv2ngbn],
        .submodule .item-check-icon:hover[b-nk0xv2ngbn],
        .submodule .item-circle-icon:hover[b-nk0xv2ngbn],
        .module-header-info:hover ~ .progress-circle[b-nk0xv2ngbn],
        .module-item-info:hover ~ .progress-circle[b-nk0xv2ngbn],
        .submodule .item-text:hover ~ .item-check-icon[b-nk0xv2ngbn],
        .submodule .item-text:hover ~ .item-circle-icon[b-nk0xv2ngbn] {
            transform: none;
        }

    .module-item.main-module:has(.progress-circle:hover) .module-item-info[b-nk0xv2ngbn],
    .module-item.main-module:has(.module-item-info:hover) .progress-circle[b-nk0xv2ngbn],
    .submodule:has(.item-check-icon:hover) .item-text[b-nk0xv2ngbn],
    .submodule:has(.item-circle-icon:hover) .item-text[b-nk0xv2ngbn],
    .submodule:has(.item-text:hover) .item-check-icon[b-nk0xv2ngbn],
    .submodule:has(.item-text:hover) .item-circle-icon[b-nk0xv2ngbn] {
        transform: none;
    }
}

/* Extra small devices (350px minimum) */
@media (max-width: 400px) {
    .select-module-page[b-nk0xv2ngbn] {
        padding: 0.75rem;
        margin-top: 15px;
    }

    .module-header[b-nk0xv2ngbn] {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .progress-circle[b-nk0xv2ngbn] {
        width: 60px;
        height: 60px;
    }

        .progress-circle[b-nk0xv2ngbn]::after {
            width: 52px;
            height: 52px;
        }

    .progress-value[b-nk0xv2ngbn] {
        font-size: 11px;
        padding: 0.1rem 0.4rem;
    }

    .module-item-info h3[b-nk0xv2ngbn],
    .module-header-info h2[b-nk0xv2ngbn] {
        font-size: 16px;
        line-height: 1.25;
    }

    .item-text strong[b-nk0xv2ngbn] {
        font-size: 16px;
        line-height: 1.25;
    }

    .select-module-page.simple-view .sub-text[b-nk0xv2ngbn] {
        font-size: 16px;
        line-height: 1.25;
    }

    .select-module-page.simple-view h2[b-nk0xv2ngbn] {
        font-size: 16px;
        line-height: 1.25;
    }

    .module-description[b-nk0xv2ngbn],
    .sub-description[b-nk0xv2ngbn] {
        font-size: 12px;
        line-height: 1.4;
    }

    .module-item.main-module[b-nk0xv2ngbn] {
        margin-bottom: 20px;
        gap: 0.5rem;
    }

    .submodules-list[b-nk0xv2ngbn] {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .submodules-ul[b-nk0xv2ngbn] {
        gap: 20px;
    }

    .submodule .item-check-icon[b-nk0xv2ngbn],
    .submodule .item-circle-icon[b-nk0xv2ngbn] {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    .back-button[b-nk0xv2ngbn] {
        font-size: 11px;
        padding: 0.35rem 0.7rem;
    }

    .module-loading-container[b-nk0xv2ngbn] {
        padding: 2rem 1rem;
    }

    .loading-spinner[b-nk0xv2ngbn] {
        width: 40px;
        height: 40px;
    }

        .loading-spinner[b-nk0xv2ngbn]::after {
            border-width: 3px;
        }

        .loading-spinner[b-nk0xv2ngbn]::before {
            width: 16px;
            height: 16px;
        }
}
/* /Pages/Progress.razor.rz.scp.css */
.tooltip-icon-container[b-nlkzjofkdr] {
    position: relative;
    display: inline-block;
}

.tooltip-icon[b-nlkzjofkdr] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #d0d0d0;
    transition: all 0.2s ease;
}

    .tooltip-icon img[b-nlkzjofkdr] {
        width: 8px;
        height: 8px;
        filter: invert(0.5);
        transition: filter 0.2s ease;
    }

.tooltip-icon-container:hover .tooltip-icon[b-nlkzjofkdr] {
    background-color: #f5f5f5;
    border-color: #808080;
}

    .tooltip-icon-container:hover .tooltip-icon img[b-nlkzjofkdr] {
        filter: invert(0.3);
    }

/* Base tooltip styles */
.tooltip-text[b-nlkzjofkdr],
.mistake-tooltip[b-nlkzjofkdr],
.bar-tooltip[b-nlkzjofkdr] {
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    background-color: #2c2c2c;
    color: #f0f0f0;
    border-radius: 4px;
    padding: 10px 12px;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    word-wrap: break-word;
    line-height: 1.5;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Tooltip text - appears above the element */
.tooltip-text[b-nlkzjofkdr] {
    width: 240px;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

    .tooltip-text[b-nlkzjofkdr]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -4px;
        border-width: 4px;
        border-style: solid;
        border-color: #2c2c2c transparent transparent transparent;
    }

/* Mistake tooltip - appears below the element */
.mistake-tooltip[b-nlkzjofkdr] {
    width: max-content;
    max-width: 280px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    text-align: left;
}

    .mistake-tooltip[b-nlkzjofkdr]::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -4px;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent #2c2c2c transparent;
    }

/* Bar chart tooltip */
.bar-tooltip[b-nlkzjofkdr] {
    width: max-content;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

    .bar-tooltip[b-nlkzjofkdr]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -4px;
        border-width: 4px;
        border-style: solid;
        border-color: #2c2c2c transparent transparent transparent;
    }

/* Show tooltips on hover */
.tooltip-icon-container:hover .tooltip-text[b-nlkzjofkdr],
.tooltip-icon-container:hover .mistake-tooltip[b-nlkzjofkdr],
.bar:hover .bar-tooltip[b-nlkzjofkdr] {
    visibility: visible;
    opacity: 1;
}

/* Responsive handling */
@media (max-width: 768px) {
    .tooltip-text[b-nlkzjofkdr], .mistake-tooltip[b-nlkzjofkdr] {
        max-width: 200px;
    }
}

.load-more-btn[b-nlkzjofkdr] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

    .load-more-btn:disabled[b-nlkzjofkdr] {
        cursor: not-allowed;
        background-color: #e0e0e0;
    }

.user-view-comment[b-nlkzjofkdr] {
    margin-top: 15px !important;
    font-size: 16px !important;
    color: #000 !important;
}

.admin-comment-wrapper[b-nlkzjofkdr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-height: 100px;
    padding-bottom: 20px;
}

.admin-comment-preview[b-nlkzjofkdr] {
    padding: 12px;
    font-size: 16px;
    line-height: 1.5;
    flex-grow: 1;
    color: #333;
    font-family: 'Montserrat', sans-serif;
}

    .admin-comment-preview .placeholder[b-nlkzjofkdr] {
        color: #808080;
    }

.admin-comment-input[b-nlkzjofkdr] {
    user-select: text;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    resize: none;
    line-height: 1.5;
    font-family: 'Montserrat', sans-serif;
    min-height: 80px;
}

    .admin-comment-input:focus[b-nlkzjofkdr] {
        outline: none;
    }

.admin-comment-wrapper:focus-within[b-nlkzjofkdr] {
    border-color: #4D7CFE;
    border-width: 2px;
    padding: 0;
}

.char-counter[b-nlkzjofkdr] {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 12px;
    color: #808080;
}

.bar-container[b-nlkzjofkdr] {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 33px;
    height: 100%;
}

.main-rating-display[b-nlkzjofkdr] {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.total-rating[b-nlkzjofkdr] {
    font-size: 1.5rem;
    font-weight: 500;
    color: #808080;
}

.rated-modules-info[b-nlkzjofkdr] {
    font-size: 1rem;
    color: #333;
}

.progress-container[b-nlkzjofkdr] {
    font-family: 'Montserrat', sans-serif;
    background-color: #FFFFFF;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    gap: 1.5rem;
    user-select: none;
    font-weight: 400;
    font-size: 16px;
}

.section-header[b-nlkzjofkdr] {
    grid-column: 1 / -1;
    text-align: left;
    margin: 1rem 0 -0.5rem 0;
}

    .section-header h2[b-nlkzjofkdr] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

.card[b-nlkzjofkdr] {
    background-color: #fff;
    border: 1px solid #414141;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    container-type: inline-size;
    position: relative;
    min-width: 550px;
}

.full-width[b-nlkzjofkdr] {
    grid-column: 1 / -1;
    height: auto;
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.card-content[b-nlkzjofkdr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    flex-grow: 1;
    gap: 1rem;
}

.text-content[b-nlkzjofkdr] {
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

    .text-content h3[b-nlkzjofkdr] {
        font-size: 24px;
        font-weight: 500;
        color: #333;
        margin: 0 0 0.25rem 0;
    }

    .text-content p[b-nlkzjofkdr] {
        font-size: 16px;
        color: #808080;
        margin: 0 0 1rem 0;
        font-weight: 400;
        line-height: 1.5;
        height: 4.2rem;
    }

    .text-content span[b-nlkzjofkdr] {
        font-size: 16px;
        color: #333;
        font-weight: 400;
    }

.chart-content[b-nlkzjofkdr] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-donut[b-nlkzjofkdr] {
    width: 40cqw;
    height: 40cqw;
    max-width: 165px;
    max-height: 165px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 1;
}

    .progress-donut[b-nlkzjofkdr]::after {
        content: "";
        position: absolute;
        width: 35cqw;
        height: 35cqw;
        max-width: 145px;
        max-height: 145px;
        background: #fff;
        border-radius: 50%;
        z-index: 2;
    }

    .progress-donut.green[b-nlkzjofkdr] {
        --color: #92CD4D;
        --track-color: #E9F5DB;
        background: conic-gradient(var(--color) calc(var(--progress) * 3.6deg), var(--track-color) 0deg 360deg);
    }

    .progress-donut.red[b-nlkzjofkdr] {
        --color: #FF4245;
        --track-color: #FEEBEE;
        background: conic-gradient(var(--color) calc(var(--progress) * 3.6deg), var(--track-color) 0deg 360deg);
    }

    .progress-donut.yellow[b-nlkzjofkdr] {
        --color: #EDC829;
        --track-color: #FFF9E1;
        background: conic-gradient(var(--color) calc(var(--progress) * 3.6deg), var(--track-color) 0deg 360deg);
    }

    .progress-donut.blue[b-nlkzjofkdr] {
        --color: #4D7CFE;
        --track-color: #E9EFFF;
        background: conic-gradient(var(--color) calc(var(--progress) * 3.6deg), var(--track-color) 0deg 360deg);
    }

.progress-value[b-nlkzjofkdr] {
    position: relative;
    z-index: 3;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--color);
    padding: 0.5rem 1.25rem;
    border-radius: 2.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.corrected-count-value[b-nlkzjofkdr] {
    font-size: 2.5rem;
    padding: 0.2rem 2rem;
}

.card-header[b-nlkzjofkdr] {
    background-color: transparent;
    text-align: left;
    margin-bottom: 1.5rem;
    border-bottom: none;
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.5rem 0 1.5rem;
}

    .card-header h3[b-nlkzjofkdr] {
        font-size: 24px;
        font-weight: 500;
        color: #333;
        margin: 0 0 0.25rem 0;
    }

    .card-header p[b-nlkzjofkdr] {
        font-size: 16px;
        color: #808080;
        margin: 0;
        font-weight: 400;
    }

.card-body-grid[b-nlkzjofkdr] {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    align-items: stretch;
    flex-grow: 1;
    position: relative;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Error list with horizontal scrolling support */
.error-list[b-nlkzjofkdr] {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 350px;
    position: relative;
    padding: 0;
}

    .error-list[b-nlkzjofkdr]::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .error-list[b-nlkzjofkdr]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .error-list[b-nlkzjofkdr]::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

        .error-list[b-nlkzjofkdr]::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

.error-list[b-nlkzjofkdr] {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

    .error-list h4[b-nlkzjofkdr] {
        font-size: 16px;
        font-weight: 400;
        margin: 0 0 1rem 0;
        text-align: left;
    }

    .error-list ol[b-nlkzjofkdr] {
        padding-left: 2.5rem;
        margin: 0;
        text-align: left;
        font-size: 16px;
        color: #333;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-weight: 400;
    }

.highlight-green[b-nlkzjofkdr] {
    color: #92CD4D;
    font-weight: 400;
}

.highlight-red[b-nlkzjofkdr] {
    color: #FF4245;
    font-weight: 400;
}

.bar-chart-container[b-nlkzjofkdr] {
    display: flex;
    flex-direction: row;
    height: 100%;
    flex-shrink: 0;
}

.y-axis-title[b-nlkzjofkdr] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    color: #808080;
    font-size: 16px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}

.chart-wrapper[b-nlkzjofkdr] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 250px;
}

.chart-area[b-nlkzjofkdr] {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    gap: 10px;
    border-bottom: 1px solid black;
}

.bar[b-nlkzjofkdr] {
    width: 100%;
    position: relative;
    border-radius: 2px 2px 0 0;
    z-index: 1;
}

.yellow .bar[b-nlkzjofkdr] {
    background-color: #EDC829;
}

.blue .bar[b-nlkzjofkdr] {
    background-color: #4D7CFE;
}

.bar-value[b-nlkzjofkdr] {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 400;
    color: #FF424559;
}

.bar-label[b-nlkzjofkdr] {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 400;
}

    .bar-label.text-label[b-nlkzjofkdr] {
        color: #808080;
        top: 100%;
        bottom: auto;
        transform: rotate(-45deg);
        transform-origin: top right;
        white-space: nowrap;
        margin-top: 5px;
        left: auto;
        right: 50%;
    }

.x-axis-labels[b-nlkzjofkdr] {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #808080;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.25rem 0;
}

    .x-axis-labels.text-labels[b-nlkzjofkdr] {
        padding-bottom: 0;
        bottom: 2rem;
    }

.x-axis-label-item[b-nlkzjofkdr] {
    width: 40px;
    text-align: center;
    position: relative;
}

    .x-axis-label-item span[b-nlkzjofkdr] {
        display: inline-block;
        white-space: nowrap;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform-origin: right;
        transform: translateX(-50%) rotate(-45deg);
    }

.x-axis-title[b-nlkzjofkdr] {
    text-align: center;
    font-size: 16px;
    color: #808080;
    padding-top: 0.5rem;
    font-weight: 400;
}

.commentary[b-nlkzjofkdr] {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.commentary-icon[b-nlkzjofkdr] {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .commentary-icon img[b-nlkzjofkdr] {
        width: 100%;
        height: 100%;
    }

.view-all-button[b-nlkzjofkdr] {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, border-color 0.3s;
}

    .view-all-button:hover[b-nlkzjofkdr] {
        background-color: #4D7CFE;
        color: #fff;
        border-color: transparent;
    }

.title-with-tooltip[b-nlkzjofkdr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modules-grid[b-nlkzjofkdr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    min-width: 100%;
}

.module-card[b-nlkzjofkdr] {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* Mistake list with horizontal scrolling support */
.mistake-list[b-nlkzjofkdr] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: min-content;
}

    .mistake-list[b-nlkzjofkdr]::-webkit-scrollbar {
        display: none;
    }

.mistake-item[b-nlkzjofkdr] {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    position: relative;
    white-space: normal;
    word-wrap: break-word;
    min-width: max-content;
    padding-right: 1rem;
}

    .mistake-item:last-child[b-nlkzjofkdr] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.question-prompt-wrapper[b-nlkzjofkdr] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
    margin: 0;
}

.question-prompt[b-nlkzjofkdr] {
    margin: 0;
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .question-prompt strong[b-nlkzjofkdr] {
        font-weight: 500;
    }

.user-answer[b-nlkzjofkdr], .correct-answer[b-nlkzjofkdr] {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 0;
}

.user-answer[b-nlkzjofkdr] {
    color: #FF4245;
}

.correct-answer[b-nlkzjofkdr] {
    color: #92CD4D;
}

.incorrect-attempts[b-nlkzjofkdr] {
    font-size: 0.85rem;
    color: #808080;
    margin-top: 0.5rem;
}

.incorrect-attempts-count[b-nlkzjofkdr] {
    font-size: 0.9em;
    color: #808080;
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
}

.no-errors[b-nlkzjofkdr] {
    font-style: italic;
    color: #808080;
}

/* Loading Overlay */
.module-loading-container[b-nlkzjofkdr] {
    text-align: center;
    padding: 3rem;
}

.loading-spinner[b-nlkzjofkdr] {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px auto;
    position: relative;
}

    .loading-spinner[b-nlkzjofkdr]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #000;
        animation: spin-b-nlkzjofkdr 1s linear infinite;
        box-sizing: border-box;
    }

    .loading-spinner[b-nlkzjofkdr]::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('/favicon.svg') no-repeat center center;
        background-size: contain;
        z-index: 5;
    }

@keyframes spin-b-nlkzjofkdr {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Image Modal Styles */
.image-modal[b-nlkzjofkdr] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    padding-top: 80px;
    overflow: hidden;
}

.modal-content[b-nlkzjofkdr] {
    position: relative;
    background-color: white;
    border-radius: 8px;
    padding: 0.75rem;
    width: fit-content;
    height: fit-content;
    max-width: 85%;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.expanded-image[b-nlkzjofkdr] {
    max-width: 100%;
    max-height: 65vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.close-button[b-nlkzjofkdr] {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 1001;
    flex-shrink: 0;
}

    .close-button:hover[b-nlkzjofkdr] {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Responsive Styles */
@media (max-width: 1200px) {
    .progress-container[b-nlkzjofkdr] {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }

    .card[b-nlkzjofkdr] {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .progress-container[b-nlkzjofkdr] {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .card[b-nlkzjofkdr] {
        padding: 1rem;
        min-height: auto;
    }

    .card-content[b-nlkzjofkdr] {
        flex-direction: row;
        gap: 1rem;
    }

    .text-content[b-nlkzjofkdr] {
        align-self: center;
        text-align: left;
    }

        .text-content h3[b-nlkzjofkdr] {
            font-size: 20px;
        }

        .text-content p[b-nlkzjofkdr] {
            font-size: 14px;
        }

    .chart-content[b-nlkzjofkdr] {
        width: auto;
        flex-shrink: 0;
    }

    .progress-donut[b-nlkzjofkdr] {
        width: 120px;
        height: 120px;
    }

        .progress-donut[b-nlkzjofkdr]::after {
            width: 100px;
            height: 100px;
        }

    .progress-value[b-nlkzjofkdr] {
        font-size: 1rem;
    }

    .corrected-count-value[b-nlkzjofkdr] {
        font-size: 2rem;
    }

    .card-header[b-nlkzjofkdr] {
        padding: 1rem 1rem 0 1rem;
        text-align: center;
    }

    .card-body-grid[b-nlkzjofkdr] {
        grid-template-columns: 1fr;
        padding: 0 1rem 1rem 1rem;
        gap: 1.5rem;
    }

    .bar-chart-container[b-nlkzjofkdr] {
        margin-top: 2rem;
    }

    .y-axis-title[b-nlkzjofkdr] {
        display: none;
    }

    .chart-wrapper[b-nlkzjofkdr] {
        min-height: 200px;
    }

    .x-axis-title[b-nlkzjofkdr] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .main-rating-display[b-nlkzjofkdr] {
        font-size: 2rem;
    }

    .total-rating[b-nlkzjofkdr] {
        font-size: 1.2rem;
    }

    .text-content h3[b-nlkzjofkdr] {
        font-size: 18px;
    }

    .text-content p[b-nlkzjofkdr], .text-content span[b-nlkzjofkdr] {
        font-size: 14px;
    }

    .mistake-item[b-nlkzjofkdr] {
        font-size: 0.9rem;
    }

    .progress-donut[b-nlkzjofkdr] {
        width: 120px;
        height: 120px;
    }

        .progress-donut[b-nlkzjofkdr]::after {
            width: 105px;
            height: 105px;
        }
}

.premium-prompt-wrapper[b-nlkzjofkdr] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    margin-top: 0.5rem;
}

.premium-prompt[b-nlkzjofkdr] {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #ffc107;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: #fffaf0;
    max-width: 800px;
}

.premium-text[b-nlkzjofkdr] {
    margin: 0;
    font-size: 16px;
    color: #856404;
    font-weight: 500;
    line-height: 1.5;
}

.upgrade-button[b-nlkzjofkdr] {
    background: linear-gradient(45deg, #ffc107, #ff9800);
    color: #414141;
    border-color: #856404;
    white-space: nowrap;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

    .upgrade-button:hover[b-nlkzjofkdr] {
        border-color: transparent;
        color: #fff;
        filter: brightness(110%);
    }

@media (max-width: 768px) {
    .premium-prompt[b-nlkzjofkdr] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .premium-text[b-nlkzjofkdr] {
        font-size: 14px;
    }
}

.image-icon-btn[b-nlkzjofkdr] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    margin: 0;
}

    .image-icon-btn:hover[b-nlkzjofkdr] {
        transform: scale(1.15);
        opacity: 0.8;
    }

    .image-icon-btn:active[b-nlkzjofkdr] {
        transform: scale(0.95);
    }

.image-icon[b-nlkzjofkdr] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin: 0;
}