/* ============================================
   REEV BOUTIK — Styles communs (common.css)
   ============================================ */

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

/* DESIGN TOKENS */
:root{
  --pr:#6B21A8;--prl:#8B5CF6;--prd:#4C1D95;
  --acc:#F59E0B;--grn:#10B981;--red:#EF4444;--blue:#3B82F6;
  --bg:#F1F0FB;--card:#fff;--txt:#1F2937;--txtl:#6B7280;
  --border:#E5E7EB;--border-light:#F3F4F6;
  --sh:0 2px 8px rgba(107,33,168,0.08);
  --shl:0 8px 24px rgba(107,33,168,0.12);
  --r:14px;--rs:10px
}

/* BASE */
body{background:var(--bg);color:var(--txt);min-height:100vh}
h1,h2,h3,h4,h5{font-family:'Poppins','Segoe UI',sans-serif}

/* BUTTONS */
.btn{padding:10px 24px;border:none;border-radius:var(--rs);font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px}
.btn-pr{background:var(--pr);color:#fff}.btn-pr:hover{background:var(--prd)}
.btn-grn{background:var(--grn);color:#fff}.btn-grn:hover{background:#059669}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#DC2626}
.btn-acc{background:var(--acc);color:#fff}.btn-acc:hover{background:#D97706}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:#2563EB}
.btn-full{width:100%}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* FORM GROUPS */
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:0.75rem;font-weight:600;color:var(--txtl);text-transform:uppercase}
.fg input{padding:10px 14px;border:2px solid var(--border);border-radius:var(--rs);font-size:0.9rem}
.fg input:focus{outline:none;border-color:var(--pr)}

/* CARDS */
.card{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sh);margin-bottom:20px}
.card h3{color:var(--pr);margin-bottom:12px}
.card p{color:var(--txtl);font-size:0.85rem;line-height:1.6}

/* BADGES */
.badge{padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:600;white-space:nowrap}
.badge.green{background:#D1FAE5;color:#065F46}
.badge.yellow{background:#FEF3C7;color:#92400E}
.badge.red{background:#FEE2E2;color:#991B1B}
.badge.blue{background:#DBEAFE;color:#1E40AF}
.badge.gray{background:#F3F4F6;color:var(--txtl)}

/* TOAST */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--pr);color:#fff;padding:12px 28px;border-radius:50px;font-size:0.9rem;font-weight:600;z-index:999;opacity:0;transition:opacity 0.3s;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.toast.show{opacity:1}

/* ERROR */
.err{color:var(--red);font-size:0.8rem;margin-top:8px;font-weight:600}

/* STATS ROW */
.stats-row{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}
.sb{border-radius:var(--rs);padding:12px 20px;text-align:center;min-width:100px}
.sb .num{font-size:1.4rem;font-weight:800}
.sb .lab{font-size:0.72rem;color:var(--txtl)}
.sb.purple{background:#F3E8FF}.sb.purple .num{color:var(--pr)}
.sb.green{background:#D1FAE5}.sb.green .num{color:#065F46}
.sb.yellow{background:#FEF3C7}.sb.yellow .num{color:#92400E}
.sb.red{background:#FEE2E2}.sb.red .num{color:#991B1B}
.sb.gray{background:#F3F4F6}.sb.gray .num{color:var(--txtl)}
.sb.blue{background:#DBEAFE}.sb.blue .num{color:#1E40AF}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal{background:#fff;border-radius:20px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shl)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{color:var(--prd);font-size:1rem}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--txtl)}
.modal-body{padding:20px}