/* =========================================================
   LiteMail — PUBLIC HEADER
   Эталонная шапка главной страницы
   ========================================================= */

:root {
    --lm-ph-bg: rgba(255,255,255,.94);
    --lm-ph-surface: #ffffff;
    --lm-ph-text: #17243a;
    --lm-ph-muted: #718096;
    --lm-ph-border: #e2e9f2;

    --lm-ph-blue: #287bef;
    --lm-ph-blue-dark: #1765d1;
    --lm-ph-blue-soft: #edf5ff;

    --lm-ph-shadow:
        0 7px 24px rgba(31,72,124,.045);
}

html.dark-theme {
    --lm-ph-bg: rgba(7,14,27,.94);
    --lm-ph-surface: #0f1929;
    --lm-ph-text: #f5f8ff;
    --lm-ph-muted: #91a1b8;
    --lm-ph-border: #22324a;

    --lm-ph-blue: #4d96ff;
    --lm-ph-blue-dark: #76adff;
    --lm-ph-blue-soft: #142945;

    --lm-ph-shadow:
        0 10px 35px rgba(0,0,0,.18);
}


/* =========================================================
   HEADER
   ========================================================= */

.lm-public-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;

    width: 100% !important;

    background:
        var(--lm-ph-bg) !important;

    border-bottom:
        1px solid var(--lm-ph-border) !important;

    box-shadow:
        var(--lm-ph-shadow) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;
}


/* Центральный контейнер как на главной */
.lm-public-header-inner {
    position: relative !important;

    width: min(
        1240px,
        calc(100% - 40px)
    ) !important;

    height: 72px !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        minmax(230px,1fr)
        auto
        minmax(230px,1fr) !important;

    align-items: center !important;

    gap: 20px !important;
}


/* =========================================================
   BRAND
   ========================================================= */

.lm-public-brand {
    justify-self: start !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 10px !important;

    color:
        var(--lm-ph-text) !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}

.lm-public-brand-icon {
    width: 40px !important;
    height: 40px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 11px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #3b8bff,
            #1468e6
        ) !important;

    box-shadow:
        0 8px 22px rgba(
            40,
            123,
            239,
            .22
        ) !important;
}

.lm-public-brand-icon svg {
    width: 22px !important;
    height: 22px !important;

    stroke-width: 1.9 !important;
}

.lm-public-brand-text {
    font-size: 20px !important;

    font-weight: 800 !important;

    letter-spacing:
        -.55px !important;
}

.lm-public-brand-text span {
    color:
        var(--lm-ph-blue) !important;
}


/* =========================================================
   NAVIGATION — STRICT CENTER
   ========================================================= */

.lm-public-nav {
    grid-column: 2 !important;

    justify-self: center !important;

    display: flex !important;

    align-items: center !important;

    gap: 3px !important;

    white-space: nowrap !important;
}

.lm-public-nav a {
    min-height: 40px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    padding: 0 12px !important;

    border-radius: 10px !important;

    color:
        var(--lm-ph-muted) !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 650 !important;

    transition:
        background .18s ease,
        color .18s ease !important;
}

.lm-public-nav a:hover,
.lm-public-nav a.active {
    color:
        var(--lm-ph-blue) !important;

    background:
        var(--lm-ph-blue-soft) !important;
}

.lm-public-nav a svg {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

    stroke-width: 1.9 !important;
}


/* =========================================================
   RIGHT ACTIONS
   ========================================================= */

.lm-public-actions {
    grid-column: 3 !important;

    justify-self: end !important;

    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px !important;
}


/* =========================================================
   THEME
   ========================================================= */

.lm-public-theme {
    position: relative !important;

    width: 68px !important;
    height: 38px !important;

    flex: 0 0 68px !important;

    padding: 0 !important;

    border:
        1px solid #d8e4f2 !important;

    border-radius: 999px !important;

    background:
        #edf5ff !important;

    overflow: hidden !important;

    cursor: pointer !important;

    box-shadow:
        inset 0 1px 2px rgba(
            23,
            67,
            116,
            .06
        ) !important;

    transition:
        background .25s ease,
        border-color .25s ease !important;
}

