/* QuizJan — Main Stylesheet */
/* Font: Nunito (Outfit o'rniga — Uzbek harflari uchun yaxshiroq) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
	--bg: #f2f5ff;
	--bg2: #e6ecfb;
	--surface: #ffffff;
	--surface-var: #f0f4ff;
	--outline: #c8cde0;
	--outline-var: #dfe4f2;
	--text: #0f1225;
	--text2: #4e5270;
	--text3: #9096b0;
	--blue: #3b7ef8;
	--blue-c: #dbeafe;
	--green: #059669;
	--green-c: #d1fae5;
	--orange: #d97706;
	--orange-c: #fef3c7;
	--red: #dc2626;
	--red-c: #fee2e2;
	--purple: #7c3aed;
	--purple-c: #ede9fe;
	--radius: 20px;
	--radius-sm: 14px;
	--radius-xs: 9px;
	--nav-h: 70px;
	--safe-b: env(safe-area-inset-bottom, 0px);
	--shadow-sm:
		0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(59, 126, 248, 0.07);
	--shadow-md: 0 6px 24px rgba(59, 126, 248, 0.12);
	--shadow-blue: 0 8px 28px rgba(59, 126, 248, 0.35);
}
[data-theme='dark'] {
	--bg: #0c0f1a;
	--bg2: #131726;
	--surface: #181c2e;
	--surface-var: #1e2338;
	--outline: #2e3550;
	--outline-var: #242840;
	--text: #e8ecff;
	--text2: #8890b8;
	--text3: #4a5070;
	--blue: #6b9fff;
	--blue-c: #162048;
	--green: #34d399;
	--green-c: #0a2e20;
	--orange: #fbbf24;
	--orange-c: #2e1e00;
	--red: #f87171;
	--red-c: #2e0a0a;
	--purple: #a78bfa;
	--purple-c: #1e1040;
	--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}
html,
body {
	overscroll-behavior: none;
	overscroll-behavior-y: none;
	-webkit-overflow-scrolling: touch;
	height: 100%;
}
body {
	font-family: 'Nunito', system-ui, sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100dvh;
	min-height: -webkit-fill-available;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	position: relative;
	transition:
		background 0.28s ease,
		color 0.28s ease;
}
/* Smooth theme switch for key surfaces */
.card,
.bottom-nav,
.topbar,
.surface,
.more-drawer,
.modal-inner {
	transition:
		background 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease;
}
.app-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}
.content {
	flex: 1;
	padding: 0 0 calc(var(--nav-h) + var(--safe-b) + 16px);
}
.topbar {
	position: sticky;
	top: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	background: rgba(255, 255, 255, 0.88);
	border-bottom: 1px solid var(--outline-var);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}
[data-theme='dark'] .topbar {
	background: rgba(24, 28, 46, 0.88);
}
/* ── NEW FEATURES CSS ── */
@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}
@keyframes xpPop {
	0% {
		transform: translateY(40px) scale(0.85);
		opacity: 0;
	}
	60% {
		transform: translateY(-6px) scale(1.04);
		opacity: 1;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}
@keyframes xpFadeOut {
	to {
		transform: translateY(-20px);
		opacity: 0;
	}
}
.xp-popup {
	position: fixed;
	bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #fff;
	border-radius: 20px;
	padding: 12px 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45);
	animation: xpPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	pointer-events: none;
	white-space: nowrap;
}
.xp-popup-icon {
	font-size: 24px;
}
.xp-popup-text {
	font-size: 14px;
	font-weight: 800;
}
.xp-popup-sub {
	font-size: 11px;
	opacity: 0.85;
	font-weight: 600;
}
.subject-stat-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--outline-var);
}
.subject-stat-row:last-child {
	border-bottom: none;
}
.subject-stat-icon {
	font-size: 16px;
	width: 22px;
	text-align: center;
	flex-shrink: 0;
}
.subject-stat-name {
	flex: 1;
	font-size: 12px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.subject-stat-bar {
	width: 70px;
	height: 6px;
	background: var(--outline-var);
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
}
.subject-stat-bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.8s ease;
}
.subject-stat-pct {
	font-size: 12px;
	font-weight: 800;
	min-width: 34px;
	text-align: right;
	flex-shrink: 0;
}
.heatmap-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	margin-bottom: 8px;
}
.heatmap-cell {
	aspect-ratio: 1;
	border-radius: 3px;
	background: var(--outline-var);
}
.heatmap-cell.d1 {
	background: rgba(99, 102, 241, 0.3);
}
.heatmap-cell.d2 {
	background: rgba(99, 102, 241, 0.55);
}
.heatmap-cell.d3 {
	background: rgba(99, 102, 241, 0.8);
}
.heatmap-cell.d4 {
	background: #6366f1;
}
.snapshot-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.duel-vs-badge {
	background: var(--surface-var);
	padding: 5px 14px;
	border-radius: 50px;
	font-weight: 800;
	font-size: 14px;
	color: var(--text2);
}
.olympiad-progress {
	background: var(--outline-var);
	border-radius: 50px;
	height: 10px;
	overflow: hidden;
}
.olympiad-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--blue), #0d62d4);
	border-radius: 50px;
	transition: width 0.6s;
}
.tracker-topic-done {
	background: var(--green-c) !important;
	border-color: var(--green) !important;
}
/* Tab switch warning */
#tabSwitchWarnBanner {
	display: none;
	animation: slideDown 0.3s ease;
}
.topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
}
.tb-logo {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--blue), #0d62d4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: 0 2px 8px rgba(66, 133, 244, 0.35);
}
.tb-brand {
	font-weight: 900;
	font-size: 17px;
	color: var(--blue);
	letter-spacing: -0.3px;
}
.tb-right {
	display: flex;
	align-items: center;
	gap: 6px;
}
.tb-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--blue-c);
}
.tb-avt-ph {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--blue-c);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
}
.icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--surface-var);
	color: var(--text2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s;
}
.icon-btn:active {
	transform: scale(0.9);
}
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: calc(var(--nav-h) + var(--safe-b));
	padding-bottom: var(--safe-b);
	will-change: transform;
	background: rgba(255, 255, 255, 0.92);
	border-top: 1px solid var(--outline-var);
	display: flex;
	align-items: stretch;
	box-shadow:
		0 -4px 32px rgba(59, 126, 248, 0.1),
		0 -1px 0 var(--outline-var);
	/* iOS scroll bug fix */
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	isolation: isolate;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}
[data-theme='dark'] .bottom-nav {
	background: rgba(24, 28, 46, 0.92);
}
.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border: none;
	background: none;
	color: var(--text3);
	font-size: 9.5px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: color 0.2s;
	position: relative;
	padding-top: 4px;
	min-width: 0;
}
.nav-item.active {
	color: var(--blue);
}
.nav-item.active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(90deg, var(--blue), #6b9fff);
}
.nav-item .material-symbols-rounded,
.nav-item .nav-icon-fa {
	font-size: 23px;
	transition: transform 0.2s;
	line-height: 1;
}
.nav-item.active .material-symbols-rounded,
.nav-item.active .nav-icon-fa {
	transform: scale(1.12);
}
.nav-fab-slot {
	flex: 1.1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 2px;
}
.nav-fab-btn {
	width: 54px;
	height: 54px;
	border-radius: 18px;
	border: none;
	background: linear-gradient(135deg, #3b7ef8, #6b46ff);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow:
		0 6px 24px rgba(59, 126, 248, 0.5),
		0 2px 8px rgba(107, 70, 255, 0.3);
	transition: all 0.2s;
	margin-top: -20px;
	font-family: inherit;
	position: relative;
}
.nav-fab-btn::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 21px;
	background: var(--surface);
	z-index: -1;
}
.nav-fab-btn:active {
	transform: scale(0.9);
}
.nav-fab-label {
	font-size: 9.5px;
	font-weight: 700;
	color: var(--blue);
	margin-top: 6px;
	font-family: inherit;
}
/* ══════════════════════════════════════
   MORE DRAWER
   ══════════════════════════════════════ */
.more-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	z-index: 300;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.28s,
		background 0.28s,
		backdrop-filter 0.28s;
}
.more-drawer-overlay.open {
	opacity: 1;
	pointer-events: all;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.more-drawer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 88dvh;
	background: var(--surface);
	border-radius: 28px 28px 0 0;
	border-top: 1.5px solid var(--outline-var);
	box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.18);
	padding-bottom: calc(var(--safe-b) + 8px);
	z-index: 301;
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.22s;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.more-drawer.open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
	transition:
		transform 0.42s cubic-bezier(0.34, 1.08, 0.64, 1),
		opacity 0.22s;
}
/* User card */
.mdr-user-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--outline-var);
	flex-shrink: 0;
}
.mdr-user-avatar {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: linear-gradient(135deg, #3b7ef8, #6b46ff);
	color: #fff;
	font-weight: 900;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mdr-user-info {
	flex: 1;
	min-width: 0;
}
.mdr-user-name {
	font-weight: 800;
	font-size: 15px;
}
.mdr-user-sub {
	font-size: 11px;
	color: var(--text3);
	margin-top: 1px;
}
.mdr-profile-btn {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1.5px solid var(--outline-var);
	background: var(--surface-var);
	color: var(--text3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition:
		transform 0.18s,
		background 0.15s;
}
.mdr-profile-btn:active {
	transform: scale(0.88);
	background: var(--outline-var);
}
/* Scrollable body */
.more-drawer-body {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 10px 14px 4px;
	flex: 1;
}
.more-drawer-body::-webkit-scrollbar {
	display: none;
}
.mdr-section-lbl {
	font-size: 10px;
	font-weight: 800;
	color: var(--text3);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 4px 2px 8px;
}
/* Grid */
.more-drawer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding-bottom: 4px;
}
.more-drawer-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 4px 10px;
	border-radius: 18px;
	border: 1.5px solid var(--outline-var);
	background: var(--surface-var);
	color: var(--text);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	line-height: 1.2;
	transition:
		transform 0.22s cubic-bezier(0.34, 1.5, 0.64, 1),
		border-color 0.15s,
		box-shadow 0.15s;
}
.more-drawer-grid-item:active {
	transform: scale(0.88);
	border-color: var(--outline);
}
.more-drawer-grid-item .mdi-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.more-drawer-divider {
	height: 1px;
	background: var(--outline-var);
	margin: 12px 0 6px;
}
/* List rows */
.more-drawer-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 10px;
	border-radius: 14px;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	color: var(--text);
	font-family: inherit;
	transition:
		background 0.15s,
		transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
	margin-bottom: 2px;
}
.more-drawer-item:active {
	transform: scale(0.97);
	background: var(--surface-var);
}
.more-drawer-item:hover {
	background: var(--surface-var);
}
.more-drawer-item .mdi-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flexshrink: 0;
	font-size: 20px;
}
.mdi-grad-ai {
	background: linear-gradient(135deg, #ede9fe, #dbeafe) !important;
	color: var(--purple) !important;
}
.mdi-text {
	flex: 1;
	min-width: 0;
}
.mdi-text b {
	display: block;
	font-size: 13px;
	font-weight: 700;
}
.mdi-text span {
	font-size: 11px;
	color: var(--text3);
}
.mdi-arrow {
	margin-left: auto;
	font-size: 18px;
	color: var(--text3);
	flex-shrink: 0;
	transition: transform 0.18s;
}
.more-drawer-item:hover .mdi-arrow {
	transform: translateX(3px);
}
.mdr-sound-row {
	cursor: default;
}
/* Toggle switch */
.mdr-toggle {
	width: 46px;
	height: 26px;
	border-radius: 13px;
	background: var(--outline-var);
	border: none;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s;
}
.mdr-toggle.on {
	background: var(--blue);
}
.mdr-toggle-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 0.22s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.mdr-toggle.on .mdr-toggle-thumb {
	transform: translateX(20px);
}
.more-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 300;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}
.more-drawer-overlay.open {
	opacity: 1;
	pointer-events: all;
}
/* Bottom sheet style */
.more-drawer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 82dvh;
	background: var(--surface);
	border-radius: 24px 24px 0 0;
	border-top: 1px solid var(--outline-var);
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
	padding: 0 0 calc(var(--safe-b) + 8px);
	z-index: 301;
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.22s;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.more-drawer.open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
	transition:
		transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
		opacity 0.22s;
}
/* Drag handle */
.more-drawer::before {
	content: '';
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: var(--outline);
	margin: 12px auto 4px;
	flex-shrink: 0;
}
/* Sheet header */
.more-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 16px 10px;
	flex-shrink: 0;
}
.more-drawer-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--text2);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.more-drawer-close {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: var(--surface-var);
	color: var(--text2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	transition:
		transform 0.18s,
		background 0.15s;
}
.more-drawer-close:active {
	transform: scale(0.88);
	background: var(--outline-var);
}
/* Scrollable body */
.more-drawer-body {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 0 8px;
	flex: 1;
	/* Grid layout: 3 columns for icons, list for rest */
}
.more-drawer-body::-webkit-scrollbar {
	display: none;
}
/* Quick actions grid (top 3x2) */
.more-drawer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 4px 0 12px;
}
.more-drawer-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 4px;
	border-radius: 14px;
	border: none;
	background: var(--surface-var);
	color: var(--text);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition:
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		background 0.15s;
	text-align: center;
	line-height: 1.2;
}
.more-drawer-grid-item:active {
	transform: scale(0.9);
}
.more-drawer-grid-item .mdi-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.more-drawer-divider {
	height: 1px;
	background: var(--outline-var);
	margin: 4px 6px 8px;
}
/* List items (bottom section) */
.more-drawer-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px;
	border-radius: 12px;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	transition:
		background 0.15s,
		transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.more-drawer-item:active {
	transform: scale(0.97);
	background: var(--surface-var);
}

