:root{
  --bg:#070A12;
  --card:#0D1426;
  --border:rgba(124,92,255,.22);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.7);

  --primary:#7C5CFF;
  --success:#2EE6A6;
  --danger:#FF4D6D;

  --radius:18px;
  --shadow:0 20px 50px rgba(0,0,0,.6);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(700px 500px at 90% 0%, rgba(46,230,166,.25), transparent 55%),
    linear-gradient(180deg, #060810, #090E1C);
  color:var(--text);
}

a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:auto;padding:0 20px}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  transition:.15s;
}
.btn:hover{border-color:var(--primary);transform:translateY(-1px)}
.btnPrimary{
  background:linear-gradient(180deg,rgba(124,92,255,.4),rgba(124,92,255,.2));
  border-color:rgba(124,92,255,.6);
}
.btnDanger{
  background:linear-gradient(180deg,rgba(255,77,109,.3),rgba(255,77,109,.15));
  border-color:rgba(255,77,109,.6);
}

input,select,textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
}

.badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}

.pill.run{color:var(--success)}
.pill.stop{color:var(--danger)}

small{color:var(--muted)}

/* =========================================================
   ✅ CONVERSION THEME OVERRIDE (safe append)
   - Fond bleu nuit (confiance / premium)
   - CTA ambre/orange (achat / urgence)
   - Contraste + lisibilité + focus states
   ========================================================= */

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card:#0E162A;
  --card2:#0B1326;
  --text:#EAF0FF;
  --muted:#A9B6D3;
  --border:#23304A;

  /* CTA (achat) */
  --cta:#FFB020;        /* amber */
  --cta2:#FF8A00;       /* orange */
  --ctaText:#0B1020;

  /* Secondary accent (premium) */
  --accent:#6D5EF6;     /* violet */
  --accent2:#28D6B3;    /* teal */

  --danger:#FF4D4D;
  --ok:#36D399;
}

html,body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(109,94,246,.22), transparent 55%),
              radial-gradient(900px 500px at 85% 20%, rgba(40,214,179,.14), transparent 55%),
              radial-gradient(900px 500px at 65% 85%, rgba(255,176,32,.12), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(14,22,42,.92), rgba(11,19,38,.88));
  border: 1px solid rgba(35,48,74,.9);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

.bar{
  background: linear-gradient(90deg, rgba(109,94,246,.9), rgba(40,214,179,.85), rgba(255,176,32,.85));
}

/* Typography helpers (if you have them) */
.muted, .small, .small2{ color: var(--muted) !important; }
h1,h2,h3,.h1{ color: var(--text); }

/* Inputs */
input, select, textarea{
  background: rgba(6,10,18,.65);
  color: var(--text);
  border: 1px solid rgba(35,48,74,.9);
  border-radius: 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,176,32,.9);
  box-shadow: 0 0 0 4px rgba(255,176,32,.16);
}

/* Primary buttons (.btn) -> CTA */
.btn{
  background: linear-gradient(180deg, var(--cta), var(--cta2));
  color: var(--ctaText) !important;
  border: 0 !important;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 12px 26px rgba(255,138,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(255,138,0,.22);
}
.btn:active{ transform: translateY(0px) scale(.99); }

/* Secondary buttons if you use .btn.secondary (optional) */
.btn.secondary{
  background: linear-gradient(180deg, rgba(109,94,246,.9), rgba(109,94,246,.62));
  color: var(--text) !important;
  box-shadow: 0 12px 28px rgba(109,94,246,.18);
}

/* Badges */
.badge{
  background: rgba(6,10,18,.55);
  border: 1px solid rgba(35,48,74,.9);
  color: var(--muted);
  border-radius: 999px;
}

/* Status chips (if you have them) */
.badge.ok, .chip.ok{ background: rgba(54,211,153,.12); border-color: rgba(54,211,153,.35); color: var(--ok) !important; }
.badge.danger, .chip.danger{ background: rgba(255,77,77,.12); border-color: rgba(255,77,77,.35); color: var(--danger) !important; }

/* Links */
a{ color: rgba(234,240,255,.92); }
a:hover{ color: #ffffff; }

/* Code/log box */
pre, .code{
  background: rgba(6,10,18,.70);
  border: 1px solid rgba(35,48,74,.9);
  border-radius: 14px;
  color: rgba(234,240,255,.92);
}

/* Navbar pills (si présents) */
.nav a, .nav .pill, .nav .navbtn{
  background: rgba(6,10,18,.45);
  border: 1px solid rgba(35,48,74,.9);
  color: rgba(234,240,255,.92);
  border-radius: 999px;
}
.nav a:hover, .nav .pill:hover, .nav .navbtn:hover{
  border-color: rgba(255,176,32,.55);
  box-shadow: 0 0 0 4px rgba(255,176,32,.10);
}

/* Focus accessible */
button:focus, a:focus, input:focus, select:focus{
  outline: none;
}