/* ============================================================
   HARMONIA.CSS — Feuille de style commune v5
   Styles visuels : glass · neo · soft · neon
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Space+Mono:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');

/* ============================================================
   VARIABLES BASE
   ============================================================ */
:root {
  --bg:#0f0f1a; --bg2:#16162a; --bg3:#1e1e38; --card:#1a1a30;
  --border:#2a2a4a; --accent:#a855f7; --accent2:#3b82f6; --accent3:#06d6a0;
  --text:#f0f0ff; --text2:#8888aa; --text3:#5555aa;
  --gold:#fbbf24; --red:#ef4444; --r:16px; --rs:10px;
}
body.theme-light  { --bg:#f8fafc;--bg2:#fff;--bg3:#f1f5f9;--card:#fff;--border:#e2e8f0;--accent:#8b5cf6;--accent2:#3b82f6;--accent3:#10b981;--text:#1e293b;--text2:#64748b;--text3:#94a3b8; }
body.theme-blue   { --accent:#3b82f6;--accent2:#60a5fa; }
body.theme-purple { --accent:#a855f7;--accent2:#c084fc; }
body.theme-candy  { --accent:#ec4899;--accent2:#f472b6;--bg:#0f0a10;--bg2:#1a0f1a;--bg3:#2a0f1a;--card:#1a0f18;--border:#3a1a2a;--text:#f8e8f0;--text2:#cc88aa;--text3:#664455; }
body.theme-green  { --accent:#10b981;--accent2:#34d399; }
body.theme-orange { --accent:#f59e0b;--accent2:#fbbf24; }

/* ============================================================
   ① GLASSMORPHISM
   ============================================================ */
body.vstyle-glass {
  --bg:#0a0612 !important; --bg2:#100a1e !important; --bg3:#1a0f2e !important;
  --card:rgba(255,255,255,0.06) !important; --border:rgba(255,255,255,0.12) !important;
  --text:#f0eaff !important; --text2:#9d8fc0 !important; --text3:#5a4e7a !important;
  --accent:#a78bfa !important; --accent2:#60a5fa !important; --accent3:#34d399 !important;
  background:#0a0612 !important;
  background-image: radial-gradient(ellipse at 20% 20%, rgba(139,92,246,0.25) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 80%, rgba(59,130,246,0.2) 0%, transparent 50%) !important;
}
body.vstyle-glass .hdr {
  background:rgba(15,8,30,0.7) !important; border-bottom:1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important;
}
body.vstyle-glass .tcard,
body.vstyle-glass .user-card,
body.vstyle-glass .acard,
body.vstyle-glass .guide-section,
body.vstyle-glass .dem-card,
body.vstyle-glass .r-card,
body.vstyle-glass .level-card,
body.vstyle-glass .chart-wrap,
body.vstyle-glass .stat-card {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
body.vstyle-glass .tcard.dn { background:rgba(52,211,153,0.12) !important; border-color:rgba(52,211,153,0.3) !important; }
body.vstyle-glass .f-goal { background:rgba(251,191,36,0.06) !important; border-color:rgba(251,191,36,0.3) !important; }
body.vstyle-glass .tico { background:rgba(255,255,255,0.08) !important; border-radius:12px !important; }
body.vstyle-glass .u-av { background:rgba(167,139,250,0.15) !important; }
body.vstyle-glass .tbtn.on { color:#a78bfa !important; border-bottom-color:#a78bfa !important; }
body.vstyle-glass .daybtn.on { background:rgba(167,139,250,0.3) !important; border-color:rgba(167,139,250,0.5) !important; }
body.vstyle-glass .csbtn.on { background:rgba(167,139,250,0.3) !important; border-color:rgba(167,139,250,0.5) !important; }
body.vstyle-glass .nbtn.on { color:#a78bfa !important; }
body.vstyle-glass .bnav { background:rgba(10,6,18,0.85) !important; backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important; border-top-color:rgba(255,255,255,0.08) !important; }
body.vstyle-glass .ainp { background:rgba(255,255,255,0.05) !important; border-color:rgba(255,255,255,0.1) !important; }
body.vstyle-glass .lock-btn-sm { background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.12) !important; }
body.vstyle-glass .msg-banner { background:rgba(167,139,250,0.1) !important; border-color:rgba(167,139,250,0.3) !important; }
body.vstyle-glass .defi-card { background:rgba(167,139,250,0.08) !important; border-color:rgba(167,139,250,0.3) !important; }
body.vstyle-glass .tabs { background:rgba(10,6,18,0.6) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; }

/* ============================================================
   ② NÉOBRUTALISM
   ============================================================ */
body.vstyle-neo {
  --bg:#f5f0e8 !important; --bg2:#fffef5 !important; --bg3:#ede8dc !important;
  --card:#ffffff !important; --border:#1a1a1a !important;
  --text:#1a1a1a !important; --text2:#444444 !important; --text3:#888888 !important;
  --accent:#1a1a1a !important; --accent2:#1a1a1a !important; --accent3:#22c55e !important;
  --gold:#ffe600 !important; --red:#ff2d55 !important;
  background:#f5f0e8 !important;
  font-family:'Nunito',sans-serif !important;
}
body.vstyle-neo * { border-radius:0 !important; }
body.vstyle-neo .hdr {
  background:#fffef5 !important; border-bottom:3px solid #1a1a1a !important;
  box-shadow:0 3px 0 #1a1a1a !important;
}
body.vstyle-neo .atitle { font-size:18px !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:1px !important; }
body.vstyle-neo .atitle span { color:#1a1a1a !important; }
body.vstyle-neo .smain { color:#1a1a1a !important; font-size:26px !important; font-weight:900 !important; }
body.vstyle-neo .spfill,.vstyle-neo .pfill { background:#ffe600 !important; }
body.vstyle-neo .sptrack,.vstyle-neo .ptrack { background:#ede8dc !important; border:1.5px solid #1a1a1a !important; }
body.vstyle-neo .tcard {
  border:2.5px solid #1a1a1a !important; box-shadow:3px 3px 0 #1a1a1a !important;
  margin-bottom:8px !important; background:#fff !important;
}
body.vstyle-neo .tcard.dn { background:#f0fdf4 !important; border-color:#1a1a1a !important; box-shadow:3px 3px 0 #22c55e !important; }
body.vstyle-neo .tcard:active { transform:translate(3px,3px) !important; box-shadow:0 0 0 #1a1a1a !important; }
body.vstyle-neo .tchk { border:2px solid #1a1a1a !important; background:#ede8dc !important; }
body.vstyle-neo .tcard.dn .tchk { background:#ffe600 !important; border-color:#1a1a1a !important; }
body.vstyle-neo .tbadge { color:#1a1a1a !important; font-size:13px !important; font-weight:900 !important; }
body.vstyle-neo .tico { background:#ede8dc !important; border:2px solid #1a1a1a !important; }
body.vstyle-neo .daybtn { border:2px solid #1a1a1a !important; background:#ede8dc !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .daybtn.on { background:#ffe600 !important; color:#1a1a1a !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .daybtn.has { border-color:#1a1a1a !important; background:#d1fae5 !important; }
body.vstyle-neo .csbtn { border:2px solid #1a1a1a !important; background:#ede8dc !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .csbtn.on { background:#ffe600 !important; color:#1a1a1a !important; }
body.vstyle-neo .tbtn.on { color:#1a1a1a !important; border-bottom:3px solid #ffe600 !important; font-weight:900 !important; }
body.vstyle-neo .nbtn.on { color:#1a1a1a !important; }
body.vstyle-neo .user-card { border:2.5px solid #1a1a1a !important; box-shadow:4px 4px 0 #1a1a1a !important; background:#fff !important; }
body.vstyle-neo .user-card:active { transform:translate(4px,4px) !important; box-shadow:0 0 0 !important; }
body.vstyle-neo .u-av { border-radius:0 !important; background:#ffe600 !important; border:2px solid #1a1a1a !important; }
body.vstyle-neo .lock-btn-sm { border:2.5px solid #1a1a1a !important; background:#fff !important; box-shadow:3px 3px 0 #1a1a1a !important; color:#1a1a1a !important; }
body.vstyle-neo .lock-btn-sm:active { transform:translate(3px,3px) !important; box-shadow:none !important; }
body.vstyle-neo .pkey { border:2.5px solid #1a1a1a !important; background:#fff !important; box-shadow:3px 3px 0 #1a1a1a !important; }
body.vstyle-neo .pkey:active { transform:translate(3px,3px) !important; box-shadow:none !important; }
body.vstyle-neo .pdot.on { background:#ffe600 !important; border-color:#1a1a1a !important; }
body.vstyle-neo .f-goal { border:2.5px solid #ffe600 !important; box-shadow:3px 3px 0 #1a1a1a !important; }
body.vstyle-neo .bnav { background:#fffef5 !important; border-top:3px solid #1a1a1a !important; }
body.vstyle-neo .acard { border:2px solid #1a1a1a !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .ainp { border:2px solid #1a1a1a !important; }
body.vstyle-neo .dem-card { border:2px solid #1a1a1a !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .r-card { border:2.5px solid #1a1a1a !important; box-shadow:3px 3px 0 #1a1a1a !important; }
body.vstyle-neo .r-card.ul { background:#fffbcc !important; }
body.vstyle-neo .streak-badge { background:#ffe600 !important; color:#1a1a1a !important; border:1px solid #1a1a1a !important; }
body.vstyle-neo .dem-btn { border:2px solid #1a1a1a !important; background:#fffbcc !important; color:#1a1a1a !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .toast { background:#ffe600 !important; color:#1a1a1a !important; border:2px solid #1a1a1a !important; box-shadow:3px 3px 0 #1a1a1a !important; }
body.vstyle-neo .ctit { color:#1a1a1a !important; font-size:11px !important; letter-spacing:2px !important; }
body.vstyle-neo .guide-section { border:2px solid #1a1a1a !important; box-shadow:2px 2px 0 #1a1a1a !important; }
body.vstyle-neo .guide-title { color:#1a1a1a !important; }
body.vstyle-neo .astit { color:#1a1a1a !important; }
body.vstyle-neo .level-card,.vstyle-neo .chart-wrap,.vstyle-neo .stat-card,.vstyle-neo .histo-tab { border:2px solid #1a1a1a !important; }
body.vstyle-neo .histo-tab.on { background:#ffe600 !important; color:#1a1a1a !important; border-color:#1a1a1a !important; }
body.vstyle-neo .level-prog-fill,.vstyle-neo .spfill,.vstyle-neo .pfill,.vstyle-neo .r-prog-fill { background:#ffe600 !important; }
body.vstyle-neo .logo-img { border:3px solid #1a1a1a !important; box-shadow:4px 4px 0 #1a1a1a !important; }

/* ============================================================
   ③ SOFT PASTEL
   ============================================================ */
body.vstyle-soft {
  --bg:#fdf6ff !important; --bg2:#fff !important; --bg3:#f3e8ff !important;
  --card:#ffffff !important; --border:#e9d5ff !important;
  --text:#3d1c6e !important; --text2:#7c3aed !important; --text3:#c4b5fd !important;
  --accent:#a855f7 !important; --accent2:#ec4899 !important; --accent3:#22c55e !important;
  --gold:#f59e0b !important; --red:#f43f5e !important;
  background:#fdf6ff !important;
}
body.vstyle-soft .hdr {
  background:#fff !important; border-bottom:1px solid #f3e8ff !important;
  box-shadow:0 2px 16px rgba(168,85,247,0.08) !important;
}
body.vstyle-soft .tcard {
  border-radius:18px !important; border:1.5px solid #f3e8ff !important;
  box-shadow:0 4px 16px rgba(168,85,247,0.07) !important; background:#fff !important;
}
body.vstyle-soft .tcard.dn { background:#f0fdf6 !important; border-color:#bbf7d0 !important; box-shadow:0 4px 16px rgba(34,197,94,0.1) !important; }
body.vstyle-soft .tico { border-radius:14px !important; }
body.vstyle-soft .user-card { border-radius:20px !important; border:1.5px solid #f3e8ff !important; box-shadow:0 6px 20px rgba(168,85,247,0.1) !important; }
body.vstyle-soft .u-av { border-radius:16px !important; }
body.vstyle-soft .daybtn { border-radius:14px !important; border-color:#f3e8ff !important; }
body.vstyle-soft .daybtn.on { background:linear-gradient(135deg,#a855f7,#ec4899) !important; border-color:transparent !important; box-shadow:0 4px 12px rgba(168,85,247,0.3) !important; }
body.vstyle-soft .csbtn { border-radius:20px !important; }
body.vstyle-soft .csbtn.on { background:linear-gradient(135deg,#a855f7,#ec4899) !important; border-color:transparent !important; }
body.vstyle-soft .tbtn.on { color:#a855f7 !important; border-bottom-color:#a855f7 !important; }
body.vstyle-soft .nbtn.on { color:#a855f7 !important; }
body.vstyle-soft .spfill,.vstyle-soft .pfill { background:linear-gradient(90deg,#a855f7,#ec4899) !important; }
body.vstyle-soft .lock-btn-sm { border-radius:16px !important; border-color:#f3e8ff !important; box-shadow:0 4px 12px rgba(168,85,247,0.08) !important; }
body.vstyle-soft .pkey { border-radius:18px !important; border-color:#f3e8ff !important; box-shadow:0 4px 12px rgba(168,85,247,0.08) !important; }
body.vstyle-soft .pdot.on { background:linear-gradient(135deg,#a855f7,#ec4899) !important; border-color:transparent !important; }
body.vstyle-soft .f-goal { border-radius:16px !important; border-color:#fde68a !important; background:#fffbeb !important; }
body.vstyle-soft .defi-card { border-radius:20px !important; background:linear-gradient(135deg,#fdf4ff,#fff) !important; border-color:#e9d5ff !important; }
body.vstyle-soft .r-card { border-radius:18px !important; border-color:#f3e8ff !important; box-shadow:0 4px 14px rgba(168,85,247,0.07) !important; }
body.vstyle-soft .r-card.ul { background:linear-gradient(135deg,#fffbeb,#fef3c7) !important; border-color:#fde68a !important; }
body.vstyle-soft .acard,.vstyle-soft .guide-section { border-radius:16px !important; border-color:#f3e8ff !important; }
body.vstyle-soft .level-card,.vstyle-soft .chart-wrap,.vstyle-soft .stat-card { border-radius:16px !important; border-color:#f3e8ff !important; }
body.vstyle-soft .dem-card { border-radius:16px !important; border-color:#f3e8ff !important; }
body.vstyle-soft .msg-banner { border-radius:16px !important; background:#fdf4ff !important; border-color:#e9d5ff !important; }
body.vstyle-soft .bnav { box-shadow:0 -4px 20px rgba(168,85,247,0.08) !important; border-top-color:#f3e8ff !important; }
body.vstyle-soft .toast { background:linear-gradient(135deg,#a855f7,#ec4899) !important; color:#fff !important; border-radius:20px !important; }
body.vstyle-soft .streak-badge { background:#fef9c3 !important; color:#854d0e !important; border-radius:8px !important; }
body.vstyle-soft .histo-tab { border-radius:20px !important; }
body.vstyle-soft .histo-tab.on { background:linear-gradient(135deg,#a855f7,#ec4899) !important; border-color:transparent !important; }
body.vstyle-soft .level-prog-fill { background:linear-gradient(90deg,#a855f7,#ec4899) !important; }
body.vstyle-soft .logo-img { border-radius:24px !important; box-shadow:0 8px 24px rgba(168,85,247,0.2) !important; }

/* ============================================================
   ④ NEON TERMINAL
   ============================================================ */
body.vstyle-neon {
  --bg:#050a0e !important; --bg2:#080f14 !important; --bg3:#0d1a20 !important;
  --card:#0d1a20 !important; --border:rgba(0,255,157,0.2) !important;
  --text:#c0ffd8 !important; --text2:#00ff9d !important; --text3:rgba(0,255,157,0.4) !important;
  --accent:#00ff9d !important; --accent2:#00cfff !important; --accent3:#00ff9d !important;
  --gold:#ffe600 !important; --red:#ff2d55 !important;
  background:#050a0e !important;
}
body.vstyle-neon * { font-family:'Courier Prime','Courier New',monospace !important; }
body.vstyle-neon .hdr {
  background:#080f14 !important; border-bottom:1px solid rgba(0,255,157,0.2) !important;
  box-shadow:0 0 20px rgba(0,255,157,0.08) !important;
}
body.vstyle-neon .atitle { color:#00ff9d !important; text-shadow:0 0 10px rgba(0,255,157,0.5) !important; letter-spacing:2px !important; }
body.vstyle-neon .atitle span { color:#00ff9d !important; }
body.vstyle-neon .smain { color:#00ff9d !important; text-shadow:0 0 15px rgba(0,255,157,0.6) !important; }
body.vstyle-neon .spfill,.vstyle-neon .pfill { background:#00ff9d !important; box-shadow:0 0 8px rgba(0,255,157,0.5) !important; }
body.vstyle-neon .sptrack,.vstyle-neon .ptrack { background:rgba(0,255,157,0.1) !important; border:1px solid rgba(0,255,157,0.15) !important; }
body.vstyle-neon .tcard { border-radius:4px !important; border:1px solid rgba(0,255,157,0.2) !important; background:#0d1a20 !important; }
body.vstyle-neon .tcard.dn { background:rgba(0,255,157,0.06) !important; border-color:rgba(0,255,157,0.4) !important; }
body.vstyle-neon .tcard.cl:active { border-color:#00ff9d !important; box-shadow:0 0 10px rgba(0,255,157,0.2) !important; }
body.vstyle-neon .tname { letter-spacing:0.5px !important; }
body.vstyle-neon .tcard.dn .tname { color:#00ff9d !important; }
body.vstyle-neon .tico { background:rgba(0,255,157,0.08) !important; border-radius:4px !important; border:1px solid rgba(0,255,157,0.15) !important; }
body.vstyle-neon .tchk { border-color:rgba(0,255,157,0.3) !important; background:transparent !important; border-radius:2px !important; }
body.vstyle-neon .tcard.dn .tchk { background:rgba(0,255,157,0.2) !important; border-color:#00ff9d !important; }
body.vstyle-neon .tbadge { color:#00ff9d !important; }
body.vstyle-neon .daybtn { border-radius:4px !important; border:1px solid rgba(0,255,157,0.2) !important; background:#0d1a20 !important; }
body.vstyle-neon .daybtn.on { background:rgba(0,255,157,0.15) !important; border-color:#00ff9d !important; box-shadow:0 0 8px rgba(0,255,157,0.3) !important; color:#00ff9d !important; }
body.vstyle-neon .daybtn.has { border-color:rgba(0,255,157,0.5) !important; color:#00ff9d !important; }
body.vstyle-neon .csbtn { border-radius:4px !important; border:1px solid rgba(0,255,157,0.2) !important; }
body.vstyle-neon .csbtn.on { background:rgba(0,255,157,0.15) !important; border-color:#00ff9d !important; color:#00ff9d !important; }
body.vstyle-neon .tabs,.vstyle-neon .bnav { background:#080f14 !important; border-color:rgba(0,255,157,0.15) !important; }
body.vstyle-neon .tbtn.on { color:#00ff9d !important; border-bottom-color:#00ff9d !important; }
body.vstyle-neon .nbtn.on { color:#00ff9d !important; }
body.vstyle-neon .user-card { border-radius:4px !important; border:1px solid rgba(0,255,157,0.2) !important; background:#0d1a20 !important; }
body.vstyle-neon .user-card:hover { border-color:#00ff9d !important; box-shadow:0 0 15px rgba(0,255,157,0.15) !important; }
body.vstyle-neon .u-av { border-radius:4px !important; background:rgba(0,255,157,0.08) !important; border:1px solid rgba(0,255,157,0.2) !important; }
body.vstyle-neon .lock-btn-sm { border-radius:4px !important; border:1px solid rgba(0,255,157,0.2) !important; background:#0d1a20 !important; }
body.vstyle-neon .pkey { border-radius:4px !important; border:1px solid rgba(0,255,157,0.2) !important; background:#0d1a20 !important; }
body.vstyle-neon .pkey:active { background:rgba(0,255,157,0.12) !important; box-shadow:0 0 8px rgba(0,255,157,0.3) !important; }
body.vstyle-neon .pdot.on { background:#00ff9d !important; border-color:#00ff9d !important; box-shadow:0 0 8px rgba(0,255,157,0.6) !important; }
body.vstyle-neon .stitle { color:#00ff9d !important; text-shadow:0 0 10px rgba(0,255,157,0.4) !important; }
body.vstyle-neon .f-goal { border-color:rgba(0,255,157,0.3) !important; background:rgba(0,255,157,0.04) !important; border-radius:4px !important; }
body.vstyle-neon .f-title,.vstyle-neon .f-pts { color:#00ff9d !important; }
body.vstyle-neon .defi-card { border-radius:4px !important; border-color:rgba(0,255,157,0.3) !important; background:rgba(0,255,157,0.05) !important; }
body.vstyle-neon .defi-title { color:#00ff9d !important; }
body.vstyle-neon .dem-btn { border-color:rgba(0,255,157,0.4) !important; color:#00ff9d !important; background:rgba(0,255,157,0.06) !important; }
body.vstyle-neon .r-card { border-radius:4px !important; border-color:rgba(0,255,157,0.2) !important; background:#0d1a20 !important; }
body.vstyle-neon .r-card.ul { border-color:rgba(255,230,0,0.5) !important; background:rgba(255,230,0,0.05) !important; }
body.vstyle-neon .r-pts { color:#ffe600 !important; text-shadow:0 0 6px rgba(255,230,0,0.4) !important; }
body.vstyle-neon .acard,.vstyle-neon .guide-section { border-radius:4px !important; border-color:rgba(0,255,157,0.15) !important; background:#0d1a20 !important; }
body.vstyle-neon .guide-title { color:#00ff9d !important; text-shadow:0 0 8px rgba(0,255,157,0.3) !important; }
body.vstyle-neon .level-card,.vstyle-neon .chart-wrap,.vstyle-neon .stat-card { border-radius:4px !important; border-color:rgba(0,255,157,0.15) !important; background:#0d1a20 !important; }
body.vstyle-neon .level-prog-fill { background:#00ff9d !important; box-shadow:0 0 8px rgba(0,255,157,0.5) !important; }
body.vstyle-neon .stat-val { color:#00ff9d !important; text-shadow:0 0 8px rgba(0,255,157,0.4) !important; }
body.vstyle-neon .histo-tab { border-radius:4px !important; border-color:rgba(0,255,157,0.2) !important; }
body.vstyle-neon .histo-tab.on { background:rgba(0,255,157,0.15) !important; border-color:#00ff9d !important; color:#00ff9d !important; }
body.vstyle-neon .dem-card { border-radius:4px !important; border-color:rgba(0,255,157,0.15) !important; }
body.vstyle-neon .msg-banner { border-radius:4px !important; background:rgba(0,255,157,0.05) !important; border-color:rgba(0,255,157,0.2) !important; }
body.vstyle-neon .streak-badge { background:rgba(255,230,0,0.1) !important; color:#ffe600 !important; text-shadow:0 0 6px rgba(255,230,0,0.4) !important; }
body.vstyle-neon .toast { background:#00ff9d !important; color:#050a0e !important; border-radius:4px !important; font-weight:900 !important; box-shadow:0 0 20px rgba(0,255,157,0.5) !important; }
body.vstyle-neon .logo { color:#00ff9d !important; text-shadow:0 0 20px rgba(0,255,157,0.6) !important; }
body.vstyle-neon .ctit { color:rgba(0,255,157,0.5) !important; }
body.vstyle-neon .astit { color:#00ff9d !important; }
body.vstyle-neon .logo-img { border:1px solid rgba(0,255,157,0.3) !important; box-shadow:0 0 20px rgba(0,255,157,0.2) !important; border-radius:8px !important; }
body.vstyle-neon .ainp { border-color:rgba(0,255,157,0.2) !important; background:#080f14 !important; color:#c0ffd8 !important; }
body.vstyle-neon .ainp:focus { border-color:#00ff9d !important; box-shadow:0 0 8px rgba(0,255,157,0.2) !important; }
body.vstyle-neon .lock-sub { color:rgba(0,255,157,0.5) !important; letter-spacing:2px !important; }

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body>*{position:relative;z-index:1}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;overflow-x:hidden}
.sc{display:none}.sc.on{display:flex;flex-direction:column;min-height:100vh}
.cw{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}

/* LOCK */
.logo{font-family:'Space Mono',monospace;font-size:28px;font-weight:700;color:var(--text);margin-bottom:4px;text-align:center}
.logo span{color:var(--accent)}
.logo-img{width:96px;height:96px;border-radius:24px;object-fit:contain;margin-bottom:10px;mix-blend-mode:normal;background:transparent}
.lock-sub{font-size:12px;font-weight:700;color:var(--text3);margin-bottom:28px;text-align:center}
.welcome-grid{display:flex;flex-direction:column;gap:12px;width:100%;max-width:380px;margin-bottom:16px}
.user-card{background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .2s}
.user-card:active{transform:scale(.95)}
.u-av{font-size:32px;width:60px;height:60px;background:var(--bg3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.u-name{font-weight:900;font-size:14px}
.u-pts{font-size:10px;font-weight:700;color:var(--text3)}
.u-level{font-size:10px;font-weight:900;padding:2px 8px;border-radius:10px;margin-top:2px}
.lock-btns{display:flex;gap:10px;width:100%;max-width:380px}
.lock-btn-sm{flex:1;padding:12px;border-radius:var(--rs);border:1px solid var(--border);background:var(--card);cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--text2);text-align:center;transition:all .15s}
.lock-btn-sm:active{transform:scale(.97)}

/* PIN */
.stitle{font-size:18px;font-weight:900;color:var(--text);margin-bottom:20px;text-align:center}
.pdots{display:flex;gap:14px;margin-bottom:8px}
.pdot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);background:var(--bg3);transition:all .15s}
.pdot.on{background:var(--accent);border-color:var(--accent)}
.pdot.err{background:var(--red);border-color:var(--red)}
.perr{font-size:12px;font-weight:800;color:var(--red);min-height:20px;text-align:center;margin-bottom:16px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:280px}
.pkey{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 10px;font-size:22px;font-weight:900;color:var(--text);text-align:center;cursor:pointer;transition:all .1s;font-family:'Space Mono',monospace}
.pkey:active{background:var(--bg3);transform:scale(.94)}
.pkey.del{font-size:18px;color:var(--text2)}.pkey.emp{background:transparent;border-color:transparent;cursor:default}
.back{font-size:13px;font-weight:800;color:var(--text3);cursor:pointer;padding:10px 20px;margin-top:8px}

/* GUIDE */
.guide-wrap{width:100%;max-width:420px;padding:0 4px}
.guide-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}
.guide-title{font-size:14px;font-weight:900;color:var(--accent);margin-bottom:8px}
.guide-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--text2);line-height:1.4}
.guide-ico{font-size:18px;flex-shrink:0;margin-top:-1px}

/* HEADER */
.hdr{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:100}
.htop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.atitle{font-weight:900;font-size:16px;color:var(--text)}
.atitle span{color:var(--accent)}
.hright{display:flex;align-items:center;gap:8px}
.perso-box{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.theme-panel,.avatar-panel{display:flex;gap:4px;background:var(--bg3);padding:4px;border-radius:30px;border:1px solid var(--border);max-width:200px;overflow-x:auto;scrollbar-width:none}
.theme-panel::-webkit-scrollbar,.avatar-panel::-webkit-scrollbar{display:none}
.t-dot,.a-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:all .15s}
.t-dot.on,.a-dot.on{border-color:var(--text);transform:scale(1.15)}
.td-dark{background:#1a1a30}.td-light{background:#e2e8f0}.td-blue{background:#3b82f6}
.td-purple{background:#a855f7}.td-candy{background:#ec4899}.td-green{background:#10b981}.td-orange{background:#f59e0b}
.lbtn{font-size:18px;cursor:pointer;padding:4px}
.sbar{display:flex;align-items:center;gap:10px}
.smain{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);min-width:44px;line-height:1}
.sinfo{flex:1}
.snext{font-size:10px;font-weight:700;color:var(--text2);margin-bottom:3px}
.sptrack{background:var(--bg3);border-radius:4px;height:5px;overflow:hidden}
.spfill{height:5px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s;width:0%}

/* FAMILY GOAL */
.f-box{padding:10px 14px 0}
.f-goal{background:var(--card);border:2px dashed var(--gold);padding:10px 12px;border-radius:var(--rs)}
.f-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.f-title{font-size:11px;font-weight:900;color:var(--gold)}
.f-pts{font-size:11px;font-weight:900;color:var(--gold)}
.ptrack{background:var(--bg3);border-radius:4px;height:7px;overflow:hidden}
.pfill{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--gold),#ff9f00);transition:width .6s;width:0%}

/* MSG */
.msg-banner{margin:8px 14px 0;background:var(--card);border:1px solid var(--accent);border-radius:var(--rs);padding:10px 12px;display:flex;align-items:center;gap:10px}
.msg-text{flex:1;font-size:12px;font-weight:700;color:var(--text);font-style:italic}
.msg-reactions{display:flex;gap:5px}
.msg-react-btn{font-size:16px;cursor:pointer;padding:3px 6px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);transition:all .15s}
.msg-react-btn:active{transform:scale(.9)}
.msg-react-btn.used{border-color:var(--accent);background:rgba(168,85,247,.15)}

/* TABS */
.tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tbtn{flex:1;padding:10px 5px;font-family:'Nunito',sans-serif;font-size:10px;font-weight:800;color:var(--text3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;min-width:52px;transition:all .2s}
.tbtn.on{color:var(--accent);border-bottom-color:var(--accent)}
.rob{background:rgba(59,130,246,.12);border-bottom:1px solid rgba(59,130,246,.25);color:var(--accent2);font-size:11px;text-align:center;padding:5px;font-weight:800}
.cont{padding:12px 12px 90px;flex:1}

/* CSEL */
.csel{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.csel::-webkit-scrollbar{display:none}
.csbtn{padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:11px;font-weight:800;color:var(--text2);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.csbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* DAYBAR */
.daybar{display:flex;gap:4px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.daybar::-webkit-scrollbar{display:none}
.daybtn{flex:1;min-width:42px;text-align:center;padding:8px 3px;border-radius:10px;font-size:9px;font-weight:900;cursor:pointer;background:var(--bg3);color:var(--text2);border:1px solid var(--border);transition:all .15s;flex-shrink:0}
.daybtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.daybtn.has{border-color:var(--accent3);color:var(--accent3)}
.daybtn-score{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;margin-top:2px}

/* TASKS */
.ctit{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin:12px 0 6px;display:flex;align-items:center;gap:6px}
.ctit::after{content:'';flex:1;height:1px;background:var(--border)}
.tcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:11px 12px;display:flex;align-items:center;gap:10px;margin-bottom:6px;transition:all .15s;-webkit-user-select:none;user-select:none}
.tcard.cl{cursor:pointer}.tcard.cl:active{transform:scale(.98)}
.tcard.dn{border-color:var(--accent3);background:rgba(6,214,160,.07)}
.tcard.mal{border-color:var(--red);background:rgba(239,68,68,.06)}
.tcard.streak{border-color:var(--gold)}
.tico{font-size:18px;width:38px;height:38px;background:var(--bg3);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tcard.dn .tico{background:rgba(6,214,160,.15)}
.tcard.mal .tico{background:rgba(239,68,68,.1)}
.tinfo{flex:1}
.tname{font-size:12px;font-weight:800;color:var(--text);margin-bottom:1px}
.tcard.dn .tname{color:var(--accent3);text-decoration:line-through;text-decoration-color:rgba(6,214,160,.4)}
.tcard.mal .tname{color:var(--red)}
.tpts{font-size:10px;font-weight:700;color:var(--text2)}
.tbadge{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--accent);min-width:28px;text-align:right;flex-shrink:0}
.tcard.mal .tbadge{color:var(--red)}.tcard.dn .tbadge{color:var(--accent3)}
.tchk{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:white;transition:all .15s}
.tcard.dn .tchk{background:var(--accent3);border-color:var(--accent3)}
.tlck{font-size:14px;flex-shrink:0}
.streak-badge{font-size:9px;font-weight:900;background:rgba(251,191,36,.15);color:var(--gold);padding:1px 6px;border-radius:5px;margin-left:4px}
.dem-btn{background:rgba(251,191,36,.1);border:1px solid var(--gold);color:var(--gold);padding:5px 8px;border-radius:7px;cursor:pointer;font-size:10px;font-weight:900;font-family:'Nunito',sans-serif;white-space:nowrap;flex-shrink:0}
.dem-btn.sent{background:rgba(6,214,160,.08);border-color:var(--accent3);color:var(--accent3)}

/* DÉFI */
.defi-card{background:var(--card);border:2px solid var(--accent);border-radius:var(--r);padding:14px;margin-bottom:14px;position:relative;overflow:hidden}
.defi-card::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:var(--accent);filter:blur(40px);opacity:.15;pointer-events:none}
.defi-title{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:6px}
.defi-name{font-size:15px;font-weight:900;color:var(--text);margin-bottom:4px}
.defi-pts{font-size:12px;font-weight:800;color:var(--gold)}
.defi-status{font-size:11px;font-weight:800;margin-top:8px;padding:6px 10px;border-radius:8px;text-align:center}
.defi-status.open{background:rgba(168,85,247,.1);color:var(--accent)}
.defi-status.taken{background:rgba(6,214,160,.1);color:var(--accent3)}
.defi-status.yours{background:rgba(251,191,36,.1);color:var(--gold)}

/* REWARDS */
.r-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}
.r-card.ul{border-color:var(--gold);background:rgba(251,191,36,.06)}
.r-card.nx{border-color:var(--accent)}
.r-emoji{font-size:36px;margin-bottom:6px}
.r-name{font-weight:900;font-size:11px;margin-bottom:3px}
.r-pts{font-size:11px;font-weight:900;color:var(--gold)}
.r-lock{position:absolute;top:6px;right:6px;font-size:11px;opacity:.6}
.r-prog-track{background:var(--bg3);border-radius:3px;height:3px;overflow:hidden;width:100%;margin-top:6px}
.r-prog-fill{height:3px;border-radius:3px;background:var(--accent);transition:width .4s}
.r-card.ul .r-prog-fill{background:var(--gold)}

/* LEVELS */
.level-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}
.level-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.level-ico{font-size:32px;width:52px;height:52px;background:var(--bg3);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.level-info{flex:1}
.level-name{font-size:16px;font-weight:900;color:var(--accent);margin-bottom:2px}
.level-pts{font-size:11px;font-weight:700;color:var(--text2)}
.level-prog-track{background:var(--bg3);border-radius:4px;height:8px;overflow:hidden}
.level-prog-fill{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s}
.level-all{display:flex;gap:6px;margin-top:12px}
.level-step{flex:1;height:4px;border-radius:2px;background:var(--bg3)}
.level-step.done{background:var(--accent)}

/* HISTORIQUE */
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px;text-align:center}
.stat-val{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;color:var(--accent);line-height:1;margin-bottom:3px}
.stat-lbl{font-size:9px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
.histo-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.histo-tabs::-webkit-scrollbar{display:none}
.histo-tab{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:11px;font-weight:800;color:var(--text2);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.histo-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}
.chart-title{font-size:11px;font-weight:900;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:100px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bar{width:100%;border-radius:4px 4px 0 0;transition:height .5s;min-height:3px;background:var(--accent)}
.bar-lbl{font-size:8px;font-weight:800;color:var(--text3)}
.bar-val{font-size:9px;font-weight:900;color:var(--text2)}

/* DEMANDES */
.dem-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:11px 12px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dem-card.pending{border-color:var(--gold);background:rgba(251,191,36,.05)}
.dem-card.approved{border-color:var(--accent3);background:rgba(6,214,160,.05)}
.dem-card.rejected{border-color:var(--red);background:rgba(239,68,68,.05);opacity:.6}
.dem-ico{font-size:20px;width:38px;height:38px;background:var(--bg3);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dem-info{flex:1}
.dem-name{font-size:12px;font-weight:800;color:var(--text);margin-bottom:2px}
.dem-meta{font-size:10px;font-weight:700;color:var(--text2)}
.dem-actions{display:flex;gap:5px;flex-shrink:0}
.dem-ok{background:rgba(6,214,160,.12);border:1px solid var(--accent3);color:var(--accent3);padding:6px 10px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:900;font-family:'Nunito',sans-serif}
.dem-no{background:rgba(239,68,68,.1);border:1px solid var(--red);color:var(--red);padding:6px 10px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:900;font-family:'Nunito',sans-serif}
.dem-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:9px;font-weight:900;width:15px;height:15px;border-radius:50%;margin-left:3px;vertical-align:middle;line-height:1}
.empty-state{text-align:center;padding:36px 20px;color:var(--text3);font-size:12px;font-weight:700}
.empty-ico{font-size:36px;margin-bottom:8px}

/* ADMIN */
.astit{font-size:11px;font-weight:900;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin:16px 0 8px;display:flex;align-items:center;justify-content:space-between}
.acard{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:9px;margin-bottom:6px}
.arow{display:flex;gap:6px;align-items:center}
.ainp{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:8px 9px;color:var(--text);font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;outline:none;flex:1;min-width:0}
.ainp:focus{border-color:var(--accent)}
.ainp-sm{width:56px;flex:none;text-align:center}
.ainp-em{width:38px;flex:none;text-align:center;font-size:15px}
.adel{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--red);padding:8px 9px;border-radius:7px;cursor:pointer;flex:none;font-size:12px}
.aadd{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.25);border-radius:7px;padding:5px 11px;font-family:'Nunito',sans-serif;font-size:11px;font-weight:900;color:var(--accent);cursor:pointer}
.asave{width:100%;background:var(--accent);border:none;border-radius:var(--rs);padding:13px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;color:#fff;cursor:pointer;margin-top:12px}
.adng{width:100%;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--rs);padding:11px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--red);cursor:pointer;margin-top:6px}
.goal-card{background:var(--card);border:2px dashed var(--gold);border-radius:var(--r);padding:12px;margin-bottom:8px}
.goal-card label{font-size:10px;font-weight:900;color:var(--gold);text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:5px}

/* NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);display:flex;padding-bottom:env(safe-area-inset-bottom,8px);z-index:100}
.nbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;background:none;border:none;cursor:pointer;color:var(--text3);font-family:'Nunito',sans-serif;font-size:8px;font-weight:800;transition:color .15s;position:relative}
.nbtn.on{color:var(--accent)}
.nico{font-size:16px;line-height:1}
.nbadge{position:absolute;top:4px;right:calc(50% - 16px);background:var(--red);color:#fff;font-size:8px;font-weight:900;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* TOAST */
.toast{position:fixed;top:75px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--accent3);color:#000;font-weight:900;font-size:12px;padding:8px 16px;border-radius:20px;opacity:0;transition:all .3s;z-index:200;white-space:nowrap;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.version-badge{position:fixed;bottom:5px;right:10px;font-size:10px;color:rgba(100,100,100,0.5);font-family:monospace}

/* LOGO — transparent + adapté par style */
body.vstyle-glass .logo-img { background:transparent !important; border-radius:20px !important; filter:drop-shadow(0 0 16px rgba(167,139,250,0.4)) !important; }
body.vstyle-neon  .logo-img { background:transparent !important; border-radius:16px !important; filter:drop-shadow(0 0 12px rgba(0,255,157,0.35)) !important; }
body.vstyle-soft  .logo-img { background:transparent !important; }

.av-label{font-size:10px;font-weight:900;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}