:root{
  --brand-primary:#0057e5;
  --brand-primary-2:#004782;
  --brand-accent:#00f4ab;
  --danger:#f87171;
  --bg:#0b1324;
}
.hesim-container{ background: linear-gradient(180deg, #0b1324 0%, #0b1324 60%, #111b33 100%); padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); color:#e5e7eb; }
.btn{ border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color:#fff; border-radius: 14px; padding:10px 14px; font-weight:700; }
.btn:hover{ filter:saturate(1.08) brightness(1.05); }
.btn-brand{ background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); color:#fff; }
.badge{ border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:2px 8px; font-size:12px; color:#cbd5e1; }
.card{ border:1px solid rgba(255,255,255,0.08); border-radius:16px; background:rgba(255,255,255,0.04); }

.option{ border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:12px; background:rgba(255,255,255,0.02); text-align:left; }
.option:hover{ background:rgba(255,255,255,0.05); }
.option-selected{ border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(0,244,171,0.2) inset; }
.option .opt-title{ color:#e5e7eb; }                   /* texte normal */
.option:hover .opt-title{ color:#ffffff; }             /* hover */
.option-selected .opt-title{ color: var(--brand-accent); }  /* sélection */

.title-glow{ color:#fff; text-shadow: 0 0 18px rgba(0,244,171,0.35); }
.result-good{ color:var(--brand-accent); } 
.result-warn{ color:#fbbf24; }
.result-bad{ color:var(--danger); }

.timer-wrap{ height:10px; border-radius:8px; background:rgba(255,255,255,0.08); overflow:hidden; }
.timer-bar{ height:100%; background: linear-gradient(90deg, var(--brand-accent), #57ffc8); width:100%; transition: width 0.3s linear; }
.timer-crit{ background: linear-gradient(90deg, var(--danger), #ffb4b4); }

.linklist a{ color: var(--brand-accent); font-weight:700; text-decoration: none; }
.linklist a:hover{ text-decoration: underline; }
.small{ font-size:12px; color:#cbd5e1; }