.more-drawer-item .mdi-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
}
.more-drawer-item .mdi-arrow {
	margin-left: auto;
	font-size: 16px;
	color: var(--text3);
	transition: transform 0.18s;
}
.more-drawer-item:hover .mdi-arrow {
	transform: translateX(2px);
}
.section {
	display: none;
	flex-direction: column;
	gap: 14px;
	padding: 14px 14px 0;
	animation: fadeUp 0.22s ease;
}
.section.active {
	display: flex;
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.card {
	background: var(--surface);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--outline-var);
}
.card-header {
	display: flex;
	align-items: center;
	gap: 12px;
}
.card-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ci-blue {
	background: var(--blue-c);
	color: var(--blue);
}
.ci-green {
	background: var(--green-c);
	color: var(--green);
}
.ci-orange {
	background: var(--orange-c);
	color: var(--orange);
}
.ci-red {
	background: var(--red-c);
	color: var(--red);
}
.ci-purple {
	background: var(--purple-c);
	color: var(--purple);
}
.card-info {
	flex: 1;
	min-width: 0;
}
.card-title {
	font-weight: 700;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.card-subtitle {
	font-size: 12px;
	color: var(--text2);
	margin-top: 2px;
}
.divider {
	height: 1px;
	background: var(--outline-var);
	margin: 12px 0;
}
.sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.sec-title {
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -0.2px;
}
.sec-action {
	font-size: 13px;
	color: var(--blue);
	font-weight: 600;
	cursor: pointer;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 20px;
	border-radius: 50px;
	border: none;
	font-size: 14px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	transition:
		opacity 0.15s,
		transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.15s;
	white-space: nowrap;
	letter-spacing: 0.1px;
}
.btn:active {
	transform: scale(0.94);
	opacity: 0.88;
}
.btn:disabled {
	opacity: 0.45;
	pointer-events: none;
}
.btn-primary {
	background: linear-gradient(135deg, #3b7ef8, #6b46ff);
	color: #fff;
	box-shadow: 0 4px 16px rgba(59, 126, 248, 0.4);
}
.btn-green {
	background: linear-gradient(135deg, #059669, #10b981);
	color: #fff;
	box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}
.btn-danger {
	background: linear-gradient(135deg, #dc2626, #f87171);
	color: #fff;
	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.btn-tonal {
	background: var(--blue-c);
	color: var(--blue);
}
.btn-ghost {
	background: var(--surface-var);
	color: var(--text);
}
.btn-sm {
	padding: 8px 14px;
	font-size: 12px;
}
.btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.label {
	font-size: 12px;
	font-weight: 700;
	color: var(--text2);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
input,
textarea,
select {
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--outline);
	background: var(--bg);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border 0.15s;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--blue);
}
textarea {
	min-height: 80px;
	resize: vertical;
}
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.hint {
	font-size: 12px;
	color: var(--text2);
	margin-top: 6px;
	line-height: 1.5;
}
.chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 50px;
	border: 1.5px solid var(--outline-var);
	background: var(--surface);
	color: var(--text2);
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
	white-space: nowrap;
}
.chip.active {
	background: linear-gradient(135deg, #3b7ef8, #6b46ff);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 3px 12px rgba(59, 126, 248, 0.35);
}
.chip:active {
	transform: scale(0.93);
}
.chip-ct {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 800;
}
.chip:not(.active) .chip-ct {
	background: var(--surface-var);
	color: var(--text2);
}
.filter-bar {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 4px 0 8px;
}
.filter-bar::-webkit-scrollbar {
	display: none;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 50px;
	background: var(--surface-var);
	font-size: 13px;
	font-weight: 500;
}
.toast {
	position: fixed;
	bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(14px);
	background: var(--text);
	color: var(--bg);
	padding: 10px 22px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	transition:
		opacity 0.22s,
		transform 0.22s;
	pointer-events: none;
	z-index: 9999;
	white-space: nowrap;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--outline-var);
	border-top-color: var(--blue);
	border-right-color: rgba(59, 126, 248, 0.3);
	border-radius: 50%;
	animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	margin: 0 auto;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ═══ SKELETON LOADING ═══ */
@keyframes skeletonPulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}
@keyframes skeletonShimmer {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}
.skel {
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		var(--outline-var) 25%,
		var(--surface-var) 50%,
		var(--outline-var) 75%
	);
	background-size: 200% 100%;
	animation: skeletonShimmer 1.6s ease-in-out infinite;
}
.skel-card {
	background: var(--surface);
	border-radius: var(--radius);
	padding: 18px;
	border: 1px solid var(--outline-var);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.skel-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--outline-var);
}
.skel-row:last-child {
	border-bottom: none;
}
.skel-avatar {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	flex-shrink: 0;
}
.skel-avatar.round {
	border-radius: 50%;
}
.skel-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.skel-line {
	height: 12px;
	border-radius: 6px;
}
.skel-line.w100 {
	width: 100%;
}
.skel-line.w75 {
	width: 75%;
}
.skel-line.w55 {
	width: 55%;
}
.skel-line.w40 {
	width: 40%;
}
.skel-line.w30 {
	width: 30%;
}
.skel-line.h16 {
	height: 16px;
}
.skel-line.h20 {
	height: 20px;
}
.skel-line.h28 {
	height: 28px;
	border-radius: 8px;
}
.skel-line.h40 {
	height: 40px;
	border-radius: 12px;
}
.skel-badge {
	height: 20px;
	width: 60px;
	border-radius: 50px;
}
.skel-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px;
	background: var(--surface-var);
	border-radius: 16px;
}
.skel-grid-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
}
.skel-grid-label {
	height: 10px;
	width: 50px;
	border-radius: 5px;
}
.skel-stat {
	background: var(--surface-var);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Stagger animation delays */
.skel-row:nth-child(1) .skel,
.skel-grid-item:nth-child(1) .skel {
	animation-delay: 0s;
}
.skel-row:nth-child(2) .skel,
.skel-grid-item:nth-child(2) .skel {
	animation-delay: 0.1s;
}
.skel-row:nth-child(3) .skel,
.skel-grid-item:nth-child(3) .skel {
	animation-delay: 0.2s;
}
.skel-row:nth-child(4) .skel,
.skel-grid-item:nth-child(4) .skel {
	animation-delay: 0.3s;
}
.skel-row:nth-child(5) .skel,
.skel-grid-item:nth-child(5) .skel {
	animation-delay: 0.4s;
}
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 16px;
	text-align: center;
}
.empty .material-symbols-rounded {
	font-size: 48px;
	color: var(--outline);
}
.empty-title {
	font-weight: 700;
	font-size: 15px;
}
.empty-sub {
	font-size: 13px;
	color: var(--text2);
}
.greeting-card {
	background: linear-gradient(
		140deg,
		#1a3fcb 0%,
		#3b7ef8 40%,
		#6b46ff 80%,
		#7c3aed 100%
	);
	border-radius: var(--radius);
	padding: 24px 20px 20px;
	color: #fff;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 16px 48px rgba(59, 126, 248, 0.42),
		0 4px 12px rgba(107, 70, 255, 0.25);
	transition: box-shadow 0.3s;
}
.greeting-card::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
	animation: gc-float 6s ease-in-out infinite;
}
.greeting-card::before {
	content: '';
	position: absolute;
	bottom: -50px;
	left: -30px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	animation: gc-float 8s ease-in-out infinite reverse;
}
@keyframes gc-float {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-12px) scale(1.04);
	}
}
.gc-emoji {
	font-size: 36px;
	display: block;
	margin-bottom: 10px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
	position: relative;
	z-index: 1;
}
.gc-name {
	font-size: 25px;
	font-weight: 900;
	letter-spacing: -0.6px;
	margin-bottom: 5px;
	position: relative;
	z-index: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.gc-sub {
	font-size: 13px;
	opacity: 0.85;
	margin-bottom: 18px;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}
.gc-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.gc-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 16px;
	border-radius: 50px;
	border: none;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
	white-space: nowrap;
	letter-spacing: 0.1px;
}
.gc-btn:active {
	transform: scale(0.91);
}
.gc-btn-white {
	background: #fff;
	color: #1d4ed8;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.gc-btn-ghost {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.gc-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.26);
}
/* Quick action cards — Battle & Lobby */
.qa-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.qa-card {
	cursor: pointer;
	border-radius: var(--radius);
	padding: 16px;
	position: relative;
	overflow: hidden;
	transition:
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.2s;
}
.qa-card:active {
	transform: scale(0.95);
}
.qa-card--battle {
	background: linear-gradient(145deg, #160808 0%, #2d1010 55%, #3d1a0a 100%);
	border: 1.5px solid rgba(217, 48, 37, 0.3);
	box-shadow: 0 6px 24px rgba(217, 48, 37, 0.18);
}
.qa-card--lobby {
	background: linear-gradient(145deg, #0a0814 0%, #180d2d 55%, #1a0f3d 100%);
	border: 1.5px solid rgba(124, 58, 237, 0.3);
	box-shadow: 0 6px 24px rgba(124, 58, 237, 0.18);
}
[data-theme='dark'] .qa-card--battle {
	box-shadow: 0 6px 28px rgba(217, 48, 37, 0.28);
}
[data-theme='dark'] .qa-card--lobby {
	box-shadow: 0 6px 28px rgba(124, 58, 237, 0.28);
}
.qa-orb {
	position: absolute;
	top: -24px;
	right: -24px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	pointer-events: none;
}
.qa-card--battle .qa-orb {
	background: rgba(217, 48, 37, 0.14);
}
.qa-card--lobby .qa-orb {
	background: rgba(124, 58, 237, 0.14);
}
.qa-icon {
	font-size: 30px;
	margin-bottom: 8px;
	position: relative;
	z-index: 1;
}
.qa-title {
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	position: relative;
	z-index: 1;
}
.qa-desc {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 3px;
	position: relative;
	z-index: 1;
}
.qa-badge {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 10px;
	font-weight: 800;
	position: relative;
	z-index: 1;
}
.qa-card--battle .qa-badge {
	background: rgba(217, 48, 37, 0.28);
	color: #f87171;
}
.qa-card--lobby .qa-badge {
	background: rgba(124, 58, 237, 0.28);
	color: #a78bfa;
}
.bn-wrap {
	overflow: hidden;
	border-radius: var(--radius-sm);
}
.bn-track {
	display: flex;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bn-slide {
	min-width: 100%;
	padding: 14px 16px;
	cursor: pointer;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--blue-c), var(--surface-var));
}
.bn-title {
	font-weight: 800;
	font-size: 15px;
	margin-bottom: 4px;
}
.bn-msg {
	font-size: 13px;
	color: var(--text2);
	line-height: 1.4;
}
.bn-cta {
	margin-top: 6px;
	font-weight: 800;
	color: var(--blue);
	font-size: 13px;
}
.bn-dots {
	display: flex;
	gap: 5px;
	justify-content: center;
	margin-top: 8px;
}
.bn-dots .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--outline);
	cursor: pointer;
	transition: all 0.2s;
}
.bn-dots .dot.on {
	background: var(--blue);
	width: 16px;
	border-radius: 4px;
}
.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.stat-box {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 16px;
	border: 1px solid var(--outline-var);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.18s;
}
.stat-box:active {
	transform: scale(0.97);
}
.stat-icon {
	font-size: 20px;
	margin-bottom: 4px;
}
.stat-val {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -1px;
	font-family: 'JetBrains Mono', monospace;
}
.stat-lbl {
	font-size: 11px;
	color: var(--text2);
	margin-top: 2px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.search-wrap {
	position: relative;
	margin-bottom: 10px;
}
.search-wrap .material-symbols-rounded {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--text2);
	pointer-events: none;
}
.search-wrap input {
	padding-left: 40px;
	border-radius: 50px;
	font-size: 13px;
}
/* ════ QUIZ ITEM — modern card ════ */
.quiz-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border-radius: 16px;
	cursor: pointer;
	background: var(--surface);
	border: 1.5px solid var(--outline-var);
	margin-bottom: 6px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s,
		transform 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
	position: relative;
	overflow: hidden;
}
.quiz-item:last-child {
	margin-bottom: 0;
}
.quiz-item:active {
	transform: scale(0.972);
	border-color: var(--outline);
}
.quiz-item:hover {
	border-color: var(--outline);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}

