/* =========================================================
   10 langages de design � appliqu�s via [data-design="..."]
   Compatible avec les th�mes de couleur (data-theme)
   ========================================================= */

/* �� 1. Glassmorphisme (d�faut actuel) �� */
[data-design="glassmorphism"] .stat-card,
[data-design="glassmorphism"] .panel,
[data-design="glassmorphism"] .modal,
[data-design="glassmorphism"] .auth-card {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 18px;
}

/* �� 2. Liquid Glass �� */
[data-design="liquid-glass"] {
  --blur: 28px;
  --radius: 22px;
}
[data-design="liquid-glass"] body::before,
[data-design="liquid-glass"] body::after {
  opacity: .65;
  filter: blur(80px);
}
[data-design="liquid-glass"] .stat-card,
[data-design="liquid-glass"] .panel,
[data-design="liquid-glass"] .modal,
[data-design="liquid-glass"] .auth-card,
[data-design="liquid-glass"] .topbar,
[data-design="liquid-glass"] .search-box input {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 40%,
    rgba(255, 255, 255, 0.35) 100%
  );
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 12px 40px rgba(20, 50, 70, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  border-radius: 22px;
}
[data-design="liquid-glass"][data-theme-mode="dark"] .stat-card,
[data-design="liquid-glass"][data-theme-mode="dark"] .panel,
[data-design="liquid-glass"][data-theme-mode="dark"] .modal,
[data-design="liquid-glass"][data-theme-mode="dark"] .auth-card,
[data-design="liquid-glass"][data-theme-mode="dark"] .topbar {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border-color: rgba(255, 255, 255, 0.18);
}
[data-design="liquid-glass"] .btn-primary {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
[data-design="liquid-glass"] .sidebar {
  backdrop-filter: blur(30px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,.22);
}

/* �� 3. N�omorphisme �� */
[data-design="neumorphism"] {
  --radius: 20px;
  --blur: 0px;
  --glass: var(--bg);
  --glass-strong: var(--bg);
  --glass-border: transparent;
  --glass-border-soft: transparent;
  --shadow-glass: none;
}
[data-design="neumorphism"] body {
  background: var(--bg) !important;
}
[data-design="neumorphism"] body::before,
[data-design="neumorphism"] body::after {
  opacity: 0;
}
[data-design="neumorphism"] .stat-card,
[data-design="neumorphism"] .panel,
[data-design="neumorphism"] .modal,
[data-design="neumorphism"] .auth-card,
[data-design="neumorphism"] .user-chip,
[data-design="neumorphism"] .icon-btn,
[data-design="neumorphism"] .search-box input,
[data-design="neumorphism"] .topbar {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow:
    9px 9px 18px color-mix(in srgb, var(--text) 14%, transparent),
    -9px -9px 18px rgba(255, 255, 255, 0.85) !important;
  border-radius: 20px;
}
[data-design="neumorphism"][data-theme-mode="dark"] .stat-card,
[data-design="neumorphism"][data-theme-mode="dark"] .panel,
[data-design="neumorphism"][data-theme-mode="dark"] .modal,
[data-design="neumorphism"][data-theme-mode="dark"] .auth-card,
[data-design="neumorphism"][data-theme-mode="dark"] .topbar,
[data-design="neumorphism"][data-theme-mode="dark"] .search-box input,
[data-design="neumorphism"][data-theme-mode="dark"] .icon-btn,
[data-design="neumorphism"][data-theme-mode="dark"] .user-chip {
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.55),
    -6px -6px 14px rgba(255, 255, 255, 0.04) !important;
}
[data-design="neumorphism"] .btn-primary {
  border: none;
  box-shadow:
    6px 6px 12px color-mix(in srgb, var(--text) 16%, transparent),
    -4px -4px 10px rgba(255,255,255,.7);
}
[data-design="neumorphism"] .btn-secondary {
  background: var(--bg) !important;
  border: none !important;
  box-shadow:
    5px 5px 10px color-mix(in srgb, var(--text) 12%, transparent),
    -5px -5px 10px rgba(255,255,255,.8);
}
[data-design="neumorphism"] input:not([type="file"]),
[data-design="neumorphism"] select,
[data-design="neumorphism"] textarea {
  background: var(--bg) !important;
  border: none !important;
  box-shadow:
    inset 4px 4px 8px color-mix(in srgb, var(--text) 12%, transparent),
    inset -4px -4px 8px rgba(255,255,255,.85) !important;
}
[data-design="neumorphism"] .sidebar {
  background: var(--bg) !important;
  color: var(--text);
  box-shadow: 9px 0 18px color-mix(in srgb, var(--text) 12%, transparent);
  border-right: none;
}
[data-design="neumorphism"] .sidebar .nav-link { color: var(--text-muted); }
[data-design="neumorphism"] .sidebar .nav-link:hover,
[data-design="neumorphism"] .sidebar .nav-link.active {
  background: var(--bg);
  color: var(--primary);
  box-shadow:
    inset 3px 3px 6px color-mix(in srgb, var(--text) 12%, transparent),
    inset -3px -3px 6px rgba(255,255,255,.8);
}
[data-design="neumorphism"] .brand { color: var(--text); }
[data-design="neumorphism"] .table-wrap {
  background: var(--bg);
  border: none;
  box-shadow:
    inset 3px 3px 8px color-mix(in srgb, var(--text) 10%, transparent),
    inset -3px -3px 8px rgba(255,255,255,.75);
}

