/*
	mission E theming overrides
	- Do NOT edit template CSS; only override here.
	- Palette per PDF/site with Nachtblau emphasis:
		--me-dark:  #001A4D;  Nachtblau (primary/dark)
		--me-green: #0A4C9A;  Mid blue (primary gradient start)
		--me-sky:   #3BA3FF;  Light blue (gradient end / accents)
		--me-yellow:#FFCC00;  highlight
		--me-text:  #0F1D2B;  base text
*/

body,
button,
input,
select,
textarea {
	font-family: 'Open Sans', sans-serif !important;
}

:root {
	--me-dark: #001A4D;
	--me-green: #0A4C9A;
	--me-sky: #3BA3FF;
	--me-yellow: #FFCC00;
	--me-text: #0F1D2B;
	--me-muted-strong: #394457;
	--me-muted-medium: #4a5568;
}

/* Ensure Bootstrap modal overlays the floating timer on small screens where the
   timer was previously above the modal (timer z-index:1200). Raise modal z-index
   slightly above the timer so the modal and its backdrop remain fully interactive. */
.modal-backdrop {
	z-index: 1290 !important;
}
.modal {
	z-index: 1300 !important;
}

/* Global footer styling keeps link centered on dark brand background */
.site_footer {
	background: var(--me-dark);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: 3rem;
}
.site_footer p {
	color: rgba(255, 255, 255, 0.82);
}
.site_footer a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.site_footer a:hover,
.site_footer a:focus {
	color: var(--me-yellow);
	text-decoration: underline;
}

/* FAQ & help page */
.help_page_wrapper {
	background: #f6f8fb;
}
.help_hero {
	background: var(--me-dark);
}
.help_hero .h3,
.help_hero_intro {
	color: #fff;
}
.help_hero_intro {
	font-size: 1.1rem;
	max-width: 720px;
}
.help_hero_meta {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
}
/* make hero and content sit closer together like other pages */
.help_hero {
	padding-bottom: 0.25rem;
	margin-bottom: 0;
}

/* reduce top padding on FAQ main wrapper to match the spacing used on Impressum/dashboard */
.help_faq {
	padding-top: 0.5rem !important;
}

/* Override the inner container padding (py-4) inside the hero so the timestamp sits closer */
.help_hero .container.py-4 {
	padding-top: 1rem !important;
	padding-bottom: 0.25rem !important;
}

/* Reduce bottom padding on help main area so last card sits closer to footer */
.help_faq {
	padding-bottom: 0.75rem !important;
}

/* When footer directly follows help content, reduce top margin to tighten spacing */
.help_faq + .site_footer,
.help_faq + footer.site_footer {
	margin-top: 1rem !important;
}

/* tighten hero title/intro spacing */
.help_hero .h3 { margin-bottom: 0.25rem; }
.help_hero_intro { margin-bottom: 0.25rem; }
.help_faq .faq_header h1 {
	color: var(--me-dark);
	font-weight: 700;
}
.help_faq .lead {
	color: var(--me-muted-strong);
}
.help_faq .faq_section {
	background: #fff;
	border: 1px solid rgba(0, 26, 77, 0.08);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(0, 26, 77, 0.05);
	padding: 1.75rem;
	margin-bottom: 2.5rem;
}
.help_faq .accordion-button {
	font-weight: 600;
	color: var(--me-dark);
	background: transparent;
	box-shadow: none;
}
.help_faq .accordion-button:not(.collapsed) {
	background: rgba(59, 163, 255, 0.08);
	color: var(--me-dark);
}
.help_faq .accordion-button:focus {
	box-shadow: 0 0 0 .15rem rgba(59, 163, 255, 0.35);
}
.help_faq .accordion-item {
	border: none;
	border-bottom: 1px solid rgba(0, 26, 77, 0.08);
}
.help_faq .accordion-item:last-child {
	border-bottom: none;
}
.help_faq .accordion-body p {
	color: var(--me-text);
	margin-bottom: 1rem;
}
.help_faq .accordion-body p:last-child {
	margin-bottom: 0;
}
.help_faq .accordion-body a {
	color: var(--me-green);
	word-break: break-word;
}
.help_faq .accordion-body a:hover,
.help_faq .accordion-body a:focus {
	color: var(--me-dark);
	text-decoration: underline;
}

.authority-search-input {
	transition: box-shadow 0.2s ease;
}

.authority-search-input.is-invalid {
	border-color: #d93025 !important;
	box-shadow: 0 0 0 0.2rem rgba(217, 48, 37, 0.2);
}

	.text-muted {
		color: var(--me-muted-medium) !important;
	}

	.material-symbols-outlined {
		font-family: 'Material Symbols Outlined', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1em;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	}

	.material-symbols-outlined.icon-filled {
		font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Open Sans', sans-serif !important;
	}

		/* Make quiz card span full unified app width (same visual width as dashboard) */
.multisteps_form { width:100% !important; margin-left: auto; margin-right:auto; }

/* Unified content card width across app (excluding pure auth/login) */
.app_card_width, .multisteps_form, .profile_card, .dash_card, .quiz_square {
		max-width: 980px;
		margin-left: auto;
		margin-right: auto;
}

/* Consistent horizontal padding inside cards if needed */
.app_card_inner { padding-left: 2.25rem; padding-right: 2.25rem; }

/* Centered, equal-width top navigation buttons */
.header_nav { gap: .75rem; }
.header_nav .logout_nav_form { margin: 0; }
.header_nav .logout_nav_form button { display: inline-flex; align-items: center; justify-content: center; }
.header_nav .auth_tab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 140px;
		padding: .55rem 1rem !important;
		background: var(--me-green);
		color: #fff !important;
		border-radius: 999px;
		font-weight: 600;
		border: 1px solid var(--me-green);
		transition: background .18s, box-shadow .18s;
}
.header_nav .auth_tab:hover { background: var(--me-dark); border-color: var(--me-dark); text-decoration: none !important; }
.header_nav .auth_tab:focus { outline: 2px solid var(--me-yellow); outline-offset: 2px; }

.modal-draggable .modal-header {
	cursor: move;
	user-select: none;
}
.modal-draggable .modal-header .btn-close {
	cursor: pointer;
}
body.modal-dragging-active {
	user-select: none;
}

.header_menu_toggle {
	background: transparent;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	padding: .35rem;
	color: var(--me-dark);
	transition: background-color .2s, color .2s, border-color .2s;
}
.header_menu_toggle:hover {
	background: rgba(0,0,0,0.05);
}
.header_menu_toggle:focus {
	outline: 2px solid var(--me-yellow);
	outline-offset: 2px;
}
.header_menu_toggle .material-symbols-outlined {
	font-size: 1.75rem;
}

/* Make nav responsive: stack on narrow widths */
@media (max-width: 820px){
	.header_nav { flex:1; display:flex !important; justify-content:flex-end; }
	.header_nav .auth_tab { min-width:110px; font-size:.85rem; padding:.5rem .75rem !important; }
}
@media (max-width: 560px){
	.header_nav { display:none !important; }
	.header_nav.is-open {
		display:flex !important;
		flex-direction:column;
		align-items:stretch;
		gap:.75rem;
		margin-left:0;
		width:100%;
		padding:1rem 0;
		background:#fff;
		border-radius:12px;
		box-shadow:0 10px 25px rgba(0,0,0,0.08);
		margin-top:.5rem;
	}
	.header_nav.is-open .dash_link {
		display:flex !important;
		align-items:center;
		justify-content:flex-start;
		width:100%;
		font-size:1rem;
		padding:.65rem 1rem !important;
		border-radius:8px !important;
		background:transparent !important;
	}
	.header_nav.is-open .dash_link.active {
		background:rgba(0, 48, 100, 0.08) !important;
	}
	.header_nav.is-open .logout_nav_form {
		width:100%;
	}
	.header_nav.is-open .logout_nav_form button {
		width:100%;
		justify-content:center;
	}
}

/* Button group alignment on pages using .form_btn */
.form_btn .f_btn { min-width: 220px; }

/* Placeholder image handling: ensure visibility & fallback styling */
img[src*="placeholder.com"] {
	background: #eef2f5;
	color: #6c7a89;
	font-size: 0; /* rely on the image text */
	display:block;
}
/* In case external placeholder blocked, show alternative */
img[data-fallback][onerror] { object-fit: cover; }


.form_header_content h2 {
	/* Replace blue gradient text with solid brand color */
	background: none !important;
	-webkit-text-fill-color: initial !important;
	color: var(--me-green) !important;
	text-transform: none;
}
.form_header_content span {
	color: var(--me-dark) !important;
}

/* Question indicator and title */
.question_title { color: var(--me-dark) !important; font-size: 1.35rem !important; line-height: 1.35; font-weight:600; text-align:left; }
@media (max-width: 768px){
	.question_title { font-size: 1.25rem !important; }
}
@media (max-width: 576px){
	.question_title { font-size: 1.15rem !important; }
}

