        body {
            font-family: 'El Messiri', sans-serif;
            background: linear-gradient(135deg, #e3fdff, #baf7ff);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
            margin: 0;
            padding: 0;
        }
        .popup, .modal {
            display: none;
            position: fixed;
            top: 50%
            left: 50%
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.95);
            padding: 0.3rem;
            border-radius: 0.3rem;
            box-shadow: 0 3px 6px rgba(0, 173, 230, 0.3);
            z-index: 1000;
            width: 90%
            max-width: 250px;
        }
        .card {
            transition: all 0.3s ease;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0, 173, 230, 0.15);
            position: relative;
            margin: 0.15rem;
        }
        .card:hover {
            transform: translateY(-3px) scale(1.01);
            box-shadow: 0 3px 10px rgba(0, 173, 230, 0.25);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #00d4ff, #90e7ff);
        }
        svg {
            width: 100%
            height: auto;
            margin: 0 auto;
            display: block;
        }
        svg text {
            text-anchor: middle;
            dominant-baseline: middle;
            text-transform: uppercase;
            animation: stroke 5s infinite alternate;
            stroke-width: 0.8;
            stroke: #00d4ff;
            font-size: 110px;
            fill: rgba(255, 255, 255, 0);
        }
        @media (max-width: 768px) {
            svg text { 
                font-size: 90px;
            }
        }
        @keyframes stroke {
            0% { fill: rgba(255, 255, 255, 0); stroke: #00d4ff; stroke-dashoffset: 25% stroke-dasharray: 0 50% stroke-width: 0.8; }
            70% { fill: rgba(255, 255, 255, 0); stroke: #90e7ff; }
            80% { fill: rgba(255, 255, 255, 0); stroke: #baf7ff; stroke-width: 1.5; }
            100% { fill: #fff; stroke: rgba(0, 212, 255, 0); stroke-dashoffset: -25% stroke-dasharray: 50% 0; stroke-width: 0; }
        }
        .history-container {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            max-height: none;
            overflow: visible;
        }
        .history-item {
            transition: all 0.3s ease;
            width: 100%
            max-width: 100%
            margin: 0;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 6px rgba(0, 173, 230, 0.15);
            position: relative;
            overflow: hidden;
            padding: 0.3rem;
        }
        .history-item:hover {
            transform: scale(1.01);
            background: rgba(224, 247, 250, 0.9);
            box-shadow: 0 3px 10px rgba(0, 173, 230, 0.25);
        }
        .small-dot {
            position: absolute;
            width: 3px;
            height: 3px;
            background: #00d4ff;
            border-radius: 50%
            animation: dotFloat 4s infinite;
        }
        @keyframes dotFloat {
            0% { transform: translate(0, 0); opacity: 0.7; }
            50% { transform: translate(5px, -5px); opacity: 0.3; }
            100% { transform: translate(0, 0); opacity: 0.7; }
        }
        .delete-btn:hover {
            color: #00d4ff;
            transform: scale(1.1);
        }
        @keyframes winGlow {
            0% { text-shadow: 0 0 2px #00ff00, 0 0 4px #00ff00; }
            50% { text-shadow: 0 0 6px #00ff00, 0 0 10px #00ff00; }
            100% { text-shadow: 0 0 2px #00ff00, 0 0 4px #00ff00; }
        }
        @keyframes lossZap {
            0% { transform: translateX(0); opacity: 1; }
            20% { transform: translateX(-2px); opacity: 0.7; }
            40% { transform: translateX(2px); opacity: 1; }
            60% { transform: translateX(-1px); opacity: 0.7; }
            80% { transform: translateX(1px); opacity: 1; }
            100% { transform: translateX(0); opacity: 1; }
        }
        @keyframes pendingOrbit {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.03); }
            100% { transform: rotate(360deg) scale(1); }
        }
        @media (max-width: 768px) {
            .card { padding: 0.3rem; margin: 0.1rem; }
            .grid-cols-2 { grid-template-columns: 1fr; }
            .md\\:grid-cols-3 { grid-template-columns: 1fr 1fr; }
            .text-3xl { font-size: 1rem; }
            .text-2xl { font-size: 0.875rem; }
            .text-xl { font-size: 0.75rem; }
            .text-lg { font-size: 0.65rem; }
            .text-sm { font-size: 0.6rem; }
            .p-6 { padding: 0.3rem; }
            .p-5 { padding: 0.25rem; }
            .w-12 { width: 1.5rem; height: 1.5rem; }
            .history-item { padding: 0.25rem; }
            .rounded-xl { border-radius: 0.3rem; }
            .gap-4 { gap: 0.3rem; }
            .mb-4 { margin-bottom: 0.3rem; }
            .mb-2 { margin-bottom: 0.2rem; }
            .mb-1 { margin-bottom: 0.1rem; }
            .px-4 { padding-left: 0.3rem; padding-right: 0.3rem; }
            .px-2 { padding-left: 0.2rem; padding-right: 0.2rem; }
            .py-1 { padding-top: 0.15rem; padding-bottom: 0.15rem; }
            .space-x-2 >
 *   * { margin-left: 0.3rem; }
            .space-x-1 >
 *   * { margin-left: 0.2rem; }
        }