/* =========================================================
   BCL.SOCIAL — DESIGN STYLES ENGINE
   Controls visuals (Colors, Shadows, Borders, Radius, Animations)
   Compatible with: Light / Dark / E-ink
   ========================================================= */

/* =========================================================
   1. BENTO (Reference Style)
   Rounded, Friendly, Soft Shadows, Gradients
   ========================================================= */

html[data-design="bento"] {
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* --- Surfaces (Cards) --- */
html[data-design="bento"] .logo,
html[data-design="bento"] #themeBtn,
html[data-design="bento"] .social a,
html[data-design="bento"] .link-item,
html[data-design="bento"] .widget,
html[data-design="bento"] .button-card,
html[data-design="bento"] .cta-card,
html[data-design="bento"] .showcase-block,
html[data-design="bento"] .prom-card,
html[data-design="bento"] .featured-event,
html[data-design="bento"] .event-card,
html[data-design="bento"] .encurtador,
html[data-design="bento"] .toast {
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Specific Radius Overrides */
html[data-design="bento"] .logo, 
html[data-design="bento"] .link-item,
html[data-design="bento"] .featured-event { border-radius: var(--radius-xl); }
html[data-design="bento"] .widget,
html[data-design="bento"] .cta-card,
html[data-design="bento"] .showcase-block,
html[data-design="bento"] .prom-card,
html[data-design="bento"] .encurtador,
html[data-design="bento"] .button-card,
html[data-design="bento"] .event-card { border-radius: var(--radius-lg); }
html[data-design="bento"] #themeBtn,
html[data-design="bento"] .logo { border-radius: var(--radius-xl); } 
html[data-design="bento"] .social a { border-radius: var(--radius-md); }

/* --- Gradients & Decoration --- */
html[data-design="bento"] .link-item {
  background: linear-gradient(135deg, var(--card) 0%, var(--card-hover) 100%);
}

/* Internal Sheen (Link Items) */
html[data-design="bento"] .link-item::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(96, 212, 151, 0.1), transparent);
  transition: left var(--transition-slow); pointer-events: none;
}
html[data-design="bento"] .link-item:hover::before { left: 100%; }

/* Side Bar Accent (Link Items) */
html[data-design="bento"] .link-item::after {
  content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  transform: scaleY(0); transition: transform var(--transition-base); transform-origin: top;
}
html[data-design="bento"] .link-item:hover::after { transform: scaleY(1); }

/* --- Hover Effects --- */
html[data-design="bento"] .link-item:hover,
html[data-design="bento"] .button-card:hover,
html[data-design="bento"] .cta-card:hover,
html[data-design="bento"] .prom-card:hover,
html[data-design="bento"] .featured-event:hover,
html[data-design="bento"] .event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

html[data-design="bento"] .social a:hover,
html[data-design="bento"] #themeBtn:hover,
html[data-design="bento"] .logo:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

/* --- Inner Elements --- */
html[data-design="bento"] .link-left i {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}
html[data-design="bento"] .link-item:hover .link-left i {
  background: linear-gradient(135deg, rgba(96, 212, 151, 0.1), rgba(96, 212, 151, 0.2));
  color: var(--accent);
  transform: scale(1.1) rotate(5deg);
}
html[data-design="bento"] .link-right {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

/* --- Specific Components --- */
/* Button Cards Label */
html[data-design="bento"] .button-card .label {
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.8));
  opacity: 0; transform: translateY(100%); transition: all var(--transition-base);
}
html[data-design="bento"] .button-card:hover .label { opacity: 1; transform: translateY(0); }

