/* 🌌 الحاوي العام للأيقونات */
.cosmic-icon {
    /* width: 65px; */
    /* height: 65px; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
    /* background: saddlebrown; */
}

.it-create .cosmic-auth-google,
.it-create .cosmic-auth-ms,
.it-create .cosmic-github-btn {
    width: 50px;
    height: 45px;
}

.it-create .cosmic-auth-box {
    width: 50px;
    height: 45px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid rgba(24, 24, 24, 0.8);
    background: radial-gradient(circle, rgba(0, 164, 239, 0.2), rgba(5, 5, 25, 0.85));
    border-radius: 12px;

}

#uploadText .cosmic-orb {
    width: 30;
    height: 30;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(64, 163, 255, 0.418) 30%,
            rgba(57, 83, 226, 0.363) 60%,
            rgba(2, 23, 116, 0.8) 100%);
    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        inset -10px -10px 30px rgba(69, 86, 241, 0.6),
        0 0 30px rgba(17, 14, 173, 0.4),
        0 0 70px rgba(94, 145, 255, 0.678);
}

.enhancer-options .cosmic-icon {
    animation: none;
    width: 10;
    height: 10;
    transform: scale(0.32) rotate(15deg);
}

.zoom-btn .cosmic-icon {
    width: 65;
    height: 70;
    flex-shrink: 0;
    transform: scale(0.72);
    transform-origin: center center;
    margin: 0;
    animation: none;
    background-color: transparent;
}

.btn-reset-tool .cosmic-icon {
    width: 65;
    height: 70;
    flex-shrink: 0;
    transform: scale(0.99);
    transform-origin: center center;
    margin: 0;
    animation: none;
    background-color: transparent;
}

.cosmic-lang-text {
    animation: none;
}

.theme-toggle .cosmic-sun-simple,
.cosmic-moon-v2 {
    animation: none;
}

.mode-card .cosmic-rocket {
    width: 50;
    height: 65px;
    flex-shrink: 0;
    transform: scale(0.42) rotate(35deg);
    transform-origin: center center;
    margin: -15px -10px;
    animation: none;
}

.mode-card .rocket-body {
    width: 22px;
    height: 45px;
}

.mode-card .rocket-fin {
    bottom: 18px;
    width: 6px;
    height: 15px;
}

.mode-card .cosmic-joystick {
    width: 42px;
    height: 45px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    transform: scale(0.75);
    transform-origin: center center;
    margin: -15px -10px;
    animation: none;
}

.mode-card .joystick-stick {
    width: 8px;
    height: 22px;
}

.mode-card .joystick-head {
    width: 22px;
    height: 18px;
}

.mode-card .joystick-base {
    width: 40px;
    height: 12px;

}



#usageStatus .cosmic-star,
#usageStatusRemove .cosmic-star {
    width: 25px;
    height: 25px;
    animation: none;
    margin: 0 3;
}

#usageStatus .cosmic-star .star-core,
#usageStatusRemove .cosmic-star .star-core {
    display: none;
}


.enhancerintensity .cosmic-crown {
    transform: scale(1.22);
    animation: none;
    margin: 0 40;
}

/* ==========================================
   3. تفاعل Hover واللمس الذكي (Active)
   ========================================== */
.cosmic-icon:hover {
    filter: brightness(1.3);
}

.cosmic-orb:hover,
.cosmic-orb:active,
.upload-zone:hover .cosmic-file,
.upload-zone:active .cosmic-file {
    border-color: var(--text) !important;
    box-shadow:
        inset 0 0 35px rgba(255, 255, 255, 0.377),
        inset -10px -10px 40px rgba(0, 242, 255, 0),
        0 0 50px var(--iconEmoji),
        0 0 90px var(--iconEmoji4) !important;

    /* box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        inset -10px -10px 30px var(--iconEmoji3),
        0 0 30px var(--iconEmoji2),
        0 0 70px var(--iconEmoji4); */

    filter: brightness(1.1) contrast(1.1);
    transform: scale(0.95);
}

.cosmic-success:hover,
.cosmic-success:active {
    border-color: rgba(0, 255, 170, 0.377) !important;
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, 0.404),
        inset -5px -5px 30px rgba(0, 255, 170, 0.404),
        0 0 40px rgba(0, 255, 170, 0.336),
        0 0 80px rgba(0, 255, 170, 0.274) !important;
    filter: brightness(1.2);
}

.cosmic-error:hover,
.cosmic-error:active {
    border-color: rgba(255, 0, 85, 0.9) !important;
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, 0.8),
        inset -5px -5px 30px rgba(255, 0, 85, 0.8),
        0 0 40px rgba(255, 0, 85, 0.8),
        0 0 80px rgba(255, 0, 85, 0.5) !important;
    filter: brightness(1.2);
}

.cosmic-warning:hover,
.cosmic-warning:active {
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(255, 217, 0, 0.418));
}

.cosmic-warning:hover .warning-triangle,
.cosmic-warning:active .warning-triangle {
    background: radial-gradient(circle at 50% 40%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 215, 0, 0.5) 40%,
            rgba(255, 170, 0, 0.3) 75%,
            rgba(20, 15, 0, 0.9) 100%);
}

.mode-card:hover .cosmic-rocket,
.mode-card:hover .rocket-flame {
    transform: translateY(-8px) scale(1.05) rotate(10deg);
}

.cosmic-joystick:hover .joystick-head,
.cosmic-joystick:active .joystick-head {
    filter: brightness(1.25);
    box-shadow: 0 0 20px #00f2ff, 0 0 35px #8a2be2;
}

.cosmic-joystick:hover .joystick-stick {
    /* transform: rotate(10deg); */
}

.cosmic-joystick:active {
    transform: scale(0.94);
}

.mode-card:hover .joystick-stick {
    transform: translateY(-8px) scale(1.05) rotate(10deg);
}

.mode-card:hover .joystick-head,
.mode-card:hover .joystick-base,
.mode-card:hover .cosmic-joystick {
    transform: translateY(-8px) scale(1.05);
}

.cosmic-star:hover,
.cosmic-star:active {
    filter: brightness(1.35) drop-shadow(0 0 20px rgba(255, 246, 185, 0.9));
}

.cosmic-star:hover .star-shape,
.cosmic-star:active .star-shape {
    background: radial-gradient(circle at 35% 35%,
            #ffffff 0%,
            #fff0a5 25%,
            #ffae00 55%,
            #d4af37 80%,
            #4a3300 100%);
}

.cosmic-star:hover {
    transform: scale(1.12) rotate(15deg);
    filter: drop-shadow(0 0 12px #ffd700);
}

.cosmic-star:hover .star-sparkle {
    opacity: 1;
    transform: scale(1.2);
}


.cosmic-star:active {
    transform: scale(0.92);
}

.enhancerintensity .intensityMax:hover .cosmic-crown,
.enhancerintensity .intensityMax:active .cosmic-crown {
    filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 242, 171, 0.8));
    transform: translateY(-2px) scale(1.65);
}

.enhancerintensity .cosmic-crown:active {
    transform: scale(0.93);
}

.cosmic-ban:hover,
.cosmic-ban:active {
    filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 0, 85, 0.8));
}

.cosmic-ban:active {
    transform: scale(0.92);
}

.cosmic-target:hover,
.cosmic-target:active {
    filter: brightness(1.3) drop-shadow(0 0 20px rgba(0, 242, 255, 0.9));
}

.cosmic-target:active {
    transform: scale(0.92);
}

.zoom-controls #btnZoomReset:hover .cosmic-reset .reset-ring {
    transform: rotate(315deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-controls #btnZoomIn:hover .cosmic-zoom-in {
    transform: scale(0.99);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-controls #btnZoomOut:hover .cosmic-zoom-out {
    transform: scale(0.99);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cosmic-icon:active {
    transform: scale(0.92);
}

.zoom-controls #btnModePointer:hover .cosmic-click .click-core {
    transform: scale(0.8);
    background: radial-gradient(circle, var(--text) 0%, var(--iconEmoji6) 70%);
    box-shadow: 0 0 15px var(--text), 0 0 25px var(--iconEmoji6);
}

.zoom-controls #btnModePointer:hover .cosmic-click .click-ring {
    border-color: var(--iconEmoji6);
    box-shadow: 0 0 12px var(--iconEmoji6);
}

.zoom-controls #btnModePan:hover .cosmic-pointer {
    transform: translateY(-5px) scale(1.3);
}

.zoom-controls #btnModePan:hover .cosmic-pointer .pointer-arrow {
    filter: drop-shadow(0 0 12px #00f2ff);
}

.cosmic-trash:hover .trash-lid {
    transform: translateY(-4px) rotate(-12deg);
    filter: brightness(1.3);
}

.cosmic-trash:hover .trash-body {
    /* box-shadow: */
    /* inset 0 0 15px rgba(255, 0, 85, 0.322), */
    /* 0 0 22px rgba(255, 0, 85, 0.288); */
}

.cosmic-trash:active {
    transform: scale(0.92);
}

/* ==========================================
/* Animations / التحريكات 
 --- التحريكات --- 
========================================== */

@-webkit-keyframes fontAnim {
    0% {
        width: 7ch;
    }

    16% {
        width: 8ch;
    }

    32% {
        width: 9ch;
    }

    48% {
        width: 10ch;
    }

    64% {
        width: 11ch;
    }

    80% {
        width: 12ch;
    }

    100% {
        width: 13ch;
    }
}

@-webkit-keyframes fontAnim2 {
    0% {
        word-spacing: 1.2ch;
    }
}

@keyframes orbit-180deg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@keyframes gear-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes orb-float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes core-pulse {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.8);
    }

    100% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

@keyframes orbit-rotate-1 {
    0% {
        transform: rotateX(10deg) rotateY(10deg) rotateZ(-10deg);
    }

    30% {
        transform: rotateX(20deg) rotateY(30deg) rotateZ(-30deg);
    }

    70% {
        transform: rotateX(30deg) rotateY(50deg) rotateZ(-50deg);
    }

    100% {
        transform: rotateX(40deg) rotateY(70deg) rotateZ(0deg);
    }
}

@keyframes orbit-rotate-2 {
    0% {
        transform: rotateX(10deg) rotateY(-10deg) rotateZ(10deg);
    }

    30% {
        transform: rotateX(20deg) rotateY(-30deg) rotateZ(30deg);
    }

    70% {
        transform: rotateX(-30deg) rotateY(-50deg) rotateZ(50deg);
    }

    100% {
        transform: rotateX(-40deg) rotateY(-70deg) rotateZ(0deg);
    }
}

@keyframes flame-burn {
    0% {
        transform: scaleY(0.85) scaleX(0.9);
        opacity: 0.8;
    }

    100% {
        transform: scaleY(1.15) scaleX(1.1);
        opacity: 1;
    }
}

@keyframes joystick-float {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-6px);
    }
}

    @keyframes rocket-float {
    0% {
        transform: rotate(40deg) translate(0px, 0px);
    }

    100% {
        transform: rotate(45deg) translate(10px, -15px);
    }
}

@keyframes cosmicPulse {
    0% {
        transform: scale(0.7);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }

    100% {
        transform: scale(0.7);
        opacity: 0.9;
    }
}

@keyframes moon-sway {
    0% {
        transform: rotate(-8deg) translateX(-2px);
    }

    100% {
        transform: rotate(12deg) translateX(2px);
    }
}

