/* Écrans "Le Coin des Pronos" — reprend les tokens Nocturne + valeurs du handoff design. */
html, body { height: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: "Inter", system-ui, sans-serif; }

#root { max-width: 460px; margin: 0 auto; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }

/* — écrans centrés (onboarding / login) — */
.screen-pad { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 22px 34px; }
.wordmark { font: 600 11px Inter; letter-spacing: .2em; color: #9184d9; }
.wordmark-rule { height: 1px; background: linear-gradient(to right, #9184d9, rgba(145,132,217,0) 78%); margin: 14px 0 26px; }
.checker { height: 8px; border-radius: 2px; background: repeating-linear-gradient(90deg,#423a6a 0 10px,#292b31 10px 20px); margin-bottom: 20px; }
.big-title { font: 500 30px/1.1 Inter; letter-spacing: -.02em; margin: 0 0 10px; }
.lead { font-size: 14px; line-height: 1.55; color: #b2b6ca; text-wrap: pretty; }
.rule-item { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(233,233,237,.1); }
.rule-num { width:26px;height:26px;flex:none;border-radius:50%;background:#2b2741;color:#b5abfc;display:grid;place-items:center;font:600 13px Inter; }
.rule-t { font:500 15px Inter; margin:0; }
.rule-s { font-size:13px;color:#9397ab;margin:2px 0 0; }
.pill-row { display:flex;gap:8px;flex-wrap:wrap;margin:18px 0; }
.pill { padding:3px 8px;border-radius:6px;background:#292b31;color:#cfd3e5;font-size:11px; }
.btn-cta { height:52px; font-size:15px; }

.field-lg .input { height:48px; font-size:16px; border-radius:10px; }
.muted { color:#9397ab; font-size:13px; }
.tiny { color:#595d6c; font-size:11px; }
.linkish { color:#b5abfc; background:none;border:none;cursor:pointer;font-size:13px;padding:0;text-decoration:underline; }

/* — coque app — */
header.top { flex:none; padding: 40px 16px 10px; display:flex; align-items:flex-end; gap:12px; }
.brand-min { font:600 10px Inter; letter-spacing:.18em; color:#9184d9; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.brand-sub { font-size:11px; color:#75798c; }
.pts-wrap { margin-left:auto; text-align:right; }
.pts-lbl { font:600 9px Inter; letter-spacing:.14em; color:#75798c; }
.pts-val { font:600 23px/1.05 Inter; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#e9e9ed; }
.hairline { height:1px; background:linear-gradient(to right,transparent,rgba(233,233,237,.09) 40px,rgba(233,233,237,.09) calc(100% - 40px),transparent); }

main.content { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px 20px; display:flex; flex-direction:column; gap:12px; }
main.content > * { flex:none; }

.tabbar { flex:none; display:flex; padding:6px 6px 22px; box-shadow:0 -1px 0 rgba(233,233,237,.09); background:var(--color-bg); }
.tabbtn { flex:1; min-height:52px; background:none;border:none;cursor:pointer;color:#75798c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative; }
.tabbtn .t { font:600 11.5px Inter; }
.tabbtn .s { font-size:9.5px; }
.tabbtn.active { color:#e9e9ed; }
.tabbtn.active::before { content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:#9184d9;border-radius:2px; }

/* — cartes spécifiques — */
.p-card { position:relative; border-radius:14px; background:#232532; box-shadow:0 0 0 1px #3f424d; padding:14px; display:flex; flex-direction:column; gap:10px; }
.p-card .checker-head { position:absolute; top:0; left:0; right:0; height:6px; border-radius:14px 14px 0 0; background:repeating-linear-gradient(90deg,#292b31 0 10px,#232532 10px 20px); }
.p-card.open .checker-head { background:repeating-linear-gradient(90deg,#423a6a 0 10px,#292b31 10px 20px); }
.status-row { display:flex; align-items:center; gap:8px; }
.race-pill { font:600 10px Inter; letter-spacing:.12em; color:#cfd3e5; background:#292b31; padding:3px 8px; border-radius:6px; flex:none; white-space:nowrap; }
.dot { width:7px;height:7px;border-radius:50%;flex:none;animation:pulseDot 1.6s ease-in-out infinite; }
.status-lbl { font:600 11px Inter; letter-spacing:.08em; }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.3} }

.q-card { background:linear-gradient(#252739,#232532); }
.kicker { font:600 10px Inter; letter-spacing:.14em; text-transform:uppercase; color:#9184d9; }
.q-text { font:500 24px/1.16 Inter; letter-spacing:-.02em; text-wrap:pretty; margin:2px 0; }
.q-value { font-size:12px; color:#9397ab; }

.yn-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.yn { height:72px; border-radius:12px; font:600 19px Inter; letter-spacing:.04em; cursor:pointer; border:1px solid #3f424d; background:#292b31; color:#b2b6ca; transition:background .18s, box-shadow .18s, opacity .18s; display:flex;align-items:center;justify-content:center;gap:8px; }
.yn.sel { background:linear-gradient(#5d5294,#423a6a); color:#f5f4ff; border-color:#b5abfc; box-shadow:0 0 0 2px #b5abfc, 0 10px 30px rgba(145,132,217,.35); }
.yn.dim { opacity:.55; }
.yn .mark { width:18px;height:18px;border-radius:50%;background:#fff;color:#423a6a;display:grid;place-items:center;font-size:12px; }

.confirm-bar { background:rgba(145,132,217,.13); border:1px solid #5d5294; border-radius:10px; padding:10px 12px; display:flex;align-items:center;gap:8px; font-size:13px; animation:revealUp .25s; }
@keyframes revealUp { from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:none} }

.result { border-radius:12px; padding:14px; animation:revealUp .45s cubic-bezier(.2,.8,.25,1); }
.result.win { background:rgba(127,214,169,.08); box-shadow:0 0 0 1px #7fd6a9; }
.result.lose { background:rgba(224,138,138,.07); box-shadow:0 0 0 1px #e08a8a; }
.result.none { background:#292b31; box-shadow:0 0 0 1px #3f424d; color:#75798c; }
.result .r-k { font:600 10px Inter; letter-spacing:.14em; }
.result .r-t { font:500 19px Inter; margin:2px 0; }
.result .r-p { font:600 26px Inter; font-variant-numeric:tabular-nums; }

.streak-row { display:flex;align-items:center;gap:8px;margin-top:8px; }
.streak-bar { width:6px;height:12px;border-radius:2px; }

.chrono-bar { height:4px;border-radius:2px;background:#292b31;overflow:hidden; }
.chrono-fill { height:100%;background:linear-gradient(90deg,#5d5294,#b5abfc); }
.chrono-time { font:600 15px Inter; font-variant-numeric:tabular-nums; }

.rider-pills { display:flex;flex-wrap:wrap;gap:6px; }
.rider-pill { padding:6px 10px;border-radius:8px;background:#292b31;border:1px solid #3f424d;color:#cfd3e5;font-size:13px;cursor:pointer; }
.rider-pill.sel { background:linear-gradient(#5d5294,#423a6a);border-color:#b5abfc;color:#f5f4ff; }

.lb-row { display:flex;align-items:center;gap:11px;border-radius:11px;padding:11px 12px;background:#232532;box-shadow:0 0 0 1px #3f424d; }
.lb-row.me { background:rgba(145,132,217,.1); box-shadow:0 0 0 1px #9184d9; }
.lb-rank { font:600 13px Inter; font-variant-numeric:tabular-nums; color:#75798c; width:28px; }
.lb-row.top .lb-rank { color:#b5abfc; }
.lb-av { width:28px;height:28px;border-radius:8px;background:#3f424d;display:grid;place-items:center;font:600 12px Inter; }
.lb-row.top .lb-av { background:#5d5294; }
.lb-name { flex:1; font:500 14.5px Inter; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lb-pts { font:600 15px Inter; font-variant-numeric:tabular-nums; }

.h-row { display:flex;align-items:center;gap:10px;border-radius:11px;padding:11px 12px;background:#232532;box-shadow:0 0 0 1px #3f424d; }
.h-c { font:600 10px Inter;letter-spacing:.06em;color:#cfd3e5;background:#292b31;padding:3px 7px;border-radius:6px;flex:none; }

.mod-action { width:100%; height:52px; font-size:15px; }
.seg-danger { color:#e08a8a; }
.danger-card { box-shadow:0 0 0 1px #6b4a4a; }

.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#292b31; color:#e9e9ed; padding:10px 16px; border-radius:10px; box-shadow:0 0 0 1px #3f424d, 0 10px 30px rgba(0,0,0,.5); font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; max-width:90%; text-align:center; }
.toast.show { opacity:1; }
.toast.err { box-shadow:0 0 0 1px #6b4a4a; color:#e08a8a; }