/* Inputs & Forms */
html[data-design="bento"] input, 
html[data-design="bento"] select, 
html[data-design="bento"] textarea {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
html[data-design="bento"] input:focus,
html[data-design="bento"] select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96, 212, 151, 0.2);
  outline: none;
}
html[data-design="bento"] button {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}
html[data-design="bento"] button:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* --- BENTO SPECIAL: WhatsApp & Telegram Gradients --- */
html[data-design="bento"] .cta-whatsapp {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #86efac;
}
html[data-design="bento"] .cta-whatsapp h3,
html[data-design="bento"] .cta-whatsapp p { color: #15803d; }
html[data-design="bento"] .cta-whatsapp .cta-btn {
  background: #25d366; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: #fff;
}
html[data-design="bento"] .cta-whatsapp .cta-btn:hover { background: #128c7e; }

html[data-design="bento"] .cta-telegram {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #93c5fd;
}
html[data-design="bento"] .cta-telegram h3,
html[data-design="bento"] .cta-telegram p { color: #1e40af; }
html[data-design="bento"] .cta-telegram .cta-btn {
  background: #229ed9; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: #fff;
}
html[data-design="bento"] .cta-telegram .cta-btn:hover { background: #1c84b4; }

html[data-design="bento"] .cta-btn:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* --- BENTO SPECIAL: Featured Event Gradient --- */
html[data-design="bento"] .featured-event .p-4 {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white; /* Force white text on red background */
}
html[data-design="bento"] .featured-event a {
  background: white; color: #dc2626;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
html[data-design="bento"] .featured-event a:hover {
  background: #f5f5f5;
}

html[data-design="bento"] #seeMoreEvents {
  background: linear-gradient(135deg, var(--btn) 0%, var(--btn-hover) 100%);
  border: 2px solid var(--border);
  color: var(--btn-fg);
}


/* =========================================================
   2. GLASSMORPHISM
   Translucent, Blurred, Floating
   ========================================================= */

html[data-design="glassmorphism"] {
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
}

html[data-design="glassmorphism"][data-theme="dark"] {
  --glass-bg: rgba(0, 0, 0, 0.3);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Background */
html[data-design="glassmorphism"] body {
  background: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
  background-size: 200% 200%;
  background-attachment: fixed;
  color: #fff;
}
html[data-design="glassmorphism"][data-theme="light"] body {
  background: 
    radial-gradient(at 0% 0%, hsla(28,100%,74%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(189,100%,56%,1) 0, transparent 50%), 
    radial-gradient(at 100% 100%, hsla(355,100%,93%,1) 0, transparent 50%);
  color: var(--fg);
}

/* Glass Components */
html[data-design="glassmorphism"] .logo,
html[data-design="glassmorphism"] #themeBtn,
html[data-design="glassmorphism"] .social a,
html[data-design="glassmorphism"] .link-item,
html[data-design="glassmorphism"] .widget,
html[data-design="glassmorphism"] .button-card,
html[data-design="glassmorphism"] .cta-card,
html[data-design="glassmorphism"] .showcase-block,
html[data-design="glassmorphism"] .prom-card,
html[data-design="glassmorphism"] .featured-event,
html[data-design="glassmorphism"] .event-card,
html[data-design="glassmorphism"] .encurtador,
html[data-design="glassmorphism"] .toast {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  color: inherit;
}

/* Fix CTA Colors in Glass (Remove Bento Greens) */
html[data-design="glassmorphism"] .cta-card h3,
html[data-design="glassmorphism"] .cta-card p {
  color: inherit; /* Use default text color */
}
html[data-design="glassmorphism"] .cta-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--glass-border);
  color: inherit;
  border-radius: var(--radius-md);
}

/* Fix Events in Glass */
html[data-design="glassmorphism"] .featured-event .p-4 {
  background: var(--glass-bg); /* No Red Gradient */
  color: inherit;
}
html[data-design="glassmorphism"] .featured-event a {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

/* Inner Elements */
html[data-design="glassmorphism"] .link-left i,
html[data-design="glassmorphism"] .link-right {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}
html[data-design="glassmorphism"] .link-item::before, html[data-design="glassmorphism"] .link-item::after { display: none; }


/* =========================================================
   3. BRUTALISM
   Raw, High Contrast, Hard Edges, Offset Shadows
   ========================================================= */

html[data-design="brutalism"] {
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0;
  --shadow-offset: 4px; --border-width: 3px;
}

html[data-design="brutalism"] body {
  font-family: 'Courier New', Courier, monospace; 
  letter-spacing: -0.02em;
}

/* Component Structure */
html[data-design="brutalism"] .logo,
html[data-design="brutalism"] #themeBtn,
html[data-design="brutalism"] .social a,
html[data-design="brutalism"] .link-item,
html[data-design="brutalism"] .widget,
html[data-design="brutalism"] .button-card,
html[data-design="brutalism"] .cta-card,
html[data-design="brutalism"] .showcase-block,
html[data-design="brutalism"] .prom-card,
html[data-design="brutalism"] .featured-event,
html[data-design="brutalism"] .event-card,
html[data-design="brutalism"] .encurtador,
html[data-design="brutalism"] .toast {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--fg);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--fg);
  border-radius: 0;
  color: var(--fg);
  transition: all 0.1s linear;
}

/* Fix CTA & Events Colors */
html[data-design="brutalism"] .cta-card h3,
html[data-design="brutalism"] .cta-card p { color: var(--fg); }
html[data-design="brutalism"] .cta-btn {
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--fg); border-radius: 0;
  box-shadow: 2px 2px 0 var(--fg);
}
html[data-design="brutalism"] .featured-event .p-4 {
  background: var(--bg-secondary); color: var(--fg);
}
html[data-design="brutalism"] .featured-event a {
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--fg); border-radius: 0;
  box-shadow: 2px 2px 0 var(--fg);
}

/* Hover States */
html[data-design="brutalism"] .link-item:hover,
html[data-design="brutalism"] .social a:hover,
html[data-design="brutalism"] .button-card:hover,
html[data-design="brutalism"] .cta-card:hover,
html[data-design="brutalism"] .prom-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--fg);
  background: var(--accent);
  color: var(--bg);
}
/* Force text inversion on hover */
html[data-design="brutalism"] .link-item:hover *,
html[data-design="brutalism"] .cta-card:hover * { color: var(--bg); }

