/* ═══════════════════════════════════════════
   KODLINK DESIGN STYLES — 12 Visual Styles
   Loaded AFTER themes.css, applies via html[data-style]
   ═══════════════════════════════════════════ */

/* ── 1. CLASSIC (Default) ── */
html[data-style="classic"] {}

/* ── 2. GLASSMORPHISM ── */
html[data-style="glass"] {
  --glass-bg: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.12); --glass-blur: 20px;
  --r: 18px; --r2: 24px;
}
.dark-theme[data-style="glass"] { --glass-bg: rgba(255,255,255,.04); --glass-border: rgba(255,255,255,.08); }
html[data-style="glass"] .section, html[data-style="glass"] .admin-card, html[data-style="glass"] .faq-item {
  background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-style="glass"] .btn--primary {
  background: linear-gradient(135deg, var(--p1), var(--c1)) !important;
  backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-style="glass"] .navbar { background: rgba(255,255,255,.03) !important; backdrop-filter: blur(24px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-style="glass"] .footer { background: rgba(255,255,255,.02) !important; backdrop-filter: blur(20px); }
html[data-style="glass"] .card, html[data-style="glass"] .blog-card, html[data-style="glass"] .project-card {
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: 0 8px 32px rgba(0,0,0,.06);
}

/* ── 3. NEUMORPHISM ── */
html[data-style="neumorphic"] {
  --neu-shadow: 6px 6px 14px rgba(0,0,0,.08), -6px -6px 14px rgba(255,255,255,.7);
  --neu-shadow-lg: 10px 10px 24px rgba(0,0,0,.10), -10px -10px 24px rgba(255,255,255,.8);
  --neu-inset: inset 4px 4px 8px rgba(0,0,0,.06), inset -4px -4px 8px rgba(255,255,255,.6);
  --r: 20px; --r2: 28px;
}
.dark-theme[data-style="neumorphic"] {
  --neu-shadow: 6px 6px 14px rgba(0,0,0,.35), -6px -6px 14px rgba(255,255,255,.04);
  --neu-shadow-lg: 10px 10px 24px rgba(0,0,0,.45), -10px -10px 24px rgba(255,255,255,.03);
  --neu-inset: inset 4px 4px 8px rgba(0,0,0,.25), inset -4px -4px 8px rgba(255,255,255,.03);
}
html[data-style="neumorphic"] .section, html[data-style="neumorphic"] .admin-card, html[data-style="neumorphic"] .faq-item {
  background: var(--bg2) !important; border: none !important; border-radius: var(--r2) !important; box-shadow: var(--neu-shadow-lg);
}
html[data-style="neumorphic"] .btn--primary {
  background: var(--p2) !important; box-shadow: var(--neu-shadow), inset 0 1px 0 rgba(255,255,255,.15); border: none; border-radius: 14px;
}
html[data-style="neumorphic"] .btn--primary:active { box-shadow: var(--neu-inset); }
html[data-style="neumorphic"] .card, html[data-style="neumorphic"] .blog-card, html[data-style="neumorphic"] .project-card {
  background: var(--bg2); border: none; box-shadow: var(--neu-shadow); border-radius: var(--r2);
}
html[data-style="neumorphic"] .theme-toggle__track { box-shadow: var(--neu-inset); }
html[data-style="neumorphic"] input[type="text"], html[data-style="neumorphic"] input[type="email"],
html[data-style="neumorphic"] input[type="url"], html[data-style="neumorphic"] textarea, html[data-style="neumorphic"] select {
  background: var(--bg2); box-shadow: var(--neu-inset); border: none; border-radius: 12px;
}

/* ── 4. CYBERPUNK ── */
html[data-style="cyberpunk"] {
  --r: 2px; --r2: 4px; --r3: 6px;
}
html[data-style="cyberpunk"] .section, html[data-style="cyberpunk"] .admin-card, html[data-style="cyberpunk"] .faq-item {
  background: var(--bg2) !important; border: 1px solid var(--p1) !important; border-radius: 2px !important;
  box-shadow: 0 0 15px rgba(0,255,136,.08), inset 0 0 30px rgba(0,0,0,.1); position: relative;
}
html[data-style="cyberpunk"] .section::before, html[data-style="cyberpunk"] .admin-card::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p1), var(--c1), transparent);
}
html[data-style="cyberpunk"] .btn--primary {
  background: transparent !important; border: 2px solid var(--p1) !important; color: var(--p1) !important;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
html[data-style="cyberpunk"] .btn--primary:hover { background: var(--p1) !important; color: #fff !important; box-shadow: 0 0 20px rgba(0,255,136,.3); }
html[data-style="cyberpunk"] .navbar { border-bottom: 1px solid var(--p1); box-shadow: 0 2px 20px rgba(0,255,136,.06); }
html[data-style="cyberpunk"] .hero__badge {
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); text-transform: uppercase; letter-spacing: .15em;
}
html[data-style="cyberpunk"] .card, html[data-style="cyberpunk"] .blog-card, html[data-style="cyberpunk"] .project-card {
  border: 1px solid var(--p1); border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
html[data-style="cyberpunk"] .section__tag {
  border: 1px solid var(--p1); text-transform: uppercase; letter-spacing: .2em; font-size: .7rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ── 5. MINIMAL ── */
html[data-style="minimal"] { --r: 6px; --r2: 10px; --r3: 16px; --sh-sm: 0 1px 3px rgba(0,0,0,.04); }
html[data-style="minimal"] .section, html[data-style="minimal"] .admin-card, html[data-style="minimal"] .faq-item {
  background: transparent !important; border: 1px solid var(--b) !important; border-radius: var(--r) !important; box-shadow: none !important;
}
html[data-style="minimal"] .btn--primary { background: var(--t) !important; color: var(--bg) !important; border: none; border-radius: var(--r); font-weight: 500; letter-spacing: -.01em; }
html[data-style="minimal"] .section__header { text-align: left; }
html[data-style="minimal"] .section__tag { background: none; color: var(--p2); font-weight: 600; padding: 0; letter-spacing: -.02em; }
html[data-style="minimal"] .card, html[data-style="minimal"] .blog-card, html[data-style="minimal"] .project-card { border: 1px solid var(--b); border-radius: var(--r); box-shadow: none; }
html[data-style="minimal"] .card:hover, html[data-style="minimal"] .blog-card:hover, html[data-style="minimal"] .project-card:hover { border-color: var(--p2); }
html[data-style="minimal"] .navbar { border-bottom: 1px solid var(--b); }
html[data-style="minimal"] .grad-text { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; color: var(--p2); }

/* ── 6. BRUTALIST ── */
html[data-style="brutalist"] { --r: 0px; --r2: 0px; --r3: 0px; --sh-sm: 4px 4px 0 var(--t); }
html[data-style="brutalist"] .section, html[data-style="brutalist"] .admin-card, html[data-style="brutalist"] .faq-item {
  background: var(--bg2) !important; border: 3px solid var(--t) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 var(--t) !important;
}
html[data-style="brutalist"] .btn--primary {
  background: var(--p1) !important; color: #fff !important; border: 3px solid var(--t) !important; border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--t); text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
  transition: transform .1s, box-shadow .1s;
}
html[data-style="brutalist"] .btn--primary:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--t); }
html[data-style="brutalist"] .btn--primary:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--t); }
html[data-style="brutalist"] .card, html[data-style="brutalist"] .blog-card, html[data-style="brutalist"] .project-card { border: 3px solid var(--t); border-radius: 0; box-shadow: 5px 5px 0 var(--t); }
html[data-style="brutalist"] .card:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--t); }
html[data-style="brutalist"] .navbar { border-bottom: 3px solid var(--t); }
html[data-style="brutalist"] .hero__title { font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
html[data-style="brutalist"] .section__tag { background: var(--t); color: var(--bg); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 6px 14px; }
html[data-style="brutalist"] .grad-text { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: var(--p1); background-clip: unset; font-weight: 900; }
html[data-style="brutalist"] input[type="text"], html[data-style="brutalist"] input[type="email"],
html[data-style="brutalist"] input[type="url"], html[data-style="brutalist"] textarea, html[data-style="brutalist"] select {
  border: 3px solid var(--t); border-radius: 0; box-shadow: 3px 3px 0 var(--t);
}

/* ── 7. NEON ── */
html[data-style="neon"] { --r: 12px; --r2: 16px; --neon-glow: 0 0 10px var(--p1), 0 0 40px rgba(0,255,136,.15); }
html[data-style="neon"] .section, html[data-style="neon"] .admin-card, html[data-style="neon"] .faq-item {
  background: var(--bg2) !important; border: 1px solid var(--p1) !important; border-radius: var(--r) !important;
  box-shadow: var(--neon-glow); transition: box-shadow .3s;
}
html[data-style="neon"] .section:hover, html[data-style="neon"] .admin-card:hover { box-shadow: 0 0 15px var(--p1), 0 0 60px rgba(0,255,136,.25); }
html[data-style="neon"] .btn--primary {
  background: transparent !important; border: 2px solid var(--p1) !important; color: var(--p1) !important;
  text-shadow: 0 0 8px var(--p1); box-shadow: 0 0 12px rgba(0,255,136,.2), inset 0 0 12px rgba(0,255,136,.05);
  transition: all .3s;
}
html[data-style="neon"] .btn--primary:hover {
  background: var(--p1) !important; color: #fff !important; text-shadow: none;
  box-shadow: 0 0 20px var(--p1), 0 0 60px rgba(0,255,136,.3);
}
html[data-style="neon"] .navbar { border-bottom: 1px solid var(--p1); box-shadow: 0 1px 20px rgba(0,255,136,.08); }
html[data-style="neon"] .grad-text { text-shadow: 0 0 20px var(--p1); }
html[data-style="neon"] .card, html[data-style="neon"] .blog-card, html[data-style="neon"] .project-card {
  border: 1px solid var(--p1); box-shadow: var(--neon-glow); transition: box-shadow .3s;
}
html[data-style="neon"] .card:hover { box-shadow: 0 0 20px var(--p1), 0 0 60px rgba(0,255,136,.3); }
html[data-style="neon"] .hero__badge { border: 1px solid var(--p1); text-shadow: 0 0 6px var(--p1); }
html[data-style="neon"] .section__tag { border: 1px solid var(--p1); text-shadow: 0 0 6px var(--p1); }

/* ── 8. CLAY ── */
html[data-style="clay"] { --r: 24px; --r2: 32px; --r3: 40px; }
html[data-style="clay"] .section, html[data-style="clay"] .admin-card, html[data-style="clay"] .faq-item {
  background: var(--bg2) !important; border: none !important; border-radius: var(--r2) !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.06), -2px -2px 0 rgba(255,255,255,.5);
}
.dark-theme[data-style="clay"] .section, .dark-theme[data-style="clay"] .admin-card, .dark-theme[data-style="clay"] .faq-item {
  box-shadow: 8px 8px 0 rgba(0,0,0,.2), -2px -2px 0 rgba(255,255,255,.03);
}
html[data-style="clay"] .btn--primary {
  border-radius: 20px !important; box-shadow: 4px 4px 0 rgba(0,0,0,.1); transition: all .15s;
}
html[data-style="clay"] .btn--primary:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(0,0,0,.12); }
html[data-style="clay"] .btn--primary:active { transform: translateY(2px); box-shadow: 2px 2px 0 rgba(0,0,0,.08); }
html[data-style="clay"] .card, html[data-style="clay"] .blog-card, html[data-style="clay"] .project-card { border-radius: var(--r2); }
html[data-style="clay"] .navbar { border-radius: 0 0 var(--r) var(--r); }
html[data-style="clay"] .hero__badge { border-radius: var(--r); }
html[data-style="clay"] input[type="text"], html[data-style="clay"] input[type="email"],
html[data-style="clay"] input[type="url"], html[data-style="clay"] textarea, html[data-style="clay"] select { border-radius: 16px; }
html[data-style="clay"] .faq-item__trigger { border-radius: var(--r); }

