/* 
    UnExplores Tech Innovations - Premium Design System
    Design Language: Neo-Glassmorphism
    Colors: Navy (#0A103D), Cyan (#1FB3E5), Green (#79C746)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
    --brand-navy: #0A103D;
    --brand-cyan: #1FB3E5;
    --brand-white: #FFFFFF;
    --brand-slate-50: #F8FAFC;
    --brand-slate-100: #F1F5F9;
    --brand-slate-400: #94A3B8;
    --brand-slate-600: #475569;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(10, 16, 61, 0.05);
    --transition-premium: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Responsive Cursor Defaults */
@media (hover: none) or (pointer: coarse) {
    #custom-cursor,
    #cursor-follower,
    #cursor-ring {
        display: none !important;
    }
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--brand-white);
    color: var(--brand-slate-600); /* Softer for eyes than pure black */
    line-height: 1.7; /* Increased for better readability */
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

/* ══════════════════ ULTRA-PREMIUM GLOBAL SCROLLBAR SYSTEM ══════════════════ */
::-webkit-scrollbar {
    width: 7px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #020b14;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f2fe 0%, #1fb3e5 50%, #0072ff 100%);
    border-radius: 9999px;
    border: 1.5px solid #020b14;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #38ef7d 0%, #00f2fe 100%);
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.85);
}
* {
    scrollbar-width: thin;
    scrollbar-color: #1fb3e5 #020b14;
}

/* Premium Horizontal Scrollers & Rails */
.premium-scroller,
.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: #00f2fe rgba(2, 11, 20, 0.7);
}
.premium-scroller::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
.premium-scroller::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(2, 11, 20, 0.7);
    border-radius: 9999px;
}
.premium-scroller::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00f2fe, #1fb3e5, #00c6ff);
    border-radius: 9999px;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}
.premium-scroller::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #00f2fe, #38ef7d);
}

/* Premium Moving Arrow Indicators (Movers) */
@keyframes moverPulseGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(0, 242, 254, 0.4), 0 0 0 0 rgba(0, 242, 254, 0.4), 0 4px 16px rgba(0, 0, 0, 0.7);
        border-color: rgba(0, 242, 254, 0.6);
        transform: translateY(-50%) scale(1);
    }
    50% {
        box-shadow: 0 0 24px rgba(0, 242, 254, 0.85), 0 0 0 6px rgba(0, 242, 254, 0), 0 6px 20px rgba(0, 0, 0, 0.9);
        border-color: rgba(0, 242, 254, 1);
        transform: translateY(-50%) scale(1.08);
    }
}
@keyframes moverArrowBounceRight {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.85;
    }
    50% {
        transform: translateX(4px);
        opacity: 1;
        filter: drop-shadow(0 0 8px #00f2fe);
    }
}
@keyframes moverArrowBounceLeft {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.85;
    }
    50% {
        transform: translateX(-4px);
        opacity: 1;
        filter: drop-shadow(0 0 8px #00f2fe);
    }
}
.premium-mover-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(2, 11, 20, 0.95);
    border: 1.5px solid rgba(0, 242, 254, 0.75);
    color: #00f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    z-index: 50;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    animation: moverPulseGlow 1.8s infinite ease-in-out;
}
.premium-mover-arrow:hover {
    background: rgba(0, 242, 254, 0.25);
    border-color: #00f2fe;
    color: #ffffff;
    box-shadow: 0 0 24px rgba(0, 242, 254, 0.95);
}
.premium-mover-arrow.mover-left {
    left: 8px;
}
.premium-mover-arrow.mover-right {
    right: 8px;
}
.premium-mover-arrow.mover-left i {
    animation: moverArrowBounceLeft 1.1s infinite ease-in-out;
}
.premium-mover-arrow.mover-right i {
    animation: moverArrowBounceRight 1.1s infinite ease-in-out;
}

