:root{
  --ink:#4b2b4f;
  --mauve-dark:#3c1f56;
  --bg1:#ffd6f2; --bg2:#dff5ff; --bg3:#ffe9d1;
  --card:#ffffffd9;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --rainbow:linear-gradient(90deg,#ff5ebc,#ffa94d,#ffee58,#7afcff,#b388ff);
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink);
  background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
  background-size:200% 200%;animation:bgmove 12s ease-in-out infinite;
}
@keyframes bgmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.card{max-width:900px;margin:22px auto;padding:22px;border-radius:26px;background:var(--card);box-shadow:var(--shadow);position:relative}
.title{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.title .uni{font-size:42px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.points{font-size:24px;font-weight:800;margin:0 0 6px}
.err{margin:10px 0;padding:10px;background:#ffe6e6;border:1px solid #ffb3b3;color:#900;border-radius:12px}

/* Toast */
.toast{position:sticky;top:10px;margin:10px 0;padding:10px 14px;border-radius:12px;font-weight:700}
.toast-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.toast-err{background:#ffebee;border:1px solid #ffcdd2;color:#b71c1c}

/* Sections */
.section{margin-top:18px}
.section-title{display:flex;align-items:center;gap:10px;margin:12px 0 8px;font-weight:900}
.section-title .tag{padding:6px 10px;border-radius:999px;background:#f6e9ff;color:#6a3b9a;border:1px solid #d9b8ff;font-size:14px}
.sep{height:8px;border-radius:8px;background:linear-gradient(90deg,#ffd1f2,#e1f3ff,#ffe5c7);opacity:.8;margin:10px 0}

/* Récompenses (disponibles) */
.reward-row{
  display:grid;grid-template-columns:1fr 62px 150px;gap:12px;align-items:center;
  padding:12px;border-radius:18px;background:#fff7fb;margin:10px 0;box-shadow:0 4px 12px rgba(0,0,0,.06)
}
.r-text{min-width:0}
.r-title{font-size:18px;font-weight:800;color:#9c27b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-cost{font-weight:700;color:#6a3b9a}
.r-desc{font-size:13px;color:#4b2b4f;opacity:.9;margin-top:4px}
.r-desc-empty{opacity:.4;font-style:italic}
.r-image{display:flex;align-items:center;justify-content:center}
.r-image img{width:50px;height:50px;object-fit:cover;border-radius:12px;border:4px dashed transparent;border-image:var(--rainbow) 1}

/* Bouton & progression (index ET achat) */
.r-action{display:flex;align-items:center;justify-content:center}

a.buy,
a.btn{ /* base commune */
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:150px;height:40px;border-radius:20px;text-decoration:none;
  font-weight:900;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:transform .12s ease,opacity .12s;
  border:2px solid var(--mauve-dark);
}
a.buy:hover, a.btn:hover{opacity:.95;transform:translateY(-1px)}
a.buy.loading, a.btn.loading{pointer-events:none;opacity:.9}
a.buy.loading::after, a.btn.loading::after{content:"✨";position:absolute;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* variante arc-en-ciel + texte mauve foncé */
a.buy,
a.btn-yes{
  background:var(--rainbow);
  color:var(--mauve-dark) !important; /* force la couleur du texte */
}

/* bouton "Non" */
a.btn-no{background:#9e9e9e;color:#fff !important;border-color:#6b6b6b}

/* Barre de progression (contour mauve foncé) */
.cute-progress{
  position:relative;width:150px;height:40px;border-radius:20px;background:#eee;overflow:hidden;
  border:2px solid var(--mauve-dark)
}
.cute-bar{position:absolute;left:0;top:0;height:100%;background:var(--rainbow)}
.cute-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--mauve-dark);font-weight:900;text-shadow:0 0 3px #fff}

/* SECTION HISTORIQUE */
.history-wrap{background:#f3fff8;border:1px solid #c8f7e3;border-radius:18px;padding:10px}
.history-row{
  display:grid;grid-template-columns:1fr 62px 200px;gap:12px;align-items:center;
  padding:12px;border-radius:14px;background:#ffffff;box-shadow:0 4px 10px rgba(0,0,0,.05);margin:8px 0
}
.h-text{min-width:0}
.h-title{font-size:16px;font-weight:800;color:#0f766e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-desc{font-size:13px;color:#335;opacity:.9;margin-top:4px}
.h-meta{font-size:12px;color:#0f766e;opacity:.85;margin-top:6px}
.h-image{display:flex;align-items:center;justify-content:center}
.h-image img{width:50px;height:50px;object-fit:cover;border-radius:12px;border:3px solid #0f766e33}
.h-when{font-size:13px;color:#0b6a64;font-weight:700}