body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background-color: #f4f7fb; /* Soft modern background */
    color: #1e293b;
    padding-bottom: 120px;
}

h1, h2, h3, .font-poppins {
    font-family: 'Montserrat', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Stunning Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, #2563eb, #db2777, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Styling & Checkbox Logic */
.app-card input:checked + .card-content {
    border-color: #3b82f6;
    background-color: #eff6ff;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
    transform: translateY(-4px);
}

.app-card input:checked + .card-content .check-icon {
    transform: scale(1);
    opacity: 1;
}

.card-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.check-icon {
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Image blend mode to remove white backgrounds (like Photoshop) */
.img-blend {
    mix-blend-mode: multiply;
}

/* Animations */
@keyframes bump {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
    100% { transform: translateX(-50%) scale(1); }
}
.bag-bump {
    animation: bump 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-animate {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Receipt (Bill) Styling for the Meme */
.receipt-paper {
    background-color: #fff9ed;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 30px 20px;
}

.receipt-paper::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: radial-gradient(circle at 10px 0, transparent 10px, #fff9ed 11px);
    background-size: 20px 20px;
}

.receipt-paper::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: radial-gradient(circle at 10px 20px, transparent 10px, #fff9ed 11px);
    background-size: 20px 20px;
}

.zigzag-line {
    border-bottom: 2px dashed #94a3b8;
    margin: 15px 0;
}