/* USSS Online KME test */
.ukt {
	--ukt-navy: #0B2545;
	--ukt-teal: #17A2C4;
	--ukt-teal-dark: #128aa8;
	--ukt-teal-soft: #e8f6fa;
	--ukt-text: #1d2b3a;
	--ukt-muted: #5b6b7f;
	--ukt-line: #dfe6ee;
	--ukt-bg: #f5f8fb;
	--ukt-error: #c0392b;
	--ukt-ok: #13795b;
	--ukt-radius: 12px;
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	color: var(--ukt-text);
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
}
.ukt *, .ukt *::before, .ukt *::after { box-sizing: border-box; }
.ukt [hidden] { display: none !important; }

/* Uvod */
.ukt-intro {
	background: var(--ukt-navy);
	color: #fff;
	border-radius: var(--ukt-radius);
	padding: 28px 28px 12px;
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}
.ukt-intro::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background: var(--ukt-teal);
}
.ukt-intro p { margin: 0 0 14px; color: rgba(255,255,255,.88); }
.ukt-intro strong { color: #fff; }

/* Koraci */
.ukt-steps {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	gap: 8px;
	counter-reset: none;
}
.ukt-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--ukt-bg);
	color: var(--ukt-muted);
	font-weight: 600;
	font-size: 14px;
	margin: 0;
	border: 1px solid transparent;
}
.ukt-step-num {
	flex: none;
	width: 28px; height: 28px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff;
	border: 2px solid var(--ukt-line);
	font-size: 13px;
}
.ukt-step.is-active { background: var(--ukt-teal-soft); color: var(--ukt-navy); border-color: var(--ukt-teal); }
.ukt-step.is-active .ukt-step-num { background: var(--ukt-teal); border-color: var(--ukt-teal); color: #fff; }
.ukt-step.is-done { color: var(--ukt-navy); }
.ukt-step.is-done .ukt-step-num { background: var(--ukt-navy); border-color: var(--ukt-navy); color: #fff; }

/* Paneli */
.ukt-panel {
	background: #fff;
	border: 1px solid var(--ukt-line);
	border-radius: var(--ukt-radius);
	padding: 28px;
	box-shadow: 0 6px 24px rgba(11,37,69,.06);
}
.ukt .ukt-title {
	margin: 0 0 6px;
	font-size: 24px;
	line-height: 1.3;
	color: var(--ukt-navy);
}
.ukt-lead { margin: 0 0 22px; color: var(--ukt-muted); }

/* Polja */
.ukt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ukt-field { display: flex; flex-direction: column; }
.ukt-field label { font-weight: 600; color: var(--ukt-navy); margin-bottom: 6px; font-size: 15px; }
.ukt .ukt-field input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--ukt-line);
	border-radius: 8px;
	font-size: 16px;
	background: #fff;
	color: var(--ukt-text);
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.ukt .ukt-field input:focus {
	outline: none;
	border-color: var(--ukt-teal);
	box-shadow: 0 0 0 3px rgba(23,162,196,.18);
}
.ukt .ukt-field.has-error input { border-color: var(--ukt-error); }
.ukt-err, .ukt-q-err { display: none; color: var(--ukt-error); font-size: 13px; margin-top: 5px; }
.has-error > .ukt-err, .ukt-err.is-visible, .ukt-q.has-error .ukt-q-err { display: block; }

.ukt-check {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 22px 0 0;
	font-size: 14px; color: var(--ukt-muted);
	cursor: pointer;
}
.ukt-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--ukt-teal); }

