:root{
  --bg:#0b1020; --fg:#e5e7eb; --muted:#94a3b8;
  --card:#0f172a; --border:#1f2a44;
  --brand:#60a5fa; --accent:#22d3ee; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b1020,#0e1428 40%,#0b1020); color:var(--fg);
}
.wrap{ width:100%; max-width:720px; padding:20px }
.card{
  background:linear-gradient(180deg,#121a33,#0e162b);
  border:1px solid var(--border);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:18px; margin:14px 0;
}
header .title{display:flex;align-items:center;gap:12px}
header .links{margin-top:6px; display:flex; gap:10px; flex-wrap:wrap}
h1{font-size:26px;margin:0;line-height:1.1}
.sub{color:var(--muted); font-size:14px}
a.link{ color:#a5b4fc; text-decoration:none } a.link:hover{text-decoration:underline}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.stat{font-variant-numeric:tabular-nums}
.value{ font-size:72px; line-height:1.0; font-variant-numeric:tabular-nums; text-align:center }
.value small{ font-size:14px; color:var(--muted) }
.badge{display:inline-block; border:1px solid var(--border); background:#0b1328; border-radius:999px; padding:4px 9px; font-size:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); color:#041225;
  padding:12px 16px; border:none; border-radius:12px; font-weight:700; cursor:pointer;
}
.btn.secondary{ background:#1f2937; color:#e5e7eb; }
.btn.ghost{ background:transparent; border:1px solid var(--border); color:var(--fg) }
.btn[disabled]{opacity:.6; cursor:not-allowed}
kbd{background:#111827; border:1px solid #333; padding:2px 6px; border-radius:6px; font-size:12px; color:#cbd5e1}
.footer{margin-top:10px; color:var(--muted); font-size:12px; text-align:center}

/* Circular TAP button with glow */
.tapCircle{
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(140px 140px at 50% 38%, #0f172a 0%, #0c1330 70%, #0b1020 100%);
  border:2px solid var(--border);
  position:relative; cursor:pointer; user-select:none;
  display:grid; place-items:center; color:var(--fg); font-weight:800; letter-spacing:0.5px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.tapCircle::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, rgba(96,165,250,.4), rgba(34,211,238,.4), rgba(96,165,250,.4));
  filter:blur(12px); opacity:.35; z-index:0;
}
.tapCircle span{ position:relative; z-index:1; }
.tapCircle:active{ transform:scale(0.985) }
.tapPulse{ animation:pulse 120ms ease-in-out }
@keyframes pulse{ 0%{ transform:scale(1)} 50%{transform:scale(0.97)} 100%{transform:scale(1)} }
hr{ border:none; border-top:1px solid var(--border); margin:12px 0 }
.center{ display:flex; align-items:center; justify-content:center }
.brandbar {
  margin-top: 12px;
  padding: 16px 0 24px;
  display: flex;
  justify-content: center;
}
.brandbar img {
  width: min(720px, 92vw);  /* quasi pleine largeur, responsive */
  height: auto;
  opacity: .98;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}