/* Category icon */
.qi-icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
	transition: transform 0.2s;
}
.quiz-item:active .qi-icon {
	transform: scale(0.9);
}

/* Category colour map */
.qi-cat-math {
	background: #dbeafe;
}
.qi-cat-physics {
	background: #fef3c7;
}
.qi-cat-chem {
	background: #d1fae5;
}
.qi-cat-bio {
	background: #dcfce7;
}
.qi-cat-history {
	background: #fce7f3;
}
.qi-cat-english {
	background: #e0f2fe;
}
.qi-cat-code {
	background: #ede9fe;
}
.qi-cat-default {
	background: #f0f4ff;
}
/* Cover image in quiz list item */
.qi-cover-img {
	overflow: hidden;
	padding: 0;
}
.qi-cover-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 13px;
}
/* Cover image preview (editor) */
.ed-cover-preview {
	position: relative;
	width: 100%;
	max-width: 260px;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 10px;
	border: 2px solid var(--outline-var);
}
.ed-cover-preview img {
	width: 100%;
	max-height: 160px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}
.ed-cover-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition:
		background 0.15s,
		transform 0.15s;
}
.ed-cover-remove:hover {
	background: rgba(220, 38, 38, 0.8);
}
.ed-cover-remove:active {
	transform: scale(0.85);
}
[data-theme='dark'] .qi-cat-math {
	background: #162048;
}
[data-theme='dark'] .qi-cat-physics {
	background: #2e1e00;
}
[data-theme='dark'] .qi-cat-chem {
	background: #0a2e20;
}
[data-theme='dark'] .qi-cat-bio {
	background: #0a2e12;
}
[data-theme='dark'] .qi-cat-history {
	background: #2d0a1e;
}
[data-theme='dark'] .qi-cat-english {
	background: #0a1e2d;
}
[data-theme='dark'] .qi-cat-code {
	background: #1e1040;
}
[data-theme='dark'] .qi-cat-default {
	background: #141a30;
}

.qi-info {
	flex: 1;
	min-width: 0;
}
.qi-title {
	font-weight: 700;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
	color: var(--text);
}
.qi-meta {
	font-size: 11px;
	color: var(--text3);
	margin-top: 4px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}
.qi-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--outline);
	flex-shrink: 0;
}
.qi-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 50px;
	font-size: 10px;
	font-weight: 700;
}
.qi-chevron {
	color: var(--text3);
	font-size: 18px;
	flex-shrink: 0;
	transition:
		transform 0.18s,
		color 0.15s;
}
.quiz-item:hover .qi-chevron {
	transform: translateX(3px);
	color: var(--blue);
}
.qi-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

/* ════ RESULT ROW ════ */
.result-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border-radius: 16px;
	cursor: pointer;
	background: var(--surface);
	border: 1.5px solid var(--outline-var);
	margin-bottom: 6px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s,
		transform 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.result-row:last-child {
	margin-bottom: 0;
}
.result-row:active {
	transform: scale(0.972);
	border-color: var(--outline);
}
.result-row:hover {
	border-color: var(--outline);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}
