:root { font-family: Inter, system-ui, sans-serif; color: #211d18; background: #f5f1e8; line-height: 1.45; --ink: #211d18; --paper: #fffdf8; --red: #9f382e; --line: #d9d0c2; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: .65rem 1rem; background: var(--ink); color: white; }
button:disabled { cursor: default; opacity: .4; }
button.secondary, .ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--red); }
header { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(1rem, calc((100vw - 1000px) / 2)); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #f5f1e8ee; backdrop-filter: blur(12px); z-index: 10; }
header h1 { font: 1.55rem Georgia, serif; margin: 0; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account { justify-self: end; }
.hidden { visibility: hidden; }
main { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
.toolbar { display: flex; gap: .7rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 220px; }
.list { display: grid; gap: .7rem; }
.card { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: .8rem; box-shadow: 0 5px 18px #5b482610; }
.thumb { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; background: #e5ded2; display: grid; place-items: center; font-size: 1.25rem; }
.card h2 { font-size: 1rem; margin: 0; }
.card p { margin: .15rem 0 0; color: #6c6256; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.open-game, .open-doc { cursor: pointer; min-width: 0; }
.actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.actions button { padding: .45rem .65rem; }
.empty { text-align: center; padding: 5rem 1rem; color: #6c6256; }
.empty strong { font: 1.6rem Georgia, serif; color: var(--ink); display: block; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: white; padding: .7rem; color: var(--ink); }
label { display: grid; gap: .3rem; margin: .8rem 0; }
dialog { border: 0; border-radius: 18px; width: min(560px, calc(100% - 2rem)); padding: 0; box-shadow: 0 20px 80px #211d1855; }
dialog::backdrop { background: #211d1877; }
#modal-body { padding: 1.5rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.error { color: var(--red); }
.progress { background: #eee1bd; border: 1px solid #d8c58d; padding: .8rem 1rem; border-radius: 12px; margin-bottom: 1rem; }
.results { display: grid; gap: .5rem; margin-bottom: 1rem; }
.result { text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
mark { background: #ffe36f; color: inherit; font-weight: 700; }
.viewer { background: #2c2925; min-height: 60vh; border-radius: 14px; overflow: hidden; }
.pdf { width: 100%; height: 75vh; border: 0; background: white; }
.photo-scroll { width: 100%; height: 75vh; overflow: auto; display: grid; place-items: start center; }
.photo-page { position: relative; width: min(100%, 900px); line-height: 0; transform-origin: top left; }
.photo-page img { width: 100%; height: auto; }
.photo-page.zoomed { width: 250%; max-width: none; }
.highlight { position: absolute; background: #ffe00055; border: 2px solid #ffd000; pointer-events: none; }
.pager { justify-content: center; margin-top: 1rem; }
.loader { padding: 2rem; text-align: center; }
#toast { display: none; position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--ink); color: white; border-radius: 10px; padding: .8rem 1rem; z-index: 30; }
.unlock { min-height: 100vh; display: grid; place-items: center; }
.unlock form { width: min(400px, 100%); background: var(--paper); padding: 2rem; border-radius: 18px; border: 1px solid var(--line); }
@media (max-width: 720px) {
  header { grid-template-columns: auto 1fr auto; gap: .5rem; height: 62px; }
  header h1 { justify-self: center; font-size: 1.2rem; }
  main { padding: 1rem .7rem; }
  .card { grid-template-columns: 48px 1fr; gap: .7rem; }
  .thumb { width: 48px; height: 48px; }
  .actions { grid-column: 1 / -1; justify-content: stretch; }
  .actions button { flex: 1; }
  .photo-scroll, .pdf { height: 70vh; }
}