.ukt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Navigacija i dugmad */
.ukt-nav {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	margin-top: 28px; padding-top: 20px;
	border-top: 1px solid var(--ukt-line);
	flex-wrap: wrap;
}
.ukt .ukt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px;
	border-radius: 8px;
	font-size: 16px; font-weight: 600; line-height: 1.2;
	cursor: pointer;
	border: 2px solid transparent;
	text-transform: none;
	letter-spacing: 0;
	transition: background .15s, color .15s, border-color .15s;
}
.ukt .ukt-btn-primary { background: var(--ukt-teal); color: #fff; border-color: var(--ukt-teal); margin-left: auto; }
.ukt .ukt-btn-primary:hover, .ukt .ukt-btn-primary:focus { background: var(--ukt-teal-dark); border-color: var(--ukt-teal-dark); color: #fff; }
.ukt .ukt-btn-ghost { background: #fff; color: var(--ukt-navy); border-color: var(--ukt-line); }
.ukt .ukt-btn-ghost:hover, .ukt .ukt-btn-ghost:focus { border-color: var(--ukt-navy); background: #fff; color: var(--ukt-navy); }
.ukt .ukt-btn:disabled { opacity: .6; cursor: wait; }
.ukt-spinner {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
	animation: ukt-spin .7s linear infinite;
}
@keyframes ukt-spin { to { transform: rotate(360deg); } }

/* Materijal */
.ukt-material {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ukt-text);
}
.ukt-material .ukt-mat-title {
	font-size: 21px; line-height: 1.35; color: var(--ukt-navy);
	margin: 0 0 8px; text-transform: none;
}
.ukt-material .ukt-mat-authors { color: var(--ukt-muted); font-size: 14px; margin-bottom: 20px; }
.ukt-material h3 { font-size: 19px; color: var(--ukt-navy); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ukt-teal-soft); }
.ukt-material h4 { font-size: 17px; color: var(--ukt-navy); margin: 22px 0 8px; }
.ukt-material p { margin: 0 0 14px; }
.ukt-material ul, .ukt-material ol { margin: 0 0 16px; padding-left: 22px; }
.ukt-material li { margin-bottom: 6px; }
.ukt-material li p { margin: 0; }
.ukt-material h3:last-of-type ~ p { font-size: 13px; color: var(--ukt-muted); line-height: 1.5; margin-bottom: 6px; }

/* Test */
.ukt-progress {
	position: sticky; top: 0; z-index: 5;
	background: #fff;
	padding: 10px 0 12px;
	margin: 0 0 12px;
}
.admin-bar .ukt-progress { top: 32px; }
.ukt-progress-text { font-size: 14px; color: var(--ukt-muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
.ukt-progress-text strong { color: var(--ukt-navy); }
.ukt-progress-bar { height: 8px; border-radius: 99px; background: var(--ukt-bg); overflow: hidden; }
.ukt-progress-bar span { display: block; height: 100%; background: var(--ukt-teal); border-radius: 99px; transition: width .25s; }

.ukt .ukt-q {
	border: 1px solid var(--ukt-line);
	border-radius: 10px;
	padding: 18px 18px 12px;
	margin: 0 0 16px;
	min-width: 0;
	background: #fff;
}
.ukt .ukt-q.has-error { border-color: var(--ukt-error); background: #fff8f7; }
.ukt .ukt-q legend {
	font-weight: 600; color: var(--ukt-navy);
	padding: 0; margin: 0 0 12px;
	float: left; width: 100%;
	font-size: 16px; line-height: 1.5;
}
.ukt .ukt-q legend + * { clear: both; }
.ukt-q-num { color: var(--ukt-teal); margin-right: 2px; }
.ukt .ukt-opt {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 10px 12px;
	border: 1.5px solid var(--ukt-line);
	border-radius: 8px;
	margin: 0 0 8px;
	cursor: pointer;
	font-weight: 400;
	transition: border-color .12s, background .12s;
}
.ukt .ukt-opt:hover { border-color: var(--ukt-teal); }
.ukt .ukt-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ukt-opt-letter {
	flex: none;
	width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--ukt-line);
	font-size: 13px; font-weight: 700; color: var(--ukt-muted);
	text-transform: lowercase;
}
.ukt-opt-text { padding-top: 1px; }
.ukt .ukt-opt.is-checked { border-color: var(--ukt-teal); background: var(--ukt-teal-soft); }
.ukt .ukt-opt.is-checked .ukt-opt-letter { background: var(--ukt-teal); border-color: var(--ukt-teal); color: #fff; }
.ukt .ukt-opt:focus-within { box-shadow: 0 0 0 3px rgba(23,162,196,.25); }

.ukt-form-error {
	background: #fff4f2; color: var(--ukt-error);
	border: 1px solid #f3c7c0; border-radius: 8px;
	padding: 12px 14px; margin-top: 8px; font-size: 15px;
}

/* Kraj */
.ukt-done {
	background: #fff;
	border: 1px solid var(--ukt-line);
	border-top: 5px solid var(--ukt-teal);
	border-radius: var(--ukt-radius);
	padding: 40px 28px;
	text-align: center;
	box-shadow: 0 6px 24px rgba(11,37,69,.06);
}
.ukt-done-icon { color: var(--ukt-teal); margin-bottom: 12px; }
.ukt-done h2 { color: var(--ukt-navy); font-size: 26px; margin: 0 0 8px; }
.ukt-done p { margin: 0 0 12px; color: var(--ukt-text); }
.ukt-done .ukt-done-points { font-size: 22px; font-weight: 700; color: var(--ukt-teal); }

/* Mobilni */
@media (max-width: 640px) {
	.ukt { padding: 16px 0 32px; }
	.ukt-intro { padding: 20px 18px 6px 22px; }
	.ukt-panel { padding: 20px 16px; }
	.ukt .ukt-title { font-size: 21px; }
	.ukt-grid { grid-template-columns: 1fr; }
	.ukt-step { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; font-size: 12px; }
	.ukt-nav .ukt-btn { flex: 1 1 100%; }
	.ukt .ukt-btn-primary { margin-left: 0; order: -1; }
	.ukt .ukt-q { padding: 14px 12px 8px; }
	.ukt-done { padding: 32px 18px; }
}
@media (max-width: 782px) { .admin-bar .ukt-progress { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ukt-progress { top: 0; } }