:root {
    --ice-bg-1: rgba(235, 252, 255, .92);
    --ice-bg-2: rgba(154, 230, 249, .84);
    --ice-bg-3: rgba(58, 177, 218, .72);
    --ice-border: rgba(255, 255, 255, .86);
    --ice-text: #07364d;
    --ice-shadow: rgba(19, 91, 123, .24);
    --ice-glow: rgba(90, 225, 255, .42);
    --ice-button: rgba(255, 255, 255, .46);
}

body.dark-mode {
    --ice-bg-1: rgba(8, 24, 42, .96);
    --ice-bg-2: rgba(11, 66, 96, .92);
    --ice-bg-3: rgba(31, 156, 196, .74);
    --ice-border: rgba(157, 239, 255, .62);
    --ice-text: #effcff;
    --ice-shadow: rgba(0, 0, 0, .42);
    --ice-glow: rgba(73, 223, 255, .48);
    --ice-button: rgba(255, 255, 255, .12);
}

.ice-header {
    position: sticky !important;
    top: 0;
    z-index: 999;
    padding: 10px 0 0;
}

.ice-topbar {
    width: 94%;
    max-width: 1180px;
    min-height: 92px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    border-radius: 30px;
    border: 1px solid var(--ice-border);

    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .82), transparent 30%),
        radial-gradient(circle at 78% 100%, var(--ice-glow), transparent 34%),
        linear-gradient(135deg, var(--ice-bg-1), var(--ice-bg-2) 48%, var(--ice-bg-3));

    box-shadow:
        0 18px 38px var(--ice-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .82),
        inset 0 -20px 34px rgba(255, 255, 255, .18);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    direction: rtl;
}

body.dark-mode .ice-topbar {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .44),
        0 0 26px rgba(73, 223, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -22px 38px rgba(73, 223, 255, .08);
}

.ice-topbar::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 24px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .34);

    background:
        linear-gradient(
            115deg,
            transparent 0 22%,
            rgba(255, 255, 255, .42) 26%,
            transparent 31% 58%,
            rgba(255, 255, 255, .24) 62%,
            transparent 68%
        );

    opacity: .72;
}

.ice-glow {
    position: absolute;
    top: -40%;
    left: -30%;
    width: 34%;
    height: 180%;
    transform: rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .48),
            transparent
        );

    animation: iceShine 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes iceShine {
    0%,
    45% {
        left: -40%;
        opacity: 0;
    }

    55% {
        opacity: .8;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

/* حبات الثلج */
.ice-snowflakes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.ice-snowflakes span {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;

    color: rgba(255, 255, 255, .94);
    line-height: 1;
    text-align: center;

    text-shadow:
        0 0 5px rgba(255, 255, 255, .95),
        0 0 11px rgba(85, 225, 255, .65),
        0 0 18px rgba(46, 183, 224, .38);

    opacity: .72;

    animation:
        snowPulse 4.5s ease-in-out infinite,
        snowRotate 14s linear infinite;
}

.ice-snowflakes span::before {
    content: "❄";
}

.ice-snowflakes span:nth-child(1) {
    top: 13px;
    left: 5%;
    font-size: 15px;
    animation-delay: 0s;
}

.ice-snowflakes span:nth-child(2) {
    bottom: 12px;
    left: 20%;
    font-size: 10px;
    animation-delay: .8s;
}

.ice-snowflakes span:nth-child(3) {
    top: 10px;
    left: 38%;
    font-size: 17px;
    animation-delay: 1.6s;
}

.ice-snowflakes span:nth-child(4) {
    bottom: 10px;
    left: 58%;
    font-size: 12px;
    animation-delay: 2.4s;
}

.ice-snowflakes span:nth-child(5) {
    top: 13px;
    left: 76%;
    font-size: 15px;
    animation-delay: 1.1s;
}

.ice-snowflakes span:nth-child(6) {
    bottom: 13px;
    left: 91%;
    font-size: 10px;
    animation-delay: 3s;
}

@keyframes snowPulse {
    0%,
    100% {
        opacity: .35;
        transform: scale(.82);
    }

    50% {
        opacity: .95;
        transform: scale(1.15);
    }
}

@keyframes snowRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

.ice-topbar > *:not(.ice-glow):not(.ice-snowflakes) {
    position: relative;
    z-index: 3;
}

/* اللوجو */
.ice-logo-wrap,
.ice-back-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ice-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ice-logo {
    height: 90px !important;
    width: auto !important;
    max-width: 250px !important;
    object-fit: contain !important;
    display: block;

    filter:
        drop-shadow(0 4px 10px rgba(255, 255, 255, .55))
        drop-shadow(0 9px 18px rgba(8, 51, 74, .20));
}

/* مجموعة الأزرار */
.ice-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* زر القائمة والرجوع */
.ice-menu,
.ice-back {
    width: 52px;
    height: 52px;
    min-width: 52px;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 18px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--ice-text);

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255, 255, 255, .7),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--ice-button),
            rgba(103, 219, 247, .22)
        );

    box-shadow:
        0 10px 18px rgba(8, 51, 74, .16),
        inset 0 1px 0 rgba(255, 255, 255, .58);

    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.ice-menu:hover,