/* Inner Elements */
html[data-design="brutalism"] .link-left i,
html[data-design="brutalism"] .link-right {
  background: transparent;
  border: 2px solid var(--fg);
  border-radius: 0;
}
html[data-design="brutalism"] .link-item::before, html[data-design="brutalism"] .link-item::after { display: none; }


/* =========================================================
   4. MINIMALIST (Flat)
   Clean, No Shadows, Wireframe feel
   ========================================================= */

html[data-design="minimalist"] {
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-hover: none;
}
html[data-design="minimalist"] body { background: var(--bg); }

/* Remove cards backgrounds */
html[data-design="minimalist"] .link-item,
html[data-design="minimalist"] .widget,
html[data-design="minimalist"] .cta-card,
html[data-design="minimalist"] .showcase-block,
html[data-design="minimalist"] .prom-card,
html[data-design="minimalist"] .featured-event,
html[data-design="minimalist"] .event-card,
html[data-design="minimalist"] .encurtador {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0; padding-right: 0;
}

/* Exceptions */
html[data-design="minimalist"] .logo,
html[data-design="minimalist"] #themeBtn,
html[data-design="minimalist"] .social a,
html[data-design="minimalist"] .button-card,
html[data-design="minimalist"] .toast {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}
html[data-design="minimalist"] .social a, html[data-design="minimalist"] .logo { border-radius: 50%; }

/* Fix CTA & Events */
html[data-design="minimalist"] .cta-card h3,
html[data-design="minimalist"] .cta-card p { color: var(--fg); }
html[data-design="minimalist"] .cta-btn,
html[data-design="minimalist"] .featured-event a {
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  border-radius: var(--radius-sm);
}
html[data-design="minimalist"] .featured-event .p-4 { background: transparent; color: var(--fg); }

/* Hover States */
html[data-design="minimalist"] .link-item:hover {
  transform: translateX(8px); border-bottom-color: var(--accent);
}
html[data-design="minimalist"] .social a:hover,
html[data-design="minimalist"] .button-card:hover {
  border-color: var(--fg); background: var(--bg-tertiary); transform: none;
}

/* Inner Cleanup */
html[data-design="minimalist"] .link-left i { background: transparent; }
html[data-design="minimalist"] .link-right { display: none; }
html[data-design="minimalist"] .link-item::before, html[data-design="minimalist"] .link-item::after { display: none; }
html[data-design="minimalist"] .button-card .label { opacity: 1; transform: none; position: static; background: none; color: var(--fg-secondary); }


/* =========================================================
   5. CYBERPUNK
   Neon, Dark, Glows, Tech-y
   ========================================================= */

html[data-design="cyberpunk"] {
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --accent: #00fff9; --bg: #050510; --fg: #e0e0ff;
  --neon-glow: 0 0 10px var(--accent);
}
html[data-design="cyberpunk"][data-theme="light"] {
  --bg: #f0f0f5; --fg: #000; --accent: #ff00ff; --neon-glow: 0 0 5px rgba(255, 0, 255, 0.5);
}

