/* ============================================================
   Reading Room — a warm, low-glare night library.
   UI palette:  ink #17140f · card #211c16 · line #342c22
                text #cdc4b4 · dim #8a7f6f · amber #d69e4a
   ============================================================ */
:root{
  --ink:#17140f; --card:#211c16; --card-hi:#2a231b; --line:#342c22;
  --text:#cdc4b4; --dim:#8a7f6f; --amber:#d69e4a; --amber-dim:#7d5c2e;
  --danger:#c1683f;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sheet-ease: cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:var(--ink); color:var(--text);
  font-family:var(--sans); overscroll-behavior:none; }
body{ overflow:hidden; }

.screen{ position:fixed; inset:0; display:none; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.screen.active{ display:flex; }

/* ---------------- Library ---------------- */
.lib-head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 12px; }
.lib-title{ display:flex; align-items:center; gap:10px; }
.lib-title .mark{ color:var(--amber); font-size:20px; transform:translateY(-1px); }
.lib-head h1{ font-family:var(--serif); font-weight:600; font-size:22px; margin:0;
  letter-spacing:.3px; }
.icon-btn{ background:none; border:none; color:var(--dim); font-size:26px;
  line-height:1; padding:4px 8px; cursor:pointer; }

.storage-note{ margin:0 20px 8px; padding:10px 12px; font-size:12.5px;
  color:var(--amber); background:rgba(214,158,74,.08);
  border:1px solid var(--amber-dim); border-radius:10px; }

.grid{ flex:1; overflow-y:auto; display:grid; gap:20px 16px;
  grid-template-columns:repeat(auto-fill, minmax(112px,1fr));
  padding:8px 20px 120px; align-content:start; }
.book{ cursor:pointer; }
.cover{ position:relative; aspect-ratio:2/3; border-radius:6px; overflow:hidden;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(0,0,0,.4); display:flex; align-items:flex-end; }
.cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover .fallback{ padding:12px; font-family:var(--serif); font-size:13px;
  line-height:1.3; color:var(--text); }
.cover .barwrap{ position:absolute; left:0; right:0; bottom:0; height:4px;
  background:rgba(0,0,0,.45); }
.cover .bar{ height:100%; background:var(--amber); width:0; }
.book-meta{ margin-top:8px; }
.book-title{ font-size:12.5px; line-height:1.25; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book-author{ font-size:11px; color:var(--dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.empty{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:0 40px; }
.empty-lead{ font-family:var(--serif); font-size:20px; margin:0 0 6px; }
.empty-sub{ color:var(--dim); font-size:14px; margin:0 0 24px; }
.primary-btn{ background:var(--amber); color:#1a1308; border:none; font-weight:600;
  font-size:15px; padding:12px 22px; border-radius:12px; cursor:pointer; }

.fab{ position:fixed; right:20px; bottom:calc(24px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; border:none; background:var(--amber);
  color:#1a1308; font-size:30px; line-height:1; box-shadow:0 8px 22px rgba(0,0,0,.5);
  cursor:pointer; }

/* ---------------- Reader ---------------- */
#reader{ background:var(--ink); }
#viewer{ position:absolute; inset:0; }
#viewer iframe{ border:none; }

.tap-zones{ position:absolute; inset:0; display:flex; z-index:5; }
.tap{ height:100%; }
.tap.prev{ width:32%; } .tap.next{ width:32%; } .tap.menu{ width:36%; }

.bar{ position:absolute; left:0; right:0; z-index:20; background:rgba(23,20,15,.94);
  backdrop-filter:blur(8px); transition:transform .25s var(--sheet-ease), opacity .25s;
  border-color:var(--line); }
.bar.top{ top:0; padding:calc(10px + env(safe-area-inset-top)) 14px 12px;
  display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line);
  transform:translateY(-105%); }
.bar.bottom{ bottom:0; padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); transform:translateY(105%); }
.bar.show{ transform:translateY(0); }
.bar-btn{ background:none; border:none; color:var(--text); font-size:15px;
  padding:6px 8px; cursor:pointer; }
.bar-title{ flex:1; text-align:center; font-family:var(--serif); font-size:14px;
  color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bmToggle{ font-size:20px; color:var(--dim); }
#bmToggle.on{ color:var(--amber); }

.progress-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.progress-track{ flex:1; height:3px; background:var(--line); border-radius:2px; }
.progress-fill{ height:100%; width:0; background:var(--amber); border-radius:2px;
  transition:width .2s; }
.progress-pct{ font-size:12px; color:var(--dim); width:38px; text-align:right; }
.controls{ display:flex; gap:8px; justify-content:space-between; }
.ctrl{ flex:1; background:var(--card); border:1px solid var(--line); color:var(--text);
  font-size:13px; padding:10px 6px; border-radius:10px; cursor:pointer; }
.ctrl:active{ background:var(--card-hi); }

/* ---------------- Sheets ---------------- */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card);
  border-top-left-radius:18px; border-top-right-radius:18px;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .3s var(--sheet-ease);
  border-top:1px solid var(--line); }
.sheet.show{ transform:translateY(0); }
.sheet h2{ font-family:var(--serif); font-size:17px; margin:0 0 14px; font-weight:600; }
.sheet-row{ display:block; width:100%; text-align:left; background:var(--card-hi);
  border:1px solid var(--line); color:var(--text); font-size:15px; padding:14px 16px;
  border-radius:12px; margin-bottom:10px; cursor:pointer; }
.sheet-row.danger{ color:var(--danger); }
.sheet-hint{ font-size:12px; color:var(--dim); margin:6px 2px 12px; }
.sheet-close{ width:100%; background:none; border:1px solid var(--line);
  color:var(--dim); padding:12px; border-radius:12px; font-size:14px; margin-top:4px;
  cursor:pointer; }

.theme-picker{ display:flex; gap:10px; margin-bottom:16px; }
.theme-chip{ flex:1; padding:18px 0; border-radius:12px; font-size:13px; cursor:pointer;
  border:2px solid transparent; }
.theme-chip.night{ background:#17140f; color:#cdc4b4; }
.theme-chip.sepia{ background:#e9dcc3; color:#4a3f2f; }
.theme-chip.paper{ background:#f5f2ea; color:#23201b; }
.theme-chip.active{ border-color:var(--amber); }

.bm-list{ max-height:50vh; overflow-y:auto; margin-bottom:12px; }
.bm-item{ display:flex; align-items:center; gap:10px; padding:12px 4px;
  border-bottom:1px solid var(--line); }
.bm-item .bm-go{ flex:1; text-align:left; background:none; border:none; color:var(--text);
  font-size:14px; cursor:pointer; }
.bm-item .bm-go small{ display:block; color:var(--dim); font-size:11px; margin-top:2px; }
.bm-item .bm-del{ background:none; border:none; color:var(--danger); font-size:18px;
  cursor:pointer; padding:4px 8px; }
.bm-empty{ color:var(--dim); font-size:14px; padding:8px 4px; }

.toast{ position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translateX(-50%); background:#2c251c; color:var(--text);
  border:1px solid var(--line); padding:11px 18px; border-radius:22px; font-size:13.5px;
  z-index:80; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:80vw; text-align:center; }

@media (prefers-reduced-motion: reduce){ .bar,.sheet,.progress-fill{ transition:none; } }