:root{--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--brand:#2563eb;--ok:#16a34a}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f8fafc;color:var(--ink);line-height:1.55}
.wrap{max-width:920px;margin:0 auto;padding:22px}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:48px;width:auto}
.card{background:white;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 6px 20px rgba(15,23,42,.06)}
.report-head{display:flex;gap:16px;align-items:center;border-bottom:2px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.report-head img{height:64px;width:auto}
h1{font-size:30px;margin:0}
h2{margin-top:28px}
.muted{color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
button,a.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block}
.primary{background:var(--ink);color:white}
.secondary{background:#e2e8f0;color:var(--ink)}
.success{background:var(--ok);color:white}
.timer{position:sticky;top:0;z-index:10;background:var(--ink);color:white;padding:14px 18px;border-radius:14px;margin-bottom:18px;display:none;justify-content:space-between}
.question{padding:14px 0;border-bottom:1px solid #f1f5f9}
.quiz-card{max-width:720px;margin:0 auto}
label.option{display:block;border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;cursor:pointer}
input[type=text]{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:16px}
.error{background:#fff1f2;border:1px solid #fecdd3;border-radius:16px;padding:18px}
.assessment-list{display:grid;gap:14px;margin-top:20px}
.assessment-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}
.assessment-card h2{margin:0 0 6px 0}
.pill{display:inline-block;font-size:12px;padding:4px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:700;text-transform:uppercase}
.options-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.option-row{border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;background:#fff}
.section-directions {
  margin: 12px 0 18px;
  padding: 14px;
  border-left: 4px solid #2563eb;
  background: #eff6ff;
  border-radius: 12px;
  color: #334155;
  white-space: pre-line;
}

.subject-group {
  margin-top: 24px;
}

.subject-group > h2 {
  font-size: 24px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 6px;
}

.class-group {
  margin: 16px 0 24px;
}

.class-group > h3 {
  font-size: 16px;
  color: #64748b;
  margin-bottom: 10px;
}
.dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.dashboard-controls {
  margin: 22px 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
}

.dashboard-controls input,
.dashboard-controls select {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
}

.dashboard-tabs {
  display: flex;
  gap: 10px;
  margin: 10px 0 24px;
}

.tab {
  background: #e2e8f0;
  color: #0f172a;
}

.tab.active {
  background: #0f172a;
  color: white;
}

.subject-group {
  margin-top: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.subject-group summary {
  cursor: pointer;
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  background: #f8fafc;
}

.subject-group .count {
  font-size: 14px;
  background: #e2e8f0;
  padding: 4px 10px;
  border-radius: 999px;
}

.class-group {
  padding: 16px 18px;
}

.class-group h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #64748b;
}

.compact-list {
  display: grid;
  gap: 12px;
}

.compact-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: white;
}

.compact-card h2 {
  margin: 8px 0 6px;
  font-size: 20px;
}

.compact-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.attempt-badge {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 700;
}

.new-badge {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

.score-line {
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0;
}

.compact-action {
  flex-shrink: 0;
}
.dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.dashboard-controls {
  margin: 22px 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
}

.dashboard-controls input,
.dashboard-controls select {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
}

.dashboard-tabs {
  display: flex;
  gap: 10px;
  margin: 10px 0 24px;
}

.tab {
  background: #e2e8f0;
  color: #0f172a;
}

.tab.active {
  background: #0f172a;
  color: white;
}

.subject-group {
  margin-top: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.subject-group summary {
  cursor: pointer;
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  background: #f8fafc;
}

.subject-group .count {
  font-size: 14px;
  background: #e2e8f0;
  padding: 4px 10px;
  border-radius: 999px;
}

.class-group {
  padding: 16px 18px;
}

.class-group h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #64748b;
}

.compact-list {
  display: grid;
  gap: 12px;
}

.compact-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: white;
}

.compact-card h2 {
  margin: 8px 0 6px;
  font-size: 20px;
}

.compact-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.attempt-badge {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 700;
}

.new-badge {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

.score-line {
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0;
}

.compact-action {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .dashboard-controls {
    grid-template-columns: 1fr;
  }

  .compact-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .compact-action {
    width: 100%;
  }

  .compact-action .btn {
    width: 100%;
    text-align: center;
  }
}






.footer{margin-top:40px;border-top:1px solid #e2e8f0;padding:24px 16px;text-align:center;color:#64748b;font-size:14px}
.footer-container{display:flex;flex-direction:column;gap:10px;align-items:center}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.footer-links a{text-decoration:none;color:#2563eb;font-weight:600}
.footer-copy{font-weight:600;color:#0f172a}
.footer-framework{font-size:13px}
.report-footer{text-align:center;color:var(--muted);font-size:12px;margin-top:36px;border-top:1px solid var(--line);padding-top:14px}
@media print{body{background:white}.no-print{display:none!important}.wrap{max-width:none;padding:0}.card{border:0;box-shadow:none;border-radius:0}}