/* �� 4. Skeuomorphisme �� */
[data-design="skeuomorphism"] {
  --radius: 10px;
}
[data-design="skeuomorphism"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.015) 2px, rgba(0,0,0,.015) 4px),
    var(--body-grad) !important;
}
[data-design="skeuomorphism"] .stat-card,
[data-design="skeuomorphism"] .panel,
[data-design="skeuomorphism"] .modal,
[data-design="skeuomorphism"] .auth-card {
  backdrop-filter: none !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #fff) 0%, color-mix(in srgb, var(--bg) 85%, #c8b59a) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent) !important;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -2px 0 rgba(0,0,0,.08) inset,
    0 10px 18px rgba(0,0,0,.18),
    0 2px 0 color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
[data-design="skeuomorphism"] .btn-primary {
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-2) 80%, #fff), var(--primary)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 70%, #000);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 3px 0 color-mix(in srgb, var(--primary) 55%, #000),
    0 6px 10px rgba(0,0,0,.25);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
[data-design="skeuomorphism"] .btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 0 color-mix(in srgb, var(--primary) 55%, #000);
}
[data-design="skeuomorphism"] .btn-secondary {
  background: linear-gradient(180deg, #fff, #e8e4dc) !important;
  border: 1px solid #b8a99a !important;
  box-shadow: 0 1px 0 #fff inset, 0 2px 0 #a89880, 0 4px 8px rgba(0,0,0,.15);
}
[data-design="skeuomorphism"] input:not([type="file"]),
[data-design="skeuomorphism"] select,
[data-design="skeuomorphism"] textarea {
  background: linear-gradient(180deg, #f3efe6, #fff) !important;
  border: 1px solid #a89880 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12) !important;
  border-radius: 6px;
}
[data-design="skeuomorphism"] .sidebar {
  background: linear-gradient(180deg, #4a3728, #2c1e14) !important;
  border-right: 3px solid #8b6914;
  box-shadow: inset -4px 0 12px rgba(0,0,0,.35);
}
[data-design="skeuomorphism"] .badge {
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}

/* �� 5. Claymorphisme �� */
[data-design="claymorphism"] {
  --radius: 28px;
}
[data-design="claymorphism"] .stat-card,
[data-design="claymorphism"] .panel,
[data-design="claymorphism"] .modal,
[data-design="claymorphism"] .auth-card {
  backdrop-filter: none !important;
  background: color-mix(in srgb, var(--bg-elevated) 70%, #fff) !important;
  border: none !important;
  border-radius: 28px;
  box-shadow:
    0 18px 0 color-mix(in srgb, var(--primary) 18%, #d8d2ef),
    0 22px 40px rgba(80, 60, 120, 0.15),
    inset 0 -6px 12px rgba(0,0,0,.04),
    inset 0 8px 16px rgba(255,255,255,.65) !important;
}
[data-design="claymorphism"][data-theme-mode="dark"] .stat-card,
[data-design="claymorphism"][data-theme-mode="dark"] .panel,
[data-design="claymorphism"][data-theme-mode="dark"] .modal,
[data-design="claymorphism"][data-theme-mode="dark"] .auth-card {
  background: color-mix(in srgb, var(--bg) 80%, #2a2038) !important;
  box-shadow:
    0 16px 0 color-mix(in srgb, var(--primary) 25%, #1a1228),
    0 22px 40px rgba(0,0,0,.35),
    inset 0 8px 16px rgba(255,255,255,.05) !important;
}
[data-design="claymorphism"] .btn,
[data-design="claymorphism"] .badge,
[data-design="claymorphism"] .tab,
[data-design="claymorphism"] .icon-btn,
[data-design="claymorphism"] .avatar {
  border-radius: 999px !important;
}
[data-design="claymorphism"] .btn-primary {
  box-shadow:
    0 8px 0 color-mix(in srgb, var(--primary) 55%, #000),
    0 12px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}
[data-design="claymorphism"] input:not([type="file"]),
[data-design="claymorphism"] select,
[data-design="claymorphism"] textarea {
  border-radius: 18px !important;
  border: none !important;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--primary) 12%, #ddd),
    inset 0 2px 6px rgba(0,0,0,.06) !important;
}
[data-design="claymorphism"] .sidebar {
  border-radius: 0 28px 28px 0;
  box-shadow: 12px 0 0 color-mix(in srgb, var(--primary) 20%, transparent);
}

/* �� 6. Flat Minimal �� */
[data-design="flat-minimal"] {
  --radius: 8px;
  --blur: 0px;
  --shadow-glass: none;
  --glass-border: var(--border);
}
[data-design="flat-minimal"] body {
  background: var(--bg) !important;
}
[data-design="flat-minimal"] body::before,
[data-design="flat-minimal"] body::after { display: none; }
[data-design="flat-minimal"] .stat-card,
[data-design="flat-minimal"] .panel,
[data-design="flat-minimal"] .modal,
[data-design="flat-minimal"] .auth-card,
[data-design="flat-minimal"] .topbar {
  background: var(--bg-elevated) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}
[data-design="flat-minimal"] .btn {
  border-radius: 6px;
  box-shadow: none !important;
}
[data-design="flat-minimal"] .btn-primary {
  background: var(--primary) !important;
}
[data-design="flat-minimal"] .sidebar {
  background: var(--bg-elevated) !important;
  color: var(--text);
  border-right: 1px solid var(--border);
  box-shadow: none;
}
[data-design="flat-minimal"] .sidebar .nav-link { color: var(--text-muted); }
[data-design="flat-minimal"] .sidebar .nav-link:hover,
[data-design="flat-minimal"] .sidebar .nav-link.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}
[data-design="flat-minimal"] .brand { color: var(--text); }
[data-design="flat-minimal"] .badge { border-radius: 4px; border: none; }

/* �� 7. Brutalisme �� */
[data-design="brutalism"] {
  --radius: 0px;
  --font: 'Manrope', sans-serif;
}
[data-design="brutalism"] body {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,.03) 40px, rgba(0,0,0,.03) 41px),
    var(--bg) !important;
}
[data-design="brutalism"] body::before,
[data-design="brutalism"] body::after { display: none; }
[data-design="brutalism"] .stat-card,
[data-design="brutalism"] .panel,
[data-design="brutalism"] .modal,
[data-design="brutalism"] .auth-card,
[data-design="brutalism"] .topbar,
[data-design="brutalism"] .search-results {
  background: #fff !important;
  color: #000;
  backdrop-filter: none !important;
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 #000 !important;
}
[data-design="brutalism"][data-theme-mode="dark"] .stat-card,
[data-design="brutalism"][data-theme-mode="dark"] .panel,
[data-design="brutalism"][data-theme-mode="dark"] .modal,
[data-design="brutalism"][data-theme-mode="dark"] .auth-card,
[data-design="brutalism"][data-theme-mode="dark"] .topbar {
  background: #111 !important;
  color: #fff;
  border-color: #fff !important;
  box-shadow: 6px 6px 0 #fff !important;
}
[data-design="brutalism"] .btn {
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-design="brutalism"] .btn-primary {
  background: #fff200 !important;
  color: #000 !important;
}
[data-design="brutalism"] .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000 !important;
}
[data-design="brutalism"] input:not([type="file"]),
[data-design="brutalism"] select,
[data-design="brutalism"] textarea {
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
[data-design="brutalism"] .sidebar {
  background: #000 !important;
  border-right: 4px solid #fff200;
  border-radius: 0;
}
[data-design="brutalism"] .badge {
  border-radius: 0;
  border: 2px solid #000;
  font-weight: 800;
}
[data-design="brutalism"] .page-header h1 {
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* �� 8. Material Elev� �� */
[data-design="material"] {
  --radius: 12px;
}
[data-design="material"] body::before,
[data-design="material"] body::after { opacity: .2; }
[data-design="material"] .stat-card,
[data-design="material"] .panel,
[data-design="material"] .modal,
[data-design="material"] .auth-card {
  backdrop-filter: none !important;
  background: var(--bg-elevated) !important;
  border: none !important;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 4px 12px rgba(0,0,0,.08),
    0 12px 28px rgba(0,0,0,.06) !important;
}
[data-design="material"] .stat-card:hover,
[data-design="material"] .panel:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 8px 20px rgba(0,0,0,.10),
    0 18px 40px rgba(0,0,0,.08) !important;
}
[data-design="material"] .btn-primary {
  border-radius: 24px;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .04em;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--primary) 35%, transparent), 0 6px 14px color-mix(in srgb, var(--primary) 25%, transparent);
}
[data-design="material"] .topbar {
  background: var(--bg-elevated) !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border-bottom: none;
}
[data-design="material"] .sidebar {
  box-shadow: 2px 0 12px rgba(0,0,0,.12);
}
[data-design="material"] input:focus,
[data-design="material"] select:focus,
[data-design="material"] textarea:focus {
  box-shadow: 0 0 0 2px var(--primary) !important;
  border-color: var(--primary) !important;
}

/* �� 9. Aurora Soft �� */
[data-design="aurora"] {
  --radius: 20px;
}
[data-design="aurora"] body {
  background:
    radial-gradient(800px 500px at 10% 10%, color-mix(in srgb, #a78bfa 35%, transparent), transparent 50%),
    radial-gradient(700px 450px at 90% 20%, color-mix(in srgb, #34d399 30%, transparent), transparent 50%),
    radial-gradient(600px 400px at 50% 90%, color-mix(in srgb, #38bdf8 28%, transparent), transparent 55%),
    var(--body-grad) !important;
}
[data-design="aurora"] .stat-card,
[data-design="aurora"] .panel,
[data-design="aurora"] .modal,
[data-design="aurora"] .auth-card {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.5),
    rgba(167,139,250,.12),
    rgba(52,211,153,.10)
  ) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 36px rgba(100, 80, 180, 0.12) !important;
}
[data-design="aurora"] .btn-primary {
  background: linear-gradient(135deg, #a78bfa, var(--primary), #34d399) !important;
  border: none;
}
[data-design="aurora"] .tab.active {
  background: linear-gradient(135deg, rgba(167,139,250,.25), rgba(52,211,153,.2));
}
[data-design="aurora"] .sidebar {
  background: linear-gradient(180deg, rgba(40,20,70,.85), rgba(10,40,50,.88)) !important;
}

/* �� 10. R�tro Cyber �� */
[data-design="retro-cyber"] {
  --radius: 4px;
}
[data-design="retro-cyber"] body {
  background:
    linear-gradient(rgba(255,0,170,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.05) 1px, transparent 1px),
    radial-gradient(700px 400px at 50% 100%, rgba(255,0,170,.25), transparent 55%),
    linear-gradient(180deg, #0a0014 0%, #120028 50%, #050010 100%) !important;
  background-size: 40px 40px, 40px 40px, auto, auto !important;
  color: #e8f7ff;
}
[data-design="retro-cyber"] body::before {
  background: rgba(255, 0, 170, 0.35);
}
[data-design="retro-cyber"] body::after {
  background: rgba(0, 240, 255, 0.3);
}
[data-design="retro-cyber"] .stat-card,
[data-design="retro-cyber"] .panel,
[data-design="retro-cyber"] .modal,
[data-design="retro-cyber"] .auth-card,
[data-design="retro-cyber"] .topbar {
  background: rgba(10, 0, 30, 0.72) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(255, 0, 170, 0.2),
    0 0 24px rgba(0, 240, 255, 0.15),
    inset 0 0 30px rgba(255, 0, 170, 0.05) !important;
  backdrop-filter: blur(10px);
  border-radius: 4px;
  color: #e8f7ff;
}
[data-design="retro-cyber"] .page-header h1,
[data-design="retro-cyber"] .panel-title h3,
[data-design="retro-cyber"] .stat-value {
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.55);
}
[data-design="retro-cyber"] .btn-primary {
  background: linear-gradient(90deg, #ff00aa, #7b2cbf) !important;
  border: 1px solid #00f0ff !important;
  box-shadow: 0 0 16px rgba(255, 0, 170, 0.45);
  border-radius: 2px;
}
[data-design="retro-cyber"] .btn-secondary {
  background: transparent !important;
  color: #00f0ff !important;
  border: 1px solid #00f0ff !important;
}
[data-design="retro-cyber"] input:not([type="file"]),
[data-design="retro-cyber"] select,
[data-design="retro-cyber"] textarea {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(0, 240, 255, 0.5) !important;
  color: #e8f7ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.12) !important;
  border-radius: 2px;
}
[data-design="retro-cyber"] .sidebar {
  background: linear-gradient(180deg, #140022, #070012) !important;
  border-right: 1px solid #ff00aa;
  box-shadow: 0 0 30px rgba(255, 0, 170, 0.2);
}
[data-design="retro-cyber"] .nav-link:hover,
[data-design="retro-cyber"] .nav-link.active {
  background: rgba(255, 0, 170, 0.15);
  box-shadow: inset 3px 0 0 #00f0ff;
}
[data-design="retro-cyber"] .badge {
  border-radius: 2px;
  border: 1px solid #00f0ff;
  text-shadow: 0 0 6px currentColor;
}
[data-design="retro-cyber"] .text-muted,
[data-design="retro-cyber"] .stat-label,
[data-design="retro-cyber"] label {
  color: #9adfff !important;
}

/* �� 11. Soft UI �� */
[data-design="soft-ui"] { --radius: 22px; }
[data-design="soft-ui"] body { background: #eef2f6 !important; }
[data-design="soft-ui"] body::before,[data-design="soft-ui"] body::after { opacity:.15; }
[data-design="soft-ui"] .stat-card,[data-design="soft-ui"] .panel,[data-design="soft-ui"] .modal,[data-design="soft-ui"] .auth-card,[data-design="soft-ui"] .topbar {
  background: #eef2f6 !important; backdrop-filter: none !important; border: none !important; border-radius: 22px;
  box-shadow: 8px 8px 16px #d5dde8, -8px -8px 16px #ffffff !important;
}
[data-design="soft-ui"] .btn-primary { border-radius: 16px; box-shadow: 4px 4px 10px rgba(0,0,0,.12); }
[data-design="soft-ui"] input:not([type=file]),[data-design="soft-ui"] select,[data-design="soft-ui"] textarea {
  border: none !important; background: #eef2f6 !important; border-radius: 14px;
  box-shadow: inset 4px 4px 8px #d5dde8, inset -4px -4px 8px #fff !important;
}

/* �� 12. Bento Grid �� */
[data-design="bento"] { --radius: 24px; }
[data-design="bento"] .stat-card,[data-design="bento"] .panel,[data-design="bento"] .modal,[data-design="bento"] .auth-card {
  background: color-mix(in srgb, var(--bg-elevated) 92%, #fff) !important; backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
[data-design="bento"] .stat-card { min-height: 110px; }
[data-design="bento"] .grid { gap: 1.1rem; }
[data-design="bento"] .btn { border-radius: 14px; }
[data-design="bento"] .sidebar { border-radius: 0 24px 24px 0; }

/* �� 13. Holographique �� */
[data-design="holographic"] .stat-card,[data-design="holographic"] .panel,[data-design="holographic"] .modal,[data-design="holographic"] .auth-card,[data-design="holographic"] .topbar {
  background: linear-gradient(135deg, rgba(255,106,213,.18), rgba(112,224,255,.18), rgba(195,255,224,.18), rgba(255,255,255,.4)) !important;
  border: 1px solid rgba(255,255,255,.55) !important; backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 10px 40px rgba(160,100,255,.15), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
[data-design="holographic"] .btn-primary {
  background: linear-gradient(90deg,#ff6ad5,#70e0ff,#c3ffe0,#ff6ad5) !important; background-size: 200% 100%;
  animation: holoShift 4s linear infinite; border: none; color: #111 !important;
}
@keyframes holoShift { to { background-position: 200% 0; } }
[data-design="holographic"] .page-header h1 {
  background: linear-gradient(90deg,#ff6ad5,#70e0ff,#a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* �� 14. Mesh Gradient �� */
[data-design="mesh-gradient"] body {
  background:
    radial-gradient(at 20% 20%, #667eea 0, transparent 40%),
    radial-gradient(at 80% 10%, #764ba2 0, transparent 40%),
    radial-gradient(at 50% 80%, #f093fb 0, transparent 45%),
    radial-gradient(at 10% 70%, #4facfe 0, transparent 40%),
    #1a1030 !important;
}
[data-design="mesh-gradient"] .stat-card,[data-design="mesh-gradient"] .panel,[data-design="mesh-gradient"] .modal,[data-design="mesh-gradient"] .auth-card,[data-design="mesh-gradient"] .topbar {
  background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.28) !important;
  backdrop-filter: blur(18px); color: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.2) !important;
}
[data-design="mesh-gradient"] .stat-label,[data-design="mesh-gradient"] label,[data-design="mesh-gradient"] .page-header p { color: rgba(255,255,255,.75) !important; }
[data-design="mesh-gradient"] .btn-primary { background: linear-gradient(135deg,#667eea,#f093fb) !important; border: none; }

/* �� 15. Paper Craft �� */
[data-design="paper"] { --radius: 6px; }
[data-design="paper"] body {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(0,0,0,.03) 24px, rgba(0,0,0,.03) 25px),
    #faf7f2 !important;
}
[data-design="paper"] body::before,[data-design="paper"] body::after { display: none; }
[data-design="paper"] .stat-card,[data-design="paper"] .panel,[data-design="paper"] .modal,[data-design="paper"] .auth-card {
  background: #fffdf8 !important; backdrop-filter: none !important; border: 1px solid #e4d9c8 !important;
  box-shadow: 2px 3px 0 #e4d9c8, 4px 6px 12px rgba(90,70,40,.08) !important; border-radius: 6px;
}
[data-design="paper"] .btn-primary { border-radius: 4px; box-shadow: 2px 2px 0 rgba(0,0,0,.15); }
[data-design="paper"] .sidebar { background: linear-gradient(180deg,#5c4a32,#3d2f1f) !important; }

/* �� 16. Swiss Style �� */
[data-design="swiss"] { --radius: 0; --primary: #e30613; --primary-2: #ff2a2a; }
[data-design="swiss"] body { background: #fff !important; }
[data-design="swiss"] body::before,[data-design="swiss"] body::after { display: none; }
[data-design="swiss"] .stat-card,[data-design="swiss"] .panel,[data-design="swiss"] .modal,[data-design="swiss"] .auth-card,[data-design="swiss"] .topbar {
  background: #fff !important; backdrop-filter: none !important; border: 1px solid #111 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
[data-design="swiss"] .page-header h1 { font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
[data-design="swiss"] .btn-primary { background: #e30613 !important; border-radius: 0; border: none; }
[data-design="swiss"] .btn-secondary { border: 1px solid #111 !important; border-radius: 0; background: #fff !important; }
[data-design="swiss"] .sidebar { background: #111 !important; border-right: 4px solid #e30613; }
[data-design="swiss"] .badge { border-radius: 0; }

/* �� 17. Memphis �� */
[data-design="memphis"] body {
  background:
    radial-gradient(circle at 10% 20%, #ff6b6b33 0 40px, transparent 41px),
    radial-gradient(circle at 80% 30%, #ffe66d55 0 28px, transparent 29px),
    radial-gradient(circle at 30% 80%, #4ecdc455 0 36px, transparent 37px),
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(0,0,0,.03) 12px, rgba(0,0,0,.03) 24px),
    var(--bg) !important;
}
[data-design="memphis"] .stat-card,[data-design="memphis"] .panel,[data-design="memphis"] .modal,[data-design="memphis"] .auth-card {
  background: #fff !important; border: 3px solid #111 !important; border-radius: 18px 4px 22px 8px !important;
  box-shadow: 8px 8px 0 #ff6b6b !important; backdrop-filter: none !important;
}
[data-design="memphis"] .btn-primary { background: #ffe66d !important; color: #111 !important; border: 3px solid #111 !important; border-radius: 999px; box-shadow: 4px 4px 0 #4ecdc4; }
[data-design="memphis"] .sidebar { background: #111 !important; border-right: 6px solid #4ecdc4; }

/* �� 18. Nordic Clean �� */
[data-design="nordic"] { --radius: 12px; }
[data-design="nordic"] body { background: #f7f7f5 !important; }
[data-design="nordic"] body::before,[data-design="nordic"] body::after { opacity: .08; }
[data-design="nordic"] .stat-card,[data-design="nordic"] .panel,[data-design="nordic"] .modal,[data-design="nordic"] .auth-card,[data-design="nordic"] .topbar {
  background: #fff !important; backdrop-filter: none !important; border: 1px solid #ecece8 !important;
  border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
}
[data-design="nordic"] .btn-primary { background: #2f2f2f !important; border-radius: 999px; box-shadow: none; }
[data-design="nordic"] .sidebar { background: #2f2f2f !important; }
[data-design="nordic"] .page-header h1 { font-weight: 600; letter-spacing: -.01em; }

/* �� 19. Dark Luxury �� */
[data-design="luxury"] body {
  background: radial-gradient(800px 400px at 50% 0%, rgba(212,175,55,.12), transparent 50%), #0a0a0a !important;
}
[data-design="luxury"] .stat-card,[data-design="luxury"] .panel,[data-design="luxury"] .modal,[data-design="luxury"] .auth-card,[data-design="luxury"] .topbar {
  background: linear-gradient(180deg,#1a1a1a,#111) !important; border: 1px solid rgba(212,175,55,.35) !important;
  color: #f5f0e6; backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0,0,0,.45) !important; border-radius: 10px;
}
[data-design="luxury"] .btn-primary {
  background: linear-gradient(135deg,#f0d78c,#d4af37 45%,#a88520) !important; color: #111 !important; border: none;
  box-shadow: 0 0 20px rgba(212,175,55,.35);
}
[data-design="luxury"] .page-header h1,[data-design="luxury"] .stat-value { color: #f0d78c; text-shadow: 0 0 20px rgba(212,175,55,.25); }
[data-design="luxury"] .sidebar { background: #080808 !important; border-right: 1px solid rgba(212,175,55,.3); }
[data-design="luxury"] label,[data-design="luxury"] .stat-label { color: #b8a97a !important; }

/* �� 20. Terminal Hacker �� */
[data-design="terminal"] {
  --font: 'Courier New', ui-monospace, monospace;
  --display: 'Courier New', ui-monospace, monospace;
}
[data-design="terminal"] body { background: #050805 !important; color: #00ff66; }
[data-design="terminal"] body::before,[data-design="terminal"] body::after { opacity: .1; background: #00ff66; }
[data-design="terminal"] .stat-card,[data-design="terminal"] .panel,[data-design="terminal"] .modal,[data-design="terminal"] .auth-card,[data-design="terminal"] .topbar {
  background: rgba(0,20,8,.9) !important; border: 1px solid #00ff66 !important; border-radius: 0 !important;
  box-shadow: 0 0 20px rgba(0,255,102,.15), inset 0 0 30px rgba(0,255,102,.04) !important; color: #00ff66; backdrop-filter: none;
  font-family: ui-monospace, monospace;
}
[data-design="terminal"] .btn-primary { background: #00ff66 !important; color: #001a08 !important; border-radius: 0; border: 1px solid #00ff66; }
[data-design="terminal"] .btn-secondary { background: transparent !important; color: #00ff66 !important; border: 1px dashed #00ff66 !important; border-radius: 0; }
[data-design="terminal"] input:not([type=file]),[data-design="terminal"] select,[data-design="terminal"] textarea {
  background: #001a08 !important; border: 1px solid #00ff66 !important; color: #00ff66 !important; border-radius: 0 !important; font-family: inherit;
}
[data-design="terminal"] .sidebar { background: #020802 !important; border-right: 1px solid #00ff66; }
[data-design="terminal"] .badge { border-radius: 0; border: 1px solid #00ff66; background: rgba(0,255,102,.1); color: #00ff66; }

/* �� 21. Pastel Candy �� */
[data-design="pastel-candy"] { --radius: 26px; }
[data-design="pastel-candy"] body {
  background: linear-gradient(135deg,#ffe4f1,#e0f7ff,#fff3c4,#e8ffe8) !important;
}
[data-design="pastel-candy"] .stat-card,[data-design="pastel-candy"] .panel,[data-design="pastel-candy"] .modal,[data-design="pastel-candy"] .auth-card {
  background: rgba(255,255,255,.72) !important; border: none !important; border-radius: 26px;
  box-shadow: 0 10px 30px rgba(255,150,200,.18) !important;
}
[data-design="pastel-candy"] .btn-primary {
  background: linear-gradient(135deg,#ff9ad5,#9adfff,#ffe29a) !important; color: #4a3040 !important; border: none; border-radius: 999px;
}
[data-design="pastel-candy"] .sidebar { background: linear-gradient(180deg,#ffb6d9,#a8e6ff) !important; color: #4a3040; }
[data-design="pastel-candy"] .nav-link { color: #4a3040; }
[data-design="pastel-candy"] .nav-link:hover,[data-design="pastel-candy"] .nav-link.active { background: rgba(255,255,255,.45); color: #222; }

/* �� 22. Chrome Metal �� */
[data-design="chrome"] .stat-card,[data-design="chrome"] .panel,[data-design="chrome"] .modal,[data-design="chrome"] .auth-card,[data-design="chrome"] .topbar {
  background: linear-gradient(180deg,#f5f5f5,#cfcfcf 45%,#eaeaea 55%,#bdbdbd) !important;
  border: 1px solid #9ca3af !important; color: #111; backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.15), 0 10px 24px rgba(0,0,0,.18) !important; border-radius: 12px;
}
[data-design="chrome"] .btn-primary {
  background: linear-gradient(180deg,#eee,#9ca3af 50%,#6b7280) !important; color: #fff !important;
  border: 1px solid #4b5563; text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
[data-design="chrome"] .sidebar { background: linear-gradient(180deg,#3f3f46,#18181b) !important; }
[data-design="chrome"] input:not([type=file]),[data-design="chrome"] select,[data-design="chrome"] textarea {
  background: linear-gradient(180deg,#fff,#e5e7eb) !important; border: 1px solid #9ca3af !important;
}

/* �� 23. Aquarelle �� */
[data-design="watercolor"] body {
  background:
    radial-gradient(500px 320px at 15% 20%, rgba(168,218,220,.55), transparent 60%),
    radial-gradient(420px 280px at 85% 25%, rgba(230,57,70,.28), transparent 55%),
    radial-gradient(480px 300px at 50% 85%, rgba(69,123,157,.35), transparent 55%),
    #f1faee !important;
}
[data-design="watercolor"] .stat-card,[data-design="watercolor"] .panel,[data-design="watercolor"] .modal,[data-design="watercolor"] .auth-card {
  background: rgba(255,255,255,.55) !important; border: none !important; border-radius: 28px;
  backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(69,123,157,.12) !important;
}
[data-design="watercolor"] .btn-primary { background: linear-gradient(135deg,#e63946,#457b9d) !important; border: none; border-radius: 999px; }
[data-design="watercolor"] .sidebar { background: linear-gradient(180deg,rgba(69,123,157,.92),rgba(29,53,87,.95)) !important; }

/* �� 24. Bauhaus �� */
[data-design="bauhaus"] { --radius: 0; }
[data-design="bauhaus"] body {
  background:
    linear-gradient(#e63946 0 12px, transparent 12px) 0 0 / 100% 80px,
    linear-gradient(90deg,#457b9d 0 12px, transparent 12px) 0 0 / 80px 100%,
    #f1faee !important;
}
[data-design="bauhaus"] .stat-card,[data-design="bauhaus"] .panel,[data-design="bauhaus"] .modal,[data-design="bauhaus"] .auth-card {
  background: #fff !important; border: 4px solid #111 !important; border-radius: 0 !important;
  box-shadow: 12px 12px 0 #e63946 !important; backdrop-filter: none !important;
}
[data-design="bauhaus"] .btn-primary { background: #e63946 !important; border-radius: 0; border: 3px solid #111; }
[data-design="bauhaus"] .btn-secondary { background: #457b9d !important; color: #fff !important; border-radius: 999px; border: 3px solid #111; }
[data-design="bauhaus"] .sidebar { background: #111 !important; }
[data-design="bauhaus"] .brand-mark { border-radius: 0; background: #e63946; }

/* �� 25. Y2K Bubble �� */
[data-design="y2k"] { --radius: 30px; }
[data-design="y2k"] body {
  background: radial-gradient(circle at 20% 20%, #ff90e8, transparent 40%), radial-gradient(circle at 80% 30%, #c0f0ff, transparent 40%), linear-gradient(180deg,#fff0fb,#e8fbff) !important;
}
[data-design="y2k"] .stat-card,[data-design="y2k"] .panel,[data-design="y2k"] .modal,[data-design="y2k"] .auth-card {
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,144,232,.25), rgba(192,240,255,.35)) !important;
  border: 2px solid rgba(255,255,255,.8) !important; border-radius: 30px;
  box-shadow: 0 12px 30px rgba(255,120,200,.2), inset 0 2px 10px rgba(255,255,255,.8) !important;
}
[data-design="y2k"] .btn-primary {
  background: linear-gradient(180deg,#fff,#ff90e8) !important; color: #5a1045 !important; border: 2px solid #fff;
  border-radius: 999px; box-shadow: 0 6px 0 #d46bc0, 0 10px 20px rgba(255,100,180,.3);
}
[data-design="y2k"] .sidebar { background: linear-gradient(180deg,#ff90e8,#7dd3fc) !important; color: #3b0a2e; }
[data-design="y2k"] .nav-link { color: #3b0a2e; }

/* �� 26. Spatial Vision �� */
[data-design="spatial"] { --radius: 28px; --blur: 40px; }
[data-design="spatial"] body {
  background: radial-gradient(900px 500px at 50% 0%, rgba(90,200,250,.25), transparent 50%), linear-gradient(180deg,#1c1c1e,#000) !important;
}
[data-design="spatial"] .stat-card,[data-design="spatial"] .panel,[data-design="spatial"] .modal,[data-design="spatial"] .auth-card,[data-design="spatial"] .topbar {
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(40px) saturate(180%); border-radius: 28px; color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
[data-design="spatial"] .btn-primary { background: rgba(90,200,250,.85) !important; color: #001018 !important; border: none; border-radius: 18px; }
[data-design="spatial"] .sidebar {
  background: rgba(20,20,22,.55) !important; backdrop-filter: blur(40px); border-right: 1px solid rgba(255,255,255,.12);
}
[data-design="spatial"] label,[data-design="spatial"] .stat-label { color: rgba(255,255,255,.7) !important; }

/* �� 27. Comic Pop �� */
[data-design="comic"] { --radius: 8px; }
[data-design="comic"] body {
  background:
    radial-gradient(circle, #111 1.2px, transparent 1.3px) 0 0 / 12px 12px,
    #fffef5 !important;
}
[data-design="comic"] .stat-card,[data-design="comic"] .panel,[data-design="comic"] .modal,[data-design="comic"] .auth-card {
  background: #fff !important; border: 4px solid #111 !important; border-radius: 8px !important;
  box-shadow: 6px 6px 0 #111 !important; backdrop-filter: none !important;
}
[data-design="comic"] .btn-primary { background: #ffeb3b !important; color: #111 !important; border: 3px solid #111 !important; border-radius: 8px; box-shadow: 3px 3px 0 #111; font-weight: 900; }
[data-design="comic"] .btn-secondary { background: #fff !important; border: 3px solid #111 !important; box-shadow: 3px 3px 0 #111; }
[data-design="comic"] .sidebar { background: #111 !important; border-right: 4px solid #ffeb3b; }
[data-design="comic"] .page-header h1 { text-transform: uppercase; font-weight: 900; -webkit-text-stroke: .5px #111; }

/* �� 28. Frosted Dense �� */
[data-design="frosted-dense"] { --blur: 36px; --radius: 20px; }
[data-design="frosted-dense"] .stat-card,[data-design="frosted-dense"] .panel,[data-design="frosted-dense"] .modal,[data-design="frosted-dense"] .auth-card,[data-design="frosted-dense"] .topbar,[data-design="frosted-dense"] .search-box input {
  background: rgba(255,255,255,.72) !important; backdrop-filter: blur(36px) saturate(200%);
  border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 8px 32px rgba(15,23,42,.08) !important; border-radius: 20px;
}
[data-design="frosted-dense"][data-theme-mode="dark"] .stat-card,
[data-design="frosted-dense"][data-theme-mode="dark"] .panel,
[data-design="frosted-dense"][data-theme-mode="dark"] .topbar {
  background: rgba(15,23,42,.72) !important; border-color: rgba(255,255,255,.12) !important;
}
[data-design="frosted-dense"] .sidebar { backdrop-filter: blur(36px) saturate(180%); }

/* �� 29. Neon Outline �� */
[data-design="neon-outline"] body { background: #0b0b10 !important; color: #eaeaff; }
[data-design="neon-outline"] .stat-card,[data-design="neon-outline"] .panel,[data-design="neon-outline"] .modal,[data-design="neon-outline"] .auth-card,[data-design="neon-outline"] .topbar {
  background: rgba(10,10,16,.85) !important; border: 1px solid #39ff14 !important; border-radius: 12px;
  box-shadow: 0 0 0 1px #ff00ff55, 0 0 24px rgba(57,255,20,.2), inset 0 0 24px rgba(255,0,255,.05) !important; color: #eaeaff;
}
[data-design="neon-outline"] .btn-primary { background: transparent !important; color: #39ff14 !important; border: 2px solid #39ff14 !important; box-shadow: 0 0 16px rgba(57,255,20,.4); }
[data-design="neon-outline"] .btn-secondary { background: transparent !important; color: #ff00ff !important; border: 2px solid #ff00ff !important; }
[data-design="neon-outline"] .sidebar { background: #07070c !important; border-right: 1px solid #ff00ff; box-shadow: 0 0 30px rgba(255,0,255,.15); }
[data-design="neon-outline"] .page-header h1 { color: #39ff14; text-shadow: 0 0 12px rgba(57,255,20,.6); }
[data-design="neon-outline"] input:not([type=file]),[data-design="neon-outline"] select,[data-design="neon-outline"] textarea {
  background: #0b0b12 !important; border: 1px solid #39ff14 !important; color: #eaeaff !important; box-shadow: 0 0 10px rgba(57,255,20,.15) !important;
}

/* �� 30. Editorial Mag �� */
[data-design="editorial"] {
  --display: Georgia, 'Times New Roman', serif;
  --radius: 2px;
}
[data-design="editorial"] body { background: #faf9f7 !important; }
[data-design="editorial"] body::before,[data-design="editorial"] body::after { display: none; }
[data-design="editorial"] .page-header h1,[data-design="editorial"] .panel-title h3,[data-design="editorial"] .stat-value {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -.02em;
}
[data-design="editorial"] .stat-card,[data-design="editorial"] .panel,[data-design="editorial"] .modal,[data-design="editorial"] .auth-card,[data-design="editorial"] .topbar {
  background: #fff !important; backdrop-filter: none !important; border: none !important; border-top: 3px solid #111 !important;
  border-radius: 0; box-shadow: 0 1px 0 #e7e2da !important;
}
[data-design="editorial"] .btn-primary { background: #111 !important; border-radius: 0; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
[data-design="editorial"] .btn-secondary { border: 1px solid #111 !important; border-radius: 0; background: transparent !important; }
[data-design="editorial"] .sidebar { background: #111 !important; border-right: 1px solid #c45c26; }
[data-design="editorial"] .badge { border-radius: 0; border-bottom: 2px solid #c45c26; }

/* �� Cartes s�lecteur design �� */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
  margin-bottom: 1rem;
}
.design-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: .85rem;
  background: var(--glass);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: left;
  color: inherit;
  width: 100%;
  font: inherit;
  min-height: 140px;
}
.design-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glass);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-border));
}
.design-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-glass);
}
.design-card input { position: absolute; opacity: 0; pointer-events: none; }
.design-card-icon {
  font-size: 1.4rem;
  line-height: 1;
  opacity: .9;
}
.design-card-name { font-weight: 800; font-size: .92rem; }
.design-card-desc {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.design-swatches { display: flex; gap: .3rem; margin-top: auto; padding-top: .4rem; }
.design-swatches span {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.4);
}
.design-card-check {
  position: absolute; top: .55rem; right: .55rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--primary); color: #fff; font-size: .7rem; font-weight: 800;
}
.design-card.is-active .design-card-check { display: grid; }

/* Bordure champs (configurable, prioritaire sur les designs) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  border: 1px solid var(--input-border, #000000) !important;
}
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:focus,
textarea:focus {
  border-color: var(--input-border, #000000) !important;
}