:root {
    --primary: #d9a85b;
    --primary-dark: #7a4a20;
    --bg1: #170f0a;
    --bg2: #3a281c;
    --text: #ffffff;
    --muted: rgba(255,255,255,.72);
    --glass: rgba(255,255,255,.08);
    --border: rgba(255,255,255,.16);
    --border-radius: var(--border-radius);
    --font: Tahoma, Arial, sans-serif;
    --bg-image: none;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(ef8fd7b980eff911-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 100
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(0cd12378511b77c6-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 300
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(a52ed9519e94f900-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 400
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(54f096a7afa8448a-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 600
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(9c90097f74db5e7f-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 700
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(62047917c15a1c99-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 800
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(69082471753f26aa-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 900
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(3797b5fb59755cf2-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 950
}

@font-face {
    font-family: __yekanBakh_Fallback_8b585f;
    src: local("Arial");
    ascent-override: 99.72%;
    descent-override: 54.84%;
    line-gap-override: 0.00%;
    size-adjust: 100.28%
}

* {
    font-family: __yekanBakh_8b585f, __yekanBakh_Fallback_8b585f;
}
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(20,12,7,.18), rgba(20,12,7,.92)), var(--bg-image), radial-gradient(circle at top, var(--bg2), var(--bg1));
    background-size: cover;
    background-position: center;
    color: var(--text);
}

    .app:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 18%, rgba(217,168,91,.20), transparent 28%), radial-gradient(circle at 82% 72%, rgba(217,168,91,.16), transparent 34%);
        z-index: 0;
    }

    .app:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
        z-index: 0;
    }
.home-page {
    width: 430px;
    max-width: 430px;
    min-height: 100vh;
    background: #faf9f7;
    color: var(--text);
    position: relative;
    overflow: hidden;
    padding-bottom: 96px;
}
.content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 42px 24px 26px;
    display: flex;
    flex-direction: column;
}

.brand {
    text-align: center;
    padding-top: 18px;
    padding-bottom: 18px;
}

.logo {
    width: 126px;
    height: 126px;
    margin: 0 auto 18px;
    <!-- border-radius: 50%; -->
    <!-- background: rgba(255,255,255,.12); -->
    <!-- border: 1px solid rgba(255,255,255,.22); -->
    <!-- box-shadow: 0 18px 48px rgba(0,0,0,.28); -->
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .logo img {
        width: 126px;
        height: 126px;
        object-fit: contain;
    }

    .logo svg {
        width: 58px;
        height: 58px;
    }

.title {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -1px;
}

.subtitle {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

.hero {
    flex: 1;
    min-height: 260px;
    display: flex;
    justify-content: center;
    position: relative;
}

.coffee-card {
    width: 290px;
    height: 290px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .coffee-card:before {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(217,168,91,.35), transparent 68%);
        filter: blur(6px);
    }

    .coffee-card svg, .coffee-card img {
        position: relative;
        z-index: 2;
        width: 290px;
        max-width: 100%;
        filter: drop-shadow(0 25px 30px rgba(0,0,0,.35));
    }

.bottom {
    padding-bottom: 6px;
}

.info-box {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    backdrop-filter: blur(14px);
}

.info-title {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 5px;
}

.info-text {
    font-size: 12px;
    line-height: 2;
    color: var(--muted);
}

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn {
    height: 54px;
    border-radius: var(--border-radius);
    border: 0;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s;
    width: 100%;
}

    .btn:active {
        transform: scale(.97);
    }

.btn-primary {
    color: #2b1b10;
    background: linear-gradient(135deg, var(--primary), #f2d196);
    box-shadow: 0 14px 28px rgba(217,168,91,.26);
}

.btn-outline {
    color: var(--text);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
}
.form-label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
}

.form-input {
    width: 100%;
    height: 54px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: #fff;
    color: var(--bg2);
    padding: 0 15px;
    font-size: 15px;
    font-weight: 800;
    outline: none;
    margin-bottom: 14px;
    direction: ltr;
    text-align: left;
}

    .form-input:focus,
    .otp-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(217,168,91,.14);
    }
.loader {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(18,11,7,.76);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
}

    .loader.show {
        display: flex;
    }

.loader-box {
    width: 210px;
    padding: 22px;
    border-radius: var(--border-radius);
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border);
    text-align: center;
}

.spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.18);
    border-top-color: var(--primary);
    margin: 0 auto 14px;
    animation: spin .8s linear infinite;
}

