:root {
  --btn-gap: 0.75rem; /* Neumorphism buttons gap, matches Tailwind gap-3 */
}
/* Core neumorphism shadow styles */
.neu-flat {
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.neu-pressed {
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.7), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.8);
}
.neu-convex {
  background: linear-gradient(145deg, #f0f4f8, #cacfd4);
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.neu-concave {
  background: linear-gradient(145deg, #cacfd4, #f0f4f8);
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}

/* Neumorphism button interaction feedback */
.neu-button-active:active {
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.7), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.8);
  transform: scale(0.98);
}

body {
  background-color: #e0e5ec;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode / Concrete Brutalism Styles */
.dark body {
  background-color: #2a2a2a;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
  color: #888;
}

.dark .neu-convex, 
.dark .neu-concave,
.dark .neu-flat,
.dark .neu-pressed {
  box-shadow: none;
  background: none;
}

.dark .concrete-card {
  background: #2a2a2a;
  border-radius: 10px;
  box-shadow: 20px 20px 60px #1a1a1a, -20px -20px 60px #3a3a3a;
  border: none;
}

.dark .concrete-input {
  background: #2a2a2a;
  box-shadow: inset 8px 8px 16px #151515, inset -8px -8px 16px #3f3f3f;
  color: #888 !important;
  border: none;
  border-radius: 4px;
  letter-spacing: 2px;
}
.dark .concrete-input:focus {
  color: #d4af37 !important;
  box-shadow: inset 12px 12px 24px #0f0f0f, inset -12px -12px 24px #454545;
}

.dark .concrete-btn {
  background: #2a2a2a;
  color: #555;
  box-shadow: 12px 12px 24px #181818, -12px -12px 24px #3c3c3c;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.dark .concrete-btn:active {
  transform: translateY(2px);
  box-shadow: 4px 4px 8px #181818, -4px -4px 8px #3c3c3c;
}
.dark .concrete-btn::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.2) 2px, transparent 3px);
  background-size: 20px 20px;
  opacity: 0.3;
}

.dark .concrete-text {
    font-family: 'Black Ops One', cursive;
    letter-spacing: 1px;
}

/* Smooth transitions for interactive components */
.concrete-card, .concrete-input, .concrete-btn, article, input, button {
    transition: all 0.3s ease;
}

/* Alpine.js x-cloak: 隐藏未初始化的元素 */
[x-cloak] { display: none !important; }

/* Hide scrollbar but allow scrolling */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mask for horizontal scroll */
.scroll-mask {
  position: relative;
}
.scroll-mask::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, #e0e5ec);
  pointer-events: none;
  transition: opacity 0.3s;
}
.dark .scroll-mask::after {
  background: linear-gradient(to right, transparent, #2a2a2a);
}

/* Custom Dropdown Styles */
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 1rem;
}
.dark .dropdown-list {
  border-radius: 4px;
  box-shadow: 10px 10px 30px #1a1a1a, -10px -10px 30px #3a3a3a;
}

/* --- Specific Art Styles --- */