/* Next-Gen Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Adaptive Interactive Cyber-Luxury Innovative Cursor (Desktop Mouse) */
@media (hover: hover) and (pointer: fine) {
    #custom-cursor {
        display: block;
        width: 8px;
        height: 8px;
        background: #1FB3E5;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 100000;
        box-shadow: 0 0 10px #1FB3E5, 0 0 22px rgba(31, 179, 229, 0.8), 0 0 35px rgba(121, 199, 70, 0.45);
        transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), height 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s, box-shadow 0.25s;
        will-change: transform, width, height;
    }

    #cursor-follower,
    #cursor-ring {
        display: block;
        width: 38px;
        height: 38px;
        border: 1.5px solid rgba(31, 179, 229, 0.65);
        background: radial-gradient(circle, rgba(31, 179, 229, 0.14) 0%, rgba(121, 199, 70, 0.04) 65%, transparent 100%);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 99999;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        box-shadow: 0 0 18px rgba(31, 179, 229, 0.3), inset 0 0 10px rgba(31, 179, 229, 0.1);
        transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, background 0.25s, box-shadow 0.25s;
        will-change: transform, width, height;
    }

    /* Magnetic Interactive Element Hover State */
    .cursor-hover #custom-cursor,
    body.cursor-hover #custom-cursor {
        width: 12px;
        height: 12px;
        background: #79C746;
        box-shadow: 0 0 16px #79C746, 0 0 32px rgba(121, 199, 70, 0.85);
    }

    .cursor-hover #cursor-follower,
    .cursor-hover #cursor-ring,
    body.cursor-hover #cursor-follower,
    body.cursor-hover #cursor-ring {
        width: 56px;
        height: 56px;
        border-color: rgba(121, 199, 70, 0.9);
        background: radial-gradient(circle, rgba(121, 199, 70, 0.22) 0%, rgba(31, 179, 229, 0.08) 65%, transparent 100%);
        box-shadow: 0 0 28px rgba(121, 199, 70, 0.45), inset 0 0 14px rgba(121, 199, 70, 0.18);
    }

    /* Click Spring Compression */
    body.cursor-click #custom-cursor {
        width: 5px;
        height: 5px;
        background: #79C746;
        box-shadow: 0 0 20px #79C746;
    }

    body.cursor-click #cursor-follower,
    body.cursor-click #cursor-ring {
        border-color: #79C746;
        box-shadow: 0 0 32px rgba(121, 199, 70, 0.65);
    }

    /* Innovative Ambient Cyber Click Ripple */
    .cursor-ripple-effect {
        position: fixed;
        pointer-events: none;
        border-radius: 50%;
        border: 1.5px solid #1FB3E5;
        box-shadow: 0 0 16px rgba(31, 179, 229, 0.7);
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.95;
        z-index: 99998;
        animation: cyberRippleWave 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes cyberRippleWave {
        0% {
            transform: translate(-50%, -50%) scale(0.2);
            opacity: 0.95;
            border-color: #1FB3E5;
        }
        50% {
            border-color: #79C746;
            box-shadow: 0 0 22px rgba(121, 199, 70, 0.5);
        }
        100% {
            transform: translate(-50%, -50%) scale(2.4);
            opacity: 0;
            border-color: #79C746;
        }
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--brand-navy);
    font-weight: 700;
    line-height: 1.2;
}

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.bg-navy-dark h1, .bg-navy-dark h2, .bg-navy-dark h3, .bg-navy-dark h4, .bg-navy-dark h5, .bg-navy-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.portal-body h1, .portal-body h2, .portal-body h3, .portal-body h4, .portal-body h5, .portal-body h6,
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.main-content h1, .main-content h2, .main-content h3, .main-content h4,
.glass h1, .glass h2, .glass h3, .glass h4,
.modal-box h1, .modal-box h2, .modal-box h3, .modal-box h4 {
    color: #FFFFFF !important;
}

.animated-gradient-text {
    background: linear-gradient(90deg, #FFFFFF 0%, #1FB3E5 30%, #79C746 70%, #FFFFFF 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 5s ease infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Premium Utilities --- */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}

.text-gradient {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gradient-navy {
    background: linear-gradient(180deg, var(--brand-slate-50) 0%, var(--brand-white) 100%);
}

.btn-premium {
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--brand-navy);
    color: var(--brand-white);
}

.btn-primary:hover {
    background: var(--brand-cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(31, 179, 229, 0.2);
}

.btn-secondary {
    background: var(--brand-white);
    border: 1px solid var(--brand-slate-100);
    color: var(--brand-navy);
}

.btn-secondary:hover {
    background: var(--brand-slate-50);
    border-color: var(--brand-cyan);
    transform: translateY(-2px);
}

/* --- Animations --- */

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Magnetic Pull Effect */
.magnetic {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Fluid Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-premium);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--brand-navy);
}
::-webkit-scrollbar-thumb {
    background: var(--brand-navy-light);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-cyan);
}
/* ══════════════════════════════════════════════════════════════════════════════
   UnExplores Cyber Cursor & Platform Protection System
   Author: UnExplores Tech Innovations
   ══════════════════════════════════════════════════════════════════════════════ */

@media (pointer: fine) {
    /* Hide system cursor on fine pointer desktop devices */
    body, a, button, input, select, textarea, [role="button"], label {
        cursor: none !important;
    }
}

/* Base cursor elements */
.cyber-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #1FB3E5;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
    transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.2s ease,
                opacity 0.3s ease;
    box-shadow: 0 0 10px #1FB3E5, 0 0 20px rgba(31, 179, 229, 0.6);
    will-change: transform, left, top;
}

