:root{
  --brand-primary:#0057e5;
  --brand-primary-2:#004782;
  --brand-accent:#00f4ab;
  --brand-warn:#eeee22;
  --brand-bg:#0b1324;
  --danger:#f87171;
}
.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); }
.btn-brand{ border:1px solid rgba(255,255,255,0.15); background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); color:#fff; border-radius: 14px; padding:8px 12px; font-weight:600; }
.btn-brand:hover{ filter:saturate(1.1) brightness(1.05); }
.btn-ghost{ border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color:#fff; border-radius: 14px; padding:8px 12px; font-weight:600; }
.badge{ border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:2px 8px; font-size:12px; color:#cbd5e1; }
.title-glow{ color:#fff; text-shadow: 0 0 18px rgba(0,244,171,0.35); }
.table thead th{ color:#cbd5e1;border-bottom:1px solid rgba(255,255,255,0.12); }
.table tbody tr{ border-bottom:1px solid rgba(255,255,255,0.06); }
.card{ border:1px solid rgba(255,255,255,0.08); border-radius:16px; background:rgba(255,255,255,0.03); }
.smallcard{ border:1px solid rgba(0,0,0,0.1); border-radius:12px; background:#fff; }
.cardpip{ border:1px solid rgba(148,163,184,.4); border-radius:16px; background:#f3f4f6; }
.cardpip .txt{ color:#111827; } .cardpip.red .txt{ color:#dc2626; }
.footer-note{ color:#94a3b8; font-size:12px; }
.option{ border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:12px; background:rgba(255,255,255,0.02); } .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; }
.result-good{ color:var(--brand-accent); } .result-bad{ color:var(--danger); }

/* inputs visibles + placeholders en vert */
.hesim-container select, .hesim-container input[type="text"], .hesim-container input[type="number"], .hesim-container input[type="search"], .hesim-container input[type="email"]{ color: var(--brand-accent); font-weight: 600; caret-color: var(--brand-accent); }
.hesim-container ::placeholder{ color: var(--brand-accent); opacity: 1; }
.hesim-container select option{ color: #0b1324; }

/* timer bar */
.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); }