.stjpg-wrap{--accent:#f88452;--accent-dark:#e76834;--soft:#fff4ed;--line:#f3b394;--text:#111827;--muted:#667085;position:relative;max-width:980px;margin:0 auto;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text)}.stjpg-wrap *{box-sizing:border-box}.stjpg-version{position:absolute;right:14px;top:13px;padding:5px 9px;border:1px solid var(--line);background:#fff;border-radius:999px;color:#c2410c;font-size:12px;font-weight:900}.stjpg-head{text-align:center;border:1.5px solid var(--line);background:linear-gradient(135deg,var(--soft),#fff);border-radius:20px;padding:24px;margin-bottom:14px}.stjpg-head h1{margin:0;font-size:34px}.stjpg-head p{margin:8px 0 0;color:var(--muted)}.stjpg-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px}.stjpg-card h2{margin:0 0 14px;font-size:20px}.stjpg-drop{display:flex;min-height:170px;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--accent);background:#fff;border-radius:17px;padding:24px;cursor:pointer;transition:.18s}.stjpg-drop:hover,.stjpg-drop.drag{background:var(--soft);border-color:var(--accent-dark);box-shadow:0 10px 28px rgba(248,132,82,.14)}.stjpg-drop input{display:none}.stjpg-upload-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--soft);color:#c2410c;font-size:24px;font-weight:900}.stjpg-drop strong{font-size:20px;margin-top:10px}.stjpg-drop small{color:var(--muted);margin-top:6px}.stjpg-upload-summary{margin-top:12px;padding:11px 13px;border:1px solid #d0d5dd;border-radius:11px;color:#475467;font-weight:700}.stjpg-list{display:grid;gap:8px;margin-top:10px}.stjpg-item{display:grid;grid-template-columns:58px minmax(0,1fr) 80px 160px;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:13px;padding:9px 11px}.stjpg-item.dragging{opacity:.45}.stjpg-thumb{width:58px;height:58px;border:1px solid #e5e7eb;border-radius:9px;background:#f8fafc;overflow:hidden}.stjpg-thumb img{width:100%;height:100%;object-fit:cover}.stjpg-file strong,.stjpg-file small{display:block}.stjpg-file strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stjpg-file small{color:var(--muted);margin-top:3px}.stjpg-order{color:#475467;font-size:12px;font-weight:900}.stjpg-item-actions{display:flex;gap:5px;justify-content:flex-end}.stjpg-item-actions button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:#9a3412;font-weight:900;cursor:pointer}.stjpg-item-actions button:disabled{opacity:.35;cursor:not-allowed}.stjpg-item-actions .danger{background:#fff0f0;color:#b42318;border-color:#fda29b}.stjpg-settings{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stjpg-settings label{font-size:12px;font-weight:900;color:#475467}.stjpg-settings select{width:100%;margin-top:6px;border:1.5px solid #d0d5dd;border-radius:11px;background:#fff;padding:11px;color:#111827}.stjpg-settings select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(248,132,82,.15)}.stjpg-actions{display:flex;gap:9px;margin-top:14px}.stjpg-actions button,.stjpg-result button{border:0;border-radius:11px;background:var(--accent);color:#fff;font-weight:900;padding:12px 17px;cursor:pointer}.stjpg-actions button:hover,.stjpg-result button:not(:disabled):hover{background:var(--accent-dark)}.stjpg-actions button:disabled,.stjpg-result button:disabled{opacity:.5;cursor:not-allowed}.stjpg-light{background:var(--soft)!important;color:#9a3412!important;border:1px solid var(--line)!important}.stjpg-result-card h2{margin-bottom:12px}.stjpg-progress{margin-bottom:14px}.stjpg-progress-track{height:11px;border-radius:999px;background:#eef2f7;overflow:hidden}.stjpg-progress-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .2s}.stjpg-progress strong{display:block;margin-top:8px;color:#475467;font-size:13px}.stjpg-result{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.stjpg-result p{margin:0;color:var(--muted)}.stjpg-status{border:1.5px solid #d0d5dd;border-radius:12px;background:#fff;padding:13px;color:#15803d;font-weight:900}.stjpg-status.error{color:#b42318;border-color:#fda29b;background:#fff7f7}.stjpg-note{text-align:center;color:var(--muted);font-size:13px;margin-top:12px}@media(max-width:760px){.stjpg-head h1{font-size:28px}.stjpg-settings{grid-template-columns:1fr}.stjpg-item{grid-template-columns:52px minmax(0,1fr)}.stjpg-order{grid-column:1}.stjpg-item-actions{grid-column:2;justify-content:flex-start}.stjpg-actions{display:grid}.stjpg-actions button{width:100%}.stjpg-result{display:grid}.stjpg-result button{width:100%}}

/* v1.1 redesigned image list */
.stjpg-list{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.stjpg-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 2px 0;
}
.stjpg-list-head strong{
  display:block;
  font-size:16px;
  color:var(--text);
}
.stjpg-list-head small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}
.stjpg-item{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:center!important;
  border:1.5px solid var(--line)!important;
  background:#fff!important;
  border-radius:14px!important;
  padding:12px 14px!important;
  box-shadow:0 5px 16px rgba(17,24,39,.05);
  transition:.16s ease;
}
.stjpg-item:hover{
  border-color:var(--accent)!important;
  box-shadow:0 8px 22px rgba(248,132,82,.12);
}
.stjpg-item.dragging{
  opacity:.62!important;
  background:var(--soft)!important;
  border-color:var(--accent)!important;
  transform:scale(.995);
}
.stjpg-thumb{
  width:64px!important;
  height:64px!important;
  border:1px solid #e5e7eb!important;
  border-radius:11px!important;
  background:#f8fafc!important;
  overflow:hidden!important;
}
.stjpg-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.stjpg-file{
  min-width:0;
}
.stjpg-page-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:6px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--soft);
  border:1px solid var(--line);
  color:#c2410c;
  font-size:11px;
  font-weight:900;
}
.stjpg-file strong{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:14px;
  color:var(--text);
}
.stjpg-file small{
  display:block!important;
  margin-top:4px!important;
  color:var(--muted)!important;
  font-size:12px;
}
.stjpg-order{
  display:none!important;
}
.stjpg-item-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
}
.stjpg-item-actions button{
  position:relative;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#9a3412!important;
  font-size:17px!important;
  font-weight:900!important;
  cursor:pointer!important;
  transition:.15s ease;
}
.stjpg-item-actions button:hover:not(:disabled){
  background:var(--soft)!important;
  border-color:var(--accent)!important;
  transform:translateY(-1px);
}
.stjpg-item-actions button:disabled{
  opacity:.28!important;
  cursor:not-allowed!important;
}
.stjpg-item-actions .danger{
  background:#fff7f7!important;
  color:#b42318!important;
  border-color:#fda29b!important;
}
.stjpg-item-actions button::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  padding:6px 8px;
  border-radius:7px;
  background:#111827;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
}
.stjpg-item-actions button::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#111827;
  opacity:0;
  visibility:hidden;
  z-index:10;
}
.stjpg-item-actions button:hover::after,
.stjpg-item-actions button:hover::before,
.stjpg-item-actions button:focus-visible::after,
.stjpg-item-actions button:focus-visible::before{
  opacity:1;
  visibility:visible;
}
@media(max-width:680px){
  .stjpg-item{
    grid-template-columns:56px minmax(0,1fr)!important;
  }
  .stjpg-thumb{
    width:56px!important;
    height:56px!important;
  }
  .stjpg-item-actions{
    grid-column:1/-1!important;
    justify-content:flex-end!important;
    padding-top:4px;
  }
}