body { font-family: system-ui, -apple-system, sans-serif; margin: 0; background: #f2f4f4; }
header { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
         background: #2c3e50; color: #fff; }
header h1 { font-size: 1rem; margin: 0; flex: 1; }
.hbtn { background: #46627f; color: #fff; border: 0; padding: 7px 10px;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.hidden { display: none !important; }

/* --- billentyűzet-fókusz (a11y) --- */
:focus-visible { outline: 3px solid #14603a; outline-offset: 2px; }
#maincontent:focus { outline: none; }
.hs:focus-visible { outline: 3px solid #b02a1c; outline-offset: -1px; }
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 50;
            background: #2c3e50; color: #fff; padding: 8px 12px;
            border-radius: 0 0 6px 0; }
.skiplink:focus { left: 0; }

#mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: 12px; padding: 14px; }
.mos { background: #fff; border: 1px solid #ddd; border-radius: 6px; cursor: pointer;
       overflow: hidden; font: inherit; padding: 0; }
.mos:hover { box-shadow: 0 3px 12px rgba(0,0,0,.22); }
.mos img { width: 100%; display: block; background: #f4f4f4; }

#viewerwrap { padding: 10px; }
#imgpane { overflow: auto; background: #ddd; border-radius: 6px; }
#imgbox { position: relative; display: inline-block; margin: 0 auto; }
#pageimg { display: block; width: 100%; }
#hotspotbox { position: absolute; inset: 0; }
.hs { position: absolute; border: 1px solid rgba(30,132,73,.9);
      background: rgba(232,245,238,.22); border-radius: 2px; cursor: pointer; }
.hs:hover { background: rgba(30,132,73,.30); }
.hs.selected { border-color: #c0392b; background: rgba(192,57,43,.3); }

#details { position: fixed; top: 60px; right: 14px;
           width: min(330px, calc(100vw - 28px)); background: #fff;
           border: 1px solid #ccc; border-radius: 6px; padding: 14px;
           box-shadow: 0 4px 16px rgba(0,0,0,.18); z-index: 10;
           max-height: calc(100vh - 80px); overflow: auto; }
@media (max-width: 600px) {
  #details { top: auto; bottom: 68px; left: 10px; right: 10px; width: auto;
             max-height: 45vh; padding: 10px; }
}
#details h3 { margin: 0 0 10px; color: #1e8449; padding-right: 30px; }
#details table { width: 100%; border-collapse: collapse; }
#details td { padding: 5px 4px; border-bottom: 1px solid #eee;
              font-size: .9rem; vertical-align: top; }
#details td:first-child { color: #666; width: 45%; }
.xclose { position: absolute; top: 8px; right: 10px; border: 0; background: none;
          font-size: 1rem; color: #767676; cursor: pointer; padding: 2px 6px; }
.xclose:hover { color: #c0392b; }

#zoombar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
           display: flex; gap: 2px; align-items: center; background: #fff;
           border: 1px solid #ccc; border-radius: 8px; padding: 4px 6px;
           box-shadow: 0 3px 12px rgba(0,0,0,.2); z-index: 6; }
#zoombar button { border: 0; background: none; cursor: pointer; padding: 4px 7px;
                  border-radius: 5px; color: #2c3e50; display: flex;
                  align-items: center; font-size: 15px; }
#zoombar button:hover { background: #eef2f5; }
#zoombar button:disabled { opacity: .3; cursor: default; background: none; }
#zoombar svg { display: block; }
#zoomslider { width: 130px; accent-color: #2c3e50; cursor: pointer; }
#zoomlab { min-width: 40px; text-align: center; font-size: .8rem; color: #555; }
#imgpane.pannable { cursor: grab; }
#imgpane.grabbing { cursor: grabbing; }
.navarrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
            width: 46px; height: 46px; border: 0; border-radius: 50%;
            background: rgba(44,62,80,.85); color: #fff; font-size: 28px;
            line-height: 1; cursor: pointer; }
.navarrow:hover { background: rgba(44,62,80,.95); }
.navarrow:disabled { opacity: .22; cursor: default; }
.navarrow.left { left: 14px; }
.navarrow.right { right: 14px; }
.iconbtn { padding: 6px 9px; }
.iconbtn svg { display: block; }

#searchwrap { padding: 14px; }
#searchbar { display: flex; gap: 8px; margin-bottom: 10px; }
#searchinput { flex: 1; padding: 9px 12px; border: 1px solid #bbb; border-radius: 6px;
               font-size: 1rem; }
#searchfield { padding: 9px; border: 1px solid #bbb; border-radius: 6px; background: #fff; }
#searchcount { color: #555; font-size: .85rem; margin: 0 0 8px 2px; }
#searchtablewrap { overflow: auto; background: #fff; border: 1px solid #ddd;
                   border-radius: 6px; max-height: calc(100vh - 190px); }
#searchtable { width: 100%; border-collapse: collapse; }
#searchtable th { position: sticky; top: 0; background: #2c3e50; color: #fff;
                  text-align: left; padding: 8px 10px; font-size: .8rem;
                  white-space: nowrap; }
#searchtable td { padding: 7px 10px; border-bottom: 1px solid #eee;
                  font-size: .9rem; vertical-align: top; }
#searchtable tbody tr:nth-child(even) { background: #f6f8f8; }
#searchtable tbody tr:hover { background: #eef5ef; }
#searchtable a { color: #14603a; text-decoration: none; font-weight: 600;
                 white-space: nowrap; }
#searchtable a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  #searchbar { flex-wrap: wrap; }
  #searchinput { min-width: 100%; }
  #searchtable th, #searchtable td { padding: 6px 7px; font-size: .82rem; }
}

footer { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
         padding: 12px 16px 20px; color: #555; font-size: .85rem; }
footer a { color: #14603a; font-weight: 600; }

/* adatvédelem / 404 oldal */
.legal { max-width: 720px; margin: 0 auto; padding: 20px 16px 30px; }
.legal h2 { font-size: 1rem; color: #2c3e50; margin: 18px 0 6px; }
.legal p { line-height: 1.6; color: #333; margin: 6px 0; }
.legal a { color: #14603a; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}