.loader-text {
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    width: calc(100% - 36px);
    max-width: 390px;
    z-index: 60;
    background: rgba(0,0,0,.82);
    color: #fff;
    padding: 13px 15px;
    border-radius: var(--border-radius);
    text-align: center;
    font-size: 13px;
    line-height: 1.9;
    opacity: 0;
    pointer-events: none;
    transition: .25s;
}

    .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 431px) {
    body {
        background: #101820;
    }

    .app {
        height: 100vh;
        border-radius: 0;
        border: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 30px 90px rgba(0,0,0,.45);
    }
}

@media (max-height: 720px) {
    .content {
        padding-top: 24px;
    }

    .logo {
        width: 72px;
        height: 72px;
        margin-bottom: 12px;
    }

    .title {
        font-size: 29px;
    }

    .hero {
        min-height: 210px;
    }

    .coffee-card {
        width: 230px;
        height: 230px;
    }

        .coffee-card svg {
            width: 235px;
        }

    .info-box {
        display: none;
    }
}

.backbtn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--border-radius);
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjU4NC40NjFweCIgaGVpZ2h0PSI1ODQuNDZweCIgdmlld0JveD0iMCAwIDU4NC40NjEgNTg0LjQ2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1ODQuNDYxIDU4NC40NjsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgIHN0eWxlPSJmaWxsOiMzYTI4MWMiPg0KCQk8cGF0aCBkPSJNMjA3LjAyMSwyODYuMjI4YzIwLjE4NCwwLDM2LjYwMS0xNi40MiwzNi42MDEtMzYuNjA0YzAtMjAuMTg0LTE2LjQyLTM2LjYwNC0zNi42MDEtMzYuNjA0DQoJCQljLTIwLjE4NCwwLTM2LjYwNCwxNi40Mi0zNi42MDQsMzYuNjA0QzE3MC40MTcsMjY5LjgwOCwxODYuODM3LDI4Ni4yMjgsMjA3LjAyMSwyODYuMjI4eiIvPg0KCQk8cGF0aCBkPSJNMjkyLjIzLDU0MS44NThjMjAuMTg0LDAsMzYuNjA0LTE2LjQyMSwzNi42MDQtMzYuNjA0cy0xNi40Mi0zNi42MDQtMzYuNjA0LTM2LjYwNGMtMjAuMTg0LDAtMzYuNjA0LDE2LjQyLTM2LjYwNCwzNi42MDQNCgkJCVMyNzIuMDQ2LDU0MS44NTgsMjkyLjIzLDU0MS44NTh6Ii8+DQoJCTxwYXRoIGQ9Ik0yMDcuMDIxLDIwMS4wMmMyMC4xODQsMCwzNi42MDEtMTYuNDIsMzYuNjAxLTM2LjYwNGMwLTIwLjE4NC0xNi40Mi0zNi42MDEtMzYuNjAxLTM2LjYwMQ0KCQkJYy0yMC4xODQsMC0zNi42MDQsMTYuNDItMzYuNjA0LDM2LjYwMUMxNzAuNDE3LDE4NC42LDE4Ni44MzcsMjAxLjAyLDIwNy4wMjEsMjAxLjAyeiIvPg0KCQk8cGF0aCBkPSJNMjA3LjAyMSwzNzEuNDM3YzIwLjE4NCwwLDM2LjYwMS0xNi40MiwzNi42MDEtMzYuNjA0cy0xNi40Mi0zNi42MDQtMzYuNjAxLTM2LjYwNA0KCQkJYy0yMC4xODQsMC0zNi42MDQsMTYuNDIxLTM2LjYwNCwzNi42MDRTMTg2LjgzNywzNzEuNDM3LDIwNy4wMjEsMzcxLjQzN3oiLz4NCgkJPHBhdGggZD0iTTIwNy4wMjEsNDU2LjY0OWMyMC4xODQsMCwzNi42MDEtMTYuNDIsMzYuNjAxLTM2LjYwMWMwLTIwLjE4NC0xNi40Mi0zNi42MDQtMzYuNjAxLTM2LjYwNA0KCQkJYy0yMC4xODQsMC0zNi42MDQsMTYuNDItMzYuNjA0LDM2LjYwNEMxNzAuNDE3LDQ0MC4yMjksMTg2LjgzNyw0NTYuNjQ5LDIwNy4wMjEsNDU2LjY0OXoiLz4NCgkJPHBhdGggZD0iTTUxMS4yNTYsMjQ5LjYyN2MwLDIwLjE4NCwxNi40MiwzNi42MDQsMzYuNjA0LDM2LjYwNHMzNi42MDItMTYuNDIzLDM2LjYwMi0zNi42MDRzLTE2LjQyLTM2LjYwNC0zNi42MDUtMzYuNjA0DQoJCQlDNTI3LjY3MiwyMTMuMDI0LDUxMS4yNTYsMjI5LjQ0NCw1MTEuMjU2LDI0OS42Mjd6Ii8+DQoJCTxwYXRoIGQ9Ik0yOTIuMjMsNDU2LjY0OWMyMC4xODQsMCwzNi42MDQtMTYuNDIsMzYuNjA0LTM2LjYwMWMwLTIwLjE4NC0xNi40Mi0zNi42MDQtMzYuNjA0LTM2LjYwNA0KCQkJYy0yMC4xODQsMC0zNi42MDQsMTYuNDItMzYuNjA0LDM2LjYwNEMyNTUuNjI2LDQ0MC4yMjksMjcyLjA0Niw0NTYuNjQ5LDI5Mi4yMyw0NTYuNjQ5eiIvPg0KCQk8cGF0aCBkPSJNMzYuNjA0LDMyOC44MzNjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRjMC0yMC4xODQtMTYuNDItMzYuNjAxLTM2LjYwNC0zNi42MDENCgkJCUMxNi40MiwyNTUuNjI4LDAsMjcyLjA0OCwwLDI5Mi4yMzJDMCwzMTIuNDEzLDE2LjQyLDMyOC44MzMsMzYuNjA0LDMyOC44MzN6Ii8+DQoJCTxwYXRoIGQ9Ik0xMjEuODEyLDI4Ni4yMjhjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRjMC0yMC4xODQtMTYuNDItMzYuNjA0LTM2LjYwNC0zNi42MDRzLTM2LjYwMSwxNi40Mi0zNi42MDEsMzYuNjA0DQoJCQlDODUuMjEyLDI2OS44MDgsMTAxLjYyOSwyODYuMjI4LDEyMS44MTIsMjg2LjIyOHoiLz4NCgkJPHBhdGggZD0iTTEyMS44MTIsMzcxLjQzN2MyMC4xODQsMCwzNi42MDQtMTYuNDIsMzYuNjA0LTM2LjYwNHMtMTYuNDItMzYuNjA0LTM2LjYwNC0zNi42MDRzLTM2LjYwMSwxNi40MjEtMzYuNjAxLDM2LjYwNA0KCQkJUzEwMS42MjksMzcxLjQzNywxMjEuODEyLDM3MS40Mzd6Ii8+DQoJCTxwYXRoIGQ9Ik00NjIuNjQ4LDI4Ni4yMjhjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRjMC0yMC4xODQtMTYuNDItMzYuNjA0LTM2LjYwNC0zNi42MDQNCgkJCWMtMjAuMTg2LDAtMzYuNjA1LDE2LjQyLTM2LjYwNSwzNi42MDRDNDI2LjA0MywyNjkuODA4LDQ0Mi40NjcsMjg2LjIyOCw0NjIuNjQ4LDI4Ni4yMjh6Ii8+DQoJCTxwYXRoIGQ9Ik0zNzcuNDM5LDI4Ni4yMjhjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRjMC0yMC4xODQtMTYuNDItMzYuNjA0LTM2LjYwNC0zNi42MDRzLTM2LjYwMiwxNi40Mi0zNi42MDIsMzYuNjA0DQoJCQlDMzQwLjgzOCwyNjkuODA4LDM1Ny4yNTgsMjg2LjIyOCwzNzcuNDM5LDI4Ni4yMjh6Ii8+DQoJCTxwYXRoIGQ9Ik00OTkuMjUyLDMzNC44MzZjMC0yMC4xODQtMTYuNDItMzYuNjA0LTM2LjYwNC0zNi42MDRjLTIwLjE4NiwwLTM2LjYwNSwxNi40Mi0zNi42MDUsMzYuNjA0czE2LjQyLDM2LjYwNCwzNi42MDUsMzYuNjA0DQoJCQlDNDgyLjgzMiwzNzEuNDQsNDk5LjI1MiwzNTUuMDIsNDk5LjI1MiwzMzQuODM2eiIvPg0KCQk8cGF0aCBkPSJNMjkyLjIzLDM3MS40MzdjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRzLTE2LjQyLTM2LjYwNC0zNi42MDQtMzYuNjA0Yy0yMC4xODQsMC0zNi42MDQsMTYuNDIxLTM2LjYwNCwzNi42MDQNCgkJCVMyNzIuMDQ2LDM3MS40MzcsMjkyLjIzLDM3MS40Mzd6Ii8+DQoJCTxwYXRoIGQ9Ik01NDcuODU1LDI5OC4yMzNjLTIwLjE4NCwwLTM2LjYwNCwxNi40Mi0zNi42MDQsMzYuNjA0czE2LjQyLDM2LjYwNCwzNi42MDQsMzYuNjA0YzIwLjE4NiwwLDM2LjYwNS0xNi40MiwzNi42MDUtMzYuNjA0DQoJCQlTNTY4LjA0MSwyOTguMjMzLDU0Ny44NTUsMjk4LjIzM3oiLz4NCgkJPHBhdGggZD0iTTI5Mi4yMywyODYuMjI4YzIwLjE4NCwwLDM2LjYwNC0xNi40MiwzNi42MDQtMzYuNjA0YzAtMjAuMTg0LTE2LjQyLTM2LjYwMS0zNi42MDQtMzYuNjAxDQoJCQljLTIwLjE4NCwwLTM2LjYwNCwxNi40Mi0zNi42MDQsMzYuNjA0UzI3Mi4wNDYsMjg2LjIyOCwyOTIuMjMsMjg2LjIyOHoiLz4NCgkJPHBhdGggZD0iTTI5Mi4yMywyMDEuMDJjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRjMC0yMC4xODQtMTYuNDItMzYuNjAxLTM2LjYwNC0zNi42MDENCgkJCWMtMjAuMTg0LDAtMzYuNjA0LDE2LjQyLTM2LjYwNCwzNi42MDFDMjU1LjYyNiwxODQuNiwyNzIuMDQ2LDIwMS4wMiwyOTIuMjMsMjAxLjAyeiIvPg0KCQk8cGF0aCBkPSJNMjkyLjIzLDExNS44MTFjMjAuMTg0LDAsMzYuNjA0LTE2LjQyLDM2LjYwNC0zNi42MDRjMC0yMC4xODQtMTYuNDItMzYuNjA0LTM2LjYwNC0zNi42MDQNCgkJCWMtMjAuMTg0LDAtMzYuNjA0LDE2LjQyLTM2LjYwNCwzNi42MDRDMjU1LjYyNiw5OS4zOTEsMjcyLjA0NiwxMTUuODExLDI5Mi4yMywxMTUuODExeiIvPg0KCQk8cGF0aCBkPSJNNDE0LjA0MywzMzQuODM2YzAtMjAuMTg0LTE2LjQyLTM2LjYwNC0zNi42MDQtMzYuNjA0cy0zNi42MDIsMTYuNDItMzYuNjAyLDM2LjYwNHMxNi40MiwzNi42MDQsMzYuNjAyLDM2LjYwNA0KCQkJQzM5Ny42MjMsMzcxLjQzNyw0MTQuMDQzLDM1NS4wMiw0MTQuMDQzLDMzNC44MzZ6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=");
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}
.map-icon-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
    .map-icon-btn svg {
        width: 44px;
        height: 44px;
    }