.ice-back:hover,
.ice-balance:hover,
.ice-vip:hover {
    transform: translateY(-2px);
}

.ice-menu i,
.ice-back i {
    color: inherit !important;
    font-size: 22px;
}

/* الرصيد */
.ice-balance {
    min-width: 176px;
    height: 54px;
    padding: 0 16px;

    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 999px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--ice-text);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, .78),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .43),
            rgba(76, 211, 246, .34)
        );

    box-shadow:
        0 12px 22px rgba(8, 51, 74, .18),
        inset 0 1px 0 rgba(255, 255, 255, .62);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.ice-balance-amount {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    color: var(--ice-text);
}

.ice-balance-currency {
    font-size: 12px;
    font-weight: 800;
    color: var(--ice-text);
    opacity: .78;
}

.ice-balance i {
    width: 25px;
    height: 25px;
    min-width: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #29c8f2,
            #0f749b
        );

    box-shadow:
        0 0 12px rgba(53, 218, 255, .36);
}

/* VIP */
.ice-vip {
    width: 58px;
    height: 58px;
    min-width: 58px;

    border-radius: 20px;
    padding: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .68),
            rgba(67, 217, 250, .28)
        );

    border: 1px solid rgba(255, 255, 255, .62);

    box-shadow:
        0 0 18px rgba(79, 224, 255, .34),
        inset 0 1px 0 rgba(255, 255, 255, .7);

    transition: transform .18s ease;
}

.ice-vip img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}

/* نسخة الصفحة الداخلية */
.ice-topbar-back {
    direction: rtl;
}

.ice-center-balance {
    flex: 1;
    display: flex;
    justify-content: center;
}

.ice-topbar-back .ice-actions {
    min-width: 126px;
    justify-content: flex-end;
}

/* ترتيب العناصر */
.ice-topbar .ice-back-logo {
    order: 1;
}

.ice-topbar .ice-center-balance {
    order: 2;
    flex: 1;
    display: flex;
    justify-content: center;
}

.ice-topbar .ice-actions {
    order: 3;
}

/* موبايل */
@media (max-width: 600px) {
    .ice-header {
        padding-top: 8px;
    }

    .ice-topbar {
        width: 95%;
        min-height: 78px;
        padding: 10px 9px;
        gap: 7px;
        border-radius: 24px;
    }

    .ice-snowflakes span:nth-child(1) {
        top: 8px;
        left: 4%;
        font-size: 11px;
    }

    .ice-snowflakes span:nth-child(2) {
        bottom: 8px;
        left: 19%;
        font-size: 8px;
    }

    .ice-snowflakes span:nth-child(3) {
        top: 7px;
        left: 38%;
        font-size: 12px;
    }

    .ice-snowflakes span:nth-child(4) {
        bottom: 7px;
        left: 59%;
        font-size: 9px;
    }

    .ice-snowflakes span:nth-child(5) {
        top: 8px;
        left: 78%;
        font-size: 11px;
    }

    .ice-snowflakes span:nth-child(6) {
        bottom: 9px;
        left: 91%;
        font-size: 8px;
    }

    .ice-logo {
        height: 68px !important;
        width: auto !important;
        max-width: 160px !important;
    }

    .ice-menu,
    .ice-back {
        width: 43px;
        height: 43px;
        min-width: 43px;
        border-radius: 15px;
    }

    .ice-menu i,
    .ice-back i {
        font-size: 19px;
    }

    .ice-balance {
        min-width: 112px;
        height: 43px;
        padding: 0 9px;
        gap: 5px;
    }

    .ice-balance-amount {
        font-size: 12px;
    }

    .ice-balance-currency {
        font-size: 9px;
    }

    .ice-balance i {
        width: 21px;
        height: 21px;
        min-width: 21px;
        font-size: 11px;
    }

    .ice-vip {
        width: 45px;
        height: 45px;
        min-width: 45px;
        border-radius: 16px;
        padding: 3px;
    }

    .ice-vip img {
        border-radius: 13px !important;
    }

    .ice-actions {
        gap: 6px;
    }

    .ice-topbar-back .ice-actions {
        min-width: auto;
    }

    .ice-center-balance {
        flex: unset;
    }
}