/* ===== PREMIUM 3D BUTTONS - FULL COLOR PALETTE ===== */

/* ========== BASE ========== */
.btn-3d {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
}

    /* Shine effect */
    .btn-3d::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
        transition: left 0.5s;
    }

    .btn-3d:hover::before {
        left: 100%;
    }

    /* Disabled */
    .btn-3d:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
        filter: grayscale(0.6);
    }

/* ========== SIZES ========== */
.btn-3d-sm {
    padding: 0.55rem 1.1rem;
    font-size: 0.75rem;
    border-radius: 8px;
}

.btn-3d-lg {
    padding: 1.1rem 2.5rem;
    font-size: 1rem;
    border-radius: 14px;
}

.btn-3d-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    font-size: 1.2rem;
}

.btn-3d-icon-sm {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    font-size: 1rem;
}

/* ========== COLOR MIXIN ========== */
.btn-3d-green {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 5px 0 #15803d, 0 10px 25px rgba(22,163,74,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-green:hover {
        background: linear-gradient(180deg, #34d399 0%, #22c55e 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #15803d, 0 15px 30px rgba(22,163,74,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-green:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #15803d, 0 3px 10px rgba(22,163,74,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-emerald {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 5px 0 #047857, 0 10px 25px rgba(5,150,105,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-emerald:hover {
        background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #047857, 0 15px 30px rgba(5,150,105,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-emerald:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #047857, 0 3px 10px rgba(5,150,105,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-teal {
    background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    box-shadow: 0 5px 0 #0f766e, 0 10px 25px rgba(13,148,136,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-teal:hover {
        background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #0f766e, 0 15px 30px rgba(13,148,136,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-teal:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #0f766e, 0 3px 10px rgba(13,148,136,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-cyan {
    background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    box-shadow: 0 5px 0 #0e7490, 0 10px 25px rgba(8,145,178,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-cyan:hover {
        background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #0e7490, 0 15px 30px rgba(8,145,178,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-cyan:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #0e7490, 0 3px 10px rgba(8,145,178,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-sky {
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    box-shadow: 0 5px 0 #0369a1, 0 10px 25px rgba(2,132,199,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-sky:hover {
        background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #0369a1, 0 15px 30px rgba(2,132,199,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-sky:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #0369a1, 0 3px 10px rgba(2,132,199,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-blue {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 5px 0 #1d4ed8, 0 10px 25px rgba(37,99,235,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-blue:hover {
        background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #1d4ed8, 0 15px 30px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-blue:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #1d4ed8, 0 3px 10px rgba(37,99,235,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-indigo {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 5px 0 #4338ca, 0 10px 25px rgba(79,70,229,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-indigo:hover {
        background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #4338ca, 0 15px 30px rgba(79,70,229,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-indigo:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #4338ca, 0 3px 10px rgba(79,70,229,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-violet {
    background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 5px 0 #6d28d9, 0 10px 25px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-violet:hover {
        background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #6d28d9, 0 15px 30px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-violet:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #6d28d9, 0 3px 10px rgba(124,58,237,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-purple {
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    color: white;
    box-shadow: 0 5px 0 #7e22ce, 0 10px 25px rgba(147,51,234,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-purple:hover {
        background: linear-gradient(180deg, #c084fc 0%, #a855f7 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #7e22ce, 0 15px 30px rgba(147,51,234,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-purple:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #7e22ce, 0 3px 10px rgba(147,51,234,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-fuchsia {
    background: linear-gradient(180deg, #d946ef 0%, #c026d3 100%);
    color: white;
    box-shadow: 0 5px 0 #a21caf, 0 10px 25px rgba(192,38,211,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-fuchsia:hover {
        background: linear-gradient(180deg, #e879f9 0%, #d946ef 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #a21caf, 0 15px 30px rgba(192,38,211,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-fuchsia:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #a21caf, 0 3px 10px rgba(192,38,211,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-pink {
    background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
    color: white;
    box-shadow: 0 5px 0 #be185d, 0 10px 25px rgba(219,39,119,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-pink:hover {
        background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #be185d, 0 15px 30px rgba(219,39,119,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-pink:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #be185d, 0 3px 10px rgba(219,39,119,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-rose {
    background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
    color: white;
    box-shadow: 0 5px 0 #be123c, 0 10px 25px rgba(225,29,72,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-rose:hover {
        background: linear-gradient(180deg, #fb7185 0%, #f43f5e 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #be123c, 0 15px 30px rgba(225,29,72,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-rose:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #be123c, 0 3px 10px rgba(225,29,72,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-red {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 5px 0 #b91c1c, 0 10px 25px rgba(220,38,38,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-red:hover {
        background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #b91c1c, 0 15px 30px rgba(220,38,38,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-red:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #b91c1c, 0 3px 10px rgba(220,38,38,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-orange {
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
    color: white;
    box-shadow: 0 5px 0 #c2410c, 0 10px 25px rgba(234,88,12,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-orange:hover {
        background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #c2410c, 0 15px 30px rgba(234,88,12,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-orange:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #c2410c, 0 3px 10px rgba(234,88,12,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-amber {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 5px 0 #b45309, 0 10px 25px rgba(217,119,6,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-amber:hover {
        background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #b45309, 0 15px 30px rgba(217,119,6,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-amber:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #b45309, 0 3px 10px rgba(217,119,6,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-yellow {
    background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%);
    color: white;
    box-shadow: 0 5px 0 #a16207, 0 10px 25px rgba(202,138,4,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-yellow:hover {
        background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #a16207, 0 15px 30px rgba(202,138,4,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-yellow:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #a16207, 0 3px 10px rgba(202,138,4,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-lime {
    background: linear-gradient(180deg, #84cc16 0%, #65a30d 100%);
    color: white;
    box-shadow: 0 5px 0 #4d7c0f, 0 10px 25px rgba(101,163,13,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-lime:hover {
        background: linear-gradient(180deg, #a3e635 0%, #84cc16 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #4d7c0f, 0 15px 30px rgba(101,163,13,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-lime:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #4d7c0f, 0 3px 10px rgba(101,163,13,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

/* ========== NEUTRALS ========== */
.btn-3d-slate {
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
    color: white;
    box-shadow: 0 5px 0 #334155, 0 10px 25px rgba(71,85,105,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-slate:hover {
        background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #334155, 0 15px 30px rgba(71,85,105,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-slate:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #334155, 0 3px 10px rgba(71,85,105,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-gray {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 5px 0 #374151, 0 10px 25px rgba(75,85,99,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-gray:hover {
        background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #374151, 0 15px 30px rgba(75,85,99,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-gray:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #374151, 0 3px 10px rgba(75,85,99,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-zinc {
    background: linear-gradient(180deg, #71717a 0%, #52525b 100%);
    color: white;
    box-shadow: 0 5px 0 #3f3f46, 0 10px 25px rgba(82,82,91,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-3d-zinc:hover {
        background: linear-gradient(180deg, #a1a1aa 0%, #71717a 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #3f3f46, 0 15px 30px rgba(82,82,91,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    .btn-3d-zinc:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #3f3f46, 0 3px 10px rgba(82,82,91,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-dark {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    color: white;
    box-shadow: 0 5px 0 #111827, 0 10px 25px rgba(31,41,55,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

    .btn-3d-dark:hover {
        background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #111827, 0 15px 30px rgba(31,41,55,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    }

    .btn-3d-dark:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #111827, 0 3px 10px rgba(31,41,55,0.3), inset 0 2px 4px rgba(0,0,0,0.2);
    }

/* ========== SPECIALS ========== */
.btn-3d-gold {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    color: #451a03;
    box-shadow: 0 5px 0 #92400e, 0 10px 25px rgba(217,119,6,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    font-weight: 800;
}

    .btn-3d-gold:hover {
        background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #92400e, 0 15px 30px rgba(217,119,6,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .btn-3d-gold:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #92400e, 0 3px 10px rgba(217,119,6,0.3), inset 0 2px 4px rgba(0,0,0,0.1);
    }

.btn-3d-silver {
    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%);
    color: #1e293b;
    box-shadow: 0 5px 0 #475569, 0 10px 25px rgba(148,163,184,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    font-weight: 800;
}

    .btn-3d-silver:hover {
        background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #475569, 0 15px 30px rgba(148,163,184,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
    }

    .btn-3d-silver:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #475569, 0 3px 10px rgba(148,163,184,0.3), inset 0 2px 4px rgba(0,0,0,0.1);
    }

.btn-3d-black {
    background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%);
    color: white;
    box-shadow: 0 5px 0 #000000, 0 10px 25px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

    .btn-3d-black:hover {
        background: linear-gradient(180deg, #404040 0%, #262626 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #000000, 0 15px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
    }

    .btn-3d-black:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #000000, 0 3px 10px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3);
    }

.btn-3d-white {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #1e293b;
    box-shadow: 0 5px 0 #cbd5e1, 0 10px 25px rgba(203,213,225,0.4), inset 0 1px 0 rgba(255,255,255,0.8);
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    font-weight: 800;
    border: 1px solid #e2e8f0;
}

    .btn-3d-white:hover {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #cbd5e1, 0 15px 30px rgba(203,213,225,0.5), inset 0 1px 0 rgba(255,255,255,1);
    }

    .btn-3d-white:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #cbd5e1, 0 3px 10px rgba(203,213,225,0.3), inset 0 2px 4px rgba(0,0,0,0.05);
    }

/* ========== RAINBOW / GRADIENT SPECIALS ========== */
.btn-3d-rainbow {
    background: linear-gradient(180deg, #ef4444 0%, #f97316 20%, #eab308 40%, #22c55e 60%, #3b82f6 80%, #a855f7 100%);
    color: white;
    box-shadow: 0 5px 0 #7c2d12, 0 10px 25px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    font-weight: 800;
}

    .btn-3d-rainbow:hover {
        filter: brightness(1.15);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #7c2d12, 0 15px 30px rgba(239,68,68,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .btn-3d-rainbow:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #7c2d12, 0 3px 10px rgba(239,68,68,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-ocean {
    background: linear-gradient(180deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);
    color: white;
    box-shadow: 0 5px 0 #1e3a8a, 0 10px 25px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

    .btn-3d-ocean:hover {
        filter: brightness(1.15);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #1e3a8a, 0 15px 30px rgba(59,130,246,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .btn-3d-ocean:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #1e3a8a, 0 3px 10px rgba(59,130,246,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-sunset {
    background: linear-gradient(180deg, #f43f5e 0%, #f97316 50%, #eab308 100%);
    color: white;
    box-shadow: 0 5px 0 #7c2d12, 0 10px 25px rgba(249,115,22,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

    .btn-3d-sunset:hover {
        filter: brightness(1.15);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #7c2d12, 0 15px 30px rgba(249,115,22,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .btn-3d-sunset:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #7c2d12, 0 3px 10px rgba(249,115,22,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-forest {
    background: linear-gradient(180deg, #22c55e 0%, #059669 50%, #0e7490 100%);
    color: white;
    box-shadow: 0 5px 0 #064e3b, 0 10px 25px rgba(5,150,105,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

    .btn-3d-forest:hover {
        filter: brightness(1.15);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #064e3b, 0 15px 30px rgba(5,150,105,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .btn-3d-forest:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #064e3b, 0 3px 10px rgba(5,150,105,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

.btn-3d-midnight {
    background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
    color: white;
    box-shadow: 0 5px 0 #581c87, 0 10px 25px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

    .btn-3d-midnight:hover {
        filter: brightness(1.15);
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #581c87, 0 15px 30px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .btn-3d-midnight:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 #581c87, 0 3px 10px rgba(124,58,237,0.3), inset 0 2px 4px rgba(0,0,0,0.15);
    }

/* ========== OUTLINE VARIANTS ========== */
.btn-3d-outline-green {
    background: transparent;
    color: #22c55e;
    border: 2px solid #22c55e;
    box-shadow: 0 4px 0 #15803d, 0 8px 20px rgba(22,163,74,0.2);
}

    .btn-3d-outline-green:hover {
        background: rgba(34,197,94,0.1);
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #15803d, 0 12px 25px rgba(22,163,74,0.3);
    }

    .btn-3d-outline-green:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 #15803d, 0 2px 8px rgba(22,163,74,0.2);
    }

.btn-3d-outline-red {
    background: transparent;
    color: #ef4444;
    border: 2px solid #ef4444;
    box-shadow: 0 4px 0 #b91c1c, 0 8px 20px rgba(220,38,38,0.2);
}

    .btn-3d-outline-red:hover {
        background: rgba(239,68,68,0.1);
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #b91c1c, 0 12px 25px rgba(220,38,38,0.3);
    }

    .btn-3d-outline-red:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 #b91c1c, 0 2px 8px rgba(220,38,38,0.2);
    }

.btn-3d-outline-blue {
    background: transparent;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    box-shadow: 0 4px 0 #1d4ed8, 0 8px 20px rgba(37,99,235,0.2);
}

    .btn-3d-outline-blue:hover {
        background: rgba(59,130,246,0.1);
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #1d4ed8, 0 12px 25px rgba(37,99,235,0.3);
    }

    .btn-3d-outline-blue:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 #1d4ed8, 0 2px 8px rgba(37,99,235,0.2);
    }