body {
            color: #fff;
            background-color: #003079;
        }
        #Header {
            background-color: #003f9e;
            border-bottom: 3px solid #ffffff;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            position: inherit;
        }
        .Field {
            background: #0066ff47;
            box-shadow: 4px 4px 0px rgb(185 185 185 / 68%);
        }
        #Footer {
            background-color: #003f9e;
            padding: 10px 0;
        }
        .RecordField .Item:hover {
            background: #0a50b7;
        }
        .CategoryTitle {
            color: #45f0ea;
            display: flex;
            align-items: center;
        }
        .CategoryTitle:hover .category-icon {
            animation: shake 0.5s;
        }
        .category-icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            background: url('https://via.placeholder.com/24') no-repeat center; /* Replace with your icon */
        }
        @keyframes shake {
            0% { transform: translate(0, 0); }
            25% { transform: translate(2px, -2px); }
            50% { transform: translate(-2px, 2px); }
            75% { transform: translate(2px, 2px); }
            100% { transform: translate(0, 0); }
        }
        .RecordField .Item {
            padding-right: 0rem !important;
            flex: 0 0 25%;
            max-width: 25%;
            font-size: 13px;
        }
        .app .RecordField .Item {
            flex: 0 0 20%;
            max-width: 20%;
            font-size: 13px;
            display: block !important;
            text-align: center;
        }
        .app .RecordField .Item .RecordIcon img {
            width: 100%;
            height: 60px;
            border-radius: 10px;
        }
        @media (min-width: 1200px) {
            .col-xl-10, .RecordField .Item {
                flex: 0 0 12.5%;
                max-width: 12.5%;
                font-size: 15px;
            }
            .app .RecordField .Item {
                max-width: 9%;
                flex: 0 0 12.5%;
                font-size: 13px;
            }
            .app .RecordField .Item .RecordIcon img {
                width: 80%;
                height: 60px;
                border-radius: 10px;
            }
        }
        .ts-yj, .fabu-dz {
            color: red;
            font-weight: 600;
            background: white;
            padding: 3px;
            font-size: 14px;
            border-radius: 10px;
            margin-right: 10px;
            cursor: pointer;
        }
        .fabu-dz { color: #2900ff; }
        .peek-gif {
            position: fixed;
            bottom: 10px;
            right: 10px;
            z-index: 1000;
        }
        .peek-gif img {
            width: 100px;
            height: auto;
            display: block;
            cursor: pointer;
        }
        @media (max-width: 768px) {
            .peek-gif img { width: 60px; }
            .peek-gif { bottom: 5px; right: 5px; }
        }
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 15px 25px;
            border-radius: 8px;
            z-index: 2000;
            font-size: 16px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        @media (max-width: 768px) {
            .popup { font-size: 14px; padding: 10px 20px; }
        }
        .fabu-span:hover { color: #00f37f !important; }
        /* Slim Bottom-Floating Progress Bar */
        .progress-container {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            background: #003f9e;
            border-radius: 8px;
            padding: 3px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            height: 15px;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            width: 0%;
            border-radius: 6px;
            transition: width 0.5s ease;
        }
        .progress-tooltip {
            display: none;
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: #45f0ea;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            white-space: nowrap;
        }
        .progress-container:hover .progress-tooltip {
            display: block;
        }
        .reward-message {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0066ff47;
            color: #fff;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            z-index: 2000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            font-size: 14px;
            max-width: 80%;
        }
        .reward-message a {
            color: #45f0ea;
            text-decoration: underline;
        }
        @media (max-width: 768px) {
            .progress-container {
                width: 60%;
                height: 10px;
                bottom: 15px; /* Avoid overlap with .peek-gif */
            }
            .progress-bar { border-radius: 4px; }
            .progress-tooltip { font-size: 10px; top: -25px; }
            .reward-message { font-size: 12px; padding: 10px; }
        }