:root{
  color-scheme:light;
  --brand:#00607e;
  --brand-deep:#004b62;
  --brand-soft:#e8f5f8;
  --accent:#f39200;
  --page:#f6f7fb;
  --surface:#fff;
  --surface-soft:#f8fafc;
  --text:#102a43;
  --muted:#6f8291;
  --line:#e2e9ef;
  --shadow:0 12px 38px rgba(16,42,67,.07);
}

html.dark{
  color-scheme:dark;
  --page:#111827;
  --surface:#1f2937;
  --surface-soft:#182231;
  --text:#eef5f7;
  --muted:#a8bac5;
  --line:rgba(255,255,255,.1);
  --shadow:0 18px 48px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{background:var(--page);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:"Tajawal",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 88% 2%,rgba(0,126,153,.08),transparent 27rem),
    radial-gradient(circle at 4% 55%,rgba(243,146,0,.055),transparent 24rem),
    var(--page);
}
button,a{font:inherit}
button{cursor:pointer}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.is-hidden{display:none!important}

.reports-shell{padding:16px 18px 42px}
.topbar{
  max-width:1280px;
  min-height:68px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line);
  border-radius:19px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 5px 22px rgba(16,42,67,.05);
}
.topbar-brand,.topbar-actions{display:flex;align-items:center;gap:10px;min-width:0}
.logo{object-fit:contain;flex:none}
.logo-mobile{display:none;width:42px;height:42px}
.logo-desktop{display:block;width:auto;height:39px;max-width:170px}
.topbar-divider{width:1px;height:34px;background:var(--line);margin-inline:3px}
.topbar-title{display:grid;gap:2px;min-width:0}
.topbar-title strong{font-size:15px;font-weight:900;white-space:nowrap}
.topbar-title span{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.topbar-actions{flex:none}
.icon-btn,.back-btn{
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-decoration:none;
  color:var(--brand);
  background:var(--surface-soft);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.icon-btn{width:40px;padding:0}
.icon-btn svg,.back-btn svg{width:19px;height:19px}
.back-btn{padding:0 13px;font-size:12px;font-weight:900}
.icon-btn:hover,.back-btn:hover{transform:translateY(-1px);border-color:rgba(0,96,126,.28);background:var(--brand-soft)}
html.dark .icon-btn:hover,html.dark .back-btn:hover{background:rgba(0,126,153,.16)}

.reports-main{max-width:1280px;margin:18px auto 0}
.state-card{
  min-height:350px;
  padding:40px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.state-card strong{font-size:18px;font-weight:900;margin-top:14px}
.state-card span{max-width:430px;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.8}
.loader{width:38px;height:38px;border:4px solid rgba(0,96,126,.14);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff1f2;color:#be123c;font-size:24px;font-weight:900}
.error-card button{margin-top:18px;border:0;border-radius:12px;padding:11px 20px;background:var(--brand);color:#fff;font-weight:900}

.hero-card{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding:34px 38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:35px;
  border-radius:28px;
  color:#fff;
  background:linear-gradient(125deg,#004b62 0%,#006f8d 55%,#078b94 100%);
  box-shadow:0 20px 55px rgba(0,75,98,.2);
}
.hero-card::before,.hero-card::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero-card::before{width:340px;height:340px;left:-130px;top:-190px;border:1px solid rgba(255,255,255,.13);box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 84px rgba(255,255,255,.025)}
.hero-card::after{width:250px;height:250px;right:38%;bottom:-220px;background:rgba(243,146,0,.12);filter:blur(8px)}
.hero-copy,.hero-progress{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.1);font-size:11px;font-weight:800}
.hero-copy h1{margin:15px 0 8px;font-size:30px;line-height:1.35;font-weight:900}
.hero-copy p{max-width:650px;margin:0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.9;font-weight:500}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-meta span{padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.1);font-size:10px;font-weight:800;color:rgba(255,255,255,.86)}
.hero-progress{min-width:180px;display:grid;justify-items:center;gap:10px}
.progress-ring{
  --progress:0;
  width:144px;
  height:144px;
  padding:11px;
  border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--progress)*1%),rgba(255,255,255,.16) 0);
  box-shadow:0 16px 38px rgba(0,0,0,.12);
}
.progress-ring-center{width:100%;height:100%;border-radius:50%;display:grid;place-content:center;text-align:center;background:rgba(0,75,98,.92);border:1px solid rgba(255,255,255,.13)}
.progress-ring-center strong{font-size:28px;font-weight:900;line-height:1}
.progress-ring-center span{margin-top:7px;font-size:10px;color:rgba(255,255,255,.7);font-weight:700}
.hero-progress small{font-size:11px;color:rgba(255,255,255,.72);font-weight:700}

.overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:16px}
.metric-card{
  position:relative;
  overflow:hidden;
  min-height:128px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 8px 28px rgba(16,42,67,.045);
}
.metric-card::after{content:"";position:absolute;width:88px;height:88px;border-radius:50%;left:-44px;bottom:-52px;background:var(--metric-soft)}
.metric-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:14px;background:var(--metric-soft);color:var(--metric);position:relative;z-index:1}
.metric-icon svg{width:23px;height:23px}
.metric-card>div:last-child{min-width:0;display:grid;gap:3px;position:relative;z-index:1}
.metric-card span{font-size:11px;color:var(--muted);font-weight:800}
.metric-card strong{font-size:24px;line-height:1.25;color:var(--text);font-weight:900}
.metric-card small{font-size:9px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-score{--metric:#0b7d9b;--metric-soft:rgba(11,125,155,.1)}
.metric-completed{--metric:#15966d;--metric-soft:rgba(21,150,109,.1)}
.metric-attempts{--metric:#7650ad;--metric-soft:rgba(118,80,173,.1)}
.metric-time{--metric:#d98200;--metric-soft:rgba(243,146,0,.12)}

.report-section{margin-top:26px;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px}
.section-heading h2{margin:3px 0 0;font-size:22px;font-weight:900}
.section-kicker{font-size:10px;color:var(--accent);font-weight:900}
.section-heading p{margin:0;color:var(--muted);font-size:11px;font-weight:600}

.subjects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.subject-report-card{
  --subject-start:#0d7e91;
  --subject-end:#00607e;
  --subject-accent:#f39200;
  position:relative;
  overflow:hidden;
  min-height:205px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--subject-start) 8%,var(--surface)),var(--surface) 60%);
}
.subject-report-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;left:-130px;bottom:-140px;border:1px solid color-mix(in srgb,var(--subject-start) 20%,transparent);box-shadow:0 0 0 35px color-mix(in srgb,var(--subject-start) 5%,transparent),0 0 0 70px color-mix(in srgb,var(--subject-start) 3%,transparent)}
.subject-head{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.subject-cover{width:54px;height:60px;flex:0 0 54px;padding:3px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid rgba(15,42,67,.08);box-shadow:0 6px 18px rgba(16,42,67,.09)}
.subject-fallback{width:54px;height:54px;flex:0 0 54px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--subject-start),var(--subject-end));font-size:20px;font-weight:900}
.subject-title{min-width:0;flex:1}
.subject-title h3{margin:0;font-size:17px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subject-title p{margin:4px 0 0;color:var(--muted);font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subject-score{text-align:left;flex:none}
.subject-score strong{display:block;font-size:22px;color:var(--subject-start);font-weight:900}
.subject-score span{display:block;margin-top:2px;color:var(--muted);font-size:9px;font-weight:700}
.subject-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:17px}
.subject-stat{padding:9px 10px;border-radius:12px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--subject-start) 10%,var(--line));display:grid;gap:2px}
.subject-stat span{font-size:9px;color:var(--muted);font-weight:700}
.subject-stat strong{font-size:13px;font-weight:900}
.subject-progress{position:relative;z-index:1;margin-top:15px}
.subject-progress-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:9px;color:var(--muted);font-weight:700}
.progress-track{height:7px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--subject-start) 10%,var(--surface-soft))}
.progress-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--subject-start),var(--subject-end));transition:width .5s ease}

