/*
//============================================================+
// File name   : modern.css
// Description : "Modern" light theme for TCExam public area (participants).
//               Loads official.css (layout fixes) and replaces the look:
//               white cards, soft shadows, indigo accent, system fonts.
//               The whole palette is set once in :root below.
//============================================================+
*/
@import url("official.css");

:root {
	--m-primary: #4f46e5;
	--m-primary-dark: #4338ca;
	--m-primary-soft: #eef0ff;
	--m-accent: #0d9488;
	--m-bg: #f4f6fb;
	--m-card: #ffffff;
	--m-ink: #1e293b;
	--m-muted: #64748b;
	--m-line: #e5e9f2;
	--m-card: #ffffff;
	--m-soft: #f8f9fd;
	--m-line2: #eef1f7;
	--m-input-line: #d5dbe8;
	--m-card-a: rgba(255, 255, 255, .96);
	--m-ok: #16a34a;
	--m-bad: #dc2626;
	--m-radius: 14px;
	--m-shadow: 0 1px 2px rgba(30, 41, 59, .05), 0 8px 24px rgba(30, 41, 59, .07);
	/* re-point the variables of official.css to the new palette */
	--of-navy: var(--m-primary);
	--of-navy-dark: var(--m-primary-dark);
	--of-navy-light: var(--m-primary-soft);
	--of-gold: var(--m-accent);
	--of-bg: var(--m-bg);
	--of-border: var(--m-line);
	--of-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
:root:not([data-theme=dark]), [data-theme=light], :root {
	--text-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--primary: #4f46e5;
	--primary-border: #4f46e5;
	--primary-hover: #4338ca;
	--primary-hover-border: #4338ca;
	--primary-focus: rgba(79, 70, 229, .18);
	--text: #1e293b;
	--muted-background: var(--m-bg);
	--muted-border: #e5e9f2;
	--card-sections: #f8f9fd;
	--input-border: var(--m-input-line);
	--valid: #16a34a;
	--invalid: #dc2626;
	--block-round: 14px;
	--card-shadow: 0 1px 2px rgba(30, 41, 59, .05), 0 8px 24px rgba(30, 41, 59, .07);
}
@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) { --h1: #1e293b; --muted-border: #e5e9f2; --input-border: var(--m-input-line); --muted-background: var(--m-bg); }
}

/* ---------- page ---------- */
body {
	background: var(--m-bg) !important;
	color: var(--m-ink);
	font-family: var(--text-font);
	min-height: 100vh;
}
a { color: var(--m-primary); }
a:hover { color: var(--m-primary-dark); }

/* ---------- header: white bar, logo left, clock and menu right ---------- */
div.header {
	background: var(--m-card);
	border-bottom: 1px solid var(--m-line);
	box-shadow: 0 2px 12px rgba(30, 41, 59, .06);
	min-height: 3.6rem;
}
div.header:before { border-radius: 6px; }
#timerform, #timer, .timerlabel, div.header input { color: var(--m-ink) !important; font-weight: 600; background: transparent; }
#header_button { background: var(--m-primary-soft); color: var(--m-primary); border-radius: 10px; }
#header_button:hover { background: #e0e4ff; }
div.header_user {
	color: var(--m-ink) !important;
	background: var(--m-primary-soft);
	border-radius: 999px;
	padding: 3px 12px 3px 10px;
	line-height: 24px !important;
	margin: 0 10px !important;
}
div.header_user svg { stroke: var(--m-primary) !important; }
div.header_user span { color: var(--m-muted); }

/* ---------- headings ---------- */
h1 {
	font-family: var(--text-font);
	color: var(--m-ink) !important;
	font-weight: 800;
	font-size: 1.7rem;
	letter-spacing: -.01em;
	text-align: left;
	margin-top: 1.6rem;
}
h1:after { display: none; }
h1, h1.h1title, .h1title { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 0 !important; }
h2, h3 { font-family: var(--text-font); color: var(--m-ink); font-weight: 700; }

