/* ============================================================
   MIHARAA — DA v3 "iOS 16 mono"
   Monochrome total : noir profond, verre gris, blanc pur.
   Aucune couleur d'accent — l'accent EST le blanc (boutons
   blancs pleins, texte noir, à la iOS). Police système
   (SF Pro sur mac, Segoe UI Variable sur Windows).
   ============================================================ */
:root{
  --bg:#020203;
  --bg-2:#0a0a0c;
  /* verre iOS : couches de blanc translucide + blur massif */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-3:rgba(255,255,255,.13);
  --stroke:rgba(255,255,255,.085);
  --stroke-soft:rgba(255,255,255,.05);
  --stroke-top:rgba(255,255,255,.16);
  --text:#f5f5f7;
  --dim:#98989f;
  --faint:#5c5c63;
  /* accent = BLANC (monochrome assumé) */
  --accent:#ffffff;
  --accent-deep:#e5e5ea;
  --accent-soft:rgba(255,255,255,.1);
  --accent-line:rgba(255,255,255,.32);
  --ok:#32d74b; --warn:#ffd60a; --danger:#ff453a;
  --r:22px; --r-sm:13px;
  --ease:cubic-bezier(.32,.72,.28,1);
  --blur:saturate(1.8) blur(38px);
  --shadow:0 24px 60px -28px rgba(0,0,0,.9);
  --menu-bg:rgba(19,19,23,.98);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI Variable Display','Segoe UI',Roboto,sans-serif;
}
[data-theme="light"]{
  --bg:#f2f2f7; --bg-2:#e9e9ee;
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.75); --glass-3:rgba(255,255,255,.95);
  --stroke:rgba(0,0,0,.08); --stroke-soft:rgba(0,0,0,.045); --stroke-top:rgba(255,255,255,.95);
  --text:#111114; --dim:#66666e; --faint:#a3a3ab;
  --accent:#111114; --accent-deep:#2c2c31;
  --accent-soft:rgba(0,0,0,.07); --accent-line:rgba(0,0,0,.28);
  --ok:#28a745; --warn:#b8860b; --danger:#d9342b;
  --menu-bg:rgba(250,250,252,.97);
  --shadow:0 20px 48px -26px rgba(20,20,30,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);
  -webkit-font-smoothing:antialiased;min-height:100vh;letter-spacing:.01em;
  transition:background .35s var(--ease),color .35s var(--ease)}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;letter-spacing:-.022em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