.cyber-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(31, 179, 229, 0.65);
    background: rgba(31, 179, 229, 0.04);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999998;
    transform: translate(-50%, -50%);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background-color 0.25s ease,
                border-radius 0.25s ease,
                opacity 0.3s ease;
    box-shadow: 0 0 15px rgba(31, 179, 229, 0.2), inset 0 0 10px rgba(31, 179, 229, 0.1);
    will-change: transform, left, top;
}

/* Pulse trail effect */
.cyber-cursor-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(121, 199, 70, 0.4);
    border-radius: 50%;
    animation: cyberCursorRotate 8s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes cyberCursorRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hover active interactive states */
.cyber-cursor-ring.is-hovering {
    width: 54px;
    height: 54px;
    border-color: #79C746;
    background: rgba(121, 199, 70, 0.1);
    box-shadow: 0 0 25px rgba(121, 199, 70, 0.4), inset 0 0 15px rgba(121, 199, 70, 0.2);
}

.cyber-cursor-ring.is-hovering::after {
    border-color: rgba(31, 179, 229, 0.7);
    animation-duration: 4s;
}

.cyber-cursor-dot.is-hovering {
    width: 6px;
    height: 6px;
    background: #79C746;
    box-shadow: 0 0 12px #79C746;
}

/* Text editing hover state */
.cyber-cursor-ring.is-text {
    width: 20px;
    height: 32px;
    border-radius: 6px;
    border-color: #1FB3E5;
    background: rgba(31, 179, 229, 0.08);
}

.cyber-cursor-dot.is-text {
    height: 16px;
    width: 2px;
    border-radius: 1px;
}

/* Click click state */
.cyber-cursor-ring.is-clicking {
    transform: translate(-50%, -50%) scale(0.75);
    border-color: #38C8F7;
    background: rgba(31, 179, 229, 0.3);
}

.cyber-cursor-dot.is-clicking {
    transform: translate(-50%, -50%) scale(1.6);
    background: #ffffff;
}

/* Cursor hidden state when mouse leaves window */
.cyber-cursor-hidden {
    opacity: 0 !important;
}

/* Cyber Right-Click Shield Toast */
.cyber-shield-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(6, 13, 46, 0.95);
    border: 1px solid rgba(31, 179, 229, 0.4);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(31, 179, 229, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #e2e8f0;
    padding: 10px 22px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.cyber-shield-toast i {
    color: #1FB3E5;
    font-size: 14px;
}
/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   UnExplores Cyber Cursor & Platform Protection System
   Author: UnExplores Tech Innovations
   â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */

@media (pointer: fine) {
    /* Hide system cursor on fine pointer desktop devices */
    body, a, button, input, select, textarea, [role="button"], label {
        cursor: none !important;
    }
}

/* Base cursor elements */
.cyber-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #1FB3E5;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
    transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.2s ease,
                opacity 0.3s ease;
    box-shadow: 0 0 10px #1FB3E5, 0 0 20px rgba(31, 179, 229, 0.6);
    will-change: transform, left, top;
}

.cyber-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(31, 179, 229, 0.65);
    background: rgba(31, 179, 229, 0.04);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999998;
    transform: translate(-50%, -50%);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background-color 0.25s ease,
                border-radius 0.25s ease,
                opacity 0.3s ease;
    box-shadow: 0 0 15px rgba(31, 179, 229, 0.2), inset 0 0 10px rgba(31, 179, 229, 0.1);
    will-change: transform, left, top;
}

/* Pulse trail effect */
.cyber-cursor-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(121, 199, 70, 0.4);
    border-radius: 50%;
    animation: cyberCursorRotate 8s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes cyberCursorRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hover active interactive states */
.cyber-cursor-ring.is-hovering {
    width: 54px;
    height: 54px;
    border-color: #79C746;
    background: rgba(121, 199, 70, 0.1);
    box-shadow: 0 0 25px rgba(121, 199, 70, 0.4), inset 0 0 15px rgba(121, 199, 70, 0.2);
}

.cyber-cursor-ring.is-hovering::after {
    border-color: rgba(31, 179, 229, 0.7);
    animation-duration: 4s;
}

.cyber-cursor-dot.is-hovering {
    width: 6px;
    height: 6px;
    background: #79C746;
    box-shadow: 0 0 12px #79C746;
}

/* Text editing hover state */
.cyber-cursor-ring.is-text {
    width: 20px;
    height: 32px;
    border-radius: 6px;
    border-color: #1FB3E5;
    background: rgba(31, 179, 229, 0.08);
}

