:root { --ink:#171714; --paper:#f4f1e9; --white:#fff; --line:#d7d1c4; --accent:#9c2f23; --muted:#6f6b63; --ok:#2e684a; --warn:#9a5c12; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.access-body { min-height:100svh; display:grid; place-items:center; padding:24px; }
.access-screen { width:min(100%,420px); height:auto; padding:0; overflow:visible; }
.access-card { display:grid; gap:16px; border:1px solid var(--line); border-radius:14px; padding:30px; background:white; box-shadow:0 18px 60px #2b22121f; }
.access-card h1 { margin:0 0 6px; }
.access-card label { display:grid; gap:7px; color:var(--muted); font-weight:800; }
.access-card input { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:white; color:var(--ink); font-size:20px; font-weight:800; letter-spacing:.12em; }
.access-card button { min-height:42px; border:0; border-radius:999px; background:var(--ink); color:white; font-weight:850; cursor:pointer; }
.access-error { margin:0; color:var(--accent); font-weight:800; }
.topbar { height:86px; display:grid; grid-template-columns:minmax(0,1fr) auto auto 42px; align-items:center; gap:14px; padding:10px clamp(20px,5vw,60px); background:rgba(244,241,233,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { min-width:0; }
h1 { margin:-2px 0 0; font:700 clamp(32px,3.2vw,44px)/.9 Georgia,serif; letter-spacing:-.03em; }
.eyebrow { margin:0 0 2px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.subtitle { margin:5px 0 0; color:var(--muted); font-size:13px; }
.page-tally { justify-self:center; min-width:150px; padding:7px 14px; border:1px solid var(--line); border-radius:8px; background:#fffaf0; text-align:center; box-shadow:0 4px 14px #2b221210; }
.page-tally-label,.page-tally span { display:block; color:var(--muted); font-size:10px; font-weight:800; line-height:1.1; text-transform:uppercase; }
.page-tally strong { display:block; margin:1px 0; font:800 clamp(25px,2.4vw,34px)/.95 Georgia,serif; color:var(--accent); }
#pageFormula { text-transform:none; }
.export-button { justify-self:end; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:999px; padding:0; background:var(--ink); color:white; cursor:pointer; box-shadow:0 4px 15px #0002; }
.export-button svg { width:21px; height:21px; }
.name-browser-button { justify-self:end; display:flex; align-items:center; gap:7px; min-width:0; height:42px; border:1px solid var(--line); border-radius:999px; padding:0 14px; background:white; color:var(--ink); font-weight:800; cursor:pointer; box-shadow:0 4px 14px #2b221210; }
.name-browser-button svg { width:19px; height:19px; flex:0 0 auto; }
.name-browser-button:hover { border-color:var(--ink); }
main { display:grid; grid-template-rows:auto auto minmax(0,1fr); width:min(100%,1280px); height:calc(100svh - 86px); margin:auto; padding:14px clamp(14px,3vw,34px) 16px; overflow:hidden; }
main.is-name-browser { grid-template-rows:minmax(0,1fr); width:min(100%,1500px); }
main.is-name-browser .summary,main.is-name-browser .toolbar,main.is-name-browser .empty,main.is-name-browser .deck-shell { display:none; }
.summary { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); background:#fff8; }
.summary-filter { display:block; min-width:0; padding:10px 10px; border:0; border-right:1px solid var(--line); background:transparent; color:inherit; text-align:center; cursor:pointer; }
.summary-filter:last-child { border-right:0; }
.summary-filter:hover,.summary-filter.is-active { background:#fff; box-shadow:inset 0 -3px 0 var(--ink); }
.summary-filter[data-filter="incomplete"] { background:#fffaf0; }
.summary-filter[data-filter="incomplete"] strong { color:var(--accent); }
.summary-filter[data-filter="incomplete"].is-active { background:#fff; box-shadow:inset 0 0 0 2px var(--accent), inset 0 -4px 0 var(--accent); }
.summary strong,.summary span { display:block; }
.summary strong { font:800 clamp(22px,2.2vw,31px) Georgia,serif; line-height:.95; }
.summary span { overflow:hidden; color:var(--muted); font-size:clamp(15px,1.35vw,20px); font-weight:800; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.toolbar { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin:10px 0; }
.search { flex:1; }
.search input { width:100%; min-height:38px; border:1px solid var(--line); border-radius:8px; background:white; padding:7px 12px; }
.save-status { color:var(--muted); font-size:12px; }
.deck-shell { position:relative; display:grid; grid-template-columns:minmax(360px,720px); align-items:stretch; justify-content:center; min-height:0; height:100%; overflow:hidden; }
.deck-shell.is-empty { min-height:180px; }
.catalog { display:flex; min-width:0; min-height:0; }
.nav-button { position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:54px; height:78px; border:1px solid var(--line); border-radius:16px; background:#fffaf0dd; color:var(--ink); font-size:44px; line-height:1; cursor:pointer; box-shadow:0 4px 14px #2b221214; backdrop-filter:blur(5px); }
.nav-button.prev { left:14px; }
.nav-button.next { right:14px; }
.nav-button:hover { border-color:var(--ink); }
.nav-button:disabled { opacity:.25; cursor:not-allowed; }
.photo-card { display:grid; grid-template-rows:38px minmax(0,1fr) auto; width:100%; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 12px 38px #2b221218; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; border-bottom:1px solid var(--line); background:#fbf8f0; }
.position-label { color:var(--muted); font-weight:750; }
.image-wrap { position:relative; height:auto; min-height:0; background:#dedad0; }
.image-wrap img { width:100%; height:100%; object-fit:contain; }
.resolution { display:none; }
.fields { padding:16px 22px 0; }
.filename { overflow:hidden; margin:0 0 8px; color:var(--muted); font-size:12px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.fields label { display:block; color:var(--muted); font-size:12px; font-weight:750; }
.fields input[type=text],.fields select { width:100%; margin-top:4px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:white; color:var(--ink); font-size:14px; font-weight:650; }
.fields input[hidden] { display:none; }
.custom-dimensions,.custom-technique { margin-top:7px!important; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.checks { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin:16px -22px 0; border-top:1px solid var(--line); }
.checks label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:var(--ink); font-size:14px; font-weight:750; }
.checks label + label { border-left:1px solid var(--line); }
.checks input { width:18px; height:18px; }
.warning { margin:8px 0; padding:8px; border-radius:5px; background:#fff2d9; color:var(--warn); font-size:12px; }
.state { display:inline-block; border-radius:99px; padding:5px 10px; background:#eee; color:var(--muted); font-size:12px; font-weight:800; }
.state.complete { background:#dcefe4; color:var(--ok); }.state.warning-state { background:#fff0d5; color:var(--warn); }.state.discarded { background:#ece8df; color:#6f6250; }
.empty { padding:70px; text-align:center; color:var(--muted); }
.name-browser { min-height:0; overflow:auto; padding:0 0 28px; }
.name-browser-toolbar { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:auto minmax(180px,1fr); gap:12px; padding:0 0 12px; background:linear-gradient(var(--paper) 70%, rgba(244,241,233,0)); }
.back-to-editor { min-height:38px; border:1px solid var(--line); border-radius:8px; padding:7px 12px; background:white; color:var(--ink); font-weight:800; cursor:pointer; }
.back-to-editor:hover { border-color:var(--ink); }
.name-browser-search input { width:100%; min-height:38px; border:1px solid var(--line); border-radius:8px; background:white; padding:7px 12px; }
.name-browser-list { display:grid; gap:18px; }
.name-group { border-top:1px solid var(--line); padding-top:12px; }
.name-group h2 { margin:0 0 9px; color:var(--ink); font:800 clamp(19px,2vw,28px)/1.05 Georgia,serif; }
.name-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.name-thumb { min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px; background:white; color:var(--muted); cursor:pointer; text-align:left; }
.name-thumb:hover { border-color:var(--ink); box-shadow:0 4px 14px #2b221214; }
.name-thumb img { display:block; width:100%; aspect-ratio:1/1; border-radius:5px; background:#dedad0; object-fit:cover; }
.name-thumb span { display:block; overflow:hidden; margin-top:5px; font-size:10px; font-weight:750; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.name-thumb-type { display:inline-block; margin-top:5px; border-radius:999px; padding:3px 6px; background:#ece8df; color:var(--ink); font-size:9px; font-weight:850; line-height:1; }
.name-browser-empty { margin:60px 0; color:var(--muted); text-align:center; }
dialog { width:min(560px,calc(100% - 30px)); border:0; border-radius:14px; padding:0; box-shadow:0 30px 80px #0005; }
dialog::backdrop { background:#171714aa; backdrop-filter:blur(3px); }
.dialog-card { position:relative; padding:30px; }
.dialog-card h2 { margin:0; font:700 30px Georgia,serif; }.dialog-card>p:not(.eyebrow) { color:var(--muted); }
.close { position:absolute; top:14px; right:14px; border:0; background:transparent; font-size:28px; cursor:pointer; }
.export-options { display:grid; gap:9px; margin:22px 0; }
.export-options button { display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:8px; padding:13px 15px; background:white; text-align:left; cursor:pointer; }
.export-options button:hover { border-color:var(--ink); }.export-options span { color:var(--muted); font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-height:820px) and (min-width:701px){
  .topbar{height:68px;padding-top:7px;padding-bottom:7px;}
  h1{font-size:34px;}
  .subtitle{display:none;}
  .page-tally{min-width:132px;padding:6px 10px;}
  .page-tally strong{font-size:24px;}
  .page-tally-label,.page-tally span{font-size:9px;}
  .name-browser-button{height:38px;padding:0 11px;}
  .export-button{width:38px;height:38px;}
  main{height:calc(100svh - 68px);padding-top:10px;padding-bottom:10px;}
  .summary-filter{padding:7px 6px;}
  .summary strong{font-size:clamp(18px,2vw,24px);}
  .summary span{font-size:clamp(12px,1.35vw,16px);font-weight:800;}
  .toolbar{margin:8px 0;}
  .search input{min-height:34px;}
  .deck-shell{grid-template-columns:minmax(300px,560px);}
  .nav-button{width:44px;height:64px;font-size:34px;}
  .photo-card{grid-template-rows:34px minmax(0,1fr) auto;}
  .card-top{padding:6px 12px;}
  .fields{padding:10px 16px 0;}
  .filename{margin-bottom:6px;font-size:11px;}
  .fields input[type=text],.fields select{padding:7px 9px;font-size:13px;}
  .field-row{gap:10px;margin-top:8px;}
  .checks{margin:9px -16px 0;}
  .checks label{min-height:38px;font-size:13px;}
}
@media(max-width:700px){
  html,body{min-height:100%;overflow:hidden;}
  body{height:100svh;}
  .topbar{position:static;height:72px;grid-template-columns:minmax(0,1fr) auto 36px 36px;gap:7px;padding:9px 10px;}
  h1{font-size:31px;}
  .eyebrow{margin-bottom:1px;font-size:10px;}
  .subtitle{display:none;}
  .page-tally{min-width:104px;padding:5px 6px;border-radius:7px;}
  .page-tally strong{font-size:20px;}
  .page-tally-label{font-size:7px;}
  #pageFormula{font-size:8px;}
  .name-browser-button{width:36px;height:36px;padding:0;justify-content:center;}
  .name-browser-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .name-browser-button svg{width:18px;height:18px;}
  .export-button{width:36px;height:36px;}
  .export-button svg{width:18px;height:18px;}
  main{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:calc(100svh - 72px);padding:8px 10px 10px;overflow:hidden;}
  .summary{grid-template-columns:repeat(5,1fr);}
  .summary-filter{min-width:0;padding:7px 2px;border-right:1px solid var(--line);border-bottom:0!important;text-align:center;}
  .summary-filter:nth-child(2){border-right:1px solid var(--line);}
  .summary strong{font-size:15px;line-height:.95;}
  .summary span{overflow:hidden;font-size:8.5px;font-weight:800;line-height:1.05;text-overflow:ellipsis;white-space:nowrap;}
  .toolbar{display:grid;grid-template-columns:1fr;gap:5px;margin:8px 0;}
  .search input{min-height:38px;border-radius:9px;padding:7px 10px;font-size:14px;}
  .save-status{width:100%;margin:0;font-size:11px;line-height:1.1;}
  .deck-shell{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;min-height:0;height:100%;overflow:hidden;}
  .catalog{display:flex;min-height:0;}
  .photo-card{display:grid;grid-template-rows:34px minmax(0,1fr) auto;width:100%;min-height:0;border-radius:14px;box-shadow:0 8px 25px #2b221218;}
  .card-top{padding:6px 10px;}
  .position-label{font-size:14px;}
  .state{padding:4px 9px;font-size:11px;}
  .image-wrap{height:auto;min-height:0;}
  .fields{padding:10px 12px 0;}
  .filename{margin:0 0 6px;font-size:11px;line-height:1.1;}
  .fields label{font-size:11px;line-height:1.1;}
  .fields input[type=text],.fields select{margin-top:4px;border-radius:8px;padding:8px 9px;font-size:14px;}
  .field-row{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
  .checks{grid-template-columns:1fr 1fr 1fr;margin:10px -12px 0;}
  .checks label{min-height:42px;gap:6px;font-size:12px;}
  .checks label + label{border-left:1px solid var(--line);border-top:0;}
  .checks input{width:17px;height:17px;}
  .warning{display:none;}
  .nav-button{width:34px;height:62px;border-radius:10px;font-size:30px;box-shadow:none;background:#fff8;}
  .nav-button.prev{left:8px;}
  .nav-button.next{right:8px;}
  .empty{padding:20px;font-size:13px;}
  main.is-name-browser{height:calc(100svh - 72px);padding:8px 10px 10px;}
  .name-browser-toolbar{grid-template-columns:1fr;gap:7px;padding-bottom:9px;}
  .back-to-editor,.name-browser-search input{min-height:36px;font-size:13px;}
  .name-browser-list{gap:14px;}
  .name-group h2{font-size:18px;}
  .name-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px;}
  .name-thumb{padding:4px;border-radius:7px;}
  .name-thumb span{font-size:9px;}
}