/* Vzhled testu dopravních značek */

:root {
  color-scheme:light dark}
* {
  box-sizing:border-box}
body {
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  margin:0;
  padding:14px;
  color:#16283a;
  background:#f2f5f9}
.app {
  max-width:570px;
  margin:0 auto}
.hd {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:2px 0 14px}
.eyebrow {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#65778d;
  font-weight:800}
.hd h2 {
  font-size:21px;
  line-height:1.2;
  margin:3px 0 0}
.counter {
  font-weight:800;
  font-size:12px;
  color:#175ba7;
  background:#e1edfe;
  border-radius:40px;
  padding:7px 10px;
  white-space:nowrap}
.pane {
  background:#fff;
  box-shadow:0 4px 20px rgba(13,43,75,.065);
  border:1px solid #dee6f0;
  border-radius:18px;
  padding:16px;
  margin-bottom:12px}
.label {
  display:block;
  color:#516478;
  font-weight:700;
  font-size:13px;
  margin-bottom:7px}
.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px}
.grid .full {
  grid-column:1/-1}
select,input[type=text] {
  font-family:inherit;
  width:100%;
  font-size:16px;
  border:1px solid #b7c7da;
  background:#fff;
  border-radius:12px;
  padding:12px 11px;
  color:#152637;
  outline-offset:3px}