.res-ring {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
	font-family: 'JetBrains Mono', monospace;
}
.rr-pass {
	background: var(--green-c);
	color: var(--green);
	border: 2px solid var(--green);
}
.rr-fail {
	background: var(--red-c);
	color: var(--red);
	border: 2px solid var(--red);
}
.rr-mid {
	background: var(--orange-c);
	color: var(--orange);
	border: 2px solid var(--orange);
}
.dev-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
	background: var(--surface-var);
	border: 1px solid var(--outline-var);
}
.dev-name {
	font-weight: 700;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dev-sub {
	font-size: 11px;
	color: var(--text2);
	margin-top: 2px;
}
.lb-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
}
.lb-top1 {
	background: linear-gradient(
		135deg,
		rgba(255, 209, 0, 0.15),
		rgba(255, 160, 0, 0.08)
	);
	border: 1.5px solid rgba(255, 200, 0, 0.35);
}
.lb-top2 {
	background: var(--surface-var);
	border: 1.5px solid var(--outline);
}
.lb-top3 {
	background: rgba(180, 110, 60, 0.07);
	border: 1.5px solid rgba(180, 110, 60, 0.25);
}
.lb-other {
	background: var(--surface-var);
	border: 1px solid var(--outline-var);
}
.lb-rank {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	flex-shrink: 0;
}
.lb-name {
	font-weight: 700;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lb-meta {
	font-size: 11px;
	color: var(--text2);
	margin-top: 1px;
}
.lb-score {
	font-weight: 900;
	font-size: 18px;
	color: var(--blue);
	font-family: 'JetBrains Mono', monospace;
}
.au-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--outline-var);
}
.au-row:last-child {
	border-bottom: none;
}
.au-av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--blue-c);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	flex-shrink: 0;
}
.au-name {
	font-weight: 700;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.au-meta {
	font-size: 11px;
	color: var(--text2);
	margin-top: 1px;
}
.tech-notice {
	background: var(--orange-c);
	border: 1.5px solid var(--orange);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
}
.fab {
	display: none !important;
}
.qfs {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: var(--bg);
	display: none;
	flex-direction: column;
	overflow: hidden;
}
.qfs.open {
	display: flex;
	animation: fadeUp 0.2s ease;
}
.qfs-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--outline-var);
	flex-shrink: 0;
}
.qfs-meta {
	font-size: 13px;
	font-weight: 700;
	color: var(--text2);
}
.qfs-timer {
	font-size: 20px;
	font-weight: 800;
	color: var(--blue);
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.5px;
}
.qfs-timer.danger {
	color: var(--red);
	animation: pulse 1s infinite;
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
.qfs-exit-btn {
	background: none;
	border: none;
	color: var(--text2);
	cursor: pointer;
	display: flex;
	padding: 4px;
}
.qfs-prog {
	height: 4px;
	background: var(--outline-var);
	flex-shrink: 0;
}
.qfs-prog-fill {
	height: 100%;
	background: var(--blue);
	transition: width 0.4s;
}
.qfs-dots {
	display: flex;
	gap: 5px;
	padding: 8px 14px;
	flex-shrink: 0;
	flex-wrap: wrap;
	background: var(--surface);
	border-bottom: 1px solid var(--outline-var);
	overflow-x: auto;
	scrollbar-width: none;
}
.qfs-dots::-webkit-scrollbar {
	display: none;
}
.qfs-dot {
	min-width: 32px;
	height: 32px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--surface-var);
	color: var(--text2);
	border: 2px solid transparent;
	cursor: pointer;
	font-size: 11px;
	font-weight: 800;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.18s;
	flex-shrink: 0;
}
.qfs-dot.active {
	background: var(--blue);
	color: #fff;
	border-color: var(--blue);
	transform: scale(1.1);
	box-shadow: 0 3px 10px rgba(66, 133, 244, 0.4);
}
.qfs-dot.answered {
	background: var(--green-c);
	color: var(--green);
}
.qfs-dot.answered.active {
	background: var(--blue);
	color: #fff;
}
.qfs-body {
	flex: 1;
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
}
.qfs-slides {
	display: flex;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.qfs-slide {
	min-width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 20px 16px 110px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.q-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 50px;
	background: var(--blue-c);
	color: var(--blue);
	font-size: 11px;
	font-weight: 800;
	align-self: flex-start;
}
.q-text {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--text);
}
.opt-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.opt-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: var(--radius-sm);
	border: 2px solid var(--outline);
	background: var(--surface);
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s,
		transform 0.1s;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	text-align: left;
	width: 100%;
}
.opt-btn:active {
	transform: scale(0.98);
}
.opt-btn.selected {
	border-color: var(--blue);
	background: var(--blue-c);
}
.opt-key {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--surface-var);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
	transition: all 0.15s;
}
.opt-btn.selected .opt-key {
	background: var(--blue);
	color: #fff;
}
.opt-text-input {
	width: 100%;
	padding: 12px;
	border-radius: var(--radius-sm);
	border: 2px solid var(--outline);
	font-size: 14px;
	font-family: inherit;
	background: var(--surface);
	color: var(--text);
	outline: none;
}
.opt-text-input:focus {
	border-color: var(--blue);
}
.qfs-actions {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	background: linear-gradient(transparent, var(--bg) 30%);
	display: flex;
	gap: 8px;
	align-items: center;
}
.qfs-nav {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--surface);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	flex-shrink: 0;
}
.qfs-nav:disabled {
	opacity: 0.3;
	pointer-events: none;
}
.qfs-finish {
	flex: 1;
	padding: 13px;
	border-radius: var(--radius-sm);
	border: none;
	background: var(--green);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
}
.qfs-finish:active {
	transform: scale(0.97);
}
.qfs-result {
	position: absolute;
	inset: 0;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 28px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.qfs-result.active {
	opacity: 1;
	pointer-events: auto;
}
.res-circle {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 800;
}
.res-pct {
	font-size: 36px;
	font-family: 'JetBrains Mono', monospace;
}
.res-lbl {
	font-size: 13px;
	margin-top: 2px;
}
.lib-drop-zone {
	border: 2px dashed var(--outline);
	border-radius: var(--radius-sm);
	padding: 24px 16px;
	text-align: center;
	transition:
		border-color 0.2s,
		background 0.2s;
	background: var(--surface-var);
}
.lib-drop-zone.dragover {
	border-color: var(--blue);
	background: var(--blue-c);
}
.lib-file-selected {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--blue-c);
	border-radius: var(--radius-xs);
	font-size: 13px;
	font-weight: 600;
	color: var(--blue);
}
.lib-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 4px 0;
}
.lib-item {
	position: relative;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface-var);
	aspect-ratio: 1;
	cursor: pointer;
	border: 2px solid transparent;
	transition:
		border-color 0.15s,
		transform 0.15s;
}
.lib-item:active {
	transform: scale(0.96);
}
.lib-item.selected {
	border-color: var(--blue);
}
.lib-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lib-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 28px;
	color: var(--text3);
}
.lib-item-badge {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 10px;
	padding: 1px 5px;
	border-radius: 4px;
	font-weight: 600;
}
.lib-item-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
	color: #fff;
	font-size: 10px;
	padding: 12px 5px 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lib-upload-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--surface);
	border: 2px dashed var(--outline);
	border-radius: var(--radius-sm);
	padding: 16px;
	color: var(--text2);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	margin-bottom: 12px;
	transition:
		border-color 0.15s,
		color 0.15s;
}
.lib-upload-btn:hover {
	border-color: var(--blue);
	color: var(--blue);
}
.lib-filter-row {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 10px;
}
.lib-filter-row::-webkit-scrollbar {
	display: none;
}
.lib-filter-chip {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	background: var(--surface);
	color: var(--text2);
	border: 1px solid var(--outline);
	cursor: pointer;
	transition: all 0.15s;
}
.lib-filter-chip.active {
	background: var(--blue);
	color: #fff;
	border-color: var(--blue);
}
.ed-ai-panel {
	background: linear-gradient(135deg, var(--blue-c), var(--purple-c));
	border: 1px solid var(--outline-var);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	margin-bottom: 12px;
}
.ed-ai-panel .ed-ai-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ed-ai-panel .grid {
	gap: 8px;
}
.editor-ov {
	position: fixed;
	inset: 0;
	z-index: 600;
	background: var(--bg);
	display: none;
	flex-direction: column;
	overflow: hidden;
}
.editor-ov.open {
	display: flex;
	animation: fadeUp 0.2s ease;
}
.editor-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--outline-var);
	flex-shrink: 0;
}
.ed-info {
	flex: 1;
	min-width: 0;
}
.ed-title-el {
	font-weight: 800;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ed-sub-el {
	font-size: 11px;
	color: var(--text2);
	margin-top: 1px;
}
.editor-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 12px 100px;
}
.ed-q-card {
	background: var(--surface);
	border-radius: var(--radius-sm);
	margin-bottom: 10px;
	border: 2px solid var(--outline-var);
	overflow: hidden;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.ed-q-card:focus-within {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}
.ed-q-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 0;
}
.ed-q-num {
	font-size: 10px;
	font-weight: 800;
	color: var(--text2);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--surface-var);
	padding: 3px 10px;
	border-radius: 50px;
}
.ed-q-tools {
	display: flex;
	gap: 4px;
}
.ed-q-tool {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	border: none;
	background: none;
	color: var(--text2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
}
.ed-q-tool.del:hover {
	background: var(--red-c);
	color: var(--red);
}
.ed-q-text {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: var(--text);
	resize: none;
	outline: none;
	min-height: 44px;
	padding: 8px 12px 4px;
	line-height: 1.5;
}
.ed-opts {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--outline-var);
	margin-top: 8px;
}
.ed-opt-row {
	display: flex;
	align-items: center;
	padding: 0 12px;
	border-bottom: 1px solid var(--outline-var);
	transition: background 0.1s;
}
.ed-opt-row:last-child {
	border-bottom: none;
}
.ed-opt-row:focus-within {
	background: rgba(66, 133, 244, 0.04);
}
.ed-opt-key {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--surface-var);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 0.15s;
	border: none;
	margin: 8px 10px 8px 0;
	color: var(--text2);
}
.ed-opt-key:hover {
	background: var(--blue-c);
	color: var(--blue);
}
.ed-opt-key.correct {
	background: var(--green);
	color: #fff;
	box-shadow: 0 2px 6px rgba(26, 135, 84, 0.3);
}
.ed-opt-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 9px 0;
	font-size: 13px;
	font-family: inherit;
	color: var(--text);
	outline: none;
}
.ed-add-q {
	width: 100%;
	padding: 13px;
	border-radius: var(--radius-sm);
	border: 2px dashed var(--outline);
	background: transparent;
	color: var(--text2);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	margin-bottom: 12px;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.ed-add-q:hover {
	border-color: var(--blue);
	color: var(--blue);
	background: var(--blue-c);
}
.editor-footer {
	background: var(--surface);
	border-top: 1px solid var(--outline-var);
	padding: 10px 16px;
	text-align: center;
	flex-shrink: 0;
}
.review-item {
	padding: 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
	border: 1.5px solid var(--outline-var);
}
.review-item.correct {
	border-color: var(--green);
	background: rgba(26, 135, 84, 0.07);
}
.review-item.wrong {
	border-color: var(--red);
	background: rgba(217, 48, 37, 0.07);
}
.review-q {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 8px;
	line-height: 1.4;
}
.review-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: var(--radius-xs);
	margin-bottom: 4px;
	font-size: 12px;
	background: var(--surface-var);
}
.review-opt.sel-correct {
	background: var(--green);
	color: #fff;
	font-weight: 700;
}
.review-opt.sel-wrong {
	background: var(--red);
	color: #fff;
	font-weight: 700;
}
.review-opt.is-correct {
	background: rgba(26, 135, 84, 0.12);
	font-weight: 600;
}
.rv-key {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	flex-shrink: 0;
}
.profile-hero {
	background: var(--surface);
	border-radius: var(--radius);
	padding: 20px;
	border: 1px solid var(--outline-var);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.ph-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--blue-c);
}
.ph-av-ph {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--blue-c);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 800;
	border: 3px solid var(--blue);
}
.ph-name {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.3px;
}
.ph-username {
	font-size: 13px;
	color: var(--text2);
}
.ph-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
.role-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
}
.rp-admin {
	background: var(--purple-c);
	color: var(--purple);
}
.rp-teacher {
	background: var(--orange-c);
	color: var(--orange);
}
.rp-student {
	background: var(--blue-c);
	color: var(--blue);
}
.lim-card {
	background: var(--surface);
	border-radius: var(--radius);
	padding: 16px;
	border: 1px solid var(--outline-var);
	box-shadow: var(--shadow-sm);
}
.lim-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.lim-title {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
}
.lim-reset {
	font-size: 11px;
	color: var(--text3);
	margin-top: 2px;
}
.prem-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 50px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}
.lim-row {
	margin-bottom: 12px;
}
.lim-row:last-child {
	margin-bottom: 0;
}
.lim-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.lim-label {
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}
.lim-nums {
	font-size: 12px;
	color: var(--text2);
	font-weight: 600;
}
.lim-bar-bg {
	height: 8px;
	background: var(--surface-var);
	border-radius: 50px;
	overflow: hidden;
}
.lim-bar-fill {
	height: 100%;
	border-radius: 50px;
	transition: width 0.5s ease;
}
.lim-bar-fill.safe {
	background: var(--green);
}
.lim-bar-fill.warn {
	background: var(--orange);
}
.lim-bar-fill.full {
	background: var(--red);
}
.mpicker-modal {
	position: fixed;
	inset: 0;
	z-index: 8000;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mpicker-modal.open {
	transform: translateY(0);
}
.mpicker-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--outline-var);
	position: sticky;
	top: 0;
	z-index: 1;
}
.mpicker-top h3 {
	flex: 1;
	font-size: 15px;
	font-weight: 800;
}
.mpicker-body {
	flex: 1;
	overflow-y: auto;
	padding: 10px 12px;
}
.mpicker-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
}
.mpicker-item {
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
	background: var(--surface-var);
	border: 2.5px solid transparent;
	cursor: pointer;
	transition: all 0.15s;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.mpicker-item.sel {
	border-color: var(--blue);
}
.mpicker-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mpicker-item .mp-icon {
	font-size: 28px;
}
.mpicker-item .mp-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 10px;
	padding: 3px 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mpicker-item .mp-check {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	display: none;
	align-items: center;
	justify-content: center;
}
.mpicker-item.sel .mp-check {
	display: flex;
}
.media-attach-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: var(--radius-xs);
	border: 1.5px dashed var(--outline);
	background: transparent;
	color: var(--text3);
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s;
	margin-top: 5px;
}
.media-attach-btn:hover,
.media-attach-btn.has {
	border-color: var(--blue);
	background: var(--blue-c);
	color: var(--blue);
}
.media-attach-btn .material-symbols-rounded {
	font-size: 14px;
}
.media-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--blue-c);
	color: var(--blue);
	border-radius: 50px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	margin-top: 5px;
}
.media-tag button {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	font-size: 12px;
	padding: 0;
}
.nav-item .more-badge {
	position: absolute;
	top: 6px;
	right: calc(50% - 18px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
	border: 2px solid var(--surface);
	display: none;
}
.nav-item .more-badge.show {
	display: block;
}
.nav-fab-btn.pulse {
	animation: fabPulse 2s infinite;
}
@keyframes fabPulse {
	0%,
	100% {
		box-shadow:
			0 4px 18px rgba(66, 133, 244, 0.45),
			0 0 0 0 rgba(66, 133, 244, 0.4);
	}
	50% {
		box-shadow:
			0 4px 18px rgba(66, 133, 244, 0.45),
			0 0 0 10px rgba(66, 133, 244, 0);
	}
}
.dtm-subject-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}
/* Prevent card overflow */
.card:has(.dtm-subject-grid),
.card:has(.dtm-subj-card) {
	overflow: hidden;
}
.dtm-subj-card {
	background: var(--surface-var);
	border-radius: 16px;
	padding: 14px 12px;
	border: 1.5px solid var(--outline-var);
	cursor: pointer;
	transition:
		transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1),
		border-color 0.15s,
		box-shadow 0.15s;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
}
.dtm-subj-card:active {
	transform: scale(0.94);
	border-color: var(--blue);
}
.dtm-subj-card.selected {
	border-color: var(--blue);
	background: var(--blue-c);
	box-shadow: 0 4px 16px rgba(59, 126, 248, 0.2);
}
.dtm-subj-card:hover {
	border-color: var(--outline);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}