/* ---------- cards ---------- */
.tceformbox form, .gsoformbox form, #testform, .anyFormBox,
body > .popupcontainer > .tcecontentbox, body > .popupcontainer > .tceformbox,
.tcecontentbox, .tceformbox {
	background: var(--m-card);
	border: 1px solid var(--m-line) !important;
	border-radius: var(--m-radius) !important;
	box-shadow: var(--m-shadow);
}
.tceformbox form, .gsoformbox form, #testform, .anyFormBox { border-top: 1px solid var(--m-line) !important; }

/* ---------- inputs & buttons ---------- */
input:not([type=checkbox]):not([type=radio]), select, textarea {
	border-radius: 10px;
	border: 1px solid var(--m-input-line);
	background: var(--m-card);
	color: var(--m-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--m-primary) !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, .15) !important; }
input[type=submit], input[type=button], button, a[role=button] {
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: 0 1px 2px rgba(79, 70, 229, .25);
	transition: background .15s, transform .1s, box-shadow .15s;
}
input[type=submit]:hover, input[type=button]:hover, button:hover { box-shadow: 0 4px 12px rgba(79, 70, 229, .3); }
input[type=submit]:active, input[type=button]:active { transform: translateY(1px); }
a.buttonblue, .buttonblue { border-radius: 10px; background: var(--m-primary); border-color: var(--m-primary); }
a.buttongreen, .buttongreen, .linkbutton, input#confirmanswer { background: var(--m-ok) !important; border-color: var(--m-ok) !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(22, 163, 74, .3); }
input#terminatetest, input#forceterminate { background: var(--m-bad); border-color: var(--m-bad); }
.langselectoraaaa img, .langselectoraaaa .langselectoraaa img { border-radius: 4px !important; box-shadow: 0 0 0 1px var(--m-line) !important; }

/* ---------- tables ---------- */
.testlist, table { border-radius: 12px; overflow: hidden; }
th {
	background: var(--m-soft); color: var(--m-muted); font-weight: 700; font-size: .78rem;
	text-transform: uppercase; letter-spacing: .05em;
	border-bottom: 1px solid var(--m-line) !important;
}
td { border-bottom: 1px solid var(--m-line2) !important; }
td strong, td b { color: var(--m-ink); }
tr:hover td { background: var(--m-soft); }