.app-page{
    position:relative;
    z-index:2;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.28);
    display: none;
    align-items: center;
    justify-content: center;
}

    .app-loader.show {
        display: flex;
    }

.loader-card {
    width: 156px;
    min-height: 132px;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: 0 25px 70px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.loader-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #eee5da;
    border-top-color: var(--primary-dark);
    animation: loaderSpin .75s linear infinite;
}

.loader-text {
    color: #201916;
    font-size: 12px;
    font-weight: 500;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}
.global-notification-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 18px;
    max-width: 398px;
    margin: 0 auto;
    min-height: 72px;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: 0 18px 48px rgba(36,24,16,.22);
    z-index: 99999;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    transform: translateY(-130%);
    opacity: 0;
    transition: .25s ease;
    cursor: pointer;
}

    .global-notification-toast.show {
        transform: translateY(0);
        opacity: 1;
    }

.gnt-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: #f3e7dc;
    color: #5a321b;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gnt-icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.gnt-body {
    min-width: 0;
}

    .gnt-body strong {
        display: block;
        color: #201916;
        font-size: 13px;
        font-weight: 650;
        margin-bottom: 5px;
    }

    .gnt-body span {
        display: block;
        color: #777;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.7;
    }

.menu-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    border-radius: var(--border-radius);
    font-size: 20px;
    line-height: 60px;
}
    .menu-btn svg {
        width: 30px;
        height: 30px;
        fill: none;
        stroke: var(--primary-dark);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: none;
    z-index: 999;
}

    .menu-overlay.show {
        display: block;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transition: .25s;
    padding: 0px;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

    .side-menu a {
        display: block;
        padding: 12px;
        text-decoration: none;
        color: #111;
        padding-right: 23px;
        font-size: 13px;
    }
.topMenu {
    background: linear-gradient(135deg, var(--bg2), var(--bg1));
    color: #fff;
    padding: 10px 5px;
    margin-bottom: 18px;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    align-items: center;
}
    .topMenu img {
        height: 64px;
        widows: 64px;
    }
    .topMenu div {
        display: flex;
        flex-direction: column;
        color: var(--primary);
        font-size: 14px;
        font-weight: 700;
    }
    .topMenu .versionN {
        direction: ltr;
        text-align: right;
        font-size: 12px;
        color: #c7c7c7;
    }


body.is-rtl {
    direction: rtl;
    text-align: right;
}

body.is-ltr {
    direction: ltr;
    text-align: left;
}

    body.is-ltr .admin-sidebar {
        right: auto;
        left: 0;
    }

    body.is-ltr .admin-content {
        margin-right: 0;
        margin-left: 260px;
    }

.i18n-skeleton {
    display: block !important;
    width: 120px;
    max-width: 100%;
    min-height: 24px;
    border-radius: 5px;
    background: linear-gradient( 90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75% );
    background-size: 200% 100%;
    animation: i18nLoading 1.2s infinite;
}

    .i18n-skeleton.small {
        min-width: 50px;
    }

    .i18n-skeleton.medium {
        min-width: 100px;
    }

    .i18n-skeleton.large {
        min-width: 180px;
    }

@keyframes i18nLoading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

<style >
[data-i18n]:empty,
[data-i18n-placeholder]:empty {
    display: block;
    width: 120px;
    min-height: 20px;
    border-radius: 5px;
    background: linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);
    background-size: 200% 100%;
    animation: i18nLoading 1.1s infinite;
}

button[data-i18n]:empty,
a[data-i18n]:empty,
span[data-i18n]:empty {
    display: inline-block;
    width: 80px;
    min-height: 18px;
}

h1[data-i18n]:empty,
h2[data-i18n]:empty,
h3[data-i18n]:empty {
    width: 160px;
    min-height: 28px;
}

@keyframes i18nLoading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

</style >