@keyframes ring-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes sun-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes cosmicLaunchSequence {

    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 8px #00f2ff);
    }

    35% {
        transform: translate(-12px, 8px) scale(0.9) rotate(-10deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 5px #00f2ff);
    }

    45% {
        transform: translate(-14px, 10px) scale(1.3) rotate(0deg);
        border-left-color: #ff005554;
        /* تغيير اللون للحظة الانفجار */
        filter: drop-shadow(0 0 25px #ff005548) drop-shadow(0 0 45px #00f2ff);
        opacity: 1;
    }

    60% {
        transform: translate(15px, -2px) scale(1.1);
        border-left-color: #00ffaa;
        filter: drop-shadow(0 0 15px #00ffaa);
        opacity: 1;
    }

    100% {
        transform: translate(220px, -5px) scale(0.5);
        border-left-color: #00ffaa;
        filter: drop-shadow(0 0 20px #00ffaa);
        opacity: 0;
    }
}

@keyframes cosmicLaunchSequenceLeft {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 8px #00f2ff);
    }

    35% {
        transform: translate(12px, 8px) scale(0.9) rotate(10deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 5px #00f2ff);
    }

    45% {
        transform: translate(14px, 10px) scale(1.3) rotate(0deg);
        border-right-color: #ff0055;
        filter: drop-shadow(0 0 25px #ff0055) drop-shadow(0 0 45px #00f2ff);
        opacity: 1;
    }

    60% {
        transform: translate(-15px, -2px) scale(1.1);
        border-right-color: #00ffaa;
        filter: drop-shadow(0 0 15px #00ffaa);
        opacity: 1;
    }

    100% {
        transform: translate(-120px, -5px) scale(0.5);
        border-right-color: #00ffaa;
        filter: drop-shadow(0 0 20px #00ffaa);
        opacity: 0;
    }
}





/* الحلقة الخارجيّة المضيئة */
.cosmic-ban .ban-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 0, 85, 0.2) 40%,
            rgba(100, 0, 30, 0.15) 75%,
            rgba(15, 5, 10, 0.85) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 4px solid #ff0055;
    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, 0.4),
        inset 0 0 20px rgba(255, 0, 85, 0.6),
        0 0 20px rgba(255, 0, 85, 0.5),
        0 0 40px rgba(255, 0, 85, 0.2);
    position: absolute;
}




/* 🚫 علامة المنع الفضائية الزجاجية */
.cosmic-status.cosmic-ban {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

/*  كوره */
.cosmic-orb-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.cosmic-orb {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    /* 🎯 إحضار الكورة في المقدمة لتلتقط الماوس فوراً */
    pointer-events: auto;
    /* 🎯 تأكيد استقبال التفاعلات */

    /* تأثير الزجاج والوهج الفضائي */
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(0, 242, 255, 0.2) 30%,
            rgba(138, 43, 226, 0.15) 60%,
            rgba(0, 0, 0, 0.8) 100%);

    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        inset -10px -10px 30px rgba(138, 43, 226, 0.6),
        0 0 30px rgba(0, 242, 255, 0.4),
        0 0 70px rgba(138, 43, 226, 0.3);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transform-style: preserve-3d;

    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.orbiting-icons,
.orbiting-icons .icon-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 🎯 منع الحلقة والمسار من منع اللمس عن الكورة */
}

.orbiting-icons .icon-ring .iconl {
    pointer-events: auto;
    /* إعادة تفعيل التفاعل للأيقونات نفسها فقط */
}

.cosmic-orb .orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 40%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color-1) 0%, transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    animation: core-pulse 2.5s ease-in-out infinite alternate;
}

.orbiting-icons,
.orbiting-icons .icon-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* transform-style: preserve-3d; */
    pointer-events: none;
}

.orbiting-icons .icon-ring .iconl {
    pointer-events: auto;
}

.settings-orbit {
    position: relative;
    top: 0%;
    left: 0%;
    width: 100;
    height: 100;
    animation: orbit-180deg 4s ease-in-out infinite alternate;
    opacity: 0.4;
}

.settings-gear {
    width: 80px;
    height: 80px;
    position: relative;
    top: -0px;
    left: -0px;
    filter: drop-shadow(0 0 12px rgba(73, 109, 228, 0.7)) drop-shadow(0 0 25px rgba(123, 44, 191, 0.5));
    animation: gear-spin 5s linear infinite;
}

/* cloud */
.cloud-orb {
    width: 80px;
    height: 50px;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(180, 220, 255, 0.4));
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.8);
    animation: orb-float 1.5s ease-in-out infinite alternate;
    backdrop-filter: blur(8px);
}

.cloud-shape {
    width: 170px;
    height: 60px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.4);
}

.cloud-shape::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    top: -40px;
    left: 25px;
}

.cloud-shape::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    top: -25px;
    right: 25px;
}

.cloud-clip {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(0, 242, 255, 0.3));
    /* مسار قص جاهز لشكل سحابة */
    clip-path: path('M 20 60 A 30 30 0 0 1 70 30 A 40 40 0 0 1 140 30 A 30 30 0 0 1 180 60 A 25 25 0 0 1 170 110 L 30 110 A 25 25 0 0 1 20 60 Z');
}

/* 🌌 حاوية الملف الفضائي الزجاجي - مخصص للإضاءة الفاتحة */

.cosmic-file {
    width: 60px;
    height: 75px;
    position: relative;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 35%,
            var(--iconEmoji) 0%,
            var(--iconEmoji) 20%,
            var(--iconEmoji1) 80%,
            var(--iconEmoji2) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* border: 1px solid var(--text); */
    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        inset -10px -10px 30px var(--iconEmoji),
        0 0 30px var(--iconEmoji4),
        0 0 70px var(--iconEmoji9);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.file-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 20%;
    background: linear-gradient(135deg, var(--iconEmoji1), var(--iconEmoji1));
    border-bottom-left-radius: 8px;
    border-left: 1px solid var(--textvar8);
    border-bottom: 1px solid var(--textvar8);
    box-shadow: -2px 2px 8px var(--textvar9);
}

.file-lines {
    position: absolute;
    top: 20px;
    left: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-lines .line {
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--iconEmoji), var(--iconEmoji7));
    /* box-shadow: 0 0 8px rgba(0, 242, 255, 0.8); */
    opacity: 0.8;
}

.file-lines .line-1 {
    width: 40%;
}

.file-lines .line-2 {
    width: 60%;
}

.file-lines .line-3 {
    width: 80%;
}

/* 💚 علامة الصح الفضائية الزجاجية */
.cosmic-status.cosmic-success {
    width: 70px;
    height: 70px;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* خلفية زجاجية بلمسة خضراء فضائية */
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(0, 255, 170, 0.25) 35%,
            rgba(0, 180, 120, 0.15) 70%,
            rgba(5, 20, 15, 0.8) 100%);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 255, 170, 0.4);

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        inset -5px -5px 25px rgba(0, 255, 170, 0.5),
        0 0 25px rgba(0, 255, 170, 0.4),
        0 0 50px rgba(0, 255, 170, 0.2);

    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.cosmic-success .status-icon {
    font-size: 34px;
    font-weight: bold;
    color: #00ffaa;
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.9), 0 0 20px rgba(0, 255, 170, 0.6);
    pointer-events: none;
}

.cosmic-success:active {
    transform: scale(0.92);
}

/* ❤️ علامة الخطأ الفضائية الحمراء */
.cosmic-status.cosmic-error {
    width: 70px;
    height: 70px;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* خلفية زجاجية بلمسة حمراء فضائية */
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 0, 85, 0.25) 35%,
            rgba(180, 0, 50, 0.15) 70%,
            rgba(25 5 10, 0.85) 100%);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 0, 85, 0.4);

    /* الوهج والظل الداخلي والخارجي الأحمر */
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        inset -5px -5px 25px rgba(255, 0, 85, 0.5),
        0 0 25px rgba(255, 0, 85, 0.4),
        0 0 50px rgba(255, 0, 85, 0.2);

    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.cosmic-error .status-icon {
    font-size: 32px;
    font-weight: bold;
    color: #ff0055;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.9), 0 0 20px rgba(255, 0, 85, 0.6);
    pointer-events: none;
}

.cosmic-error:active {
    transform: scale(0.92);
}

/* 💛 علامة التحذير الفضائية الصفراء */
.cosmic-status.cosmic-warning {
    width: 75px;
    height: 75px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.cosmic-warning .warning-triangle {
    position: absolute;
    width: 65px;
    height: 65px;
    background: radial-gradient(circle at 50% 40%,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 215, 0, 0.3) 40%,
            rgba(200, 140, 0, 0.15) 75%,
            rgba(20, 15, 0, 0.8) 100%);

    clip-path: polygon(50% 0%, 100% 90%, 0% 90%);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        0 0 25px rgba(255, 215, 0, 0.5);

    transition: all 0.3s ease;
}

.cosmic-warning .status-icon {
    position: relative;
    z-index: 2;
    top: 6px;
    font-size: 32px;
    font-weight: 900;
    font-family: sans-serif;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 215, 0, 0.6);
    pointer-events: none;
    opacity: 0.5;
}

/* 🚀 الكلاس الأساسي للصاروخ */
.cosmic-rocket {
    width: 65px;
    height: 95px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    /* نقطة التمركز بمنتصف الأيقونة تماماً */
    /* transform: rotate(40deg) scale(1); */
    animation: rocket-float 4s ease-in-out infinite alternate;
    transition: width 0.4s ease;
}

.sidebar .cosmic-rocket,
.cosmic-rocket.is-glass-outline {
    /* transform: rotate(40deg) scale(0.92) !important; */
    margin: -16 11;
}

@media (max-width: 1280px) {
    .sidebar .cosmic-rocket,
    .cosmic-rocket.is-glass-outline {
        /* transform: rotate(40deg) scale(0.62) !important; */
        left: 26px;
    }
}    

.sidebar.collapsed .cosmic-rocket {
    animation: none;
    transform: rotate(20deg) scale(0.72);
    margin: -20 -10;
}

.cosmic-rocket.is-glass-outline .rocket-nose,
.cosmic-rocket.is-glass-outline .rocket-body,
.cosmic-rocket.is-glass-outline .rocket-fin,
.sidebar.collapsed .cosmic-rocket .rocket-nose,
.sidebar.collapsed .cosmic-rocket .rocket-body,
.sidebar.collapsed .cosmic-rocket .rocket-fin,
.sidebar.collapsed .cosmic-rocket .rocket-engine {
    /* background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(0, 242, 255, 0.15) 40%,
            rgba(138, 43, 226, 0.1) 70%,
            rgba(5, 5, 25, 0.4) 100%) !important; */
    /* backdrop-filter: blur(6px); */
    /* -webkit-backdrop-filter: blur(6px); */
    /* border: 1px solid rgba(0, 242, 255, 0.4) !important;
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.3),
        inset -3px -3px 12px rgba(138, 43, 226, 0.3),
        0 0 15px rgba(0, 242, 255, 0.25) !important; */
    animation: none;

}

.sidebar.collapsed .cosmic-rocket .rocket-window {
    /* background: radial-gradient(circle, rgba(0, 242, 255, 0.6) 20%, rgba(5, 5, 25, 0.8) 80%) !important; */
    /* border: 1px solid rgba(255, 255, 255, 0.7); */
    /* box-shadow: 0 0 8px rgba(0, 242, 255, 0.5), inset 0 0 4px #ffffff; */
}

.sidebar.collapsed .cosmic-rocket .rocket-flame {
    opacity: 0.2;
    /* filter: drop-shadow(0 0 6px #00f2ff) drop-shadow(0 0 12px #ff0055); */
    animation: none;

}

