:root { --bg:#fafafa; --fg:#222; --accent:#4a6fa5; --border:#ddd; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
nav { display:flex; gap:1rem; align-items:center; padding:.75rem 1.25rem; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; }
nav .brand { font-weight:700; text-decoration:none; color:var(--fg); margin-right:auto; }
nav a { text-decoration:none; color:var(--accent); }
nav .btn-add { background:var(--accent); color:#fff; padding:.35rem .8rem; border-radius:6px; }
main { max-width:1100px; margin:1rem auto; padding:0 1rem; }
.flash { background:#e6f4e6; border:1px solid #9ccc9c; padding:.5rem .8rem; border-radius:6px; margin-bottom:1rem; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; padding:.75rem; background:#fff; border:1px solid var(--border); border-radius:8px; }
.filters select, .filters input { padding:.3rem .5rem; border:1px solid var(--border); border-radius:4px; font-size:.85rem; }
.filters button { padding:.3rem .8rem; background:var(--accent); color:#fff; border:0; border-radius:4px; cursor:pointer; }
.filters .clear { font-size:.85rem; }
table.booklist { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
table.booklist th { text-align:left; font-size:.8rem; text-transform:uppercase; color:#666; padding:.5rem .75rem; border-bottom:2px solid var(--border); }
table.booklist td { padding:.45rem .75rem; border-bottom:1px solid var(--border); font-size:.92rem; }
tr.status-reading td { background:#fffbe6; }
tr.status-abandoned td { background:#f5f5f5; color:#888; }
.badge { display:inline-block; font-size:.72rem; padding:.1rem .45rem; border-radius:999px; background:#e8eef7; color:var(--accent); }
.badge-reading { background:#fff3cd; color:#856404; }
.badge-abandoned { background:#eee; color:#777; }
.note-dot { color:var(--accent); }
form label { display:block; margin-bottom:.75rem; font-weight:600; font-size:.9rem; }
form input, form select, form textarea { display:block; width:100%; max-width:520px; padding:.4rem; margin-top:.2rem; border:1px solid var(--border); border-radius:4px; font-size:.95rem; }
form textarea { min-height:6rem; }
form button { margin-top:.5rem; padding:.45rem 1.2rem; background:var(--accent); color:#fff; border:0; border-radius:6px; cursor:pointer; }
.book-detail { display:flex; gap:1.5rem; }
.cover img { max-width:200px; border-radius:6px; }
.cover .placeholder { width:160px; height:240px; display:flex; align-items:center; justify-content:center; background:#eee; border-radius:6px; color:#999; }
.scraped { background:#f0f4fa; padding:.5rem 1rem; border-radius:6px; margin:1rem 0; }
.reading { background:#fff; border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; margin-bottom:.75rem; }
.notes { white-space:pre-wrap; color:#444; }
@media (max-width:700px){ .filters{gap:.4rem} .book-detail{flex-direction:column} }

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a1c1e; --fg:#e4e4e6; --border:#3a3d40; --accent:#7fa4d8; }
  nav { background:#242628; }
  .flash { background:#233d23; border-color:#3d6b3d; color:#c8e6c8; }
  table.booklist { background:#242628; }
  table.booklist th { color:#aaa; border-color:var(--border); }
  table.booklist td { border-color:#333; }
  tr.status-reading td { background:#33301c; }
  tr.status-abandoned td { background:#26282a; color:#8a8a8a; }
  .badge { background:#2b3a52; color:#9db9e0; }
  .badge-reading { background:#453a1c; color:#d8c47f; }
  .badge-abandoned { background:#333; color:#888; }
  form input, form select, form textarea { background:#2a2d2f; color:var(--fg); border-color:var(--border); }
  .scraped { background:#252b36; }
  .reading { background:#242628; }
  .cover .placeholder { background:#2a2d2f; color:#777; }
}
/* filter box */
.filterbox { background:#fff; border:1px solid var(--border); border-radius:8px; margin-bottom:1rem; }
.filterbox summary { padding:.6rem .9rem; cursor:pointer; font-weight:600; user-select:none; }
.filterbox .filters { margin-bottom:0; border:0; border-radius:0; padding-top:.25rem; }
.fmt-checks { display:flex; flex-wrap:wrap; gap:.35rem 1rem; }
.fmt-checks .chk { font-weight:400; font-size:.85rem; display:inline-flex; align-items:center; gap:.25rem; margin:0; }
@media (prefers-color-scheme: dark) { .filterbox { background:#242628; } }