@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
:root{
  --primary:#2b4d8b;
  --accent:#4a148c;
  --muted:#c7d8f4;
  --bg1:linear-gradient(135deg,#e8f0ff,#f9fbff);
  --card:#ffffff;
}
*{box-sizing:border-box}
body{font-family:'Cairo',sans-serif;background:var(--bg1);margin:0;color:#0b1220;direction:rtl}
.container{max-width:1200px;margin:28px auto;padding:18px}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.title{font-size:22px;color:var(--primary);font-weight:700}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
select,input,button{padding:8px 10px;border-radius:8px;border:1px solid var(--muted);font-size:14px}
button.btn{background:var(--primary);color:#fff;border:none;cursor:pointer;padding:9px 12px;border-radius:10px;font-weight:700}
button.ghost{background:transparent;border:1px solid rgba(43,77,139,0.12);color:var(--primary)}
.toolbar{display:flex;gap:8px;align-items:center}
.main{margin-top:18px}
.group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.card{background:var(--card);padding:12px;border-radius:12px;box-shadow:0 6px 22px rgba(12,25,50,0.06)}
.card h3{margin:0 0 8px 0;color:var(--accent)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;margin-top:8px}
thead th{background:#eef6ff;padding:8px;text-align:center;font-weight:700;color:#0b2340;border-bottom:1px solid #edf3fb}
td,th{padding:6px;text-align:center;border-bottom:1px solid #f3f6fb}
.input-num{width:72px;padding:6px;border-radius:8px;border:1px solid #e6eefb;text-align:center}
.total-cell{font-weight:800;color:#13407a}
.percent-cell{font-weight:700;color:#0b8a4d}
.actions-row{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.small{padding:6px 8px;font-size:13px;border-radius:8px}
.chart-mini{height:160px;width:100%}
.session-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.footer{margin-top:14px;text-align:center;color:#48607f;font-weight:600}

/* responsive tweaks */
@media (max-width:600px){
  .controls{flex-direction:column;align-items:stretch}
  .toolbar{justify-content:stretch}
}