.dtm-subj-icon {
	font-size: 28px;
	line-height: 1;
}
.dtm-subj-name {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
}
.dtm-subj-meta {
	font-size: 11px;
	color: var(--text3);
}
.dtm-src-btn {
	background: var(--surface);
	border: 2px solid var(--outline-var);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	transition: all 0.18s;
	width: 100%;
}
.dtm-src-btn:active {
	transform: scale(0.97);
}
.dtm-src-active {
	border-color: var(--blue);
	background: var(--blue-c);
}
.q-formula {
	margin: 8px 0;
	padding: 10px 12px;
	background: var(--surface-var);
	border-radius: 10px;
	overflow-x: auto;
	text-align: center;
}
.katex {
	font-size: 1.1em;
}
.dtm-hero {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	border-radius: var(--radius);
	padding: 20px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.dtm-hero::before {
	content: '🎓';
	position: absolute;
	right: 16px;
	top: 14px;
	font-size: 48px;
	opacity: 0.2;
}
.dtm-hero-title {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.3px;
	margin-bottom: 4px;
}
.dtm-hero-sub {
	font-size: 13px;
	opacity: 0.75;
	margin-bottom: 14px;
	line-height: 1.4;
}
.dtm-stats-row {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}
.dtm-stat {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 8px 12px;
	flex: 1;
	text-align: center;
}
.dtm-stat-val {
	font-size: 20px;
	font-weight: 900;
	font-family: 'JetBrains Mono', monospace;
}
.dtm-stat-lbl {
	font-size: 10px;
	opacity: 0.7;
	margin-top: 2px;
}
.group-card {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 14px;
	border: 1px solid var(--outline-var);
	cursor: pointer;
	transition: all 0.18s;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.group-card:active {
	background: var(--surface-var);
}
.group-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--purple-c);
	color: var(--purple);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.group-name {
	font-weight: 700;
	font-size: 14px;
}
.group-meta {
	font-size: 12px;
	color: var(--text2);
	margin-top: 2px;
}
.group-code-badge {
	background: var(--surface-var);
	border: 1px solid var(--outline);
	border-radius: 8px;
	padding: 4px 10px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--blue);
	flex-shrink: 0;
}
.grp-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	background: var(--bg);
	display: none;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}
.grp-overlay.open {
	display: flex;
	transform: translateX(0);
	animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}
.grp-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--outline-var);
	flex-shrink: 0;
}
.grp-body {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.member-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--outline-var);
}
.member-row:last-child {
	border-bottom: none;
}
.member-av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--blue-c);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	flex-shrink: 0;
}
.wallet-card {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	border-radius: var(--radius);
	padding: 18px 20px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.wallet-card::after {
	content: '🪙';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 44px;
	opacity: 0.25;
}
.wallet-label {
	font-size: 12px;
	font-weight: 700;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.wallet-balance {
	font-size: 36px;
	font-weight: 900;
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: -1px;
}
.wallet-sub {
	font-size: 12px;
	opacity: 0.75;
	margin-top: 2px;
}
.tx-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--outline-var);
}
.tx-row:last-child {
	border-bottom: none;
}
.tx-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.tx-earn {
	background: var(--green-c);
}
.tx-spend {
	background: var(--red-c);
}
.tx-bonus {
	background: var(--orange-c);
}
.tx-amount {
	font-weight: 800;
	font-family: 'JetBrains Mono', monospace;
	font-size: 15px;
	flex-shrink: 0;
}
.tx-earn .tx-amount,
.tx-bonus .tx-amount {
	color: var(--green);
}
.ach-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.ach-item {
	background: var(--surface-var);
	border-radius: var(--radius-sm);
	padding: 12px 8px;
	text-align: center;
	border: 1.5px solid var(--outline-var);
	transition: all 0.18s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}