html.dark-theme .lm-public-theme {
    background: #111d30 !important;
    border-color: #263852 !important;
}

.lm-public-theme-sun,
.lm-public-theme-moon {
    position: absolute !important;

    top: 50% !important;

    width: 18px !important;
    height: 18px !important;

    display: grid !important;
    place-items: center !important;

    transform:
        translateY(-50%) !important;

    z-index: 2 !important;

    pointer-events: none !important;
}

.lm-public-theme-sun {
    left: 10px !important;
    color: #287bef !important;
}

.lm-public-theme-moon {
    right: 10px !important;
    color: #8292a8 !important;
    opacity: .42 !important;
}

.lm-public-theme-sun svg,
.lm-public-theme-moon svg {
    width: 17px !important;
    height: 17px !important;

    stroke-width: 2.1 !important;
}

.lm-public-theme-dot {
    position: absolute !important;

    top: 4px !important;
    left: 4px !important;

    width: 30px !important;
    height: 30px !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow:
        0 3px 12px rgba(
            30,
            67,
            110,
            .20
        ) !important;

    z-index: 3 !important;

    transition:
        transform .32s
        cubic-bezier(.22,.8,.2,1),
        background .25s ease !important;
}

html.dark-theme .lm-public-theme-dot {
    transform:
        translateX(30px) !important;

    background: #18263b !important;

    box-shadow:
        0 3px 12px rgba(
            0,
            0,
            0,
            .38
        ) !important;
}

html.dark-theme .lm-public-theme-sun {
    opacity: .30 !important;
    color: #91a1b8 !important;
}

html.dark-theme .lm-public-theme-moon {
    opacity: 1 !important;
    color: #4d96ff !important;
}


/* =========================================================
   GUEST
   ========================================================= */

.lm-public-guest {
    display: flex !important;
    align-items: center !important;

    gap: 4px !important;
}

.lm-public-guest[hidden] {
    display: none !important;
}

.lm-public-login {
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 12px !important;

    border-radius: 10px !important;

    color:
        var(--lm-ph-muted) !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 650 !important;
}

.lm-public-login:hover {
    color:
        var(--lm-ph-blue) !important;
}

.lm-public-register {
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    padding: 0 15px !important;

    border-radius: 10px !important;

    color: #ffffff !important;

    background:
        var(--lm-ph-blue) !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    box-shadow:
        0 8px 20px rgba(
            40,
            123,
            239,
            .18
        ) !important;

    transition: .18s ease !important;
}

.lm-public-register:hover {
    background:
        var(--lm-ph-blue-dark) !important;

    transform:
        translateY(-1px) !important;
}

.lm-public-register svg {
    width: 14px !important;
    height: 14px !important;
}


/* =========================================================
   ACCOUNT
   ========================================================= */

.lm-public-account {
    position: relative !important;

    min-width: 0 !important;
}

.lm-public-account[hidden] {
    display: none !important;
}

.lm-public-account-button {
    min-height: 44px !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding:
        4px 9px 4px 5px !important;

    border:
        1px solid var(--lm-ph-border) !important;

    border-radius: 12px !important;

    background:
        var(--lm-ph-surface) !important;

    color:
        var(--lm-ph-text) !important;

    cursor: pointer !important;
}

.lm-public-account-button:hover {
    border-color:
        rgba(40,123,239,.25) !important;
}

.lm-public-avatar {
    width: 34px !important;
    height: 34px !important;

    flex: 0 0 34px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 9px !important;

    background:
        var(--lm-ph-blue-soft) !important;

    color:
        var(--lm-ph-blue) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}