/* Image region quiz layout */
.image-regions-root { position: relative; }
.image-regions-chip { font-weight: 600; padding: 0.45rem 0.75rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; }
.image-regions-chip-value { font-variant-numeric: tabular-nums; }
.image-regions-wrapper { position: relative; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); height: 0; }
.image-regions-base { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.image-regions-overlay { position: absolute; inset: 0; pointer-events: auto; }
.image-region-overlay-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.image-region-target { pointer-events: auto; cursor: pointer; outline: none; }
.image-region-target-hitbox { fill: rgba(255, 255, 255, 0.001); stroke: none; pointer-events: fill; }
.image-region-target { cursor: default; }
.image-region-target:not(.selected):hover .image-region-target-shape * { fill: rgba(255,255,255,0.001); stroke: transparent; }
.image-region-target:focus-visible .image-region-target-shape * { fill: rgba(255, 204, 0, 0.12); stroke: rgba(255, 204, 0, 0.55); }
.image-region-target:focus-visible .image-region-target-shape { filter: drop-shadow(0 0 0.35rem rgba(255, 204, 0, 0.65)); }
.image-region-target-shape * { fill: rgba(255,255,255,0.001); stroke: transparent; transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease, opacity .18s ease; vector-effect: non-scaling-stroke; pointer-events: visiblePainted; }
.image-region-target.selected .image-region-target-shape *,
.image-region-target.selected-correct .image-region-target-shape *,
.image-region-target.selected-incorrect .image-region-target-shape *,
.image-region-target.missed .image-region-target-shape * {
	fill: transparent;
	stroke: transparent;
	stroke-width: 0;
}

.image-regions-base [data-region-highlight="selected"] {
	filter: brightness(1.18) saturate(1.2) drop-shadow(0 0 10px rgba(64, 140, 220, 0.85)) drop-shadow(0 0 6px rgba(142, 198, 255, 0.75));
}
.image-regions-base [data-region-highlight="selected-correct"] {
	filter: brightness(1.16) saturate(1.18) drop-shadow(0 0 8px rgba(68, 166, 117, 0.65));
}

.image-regions-base [data-region-highlight="selected-incorrect"] {
	filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 7px rgba(218, 122, 112, 0.6));
}

.image-regions-base [data-region-highlight="missed"] {
	filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 7px rgba(228, 184, 82, 0.6));
}