.ach-item.earned {
	border-color: var(--orange);
	background: var(--orange-c);
}
.ach-icon {
	font-size: 26px;
	line-height: 1;
}
.ach-name {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text2);
}
.ach-item.earned .ach-name {
	color: var(--orange);
}
.ach-coins {
	font-size: 10px;
	color: var(--text3);
	font-weight: 600;
}
.ach-item.earned .ach-coins {
	color: #d97706;
}
.profile-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
	width: 100%;
}
.psr-item {
	background: var(--surface-var);
	border-radius: var(--radius-xs);
	padding: 10px 8px;
	text-align: center;
}
.psr-val {
	font-size: 18px;
	font-weight: 900;
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: -0.5px;
	color: var(--blue);
}
.psr-lbl {
	font-size: 10px;
	color: var(--text2);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-top: 2px;
}
.lb-tabs {
	display: flex;
	gap: 0;
	border-radius: var(--radius-xs);
	overflow: hidden;
	border: 1px solid var(--outline);
	margin-bottom: 14px;
}
.lb-tab-btn {
	flex: 1;
	padding: 9px 6px;
	font-size: 11px;
	font-weight: 700;
	background: var(--surface-var);
	color: var(--text2);
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s;
}
.lb-tab-btn.active {
	background: var(--blue);
	color: #fff;
}
.lib-filter-row {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-bottom: 10px;
}
.lib-filter-row::-webkit-scrollbar {
	display: none;
}
.lib-filter-chip {
	flex-shrink: 0;
	padding: 6px 12px;
	border-radius: 50px;
	border: 1.5px solid var(--outline);
	background: transparent;
	color: var(--text2);
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.lib-filter-chip.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.ed-step-tab {
	flex: 1;
	padding: 10px 6px;
	font-size: 11px;
	font-weight: 700;
	background: var(--surface);
	color: var(--text3);
	border: none;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: all 0.15s;
	border-bottom: 2px solid transparent;
}
.ed-step-tab.active {
	color: var(--blue);
	border-bottom-color: var(--blue);
	background: var(--blue-c);
}
.ed-step-panel {
	padding: 14px 14px 0;
	animation: fadeUp 0.18s ease;
}
/* ── Battle option buttons ── */
.battle-opt {
	width: 100%;
	padding: 13px 16px;
	border-radius: 14px;
	border: 2px solid var(--outline-var);
	background: var(--surface);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: all 0.18s;
	display: flex;
	align-items: center;
	gap: 10px;
}
.battle-opt:active {
	transform: scale(0.97);
}
.battle-opt.selected {
	border-color: var(--blue);
	background: var(--blue-c);
	color: var(--blue);
}
.battle-opt.correct {
	border-color: var(--green);
	background: var(--green-c);
	color: var(--green);
}
.battle-opt.wrong {
	border-color: var(--red);
	background: var(--red-c);
	color: var(--red);
}
/* ── Lobby player row ── */
.lobby-player {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--surface-var);
	border-radius: 12px;
}
/* ── Feedback rating stars ── */
#fbStars span.lit {
	filter: none;
}
#fbStars span {
	opacity: 0.35;
	transition:
		opacity 0.15s,
		transform 0.15s;
}
#fbStars span.lit,
#fbStars span:hover {
	opacity: 1;
	transform: scale(1.15);
}
/* ── Record button pulsing ── */
@keyframes pulseRed {
	0%,
	100% {
		box-shadow: 0 4px 20px rgba(217, 48, 37, 0.4);
	}
	50% {
		box-shadow:
			0 4px 32px rgba(217, 48, 37, 0.7),
			0 0 0 8px rgba(217, 48, 37, 0.1);
	}
}
.recording {
	animation: pulseRed 1.2s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════
   QUIZJAN SMOOTH UI v2 — ENHANCED POLISH LAYER
══════════════════════════════════════════════ */

/* ── Global transitions ── */
*,
*::before,
*::after {
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
body {
	transition:
		background 0.3s,
		color 0.3s;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* ── Topbar glass ── */
.topbar {
	background: rgba(var(--surface-rgb, 255, 255, 255), 0.82) !important;
	backdrop-filter: blur(24px) saturate(1.8) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
	border-bottom: 1px solid rgba(var(--outline-rgb, 180, 180, 200), 0.35) !important;
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.04),
		0 2px 16px rgba(66, 133, 244, 0.06);
	transition:
		background 0.3s,
		box-shadow 0.3s;
}
[data-theme='dark'] .topbar {
	background: rgba(30, 33, 40, 0.85) !important;
	border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── Logo pulse on hover ── */
.tb-logo,
.topbar img:first-child {
	transition:
		transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s;
}
.tb-logo:hover,
.topbar img:first-child:hover {
	transform: scale(1.1) rotate(-4deg);
}

/* ── Icon buttons ── */
.icon-btn {
	transition:
		background 0.18s,
		transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
		color 0.18s;
	position: relative;
	overflow: hidden;
}
.icon-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(66, 133, 244, 0.25) 0%,
		transparent 70%
	);
	opacity: 0;
	transform: scale(0);
	transition:
		opacity 0.3s,
		transform 0.3s;
}
.icon-btn:active::after {
	opacity: 1;
	transform: scale(1);
}
.icon-btn:active {
	transform: scale(0.88) !important;
}

/* ── Section animation — smoother spring ── */
@keyframes sectionIn {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.99);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.section.active {
	animation: sectionIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Cards ── */
.card {
	transition:
		box-shadow 0.22s,
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
		border-color 0.22s;
	will-change: transform;
}
.card:has(a:hover),
.card:has(button:hover) {
	box-shadow:
		0 4px 24px rgba(66, 133, 244, 0.1),
		0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Greeting card — animated mesh background ── */
.greeting-card {
	background: linear-gradient(
		140deg,
		#1a3fcb 0%,
		#3b7ef8 40%,
		#6b46ff 80%,
		#7c3aed 100%
	) !important;
	position: relative;
	overflow: hidden;
}
.greeting-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 75% 55% at 80% 15%,
			rgba(255, 255, 255, 0.16) 0%,
			transparent 60%
		),
		radial-gradient(
			ellipse 40% 45% at 8% 85%,
			rgba(160, 220, 255, 0.18) 0%,
			transparent 55%
		);
	pointer-events: none;
	z-index: 0;
}
.greeting-card::after {
	content: '';
	position: absolute;
	top: -70px;
	right: -60px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	animation: floatOrb 7s ease-in-out infinite;
}
@keyframes floatOrb {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(14px) scale(1.06);
	}
}
.gc-emoji {
	animation: waveHello 2.5s ease-in-out 0.5s both;
	display: inline-block;
}
@keyframes waveHello {
	0% {
		transform: rotate(0deg);
	}
	15% {
		transform: rotate(20deg);
	}
	30% {
		transform: rotate(-12deg);
	}
	45% {
		transform: rotate(16deg);
	}
	60% {
		transform: rotate(-8deg);
	}
	75% {
		transform: rotate(12deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.gc-name {
	animation: slideUpFade 0.5s 0.1s both;
}
.gc-sub {
	animation: slideUpFade 0.5s 0.2s both;
}
.gc-btns {
	animation: slideUpFade 0.5s 0.3s both;
}
@keyframes slideUpFade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Greeting card buttons ── */
.gc-btn {
	transition:
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.15s,
		box-shadow 0.2s !important;
	backdrop-filter: blur(4px);
}
.gc-btn:active {
	transform: scale(0.93) !important;
}
.gc-btn-white {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.gc-btn-white:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
	transform: translateY(-1px) !important;
}
.gc-btn-ghost {
	border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── Bottom navigation ── */
.bottom-nav {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(24px) saturate(1.6) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	box-shadow:
		0 -4px 30px rgba(66, 133, 244, 0.08),
		0 -1px 0 rgba(0, 0, 0, 0.05) !important;
}
[data-theme='dark'] .bottom-nav {
	background: rgba(30, 33, 40, 0.92) !important;
	border-top-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.35) !important;
}
.nav-item {
	transition: color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item .material-symbols-rounded,
.nav-item .nav-icon-fa {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.nav-item.active .material-symbols-rounded,
.nav-item.active .nav-icon-fa {
	transform: scale(1.18) translateY(-1px) !important;
}
.nav-item::before {
	transition:
		width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.3s !important;
	opacity: 0;
}
.nav-item.active::before {
	opacity: 1;
}

/* ── FAB button ── */
.nav-fab-btn {
	transition:
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.28s !important;
	background: linear-gradient(145deg, #5a95ff, #3070e0, #1049b8) !important;
}
.nav-fab-btn:active {
	transform: scale(0.88) !important;
	box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3) !important;
}
.nav-fab-btn:not(:active):hover {
	transform: scale(1.08) translateY(-2px) !important;
	box-shadow: 0 8px 28px rgba(66, 133, 244, 0.55) !important;
}

/* ── Buttons ── */
.btn {
	transition:
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.15s,
		box-shadow 0.2s !important;
	position: relative;
	overflow: hidden;
}
.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.15),
		transparent
	);
	border-radius: inherit;
	pointer-events: none;
}
.btn:not(:disabled):active {
	transform: scale(0.95) !important;
	opacity: 0.9 !important;
}
.btn-primary {
	background: linear-gradient(
		135deg,
		#5295ff 0%,
		#4285f4 50%,
		#1a6af4 100%
	) !important;
	box-shadow: 0 2px 12px rgba(66, 133, 244, 0.35);
}
.btn-primary:hover {
	box-shadow: 0 4px 20px rgba(66, 133, 244, 0.5);
	transform: translateY(-1px);
}
.btn-green {
	background: linear-gradient(135deg, #22c980, #1a8754) !important;
	box-shadow: 0 2px 12px rgba(26, 135, 84, 0.3);
}
.btn-danger {
	background: linear-gradient(135deg, #f05046, #d93025) !important;
	box-shadow: 0 2px 12px rgba(217, 48, 37, 0.3);
}

/* ── Chips/Filter pills ── */
.chip {
	transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	position: relative;
}
.chip:active {
	transform: scale(0.93) !important;
}
.chip.active {
	background: linear-gradient(135deg, #5295ff, #4285f4) !important;
	box-shadow: 0 3px 12px rgba(66, 133, 244, 0.38) !important;
}
.lib-filter-chip {
	transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lib-filter-chip.active {
	background: linear-gradient(135deg, #5295ff, #4285f4) !important;
	box-shadow: 0 3px 10px rgba(66, 133, 244, 0.35);
}

/* ── Input fields ── */
input,
textarea,
select {
	transition:
		border-color 0.2s,
		box-shadow 0.2s,
		background 0.2s !important;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--blue) !important;
	box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15) !important;
}

/* ── Quiz list items ── */
/* ── Stat boxes ── */
.stat-box {
	transition:
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.22s;
}
.stat-box:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.stat-val {
	background: linear-gradient(135deg, var(--blue), var(--purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
[data-theme='dark'] .stat-val {
	background: linear-gradient(135deg, #8ab4f8, #c4b5fd);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ── Cards stagger on home load ── */
#tab-home > * {
	animation: slideUpFade 0.35s both;
}
#tab-home > *:nth-child(1) {
	animation-delay: 0.05s;
}
#tab-home > *:nth-child(2) {
	animation-delay: 0.12s;
}
#tab-home > *:nth-child(3) {
	animation-delay: 0.19s;
}
#tab-home > *:nth-child(4) {
	animation-delay: 0.26s;
}
#tab-home > *:nth-child(5) {
	animation-delay: 0.33s;
}

/* ── More drawer ── */
.more-drawer {
	transition:
		transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.22s !important;
	backdrop-filter: blur(0px) !important;
}
.more-drawer.open {
	transition:
		transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
		opacity 0.22s !important;
}
.more-drawer-item {
	transition:
		background 0.15s,
		transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.more-drawer-item:active {
	transform: scale(0.97) !important;
}
.more-drawer-grid-item {
	transition:
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
		background 0.15s !important;
}
.more-drawer-grid-item:active {
	transform: scale(0.88) !important;
}

/* ── DTM hero ── */
.dtm-hero {
	background: linear-gradient(
		135deg,
		#0f1729 0%,
		#12214a 50%,
		#0a2e5e 100%
	) !important;
	box-shadow: 0 4px 24px rgba(10, 46, 94, 0.35);
}
.dtm-hero::before {
	animation: floatOrb 5s ease-in-out 1s infinite;
}

/* ── DTM subject cards ── */
.dtm-subj-card {
	transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dtm-subj-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.dtm-subj-card:active {
	transform: scale(0.96) !important;
}

/* ── Battle options ── */
.battle-opt {
	transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.battle-opt:not(.correct):not(.wrong):hover {
	border-color: var(--blue) !important;
	background: var(--blue-c) !important;
	transform: translateX(3px);
}
.battle-opt.selected {
	box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}
.battle-opt.correct {
	background: linear-gradient(
		135deg,
		var(--green-c),
		rgba(26, 135, 84, 0.12)
	) !important;
	border-color: var(--green) !important;
	animation: correctPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.battle-opt.wrong {
	background: linear-gradient(
		135deg,
		var(--red-c),
		rgba(217, 48, 37, 0.12)
	) !important;
	border-color: var(--red) !important;
	animation: wrongShake 0.4s ease both;
}
@keyframes correctPop {
	0% {
		transform: scale(0.97);
	}
	60% {
		transform: scale(1.03);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes wrongShake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-5px);
	}
	40% {
		transform: translateX(5px);
	}
	60% {
		transform: translateX(-3px);
	}
	80% {
		transform: translateX(3px);
	}
}

/* ── Modal overlays — slide up ── */
.mpicker-modal {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mpicker-modal.open {
	transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Toast ── */
.toast {
	background: rgba(15, 15, 30, 0.92) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition:
		opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.toast.show {
	transform: translateX(-50%) translateY(0) scale(1) !important;
}
.toast:not(.show) {
	transform: translateX(-50%) translateY(14px) scale(0.94) !important;
}

/* ── Spinner ── */
.spinner {
	border-top-color: var(--blue) !important;
	border-right-color: rgba(66, 133, 244, 0.3) !important;
	animation: spinSmooth 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important;
}
@keyframes spinSmooth {
	to {
		transform: rotate(360deg);
	}
}

/* ── Profile head ── */
.ph-avatar img,
.ph-avatar-ph {
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s;
}
.ph-avatar img:hover,
.ph-avatar-ph:hover {
	transform: scale(1.06);
	box-shadow: 0 6px 24px rgba(66, 133, 244, 0.3);
}

/* ── Leaderboard rows ── */
.result-row {
	transition:
		background 0.18s,
		transform 0.18s;
	border-radius: var(--radius-xs);
	padding: 12px 8px;
	margin: 0 -8px;
}
.result-row:hover {
	background: var(--surface-var);
}

/* ── Achievement items ── */
.ach-item {
	transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.ach-item:hover {
	transform: scale(1.05);
}
.ach-item.earned {
	box-shadow: 0 2px 10px rgba(227, 116, 0, 0.25);
}

/* ── Progress bars ── */
.lim-bar-fill {
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.2) 50%,
		transparent 100%
	) !important;
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
}
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
.lim-bar-fill.safe {
	background-color: var(--green) !important;
}
.lim-bar-fill.warn {
	background-color: var(--orange) !important;
}
.lim-bar-fill.full {
	background-color: var(--red) !important;
}

/* ── Section title decoration ── */
.sec-title {
	position: relative;
}
.sec-action {
	transition:
		color 0.18s,
		transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sec-action:hover {
	transform: translateX(2px);
}

/* ── Banner slides ── */
.bn-slide {
	background: linear-gradient(
		135deg,
		var(--blue-c),
		var(--surface-var)
	) !important;
	border: 1px solid var(--outline-var);
	transition: transform 0.18s;
}
.bn-slide:active {
	transform: scale(0.99);
}
.bn-dots .dot {
	transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Group overlay ── */
.grp-overlay.open {
	animation: slideInRight 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* ── Card icon color tiles ── */
.card-icon {
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-header:hover .card-icon {
	transform: scale(1.1) rotate(-5deg);
}

/* ── Lobby modal ── */
#lobbyModal {
	transition: opacity 0.25s !important;
}
.lobby-player {
	animation: slideUpFade 0.2s both;
	transition: background 0.18s;
	padding: 8px;
	border-radius: var(--radius-xs);
}
.lobby-player:hover {
	background: var(--surface-var);
}

/* ── FAB pulse ── */
.nav-fab-btn.pulse {
	animation: fabPulseSmooth 2.2s ease-in-out infinite !important;
}
@keyframes fabPulseSmooth {
	0%,
	100% {
		box-shadow:
			0 4px 18px rgba(66, 133, 244, 0.45),
			0 0 0 0 rgba(66, 133, 244, 0.4);
	}
	50% {
		box-shadow:
			0 4px 18px rgba(66, 133, 244, 0.45),
			0 0 0 12px rgba(66, 133, 244, 0);
	}
}

/* ── Premium badge ── */
.prem-badge {
	background: linear-gradient(135deg, #f59e0b, #d97706) !important;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
	animation: goldGlow 3s ease-in-out infinite;
}
@keyframes goldGlow {
	0%,
	100% {
		box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
	}
	50% {
		box-shadow: 0 2px 16px rgba(245, 158, 11, 0.7);
	}
}

/* ── Search wrap ── */
.search-wrap input {
	transition: all 0.22s !important;
	border-radius: 50px !important;
	background: var(--surface-var) !important;
	border-color: transparent !important;
}
.search-wrap input:focus {
	background: var(--surface) !important;
	border-color: var(--blue) !important;
	box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15) !important;
}

/* ── Tb brand hover ── */
.tb-brand {
	background: linear-gradient(90deg, var(--blue), #6366f1);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: letter-spacing 0.25s;
}
.tb-brand:hover {
	letter-spacing: 0.2px;
}

/* ── Theme transition ── */
html {
	transition: color-scheme 0.3s;
}

/* ═══ EXTRA POLISH ═══ */

/* Leaderboard top 1 shimmer */
.lb-top1 {
	background: linear-gradient(
		135deg,
		rgba(255, 215, 0, 0.14),
		rgba(255, 160, 0, 0.08)
	) !important;
	border: 1.5px solid rgba(255, 200, 0, 0.4) !important;
	box-shadow: 0 2px 12px rgba(255, 195, 0, 0.12) !important;
}

/* Icon button improved */
.icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	border: none;
	background: var(--surface-var);
	color: var(--text2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
	border: 1px solid var(--outline-var);
}
.icon-btn:active {
	transform: scale(0.88);
	background: var(--bg2);
}

/* Quick action cards on home */
.card[onclick] {
	transition:
		transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1),
		box-shadow 0.2s,
		border-color 0.2s;
}
.card[onclick]:active {
	transform: scale(0.97);
}

/* More drawer improvements */
.more-drawer {
	border-radius: 28px 28px 0 0 !important;
}
.more-drawer-grid-item {
	border-radius: 16px !important;
	transition:
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
		background 0.15s !important;
}
.more-drawer-grid-item:active {
	transform: scale(0.88) !important;
}

/* Input focus glow */
input:focus,
textarea:focus,
select:focus {
	border-color: var(--blue) !important;
	box-shadow: 0 0 0 3px rgba(59, 126, 248, 0.15) !important;
}

/* Search bar */
.search-wrap input {
	transition: all 0.22s !important;
	border-radius: 50px !important;
	background: var(--surface-var) !important;
	border-color: transparent !important;
}
.search-wrap input:focus {
	background: var(--surface) !important;
	border-color: var(--blue) !important;
	box-shadow: 0 0 0 3px rgba(59, 126, 248, 0.15) !important;
}

/* Section padding */
.section {
	padding: 16px 16px 0;
	gap: 14px;
}

/* Body mesh background */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			ellipse 80% 50% at 20% -10%,
			rgba(59, 126, 248, 0.07) 0%,
			transparent 60%
		),
		radial-gradient(
			ellipse 60% 40% at 80% 110%,
			rgba(107, 70, 255, 0.06) 0%,
			transparent 60%
		);
	pointer-events: none;
}

/* Smooth scrollbar */
.content::-webkit-scrollbar {
	display: none;
}

/* Card hover on interactive cards */
.more-drawer-item:hover {
	background: var(--surface-var) !important;
	transform: translateX(2px);
}

/* Quiz item improved */
/* Banner notice */
.bn-slide {
	border-radius: 16px !important;
	background: linear-gradient(
		135deg,
		var(--blue-c),
		var(--surface-var)
	) !important;
}

/* Topbar avatar */
.tb-avt-ph {
	border: 2px solid var(--blue-c);
}
.tb-avatar {
	border: 2px solid var(--blue-c);
	box-shadow: 0 2px 8px rgba(59, 126, 248, 0.2);
}

/* Result ring */
.res-ring {
	border-radius: 14px !important;
}

/* Fab btn pulse ring */
.nav-fab-btn::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 22px;
	background: var(--surface);
	z-index: -1;
}

/* ─── VERSION BADGE ─── */
.tb-ver {
	font-size: 10px;
	font-weight: 700;
	background: var(--blue-c);
	color: var(--blue);
	padding: 2px 7px;
	border-radius: 6px;
	margin-left: 6px;
	letter-spacing: 0.2px;
}
[data-theme='dark'] .tb-ver {
	background: var(--blue-c);
	color: var(--blue);
}

/* feedbackFab & qjSoundToggle moved into more-drawer */
#feedbackFab {
	display: none !important;
}
#qjSoundToggle {
	display: none !important;
}

/* ─── HINT STATUS improved ─── */
.hint {
	font-size: 12px;
	color: var(--text3);
	margin-top: 6px;
	min-height: 18px;
	line-height: 1.4;
	transition: color 0.2s;
}

/* ─── STAT LOADING PULSE ─── */
.stat-val .skel,
.skel[style*='display:inline-block'] {
	vertical-align: middle;
}

/* ─── SECTION FADE IN ─── */
.section.active {
	animation: sectionFadeIn 0.25s ease;
}
@keyframes sectionFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ─── GREETING CARD polish ─── */
.greeting-card {
	transition: box-shadow 0.3s;
}

/* ─── TOAST improved ─── */
.toast {
	background: var(--text) !important;
	backdrop-filter: blur(12px);
	font-weight: 700 !important;
	letter-spacing: 0.1px;
}

/* ─── More drawer item transition ─── */
.more-drawer-item {
	transition:
		background 0.15s,
		transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}

/* ─── Screen capture btn ─── */
#fbCaptureBtn:active {
	transform: scale(0.93) !important;
}

/* ─── QUIZ LIST container ─── */
.quiz-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* inside card: compensate padding so items reach edges, add bottom */
.card > .quiz-list,
.card > div > .quiz-list {
	margin: 8px -18px -18px;
	padding: 0 10px 10px;
}
/* ─── RESULT LIST container ─── */
.card > #profileResultsList,
.card > div > #profileResultsList {
	margin: 8px -18px -18px;
	padding: 0 10px 10px;
}
/* ─── res-ring refined ─── */
.res-ring {
	flex-shrink: 0;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	width: 46px !important;
	height: 46px !important;
}

/* ── DARK MODE: mdi-icon fixes ── */
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#dbeafe'],
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#e8f4ff'] {
	background: #162048 !important;
	color: #93c5fd !important;
}
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#f0ecff'],
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#f5f0ff'] {
	background: #1e1040 !important;
	color: #c4b5fd !important;
}
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#e8faf0'] {
	background: #0a2e20 !important;
	color: #34d399 !important;
}
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#fff1f0'] {
	background: #2d0a0a !important;
	color: #f87171 !important;
}
[data-theme='dark'] .more-drawer-grid-item .mdi-icon[style*='#fff8e8'] {
	background: #2e1e00 !important;
	color: #fbbf24 !important;
}

/* ── DTM grid dark ── */
[data-theme='dark'] .dtm-subj-card {
	background: var(--surface-var);
}
[data-theme='dark'] .dtm-subj-card.selected {
	background: var(--blue-c);
}

/* ── quiz-wrap: ensure card clips ── */
.card {
	overflow: hidden;
}

/* ── quiz-item inner gap fix ── */
.quiz-list > .quiz-item:first-child {
	margin-top: 0;
}
.quiz-list > .quiz-item:last-child {
	margin-bottom: 0;
}

/* ── Section heading compact ── */
.sec-title {
	letter-spacing: -0.3px;
}

/* ── More drawer grid dark bg ── */
[data-theme='dark'] .more-drawer-grid-item {
	background: var(--surface-var);
	border-color: var(--outline-var);
}
[data-theme='dark'] .mdr-user-card {
	border-color: var(--outline-var);
}

/* ═══════ BOTTOM NAV PREMIUM REDESIGN ═══════ */
/* ─── SECTION TRANSITIONS ─── */
.section {
	animation: none !important;
	transition:
		opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}
.section.qj-exit-left {
	opacity: 0 !important;
	transform: translateX(-22px) scale(0.985) !important;
	pointer-events: none !important;
}
.section.qj-exit-right {
	opacity: 0 !important;
	transform: translateX(22px) scale(0.985) !important;
	pointer-events: none !important;
}
.section.qj-enter {
	opacity: 0;
	transform: translateY(18px) scale(0.97);
}
.section.qj-enter-active {
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
}
/* Staggered children on section enter */
.section.active > * {
	animation: qjSlideUp 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.section.active > *:nth-child(1) {
	animation-delay: 0.04s;
}
.section.active > *:nth-child(2) {
	animation-delay: 0.09s;
}
.section.active > *:nth-child(3) {
	animation-delay: 0.14s;
}
.section.active > *:nth-child(4) {
	animation-delay: 0.19s;
}
.section.active > *:nth-child(5) {
	animation-delay: 0.24s;
}
.section.active > *:nth-child(6) {
	animation-delay: 0.28s;
}
@keyframes qjSlideUp {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ─── ENHANCED SHADOWS ─── */
.card {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 3px 8px rgba(0, 0, 0, 0.06),
		0 8px 24px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
	transition:
		box-shadow 0.28s ease,
		transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
	will-change: transform, box-shadow;
}
[data-theme='dark'] .card {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.25),
		0 8px 28px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.card:hover {
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.05),
		0 6px 16px rgba(0, 0, 0, 0.09),
		0 14px 40px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
	transform: translateY(-1px);
}
[data-theme='dark'] .card:hover {
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 8px 20px rgba(0, 0, 0, 0.3),
		0 16px 48px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Colored shadow for greeting card */
.greeting-card {
	box-shadow:
		0 8px 24px rgba(59, 126, 248, 0.22),
		0 16px 48px rgba(107, 70, 255, 0.18),
		0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
/* Nav-fab elevated glow */
.nav-fab-btn {
	box-shadow:
		0 4px 14px rgba(66, 133, 244, 0.45),
		0 8px 28px rgba(66, 133, 244, 0.25),
		0 0 0 3px rgba(66, 133, 244, 0.12) !important;
}
/* Bottom nav shadow upgrade */
.bottom-nav {
	box-shadow:
		0 -1px 0 rgba(0, 0, 0, 0.06),
		0 -4px 24px rgba(0, 0, 0, 0.07),
		0 -8px 40px rgba(0, 0, 0, 0.04) !important;
}
/* Topbar shadow */
.topbar {
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.06),
		0 2px 12px rgba(0, 0, 0, 0.05) !important;
}
/* Modal / drawer shadow */
.more-drawer,
[id$='Modal'],
[id$='-modal'] {
	box-shadow:
		0 -8px 40px rgba(0, 0, 0, 0.15),
		0 -2px 12px rgba(0, 0, 0, 0.1) !important;
}
/* Icon btn glow on hover */
.icon-btn:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
	transform: scale(1.05);
}
/* Chip active elevation */
.chip.active {
	box-shadow:
		0 3px 10px rgba(66, 133, 244, 0.35),
		0 1px 3px rgba(66, 133, 244, 0.2) !important;
}
/* Btn shadows by type */
.btn-primary {
	box-shadow:
		0 2px 8px rgba(66, 133, 244, 0.35),
		0 6px 20px rgba(66, 133, 244, 0.2) !important;
}
.btn-primary:hover {
	box-shadow:
		0 4px 14px rgba(66, 133, 244, 0.5),
		0 8px 28px rgba(66, 133, 244, 0.25) !important;
}
.btn-green {
	box-shadow:
		0 2px 8px rgba(26, 135, 84, 0.35),
		0 4px 16px rgba(26, 135, 84, 0.2) !important;
}
.btn-danger {
	box-shadow:
		0 2px 8px rgba(217, 48, 37, 0.35),
		0 4px 16px rgba(217, 48, 37, 0.2) !important;
}

/* ─── SOUND TOGGLE BADGE ─── */
#qjSoundToggle {
	position: fixed;
	bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
	left: 14px;
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: var(--surface);
	border: 1.5px solid var(--outline-var);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.1),
		0 1px 4px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 998;
	transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	font-size: 18px;
	line-height: 1;
}
#qjSoundToggle:active {
	transform: scale(0.88);
}
#qjSoundToggle.muted {
	opacity: 0.5;
	background: var(--surface-var);
}

