/* === GLOBAL GLOSSY BUTTON MANIFEST === */
        /* Mimics the .exit-button.btn-danger style but for other colors */

        /* Green / Success */
        .btn-glossy-success {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(33, 136, 56, 0.85) 100%) !important;
            border: 2px solid rgba(40, 167, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-success:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(40, 167, 69, 1) 0%, rgba(33, 136, 56, 1) 100%) !important;
        }

        .btn-glossy-success::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-success:hover::before {
            left: 100%;
        }

        /* Red / Danger */
        .btn-glossy-danger {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(200, 35, 51, 0.85) 100%) !important;
            border: 2px solid rgba(220, 53, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-danger:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(220, 53, 69, 1) 0%, rgba(200, 35, 51, 1) 100%) !important;
        }

        /* Reuse the shine effect by not scoping it too tightly if desired, or duplicate ::before logic */
        .btn-glossy-danger::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-danger:hover::before {
            left: 100%;
        }

        /* Blue / Info */
        .btn-glossy-info {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.85) 0%, rgba(19, 132, 150, 0.85) 100%) !important;
            border: 2px solid rgba(23, 162, 184, 0.9) !important;
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-info:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(23, 162, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(23, 162, 184, 1) 0%, rgba(19, 132, 150, 1) 100%) !important;
        }

        .btn-glossy-info::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-info:hover::before {
            left: 100%;
        }


        /* === GLOBAL GLOSSY BUTTON MANIFEST === */
        /* Mimics the .exit-button.btn-danger style but for other colors */

        /* Green / Success */
        .btn-glossy-success {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(33, 136, 56, 0.85) 100%) !important;
            border: 2px solid rgba(40, 167, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-success:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(40, 167, 69, 1) 0%, rgba(33, 136, 56, 1) 100%) !important;
        }

        .btn-glossy-success::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-success:hover::before {
            left: 100%;
        }

        /* Red / Danger */
        .btn-glossy-danger {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(200, 35, 51, 0.85) 100%) !important;
            border: 2px solid rgba(220, 53, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-danger:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(220, 53, 69, 1) 0%, rgba(200, 35, 51, 1) 100%) !important;
        }

        /* Reuse the shine effect by not scoping it too tightly if desired, or duplicate ::before logic */
        .btn-glossy-danger::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-danger:hover::before {
            left: 100%;
        }

        /* Blue / Info */
        .btn-glossy-info {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.85) 0%, rgba(19, 132, 150, 0.85) 100%) !important;
            border: 2px solid rgba(23, 162, 184, 0.9) !important;
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-info:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(23, 162, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(23, 162, 184, 1) 0%, rgba(19, 132, 150, 1) 100%) !important;
        }

        .btn-glossy-info::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-info:hover::before {
            left: 100%;
        }

        #menu-page {
            --dashboard-banner-size: 230px;
            --dashboard-banner-offset-y: 14px;
            --dashboard-banner-offset-y-no-mail: 54px;
        }

        .hivemind-exit-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .hivemind-exit-text {
            margin-top: 5px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #333;
            text-align: center;
        }

        .hivemind-banner-container {
            margin-top: 0;
            margin-bottom: 0.65rem !important;
            min-height: calc(var(--dashboard-banner-size) - 23px);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(var(--dashboard-banner-offset-y));
        }

        #menu-page.dashboard-no-feedback-mail .hivemind-banner-container {
            transform: translateY(var(--dashboard-banner-offset-y-no-mail));
        }

        .hivemind-banner-branding {
            position: relative;
            width: calc(var(--dashboard-banner-size) * 3040 / 1408);
            max-width: 58%;
        }

        .hivemind-banner-img {
            aspect-ratio: 3040 / 1408; /* Preserve the original banner display box. */
            max-width: 100%;
            max-height: var(--dashboard-banner-size);
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .hivemind-banner-version {
            position: absolute;
            /* Use the banner's transparent lower margin without adding layout height.
               Account for the image's contain-fit inset to align with the visible logo. */
            top: 90%;
            right: 3.7%;
            margin-top: 2px;
            color: #7b6b4b;
            font-size: 0.65rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            line-height: 1.2;
            white-space: nowrap;
        }

        /* Reserve heading space early to prevent menu card jump on async welcome text load */
        #menu-page #welcome-message {
            min-height: 2.2rem;
            margin-bottom: 0.35rem !important;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
        }

        #menu-page #welcome-message.welcome-message-with-crown {
            gap: 0.45rem;
        }

        #menu-page #welcome-message .welcome-message-text {
            display: inline-block;
        }

        #menu-page #welcome-message .welcome-streak-crown {
            display: inline-block;
            height: 1.5em;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
            vertical-align: middle;
        }

        /* === FIXED POSITIONING FOR UI CLUSTERS === */
        #top-right-ui-cluster {
            position: absolute;
            top: 12px;
            right: 18px;
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #streak-wheel-main-container {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 50;
        }

        @media (max-height: 860px) and (min-width: 992px) {
            #menu-page {
                --dashboard-banner-offset-y: 10px;
                --dashboard-banner-offset-y-no-mail: 42px;
            }

            .hivemind-banner-container {
                min-height: calc(var(--dashboard-banner-size) - 43px);
                margin-bottom: 0.25rem !important;
            }

            .hivemind-banner-branding {
                max-width: 55%;
                width: calc((var(--dashboard-banner-size) - 23px) * 3040 / 1408);
            }

            #menu-page #welcome-message {
                min-height: 2rem;
                margin-bottom: 0.15rem !important;
            }

            #top-right-ui-cluster {
                top: 10px;
                right: 14px;
            }

            #streak-wheel-main-container {
                top: 10px;
                left: 10px;
            }
        }

        /* === STREAK 200 CELEBRATION EFFECT STYLES === */

        /* 1. Canvas & Honeycomb container overlaying the screen */
        .honeycomb-bg-container-200 {
            position: fixed;
            inset: 0;
            z-index: 10000;
            pointer-events: none;
            overflow: hidden;
        }

        .honeycomb-bg-container-200 canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* Dynamic Pastel Background Animation for all users */
        #menu-page {
            animation: pastel-gradient-bg 12s ease infinite alternate !important;
            transition: background 0.8s ease;
        }

        @keyframes pastel-gradient-bg {
            0% { background-color: #fef5e7; }
            20% { background-color: #fce4ec; }
            40% { background-color: #f3e5f5; }
            60% { background-color: #e3f2fd; }
            80% { background-color: #e8f5e9; }
            100% { background-color: #fff3e0; }
        }

        /* 2. White Card styling when streak 200 is active */
        #menu-page.streak-200-active .page-container {
            background-color: #ffffff !important;
            border: 3px solid #ffd700 !important;
            box-shadow: 0 12px 40px rgba(255, 215, 0, 0.3), inset 0 0 15px rgba(255, 215, 0, 0.05) !important;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
        }



        /* 3. Milestone Crowns Side-by-Side Wrapper */
        .welcome-crowns-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            vertical-align: middle;
            margin-left: 10px;
        }

        .welcome-crowns-wrapper .welcome-streak-crown {
            display: inline-block;
            height: 42px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
        }

        /* 4. Welcome greeting with a subtle honey/amber name shine (All Users) */
        #menu-page #welcome-message .welcome-message-text {
            color: #425b64;
            font-size: clamp(1.2rem, 2.2vw, 1.55rem);
            font-weight: 500;
            letter-spacing: -0.015em;
            text-shadow: none;
        }

        #menu-page #welcome-message .welcome-message-name {
            font-size: clamp(1.45rem, 2.6vw, 1.85rem);
            font-weight: 650;
            background: linear-gradient(90deg, #a76b0c, #bd8418, #b76d20, #bd8418, #a76b0c);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gold-text-shine-200 6s linear infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            #menu-page #welcome-message .welcome-message-name {
                animation: none;
            }
        }

        @keyframes gold-text-shine-200 {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        /* 5. Global Pulsing Golden Avatar Glow (All Users) */
        .dashboard-mini-avatar-container {
            border-color: #ffd700 !important;
            box-shadow: 0 0 16px rgba(255, 215, 0, 0.75), inset 0 0 8px rgba(255, 215, 0, 0.4) !important;
            animation: avatar-pulsing-aura-200 2.2s ease-in-out infinite alternate;
        }

        @keyframes avatar-pulsing-aura-200 {
            0% {
                box-shadow: 0 0 10px rgba(255, 215, 0, 0.45), inset 0 0 6px rgba(255, 215, 0, 0.25);
                transform: translateY(0);
            }
            100% {
                box-shadow: 0 0 24px rgba(255, 215, 0, 0.9), inset 0 0 12px rgba(255, 215, 0, 0.5);
                transform: translateY(-4px);
            }
        }