:root {
  --navy:#10206f;
  --purple:#6b2fc5;
  --purple2:#8c4ce0;
  --pink:#ef0a8a;
  --green:#20bf83;
  --red:#e71f58;
  --orange:#ffad1f;
  --blue:#2a8df0;
  --ink:#14206b;
  --muted:#66709a;
  --line:#e5e9f3;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:#f7f9fc;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{text-decoration:none}
.navbar{
  min-height:72px;background:#fff;border-bottom:1px solid #edf0f6
}
.brand{
  display:flex;align-items:center;gap:9px;color:var(--navy);
  font-size:1.7rem;font-weight:900;letter-spacing:-1px
}
.brand .mark{font-size:1.5rem;color:#7130c7}
.brand span{color:var(--pink)}
.brand small{display:block;font-size:.52rem;letter-spacing:2px;color:#777da2;margin-top:-2px}
.nav-link{font-size:.88rem;font-weight:700;color:#22307a!important;padding:.8rem 1rem!important}
.nav-link.active{color:var(--pink)!important;position:relative}
.nav-link.active:after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:3px;
  border-radius:4px;background:var(--pink)
}
.avatar{
  width:38px;height:38px;border-radius:50%;background:#7d3cc5;color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.85rem
}
.btn-pink{
  background:linear-gradient(90deg,#ef0a8a,#ff249b);border:none;color:#fff;border-radius:7px;font-weight:800
}
.btn-pink:hover{color:#fff;opacity:.96}
.btn-outline-purple{
  border:1px solid #7d48d0;color:#5c2bad;background:#fff;border-radius:7px;font-weight:800
}
.page{padding:16px 0 50px}
.breadcrumb{font-size:.78rem;margin-bottom:14px}
.breadcrumb a{color:#2f3b85}

.hero{
  border:1px solid #eadff5;border-radius:13px;overflow:hidden;
  background:linear-gradient(90deg,#f8f1ff 0%,#fff 52%,#ffeaf6 100%);
  padding:12px 18px;margin-bottom:14px
}
.hero-icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#9f32dc,#5b27ab);color:#fff;font-size:1.7rem
}
.hero h1{font-size:1.55rem;font-weight:900;margin:0 0 4px}
.hero p{margin:0;font-size:.82rem;color:#4f5b8e}
.hero-quote{
  font-family:"Segoe Print","Comic Sans MS",cursive;
  font-size:1rem;font-weight:800;text-align:center;line-height:1.4
}
.hero-boy{width:150px;display:block;margin:auto;mix-blend-mode:multiply}
.well-card{
  border:1px solid #f0d8e6;background:#fff0f6;border-radius:9px;
  padding:12px;font-size:.72rem;font-weight:700;line-height:1.5;text-align:center
}

.top-grid{
  display:grid;grid-template-columns:1.3fr .85fr .75fr;gap:12px;margin-bottom:12px
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden
}
.card-head{padding:12px 14px;border-bottom:1px solid var(--line)}
.card-title{font-size:.98rem;font-weight:900;margin:0}
.card-body{padding:14px}

.score-layout{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center}
.donut{
  width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--pink) 0 68%,#e9edf7 68% 100%);
  display:grid;place-items:center;margin:auto
}
.donut-inner{
  width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center
}
.donut-inner strong{font-size:1rem;line-height:1}
.donut-inner span{font-size:.78rem;font-weight:800;margin-top:4px}
.metric-list{display:grid;gap:9px}
.metric-row{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid #edf0f5;font-size:.75rem}
.metric-row:last-child{border-bottom:0}
.metric-left{display:flex;align-items:center;gap:7px}
.metric-dot{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.68rem
}
.metric-row strong{font-size:.78rem}

.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.time-box{
  border:1px solid #e8e4f2;border-radius:9px;padding:12px;text-align:center;background:#faf9ff
}
.time-icon{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin:0 auto 7px;font-size:1rem
}
.time-box strong{display:block;font-size:1.4rem}
.time-box span{font-size:.68rem;color:#6b759d}
.quote-box{
  margin-top:10px;border:1px solid #f1deea;background:#fff0f6;border-radius:8px;
  padding:10px;text-align:center;font-family:"Segoe Print","Comic Sans MS",cursive;
  font-size:.72rem;font-weight:700
}
.cert-img{width:100%;border:1px solid #d9dfea;border-radius:6px;background:#fff}
.cert-btn{width:100%;margin-top:9px;padding:9px}

.middle-grid{display:grid;grid-template-columns:1fr .95fr .72fr;gap:12px;margin-bottom:12px}
.subject-table{width:100%;border-collapse:collapse}
.subject-table th{background:#f5f7ff;padding:8px;font-size:.68rem;text-align:left}
.subject-table td{padding:9px 8px;border-bottom:1px solid #edf0f5;font-size:.72rem}
.subject-table tr:last-child td{border-bottom:0}
.topic-name{display:flex;align-items:center;gap:7px}
.topic-icon{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.7rem
}
.bar{height:8px;background:#edf0f7;border-radius:999px;overflow:hidden;min-width:70px}
.fill{height:100%;border-radius:999px}

.chart-wrap{padding:4px 0 0}
.chart-svg{width:100%;height:220px}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:.66rem}
.legend span{display:flex;align-items:center;gap:5px}
.legend-dot{width:9px;height:9px;border-radius:50%}
.gridline{stroke:#e9edf5;stroke-width:1}
.axis-label{font-size:9px;fill:#68739b}
.bar-green{fill:#20bf83}
.bar-red{fill:#ef174f}
.bar-gray{fill:#b7bbce}

.insight-list{display:grid;gap:15px}
.insight-row{display:flex;gap:10px;align-items:flex-start}
.insight-ico{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 38px
}
.insight-row strong{display:block;font-size:.76rem;margin-bottom:3px}
.insight-row span{font-size:.67rem;color:#66709a;line-height:1.45}

.review-card{margin-bottom:12px}
.review-top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line)
}
.review-top h2{font-size:1rem;font-weight:900;margin:0}
.review-top p{margin:3px 0 0;font-size:.7rem;color:#67719a}
.review-filters{display:flex;gap:7px;flex-wrap:wrap}
.filter-btn{
  border:1px solid #e4e7ef;background:#f8f9fd;color:#2d397e;
  border-radius:7px;padding:7px 11px;font-size:.68rem;font-weight:800
}
.filter-btn.active{background:var(--pink);border-color:var(--pink);color:#fff}
.review-table{width:100%;border-collapse:collapse}
.review-table th{background:#f5f7ff;padding:9px;font-size:.68rem;text-align:left}
.review-table td{padding:9px;border-bottom:1px solid #edf0f5;font-size:.7rem;vertical-align:middle}
.result-icon{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.65rem
}
.table-footer{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  font-size:.68rem;color:#4f5a8d
}
.pages{display:flex;gap:6px}
.pg{
  width:30px;height:30px;border-radius:7px;background:#f3f5fb;display:grid;place-items:center;
  color:#2e397c;font-size:.68rem;font-weight:800
}
.pg.active{background:#7b3cc5;color:#fff}

.cta{
  border:1px solid #eadff5;border-radius:12px;
  background:linear-gradient(90deg,#f9efff,#fff,#ffe9f5);padding:12px 20px
}
.cta img{width:145px;display:block;margin:auto;mix-blend-mode:multiply}
.cta-copy{
  font-family:"Segoe Print","Comic Sans MS",cursive;font-size:1.05rem;font-weight:800;line-height:1.35
}
.cta-quote{
  background:#fff1f6;border:1px solid #f3dde8;border-radius:9px;padding:15px;
  font-family:"Segoe Print","Comic Sans MS",cursive;font-size:.86rem;font-weight:700;text-align:center
}

.footer{
  margin-top:25px;background:linear-gradient(135deg,#14236d,#26357d);color:#fff;padding:40px 0 24px
}
.footer-brand{font-size:1.55rem;font-weight:900}
.footer-brand span{color:#ff2d98}
.footer h5{font-size:.82rem;font-weight:800;margin-bottom:10px}
.footer a,.footer p{font-size:.72rem;color:#d4daf0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;margin-top:24px;font-size:.7rem;color:#c6cde8}

@media(max-width:991.98px){
  .top-grid,.middle-grid{grid-template-columns:1fr}
}
@media(max-width:767.98px){
  .score-layout{grid-template-columns:1fr}
  .review-top{flex-direction:column;align-items:flex-start}
}


/* Extracted inline styles */
.inline-result-1{background:#20bf83}
.inline-result-2{background:#ef174f}
.inline-result-3{background:#8a90a7}
.inline-result-4{background:#f2a400}
.inline-result-5{background:#7846d7}
.inline-result-6{background:#eee5ff;color:#6d31c4}
.inline-result-7{background:#ffe2ef;color:#e70a82}
.inline-result-8{background:#eee5ff;color:#6d31c4}
.inline-result-9{width:80%;background:#20bf83}
.inline-result-10{background:#e4f3ff;color:#177fd3}
.inline-result-11{width:60%;background:#ffad1f}
.inline-result-12{background:#ddf8ec;color:#11a76d}
.inline-result-13{width:70%;background:#20bf83}
.inline-result-14{background:#ffe2ef;color:#e70a82}
.inline-result-15{width:40%;background:#ef174f}
.inline-result-16{background:#ffe9ee;color:#e34c68}
.inline-result-17{width:75%;background:#20bf83}
.inline-result-18{background:#e4f3ff;color:#177fd3}
.inline-result-19{width:50%;background:#ffad1f}
.inline-result-20{background:#20bf83}
.inline-result-21{background:#ef174f}
.inline-result-22{background:#aeb3c7}
.inline-result-23{background:#ddf8ec;color:#11a76d}
.inline-result-24{background:#fff1d3;color:#efa100}
.inline-result-25{background:#eee5ff;color:#6d31c4}
.inline-result-26{background:#20bf83}
.inline-result-27{background:#ef174f}
.inline-result-28{background:#20bf83}
.inline-result-29{background:#20bf83}
.inline-result-30{background:#ef174f}
.btn-view {
	border: 1px solid #7b2df2;
	background: #fff;
	color: #5423b8;
	border-radius: 6px;
	padding: 6px 12px;
	font-weight: 800;
	font-size: 13px;
}

.btn-view:hover {
	background: #7b2df2;
	color: #fff;
}

.answer-review-modal {
	border-radius: 14px;
	border: 0;
}

.answer-review-question {
	background: #f8f5ff;
	border: 1px solid #eadfff;
	border-radius: 10px;
	padding: 16px;
	font-weight: 800;
	color: #151b4f;
}

.answer-box {
	border-radius: 10px;
	padding: 14px;
	min-height: 92px;
}

.your-answer {
	background: #fff5fb;
	border: 1px solid #ffd4ec;
}

.correct-answer {
	background: #effdf7;
	border: 1px solid #bdf1d8;
}

.answer-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .7px;
	font-weight: 900;
	color: #6a6f85;
	margin-bottom: 8px;
}

.answer-value {
	font-weight: 900;
	color: #111831;
}

.answer-explanation {
	background: #fff;
	border: 1px solid #e5e7f0;
	border-radius: 10px;
	padding: 14px;
	color: #4d5573;
	line-height: 1.7;
}

.page-result {
	font-size: 15.5px;
}

.page-result .review-table {
	font-size: 14.5px;
}

.page-result .review-table th {
	font-size: 13.5px;
	font-weight: 900;
}

.page-result .review-table td {
	padding: 14px 12px;
	line-height: 1.55;
	vertical-align: middle;
}

.page-result .card-title,
.page-result .review-top h2 {
	font-size: 22px;
}

.page-result .metric-row,
.page-result .subject-table,
.page-result .insight-row span {
	font-size: 15px;
}

.page-result .btn-view {
	font-size: 14px;
	padding: 8px 16px;
}

.subject-table th,
.subject-table td {
	vertical-align: middle;
}

.subject-table th:nth-child(1),
.subject-table td:nth-child(1) {
	width: 40%;
}

.subject-table th:nth-child(2),
.subject-table td:nth-child(2) {
	width: 38%;
}

.subject-table th:nth-child(3),
.subject-table td:nth-child(3) {
	width: 22%;
	text-align: center;
}

.subject-score {
	display: grid;
	grid-template-columns: minmax(90px, 1fr) 44px;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.subject-score-track {
	height: 10px;
	background: #eceff7;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(17, 24, 49, .08);
}

.subject-score-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #6f35d8 0%, #e4148a 100%);
	box-shadow: 0 4px 10px rgba(228, 20, 138, .22);
}

.subject-score strong {
	font-size: 14px;
	font-weight: 900;
	color: #111831;
	text-align: right;
}

.chart-wrap .legend {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 10px;
	padding-left: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #4d5573;
}

.chart-wrap .legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.inline-result-20 {
	background: #25c58a;
}

.inline-result-21 {
	background: #ef1b68;
}

.inline-result-22 {
	background: #a9afc4;
}