/* ===== Theme ===== */
.pf-sec{
  --ink:#0f172a; --muted:#475569; --bg:#ffffff;
  --card:#ffffff; --border:#e6ebf2;
  --brand1:#2e90fa; --brand2:#0ea5e9; /* your blue gradient */
  --pill:#f1f5f9;
  background:var(--bg); color:var(--ink); padding:38px 16px 52px;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  max-width:1100px; margin:0 auto;
}

/* ===== Hero ===== */
.pf-hero{ text-align:center; margin-bottom:16px }
.pf-hero h1{ margin:0 0 6px; font-size:clamp(26px,3.4vw,38px); font-weight:900; letter-spacing:-.01em }
.pf-hero h1 span{
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pf-hero p{ margin:0; color:var(--muted) }

/* ===== Controls ===== */
.pf-controls{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin:16px 0 12px; flex-wrap:wrap }
.pf-filter-group{ display:flex; gap:8px; flex-wrap:wrap }
.pf-chip{
  border:1px solid var(--border); background:var(--pill); color:#0b1526;
  padding:7px 10px; border-radius:999px; font-weight:700; font-size:12px; cursor:pointer;
}
.pf-chip.is-active{ background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; border-color:transparent }
.pf-search{ position:relative; flex:1 0 220px; max-width:280px }
.pf-search input{
  width:100%; padding:10px 32px 10px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; font-size:13px;
}
.pf-search svg{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:#64748b }

/* ===== Grid ===== */
.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:992px){ .pf-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .pf-grid{ grid-template-columns:1fr } }

/* Card */
.pf-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(16,24,40,.06); display:flex; flex-direction:column; }
.pf-thumb{ position:relative; aspect-ratio:16/10; background:#fafbfd }
.pf-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.pf-badge{
  position:absolute; left:10px; top:10px; font-size:11px; font-weight:800; color:#0b0b0b;
  background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; padding:6px 8px; border-radius:999px; box-shadow:0 6px 12px rgba(46,144,250,.25);
}
.pf-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; gap:8px; padding:10px; opacity:0; transition:opacity .18s ease;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45));
}
.pf-thumb:hover .pf-overlay{ opacity:1 }
.pf-case,.pf-live{
  appearance:none; border:0; text-decoration:none; font-weight:800; font-size:12px; cursor:pointer; border-radius:8px; padding:8px 10px;
  background:#fff; color:#0f172a; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.pf-live{ background:#0f172a; color:#fff }

.pf-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px }
.pf-title{ margin:0; font-size:15px; font-weight:900; letter-spacing:-.005em }
.pf-desc{ margin:0; color:var(--muted); font-size:13px; line-height:1.6 }
.pf-feats{ margin:0; padding:0; list-style:none; display:flex; gap:8px; flex-wrap:wrap }
.pf-feats li{ font-size:11px; font-weight:800; color:#334155; background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px; padding:6px 8px }

/* ===== Modal ===== */
.pf-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,.55); z-index:9999; padding:18px }
.pf-modal[aria-hidden="false"]{ display:flex }
.pf-dialog{ background:#fff; color:#0f172a; width:min(820px,92vw); border-radius:12px; box-shadow:0 18px 36px rgba(0,0,0,.35); padding:16px; position:relative }
.pf-dialog h3{ margin:0 0 8px; font-size:20px; font-weight:900 }
.pf-dialog p{ margin:0 0 10px; color:#475569 }
.pf-dialog img{ width:100%; height:auto; border-radius:8px }
.pf-close{
  position:absolute; top:10px; right:14px; background:#0f172a; color:#fff; border:0; border-radius:999px; width:32px; height:32px; font-size:20px; line-height:1; cursor:pointer;
}