/* Mock Test Result - Public styles (black/red/white, modern & responsive) */
.mtr-public-wrap{
	--mtr-red:#d72050;
	--mtr-black:#111;
	--mtr-muted:#6b7280;
	--mtr-border:#e6e6e6;
	--mtr-bg:#ffffff;

	font-family: inherit;
	background: var(--mtr-bg);
	color: var(--mtr-black);
	border: 1px solid var(--mtr-border);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.mtr-toolbar{
	display:flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 4px 12px;
	border-bottom: 1px solid var(--mtr-border);
	margin-bottom: 12px;
}

.mtr-toolbar-left{
	display:flex;
	flex-direction: column;
	gap: 2px;
}

.mtr-toolbar-right{
	display:flex;
	align-items:center;
	justify-content:flex-end;
}

.mtr-search{
	display:flex;
	align-items:center;
	gap: 10px;
	border: 1px solid var(--mtr-border);
	border-radius: 999px;
	padding: 10px 12px;
	background: #fff;
	min-width: 240px;
	box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.mtr-search-icon{
	width: 14px;
	height: 14px;
	border: 2px solid var(--mtr-muted);
	border-radius: 50%;
	position: relative;
	opacity: .65;
	flex: 0 0 auto;
}
.mtr-search-icon::after{
	content:"";
	position:absolute;
	width: 8px;
	height: 2px;
	background: var(--mtr-muted);
	right: -7px;
	bottom: -5px;
	transform: rotate(45deg);
	opacity: .65;
}

.mtr-search-input{
	border: 0;
	outline: none;
	width: 100%;
	font-size: 14px;
	color: var(--mtr-black);
	background: transparent;
}
.mtr-search:focus-within{
	border-color: rgba(215,32,80,.55);
	box-shadow: 0 0 0 3px rgba(215,32,80,.12), 0 6px 18px rgba(0,0,0,.04);
}
.mtr-search-input::placeholder{
	color: var(--mtr-muted);
}

.mtr-no-match{
	margin-top: 10px;
	padding: 12px;
	border: 1px dashed var(--mtr-border);
	border-radius: 12px;
	color: var(--mtr-muted);
	text-align:center;
}

.mtr-title{
	font-weight: 800;
	letter-spacing: .2px;
	font-size: 16px;
}

.mtr-hint{
	font-size: 12px;
	color: var(--mtr-muted);
}

.mtr-table-wrap{ overflow-x:auto; }

.mtr-table{
	width:100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 760px;
}

.mtr-table th,
.mtr-table td{
	padding: 12px 12px;
	border-bottom: 1px solid var(--mtr-border);
	vertical-align: middle;
	font-size: 14px;
}

.mtr-table thead th{
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
	text-align: left;
	font-size: 13px;
	color: var(--mtr-black);
}

.mtr-table thead th a{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
	text-decoration:none;
	color: inherit;
}

.mtr-table thead th.is-active a span:first-child{
	color: var(--mtr-red);
}

.mtr-sort-indicator{
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mtr-muted);
	border-bottom: 2px solid var(--mtr-muted);
	transform: rotate(45deg);
	opacity: .7;
}

.mtr-row{
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.mtr-row:hover{
	background: rgba(215,32,80,.04);
	box-shadow: 0 8px 22px rgba(0,0,0,.06);
	transform: translateY(-1px);
}

.mtr-overall{ font-weight: 800; }

.mtr-empty{
	text-align:center;
	color: var(--mtr-muted);
	padding: 20px 12px;
}

/* Mobile: switch to card-like rows (multi-row per student) */
@media (max-width: 820px){
	.mtr-toolbar{ flex-direction: column; align-items: stretch; }
	.mtr-toolbar-right{ justify-content: stretch; }
	.mtr-search{ width: 100%; min-width: 0; }
	.mtr-search-input{ width: 100%; }

	.mtr-table{ min-width: 0; }
	.mtr-table thead{ display:none; }
	.mtr-table, .mtr-table tbody, .mtr-table tr, .mtr-table td{ display:block; width:100%; }
	.mtr-table tr{
		border: 1px solid var(--mtr-border);
		border-radius: 14px;
		margin: 12px 0;
		padding: 10px 10px 2px;
		background: #fff;
	}
	.mtr-table td{
		border: 0;
		padding: 10px 8px;
		display:flex;
		justify-content: space-between;
		gap: 12px;
	}
	.mtr-table td::before{
		content: attr(data-label);
		font-weight: 700;
		color: var(--mtr-black);
	}
	.mtr-row:hover{
		transform: none;
	}
}


/* Score badges */
.mtr-score-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1.5px solid #111;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-weight: 800;
	letter-spacing: .2px;
	line-height: 1;
	box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.mtr-score-badge.is-overall{
	background: var(--mtr-red);
	border-color: var(--mtr-red);
	color: #fff;
}

@media (max-width: 640px){
	.mtr-score-badge{
		min-width: 34px;
		height: 34px;
		padding: 0 10px;
	}
}