.wp-admin .jp2g-admin-scope .jp2g-grid{display:grid;grid-template-columns:repeat(var(--jp2g-cols,4),minmax(0,1fr));gap:12px}
.jp2g-grid.jp2g-masonry{column-count:var(--jp2g-cols,4);gap:0}
.jp2g-grid.jp2g-masonry .jp2g-item{display:inline-block;margin:0 0 12px;width:100%}
.jp2g-item img{width:100%;height:auto;object-fit:cover;display:block}
.jp2g-archive{display:grid;grid-template-columns:repeat(var(--jp2g-cols,3),minmax(0,1fr));gap:16px}
.jp2g-card{border:0px solid #eee;border-radius:8px;overflow:hidden;background:#171a22 !important}
.jp2g-thumb-link img{display:block;width:100%;height:auto}
.jp2g-title{font-size:16px;margin:8px 12px}
.jp2g-admin .jp2g-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.jp2g-admin .jp2g-thumb{list-style:none;position:relative}
.jp2g-admin .jp2g-thumb img{display:block;width:120px;height:120px;object-fit:cover;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.jp2g-admin .jp2g-thumb .jp2g-remove{position:absolute;top:4px;right:6px;background:#0002;border:0;color:#333}
.jp2g-thumbs{display:grid !important;grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;list-style-type: none !important}

/* Drag placeholder for admin sorting */
.jp2g-placeholder{border:2px dashed #bbb;background:#f5f5f5;border-radius:8px;min-height:120px}
.jp2g-admin-grid{display:flex;flex-wrap:wrap;gap:10px}
.jp2g-admin-grid>li{list-style:none}
.jp2g-admin-grid img{width:120px;height:120px;object-fit:cover;border-radius:8px;display:block}
.jp2g-admin-grid .jp2g-remove{position:absolute;top:4px;right:6px;background:#0002;border:0;color:#333}
@media screen and (max-width: 600px) {#jp2g-logo-img {margin:50px 0 4px 0 !important}}
@media screen and (max-width: 600px) {
    #wpbody {
        padding-top: 0px !important;
    }
}
/* --- JP2 Admin Grid: Responsive sizing --- */
.wp-admin .jp2g-admin-scope{
  --jp2g-gap: 12px;
  --jp2g-thumb: 120px; /* default desktop */
}
@media (max-width: 1280px){
  .wp-admin .jp2g-admin-scope{ --jp2g-thumb: 112px; }
}
@media (max-width: 1024px){
  .wp-admin .jp2g-admin-scope{ --jp2g-thumb: 100px; }
}
@media (max-width: 840px){
  .wp-admin .jp2g-admin-scope{ --jp2g-thumb: 92px; }
}
@media (max-width: 640px){
  .wp-admin .jp2g-admin-scope{ --jp2g-thumb: 84px; }
}
@media (max-width: 480px){
  .wp-admin .jp2g-admin-scope{ --jp2g-thumb: 74px; }
}

.wp-admin .jp2g-admin-scope .jp2g-admin-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--jp2g-gap);
  align-items:flex-start;
}
.wp-admin .jp2g-admin-scope .jp2g-admin-grid>li{
  position:relative;
  width:var(--jp2g-thumb);
  height:var(--jp2g-thumb);
  list-style:none;
}
.wp-admin .jp2g-admin-scope .jp2g-admin-grid>li img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:8px;
}
.wp-admin .jp2g-admin-scope .jp2g-admin-grid>li .jp2g-remove{
  position:absolute;
  top:4px;
  right:6px;
  border:0;
  padding:0 6px;
  line-height:1;
  background:#0002;
  color:#222;
  border-radius:6px;
}
/* Drag placeholder matches current thumb size */
.wp-admin .jp2g-admin-scope .jp2g-placeholder{
  border:2px dashed #bbb;
  background:#f5f5f5;
  border-radius:8px;
  min-width:var(--jp2g-thumb);
  min-height:var(--jp2g-thumb);
}

/* Actions row */
.jp2g-actions{margin:10px 0; display:flex; gap:8px; flex-wrap:wrap}
.jp2g-thumb.uploading{display:flex; align-items:center; justify-content:center; background:#fafafa; border:1px dashed #ddd; border-radius:8px; width:var(--jp2g-thumb); height:var(--jp2g-thumb)}
.spinner.is-active{width:24px;height:24px;border:3px solid #ddd;border-top-color:#666;border-radius:50%;animation:jp2spin 1s linear infinite}
@keyframes jp2spin{to{transform:rotate(360deg)}}