:root{
--bg:#0b1220; --card:#111a2b; --muted:#97a3ba; --accent:#4cc9f0; --good:#2ecc71; --bad:#e74c3c; --ring:#3b82f6;
}
.edu-logo {
  width: 100px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));
}
.logo-header {
  text-align: center;
  margin-bottom: 20px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Kufi Arabic",Tahoma,Arial;background:linear-gradient(180deg,#0b1220,#0a1020 60%);color:#e7edf7;min-height:100vh}
.container{max-width:980px;margin:40px auto;padding:16px}
header h1{margin:0 0 8px;font-weight:800;letter-spacing:.2px}
header p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
@media (min-width:920px){.grid{grid-template-columns:1.25fr .75fr}}
.card{background:var(--card);border:1px solid #1e2a44;border-radius:18px;padding:18px;box-shadow:0 0 20px rgba(0,0,0,0.3)}
.card h2{margin:0 0 10px;font-size:1.05rem;color:#cfe2ff}
label{display:block;margin:10px 0 6px;color:#d8e4ff;font-weight:500}
input, select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #273652;background:#0e1627;color:#e6f0ff;outline:none;transition:0.3s;font-size:15px}
input:focus, select:focus{border-color:var(--ring);box-shadow:0 0 0 4px rgb(59 130 246 / .15)}
.hint{font-size:.85rem;color:var(--muted);margin-top:4px}
.stack{display:grid;gap:8px}
.split{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:620px){.split{grid-template-columns:1fr 1fr}}
.total{display:flex;flex-direction:column;gap:14px;align-items:stretch;justify-content:center;text-align:center}
.total .big{font-size:44px;font-weight:900;line-height:1;color:#4cc9f0}
progress{width:100%;height:20px;border-radius:999px;overflow:hidden}
progress::-webkit-progress-bar{background:#101a2c;border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),#78ffd6)}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),#78ffd6)}
table{width:100%;border-collapse:separate;border-spacing:0 10px}
td{padding:10px 12px;background:#0e1627;border:1px solid #1e2c49}
td:first-child{border-radius:10px 0 0 10px;font-weight:500}
td:last-child{border-radius:0 10px 10px 0;color:#4cc9f0;font-weight:600}
.btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.btn{cursor:pointer;border:none;padding:12px 24px;border-radius:12px;font-weight:600;transition:all .3s ease;font-size:15px;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb)}
.btn:hover{transform:scale(1.05);box-shadow:0 0 15px #3b82f6}
.btn:active{transform:scale(0.98)}
.share-result{background:linear-gradient(135deg,#22c55e,#16a34a)}
.share-result:hover{box-shadow:0 0 15px #22c55e}
.reset-btn{background:linear-gradient(135deg,#ef4444,#dc2626)}
.reset-btn:hover{box-shadow:0 0 15px #ef4444}
.result-card{background:#111a2b;border:1px solid #1e2a44;border-radius:18px;padding:24px;margin-top:24px;text-align:center;animation:slideIn .5s ease}
[hidden]{display:none !important}
.result-card h3{margin:0 0 16px;color:#4cc9f0;font-size:1.4rem}
.result-card canvas{margin:20px auto;display:block;max-width:100%;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.download-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.download-btn:hover{box-shadow:0 0 15px #8b5cf6}
footer{text-align:center;margin-top:40px;padding:20px;color:#97a3ba;font-size:.9rem}
footer p{margin:0 0 16px}
footer strong{color:#4cc9f0}
.social-links{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.social-links a{color:#e7edf7;text-decoration:none;transition:all .3s;display:flex;align-items:center;gap:8px;padding:10px 18px;background:#111a2b;border-radius:12px;border:1px solid #1e2a44;font-size:15px;font-weight:500}
.social-links a:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(76,201,240,.4);border-color:#4cc9f0}
.social-links a span{font-size:20px}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.info-badge{display:inline-block;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:4px 10px;border-radius:8px;font-size:.8rem;margin-right:8px;font-weight:600}
.toast{position:fixed;inset-inline:0;bottom:22px;margin:auto;max-width:560px;background:#0f1f33;color:#d7eaff;border:1px solid #1d2b47;border-radius:14px;padding:12px 16px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:50}