
.jgg-wrap{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 18px;
  max-width: 980px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}
.jgg-wrap h3{ margin: 0 0 6px; }
.jgg-sub{ margin: 0 0 14px; opacity: 0.85; }
.jgg-form{ margin-top: 10px; }
.jgg-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap: 12px;
}
.jgg-grid label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.jgg-grid input[type="number"],
.jgg-grid input[type="text"],
.jgg-grid select{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
}
.jgg-grid input[type="range"]{
  width: 100%;
}
.jgg-range{ font-size: 12px; opacity: .75; }
.jgg-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.jgg-btn{
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  background: #111;
  color: #fff;
}
.jgg-btn.jgg-secondary{
  background: rgba(0,0,0,0.08);
  color: #111;
}
.jgg-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.jgg-result{ margin-top: 14px; }
.jgg-success{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
.jgg-meta{ font-size: 13px; opacity: .85; }
.jgg-download{
  display: inline-block;
  padding: 9px 12px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  text-decoration: none;
}
.jgg-error{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(200,0,0,0.25);
  background: rgba(200,0,0,0.06);
}
.jgg-loading{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
.jgg-notes{ margin-top: 12px; }
@media (max-width: 860px){
  .jgg-grid{ grid-template-columns: 1fr; }
}
