/* TAOS Viewer — preserved verbatim from the original July 12 standalone
   viewer (liz_translation_viewer_07122026), with small, style-matched
   additions for favorites, loading/error states and the "load more" control. */

:root{
  --bg:#f6f3ee;--panel:#fffdf9;--ink:#292722;--muted:#746f67;--line:#ded8cf;
  --accent:#7d4f8f;--accent2:#efe4f3;--good:#28755d;--shadow:0 8px 28px rgba(49,40,32,.08)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.48 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{position:sticky;top:0;z-index:10;background:rgba(246,243,238,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.wrap{max-width:1180px;margin:auto;padding:18px 20px}
.top{display:flex;gap:18px;align-items:end;justify-content:space-between;flex-wrap:wrap}
h1{font-size:clamp(1.35rem,2.2vw,2rem);margin:0 0 3px}.sub{color:var(--muted);font-size:.94rem}
.controls{display:grid;grid-template-columns:minmax(250px,1fr) repeat(4,auto);gap:10px;margin-top:16px}
input,select,button{font:inherit;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);padding:10px 12px}
input:focus,select:focus,button:focus{outline:3px solid rgba(125,79,143,.16);border-color:var(--accent)}
button{cursor:pointer}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:.88rem}
.pill:empty{display:none}
main.wrap{padding-top:22px}
.list{display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);background:#fbf8f3}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.86rem}
.dir{font-weight:700;color:var(--accent);background:var(--accent2);padding:3px 8px;border-radius:999px}
.cardactions{display:flex;align-items:center;gap:6px}
.grid{display:grid;grid-template-columns:1fr 1fr}
.pane{padding:16px 18px;min-width:0}.pane+.pane{border-left:1px solid var(--line)}
.label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-bottom:7px}
.text{white-space:pre-wrap;word-wrap:break-word}
mark{background:#ffe98a;padding:0 .08em;border-radius:2px}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
footer{padding:30px 20px 45px;text-align:center;color:var(--muted);font-size:.86rem}
.copy{border:0;background:transparent;padding:4px 6px;color:var(--accent);font-size:.86rem}

/* --- style-matched additions --- */
.fav{border:0;background:transparent;padding:4px 6px;color:var(--accent);font-size:1.05rem;line-height:1}
.fav[aria-pressed="true"]{color:#c9a227}
#favToggle[aria-pressed="true"]{background:var(--accent2);border-color:var(--accent);color:var(--accent);font-weight:700}
.state{text-align:center;padding:48px 20px;color:var(--muted)}
.state.error{color:#a62d2d}
.loadmore-row{display:flex;justify-content:center;margin-top:18px}
.loadmore{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;padding:11px 22px}

@media(max-width:760px){
  .controls{grid-template-columns:1fr 1fr}
  .controls input{grid-column:1/-1}
  .grid{grid-template-columns:1fr}
  .pane+.pane{border-left:0;border-top:1px solid var(--line)}
  .wrap{padding-left:12px;padding-right:12px}
}
@media print{
  header{position:static}
  .controls,button{display:none!important}
  .card{box-shadow:none;break-inside:avoid}
  .list{gap:8px}
  body{background:#fff}
  .lock-screen,.state,.loadmore-row,footer{display:none!important}
}

body.locked{overflow:hidden}
body.locked>header,body.locked>main,body.locked>footer{filter:blur(10px);pointer-events:none;user-select:none}
.lock-screen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(31,27,35,.82);backdrop-filter:blur(8px);padding:20px}
.lock-screen[hidden]{display:none}
.lock-box{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 70px rgba(0,0,0,.35);padding:26px}
.lock-box h2{margin:0 0 8px;font-size:1.45rem}.lock-box p{margin:0 0 18px;color:var(--muted)}
.lock-row{display:flex;gap:10px}.lock-row input{min-width:0;flex:1}.lock-row button{background:var(--accent);color:white;border-color:var(--accent)}
.lock-error{min-height:1.4em;margin-top:10px;color:#a62d2d;font-size:.9rem}
#lockNow{white-space:nowrap}