.topbar-settings-link {
    color:
        var(--text-primary);

    text-decoration:
        none;

    cursor:
        pointer;
}


.topbar-settings-link:hover {
    text-decoration:
        underline;
}


.settings-topbar {
    position:
        fixed;

    z-index:
        100;

    top: 0;
    right: 0;
    left: 0;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    min-height:
        calc(
            58px
            + env(safe-area-inset-top)
        );

    padding-top:
        env(safe-area-inset-top);

    padding-right:
        max(
            14px,
            env(safe-area-inset-right)
        );

    padding-left:
        max(
            14px,
            env(safe-area-inset-left)
        );

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-bottom:
        1px solid
        var(--border);

    backdrop-filter:
        blur(18px);

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


.settings-back {
    justify-self:
        start;

    color:
        var(--text-primary);

    font-size:
        15px;

    font-weight:
        650;

    text-decoration:
        none;
}


.settings-topbar-spacer {
    justify-self:
        end;

    width:
        40px;
}


.settings-page {
    width:
        100%;

    max-width:
        720px;

    min-height:
        100dvh;

    margin:
        0 auto;

    padding-top:
        calc(
            58px
            + env(safe-area-inset-top)
            + 22px
        );

    padding-right:
        max(
            14px,
            env(safe-area-inset-right)
        );

    padding-bottom:
        max(
            42px,
            env(safe-area-inset-bottom)
        );

    padding-left:
        max(
            14px,
            env(safe-area-inset-left)
        );
}


.settings-loading {
    padding:
        30px 4px;

    color:
        var(--text-secondary);

    font-size:
        14px;
}


.settings-heading {
    padding:
        0 4px 18px;
}


.settings-heading h1 {
    margin:
        0;

    font-size:
        34px;

    line-height:
        1;

    letter-spacing:
        -1.4px;
}


.settings-heading p {
    margin:
        10px 0 0;

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.5;
}


.settings-card {
    width:
        100%;

    margin-bottom:
        12px;

    padding:
        20px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);
}


.settings-card-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        18px;
}


.settings-card-heading h2 {
    margin:
        3px 0 0;

    font-size:
        20px;
}


.settings-eyebrow {
    color:
        var(--text-tertiary);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.6px;
}


.settings-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        14px 0;

    border-top:
        1px solid
        var(--border);
}


.settings-row strong {
    display:
        block;

    font-size:
        14px;
}


.settings-row p {
    margin:
        4px 0 0;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.4;
}


.settings-value {
    flex-shrink:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        650;

    text-align:
        right;
}


.settings-value[
    data-status="active"
] {
    color:
        var(--success);
}


.settings-value[
    data-status="inactive"
] {
    color:
        var(--danger);
}


.settings-warning {
    margin:
        0 0 20px;

    padding:
        13px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.5;
}


.settings-description {
    margin:
        0 0 18px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.5;
}


.settings-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.settings-input {
    width:
        100%;

    min-height:
        50px;

    margin-bottom:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        13px;

    outline:
        none;

    background:
        var(--surface-soft);

    color:
        var(--text-primary);

    font-size:
        16px;
}


.settings-input:focus {
    border-color:
        #8c8c93;
}


.settings-button {
    appearance:
        none;

    width:
        100%;

    min-height:
        49px;

    margin-top:
        10px;

    padding:
        0 14px;

    border:
        0;

    border-radius:
        13px;

    cursor:
        pointer;

    font-size:
        14px;

    font-weight:
        700;
}


.settings-button.primary {
    background:
        var(--black);

    color:
        var(--white);
}


.settings-button.secondary {
    background:
        #ececef;

    color:
        var(--text-primary);
}


.settings-button.danger {
    background:
        #f9eceb;

    color:
        var(--danger);
}


.settings-button:disabled {
    cursor:
        default;

    opacity:
        0.45;
}


.settings-message {
    margin:
        4px 0;

    font-size:
        13px;

    line-height:
        1.4;
}


.settings-message[
    data-type="error"
] {
    color:
        var(--danger);
}


.settings-message[
    data-type="success"
] {
    color:
        var(--success);
}


.session-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-bottom:
        16px;
}


.session-item {
    padding:
        14px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;
}


.session-item-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.session-item-heading strong {
    font-size:
        14px;
}


.session-current-badge {
    padding:
        4px 7px;

    background:
        #e8f4ee;

    border-radius:
        999px;

    color:
        var(--success);

    font-size:
        10px;

    font-weight:
        700;
}


.session-details {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    margin-top:
        8px;

    color:
        var(--text-secondary);

    font-size:
        11px;

    line-height:
        1.4;
}


.privacy-section {
    padding:
        16px 0;

    border-top:
        1px solid
        var(--border);
}


.privacy-section:first-of-type {
    border-top:
        0;
}


.privacy-section h3 {
    margin:
        0 0 6px;

    font-size:
        14px;
}


.privacy-section p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.55;
}


.settings-support-link {
    display:
        inline-block;

    color:
        var(--text-primary);

    font-size:
        14px;

    font-weight:
        650;

    overflow-wrap:
        anywhere;
}


@media (
    min-width: 700px
) {

    .settings-topbar {
        right:
            50%;

        left:
            50%;

        width:
            760px;

        max-width:
            100%;

        transform:
            translateX(-50%);

        border-right:
            1px solid
            var(--border);

        border-left:
            1px solid
            var(--border);
    }


    .settings-page {
        max-width:
            760px;

        padding-right:
            20px;

        padding-left:
            20px;
    }

}