Moku/src/components/pages/Search.module.css

.root {
  display: flex; flex-direction: column; height: 100%;
  overflow: hidden; animation: fadeIn 0.14s ease both;
}

.header {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
}
.heading {
  font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--text-faint); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; flex-shrink: 0;
}
.searchBar {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-raised); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); padding: 0 var(--sp-3) 0 var(--sp-2);
  transition: border-color var(--t-base);
}
.searchBar:focus-within { border-color: var(--border-strong); }
.searchIcon { color: var(--text-faint); flex-shrink: 0; }
.searchInput {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: var(--text-sm); padding: 8px 0;
}
.searchInput::placeholder { color: var(--text-faint); }
.searchBtn {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  padding: 5px 12px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--accent-muted); color: var(--accent-fg);
  border: 1px solid var(--accent-dim); cursor: pointer;
  transition: filter var(--t-base); display: flex; align-items: center; gap: var(--sp-2);
}
.searchBtn:hover:not(:disabled) { filter: brightness(1.1); }
.searchBtn:disabled { opacity: 0.4; cursor: default; }

.langBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.langBtn {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.langBtn:hover { color: var(--text-muted); border-color: var(--border-strong); }
.langBtnActive {
  background: var(--accent-muted);
  border-color: var(--accent-dim);
  color: var(--accent-fg);
}
.langBtnActive:hover { background: var(--accent-muted); color: var(--accent-fg); }

.sourceCount {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  margin-left: auto;
}

.results { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }

.sourceSection { display: flex; flex-direction: column; gap: var(--sp-3); }

.sourceHeader {
  display: flex; align-items: center; gap: var(--sp-2);
}
.sourceIcon { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.sourceName { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.resultCount {
  font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
  letter-spacing: var(--tracking-wide); margin-left: auto;
}
.sourceError { font-size: var(--text-xs); color: var(--color-error); padding: 0 var(--sp-1); }

.sourceRow {
  display: flex; gap: var(--sp-3); overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}
.card {
  flex-shrink: 0; width: 110px; background: none; border: none; padding: 0;
  cursor: pointer; text-align: left;
}
.card:hover .cover { filter: brightness(1.06); }
.coverWrap {
  position: relative; aspect-ratio: 2/3; border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim);
}
.cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); }
.inLibBadge {
  position: absolute; bottom: var(--sp-1); left: var(--sp-1);
  font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg);
  border: 1px solid var(--accent-dim); padding: 2px 5px; border-radius: var(--radius-sm);
}
.cardTitle {
  margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: var(--leading-snug);
}

.skCard { flex-shrink: 0; width: 110px; }
.skCover { aspect-ratio: 2/3; border-radius: var(--radius-md); }
.skTitle { height: 11px; margin-top: var(--sp-1); width: 75%; }

.empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
}
.emptyIcon { color: var(--text-faint); }
.emptyText { font-size: var(--text-base); color: var(--text-muted); }
.emptyHint { font-size: var(--text-sm); color: var(--text-faint); }