/* JAPL base styles */
.japl-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.japl-article, .japl-generator { grid-column: 1 / 2; }
.japl-sidebar { grid-column: 2 / 3; }

@media (max-width: 980px) {
  .japl-wrap { grid-template-columns: 1fr; }
  .japl-sidebar { display: none; }
}

.japl-card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; margin: 16px 0; background: #fff; }
.japl-btn { display: inline-block; padding: 10px 14px; border-radius: 10px; border: 1px solid #111; background: #111; color: #fff; cursor: pointer; text-decoration: none; }
.japl-btn-outline { background: transparent; color: #111; }
.japl-button-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

.japl-row { margin: 12px 0; }
.japl-row label { display:block; margin-bottom: 6px; }
.japl-row input[type="text"], .japl-row select, .japl-row textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}

.japl-muted { opacity: .85; font-size: 0.95em; }
.japl-error { border: 1px solid #b00020; color: #b00020; padding: 10px; border-radius: 10px; background: rgba(176,0,32,.06); }

.japl-meter-box { border: 1px dashed #999; padding: 10px; border-radius: 10px; margin: 10px 0 16px; }

.japl-ad { margin: 24px 0; padding: 12px 0; }
.japl-desktop-only { display: block; }
@media (max-width: 980px) { .japl-desktop-only { display: none; } }

.japl-output { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.japl-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.japl-pack { border: 1px solid #ddd; border-radius: 12px; padding: 12px; background: #fff; }
.japl-pack-title { margin-bottom: 6px; }
.japl-pack-credits { font-size: 1.1em; margin: 6px 0; }
.japl-pack-price { opacity: .85; margin-bottom: 10px; }
@media (max-width: 980px) { .japl-pack-grid { grid-template-columns: 1fr; } }
.japl-paypal-btn { margin-top: 10px; }
.japl-pack .japl-error { margin-top: 10px; }

.japl-history-meta { margin-bottom: 8px; }
.japl-upsell-inline { margin-top: 18px; }

.japl-table { width: 100%; border-collapse: collapse; }
.japl-table th, .japl-table td { border: 1px solid #ddd; padding: 10px; vertical-align: top; }
.japl-table th { text-align: left; width: 180px; }
@media (max-width: 980px) { .japl-table th { width: auto; } }

.japl-prompt-body { margin-top: 18px; }
.japl-prompt-card h3 a { text-decoration: none; }