.mode-card:has(input:checked) {
    /* background: rgba(138, 43, 226, 0.35); */
    /* border-color: #00f2ff; */
    /* box-shadow: 0 0 15px rgba(0, 242, 255, 0.4), inset 0 0 10px rgba(138, 43, 226, 0.5); */
}

.mode-card:has(input:checked) {
    /* background: rgba(138, 43, 226, 0.35); */
    /* border-color: #00f2ff; */
    /* box-shadow: 0 0 15px rgba(0, 242, 255, 0.4), inset 0 0 10px rgba(138, 43, 226, 0.5); */
}

.rocket-nose {
    width: 26px;
    height: 24px;
    background: linear-gradient(180deg, var(--iconEmoji8) 0%, var(--iconEmoji4) 100%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    /* filter: drop-shadow(0 0 8px #ff0055); */
    z-index: 3;

}

.rocket-body {
    width: 28px;
    height: 42px;
    background: radial-gradient(circle at 35% 30%,
            var(--icontransparent17) 0%,
            var(--iconEmoji) 70%,
            var(--iconEmoji) 50%,
            var(--texttran9) 150%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* border-left: 1px solid rgba(255, 255, 255, 0.4); */
    /* border-right: 1px solid rgba(255, 255, 255, 0.3); */
    box-shadow:
        inset 0 0 12px var(--icontransparent15),
        inset -4px -4px 15px var(--iconEmoji3),
        0 0 20px var(--iconEmoji3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.rocket-window {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--iconEmoji8) 20%, var(--icontborder) 80%);
    border: 2px solid var(--textvar8);
    box-shadow: 0 0 10px var(--iconEmoji9), inset 0 0 5px var(--textvar8);
    position: relative;
    overflow: hidden;
}

.window-reflection {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    /* background: var(--text); */
    border-radius: 50%;
    opacity: 0.8;
}

.rocket-fin {
    position: absolute;
    bottom: 28px;
    width: 12px;
    height: 25px;
    background: linear-gradient(180deg, var(--iconEmoji8), var(--iconEmoji1));
    /* box-shadow: 0 0 10px rgba(255, 0, 85, 0.5); */
    z-index: 1;
}

.fin-left {
    left: 7px;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    border-bottom-left-radius: 4px;
}

.fin-right {
    right: 7px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    border-bottom-right-radius: 4px;
}

.rocket-engine {
    width: 16px;
    height: 6px;
    background: var(--iconEmoji);
    border-radius: 0 0 3px 3px;
    border: 1px solid var(--texttran8);
    z-index: 2;
}

.rocket-flame {
    width: 14px;
    height: 22px;

    background: radial-gradient(circle at 50% 0%, var(--textvar8) 0%, var(--textvar2) 35%, var(--textvar1) 70%, transparent 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    /* filter: drop-shadow(0 0 10px #00f2ff) drop-shadow(0 0 18px #ff0055); */
    animation: flame-burn 0.4s ease-in-out infinite alternate;
    z-index: 1;
}

/* 🕹️ حاوي دراع التحكم الفضائي */
.cosmic-joystick {
    width: 70px;
    height: 85px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: joystick-float 4s ease-in-out infinite alternate;
}

.joystick-head {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
            #ffffff 0%,
            #00f2ff 35%,
            #8a2be2 75%,
            #050519 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 0 10px #ffffff,
        0 0 15px #00f2ff,
        0 0 25px rgba(138, 43, 226, 0.6);
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease;
}

.head-sparkle {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.8;
}

.joystick-stick {
    width: 8px;
    height: 32px;
    background: linear-gradient(180deg, rgba(0, 242, 255, 0.8), rgba(138, 43, 226, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
    margin-top: -6px;
    margin-bottom: -4px;
    z-index: 2;
    transform-origin: bottom center;
    transform: rotate(-12deg);
}

.joystick-base {
    width: 55px;
    height: 22px;
    background: radial-gradient(ellipse at 50% 30%,
            rgba(138, 43, 226, 0.4) 0%,
            rgba(5, 5, 25, 0.9) 80%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 242, 255, 0.5);
    border-radius: 50%;
    box-shadow:
        inset 0 0 12px rgba(0, 242, 255, 0.4),
        0 0 20px rgba(138, 43, 226, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.base-ring {
    width: 25px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #00f2ff;
    box-shadow: 0 0 8px #00f2ff;
}

/* ⭐ حاوي النجمة الذهبية الفضائية */
.cosmic-star {
    width: 32px;
    /* الحجم الافتراضي (تقدر تخليه 24px أو 48px أو أي حجم تحبه) */
    height: 32px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cosmic-star .star-shape {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 35% 35%,
            #ffffff 0%,
            #ffe57f 20%,
            #ffd700 45%,
            #b8860b 70%,
            #3a2800 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 16px rgba(218, 165, 32, 0.5));
    transition: all 0.3s ease;
}

.cosmic-star .star-core {
    position: absolute;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ffe87c 60%, transparent 100%);
    box-shadow: 0 0 10px #ffffff, 0 0 18px #ffd700;
    pointer-events: none;
    z-index: 2;
}

.cosmic-star .star-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
}

.cosmic-star .star-sparkle.horizontal {
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    box-shadow: 0 0 6px #ffffff, 0 0 12px #ffd700;
}

.cosmic-star .star-sparkle.vertical {
    width: 2px;
    height: 90%;
    background: linear-gradient(180deg, transparent, #ffffff, transparent);
    box-shadow: 0 0 6px #ffffff, 0 0 12px #ffd700;
}


/* 👑 حاوي التاج الفضائي الملكي المرن */
.cosmic-crown {
    width: 32px;
    /* يمكنك تغيير الحجم هنا بحرية (مثلاً 24px أو 48px أو 70px) */
    height: 24px;
    /* يفضل إبقاء نسبة الارتفاع تقريباً 75% من العرض */
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* قمم التاج */
.cosmic-crown .crown-spikes {
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.cosmic-crown .spike {
    background: linear-gradient(180deg,
            rgba(255, 215, 0, 0.85) 0%,
            rgba(138, 43, 226, 0.45) 60%,
            rgba(0, 242, 255, 0.2) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 215, 0, 0.7);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 215, 0, 0.4);
    position: relative;
    display: flex;
    justify-content: center;
}

.cosmic-crown .spike-center {
    width: 38%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.cosmic-crown .spike-left,
.cosmic-crown .spike-right {
    width: 32%;
    height: 75%;
}

.cosmic-crown .spike-left {
    clip-path: polygon(20% 0%, 100% 100%, 0% 100%);
}

.cosmic-crown .spike-right {
    clip-path: polygon(80% 0%, 100% 100%, 0% 100%);
}

.cosmic-crown .gem {
    position: absolute;
    top: -20%;
    width: 25%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
}

.cosmic-crown .gem-diamond {
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff, 0 0 12px #00f2ff;
}

.cosmic-crown .gem-emerald {
    background: #00ffaa;
    box-shadow: 0 0 5px #00ffaa;
}

.cosmic-crown .gem-ruby {
    background: #ff0055;
    box-shadow: 0 0 5px #ff0055;
}

.cosmic-crown .crown-body {
    width: 100%;
    height: 45%;
    background: radial-gradient(circle at 50% 30%,
            rgba(255, 215, 0, 0.45) 0%,
            rgba(138, 43, 226, 0.35) 50%,
            rgba(5, 5, 25, 0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 215, 0, 0.6);
    border-end-start-radius: 6px;
    border-end-end-radius: 6px;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.cosmic-crown .crown-band {
    display: flex;
    gap: 15%;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cosmic-crown .band-gem {
    width: 10%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #00f2ff;
    box-shadow: 0 0 4px #00f2ff;
}

.cosmic-crown .band-gem.main-gem {
    width: 14%;
    background: #ffd700;
    box-shadow: 0 0 6px #ffd700;
}

/* 🎯 حاوي أيقونة الهدف الفضائية */
.cosmic-target {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.target-ring {
    position: absolute;
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.outer-ring {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(0, 242, 255, 0.7);
    box-shadow:
        0 0 15px rgba(0, 242, 255, 0.5),
        inset 0 0 10px rgba(0, 242, 255, 0.3);
}

.middle-ring {
    width: 38px;
    height: 38px;
    border: 2px dashed rgba(255, 0, 85, 0.8);
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.6);
    animation: ring-spin 12s linear infinite;
}

.target-core {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ff0055 60%, #8a2be2 100%);
    box-shadow: 0 0 12px #ffffff, 0 0 20px #ff0055;
    z-index: 3;
}

.target-crosshair {
    position: absolute;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
}

.target-crosshair.horizontal {
    width: 100%;
    height: 2px;
    box-shadow: 0 0 8px #ffffff, 0 0 12px #00f2ff;
}

.target-crosshair.vertical {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ffffff, transparent);
    box-shadow: 0 0 8px #ffffff, 0 0 12px #00f2ff;
}

/* ==========================================
     1. 📘 فيسبوك (Cosmic Facebook)
========================================== */
.cosmic-fb {
    /* background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.3), rgba(24, 119, 242, 0.4) 60%, rgba(5, 5, 25, 0.85) 100%);
        border: 1.5px solid rgba(24, 119, 242, 0.8);
        box-shadow: inset 0 0 10px rgba(24, 119, 242, 0.5), 0 0 15px rgba(24, 119, 242, 0.4); */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--btn1);

}

.cosmic-fb .fb-letter {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 36px;
    top: 5;
    position: relative;
    color: var(--lightboby);
    /* color: var(--lightboby); */
    /* text-shadow: 0 0 10px #1877f2, 0 0 20px #1877f2; */
}

/* ==========================================
    2. 📸 إنستغرام (Cosmic Instagram)
========================================== */
.cosmic-insta {
    width: 30px;
    height: 30px;
    border-radius: 25%;
    /* background: var(--text); */
    /* background: radial-gradient(circle at 30% 30%, rgba(255, 220, 128, 0.2), rgba(214, 41, 119, 0.144) 50%, rgba(5, 5, 25, 0.85) 100%); */
    border: 2px solid var(--btn1);
    /* box-shadow: inset 0 0 12px rgba(250, 126, 30, 0.4), 0 0 18px rgba(214, 41, 118, 0.5); */
}

.cosmic-insta .insta-lens {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--btn1);
    /* box-shadow: 0 0 8px #ffffff, inset 0 0 6px #fa7e1e; */
}

.cosmic-insta .insta-dot {
    position: absolute;
    top: 2px;
    right: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--btn1);
    /* box-shadow: 0 0 6px #ffffff; */
}

/* ==========================================
     3. 💼 لينكد إن (Cosmic LinkedIn)
========================================== */
.cosmic-linkedin {
    width: 30px;
    height: 30px;
    border-radius: 12%;
    /* background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.3), rgba(10, 102, 194, 0.4) 60%, rgba(5, 5, 25, 0.85) 100%); */
    /* border: 1.5px solid rgba(10, 102, 194, 0.8); */
    /* box-shadow: inset 0 0 10px rgba(10, 102, 194, 0.5), 0 0 15px rgba(10, 102, 194, 0.4); */
    background-color: var(--btn1);
}

.cosmic-linkedin .in-letter {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 28px;
    color: var(--lightboby);
    /* text-shadow: 0 0 10px #0a66c2, 0 0 18px #00f2ff; */
}

/* ==========================================
   🔑 أيقونات مدخلات البيانات (Account Icons)
========================================== */

.cosmic-input-user .user-head {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.8px solid var(--texttran5);
    box-shadow: 0 0 6px var(--texttran5);
    position: absolute;
    top: 1px;
}

.itEmail-box .cosmic-icon-wrapper {
    position: absolute;
    right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

[lang="en"] .itEmail-box .cosmic-icon-wrapper {
    right: auto;
    left: 12px;
}

/* 1. 👤 اسم المستخدم */
.cosmic-input-user {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cosmic-input-user .user-body {
    width: 16px;
    height: 8px;
    border-radius: 8px 8px 0 0;
    border: 1.8px solid var(--texttran5);
    border-bottom: none;
    box-shadow: 0 0 6px var(--texttran5);
    position: absolute;
    bottom: 1px;
}

/* ✉️ 2. أيقونة البريد الإلكتروني (Cosmic Email) */
.cosmic-input-email {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-input-email .envelope-body {
    width: 20px;
    height: 14px;
    border: 1.8px solid var(--texttran5, #00f2ff);
    border-radius: 3px;
    box-shadow: 0 0 6px var(--texttran5, #00f2ff);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.cosmic-input-email .envelope-flap {
    width: 12px;
    height: 12px;
    border: 1.8px solid var(--texttran5, #00f2ff);
    position: absolute;
    top: -7px;
    transform: rotate(45deg);
    box-shadow: 0 0 4px var(--texttran5, #00f2ff);
}

/* 🔒 3. أيقونة الرقم السري (Cosmic Lock) */
.cosmic-input-lock {
    position: relative;
    width: 20px;
    height: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.cosmic-input-lock .lock-shackle {
    width: 10px;
    height: 9px;
    border: 1.8px solid #ff0055;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 6px #ff005579;
    position: absolute;
    top: 0;
}

.cosmic-input-lock .lock-body {
    width: 18px;
    height: 13px;
    background: rgba(255, 0, 85, 0.25);
    border: 1.8px solid #ff005567;
    border-radius: 4px;
    box-shadow: 0 0 8px #ff005567;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

.cosmic-input-lock .lock-keyhole {
    width: 3px;
    height: 5px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 5px #ffffff;
}

/* 🛡️ 4. أيقونة تأكيد الرقم السري (Cosmic Confirm Shield) */
.cosmic-input-confirm {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-input-confirm .shield-body {
    width: 18px;
    height: 20px;
    background: rgba(0, 255, 170, 0.2);
    border: 1.8px solid #00ffaa;
    clip-path: polygon(50% 0%, 100% 20%, 100% 70%, 50% 100%, 0% 70%, 0% 20%);
    box-shadow: 0 0 8px #00ffaa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-input-confirm .check-mark {
    color: #ffffff;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 0 5px #00ffaa;
    margin-top: -1px;
}


/* ==========================================
   🚀 أيقونات التسجيل السريع (Social Auth)
========================================== */

/* 1. 🌐 Google */
.cosmic-auth-google {
    border: 1.5px solid rgba(234, 67, 53, 0.8);
    background: radial-gradient(circle, rgba(234, 67, 53, 0.2), rgba(5, 5, 25, 0.85));
    box-shadow: 0 0 12px rgba(234, 67, 53, 0.4);
    border-radius: 10px;
    font-size: 1.3rem;

}

.cosmic-auth-google .auth-text {
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
    color: #ffffff;
    text-shadow: 0 0 10px #ea4335, 0 0 15px #fbbc05;
}

/* 2. 🪟 Microsoft */
.cosmic-auth-ms {
    border-radius: 12px;
    border: 1.5px solid rgba(0, 164, 239, 0.8);
    background: radial-gradient(circle, rgba(0, 164, 239, 0.2), rgba(5, 5, 25, 0.85));
    box-shadow: 0 0 12px rgba(0, 164, 239, 0.4);
}

.cosmic-auth-ms .ms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 22px;
    height: 22px;
}

.cosmic-auth-ms .ms-grid span {
    background: #ffffff;
    box-shadow: 0 0 6px #00a4ef;
    border-radius: 1px;
}

/* 🐙 تفاصيل أيقونة GitHub الفضائية */
.cosmic-github-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid rgba(87, 87, 87, 0.8);
    background: radial-gradient(circle, rgba(0, 164, 239, 0.2), rgba(5, 5, 25, 0.85));
    border-radius: 12px;
}

.cosmic-github-btn .github-circle {
    width: 28px;
    height: 28px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.cosmic-github-btn .octocat-head {
    width: 14px;
    height: 10px;
    background: #ffffff;
    border-radius: 6px 6px 4px 4px;
    position: absolute;
    bottom: 9px;
    box-shadow: 0 0 6px #ffffff;
}

.cosmic-github-btn .octocat-ear {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid #ffffff;
    position: absolute;
    top: -4px;
}

.cosmic-github-btn .octocat-ear.left {
    left: 0px;
}

.cosmic-github-btn .octocat-ear.right {
    right: 0px;
}

.cosmic-github-btn .octocat-body {
    width: 10px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 6px #ffffff;
}

/* 🍏 تفاصيل أيقونة Apple الفضائية */
.cosmic-auth-box {}

.cosmic-apple-btn {
    width: 26px;
    height: 30px;
    position: relative;
}

.cosmic-apple-btn .apple-body {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #d1d5db 100%);
    border-radius: 10px 10px 9px 9px;
    position: absolute;
    bottom: 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.cosmic-apple-btn .apple-bite {
    width: 10px;
    height: 10px;
    /* background:   rgba(5, 5, 25, 0.85); */
    /* نفس لون خلفية المربع */
    position: absolute;
    top: 3px;
    right: -5px;
}

.cosmic-apple-btn .apple-leaf {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 0 8px 0 8px;
    position: absolute;
    top: 0px;
    right: 7px;
    transform: rotate(-10deg);
    box-shadow: 0 0 6px #ffffff;
}

/* ==========================================
     2. 🔍 أيقونة تكبير (Zoom In)
========================================== */

.cosmic-zoom-in .scope-glass,
.cosmic-zoom-out .scope-glass {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.253) 0%,
            var(--iconEmoji) 100%,
            var(--iconEmoji) 50%,
            var(--iconEmoji) 10%);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid var(--iconEmoji);
    box-shadow: 0 0 10px var(--iconEmoji), 0 0 15px var(--iconEmoji);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-zoom-in .scope-handle,
.cosmic-zoom-out .scope-handle {
    width: 6px;
    height: 18px;
    background: linear-gradient(180deg, var(--iconEmoji), var(--iconEmoji2));
    border-radius: 3px;
    position: absolute;
    bottom: 6px;
    right: 10px;
    transform: rotate(-45deg);
    box-shadow: 0 0 8px var(--iconEmoji);
}

.cosmic-zoom-in .plus-horizontal {
    width: 18px;
    height: 3px;
    background: var(--textvar);
    box-shadow: 0 0 8px var(--textvar), 0 0 12px var(--iconEmoji);
    border-radius: 2px;
    position: absolute;
}

.cosmic-zoom-in .plus-vertical {
    width: 3px;
    height: 18px;
    background: var(--textvar);
    box-shadow: 0 0 8px var(--textvar), 0 0 12px var(--iconEmoji);
    border-radius: 2px;
    position: absolute;
}

.cosmic-zoom-out .minus-line {
    width: 18px;
    height: 3px;
    background: var(--textvar);
    box-shadow: 0 0 8px var(--textvar), 0 0 12px var(--iconEmoji);
    border-radius: 2px;
    position: absolute;
}

/* ==========================================
     4. 🔄 أيقونة إعادة الضبط (Reset)
========================================== */
.cosmic-reset .reset-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid var(--iconEmoji6);
    border-right: 3px solid var(--iconEmoji1);
    border-bottom: 3px solid var(--iconEmoji3);
    box-shadow: 0 0 12px var(--iconEmoji);
    position: absolute;
    transform: rotate(-45deg);
}

.cosmic-reset .reset-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid var(--iconEmoji6);
    position: absolute;
    top: 7px;
    right: 10px;
    transform: rotate(40deg);
    filter: drop-shadow(0 0 6px var(--iconEmoji7));
}

.cosmic-reset .reset-core {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--iconEmoji);
    box-shadow: 0 0 10px var(--iconEmoji6), 0 0 18px var(--iconEmoji3);
}

/* 🌌 حاوي أيقونة النقر التفاعلية */
.cosmic-click {
    width: 32px;
    height: 32px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cosmic-click .click-core {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, var(--text) 0%, var(--iconEmoji) 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--iconEmoji3), 0 0 18px var(--iconEmoji);
    position: absolute;
    z-index: 2;
    transition: all 0.3s ease;
}

.cosmic-click .click-ring {
    position: absolute;
    border: 1.5px solid var(--iconEmoji);
    border-radius: 50%;
    opacity: 0.7;
    box-sizing: border-box;
}

.cosmic-click .click-ring.ring-1 {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 8px var(--iconEmoji);
    animation: cosmicPulse 2s ease-in-out infinite;
}

.cosmic-click .click-ring.ring-2 {
    width: 30px;
    height: 30px;
    border-color: var(--iconEmoji3);
    box-shadow: 0 0 10px var(--iconEmoji3);
    animation: cosmicPulse 2s ease-in-out infinite 1s;
}

/* ==========================================
       🖱️ 2. أيقونة مؤشر الماوس الفضائي (Cosmic Pointer)
  ========================================== */
.cosmic-pointer {
    width: 32px;
    height: 32px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cosmic-pointer .pointer-arrow {
    position: absolute;
    top: 15%;
    left: 18%;
    width: 60%;
    height: 65%;
    background: linear-gradient(135deg, var(--iconEmoji1) 0%, var(--iconEmoji1) 40%, var(--iconEmoji5) 100%);
    clip-path: polygon(0 0, 0 100%, 32% 72%, 65% 100%, 78% 88%, 45% 60%, 82% 58%);
    box-shadow: 0 0 10px var(--iconEmoji6);
    filter: drop-shadow(0 0 6px var(--iconEmoji6));
    transition: all 0.3s ease;
}

/* ==========================================
    🗑️أيقونة سلة المهملات الفضائية
========================================== */

.cosmic-trash {
    width: 65px;
    height: 65px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.cosmic-trash .trash-lid {
    width: 38px;
    height: 6px;
    background: linear-gradient(90deg, var(--icontrash), var(--iconEmoji3));
    border-radius: 3px;
    position: relative;
    /* box-shadow: 0 0 10px #ff00557a; */
    z-index: 2;
    transition: transform 0.3s ease;
}

.cosmic-trash .trash-handle {
    width: 12px;
    height: 5px;
    border: 2px solid var(--text);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    /* box-shadow: 0 0 6px #ffffff;     */
}

.cosmic-trash .trash-body {
    width: 30px;
    height: 34px;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.3) 0%,
            var(--icontrash1) 50%,
            var(--iconEmoji3) 80%,
            rgba(5, 5, 25, 0.85) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid var(--icontrashborder);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow:
        inset 0 0 10px var(--icontrashborder),
        0 0 15px var(--icontrash2);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 4px 2px;
    margin-top: 1px;
    z-index: 1;
}

.cosmic-trash .trash-line {
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, var(--text), var(--icontrash2));
    border-radius: 2px;
    /* box-shadow: 0 0 6px #ff005588; */
    opacity: 0.85;
}

/* 🌌 الحاوي العام لأيقونة الانطلاق الفضائية */
.cosmic-start {
    display: none;
    width: 100%;
    height: auto;
    position: relative;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* overflow: hidden; */
    box-sizing: border-box;
}

.cosmic-start .start-triangle {
    width: 0;
    height: 0;
    border-top: 0.7em solid transparent;
    border-bottom: 0.7em solid transparent;
    border-left: 1.0em solid #00f2ff;
    margin-left: 0.4em;
    filter: drop-shadow(0 0 8px #00f2ff);
    transition: all 0.3s ease;
}

/* 🚀 تشغيل الحركة العادية */
.cosmic-start.is-launched .start-triangle {
    animation: cosmicLaunchSequence 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ⬅️ اتجاه الشمال (flip-left) */
.cosmic-start.flip-left .start-triangle {
    border-left: none;
    border-right: 0.55em solid #00f2ff;
    margin-left: 0;
    margin-right: 0.1em;
}

/* 🚀 تشغيل حركة الشمال */
.cosmic-start.flip-left.is-launched .start-triangle {
    animation: cosmicLaunchSequenceLeft 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 🌌 الحاوي العام للتحميل الفضائي */
.cosmic-orb-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.cosmic-orb-container .load {
    pointer-events: none;
    position: relative;
    width: 7ch;
    height: 1.8em;
    text-align: left;
    line-height: 1.8em;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Julius Sans One', sans-serif;
    font-size: 1.5rem;
    opacity: 0.2;
    font-weight: 600;
    color: var(--text);
    animation-name: fontAnim, orb-float;
    animation-duration: 3.75s, 4s;
    animation-timing-function: ease, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, alternate;
    word-wrap: break-word;
    overflow: hidden;
    display: none;
}

/* ==========================================
   1. 🔤 أيقونة الترجمة واللغات (文A)
   ========================================== */
.cosmic-lang-text .cosmic-icon {
    width: 65px;
    height: 65px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    /* top: -5; */
    /* right: 12; */
}

.cosmic-lang-text {
    border-radius: 14px;
    border: none;
}

.sidebar .Change_Language .cosmic-lang-text {
    transition: all 0.4s ease;
    opacity: 0;
    position: absolute;
    color: var(--icon1);
}

.collapsed .Change_Language .cosmic-lang-text {
    transition: all 0.4s ease;
    opacity: 1;
}

.cosmic-lang-text .char-chinese {
    font-family: sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: var(--icon);
    /* text-shadow: 0 0 8px #00f2ff; */
    position: absolute;
    top: 4px;
    left: 16px;
}

.cosmic-lang-text .char-english {
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: var(--icon);
    /* text-shadow: 0 0 8px #8a2be2; */
    position: absolute;
    top: 24px;
    right: 9px;
}

/* ==========================================
   2. ☀️ أيقونة وضع النهار (الشمس)
   ========================================== */
.cosmic-sun-simple .cosmic-icon {
    width: 65px;
    height: 65px;   
    position: relative;
    display: flex;
    /* background: #3a2800; */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
}

.cosmic-sun-simple {
    background-color: transparent;
}

.cosmic-sun-simple .sun-center {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid #ffffff;
    /* box-shadow: 0 0 10px #ffd700, inset 0 0 6px #ffd700; */
    /* background: rgba(255, 215, 0, 0.2); */
}

.cosmic-sun-simple .sun-ray {
    position: absolute;
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ffffff, #ffd700);
    border-radius: 8px;
    box-shadow: 0 0 6px #ffd700;
}

.cosmic-sun-simple .ray-1 {
    transform: rotate(0deg);
}

.cosmic-sun-simple .ray-2 {
    transform: rotate(45deg);
}

.cosmic-sun-simple .ray-3 {
    transform: rotate(90deg);
}

.cosmic-sun-simple .ray-4 {
    transform: rotate(135deg);
}

/* 🌙 القمر الفضائي المطور */
.cosmic-moon-v2 .cosmic-icon {
    width: 65px;
    height: 65px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    top: -5;
    right: 9;
}

.cosmic-moon-v2 {
    /* background-color: gold; */
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    align-content: center;
    /* top: -5; */
    /* right: -5; */
    ;
}

.sidebar.collapsed .cosmic-moon-v2 .moon-body {
    box-shadow: -7px 4px 0 1px var(--icon);
    animation: none;
    filter: none;
    animation: none;
}

.cosmic-moon-v2 .moon-body {
    /* background-color: darkblue; */
    width: 29px;
    height: 29px;
    border-radius: 50%;
    box-shadow: -7px 4px 0 2px var(--icon1);
    filter: drop-shadow(0 0 8px var(--iconEmoji3)) drop-shadow(0 0 14px var(--iconEmoji5));
    animation: moon-sway 4s ease-in-out infinite alternate;
}

.sidebar.collapsed .cosmic-moon-v2 .star,
.sidebar.collapsed .cosmic-moon-v2 .space-dot {
    color: hsla(0, 0%, 100%, 0.377);
    text-shadow: 0 0 6px #ffffff42, 0 0 10px #00f2ff00;
}

.cosmic-moon-v2 .star {
    position: absolute;
    color: #ffffff;
    text-shadow: 0 0 6px #ffffff, 0 0 10px #00f2ff;
    pointer-events: none;
    opacity: 0.6;
}

.cosmic-moon-v2 .star-1 {
    top: 16px;
    right: 24px;
    font-size: 9px;
}

.cosmic-moon-v2 .star-2 {
    top: 27px;
    right: 20px;
    font-size: 11px;
    color: #00f2ff;
}

.cosmic-moon-v2 .star-3 {
    bottom: 27px;
    left: 24px;
    font-size: 8px;
}

.cosmic-moon-v2 .space-dot {
    position: absolute;
    border-radius: 50%;
    background: #ffffffd3;
    box-shadow: 0 0 6px #ffffff, 0 0 10px #00f2ff;
}

.cosmic-moon-v2 .dot-1 {
    width: 3px;
    height: 3px;
    top: 27px;
    right: 20px;
    opacity: 0.6;
}

.cosmic-moon-v2 .dot-2 {
    width: 2px;
    height: 2px;
    top: 22px;
    right: 9px;
    opacity: 0.6;
}

.cosmic-moon-v2 .dot-3 {
    width: 3px;
    height: 3px;
    top: 32px;
    right: 12px;
    opacity: 0.6;
    background: #8a2be2;
}


/* ==========================================
   🌌 التنسيق العام لمكونات الأيقونات الفضائية
   ========================================== */
[class^="cosmic-icon-"] {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    /* background: rgba(18, 24, 41, 0.5);
    border: 1px solid rgba(0, 242, 255, 0.25);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.1); */
    transition: all 0.3s ease;
    cursor: pointer;
}

[class^="cosmic-icon-"]:hover {
    border-color: #00f2ff;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4), inset 0 0 8px rgba(0, 242, 255, 0.2);
    transform: translateY(-2px);
}

/* 🍔 1. القائمة الجانبية (Hamburger Menu) */
.cosmic-icon-menu {
    flex-direction: column;
    gap: 4px;
}

.cosmic-icon-menu .menu-line {
    width: 18px;
    height: 2px;
    background: var(--icon);
    border-radius: 2px;
    /* box-shadow: 0 0 6px #00f2ff; */
    transition: all 0.3s ease;
}

.cosmic-icon-menu .menu-line.mid {
    width: 13px;
}

/* 🔔 2. الإشعارات (Bell) */
.cosmic-icon-bell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid rgba(0, 242, 255, 0.25); */
    /* box-shadow: 0 0 10px rgba(0, 242, 255, 0.1); */
}

.cosmic-icon-bell .bell-dome {
    width: 12px;
    height: 10px;
    border: 2px solid var(--icon1);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    /* box-shadow: 0 0 6px #00f2ff; */
    position: relative;
}

.cosmic-icon-bell .bell-dome::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -3px;
    width: 14px;
    height: 2px;
    background: var(--icon1);
    border-radius: 2px;
    /* box-shadow: 0 0 6px #00f2ff; */
}

.cosmic-icon-bell .bell-clapper {
    width: 4px;
    height: 4px;
    background: var(--icon1);
    border-radius: 50%;
    /* box-shadow: 0 0 6px #00ffaa; */
    margin-top: 2px;
}

/* 🔍 3. البحث (Search Glass) */
.cosmic-icon-search .search-lens {
    width: 12px;
    height: 12px;
    border: 2px solid #00f2ff;
    border-radius: 50%;
    box-shadow: 0 0 6px #00f2ff;
    transform: translate(-2px, -2px);
}

.cosmic-icon-search .search-handle {
    width: 2px;
    height: 8px;
    background: #00f2ff;
    box-shadow: 0 0 6px #00f2ff;
    transform: rotate(-45deg) translate(3px, 7px);
    position: absolute;
}

#floatingScrollButtons {
    position: fixed;
    bottom: 30px;
    left: 110px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#floatingScrollButtons button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--icontransparent3);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s;
}

@media (min-width: 100px) and (max-width: 452px) {

    #floatingScrollButtons {
        z-index: 11;
        flex-direction: column;
        gap: 10px;
        position: fixed !important;
        /* width: 10%; */
        /* height: 50; */
        top: 78%;
        margin: 0 57%;
        /* display: block; */
    }
}


/* ⬆️ 4. سهم للأعلى (Back to up) */
.cosmic-icon-arrow-up .arrow-head-up {
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--iconEmoji);
    border-left: 2px solid var(--iconEmoji);
    transform: rotate(45deg);
    box-shadow: -2px -2px 6px var(--iconEmoji);
}

.cosmic-icon-arrow-up .arrow-stem {
    width: 2px;
    height: 10px;
    background: var(--iconEmoji);
    box-shadow: 0 0 6px var(--iconEmoji);
    position: absolute;
    top: 12px;
}

/* ⬆️ 4. سهم للأعلى (Back to Top) */
.cosmic-icon-arrow-top .arrow-head-top {
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--iconEmoji);
    border-right: 2px solid var(--iconEmoji);
    transform: rotate(45deg);
    top: 4px;
    position: relative;
    box-shadow: 2px 2px 6px var(--iconEmoji);
}

.cosmic-icon-arrow-top .arrow-stemtop {
    width: 2px;
    height: 10px;
    background: var(--iconEmoji);
    box-shadow: 0 0 6px var(--iconEmoji);
    position: absolute;
    top: 12px;
}

/* 🔽 5. سهم لأسفل (Dropdown Arrow) */
.cosmic-icon-arrow-down .arrow-head-down {
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #00f2ff;
    border-right: 2px solid #00f2ff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 6px #00f2ff;
}

/* 🛒 عربة التسوق الإيموجي (Supermarket Cart) */
.cosmic-icon-cart {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-icon-cart .supermarket-cart {
    position: relative;
    width: 20px;
    height: 18px;
}

.cosmic-icon-cart .cart-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 5px;
    border-left: 2px solid var(--icon1);
    border-top: 2px solid var(--icon1);
    box-shadow: 0 0 4px var(--icon1);
}

.feature-icon .cosmic-icon-cart {
    transform: scale(1.5);
    box-shadow: none;
    border: none;
    background: transparent;
}

.cosmic-icon-cart .cart-basket-mesh {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 15px;
    height: 10px;
    border: 1.8px solid var(--icon1);
    border-radius: 1px 3px 3px 3px;
    /* box-shadow: 0 0 6px #00f2ff; */
    /* background: rgba(0, 242, 255, 0.1); */
    overflow: hidden;
}

.cosmic-icon-cart .mesh-line {
    width: 100%;
    height: 50%;
    border-bottom: 1px dashed var(--icon);
}

.cosmic-icon-cart .cart-wheels {
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 13px;
    display: flex;
    justify-content: space-between;
}

.cosmic-icon-cart .wheel {
    width: 3.5px;
    height: 3.5px;
    background: var(--icon1);
    border-radius: 50%;
    /* box-shadow: 0 0 6px #00ffaa; */
}


/* ❤️ 7. المفضلة (Heart) */
.cosmic-icon-heart .heart-shape {
    width: 12px;
    height: 12px;
    background: #ff0055;
    transform: rotate(45deg);
    box-shadow: 0 0 10px #ff0055;
    position: relative;
}

.cosmic-icon-heart .heart-shape::before,
.cosmic-icon-heart .heart-shape::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #ff0055;
    border-radius: 50%;
    position: absolute;
}

.cosmic-icon-heart .heart-shape::before {
    top: -6px;
    left: 0;
}

.cosmic-icon-heart .heart-shape::after {
    left: -6px;
    top: 0;
}

/* 💬 8. الدردشة (Chat Bubble) */
.cosmic-icon-chat .chat-bubble {
    width: 18px;
    height: 14px;
    border: 2px solid #00f2ff;
    border-radius: 6px;
    box-shadow: 0 0 8px #00f2ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-icon-chat .chat-dots span {
    width: 2px;
    height: 2px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 1px;
    box-shadow: 0 0 4px #ffffff;
}

/* 🛠️ الإعدادات (Crossed Hammer & Double Wrench) */
.cosmic-icon-gear {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-icon-gear .cross-tools {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🔨 المطرقة من الأعلى (مائلة 45 درجة لليمين) */
.cosmic-icon-gear .hammer {
    position: absolute;
    transform: rotate(45deg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cosmic-icon-gear .hammer-head {
    width: 9px;
    height: 5px;
    background: #00ffaa;
    border-radius: 1px;
    box-shadow: 0 0 6px #00ffaa;
}

.cosmic-icon-gear .hammer-handle {
    width: 2.5px;
    height: 14px;
    background: #00f2ff;
    box-shadow: 0 0 5px #00f2ff;
}

/* 🔧 المفتاح مزدوج الوجهين مقسوم من النص (مائل -45 درجة لليسار) */
.cosmic-icon-gear .wrench-double {
    position: absolute;
    transform: rotate(-45deg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* الرأس العلوي للمفتاح */
.cosmic-icon-gear .wrench-head {
    width: 6px;
    height: 5px;
    border: 1.8px solid #00ffaa;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 5px #00ffaa;
    box-sizing: border-box;
}

/* الرأس السفلي للمفتاح (معكوس) */
.cosmic-icon-gear .wrench-head.bottom {
    transform: rotate(180deg);
}

/* ساق المفتاح المقسومة من المنتصف */
.cosmic-icon-gear .wrench-stem {
    width: 2.5px;
    height: 10px;
    background: linear-gradient(to bottom, #00f2ff 35%, transparent 35%, transparent 65%, #00f2ff 65%);
    box-shadow: 0 0 5px #00f2ff;
}


@keyframes gearRotate {
    100% {
        transform: rotate(360deg);
    }
}

/* 📍 10. الخريطة (Map Pin) */
.cosmic-icon-pin .pin-head {
    width: 12px;
    height: 12px;
    background: rgba(0, 242, 255, 0.3);
    border: 2px solid #00f2ff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 8px #00f2ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-icon-pin .pin-dot {
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffffff;
}


/* 🌌 حاوي أيقونة الدعم الفني المرن */
.cosmic-support {
    width: 32px;
    /* الحجم الافتراضي المرن */
    height: 32px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 🎧 قوس السماعة العلوي */
.cosmic-support .headset-band {
    position: absolute;
    top: 15%;
    width: 58%;
    height: 55%;
    border: 2px solid #00f2ff;
    border-bottom: none;
    border-radius: 50% 50% 0 0;
    /* box-shadow: 0 0 8px #00f2ff; */
    box-sizing: border-box;
}

.cosmic-support .headset-cups {
    position: absolute;
    bottom: 25%;
    width: 6px;
    height: 11px;
    background: rgba(0, 242, 255, 0.3);
    border: 1.5px solid #00f2ff;
    border-radius: 3px;
    /* box-shadow: 0 0 6px #00f2ff; */
}

.cosmic-support .headset-cups.left {
    left: 16%;
}

.cosmic-support .headset-cups.right {
    right: 16%;
}

.cosmic-support .headset-mic {
    position: absolute;
    bottom: 25%;
    left: 42%;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #00ffaa;
    border-left: 2px solid #00ffaa;
    border-bottom-left-radius: 8px;
    /* box-shadow: -2px 2px 6px #00ffaa; */
}

.cosmic-support:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px #00f2ff);
}

/* 🌌 حاوي أيقونة الكتاب المرن */
.cosmic-book {
    width: 32px;
    height: 32px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cosmic-book .book-cover {
    position: absolute;
    width: 70%;
    height: 60%;
    /* background: radial-gradient(circle, rgba(0, 242, 255, 0.2) 0%, rgba(138, 43, 226, 0.25) 100%); */
    /* border: 0.5px solid rgba(0, 242, 255, 0.6); */
    border-radius: 4px;
    /* box-shadow: inset 0 0 10px rgba(0, 242, 255, 0.3), 0 0 15px rgba(0, 242, 255, 0.2); */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

.cosmic-book .book-pages {
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 42%;
    background: linear-gradient(90deg, var(--btn) 0%, var(--btn) 100%);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: -4px;
    border-bottom-right-radius: -4px;

    /* شكل كيرف ناعم للداخل من الأسفل */
    clip-path: polygon(0 0, 100% 0, 100% 82%, 85% 92%, 50% 78%, 15% 92%, 0 82%);
    opacity: 0.9;
}

.cosmic-book .book-pages.left {
    left: 8%;
}

.cosmic-book .book-pages.right {
    right: 8%;
}

.cosmic-book .book-spine {
    position: absolute;
    width: 1px;
    top: 5%;
    bottom: 25%;
    background: var(--lightboby);
    box-shadow: 0 0 6px var(--btn);
    z-index: 2;
}

.cosmic-book .book-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--iconEmoj3);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--btn), inset 0 0 5px var(--btn);
    box-sizing: border-box;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.cosmic-book:hover {
    transform: scale(1.08);
}

.cosmic-book:hover .book-ring {
    box-shadow: 0 0 15px var(--btn), inset 0 0 8px var(--btn);
    opacity: 1;
}

/* 📥 الحاوي الداخلي المخصوص للصورة الأصلية */
.cosmic-original-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 300;
    height: 300;
    cursor: pointer;
    transition: all 0.4s ease;
}

.upload-orb-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* background: radial-gradient(circle at 35% 35%,
            var(--iconEmoji) 0%,
            var(--iconEmoji) 0%,
            var(--iconEmoj) 10%); */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--iconEmoji8);
    box-shadow: inset 0 0 12px var(--iconEmoji9),
        0 0 20px var(--iconEmoji9);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.4s ease;
    animation: orb-float 3.5s ease-in-out infinite alternate;
}

.upload-core-icon {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-core-icon .arrow-up-beam {
    position: absolute;
    top: 0;
    width: 3px;
    height: 14px;
    background: var(--iconEmoji7);
    border-radius: 2px;
    /* box-shadow: 0 0 8px var(--iconEmoji7); */
    animation: uploadArrowBounce 1.5s ease-in-out infinite;
}

.upload-core-icon .arrow-up-beam::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid var(--iconEmoji7);
}

.upload-core-icon .tray-base {
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 3px;
    background: var(--iconEmoji7);
    border-radius: 2px;
    /* box-shadow: 0 0 8px var(--iconEmoji6); */
}

.upload-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.upload-text-group .main-title {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--iconEmoji7);
    /* text-shadow: 0 0 10px rgba(0, 242, 255, 0.4); */
}

.upload-text-group .sub-title {
    font-family: 'Julius Sans One', sans-serif;
    font-size: 11px;
    color: var(--iconEmoji9);
    letter-spacing: 0.5px;
}

/* تأثير الـ Hover على الصندوق الأصلي */
.comparison-container:hover .upload-orb-ring {
    transform: scale(1.1) translateY(-3px);
    border-color: var(--btn1);
    box-shadow: inset 0 0 15px var(--btn1),
        0 0 25px var(--btn1);
}

@keyframes uploadArrowBounce {

    0%,
    100% {
        transform: translateY(2px);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ✨ الحاوي الداخلي المخصوص لصندوق النتيجة */
.cosmic-result-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 300;
    height: 300;
    pointer-events: none;
}

.result-orb-container {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* background: radial-gradient(circle at 35% 35%,
            var(--iconEmoji) 10%,
            var(--iconEmoji) 10%,
            var(--iconEmoji) 10%
            ); */
    background-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--iconEmoji8);
    box-shadow: inset 0 0 12px var(--iconEmoji9),
        0 0 20px var(--iconEmoji9);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: orb-float 4s ease-in-out infinite alternate;
}

.result-core-crystal {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, var(--iconEmoji9) 30%, var(--iconEmoji8) 30%);
    transform: rotate(45deg);
    border-radius: 36px;
    opacity: 0.6;
    box-shadow: 0 0 12px var(--iconEmoji9), 0 0 20px var(--iconEmoji9);
    animation: crystalPulse 2s ease-in-out infinite;
}

.result-orbit-ring {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 1px dashed var(--iconEmoji8);
    border-radius: 50%;
    animation: orbitSpin 6s linear infinite;
}

.result-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.result-text-group .main-title {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--iconEmoji7);
    /* text-shadow: 0 0 10px rgba(0, 255, 170, 0.4); */
}

.result-text-group .sub-title {
    font-family: 'Julius Sans One', sans-serif;
    font-size: 11px;
    color: var(--iconEmoji9);
    letter-spacing: 0.5px;
}

@keyframes crystalPulse {

    0%,
    100% {
        transform: rotate(45deg) scale(0.9);
        box-shadow: 0 0 10px var(--iconEmoji3), 0 0 15px var(--iconEmoji3);
    }

    50% {
        transform: rotate(45deg) scale(1.15);
        box-shadow: 0 0 18px var(--iconEmoji3), 0 0 30px var(--iconEmoji3);
    }
}

@keyframes orbitSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 💻 تنسيق بطاقة الأقواس البرمجية (مرتب ومنظم بالكامل) */
.service-card.cosmic-code-card {
    position: relative;
    /* background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.07) 0%, rgba(5, 5, 25, 0.65) 100%); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cosmic-code-card .icon-box {
    width: 60px;
    height: 60px;
    /* background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(0, 242, 255, 0.1) 50%,
            rgba(138, 43, 226, 0.15) 100%); */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* border: 1px solid rgba(0, 242, 255, 0.3); */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), */
    /* 0 0 12px rgba(0, 242, 255, 0.2); */
}

.code-bracket-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    /* color: #00f2ff; */
    /* text-shadow: 0 0 10px rgba(0, 242, 255, 0.6); */
}

.code-bracket-wrapper .slash {
    /* color: #00f2ffbe; */
    margin: 0 1px;
    /* text-shadow: 0 0 10px rgb(0, 255, 242); */
}

.feature-icon {
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon .cosmic-monitor-icon,
.feature-icon .cosmic-mobile-icon,
.feature-icon .cosmic-ipad-icon {
    position: absolute;
    transform-origin: center center;
}

.feature-icon .cosmic-monitor-icon {
    transform: scale(0.45);
    top: -10px;
    left: 50%;
    transform: translateX(-50%) scale(0.55);
}

.feature-icon .cosmic-mobile-icon {
    top: 5px;
    left: -4%;
    transform: rotate(-10deg) scale(0.5);
}

.feature-icon .cosmic-ipad-icon {
    top: 5px;
    right: -8%;
    transform: rotate(10deg) scale(0.45);
}

.card-expanded .cosmic-monitor-icon {
    top: -10px;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
}

.card-expanded .cosmic-mobile-icon {
    top: 5px;
    left: -4%;
    transform: rotate(-10deg) scale(0.45);
}

.card-expanded .cosmic-ipad-icon {
    top: 5px;
    right: -8%;
    transform: rotate(10deg) scale(0.4);
}

.cosmic-monitor-icon {
    width: 48px;
    height: 38px;
    position: relative;
    background: radial-gradient(circle at 35% 35%, var(--iconEmoji) 0%, rgba(5, 5, 25, 0.8) 100%);
    border: 1.5px solid var(--icon);
    border-radius: 6px;
    /* box-shadow: 0 0 12px rgba(0, 242, 255, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.3); */
    backdrop-filter: blur(4px);
    margin: 10 0;
}

.cosmic-monitor-icon::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 5px;
    background: var(--btn);
    /* border-radius: 2px; */
    opacity: 0.9;
    /* box-shadow: 0 0 8px rgba(0, 242, 255, 0.5); */
}

.cosmic-monitor-icon::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--text);
    border-radius: 2px;
}

.cosmic-mobile-icon {
    width: 26px;
    height: 44px;
    position: relative;
    background: radial-gradient(circle at 35% 35%, var(--iconEmoji) 0%, rgba(5, 5, 25, 0.8) 100%);
    border: 1.5px solid var(--icon);
    border-radius: 6px;
    /* box-shadow: 0 0 12px rgba(0, 242, 255, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.3); */
    backdrop-filter: blur(4px);
    margin: 10 0;
}

.cosmic-mobile-icon::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 2px;
    background: var(--iconEmoji1);
    border-radius: 2px;
}

.cosmic-ipad-icon {
    width: 38px;
    height: 46px;
    position: relative;
    background: radial-gradient(circle at 35% 35%, var(--iconEmoji) 0%, rgba(5, 5, 25, 0.8) 100%);
    border: 1.5px solid var(--icon);
    border-radius: 7px;
    /* box-shadow: 0 0 12px rgba(0, 242, 255, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.3); */
    backdrop-filter: blur(4px);
    margin: 10 0;
}

.cosmic-ipad-icon::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    background: var(--iconEmoji1);
    border-radius: 50%;
}

/* 🕷️ الحاوية المستقلة لأيقونة الحشرة بالخطوط فقط */
.cosmic-bug-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-bug-outline {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* الرأس (قوس علوي صغير ومفرغ) */
.bug-head-line {
    position: absolute;
    top: 6px;
    width: 14px;
    height: 9px;
    border: 2px solid var(--icon);
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    /* filter: drop-shadow(0 0 6px #00f2ff); */
    z-index: 2;
}

/* الجسم الرئيسي (أكبر حجماً ومنتفخ) */
.bug-body-line {
    position: absolute;
    top: 13px;
    width: 22px;
    height: 24px;
    border: 2px solid var(--icon);
    border-radius: 14px;
    /* filter: drop-shadow(0 0 8px #00f2ff); */
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-line {
    position: absolute;
    top: 4px;
    /* مسافة فراغ من فوق عشان تبان مقصوصة */
    width: 2px;
    height: 15px;
    background-color: var(--icon);
    /* box-shadow: 0 0 5px #00f2ff; */
}

.bug-leg {
    position: absolute;
    border-color: var(--icon);
    /* box-shadow: 0 0 5px #00f2ff; */
    background-color: transparent;

}

.bug-leg.top-left {
    top: 13px;
    left: 7px;
    width: 6px;
    height: 8px;
    border-bottom: 2px solid var(--icon);
    border-left: 1px solid var(--icon);
    border-bottom-left-radius: 8px;
    border-top: none;
    border-right: none;
    transform: rotate(20deg);
}

.bug-leg.top-right {
    top: 13px;
    right: 7px;
    width: 6px;
    height: 8px;
    border-bottom: 2px solid var(--icon);
    border-right: 1px solid var(--icon);
    border-bottom-right-radius: 8px;
    border-top: none;
    border-left: none;
    transform: rotate(-20deg);
}

.bug-leg.mid-left {
    top: 24px;
    left: 6px;
    width: 6px;
    height: 1.5px;
    background-color: var(--icon);
    border-radius: 12px;
}

.bug-leg.mid-right {
    top: 24px;
    right: 6px;
    width: 6px;
    height: 1.5px;
    background-color: var(--icon);
    border-radius: 2px;
}

.bug-leg.btm-left {
    bottom: 8px;
    left: 7px;
    width: 6px;
    height: 8px;
    border-top: 2px solid var(--icon);
    border-left: 1px solid var(--icon);
    border-top-left-radius: 8px;
    border-bottom: none;
    border-right: none;
    transform: rotate(-20deg);
}

.bug-leg.btm-right {
    bottom: 8px;
    right: 7px;
    width: 6px;
    height: 8px;
    border-top: 2px solid var(--icon);
    border-right: 1px solid var(--icon);
    border-top-right-radius: 8px;
    border-bottom: none;
    border-left: none;
    transform: rotate(20deg);
}

/* ⏱️ الحاوية والأيقونة المستقلة لعداد السرعة */
.cosmic-gauge-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-gauge-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gauge-arc {
    position: absolute;
    top: 4px;
    width: 34px;
    height: 34px;
    border: 2px solid var(--icon);
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 22% 100%, 0 78%);
    /* filter: drop-shadow(0 0 6px #00f2ff); */
}

.gauge-ticks {
    position: absolute;
    top: 13px;
    width: 18px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.gauge-ticks .tick {
    width: 1.5px;
    height: 5px;
    background-color: var(--icontrashborder);
    /* box-shadow: 0 0 4px #00f2ff; */
    border-radius: 1px;
}

/* ميل وتوزيع الشرطات بشكل متناسق مع الانحناء */
.gauge-ticks .tick:nth-child(1) {
    transform: rotate(-35deg) translateY(-2px);
}

.gauge-ticks .tick:nth-child(2) {
    transform: rotate(-18deg) translateY(-4px);
}

.gauge-ticks .tick:nth-child(3) {
    transform: rotate(0deg) translateY(-5px);
}

.gauge-ticks .tick:nth-child(4) {
    transform: rotate(18deg) translateY(-4px);
}

.gauge-ticks .tick:nth-child(5) {
    transform: rotate(35deg) translateY(-2px);
}

.gauge-needle {
    position: absolute;
    bottom: 14px;
    left: 50%;
    width: 2px;
    height: 15px;
    background-color: var(--icontrashborder);
    /* box-shadow: 0 0 6px #ff0055; */
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(30deg);
    border-radius: 2px;
    z-index: 2;
}

.gauge-center-pin {
    position: absolute;
    bottom: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--iconEmoji1);
    box-shadow: 0 0 6px var(--iconEmoji3);
    border-radius: 50%;
    z-index: 3;
}

/* 🛡️ الحاوية والأيقونة المستقلة للدرع */
.cosmic-shield-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-shield-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shield-body-outline {
    position: absolute;
    width: 26px;
    height: 30px;
    border: 2px solid var(--iconEmoji);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 100%, 0% 65%); */
    /* filter: drop-shadow(0 0 6px #00f2ff); */
}

.shield-check-mark {
    position: absolute;
    top: 14px;
    width: 8px;
    height: 14px;
    border: solid var(--icontrashborder);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 5px var(--iconEmoji3));
    z-index: 2;
}

/* 🎨 الحاوية والأيقونة المستقلة لوحة الألوان */
.cosmic-palette-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-palette-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.palette-body-outline {
    position: absolute;
    width: 34px;
    height: 24px;
    border: 2px solid var(--icon);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    /* filter: drop-shadow(0 0 6px #00f2ff); */
}

.palette-dots {
    position: absolute;
    width: 22px;
    height: 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 2;
}

.palette-dots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.palette-dots .dot.pink {
    background-color: var(--radtrashborder);
    /* box-shadow: 0 0 5px #ff0055;  */
    transform: translateY(-2px);
}

.palette-dots .dot.cyan {
    background-color: var(--Majorelle);
    /* box-shadow: 0 0 5px #00f2ff; */
    transform: translateY(3px);
}

.palette-dots .dot.green {
    background-color: var(--aquaiconEmoji);
    /* box-shadow: 0 0 5px #00ffaa; */
    transform: translateY(-2px);
}

/* 🖌️ الحاوية والأيقونة المستقلة للفرشاة */
.cosmic-brush-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-paint-brush {
    width: 44px;
    height: 44px;
    position: relative;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* مقبض الفرشاة الطويل المفرغ */
.brush-handle {
    position: absolute;
    top: 6px;
    width: 8px;
    height: 20px;
    border: 2px solid var(--icon);
    border-radius: 3px;
    /* filter: drop-shadow(0 0 6px #00f2ff); */
    background: transparent;
}

.brush-tip {
    position: absolute;
    bottom: 8px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--icon);
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    filter: drop-shadow(0 0 6px var(--iconEmoji3));
    background: transparent;
}

/* 🖼️ الحاوية والأيقونة المستقلة للمعرض والصورة */
.cosmic-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-image-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-frame {
    position: absolute;
    width: 32px;
    height: 26px;
    border: 2px solid var(--icon);
    border-radius: 6px;
    /* filter: drop-shadow(0 0 6px #00f2ff); */
    /* background: red ; */
}

.image-mountain {
    position: absolute;
    bottom: 11px;
    left: 8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid var(--icon);
    /* filter: drop-shadow(0 0 4px #00f2ff); */
    /* transform: rotate(15deg); */
}

.image-mountain::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 7px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid var(--icon);
}

.image-sun {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 5px;
    height: 5px;
    border: 1.5px solid var(--iconEmoji3);
    /* background-color: #ff0055; */
    border-radius: 50%;
    /* box-shadow: 0 0 5px #ff0055; */
}

/* 🥞 الحاوية والأيقونة المستقلة للطبقات */
.cosmic-layers-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-layers-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.layer-item {
    position: absolute;
    width: 28px;
    height: 10px;
    border: 2px solid var(--iconEmoji);
    border-radius: 4px;
    background: transparent;
    /* filter: drop-shadow(0 0 5px #00f2ff); */
    transform: perspective(100px) rotateX(45deg);
}

.layer-top {
    top: 8px;
    border-color: var(--aquaiconEmoji);
    /* box-shadow: 0 0 6px rgba(0, 242, 255, 0.6); */
}

.layer-mid {
    top: 16px;
    border-color: var(--Majorelle);
    /* filter: drop-shadow(0 0 5px #00ffaa); */
}

.layer-bottom {
    top: 24px;
    border-color: var(--radtrashborder);
    /* filter: drop-shadow(0 0 5px #ff0055); */
}

/* 📹 الحاوية والأيقونة المستقلة للفيديو والكاميرا */
.cosmic-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cosmic-video-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-body {
    position: absolute;
    left: 4px;
    width: 26px;
    height: 22px;
    border: 2px solid var(--icon);
    border-radius: 6px;
    /* filter: drop-shadow(0 0 6px #00f2ff); */
    background: transparent;
}

.video-lens {
    position: absolute;
    right: 5px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--icon);
    /* filter: drop-shadow(0 0 5px #00f2ff); */
    border-radius: 2px;
}

/* ✨ الحاوية والأيقونة المستقلة للنجوم السحرية */
.cosmic-sparkles-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar .cosmic-sparkles-container {
    filter: brightness(1.4) drop-shadow(0 0 20px rgba(255, 2, 2, 0.9));
    transform: scale(1.4);
    top: -3px;
    left: 0;
    position: relative;
}

.sidebar.collapsed .sparkle,
.sidebar.collapsed .sparkle.main {
    filter: none;
    transform: scale(0.8);
    /* filter: brightness(1.35) drop-shadow(0 0 20px rgba(255, 246, 185, 0.9)); */
    border: 2px solid var(--icon1);
    background: linear-gradient(135deg, var(--icon1), var(--icon1));
}

.cosmic-sparkles-icon {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sparkle {
    position: absolute;
    background: linear-gradient(135deg, var(--iconEmoji1), var(--iconEmoji3));
    filter: drop-shadow(0 0 6px var(--text));
    clip-path: polygon(50% 0%,
            61% 35%,
            100% 50%,
            61% 65%,
            50% 100%,
            39% 65%,
            0% 50%,
            39% 35%);
}

.sparkle.main {
    width: 22px;
    height: 22px;
    bottom: 4px;
    left: 8px;
    background: linear-gradient(135deg, var(--text) 0%, var(--iconEmoji) 50%, var(--icon1) 100%);
    /* filter: drop-shadow(0 0 8px var(--text)); */
}

.sparkle.small-top-left {
    width: 12px;
    height: 12px;
    top: 9px;
    left: 6px;
}

.sparkle.small-top-right {
    width: 14px;
    height: 14px;
    top: 12px;
    right: 6px;
}

/* 📁 الحاوية والأيقونة المستقلة لعرض الأعمال */
.cosmic-portfolio-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.cosmic-portfolio-icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar .cosmic-portfolio-container {
    top: 10;
    left: -5px;
    position: relative;
}

.sidebar.collapsed .portfolio-folder-back,
.sidebar.collapsed .portfolio-paper,
.sidebar.collapsed .portfolio-folder-front {
    filter: none;
    transform: scale(2);
    /* filter: brightness(1.35) drop-shadow(0 0 20px rgba(255, 246, 185, 0.9)); */
    border: 2px solid var(--icon1);
}

.sidebar.collapsed .portfolio-folder-front {
    background: linear-gradient(135deg, var(--icon), var(--icon));
}

.portfolio-folder-back {
    position: absolute;
    width: 24px;
    height: 16px;
    border: 2px solid var(--iconEmoji1);
    border-radius: 4px;
    top: 8px;
    /* filter: drop-shadow(0 0 5px #00f2ff); */
    background: transparent;
}

.portfolio-paper {
    position: absolute;
    width: 18px;
    height: 12px;
    border: 2px solid var(--radtrashborder);
    border-radius: 2px;
    top: 5px;
    /* filter: drop-shadow(0 0 4px #ff0055); */
    background: transparent;
}

.portfolio-folder-front {
    position: absolute;
    width: 26px;
    height: 12px;
    border: 2px solid var(--iconEmoji1);
    border-radius: 4px;
    bottom: 6px;
    /* filter: drop-shadow(0 0 5px #00f2ff); */
    background: var(--iconEmoji);
}

/* 💼 الحاوية والأيقونة المستقلة لحقيبة الخدمات */
.cosmic-services-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.cosmic-briefcase-icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.briefcase-body-outline {
    position: absolute;
    width: 26px;
    height: 18px;
    border: 2px solid var(--iconEmoji1);
    border-radius: 4px;
    top: 8px;
    /* filter: drop-shadow(0 0 5px #00f2ff); */
    background: var(--iconEmoji5);
}

.briefcase-handle-outline {
    position: absolute;
    width: 12px;
    height: 5px;
    border: 2px solid var(--iconEmoji1);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    top: 3px;
    /* filter: drop-shadow(0 0 4px #00f2ff); */
    background: transparent;
}

.briefcase-latch-outline {
    position: absolute;
    width: 6px;
    height: 4px;
    border: 2px solid var(--radtrashborder);
    border-radius: 2px;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    /* box-shadow: 0 0 5px #ff0055; */
    background: transparent;
    z-index: 2;
}


.sidebar .cosmic-services-container {
    /* filter: brightness(1.4) drop-shadow(0 0 20px rgba(255, 2, 2, 0.9)); */
    transform: scale(1.4);
    top: 10px;
    left: -5;
    position: relative;
}

.sidebar.collapsed .briefcase-body-outline,
.sidebar.collapsed .briefcase-handle-outline,
.sidebar.collapsed .briefcase-latch-outline {
    filter: none;
    /* transform: scale(0.8); */
    /* filter: brightness(1.35) drop-shadow(0 0 20px rgba(255, 246, 185, 0.9)); */
    border: 2px solid var(--icon);
    /* background: linear-gradient(135deg, var(--text), var(--text)); */
}

/* 🔒 الحاوية والأيقونة المستقلة للقفل */
.cosmic-lock-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.cosmic-lock-icon {
    width: 36px;
    height: 36px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* عروة القفل العلوية (المقوسة) */
.lock-shackle {
    position: absolute;
    width: 14px;
    height: 12px;
    border: 2px solid #00f2ff;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    top: 5px;
    filter: drop-shadow(0 0 5px #00f2ff);
    background: transparent;
}

/* جسم القفل السفلي (المستطيل) */
.lock-body {
    position: absolute;
    width: 22px;
    height: 16px;
    border: 2px solid #00f2ff;
    border-radius: 4px;
    bottom: 6px;
    filter: drop-shadow(0 0 5px #00f2ff);
    background: rgba(0, 242, 255, 0.05);
    /* لمسة زجاجية خفيفة */
}

/* ثقب المفتاح أو النقطة الداخلية في القفل (بلمسة نيون وردية مميزة) */
.lock-keyhole {
    position: absolute;
    width: 4px;
    height: 4px;
    border: 1.5px solid #ff0055;
    background-color: #ff0055;
    border-radius: 50%;
    bottom: 11px;
    box-shadow: 0 0 5px #ff0055;
}

/* ⏳ الحاوية الرئيسية (الأساس) هي اللي بتلف بالكامل كقطعة واحدة متماسكة بستايل 3D */
.cosmic-sand-timer {
    width: 36px;
    height: 36px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    perspective: 120px;
    /* الدوران الشامل للحاوية كلها في نفس الاتجاه وبدون توقف */
    animation: rotateEntireTimer 3s linear infinite;
    filter: drop-shadow(0 0 6px #00f2ff);
    vertical-align: middle;
}

.timer-glass {
    position: absolute;
    width: 18px;
    height: 14px;
    border: 2px solid #00f2ff;
    background: rgba(0, 242, 255, 0.08);
    box-shadow: inset 0 0 5px rgba(0, 242, 255, 0.3), 0 0 4px rgba(0, 242, 255, 0.5);
}

.top-bulb {
    top: 3px;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
    border-radius: 2px;
}

.bottom-bulb {
    bottom: 3px;
    clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
    border-radius: 2px;
}

.timer-sand-stream {
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #ff0055;
    box-shadow: 0 0 6px #ff0055;
    animation: streamDrop 3s ease-in-out infinite;

}

.sand-pile {
    position: absolute;
    width: 12px;
    height: 5px;
    background-color: #ff0055;
    border-radius: 50%;
    box-shadow: 0 0 6px #ff0055;
    animation: sandTransfer 3s ease-in-out infinite;
}

@keyframes rotateEntireTimer {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes streamDrop {

    0%,
    35% {
        opacity: 1;
        transform: scaleY(1);
    }

    40%,
    85% {
        opacity: 0;
        transform: scaleY(0);
    }

    90%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}


@keyframes sandTransfer {
    0% {
        bottom: 4px;
        top: auto;
        height: 6px;
        width: 12px;
        opacity: 1;
    }

    30% {
        bottom: 4px;
        top: auto;
        height: 1px;
        /* الرمل بيقل تماماً قبل ما الساعة تتقلب بـ نص دورة */
        width: 6px;
        opacity: 0.8;
    }

    45% {
        bottom: auto;
        top: 4px;
        /* الساعة اقلبت، الرمل يبدأ يتجمع فوق */
        height: 1px;
        width: 6px;
        opacity: 0;
    }

    55% {
        bottom: auto;
        top: 4px;
        height: 3px;
        /* الرمل يبدأ يتراكم واحدة واحدة في المستطيل الجديد */
        width: 10px;
        opacity: 1;
    }

    100% {
        bottom: 4px;
        top: auto;
        height: 6px;
        /* يرجع يتجمع بالكامل في القاع الجديد */
        width: 12px;
        opacity: 1;
    }
}

/* ⌨️ الحاوية والأيقونة المستقلة لإرشادات الكيبورد */
.cosmic-keyboard-icon {
    width: 32px;
    height: 24px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    vertical-align: middle;
    transform: scale(1);
}

.sidebar .client-open-instructions-btn {
    position: relative;
    width: 100%;
    min-height: 48px;
    border-radius: 8px;
    display: block;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    border: none;
    padding: 0 15px;
    white-space: nowrap;
    background: var(--select-input2);
    margin: 10 0;
    cursor: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 13;
    top: 0;
}

.sidebar .cosmic-keyboard-icon {
    width: 100%;
    height: 40;
}

.sidebar .kbd-frame {
    border: 1.5px solid var(--icon);
    box-shadow: none !important;
}

.sidebar .kbd-key {
    width: 20%;
    height: 15;
}

.sidebar .key-space {
    width: 90%;
    height: 9;
    left: 12px;
    right: 3px;
}

.sidebar.collapsed .cosmic-keyboard-icon {
    width: 100%;
    height: 24px;
}

.sidebar.collapsed .kbd-frame {
    border: 1.5px solid var(--icon);
    box-shadow: none !important;
}

.sidebar.collapsed .kbd-key {
    width: 35%;
    height: 5;
    background: transparent;
    border: 1px solid var(--icon);
    box-shadow: none;
}

.sidebar.collapsed .key-space {
    width: 80%;
    bottom: 3px;
    left: 4px;
    right: 3px;
    height: 7px;
    animation: none;
    background: none;
    border-radius: 2px;
    box-shadow: none;
}

.kbd-frame {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1.5px solid var(--iconEmoji);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.4),
        0 0 12px var(--btn1, rgba(0, 242, 255, 0.4)) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.kbd-key {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--iconEmoji);
    border-radius: 2px;
    box-shadow: 0 0 4px var(--iconEmoji);
}

.key-top-left {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 6px;
}

.key-top-right {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 6px;
}

.key-space {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 7px;
    background: linear-gradient(90deg, var(--icon), var(--icontrash));
    border-radius: 2px;
    box-shadow: 0 0 8px var(--icontrash);
    animation: kbdPulse 2s ease-in-out infinite alternate;
}

.cosmic-keyboard-icon:hover .kbd-frame {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--iconEmoji3);
    box-shadow:
        inset 0 0 12px var(--iconEmoji3),
        0 0 20px var(--iconEmoji3, rgba(255, 0, 85, 0.6)) !important;
}

/* 🎬 أنيميشن نبض زر المسافة */
@keyframes kbdPulse {
    0% {
        opacity: 0.6;
        box-shadow: 0 0 4px var(--iconEmoji3);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 10px var(--iconEmoji3), 0 0 15px var(--iconEmoji);
    }
}