.lm-public-account-name {
    max-width: 125px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

.lm-public-account-arrow {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    color:
        var(--lm-ph-muted) !important;
}

.lm-public-account-arrow svg {
    width: 15px !important;
    height: 15px !important;

    stroke-width: 2 !important;

    transition:
        transform .18s ease !important;
}

.lm-public-account.open
.lm-public-account-arrow svg {
    transform:
        rotate(180deg) !important;
}


/* =========================================================
   ACCOUNT MENU
   ========================================================= */

.lm-public-account-menu {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    right: 0 !important;

    width: 220px !important;

    padding: 7px !important;

    border:
        1px solid var(--lm-ph-border) !important;

    border-radius: 14px !important;

    background:
        var(--lm-ph-surface) !important;

    box-shadow:
        0 22px 60px rgba(
            31,
            72,
            124,
            .13
        ) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform:
        translateY(-5px) !important;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease !important;

    z-index: 10001 !important;
}

html.dark-theme .lm-public-account-menu {
    box-shadow:
        0 24px 70px rgba(
            0,
            0,
            0,
            .30
        ) !important;
}

.lm-public-account-menu.open {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(0) !important;
}

.lm-public-account-menu a,
.lm-public-account-menu button {
    width: 100% !important;

    min-height: 40px !important;

    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

    padding: 0 10px !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: transparent !important;

    color:
        var(--lm-ph-text) !important;

    text-decoration: none !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    text-align: left !important;

    cursor: pointer !important;
}

.lm-public-account-menu a:hover {
    color:
        var(--lm-ph-blue) !important;

    background:
        var(--lm-ph-blue-soft) !important;
}

.lm-public-account-menu button {
    color: #de4e5c !important;
}

.lm-public-account-menu button:hover {
    background:
        rgba(222,78,92,.08) !important;
}

.lm-public-account-menu svg {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

.lm-public-mobile-button {
    display: none !important;

    width: 40px !important;
    height: 40px !important;

    place-items: center !important;

    border:
        1px solid var(--lm-ph-border) !important;

    border-radius: 10px !important;

    background:
        var(--lm-ph-surface) !important;

    color:
        var(--lm-ph-text) !important;

    cursor: pointer !important;
}

.lm-public-mobile-button svg {
    width: 18px !important;
    height: 18px !important;
}

.lm-public-mobile-nav {
    display: none !important;

    width: min(
        1240px,
        calc(100% - 24px)
    ) !important;

    margin: 0 auto !important;

    padding: 10px 0 14px !important;

    border-top:
        1px solid var(--lm-ph-border) !important;
}

.lm-public-mobile-nav.open {
    display: grid !important;
    gap: 4px !important;
}

.lm-public-mobile-nav a {
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding: 0 12px !important;

    border-radius: 10px !important;

    color:
        var(--lm-ph-muted) !important;

    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 650 !important;
}

.lm-public-mobile-nav a:hover,
.lm-public-mobile-nav a.active {
    color:
        var(--lm-ph-blue) !important;

    background:
        var(--lm-ph-blue-soft) !important;
}

.lm-public-mobile-nav svg {
    width: 17px !important;
    height: 17px !important;
}


/* =========================================================
   ADAPTIVE
   ========================================================= */

@media (max-width: 1120px) {

    .lm-public-header-inner {
        width:
            min(
                1240px,
                calc(100% - 30px)
            ) !important;
    }

    .lm-public-nav a {
        padding-left: 8px !important;
        padding-right: 8px !important;
        gap: 5px !important;
    }

    .lm-public-nav a span {
        font-size: 12px !important;
    }

    .lm-public-actions {
        gap: 6px !important;
    }

}


@media (max-width: 880px) {

    .lm-public-nav {
        display: none !important;
    }

    .lm-public-header-inner {
        display: flex !important;
        justify-content: space-between !important;
    }

    .lm-public-actions {
        margin-left: auto !important;
    }

    .lm-public-mobile-button {
        display: grid !important;
    }

}


@media (max-width: 560px) {

    .lm-public-header-inner {
        width:
            min(
                100% - 20px,
                1240px
            ) !important;

        height: 66px !important;

        gap: 7px !important;
    }

    .lm-public-brand-text {
        font-size: 18px !important;
    }

    .lm-public-brand-icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .lm-public-account-name {
        display: none !important;
    }

    .lm-public-account-button {
        padding-right: 5px !important;
    }

    .lm-public-theme {
        width: 60px !important;
        height: 36px !important;
        flex-basis: 60px !important;
    }

    .lm-public-theme-dot {
        width: 28px !important;
        height: 28px !important;
    }

    html.dark-theme .lm-public-theme-dot {
        transform:
            translateX(24px) !important;
    }

}