.image-regions-base [data-region-highlight] {
	transition: filter .18s ease;
}
.image-regions-overlay.locked { pointer-events: none; }
.image-regions-overlay.locked .image-region-target { pointer-events: none; }
.image-regions-overlay.locked .image-region-target-shape { pointer-events: none; }
.image-regions-overlay.locked .image-region-target-hitbox { pointer-events: none; }
.image-regions-overlay.locked .image-region-marker { pointer-events: none; }
.image-regions-overlay.locked-allow-deselect { pointer-events: auto; }
.image-regions-overlay.locked-allow-deselect .image-region-target,
.image-regions-overlay.locked-allow-deselect .image-region-target-shape,
.image-regions-overlay.locked-allow-deselect .image-region-target-hitbox,
.image-regions-overlay.locked-allow-deselect .image-region-marker { pointer-events: auto; }
.image-regions-overlay.image-regions-missing-selection { box-shadow: inset 0 0 0 3px rgba(224, 86, 79, 0.65); border-radius: 20px; }
.image-region-marker { position: absolute; border: 2px solid transparent; background: transparent; border-radius: 12px; pointer-events: auto; cursor: pointer; transition: opacity .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; opacity: 0; }
.image-region-marker:focus-visible { outline: 3px solid var(--me-yellow, #ffcc00); outline-offset: 2px; opacity: 1; border-color: rgba(255, 204, 0, 0.85); box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.15); }
.image-region-marker.selected { opacity: 1; background: rgba(36, 51, 84, 0.35); border-color: rgba(36, 51, 84, 0.55); box-shadow: 0 4px 14px rgba(36, 51, 84, 0.18); }
.image-region-marker.selected-correct { background: rgba(41, 173, 102, 0.6); border-color: rgba(24, 137, 74, 0.95); box-shadow: 0 4px 18px rgba(24, 137, 74, 0.35); }
.image-region-marker.selected-incorrect { background: rgba(231, 77, 66, 0.58); border-color: rgba(196, 54, 46, 0.95); box-shadow: 0 4px 18px rgba(196, 54, 46, 0.32); }
.image-region-marker.missed { opacity: 1; background: rgba(255, 204, 0, 0.35); border-color: rgba(255, 204, 0, 0.85); }
.image-regions-lock { position: absolute; inset: 0; background: rgba(15, 29, 43, 0.45); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; text-align: center; padding: 1rem; backdrop-filter: blur(2px); }
.image-regions-lock-icon { font-size: 1.35rem; margin-right: 0.35rem; }
.image-regions-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.image-regions-state-small { font-size: 0.95rem; color: var(--me-muted-medium); }

/* Progress bar to brand accent */
.progress .progress-bar { background: var(--me-green) !important; }
/* Align progress bar start/end with content paddings (px-5 on desktop) */
/* (Removed .quiz_section_width – replaced by Bootstrap utilities on .quiz_block) */
/* Progress bar with no intrinsic side padding so it inherits from wrapper */
.progress_wrap{margin-bottom:.35rem;}
/* Variant: align bar with option pill interior (after letter circle area) */
/* Removed align-options variant (no longer used) */

/* Unified quiz block to align tagline, bar, question, options */
/* quiz block now uses Bootstrap padding utilities (px-lg-5 px-4) */
.quiz_block .quiz_meta{padding:0; margin-bottom:.35rem !important; width:100%;}
/* Converted quiz_meta to Bootstrap row/cols (no CSS grid) */
.quiz_block .progress{width:100%; margin:0 0 1.15rem 0;} /* increased bottom spacing before question text */
.quiz_block .question_title{padding:0 !important;}
.quiz_block .form_items{padding:0 !important;}

/* Answer options container uses full width; no extra side padding (Bootstrap spacing handles layout) */
/* Quiz header image replacing original title */
/* Quiz header image: reduced height (~30% of prior perceived size) */
.quiz_card_cover{padding:0;}
.quiz_card_cover .quiz_header_image{width:100%; max-width:100%; height:120px; overflow:hidden; border-radius:24px 24px 0 0; position:relative; background:#e8eff5; margin:0;}
.quiz_card_cover .quiz_header_image img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
@media (min-width:576px){
	.quiz_card_cover .quiz_header_image{height:135px;}
}
@media (min-width:992px){
	.quiz_card_cover .quiz_header_image{height:160px;}
}
.quiz_card_body{padding:2rem 1.75rem 2.25rem;}
@media (min-width:768px){
	.quiz_card_body{padding:2.25rem 2.5rem 2.75rem;}
}
/* Remove top padding like dashboard */
.multisteps_form .form_header_content.no-top-pad{padding-top:0 !important; margin-top:0;}
/* Tagline now holds former title text */
/* Tagline moved inline with question number inside panels */
.quiz_meta{ margin-top:.45rem; margin-bottom:.3rem !important; }
.quiz_meta .quiz_tagline{ font-size:1.1rem; font-weight:600; color:var(--me-dark); letter-spacing:.4px; }
/* Padding removed; handled by .quiz_section_width */
@media (min-width:768px){
	.quiz_meta .quiz_tagline{ font-size:1.15rem; }
}
@media (max-width:576px){
	/* Stack columns on very small screens: tagline first, number right-aligned below */
	.quiz_meta .col, .quiz_meta .col-auto { flex: 0 0 100%; max-width:100%; }
	.quiz_meta .quiz_tagline{ font-size:.95rem; }
}
/* Unified option shape: very rounded rectangle (long text safe) */
.form_items li { border-radius:28px !important; }

/* Primary/secondary buttons */

/* Removed long_options overrides; all options share unified styling */

/* Index/login page specific tweaks (background uses global .wrapper now) */
.index_page .multisteps_form{border-radius:20px;}
.index_page .form_header_content{background:transparent;}
.form_btn .f_btn.disable {
	background: var(--me-dark) !important;
	color: #fff !important;
}
.form_btn .f_btn.disable:hover {
	background: #fff !important;
	color: var(--me-dark) !important;
	border: 1px solid var(--me-dark);
}

/* Timer pills rounding stays, but tweak outline */
.count_box {
	border: 1px solid rgba(255,255,255,0.35);
}

/* Utility: brand-colored links */
a { color: var(--me-green); }
a:hover { color: var(--me-dark); }

/* Optional: swap page favicon/logo if a brand asset becomes available
	 Place file at ./assets/images/logo/missione-logo.png and uncomment below
*/
/*
.logo_area a img { content: url('./assets/images/logo/missione-logo.png'); }
*/

/* Accessibility helpers */
.visually-hidden {
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* CO2 floating badge */
.co2-badge {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	border: 0;
}
.co2-badge img {
	display: block;
	height: 72px; /* 2x bigger */
	width: auto;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.co2-badge:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.16); }

@media (max-width: 575.98px) {
	.co2-badge { right: 16px; bottom: 16px; padding: 0; }
	.co2-badge img { height: 60px; }
}
/* custom overrides for mission E branding */
/* Profile page styles */
.profile_card {
	width: min(980px, 100%);
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	padding: 24px 28px;
	border: 1px solid rgba(0,0,0,0.06);
}

.profile_header {
	border-bottom: 1px solid rgba(0,0,0,0.06);
	padding-bottom: 16px;
}

.profile_avatar img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--me-accent, #00a19a);
	background: #eef7f6;
}

.profile_title h2 {
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0;
}

.profile_stats {
	gap: 12px;
}

.stat_chip {
	background: #f5fbfa;
	border: 1px solid rgba(0,161,154,0.25);
	color: #004a47;
	padding: 10px 14px;
	border-radius: 12px;
	min-width: 160px;
}

.stat_value {
	font-size: 1.25rem;
	font-weight: 700;
}

.stat_label {
	font-size: 0.85rem;
	color: var(--me-muted-strong);
}

.profile_section {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 12px;
	padding: 16px;
}

.section_title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.profile_list {
	margin: 0;
}

.profile_list dt {
	font-weight: 600;
	color: #333;
}

.profile_list dd {
	margin: 0 0 8px 0;
}

/* Ranking preview tables -------------------------------------------------- */
.ranking-preview-grid {
	margin-top: 0.5rem;
}

.ranking-preview-table .ranking-status {
	min-height: 1.5rem;
	padding: 0.35rem 0;
}

.ranking-preview-table .ranking-card-header {
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

.ranking-preview-table .ranking-actions {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ranking-preview-table .ranking-actions [data-role="ranking-link"] {
	white-space: nowrap;
}

.ranking-preview-table [data-role="ranking-no-more"] {
	font-size: 0.85rem;
	color: var(--me-muted-strong);
	background: #f5f7fb;
	border: 1px solid rgba(15,29,43,0.12);
}

/* Full rankings page --------------------------------------------------- */
.rankings_page #rankingsCard {
	border: 1px solid rgba(20, 28, 47, 0.08);
	border-radius: 18px;
}

.rankings_page .rankings-tablist .rankings-tab {
	border: 1px solid rgba(20, 28, 47, 0.12);
	background: #ffffff;
	color: #0f1d2b;
	font-weight: 600;
	padding: 10px 18px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.rankings_page .rankings-tablist .rankings-tab.active,
.rankings_page .rankings-tablist .rankings-tab:focus-visible {
	background: var(--me-green);
	color: #fff;
	outline: none;
	border-color: var(--me-green);
	box-shadow: 0 4px 12px rgba(10, 76, 154, 0.25);
}

.rankings_page .rankings-tablist .rankings-tab:hover:not(.active) {
	background: #f8fbff;
	border-color: #0a4c9a;
	color: #0a4c9a;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.rankings_page .rankings-controls .input-group-text {
	background: #fff;
}

.rankings_page .ranking-preview-table thead th {
	font-size: 0.85rem;
	color: var(--me-muted-strong);
	text-align: center;
	cursor: help;
	white-space: nowrap;
}

.rankings_page .rankings-table thead th button {
	border: 0;
	background: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.rankings_page .rankings-table thead th.rankings-sortable {
	cursor: pointer;
	user-select: none;
}

.rankings_page .rankings-table thead th {
	white-space: normal;
	line-height: 1.3;
}

.rankings-header-label {
	display: block;
	word-break: break-word;
}

.rankings_page .rankings-table thead th.rankings-sortable:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: -4px;
}

.rankings_page .rankings-sort-indicator {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.7rem;
	opacity: 0.7;
}

.rankings_page .ranking-preview-table tbody td {
	text-align: center;
	vertical-align: middle;
}

.rankings_page .ranking-preview-table tbody td .ranking-cell-value {
	display: block;
	text-align: inherit;
}

.rankings_page .ranking-preview-table tbody td[data-format="name"],
.rankings_page .ranking-preview-table tbody td[data-format="name_with_org"],
.rankings_page .ranking-preview-table tbody td[data-format="authority"] {
	text-align: left;
}

.rankings_page .ranking-preview-table .ranking-name-value {
	display: block;
	overflow: hidden;
}

.ranking-name-value .ranking-name-text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranking-name-value .ranking-authority-hint {
	color: var(--me-muted-medium);
	font-size: 0.85em;
}

.rankings_page .ranking-preview-table .ranking-points-value {
	font-weight: 600;
}

.rankings_page .rankings-viewer-badge {
	margin-left: 0.5rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rankings_page .rankings-note-badge {
	margin-left: 0.5rem;
	font-size: 0.7rem;
	background: #fff0dd;
	color: #8a4c00;
}

/* Rankings table column alignment */
/* Mirror preview column widths on full rankings tables */
.rankings_page .rankings-table {
	table-layout: fixed;
	width: 100%;
}

.rankings_page .rankings-table thead th[data-format="rank"],
.rankings_page .rankings-table tbody td[data-format="rank"] {
	width: 60px !important;
	text-align: left !important;
}

.rankings_page .rankings-table thead th[data-format="name"],
.rankings_page .rankings-table thead th[data-format="name_with_org"],
.rankings_page .rankings-table thead th[data-format="authority"],
.rankings_page .rankings-table tbody td[data-format="name"],
.rankings_page .rankings-table tbody td[data-format="name_with_org"],
.rankings_page .rankings-table tbody td[data-format="authority"] {
	text-align: left !important;
}

.rankings_page .rankings-table thead th[data-format="points"],
.rankings_page .rankings-table thead th[data-format="avg_points"],
.rankings_page .rankings-table thead th[data-format="percent"],
.rankings_page .rankings-table tbody td[data-format="points"],
.rankings_page .rankings-table tbody td[data-format="avg_points"],
.rankings_page .rankings-table tbody td[data-format="percent"] {
	width: 120px !important;
	text-align: center !important;
}

.rankings_page .rankings-table thead th[data-format="time"],
.rankings_page .rankings-table thead th[data-format="avg_time"],
.rankings_page .rankings-table tbody td[data-format="time"],
.rankings_page .rankings-table tbody td[data-format="avg_time"] {
	width: 100px !important;
	text-align: right !important;
}

.rankings_page .rankings-table thead th[data-format="count"],
.rankings_page .rankings-table tbody td[data-format="count"] {
	width: 120px !important;
	text-align: right !important;
}

.rankings_page .rankings-status {
	min-height: 1.2rem;
}

.rankings_page .rankings-footer .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: auto;
	padding: 12px 20px;
	font-weight: 600;
	letter-spacing: 0.2px;
	border-radius: 999px !important;
	border: none !important;
	background: var(--me-green) !important;
	color: #fff !important;
	font-size: 0.95rem;
	margin: 0 4px;
}

.rankings_page .rankings-footer .btn:hover {
	background: var(--me-dark) !important;
	color: #fff !important;
	filter: brightness(1.06);
}

.rankings_page .rankings-footer .btn:disabled {
	background: #ccc !important;
	color: #666 !important;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Page number buttons - circular style */
.rankings_page .rankings-footer .btn-page {
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #f0f4f8 !important;
	color: var(--me-green) !important;
	font-weight: 700;
	border: 2px solid #e0e8f0 !important;
	margin: 0 2px;
}

.rankings_page .rankings-footer .btn-page:hover:not(:disabled) {
	background: var(--me-green) !important;
	color: #fff !important;
	border-color: var(--me-green) !important;
}

.rankings_page .rankings-footer .btn-page.active {
	background: var(--me-green) !important;
	color: #fff !important;
	border-color: var(--me-green) !important;
}

.rankings_page .rankings-footer .btn-page:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.rankings_page .ranking-preview-table tbody tr.table-primary td {
	background-color: rgba(56, 206, 220, 0.15) !important;
}

.ranking-preview-table .ranking-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.35rem;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 999px;
	border: 1px solid rgba(15, 29, 43, 0.18);
	color: var(--me-muted-strong);
	font-size: 0.7rem;
	font-weight: 700;
	background: #f4f7fb;
	line-height: 1;
	cursor: help;
}

.ranking-preview-table .ranking-help:focus-visible {
	outline: 2px solid var(--me-yellow, #ffcc00);
	outline-offset: 2px;
}

.ranking-preview-table tbody tr.ranking-ellipsis td {
	text-align: center;
	color: #7a8699;
	font-weight: 600;
}

.ranking-preview-table tbody tr.ranking-empty td {
	text-align: center;
	color: var(--me-muted-medium);
	font-style: italic;
}

.ranking-preview-table tbody tr.ranking-viewer-row td {
	background-color: rgba(56, 206, 220, 0.15) !important;
}

.ranking-name-value .ranking-name-text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranking-name-value .ranking-authority-hint {
	color: var(--me-muted-medium);
	font-size: 0.85em;
}

.ranking-preview-table .ranking-points-value {
	font-weight: 600;
}

.ranking-preview-table .ranking-points-value .text-muted {
	display: none;
}

.rankings_page .ranking-preview-table thead th button {
	border: 0;
	background: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.rankings_page .ranking-preview-table thead th.rankings-sortable {
	cursor: pointer;
	user-select: none;
}

.rankings_page .ranking-preview-table thead th.rankings-sortable:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: -4px;
}

.rankings_page .rankings-sort-indicator {
	margin-left: 0.3rem;
	font-size: 0.7rem;
	opacity: 0.7;
}

.rankings_page .ranking-preview-table .rankings-note-badge {
	margin-left: 0.5rem;
	font-size: 0.7rem;
	background: #fff0dd;
	color: #8a4c00;
}

.rankings_page .ranking-preview-table tbody tr.table-primary td {
	background-color: rgba(0, 74, 173, 0.12);
}

.ranking-preview-table .ranking-note {
	margin-top: 0.25rem;
}

.ranking-preview-table .ranking-footnote {
	border-top: 1px solid rgba(15, 29, 43, 0.08);
	padding-top: 0.75rem;
}

.ranking-preview-table .btn.disabled,
.ranking-preview-table .btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* Removed unused .quiz_header_tagline & .profile_activity styles (not in markup) */

/* Align profile page header logo like other pages */
.top_content_area .logo_area img {
	max-height: 70px;
	height: 70px;
}

/* Ensure the CO2 badge stays above the profile card on mobile */
@media (max-width: 576px) {
	.co2-badge { z-index: 1050; }
}


/* =========================
	 Auth pages (login/register)
	 ========================= */
.auth_card {
	width: 100%;
	max-width: 560px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 28px 28px 32px;
}
.auth_header .auth_title {
	font-family: 'Open Sans', sans-serif;
	color: var(--me-dark);
}
.auth_header .auth_subtitle {
	color: var(--me-muted-strong);
	margin: 0;
}

.auth_tabs { gap: 10px; }
.auth_tab {
	border: 1px solid rgba(0,0,0,0.08);
	background: #fff;
	color: var(--me-dark);
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 700;
}
.auth_tab.active { color:#fff; border-color: var(--me-green); background: var(--me-green); }
.auth_panel { transition: opacity .2s ease; }
.auth_panel.d-none { opacity: 0; }

.auth_input {
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.12);
	padding: 10px 12px;
	background:#ffffff;
	color: var(--me-dark);
}
.auth_input::placeholder { color: var(--me-muted-medium); }
.auth_input:-ms-input-placeholder { color: var(--me-muted-medium); }
.auth_input::-ms-input-placeholder { color: var(--me-muted-medium); }
.auth_input.is-invalid { border-color:#d93025 !important; }
.auth_input.is-invalid:focus { box-shadow:0 0 0 0.2rem rgba(217,48,37,0.25); }
.auth_input:focus,
.auth_input.form-control:focus,
.auth_input.form-select:focus {
	border-color: var(--me-green);
	box-shadow: 0 0 0 0.2rem rgba(10, 76, 154, 0.15);
}

/* =========================
	 Result page
	 ========================= */
.result-section {
	background: transparent;
}

.result-section .card {
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 18px 36px rgba(0, 26, 77, 0.08);
}

.result-section .card + .card {
	margin-top: 1.5rem;
}

.result-section .card-body {
	color: var(--me-text);
}

.result-section .result-header h1 {
	color: var(--me-dark);
}

.result-section .result-header p {
	color: var(--me-muted-medium);
}

.score-circle {
	background: #f0f5fb;
	border: 1px solid rgba(0, 26, 77, 0.08);
}

.score-percent {
	color: var(--me-dark);
	line-height: 1.1;
}

.result-meta-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.result-meta-list li {
	margin-bottom: .35rem;
}

#motivation-card .card-body {
	background: rgba(10, 76, 154, 0.08);
	border-radius: 16px;
	color: var(--me-dark);
}

.result-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
}
.result-status-icon .material-symbols-outlined {
	line-height: 1;
}

.result-question-title {
	min-width: 0;
}

.result-question-points {
	flex-shrink: 0;
	min-width: 112px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.scenario-options {
	padding-left: 0;
	margin: 0;
}

.scenario-option-entry + .scenario-option-entry {
	margin-top: 0.35rem;
}

.scenario-option-label {
	margin-right: 0.5rem;
	color: var(--me-dark);
}

.result-section .accordion-button.result-question-header::after {
	grid-column: 5;
	justify-self: end;
	margin-left: 0;
}

@media (max-width: 575.98px) {
 .result-question-points {
  min-width: 96px;
 }
}

.status-correct {
	color: var(--me-green);
}

.status-incorrect {
	color: #ff9800;
}

.status-neutral {
	color: var(--me-muted-strong);
}

.question_detail dt {
	margin-bottom: 0.4rem;
}

.question_detail dd {
	margin-bottom: 1rem;
}

@media (min-width: 576px) {
	.question_detail dt {
		padding-right: 0.5rem;
	}

	.question_detail dd {
		padding-left: 0.5rem;
	}
}

.result-section .accordion-item {
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.result-section .accordion-button {
	font-weight: 600;
	color: var(--me-dark);
	gap: 0.65rem;
}
.result-section .accordion-button.result-question-header {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	column-gap: 0.75rem;
}

.result-question-number {
	width: 2.25rem;
	text-align: left;
}

.result-section .accordion-button:not(.collapsed) {
	background: rgba(10, 76, 154, 0.06);
	color: var(--me-dark);
}

.result-section .accordion-button:focus {
	box-shadow: 0 0 0 0.15rem rgba(10, 76, 154, 0.25);
}

.explanation-content {
	position: relative;
}

.btn-ghost {
	background: transparent;
	border: none;
	color: var(--me-green);
	font-weight: 600;
}

.btn-ghost:hover,
.btn-ghost:focus {
	color: var(--me-dark);
	text-decoration: underline;
}

.btn-ghost:focus {
	outline: 2px solid var(--me-yellow);
	outline-offset: 2px;
}

@media (max-width: 767.98px) {
	.score-circle { margin-bottom: 1rem; }
	.result-section .card-body { padding: 1.75rem; }
	.status-pill { font-size: 0.75rem; }
}

@media print {
	body {
		background: #ffffff !important;
	}

	.header_nav,
	.co2-badge,
	#btn-retry,
	#btn-review,
	#btn-dashboard,
	#btn-print {
		display: none !important;
	}

	.result-section {
		padding: 0 !important;
	}

	.result-section .card {
		box-shadow: none !important;
		border: 1px solid rgba(0, 0, 0, 0.15);
		page-break-inside: avoid;
	}

	.result-section .accordion-button::after {
		display: none;
	}

	.result-section .accordion-button,
	.result-section .accordion-button.collapsed {
		pointer-events: none;
		background: #ffffff !important;
	}

	.result-section .accordion-collapse {
		display: block !important;
		height: auto !important;
	}

	.explanation-content {
		max-height: none !important;
	}
}

/* Select2 styling to match auth inputs */
.select2-container--default .select2-selection--single {
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.12);
	min-height: 48px;
	background: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	margin: 0;
	color: var(--me-dark);
	font-size: 0.95rem;
	line-height: 1.4;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--me-muted-medium);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--me-green);
	box-shadow: 0 0 0 0.2rem rgba(10, 76, 154, 0.15);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
	background: rgba(255,255,255,0.7);
	color: var(--me-muted-medium);
	border-color: rgba(0,0,0,0.12);
	opacity: 1;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding-right: 32px;
}

.select2-dropdown {
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 12px;
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.select2-results__option {
	padding: 10px 14px;
	font-size: 0.95rem;
	line-height: 1.35;
}

.select2-results__option--highlighted.select2-results__option--selectable {
	background-color: rgba(10, 76, 154, 0.12);
	color: var(--me-dark);
}

.select2-search--dropdown .select2-search__field {
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	padding: 8px 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--me-green);
	outline: none;
	box-shadow: 0 0 0 0.15rem rgba(10, 76, 154, 0.12);
}

/* Bootstrap-select overrides for auth forms */
.bootstrap-select.auth_input {
	background: transparent;
	border: none;
	padding: 0;
	width: 100%;
}

.bootstrap-select.auth_input > .dropdown-toggle {
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #ffffff;
	color: var(--me-dark);
	padding: 10px 12px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.4;
	box-shadow: none;
	opacity: 1;
}

.bootstrap-select.auth_input.disabled > .dropdown-toggle,
.bootstrap-select.auth_input > .dropdown-toggle:disabled {
	background: rgba(255,255,255,0.7);
	color: var(--me-muted-medium);
	border-color: rgba(0,0,0,0.12);
	cursor: not-allowed;
	opacity: 1;
}

.bootstrap-select.auth_input > .dropdown-toggle:focus,
.bootstrap-select.auth_input > .dropdown-toggle:active,
.bootstrap-select.auth_input.show > .dropdown-toggle,
.bootstrap-select.auth_input > .dropdown-toggle.auth-selectpicker:focus,
.bootstrap-select.auth_input > .dropdown-toggle.auth-selectpicker:active {
	border-color: var(--me-green);
	box-shadow: 0 0 0 0.2rem rgba(10, 76, 154, 0.15);
	outline: none;
}


.bootstrap-select.auth_input > .dropdown-toggle::after {
	margin-top: auto;
	margin-bottom: auto;
	border-top-width: 0.45rem;
	border-left-width: 0.35rem;
	border-right-width: 0.35rem;
}

.bootstrap-select.auth_input .filter-option-inner-inner {
	color: var(--me-dark);
	font-weight: 400;
}

.bootstrap-select.auth_input .dropdown-menu {
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 18px 40px rgba(13, 24, 33, 0.16);
	padding: 0.4rem 0;
	max-height: none;
}

.bootstrap-select.auth_input .dropdown-menu .inner {
	max-height: 320px !important;
}

.bootstrap-select.auth_input .dropdown-menu li a {
	padding: 0.55rem 1rem;
	font-size: 0.95rem;
	color: var(--me-dark);
}

.bootstrap-select.auth_input .dropdown-menu li a:hover,
.bootstrap-select.auth_input .dropdown-menu li a:focus,
.bootstrap-select.auth_input .dropdown-menu li.active > a {
	background: var(--me-green);
	color: #fff;
}

.bootstrap-select.auth_input .bs-searchbox {
	padding: 0.5rem 0.75rem 0.3rem;
}

.bootstrap-select.auth_input .bs-searchbox input.form-control {
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.12);
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
}

.bootstrap-select.auth_input .no-results {
	padding: 0.65rem 1rem;
	font-weight: 500;
	color: var(--me-muted-strong);
}

.authority-search-fallback {
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	padding: 10px 12px;
	font-size: 0.95rem;
}

.auth_actions .f_btn { 
	width: 100%;
	padding: 14px 22px; /* taller */
	min-height: 54px;
	font-size: 1.05rem;
	border-radius: 999px;
}
.auth_actions.auth_actions-centered .f_btn {
	width: auto;
	min-width: 0;
	padding: 14px 32px;
	display: inline-flex;
	justify-content: center;
}
.auth_actions .f_btn,
.auth_tab.active,
.auth_actions .f_btn:hover { filter: brightness(1.06); }
.auth_tab { color: var(--me-dark); }
.auth_link { color: var(--me-green); font-weight: 600; }
.auth_link:hover { color: var(--me-dark); }

/* Unified mission E button style for general actions */
.me_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	min-height: 54px;
	font-weight: 700;
	letter-spacing: 0.2px;
	border-radius: 999px;
	border: none;
	background: var(--me-green);
	color: #fff;
}
.me_btn:hover { filter: brightness(1.06); color: #fff; }
.me_btn.secondary {
	background: var(--me-dark);
}
.me_btn.secondary:hover { filter: brightness(1.04); }

/* Modal polish to match brand */
.profile_modal {
	border-radius: 16px;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.profile_modal .modal-header {
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.profile_modal .modal-footer {
	border-top: 1px solid rgba(0,0,0,0.06);
}
.profile_modal .btn.btn-light {
	border-radius: 999px;
	padding: 10px 18px;
	border: 1px solid rgba(0,0,0,0.12);
}

/* Scenario Q2 now uses the same base option styling as all questions; removed custom size overrides */

/* Rich explanation modal content */
#answerFeedbackModal.explain-only .modal-body{padding-top:1.25rem;}
#answerFeedbackModal.explain-only #feedbackExplainWrap{margin-top:0;}
#answerFeedbackModal.explain-only #feedbackExplain p{margin:0 0 .95rem; font-weight:500; font-size:1.1rem; line-height:1.55;}
#answerFeedbackModal.explain-only #feedbackExplain p strong{font-weight:700;}
#answerFeedbackModal.explain-only #feedbackExplain p:last-child{margin-bottom:0;}
#answerFeedbackModal.explain-only .modal-title{font-size:1.1rem;}
/* Unified modal feedback text sizing */
#answerFeedbackModal .modal-body{font-size:1.15rem; line-height:1.55;}
#answerFeedbackModal .modal-body p{font-size:1.15rem; line-height:1.55;}
/* Slightly wider feedback modal */
#answerFeedbackModal .modal-dialog{max-width:720px;}
@media (max-width:768px){
	#answerFeedbackModal .modal-dialog{max-width:100%; margin:0 1rem;}
}
@media (max-width:576px){
		#answerFeedbackModal .modal-body{font-size:1.05rem;}
		#answerFeedbackModal .modal-body p{font-size:1.05rem;}
		#answerFeedbackModal .modal-title.question_title{font-size:1.3rem !important;}
}

/* Result page centered action groups */
.next_steps_actions .me_btn,
.invite_actions .me_btn{width:260px;} /* removed flex-basis to avoid column height = width creating circle */
/* Prevent accidental circular shrink (some global styles may compress height) */
.invite_actions .me_btn{border-radius:999px !important; height:auto !important; line-height:1.2; padding:14px 22px; display:inline-flex; align-items:center; justify-content:center;}
@media (max-width:575.98px){
	.next_steps_actions .me_btn,
	.invite_actions .me_btn{width:100%; flex:1 1 auto;}
}

@media (max-width: 575.98px) {
	.auth_card { padding: 22px 18px 26px; border-radius: 10px; }
	.auth_actions .f_btn { padding: 12px 18px; min-height: 50px; font-size: 1rem; }
}

/* Unified Answer button style (single source) */
.form_btn { position:relative; }
.form_btn .f_btn.active {
	background:#ffffff !important;
	color:var(--me-dark) !important;
	border:2px solid transparent !important;
	box-shadow:0 4px 14px rgba(0,0,0,0.18);
	font-weight:700; letter-spacing:.5px;
	transition:background .22s ease, box-shadow .22s ease, transform .18s ease;
}
.form_btn .f_btn.active:hover { background:#f5f7fa !important; box-shadow:0 8px 22px rgba(0,0,0,0.28); transform:translateY(-2px); }
.form_btn .f_btn.active:focus { outline:3px solid #003064; outline-offset:2px; }
.form_btn .f_btn.active.awaiting-selection {
	opacity:.92;
	box-shadow:0 4px 12px rgba(0,0,0,0.14);
	transform:none;
	cursor:pointer;
}
.form_btn .f_btn.active.awaiting-selection:hover {
	transform:none;
	box-shadow:0 6px 16px rgba(0,0,0,0.16);
}
.form_btn .f_btn.disable { /* keep disabled/back button legible on blue */
	background:#001a4d !important;
	color:#fff !important;
	border:2px solid #001a4d !important;
}
.form_btn .f_btn.disable:hover { background:#ffffff !important; color:#001a4d !important; }

/* Prevent initial scroll jump on login: fade in without vertical slide */
.auth_card.animate__animated.animate__fadeInUp {
	animation-name: fadeIn !important; /* use animate.css fade only */
	animation-duration: 420ms;
}

/* Register page notice (moved from inline) */
.register_notice{
	background:rgba(10,76,154,0.08);
	border:1px solid rgba(15,29,43,0.08);
	border-radius:14px;
	color:#0F1D2B;
	padding:12px 16px;
}
body .register_notice strong{color:#0A4C9A;}
@media (prefers-color-scheme: dark){ .register_notice{background:#0a4c9a22; border-color:#0a4c9a55;} }

/* Error variant for registration notice (red / error style) */
.register_notice.register_error{
    background: rgba(217,48,37,0.08);
    border: 1px solid rgba(217,48,37,0.18);
    color: #6b1110;
}
body .register_notice.register_error strong{ color: #d93025; }
@media (prefers-color-scheme: dark){ .register_notice.register_error{ background: rgba(217,48,37,0.12); border-color: rgba(217,48,37,0.28); } }

/* Prevent initial scroll jump on profile/register cards too */
.profile_card.animate__animated.animate__fadeInUp,
.register_card.animate__animated.animate__fadeInUp {
	animation-name: fadeIn !important; /* match login page */
	animation-duration: 420ms;
}

/* Dual logo arrangement */
.logo_duo{display:flex;align-items:center;gap:14px;}
.logo_duo img{height:48px;width:auto;}
@media (max-width: 767.98px){.logo_duo img{height:38px;}}

/* Header layout: left main logo, centered nav, right CO2 logo */
.top_content_area{background:#ffffff; box-shadow:0 4px 18px rgba(0,0,0,0.08); border-bottom:1px solid rgba(0,48,100,0.08);}
.header_bar{position:relative;}
/* Flex centering; ensure equal horizontal padding so nav is visually centered */
.header_bar .col-12{display:flex;align-items:center;padding:12px 16px;}
.header_bar .logo_area,.header_bar .logo_right{flex:0 0 auto;padding:0 12px;}
.header_nav{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;gap:26px;margin-left:auto;margin-right:34px;}
.header_nav .auth_tab{padding:.45rem 1rem;font-weight:600;}
@media (max-width:991.98px){.header_nav{gap:14px;}}
@media (max-width:767.98px){.header_nav{display:none !important;}}
@media (max-width:767.98px){
	.header_nav.is-open{
		display:flex !important;
		flex-direction:column;
		align-items:stretch;
		gap:.75rem;
		margin-left:0;
		width:100%;
		padding:1rem 0;
		background:#fff;
		border-radius:12px;
		box-shadow:0 10px 25px rgba(0,0,0,0.08);
		margin-top:.5rem;
	}
	.header_nav.is-open .dash_link{display:flex !important;align-items:center;justify-content:flex-start;width:100%;font-size:1rem;padding:.65rem 1rem !important;border-radius:8px !important;background:transparent !important;}
	.header_nav.is-open .dash_link.active{background:rgba(0,48,100,0.08) !important;}
	.header_nav.is-open .logout_nav_form{width:100%;}
	.header_nav.is-open .logout_nav_form button{width:100%;justify-content:center;}
}
.logo_right img{width:auto;display:block;}

/* === Enlarged logos (extra increase) === */
.logo_area img { max-height:84px; height:84px; }
@media (max-width: 991.98px){ .logo_area img { max-height:63px; height:63px; } }
@media (max-width: 767.98px){ .logo_area img { max-height:54px; height:54px; } }
.logo_right img { height:70px; }
@media (max-width: 991.98px){ .logo_right img { height:55px; } }
@media (max-width: 767.98px){ .logo_right img { height:47px; } }

/* Floating vertical timer (replaces old centered header timer) */
.floating_timer{position:fixed;right:24px;bottom:24px;z-index:1200;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:0 8px 26px rgba(0,0,0,0.12);padding:12px 14px;border-radius:16px;display:flex;flex-direction:column;align-items:center;min-width:120px;}
.floating_timer{border:1px solid rgba(31,76,154,0.25)!important;}
.floating_timer .ft_label{font-size:.75rem;letter-spacing:.5px;font-weight:700;color:#1f4c9a;text-transform:uppercase;opacity:.85;margin-bottom:4px;}
.floating_timer .countdown_timer{font-size:1.45rem;font-weight:800;color:#1f4c9a;line-height:1;letter-spacing:.5px;}
/* Countdown plugin injects an h3; ensure its color inherits our blue */
.floating_timer .countdown_timer h3{color:#1f4c9a !important;font-weight:800;margin:0;letter-spacing:.5px;}
@media (max-width:575.98px){.floating_timer{right:16px;bottom:16px;padding:10px 12px;}.floating_timer .countdown_timer{font-size:1.2rem;}}

/* Hide legacy floating CO2 badge when timer present (we moved logo into header) */
.co2-badge{display:none !important;}

/* (Removed older duplicate header_nav definitions above to avoid conflicts) */

/* ==========================================================
	 Night Blue Theme Override (requested #003064 site-wide)
	 Centralized late in cascade to avoid invasive refactors.
	 ========================================================== */
:root {
	--me-night: #003064;
	--me-green: #003064; /* repoint primary */
	--me-dark: #003064;  /* unify dark */
	--bs-primary: #003064; /* bootstrap primary */
	--me-night-hover:#00417f; /* slightly lighter for hover */
}

/* EARLY OVERRIDE FOR NEW DESIGN PAGES - Apply BEFORE global body rule */
body.dashboard_page { background: #003064 !important; }
body.result_page { background: #003064 !important; }
body.profile_page { background: #003064 !important; }
body.rankings_page { background: #003064 !important; }
body.error_page {
	background: #003064 !important;
	color: #ffffff !important;
}

body.error_page main,
body.error_page h1,
body.error_page p {
	color: #ffffff !important;
}

body.error_page a {
	color: #ffcc00 !important;
}

body.error_page a:hover,
body.error_page a:focus {
	color: #ffe680 !important;
}

body {
	background: #003064 !important; 
	background-image: none !important;
}

.wrapper { 
	background: #003064 !important; 
	background-image: none !important;
	padding-top: 0 !important; 
}

/* Header nav pills */
.header_nav .auth_tab { background:#003064; border-color:#003064; }
.header_nav .auth_tab:hover { background:#001a3f; border-color:#001a3f; }

/* Generic primary action buttons */
.me_btn,
.auth_actions .f_btn,
.me_btn:hover, .auth_actions .f_btn:hover { background:var(--me-night-hover) !important; border-color:var(--me-night-hover) !important; }
.form_btn .f_btn.disable { background:#001a3f !important; border-color:#001a3f !important; }
.form_btn .f_btn.disable:hover { background:#fff !important; color:#001a3f !important; }

/* Outline + primary bootstrap buttons */
.btn-primary, .btn-outline-primary:hover { background:#003064 !important; border-color:#003064 !important; color:#ffffff !important; }
.btn-primary:hover { background:var(--me-night-hover) !important; border-color:var(--me-night-hover) !important; }
.btn-outline-primary { color:#003064 !important; border-color:#003064 !important; background:transparent !important; }

/* Quiz card start arrow */
.quiz_go { background:#003064 !important; }
/* Preserve orange color for repeat buttons */
.quiz_go.repeat { background:#ff9800 !important; }
.quiz_go.repeat:hover { filter:brightness(1.05); }

/* Modal icon styling */

/* Form radio accents */
.form_items li:after { background:#003064 !important; border-color:rgba(0,48,100,0.6) !important; }
.form_items li.active { border-color:rgba(0,48,100,0.4) !important; }

/* Links */
a { color:#003064; }
a:hover { color:#001a3f; }

/* Icon-only logout button (remove pill background) */
.header_nav .auth_tab.logout_icon {
	background:transparent !important;
	border:none !important;
	min-width:0 !important;
	padding:0 !important;
	width:52px !important;
	height:52px !important;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:#003064 !important;
	box-shadow:none !important;
}
.header_nav .auth_tab.logout_icon:hover { color:var(--me-night-hover) !important; background:transparent !important; }
.header_nav .auth_tab.logout_icon:focus { outline:2px solid var(--me-yellow); outline-offset:2px; }
.header_nav .auth_tab.logout_icon i { font-size:1.85rem; line-height:1; }

/* Optional: slightly dim tooltip background for dark-on-light theme */
.tooltip-inner { font-weight:600; padding:.45rem .75rem; }

/* Refreshed Dashboard nav link (replace pill button) */
.header_nav .dash_link { background:transparent !important; border:none !important; color:#003064 !important; font-weight:700; font-size:1.24rem; letter-spacing:.35px; padding:.45rem .35rem !important; position:relative; min-width:auto; border-radius:0 !important; text-decoration:none !important; }
.header_nav .dash_link:after {
	content:"";
	position:absolute;
	left:0; right:0; bottom:-6px;
	height:3px;
	background:linear-gradient(90deg,#003064,#00509e);
	border-radius:2px;
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .28s ease;
}
.header_nav .dash_link:hover:after, .header_nav .dash_link:focus:after { transform:scaleX(1); }
.header_nav .dash_link.active:after { transform:scaleX(1); }
.header_nav .dash_link:focus { outline:2px solid var(--me-yellow); outline-offset:3px; }
.header_nav .dash_link:hover, .header_nav .dash_link:focus { color:var(--me-night-hover) !important; }
.header_nav .dash_link span { display:inline-block; padding:0 .4rem 0 .15rem; }

/* ==========================================================
	 Quiz option list & accessibility (consolidated from inline)
	 ========================================================== */
.question_title{white-space:normal;line-height:1.35;}
.form_items ul{position:relative;}
.form_items li{position:relative; border:2px solid #c5d3e2 !important; background:#ffffff; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; width:100%; display:block; max-width:100%; white-space:normal; overflow-wrap:anywhere; word-break:break-word;}
.form_items li:before{display:none !important; content:none !important;}
.form_items li:after{content:none !important;}
.form_items li input[type="radio"]{position:absolute; left:-9999px; opacity:0; width:0; height:0; pointer-events:none;}
/* Letter bubble */
	.form_items li[data-letter]:not(.quiz_option){padding-left:5.2rem;}
	.form_items li[data-letter]:not(.quiz_option)::before{content:attr(data-letter) !important; position:absolute; left:1.35rem; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#003064; color:#fff; display:flex !important; align-items:center; justify-content:center; font-weight:700; font-size:1rem; letter-spacing:.4px; font-family:inherit; box-shadow:0 4px 10px rgba(0,0,0,0.15); transition:background .25s ease, transform .25s ease; border:2px solid #001a4d;}
.form_items li label{display:block; padding-right:1rem; margin-left:.25rem;}
/* Active state */
.form_items li.active{border-width:3px !important; border-color:var(--me-yellow) !important; background:#fffdf2 !important; box-shadow:0 0 0 4px rgba(255,204,0,0.35) !important;}
.form_items{margin-bottom:0;}
	.form_items li.active[data-letter]:not(.quiz_option)::before{background:var(--me-yellow); color:var(--me-dark); transform:translateY(-50%) scale(1.05); box-shadow:0 4px 14px rgba(0,0,0,0.25); border:2px solid #b58e00;}
.form_items li:not(.active):hover{border-color:#003064 !important; background:#f5f9fc;}
	.form_items li:not(.active):hover[data-letter]:not(.quiz_option)::before{background:#004785;}
.form_items li:focus-within{outline:none; border-color:#003064; box-shadow:0 0 0 3px rgba(0,48,100,0.2);}
.scenario_q2 strong{font-weight:600;}
@media (max-width:576px){
	.form_items li[data-letter]:not(.quiz_option)::before{left:.9rem; width:38px; height:38px; font-size:.95rem;}
	.form_btn .f_btn{width:100%; margin:.25rem 0;}
}

/* Quiz option pill styling for dynamic runner */
.quiz_block{background:#ffffff; border-radius:24px; box-shadow:0 12px 26px rgba(0,0,0,0.08); border:1px solid rgba(0,0,0,0.05); padding:0; overflow:hidden;}
.quiz_block + .quiz_block{margin-top:1.5rem;}
.quiz_option{padding:1.05rem 3.75rem 1.05rem 4.25rem; border-radius:30px !important; cursor:pointer;}
.quiz_option.locked{pointer-events:none; cursor:default;}
.quiz_option.locked label{cursor:default;}
.quiz_option label{display:block; margin:0; padding-left:1rem; cursor:pointer; color:var(--me-text); font-weight:600; line-height:1.48; letter-spacing:.15px;}
.quiz_option .quiz_option_text{display:block; padding-left:1rem;}
.quiz_option .quiz_option_letter{position:absolute; left:1.35rem; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:var(--me-dark); color:#ffffff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; letter-spacing:.4px; box-shadow:0 4px 12px rgba(0,0,0,0.18); border:2px solid var(--me-dark); transition:background .25s ease, transform .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; background-image:none !important;}
.quiz_option:not(.active):hover .quiz_option_letter{background:#004785; border-color:#003064;}
.quiz_option.locked .quiz_option_letter{transition:none;}
.quiz_option.locked:not(.active):hover .quiz_option_letter{background:var(--me-dark); border-color:var(--me-dark);}
.quiz_option.active{border-color:#00a8bb !important; background:#e0f7fb !important; box-shadow:0 0 0 4px rgba(0,168,187,0.18) !important;}
.quiz_option.active .quiz_option_letter{background:#00a8bb; color:#000000; transform:translateY(-50%) scale(1.05); box-shadow:0 4px 16px rgba(0,168,187,0.25); border-color:#008497;}
.quiz_option:focus-within .quiz_option_letter{background:#004785; border-color:#003064;}
.quiz_option.correct{border-color:#1f8d49 !important; background:#e7f5ec !important; box-shadow:0 0 0 4px rgba(31,141,73,0.2) !important;}
.quiz_option.correct .quiz_option_letter{background:#1f8d49; border-color:#176b36; color:#ffffff; box-shadow:0 6px 16px rgba(31,141,73,0.28); transform:translateY(-50%) scale(1.05);}
.quiz_option.correct::after{display:none;}
.quiz_option.incorrect{border-color:#d13c2f !important; background:#fdecea !important; box-shadow:0 0 0 4px rgba(209,60,47,0.2) !important;}
.quiz_option.incorrect .quiz_option_letter{background:#d13c2f; border-color:#a42c22; color:#ffffff; box-shadow:0 6px 16px rgba(209,60,47,0.3); transform:translateY(-50%) scale(1.05);}
.quiz_option.incorrect::after{display:none;}
.quiz_option.locked{cursor:default;}
.quiz_option.locked label{cursor:default;}
.quiz_option.locked:hover{background:inherit;}
.quiz_option.selected_option:not(.correct):not(.incorrect){border-color:#00a8bb !important; background:#e0f7fb !important; box-shadow:0 0 0 4px rgba(0,168,187,0.18) !important;}
.quiz_option.selected_option:not(.correct):not(.incorrect) .quiz_option_letter{background:#00a8bb; color:#000000; border-color:#008497;}
.quiz_option .quiz_option_text strong{font-weight:700;}
.quiz_option .quiz_option_text em{font-style:normal; font-weight:600;}
.quiz_option.incorrect .quiz_option_text em{color:#d13c2f;}
.quiz_option.correct .quiz_option_text em{color:#1f8d49;}
.quiz_option + .quiz_option{margin-top:1rem;}

@media (max-width:768px){
	.quiz_block{padding:0; border-radius:20px;}
}
@media (max-width:576px){
	.quiz_option{padding:1rem 3.25rem 1rem 3.75rem;}
	.quiz_option label{padding-left:.85rem;}
	.quiz_option .quiz_option_text{padding-left:.75rem;}
	.quiz_option .quiz_option_letter{left:1rem; width:38px; height:38px; font-size:.95rem;}
}

#quizCard{background:transparent;}
#quizQuestionCard{transition:box-shadow .25s ease, transform .25s ease;}
#quizApp.quiz-missing-answer #quizQuestionCard{box-shadow:0 0 0 4px rgba(217,48,37,0.22); transform:none; animation:none;}
#quizApp.quiz-missing-answer #quizQuestionCard .quiz_card_body{animation:quiz-shake .36s ease;}
#quizApp + .form_btn{padding-top:1.5rem !important; padding-bottom:2.5rem !important;}
@media (max-width:576px){
	#quizApp + .form_btn{padding-top:1.25rem !important; padding-bottom:2rem !important;}
}

@keyframes quiz-shake{
	0%,100%{transform:translateX(0);}
	20%{transform:translateX(8px);}
	40%{transform:translateX(-6px);}
	60%{transform:translateX(4px);}
	80%{transform:translateX(-3px);}
}

.quiz_score_badge{font-weight:600; border-width:1px; padding:.15rem .85rem; box-shadow:0 4px 10px rgba(0,0,0,0.06); line-height:1.35;}
.quiz_score_badge .quiz_score_label{letter-spacing:.2px; text-transform:none;}
.quiz_score_badge .quiz_score_value{font-weight:700;}
.quiz_score_badge .material-symbols-outlined{font-size:.85rem; line-height:1;}

/* Feedback modal explain-only variant */
#answerFeedbackModal.explain-only #feedbackStatus,
#answerFeedbackModal.explain-only #feedbackCorrectWrap,
#answerFeedbackModal.explain-only #feedbackExplainLabel{display:none !important;}
#answerFeedbackModal.explain-only #feedbackExplainWrap{margin:0;}
#answerFeedbackModal.explain-only #feedbackExplain{display:block; font-size:1.05rem; line-height:1.45; font-weight:600;}

/* =====================
	FAQ Accordion Styling
	- Hide (visually) collapsed answer text by coloring it same as page bg
	- Provide accessible contrast when expanded
	===================== */
body.faq_page .accordion { --faq-bg:#003064; }
body.faq_page h1{color:#ffffff; font-weight:700;}
body.faq_page .accordion-item { background:transparent; border:0; margin-bottom:1.25rem; }
body.faq_page .accordion-button { background:rgba(255,255,255,0.08); color:#ffffff; font-weight:600; border-radius:999px !important; border:1px solid rgba(255,255,255,0.28); padding:.45rem 1rem; box-shadow:none; }
body.faq_page .accordion-button.collapsed { background:rgba(255,255,255,0.08); color:#ffffff; }
body.faq_page .accordion-button:not(.collapsed){ background:#ffffff; color:#003064; }
body.faq_page .accordion-button:focus { box-shadow:0 0 0 2px var(--me-yellow); }
body.faq_page .accordion-body { padding:1rem 0 0 0; font-size:.95rem; line-height:1.5; transition:color .25s ease; }
/* Collapsed: make text blend with bg (still present for screen readers) */
body.faq_page .accordion-collapse:not(.show) .accordion-body { color:#003064; }
/* Expanded: readable contrasting white */
body.faq_page .accordion-collapse.show .accordion-body { color:#ffffff; }
/* Optional subtle divider line under each expanded answer */
body.faq_page .accordion-collapse.show .accordion-body:after { content:""; display:block; margin-top:1rem; height:1px; background:rgba(255,255,255,0.2); }

/* FAQ accordion arrow inherits text color */
body.faq_page .accordion-button::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	content: "expand_more";
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	background: none !important;
	color: currentColor;
	transform: none;
	transition: transform .25s ease;
	width: auto;
	height: auto;
	line-height: 1;
	font-size: 1.2rem;
}
body.faq_page .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }

/* Result page feedback card */
.feedback_card .thumb_wrap {
	width:84px; height:84px; border-radius:24px; background:linear-gradient(135deg,#ffc107,#ff9800); color:#003064;
	font-size:2rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.feedback_card .thumb_wrap .material-symbols-outlined { color:#003064; font-size:1.4em; }
.feedback_card #feedbackText.lead { font-size:1.05rem; line-height:1.55; }
@media (max-width:575.98px){
	.feedback_card .thumb_wrap { width:64px; height:64px; font-size:1.6rem; border-radius:20px; }
}

/* Result page summary stats */
.result_card_title,
.stat_card_heading { font-size:1.05rem; font-weight:700; color:var(--me-dark, #102a43); line-height:1.3; letter-spacing:0.2px; }
.result_points_main { display:flex; align-items:baseline; justify-content:center; gap:0.5rem; width:100%; }
.result_points_main .result_big { margin:0; font-size:3.4rem; }
.result_points_unit { font-size:1.1rem; font-weight:600; color:var(--me-dark, #102a43); letter-spacing:0.3px; }
.result_timer_line { display:flex; align-items:center; justify-content:center; gap:0.35rem; font-size:1.05rem; color:var(--me-dark, #102a43); width:100%; }
.result_timer_line .material-symbols-outlined { font-size:1.05rem; }
.stat_tile { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0.4rem; padding:0 0.25rem; text-align:center; }
.stat_tile .stat_value { line-height:1.1; font-size:1.3rem; }
.stat_tile_label { display:block; font-size:0.8rem; letter-spacing:0.25px; color:var(--me-muted-strong); }
@media (min-width:768px){
	.stat_tile .stat_value { font-size:1.45rem; }
}

/* Small stat icons (result page team stats) */
.stat_icon_sm { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.08); font-size:1.05rem; }
.stat_icon_sm .material-symbols-outlined { line-height:1; }
.header_nav .auth_tab.logout_icon .material-symbols-outlined { font-size:1.85rem; line-height:1; }


/* Final score trophy icon */
.result_score_wrap .result_score_icon { font-size:2.6rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
@media (max-width:575.98px){
	.result_score_wrap .result_score_icon { font-size:2.1rem; }
}

/* Register page button (standalone inside grid) */
#registerBtn.f_btn { 
	background: var(--me-green) !important;
	border: 2px solid var(--me-green) !important;
	color:#ffffff !important; 
	padding:12px 24px; 
	font-weight:700; 
	letter-spacing:.5px; 
	min-width:180px; 
	transition: background .2s, transform .2s, box-shadow .25s; 
}
#registerBtn.f_btn:not(:disabled):hover { background: var(--me-dark) !important; border-color: var(--me-dark) !important; transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.18); }
#registerBtn.f_btn:not(:disabled):active { transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,0.18); }
#registerBtn.f_btn:focus { outline:3px solid var(--me-yellow); outline-offset:2px; }
#registerBtn.f_btn:disabled { background:#dde5ef !important; border-color:#c8d4e2 !important; color:#ffffff !important; opacity:1 !important; cursor:not-allowed; box-shadow:none !important; }
/* Center and enlarge final score value */
.result_score_wrap { flex-direction:row !important; gap:.75rem !important; }
.result_score_wrap .result_score_icon { margin-bottom:0 !important; }
.result_big { font-size:3.25rem; font-weight:800; line-height:1; color:var(--me-dark); letter-spacing:.5px; }
@media (max-width:575.98px){
	.result_big { font-size:2.55rem; }
}



/* ==========================================================
	Modal readability overrides (white modals on dark page bg)
	========================================================== */
.modal-content { color: var(--me-text) !important; background:#ffffff !important; }
.modal-content .modal-title { color: var(--me-dark) !important; }
.modal-content p, .modal-content li, .modal-content div, .modal-content span { color: var(--me-text) !important; }
/* Specific feedback modal paragraphs */
#answerFeedbackModal.explain-only #feedbackExplain p { color: var(--me-text) !important; }
#quizStartModal .modal-message p { color: var(--me-text) !important; }

/* Pill styling for modal action buttons (consistent with global buttons) */
.modal-content .btn {
	border-radius:999px !important;
	padding:10px 22px !important;
	font-weight:600;
	letter-spacing:.3px;
}
.modal-content .btn.btn-outline-secondary {
	border-width:2px;
	background:#fff;
	color:var(--me-dark);
}
.modal-content .btn.btn-outline-secondary:hover,
.modal-content .btn.btn-outline-secondary:focus {
	background:var(--me-night);
	color:#fff;
	border-color:var(--me-night);
}

/* ==========================================================
	Dashboard consolidated styles (moved from inline)
	========================================================== */
.dash_card{background:#fff !important;border:1px solid rgba(0,0,0,0.06);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,0.08);}
.dash_card .card_body{padding:22px;}
.stat_card{border-radius:14px;padding:16px 18px;background:#fff !important;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(0,0,0,0.06);position:relative;cursor:default;}
.stat_label{color:var(--me-muted-strong);font-size:.9rem;}
.stat_value{font-size:1.6rem;font-weight:700;color:#0f1d2b;}
.stat_value_row{margin-top:.35rem;}
.stat_icon{display:inline-flex;align-items:center;justify-content:center;}
@media (max-width:576px){.stat_value{font-size:1.3rem;}}
.table thead th{color:#0f1d2b;font-weight:600;border-bottom:1px solid #e9eef7;}
.table tbody tr{border-top:1px solid #eef3fb;}
.table-responsive{overflow-x:auto;}
.badge{border-radius:999px;}
.dash-header h1.h3{color:#ffffff;}
.dash-header .text-muted{color:rgba(255,255,255,0.8) !important;}
h3.h5{color:#0f1d2b;}
.quiz_item{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,0.08);padding:18px 20px;}
.quiz_item + .quiz_item{margin-top:12px;}
.quiz_title{font-weight:700;font-size:1.15rem;margin:0;color:#0f1d2b;}
.quiz_desc{color:var(--me-muted-medium);margin-top:2px;margin-bottom:6px;}
.quiz_meta{color:var(--me-muted-medium);font-size:.9rem;}
.quiz_actions .me_btn{min-height:60px;padding:16px 26px;font-size:1.05rem;}
.quiz_actions .btn{min-height:60px;padding:16px 26px;font-size:1.05rem;font-weight:700;border-radius:999px;}
.quiz_actions .btn.disabled,.quiz_actions .btn:disabled{opacity:.7;pointer-events:none;}
.quiz_actions .me_btn,.quiz_actions .btn{width:200px;display:inline-flex;align-items:center;justify-content:center;text-align:center;}
@media (max-width:576px){.quiz_actions .me_btn,.quiz_actions .btn{width:100%;}}
.me_btn.start{background:linear-gradient(90deg,#2ecc71,#27ae60) !important;color:#fff !important;}
.me_btn.start:hover{filter:brightness(1.05);}
.quiz_square{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,0.06);overflow:hidden;height:100%;min-height:340px;}
.quiz_square .quiz_img{width:100%;aspect-ratio:16/10;overflow:hidden;}
.quiz_square .quiz_img img{width:100%;height:100%;object-fit:cover;display:block;}
.quiz_square .quiz_body{display:flex;flex-direction:column;padding:14px 16px 18px;flex:1;}
.quiz_square_title{font-size:1.05rem;font-weight:700;margin:0 0 4px;color:#0f1d2b;}
.quiz_square_desc{font-size:.85rem;color:var(--me-muted-medium);margin:0 0 8px;}
.quiz_square.info_tile{
	/* Use a slightly darker neutral grey (not blue) for the info tile background */
	background: #d9dee2; /* a little bit darker neutral grey for improved contrast */
	border-color: rgba(15,29,43,0.06);
}
.quiz_square.info_tile .badge{background:#fff !important;color:#0f1d2b !important;border-color:rgba(15,29,43,0.08) !important;}
/* Ensure descriptive text on the info tile is darker for accessibility */
.quiz_square.info_tile .quiz_square_desc{ color: var(--me-text); }
.quiz_go{width:44px;height:44px;border-radius:50%;background:var(--me-green);color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;transition:transform .2s ease, filter .2s ease;}
.quiz_go .material-symbols-outlined{font-size:1.4rem;line-height:1;}
.quiz_go:hover{transform:translateY(-1px);}
.quiz_go:hover{filter:brightness(1.1);color:#fff;}
.quiz_go.repeat{background:#ff9800;}
.quiz_go.repeat:hover{filter:brightness(1.05);}
.quiz_go.external{background:#0f1d2b;color:#fff;}
.quiz_square.info_tile .quiz_go.external:hover{filter:brightness(1.05);}
.quiz_square.locked{filter:grayscale(1);opacity:.65;}
.quiz_square.locked .quiz_go{background:#6c757d;pointer-events:none;cursor:not-allowed;opacity:.6;}
.quiz_square.locked .badge{background:#e0e0e0 !important;color:#555 !important;}
#quizStartModal .modal-header{border-bottom:none;}
#quizStartModal .modal-footer{border-top:none;}
#quizStartModal .lead{font-size:1rem;font-weight:600;}
.quiz-icon{width:44px;height:44px;border-radius:50%;background:var(--me-green);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff !important;margin-right:0;flex-shrink:0;transition:background .25s ease, transform .25s ease;}
.quiz-icon.repeat{background:#ff9800;}
.quiz-icon .material-symbols-outlined{color:#fff !important;font-size:1.4rem;line-height:1;}
#quizStartModal .quiz-icon{margin-right:12px;}

.quiz_post_actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;}
.quiz_post_actions .btn .material-symbols-outlined{font-size:1.2rem;margin-right:0 !important;}
.quiz_availability_label{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:40px;padding:.45rem 1.35rem;font-weight:600;border-width:2px;border-color:rgba(0,0,0,0.12) !important;color:var(--me-dark) !important;background:#fff !important;pointer-events:none;white-space:nowrap;}
.quiz_availability_label.disabled{opacity:1;cursor:default;}
.me_stat_tooltip{position:absolute;left:50%;top:0;transform:translate(-50%,-120%) scale(.9);background:#0f1d2b;color:#fff;padding:8px 12px;font-size:.95rem;font-weight:500;border-radius:8px;line-height:1.25;width:210px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60;}
.me_stat_tooltip::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#0f1d2b;}
.stat_card:hover .me_stat_tooltip,.stat_card:focus .me_stat_tooltip,.stat_card:focus-within .me_stat_tooltip{opacity:1;transform:translate(-50%,-130%) scale(1);}
@media (max-width:576px){.me_stat_tooltip{width:150px;}}
@media (prefers-reduced-motion:reduce){.me_stat_tooltip{transition:none;}}

/* Consolidated inline styles */
.min-height-80vh { min-height: 80vh; }
.max-width-760px { max-width: 760px; }
.max-width-360px { max-width: 360px; }
.text-decoration-none { text-decoration: none; }
#copyMsg { display: none; }
#copyMsg.show { display: block; }

/* Rankings page enhancements */
.rankings_page #rankingsCard {
	border-radius: 18px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.rankings_page .card_body {
	padding: 28px;
}

.rankings_page .rankings-tablist {
	border-bottom: 2px solid #eef3fb;
	padding-bottom: 18px;
	margin-bottom: 18px;
}

.rankings_page .table-responsive {
	overflow: hidden;
}

.rankings_page .rankings-table {
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.rankings_page .rankings-table thead th {
	white-space: normal;
	line-height: 1.3;
}

.rankings-header-label {
	display: inline;
	word-break: break-word;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.rankings_page .rankings-sort-indicator {
	display: inline-block;
	margin-left: 0.35rem;
	margin-top: 0;
	font-size: 0.7rem;
	opacity: 0.7;
	vertical-align: middle;
}
.rankings_page .rankings-description {
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	margin-bottom: 1.5rem;
}

.rankings_page .rankings-description b {
	font-weight: 700;
	color: #003064;
}

.rankings_page .rankings-controls {
	background: #f8fbff;
	padding: 8px 18px 12px 18px;
	border-radius: 12px 12px 0 0;
	margin: 0 -28px 0 -28px;
	padding-left: calc(18px + 28px);
	padding-right: calc(18px + 28px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 24px;
	row-gap: 12px;
}

.rankings_page .rankings-controls-search {
	flex: 1;
	min-width: 0;
}

.rankings_page .rankings-controls-search .input-group {
	display: flex;
}

.rankings_page .rankings-controls-search .form-control {
	min-width: 0;
	flex: 1;
}

.rankings_page .rankings-controls-length {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	margin-left: 0;
	flex-shrink: 0;
	justify-self: end;
}

.rankings_page .rankings-controls .form-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: #0f1d2b;
	margin-bottom: 0;
	white-space: nowrap;
	font-size: 0.95rem;
}

.rankings_page .rankings-controls .form-control,
.rankings_page .rankings-controls .form-select {
	border: 1px solid #c5d3e2;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 0.9rem;
}

.rankings_page .rankings-controls .form-control {
	min-width: 0;
}

.rankings_page .rankings-controls .form-select {
	min-width: 80px;
	width: auto !important;
	flex: 0 0 auto;
}

.rankings_page .rankings-controls .form-control:focus,
.rankings_page .rankings-controls .form-select:focus {
	border-color: var(--me-green);
	box-shadow: 0 0 0 3px rgba(10, 76, 154, 0.1);
}

.rankings_page .table-responsive {
	background: #f8fbff;
	padding: 0 18px 18px 18px;
	margin: 0 -28px 0 -28px;
	padding-left: calc(18px + 28px);
	padding-right: calc(18px + 28px);
	border-radius: 0 0 12px 12px;
}

.rankings_page .rankings-footer {
	padding-top: 18px;
	border-top: 1px solid #eef3fb;
	margin-top: 18px;
	color: #6b7280;
}

.rankings_page .rankings-status {
	padding: 12px 0;
	color: #6b7280;
}

@media (max-width: 768px) {
	.rankings_page .card_body {
		padding: 20px 16px;
	}

	.rankings_page .rankings-controls {
		margin: 0 -16px 0 -16px;
		padding: 8px 16px 12px 16px;
		border-radius: 12px 12px 0 0;
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	.rankings_page .rankings-controls-length {
		justify-self: start;
	}

	.rankings_page .table-responsive {
		margin: 0 -16px 0 -16px;
		padding: 0 16px 16px 16px;
		border-radius: 0 0 12px 12px;
	}

	.rankings_page .rankings-tablist {
		gap: 8px;
	}

	.rankings_page .rankings-tablist .rankings-tab {
		padding: 8px 14px;
		font-size: 0.9rem;
	}

	.rankings_page .rankings-table thead th {
		padding: 10px 8px;
		font-size: 0.7rem;
	}

	.rankings_page .rankings-table tbody td {
		padding: 10px 8px;
		font-size: 0.85rem;
	}
}