:root{--bg:#f7f6f2;--fg:#1d1d1b;--mut:#6b6b66;--line:#dddbd3;--card:#fff;--acc:#2f6f8f;--acc2:#e9f1f5;--warn:#b7791f;--warnbg:#fff6e5;--danger:#b23a3a;--kids:#7a4ea8;--fiction:#2f6f8f;--nonfiction:#3d7a4a}
@media (prefers-color-scheme:dark){:root{--bg:#161614;--fg:#ecebe6;--mut:#9b9a93;--line:#33332f;--card:#1f1f1c;--acc:#7fb3d1;--acc2:#1e2b33;--warn:#e0a640;--warnbg:#2b2416;--danger:#e06c6c}}
*{box-sizing:border-box}
html{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
body{margin:0}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
main{max-width:1100px;margin:0 auto;padding:12px 16px 60px}
h1{font-size:1.5rem;margin:.4em 0}h3{margin:1.2em 0 .4em;font-size:1.05rem}
.top{display:flex;align-items:center;gap:18px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.top .brand{font-weight:700;color:var(--fg)}
.top nav a{margin-right:12px;padding:4px 2px;color:var(--mut)}.top nav a.on{color:var(--fg);border-bottom:2px solid var(--acc)}
.top .who{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--mut)}
button.link{background:none;border:0;color:var(--acc);cursor:pointer;padding:0;font:inherit}button.link.danger{color:var(--danger)}
.btn{display:inline-block;padding:5px 11px;border:1px solid var(--acc);border-radius:6px;background:var(--acc);color:#fff;font:inherit;font-size:.9rem;cursor:pointer;line-height:1.3}
.btn:hover{text-decoration:none;filter:brightness(1.08)}.btn.ghost{background:transparent;color:var(--acc)}.btn.primary{font-weight:600}
.btn.big{padding:8px 14px;font-size:1rem;margin:4px 6px 4px 0}.btn small{display:block;font-weight:400;font-size:.75rem;opacity:.85}
.btn.danger{background:var(--danger);border-color:var(--danger)}.btn[disabled]{opacity:.5;cursor:wait}
.muted{color:var(--mut)}.small{font-size:.84rem}
.form{display:flex;flex-direction:column;gap:10px;max-width:720px;margin-top:10px}
.form label{display:flex;flex-direction:column;gap:3px;font-size:.9rem;color:var(--mut)}
.form input[type=text],.form input:not([type]),.form textarea,.form input[type=search],.auth input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
.form .two{display:grid;grid-template-columns:1fr 120px;gap:10px}
.form fieldset{border:1px solid var(--line);border-radius:6px;padding:6px 10px}.form legend{color:var(--mut);font-size:.85rem}
label.inline{display:inline-flex;flex-direction:row;align-items:center;gap:4px;margin-right:12px;color:var(--fg)}
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px}
.actions{display:flex;gap:8px;align-items:center}
.flash{background:var(--acc2);border:1px solid var(--acc);padding:8px 12px;border-radius:6px}
.error{color:var(--danger)}
.auth{max-width:460px;margin:40px auto;text-align:center;display:flex;flex-direction:column;gap:12px}
.auth label{display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--mut)}
.hp{position:absolute;left:-9999px}
.tbl{border-collapse:collapse;width:100%;max-width:820px;font-size:.92rem}.tbl th{text-align:left;color:var(--mut);font-weight:500}.tbl td,.tbl th{padding:5px 8px;border-bottom:1px solid var(--line)}
.tbl tr.off td{opacity:.5}.tbl input{font:inherit;padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--fg)}
.badge{background:var(--danger);color:#fff;border-radius:999px;padding:0 7px;font-size:.8rem}
.req{padding:8px 10px;border:1px solid var(--line);border-radius:6px;margin:6px 0;background:var(--card)}
.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row input{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
.linkbox input{width:100%;max-width:560px;font:inherit;padding:6px;margin:6px 0}
.top .who form{margin:0}form.inline{display:inline}