html[data-design="cyberpunk"] body {
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 249, 0.03) 3px), var(--bg);
  font-family: 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: 1px;
}

/* Components */
html[data-design="cyberpunk"] .link-item,
html[data-design="cyberpunk"] .widget,
html[data-design="cyberpunk"] .button-card,
html[data-design="cyberpunk"] .cta-card,
html[data-design="cyberpunk"] .social a,
html[data-design="cyberpunk"] .logo,
html[data-design="cyberpunk"] #themeBtn,
html[data-design="cyberpunk"] .encurtador,
html[data-design="cyberpunk"] .featured-event {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent);
  box-shadow: 0 0 5px var(--accent);
  color: var(--accent);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Fix CTA & Events */
html[data-design="cyberpunk"] .cta-card h3,
html[data-design="cyberpunk"] .cta-card p,
html[data-design="cyberpunk"] .featured-event .p-4 { color: var(--accent); background: transparent; }
html[data-design="cyberpunk"] .cta-btn,
html[data-design="cyberpunk"] .featured-event a {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  box-shadow: 0 0 5px var(--accent);
}
html[data-design="cyberpunk"] .cta-btn:hover,
html[data-design="cyberpunk"] .featured-event a:hover {
  background: var(--accent); color: #000;
}

/* Hover: Glitchy */
html[data-design="cyberpunk"] .link-item:hover,
html[data-design="cyberpunk"] .social a:hover,
html[data-design="cyberpunk"] .button-card:hover {
  background: var(--accent); color: #000;
  box-shadow: 0 0 20px var(--accent);
  transform: translate(-2px, -2px);
}
html[data-design="cyberpunk"] .link-item:hover * { color: #000; }
html[data-design="cyberpunk"] .link-item::before, html[data-design="cyberpunk"] .link-item::after { display: none; }
html[data-design="cyberpunk"] .button-card .label { opacity: 1; position: static; transform: none; background: none; color: inherit; font-size: 0.6rem; }


/* =========================================================
   6. TERMINAL
   Monospace, Green/Black, No decorations
   ========================================================= */

html[data-design="terminal"] {
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --bg: #000000; --fg: #00ff00; --border: #00ff00; --card: #000000;
}
html[data-design="terminal"][data-theme="light"] {
  --bg: #ffffff; --fg: #000000; --border: #000000; --card: #ffffff;
}

html[data-design="terminal"] body {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: var(--bg); color: var(--fg);
}
html[data-design="terminal"] * { border-radius: 0 !important; }

/* Components */
html[data-design="terminal"] .link-item,
html[data-design="terminal"] .widget,
html[data-design="terminal"] .cta-card,
html[data-design="terminal"] .social a,
html[data-design="terminal"] .logo,
html[data-design="terminal"] #themeBtn,
html[data-design="terminal"] .button-card,
html[data-design="terminal"] .encurtador,
html[data-design="terminal"] .featured-event {
  background: var(--bg);
  border: 1px dashed var(--fg);
  box-shadow: none;
  color: var(--fg);
}

/* Fix CTA & Events */
html[data-design="terminal"] .cta-card h3,
html[data-design="terminal"] .cta-card p,
html[data-design="terminal"] .featured-event .p-4 { color: var(--fg); background: transparent; }
html[data-design="terminal"] .cta-btn,
html[data-design="terminal"] .featured-event a {
  background: var(--bg); color: var(--fg); border: 1px solid var(--fg);
}
html[data-design="terminal"] .cta-btn:hover { background: var(--fg); color: var(--bg); }

/* Hover: Invert */
html[data-design="terminal"] .link-item:hover,
html[data-design="terminal"] .social a:hover,
html[data-design="terminal"] .button-card:hover {
  background: var(--fg); color: var(--bg); border-style: solid; transform: none;
}
html[data-design="terminal"] .link-item:hover * { color: var(--bg); }
html[data-design="terminal"] .link-left i { border: none; background: transparent; }
html[data-design="terminal"] .link-item::before, html[data-design="terminal"] .link-item::after { display: none; }


/* =========================================================
   7. NEUMORPHISM
   Soft plastic, convex/concave shapes
   ========================================================= */

html[data-design="neumorphism"] {
  --radius-sm: 10px; --radius-md: 15px; --radius-lg: 20px; --radius-xl: 30px;
  --bg: #e0e5ec; --fg: #4a4a4a;
  --neu-shadow-light: #ffffff; --neu-shadow-dark: #a3b1c6;
}
html[data-design="neumorphism"][data-theme="dark"] {
  --bg: #292d32; --fg: #e0e5ec; --neu-shadow-light: #353b42; --neu-shadow-dark: #1e2125;
}

html[data-design="neumorphism"] body { background: var(--bg); color: var(--fg); }

/* Components */
html[data-design="neumorphism"] .link-item,
html[data-design="neumorphism"] .widget,
html[data-design="neumorphism"] .cta-card,
html[data-design="neumorphism"] .social a,
html[data-design="neumorphism"] .logo,
html[data-design="neumorphism"] #themeBtn,
html[data-design="neumorphism"] .button-card,
html[data-design="neumorphism"] .encurtador,
html[data-design="neumorphism"] .showcase-block,
html[data-design="neumorphism"] .featured-event,
html[data-design="neumorphism"] .featured-event a {
  background: var(--bg);
  border: 1px solid transparent;
  box-shadow: 9px 9px 16px var(--neu-shadow-dark), -9px -9px 16px var(--neu-shadow-light);
  border-radius: var(--radius-lg);
  color: var(--fg);
}
html[data-design="neumorphism"] .social a, 
html[data-design="neumorphism"] .logo, 
html[data-design="neumorphism"] #themeBtn { border-radius: 50%; }

/* Fix CTA & Events */
html[data-design="neumorphism"] .cta-card h3,
html[data-design="neumorphism"] .cta-card p,
html[data-design="neumorphism"] .featured-event .p-4 { color: var(--fg); background: transparent; }
html[data-design="neumorphism"] .cta-btn {
  background: var(--bg); color: var(--fg); border-radius: var(--radius-md);
  box-shadow: 5px 5px 10px var(--neu-shadow-dark), -5px -5px 10px var(--neu-shadow-light);
}

/* Hover: Pressed State */
html[data-design="neumorphism"] .link-item:hover,
html[data-design="neumorphism"] .social a:hover,
html[data-design="neumorphism"] .button-card:hover {
  transform: none;
  box-shadow: inset 6px 6px 10px var(--neu-shadow-dark), inset -6px -6px 10px var(--neu-shadow-light);
}

html[data-design="neumorphism"] .link-left i { background: transparent; }
html[data-design="neumorphism"] .link-item::before, html[data-design="neumorphism"] .link-item::after { display: none; }
html[data-design="neumorphism"] .button-card .label { opacity: 1; position: static; transform: none; background: none; color: var(--fg); }
html[data-design="neumorphism"] .button-card i { color: var(--accent); }
html[data-design="neumorphism"] input {
  background: var(--bg); border: none;
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
  border-radius: var(--radius-md);
}


/* =========================================================
   8. PAPER
   Textured, Notebook feel, Borders
   ========================================================= */

html[data-design="paper"] {
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;
  --paper-line: rgba(0,0,0,0.05);
}
html[data-design="paper"][data-theme="dark"] { --paper-line: rgba(255,255,255,0.05); }

html[data-design="paper"] body {
  background: repeating-linear-gradient(0deg, var(--bg), var(--bg) 24px, var(--paper-line) 25px);
}

html[data-design="paper"] .link-item,
html[data-design="paper"] .widget,
html[data-design="paper"] .cta-card,
html[data-design="paper"] .button-card,
html[data-design="paper"] .encurtador,
html[data-design="paper"] .showcase-block,
html[data-design="paper"] .featured-event {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
  border-radius: var(--radius-sm);
}

/* Fix CTA & Events */
html[data-design="paper"] .cta-card h3,
html[data-design="paper"] .cta-card p,
html[data-design="paper"] .featured-event .p-4 { color: var(--fg); background: transparent; }
html[data-design="paper"] .cta-btn,
html[data-design="paper"] .featured-event a {
  background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--fg);
}

