
      body {
            font-family: 'El Messiri', sans-serif;
            background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
            color: #0d3744;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .popup, .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.98);
            padding: 1rem;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 188, 242, 0.6);
            z-index: 1000;
            width: 85%;
            max-width: 280px;
            border: 2px solid #00bcd4;
        }
        .card {
            transition: all 0.5s ease;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            box-shadow: 0 3px 15px rgba(0, 188, 242, 0.25);
            position: relative;
            margin: 0.5rem;
            backdrop-filter: blur(8px);
        }
        .card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 20px rgba(0, 188, 242, 0.5);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #00bcd4, #80deea);
        }
        svg {
            width: 100%;
            height: auto;
            margin: 0 auto;
            display: block;
        }
        svg text {
            font-family: 'El Messiri', sans-serif;
            text-anchor: middle;
            dominant-baseline: middle;
            text-transform: uppercase;
            animation: neonPulse 2.5s infinite alternate;
            stroke-width: 1;
            stroke: #00bcd4;
            font-size: 70px;
            fill: rgba(255, 255, 255, 0.3);
            letter-spacing: 4px;
        }
        @keyframes neonPulse {
            0% { fill: rgba(255, 255, 255, 0.3); stroke: #00bcd4; text-shadow: 0 0 5px #00bcd4; }
            50% { fill: rgba(255, 255, 255, 0.6); stroke: #00acc1; text-shadow: 0 0 15px #00bcd4; }
            100% { fill: rgba(255, 255, 255, 0.9); stroke: rgba(0, 188, 242, 0); text-shadow: 0 0 8px #00bcd4; }
        }
        .history-container {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .history-item {
            transition: all 0.5s ease;
            width: 100%;
            border-radius: 15px;
            background: linear-gradient(145deg, #ffffff, #e0f7fa);
            box-shadow: 0 3px 10px rgba(0, 188, 242, 0.2);
            padding: 1rem;
            position: relative;
            overflow: hidden;
        }
        .history-item:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 15px rgba(0, 188, 242, 0.4);
        }
        .small-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #00bcd4;
            border-radius: 50%;
            animation: curveCornerDot 3s infinite ease-in-out;
        }
        @keyframes curveCornerDot {
            0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
            25% { transform: translate(8px, -8px) scale(1.3); opacity: 0.5; }
            50% { transform: translate(12px, 0) scale(1); opacity: 0.8; }
            75% { transform: translate(0, 8px) scale(1.3); opacity: 0.5; }
            100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
        }
        .delete-btn:hover {
            color: #00bcd4;
            transform: scale(1.2) rotate(10deg);
        }
        @keyframes futuristicGlow {
            0% { text-shadow: 0 0 4px #00bcd4, 0 0 8px #00bcd4; }
            50% { text-shadow: 0 0 12px #00bcd4, 0 0 20px #00bcd4; }
            100% { text-shadow: 0 0 4px #00bcd4, 0 0 8px #00bcd4; }
        }
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(2px, -2px); }
            60% { transform: translate(-1px, 1px); }
            80% { transform: translate(1px, -1px); }
            100% { transform: translate(0); }
        }
        @keyframes winGlow {
            0% { text-shadow: 0 0 2px #00e676, 0 0 4px #00e676; }
            50% { text-shadow: 0 0 6px #00e676, 0 0 10px #00e676; }
            100% { text-shadow: 0 0 2px #00e676, 0 0 4px #00e676; }
        }
        @keyframes lossZap {
            0% { transform: translateX(0); opacity: 1; }
            25% { transform: translateX(-2px); opacity: 0.6; }
            50% { transform: translateX(2px); opacity: 1; }
            75% { transform: translateX(-1px); opacity: 0.6; }
            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); }
        }
        .btn-glow {
            transition: all 0.3s ease;
        }
        .btn-glow:hover {
            box-shadow: 0 0 15px #00bcd4, 0 0 20px #00bcd4;
            transform: scale(1.03);
        }
        @keyframes bounceGlow {
            0% { transform: scale(1); box-shadow: 0 0 3px #00bcd4; }
            50% { transform: scale(1.05); box-shadow: 0 0 10px #00bcd4; }
            100% { transform: scale(1); box-shadow: 0 0 3px #00bcd4; }
        }
        @keyframes rippleWave {
            0% { box-shadow: 0 0 0 0 rgba(0, 188, 242, 0.7); }
            50% { box-shadow: 0 0 0 15px rgba(0, 188, 242, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 188, 242, 0); }
        }
        .period-result-card {
            background: linear-gradient(145deg, #ffffff, #e0f7fa);
            border-radius: 15px;
            padding: 1rem;
            position: relative;
            overflow: hidden;
        }
        .period-result-card::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 188, 242, 0.1) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            animation: rippleWave 4s infinite ease-out;
        }
        .period-result-box {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 0.75rem;
            box-shadow: 0 3px 10px rgba(0, 188, 242, 0.15);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .period-result-box:hover {
            transform: scale(1.04);
            box-shadow: 0 4px 15px rgba(0, 188, 242, 0.3);
        }
        .dashboard-box {
            background: linear-gradient(145deg, #ffffff, #e0f7fa);
            border-radius: 15px;
            padding: 0.75rem;
            box-shadow: 0 2px 8px rgba(0, 188, 242, 0.15);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .dashboard-box::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(0, 188, 242, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: rippleWave 3s infinite ease-out;
        }
        .dashboard-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 3px 12px rgba(0, 188, 242, 0.3);
        }
        /* Phone-specific adjustments */
        @media (max-width: 640px) {
            body { padding: 0.5rem; }
            .max-w-5xl { max-width: 100%; padding: 0.5rem; }
            .grid-cols-2 { grid-template-columns: 1fr 1fr; }
            .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
            .text-3xl { font-size: 1.5rem; }
            .text-2xl { font-size: 1.25rem; }
            .text-xl { font-size: 1rem; }
            .text-lg { font-size: 0.875rem; }
            .text-sm { font-size: 0.75rem; }
            .p-6 { padding: 1rem; }
            .mb-6 { margin-bottom: 1rem; }
            .gap-6 { gap: 0.5rem; }
            .w-10 { width: 2rem; height: 2rem; }
            .history-item { padding: 0.75rem; }
        }
  