/* The BookBank Library — shelf shell (the books bring their own styles). */
:root{
  --bg:#f7f5f1; --panel:#fffdf9; --ink:#1c1a17; --muted:#6b6459;
  --edge:#e6e0d6; --accent:#b45309; --accent-ink:#fff;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14120f; --panel:#1e1b17; --ink:#f2ede4; --muted:#a89f90;
    --edge:#2c2822; --accent:#f59e0b; --accent-ink:#1a1206;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.hero{
  padding:clamp(3rem,8vw,6rem) 1.5rem 2rem;
  text-align:center;
  background:
    radial-gradient(60% 100% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--edge);
}
.hero-inner{max-width:820px;margin:0 auto}
.mark{font-size:2.6rem;line-height:1}
.hero h1{
  font-size:clamp(2rem,5vw,3.4rem); margin:.4rem 0 .2rem;
  letter-spacing:-.02em; font-weight:800;
}
.tagline{color:var(--muted);font-size:clamp(1rem,2.2vw,1.2rem);margin:0 0 1.8rem}

.controls{display:flex;flex-direction:column;gap:1rem;align-items:center}
#q{
  width:min(520px,100%); padding:.85rem 1.1rem; font-size:1rem;
  border:1px solid var(--edge); border-radius:999px; background:var(--panel);
  color:var(--ink); box-shadow:var(--shadow); outline:none;
  transition:border-color .15s,box-shadow .15s;
}
#q:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chip{
  border:1px solid var(--edge); background:var(--panel); color:var(--muted);
  padding:.4rem .9rem; border-radius:999px; font-size:.86rem; cursor:pointer;
  transition:all .15s; font-weight:600;
}
.chip:hover{color:var(--ink);border-color:var(--accent)}
.chip.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

main{max-width:1180px;margin:0 auto;padding:2.5rem 1.5rem 1rem}
.grid{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{
  display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--edge); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease;
  position:relative;
}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,.1),0 20px 44px rgba(0,0,0,.16)}

.cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:#000}
.cover-art{width:100%;height:100%;object-fit:cover;display:block}
.cover.gradient{
  background:linear-gradient(135deg,var(--g1),var(--g2));
  display:flex;align-items:center;justify-content:center;padding:1.4rem;
}
.cover.gradient::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 15% 10%,rgba(255,255,255,.18),transparent 55%);
}
.cover-title{
  position:relative;color:#fff;font-weight:800;font-size:1.5rem;line-height:1.2;
  letter-spacing:-.01em;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.card-body{padding:1.1rem 1.2rem .6rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.card-title{font-size:1.18rem;font-weight:750;margin:0;letter-spacing:-.01em}
.voice{font-size:.82rem;color:var(--accent);font-weight:650}
.card-summary{
  margin:.2rem 0 0;color:var(--muted);font-size:.92rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{margin-top:auto;padding-top:.7rem;color:var(--muted);font-size:.8rem;font-weight:600}
.card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem 1.2rem 1.1rem;
}
.card-open{color:var(--accent);font-weight:700;font-size:.9rem}
.card-link{position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.dl{
  position:relative;z-index:2;border:1px solid var(--edge);background:var(--panel);
  color:var(--muted);padding:.3rem .7rem;border-radius:999px;font:inherit;
  font-size:.78rem;font-weight:650;cursor:pointer;transition:all .15s;
}
.dl:hover{color:var(--ink);border-color:var(--accent)}
.dl.is-busy{color:var(--accent);border-color:var(--accent);cursor:progress}
.dl.is-done{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dl.is-failed{color:#b91c1c;border-color:#b91c1c}
.dl[hidden]{display:none}

.empty{text-align:center;color:var(--muted);padding:3rem 1rem}
footer{
  text-align:center;color:var(--muted);font-size:.86rem;
  padding:2.5rem 1.5rem 3.5rem;border-top:1px solid var(--edge);margin-top:2rem;
}
footer strong{color:var(--ink)}
@media (max-width:520px){ .grid{grid-template-columns:1fr} }