svg{display:block}
.icon{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
::selection{background:rgba(255,255,255,.85);color:#000}
[data-theme="light"] ::selection{background:rgba(0,0,0,.8);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--glass-3);border-radius:99px}

/* ── Fond : noir profond + AURORA VIOLETTE animée (discrète) ── */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(1100px 560px at 75% -12%, rgba(255,255,255,.04), transparent 60%),
  linear-gradient(180deg,#050506,#020203 55%)}
.bgfx::before,.bgfx::after{content:"";position:absolute;border-radius:50%;filter:blur(130px);will-change:transform}
.bgfx::before{width:640px;height:640px;top:-260px;right:-4%;
  background:radial-gradient(circle at 40% 40%, rgba(124,58,237,.34), rgba(83,18,127,.16) 55%, transparent 72%);
  animation:aurora1 26s ease-in-out infinite}
.bgfx::after{width:560px;height:560px;bottom:-240px;left:-6%;
  background:radial-gradient(circle at 60% 60%, rgba(88,28,180,.26), rgba(45,10,80,.14) 55%, transparent 72%);
  animation:aurora2 32s ease-in-out infinite}
@keyframes aurora1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-90px,70px) scale(1.12)}66%{transform:translate(40px,120px) scale(.94)}}
@keyframes aurora2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(110px,-90px) scale(1.15)}}
[data-theme="light"] .bgfx{background:
  radial-gradient(1100px 560px at 75% -12%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(180deg,#f7f7fa,#eeeef3)}
[data-theme="light"] .bgfx::before{background:radial-gradient(circle at 40% 40%, rgba(124,58,237,.16), transparent 70%)}
[data-theme="light"] .bgfx::after{background:radial-gradient(circle at 60% 60%, rgba(88,28,180,.12), transparent 70%)}

/* ── Verre iOS ── */
.glass{
  position:relative;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--stroke);
  border-top-color:var(--stroke-top);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.glass-hover{transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.glass-hover:hover{transform:translateY(-2px);border-color:var(--glass-3)}

/* ── Boutons : primaire = BLANC plein (iOS), secondaires translucides ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;
  font-size:13.5px;font-weight:600;color:var(--text);
  background:linear-gradient(180deg,var(--glass-3),var(--glass-2));
  border:1px solid var(--stroke);border-top-color:var(--stroke-top);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:all .22s var(--ease)}
.btn:hover{transform:translateY(-1px);border-color:var(--glass-3);box-shadow:0 8px 24px -12px rgba(0,0,0,.7)}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-accent{background:var(--accent);color:#000;border-color:transparent;box-shadow:0 6px 22px -8px rgba(255,255,255,.25)}
.btn-accent:hover{background:#fff;box-shadow:0 10px 30px -10px rgba(255,255,255,.4)}
[data-theme="light"] .btn-accent{color:#fff;box-shadow:0 8px 22px -10px rgba(0,0,0,.4)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--dim);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.btn-ghost:hover{color:var(--text);background:var(--glass)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-danger{color:var(--danger)}
.btn-danger:hover{border-color:rgba(255,69,58,.4)}
.btn-tint-ok{background:rgba(50,215,75,.12);border-color:rgba(50,215,75,.28);color:var(--ok)}
.btn-tint-warn{background:rgba(255,214,10,.1);border-color:rgba(255,214,10,.26);color:var(--warn)}
.btn-tint-red{background:rgba(255,69,58,.1);border-color:rgba(255,69,58,.28);color:var(--danger)}

/* ── Champs ── */
.input,input.input,textarea.input,select.input{
  width:100%;background:var(--glass);border:1px solid var(--stroke);border-radius:14px;
  padding:11px 15px;font-size:13.5px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.input:focus{outline:none;border-color:var(--accent-line);background:var(--glass-2)}
.input::placeholder{color:var(--faint)}
label.lbl{display:block;font-size:11px;color:var(--dim);margin-bottom:7px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em}
.f-group{margin-bottom:15px}

/* ── Tags / points / toggles ── */
.tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:4px 10px;border-radius:99px;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--dim);
  display:inline-flex;align-items:center;gap:5px}
.tag .icon{width:11px;height:11px}
.tag.accent{background:var(--accent);color:#000;border-color:transparent;font-weight:700}
[data-theme="light"] .tag.accent{color:#fff}
.tag.ok{color:var(--ok);border-color:rgba(50,215,75,.3);background:rgba(50,215,75,.08)}
.tag.warn{color:var(--warn);border-color:rgba(255,214,10,.28);background:rgba(255,214,10,.07)}
.tag.red{color:var(--danger);border-color:rgba(255,69,58,.3);background:rgba(255,69,58,.08)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.off{background:var(--faint)}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.pulse{animation:pulse 2s ease-in-out infinite}
.toggle{width:46px;height:27px;border-radius:99px;background:var(--glass-3);border:1px solid var(--stroke);
  position:relative;flex-shrink:0;transition:background .25s var(--ease);cursor:pointer}
.toggle.on{background:var(--ok);border-color:transparent}
.toggle::after{content:"";position:absolute;width:21px;height:21px;background:#fff;border-radius:50%;
  top:2px;left:2px;transition:left .25s var(--ease);box-shadow:0 2px 7px rgba(0,0,0,.35)}
.toggle.on::after{left:21px}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .5s var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}

/* ── Toasts ── */
.toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:9px;z-index:200}
.toast{padding:12px 17px;border-radius:16px;font-size:13px;display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg,var(--glass-3),var(--glass-2));backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--stroke);border-top-color:var(--stroke-top);
  animation:fadeUp .3s var(--ease) both;box-shadow:var(--shadow)}