/* =========================================================================
   UI PARADIGM SANDBOX: 20 AESTHETIC MOVEMENTS
   ========================================================================= */

/* BASE SETUP & ANIMATION */
.ui-lab-container { display: flex; gap: 2rem; }
.ui-lab-sidebar { flex: 1; max-width: 400px; }
.ui-lab-canvas { flex: 2; min-height: 500px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 12px; transition: background 0.5s ease; position: relative; overflow: hidden; }

/* The Base Component (Unstyled / Reset) */
.ui-preview-card { transition: all 0.5s ease; width: 350px; font-family: 'Inter', sans-serif; position: relative; z-index: 10; }
.ui-card-header, .ui-card-body, .ui-card-footer { transition: all 0.5s ease; }
.ui-badge, .ui-card-title, .ui-price, .ui-price-mo, .ui-features li, .ui-cta-btn { transition: all 0.5s ease; }

@media (max-width: 768px) {
  .ui-lab-container { flex-direction: column; }
}

/* =========================================
   1. MINIMALISM
========================================= */
[data-style="minimalism"] { background: #fafafa; }
[data-style="minimalism"] .ui-preview-card, [data-style="minimalism"] .mock-card, [data-style="minimalism"] .mock-nav, [data-style="minimalism"] .mock-hero { background: #ffffff; padding: 2.5rem; border: none; border-radius: 0; box-shadow: none; color: #111; text-align: left; }
[data-style="minimalism"] .ui-badge, [data-style="minimalism"] .mock-badge { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: #888; display: block; margin-bottom: 0.5rem; }
[data-style="minimalism"] .ui-card-title, [data-style="minimalism"] .mock-headline, [data-style="minimalism"] .mock-card-content h4 { font-size: 1.5rem; font-weight: 400; margin: 0 0 1rem 0; }
[data-style="minimalism"] .ui-price, [data-style="minimalism"] .mock-subhead, [data-style="minimalism"] .mock-card-content p { font-size: 3rem; font-weight: 300; margin-bottom: 2rem; border-bottom: 1px solid #eee; padding-bottom: 2rem; }
[data-style="minimalism"] .ui-price, [data-style="minimalism"] .mock-subhead, [data-style="minimalism"] .mock-card-content p-mo { font-size: 1rem; color: #888; }
[data-style="minimalism"] .ui-features { list-style: none; padding: 0; margin: 0 0 2rem 0; color: #444; }
[data-style="minimalism"] .ui-features li { padding: 0.5rem 0; font-size: 0.9rem; }
[data-style="minimalism"] .ui-cta-btn, [data-style="minimalism"] .mock-btn { width: 100%; background: #000; color: #fff; border: none; padding: 1rem; cursor: pointer; border-radius: 0; font-weight: 500; font-family: 'Inter'; }

/* =========================================
   2. BRUTALISM
========================================= */
[data-style="brutalism"] { background: #0000ff; }
[data-style="brutalism"] .ui-preview-card, [data-style="brutalism"] .mock-card, [data-style="brutalism"] .mock-nav, [data-style="brutalism"] .mock-hero { background: #ffff00; padding: 2rem; border: 4px solid #000; box-shadow: 12px 12px 0 #000; color: #000; font-family: 'Courier New', monospace; border-radius: 0; }
[data-style="brutalism"] .ui-badge, [data-style="brutalism"] .mock-badge { background: #ff0000; color: #fff; padding: 4px 8px; font-weight: bold; text-transform: uppercase; border: 2px solid #000; display: inline-block; margin-bottom: 1rem; }
[data-style="brutalism"] .ui-card-title, [data-style="brutalism"] .mock-headline, [data-style="brutalism"] .mock-card-content h4 { font-size: 2rem; font-weight: 900; margin: 0 0 1rem 0; text-transform: uppercase; }
[data-style="brutalism"] .ui-price, [data-style="brutalism"] .mock-subhead, [data-style="brutalism"] .mock-card-content p { font-size: 4rem; font-weight: 900; letter-spacing: -2px; margin-bottom: 1rem; }
[data-style="brutalism"] .ui-features { list-style: square; padding-left: 20px; font-weight: bold; margin-bottom: 2rem; }
[data-style="brutalism"] .ui-features li { border-bottom: 2px dashed #000; padding: 8px 0; }
[data-style="brutalism"] .ui-cta-btn, [data-style="brutalism"] .mock-btn { width: 100%; background: #ff00ff; color: #000; border: 4px solid #000; padding: 1.5rem; font-weight: 900; font-size: 1.2rem; text-transform: uppercase; cursor: pointer; box-shadow: 6px 6px 0 #000; }

/* =========================================
   3. NEU-BRUTALISM
========================================= */
[data-style="neu-brutalism"] { background: #FDE8E9; }
[data-style="neu-brutalism"] .ui-preview-card, [data-style="neu-brutalism"] .mock-card, [data-style="neu-brutalism"] .mock-nav, [data-style="neu-brutalism"] .mock-hero { background: #ffffff; padding: 2rem; border: 3px solid #000; border-radius: 12px; box-shadow: 8px 8px 0 #000; color: #000; }
[data-style="neu-brutalism"] .ui-badge, [data-style="neu-brutalism"] .mock-badge { background: #B3B2FF; padding: 6px 12px; border: 2px solid #000; border-radius: 20px; font-weight: 800; display: inline-block; margin-bottom: 1rem; font-size: 0.8rem; }
[data-style="neu-brutalism"] .ui-card-title, [data-style="neu-brutalism"] .mock-headline, [data-style="neu-brutalism"] .mock-card-content h4 { font-weight: 800; font-size: 1.8rem; margin: 0 0 0.5rem 0; }
[data-style="neu-brutalism"] .ui-price, [data-style="neu-brutalism"] .mock-subhead, [data-style="neu-brutalism"] .mock-card-content p { font-size: 3.5rem; font-weight: 900; margin-bottom: 2rem; }
[data-style="neu-brutalism"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; }
[data-style="neu-brutalism"] .ui-features li { background: #E1F8DC; padding: 10px; margin-bottom: 8px; border: 2px solid #000; border-radius: 8px; font-weight: 600; }
[data-style="neu-brutalism"] .ui-cta-btn, [data-style="neu-brutalism"] .mock-btn { width: 100%; background: #FFD43B; color: #000; border: 3px solid #000; border-radius: 8px; padding: 1rem; font-size: 1.2rem; font-weight: 800; box-shadow: 4px 4px 0 #000; cursor: pointer; }

/* =========================================
   4. GLASSMORPHISM
========================================= */
[data-style="glassmorphism"] { background: linear-gradient(45deg, #FF6B6B, #4ECDC4); position: relative; }
[data-style="glassmorphism"]::before { content:''; position:absolute; width:150px; height:150px; background:rgba(255,255,255,0.4); border-radius:50%; top:20%; left:20%; filter:blur(20px); }
[data-style="glassmorphism"] .ui-preview-card, [data-style="glassmorphism"] .mock-card, [data-style="glassmorphism"] .mock-nav, [data-style="glassmorphism"] .mock-hero { background: rgba(255, 255, 255, 0.15); padding: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
[data-style="glassmorphism"] .ui-badge, [data-style="glassmorphism"] .mock-badge { background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; display: inline-block; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.2); }
[data-style="glassmorphism"] .ui-card-title, [data-style="glassmorphism"] .mock-headline, [data-style="glassmorphism"] .mock-card-content h4 { font-weight: 600; font-size: 1.8rem; margin: 0 0 0.5rem 0; }
[data-style="glassmorphism"] .ui-price, [data-style="glassmorphism"] .mock-subhead, [data-style="glassmorphism"] .mock-card-content p { font-size: 3rem; font-weight: 700; margin-bottom: 2rem; }
[data-style="glassmorphism"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; color: rgba(255,255,255,0.9); }
[data-style="glassmorphism"] .ui-features li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
[data-style="glassmorphism"] .ui-cta-btn, [data-style="glassmorphism"] .mock-btn { width: 100%; background: rgba(255,255,255,0.25); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 12px; padding: 1rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(5px); }

/* =========================================
   5. NEUMORPHISM
========================================= */
[data-style="neumorphism"] { background: #e0e5ec; }
[data-style="neumorphism"] .ui-preview-card, [data-style="neumorphism"] .mock-card, [data-style="neumorphism"] .mock-nav, [data-style="neumorphism"] .mock-hero { background: #e0e5ec; padding: 2.5rem; border-radius: 24px; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); color: #4d5766; }
[data-style="neumorphism"] .ui-badge, [data-style="neumorphism"] .mock-badge { color: #8893a4; font-size: 0.8rem; letter-spacing: 1px; display: inline-block; margin-bottom: 1rem; padding: 5px 15px; border-radius: 20px; box-shadow: inset 4px 4px 8px rgb(163,177,198,0.5), inset -4px -4px 8px rgba(255,255,255,0.8); }
[data-style="neumorphism"] .ui-card-title, [data-style="neumorphism"] .mock-headline, [data-style="neumorphism"] .mock-card-content h4 { font-weight: 700; font-size: 1.6rem; margin: 0 0 0.5rem 0; color: #313a46; }
[data-style="neumorphism"] .ui-price, [data-style="neumorphism"] .mock-subhead, [data-style="neumorphism"] .mock-card-content p { font-size: 3rem; font-weight: 800; margin-bottom: 2rem; color: #2c343e; }
[data-style="neumorphism"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; }
[data-style="neumorphism"] .ui-features li { padding: 10px 0; color: #626d7d; }
[data-style="neumorphism"] .ui-cta-btn, [data-style="neumorphism"] .mock-btn { width: 100%; background: #e0e5ec; color: #313a46; border: none; border-radius: 12px; padding: 1rem; font-weight: 700; cursor: pointer; box-shadow: 6px 6px 10px rgb(163,177,198,0.6), -6px -6px 10px rgba(255,255,255, 0.5); transition: box-shadow 0.2s; }
[data-style="neumorphism"] .ui-cta-btn, [data-style="neumorphism"] .mock-btn:active { box-shadow: inset 4px 4px 8px rgb(163,177,198,0.5), inset -4px -4px 8px rgba(255,255,255,0.8); }

/* =========================================
   6. CLAYMORPHISM
========================================= */
[data-style="claymorphism"] { background: #f2f4f8; }
[data-style="claymorphism"] .ui-preview-card, [data-style="claymorphism"] .mock-card, [data-style="claymorphism"] .mock-nav, [data-style="claymorphism"] .mock-hero { background: #ffffff; padding: 2.5rem; border-radius: 36px; box-shadow: 10px 10px 20px rgba(0,0,0,0.05), inset -10px -10px 20px rgba(0,0,0,0.05), inset 10px 10px 20px rgba(255,255,255,1); color: #333; }
[data-style="claymorphism"] .ui-badge, [data-style="claymorphism"] .mock-badge { background: #f0f4ff; color: #4361ee; padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 0.8rem; display: inline-block; margin-bottom: 1rem; box-shadow: inset -3px -3px 6px rgba(0,0,0,0.05), inset 3px 3px 6px rgba(255,255,255,1); }
[data-style="claymorphism"] .ui-card-title, [data-style="claymorphism"] .mock-headline, [data-style="claymorphism"] .mock-card-content h4 { font-weight: 800; font-size: 1.8rem; margin: 0 0 0.5rem 0; color: #111; }
[data-style="claymorphism"] .ui-price, [data-style="claymorphism"] .mock-subhead, [data-style="claymorphism"] .mock-card-content p { font-size: 3rem; font-weight: 800; margin-bottom: 2rem; color: #4361ee; }
[data-style="claymorphism"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; font-weight: 500; }
[data-style="claymorphism"] .ui-features li { padding: 8px 0; }
[data-style="claymorphism"] .ui-cta-btn, [data-style="claymorphism"] .mock-btn { width: 100%; background: #4361ee; color: #fff; border: none; border-radius: 20px; padding: 1.2rem; font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 5px 5px 15px rgba(67,97,238,0.3), inset -4px -4px 10px rgba(0,0,0,0.2), inset 4px 4px 10px rgba(255,255,255,0.4); }

/* =========================================
   7. BAUHAUS
========================================= */
[data-style="bauhaus"] { background: #E9D5C3; }
[data-style="bauhaus"] .ui-preview-card, [data-style="bauhaus"] .mock-card, [data-style="bauhaus"] .mock-nav, [data-style="bauhaus"] .mock-hero { background: #F1F1F1; padding: 0; border: none; color: #111; font-family: 'Inter', sans-serif; position: relative; overflow: hidden; }
[data-style="bauhaus"] .ui-card-header { background: #D93829; padding: 3rem 2rem; color: #fff; position: relative; }
[data-style="bauhaus"] .ui-badge, [data-style="bauhaus"] .mock-badge { background: #000; color: #fff; padding: 4px 8px; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold; text-align: center; position: absolute; top: 1rem; right: 1rem; }
[data-style="bauhaus"] .ui-card-title, [data-style="bauhaus"] .mock-headline, [data-style="bauhaus"] .mock-card-content h4 { font-weight: 900; font-size: 2.5rem; margin: 0; text-transform: lowercase; letter-spacing: -2px; }
[data-style="bauhaus"] .ui-price, [data-style="bauhaus"] .mock-subhead, [data-style="bauhaus"] .mock-card-content p { font-size: 4rem; font-weight: 900; color: #F1C40F; margin: 0; line-height: 1; }
[data-style="bauhaus"] .ui-card-body { padding: 2rem; background: #2C3E50; color: #fff; }
[data-style="bauhaus"] .ui-features { list-style: none; padding: 0; margin: 0; }
[data-style="bauhaus"] .ui-features li { padding: 10px 0; border-bottom: 4px solid #34495E; font-weight: 700; font-size: 1.1rem; }
[data-style="bauhaus"] .ui-card-footer { background: #F1C40F; padding: 0; }
[data-style="bauhaus"] .ui-cta-btn, [data-style="bauhaus"] .mock-btn { width: 100%; background: transparent; color: #000; border: none; padding: 1.5rem; font-weight: 900; font-size: 1.5rem; cursor: pointer; }

/* =========================================
   8. DARK MODE
========================================= */
[data-style="dark-mode"] { background: #0a0a0a; }
[data-style="dark-mode"] .ui-preview-card, [data-style="dark-mode"] .mock-card, [data-style="dark-mode"] .mock-nav, [data-style="dark-mode"] .mock-hero { background: #141414; padding: 2.5rem; border: 1px solid #333; border-radius: 16px; color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
[data-style="dark-mode"] .ui-badge, [data-style="dark-mode"] .mock-badge { color: #888; border: 1px solid #333; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; letter-spacing: 1px; display: inline-block; margin-bottom: 1rem; background: #1a1a1a; }
[data-style="dark-mode"] .ui-card-title, [data-style="dark-mode"] .mock-headline, [data-style="dark-mode"] .mock-card-content h4 { font-weight: 500; font-size: 1.6rem; margin: 0 0 0.5rem 0; color: #eaeaea; }
[data-style="dark-mode"] .ui-price, [data-style="dark-mode"] .mock-subhead, [data-style="dark-mode"] .mock-card-content p { font-size: 3.5rem; font-weight: 300; margin-bottom: 2rem; color: #fff; }
[data-style="dark-mode"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; color: #aaa; }
[data-style="dark-mode"] .ui-features li { padding: 8px 0; display: flex; align-items: center; gap: 10px; }
[data-style="dark-mode"] .ui-features li::before { content:'✔'; color: #444; }
[data-style="dark-mode"] .ui-cta-btn, [data-style="dark-mode"] .mock-btn { width: 100%; background: #fff; color: #000; border: none; border-radius: 8px; padding: 1rem; font-weight: 600; cursor: pointer; }

/* =========================================
   9. CYBERPUNK
========================================= */
[data-style="cyberpunk"] { background: #000; }
[data-style="cyberpunk"] .ui-preview-card, [data-style="cyberpunk"] .mock-card, [data-style="cyberpunk"] .mock-nav, [data-style="cyberpunk"] .mock-hero { background: #0F0F1A; padding: 2rem; border: 2px solid #00F3FF; color: #00F3FF; position: relative; clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%); font-family: 'Courier New', monospace; box-shadow: 0 0 20px rgba(0,243,255,0.2); }
[data-style="cyberpunk"] .ui-badge, [data-style="cyberpunk"] .mock-badge { background: #FDE802; color: #000; padding: 2px 10px; font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; display: inline-block; }
[data-style="cyberpunk"] .ui-card-title, [data-style="cyberpunk"] .mock-headline, [data-style="cyberpunk"] .mock-card-content h4 { font-weight: bold; font-size: 1.8rem; margin: 0 0 0.5rem 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px #FF003C; }
[data-style="cyberpunk"] .ui-price, [data-style="cyberpunk"] .mock-subhead, [data-style="cyberpunk"] .mock-card-content p { font-size: 3rem; font-weight: bold; margin-bottom: 2rem; color: #FF003C; }
[data-style="cyberpunk"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; color: #fff; }
[data-style="cyberpunk"] .ui-features li { padding: 5px 0; border-left: 2px solid #00F3FF; padding-left: 10px; margin-bottom: 8px; }
[data-style="cyberpunk"] .ui-cta-btn, [data-style="cyberpunk"] .mock-btn { width: 100%; background: #FF003C; color: #fff; border: none; padding: 1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; letter-spacing: 2px; position: relative; }
[data-style="cyberpunk"] .ui-cta-btn, [data-style="cyberpunk"] .mock-btn::after { content:''; position:absolute; bottom:0; right:0; border-width: 10px; border-style: solid; border-color: transparent transparent #00F3FF #00F3FF; }

/* =========================================
   10. FRUTIGER AERO
========================================= */
[data-style="frutiger-aero"] { background: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&w=800') center/cover; }
[data-style="frutiger-aero"] .ui-preview-card, [data-style="frutiger-aero"] .mock-card, [data-style="frutiger-aero"] .mock-nav, [data-style="frutiger-aero"] .mock-hero { background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(220,235,255,0.9) 100%); padding: 2rem; border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; color: #333; box-shadow: 0 10px 30px rgba(0,100,255,0.2), inset 0 2px 5px rgba(255,255,255,1); }
[data-style="frutiger-aero"] .ui-badge, [data-style="frutiger-aero"] .mock-badge { background: linear-gradient(180deg, #7CFC00 0%, #32CD32 100%); color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; border: 1px solid #228B22; box-shadow: inset 0 2px 2px rgba(255,255,255,0.5); display: inline-block; margin-bottom: 1rem; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
[data-style="frutiger-aero"] .ui-card-title, [data-style="frutiger-aero"] .mock-headline, [data-style="frutiger-aero"] .mock-card-content h4 { font-weight: 700; font-size: 1.8rem; margin: 0 0 0.5rem 0; color: #0055ff; }
[data-style="frutiger-aero"] .ui-price, [data-style="frutiger-aero"] .mock-subhead, [data-style="frutiger-aero"] .mock-card-content p { font-size: 3rem; font-weight: 700; margin-bottom: 2rem; color: #111; text-shadow: 0 2px 4px rgba(255,255,255,1); }
[data-style="frutiger-aero"] .ui-features { list-style: none; padding: 0; margin-bottom: 2rem; }
[data-style="frutiger-aero"] .ui-features li { padding: 8px 0; color: #444; border-bottom: 1px solid rgba(0,0,0,0.05); }
[data-style="frutiger-aero"] .ui-cta-btn, [data-style="frutiger-aero"] .mock-btn { width: 100%; background: linear-gradient(180deg, #4da6ff 0%, #0066cc 100%); color: #fff; border: 1px solid #004499; border-radius: 20px; padding: 1rem; font-weight: bold; cursor: pointer; box-shadow: inset 0 2px 5px rgba(255,255,255,0.6), 0 4px 8px rgba(0,0,0,0.2); text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }

/* Note: Adding rest of the 10 styles down to 20 */
[data-style="y2k"] { background: #ff00ff; }
[data-style="y2k"] .ui-preview-card, [data-style="y2k"] .mock-card, [data-style="y2k"] .mock-nav, [data-style="y2k"] .mock-hero { background: #c0c0c0; border: 3px solid #fff; border-right-color: #888; border-bottom-color: #888; padding: 2rem; color: #000; font-family: 'Comic Sans MS', cursive, sans-serif; }
[data-style="y2k"] .ui-cta-btn, [data-style="y2k"] .mock-btn { background: #000080; color: #fff; border: 2px solid #fff; border-right-color: #000; border-bottom-color: #000; padding: 1rem; font-weight: bold; width:100%; cursor: pointer;}

[data-style="retro"] { background: #222; }
[data-style="retro"] .ui-preview-card, [data-style="retro"] .mock-card, [data-style="retro"] .mock-nav, [data-style="retro"] .mock-hero { background: #000; border: 4px solid #fff; padding: 2rem; color: #33ff00; font-family: monospace; text-transform: uppercase; }
[data-style="retro"] .ui-cta-btn, [data-style="retro"] .mock-btn { background: #33ff00; color: #000; padding: 1rem; font-weight: bold; width:100%; border: none; cursor: pointer;}

[data-style="flat"] { background: #e74c3c; }
[data-style="flat"] .ui-preview-card, [data-style="flat"] .mock-card, [data-style="flat"] .mock-nav, [data-style="flat"] .mock-hero { background: #fff; padding: 2.5rem; border-radius: 8px; color: #2c3e50; }
[data-style="flat"] .ui-cta-btn, [data-style="flat"] .mock-btn { background: #3498db; color: #fff; border: none; padding: 1rem; font-weight: 600; width:100%; border-radius: 4px; cursor: pointer;}

[data-style="material"] { background: #eee; }
[data-style="material"] .ui-preview-card, [data-style="material"] .mock-card, [data-style="material"] .mock-nav, [data-style="material"] .mock-hero { background: #fff; padding: 2.5rem; border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); color: #000; }
[data-style="material"] .ui-cta-btn, [data-style="material"] .mock-btn { background: #6200ea; color: #fff; border: none; padding: 1rem; font-weight: 500; width:100%; border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,0.14); cursor: pointer; text-transform: uppercase; letter-spacing: 1px;}

[data-style="isometric"] { background: #b0c4de; perspective: 1000px; }
[data-style="isometric"] .ui-preview-card, [data-style="isometric"] .mock-card, [data-style="isometric"] .mock-nav, [data-style="isometric"] .mock-hero { background: #fff; padding: 2rem; transform: rotateX(60deg) rotateZ(-45deg); transform-style: preserve-3d; box-shadow: -20px 20px 0 #8892a0; border: 1px solid #fff; }
[data-style="isometric"] .ui-cta-btn, [data-style="isometric"] .mock-btn { background: #ff7f50; border:none; padding:1rem; width:100%; transform: translateZ(20px); box-shadow: -5px 5px 0 #cc6640; color:#fff; font-weight:bold;}

[data-style="corporate-memphis"] { background: #FFD166; }
[data-style="corporate-memphis"] .ui-preview-card, [data-style="corporate-memphis"] .mock-card, [data-style="corporate-memphis"] .mock-nav, [data-style="corporate-memphis"] .mock-hero { background: #fff; padding: 2.5rem; border-radius: 30px; border: 3px solid #118AB2; color: #073B4C; }
[data-style="corporate-memphis"] .ui-cta-btn, [data-style="corporate-memphis"] .mock-btn { background: #EF476F; color: #fff; border: none; padding: 1.2rem; border-radius: 30px; font-weight: 900; width:100%; cursor: pointer;}

[data-style="bento"] { background: #f5f5f7; }
[data-style="bento"] .ui-preview-card, [data-style="bento"] .mock-card, [data-style="bento"] .mock-nav, [data-style="bento"] .mock-hero { background: transparent; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 400px; border: none; box-shadow: none; }
[data-style="bento"] .ui-card-header { grid-column: 1 / -1; background: #fff; padding: 2rem; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
[data-style="bento"] .ui-card-body { background: #fff; padding: 1.5rem; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
[data-style="bento"] .ui-card-footer { background: #000; padding: 1.5rem; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
[data-style="bento"] .ui-cta-btn, [data-style="bento"] .mock-btn { background: transparent; color: #fff; border: none; font-weight: 600; width:100%; cursor: pointer;}

[data-style="skeuomorphism"] { background: url('https://www.transparenttextures.com/patterns/wood-pattern.png') #d5b98a; }
[data-style="skeuomorphism"] .ui-preview-card, [data-style="skeuomorphism"] .mock-card, [data-style="skeuomorphism"] .mock-nav, [data-style="skeuomorphism"] .mock-hero { background: linear-gradient(to bottom, #f9f9f9, #e0e0e0); border: 1px solid #ccc; box-shadow: inset 0 1px 0 #fff, 0 5px 15px rgba(0,0,0,0.5); padding: 2.5rem; border-radius: 10px; text-shadow: 0 1px 0 #fff; color: #333; }
[data-style="skeuomorphism"] .ui-cta-btn, [data-style="skeuomorphism"] .mock-btn { background: linear-gradient(to bottom, #8fcf00, #6b9c00); border: 1px solid #4a6b00; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.4); border-radius: 6px; padding: 1rem; width:100%; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); font-weight: bold; cursor: pointer;}

[data-style="aurora"] { background: #000; }
[data-style="aurora"] .ui-preview-card, [data-style="aurora"] .mock-card, [data-style="aurora"] .mock-nav, [data-style="aurora"] .mock-hero { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(20px); border-radius: 24px; padding: 2.5rem; color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2); position: relative; overflow: hidden; }
[data-style="aurora"] .ui-preview-card, [data-style="aurora"] .mock-card, [data-style="aurora"] .mock-nav, [data-style="aurora"] .mock-hero::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(circle at 50% 50%, rgba(131,58,180,0.4) 0%, rgba(253,29,29,0.4) 50%, rgba(252,176,69,0.4) 100%); filter: blur(60px); z-index: -1; animation: rotate 10s linear infinite; }
@keyframes rotate { 100% { transform: rotate(360deg); } }
[data-style="aurora"] .ui-cta-btn, [data-style="aurora"] .mock-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 1rem; border-radius: 12px; width:100%; font-weight: 600; cursor: pointer; }

[data-style="spatial"] { background: #111; perspective: 1200px; }
[data-style="spatial"] .ui-preview-card, [data-style="spatial"] .mock-card, [data-style="spatial"] .mock-nav, [data-style="spatial"] .mock-hero { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 2.5rem; border-radius: 30px; color: #fff; transform: rotateY(-15deg) translateZ(50px); box-shadow: -20px 20px 50px rgba(0,0,0,0.5); transform-style: preserve-3d; }
[data-style="spatial"] .ui-cta-btn, [data-style="spatial"] .mock-btn { background: #fff; color: #000; padding: 1rem; border-radius: 20px; width: 100%; font-weight: 600; border: none; transform: translateZ(30px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }



/* =========================================
   21. AMORPHIC / FLUID UI
========================================= */
[data-style="amorphic"] { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
[data-style="amorphic"] .ui-preview-card, [data-style="amorphic"] .mock-card, [data-style="amorphic"] .mock-nav, [data-style="amorphic"] .mock-hero { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; box-shadow: 0 8px 32px rgba(31,38,135,0.1); border: 1px solid rgba(255,255,255,0.4); padding: 3rem; }
[data-style="amorphic"] .ui-cta-btn, [data-style="amorphic"] .mock-btn { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; padding: 1.2rem 2.5rem; background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); border: none; color: #fff; font-weight: bold; cursor: pointer; transition: border-radius 0.3s ease; }
[data-style="amorphic"] .ui-cta-btn:hover, [data-style="amorphic"] .mock-btn:hover { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
[data-style="amorphic"] .ui-badge, [data-style="amorphic"] .mock-badge { background: #a1c4fd; color: #fff; border-radius: 20px; padding: 5px 15px; border: none; }

/* =========================================
   22. BIOPHILIC / ECO UI
========================================= */
[data-style="biophilic"] { background: #e8ecd7; }
[data-style="biophilic"] .ui-preview-card, [data-style="biophilic"] .mock-card, [data-style="biophilic"] .mock-nav, [data-style="biophilic"] .mock-hero { background: #fdfbf7; border-radius: 24px; box-shadow: 0 12px 24px rgba(67, 83, 52, 0.08); padding: 2.5rem; color: #435334; border: 1px solid #c8d5b9; }
[data-style="biophilic"] .ui-cta-btn, [data-style="biophilic"] .mock-btn { background: #435334; color: #fdfbf7; border-radius: 30px; border: none; padding: 1rem 2rem; font-weight: 600; cursor: pointer; }
[data-style="biophilic"] .ui-badge, [data-style="biophilic"] .mock-badge { background: #9eb23b; color: #fff; border-radius: 12px; padding: 4px 12px; }
[data-style="biophilic"] .ui-card-title, [data-style="biophilic"] .mock-headline, [data-style="biophilic"] .mock-card-content h4 { color: #2e3a23; }

/* =========================================
   23. CARD-BASED UI
========================================= */
[data-style="card-based"] { background: #e1e8ed; }
[data-style="card-based"] .ui-preview-card, [data-style="card-based"] .mock-card, [data-style="card-based"] .mock-nav, [data-style="card-based"] .mock-hero { background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); padding: 1.5rem; border: none; }
[data-style="card-based"] .ui-cta-btn, [data-style="card-based"] .mock-btn { background: #1da1f2; color: #fff; border-radius: 9999px; border: none; padding: 0.8rem 1.5rem; font-weight: bold; cursor: pointer; }
[data-style="card-based"] .ui-badge, [data-style="card-based"] .mock-badge { background: #17bf63; color: #fff; border-radius: 4px; padding: 4px 8px; }

/* =========================================
   24. COLLAGE / SCRAPBOOK UI
========================================= */
[data-style="collage"] { background: url('https://www.transparenttextures.com/patterns/cream-paper.png') #f4ecd8; }
[data-style="collage"] .ui-preview-card, [data-style="collage"] .mock-card, [data-style="collage"] .mock-nav, [data-style="collage"] .mock-hero { background: #fff; border: 2px dashed #a08a75; padding: 2.5rem; transform: rotate(-1deg); box-shadow: 5px 5px 15px rgba(0,0,0,0.1); position: relative; }
[data-style="collage"] .ui-preview-card::before, [data-style="collage"] .mock-card::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(2deg); width: 100px; height: 25px; background: rgba(230, 225, 210, 0.8); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
[data-style="collage"] .ui-cta-btn, [data-style="collage"] .mock-btn { background: #d94a38; color: #fff; border: 2px solid #333; padding: 1rem; font-family: 'Courier New', monospace; font-weight: bold; transform: rotate(2deg); box-shadow: 3px 3px 0 #333; cursor: pointer; }
[data-style="collage"] .ui-badge, [data-style="collage"] .mock-badge { background: #ffd166; color: #000; padding: 5px 10px; font-family: 'Courier New', monospace; transform: rotate(-3deg); display: inline-block; box-shadow: 2px 2px 0 #000; border: 1px solid #000; }

/* =========================================
   25. DOODLE / HAND-DRAWN UI
========================================= */
[data-style="doodle"] { background: #fff; }
[data-style="doodle"] .ui-preview-card, [data-style="doodle"] .mock-card, [data-style="doodle"] .mock-nav, [data-style="doodle"] .mock-hero { background: #fff; border: 3px solid #111; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; padding: 2.5rem; font-family: 'Comic Sans MS', 'Comic Neue', cursive; box-shadow: 5px 5px 0 #111; }
[data-style="doodle"] .ui-cta-btn, [data-style="doodle"] .mock-btn { background: #fff; color: #111; border: 3px solid #111; border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; padding: 1rem; font-weight: bold; font-family: inherit; box-shadow: 3px 3px 0 #111; cursor: pointer; }
[data-style="doodle"] .ui-badge, [data-style="doodle"] .mock-badge { background: #111; color: #fff; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; padding: 6px 12px; display: inline-block; }

/* =========================================
   26. GLITCH ART / DATAMOSHING
========================================= */
[data-style="glitch"] { background: #000; }
[data-style="glitch"] .ui-preview-card, [data-style="glitch"] .mock-card, [data-style="glitch"] .mock-nav, [data-style="glitch"] .mock-hero { background: #111; border: 1px solid #333; padding: 2.5rem; color: #fff; position: relative; font-family: monospace; }
[data-style="glitch"] .ui-card-title, [data-style="glitch"] .mock-headline, [data-style="glitch"] .mock-card-content h4 { position: relative; display: inline-block; }
[data-style="glitch"] .ui-card-title::before, [data-style="glitch"] .mock-headline::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 2px 0 red; top: 0; color: #fff; background: #111; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch 2s infinite linear alternate-reverse; }
[data-style="glitch"] .ui-card-title::after, [data-style="glitch"] .mock-headline::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -2px 0 blue; top: 0; color: #fff; background: #111; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch 3s infinite linear alternate-reverse; }
@keyframes glitch { 0% { clip: rect(14px, 9999px, 86px, 0); } 10% { clip: rect(78px, 9999px, 8px, 0); } 20% { clip: rect(4px, 9999px, 58px, 0); } 30% { clip: rect(96px, 9999px, 32px, 0); } 40% { clip: rect(63px, 9999px, 7px, 0); } 50% { clip: rect(2px, 9999px, 52px, 0); } 60% { clip: rect(29px, 9999px, 14px, 0); } 70% { clip: rect(81px, 9999px, 92px, 0); } 80% { clip: rect(33px, 9999px, 11px, 0); } 90% { clip: rect(66px, 9999px, 42px, 0); } 100% { clip: rect(10px, 9999px, 74px, 0); } }
[data-style="glitch"] .ui-cta-btn, [data-style="glitch"] .mock-btn { background: #00ff00; color: #000; border: none; padding: 1rem; font-weight: bold; cursor: pointer; text-transform: uppercase; }
[data-style="glitch"] .ui-badge, [data-style="glitch"] .mock-badge { background: red; color: #fff; padding: 2px 8px; border: 1px solid #fff; }

/* =========================================
   27. HOLOGRAPHIC / IRIDESCENT UI
========================================= */
[data-style="holographic"] { background: #0f0c29; }
[data-style="holographic"] .ui-preview-card, [data-style="holographic"] .mock-card, [data-style="holographic"] .mock-nav, [data-style="holographic"] .mock-hero { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); padding: 2.5rem; color: #fff; position: relative; overflow: hidden; }
[data-style="holographic"] .ui-preview-card::after, [data-style="holographic"] .mock-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,0,150,0.2), rgba(0,255,255,0.2), transparent); transform: rotate(45deg); pointer-events: none; }
[data-style="holographic"] .ui-cta-btn, [data-style="holographic"] .mock-btn { background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #333; border: none; border-radius: 30px; padding: 1rem; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(255,154,158,0.4); }
[data-style="holographic"] .ui-badge, [data-style="holographic"] .mock-badge { background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); color: #000; border-radius: 20px; padding: 4px 12px; }

/* =========================================
   28. MAXIMALISM
========================================= */
[data-style="maximalism"] { background: repeating-linear-gradient(45deg, #ff00ff, #ff00ff 20px, #00ffff 20px, #00ffff 40px); }
[data-style="maximalism"] .ui-preview-card, [data-style="maximalism"] .mock-card, [data-style="maximalism"] .mock-nav, [data-style="maximalism"] .mock-hero { background: #ffff00; padding: 3rem; border: 8px solid #ff0000; border-radius: 40px; color: #0000ff; box-shadow: 20px 20px 0 #000; transform: rotate(2deg); font-family: 'Impact', sans-serif; }
[data-style="maximalism"] .ui-cta-btn, [data-style="maximalism"] .mock-btn { background: #ff0000; color: #ffff00; border: 4px dashed #0000ff; padding: 1.5rem; font-size: 1.5rem; text-transform: uppercase; cursor: pointer; box-shadow: 10px 10px 0 #000; transform: rotate(-2deg); }
[data-style="maximalism"] .ui-badge, [data-style="maximalism"] .mock-badge { background: #0000ff; color: #fff; font-size: 1.2rem; padding: 10px; border: 3px dotted #fff; display: inline-block; transform: rotate(-5deg); }
[data-style="maximalism"] .ui-card-title, [data-style="maximalism"] .mock-headline, [data-style="maximalism"] .mock-card-content h4 { font-size: 3rem; text-transform: uppercase; text-shadow: 4px 4px 0 #ff00ff; color: #fff; }

/* =========================================
   29. MEMPHIS DESIGN
========================================= */
[data-style="memphis"] { background: url('https://www.transparenttextures.com/patterns/dot-noise.png') #fce205; }
[data-style="memphis"] .ui-preview-card, [data-style="memphis"] .mock-card, [data-style="memphis"] .mock-nav, [data-style="memphis"] .mock-hero { background: #fff; border: 5px solid #000; padding: 2.5rem; border-radius: 0; box-shadow: 10px 10px 0 #ff007f; position: relative; }
[data-style="memphis"] .ui-preview-card::after, [data-style="memphis"] .mock-card::after { content: ''; position: absolute; top: -20px; right: -20px; width: 40px; height: 40px; background: #00e5ff; border: 5px solid #000; border-radius: 50%; }
[data-style="memphis"] .ui-cta-btn, [data-style="memphis"] .mock-btn { background: #00e5ff; color: #000; border: 5px solid #000; border-radius: 50px; padding: 1rem; font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 5px 5px 0 #000; }
[data-style="memphis"] .ui-badge, [data-style="memphis"] .mock-badge { background: #ff007f; color: #fff; border: 3px solid #000; padding: 5px 15px; font-weight: bold; border-radius: 0; transform: rotate(-3deg); }

/* =========================================
   30. MONOCHROME / GREYSCALE UI
========================================= */
[data-style="monochrome"] { background: #e5e5e5; }
[data-style="monochrome"] .ui-preview-card, [data-style="monochrome"] .mock-card, [data-style="monochrome"] .mock-nav, [data-style="monochrome"] .mock-hero { background: #ffffff; border: 1px solid #d4d4d4; padding: 3rem; color: #111111; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-radius: 4px; }
[data-style="monochrome"] .ui-cta-btn, [data-style="monochrome"] .mock-btn { background: #111111; color: #ffffff; border: none; padding: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-radius: 2px; }
[data-style="monochrome"] .ui-badge, [data-style="monochrome"] .mock-badge { background: #f0f0f0; color: #555555; border: 1px solid #e0e0e0; padding: 4px 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; }

/* =========================================
   31. RETRO-FUTURISM
========================================= */
[data-style="retro-futurism"] { background: #1b262c; }
[data-style="retro-futurism"] .ui-preview-card, [data-style="retro-futurism"] .mock-card, [data-style="retro-futurism"] .mock-nav, [data-style="retro-futurism"] .mock-hero { background: #0f4c75; border: 2px solid #3282b8; padding: 2.5rem; border-radius: 20px 0 20px 0; color: #bbe1fa; box-shadow: 0 0 20px rgba(50, 130, 184, 0.5); font-family: 'Trebuchet MS', sans-serif; }
[data-style="retro-futurism"] .ui-cta-btn, [data-style="retro-futurism"] .mock-btn { background: #3282b8; color: #1b262c; border: 2px solid #bbe1fa; padding: 1rem; font-weight: bold; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; border-radius: 10px 0 10px 0; box-shadow: inset 0 0 10px rgba(187, 225, 250, 0.5); }
[data-style="retro-futurism"] .ui-badge, [data-style="retro-futurism"] .mock-badge { background: #bbe1fa; color: #0f4c75; padding: 2px 10px; border-radius: 10px; font-weight: bold; }

/* =========================================
   32. RICH DESIGN
========================================= */
[data-style="rich-design"] { background: #dce0e5; }
[data-style="rich-design"] .ui-preview-card, [data-style="rich-design"] .mock-card, [data-style="rich-design"] .mock-nav, [data-style="rich-design"] .mock-hero { background: linear-gradient(to bottom, #ffffff, #f0f0f0); border: 1px solid #ccc; padding: 2.5rem; border-radius: 12px; color: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; }
[data-style="rich-design"] .ui-cta-btn, [data-style="rich-design"] .mock-btn { background: linear-gradient(to bottom, #4cb8c4, #3cd3ad); border: 1px solid #2b9379; color: #fff; padding: 1rem; border-radius: 6px; font-weight: bold; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.2); text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
[data-style="rich-design"] .ui-badge, [data-style="rich-design"] .mock-badge { background: linear-gradient(to bottom, #f3904f, #3b4371); color: #fff; padding: 4px 10px; border-radius: 12px; border: 1px solid #2b3252; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }

/* =========================================
   33. SKEUOMINIMALISM
========================================= */
[data-style="skeuominimalism"] { background: #f0f2f5; }
[data-style="skeuominimalism"] .ui-preview-card, [data-style="skeuominimalism"] .mock-card, [data-style="skeuominimalism"] .mock-nav, [data-style="skeuominimalism"] .mock-hero { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); padding: 2.5rem; border-radius: 30px; color: #1c1e21; box-shadow: 0 8px 32px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,1); }
[data-style="skeuominimalism"] .ui-cta-btn, [data-style="skeuominimalism"] .mock-btn { background: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%); color: #0056d2; border: 1px solid #d0d5dd; padding: 1rem; border-radius: 20px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.05), inset 0 2px 0 rgba(255,255,255,1); }
[data-style="skeuominimalism"] .ui-badge, [data-style="skeuominimalism"] .mock-badge { background: linear-gradient(180deg, #ff416c 0%, #ff4b2b 100%); color: #fff; padding: 4px 12px; border-radius: 15px; border: none; box-shadow: 0 4px 10px rgba(255,65,108,0.3), inset 0 2px 0 rgba(255,255,255,0.3); text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* =========================================
   34. STEAMPUNK UI
========================================= */
[data-style="steampunk"] { background: #2b1d14; }
[data-style="steampunk"] .ui-preview-card, [data-style="steampunk"] .mock-card, [data-style="steampunk"] .mock-nav, [data-style="steampunk"] .mock-hero { background: url('https://www.transparenttextures.com/patterns/wood-pattern.png') #5c4033; border: 8px solid #b5a642; border-radius: 10px; padding: 2.5rem; color: #f5deb3; font-family: 'Times New Roman', serif; box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.9); }
[data-style="steampunk"] .ui-cta-btn, [data-style="steampunk"] .mock-btn { background: linear-gradient(to bottom, #b5a642, #8b792b); color: #2b1d14; border: 2px solid #5c4033; padding: 1rem; border-radius: 50px; font-weight: bold; cursor: pointer; text-transform: uppercase; box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), 0 5px 10px rgba(0,0,0,0.7); }
[data-style="steampunk"] .ui-badge, [data-style="steampunk"] .mock-badge { background: #8b4513; color: #f5deb3; padding: 4px 10px; border: 2px solid #b5a642; border-radius: 4px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }

/* =========================================
   35. SWISS DESIGN
========================================= */
[data-style="swiss"] { background: #ff0000; }
[data-style="swiss"] .ui-preview-card, [data-style="swiss"] .mock-card, [data-style="swiss"] .mock-nav, [data-style="swiss"] .mock-hero { background: #ffffff; border: none; padding: 3rem 4rem; color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-radius: 0; display: flex; flex-direction: column; text-align: left; }
[data-style="swiss"] .ui-cta-btn, [data-style="swiss"] .mock-btn { background: #000000; color: #ffffff; border: none; padding: 1.5rem; font-size: 1.2rem; font-weight: bold; cursor: pointer; border-radius: 0; align-self: flex-start; margin-top: 2rem; }
[data-style="swiss"] .ui-badge, [data-style="swiss"] .mock-badge { background: transparent; color: #ff0000; border: 2px solid #ff0000; padding: 4px 8px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; border-radius: 0; }
[data-style="swiss"] .ui-card-title, [data-style="swiss"] .mock-headline, [data-style="swiss"] .mock-card-content h4 { font-size: 2.5rem; font-weight: 700; letter-spacing: -1px; margin-bottom: 0; }
[data-style="swiss"] .ui-price, [data-style="swiss"] .mock-subhead, [data-style="swiss"] .mock-card-content p { font-size: 2rem; font-weight: 400; border-bottom: 4px solid #000; padding-bottom: 1rem; margin-bottom: 1rem; }

/* =========================================
   36. TYPOGRAPHIC UI
========================================= */
[data-style="typographic"] { background: #0a0a0a; }
[data-style="typographic"] .ui-preview-card, [data-style="typographic"] .mock-card, [data-style="typographic"] .mock-nav, [data-style="typographic"] .mock-hero { background: transparent; border: none; padding: 0; color: #ffffff; box-shadow: none; font-family: 'Inter', sans-serif; }
[data-style="typographic"] .ui-card-title, [data-style="typographic"] .mock-headline, [data-style="typographic"] .mock-card-content h4 { font-size: 5rem; font-weight: 900; line-height: 0.9; letter-spacing: -3px; margin: 0 0 1rem 0; text-transform: lowercase; }
[data-style="typographic"] .ui-price, [data-style="typographic"] .mock-subhead, [data-style="typographic"] .mock-card-content p { font-size: 3rem; font-weight: 300; letter-spacing: -1px; margin: 0; }
[data-style="typographic"] .ui-features li { border: none; font-size: 1.5rem; font-weight: 300; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1rem 0; }
[data-style="typographic"] .ui-cta-btn, [data-style="typographic"] .mock-btn { background: transparent; color: #ffffff; border: none; border-bottom: 4px solid #fff; padding: 0.5rem 0; font-size: 2rem; font-weight: 700; cursor: pointer; text-align: left; }
[data-style="typographic"] .ui-badge, [data-style="typographic"] .mock-badge { display: none; }

/* =========================================
   37. VAPORWAVE
========================================= */
[data-style="vaporwave"] { background: linear-gradient(to bottom, #ff71ce, #01cdfe, #05ffa1); }
[data-style="vaporwave"] .ui-preview-card, [data-style="vaporwave"] .mock-card, [data-style="vaporwave"] .mock-nav, [data-style="vaporwave"] .mock-hero { background: rgba(255, 255, 255, 0.8); border: 2px solid #b967ff; padding: 2.5rem; border-radius: 0; color: #b967ff; font-family: 'Times New Roman', Times, serif; box-shadow: 10px 10px 0 #01cdfe; }
[data-style="vaporwave"] .ui-cta-btn, [data-style="vaporwave"] .mock-btn { background: #fffb96; color: #ff71ce; border: 2px solid #ff71ce; padding: 1rem; font-family: 'Courier New', Courier, monospace; font-weight: bold; cursor: pointer; box-shadow: 5px 5px 0 #05ffa1; text-transform: uppercase; }
[data-style="vaporwave"] .ui-badge, [data-style="vaporwave"] .mock-badge { background: #b967ff; color: #fff; padding: 4px 12px; font-family: 'Courier New', Courier, monospace; border: 1px solid #000; box-shadow: 2px 2px 0 #000; }
[data-style="vaporwave"] .ui-card-title, [data-style="vaporwave"] .mock-headline, [data-style="vaporwave"] .mock-card-content h4 { text-shadow: 2px 2px 0 #01cdfe; letter-spacing: 2px; }

/* =========================================
   38. WEB3 / CRYPTO AESTHETIC
========================================= */
[data-style="web3"] { background: #05051a; }
[data-style="web3"] .ui-preview-card, [data-style="web3"] .mock-card, [data-style="web3"] .mock-nav, [data-style="web3"] .mock-hero { background: linear-gradient(145deg, rgba(30,30,50,0.8) 0%, rgba(10,10,20,0.9) 100%); border: 1px solid rgba(138, 43, 226, 0.5); padding: 2.5rem; border-radius: 24px; color: #fff; box-shadow: 0 0 40px rgba(138, 43, 226, 0.2); backdrop-filter: blur(10px); }
[data-style="web3"] .ui-cta-btn, [data-style="web3"] .mock-btn { background: linear-gradient(90deg, #8a2be2 0%, #4b0082 100%); color: #fff; border: 1px solid #9370db; padding: 1rem; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 0 15px rgba(138, 43, 226, 0.6); transition: all 0.3s; }
[data-style="web3"] .ui-badge, [data-style="web3"] .mock-badge { background: rgba(0, 255, 255, 0.1); color: #00ffff; border: 1px solid #00ffff; padding: 4px 10px; border-radius: 8px; font-size: 0.8rem; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); }

/* =========================================
   39. WIREFRAME / BLUEPRINT UI
========================================= */
[data-style="wireframe"] { background: #003366 url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23004488" stroke-width="1"/></svg>'); }
[data-style="wireframe"] .ui-preview-card, [data-style="wireframe"] .mock-card, [data-style="wireframe"] .mock-nav, [data-style="wireframe"] .mock-hero { background: transparent; border: 2px dashed #3399ff; padding: 2.5rem; border-radius: 0; color: #3399ff; box-shadow: none; font-family: monospace; }
[data-style="wireframe"] .ui-cta-btn, [data-style="wireframe"] .mock-btn { background: transparent; color: #3399ff; border: 2px solid #3399ff; padding: 1rem; font-weight: bold; font-family: monospace; cursor: pointer; position: relative; }
[data-style="wireframe"] .ui-cta-btn::before, [data-style="wireframe"] .mock-btn::before { content: 'x'; position: absolute; top: 2px; left: 4px; font-size: 0.6rem; }
[data-style="wireframe"] .ui-cta-btn::after, [data-style="wireframe"] .mock-btn::after { content: 'x'; position: absolute; bottom: 2px; right: 4px; font-size: 0.6rem; }
[data-style="wireframe"] .ui-badge, [data-style="wireframe"] .mock-badge { background: transparent; color: #3399ff; border: 1px solid #3399ff; padding: 2px 8px; display: inline-block; }