select:focus,input:focus {
  border-color:#327aca;
  outline:2px solid #bddefb}
.primary,.secondary,.tiny {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-weight:800;
  font-family:inherit;
  border-radius:12px;
  border:1px solid transparent}
.primary {
  background:#1765bc;
  color:#fff;
  padding:13px 18px;
  font-size:15px}
.secondary {
  background:#eef4fb;
  color:#1a568e;
  border:1px solid #cadbef;
  padding:12px 16px}
.tiny {
  background:#fff;
  border:1px solid #cbd6e4;
  color:#355373;
  padding:8px 12px;
  font-size:12px}
button:disabled {
  opacity:.42;
  cursor:not-allowed}
.sub {
  font-size:12px;
  color:#6c7a8e;
  line-height:1.5;
  margin:10px 0 0}
.row {
  display:flex;
  gap:10px;
  align-items:center}
.row.wrap {
  flex-wrap:wrap}
.between {
  justify-content:space-between}
.meter {
  height:8px;
  border-radius:20px;
  background:#e6edf4;
  overflow:hidden;
  margin:12px 0 14px}
.meter>div {
  height:100%;
  background:#2687c9;
  transition:width .25s}
.question {
  font-size:19px;
  font-weight:800;
  margin:0}
.picture {
  min-height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:#f3f6f9;
  border-radius:15px;
  margin:14px 0 15px}
.picture svg {
  max-height:235px;
  width:100%;
  max-width:290px;
  display:block}
.picture img {
  width:100%;
  max-width:280px;
  max-height:280px;
  object-fit:contain;
  display:block;
  border-radius:7px}
.questionline {
  display:flex;
  align-items:center;
  justify-content:space-between}
.badge {
  font-size:11px;
  color:#62758a;
  background:#eef2f7;
  border-radius:30px;
  padding:6px 9px;
  font-weight:700}
.answer {
  margin-bottom:11px}
.results {
  padding:13px;
  border-radius:12px;
  margin-top:12px;
  border:1px solid #bcd2dd;
  background:#f6fafb;
  font-size:14px;
  line-height:1.5}
.results.yes {
  border-color:#9dceaf;
  background:#f0f9f1}
.results.no {
  border-color:#efc19d;
  background:#fff8eb}
.results strong {
  font-size:15px}
.results p {
  margin:6px 0}
.muted {
  color:#5c6e80}
.stat {
  font-size:42px;
  font-weight:900;
  margin:8px 0 4px}
.scoregrid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:18px 0}
.scorebox {
  background:#eef4f8;
  border-radius:12px;
  text-align:center;
  padding:12px 6px}
.scorebox b {
  display:block;
  font-size:23px}
.scorebox small {
  font-size:11px;
  color:#53687c}
.review {
  max-height:340px;
  overflow:auto}
.reviewitem {
  padding:12px 0;
  border-bottom:1px solid #e4e9f0;
  font-size:13px}
.reviewitem:last-child {
  border:0}
.reviewitem p {
  margin:2px 0}
.footnote {
  font-size:11px;
  line-height:1.5;
  color:#687a90;
  padding:2px 8px 22px}
.hide {
  display:none!important}
@media (prefers-color-scheme:dark) {
  body {
  background:#101924;
  color:#e9f1f9}
.pane {
  background:#182536;
  border-color:#2c4157;
  box-shadow:none}
.eyebrow,.sub,.muted,.footnote,.label {
  color:#a9b8c9}
.badge,.scorebox {
  background:#213448;
  color:#d2dfed}
.picture {
  background:#293543}
select,input[type=text] {
  background:#122030;
  color:#f2f7fc;
  border-color:#51677a}
.secondary {
  background:#274461;
  color:#dfedff;
  border-color:#456582}
.tiny {
  background:#26384c;
  color:#e4effb;
  border-color:#456582}
.meter {
  background:#2b4259}
.results {
  background:#203343;
  color:#f1f7ff;
  border-color:#55738a}
.results.yes {
  background:#183d33;
  border-color:#357d65}
.results.no {
  background:#423523;
  border-color:#a9823f}
.reviewitem {
  border-color:#314459}
}


.gcard img {
  height:150px;
  cursor:zoom-in}
.gcard {
  min-width:145px}
#picture {
  cursor:zoom-in;
  min-height:260px}
#picture img {
  max-height:340px;
  max-width:350px}
#zoomShade {
  position:fixed;
  inset:0;
  background:#0e1729e8;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  padding:18px}
#zoomShade.active {
  display:flex}
#zoomShade img {
  max-width:98vw;
  max-height:79vh;
  object-fit:contain;
  background:white;
  border-radius:6px}
#zoomShade svg {
  width:90vw;
  max-width:700px;
  max-height:75vh}
#zoomShade .zbtn {
  border:1px solid #9db5cf;
  border-radius:11px;
  background:#fff;
  color:#0b3764;
  font-size:15px;
  font-weight:700;
  padding:10px 19px;
  cursor:pointer}
.pane:focus-within {
  scroll-margin-top:12px}
#problem {
  font-size:12px;
  cursor:pointer;
  border:0;
  color:#315b86;
  background:transparent;
  text-decoration:underline}
#issueList {
  white-space:pre-wrap;
  font-size:12px;
  color:#a14b32;
  margin-top:10px}

.gcard {
  border:1px solid #d8e2ed;
  border-radius:12px;
  padding:10px;
  background:#f9fbfe;
  text-align:center;
  font-size:12px;
  color:#213349}
.gcard img {
  max-width:100%;
  height:105px;
  object-fit:contain}
.gcard strong {
  display:block;
  margin:5px 0 2px}


/* Galerie: malé obrázky jsou viditelné okamžitě; čistá grafika se doplňuje postupně. */
#gallery-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}
.gcard{content-visibility:auto;contain-intrinsic-size:245px;min-height:215px}
.gcard img{display:block;width:100%;height:148px;object-fit:contain;background:#fff;border-radius:10px}
.gcard .image-status{font-size:10px;color:#728198;margin-top:2px}
.gcard span{display:block;line-height:1.35;overflow-wrap:anywhere}
#gallery-content{overscroll-behavior:contain}
@media(max-width:410px){#gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.gcard{padding:7px}.gcard img{height:125px}}


/* Zpráva při zjištění novějšího vydání na hostingu. */
.update-notice[hidden] { display: none !important; }
.update-notice {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 10000; display: flex; gap: 12px; align-items: center;
  justify-content: space-between; width: min(640px, calc(100% - 24px));
  border: 1px solid #93b6d6; background: #edf7ff; color: #153d63;
  box-shadow: 0 9px 30px #193b5330; border-radius: 12px;
  padding: 12px 14px; font-size: 14px; font-weight: 650;
}
.update-notice button {
  border: 0; padding: 9px 13px; border-radius: 8px; background: #155eac;
  color: #fff; cursor: pointer; font: inherit; white-space: nowrap;
}
@media (max-width: 420px) { .update-notice {flex-wrap: wrap;} }

/* Vynucený jednotný tmavý režim – všechny části včetně galerie na mobilu. */
:root{color-scheme:dark}
html{background:#0b1420}
body{background:#0b1420!important;color:#e8f0fb!important;min-width:0}
.app{width:100%;max-width:760px}
.pane{background:#172537!important;color:#e8f0fb;border:1px solid #30455d!important;box-shadow:0 12px 28px #050c1655}
.hd h2,.question,.gcard strong{color:#f0f6ff}
.eyebrow,.sub,.muted,.footnote,.label{color:#b4c4d7!important}
.counter,.badge,.scorebox{background:#223750;color:#d9e9fc}
.picture{background:#223349}
select,input[type=text]{background:#0d1b2b!important;color:#f5faff!important;border-color:#506781!important;min-height:48px}
select option{background:#142337;color:#e7f2ff}
.primary{background:#277acb;color:#fff;min-height:48px}
.primary:hover{background:#338de1}
.secondary,.tiny{background:#253e59!important;color:#e6f2ff!important;border-color:#55728e!important;min-height:44px}
.meter{background:#30445b}
.results{background:#24384e;color:#f5faff;border-color:#607e9c}
.results.yes{background:#163e34;border-color:#459a79}
.results.no{background:#49372a;border-color:#b48850}
.reviewitem{border-color:#354a64}
.gcard{background:#1c2e43!important;border-color:#3a536b!important;color:#e5effb!important}
.gcard span,.gcard .image-status{color:#b9c9da!important}
.gcard img{background:#eaf0f7}
#problem{color:#9bcaff}
#issueList{color:#f6aa8d}
#dalsi-moznosti{border-color:#395a78!important}
#zoomShade .zbtn{background:#223e5c;color:#f5faff;border-color:#7794ac}
.row{min-width:0;flex-wrap:wrap}
#done .row{gap:10px}
#done .row button{flex:1 1 160px}
@media(max-width:600px){body{padding:10px}.app{max-width:100%}.hd{align-items:flex-start}.hd h2{font-size:19px}.pane{padding:14px;border-radius:13px}.grid{grid-template-columns:1fr}.questionline{gap:10px;flex-wrap:wrap}.picture{min-height:195px}#picture{min-height:220px}#picture img{max-width:100%;max-height:min(46vh,340px)}.scoregrid{gap:5px}.scorebox{padding:9px 3px}.scorebox b{font-size:20px}#gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#dalsi-moznosti .row>a{flex:1 1 130px;text-align:center}}
@media(max-width:350px){.hd{flex-wrap:wrap}.scorebox small{font-size:10px}}