/* Палета и распоређивање по узору на ISO (iso.euprava.gov.rs): плава заглавна трака, плава/зелена/жута дугмад. */
:root {
  --hdr: #2b6aa6;
  --blue: #0f5aa8;
  --green: #5ba04b;
  --yellow: #ffe28a;
  --yellow-fg: #7a5f00;
  --bg: var(--tg-theme-bg-color, #f4f6f9);
  --card: var(--tg-theme-secondary-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #1b1f27);
  --mut: var(--tg-theme-hint-color, #6f7785);
  --line: color-mix(in srgb, var(--fg) 15%, transparent);
  --ok: #1f9d57;
  --ok-bg: color-mix(in srgb, #1f9d57 16%, var(--card));
  --bad: #d93a30;
  --bad-bg: color-mix(in srgb, #d93a30 15%, var(--card));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom);
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.top { background: var(--hdr); color: #fff; padding: 12px 16px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.title { font-weight: 600; font-size: 17px; }
.stat { font-size: 12px; opacity: .85; text-align: right; }

main { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }

.tabs { display: flex; border-top: 1px solid var(--line); background: var(--bg); }
.tab { flex: 1; padding: 12px; color: var(--mut); font-weight: 600; border-top: 3px solid transparent; }
.tab.on { color: var(--blue); border-top-color: var(--blue); }

/* ред са бројем питања, ознаком и поенима */
.qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.badge { background: var(--hdr); color: #fff; font-weight: 600; font-size: 17px; padding: 6px 14px; border-radius: 8px; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--hdr); }
.mark { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 14px; }
.mark input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.points { color: var(--blue); font-size: 14px; margin: 12px 0 8px; padding-bottom: 10px; border-bottom: 1px dotted var(--line); }
.qtext { font-size: 17px; margin: 0 0 12px; }
.pic { display: block; max-width: 100%; max-height: 300px; margin: 0 0 14px; padding: 6px; border: 1px solid var(--line); background: #fff; object-fit: contain; }
.hint { color: var(--mut); font-size: 13px; margin: 0 0 8px; }

/* одговори: обично радио/чекбокс као у оригиналу */
.opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 4px; border-radius: 10px; border: 1.5px solid transparent; }
.opt .box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--mut); border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; line-height: 1; }
.multi .opt .box { border-radius: 5px; }
.opt.sel .box { background: var(--blue); border-color: var(--blue); }
.opt.sel { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.opt.off { opacity: .45; cursor: default; }
.opt.ok { border-color: var(--ok); background: var(--ok-bg); }
.opt.ok .box { background: var(--ok); border-color: var(--ok); }
.opt.bad { border-color: var(--bad); background: var(--bad-bg); }
.opt.bad .box { background: var(--bad); border-color: var(--bad); }
.ru { display: block; margin-top: 2px; color: var(--mut); font-size: 14px; font-style: italic; }
.qtext + .ru, .ru.q { margin: -6px 0 12px; }
.note { color: var(--mut); font-size: 12px; margin: 6px 2px 0; }

.result { margin: 12px 2px 0; font-weight: 700; }
.result.ok { color: var(--ok); }
.result.bad { color: var(--bad); }
.fails { color: var(--mut); font-size: 12px; margin: 8px 2px 0; }

/* дугмад као у ISO: плава Претходно/Следеће, зелена Прикажи одговор, жута (овде — превод) */
.bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.btn { padding: 12px 6px; border-radius: 6px; font-weight: 600; font-size: 14px; color: #fff; background: var(--blue); }
.btn.full { grid-column: 1 / -1; }
.btn.green { background: var(--green); }
.btn.yellow { background: var(--yellow); color: var(--yellow-fg); }
.btn:disabled { opacity: .4; cursor: default; }

/* листа питања са тежинама */
.list-head { color: var(--mut); font-size: 13px; margin: 0 2px 10px; }
.row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; background: var(--card); border-radius: 10px; border: 1px solid var(--line); }
.row .num { font-weight: 700; min-width: 52px; }
.row .txt { flex: 1; font-size: 14px; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w { min-width: 72px; text-align: right; font-size: 11px; color: var(--mut); }
.w b { display: block; color: var(--fg); font-size: 15px; }
.w .meter { height: 4px; border-radius: 2px; background: var(--line); margin-top: 4px; overflow: hidden; }
.w .meter i { display: block; height: 100%; background: var(--blue); }
.empty { text-align: center; color: var(--mut); padding: 48px 16px; }