/* Container */
.jpsm-container{ max-width: 860px; margin: 24px auto; padding: 12px; }
.jpsm-card{
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  overflow: hidden;
}
.jpsm-header{
  padding: 20px 24px;
  background: linear-gradient(135deg,#f5f7ff 0%, #f2f9ff 60%, #eefcff 100%);
  border-bottom: 1px solid #eef2f7;
}
.jpsm-title{ font-size: 20px; font-weight: 700; color:#111827; }
.jpsm-subtitle{ font-size: 13px; color:#4b5563; margin-top: 4px; }

.jpsm-controls{ padding: 16px 24px; }
.jpsm-tabs{ display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.jpsm-tab{
  border: 1px solid #e5e7eb; background:#fff; color:#111827;
  padding:8px 12px; border-radius:9999px; cursor:pointer; font-weight:600;
}
.jpsm-tab.active{ background:#111827; color:#fff; border-color:#111827; }

.jpsm-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.jpsm-label{ font-weight:600; color:#374151; }
.jpsm-select, .jpsm-textarea, .jpsm-file{
  border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-size:14px; width:100%; max-width: 260px;
}
.jpsm-textarea{ width:100%; min-height:120px; max-height: 400px; resize: vertical; }

.jpsm-tabpanel{ display:none; padding: 0 24px 12px 24px; }
.jpsm-tabpanel.active{ display:block; }

.jpsm-preview{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.jpsm-thumb{ max-height:120px; border-radius:10px; border:1px solid #e5e7eb; }

.jpsm-actions{ display:flex; justify-content:space-between; align-items:center; padding: 12px 24px 18px 24px; gap:12px; flex-wrap:wrap; }
.jpsm-button{
  background:#2563eb; color:#fff; border:none; padding:12px 18px; border-radius:12px; cursor:pointer; font-weight:700;
  box-shadow: 0 6px 16px rgba(37,99,235,0.2);
}
.jpsm-button:hover{ filter: brightness(0.98); }
.jpsm-loading-btn{ opacity:0.8; }

.jpsm-disclaimer{ font-size:12px; color:#6b7280; }

.jpsm-output{ padding: 0 24px 24px 24px; }
.jpsm-loading{ padding:14px; background:#f3f4f6; border-radius:10px; }
.jpsm-error{ padding:14px; background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:10px; }
.jpsm-result{ padding:14px; background:#f9fafb; border-radius:12px; border:1px solid #eef2f7; }
.jpsm-result h3{ margin: 10px 0 6px 0; font-size: 18px; }
.jpsm-result p{ margin: 6px 0; line-height: 1.6; }
.jpsm-result ul{ margin: 6px 0 6px 20px; }
@media (max-width: 640px){
  .jpsm-controls, .jpsm-tabpanel, .jpsm-actions, .jpsm-output{ padding-left:14px; padding-right:14px; }
  .jpsm-select{ max-width:100%; }
}
.jpsm-hidden{ display:none; }