/* ─── SECTION ACTIVE INDICATOR in NAV: animate pill ─── */
.nav-item::before {
	transition:
		width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.25s !important;
	width: 0 !important;
}
.nav-item.active::before {
	width: 28px !important;
}

/* ─── SKELETON SHIMMER for loading states ─── */
.qj-skeleton {
	background: linear-gradient(
		90deg,
		var(--surface-var) 25%,
		var(--outline-var) 50%,
		var(--surface-var) 75%
	);
	background-size: 400% 100%;
	animation: qjSkeleton 1.6s ease infinite;
	border-radius: 10px;
}
@keyframes qjSkeleton {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ─── TOUCH RIPPLE UPGRADE ─── */
.qj-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	transform: scale(0);
	animation: qjRippleAnim 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	background: rgba(255, 255, 255, 0.28);
	z-index: 20;
}
@keyframes qjRippleAnim {
	to {
		transform: scale(1);
		opacity: 0;
	}
}

/* ─── CORRECT / WRONG PULSE GLOW ─── */
.battle-opt.correct::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	background: transparent;
	border: 2px solid var(--green);
	animation: qjCorrectGlow 0.6s ease forwards;
	pointer-events: none;
}
.battle-opt.wrong::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	background: transparent;
	border: 2px solid var(--red);
	animation: qjWrongGlow 0.6s ease forwards;
	pointer-events: none;
}
@keyframes qjCorrectGlow {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.06);
	}
}
@keyframes qjWrongGlow {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
	}
}

/* ─── FLOATING PARTICLES on correct answer ─── */
.qj-particle {
	position: fixed;
	pointer-events: none;
	font-size: 22px;
	z-index: 9998;
	animation: qjParticle 0.9s ease-out forwards;
}
@keyframes qjParticle {
	0% {
		transform: translateY(0) scale(1) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-90px) scale(0.4) rotate(180deg);
		opacity: 0;
	}
}

