:root {
    --card-paper: #fffdf6;
}

body {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.7), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(255, 182, 193, 0.25), transparent 35%);
}

.fridge-shell {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 28%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 12px,
            transparent 12px,
            transparent 24px
        );
}

.fridge-toolbar {
    position: relative;
    z-index: 1;
}

.recipe-card {
    background: var(--card-paper);
    box-shadow: 4px 8px 0 rgba(43, 58, 66, 0.12), 0 16px 30px rgba(43, 58, 66, 0.18);
    transform-origin: top center;
}

.recipe-card:nth-child(3n + 1) {
    transform: rotate(-1.4deg);
}

.recipe-card:nth-child(3n + 2) {
    transform: rotate(1.1deg);
}

.recipe-card:nth-child(3n) {
    transform: rotate(-0.6deg);
}

.icon-sway {
    animation: sway 2.8s ease-in-out infinite;
}

.pin-sway {
    animation: sway 3.2s ease-in-out infinite;
}

@keyframes sway {
    0%,
    100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
}

.timeline-line {
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #99d5c4;
}

.badge-veg {
    background: #b7e4c7;
    color: #1b4332;
}

.badge-meat {
    background: #ffcad4;
    color: #6d2e3a;
}

.badge-dessert {
    background: #ffe5a9;
    color: #6b4f1d;
}

.badge-other {
    background: #cfe0ff;
    color: #243b6b;
}

.trash-page {
    background:
        radial-gradient(circle at 15% 10%, rgba(156, 163, 175, 0.35), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(110, 231, 183, 0.2), transparent 35%),
        linear-gradient(180deg, #e5e7eb 0%, #cbd5e1 100%);
}

.trash-bin {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 35%),
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.06) 0,
            rgba(0, 0, 0, 0.06) 2px,
            transparent 2px,
            transparent 14px
        );
}

.trash-card {
    background: #f3f4f6;
    box-shadow: inset 0 0 0 1px rgba(55, 65, 81, 0.15), 3px 6px 0 rgba(31, 41, 55, 0.18);
    transform: rotate(-0.8deg);
}

.trash-card:nth-child(even) {
    transform: rotate(1deg);
}

.trash-lid-sway {
    animation: lidTip 3.4s ease-in-out infinite;
    transform-origin: 50% 20%;
}

@keyframes lidTip {
    0%,
    100% {
        transform: rotate(-4deg) translateY(0);
    }
    50% {
        transform: rotate(6deg) translateY(-2px);
    }
}