html[data-design="paper"] .social a, html[data-design="paper"] .logo {
  border: 1px solid var(--border); background: var(--card); box-shadow: none; border-radius: 50%;
}

html[data-design="paper"] .link-item:hover,
html[data-design="paper"] .button-card:hover {
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
}
html[data-design="paper"] .link-item::before, html[data-design="paper"] .link-item::after { display: none; }
html[data-design="paper"] .button-card .label { opacity: 1; position: static; transform: none; background: none; color: var(--fg); }


/* =========================================================
   9. iOS
   Blur, Saturation, Rounded, Clean
   ========================================================= */

html[data-design="ios"] {
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 32px;
  --ios-bg: rgba(255, 255, 255, 0.8);
}
html[data-design="ios"][data-theme="dark"] { --ios-bg: rgba(30, 30, 30, 0.8); }

html[data-design="ios"] body { background: var(--bg); }

html[data-design="ios"] .link-item,
html[data-design="ios"] .widget,
html[data-design="ios"] .cta-card,
html[data-design="ios"] .encurtador,
html[data-design="ios"] .showcase-block,
html[data-design="ios"] .social a,
html[data-design="ios"] .button-card,
html[data-design="ios"] .featured-event {
  background: var(--ios-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(128,128,128, 0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  border-radius: var(--radius-lg);
}

/* Fix CTA & Events */
html[data-design="ios"] .cta-card h3,
html[data-design="ios"] .cta-card p,
html[data-design="ios"] .featured-event .p-4 { color: var(--fg); background: transparent; }
html[data-design="ios"] .cta-btn,
html[data-design="ios"] .featured-event a {
  background: rgba(0, 122, 255, 0.1); color: #007aff;
  border-radius: var(--radius-md); font-weight: 600;
}

html[data-design="ios"] .link-item:hover,
html[data-design="ios"] .button-card:hover {
  transform: scale(1.02); background: var(--card-hover);
}
html[data-design="ios"] .social a { border-radius: var(--radius-md); }
html[data-design="ios"] .link-left i { background: var(--bg-tertiary); border-radius: 10px; }
html[data-design="ios"] .link-item::before, html[data-design="ios"] .link-item::after { display: none; }
html[data-design="ios"] .button-card .label { opacity: 1; position: static; transform: none; background: none; color: var(--fg); font-weight: 500; }
html[data-design="ios"] .button-card i { color: #007aff; }


/* =========================================================
   10. PalmOS (Retro PDA)
   Pixelated borders, greyscale feel
   ========================================================= */

html[data-design="palmos"] {
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --bg: #a8bca0; --fg: #000; --border: #000;
}
html[data-design="palmos"][data-theme="dark"] { --bg: #2d382a; --fg: #a8bca0; --border: #a8bca0; }

html[data-design="palmos"] body { background: var(--bg); font-family: 'Tahoma', sans-serif; }

html[data-design="palmos"] .link-item,
html[data-design="palmos"] .widget,
html[data-design="palmos"] .cta-card,
html[data-design="palmos"] .encurtador,
html[data-design="palmos"] .button-card,
html[data-design="palmos"] .social a,
html[data-design="palmos"] .logo,
html[data-design="palmos"] #themeBtn,
html[data-design="palmos"] .featured-event {
  background: var(--bg);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  border-radius: 2px;
  color: var(--fg);
}
html[data-design="palmos"] .logo { border-radius: 0; }

/* Fix CTA & Events */
html[data-design="palmos"] .cta-card h3,
html[data-design="palmos"] .cta-card p,
html[data-design="palmos"] .featured-event .p-4 { color: var(--fg); background: transparent; }
html[data-design="palmos"] .cta-btn,
html[data-design="palmos"] .featured-event a {
  background: var(--bg); border: 2px solid var(--border); color: var(--fg);
  box-shadow: 1px 1px 0 var(--border);
}

html[data-design="palmos"] .link-item:hover,
html[data-design="palmos"] .button-card:hover {
  background: var(--fg); color: var(--bg);
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--border);
}
html[data-design="palmos"] .link-item:hover * { color: var(--bg); }

html[data-design="palmos"] .link-item::before, html[data-design="palmos"] .link-item::after { display: none; }
html[data-design="palmos"] .link-left i { border: none; background: transparent; }
html[data-design="palmos"] .button-card .label { opacity: 1; position: static; transform: none; background: none; color: inherit; }