/* ─── SCORE POP ANIMATION ─── */
.qj-score-pop {
	animation: qjScorePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes qjScorePop {
	from {
		transform: scale(0.7);
		opacity: 0.5;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ═══════════════════════════════════════════════════════
   🏠 HOME FEED — Mission bar, Stats chips, Continue cards
   ═══════════════════════════════════════════════════════ */

/* Mission sticky bar */
#homeMissionBar {
	display: none;
	margin: 8px 16px 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.mission-bar-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	background: linear-gradient(135deg, var(--purple-c), var(--blue-c));
	border-radius: var(--radius-sm);
	cursor: pointer;
	border: 1.5px solid var(--outline-var);
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}
.mission-bar-inner:active {
	transform: scale(0.98);
}
.mission-bar-icon {
	font-size: 22px;
	flex-shrink: 0;
}
.mission-bar-info {
	flex: 1;
	min-width: 0;
}
.mission-bar-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mission-bar-prog-wrap {
	height: 5px;
	background: var(--outline);
	border-radius: 3px;
	margin-top: 5px;
	overflow: hidden;
}
.mission-bar-prog {
	height: 100%;
	background: linear-gradient(90deg, var(--purple), var(--blue));
	border-radius: 3px;
	transition: width 0.8s ease;
}
.mission-bar-pct {
	font-size: 12px;
	font-weight: 800;
	color: var(--purple);
	min-width: 36px;
	text-align: right;
}

/* Stats chips bar */
#homeStatsBar {
	display: none;
	flex-direction: row;
	gap: 8px;
	padding: 10px 16px 0;
	overflow-x: auto;
	scrollbar-width: none;
}
#homeStatsBar::-webkit-scrollbar {
	display: none;
}
.home-stat-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: var(--surface);
	border-radius: 30px;
	border: 1.5px solid var(--outline-var);
	font-size: 12px;
	font-weight: 700;
	color: var(--text2);
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}
.home-stat-chip span {
	font-size: 14px;
}

/* Continue cards */
.home-section-wrap {
	display: none;
	margin: 16px 16px 0;
}
.home-section-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--text2);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}
.continue-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--surface);
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--outline-var);
	margin-bottom: 8px;
	cursor: pointer;
	transition: transform 0.15s ease;
	box-shadow: var(--shadow-sm);
}
.continue-card:active {
	transform: scale(0.98);
}
.continue-card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}
.continue-card-score {
	font-size: 11px;
	color: var(--orange);
	font-weight: 700;
	margin-top: 2px;
}

/* 7-day heatmap */
#homeHeatmap {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	margin-top: 8px;
}
.heatmap-cell {
	aspect-ratio: 1;
	border-radius: 4px;
	background: var(--outline-var);
	transition: transform 0.2s ease;
}
.heatmap-cell:hover {
	transform: scale(1.2);
}
.heatmap-cell.d1 {
	background: rgba(99, 102, 241, 0.3);
}
.heatmap-cell.d2 {
	background: rgba(99, 102, 241, 0.6);
}
.heatmap-cell.d3 {
	background: var(--purple);
}

/* ═══════════════════════════════════════════════════════
   💳 PREMIUM / PRICING MODAL
   ═══════════════════════════════════════════════════════ */
.premium-plan-card {
	border-radius: var(--radius-sm);
	border: 2px solid var(--outline-var);
	padding: 16px;
	margin-bottom: 10px;
	transition:
		border-color 0.2s ease,
		transform 0.15s ease,
		box-shadow 0.2s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.premium-plan-card:active {
	transform: scale(0.98);
}
.premium-plan-card.recommended {
	border-color: var(--purple);
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.18);
}
.premium-plan-card.recommended::before {
	content: '⭐ Tavsiya';
	position: absolute;
	top: 0;
	right: 0;
	background: var(--purple);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
}
.plan-card-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--text);
}
.plan-card-price {
	font-size: 22px;
	font-weight: 900;
	color: var(--purple);
	margin: 4px 0;
}
.plan-card-price span {
	font-size: 13px;
	font-weight: 600;
	color: var(--text3);
}
.plan-card-features {
	font-size: 12px;
	color: var(--text2);
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.plan-feature-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.plan-feature-row::before {
	content: '✓';
	color: var(--green);
	font-weight: 800;
}

/* ═══════════════════════════════════════════════════════
   📊 TEACHER DASHBOARD
   ═══════════════════════════════════════════════════════ */
.teacher-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.teacher-stat-card {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 14px;
	border: 1.5px solid var(--outline-var);
	box-shadow: var(--shadow-sm);
	text-align: center;
}
.teacher-stat-val {
	font-size: 28px;
	font-weight: 900;
	color: var(--blue);
	line-height: 1;
}
.teacher-stat-lbl {
	font-size: 11px;
	color: var(--text3);
	font-weight: 600;
	margin-top: 4px;
}
.group-stat-row {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	border: 1.5px solid var(--outline-var);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}
.group-stat-row:active {
	transform: scale(0.99);
}
.group-stat-info {
	flex: 1;
	min-width: 0;
}
.group-stat-name {
	font-size: 14px;
	font-weight: 800;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.group-stat-meta {
	font-size: 11px;
	color: var(--text3);
	margin-top: 2px;
}
.group-stat-score {
	font-size: 18px;
	font-weight: 900;
	color: var(--green);
	min-width: 44px;
	text-align: right;
}

/* ═══════════════════════════════════════════════════════
   BANNERS AND MODALS CSS
   (tab-switch-banner, snapshot-modal, duel-modal, olympiad-modal)
   ═══════════════════════════════════════════════════════ */

.tab-switch-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--red);
	color: #fff;
	text-align: center;
	padding: 12px 16px;
	font-weight: 800;
	font-size: 14px;
	z-index: 9999;
	transform: translateY(-100%);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
.tab-switch-banner.show {
	transform: translateY(0);
}

.duel-modal,
.olympiad-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: var(--bg);
	display: none;
	flex-direction: column;
}

.snapshot-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	display: none;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
}

.snapshot-modal.open,
.duel-modal.open,
.olympiad-modal.open {
	display: flex;
	animation: qjModalFadeIn 0.3s ease;
}

@keyframes qjModalFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.snapshot-card-inner {
	background: linear-gradient(
		135deg,
		var(--blue, #3b82f6),
		var(--purple, #8b5cf6)
	);
	border-radius: 24px;
	padding: 32px 24px;
	text-align: center;
	color: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.snapshot-actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	width: 100%;
}

.duel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--outline-var);
}

/* ═══════════════════════════════════════════
   OTP LOGIN MODAL
   ═══════════════════════════════════════════ */
.otp-login-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: none;
	opacity: 0;
	transition:
		opacity 0.32s ease,
		background 0.32s ease,
		backdrop-filter 0.32s ease;
}
.otp-login-overlay.open {
	opacity: 1;
	pointer-events: all;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.otp-login-modal {
	width: 100%;
	max-width: 400px;
	background: var(--surface);
	border-radius: 28px;
	padding: 32px 24px 28px;
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.25),
		0 0 0 1px var(--outline-var);
	transform: translateY(30px) scale(0.96);
	transition: transform 0.38s cubic-bezier(0.34, 1.12, 0.64, 1);
}
.otp-login-overlay.open .otp-login-modal {
	transform: translateY(0) scale(1);
}
.otp-login-header {
	text-align: center;
	margin-bottom: 28px;
}
.otp-login-logo {
	width: 64px;
	height: 64px;
	margin: 0 auto 12px;
	background: linear-gradient(135deg, #3b7ef8, #6b46ff);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	box-shadow: 0 8px 28px rgba(59, 126, 248, 0.4);
}
.otp-login-title {
	font-size: 22px;
	font-weight: 900;
	color: var(--text);
	margin: 0;
	letter-spacing: -0.3px;
}
.otp-login-subtitle {
	font-size: 13px;
	color: var(--text3);
	margin: 4px 0 0;
	font-weight: 600;
}
.otp-field {
	margin-bottom: 16px;
}
.otp-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--text2);
	margin-bottom: 8px;
}
.otp-phone-row {
	display: flex;
	align-items: center;
	gap: 0;
	border: 2px solid var(--outline);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg);
	transition: border-color 0.2s;
}
.otp-phone-row:focus-within {
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(59, 126, 248, 0.12);
}
.otp-phone-prefix {
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 800;
	color: var(--text2);
	background: var(--surface-var);
	border-right: 1px solid var(--outline-var);
	flex-shrink: 0;
	font-family: 'JetBrains Mono', monospace;
}
.otp-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 12px 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	outline: none;
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 1px;
}
.otp-input::placeholder {
	color: var(--text3);
	font-weight: 500;
}
.otp-hint {
	font-size: 11px;
	color: var(--text3);
	margin-top: 6px;
	line-height: 1.4;
}
.otp-error {
	font-size: 12px;
	color: var(--red);
	font-weight: 700;
	margin-top: 8px;
	min-height: 18px;
}
.otp-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: all 0.2s;
	text-decoration: none;
}
.otp-btn:active {
	transform: scale(0.97);
}
.otp-btn-primary {
	background: linear-gradient(135deg, #3b7ef8, #6b46ff);
	color: #fff;
	box-shadow: 0 6px 20px rgba(59, 126, 248, 0.4);
}
.otp-btn-primary:hover {
	box-shadow: 0 8px 28px rgba(59, 126, 248, 0.5);
}
.otp-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.otp-btn-telegram {
	background: #229ed9;
	color: #fff;
	box-shadow: 0 4px 16px rgba(34, 158, 217, 0.3);
}
.otp-btn-telegram:hover {
	background: #1e8fc5;
}
.otp-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: var(--text3);
	font-size: 12px;
	font-weight: 700;
}
.otp-divider::before,
.otp-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--outline-var);
}
.otp-sent-info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--blue-c);
	border-radius: 14px;
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.4;
}
.otp-code-inputs {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.otp-code-digit {
	width: 46px;
	height: 54px;
	border: 2px solid var(--outline);
	border-radius: 12px;
	text-align: center;
	font-size: 22px;
	font-weight: 900;
	font-family: 'JetBrains Mono', monospace;
	color: var(--text);
	background: var(--bg);
	outline: none;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
	-webkit-appearance: none;
}
.otp-code-digit:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(59, 126, 248, 0.15);
}
.otp-timer-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--text3);
	font-weight: 600;
}
.otp-resend-btn {
	background: none;
	border: 1.5px solid var(--blue);
	color: var(--blue);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.2s;
}
.otp-resend-btn:hover {
	background: var(--blue-c);
}
.otp-resend-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.otp-back-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	padding: 10px;
	border-radius: 12px;
	border: none;
	background: var(--surface-var);
	color: var(--text2);
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s;
}
.otp-back-btn:hover {
	background: var(--outline-var);
}
@keyframes otp-spin {
	to {
		transform: rotate(360deg);
	}
}
.otp-spin {
	animation: otp-spin 0.8s linear infinite;
}

/* ── THEME-AWARE MDI ICON CLASSES ── */
.mdi-purple {
	background: var(--purple-c);
	color: var(--purple);
}
.mdi-blue {
	background: var(--blue-c);
	color: var(--blue);
}
.mdi-green {
	background: var(--green-c);
	color: var(--green);
}
.mdi-red {
	background: var(--red-c);
	color: var(--red);
}
.mdi-orange {
	background: var(--orange-c);
	color: var(--orange);
}
.mdi-sky {
	background: var(--blue-c);
	color: var(--blue);
}
.mdi-dtm {
	background: var(--surface-var);
	color: var(--blue);
	border: 1px solid var(--outline-var);
}

/* ── MODAL OVERLAY — theme-aware ── */
.modal-overlay-dark {
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ── SHARE TOAST (inline hash copy) ── */
.share-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 50px;
	background: var(--surface-var);
	border: 1px solid var(--outline-var);
	color: var(--text2);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.share-pill:active {
	background: var(--outline-var);
}