:root{
  --bg:#0f172a; --bg2:#1e293b; --card:#ffffff; --ink:#0f172a; --muted:#64748b;
  --line:#e2e8f0; --brand:#0e7c5a; --brand-d:#0a5f45; --brand-l:#e6f4ee;
  --accent:#c2560f; --accent-l:#fdf1e8; --ok:#15803d; --bad:#b91c1c; --warn:#b45309;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06);
  --radius:14px; --soft:#f1f5f9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:#f1f5f9; line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--brand)}
button{font-family:inherit}
.hidden{display:none !important}

/* Грб школе као дискретан водени жиг иза целог сајта */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(/logo-512.png?v=1) no-repeat calc(50% + 120px) 54%;background-size:min(62vh,62vw);opacity:.07}
@media (max-width:820px){ body::before{background-position:50% 50%;background-size:min(72vw,60vh)} }
@media print{ body::before{display:none} }

/* ---------- Prijava ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;
  background:radial-gradient(1200px 600px at 20% -10%,#134e4a 0%,#0f172a 55%,#0f172a 100%)}
.login-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/logo-512.png?v=1) no-repeat center;background-size:min(78vh,78vw);opacity:.14}
.login-card{position:relative}
.login-card{background:var(--card);width:100%;max-width:420px;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px 26px}
.login-card h1{margin:0 0 4px;font-size:22px}
.login-card .globe{font-size:40px;text-align:center;display:block;margin-bottom:6px}
/* грб школе: у пријави крупније, у горњој траци дискретно */
.loginlogo{display:block;margin:0 auto 10px;width:104px;height:104px;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(15,23,42,.35))}
.blogo{width:30px;height:30px;object-fit:contain;vertical-align:middle;flex:0 0 auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.login-sub{color:var(--muted);margin:0 0 20px;font-size:14px}
.tabs{display:flex;gap:8px;margin-bottom:18px;background:#f1f5f9;padding:4px;border-radius:10px}
.tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:8px;cursor:pointer;
  font-weight:600;color:var(--muted)}
.tabs button.active{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ---------- Forme ---------- */
label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px;color:#334155}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-l);border-color:var(--brand)}
textarea{min-height:80px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;
  background:var(--brand);color:#fff;padding:11px 16px;border-radius:10px;font-weight:600;font-size:15px}
.btn:hover{background:var(--brand-d)}
.btn.full{width:100%}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#f8fafc}
.btn.accent{background:var(--accent)}
.btn.accent:hover{filter:brightness(.95)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:8px}
.btn.danger{background:#fff;color:var(--bad);border:1px solid #fecaca}
.btn.danger:hover{background:#fef2f2}
.msg{padding:10px 12px;border-radius:10px;font-size:14px;margin:10px 0}
.msg.err{background:#fef2f2;color:var(--bad);border:1px solid #fecaca}
.msg.ok{background:#f0fdf4;color:var(--ok);border:1px solid #bbf7d0}

/* ---------- Aplikacija ---------- */
.app{display:none;min-height:100vh}
.app.on{display:block}
.topbar{position:sticky;top:0;z-index:40;background:var(--bg);color:#fff;display:flex;align-items:center;
  gap:12px;padding:11px 16px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.topbar .brand{font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px}
.topbar .brand small{font-weight:500;opacity:.7;font-size:12px}
.topbar .spacer{flex:1}
.topbar .who{font-size:13px;opacity:.85}
.burger{display:block;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px}
.scrim{display:none}
/* сакривање менија на десктопу */
.layout.collapsed .side{display:none}

.layout{display:flex;min-height:calc(100vh - 52px)}
.side{width:240px;background:#fff;border-right:1px solid var(--line);padding:12px;flex-shrink:0;
  overflow-y:auto}
.side .group{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:14px 8px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;
  color:#334155;font-weight:600;font-size:14px;border:0;background:transparent;width:100%;text-align:left}
.nav-item .ic{font-size:17px;width:22px;text-align:center}
.nav-item:hover{background:#f1f5f9}
.nav-item.active{background:var(--brand-l);color:var(--brand-d)}
.main{flex:1;padding:22px;max-width:1100px;margin:0 auto;width:100%}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head h2{margin:0;font-size:22px}
.page-head p{margin:0;color:var(--muted);width:100%;font-size:14px}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:16px}
.card h3{margin:0 0 12px;font-size:16px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  background:#f1f5f9;color:#475569}
.pill.brand{background:var(--brand-l);color:var(--brand-d)}
.pill.accent{background:var(--accent-l);color:var(--accent)}
.muted{color:var(--muted)}
.spacer{flex:1}

/* Kartice sektora (početna) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .08s,box-shadow .12s}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(15,23,42,.12)}
.tile .ic{font-size:30px}
.tile h4{margin:10px 0 4px;font-size:16px}
.tile p{margin:0;font-size:13px;color:var(--muted)}

/* Tabele / liste */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.table tr:hover td{background:#f8fafc}

.item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:10px;background:#fff;flex-wrap:wrap}
.item .body{flex:1;min-width:0}
.item .body b{display:block}
.item .body small{color:var(--muted)}

.student-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;box-shadow:var(--shadow)}
.student-card .name{font-weight:700;font-size:15px}
.student-card .code{font-family:ui-monospace,Menlo,monospace;font-size:18px;letter-spacing:.12em;
  background:var(--brand-l);color:var(--brand-d);padding:5px 10px;border-radius:8px;display:inline-block;margin-top:8px}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:flex-start;
  justify-content:center;padding:30px 16px;z-index:60;overflow-y:auto}
.modal{background:#fff;border-radius:var(--radius);width:100%;max-width:640px;padding:22px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 4px}
.modal .x{float:right;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--muted)}

/* Test / pitanja */
.q-block{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;background:#fff}
.q-block .q-num{font-weight:800;color:var(--brand)}
.q-opts{margin-top:8px}
.q-opts label{display:flex;align-items:center;gap:9px;font-weight:500;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;margin-bottom:7px;cursor:pointer}
.q-opts label:hover{background:#f8fafc}
.q-opts input{width:auto}
.q-img{max-width:100%;border-radius:10px;margin:8px 0;border:1px solid var(--line)}

/* Nema karta */
.map-editor{position:relative;display:inline-block;max-width:100%}
.map-editor img{max-width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.map-point{position:absolute;transform:translate(-50%,-50%);background:var(--accent);color:#fff;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.map-point.answer{background:var(--brand)}

/* Нема карта — нумерисани маркери на карти (карта видљива) + одговори у листи испод */
.bm-map{position:relative;display:inline-block;max-width:100%}
.bm-map img{max-width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
/* Зумирање карте (уређивач и ђак): viewport сече, canvas се трансформише */
.map-viewport,.mt-viewport{position:relative;overflow:hidden;max-width:100%;width:100%;border-radius:10px;border:1px solid var(--line);background:#eef1f4;touch-action:none;cursor:grab;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}
.map-viewport:active,.mt-viewport:active{cursor:grabbing}
.map-viewport *,.mt-viewport *{user-select:none;-webkit-user-select:none}
.map-viewport ::selection,.mt-viewport ::selection{background:transparent}
.map-viewport .map-canvas,.mt-viewport .mt-canvas{position:relative;transform-origin:0 0;will-change:transform;display:block;width:100%;border:0}
.map-viewport .map-canvas img,.mt-viewport .mt-canvas img{display:block;width:100%;border:0;border-radius:0;pointer-events:none;
  -webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
.map-zoom{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.map-zoom .btn{min-width:34px;font-size:16px;font-weight:800}
/* Географска карта (тапни): мапа + ознаке које ђак поставља */
.mt-map{position:relative;display:inline-block;max-width:100%;width:100%;cursor:crosshair;touch-action:manipulation}
.mt-map img{max-width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.mt-pin{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  background:var(--brand);color:#fff;border:2px solid #fff;box-shadow:0 0 0 2px var(--brand),0 1px 4px rgba(0,0,0,.4);z-index:2;pointer-events:none}
.mt-terms{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mt-term{padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:14px;cursor:pointer}
.mt-term.armed{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.mt-term.placed{border-color:var(--brand);color:var(--brand)}
.mt-term.placed.armed{background:var(--accent);color:#fff;border-color:var(--accent)}
.bm-pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  background:#fff;color:#b00020;border:2px solid #b00020;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;z-index:2}
.bm-pin.filled{background:var(--brand);color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--brand),0 1px 4px rgba(0,0,0,.35)}
/* Уски екран (телефон): слика се сужава, бројеви иду у маргину, тачка → линија → круг */
.bm-map.gutter{display:block;width:100%;box-sizing:border-box}
.bm-map.gutter img{width:100%;margin:0}
.bm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.bm-lines line{stroke:#b00020;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.85}
.bm-lines line.done{stroke:var(--brand)}
.bm-dot{position:absolute;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
  background:#b00020;border:2px solid #fff;box-shadow:0 0 0 1px #b00020;z-index:2}
.bm-dot.filled{background:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.bm-gnum{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  background:#fff;color:#b00020;border:2px solid #b00020;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;z-index:3}
.bm-gnum.filled{background:var(--brand);color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--brand),0 1px 4px rgba(0,0,0,.3)}
.bm-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:12px}
.bm-ans-row{display:flex;align-items:center;gap:8px;border-radius:10px;padding:2px;transition:background .2s}
.bm-ans-row.flash{background:rgba(251,191,36,.35)}
.bm-ans-num{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;background:#fff;color:#b00020;border:2px solid #b00020}
.bm-ans-slot{flex:1;min-height:38px;display:flex;align-items:center;padding:6px 12px;border-radius:8px;
  border:2px dashed #9aa4b2;background:#fff;color:#94a3b8;font-size:13px;cursor:pointer;font-weight:600}
.bm-ans-slot.filled{border-style:solid;border-color:var(--brand);background:#eef4ff;color:var(--ink,#12203a);font-weight:700}
@media (max-width:640px){.bm-list{grid-template-columns:1fr}}
.bm-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bm-chip{background:#fff;border:1.5px solid var(--brand);color:var(--brand);border-radius:18px;
  padding:6px 14px;font-weight:600;font-size:14px;cursor:pointer;user-select:none;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bm-chip.armed{background:var(--brand);color:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.25)}

/* Преглед појединачног питања */
.pv-frame{width:100%;height:60vh;border:1px solid var(--line);border-radius:10px;background:#fff}
.pv-pane .card{margin:0}

/* Групни избор питања у Банци */
.bulkbar{background:var(--soft)}
.bank-pick{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:13px;color:var(--brand);cursor:pointer;user-select:none}
.bank-pick input{width:auto}
.card.picked{outline:2px solid var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.15)}

.result-big{font-size:40px;font-weight:800;color:var(--brand)}
.grade-badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;font-weight:800;font-size:20px;color:#fff;background:var(--brand)}

/* Тајмер за online тест — стоји у горњој траци (увек видљив, и при скроловању, и на телефону) */
.timer{background:var(--brand);color:#fff;font-weight:800;padding:7px 14px;border-radius:10px;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.timer.low{background:var(--bad);animation:pulse 1s infinite}
.timer.up{background:#1e3a8a}
.timer small{display:block;font-size:10px;font-weight:600;opacity:.85;line-height:1;margin-top:2px;letter-spacing:.02em}
.topbar .timer{padding:4px 11px;font-size:16px;line-height:1.15;text-align:center;margin-right:4px}
@media(max-width:700px){.topbar .timer{padding:4px 8px;font-size:15px}.topbar .timer small{font-size:9px}}
@keyframes pulse{50%{opacity:.55}}
/* Стање везе током теста */
.conn{display:inline-block;font-size:13px;padding:6px 10px;border-radius:8px;margin:0 0 10px;font-weight:600}
.conn.bad{background:#fef3c7;color:#92400e}
.conn.ok{background:#dcfce7;color:#166534}
.conn.relog{background:#e0f2fe;color:#075985}
/* Излазак са стране теста у режиму „бележи" — кратка напомена (ђак ради даље) */
.leave-note{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#7c2d12;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:9999;max-width:92vw;text-align:center}

/* Нови типови питања (online рад) */
.tf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px}
.tf-row label{display:inline;margin:0 0 0 4px;font-weight:500}
.tf-stmt{padding:8px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px}
.tf-choose{margin-top:6px}
.tf-choose label{display:inline;margin-right:16px;font-weight:500}
.match-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px}
.match-row select{width:auto;min-width:150px}
.fillq{line-height:2.2;font-size:15px}
.fillin{display:inline-block;width:130px;padding:3px 8px;margin:0 3px;border:0;border-bottom:2px solid var(--brand);border-radius:0}

/* ---------- Responsive (mobilni) ---------- */
@media (max-width:820px){
  .side{position:fixed;top:52px;bottom:0;left:0;transform:translateX(-100%);transition:transform .2s;z-index:50;
    box-shadow:6px 0 24px rgba(0,0,0,.15)}
  .layout.collapsed .side{display:block}
  .side.open{transform:translateX(0)}
  .main{padding:16px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .side.open ~ .scrim{display:block;position:fixed;inset:52px 0 0 0;background:rgba(0,0,0,.35);z-index:45}
}
/* Резултати по терминима — скупљено, отвара се кликом */
.resgrp{padding:10px 12px}
.resgrp-h{display:flex;align-items:center;gap:8px;cursor:pointer;flex-wrap:wrap}
.resgrp-h:hover{color:var(--brand-d)}
.resgrp-ar{font-size:15px;color:var(--muted);width:14px}
.resgrp-t{color:var(--muted);font-size:13px}
.resgrp-b{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}

/* ---------- Контрола рада уживо ---------- */
.mon-bar{display:inline-block;width:120px;height:10px;border-radius:6px;background:#e2e8f0;overflow:hidden;vertical-align:middle;margin-right:8px}
.mon-bar span{display:block;height:100%;background:linear-gradient(90deg,#0e7c5a,#22c55e);border-radius:6px;transition:width .3s}
.mon-num{font-size:12px;font-weight:700;color:#334155;white-space:nowrap}
.card.mon-left{border:2px solid #fecaca;background:#fff7f7}
.card.mon-left .mon-bar span{background:linear-gradient(90deg,#b91c1c,#ef4444)}
.card.mon-work{border:2px solid #bbf7d0}
.card.mon-gone{border:2px solid #fdba74;background:#fffaf3}
.card.mon-gone .mon-bar span{background:linear-gradient(90deg,#c2560f,#f59e0b)}
.card.mon-none{background:#f8fafc}
.mon-alarms{position:fixed;right:14px;top:64px;z-index:9000;display:flex;flex-direction:column;gap:10px;max-width:min(360px,92vw)}
.mon-alarm{background:#fff;border:2px solid #b91c1c;border-left-width:8px;border-radius:12px;padding:12px 14px;
  box-shadow:0 10px 30px rgba(15,23,42,.25);animation:monin .25s ease-out}
@keyframes monin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:560px){ .mon-alarms{left:8px;right:8px;top:58px;max-width:none} .mon-bar{width:70px} }

/* Широке табеле на телефону клизе унутар своје картице — страна не иде у страну */
@media (max-width:820px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .table td,.table th{white-space:nowrap}
}
/* На телефону: наслов ставке у свој ред, дугмад испод — да ништа не излази ван екрана */
@media (max-width:640px){
  .item .body{flex:1 1 100%;min-width:0}
  .item .btn{flex:0 0 auto}
  .item .spacer{display:none}
}
@media (max-width:520px){
  .topbar .who{display:none}
  .page-head h2{font-size:19px}
}
/* Уска горња трака на телефону: назив школе у ЈЕДНОМ реду (скраћен), дугме „Одјава" увек видљиво. */
@media (max-width:560px){
  .blogo{width:24px;height:24px}
  .topbar{gap:8px;padding:9px 10px}
  .topbar .brand{font-size:15px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
  .topbar .brand small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .btn{font-size:12px;padding:6px 10px}
  .burger{font-size:20px;padding:4px 2px}
}

/* ---------- Асоцијације (игра) — „слагалица" плави стил ---------- */
#asocWrap{border-radius:16px;padding:16px;background:radial-gradient(1200px 500px at 50% -10%,#1e40af 0%,#132e7a 45%,#0b1e56 100%);border:2px solid #1e3a8a;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
#asocWrap.has-bg{background-size:cover;background-position:center}
.asoc-banner{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;margin-bottom:12px;border:1px solid rgba(255,255,255,.2)}
.asoc-banner.win{background:linear-gradient(#f59e0b,#d97706);color:#fff;font-size:22px}
.asoc-timer{margin-left:auto;background:#fff;color:#0b1e56;padding:4px 14px;border-radius:10px;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.asoc-timer.low{background:var(--bad);color:#fff;animation:pulse 1s infinite}
.asoc-timer .lbl{opacity:.8}
.asoc-scores{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;justify-content:center}
.asoc-score{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);border-radius:12px;padding:6px 16px;display:flex;flex-direction:column;align-items:center;min-width:88px;color:#fff}
.asoc-score.cur{border-color:#fbbf24;background:rgba(251,191,36,.2);box-shadow:0 0 14px rgba(251,191,36,.5)}
.asoc-score b{font-size:13px}
.asoc-score span{font-size:26px;font-weight:800;color:#fbbf24}
.asoc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.asoc-col{display:flex;flex-direction:column;gap:6px}
.asoc-colh{text-align:center;font-weight:900;font-size:22px;color:#0b1e56;background:linear-gradient(#fde68a,#fbbf24);border-radius:9px;padding:6px;box-shadow:0 2px 0 #b45309}
.asoc-cell{border-radius:9px;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;font-weight:700;font-size:14px}
.asoc-cell.closed{background:linear-gradient(#2563eb,#1d4ed8);color:#fff;font-size:22px;font-weight:900;border:2px solid #3b82f6;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.asoc-cell.open{background:#fff;color:#132e7a;border:2px solid #fbbf24}
.asoc-cell.click{cursor:pointer}
.asoc-cell.click:hover{filter:brightness(1.08);transform:translateY(-1px)}
.asoc-sol.click,.asoc-final.click{cursor:pointer;border-style:dashed;border-color:#fbbf24;color:#fde68a}
.asoc-sol.click:hover,.asoc-final.click:hover{background:rgba(251,191,36,.25)}
.asoc-sol{text-align:center;font-weight:800;border:2px solid rgba(255,255,255,.3);border-radius:9px;padding:8px 4px;min-height:40px;background:rgba(255,255,255,.08);color:#fff;font-size:14px}
.asoc-sol.done{border-color:#fbbf24;background:linear-gradient(#fde68a,#fbbf24);color:#0b1e56}
.asoc-sol .by{display:block;font-size:11px;font-weight:700}
.asoc-sol .hint{color:rgba(255,255,255,.65);font-weight:500;font-size:12px}
.asoc-final{text-align:center;font-weight:900;font-size:20px;margin-top:12px;padding:14px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.3);letter-spacing:.5px}
.asoc-final.done{border-color:#f59e0b;background:linear-gradient(#f59e0b,#d97706);color:#fff}
.asoc-final .hint{color:rgba(255,255,255,.7);font-weight:500;font-size:13px}

/* Распоред као у Слагалици: А горе-лево, Б горе-десно, коначно решење у средини, В доле-лево, Г доле-десно.
   Сва поља су ИСТЕ ширине — само су дијагонално померена (translateX), не смањују се ни повећавају. */
.asoc-slag{--slagstep:30px;--slagw:206px;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;align-items:start}
.slag-q{min-width:0;display:flex}
/* Колоне се приљубљују уз средину (коначно решење): А4/Б4 близу, а В4/Г4 (доле) исто. */
.slag-q.tl,.slag-q.bl{justify-content:flex-end}
.slag-q.tr,.slag-q.br{justify-content:flex-start}
/* max-width гарантује да каскада (3 корака) никада не изађе изван своје половине. */
.asoc-slag .asoc-col{width:var(--slagw);max-width:calc(100% - 3*var(--slagstep))}
.asoc-slag .asoc-cell,.asoc-slag .asoc-sol{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.asoc-slag .asoc-cell{min-height:58px}
.slag-final-wrap{grid-column:1 / -1;margin:2px 0}
.slag-final-wrap .asoc-final{margin-top:0;font-size:26px;padding:18px}
/* Дијагонална каскада поља (иста ширина, само померена), симетрично.
   Поља су класе sf0..sf3 (В/Г колоне имају решење ГОРЕ — огледало у односу на А/Б). */
.slag-q.tl .sf0{transform:translateX(calc(-3*var(--slagstep)))}
.slag-q.tl .sf1{transform:translateX(calc(-2*var(--slagstep)))}
.slag-q.tl .sf2{transform:translateX(calc(-1*var(--slagstep)))}
.slag-q.tl .sf3{transform:translateX(0)}
.slag-q.tr .sf0{transform:translateX(calc(3*var(--slagstep)))}
.slag-q.tr .sf1{transform:translateX(calc(2*var(--slagstep)))}
.slag-q.tr .sf2{transform:translateX(calc(1*var(--slagstep)))}
.slag-q.tr .sf3{transform:translateX(0)}
.slag-q.bl .sf0{transform:translateX(0)}
.slag-q.bl .sf1{transform:translateX(calc(-1*var(--slagstep)))}
.slag-q.bl .sf2{transform:translateX(calc(-2*var(--slagstep)))}
.slag-q.bl .sf3{transform:translateX(calc(-3*var(--slagstep)))}
.slag-q.br .sf0{transform:translateX(0)}
.slag-q.br .sf1{transform:translateX(calc(1*var(--slagstep)))}
.slag-q.br .sf2{transform:translateX(calc(2*var(--slagstep)))}
.slag-q.br .sf3{transform:translateX(calc(3*var(--slagstep)))}
/* Таблет: остаје Слагалица (2×2), само се каскада и размаци смање. */
@media (max-width:820px){
  .asoc-slag{--slagstep:14px;--slagw:100%;gap:10px 12px}
  .asoc-slag .asoc-cell{min-height:50px;font-size:13px}
  .asoc-slag .asoc-cell.closed{font-size:18px}
  .slag-final-wrap .asoc-final{font-size:21px;padding:13px}
}
/* Телефон: НЕ распада се у један ред — и даље А|Б, решење, В|Г, само уже и са ситнијим степеницама. */
@media (max-width:560px){
  #asocWrap{padding:8px}
  .asoc-slag{--slagstep:7px;gap:7px 7px}
  .asoc-slag .asoc-cell{min-height:44px;font-size:12px;padding:4px;border-radius:8px}
  .asoc-slag .asoc-cell.closed{font-size:16px}
  .asoc-slag .asoc-sol{font-size:12px;min-height:34px;padding:6px 3px;border-radius:8px}
  .asoc-slag .asoc-sol .hint{font-size:11px}
  .slag-final-wrap .asoc-final{font-size:17px;padding:10px;letter-spacing:0}
  .slag-final-wrap .asoc-final .hint{font-size:11px}
  .asoc-banner{font-size:15px;padding:8px 10px;gap:8px}
  .asoc-timer{font-size:17px;padding:3px 10px}
  .asoc-score{min-width:0;padding:5px 10px}.asoc-score span{font-size:21px}
}
/* ТЕЛЕФОН ОКРЕНУТ ВОДОРАВНО: цела Слагалица на једном екрану, без скроловања.
   Све мере су у „em" па се величина слова подешава сама (App.fitAsoc) — да буду што крупнија. */
@media (orientation:landscape) and (max-height:600px){
  body.asocboard .topbar,body.asocboard .side,body.asocboard .scrim,body.asocboard .asoc-log,body.asocboard .hide-land{display:none!important}
  body.asocboard .app,body.asocboard .layout{min-height:0}
  body.asocboard .main{padding:2px 6px;max-width:100%;height:100vh;overflow:hidden}
  /* витка трака са дугмадима — наслов се склања да табла добије висину */
  body.asocboard .page-head{margin-bottom:2px;gap:5px;justify-content:flex-end}
  body.asocboard .page-head h2,body.asocboard .page-head p{display:none}
  body.asocboard .page-head .btn{font-size:11px;padding:2px 7px}
  body.asocboard #asocWrap{padding:3px;border-radius:9px;display:flex;flex-direction:column;justify-content:center}
  body.asocboard .asoc-slag{font-size:14px;--slagstep:6.8%;--slagw:17em;gap:.22em .8em}
  body.asocboard .asoc-slag .asoc-col{max-width:83%}
  body.asocboard .asoc-slag .asoc-col{gap:.18em}
  body.asocboard .asoc-slag .asoc-cell{min-height:1.65em;font-size:1em;padding:.08em .35em;border-radius:.4em;line-height:1.15;border-width:1.5px}
  body.asocboard .asoc-slag .asoc-cell.closed{font-size:1.12em}
  body.asocboard .asoc-slag .asoc-sol{min-height:1.45em;font-size:.8em;padding:.08em .2em;border-radius:.4em;line-height:1.15}
  body.asocboard .asoc-slag .asoc-sol .hint{font-size:.9em}
  body.asocboard .slag-final-wrap{margin:0}
  body.asocboard .slag-final-wrap .asoc-final{font-size:1.15em;padding:.28em;margin:0;letter-spacing:0}
  body.asocboard .slag-final-wrap .asoc-final .hint{font-size:.75em}
  body.asocboard .asoc-banner{font-size:14px;padding:4px 8px;margin-bottom:4px}
  body.asocboard .asoc-timer{font-size:16px;padding:2px 8px}
  body.asocboard .asoc-scores{margin-bottom:4px;gap:6px}
  body.asocboard .asoc-score{min-width:0;padding:2px 8px}
  body.asocboard .asoc-score b{font-size:11px}.body.asocboard .asoc-score span{font-size:16px}
}
/* ЦЕО ЕКРАН на рачунару (пројектор) за Асоцијације — исте мере као водоравни телефон,
   величину слова бира App.fitAsoc() тако да цела табла стане без скроловања. */
body.present .hide-land,body.present .land-hint,body.present .asoc-log{display:none!important}
/* трака са дугмадима у целом екрану: увек у ЈЕДНОМ реду, наслов се скраћује */
body.present .page-head{margin-bottom:6px;gap:6px;flex-wrap:nowrap;align-items:center}
body.present .page-head h2{font-size:18px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.present .page-head .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:560px){
  body.present .page-head h2{display:none}
  body.present .page-head{flex-wrap:wrap;justify-content:flex-start;gap:5px}
  body.present .page-head .btn{font-size:12px;padding:5px 8px}
}
@media (min-width:700px){
  body.present #asocWrap{padding:10px;display:flex;flex-direction:column;justify-content:center}
  /* Степеница каскаде мора бити независна од величине слова САМОГ поља (поља „закључано" имају 1.12em),
     иначе се померено поље пробије изван табле. Зато је корак у % ШИРИНЕ поља (= ширина колоне). */
  body.present .asoc-slag{width:100%;font-size:22px;--slagstep:6.8%;--slagw:17em;gap:.22em .8em}
  body.present .asoc-slag .asoc-col{max-width:83%}
  body.present .asoc-slag .asoc-col{gap:.18em}
  body.present .asoc-slag .asoc-cell{min-height:1.65em;font-size:1em;padding:.08em .35em;border-radius:.4em;line-height:1.15}
  body.present .asoc-slag .asoc-cell.closed{font-size:1.12em}
  body.present .asoc-slag .asoc-sol{min-height:1.45em;font-size:.8em;padding:.08em .2em;border-radius:.4em;line-height:1.15}
  body.present .slag-final-wrap{margin:0}
  body.present .slag-final-wrap .asoc-final{font-size:1.15em;padding:.28em;margin:0;letter-spacing:0}
  body.present .main{overflow:hidden}
}
.land-hint{display:none}
@media (orientation:portrait) and (max-width:560px){ .land-hint{display:block} }
@media (max-width:380px){
  .asoc-slag .asoc-cell{font-size:11px;min-height:40px}
  .asoc-slag .asoc-cell.closed{font-size:15px}
  .slag-final-wrap .asoc-final{font-size:15px}
  /* на најужим телефонима дугмад у заглављу иду у нови ред уместо да искачу из екрана */
  .page-head{gap:8px}
  .page-head .spacer{flex:0 0 100%;height:0}
  .page-head .btn.sm{font-size:12px;padding:6px 9px}
}
/* Избор начина бирања питања: дигитално | штампа */
.poolgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.poolcol{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff}
.poolhd{font-weight:800;font-size:13px;margin-bottom:6px}
.poolcol .zradio{display:block;margin-bottom:7px;font-size:13px;line-height:1.35}
.poolcol .zradio input{width:auto;margin-right:5px}
.poolcol .zradio .muted{font-weight:400}
@media (max-width:700px){.poolgrid{grid-template-columns:1fr}}

/* Поље за датум у српском формату (дд.мм.гггг.) са дугметом за календар */
.dtin{position:relative;display:inline-flex;align-items:center;width:100%}
.dtin .dtsr{padding-right:38px;margin:0}
.dtin .dtsr.bad{border-color:#b91c1c;background:#fef2f2}
.dtin .dtpick{position:absolute;right:6px;bottom:0;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
.dtin .dtcal{position:absolute;right:2px;background:transparent;border:0;font-size:17px;cursor:pointer;padding:4px 6px;line-height:1}
.dtin .dtcal:hover{filter:brightness(1.2)}
.asoc-log{margin-top:12px;font-size:13px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px;max-height:130px;overflow:auto}
.asoc-log div{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.asoc-actions .row{margin-bottom:0}
@media (max-width:640px){ .asoc-cell.closed{font-size:18px} .asoc-colh{font-size:17px} .asoc-cell{min-height:44px;font-size:12px} }

/* ---------- Занимљива географија ---------- */
.zanim-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e293b;border-radius:999px;padding:5px 10px;font-size:14px;font-weight:600;line-height:1.2}
.zanim-chip button{border:none;background:transparent;cursor:pointer;font-size:13px;padding:0 2px;color:#475569;border-radius:6px}
.zanim-chip button:hover{background:#dbe1ff;color:#0b1e56}
.zanim-big{font-size:96px;font-weight:900;text-align:center;color:var(--brand);line-height:1;margin:10px 0;letter-spacing:2px}
@media (max-width:640px){ .zanim-big{font-size:72px} }
.zanim-cat{font-size:26px;font-weight:800;color:var(--brand);margin:2px 0 4px}
/* избор при прављењу игре */
.zcats,.zparts{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px;max-height:180px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:10px}
.zcheck,.zradio{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
/* попап/картице за одобравање */
.zpend{border:2px solid #f59e0b;background:#fffbeb}
.zpend h3{margin-top:0;color:#b45309}
.zpend-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #fcd34d;flex-wrap:wrap}
.zterm{font-weight:800;color:#b45309}
/* табела резултата */
.ztable{width:100%;border-collapse:collapse;font-size:14px}
.ztable th,.ztable td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.ztable th{background:var(--soft);font-size:13px}
.zcell.correct{background:#dcfce7;color:#166534;font-weight:700}
.zcell.wrong{background:#fee2e2;color:#991b1b}
.zcell.pending{background:#fef9c3;color:#854d0e;font-weight:700}
.zcell.empty{color:var(--muted)}
.zscore{font-weight:900;text-align:center;background:var(--soft)}
/* Табела резултата клизи у страну унутар картице; колона са именом остаје „залепљена" */
.ztable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ztable th:first-child,.ztable td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:inset -1px 0 0 var(--line);background-clip:padding-box}
.ztable th:first-child{background:var(--soft)}
.ztable td{max-width:220px}
/* Телефон: сваки учесник као картица — сви појмови видљиви без померања у страну */
.zplist{display:none}
.zviewtoggle{display:none}
.zpl{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fff}
.zpl-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.zpl-score{font-weight:900;background:var(--soft);border-radius:8px;padding:2px 8px;white-space:nowrap}
.zpl-cells{display:flex;flex-wrap:wrap;gap:5px}
.zchip{display:inline-flex;gap:4px;align-items:baseline;padding:3px 8px;border-radius:8px;font-size:13px;background:var(--soft);max-width:100%;overflow-wrap:anywhere}
.zchip i{font-style:normal;color:var(--muted);font-size:12px}
.zchip.correct{background:#dcfce7;color:#166534;font-weight:700}.zchip.wrong{background:#fee2e2;color:#991b1b}.zchip.pending{background:#fef9c3;color:#854d0e;font-weight:700}.zchip.empty{color:var(--muted)}
@media (max-width:700px){
  .zres .ztable-wrap{display:none} .zres .zplist{display:block} .zviewtoggle{display:inline-flex}
  .zres.as-table .ztable-wrap{display:block} .zres.as-table .zplist{display:none}
  .ztable td,.ztable th{white-space:nowrap}
}
/* Слика која се није учитала (игра, банка) */
.img-fail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:90px;padding:10px;border:2px dashed #fca5a5;border-radius:10px;background:#fff7f7;color:#991b1b;font-weight:700;text-align:center;max-width:100%}
.flag-big .img-fail{min-height:min(30vh,220px);width:min(100%,420px)}
.flag-img{position:relative}
.img-bad{position:absolute;top:4px;right:6px;font-size:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
/* напредак код играча */
.zprog{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:var(--soft);margin-bottom:6px}
.zprog.ok{background:#dcfce7}.zprog.err{background:#fee2e2}.zprog.pend{background:#fef9c3}
.zprog span{color:var(--muted)}
.msg.pend{background:#fef9c3;color:#854d0e}

/* ---------- Закључавање теста (напуштање учионице) ---------- */
#lockOverlay,.lock-overlay{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.97);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:#fff}
#lockOverlay .lock-box,.lock-overlay .lock-box{max-width:440px}
#lockOverlay h2,.lock-overlay h2{margin:10px 0;color:#fff}
#lockOverlay p,.lock-overlay p{color:#e2e8f0;line-height:1.5}
#lockOverlay .muted,.lock-overlay .muted{color:#94a3b8}
.res-locked{background:#fef2f2 !important}
.left-badge{display:inline-block;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}
.left-badge.soft{background:#fef3c7;color:#92400e;border-color:#fde68a}
.mon-alarm.soft{border-color:#d97706}

/* ---------- Štampa ---------- */
@media print{
  .topbar,.side,.burger,.no-print,.btn{display:none !important}
  .app,.app.on{display:block !important}
  .main{max-width:100%;padding:0}
  .card,.q-block{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  body{background:#fff}
}

/* ============================================================
   ГЕО-ТЕМА (предлог) — суптилна картографска атмосфера.
   Све је издвојено овде да се лако укључи/искључи.
   ============================================================ */

/* Изохипсе (топографске линије) — светле, преко тамне позадине пријаве */
.login-wrap{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.3'%3E%3Cpath d='M0 30 Q65 4 130 30 T260 30'/%3E%3Cpath d='M0 70 Q65 44 130 70 T260 70'/%3E%3Cpath d='M0 110 Q65 84 130 110 T260 110'/%3E%3Cpath d='M0 150 Q65 124 130 150 T260 150'/%3E%3Cpath d='M0 190 Q65 164 130 190 T260 190'/%3E%3Cpath d='M0 230 Q65 204 130 230 T260 230'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 20% -10%,#0e7c5a 0%,#0b3b52 45%,#0f172a 100%);
}
/* Мека „географска мрежа" (паралеле/меридијани) иза целог глобуса на картици */
.login-card{position:relative;overflow:hidden}
.login-card .globe{
  width:78px;height:78px;line-height:78px;margin:2px auto 8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#e6f4ee,#c7e7db 45%,#0e7c5a 120%);
  box-shadow:0 6px 18px rgba(14,124,90,.35),inset 0 -6px 14px rgba(0,0,0,.15);
  font-size:44px;text-align:center}
.login-card h1{letter-spacing:.3px}

/* Апликација: једва видљива мрежа координата на позадини (као на карти) */
body{
  background-color:#eef3f1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg stroke='%230e7c5a' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 .5H140M0 46.5H140M0 92.5H140M.5 0V140M46.5 0V140M92.5 0V140'/%3E%3C/g%3E%3C/svg%3E");
}

/* Топбар: танка трака „терена" (море → низина → планина) испод наслова */
.topbar{
  background:linear-gradient(180deg,#0f2f43,#0b1e33);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#0ea5a0,#0e7c5a,#c2560f) 1;
}
.topbar .brand{letter-spacing:.3px}

/* Бочни мени: активна ставка добија обележивач у боји (као заставица на карти) */
.nav-item.active{box-shadow:inset 3px 0 0 var(--brand);}
.side .group{color:#0e7c5a;opacity:.85}

/* Плочице на почетној: суптилна трака у бојама рељефа на врху + мекши ховер */
.tile{position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,#0ea5a0,#0e7c5a,#c2560f);opacity:.9}
.tile .ic{filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}

/* Насловне иконице страница мало „подигнуте" */
.page-head h2{letter-spacing:.2px}

/* ---- Анализа по областима ---- */
.anbars{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.anrow{display:grid;grid-template-columns:minmax(120px,220px) 1fr 56px auto;gap:10px;align-items:center;font-size:13px}
.anlbl{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anbar{display:block;height:14px;background:var(--soft);border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.anfill{display:block;height:100%;border-radius:7px}
.anpct{font-weight:700;text-align:right}
.anmeta{font-size:12px;white-space:nowrap}
.anblock{border-top:1px dashed var(--line);padding:10px 0 4px;margin-top:8px}
.anblock h4{margin:0 0 6px}
@media print{.anrow{break-inside:avoid}.anblock{break-inside:avoid}.anbar{border:1px solid #999}.anfill{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (max-width:700px){.anrow{grid-template-columns:1fr 56px;grid-auto-rows:auto}.anlbl{grid-column:1/-1}.anmeta{grid-column:1/-1}}

/* ---- Заставе држава ---- */
.flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.flag-card{padding:10px;text-align:center}
.flag-img{height:90px;display:flex;align-items:center;justify-content:center;background:#f4f6f8;border-radius:8px;overflow:hidden}
.flag-img img{max-height:86px;max-width:100%;object-fit:contain;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.flag-name{font-weight:700;margin-top:6px}
.flag-stage{text-align:center}
.flag-big{display:flex;align-items:center;justify-content:center;min-height:180px;padding:10px}
.flag-big img{max-height:min(46vh,340px);max-width:100%;object-fit:contain;box-shadow:0 2px 12px rgba(0,0,0,.2);border-radius:4px}
.flag-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;margin:0 auto}
.flag-opt{font-size:17px;padding:14px 12px;white-space:normal;background:#fff;color:#1f2937;border:2px solid #cbd5e1;box-shadow:none}
.flag-opt:hover:not(:disabled){background:#eef4ff;border-color:#93a8d8}
.flag-opt.sel{border-color:var(--brand);background:var(--brand-l);box-shadow:inset 0 0 0 2px var(--brand)}
.flag-opt.sel::before{content:"✔ ";color:var(--brand-d)}
.flag-opt.ok{background:#0a5f45!important;color:#fff!important;border-color:#0a5f45!important}
.flag-opt.bad{background:#b91c1c!important;color:#fff!important;border-color:#b91c1c!important}
.flag-opt:disabled{opacity:.85;cursor:default}
.flag-msg{min-height:26px;margin-top:12px;font-size:17px}
.flag-msg .ok{color:#0a5f45;font-weight:800}.flag-msg .bad{color:#b91c1c;font-weight:800}
.flag-name.ok{color:#0a5f45}.flag-card .bad{color:#b91c1c;font-weight:700}
@media (max-width:520px){.flag-opts{grid-template-columns:1fr}}
/* Дуги одговори (нпр. „чиме се бави“ или пун назив организације) — један испод другог,
   текст поравнат улево да се уредно прелама. */
.flag-opts.long{grid-template-columns:1fr;max-width:760px}
.flag-opts.long .flag-opt{text-align:left;font-size:16px;line-height:1.35}
body.present .flag-opts.long{max-width:min(1000px,92vw)}
body.present .flag-opts.long .flag-opt{font-size:clamp(17px,2.1vh,30px)}
/* избор поља пре игре */
.fg-setup{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.fg-col{min-width:170px}
.fg-list{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.fg-chk{display:flex;align-items:center;gap:7px;font-weight:600;cursor:pointer;padding:2px 0}
.fg-chk input{width:auto;margin:0}
.fg-chk.off{opacity:.45;cursor:default}
#fg_hint .bad{color:#b91c1c;font-weight:700}
/* подаци уз заставу (држава/главни град/континент) */
.flag-facts{display:flex;flex-direction:column;gap:6px;align-items:center;margin:10px 0 4px;font-size:20px}
.flag-q{font-size:18px;font-weight:700;margin:10px 0 12px;text-align:center}
.flag-opt.img{padding:10px;display:flex;align-items:center;justify-content:center;min-height:96px}
.flag-opt.img img{max-height:88px;max-width:100%;object-fit:contain;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.flag-opts.imgs{grid-template-columns:1fr 1fr}
/* ЦЕО ЕКРАН (пројектор): види се само игра */
body.present .topbar,body.present .side,body.present .scrim{display:none!important}
body.present .layout{display:block;height:100vh}
body.present .main{max-width:none;width:100vw;padding:10px 18px;height:100vh;overflow:auto}
body.present .flag-stage{border:0;box-shadow:none;background:transparent;padding:0}
body.present .fg-bar h2{font-size:22px}
body.present .flag-big{min-height:0}
body.present .flag-big img{max-height:min(56vh,620px)}
body.present .flag-facts{font-size:max(20px,min(4.2vw,34px))}
body.present .flag-q{font-size:max(18px,min(3.4vw,28px));margin:14px 0 16px}
body.present .flag-opts{max-width:min(1100px,96vw);gap:14px}
body.present .flag-opt{font-size:max(17px,min(2.6vw,26px));padding:max(14px,1.6vh) 14px}
body.present .flag-opt.img{min-height:max(96px,min(20vh,170px))}
body.present .flag-opt.img img{max-height:max(88px,min(18vh,158px))}
body.present .flag-msg{font-size:max(17px,min(2.6vw,24px))}
body.present .result-big{font-size:max(46px,min(9vw,110px))}

/* кратка порука при дну екрана */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#0a5f45;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* бирач учесника (ђаци/групе): падајући мени + Shift/Ctrl избор */
.pk-list{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;user-select:none;-webkit-user-select:none;background:#fff}
.pk-row{display:flex;gap:9px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-weight:500;line-height:1.25}
.pk-row:last-child{border-bottom:0}
.pk-row:hover{background:#f6faf8}
.pk-row.sel{background:#e3f3ea}
.pk-row .ck{width:18px;height:18px;border:2px solid #9db5a8;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex:none}
.pk-row.sel .ck{background:var(--brand);border-color:var(--brand)}
.pk-row .sub{font-size:12px;color:#64748b;font-weight:400;margin-left:auto;white-space:nowrap}
.pk-filters select{max-width:200px}
.pk-hint{font-size:12px;color:#64748b;margin:4px 0 0}
/* ранг-листе игара */
.gtabs{display:flex;gap:8px;margin:0 0 14px;background:#f1f5f9;padding:4px;border-radius:12px;flex-wrap:wrap}
.gtabs button{flex:1;min-width:150px;border:0;background:transparent;padding:10px;border-radius:9px;cursor:pointer;font-weight:700;color:#475569;font-size:14px}
.gtabs button.active{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rank-tbl td.r{width:36px;text-align:center;font-weight:800;color:var(--brand)}
.rank-tbl tr.top1 td.r{color:#b45309}
.rank-tbl tr.np td{color:#94a3b8;font-style:italic}
.rank-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin:8px 0 4px;background:var(--soft)}
.rank-head b{font-size:15px}
.medal{font-size:15px}
.mybadge{display:inline-flex;align-items:center;gap:6px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:999px;padding:4px 10px;font-weight:700;font-size:13px}
/* соло асоцијације: вредност колоне */
.asoc-sol .worth{font-size:.7em;opacity:.85;font-weight:600}

/* оцене на тестовима: ђаци × датуми */
.oc-wrap{overflow:auto;max-width:100%}
.oc-tbl{border-collapse:separate;border-spacing:0;min-width:100%}
.oc-tbl th,.oc-tbl td{vertical-align:top;text-align:center}
.oc-tbl th.oc-name,.oc-tbl td.oc-name{text-align:left;position:sticky;left:0;background:#fff;z-index:1;white-space:nowrap;min-width:160px;box-shadow:2px 0 0 var(--line)}
.oc-tbl th.oc-name{background:var(--soft)}
.oc-th{min-width:150px}
.oc-date{font-size:14px;font-weight:800;color:var(--brand);text-transform:none}
.oc-title{font-size:12px;font-weight:600;text-transform:none;margin-top:2px;white-space:normal}
.oc-cell{min-width:150px;position:relative}
.oc-cell .oc-t{font-size:11px;color:#64748b;white-space:normal}
.oc-cell .oc-p{font-size:13px;margin-top:2px}
.oc-cell .oc-g{font-size:22px;font-weight:800;line-height:1.1;margin-top:2px}
.oc-cell.ok .oc-g{color:var(--brand)}
.oc-cell.weak .oc-g{color:#b91c1c}
.oc-cell.none{background:#fafafa}
.oc-none{color:#94a3b8;font-style:italic;font-size:12px;padding:10px 0}
.oc-btn{position:absolute;right:4px;top:4px;padding:1px 6px;font-size:12px;opacity:.6}
.oc-btn:hover{opacity:1}

/* резултат теста преко целог екрана */
.result-full{position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:radial-gradient(circle at 50% 30%,#1e6b52,#0a3d2c 70%);animation:rfIn .35s ease-out}
.result-full.weak{background:radial-gradient(circle at 50% 30%,#b45309,#5a2a05 70%)}
@keyframes rfIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.rf-inner{padding:24px;max-width:720px;width:100%}
.rf-title{font-size:clamp(18px,3vw,28px);opacity:.9;font-weight:700}
.rf-score{font-size:clamp(64px,16vw,150px);font-weight:900;line-height:1;margin:14px 0 4px;letter-spacing:-.02em}
.rf-of{font-size:.42em;opacity:.8;font-weight:700}
.rf-pct{font-size:clamp(18px,3.4vw,30px);opacity:.92}
.rf-grade-lbl{margin-top:22px;font-size:clamp(14px,2.2vw,20px);text-transform:uppercase;letter-spacing:.2em;opacity:.8}
.rf-grade{font-size:clamp(72px,18vw,170px);font-weight:900;line-height:1;text-shadow:0 8px 30px rgba(0,0,0,.35)}
.rf-msg{font-size:clamp(20px,3.6vw,34px);font-weight:800;margin-top:10px}
.rf-note{opacity:.85;font-size:clamp(13px,1.6vw,16px);max-width:560px;margin:18px auto 0}
.rf-btn{margin-top:18px;background:#fff;color:#0a3d2c;font-size:18px;padding:12px 34px}
/* научи из грешака */
.learn-q{border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:10px;padding:10px 12px;margin:8px 0;background:#fff}
.learn-ans{margin-top:6px;padding:6px 10px;border-radius:8px;font-size:14px}
.learn-ans .lbl{font-size:12px;font-weight:700;margin-right:6px;text-transform:uppercase;letter-spacing:.04em}
.learn-ans.bad{background:#fef2f2;color:#991b1b}
.learn-ans.ok{background:#ecfdf5;color:#065f46}

/* одговор за усмено: обликовање (подебљано, курзив, истакни +2pt) */
.rich-bar{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.rich-ed{min-height:110px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;line-height:1.5;background:#fff;outline:none;white-space:pre-wrap}
.rich-ed:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,95,69,.12)}
.rich-ed:empty:before{content:attr(data-placeholder);color:#94a3b8}
.oral-hl{font-size:calc(1em + 2pt)}

.oral-img{max-width:100%;max-height:240px;display:inline-block;vertical-align:middle;border-radius:8px;margin:4px 6px;border:1px solid var(--line)}
.oral-q .oral-img{max-height:320px}
.rich-ed .oral-img{max-height:160px}

/* штиклирања у решетки (одељења, групе, категорије): назив у једном реду */
.zcats .zcheck{white-space:nowrap}

/* анализа по питањима */
.qan-tbl td{vertical-align:top}
.qan-tbl .qan-q{max-width:420px}
.qan-tbl .qan-pct{min-width:150px}
.qan-tbl tr.qan-bad td{background:#fef2f2}
.qan-tbl tr.qan-sub td{border-top:0;padding-top:0}
/* ТЕЛЕФОН: анализа по питањима без клизања у страну — сваки ред табеле постаје „картица" (ћелије једна испод друге,
   са називом колоне испред вредности), текст питања се прелама. */
@media (max-width:820px){
  .qan-tbl{display:block;overflow-x:visible;white-space:normal}
  .qan-tbl tbody,.qan-tbl tr,.qan-tbl td{display:block;white-space:normal}
  .qan-tbl tr.qan-head{display:none}
  .qan-tbl tr{padding:8px 0 6px;border-bottom:2px solid var(--line)}
  .qan-tbl tr.qan-sub{padding-top:0;border-bottom:2px solid var(--line);margin-top:-6px}
  .qan-tbl tr.qan-bad td{background:transparent}
  .qan-tbl tr.qan-bad,.qan-tbl tr.qan-bad + tr.qan-sub{background:#fef2f2}
  .qan-tbl td{border-bottom:0;padding:2px 8px;max-width:none}
  .qan-tbl td.qan-n{display:inline-block;width:30px;vertical-align:top;font-weight:700;padding-right:0}
  .qan-tbl td.qan-q{display:inline-block;width:calc(100% - 34px);box-sizing:border-box;vertical-align:top;padding-left:0}
  .qan-tbl td.qan-q b{overflow-wrap:anywhere}
  .qan-tbl td[data-l]{padding-left:38px}
  .qan-tbl td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  .qan-tbl td.qan-pct{min-width:0}
  .qan-tbl td.qan-pct .mon-bar{width:110px;vertical-align:middle}
  .qan-tbl tr.qan-sub td.qan-n{display:none}
  .qan-tbl td.qan-wr{padding-left:38px}
  .qan-tbl .qan-w{display:inline-block;margin:2px 4px 2px 0;white-space:normal}
}
.qan-w{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin:2px 4px 0 0;background:#fff}

/* ============ РЕЖИМ ИГРЕ: СВЕ СТАЈЕ У ЕКРАН, БЕЗ СКРОЛОВАЊА ============
   Док траје партија (заставе држава или организација), екран се прилагођава ВИСИНИ
   прозора — мали лаптоп, велики монитор, телефон или таблет. Слика се смањује колико
   треба, слова прате висину екрана, а дугачак бочни мени скролује сам за себе уместо да
   развлачи целу страницу. `--igra` је додатно смањење које JS укључи САМО ако садржај ни
   после овога не стане (нпр. врло дугачак опис „чиме се бави“ на ниском екрану).
   Иде на крај фајла да надјача правила за цео екран (иста специфичност — одлучује редослед). */
body.igra{overflow:hidden}
body.igra .layout{height:calc(100dvh - var(--topbar,52px));min-height:0;overflow:hidden}
body.igra .side{overflow:auto}
body.igra .main{height:100%;overflow:hidden;display:flex;flex-direction:column;padding:10px 16px}
body.igra .fg-bar{flex:0 0 auto;margin-bottom:4px}
body.igra .flag-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;margin:0;padding:clamp(6px,1.4vh,16px)}
body.igra .flag-big{flex:1 1 auto;min-height:0;padding:2px}
body.igra .flag-big img{max-height:100%;max-width:100%;height:auto}
body.igra .flag-facts{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.3em .8em;margin:.35em 0 .15em;font-size:calc(clamp(14px,2.2vh,24px) * var(--igra,1))}
body.igra .flag-facts>div{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.08);border-radius:.6em;
  padding:.18em .6em;line-height:1.25;max-width:100%}
/* ЗАСТАВА ИМА ПРЕДНОСТ: загарантован део висине (у целом екрану ≈ пола екрана, као код
   застава држава), остатак деле подаци, питање и дугмад. `--zk` је чинилац којим JS
   попушта ту гаранцију САМО ако текст ни смањен не може да стане (низак екран + дуг опис). */
body.igra .flag-big{min-height:calc(30vh * var(--zk,1));max-height:50vh}
body.igra.present .flag-big{min-height:calc(48vh * var(--zk,1));max-height:52vh}
@media (max-width:699px){
  /* узан екран (телефон усправно): ширина ограничава заставу, па гаранција висине не сме да
     остави празну кутију изнад и испод слике */
  body.igra .flag-big,body.igra.present .flag-big{min-height:calc(20vh * var(--zk,1))}
}
body.igra .flag-q{flex:0 0 auto;margin:.45em 0 .5em;
  font-size:calc(clamp(15px,2.5vh,26px) * var(--igra,1))}
body.igra .flag-opts{flex:0 0 auto;gap:clamp(6px,1.3vh,14px)}
body.igra .flag-opt{font-size:calc(clamp(14px,2.2vh,23px) * var(--igra,1));padding:clamp(7px,1.5vh,16px) 12px}
body.igra .flag-opt.img{min-height:0;padding:clamp(5px,1vh,12px)}
body.igra .flag-opt.img img{max-height:calc(clamp(44px,13vh,150px) * var(--igra,1))}
body.igra .flag-msg{flex:0 0 auto;min-height:0;margin-top:clamp(4px,1vh,12px);
  font-size:calc(clamp(14px,2.1vh,21px) * var(--igra,1))}
@media (max-width:520px){
  body.igra .main{padding:8px 10px}
  body.igra .flag-opts{gap:6px}
}

/* ЦЕО ЕКРАН + игра: нема горње траке ни менија, па игра добија целу висину и КРУПНИЈА слова
   (пројектор), али и даље све мора да стане — зато су и овде мере везане за висину екрана. */
body.igra.present .layout{height:100dvh}
body.igra.present .main{height:100%;width:100vw;max-width:none;overflow:hidden;padding:8px 16px}
body.igra.present .flag-facts{font-size:calc(clamp(15px,2.4vh,30px) * var(--igra,1));gap:.3em .9em;margin:.3em 0 .1em}
body.igra.present .flag-q{font-size:calc(clamp(17px,3vh,34px) * var(--igra,1));margin:.4em 0 .4em}
body.igra.present .flag-opts{width:min(1100px,100%);max-width:100%;gap:clamp(8px,1.4vh,16px)}
body.igra.present .flag-opt{font-size:calc(clamp(16px,2.9vh,32px) * var(--igra,1));padding:clamp(7px,1.5vh,18px) 16px}
body.igra.present .flag-opt.img{min-height:0;padding:clamp(6px,1.2vh,14px)}
body.igra.present .flag-opt.img img{max-height:calc(clamp(56px,17vh,210px) * var(--igra,1))}
body.igra.present .flag-msg{font-size:calc(clamp(16px,2.5vh,26px) * var(--igra,1))}
body.igra.present .flag-opts.long{width:min(1000px,100%)}
.flag-opts.mid{grid-template-columns:1fr;max-width:760px}
.flag-opts.mid .flag-opt{text-align:center}
@media (min-width:1000px){ body.igra .flag-opts.mid{grid-template-columns:1fr 1fr;max-width:min(1100px,96vw)} }
body.igra.present .flag-opts.long .flag-opt{font-size:calc(clamp(16px,2.6vh,28px) * var(--igra,1))}

/* ВРЛО НИЗАК ЕКРАН (телефон положено, кратки прозори): добија се висина тако што
   наслов игре нестаје, дугачки одговори иду у две колоне, а размаци се стежу. */
@media (max-height:520px){
  body.igra .fg-bar h2{display:none}
  body.igra .fg-bar{margin-bottom:2px}
  body.igra .flag-stage{padding:4px}
  body.igra .flag-facts{margin:.15em 0 .05em}
  body.igra .flag-q{margin:.25em 0 .3em}
  body.igra .flag-msg{margin-top:2px}
}
@media (max-height:520px) and (min-width:640px){
  body.igra .flag-opts.long{grid-template-columns:1fr 1fr;max-width:none}
  body.igra .flag-opts.long .flag-opt{text-align:left}
}

/* Учење из грешака: део по део (тврдња / празнина / понуђени појам) са ✓/✗ */
.learn-cmp{margin-top:6px}
.cmp{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:5px 9px;border-radius:8px;margin:3px 0;font-size:14px;background:var(--soft)}
.cmp.ok{background:#dcfce7}.cmp.bad{background:#fee2e2}.cmp.miss{background:#fef3c7}.cmp.none{color:var(--muted)}
.cmp .cmp-n{font-weight:700;min-width:22px}.cmp .cmp-t{flex:1 1 200px}.cmp .cmp-a,.cmp .cmp-c{white-space:nowrap}
.cmp.ok .cmp-m{color:#166534;font-weight:900}.cmp.bad .cmp-m{color:#991b1b;font-weight:900}
.cmp.bad .cmp-a b{color:#991b1b}.cmp .cmp-c b{color:#166534}

/* Рад теста: без копирања/означавања текста питања (поља за унос остају нормална) */
.nocopy{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nocopy input,.nocopy textarea,.nocopy select,.nocopy [contenteditable]{-webkit-user-select:text;user-select:text}
.nocopy img{pointer-events:none;-webkit-user-drag:none}
.nocopy .bm-map img,.nocopy .mt-map img{pointer-events:none}

/* v61: без „повуци да освежиш" на телефону (освежавање стране усред теста = избацивање из теста) */
html, body, .main, .layout { overscroll-behavior-y: contain; }
.login-ver { text-align: center; font-size: 11px; color: #94a3b8; margin: 14px 0 0; }
/* дневник грешака (Подешавања) */
pre.dnevnik { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; max-height: 420px; overflow: auto; margin: 0; }
pre.dnevnik .dn-bad { color: #fca5a5; }
pre.dnevnik .dn-sys { color: #93c5fd; }

/* v63: РАЗГОВОР О ТЕСТУ — пројектор: преко ЦЕЛОГ прозора (без траке и менија програма), а величину слова програм
   сам подеси тако да питање, тачни одговори и „ко је погрешио" стану без клизања (App.qrvFit). Све величине у em. */
body.qrv-on { overflow: hidden; }
.qrv { position: fixed; inset: 0; z-index: 60; background: #eef2f6; display: flex; flex-direction: column; padding: 10px 14px; box-sizing: border-box; }
.qrv-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; flex: 0 0 auto; }
.qrv-stage { flex: 1 1 auto; min-height: 0; display: flex; }
.qrv-card { flex: 1 1 auto; min-width: 0; overflow: hidden; margin: 0 !important; padding: .7em 1.1em; font-size: 22px; }
.qrv-card.qrv-scroll { overflow: auto; }
.qrv-num { font-size: .78em; font-weight: 700; color: var(--muted, #64748b); margin-bottom: .3em; }
.qrv-num .muted { font-size: .85em; font-weight: 400; }
.qrv-q { font-size: 1.3em; line-height: 1.3; font-weight: 700; margin: 0 0 .55em; }
.qrv-q.qrv-long { font-weight: 600; line-height: 1.5; }
.qrv-blank { display: inline-block; min-width: 4.2em; height: 1em; border-bottom: 2px solid #334155; margin: 0 .12em; vertical-align: baseline; }
.qrv-in { color: #0a5f45; border-bottom: 2px solid #0a5f45; padding: 0 .15em; white-space: nowrap; }
.qrv-img img { max-width: 100%; max-height: 38vh; border-radius: 10px; margin: 0 0 .5em; }
.qrv-opts { font-size: 1.05em; line-height: 1.45; margin: 0 0 .5em 1.3em; }
.qrv-opts li.ok, .qrv-opts2 .ok, .qrv b.ok { color: #0a5f45; }
.qrv b.bad { color: #b91c1c; }
.qrv-opts2 { display: flex; gap: 1.2em; font-size: 1.05em; margin: 0 0 .5em; }
.qrv-ans { font-size: .95em; margin: .3em 0 .5em; }
.qrv-match ol { font-size: 1em; margin: 0 0 .4em 1.3em; }
.qrv-h { font-size: .85em; margin: .7em 0 .35em; color: #b91c1c; }
.qrv .table.qrv-tbl { font-size: .74em; }
.qrv .table.qrv-tbl td, .qrv .table.qrv-tbl th { font-size: 1em; padding: .28em .5em; vertical-align: top; }
.qrv .table.qrv-tbl th { font-size: .8em; }
.qrv-w { display: inline-block; margin: 0 .2em .1em 0; }
.qrv-stu { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: .3em .6em; margin: 0 0 .35em; font-size: .74em; break-inside: avoid; }
.qrv-stu-h { font-weight: 700; margin-bottom: .2em; display: flex; gap: 8px; align-items: center; }
.qrv-stu .cmp-a { white-space: normal; }
.qrv-none { font-size: .95em; color: #0a5f45; margin: .3em 0 .5em; }
.qrv-ok { margin-top: .5em; color: #0a5f45; font-size: .74em; }
.qrv-ok summary { cursor: pointer; font-weight: 600; }
.qrv-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; flex: 0 0 auto; }
@media (max-width: 820px) { .qrv { padding: 6px; } .qrv-card { padding: .5em .7em; } }

/* ---------- СИГУРНОСНИ КОД ШТАМПАНОГ ТЕСТА: избор при штампи ---------- */
.mono { font-family: Consolas, "Courier New", ui-monospace, monospace; letter-spacing: .02em; }
.pc-opts { display: flex; flex-direction: column; gap: 8px; }
.pc-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400; line-height: 1.4; font-size: 15px; color: var(--ink); }
.pc-opt:hover { background: #f8fafc; }
.pc-opt input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.pc-opt .muted { font-size: 13px; }
.pc-each { margin: -2px 0 2px 34px; padding: 8px 12px; border-left: 3px solid var(--brand); background: var(--brand-l); border-radius: 0 10px 10px 0; font-size: 14px; }
.pc-each input[type=number] { padding: 6px 8px; }
.pc-dup { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-weight: 400; cursor: pointer; }
.pc-dup input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }

/* ---------- ПРОВЕРА ВАЛИДНОСТИ ШТАМПАНОГ ТЕСТА ---------- */
.pv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-actions .btn { font-size: 15px; padding: 11px 16px; }
.pv-file { position: relative; overflow: hidden; cursor: pointer; }
.pv-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pv-cam { position: relative; margin-top: 12px; max-width: 560px; border-radius: 14px; overflow: hidden; background: #000; }
.pv-cam video { display: block; width: 100%; height: auto; max-height: 62vh; }
.pv-cam .pv-aim { position: absolute; left: 50%; top: 50%; width: 45%; height: 80%; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.95); border-radius: 12px; box-shadow: 0 0 0 2000px rgba(0,0,0,.30); pointer-events: none; }
.pv-cam .pv-camres { position: absolute; left: 8px; right: 8px; top: 8px; padding: 8px 12px; border-radius: 10px; font-weight: 800; font-size: 15px; line-height: 1.3; color: #fff; background: rgba(22,163,74,.93); box-shadow: 0 2px 10px rgba(0,0,0,.3); animation: pvflash .45s ease-out; pointer-events: none; }
.pv-cam .pv-camres.warn { background: rgba(217,119,6,.95); } .pv-cam .pv-camres.bad { background: rgba(220,38,38,.95); }
@keyframes pvflash { 0% { transform: scale(1.06); filter: brightness(1.4); } 100% { transform: scale(1); filter: none; } }
.pv-cam .pv-camhint { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; color: #fff; font-weight: 700; font-size: 14px; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; }
.pv-manual { margin-top: 14px; }
.pv-manual input { font-size: 17px; letter-spacing: .06em; text-transform: uppercase; min-width: 0; flex: 1 1 160px; }
.pv-manual .row { flex-wrap: wrap !important; }
.pv-expect { margin-top: 12px; }
.pv-res { border-left: 8px solid var(--line); }
.pv-res.ok { border-left-color: #16a34a; background: #f0fdf4; }
.pv-res.warn { border-left-color: #f59e0b; background: #fffbeb; }
.pv-res.bad { border-left-color: #dc2626; background: #fef2f2; }
.pv-big { font-size: 26px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; }
.pv-res.ok .pv-big { color: #15803d; } .pv-res.warn .pv-big { color: #b45309; } .pv-res.bad .pv-big { color: #b91c1c; }
.pv-sub { margin-top: 4px; font-size: 15px; }
.pv-codeline { margin-top: 6px; color: var(--muted); }
.pv-codeline b { color: var(--ink); font-size: 16px; }
.pv-title { font-size: 20px; font-weight: 700; margin: 10px 0 8px; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pv-grid > div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.pv-grid span { display: block; font-size: 12px; color: var(--muted); }
.pv-grid b { font-size: 17px; }
.pv-grid small { display: block; color: var(--muted); font-size: 12px; }
.pv-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #fef3c7; color: #7c2d12; font-weight: 600; }
.pv-near { margin-top: 10px; }
.pv-parts-h { margin: 12px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.pv-code { display: flex; flex-wrap: wrap; gap: 4px; }
.pvp { display: inline-flex; flex-direction: column; align-items: center; border-radius: 8px; padding: 4px 7px; min-width: 34px; }
.pvp b { font-family: Consolas, "Courier New", monospace; font-size: 17px; letter-spacing: .08em; }
.pvp small { font-size: 11px; white-space: nowrap; }
.pvp-I { background: #dbeafe; } .pvp-G { background: #fce7f3; } .pvp-D { background: #dcfce7; } .pvp-S { background: #fef9c3; }
.pvp-E { background: #ffedd5; } .pvp-C { background: #ede9fe; } .pvp-N { background: #e5e7eb; } .pvp-K { background: #f1f5f9; color: #64748b; }
.pv-btns { gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pv-hist tr[class^="pvh-"] { cursor: pointer; }
.pv-hist tr.pvh-bad td { background: #fef2f2; } .pv-hist tr.pvh-warn td { background: #fffbeb; }
.pvl h4 { margin: 16px 0 6px; }
.pvl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.pvl-c { border: 1px solid var(--line); border-radius: 8px; text-align: center; padding: 3px 0; background: #fff; }
.pvl-c b { display: block; font-family: Consolas, "Courier New", monospace; font-size: 17px; }
.pvl-c span { font-size: 15px; font-weight: 700; color: #0f172a; }
.pvl-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 600; }
.pvl-order td { vertical-align: middle; }
.pvl-lock { margin-top: 14px; padding: 8px 10px; border-radius: 10px; background: var(--soft); font-weight: 600; }
@media (max-width: 820px) {
  .pv-big { font-size: 21px; }
  .pv-actions .btn { flex: 1 1 100%; }
  .pv-cam { max-width: none; }
}