body {
    background-color: rgba(13, 100, 129, 0.76);
    /*padding-top: env(safe-area-inset-top);*/
}

.bann {
    left: 50%;
    position: fixed;
    top: 20px;
    z-index: 9999;
    padding: 18px 22px;
    border-radius: 20px;
    display: none;
    gap: 16px;
    align-items: center;
    width: clamp(280px, 92vw, 980px);
    font-size: 14px;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.05);
    /* Начальное состояние */
    opacity: 0;
    transform: translateY(-140%) translateX(-50%);
    display: none;
    /* Анимации */
    transition: opacity .7s cubic-bezier(.2,.9,.3,1.1), transform .7s cubic-bezier(.2,.9,.3,1.1), display .7s allow-discrete;
    transition-behavior: allow-discrete;
}

    /* Появление */
    .bann.open {
        display: flex;
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }

/* Стартовое состояние для появления */
@starting-style {
    .bann.open {
        opacity: 0;
        transform: translateY(-140%) translateX(-50%);
    }
}

.bann h3 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.bann p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    opacity: .92;
}

.bann button {
    border: 0;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all .25s ease;
    backdrop-filter: blur(10px);
}

    .bann button:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.2);
    }

.ring-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

    .ring-wrap svg {
        width: 100%;
        height: 100%;
    }

    .ring-wrap span {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 18px;
    }

.ico {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 24px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
}

/* --- Перевод (мягкий индиго / стекло) --- */
.bann-blue {
    background: linear-gradient(135deg, rgb(0 0 0 / 35%), rgb(3 0 45 / 25%));
    color: #eef2ff;
    border-color: rgba(199,210,254,.35);
}

    .bann-blue .ico {
        background: rgba(199,210,254,.2);
        color: #c7d2fe;
    }

    .bann-blue button {
        background: rgba(255,255,255,.95);
        color: #4338ca;
    }

        .bann-blue button.btn-cancel {
            background: rgba(251,191,36,.9);
            color: #78350f;
        }

/* --- Offline (мягкий янтарный / стекло) --- */
.bann-amber {
    background: linear-gradient(135deg, rgb(14 11 7 / 35%), rgb(188 127 57 / 25%));
    color: #fffbeb;
    border-color: rgba(253,230,138,.4);
}

    .bann-amber .ico {
        background: rgba(253,230,138,.2);
        color: #fde68a;
    }

    .bann-amber button {
        background: rgba(255,255,255,.95);
        color: #92400e;
    }

/* --- Suppressed (нейтральный графит / стекло) --- */
.bann-gray {
    background: linear-gradient(135deg, rgba(71,85,105,.4), rgba(30,41,59,.3));
    color: #e2e8f0;
    border-color: rgba(148,163,184,.3);
}

    .bann-gray .ico {
        background: rgba(148,163,184,.2);
        color: #cbd5e1;
    }

    .bann-gray button {
        background: rgba(255,255,255,.95);
        color: #1e293b;
    }

.bann-green {
    background: linear-gradient(135deg, rgb(39 91 58 / 35%), rgb(6 57 10 / 25%));
    color: #f0fdf4;
    border-color: rgba(134,239,172,.35);
}

    .bann-green .ico {
        background: rgba(134,239,172,.2);
        color: #86efac;
    }

    .bann-green button {
        background: rgba(255,255,255,.95);
        color: #166534;
    }

        .bann-green button.btn-cancel {
            background: rgba(255,255,255,.95);
            color: #64748b;
        }
/* ================== СВЕТЛАЯ ТЕМА ================== */
@media (prefers-color-scheme: light) {
    .bann {
        border-color: rgba(255,255,255,.6);
        box-shadow: 0 20px 60px rgba(15,23,42,.15), 0 8px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.04);
    }

    .bann-blue {
        background: linear-gradient(135deg, rgba(224,231,255,.85), rgba(199,210,254,.75));
        color: #1e1b4b;
        border-color: rgba(99,102,241,.25);
    }

        .bann-blue .ico {
            background: rgba(99,102,241,.18);
            color: #4338ca;
        }

        .bann-blue button {
            background: #4338ca;
            color: #ffffff;
        }

            .bann-blue button.btn-cancel {
                background: #f59e0b;
                color: #ffffff;
            }

    .bann-amber {
        background: linear-gradient(135deg, rgba(254,243,199,.88), rgba(253,230,138,.78));
        color: #78350f;
        border-color: rgba(217,119,6,.25);
    }

        .bann-amber .ico {
            background: rgba(217,119,6,.18);
            color: #b45309;
        }

        .bann-amber button {
            background: #b45309;
            color: #ffffff;
        }

    .bann-gray {
        background: linear-gradient(135deg, rgba(241,245,249,.88), rgba(226,232,240,.78));
        color: #0f172a;
        border-color: rgba(100,116,139,.25);
    }

        .bann-gray .ico {
            background: rgba(71,85,105,.15);
            color: #475569;
        }

        .bann-gray button {
            background: #475569;
            color: #ffffff;
        }

    .bann-green {
        background: linear-gradient(135deg, rgba(220,252,231,.88), rgba(187,247,208,.78));
        color: #14532d;
        border-color: rgba(34,197,94,.25);
    }

        .bann-green .ico {
            background: rgba(34,197,94,.18);
            color: #16a34a;
        }

        .bann-green button {
            background: #16a34a;
            color: #ffffff;
        }

            .bann-green button.btn-cancel {
                background: #94a3b8;
                color: #ffffff;
            }
}

/* === Появление СВЕРХУ ВНИЗ с мягким bounce === */
@keyframes slideDown {
    0% {
        transform: translateY(-140%) translateX(-50%);
        opacity: 0;
    }

    70% {
        transform: translateY(8px) translateX(-50%);
        opacity: 1;
    }

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

.anumation-moveDown {
    transition: all 500ms ease-in;
    transform: translateY(0);
    /*    animation: moveDown 1s normal;*/
}

@keyframes moveDown {
    /* 0% {
                                transform: translateY(0);
                            }
            */
    to {
        transform: translateY(100%);
    }
}

.anumation-moveUp {
    transition: all 500ms ease-in;
    transform: translateY(100%);
    /* animation: moveUp 1s normal;*/
}

@keyframes moveUp {
    /* 0% {
                                transform: translateY(100%);
                            }*/

    to {
        transform: translateY(0);
    }
}

.navbar-collapse {
    max-height: calc(100vh - env(safe-area-inset-top)) !important;
}

    .navbar-collapse.in {
        height: calc(100vh - env(safe-area-inset-top));
    }