:root{--bg:#e8eee9;--card:#f7faf7;--ink:#15231d;--muted:#52635a;--accent:#0c5a4a;--line:#c5d1c9;--bad:#9d2c1b;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;padding:.8rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line)}
header nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;margin-left:auto}
header form{margin:0}.brand{font:700 1.4rem var(--serif);color:var(--ink);text-decoration:none}
main{max-width:70rem;margin:0 auto;padding:1.5rem clamp(1rem,4vw,3rem) 4rem}
h1{font:700 1.8rem/1.2 var(--serif);margin:.2rem 0 1rem}h2{font:700 1.15rem var(--serif);margin:0}
a{color:var(--accent)}
input,select,textarea{width:100%;padding:.55rem .7rem;border:1px solid #8fa196;border-radius:4px;background:#fff;font:inherit}
label{display:block;font-weight:600;font-size:.9rem;margin:.8rem 0 .25rem}
button{padding:.5rem 1rem;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:4px;cursor:pointer;font:inherit;font-weight:600}
button.ghost{background:transparent;color:var(--accent)}
:focus-visible{outline:3px solid #e0a100;outline-offset:2px}
.panel{background:var(--card);border:1px solid var(--line);padding:1rem 1.25rem 1.25rem;border-radius:6px;max-width:34rem;margin-bottom:1.5rem}
.panel button{margin-top:1rem}.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin-top:1rem}.check input{width:auto;margin-top:.3rem}
.search{display:flex;gap:.5rem;max-width:34rem;margin-bottom:1rem}.search input{flex:1}
.err{color:var(--bad);font-weight:600;min-height:1.4em;margin:0}.note{background:var(--card);border-left:4px solid var(--accent);padding:.6rem .9rem}
.meta{color:var(--muted);font-size:.9rem}.empty{color:var(--muted);padding:2rem 0}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;padding:0;list-style:none}
.book{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-left:14px solid #2a5c4f;padding:1rem;border-radius:2px 6px 6px 2px;min-height:12rem}
.book p{margin:.3rem 0}.book .desc{flex:1;font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.book form{margin:.5rem 0 0}.tag{font-size:.8rem;color:var(--accent);font-weight:600}
/* spine colours by hue bucket (no inline styles: the CSP forbids them) */
.book[data-h^="0"],.book[data-h^="1"]{border-left-color:#7a3b2e}.book[data-h^="2"]{border-left-color:#7a5c1e}.book[data-h^="3"]{border-left-color:#2a5c4f}
.pager{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}
table{border-collapse:collapse;width:100%;max-width:44rem}td,th{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line)}td form{margin:0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}