/* Dashboard styles extracted from vendora-Dashboard/index.html. */

        /* Core Animations & Utilities */
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

        .hidden-view { display: none !important; }
        .actions-overlay { opacity: 0; pointer-events: none; transition: all 0.2s ease-in-out; }
        .product-card:hover .actions-overlay { opacity: 1; pointer-events: auto; }

        #social-canvas { background: #fff; border-radius: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); width: 100%; height: auto; }
        .template-card.active { border-color: #3B82F6 !important; background: #EFF6FF !important; }

        /* Pro Lock Overlay */
        .pro-locked { position: relative; overflow: hidden; pointer-events: none; user-select: none; }
        .pro-locked::after {
            content: "Upgrade to PRO to unlock";
            position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center; font-weight: 800; color: #0F172A; font-size: 1.2rem; z-index: 50;
        }

        /* 10 Layouts for Phone Preview Engine */
        .preview-minimalTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .preview-luxuryGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .preview-splitListPro { display: flex; flex-direction: column; gap: 10px; }
        .preview-magazineHero { display: flex; flex-direction: column; gap: 15px; }
        .preview-darkBoutique { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .preview-storyCarousel { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px; scroll-snap-type: x mandatory; }
        .preview-classicList { display: flex; flex-direction: column; gap: 0px; }
        .preview-modernCards { display: flex; flex-direction: column; gap: 15px; }
        .preview-neonCyber { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .preview-elegantMenu { display: flex; flex-direction: column; gap: 20px; }
        .preview-vogue { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

        /* Responsive Table: Stacked cards on mobile */
        @media (max-width: 768px) {
            .responsive-table thead { display: none; }
            .responsive-table tbody tr { display: block; padding: 1rem; margin-bottom: 1rem; border: 1px solid #f1f5f9; border-radius: 1rem; background: white; }
            .responsive-table td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border: none; text-align: right; width: 100%; }
            .responsive-table td::before { content: attr(data-label); font-weight: 700; color: #94a3b8; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; text-align: left; margin-right: 1rem; }
            /* Ensure action buttons are centered on mobile */
            .responsive-table td:last-child { border-top: 1px solid #f8fafc; margin-top: 0.5rem; padding-top: 1rem; justify-content: center; }
            /* Fix for flex containers in table cells on mobile */
            .responsive-table td > div { display: flex; justify-content: flex-end; width: auto; }
        }