/* Heavy polished light theme + skeletons */
.pg-wrap{--bg:#ffffff;--bg-soft:#f8fafc;--border:#e5e7eb;--text:#0f172a;--muted:#64748b;--brand:#ffcb05;--brand2:#ff9900;--shadow:0 12px 32px rgba(2,6,23,.10);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;max-width:1100px;margin:24px auto;padding:12px}
.pg-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:.2px}
.pg-card{background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px}
.pg-header{position:sticky;top:0;z-index:1;backdrop-filter:saturate(1.3) blur(6px)}
.pg-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.pg-spacer{flex:1}
.pg-controls{margin-top:10px}
.pg-field{display:flex;flex-direction:column;gap:6px;min-width:140px}
.pg-field label{font-size:12px;color:var(--muted)}
.pg-select{appearance:none;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:14px;color:var(--text);box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
.pg-select:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.pg-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;font-weight:700;transition:.2s}
.pg-btn:hover{box-shadow:0 10px 24px rgba(2,6,23,.10);transform:translateY(-1px)}
.pg-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#1f2937}
.pg-ghost{background:var(--bg-soft)}
.pg-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding:8px 10px;border:1px dashed var(--border);border-radius:12px;background:#fff}
.pg-note{font-size:12px;color:var(--muted);margin-top:8px}
.pg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin:16px 4px}
.pg-item{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 18px rgba(2,6,23,.06);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden}
.pg-item img{width:96px;height:96px;image-rendering:pixelated}
.pg-name{font-size:14px;font-weight:800;color:var(--text);text-align:center}
.pg-badge{font-size:12px;color:var(--muted)}
.pg-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* Skeleton */
.skel{position:relative;overflow:hidden;background:#eef2f7;border-radius:12px;border:1px solid var(--border);height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sh 1.2s infinite}
.skel .dot{width:64px;height:64px;border-radius:50%;background:#e5eaf1}
.skel .line{width:70px;height:12px;border-radius:8px;background:#e5eaf1}
@keyframes sh{to{transform:translateX(100%)}}

@media (max-width:1024px){.pg-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:900px){.pg-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.pg-grid{grid-template-columns:repeat(3,1fr)} .pg-field{min-width:120px}}
@media (max-width:520px){.pg-grid{grid-template-columns:repeat(2,1fr)} .pg-title{font-size:18px} .pg-btn{padding:9px 12px} .pg-select{padding:9px 11px}}
/* --- Mobile Responsive Fix --- */
@media (max-width:700px){
  .pg-header {
    position: static; /* disable sticky on small screens */
    backdrop-filter: none;
  }
  .pg-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pg-field {
    width: 100%; /* full width for selects */
    min-width: unset;
  }
  .pg-btn {
    width: 100%; /* buttons full width */
    justify-content: center;
  }
}

@media (max-width:520px){
  .pg-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .pg-title {
    font-size: 18px;
  }
  .pg-btn {
    padding: 9px 12px;
  }
  .pg-select {
    padding: 9px 11px;
  }
}