/* 1. Comics */
.card-style-comics {
    background: #ffffff !important;
    border: 4px solid #000 !important;
    box-shadow: 8px 8px 0 #000 !important;
    border-radius: 12px !important;
    font-family: 'Comic Neue', cursive !important;
}
.card-style-comics h2, .card-style-comics p {
    font-family: 'Comic Neue', cursive !important;
    color: #000 !important;
}
.card-style-comics button, .card-style-comics a {
    background: #fff !important;
    border: 2px solid #000 !important;
    box-shadow: 4px 4px 0 #000 !important;
    color: #000 !important;
    border-radius: 8px !important;
    font-family: 'Comic Neue', cursive !important;
    font-weight: bold !important;
}
.card-style-comics button:active, .card-style-comics a:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* 2. Ancient Chinese */
.card-style-ancient {
    background: #fdf6e3 !important;
    border: 1px solid #8b4513 !important;
    box-shadow: 0 4px 8px rgba(139, 69, 19, 0.2) !important;
    border-radius: 4px !important;
    font-family: 'Noto Serif SC', serif !important;
}
.card-style-ancient h2 {
    color: #8b4513 !important;
    font-weight: bold !important;
}
.card-style-ancient button, .card-style-ancient a {
    background: transparent !important;
    border: 1px solid #8b4513 !important;
    color: #8b4513 !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}
.card-style-ancient button:hover, .card-style-ancient a:hover {
    background: rgba(139, 69, 19, 0.1) !important;
}
.card-style-ancient button:active, .card-style-ancient a:active {
    transform: scale(0.98);
}

/* 3. Pop Art */
.card-style-popart {
    background: #fff000 !important;
    background-image: radial-gradient(#000 20%, transparent 20%) !important;
    background-size: 10px 10px !important;
    border: 4px solid #000 !important;
    box-shadow: 8px 8px 0 #ff00ff !important;
    border-radius: 0 !important;
    font-family: 'Bangers', cursive !important;
}
.card-style-popart h2 {
    background: #fff !important;
    padding: 2px 5px;
    border: 2px solid #000;
    display: inline-block;
    color: #000 !important;
}
.card-style-popart button, .card-style-popart a {
    background: #00ffff !important;
    border: 3px solid #000 !important;
    color: #000 !important;
    box-shadow: 4px 4px 0 #000 !important;
    border-radius: 30px !important;
    font-weight: bold !important;
}
.card-style-popart button:active, .card-style-popart a:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000 !important;
}

/* 4. Abstract Expressionism */
.card-style-abstract {
    background: #f0f0f0 !important;
    border: 2px dashed #333 !important;
    border-radius: 20px 5px 15px 30px !important;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1) !important;
    font-family: 'Caveat', cursive !important;
}
.card-style-abstract button, .card-style-abstract a {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transform: rotate(-2deg);
    color: #333 !important;
}
.card-style-abstract button:active, .card-style-abstract a:active {
    transform: rotate(-2deg) scale(0.95);
}

/* 5. Corporate Memphis */
.card-style-memphis {
    background: #e0e7ff !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
}
.card-style-memphis h2 {
    color: #1e1b4b !important;
}
.card-style-memphis button, .card-style-memphis a {
    background: #4f46e5 !important;
    color: #fff !important;
    border-radius: 50px !important;
    box-shadow: none !important;
}
.card-style-memphis button:active, .card-style-memphis a:active {
    transform: scale(0.95);
}

