.gen-wrap {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.gen-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px 40px;
  text-align: center;
}
.gen-hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 16px;
}
.gen-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.1;
}
.gen-hero-sub {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* INPUT SECTION */
.gen-input-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 32px 48px;
}
.gen-form {
  display: flex;
  gap: 12px;
}
.gen-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.gen-input::placeholder { color: var(--text-muted); }
.gen-input:focus { border-color: var(--accent); }
.gen-btn {
  background: var(--accent);
  color: #0f172a;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.gen-btn:hover { opacity: 0.85; }
.gen-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* EXAMPLE PROMPTS */
.gen-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 32px 40px;
}
.gen-example-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.gen-example-chip:hover { border-color: var(--accent); color: var(--text); }

/* LOADING */
.gen-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px;
  gap: 16px;
}
.gen-loading.active { display: flex; }
.gen-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gen-loading-text {
  font-size: 14px;
  color: var(--text-muted);
}

/* RESULTS */
.gen-results {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px 80px;
  width: 100%;
}
.gen-results.active { display: block; }
.gen-results-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 20px;
  text-align: center;
}
.gen-results-for {
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 32px;
}
.gen-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* INSTAGRAM MOCKUP CARD */
.ig-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ig-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ig-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  flex-shrink: 0;
}
.ig-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ig-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.ig-card-body { padding: 14px 16px; flex: 1; }
.ig-card-caption {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.ig-card-hashtags {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  word-break: break-word;
}
.ig-card-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}
.ig-card-actions {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.ig-action-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

/* RESET BTN */
.gen-reset {
  display: flex;
  justify-content: center;
  padding: 0 32px 60px;
}
.gen-reset-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.gen-reset-btn:hover { border-color: var(--accent); color: var(--text); }

/* RESPONSIVE */
@media (max-width: 700px) {
  .gen-posts-grid { grid-template-columns: 1fr; }
  .gen-form { flex-direction: column; }
}
@media (max-width: 480px) {
  .gen-hero { padding: 40px 20px 32px; }
  .gen-input-section { padding: 0 20px 32px; }
  .gen-results { padding: 0 20px 60px; }
}