/* v1.2.0 - screenshot-style UI, mobile-first */
:root{
  --gap:16px; --radius:14px; --border:#e6e8ec; --text:#0b1220; --muted:#6b7280; --bg:#ffffff;
  --cta:#111827; --cta-text:#ffffff; --cta-hover:#0b1220;
}
.fbd-wrap{max-width:1200px;margin:0 auto;padding:20px;background:var(--bg);color:var(--text);}
.fbd-head{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center;justify-content:space-between;margin-bottom:18px;}
.fbd-title{font-size:1.6rem;font-weight:800;}
.fbd-sub{font-size:.95rem;color:var(--muted);}

.fbd-pillbar{display:flex;gap:8px;align-items:center}
.fbd-pillbar .fbd-pill{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:#fff;cursor:pointer;font-size:.85rem}
.fbd-pillbar .fbd-pill.active{background:#111827;color:#fff;border-color:#111827}

.fbd-filters{display:grid;gap:12px;grid-template-columns:repeat(5,1fr);align-items:end;margin:14px 0 18px;}
.fbd-filters label{font-size:.82rem;font-weight:800;margin-bottom:6px;display:block;}
.fbd-filters input[type="search"], .fbd-filters select, .fbd-filters input[type="number"], .fbd-filters input[type="range"]{
  width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;font-size:.95rem;background:#fff;
}
.fbd-range{display:flex;align-items:center;gap:10px}
/* prettier range */
.fbd-filters input[type="range"]{appearance:none;height:6px;background:#e5e7eb;border-radius:4px}
.fbd-filters input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#111827;border:2px solid #fff;box-shadow:0 0 0 1px #111827;cursor:pointer}
.fbd-filters input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#111827;border:2px solid #fff}
@media (max-width:1024px){ .fbd-filters{grid-template-columns:repeat(3,1fr);} }
@media (max-width:680px){ .fbd-filters{grid-template-columns:1fr 1fr;} }

/* Card grid */
.fbd-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);}
@media (max-width:1100px){ .fbd-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .fbd-grid{grid-template-columns:1fr;} }

.fbd-card{border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;background:#fff;box-shadow:0 3px 14px rgba(2,8,23,.06);}
.fbd-card-top{display:flex;align-items:center;gap:14px;}
.fbd-logo-wrap{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:120px;}
.fbd-logo{width:120px;max-width:100%;height:auto;object-fit:contain}
.fbd-card-head{display:flex;flex-direction:column;gap:4px}
.fbd-name{font-weight:800;font-size:1.05rem;}
.fbd-stars{display:flex;align-items:center;gap:6px;color:#111827;font-size:.95rem;font-weight:700}
.fbd-stars .full,.fbd-stars .half{color:#111827}
.fbd-stars .empty{color:#d1d5db}
.fbd-rating-num{color:#111827;margin-left:2px}

.fbd-meta{font-size:.95rem;line-height:1.5}
.fbd-meta span{display:block;}
.fbd-badges{display:flex;flex-wrap:wrap;gap:8px}
.fbd-badge{font-size:.78rem;border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:#0f172a;background:#f8fafc}

.fbd-cta{display:flex;gap:12px;align-items:center;justify-content:flex-start;margin-top:6px}
.fbd-btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid transparent;transition:all .15s;}
.fbd-btn-primary{background:var(--cta);color:var(--cta-text);}
.fbd-btn-primary:hover{background:var(--cta-hover);transform:translateY(-1px)}
.fbd-note{font-size:.8rem;color:#9ca3af}

.fbd-hide{display:none!important}

/* Table variant */
.fbd-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fbd-table{ width:100%; border-collapse:collapse; font-size:.96rem; }
.fbd-table th, .fbd-table td{ border:1px solid var(--border); padding:12px; text-align:left; white-space:nowrap; }
.fbd-logo--table{ width:120px; height:auto; object-fit:contain; }
@media (max-width: 680px){
  .fbd-logo--table{ width:90px; }
  .fbd-table th:nth-child(3), .fbd-table td:nth-child(3),
  .fbd-table th:nth-child(6), .fbd-table td:nth-child(6){ display:none; }
}

/* Pagination */
.fbd-pagination{display:flex;gap:8px;justify-content:center;margin-top:16px}
.fbd-page a, .fbd-page span{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none}
.fbd-page .current{background:#111827;color:#fff;border-color:#111827}