/* ── Header ── */
header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);padding:14px 24px;
}
.header-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-group{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-group h1{font-size:1.35rem;
  background:linear-gradient(135deg,var(--logo-from),var(--logo-to));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-icon{font-size:1.4rem}
@media(max-width:460px){.logo-text{display:none}}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}

/* ── Sources button (in header-actions) ── */
.btn-sources{display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;background:var(--btn-secondary-bg);
  border:1px solid var(--btn-secondary-border);border-radius:8px;
  color:var(--text);font-size:.85rem;font-weight:600;white-space:nowrap;
  transition:border-color var(--transition),background var(--transition),color var(--transition)}
.btn-sources:hover{background:var(--surface-raised);border-color:var(--border-strong)}
.btn-sources.btn-sources--cta{background:var(--btn-primary-bg);border-color:transparent;color:var(--btn-primary-text)}
.btn-sources.btn-sources--cta:hover{opacity:.85;background:var(--btn-primary-bg)}

/* ── Theme selector & add button (in header-actions) ── */
.theme-select{padding:7px 10px;background:var(--btn-secondary-bg);
  border:1px solid var(--btn-secondary-border);
  border-radius:8px;color:var(--text);font-size:.8rem;outline:none;cursor:pointer;
  transition:border-color var(--transition)}
.theme-select:hover{border-color:var(--border-strong)}
.theme-select option{background:var(--modal-bg)}
.btn-add{background:var(--btn-primary-bg);border:none;
  color:var(--btn-primary-text);padding:8px 18px;border-radius:8px;
  font-size:.85rem;font-weight:600;
  transition:opacity var(--transition);white-space:nowrap;}
.btn-add:hover{opacity:.75}

/* ── Toolbar ── */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 24px 0}
.search-wrap{position:relative;flex:1;min-width:200px}
.search-wrap::before{content:'🔍';position:absolute;left:12px;top:50%;
  transform:translateY(-50%);pointer-events:none;font-size:.9rem}
#searchInput{width:100%;padding:9px 14px 9px 36px;
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:.9rem;outline:none;
  transition:border-color var(--transition)}
#searchInput:focus{border-color:var(--border-strong)}
#searchInput::placeholder{color:var(--muted)}
select{padding:9px 14px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:.85rem;outline:none;cursor:pointer}
select option{background:var(--modal-bg)}
.book-count{color:var(--muted);font-size:.82rem;white-space:nowrap}

/* ── Status banner ── */
.status-banner{margin:14px 24px 0;padding:10px 16px;border-radius:8px;
  font-size:.85rem;display:none}
.status-banner.info{background:var(--status-info-bg);border:1px solid var(--status-info-border);color:var(--status-info-text)}
.status-banner.error{background:var(--status-error-bg);border:1px solid var(--status-error-border);color:var(--status-error-text)}
.status-banner.show{display:block}

/* ── Grid ── */
.book-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:18px;padding:18px 24px;
}
.book-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:transform var(--transition),border-color var(--transition),
    box-shadow var(--transition);display:flex;flex-direction:column;
}
.book-card:hover{transform:translateY(-4px);border-color:var(--border-strong);
  box-shadow:0 8px 28px var(--shadow)}
.cover-wrap{width:100%;aspect-ratio:2/3;overflow:hidden;flex-shrink:0;position:relative}
.cover-wrap img,.cover-placeholder{width:100%;height:100%;object-fit:cover;display:block}
.cover-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;font-weight:700;color:var(--cover-ph-text);
  background:var(--cover-ph);
}
.book-info{padding:10px 10px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.book-title{font-size:.82rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-author{font-size:.73rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-series{font-size:.68rem;color:var(--series-color);margin-top:auto;padding-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-card-dl{margin-top:8px;padding:5px 0;width:100%;
  background:var(--tag-bg);border:1px solid var(--border);
  border-radius:6px;font-size:.75rem;color:var(--text);
  transition:background var(--transition)}
.book-card-dl:hover{background:var(--surface-raised)}

/* ── Empty / Loading state ── */
.empty-state{text-align:center;padding:80px 24px;color:var(--muted);display:none}
.empty-state.show{display:block}
.empty-icon{font-size:4rem;margin-bottom:16px}
.empty-title{font-size:1.1rem;margin-bottom:8px;color:var(--text)}
.empty-sub{font-size:.9rem}

/* ── Pagination ── */
.pagination{display:flex;justify-content:center;align-items:center;
  gap:6px;padding:20px 24px 32px;flex-wrap:wrap}
.page-btn{min-width:36px;height:36px;padding:0 8px;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-size:.85rem;
  transition:background var(--transition),border-color var(--transition)}
.page-btn:hover,.page-btn.active{background:var(--tag-bg);border-color:var(--border-strong)}
.page-btn.active{font-weight:700}
.page-dots{color:var(--muted);padding:0 4px}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}