.attempts-list{display:grid;gap:10px}
.attempt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:15px 16px;border:1px solid var(--line);border-radius:17px;background:var(--surface-soft);transition:border-color .18s ease,transform .18s ease}
.attempt-row:hover{transform:translateY(-1px);border-color:rgba(0,96,126,.2)}
.attempt-main{display:flex;align-items:center;gap:12px;min-width:0}
.attempt-type-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;background:var(--attempt-soft);color:var(--attempt-color)}
.attempt-type-icon svg{width:21px;height:21px}
.attempt-copy{min-width:0}
.attempt-copy h3{margin:0;font-size:14px;font-weight:900;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attempt-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;margin-top:4px;color:var(--muted);font-size:9px;font-weight:700}
.attempt-meta span+span::before{content:"•";margin-inline-end:9px;color:#b5c0c8}
.attempt-result{min-width:108px;text-align:left}
.attempt-result strong{display:block;font-size:20px;font-weight:900;color:var(--result-color)}
.attempt-result span{display:block;margin-top:2px;color:var(--muted);font-size:9px;font-weight:700}
.type-quiz{--attempt-color:#0b7d9b;--attempt-soft:rgba(11,125,155,.1)}
.type-interactive{--attempt-color:#7650ad;--attempt-soft:rgba(118,80,173,.1)}
.type-cards{--attempt-color:#15966d;--attempt-soft:rgba(21,150,109,.1)}
.type-whatsapp{--attempt-color:#15803d;--attempt-soft:rgba(21,128,61,.1)}
.score-high{--result-color:#12815e}.score-good{--result-color:#0b7d9b}.score-mid{--result-color:#d98200}.score-low{--result-color:#c2415d}

.inline-empty{padding:32px 18px;text-align:center;border:1px dashed var(--line);border-radius:18px;color:var(--muted);font-size:12px;line-height:1.8;background:var(--surface-soft)}
.inline-empty strong,.inline-empty span{display:block}
.inline-empty strong{margin-top:9px;color:var(--text);font-size:15px;font-weight:900}
.empty-illustration{width:52px;height:52px;margin:0 auto;display:grid;place-items:center;border-radius:16px;background:var(--brand-soft);color:var(--brand)}
.empty-illustration svg{width:27px;height:27px}
.load-more{display:block;margin:15px auto 0;padding:10px 18px;border:1px solid rgba(0,96,126,.2);border-radius:12px;background:var(--brand-soft);color:var(--brand);font-weight:900;font-size:11px}
.load-more:disabled{opacity:.55;cursor:wait}
.reports-note{max-width:900px;margin:20px auto 0;text-align:center;color:var(--muted);font-size:10px;line-height:1.8;font-weight:600}

html.dark .topbar,html.dark .report-section,html.dark .metric-card,html.dark .state-card{box-shadow:none}
html.dark .subject-cover{border-color:rgba(255,255,255,.1)}
html.dark .brand-soft{background:rgba(0,126,153,.15)}

@media(max-width:980px){
  .overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-card{padding:30px}
}

@media(max-width:720px){
  .reports-shell{padding:10px 10px 30px}
  .topbar{min-height:60px;padding:8px 9px;border-radius:16px;gap:8px}
  .logo-desktop{display:none}.logo-mobile{display:block;width:38px;height:38px}
  .topbar-divider{height:30px;margin-inline:0}
  .topbar-title strong{font-size:13px}.topbar-title span{display:none}
  .topbar-actions{gap:6px}.icon-btn{width:37px;height:37px;border-radius:11px}.back-btn{height:37px;padding:0 10px}.back-btn span{display:none}
  .reports-main{margin-top:10px}
  .hero-card{min-height:auto;padding:25px 20px;grid-template-columns:1fr;text-align:right;gap:22px;border-radius:22px}
  .hero-copy h1{font-size:25px}.hero-copy p{font-size:12px}.hero-meta{margin-top:16px}
  .hero-progress{grid-template-columns:auto 1fr;justify-items:start;justify-self:stretch;align-items:center;min-width:0;padding-top:17px;border-top:1px solid rgba(255,255,255,.13)}
  .progress-ring{width:92px;height:92px;padding:8px}.progress-ring-center strong{font-size:21px}.progress-ring-center span{font-size:8px;margin-top:4px}.hero-progress small{font-size:10px}
  .overview-grid{gap:9px;margin-top:10px}.metric-card{min-height:112px;padding:14px;gap:10px;border-radius:17px}.metric-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px}.metric-icon svg{width:20px;height:20px}.metric-card strong{font-size:20px}.metric-card small{font-size:8px}
  .report-section{margin-top:16px;padding:17px 13px;border-radius:20px}.section-heading{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:13px}.section-heading h2{font-size:19px}.section-heading p{font-size:10px}
  .subjects-grid{grid-template-columns:1fr;gap:10px}.subject-report-card{min-height:195px;padding:16px}.subject-title h3{font-size:15px}.subject-score strong{font-size:19px}
  .attempt-row{padding:13px 12px;gap:10px}.attempt-type-icon{width:38px;height:38px;flex-basis:38px}.attempt-copy h3{font-size:12px}.attempt-result{min-width:72px}.attempt-result strong{font-size:17px}
}

@media(max-width:420px){
  .topbar-title{display:none}.topbar-divider{display:none}
  .overview-grid{grid-template-columns:1fr 1fr}
  .metric-card{display:grid;align-content:start;justify-items:start;min-height:132px}.metric-card>div:last-child{width:100%}
  .subject-stats{gap:5px}.subject-stat{padding:8px 7px}.subject-stat strong{font-size:12px}
  .attempt-row{grid-template-columns:1fr}.attempt-result{display:flex;align-items:center;justify-content:space-between;text-align:right;padding-inline-start:50px}.attempt-result strong{order:2}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}