/* ── 9. RETRO ── */
html[data-style="retro"] { --r: 8px; --r2: 12px; --retro-shadow: 3px 3px 0 rgba(0,0,0,.15); }
html[data-style="retro"] .section, html[data-style="retro"] .admin-card, html[data-style="retro"] .faq-item {
  background: var(--bg2) !important; border: 2px solid var(--b) !important; border-radius: var(--r) !important;
  box-shadow: var(--retro-shadow); background-image: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,0,0,.02) 20px);
}
html[data-style="retro"] .btn--primary {
  background: var(--p1) !important; color: #fff !important; border: 2px solid var(--t) !important;
  box-shadow: var(--retro-shadow); border-radius: var(--r); font-family: 'Space Grotesk', monospace; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; transition: all .1s;
}
html[data-style="retro"] .btn--primary:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(0,0,0,.15); }
html[data-style="retro"] .btn--primary:active { transform: translate(3px,3px); box-shadow: 0 0 0 rgba(0,0,0,.15); }
html[data-style="retro"] .navbar { border-bottom: 3px double var(--b); }
html[data-style="retro"] .section__tag { background: var(--t); color: var(--bg); font-family: 'Space Grotesk', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; font-size: .75rem; }
html[data-style="retro"] .card, html[data-style="retro"] .blog-card, html[data-style="retro"] .project-card { border: 2px solid var(--b); box-shadow: var(--retro-shadow); }
html[data-style="retro"] .hero__title { font-family: 'Space Grotesk', monospace; font-weight: 800; }
html[data-style="retro"] .grad-text { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: var(--p1); background-clip: unset; }

