/* ── Prompt Generator by AK — light / minimal theme ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

.pg-wrap {
  --pg-bg:        #ffffff;
  --pg-surface:   #ffffff;
  --pg-fill:      #f6f6f7;   /* whisper grey for inner panels */
  --pg-border:    #e6e6e8;   /* hairline */
  --pg-text:      #111114;
  --pg-muted:     #86868b;
  --pg-accent:    #7c3aed;   /* single accent — change this one line to reskin */
  --pg-accent-soft: rgba(124,58,237,0.08);
  --pg-radius:    14px;
  --pg-radius-sm: 10px;

  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--pg-bg);
  color: var(--pg-text);
  max-width: 620px;
  margin: 40px auto;
  padding: 0 16px 48px;
  -webkit-font-smoothing: antialiased;
}

.pg-wrap * { box-sizing: border-box; }

/* ── Upload zone ── */
.pg-upload-zone {
  border: 1.5px dashed var(--pg-border);
  border-radius: var(--pg-radius);
  background: var(--pg-surface);
  padding: 56px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.pg-upload-zone:hover,
.pg-upload-zone.drag-over {
  border-color: var(--pg-accent);
  background: var(--pg-accent-soft);
}
.pg-upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  background: var(--pg-accent-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-upload-icon svg {
  width: 22px;
  height: 22px;
  color: var(--pg-accent);
}
.pg-upload-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--pg-text);
}
.pg-upload-sub {
  font-size: .92rem;
  color: var(--pg-muted);
  margin: 0;
}
#pg-browse {
  color: var(--pg-accent);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
#pg-browse:hover { text-decoration: underline; }

#pg-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* ── Preview ── */
#pg-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
#pg-preview-img {
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--pg-radius);
  border: 1px solid var(--pg-border);
  display: block;
}

/* ── Buttons ── */
.pg-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--pg-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* primary (generic) */
.pg-btn {
  background: var(--pg-text);
  color: #fff;
}
.pg-btn:hover { background: #2a2a2e; }
.pg-btn:disabled { opacity: .7; cursor: default; }

/* Generate / Analyze button — site purple */
#pg-analyze-btn {
  background: var(--pg-accent);
  color: #fff;
}
#pg-analyze-btn:hover { background: #6d28d9; }
#pg-analyze-btn:disabled { opacity: .85; cursor: default; }

/* secondary / ghost */
.pg-btn-ghost {
  background: transparent;
  color: var(--pg-text);
  border: 1px solid var(--pg-border);
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--pg-radius-sm);
  cursor: pointer;
  font-size: .92rem;
  transition: border-color .18s ease, background .18s ease;
}
.pg-btn-ghost:hover {
  border-color: var(--pg-text);
  background: var(--pg-fill);
}

/* "Analyzing…" state — spinner + text, inherits the purple button */
.pg-btn-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.pg-btn-loader::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pg-spin .7s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ── Result ── */
#pg-result {
  margin-top: 28px;
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius);
  background: var(--pg-surface);
  padding: 22px;
}
.pg-result-label {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--pg-text);
  display: block;
  margin-bottom: 12px;
}
/* Hide the "Prompt is Ready" header + Copy button while the shimmer loads */
.pg-result:has(.pg-shimmer) .pg-result-header { display: none; }
.pg-result-body,
#pg-result-body {
  background: var(--pg-fill);
  border-radius: var(--pg-radius-sm);
  padding: 20px;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--pg-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.pg-section {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  display: block;
  margin-top: 14px;
}
#pg-copy-btn {
  margin-top: 16px;
  width: 100%;
  background: var(--pg-text);
  color: #fff;
  border: none;
  border-radius: var(--pg-radius-sm);
  padding: 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: .96rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
#pg-copy-btn:hover { background: #2a2a2e; }
#pg-copy-btn.copied { background: var(--pg-accent); }

/* ── Error ── */
.pg-error,
#pg-error {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: var(--pg-radius-sm);
  background: #fdf2f2;
  border: 1px solid #f3d2d2;
  color: #b42318;
  font-size: .92rem;
}

/* ── Loading shimmer (shown while analyzing) ── */
.pg-shimmer {
  height: 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ececee 25%, #f6f6f7 37%, #ececee 63%);
  background-size: 400% 100%;
  animation: pg-shimmer 1.4s ease infinite;
}
.pg-shimmer:last-child { margin-bottom: 0; }
@keyframes pg-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ── Accessibility ── */
.pg-wrap :focus-visible {
  outline: 2px solid var(--pg-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pg-wrap *, .pg-btn-loader { animation: none !important; transition: none !important; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .pg-wrap { margin: 24px auto; }
  .pg-upload-zone { padding: 40px 20px; }
  .pg-result-body, #pg-result-body { padding: 16px; }
  #pg-result { padding: 16px; }
}