:root { color-scheme: dark; }
* { box-sizing: border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#0b0b0b;
  color:#f2f2f2;
}

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:16px;
}

/* ---------- header ---------- */
.topBar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.titleBlock{
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:560px;
}

h1{
  margin:8px 0 2px;
  font-size:28px;
}

.libraryLabel{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#d6d6d6;
  margin-top:2px;
}

.helperText{
  font-size:13px;
  color:#9a9a9a;
  margin-top:8px;
  line-height:1.35;
}

.iconBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

.iconBtn:hover{ background:rgba(255,255,255,0.07); }

.privateHint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  font-size:13px;
  opacity:0.9;
}

/* ---------- controls block (SEARCH + FILTERS + STATUS) ---------- */
.controlBlock{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.searchRow{
  width:100%;
  display:flex;           /* THIS is what keeps Clear on the right */
  gap:10px;
  align-items:center;
}

input[type="search"]{
  flex:1;                 /* THIS is what keeps input full width */
  min-width:0;
  padding:14px;
  border:1px solid #2a2a2a;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-size:16px;
  outline:none;
}

button{
  padding:14px;
  border:1px solid #2a2a2a;
  border-radius:12px;
  background:#151515;
  color:#fff;
  cursor:pointer;
}

button:hover{ background:#1b1b1b; }

/* Filters directly under search, aligned left, inside centered wrap */
.filterBlock{
  width:100%;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}

.filterGroup{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  border-radius:12px;
}

.filterTitle{
  font-size:12px;
  color:#b7b7b7;
  letter-spacing:0.10em;
  text-transform:uppercase;
  margin-right:6px;
  white-space:nowrap;
}

.filterGroup label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#e6e6e6;
  font-size:14px;
}

.filterGroup input[type="checkbox"]{
  width:14px;
  height:14px;
  accent-color:#ffffff;
}

/* status stays under filters, aligned with content (so not stuck left) */
.status{
  width:100%;
  margin-top:2px;
  color:#a9a9a9;
}

/* ---------- results ---------- */
.results{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.card{
  border:1px solid #2a2a2a;
  background:#111;
  border-radius:14px;
  padding:14px;
}

.cardTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
}

.title{
  font-weight:700;
  font-size:17px;
}

.badge{
  font-size:12px;
  border:1px solid #2a2a2a;
  padding:4px 8px;
  border-radius:999px;
  color:#cfcfcf;
}

.subLine{
  margin-top:6px;
  font-size:13px;
  color:#cfcfcf;
}

.chip{
  display:inline-block;
  padding:3px 9px;
  margin:3px 6px 0 0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.03);
  font-size:12px;
  color:#e6e6e6;
}

.kv{
  margin-top:10px;
  display:grid;
  gap:6px;
  font-size:14px;
  color:#d6d6d6;
}

.kv b{
  color:#fff;
  font-weight:650;
}

.foot{
  color:#8f8f8f;
  padding-bottom:28px;
}

.hl{ color:#fff; }

/* --- Badge color tints (subtle) --- */
.badge {
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 4px 10px;
  border-radius: 999px;
  color: #d9d9d9;
  background: rgba(255,255,255,0.03);
}

/* Type tints */
.badge--original {
  border-color: rgba(120, 200, 255, 0.22);
  background: rgba(120, 200, 255, 0.06);
  color: rgba(200, 235, 255, 0.95);
}

.badge--inspired {
  border-color: rgba(255, 200, 120, 0.22);
  background: rgba(255, 200, 120, 0.06);
  color: rgba(255, 235, 205, 0.95);
}

.badge--house-original {
  border-color: rgba(140, 255, 200, 0.20);
  background: rgba(140, 255, 200, 0.06);
  color: rgba(210, 255, 235, 0.95);
}

.badge--house-inspired {
  border-color: rgba(200, 160, 255, 0.22);
  background: rgba(200, 160, 255, 0.06);
  color: rgba(235, 220, 255, 0.95);
}