*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FAFAF8;--bg-card:#FFF;--ink:#1A1A1A;--ink2:#555;--ink3:#888;
  --border:#E0DDD6;--accent:#2563EB;--accent-l:rgba(37,99,235,.08);
  --shadow-lg:0 4px 20px rgba(0,0,0,.08);--radius:8px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#141414;--bg-card:#1E1E1E;--ink:#E0DCD4;--ink2:#A8A49C;--ink3:#706C64;
  --border:#2E2E2E;--accent:#60A5FA;--accent-l:rgba(96,165,250,.1);
  --shadow-lg:0 4px 20px rgba(0,0,0,.3);
}
html{font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}

#top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:10;
}
.logo{font-size:18px;font-weight:700;letter-spacing:-.02em;cursor:pointer}
#user-area{display:flex;align-items:center;gap:10px}
.btn-sm{
  background:none;border:1px solid var(--border);border-radius:6px;
  padding:6px 14px;font-size:12px;cursor:pointer;color:var(--ink2);
  font-family:var(--font);text-decoration:none;transition:all .15s;
}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}

#book-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;padding:32px 24px;max-width:1200px;margin:0 auto;
}
.book-card{
  display:flex;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:all .2s;text-decoration:none;color:var(--ink);
}
.book-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.book-cover{
  width:110px;min-height:140px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cover-title{
  color:#fff;font-size:18px;font-weight:700;text-align:center;
  padding:10px;word-break:break-all;text-shadow:0 1px 3px rgba(0,0,0,.2);
  writing-mode:vertical-rl;letter-spacing:.1em;
}
.book-info{padding:16px 16px 14px;flex:1;min-width:0;display:flex;flex-direction:column}
.book-info h2{font-size:16px;font-weight:700;margin-bottom:4px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-author{font-size:12px;color:var(--ink3);margin-bottom:8px}
.progress-wrap{margin-bottom:8px}
.progress-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:4px}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.progress-text{font-size:11px;color:var(--ink3)}
.continue-btn{
  font-size:12px;color:var(--accent);font-weight:600;cursor:pointer;
  margin-top:auto;
}
.continue-btn.start{color:var(--ink3)}
.continue-btn.start:hover{color:var(--accent)}

.empty-state{text-align:center;padding:80px 20px;grid-column:1/-1}
.empty-state p{font-size:18px;margin-bottom:8px}
.empty-state .hint{font-size:13px;color:var(--ink3)}
.empty-state a{color:var(--accent)}

@media(max-width:600px){
  #book-grid{grid-template-columns:1fr;padding:16px}
  .book-cover{width:90px;min-height:110px}
  .book-info h2{font-size:14px}
}