/* ── 10. AURORA MESH ── */
html[data-style="aurora-mesh"] { --r: 20px; --r2: 28px; }
html[data-style="aurora-mesh"] .section, html[data-style="aurora-mesh"] .admin-card, html[data-style="aurora-mesh"] .faq-item {
  background: var(--bg2) !important; border: none !important; border-radius: var(--r2) !important; position: relative; overflow: hidden;
}
html[data-style="aurora-mesh"] .section::after, html[data-style="aurora-mesh"] .admin-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(168,85,247,.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(6,182,212,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(236,72,153,.08) 0%, transparent 70%);
}
html[data-style="aurora-mesh"] .section > *, html[data-style="aurora-mesh"] .admin-card > * { position: relative; z-index: 1; }
html[data-style="aurora-mesh"] .btn--primary { border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
html[data-style="aurora-mesh"] .card, html[data-style="aurora-mesh"] .blog-card, html[data-style="aurora-mesh"] .project-card { border-radius: var(--r2); border: none; }

/* ── 11. SHARP ── */
html[data-style="sharp"] { --r: 0px; --r2: 0px; --r3: 0px; }
html[data-style="sharp"] .section, html[data-style="sharp"] .admin-card, html[data-style="sharp"] .faq-item {
  background: var(--bg2) !important; border: 1px solid var(--b) !important; border-radius: 0 !important; box-shadow: none !important;
}
html[data-style="sharp"] .btn--primary { border-radius: 0 !important; border: none; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
html[data-style="sharp"] .card, html[data-style="sharp"] .blog-card, html[data-style="sharp"] .project-card { border-radius: 0; }
html[data-style="sharp"] .navbar { border-bottom: 2px solid var(--b); }
html[data-style="sharp"] .hero__badge { border-radius: 0; clip-path: none; }
html[data-style="sharp"] input[type="text"], html[data-style="sharp"] input[type="email"],
html[data-style="sharp"] input[type="url"], html[data-style="sharp"] textarea, html[data-style="sharp"] select { border-radius: 0; }
html[data-style="sharp"] .section__tag { background: var(--p1); color: #fff; border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; padding: 5px 14px; }

/* ── 12. GRADIENT ── */
html[data-style="gradient"] { --r: 20px; --r2: 28px; }
html[data-style="gradient"] .section { background: var(--bg2) !important; border: none !important; border-radius: var(--r2) !important; background-image: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
html[data-style="gradient"] .btn--primary {
  background: var(--pg) !important; border: none; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.15); position: relative; overflow: hidden;
}
html[data-style="gradient"] .btn--primary::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.2), transparent); border-radius: inherit;
}
html[data-style="gradient"] .hero { background: var(--pg) !important; }
html[data-style="gradient"] .hero * { color: #fff !important; }
html[data-style="gradient"] .hero .btn--secondary { background: rgba(255,255,255,.15) !important; border: 1px solid rgba(255,255,255,.3) !important; color: #fff !important; backdrop-filter: blur(8px); }
html[data-style="gradient"] .card, html[data-style="gradient"] .blog-card, html[data-style="gradient"] .project-card { border: none; border-radius: var(--r2); box-shadow: 0 8px 32px rgba(0,0,0,.08); }
html[data-style="gradient"] .section__tag { background: var(--pg); color: #fff; border-radius: 20px; padding: 4px 14px; }
html[data-style="gradient"] .navbar { background: rgba(255,255,255,.02) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-style="gradient"] .grad-text { background: var(--pg2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Admin selectors ── */
.theme-option.active, .style-option.active { border-color: var(--primary,#2563EB) !important; background: rgba(var(--primary-rgb,59,130,246),.06) !important; }