.cyber-cursor-dot.is-text {
    height: 16px;
    width: 2px;
    border-radius: 1px;
}

/* Click click state */
.cyber-cursor-ring.is-clicking {
    transform: translate(-50%, -50%) scale(0.75);
    border-color: #38C8F7;
    background: rgba(31, 179, 229, 0.3);
}

.cyber-cursor-dot.is-clicking {
    transform: translate(-50%, -50%) scale(1.6);
    background: #ffffff;
}

/* Cursor hidden state when mouse leaves window */
.cyber-cursor-hidden {
    opacity: 0 !important;
}

/* Cyber Right-Click Shield Toast */
.cyber-shield-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(6, 13, 46, 0.95);
    border: 1px solid rgba(31, 179, 229, 0.4);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(31, 179, 229, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #e2e8f0;
    padding: 10px 22px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.cyber-shield-toast i {
    color: #1FB3E5;
    font-size: 14px;
    animation: cyberShieldPulse 1.5s infinite;
}

@keyframes cyberShieldPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.8; color: #79C746; }
}

/* ==========================================================================
   UNEXPLORES SIGNATURE HIGH-CONTRAST SCROLLER & MOVER ENGINE
   Universal cross-platform visible scrollbars & interactive mover indicators
   ========================================================================== */

/* WebKit / Chromium (Chrome, Edge, Safari, Opera, Brave, WebView) */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(4, 10, 26, 0.85) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(31, 179, 229, 0.2) !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f2fe 0%, #1FB3E5 50%, #0ea5e9 100%) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(4, 10, 26, 0.85) !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.65), inset 0 0 4px rgba(255, 255, 255, 0.6) !important;
    min-height: 36px !important;
    min-width: 36px !important;
    transition: all 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #38bdf8 0%, #00f2fe 50%, #34d399 100%) !important;
    box-shadow: 0 0 18px rgba(0, 242, 254, 1), inset 0 0 6px #ffffff !important;
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #00f2fe 0%, #38bdf8 100%) !important;
    box-shadow: 0 0 24px rgba(0, 242, 254, 1) !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Firefox standard scrollbar properties */
* {
    scrollbar-width: thin !important;
    scrollbar-color: #00f2fe rgba(4, 10, 26, 0.85) !important;
}

/* Dedicated Quick Sign-In Card & Dark Matrix Gateway Scroller */
#rootCmdCenterFlyout,
.cmd-center-matrix-scroll,
.modal-glow-scroll {
    scrollbar-width: thin !important;
    scrollbar-color: #00f2fe rgba(3, 9, 25, 0.98) !important;
}

#rootCmdCenterFlyout::-webkit-scrollbar,
.cmd-center-matrix-scroll::-webkit-scrollbar,
.modal-glow-scroll::-webkit-scrollbar {
    width: 9px !important;
}

#rootCmdCenterFlyout::-webkit-scrollbar-track,
.cmd-center-matrix-scroll::-webkit-scrollbar-track,
.modal-glow-scroll::-webkit-scrollbar-track {
    background: rgba(3, 9, 25, 0.95) !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(0, 242, 254, 0.4) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9) !important;
    margin: 8px 0 !important;
}

#rootCmdCenterFlyout::-webkit-scrollbar-thumb,
.cmd-center-matrix-scroll::-webkit-scrollbar-thumb,
.modal-glow-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f2fe 0%, #1FB3E5 40%, #10b981 100%) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(3, 9, 25, 0.95) !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.9), inset 0 0 6px #ffffff !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#rootCmdCenterFlyout::-webkit-scrollbar-thumb:hover,
.cmd-center-matrix-scroll::-webkit-scrollbar-thumb:hover,
.modal-glow-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #38bdf8 0%, #00f2fe 50%, #34d399 100%) !important;
    box-shadow: 0 0 24px rgba(0, 242, 254, 1), inset 0 0 8px #ffffff !important;
}

/* Interactive Mover Indicators */
.mover-badge-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: rgba(31, 179, 229, 0.15);
    border: 1px solid rgba(31, 179, 229, 0.45);
    color: #38C8F7;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: moverGlow 2.5s infinite ease-in-out;
}

@keyframes moverGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(31, 179, 229, 0.3); border-color: rgba(31, 179, 229, 0.45); }
    50% { box-shadow: 0 0 18px rgba(0, 242, 254, 0.7); border-color: #00f2fe; color: #ffffff; }
}

.mover-arrow-cue {
    animation: moverBounce 1.6s infinite ease-in-out;
}

@keyframes moverBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.mover-horizontal-bounce {
    animation: moverHorizontalBounce 1.6s infinite ease-in-out;
}

@keyframes moverHorizontalBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}