body {font-family:'Cairo',sans-serif;background:linear-gradient(135deg,#e8f0ff,#f9fbff);margin:0;padding:0;color:#0b1220;}
.container{max-width:1200px;margin:0 auto;padding:20px;}
h1,h2,h3{text-align:center;color:#163b67;}
button.btn{background:#2b4d8b;color:#fff;padding:8px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:600;}
button.btn.ghost{background:transparent;color:#2b4d8b;border:1px solid rgba(43,77,139,0.3);}
button.btn.danger{background:#ff6b6b;}
input,select{padding:6px;border-radius:8px;border:1px solid #e3eefb;text-align:center;}
table{width:100%;border-collapse:collapse;margin-top:15px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(12,25,50,0.06);}
thead th{background:#eaf2ff;padding:10px;text-align:center;font-weight:700;color:#0b2340;border-right:1px solid #d0ddf3;}
td,th{padding:8px;border-bottom:1px solid #f3f6fb;text-align:center;border-right:1px solid #f0f4fa;}
.total-cell{font-weight:700;color:#13407a;}
.percentage{font-weight:700;color:#0b8a4d;}
.group-section{margin-top:40px;border-top:4px solid #2b4d8b;padding-top:10px;}
.chart-container{margin-top:30px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 14px rgba(0,0,0,0.05);}
.search-box{text-align:center;margin-bottom:15px;}
.search-box input{width:50%;padding:8px 12px;border-radius:10px;border:1px solid #c7d8f4;font-size:15px;}
.date-box{display:flex;gap:10px;justify-content:flex-end;margin-bottom:15px;}
.date-box input{width:140px;}
.footer{margin-top:12px;font-weight:700;text-align:center;color:#0b2340;}