/* 6. Surrealism */
.card-style-surrealism {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
    border-radius: 20px !important;
    font-family: 'Cinzel', serif !important;
}
.card-style-surrealism button, .card-style-surrealism a {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #333 !important;
    box-shadow: none !important;
}
.card-style-surrealism button:active, .card-style-surrealism a:active {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* 7. Conceptual Art */
.card-style-conceptual {
    background: #fff !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
}
.card-style-conceptual h2 {
    font-weight: normal !important;
    text-transform: lowercase;
}
.card-style-conceptual button, .card-style-conceptual a {
    background: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: underline;
}
.card-style-conceptual button:active, .card-style-conceptual a:active {
    background: #eee !important;
}

/* 8. Neo-Brutalist */
.card-style-neobrutalism {
    background: #ff6b6b !important;
    border: 3px solid #000 !important;
    box-shadow: 5px 5px 0 #000 !important;
    border-radius: 0 !important;
    font-family: 'Space Mono', monospace !important;
}
.card-style-neobrutalism h2 {
    text-transform: uppercase;
    font-weight: 900 !important;
    color: #000 !important;
}
.card-style-neobrutalism button, .card-style-neobrutalism a {
    background: #fff !important;
    border: 3px solid #000 !important;
    color: #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
    border-radius: 0 !important;
}
.card-style-neobrutalism button:hover, .card-style-neobrutalism a:hover {
    box-shadow: 5px 5px 0 #000 !important;
    transform: translate(-2px, -2px);
}
.card-style-neobrutalism button:active, .card-style-neobrutalism a:active {
    box-shadow: 0 0 0 #000 !important;
    transform: translate(3px, 3px);
}

/* 9. Cyberpunk */
.card-style-cyberpunk {
    background: #0b0b0b !important;
    border: 1px solid #0ff !important;
    box-shadow: 0 0 10px #0ff, inset 0 0 20px rgba(0,255,255,0.1) !important;
    border-radius: 0 !important;
    font-family: 'Orbitron', sans-serif !important;
}
.card-style-cyberpunk h2 {
    color: #0ff !important;
    text-shadow: 0 0 5px #0ff;
    letter-spacing: 2px;
}
.card-style-cyberpunk p {
    color: #ddd !important;
}
.card-style-cyberpunk button, .card-style-cyberpunk a {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #f0f !important;
    color: #f0f !important;
    border-radius: 0 !important;
    box-shadow: 0 0 5px #f0f !important;
    text-transform: uppercase;
}
.card-style-cyberpunk button:hover, .card-style-cyberpunk a:hover {
    background: #f0f !important;
    color: #000 !important;
}
.card-style-cyberpunk button:active, .card-style-cyberpunk a:active {
    transform: scale(0.95);
    box-shadow: 0 0 15px #f0f !important;
}

/* 10. Vaporwave */
.card-style-vaporwave {
    background: linear-gradient(180deg, #ff71ce, #01cdfe) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 5px 5px 15px rgba(255, 113, 206, 0.5) !important;
    font-family: 'Audiowide', cursive !important;
}
.card-style-vaporwave h2 {
    color: #fff !important;
    text-shadow: 2px 2px #000;
}
.card-style-vaporwave p {
    color: #fff !important;
    text-shadow: 1px 1px #000;
}
.card-style-vaporwave button, .card-style-vaporwave a {
    background: rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(5px);
    border: 1px solid #fff !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2) !important;
}
.card-style-vaporwave button:active, .card-style-vaporwave a:active {
    background: rgba(255,255,255,0.4) !important;
    transform: translateY(2px);
}

/* 11. Bauhaus */
.card-style-bauhaus {
    background: #f4f4f4 !important;
    border-left: 10px solid #d0202a !important;
    border-right: 10px solid #005096 !important;
    border-top: none !important;
    border-bottom: 10px solid #f9d824 !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1) !important;
    font-family: 'Geo', sans-serif !important;
}
.card-style-bauhaus h2 {
    color: #111 !important;
    text-transform: uppercase;
    font-weight: bold;
}
.card-style-bauhaus button, .card-style-bauhaus a {
    background: #111 !important;
    color: #fff !important;
    border-radius: 50% !important; /* Circle buttons */
    width: 48px !important; 
    border-radius: 20px !important; 
    border: none !important;
}
.card-style-bauhaus a {
     border-radius: 4px !important; 
     background: #d0202a !important;
}
.card-style-bauhaus button:active, .card-style-bauhaus a:active {
    transform: scale(0.9);
}

/* 12. Pixel Art */
.card-style-pixel {
    background: #fff !important;
    border: 4px solid #000 !important;
    box-shadow: 
        4px 0 0 -2px #000, 
        -4px 0 0 -2px #000, 
        0 -4px 0 -2px #000, 
        0 4px 0 -2px #000, 
        0 0 0 4px #000 !important; 
    border-radius: 0 !important;
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.8rem !important;
}
.card-style-pixel h2 {
    color: #000 !important;
    line-height: 1.5 !important;
}
.card-style-pixel button, .card-style-pixel a {
    background: #ccc !important;
    border: 2px solid #000 !important;
    color: #000 !important;
    box-shadow: inset -2px -2px 0 #888 !important;
    border-radius: 0 !important;
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.6rem !important;
}
.card-style-pixel button:active, .card-style-pixel a:active {
    background: #bbb !important;
    box-shadow: inset 2px 2px 0 #888 !important;
    transform: translate(2px, 2px);
}

/* 13. Glitch */
.card-style-glitch {
    background: #1a1a1a !important;
    border: 1px solid #fff !important;
    box-shadow: -2px 0 0 #f00, 2px 0 0 #0ff !important;
    border-radius: 0 !important;
    font-family: 'Rubik Glitch', cursive !important;
}
.card-style-glitch h2 {
    color: #fff !important;
    text-shadow: 2px 0 #f00, -2px 0 #0ff;
}
.card-style-glitch p {
    font-family: 'Courier New', monospace !important;
    color: #aaa !important;
}
.card-style-glitch button, .card-style-glitch a {
    background: #000 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.card-style-glitch button:hover {
    background: #fff !important;
    color: #000 !important;
    animation: glitch-anim 0.3s infinite;
}
.card-style-glitch button:active {
    transform: scale(0.95);
}

/* 14. Art Deco */
.card-style-artdeco {
    background: #111 !important;
    border: 2px solid #d4af37 !important;
    outline: 2px solid #111;
    outline-offset: -5px;
    box-shadow: 0 0 10px #000 !important;
    border-radius: 4px !important;
    font-family: 'Limelight', cursive !important;
}
.card-style-artdeco h2 {
    color: #d4af37 !important;
    letter-spacing: 1px;
}
.card-style-artdeco p {
    color: #ccc !important;
    font-family: 'Century Gothic', sans-serif !important;
}
.card-style-artdeco button, .card-style-artdeco a {
    background: transparent !important;
    border: 1px solid #d4af37 !important;
    color: #d4af37 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.card-style-artdeco button:hover, .card-style-artdeco a:hover {
    background: #d4af37 !important;
    color: #000 !important;
}
.card-style-artdeco button:active {
    transform: scale(0.95);
}

/* 15. Claymorphism */
.card-style-clay {
    background: #f4f4f4 !important;
    border-radius: 30px !important;
    box-shadow: 
        inset 10px 10px 20px rgba(255,255,255,1), 
        inset -10px -10px 20px rgba(0,0,0,0.1),
        10px 10px 20px rgba(0,0,0,0.1),
        -10px -10px 20px rgba(255,255,255,0.8) !important;
    border: none !important;
    font-family: 'Nunito', sans-serif !important;
}
.card-style-clay h2 {
    color: #555 !important;
    font-weight: 800;
}
.card-style-clay button, .card-style-clay a {
    background: #e0e0e0 !important;
    border-radius: 20px !important;
    box-shadow: 
        5px 5px 10px rgba(0,0,0,0.1), 
        -5px -5px 10px rgba(255,255,255,1) !important;
    color: #555 !important;
    border: none !important;
    font-weight: bold !important;
}
.card-style-clay button:active {
    box-shadow: 
        inset 5px 5px 10px rgba(0,0,0,0.1), 
        inset -5px -5px 10px rgba(255,255,255,1) !important;
    transform: scale(0.95);
}

/* 16. Glassmorphism */
.card-style-glass {
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-family: 'Quicksand', sans-serif !important;
}
.card-style-glass h2 {
    color: #2c3e50 !important;
    font-weight: 700;
}
.card-style-glass button, .card-style-glass a {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #2c3e50 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}
.card-style-glass button:active {
    background: rgba(255, 255, 255, 0.6) !important;
    transform: scale(0.95);
}

/* --- NEW 8 STYLES --- */

/* 17. Skeuomorphism */
.card-style-skeuomorphism {
    background: #d4d4d4 !important;
    background-image: linear-gradient(to bottom, #eaeaea, #d4d4d4) !important;
    border: 1px solid #aaa !important;
    border-radius: 8px !important;
    box-shadow: 
        inset 0 1px 0 #fff,
        0 2px 5px rgba(0,0,0,0.2) !important;
    font-family: 'Helvetica', sans-serif !important;
}
.card-style-skeuomorphism h2 {
    color: #333 !important;
    text-shadow: 0 1px 0 #fff;
}
.card-style-skeuomorphism button, .card-style-skeuomorphism a {
    background: linear-gradient(to bottom, #f9f9f9, #e0e0e0) !important;
    border: 1px solid #bbb !important;
    border-radius: 4px !important;
    color: #444 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    font-weight: bold !important;
}
.card-style-skeuomorphism button:active, .card-style-skeuomorphism a:active {
    background: linear-gradient(to bottom, #e0e0e0, #f9f9f9) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* 18. Material Evolved (Material 3) */
.card-style-material {
    background: #fffbfe !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; /* Elevation 1 */
    font-family: 'DM Sans', sans-serif !important;
}
.card-style-material h2 {
    color: #1c1b1f !important;
}
.card-style-material button, .card-style-material a {
    background: #e8def8 !important; /* Secondary Container */
    color: #1d192b !important; /* On Secondary Container */
    border-radius: 20px !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
.card-style-material button:hover, .card-style-material a:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.card-style-material button:active {
    background: #d0bcff !important;
}

/* 19. Brutalism */
.card-style-brutalism {
    background: #ccc !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Times New Roman', serif !important;
    padding: 20px !important;
}
.card-style-brutalism h2 {
    background: #00f !important;
    color: #fff !important;
    display: inline;
    padding: 0 5px;
}
.card-style-brutalism p {
    font-family: 'Arial', sans-serif !important;
    font-weight: bold;
    color: #000 !important;
}
.card-style-brutalism button, .card-style-brutalism a {
    background: #fff !important;
    border: 2px solid #000 !important;
    color: #000 !important;
    border-radius: 0 !important;
    text-decoration: underline;
    box-shadow: none !important;
}
.card-style-brutalism button:hover, .card-style-brutalism a:hover {
    background: #000 !important;
    color: #fff !important;
    text-decoration: none;
}

/* 20. Acid Graphics */
.card-style-acid {
    background: #000 !important;
    border: 1px solid #444 !important;
    border-radius: 40px !important;
    box-shadow: 0 0 20px rgba(0,255,0,0.2) !important;
    font-family: 'Unbounded', sans-serif !important;
}
.card-style-acid h2 {
    background: linear-gradient(90deg, #ff00cc, #3333ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-style: italic;
}
.card-style-acid button, .card-style-acid a {
    background: #111 !important;
    border: 1px solid #555 !important;
    color: #ccc !important;
    border-radius: 50px !important;
    box-shadow: none !important;
}
.card-style-acid button:hover, .card-style-acid a:hover {
    border-color: #fff !important;
    color: #fff !important;
}

/* 21. Holographic */
.card-style-holographic {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    font-family: 'Quicksand', sans-serif !important;
}
.card-style-holographic h2 {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.card-style-holographic button, .card-style-holographic a {
    background: rgba(255,255,255,0.4) !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}
.card-style-holographic button:hover {
    background: rgba(255,255,255,0.6) !important;
}

/* 22. Swiss Style */
.card-style-swiss {
    background: #f2f2f2 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Helvetica', 'Arial', sans-serif !important;
    box-shadow: none !important;
    border-top: 4px solid #ff3333 !important;
}
.card-style-swiss h2 {
    color: #000 !important;
    font-weight: 900 !important;
    letter-spacing: -1px;
}
.card-style-swiss button, .card-style-swiss a {
    background: transparent !important;
    border: 2px solid #000 !important;
    color: #000 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    box-shadow: none !important;
}
.card-style-swiss button:hover, .card-style-swiss a:hover {
    background: #000 !important;
    color: #fff !important;
}

/* 23. Retro Futurism */
.card-style-retro {
    background: #2b003b !important;
    background-image: 
        linear-gradient(rgba(255, 0, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 255, 0.2) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    border: 1px solid #ff00ff !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px #ff00ff !important;
    font-family: 'Righteous', cursive !important;
}
.card-style-retro h2 {
    color: #00ffff !important;
    text-shadow: 2px 2px #ff00ff;
}
.card-style-retro button, .card-style-retro a {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
    border-radius: 4px !important;
    box-shadow: 0 0 5px #00ffff !important;
}
.card-style-retro button:hover, .card-style-retro a:hover {
    background: #00ffff !important;
    color: #000 !important;
}

/* 24. Steampunk */
.card-style-steampunk {
    background: #2c241b !important;
    border: 4px double #cd7f32 !important; /* Bronze */
    border-radius: 10px !important;
    box-shadow: inset 0 0 20px #000 !important;
    font-family: 'Rye', serif !important;
}
.card-style-steampunk h2 {
    color: #cd7f32 !important;
    text-shadow: 1px 1px 0 #000;
}
.card-style-steampunk p {
    color: #d8c0a8 !important;
}
.card-style-steampunk button, .card-style-steampunk a {
    background: linear-gradient(to bottom, #8b5a2b, #5a3a1b) !important;
    border: 2px solid #cd7f32 !important;
    color: #ffdab9 !important;
    border-radius: 50% !important; /* Gears */
    width: 44px !important;
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px #000 !important;
}
.card-style-steampunk a {
    border-radius: 8px !important;
    width: auto !important;
    height: auto !important;
}
.card-style-steampunk button:active, .card-style-steampunk a:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 5px #000 !important;
}


/* --- End of Part 1 --- */