/* ============================================================
   JELYAHOME — GLOBAL CSS
   Variables, Reset, Typography, Themes, Glassmorphism
   ============================================================ */

/* --- Variables communes --- */
:root {
    --accent: #6366F1;
    --accent-light: #818CF8;
    --accent-dark: #4F46E5;
    --accent-rgb: 99,102,241;
    --accent-bg: rgba(99,102,241,.08);
    --accent-bg-h: rgba(99,102,241,.14);
    --accent-sh: 0 4px 16px rgba(99,102,241,.25);

    --R-xs: 6px; --R-sm: 10px; --R-md: 14px; --R-lg: 20px; --R-xl: 28px; --R-full: 100px;
    --ease: cubic-bezier(.16,1,.3,1);
    --spring: cubic-bezier(.34,1.56,.64,1);
    --T1: .15s; --T2: .25s; --T3: .4s;
    --ok: #22C55E; --warn: #F59E0B; --err: #EF4444; --info: #0EA5E9;
    --sb-w: 72px; --sb-exp: 248px; --hdr: 56px; --bb: 64px;
}

/* --- Theme Dark --- */
[data-theme="dark"] {
    --bg0: #0B1120; --bg1: #0F172A; --bg2: #1E293B; --bg3: #273548; --bgE: #192642;
    --tx1: #F1F5F9; --tx2: #94A3B8; --tx3: #64748B;
    --bd: rgba(255,255,255,.06); --bdH: rgba(255,255,255,.12);
    --gl: rgba(15,23,42,.65); --glH: rgba(15,23,42,.9); --glB: rgba(255,255,255,.08); --blur: 20px;
    --sh-lg: 0 8px 32px rgba(0,0,0,.35); --sh-xl: 0 16px 48px rgba(0,0,0,.4);
    --inp: rgba(255,255,255,.04); --inpB: rgba(255,255,255,.08); --inpF: rgba(99,102,241,.15);
    --overlay: rgba(0,0,0,.5);
}

/* --- Theme Light --- */
[data-theme="light"] {
    --bg0: #EDEBE8; --bg1: #F5F3F0; --bg2: #FFFFFF; --bg3: #F0EDEA; --bgE: #FFFFFF;
    --tx1: #1A1A2E; --tx2: #64748B; --tx3: #94A3B8;
    --bd: rgba(0,0,0,.06); --bdH: rgba(0,0,0,.12);
    --gl: rgba(255,255,255,.55); --glH: rgba(255,255,255,.9); --glB: rgba(255,255,255,.7); --blur: 20px;
    --sh-lg: 0 8px 32px rgba(0,0,0,.08); --sh-xl: 0 16px 48px rgba(0,0,0,.1);
    --inp: rgba(0,0,0,.02); --inpB: rgba(0,0,0,.08); --inpF: rgba(99,102,241,.1);
    --overlay: rgba(0,0,0,.3);
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg0); color: var(--tx1);
    overflow: hidden; height: 100dvh;
    transition: background var(--T3) var(--ease), color var(--T3) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,.15); border-radius: 10px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--tx3); }

/* --- Background mesh --- */
.jh-bg-mesh { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
[data-theme="dark"] .jh-bg-mesh {
    background: radial-gradient(ellipse at 15% 10%, rgba(var(--accent-rgb),.07) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 80%, rgba(6,182,212,.04) 0%, transparent 50%);
}
[data-theme="light"] .jh-bg-mesh {
    background: radial-gradient(ellipse at 15% 10%, rgba(var(--accent-rgb),.04) 0%, transparent 55%);
}

/* --- Layout App --- */
.jh-app { display: flex; height: 100dvh; position: relative; z-index: 1; }
.jh-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.jh-page {
    flex: 1; overflow-y: auto; padding: 24px;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}

/* --- Glass Card --- */
.jh-card {
    background: var(--gl); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--glB); border-radius: var(--R-lg); padding: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08); transition: all var(--T2) var(--ease);
}

/* --- Toasts (top) --- */
.jh-toasts {
    position: fixed; top: 12px; left: 12px; right: 12px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}

/* --- Loader overlay --- */
.jh-loader-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--bg0);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
    transition: opacity .5s var(--ease);
}
.jh-loader-overlay.hidden { opacity: 0; pointer-events: none; }
.jh-loader-spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid var(--bd); border-top-color: var(--accent);
    animation: jh-spin .7s linear infinite;
}
.jh-loader-text { font-size: 16px; font-weight: 700; color: var(--tx1); letter-spacing: -.3px; }

/* --- Global Loader (in-app) --- */
.jh-gloader {
    position: fixed; inset: 0; z-index: 3000; background: var(--bg0);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
    opacity: 0; pointer-events: none; transition: opacity var(--T2);
}
.jh-gloader.on { opacity: 1; pointer-events: auto; }
.jh-gloader-spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bd); border-top-color: var(--accent); animation: jh-spin .7s linear infinite; }
.jh-gloader-txt { font-size: 14px; font-weight: 600; color: var(--tx1); }

@keyframes jh-spin { to { transform: rotate(360deg); } }

/* --- Section title --- */
.jh-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--tx3); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.jh-section-title i { color: var(--accent-light); }
.jh-section-title::after { content: ''; flex: 1; height: 1px; background: var(--bd); }