:root{
  --ps-gap: 8px;
  --ps-radius: 12px;
  --ps-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04);
}
* { box-sizing: border-box }
html, body { margin:0; padding:0; background:#fff; color:#111 }

.ps-shell{ max-width:1600px; margin:0 auto; padding:8px 12px }
.ps-toolbar label{ font:600 14px/1 system-ui }

.ps-toolbar{
  position: sticky;
  top: 0;
  z-index: 1000;               
  display: flex;
  justify-content: center;     
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;            
  backdrop-filter: saturate(180%) blur(4px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.ps-toolbar label{ font:600 14px/1 system-ui; }
.ps-toolbar select{
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px 28px 8px 10px;
  font: 500 14px/1 system-ui;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/16px;
}

.ps-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--ps-gap); align-items:start }
.ps-card{ background:#fff; border-radius:var(--ps-radius); box-shadow:var(--ps-shadow); overflow:hidden; transition:transform .08s ease }
.ps-card:hover{ transform:translateY(-2px) }
.ps-card a{ display:block; color:inherit; text-decoration:none }
.ps-thumb{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block }
.ps-cap{ padding:6px 8px 0; font:500 14px/1.3 system-ui }
.ps-price{ padding:2px 8px 8px; font:600 13px/1.2 system-ui }
.ps-loader{ display:none; justify-content:center; padding:16px; color:#444 }
.ps-next{ display:inline-block; padding:10px 14px; border:1px solid #ddd; border-radius:10px; background:#fafafa; cursor:pointer }
.ps-next[disabled]{ opacity:.5; cursor:not-allowed }

#ps-next {
  background-color: rgb(59 130 246);
  color: white;
  opacity: 1 !important;
}

.pf-shell{ max-width:1600px; margin: 2.5em auto; padding:8px 12px }
.pf-bar{ position: sticky; top: 0; z-index: 1000; background:#fff; backdrop-filter:saturate(180%) blur(4px); box-shadow: 0 1px 0 rgba(0,0,0,.06) }
.pf-row{ display:flex; gap:12px; align-items:center; padding:8px 0 }
.pf-input{ flex:1; appearance:none; border:1px solid #cbd5e1; border-radius:12px; padding:12px 14px; font:500 16px/1.2 system-ui }
.pf-input:focus{ outline:2px solid rgba(37,99,235,.2); outline-offset:2px; border-color:#93c5fd }
.pf-status{ font:500 14px/1.2 system-ui; color:#475569; min-width:100px; text-align:right }

html[data-ps-mode="find"] .ps-grid{ margin-top: 8px; }

.pf-shell{ margin: 2.5em auto; }

@media (max-width: 767px){
  .ps-grid{ grid-template-columns:repeat(2, 1fr) }
  .ps-cap{ font-size:13px }
  .ps-price{ font-size:12px }
}
@media (max-width: 480px){
  .ps-shell{ padding-top: 10px; }
}