/* ---------- test page ---------- */
div#qTopBar {
	background: linear-gradient(120deg, var(--m-primary), #6366f1) !important;
	border: 0 !important;
	border-radius: var(--m-radius) !important;
	box-shadow: 0 6px 18px rgba(79, 70, 229, .25);
}
ol.qlist > li { border-color: var(--m-line); border-radius: 10px; }
ol.answer > li { border-radius: 10px; }
ol.answer > li:hover { background: #f5f6ff; }
acronym.onbox { background: var(--m-primary); border-color: var(--m-primary); }
.qnav { border-radius: var(--m-radius); border-color: var(--m-line); box-shadow: var(--m-shadow); }
.qnav-head { color: var(--m-ink); }
.qnav-head b { color: var(--m-primary); }
.qnav .qnav-next { border: 1px solid var(--m-primary) !important; color: var(--m-primary) !important; border-radius: 10px !important; box-shadow: none; }
.qnav .qnav-next:hover { background: var(--m-primary) !important; color: #fff !important; }
.qnav .qn { border-radius: 10px !important; }
.qnav .qn.empty { border-color: var(--m-input-line) !important; color: var(--m-ink) !important; }
.qnav .qn.answered { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #86efac !important; }
.qnav .qn.current { background: var(--m-primary) !important; border: 2px solid #a5b4fc !important; box-shadow: 0 4px 10px rgba(79, 70, 229, .35) !important; }
.qnav .qn.unsure { background: #fef3c7 !important; border-color: #f59e0b !important; color: #78350f !important; }
.qnav .qn.current.unsure { background: var(--m-primary) !important; color: #fff !important; }
.qnav-legend .lg.answered { background: #dcfce7; border-color: #86efac; }
.qnav-legend .lg.current { background: var(--m-primary); border: 2px solid #a5b4fc; }
.qnav-legend .lg.unsure { background: #fef3c7; border-color: #f59e0b; }
.qnav-side .qnav { box-shadow: var(--m-shadow); }
body.testpage #testform .navlink { background: var(--m-card-a); backdrop-filter: blur(6px); box-shadow: 0 -10px 16px -10px rgba(30, 41, 59, .25); }
body.testpage #testform .navlink input { border-radius: 10px; margin: 0 4px !important; }
body.testpage #qTopBar .qtitle { color: #fff; }

/* ---------- side menu, help, messages ---------- */
div#scrollayer { border-left: 0; }
ul.menu li a { color: var(--m-ink); font-weight: 600; }
ul.menu li > ul { border-left-color: var(--m-primary); }
.pagehelp {
	background: var(--m-card); color: var(--m-muted);
	border: 1px solid var(--m-line); border-left: 4px solid var(--m-primary);
	border-radius: 12px; box-shadow: var(--m-shadow);
}
.warning { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; border-left: 5px solid #f59e0b; border-radius: 12px; }
.error { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; border-left: 5px solid var(--m-bad); border-radius: 12px; }

/* ---------- footer ---------- */
.userbar { background: var(--m-card); color: var(--m-muted); border-top: 1px solid var(--m-line); }
.userbar a { background: var(--m-primary-soft); color: var(--m-primary); border: 0; border-radius: 8px; }
.userbar + .minibutton, .minibutton + .minibutton { background: transparent; color: var(--m-muted); }
span.copyright a { color: var(--m-primary); }

/* ---------- phones ---------- */
@media (max-width: 575px) {
	h1 { font-size: 1.35rem; }
	div.header_user { max-width: 38vw !important; }
}

/* ---------- page width: content in a centered column ---------- */
body > .popupcontainer, body > .container, .body > .popupcontainer { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
body > .popupcontainer > .tceformbox > div.row > .formw, body > .popupcontainer > .tceformbox > div.row > .value,
.anyFormBox > div.row > .formw, .anyFormBox > div.row > .value { background: var(--m-bg); border-radius: 10px; }
@media (max-width: 575px) {
	body > .popupcontainer, body > .container { padding-left: 10px; padding-right: 10px; }
	div.header_user { max-width: 30vw !important; font-size: 13px; padding: 2px 8px 2px 6px; margin: 0 6px !important; }
	div.header_user span { display: none; }
	#timer { width: 7.4rem; font-size: 12px; }
}
h1.h1title { font-size: .95rem; font-weight: 600; color: var(--m-muted) !important; text-transform: uppercase; letter-spacing: .06em; margin: 1.2rem 0 .2rem 0; padding: 0 16px !important; max-width: 1180px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
@media (max-width: 575px) {
	div.header:before { width: 96px; height: 20px; margin-left: .5rem; }
	div.header_user { max-width: 26vw !important; }
	h1.h1title { padding: 0 10px !important; }
}
input#confirmanswer, input#terminatetest, input#forceterminate { color: #ffffff !important; }
input#terminatetest, input#forceterminate { background: var(--m-bad) !important; border-color: var(--m-bad) !important; }

/* login: only the inner form is the card */
.anyFormBox:has(#form_login), .tceformbox:has(#form_login) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#form_login { max-width: 460px; margin: 0 auto; }
#login, input#login { background: var(--m-primary) !important; border-color: var(--m-primary) !important; color: #ffffff !important; }
#login:hover { background: var(--m-primary-dark) !important; }
#form_login { box-shadow: var(--m-shadow) !important; }

/* ================= SVG look ================= */
html { background: var(--m-bg) !important; }
body { background: transparent !important; }
svg.bgdeco { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* icons */
svg.ic { flex: 0 0 auto; vertical-align: -4px; }
ul.menu li a svg.ic, ul.menu li span svg.ic { margin-right: 8px; color: var(--m-primary); }
ul.menu li a, ul.menu li span.active { display: flex; align-items: center; }

/* login: round gradient badge with a flask, icons inside the fields */
.login_badge {
	width: 64px; height: 64px; margin: -44px auto 14px auto; border-radius: 20px;
	display: flex; align-items: center; justify-content: center; color: #fff;
	background: linear-gradient(135deg, #6366f1, #4f46e5 55%, #0d9488);
	box-shadow: 0 10px 24px rgba(79, 70, 229, .35);
}
#form_login { padding-top: 30px !important; margin-top: 40px !important; overflow: visible; }
.asa, .bbb {
	background: none !important; width: 46px !important; height: 46px !important; top: 0 !important; left: 0 !important;
	display: flex; align-items: center; justify-content: center; color: var(--m-primary);
}
input#xuser_name, input#xuser_password { padding-left: 46px !important; }
.langselectoraaaa { margin-bottom: .9rem !important; }
.asa svg, .bbb svg { transform: translateY(-6px); }
a.buttongreen, a.xmlbutton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
a.buttongreen svg.ic, a.xmlbutton svg.ic { margin: 0; vertical-align: 0; }
a.buttongreen { padding: 7px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }

/* ---------- rings in the question navigator ---------- */
.qrings { display: flex; justify-content: space-around; gap: 8px; margin: 2px 0 12px 0; }
.qring { position: relative; width: 74px; text-align: center; color: var(--m-primary); }
.qring svg { display: block; }
.qring .rfg { transition: stroke-dashoffset .6s ease; }
.qring .rtxt { position: absolute; left: 0; top: 0; width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.qring .rcap { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--m-muted); text-transform: uppercase; letter-spacing: .04em; }
#qring_t { color: #0d9488; }
#qring_t.warn { color: #f59e0b; }
#qring_t.bad { color: #dc2626; }
#qring_p .rfg { color: var(--m-primary); }
.qnav-head .qnav-title { display: none; }

/* ---------- test list as cards ---------- */
table.testlist, table.testlist tbody { display: block; width: 100%; background: transparent !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; border-radius: 0; }
table.testlist tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; padding: 6px 0 20px 0; }
table.testlist tr:first-child { display: none; }
table.testlist tr {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 18px 22px; background: var(--m-card); overflow: hidden;
	border: 1px solid var(--m-line); border-radius: 18px; box-shadow: var(--m-shadow); transition: transform .15s, box-shadow .15s;
}
table.testlist tr:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(30, 41, 59, .14); }
table.testlist tr:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #6366f1, #0d9488); }
table.testlist tr:hover td { background: transparent !important; }
table.testlist td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; color: var(--m-muted); font-size: .9rem; }
table.testlist td:nth-child(1) { font-size: 1.15rem; margin-bottom: 8px; }
table.testlist td:nth-child(1) strong { font-weight: 800; }
table.testlist td:nth-child(1) a { color: var(--m-ink); }
table.testlist td:nth-child(2), table.testlist td:nth-child(3) { display: flex; align-items: center; gap: 8px; }
table.testlist td:nth-child(2) svg, table.testlist td:nth-child(3) svg { color: var(--m-primary); }
table.testlist td:nth-child(4) { min-height: 0; }
table.testlist td:nth-child(4) a { font-weight: 800; font-size: 1.1rem; color: var(--m-accent); }
table.testlist td:last-child { margin-top: 14px; }
table.testlist td:last-child a { display: flex !important; width: 100%; padding: 11px 16px; justify-content: center; border-radius: 12px; }
table.testlist td:last-child a.buttongreen { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; border: 0 !important; box-shadow: 0 8px 18px rgba(79, 70, 229, .3); }
.anyFormBox:has(.testlist), .tcecontentbox:has(.testlist), .tceformbox:has(.testlist) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }


/* ---------- modern logo (SVG) ---------- */
div.header:before { background: url(../../images/logo_modern.svg) left center / contain no-repeat !important; width: 176px !important; height: 36px !important; border-radius: 0 !important; margin-left: 1.1rem; }
@media (max-width: 575px) { div.header:before { width: 132px !important; height: 28px !important; margin-left: .6rem; } }

/* ================= test page: "periodic table" look ================= */
@font-face { font-family: "TdluSerif"; src: url(../fonts/Lora-Variable.ttf) format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
body.testpage {
	--t-ink: #0e2a2f; --t-mut: #58727a; --t-line: #d3dee1; --t-paper: #f2f6f7; --t-azure: #1b7fe0; --t-azure-bg: #eaf3fd; --t-leaf: #27a05a; --t-leaf-bg: #e3f5ea; --t-amber: #f0a200; --t-amber-bg: #fff6dc; --t-crim: #d6283f;
	--t-mono: "DejaVu Sans Mono", ui-monospace, "SF Mono", Consolas, Menlo, monospace;
	--t-serif: "TdluSerif", Georgia, "Times New Roman", serif;
}
html:has(body.testpage) { background: #f2f6f7 !important; }
body.testpage svg.bgdeco { display: none; }
body.testpage div.header { background: #ffffff; box-shadow: none; border-bottom: 1px solid #d3dee1; }
body.testpage #timer { font: 700 28px/1 var(--t-mono) !important; letter-spacing: -.03em; width: 9rem !important; color: var(--t-ink) !important; }

/* time bar: the colour scale of a universal indicator; it is covered from the right while time runs out */
.qprogress { position: fixed; left: 0; top: 0; right: 0; height: 6px; z-index: 60; background: linear-gradient(90deg, #d6283f, #f0a200 25%, #e6d800 45%, #27a05a 65%, #1b7fe0 85%, #6b45b8); }
.qprogress i { display: block; height: 100%; width: 0; margin-left: auto; background: #f2f6f7; transition: width 1s linear; }

/* question number: a tile like a cell of the periodic table */
body.testpage div#qTopBar { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 0 12px 0 !important; align-items: flex-end; }
body.testpage #qTopBar #qNum { width: 64px; height: 72px; display: grid !important; place-items: center; padding: 0 !important; background: var(--t-azure-bg) !important; color: var(--t-ink) !important; border: 2px solid var(--t-azure) !important; border-radius: 4px !important; font: 700 30px var(--t-mono); }
body.testpage #qTopBar #fontResizer { display: inline-flex; gap: 6px; }
body.testpage #qTopBar #fontResizer span { background: #fff !important; color: var(--t-ink) !important; border: 2px solid var(--t-line) !important; border-radius: 4px !important; padding: 5px 11px !important; }
body.testpage #qTopBar #fontResizer span:hover { border-color: var(--t-azure) !important; }
body.testpage #qTopBar #unsure { color: var(--t-amber) !important; }

/* question card */
body.testpage #testform { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.testpage #testform .tcecontentbox { padding: 30px 38px 26px !important; background: #fff !important; border: 1px solid var(--t-line) !important; border-radius: 6px !important; box-shadow: 0 1px 0 var(--t-line) !important; font: 600 26px/1.4 var(--t-serif); color: var(--t-ink); }
body.testpage #testform .tcecontentbox .row hr { border: 0 !important; margin: 18px 0 !important; height: 0; }

/* answers: lettered rows */
body.testpage ol.answer { list-style: none; padding: 0; margin: 0 !important; display: grid; gap: 10px; counter-reset: ans; }
body.testpage ol.answer > li { counter-increment: ans; position: relative; margin: 0 !important; padding: 0 !important; background: #fff; border: 1.5px solid var(--t-line); border-radius: 6px; transition: border-color .12s, background .12s; }
body.testpage ol.answer > li:hover { border-color: var(--t-azure); background: #fff !important; transform: none; }
body.testpage ol.answer > li input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; }
body.testpage ol.answer > li label { display: flex; align-items: center; gap: 16px; margin: 0; padding: 12px 18px; cursor: pointer; font: 500 20px/1.35 var(--t-serif); color: var(--t-ink); }
body.testpage ol.answer > li label:before { content: counter(ans, upper-latin); flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--t-ink); border-radius: 50%; font: 700 18px var(--t-mono); color: var(--t-ink); background: #fff; }
body.testpage ol.answer > li:has(input:checked) { border-color: var(--t-azure); background: var(--t-azure-bg); box-shadow: none; }
body.testpage ol.answer > li:has(input:checked) label { color: var(--t-ink); font-weight: 600; }
body.testpage ol.answer > li:has(input:checked) label:before { background: var(--t-azure); border-color: var(--t-azure); color: #fff; }
body.testpage ol.answer > li.noanswer { border-style: dashed; background: transparent; }
body.testpage ol.answer > li.noanswer label { color: var(--t-mut); font-size: 17px; padding: 8px 18px; }
body.testpage ol.answer > li.noanswer label:before { content: "\2014"; flex-basis: 32px; width: 32px; height: 32px; border-style: dashed; color: var(--t-mut); font-size: 14px; }
body.testpage ol.answer > li.noanswer:has(input:checked) { background: #f6f8f9; border-color: var(--t-mut); }
body.testpage ol.answer > li.noanswer:has(input:checked) label:before { background: var(--t-mut); border-color: var(--t-mut); }
body.testpage ol.answer.imganswers > li label { padding: 10px 14px; }
body.testpage ol.answer img.tcecode { border-radius: 4px; }

/* action bar */
body.testpage #testform .navlink { background: #f2f6f7 !important; border: 0 !important; border-top: 1px solid var(--t-line) !important; border-radius: 0 !important; backdrop-filter: none; padding: 12px 0 !important; margin: 18px 0 0 0 !important; box-shadow: none !important; gap: 10px !important; }
body.testpage #testform .navlink input { border-radius: 4px !important; font: 700 16px var(--text-font) !important; margin: 0 !important; box-shadow: none !important; }
body.testpage #prevquestion, body.testpage #nextquestion { background: #fff !important; color: var(--t-ink) !important; border: 2px solid var(--t-ink) !important; }
body.testpage #prevquestion:hover:not([disabled]), body.testpage #nextquestion:hover { background: var(--t-azure-bg) !important; }
body.testpage #prevquestion[disabled] { opacity: .4; }
body.testpage #confirmanswer { flex: 1.5 1 0 !important; background: var(--t-ink) !important; color: #fff !important; border: 2px solid var(--t-ink) !important; }
body.testpage #terminatetest { font-size: 15px !important; width: 100% !important; display: block; margin: 16px 0 0 0 !important; padding: 9px 18px !important; background: #fff !important; color: var(--t-crim) !important; border: 2px solid var(--t-crim) !important; border-radius: 4px; box-shadow: none; }
body.testpage #terminatetest:hover { background: var(--t-crim) !important; color: #fff !important; }

/* navigator: tiles of the periodic table */
body.testpage .qrings { display: none; }
body.testpage .qnav { background: #fff !important; border: 1px solid var(--t-line) !important; border-radius: 6px !important; box-shadow: none !important; padding: 18px !important; color: var(--t-ink); }
body.testpage .qnav .qnav-title { display: inline !important; color: var(--t-mut); font-weight: 700; font-size: 14px; }
body.testpage .qnav .qnav-title b { color: var(--t-ink); }
body.testpage .qnav-head { margin-bottom: 12px; }
body.testpage .qnav .qnav-next { border: 2px solid var(--t-ink) !important; color: var(--t-ink) !important; border-radius: 4px !important; font-weight: 700; }
body.testpage .qnav .qnav-next:hover { background: var(--t-azure-bg) !important; color: var(--t-ink) !important; }
body.testpage .qnav-grid, body.testpage .qnav-side .qnav-grid, body.testpage .qnav.qnav-many .qnav-grid, body.testpage .qnav-side .qnav.qnav-many .qnav-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 7px !important; }
body.testpage .qnav.qnav-huge .qnav-grid, body.testpage .qnav-side .qnav.qnav-huge .qnav-grid { grid-template-columns: repeat(8, 1fr) !important; gap: 5px !important; }
body.testpage .qnav .qn { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1.1; border-radius: 4px !important; font: 700 19px var(--t-mono) !important; box-shadow: none !important; transition: transform .1s; }
body.testpage .qnav.qnav-many .qn { font-size: 15px !important; } body.testpage .qnav.qnav-huge .qn { font-size: 12px !important; }
body.testpage .qnav .qn.empty { background: #fff !important; color: var(--t-ink) !important; border: 2px solid var(--t-line) !important; }
body.testpage .qnav .qn.answered { background: var(--t-leaf-bg) !important; color: var(--t-ink) !important; border: 2px solid var(--t-leaf) !important; }
body.testpage .qnav .qn.unsure { background: var(--t-amber-bg) !important; color: var(--t-ink) !important; border: 2px solid var(--t-amber) !important; }
body.testpage .qnav .qn.unsure:after { display: none; }
body.testpage .qnav .qn.current { background: var(--t-azure) !important; color: #fff !important; border: 2px solid var(--t-azure) !important; transform: scale(1.08); box-shadow: 0 6px 16px rgba(27, 127, 224, .35) !important; }
body.testpage .qnav .qn:hover:not([disabled]) { border-color: var(--t-azure) !important; transform: translateY(-1px); }
body.testpage .qnav-legend { color: var(--t-mut); }
body.testpage .qnav-legend .lg.answered { background: var(--t-leaf-bg); border: 2px solid var(--t-leaf); } body.testpage .qnav-legend .lg.empty { background: #fff; border: 2px solid var(--t-line); }
body.testpage .qnav-legend .lg.current { background: var(--t-azure); border: 2px solid var(--t-azure); } body.testpage .qnav-legend .lg.unsure { background: var(--t-amber-bg); border: 2px solid var(--t-amber); }
@media (max-width: 600px) {
	body.testpage #testform .tcecontentbox { padding: 18px 16px !important; font-size: 21px; }
	body.testpage ol.answer > li label { font-size: 18px; padding: 10px 12px; gap: 12px; }
	body.testpage ol.answer > li label:before { flex-basis: 38px; width: 38px; height: 38px; font-size: 16px; }
	body.testpage #timer { font-size: 14px !important; width: 5.4rem !important; min-width: 0; letter-spacing: -.06em; }
	body.testpage #testform .navlink { flex-wrap: wrap; }
	body.testpage #testform .navlink input { font-size: 14px !important; padding: 12px 6px !important; white-space: nowrap; min-width: 0; }
	body.testpage #confirmanswer { flex: 1 1 100% !important; order: -1; }
	body.testpage #prevquestion, body.testpage #nextquestion { flex: 1 1 0 !important; }
	body.testpage #qTopBar #qNum { width: 52px; height: 58px; font-size: 24px; }
}
body.testpage #qTopBar #unsure { background-image: none !important; display: inline-flex; align-items: center; justify-content: center; color: #d97706 !important; min-width: 38px; }
body.testpage #qTopBar #unsure svg { display: block; }
body.testpage .pagehelp { display: none !important; }
body.testpage ol.answer > li.noanswer { display: none !important; }

/* login page: no empty space above the form */
div.container:has(> div.tceformbox > form#form_login) > br { display: none; }
h1:empty, h1.h1title:empty { display: none; }

/* ================= registration page ================= */
#form_usereditor { max-width: 720px; margin: 0 auto; padding: 28px 30px 30px; }
#form_usereditor .reglang { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 18px; }
#form_usereditor .reglang a { display: block; line-height: 0; border-radius: 5px; opacity: .55; transition: opacity .15s; background: none; }
#form_usereditor .reglang a:hover, #form_usereditor .reglang a.cur { opacity: 1; }
#form_usereditor .reglang a.cur img { box-shadow: 0 0 0 2px var(--m-primary); }
#form_usereditor .reglang img { border-radius: 4px; display: block; }
#form_usereditor div.row { margin: 0 0 12px; padding: 0; height: auto; min-height: 0; }
#form_usereditor div.row input:not([type=checkbox]), #form_usereditor div.row select { margin-bottom: 0; }
#form_usereditor span.formw.agree { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 2px; }
#form_usereditor span.formw.agree input[type=checkbox] { width: 20px !important; height: 20px !important; margin: 2px 0 0 0; flex: 0 0 20px; accent-color: var(--m-primary); position: static; opacity: 1; appearance: auto; -webkit-appearance: checkbox; }
#form_usereditor span.formw.agree input[type=checkbox]:before { display: none; }
#form_usereditor span.formw.agree label { margin: 0; line-height: 1.4; }
#form_usereditor #add { width: 100%; margin-top: 8px; padding: 13px 18px; font-size: 16px; font-weight: 700; color: #fff !important; background: var(--m-primary) !important; border: 0 !important; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 16px rgba(79, 70, 229, .3); }
#form_usereditor #add:hover { filter: brightness(1.08); }
@media (max-width: 600px) { #form_usereditor { padding: 20px 16px 22px; } }
.anyFormBox:has(#form_usereditor), .tceformbox:has(#form_usereditor) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
#form_usereditor { background: var(--m-card); border: 1px solid var(--m-line); border-radius: 16px; box-shadow: var(--m-shadow); }
.container:has(#form_usereditor) + .pagehelp, .pagehelp { margin-top: 18px; }
@media (max-width: 480px) { div.header div.right input#timer, div.header input#timer { font-size: 12px !important; width: 10.5rem !important; padding: 0 !important; margin-right: 10px !important; text-align: right; min-width: 0; } }

#form_usereditor textarea#name_of_institute { display: block; width: 100%; min-height: 4.2em; resize: vertical; margin: 0; padding: .75rem 1rem; line-height: 1.35; overflow: hidden; }
@media (max-width: 600px) { #form_usereditor input, #form_usereditor select, #form_usereditor textarea { font-size: 16px; } }

/* registration: success message */
.regdone { max-width: 560px; margin: 24px auto 0; padding: 36px 34px 34px; text-align: center; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 16px; box-shadow: var(--m-shadow); }
.regdone-ic { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 10px 24px rgba(13, 148, 136, .3); }
.regdone h2 { margin: 0 0 10px; font-size: 24px; color: var(--m-ink); }
.regdone p { margin: 0 0 24px; font-size: 17px; line-height: 1.55; color: var(--m-muted); }
.regdone-btn, .regdone-btn:visited { display: inline-block; padding: 12px 30px; border-radius: 12px; font-weight: 700; color: #fff !important; background: var(--m-primary); text-decoration: none; box-shadow: 0 6px 16px rgba(79, 70, 229, .3); }
.regdone-btn:hover { filter: brightness(1.08); text-decoration: none; }
@media (max-width: 600px) { .regdone { padding: 26px 18px 24px; } .regdone h2 { font-size: 21px; } .regdone p { font-size: 16px; } }
.anyFormBox:has(> .regdone), .container:has(> .regdone) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }