@charset "UTF-8";

.aipe-app,
.aipe-app * {
  box-sizing: border-box;
}

.aipe-app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  color: #111827;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.page-app-ai-prompt-examples .app-stage-section {
  overflow-x: hidden;
}

/* Keep the app inside the site's existing content width.
   Do NOT force desktop to 100vw / max-width:none. */
.page-app-ai-prompt-examples .app-stage-panel:has(.aipe-app),
.page-app-ai-prompt-examples .content-panel:has(.aipe-app),
.page-app-ai-prompt-examples .aipe-stage-panel,
.page-app-ai-prompt-examples .aipe-content-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.aipe-shell {
  width: 100%;
  max-width: 100%;
}

.aipe-shell {
  display: grid;
  gap: 18px;
}


.aipe-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 274px);
  align-items: center;
  gap: clamp(20px, 4vw, 54px);
  min-height: clamp(380px, 35vw, 505px);
  padding: clamp(30px, 4.2vw, 60px) clamp(28px, 4.4vw, 60px);
  border: 1px solid rgba(191, 219, 254, .72);
  border-radius: 34px;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 36%, rgba(255,255,255,.56) 58%, rgba(255,255,255,.10) 100%),
    url('/ai-prompt-examples-app/assets/hero-ai-prompt-bg.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  box-shadow: 0 28px 90px rgba(59, 130, 246, .14), 0 10px 28px rgba(15, 23, 42, .06);
  isolation: isolate;
}

.aipe-banner:before {
  content: "";
  position: absolute;
  inset: auto auto -90px -80px;
  width: 360px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(168, 85, 247, .22), rgba(168, 85, 247, 0) 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

.aipe-banner-copy,
.aipe-banner-card {
  position: relative;
  z-index: 1;
}

.aipe-banner-copy {
  align-self: center;
  max-width: 920px;
}

.aipe-kicker,
.aipe-mini-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.aipe-kicker img {
  width: 20px;
  height: 20px;
}

.aipe-banner h2,
.aipe-panel-head h3,
.aipe-result-head h3 {
  margin: 8px 0 10px;
  font-weight: 950;
  letter-spacing: -.052em;
  line-height: .98;
  color: #020617;
}

.aipe-banner h2 {
  margin: 0 0 28px;
  font-size: clamp(50px, 6.15vw, 86px);
  line-height: .92;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.aipe-banner h2 span {
  color: #020617;
}

.aipe-banner h2 em {
  position: relative;
  display: inline-block;
  padding-right: .03em;
  font-style: normal;
  background: linear-gradient(90deg, #d946ef 0%, #7c3aed 36%, #2563eb 70%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aipe-banner h2 em:after {
  content: "";
  position: absolute;
  left: 3%;
  right: 2%;
  bottom: -.12em;
  height: .08em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217,70,239,.76), rgba(37,99,235,.78), rgba(6,182,212,.68));
  transform: rotate(-1.5deg);
  opacity: .72;
}

.aipe-banner p,
.aipe-panel-head p {
  max-width: 710px;
  margin: 0;
  color: #334155;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.58;
  font-weight: 560;
}

.aipe-hero-cards {
  width: min(100%, 880px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(46px, 5.3vw, 78px);
}

.aipe-hero-card {
  min-height: 84px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 19px;
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
}

.aipe-hero-card-purple { border: 1px solid rgba(147, 51, 234, .35); }
.aipe-hero-card-green { border: 1px solid rgba(34, 197, 94, .35); }
.aipe-hero-card-orange { border: 1px solid rgba(245, 158, 11, .42); }

.aipe-hero-card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  box-shadow: 0 16px 28px rgba(15, 23, 42, .14);
}

.aipe-hero-card-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.aipe-hero-card-purple .aipe-hero-card-icon { background: linear-gradient(145deg, #c084fc, #7c3aed); }
.aipe-hero-card-green .aipe-hero-card-icon { background: linear-gradient(145deg, #86efac, #22c55e); }
.aipe-hero-card-orange .aipe-hero-card-icon { background: linear-gradient(145deg, #fbbf24, #f97316); }
.aipe-hero-card .aipe-hero-card-icon img { filter: brightness(0) invert(1); }

.aipe-hero-card-text {
  display: block;
  min-width: 0;
}

.aipe-hero-card-text strong,
.aipe-hero-card-text small {
  display: block;
}

.aipe-hero-card-text strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 950;
}

.aipe-hero-card-purple .aipe-hero-card-text strong { color: #111827; }
.aipe-hero-card-green .aipe-hero-card-text strong { color: #14532d; }
.aipe-hero-card-orange .aipe-hero-card-text strong { color: #9a3412; }

.aipe-hero-card-text small {
  margin-top: 5px;
  color: #334155;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 560;
}

.aipe-hero-card-arrow {
  justify-self: end;
  font-size: 38px;
  line-height: 1;
  font-weight: 300;
}

.aipe-hero-card-purple .aipe-hero-card-arrow { color: #7c3aed; }
.aipe-hero-card-green .aipe-hero-card-arrow { color: #22c55e; }
.aipe-hero-card-orange .aipe-hero-card-arrow { color: #f97316; }

.aipe-benefits {
  display: none;
}

.aipe-banner-card {
  justify-self: end;
  width: min(100%, 260px);
  min-height: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 18px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 30px;
  background: linear-gradient(166deg, #4428f4 0%, #1d4ed8 47%, #06b6d4 100%);
  color: #fff;
  box-shadow: 0 26px 60px rgba(37, 99, 235, .34), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.18);
  text-align: center;
}

.aipe-orbit {
  width: 88px;
  height: 88px;
  margin: 0 0 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 45%, rgba(255,255,255,.98) 0 15%, rgba(255,255,255,.42) 16% 36%, transparent 37%),
    radial-gradient(circle at 68% 28%, rgba(255,255,255,.9), transparent 24%),
    conic-gradient(from 130deg, #a78bfa, #22d3ee, #f0abfc, #60a5fa, #a78bfa);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 18px 38px rgba(15,23,42,.22);
}

.aipe-banner-card strong {
  font-size: clamp(54px, 4.2vw, 72px);
  line-height: .92;
  letter-spacing: -.06em;
}

.aipe-banner-card span {
  font-size: 20px;
  font-weight: 950;
}

.aipe-stat-line {
  position: relative;
  width: 86%;
  height: 1px;
  margin: 18px 0 12px;
  background: rgba(255,255,255,.20);
}

.aipe-stat-line:after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: #67e8f9;
}

.aipe-stat-icons {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  gap: 9px;
  margin: 6px 0 14px;
}

.aipe-stat-icons i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(15,23,42,.12);
}

.aipe-stat-icons img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.aipe-banner-card small {
  color: rgba(255,255,255,.94);
  font-size: 18px;
  font-weight: 800;
  opacity: 1;
}

.aipe-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 24px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.aipe-tab {
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.aipe-tab img,
.aipe-btn img,
.aipe-play-link img,
.aipe-result-actions img,
.aipe-clear-filters img,
.aipe-copy-card img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.aipe-tab.is-active {
  background: #fff;
  color: #111827;
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
}

.aipe-tab:hover {
  transform: translateY(-1px);
}

.aipe-panel {
  display: none;
  padding: 24px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 30px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 65px rgba(15,23,42,.08);
}

.aipe-panel.is-active {
  display: block;
}

.aipe-panel[hidden],
.aipe-loader[hidden],
.aipe-result[hidden],
.aipe-empty[hidden],
.aipe-upgrade[hidden],
.aipe-more-wrap [hidden] {
  display: none !important;
}

.aipe-panel-head,
.aipe-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.aipe-panel-head h3,
.aipe-result-head h3 {
  font-size: clamp(25px, 3vw, 36px);
}

.aipe-total-pill,
.aipe-play-link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.aipe-play-link {
  background: #ecfeff;
  color: #0369a1;
}

.aipe-toolbar,
.aipe-form-grid {
  display: grid;
  gap: 12px;
}

.aipe-toolbar {
  grid-template-columns: minmax(240px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(130px, .8fr) auto;
  align-items: end;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid rgba(99,102,241,.13);
  margin-bottom: 14px;
}

.aipe-form-grid.two { grid-template-columns: 1fr 1fr; }
.aipe-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aipe-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.aipe-field > span {
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.aipe-input-wrap {
  position: relative;
  min-width: 0;
}

.aipe-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.aipe-textarea-wrap .aipe-field-icon {
  top: 19px;
  transform: none;
}

.aipe-field input,
.aipe-field select,
.aipe-field textarea,
.aipe-result textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  color: #0f172a;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
  box-shadow: 0 12px 24px rgba(15,23,42,.04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.aipe-field input,
.aipe-field select {
  height: 52px;
  padding: 0 14px 0 44px;
}

.aipe-field textarea {
  min-height: 140px;
  resize: vertical;
  padding: 16px 16px 16px 46px;
}

.aipe-field input::placeholder,
.aipe-field textarea::placeholder {
  color: rgba(100,116,139,.48);
}

.aipe-field input:focus::placeholder,
.aipe-field textarea:focus::placeholder {
  color: rgba(100,116,139,.22);
}

.aipe-field input:focus,
.aipe-field select:focus,
.aipe-field textarea:focus,
.aipe-result textarea:focus {
  border-color: rgba(79,70,229,.72);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12), 0 12px 26px rgba(15,23,42,.05);
  background: #fff;
}

.aipe-clear-filters,
.aipe-btn,
.aipe-result-actions button,
.aipe-copy-card {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  font: inherit;
  text-decoration: none;
}

.aipe-clear-filters {
  height: 52px;
  padding: 0 14px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  color: #475569;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.aipe-catalog-status {
  min-height: 24px;
  margin: 0 0 12px;
  color: #64748b;
  font-weight: 750;
  font-size: 13px;
}

.aipe-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.aipe-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 14px 32px rgba(15,23,42,.06);
}

.aipe-card-top,
.aipe-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.aipe-card-top span,
.aipe-card-top em,
.aipe-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  font-style: normal;
}

.aipe-card-top span {
  background: #eef2ff;
  color: #4338ca;
}

.aipe-card-top em {
  background: #ecfeff;
  color: #0e7490;
}

.aipe-card-meta span {
  background: #f1f5f9;
  color: #475569;
}

.aipe-prompt-card h4 {
  margin: 0;
  color: #0f172a;
  line-height: 1.15;
  font-size: 17px;
  letter-spacing: -.02em;
}

.aipe-prompt-card p {
  margin: 0;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.52;
}

.aipe-prompt-details {
  margin-top: auto;
}

.aipe-prompt-details summary {
  color: #4f46e5;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.aipe-prompt-details pre {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 16px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.5;
}

.aipe-copy-card {
  min-height: 42px;
  border-radius: 16px;
  background: #111827;
  color: #fff;
}

.aipe-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.aipe-empty {
  padding: 24px;
  border-radius: 22px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
}

.aipe-empty strong,
.aipe-empty span {
  display: block;
}

.aipe-empty strong {
  color: #0f172a;
  font-size: 18px;
}

.aipe-generator {
  display: grid;
  gap: 14px;
}

.aipe-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2px;
}

.aipe-btn {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.aipe-btn:hover {
  transform: translateY(-1px);
}

.aipe-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb 52%, #06b6d4);
  box-shadow: 0 18px 34px rgba(37,99,235,.25);
}

.aipe-btn-ghost,
.aipe-btn-soft {
  color: #334155;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.25);
}

.aipe-btn:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.aipe-error {
  padding: 12px 14px;
  border-radius: 17px;
  border: 1px solid rgba(220,38,38,.22);
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 750;
}

.aipe-loader {
  margin-top: 16px;
}

.aipe-loader-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border-radius: 24px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
}

.aipe-progress-ring {
  --aipe-progress: 8;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#67e8f9 calc(var(--aipe-progress) * 1%), rgba(255,255,255,.14) 0);
  position: relative;
}

.aipe-progress-ring:before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: #111827;
}

.aipe-progress-ring span {
  position: relative;
  z-index: 1;
  font-weight: 950;
}

.aipe-loader-card strong,
.aipe-loader-card p {
  margin: 0;
}

.aipe-loader-card p {
  margin-top: 4px;
  color: rgba(255,255,255,.72);
}

.aipe-result {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(34,197,94,.17);
  border-radius: 26px;
  background: linear-gradient(135deg, #f0fdf4, #f8fafc 48%, #ecfeff);
}

.aipe-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.aipe-result-actions button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: #334155;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.aipe-result textarea {
  min-height: 320px;
  resize: vertical;
  padding: 16px;
  white-space: pre-wrap;
}

.aipe-upgrade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.56);
  backdrop-filter: blur(10px);
}

.aipe-upgrade-card {
  position: relative;
  width: min(460px, 100%);
  padding: 28px;
  border-radius: 30px;
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 90px rgba(15,23,42,.28);
}

.aipe-upgrade-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 99px;
  background: #f1f5f9;
  color: #475569;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.aipe-upgrade-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #eef2ff, #ecfeff);
}

.aipe-upgrade-icon img {
  width: 34px;
  height: 34px;
}

.aipe-upgrade-card h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 26px;
  letter-spacing: -.03em;
}

.aipe-upgrade-card p {
  margin: 0 0 18px;
  color: #64748b;
  line-height: 1.55;
}

.aipe-upgrade-card a {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  background: linear-gradient(135deg, #111827, #2563eb);
}

.aipe-upgrade-card a img {
  width: 22px;
  height: 22px;
}

@media (max-width: 980px) {
  .aipe-banner { grid-template-columns: 1fr; }
  .aipe-banner-card { min-height: 160px; }
  .aipe-toolbar { grid-template-columns: 1fr 1fr; }
  .aipe-clear-filters { width: 100%; }
  .aipe-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aipe-form-grid.three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .page-app-ai-prompt-examples .app-stage-panel:has(.aipe-app),
  .page-app-ai-prompt-examples .content-panel:has(.aipe-app),
  .page-app-ai-prompt-examples .aipe-stage-panel,
  .page-app-ai-prompt-examples .aipe-content-panel {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .aipe-app {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }

  .aipe-shell,
  .aipe-banner,
  .aipe-panel,
  .aipe-result,
  .aipe-toolbar,
  .aipe-tabs {
    width: 100%;
    max-width: 100%;
  }

  .aipe-banner {
    padding: 18px;
    border-radius: 24px;
    gap: 18px;
  }

  .aipe-banner p,
  .aipe-panel-head p {
    font-size: 14.5px;
  }

  .aipe-benefits {
    margin-top: 24px;
  }

  .aipe-benefits li {
    width: 100%;
    justify-content: flex-start;
  }

  .aipe-tabs,
  .aipe-toolbar,
  .aipe-card-grid,
  .aipe-form-grid.two,
  .aipe-form-grid.three {
    grid-template-columns: 1fr;
  }

  .aipe-tab,
  .aipe-field,
  .aipe-wide,
  .aipe-field input,
  .aipe-field select,
  .aipe-field textarea,
  .aipe-actions,
  .aipe-actions button,
  .aipe-clear-filters,
  .aipe-btn,
  .aipe-result-actions button {
    width: 100%;
  }

  .aipe-panel {
    padding: 16px;
    border-radius: 24px;
  }

  .aipe-panel-head,
  .aipe-result-head,
  .aipe-actions,
  .aipe-loader-card {
    flex-direction: column;
    align-items: stretch;
  }

  .aipe-total-pill,
  .aipe-play-link {
    width: 100%;
    white-space: normal;
  }

  .aipe-result-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .aipe-result textarea {
    min-height: 280px;
  }
}


@media (max-width: 1180px) {
  .aipe-banner {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    min-height: 430px;
    padding: 38px 34px;
  }
  .aipe-hero-cards {
    grid-template-columns: 1fr;
    width: min(430px, 100%);
    margin-top: 34px;
  }
  .aipe-banner h2 {
    font-size: clamp(44px, 6vw, 66px);
  }
  .aipe-banner-card {
    min-height: 320px;
  }
}

@media (max-width: 768px) {
  .aipe-banner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 24px 16px 18px;
    border-radius: 26px;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 46%, rgba(255,255,255,.66) 100%),
      url('/ai-prompt-examples-app/assets/hero-ai-prompt-bg.webp');
    background-position: 66% 26%;
    background-size: cover;
  }

  .aipe-banner-copy {
    max-width: 100%;
  }

  .aipe-banner h2 {
    margin-bottom: 18px;
    font-size: clamp(38px, 13.5vw, 56px);
    line-height: .96;
  }

  .aipe-banner p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.55;
  }

  .aipe-hero-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
  }

  .aipe-hero-card {
    min-height: 74px;
    grid-template-columns: 52px minmax(0, 1fr) 16px;
    padding: 11px 13px;
    border-radius: 18px;
  }

  .aipe-hero-card-icon {
    width: 52px;
    height: 52px;
  }

  .aipe-hero-card-icon img {
    width: 25px;
    height: 25px;
  }

  .aipe-banner-card {
    justify-self: stretch;
    width: 100%;
    min-height: auto;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .aipe-orbit {
    width: 62px;
    height: 62px;
    margin-bottom: 10px;
  }

  .aipe-banner-card strong {
    font-size: 46px;
  }

  .aipe-banner-card span {
    font-size: 16px;
  }

  .aipe-stat-icons {
    grid-template-columns: repeat(4, 38px);
    justify-content: center;
  }

  .aipe-stat-icons i {
    width: 38px;
    height: 38px;
  }

  .aipe-banner-card small {
    font-size: 15px;
  }
}

/* Hero button fix: desktop keeps only the background artwork, mobile keeps the blue stat card. */
.aipe-hero-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-style: solid;
}

.aipe-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.aipe-hero-card:focus-visible {
  outline: 3px solid rgba(99, 102, 241, .32);
  outline-offset: 4px;
}

@media (min-width: 769px) {
  .aipe-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .aipe-banner-card {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .aipe-banner-card {
    display: flex !important;
  }
}

/* AI Prompt Examples: desktop hero background + premium tab switcher v3 */
@media (min-width: 769px) {
  .aipe-banner {
    background-size: auto, auto 118% !important;
    background-position: center center, calc(100% + clamp(120px, 12vw, 220px)) 50% !important;
  }

  .aipe-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.6vw, 34px) !important;
    padding: clamp(22px, 2.2vw, 34px) clamp(24px, 3.5vw, 46px) !important;
    border: 4px solid rgba(199, 207, 255, .48) !important;
    border-radius: clamp(38px, 4vw, 58px) !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 30px 75px rgba(99, 102, 241, .10), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    backdrop-filter: blur(18px);
  }

  .aipe-tab {
    min-height: clamp(104px, 7.6vw, 132px) !important;
    padding: 0 clamp(22px, 3vw, 42px) !important;
    border: 4px solid rgba(186, 201, 252, .82) !important;
    border-radius: clamp(30px, 3.1vw, 42px) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,248,255,.82)) !important;
    color: #081330 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 2vw, 28px) !important;
    font-size: clamp(28px, 3.05vw, 48px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: -.055em !important;
    text-align: center !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 14px 34px rgba(59,130,246,.08) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
  }

  .aipe-tab.is-active {
    border: 4px solid transparent !important;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, #a855f7 0%, #22d3ee 52%, #2563eb 100%) border-box !important;
    box-shadow: 0 24px 48px rgba(99, 102, 241, .22), 0 10px 20px rgba(14, 165, 233, .10), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .aipe-tab:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 50px rgba(99, 102, 241, .15), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .aipe-tab.is-active:hover {
    box-shadow: 0 28px 56px rgba(99, 102, 241, .25), 0 12px 24px rgba(14, 165, 233, .12), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .aipe-tabs .aipe-tab img {
    width: clamp(54px, 4.2vw, 74px) !important;
    height: clamp(54px, 4.2vw, 74px) !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    filter: none !important;
  }
}

@media (max-width: 768px) {
  .aipe-tabs {
    gap: 10px !important;
    padding: 12px !important;
    border: 2px solid rgba(199, 207, 255, .50) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.86) !important;
  }

  .aipe-tab {
    min-height: 76px !important;
    border: 2px solid rgba(186, 201, 252, .82) !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #fff, #eef8ff) !important;
    color: #081330 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
    gap: 12px !important;
  }

  .aipe-tab.is-active {
    border: 2px solid transparent !important;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, #a855f7, #22d3ee, #2563eb) border-box !important;
    box-shadow: 0 14px 30px rgba(99, 102, 241, .17) !important;
  }

  .aipe-tabs .aipe-tab img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    filter: none !important;
  }
}

/* AI Prompt Examples: catalog header + filter block polish v4 */
@media (min-width: 769px) {
  .aipe-tabs {
    gap: clamp(14px, 1.5vw, 22px) !important;
    padding: clamp(12px, 1.2vw, 18px) !important;
    border-width: 2px !important;
    border-radius: clamp(26px, 2.6vw, 38px) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 20px 52px rgba(99,102,241,.08), inset 0 1px 0 rgba(255,255,255,.95) !important;
  }

  .aipe-tab {
    min-height: clamp(72px, 5.2vw, 92px) !important;
    padding: 0 clamp(16px, 2.2vw, 32px) !important;
    border-width: 2px !important;
    border-radius: clamp(20px, 2.1vw, 30px) !important;
    gap: clamp(12px, 1.35vw, 20px) !important;
    font-size: clamp(22px, 2.05vw, 34px) !important;
    letter-spacing: -.045em !important;
  }

  .aipe-tab.is-active {
    border-width: 2px !important;
  }

  .aipe-tabs .aipe-tab img {
    width: clamp(38px, 3.1vw, 54px) !important;
    height: clamp(38px, 3.1vw, 54px) !important;
  }
}

.aipe-panel[data-aipe-panel="catalog"] {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3.8vw, 58px) clamp(26px, 3.7vw, 54px) !important;
  border: 2px solid rgba(192, 213, 255, .62) !important;
  border-radius: clamp(28px, 3vw, 42px) !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(168, 85, 247, .09), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(34, 211, 238, .16), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,250,255,.96) 54%, rgba(239,249,255,.94) 100%) !important;
  box-shadow: 0 28px 84px rgba(37, 99, 235, .12), 0 10px 30px rgba(15, 23, 42, .06) !important;
}

.aipe-panel[data-aipe-panel="catalog"]:before {
  content: "";
  position: absolute;
  inset: auto auto -58px -70px;
  width: 240px;
  height: 170px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(168,85,247,.18), rgba(168,85,247,0) 72%);
  filter: blur(2px);
  pointer-events: none;
}

.aipe-panel[data-aipe-panel="catalog"]:after {
  content: "";
  position: absolute;
  right: -44px;
  top: -42px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, .10);
  box-shadow: 0 0 0 18px rgba(168, 85, 247, .035), 0 0 0 38px rgba(14, 165, 233, .025);
  pointer-events: none;
}

.aipe-panel[data-aipe-panel="catalog"] > * {
  position: relative;
  z-index: 1;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head {
  align-items: flex-start !important;
  margin-bottom: clamp(24px, 3vw, 42px) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-mini-kicker {
  gap: 10px;
  font-size: clamp(13px, 1vw, 18px) !important;
  letter-spacing: .15em !important;
  font-weight: 950 !important;
  background: linear-gradient(90deg, #1d4ed8 0%, #8b5cf6 45%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-mini-kicker:before {
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: url('/ai-prompt-examples-app/assets/icons/database-filter.png') center / contain no-repeat;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
  max-width: 1040px;
  margin: clamp(18px, 1.8vw, 28px) 0 14px !important;
  font-size: clamp(38px, 4.2vw, 70px) !important;
  line-height: .95 !important;
  letter-spacing: -.065em !important;
  color: #071333 !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head p {
  max-width: 1040px !important;
  color: #64748b !important;
  font-size: clamp(16px, 1.32vw, 24px) !important;
  line-height: 1.45 !important;
  font-weight: 560 !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill {
  min-height: clamp(54px, 4vw, 72px) !important;
  padding: 0 clamp(18px, 1.7vw, 28px) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92), rgba(238,249,255,.90)) padding-box,
    linear-gradient(135deg, rgba(217,70,239,.62), rgba(59,130,246,.58), rgba(34,211,238,.50)) border-box !important;
  color: #0f172a !important;
  font-size: clamp(15px, 1.35vw, 23px) !important;
  font-weight: 500 !important;
  box-shadow: 0 18px 40px rgba(59,130,246,.16), 0 12px 30px rgba(217,70,239,.14), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill:before {
  content: "";
  width: clamp(36px, 3vw, 48px);
  height: clamp(36px, 3vw, 48px);
  flex: 0 0 auto;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(168,85,247,.14) url('/ai-prompt-examples-app/assets/icons/sparkle-filter.png') center / 70% 70% no-repeat;
  box-shadow: 0 10px 26px rgba(168,85,247,.18);
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill strong,
.aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill b {
  color: #4f46e5;
  font-weight: 950;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
  grid-template-columns: minmax(320px, 1.7fr) minmax(190px, 1fr) minmax(190px, 1fr) minmax(170px, .9fr) minmax(120px, auto) !important;
  gap: clamp(12px, 1.2vw, 22px) !important;
  align-items: end !important;
  padding: clamp(18px, 2.35vw, 34px) !important;
  border: 2px solid rgba(195, 213, 255, .52) !important;
  border-radius: clamp(26px, 2.7vw, 40px) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(247,250,255,.74)) !important;
  box-shadow: 0 22px 56px rgba(37,99,235,.12), 0 10px 28px rgba(168,85,247,.06), inset 0 1px 0 rgba(255,255,255,.98) !important;
  backdrop-filter: blur(18px);
  margin-bottom: 18px !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field {
  gap: clamp(10px, .85vw, 14px) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field > span {
  color: #334155 !important;
  font-size: clamp(15px, 1.05vw, 22px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-input-wrap {
  filter: drop-shadow(0 14px 24px rgba(99,102,241,.08));
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field input,
.aipe-panel[data-aipe-panel="catalog"] .aipe-field select {
  height: clamp(58px, 4.4vw, 76px) !important;
  border: 2px solid transparent !important;
  border-radius: clamp(18px, 1.7vw, 27px) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(147,197,253,.82), rgba(217,70,239,.42)) border-box !important;
  color: #111827 !important;
  font-size: clamp(14px, 1.05vw, 20px) !important;
  font-weight: 520 !important;
  padding-left: clamp(58px, 4vw, 76px) !important;
  padding-right: 40px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 10px 22px rgba(15,23,42,.04) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field-search input {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(99,102,241,.55), rgba(217,70,239,.32)) border-box !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field:nth-of-type(2) select {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(168,85,247,.46), rgba(217,70,239,.36)) border-box !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field:nth-of-type(3) select {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(14,165,233,.52), rgba(34,211,238,.36)) border-box !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field:nth-of-type(4) select {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(139,92,246,.48), rgba(236,72,153,.40)) border-box !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field input::placeholder {
  color: rgba(100,116,139,.42) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field-icon {
  left: clamp(18px, 1.45vw, 26px) !important;
  width: clamp(28px, 2.2vw, 38px) !important;
  height: clamp(28px, 2.2vw, 38px) !important;
  object-fit: contain !important;
  filter: none !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
  height: clamp(58px, 4.4vw, 76px) !important;
  min-width: clamp(110px, 8vw, 150px) !important;
  padding: 0 clamp(16px, 1.35vw, 24px) !important;
  border: 2px solid rgba(251,113,133,.34) !important;
  border-radius: clamp(18px, 1.7vw, 27px) !important;
  background: rgba(255,255,255,.86) !important;
  color: #111827 !important;
  font-size: clamp(14px, 1.05vw, 20px) !important;
  font-weight: 780 !important;
  box-shadow: 0 14px 30px rgba(244,63,94,.10), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters img {
  width: clamp(28px, 2.1vw, 36px) !important;
  height: clamp(28px, 2.1vw, 36px) !important;
  filter: none !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field input:focus,
.aipe-panel[data-aipe-panel="catalog"] .aipe-field select:focus {
  box-shadow: 0 0 0 5px rgba(99,102,241,.10), 0 14px 34px rgba(37,99,235,.10) !important;
}

@media (max-width: 1180px) and (min-width: 769px) {
  .aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .aipe-panel[data-aipe-panel="catalog"] {
    padding: 18px 14px !important;
    border-radius: 26px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
    margin-top: 12px !important;
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head p {
    font-size: 15px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 24px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-field input,
  .aipe-panel[data-aipe-panel="catalog"] .aipe-field select,
  .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
    height: 58px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-field-icon {
    width: 27px !important;
    height: 27px !important;
  }
}

/* AI Prompt Examples: compact desktop tabs, catalog header and responsive filters v6 */
.aipe-app,
.aipe-app * {
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .aipe-tabs {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 20px auto 22px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 8px !important;
    border: 1.5px solid rgba(191, 203, 255, .58) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 12px 32px rgba(99,102,241,.08), inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter: blur(12px) !important;
  }

  .aipe-tab {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 16px !important;
    border: 1.5px solid rgba(180, 196, 255, .70) !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,248,255,.76)) !important;
    color: #081330 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 6px 18px rgba(59,130,246,.06) !important;
  }

  .aipe-tab.is-active {
    border: 1.5px solid transparent !important;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, #a855f7 0%, #22d3ee 52%, #2563eb 100%) border-box !important;
    box-shadow: 0 12px 26px rgba(99,102,241,.16), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .aipe-tab:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(99,102,241,.13), inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .aipe-tabs .aipe-tab img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    flex: 0 0 26px !important;
    filter: none !important;
  }
}

.aipe-panel[data-aipe-panel="catalog"] {
  padding: clamp(20px, 2.2vw, 32px) !important;
  border-radius: clamp(24px, 2.4vw, 34px) !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important;
  max-width: 100% !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head > div:first-child {
  flex: 1 1 420px !important;
  min-width: 0 !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-mini-kicker {
  gap: 8px !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  line-height: 1.1 !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-mini-kicker:before {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
  max-width: 760px !important;
  margin: 10px 0 8px !important;
  font-size: clamp(28px, 2.6vw, 42px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  overflow-wrap: anywhere !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head p {
  max-width: 780px !important;
  margin: 0 !important;
  font-size: clamp(14px, 1vw, 17px) !important;
  line-height: 1.5 !important;
  font-weight: 520 !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill {
  align-self: flex-start !important;
  min-height: 42px !important;
  max-width: 100% !important;
  padding: 0 14px !important;
  white-space: normal !important;
  border-width: 1.5px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  box-shadow: 0 10px 24px rgba(59,130,246,.13), 0 8px 18px rgba(217,70,239,.08), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill:before {
  width: 28px !important;
  height: 28px !important;
  margin-right: 6px !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr) minmax(88px, auto) !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 14px !important;
  border-width: 1.5px !important;
  border-radius: 22px !important;
  overflow: visible !important;
  margin-bottom: 14px !important;
  box-shadow: 0 14px 36px rgba(37,99,235,.09), 0 8px 20px rgba(168,85,247,.05), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field {
  min-width: 0 !important;
  width: 100% !important;
  gap: 7px !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field > span {
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-input-wrap {
  min-width: 0 !important;
  width: 100% !important;
  filter: drop-shadow(0 8px 16px rgba(99,102,241,.06)) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field input,
.aipe-panel[data-aipe-panel="catalog"] .aipe-field select {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  border-width: 1.5px !important;
  border-radius: 16px !important;
  padding-left: 44px !important;
  padding-right: 34px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 6px 16px rgba(15,23,42,.035) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-field-icon {
  left: 14px !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: none !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
  width: 100% !important;
  min-width: 88px !important;
  height: 50px !important;
  padding: 0 12px !important;
  border-width: 1.5px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  gap: 7px !important;
  box-shadow: 0 8px 18px rgba(244,63,94,.08), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: none !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
    grid-column: span 1 !important;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-field-search {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 768px) {
  .aipe-panel[data-aipe-panel="catalog"] {
    padding: 16px 12px !important;
    border-radius: 24px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
    margin-top: 10px !important;
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.08 !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill {
    justify-self: start !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill:before {
    width: 24px !important;
    height: 24px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-field input,
  .aipe-panel[data-aipe-panel="catalog"] .aipe-field select,
  .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
  }

  .aipe-panel[data-aipe-panel="catalog"] .aipe-field-icon,
  .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters img {
    width: 22px !important;
    height: 22px !important;
  }
}

/* AI Prompt Examples: compact tabs/header/filters + premium prompt cards v7 */
html body .aipe-app,
html body .aipe-app * {
  box-sizing: border-box !important;
}

@media (min-width: 769px) {
  html body .aipe-app .aipe-tabs {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin: 16px auto 18px !important;
    gap: 8px !important;
    padding: 7px !important;
    border-width: 1px !important;
    border-radius: 20px !important;
  }

  html body .aipe-app .aipe-tab {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border-width: 1px !important;
    border-radius: 14px !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 5px 14px rgba(59,130,246,.055) !important;
  }

  html body .aipe-app .aipe-tabs .aipe-tab img {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] {
    padding: 24px !important;
    border-radius: 28px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head {
    margin-bottom: 18px !important;
    gap: 14px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
    max-width: 720px !important;
    font-size: clamp(30px, 2.25vw, 38px) !important;
    line-height: 1.04 !important;
    margin: 8px 0 8px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head p {
    font-size: 15px !important;
    line-height: 1.48 !important;
    max-width: 720px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-toolbar {
    grid-template-columns: minmax(220px, 1.45fr) minmax(135px, .95fr) minmax(135px, .95fr) minmax(115px, .8fr) minmax(82px, .45fr) !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-field input,
  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-field select,
  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters {
    height: 46px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-field > span {
    font-size: 12px !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-field-icon,
  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-clear-filters img {
    width: 20px !important;
    height: 20px !important;
  }
}

html body .aipe-app .aipe-catalog-status {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 28px !important;
  margin: 4px 0 14px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html body .aipe-app .aipe-catalog-status:before {
  content: "✦" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #7c3aed !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px rgba(124,58,237,.55) !important;
}

html body .aipe-app .aipe-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.3vw, 20px) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body .aipe-app .aipe-prompt-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 318px !important;
  gap: 0 !important;
  padding: clamp(16px, 1.35vw, 22px) !important;
  border: 1.5px solid rgba(196, 219, 255, .92) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 7% 0%, rgba(34, 211, 238, .10), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(217, 70, 239, .09), transparent 38%),
    rgba(255,255,255,.96) !important;
  box-shadow:
    0 18px 38px rgba(99, 102, 241, .12),
    0 7px 18px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html body .aipe-app .aipe-prompt-card:after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

html body .aipe-app .aipe-prompt-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(125, 211, 252, .95) !important;
  box-shadow:
    0 22px 44px rgba(99, 102, 241, .16),
    0 9px 22px rgba(15, 23, 42, .07),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html body .aipe-app .aipe-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
}

html body .aipe-app .aipe-card-top span,
html body .aipe-app .aipe-card-top em,
html body .aipe-app .aipe-card-meta span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  max-width: 100% !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body .aipe-app .aipe-card-top span {
  gap: 7px !important;
  border: 1px solid rgba(168, 85, 247, .22) !important;
  background: rgba(245, 243, 255, .80) !important;
  color: #6d28d9 !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .07), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html body .aipe-app .aipe-card-top em {
  margin-left: auto !important;
  border: 1px solid rgba(20, 184, 166, .16) !important;
  background: rgba(204, 251, 241, .62) !important;
  color: #0f766e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html body .aipe-app .aipe-type-badge i {
  position: relative !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

html body .aipe-app .aipe-type-badge i:before,
html body .aipe-app .aipe-type-badge i:after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
}

html body .aipe-app .aipe-type-image i:before {
  inset: 2px 1px 2px 1px !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
}

html body .aipe-app .aipe-type-image i:after {
  left: 4px !important;
  bottom: 4px !important;
  width: 10px !important;
  height: 7px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: skew(-25deg) rotate(-6deg) !important;
}

html body .aipe-app .aipe-type-text i:before {
  left: 2px !important;
  right: 2px !important;
  top: 2px !important;
  height: 2px !important;
  background: currentColor !important;
  box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor !important;
}

html body .aipe-app .aipe-type-video i:before {
  inset: 2px 1px !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
}

html body .aipe-app .aipe-type-video i:after {
  left: 7px !important;
  top: 5px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  border-left: 6px solid currentColor !important;
}

html body .aipe-app .aipe-type-audio i:before {
  left: 2px !important;
  top: 7px !important;
  width: 3px !important;
  height: 8px !important;
  background: currentColor !important;
  border-radius: 999px !important;
  box-shadow: 5px -4px 0 currentColor, 10px -1px 0 currentColor, 15px -6px 0 currentColor !important;
}

html body .aipe-app .aipe-prompt-card h4 {
  margin: 0 0 12px !important;
  color: #050b2c !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  font-weight: 950 !important;
}

html body .aipe-app .aipe-prompt-card p {
  margin: 0 0 18px !important;
  color: #596579 !important;
  font-size: 14px !important;
  line-height: 1.52 !important;
  font-weight: 520 !important;
}

html body .aipe-app .aipe-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  margin-bottom: 12px !important;
}

html body .aipe-app .aipe-card-meta span {
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  background: rgba(245, 243, 255, .78) !important;
  color: #4f46e5 !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .aipe-app .aipe-card-meta span:first-child {
  justify-content: flex-start !important;
  max-width: calc(100% - 54px) !important;
  color: #4f46e5 !important;
}

html body .aipe-app .aipe-card-meta span:last-child {
  flex: 0 0 auto !important;
  max-width: 68px !important;
  color: #1f2937 !important;
  background: rgba(248, 250, 252, .95) !important;
}

html body .aipe-app .aipe-prompt-details {
  margin: 0 0 14px !important;
}

html body .aipe-app .aipe-prompt-details summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #4f46e5 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

html body .aipe-app .aipe-prompt-details summary::-webkit-details-marker {
  display: none !important;
}

html body .aipe-app .aipe-prompt-details summary span {
  font-size: 18px !important;
  line-height: 1 !important;
  color: #2563eb !important;
}

html body .aipe-app .aipe-prompt-details pre {
  max-height: 220px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  margin: 12px 0 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #081330 !important;
  color: #e5e7eb !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html body .aipe-app .aipe-copy-card {
  width: 100% !important;
  min-height: 48px !important;
  margin-top: auto !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #071136 0%, #030825 100%) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(7, 17, 54, .24), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html body .aipe-app .aipe-copy-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 13px 25px rgba(7, 17, 54, .30), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

html body .aipe-app .aipe-copy-icon {
  position: relative !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

html body .aipe-app .aipe-copy-icon:before,
html body .aipe-app .aipe-copy-icon:after {
  content: "" !important;
  position: absolute !important;
  border: 2px solid rgba(255,255,255,.86) !important;
  border-radius: 4px !important;
}

html body .aipe-app .aipe-copy-icon:before {
  left: 2px !important;
  top: 4px !important;
  width: 11px !important;
  height: 12px !important;
}

html body .aipe-app .aipe-copy-icon:after {
  left: 6px !important;
  top: 1px !important;
  width: 11px !important;
  height: 12px !important;
  opacity: .7 !important;
}

@media (max-width: 1280px) and (min-width: 981px) {
  html body .aipe-app .aipe-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) and (min-width: 641px) {
  html body .aipe-app .aipe-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html body .aipe-app .aipe-card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body .aipe-app .aipe-prompt-card {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  html body .aipe-app .aipe-prompt-card h4 {
    font-size: 20px !important;
  }

  html body .aipe-app .aipe-copy-card {
    min-height: 50px !important;
  }
}


/* AI Prompt Examples generator + headings + load more fix v8 */
html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3,
html body .aipe-app .aipe-generator-head h3 {
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}
html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 span,
html body .aipe-app .aipe-generator-head h3 span {
  color: #07133c !important;
  font-style: normal !important;
}
html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 em,
html body .aipe-app .aipe-generator-head h3 em {
  font-style: normal !important;
  background: linear-gradient(90deg, #7c3aed 0%, #d61ff0 32%, #2563eb 68%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}
html body .aipe-app .aipe-mini-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(180, 191, 255, .66) !important;
  background: rgba(255,255,255,.82) !important;
  color: #5b3df5 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  box-shadow: 0 14px 28px rgba(145, 94, 255, .08), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body .aipe-app .aipe-mini-kicker img {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}
html body .aipe-app .aipe-total-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(191, 219, 254, .9) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 16px 30px rgba(153, 102, 255, .10), inset 0 1px 0 rgba(255,255,255,.96) !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
html body .aipe-app .aipe-total-pill:before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 999px !important;
  background: rgba(242, 233, 255, .88) url("icons/premium-spark.png") center/18px 18px no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html body .aipe-app .aipe-total-pill strong { color:#6d28d9 !important; }
html body .aipe-app .aipe-type-image i {
  width: 18px !important;
  height: 18px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Crect x='1.5' y='2.5' width='15' height='12' rx='3' stroke='%237c3aed' stroke-width='1.8'/%3E%3Ccircle cx='5.5' cy='6.2' r='1.4' fill='%237c3aed'/%3E%3Cpath d='M4 12l3.2-3.3a1 1 0 0 1 1.45 0l1.65 1.75a1 1 0 0 0 1.48-.04L14 8.1' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat !important;
}
html body .aipe-app .aipe-type-image i:before,
html body .aipe-app .aipe-type-image i:after { display:none !important; }
html body .aipe-app .aipe-more-wrap { padding-top: 20px !important; }
html body .aipe-app .aipe-btn-soft[data-aipe-load-more] {
  min-width: 250px !important;
  min-height: 58px !important;
  padding: 0 26px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(74, 222, 128, .34) !important;
  background: linear-gradient(180deg, #6ef08f 0%, #33d86c 100%) !important;
  color: #053b1c !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 28px rgba(34, 197, 94, .26), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(6, 95, 70, .18) !important;
}
html body .aipe-app .aipe-btn-soft[data-aipe-load-more]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 32px rgba(34, 197, 94, .32), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(6, 95, 70, .20) !important;
}
html body .aipe-app .aipe-panel[data-aipe-panel="generator"] {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(24px, 2vw, 34px) !important;
  border-radius: 32px !important;
  border: 1px solid rgba(223, 230, 255, .96) !important;
  background:
    radial-gradient(circle at 100% 18%, rgba(255,255,255,.65), transparent 18%),
    radial-gradient(circle at 4% 100%, rgba(244, 215, 255, .42), transparent 20%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,248,255,.94) 50%, rgba(250,252,255,.98)) !important;
  box-shadow: 0 24px 56px rgba(84, 115, 173, .10), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html body .aipe-app .aipe-panel[data-aipe-panel="generator"]:before {
  content: "" !important;
  position: absolute !important;
  right: -16px !important;
  top: 18px !important;
  width: 220px !important;
  height: 220px !important;
  opacity: .32 !important;
  background-image: radial-gradient(#d5d9f6 1.1px, transparent 1.1px) !important;
  background-size: 14px 14px !important;
  pointer-events: none !important;
}
html body .aipe-app .aipe-generator-head {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}
html body .aipe-app .aipe-generator-head > div:first-child { max-width: 960px !important; }
html body .aipe-app .aipe-generator-head h3 {
  margin: 14px 0 12px !important;
  font-size: clamp(38px, 4vw, 64px) !important;
  line-height: .98 !important;
  max-width: 950px !important;
}
html body .aipe-app .aipe-generator-head p {
  max-width: 760px !important;
  color: #516079 !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
html body .aipe-app .aipe-play-link {
  min-width: 248px !important;
  min-height: 84px !important;
  padding: 0 28px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(191, 219, 254, .92) !important;
  background: rgba(255,255,255,.94) !important;
  color: #2040dd !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 34px rgba(148, 163, 184, .16), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html body .aipe-app .aipe-play-link img {
  width: 38px !important;
  height: 38px !important;
}
html body .aipe-app .aipe-generator {
  position: relative !important;
  display: grid !important;
  gap: 18px !important;
}
html body .aipe-app .aipe-generator .aipe-wide > span,
html body .aipe-app .aipe-generator .aipe-field > span {
  color: #0a1b5c !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}
html body .aipe-app .aipe-generator .aipe-input-wrap {
  border-radius: 22px !important;
  border: 1.5px solid rgba(203, 213, 225, .9) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 12px 24px rgba(148, 163, 184, .07) !important;
}
html body .aipe-app .aipe-generator .aipe-textarea-wrap {
  padding-left: 140px !important;
  min-height: 168px !important;
  align-items: stretch !important;
}
html body .aipe-app .aipe-generator .aipe-textarea-wrap .aipe-field-icon {
  left: 18px !important;
  top: 18px !important;
  width: 74px !important;
  height: 74px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 16px 26px rgba(167, 139, 250, .16), inset 0 1px 0 rgba(255,255,255,.95) !important;
  object-fit: contain !important;
}
html body .aipe-app .aipe-generator textarea {
  min-height: 168px !important;
  padding: 22px 24px 22px 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
html body .aipe-app .aipe-generator .aipe-field-icon {
  width: 34px !important;
  height: 34px !important;
  left: 18px !important;
  object-fit: contain !important;
}
html body .aipe-app .aipe-generator input,
html body .aipe-app .aipe-generator select {
  height: 82px !important;
  padding-left: 88px !important;
  font-size: 16px !important;
  color: #0f2257 !important;
}
html body .aipe-app .aipe-generator .aipe-input-wrap:focus-within {
  border-color: rgba(167, 139, 250, .95) !important;
  box-shadow: 0 0 0 4px rgba(218, 200, 255, .28), inset 0 1px 0 rgba(255,255,255,.96), 0 16px 28px rgba(148, 163, 184, .09) !important;
}
html body .aipe-app .aipe-generator input::placeholder,
html body .aipe-app .aipe-generator textarea::placeholder {
  color: #7b8bab !important;
}
html body .aipe-app .aipe-actions {
  justify-content: flex-end !important;
  gap: 20px !important;
  margin-top: 4px !important;
}
html body .aipe-app .aipe-btn-ghost {
  min-width: 210px !important;
  min-height: 84px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 1) !important;
  background: rgba(255,255,255,.86) !important;
  color: #17316f !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  box-shadow: 0 14px 28px rgba(148,163,184,.12), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
html body .aipe-app .aipe-btn-ghost img { width: 34px !important; height:34px !important; }
html body .aipe-app .aipe-btn-primary {
  min-width: 392px !important;
  min-height: 84px !important;
  border-radius: 24px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg, #7c3aed 0%, #d946ef 20%, #2563eb 65%, #06b6d4 100%) !important;
  box-shadow: 0 22px 40px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html body .aipe-app .aipe-btn-primary img { width: 36px !important; height:36px !important; }
html body .aipe-app .aipe-loader-card {
  border-radius: 28px !important;
  background: linear-gradient(135deg, #07183f, #0c2666 50%, #042b58) !important;
}
@media (min-width: 769px) {
  html body .aipe-app .aipe-generator .aipe-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  html body .aipe-app .aipe-generator .aipe-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}
@media (max-width: 980px) {
  html body .aipe-app .aipe-generator-head {
    flex-direction: column !important;
  }
  html body .aipe-app .aipe-play-link {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
  }
  html body .aipe-app .aipe-generator-head h3 {
    font-size: clamp(32px, 7vw, 48px) !important;
  }
  html body .aipe-app .aipe-generator input,
  html body .aipe-app .aipe-generator select { height: 68px !important; }
  html body .aipe-app .aipe-btn-ghost,
  html body .aipe-app .aipe-btn-primary {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
    font-size: 17px !important;
  }
}
@media (max-width: 768px) {
  html body .aipe-app .aipe-panel[data-aipe-panel="generator"] { padding: 18px !important; border-radius: 28px !important; }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap { padding-left: 96px !important; min-height: 140px !important; }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap .aipe-field-icon { width: 56px !important; height: 56px !important; top: 14px !important; left: 14px !important; border-radius: 16px !important; }
  html body .aipe-app .aipe-generator textarea { min-height: 140px !important; padding: 18px 18px 18px 0 !important; }
  html body .aipe-app .aipe-actions { gap: 12px !important; }
}

/* AI Prompt Examples: compact generator + forced dropdown down + cleanup v9 */
html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-mini-kicker-db,
html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-total-pill {
  display: none !important;
}

html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head {
  grid-template-columns: 1fr !important;
  padding: clamp(18px, 2vw, 28px) !important;
}

html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
  max-width: 1040px !important;
  font-size: clamp(42px, 4.2vw, 68px) !important;
  line-height: .96 !important;
  margin: 0 0 12px !important;
}

html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head p {
  max-width: 900px !important;
  font-size: clamp(17px, 1.25vw, 21px) !important;
  line-height: 1.45 !important;
}

html body .aipe-app .aipe-input-wrap,
html body .aipe-app .aipe-panel,
html body .aipe-app .aipe-toolbar,
html body .aipe-app .aipe-generator,
html body .aipe-app .aipe-field {
  overflow: visible !important;
}

html body .aipe-app select.aipe-native-select {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .aipe-app .aipe-custom-select {
  position: relative !important;
  z-index: 15 !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .aipe-app .aipe-custom-select-button {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 34px 0 52px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body .aipe-app .aipe-custom-select-button span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .aipe-app .aipe-custom-select-button:after {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 3px solid #0a2a6f !important;
  border-bottom: 3px solid #0a2a6f !important;
  transform: rotate(45deg) translateY(-2px) !important;
  flex: 0 0 auto !important;
}

html body .aipe-app .aipe-custom-select-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  max-height: 280px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(191, 219, 254, .95) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body .aipe-app .aipe-custom-select.is-open {
  z-index: 100000 !important;
}

html body .aipe-app .aipe-custom-select.is-open .aipe-custom-select-menu {
  display: grid !important;
  gap: 4px !important;
}

html body .aipe-app .aipe-custom-select.is-open .aipe-custom-select-button:after {
  transform: rotate(225deg) translate(-2px, -1px) !important;
}

html body .aipe-app .aipe-custom-select-option {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body .aipe-app .aipe-custom-select-option:hover,
html body .aipe-app .aipe-custom-select-option.is-selected {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(6,182,212,.10)) !important;
  color: #4f46e5 !important;
}

@media (min-width: 769px) {
  html body .aipe-app .aipe-panel[data-aipe-panel="generator"] {
    padding: 22px !important;
    border-radius: 28px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body .aipe-app .aipe-panel[data-aipe-panel="generator"]:before {
    width: 160px !important;
    height: 160px !important;
    opacity: .22 !important;
  }

  html body .aipe-app .aipe-generator-head {
    margin-bottom: 14px !important;
    gap: 14px !important;
  }

  html body .aipe-app .aipe-generator-head h3 {
    font-size: clamp(34px, 3vw, 46px) !important;
    line-height: 1.02 !important;
    margin: 10px 0 8px !important;
    max-width: 780px !important;
  }

  html body .aipe-app .aipe-generator-head p {
    max-width: 680px !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  html body .aipe-app .aipe-mini-kicker-premium {
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    letter-spacing: .09em !important;
    gap: 7px !important;
  }

  html body .aipe-app .aipe-mini-kicker-premium img {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }

  html body .aipe-app .aipe-play-link {
    min-width: 170px !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }

  html body .aipe-app .aipe-play-link img {
    width: 28px !important;
    height: 28px !important;
  }

  html body .aipe-app .aipe-generator {
    gap: 12px !important;
  }

  html body .aipe-app .aipe-generator .aipe-field > span,
  html body .aipe-app .aipe-generator .aipe-wide > span {
    margin-bottom: 7px !important;
    font-size: 13px !important;
  }

  html body .aipe-app .aipe-generator .aipe-form-grid.three,
  html body .aipe-app .aipe-generator .aipe-form-grid.two {
    gap: 12px !important;
  }

  html body .aipe-app .aipe-generator .aipe-input-wrap {
    border-radius: 18px !important;
  }

  html body .aipe-app .aipe-generator input,
  html body .aipe-app .aipe-generator select,
  html body .aipe-app .aipe-generator .aipe-custom-select-button {
    height: 58px !important;
    min-height: 58px !important;
    padding-left: 66px !important;
    padding-right: 36px !important;
    font-size: 14px !important;
  }

  html body .aipe-app .aipe-generator .aipe-field-icon {
    width: 30px !important;
    height: 30px !important;
    left: 16px !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap {
    min-height: 118px !important;
    padding-left: 92px !important;
    transition: padding-left .18s ease !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap .aipe-field-icon {
    width: 54px !important;
    height: 54px !important;
    left: 16px !important;
    top: 16px !important;
    padding: 8px !important;
    transition: opacity .16s ease, transform .16s ease !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap:focus-within {
    padding-left: 16px !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap:focus-within .aipe-field-icon {
    opacity: 0 !important;
    transform: scale(.88) translateX(-8px) !important;
    pointer-events: none !important;
  }

  html body .aipe-app .aipe-generator textarea {
    min-height: 118px !important;
    padding: 16px 18px 16px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap:focus-within textarea {
    padding-left: 0 !important;
  }

  html body .aipe-app .aipe-actions {
    gap: 12px !important;
    margin-top: 0 !important;
  }

  html body .aipe-app .aipe-btn-ghost,
  html body .aipe-app .aipe-btn-primary {
    min-height: 58px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }

  html body .aipe-app .aipe-btn-ghost {
    min-width: 150px !important;
  }

  html body .aipe-app .aipe-btn-primary {
    min-width: 260px !important;
  }

  html body .aipe-app .aipe-btn-ghost img,
  html body .aipe-app .aipe-btn-primary img {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 768px) {
  html body .aipe-app .aipe-panel[data-aipe-panel="catalog"] .aipe-panel-head h3 {
    font-size: clamp(32px, 9vw, 46px) !important;
  }

  html body .aipe-app .aipe-custom-select-button {
    height: 58px !important;
    min-height: 58px !important;
    padding-left: 60px !important;
    font-size: 14px !important;
  }

  html body .aipe-app .aipe-custom-select-menu {
    max-height: 260px !important;
  }
}


/* AI Prompt Examples: compact generator + icon + scroll fix v10 */
html body .aipe-app,
html body .aipe-app .aipe-shell {
  overflow-x: clip !important;
}

html body .aipe-app .aipe-card-meta {
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
html body .aipe-app .aipe-card-meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
html body .aipe-app .aipe-card-meta span:first-child {
  flex: 1 1 58% !important;
  max-width: 58% !important;
}
html body .aipe-app .aipe-card-meta span:last-child {
  flex: 1 1 42% !important;
  max-width: 42% !important;
  justify-content: center !important;
}

html body .aipe-app .aipe-generator .aipe-textarea-wrap {
  overflow: hidden !important;
}
html body .aipe-app .aipe-generator .aipe-textarea-wrap textarea {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 100% !important;
}
html body .aipe-app .aipe-generator .aipe-textarea-wrap:focus-within textarea {
  width: 100% !important;
}

html body .aipe-app .aipe-custom-select-menu {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  width: 240px !important;
  max-width: calc(100vw - 16px) !important;
}
html body .aipe-app .aipe-custom-select.is-open {
  z-index: 100000 !important;
}
html body .aipe-app .aipe-custom-select.is-open .aipe-custom-select-button {
  box-shadow: none !important;
}

@media (min-width: 769px) {
  html body .aipe-app .aipe-panel[data-aipe-panel="generator"] {
    padding: 20px !important;
    border-radius: 26px !important;
  }
  html body .aipe-app .aipe-generator-head > div:first-child {
    max-width: 760px !important;
  }
  html body .aipe-app .aipe-generator-head h3 {
    font-size: clamp(32px, 2.6vw, 42px) !important;
    max-width: 700px !important;
  }
  html body .aipe-app .aipe-play-link {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap {
    min-height: 112px !important;
    padding-left: 90px !important;
  }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap:focus-within {
    padding-left: 18px !important;
  }
  html body .aipe-app .aipe-generator textarea {
    min-height: 112px !important;
    padding: 14px 18px 14px 0 !important;
  }
}


/* AI Prompt Examples: dropdown stacking + compact final v11 */
html body .aipe-app,
html body .aipe-app * {
  box-sizing: border-box !important;
}
html body .aipe-app {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
html body .aipe-app .aipe-panel[data-aipe-panel="catalog"],
html body .aipe-app .aipe-panel[data-aipe-panel="generator"],
html body .aipe-app .aipe-toolbar,
html body .aipe-app .aipe-field,
html body .aipe-app .aipe-input-wrap {
  overflow: visible !important;
}
html body .aipe-app .aipe-toolbar {
  position: relative !important;
  z-index: 90000 !important;
  isolation: isolate !important;
}
html body .aipe-app .aipe-toolbar .aipe-field,
html body .aipe-app .aipe-generator .aipe-field {
  position: relative !important;
  z-index: 1 !important;
}
html body .aipe-app .aipe-toolbar .aipe-field:has(.aipe-custom-select.is-open),
html body .aipe-app .aipe-generator .aipe-field:has(.aipe-custom-select.is-open) {
  z-index: 100500 !important;
}
html body .aipe-app .aipe-card-grid,
html body .aipe-app .aipe-prompt-card {
  position: relative !important;
  z-index: 1 !important;
}
html body .aipe-app .aipe-custom-select {
  position: relative !important;
  z-index: 30 !important;
}
html body .aipe-app .aipe-custom-select-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: min(420px, calc(100vw - 28px)) !important;
  max-height: 286px !important;
  z-index: 2147483000 !important;
  transform: none !important;
}
html body .aipe-app .aipe-custom-select.is-open {
  z-index: 2147482999 !important;
}
html body .aipe-app .aipe-custom-select.is-open .aipe-custom-select-menu {
  display: grid !important;
}
html body .aipe-app .aipe-generator .aipe-custom-select-menu {
  max-height: 238px !important;
}
html body .aipe-app .aipe-panel[data-aipe-panel="generator"] {
  z-index: 20 !important;
  overflow: visible !important;
}
@media (min-width: 769px) {
  html body .aipe-app .aipe-panel[data-aipe-panel="generator"] {
    padding: 18px !important;
    border-radius: 24px !important;
  }
  html body .aipe-app .aipe-generator-head h3 {
    font-size: clamp(30px, 2.35vw, 38px) !important;
    line-height: 1.04 !important;
    margin: 8px 0 8px !important;
  }
  html body .aipe-app .aipe-generator-head p {
    font-size: 15px !important;
    line-height: 1.38 !important;
  }
  html body .aipe-app .aipe-generator .aipe-input-wrap {
    border-radius: 16px !important;
  }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap {
    min-height: 104px !important;
    padding-left: 84px !important;
    overflow: hidden !important;
  }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap:focus-within {
    padding-left: 14px !important;
  }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap .aipe-field-icon {
    width: 48px !important;
    height: 48px !important;
    top: 14px !important;
    left: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .aipe-app .aipe-generator .aipe-textarea-wrap textarea {
    min-height: 104px !important;
    width: 100% !important;
    padding: 13px 16px 13px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .aipe-app .aipe-generator input,
  html body .aipe-app .aipe-generator select,
  html body .aipe-app .aipe-generator .aipe-custom-select-button {
    height: 52px !important;
    min-height: 52px !important;
    font-size: 13px !important;
  }
  html body .aipe-app .aipe-btn-ghost,
  html body .aipe-app .aipe-btn-primary {
    min-height: 54px !important;
    border-radius: 16px !important;
  }
  html body .aipe-app .aipe-btn-ghost img,
  html body .aipe-app .aipe-btn-primary img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    background: transparent !important;
  }
}
html body .aipe-app .aipe-card-meta span {
  padding-inline: 9px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body .aipe-app .aipe-card-meta span:first-child {
  flex: 1 1 auto !important;
  max-width: calc(100% - 88px) !important;
}
html body .aipe-app .aipe-card-meta span:last-child {
  flex: 0 0 auto !important;
  max-width: 86px !important;
}
@media (max-width: 768px) {
  html body .aipe-app .aipe-custom-select-menu {
    max-width: calc(100vw - 32px) !important;
    max-height: 260px !important;
  }
}


/* AI Prompt Examples dropdown portal / no body scrollbar fix v11 */
html body .aipe-app,
html body .aipe-app .aipe-shell,
html body .aipe-app .aipe-panel,
html body .aipe-app .aipe-toolbar,
html body .aipe-app .aipe-input-wrap,
html body .aipe-app .aipe-field {
  overflow: visible !important;
}
html body .aipe-app .aipe-toolbar,
html body .aipe-app #aipe-catalog-filters {
  position: relative !important;
  z-index: 20000 !important;
}
html body .aipe-app .aipe-card-grid,
html body .aipe-app .aipe-prompt-card {
  position: relative !important;
  z-index: 1 !important;
}
html body .aipe-app .aipe-generator .aipe-form-grid,
html body .aipe-app .aipe-generator .aipe-field,
html body .aipe-app .aipe-generator .aipe-input-wrap {
  position: relative !important;
  z-index: 20 !important;
}
html body .aipe-app .aipe-generator .aipe-field:has(.aipe-custom-select.is-open),
html body .aipe-app .aipe-generator .aipe-input-wrap:has(.aipe-custom-select.is-open) {
  z-index: 30000 !important;
}
html body .aipe-app .aipe-custom-select-menu,
body .aipe-custom-select-menu-portal {
  position: fixed !important;
  display: none !important;
  z-index: 2147483000 !important;
  max-height: min(320px, calc(100vh - 24px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(191, 219, 254, .95) !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html body .aipe-app .aipe-custom-select-menu.is-open,
body .aipe-custom-select-menu-portal.is-open {
  display: grid !important;
  gap: 4px !important;
}
body .aipe-custom-select-menu-portal .aipe-custom-select-option {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}
body .aipe-custom-select-menu-portal .aipe-custom-select-option:hover,
body .aipe-custom-select-menu-portal .aipe-custom-select-option.is-selected {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(6,182,212,.10)) !important;
  color: #4f46e5 !important;
}
/* dropdown is portaled to body, so it never increases document/page height */
body > .aipe-custom-select-menu-portal {
  contain: layout paint style !important;
}


/* AI Prompt Examples: final dropdown/header/buttons polish v12 */
body .site-header {
  z-index: 10000 !important;
}
html body .aipe-app .aipe-toolbar,
html body .aipe-app #aipe-catalog-filters {
  position: relative !important;
  z-index: 20 !important;
  isolation: auto !important;
}
html body .aipe-app .aipe-toolbar .aipe-field:has(.aipe-custom-select.is-open),
html body .aipe-app .aipe-generator .aipe-field:has(.aipe-custom-select.is-open),
html body .aipe-app .aipe-generator .aipe-input-wrap:has(.aipe-custom-select.is-open) {
  z-index: 50 !important;
}
html body .aipe-app .aipe-card-grid,
html body .aipe-app .aipe-prompt-card {
  z-index: 1 !important;
}
html body .aipe-app .aipe-custom-select-menu,
body .aipe-custom-select-menu-portal {
  z-index: 900 !important;
  max-height: min(280px, calc(100vh - 110px)) !important;
  scrollbar-width: thin !important;
}
body .aipe-custom-select-menu-portal.is-open {
  display: grid !important;
  gap: 4px !important;
}
html body .aipe-app .aipe-play-link {
  position: relative !important;
  overflow: hidden !important;
  min-height: 50px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
  color: #174ee8 !important;
  border: 1px solid rgba(174, 190, 255, .72) !important;
  box-shadow: 0 12px 24px rgba(66, 102, 210, .12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body .aipe-app .aipe-play-link img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .aipe-app .aipe-actions {
  align-items: center !important;
}
html body .aipe-app .aipe-btn-ghost,
html body .aipe-app .aipe-btn-primary {
  overflow: hidden !important;
  gap: 10px !important;
}
html body .aipe-app .aipe-btn-ghost {
  background: linear-gradient(180deg, #ffffff, #fff7fb) !important;
  color: #14204a !important;
  border: 1px solid rgba(255, 166, 190, .58) !important;
  box-shadow: 0 12px 24px rgba(244, 63, 94, .12), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html body .aipe-app .aipe-btn-primary {
  color: #fff !important;
  background: linear-gradient(90deg, #7c3aed 0%, #b833f5 30%, #2563eb 68%, #06b6d4 100%) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 18px 34px rgba(37, 99, 235, .24), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -4px 0 rgba(0,0,0,.10) !important;
}
html body .aipe-app .aipe-btn-ghost img,
html body .aipe-app .aipe-btn-primary img {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (min-width: 769px) {
  html body .aipe-app .aipe-btn-ghost { min-width: 142px !important; }
  html body .aipe-app .aipe-btn-primary { min-width: 242px !important; }
}
@media (max-width: 768px) {
  body .aipe-custom-select-menu-portal {
    z-index: 900 !important;
    max-height: min(250px, calc(100vh - 96px)) !important;
  }
}


/* v13 final loader popup + no tab bar */
html body .aipe-app .aipe-tabs { display:none !important; }
html body .aipe-app .aipe-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(248,249,255,.72) !important;
  backdrop-filter: blur(10px) !important;
}
html body .aipe-app .aipe-loader[hidden] { display:none !important; }
html body .aipe-app .aipe-loader-backdrop { position:absolute; inset:0; }
html body .aipe-app .aipe-loader-modal {
  position: relative !important;
  width: min(1120px, calc(100vw - 36px)) !important;
  min-height: min(720px, calc(100vh - 36px)) !important;
  border-radius: 34px !important;
  padding: 34px !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 42%) minmax(0, 58%) !important;
  gap: 32px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,247,255,.96)) !important;
  border: 1px solid rgba(186,193,255,.6) !important;
  box-shadow: 0 28px 90px rgba(83, 97, 177, .22) !important;
  overflow: hidden !important;
}
html body .aipe-app .aipe-loader-close {
  position:absolute !important; top:18px !important; right:18px !important; width:42px !important; height:42px !important;
  border-radius:50% !important; border:1px solid rgba(201,209,255,.9) !important; background:#fff !important; color:#23315f !important;
  font-size:28px !important; line-height:1 !important; cursor:pointer !important; z-index:2 !important;
  box-shadow:0 8px 20px rgba(120,133,196,.14) !important;
}
html body .aipe-app .aipe-loader-visual {
  position: relative !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  min-height: 100% !important; border-radius:28px !important;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.98) 0%, rgba(246,244,255,.94) 48%, rgba(240,245,255,.88) 100%) !important;
}
html body .aipe-app .aipe-loader-orbit {
  position:absolute !important; inset:7% !important; border-radius:32px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(97,232,255,.26), transparent 24%),
    radial-gradient(circle at 78% 16%, rgba(166,103,255,.22), transparent 18%),
    radial-gradient(circle at 20% 88%, rgba(98,167,255,.22), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}
html body .aipe-app .aipe-loader-ring-wrap { position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:18px !important; }
html body .aipe-app .aipe-loader-generating { text-transform: uppercase !important; letter-spacing: .24em !important; color:#7f88b7 !important; font-size:13px !important; font-weight:800 !important; }
html body .aipe-app .aipe-loader .aipe-progress-ring {
  --size: 308px; width: var(--size) !important; height: var(--size) !important; border-radius: 50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important; position:relative !important;
  background: conic-gradient(from 220deg, #dbaeff 0deg, #8a64ff calc(var(--aipe-progress) * 1.8deg), #3ccaff calc(var(--aipe-progress) * 3.6deg), rgba(220,227,255,.6) 0deg) !important;
  box-shadow: inset 0 0 0 14px rgba(255,255,255,.55), 0 18px 40px rgba(135,140,212,.18) !important;
}
html body .aipe-app .aipe-loader .aipe-progress-ring:before { content:'' !important; position:absolute !important; inset:18px !important; border-radius:50% !important; background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fbfbff 64%, #f2f4ff 100%) !important; box-shadow: inset 0 0 0 1px rgba(221,225,255,.9) !important; }
html body .aipe-app .aipe-loader .aipe-progress-ring span { position:relative !important; z-index:1 !important; font-size:78px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:-.04em !important; background: linear-gradient(135deg,#a83cff 0%,#246dff 78%) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }
html body .aipe-app .aipe-loader-content { display:flex !important; flex-direction:column !important; justify-content:center !important; gap:16px !important; padding: 6px 4px 6px 0 !important; }
html body .aipe-app .aipe-loader-content .aipe-mini-kicker { align-self:flex-start !important; margin-bottom:4px !important; }
html body .aipe-app .aipe-loader-content h3 { margin:0 !important; font-size: clamp(34px, 3vw, 54px) !important; line-height:1.05 !important; letter-spacing:-.03em !important; color:#19224d !important; }
html body .aipe-app .aipe-loader-content p { margin:0 !important; font-size:20px !important; line-height:1.45 !important; color:#64729d !important; max-width: 560px !important; }
html body .aipe-app .aipe-loader-steps { display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:10px !important; }
html body .aipe-app .aipe-loader-step {
  display:grid !important; grid-template-columns: 22px minmax(0,1fr) auto !important; align-items:center !important; gap:14px !important;
  padding: 16px 18px !important; border-radius: 20px !important; background: rgba(255,255,255,.84) !important; border:1px solid rgba(223,227,255,.95) !important; box-shadow: 0 10px 25px rgba(127,141,204,.08) !important;
}
html body .aipe-app .aipe-loader-step-dot { width:12px !important; height:12px !important; border-radius:50% !important; border:2px solid rgba(184,191,236,.95) !important; background:#fff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.8) !important; }
html body .aipe-app .aipe-loader-step strong { display:block !important; margin:0 0 3px !important; color:#263368 !important; font-size:18px !important; }
html body .aipe-app .aipe-loader-step small { display:block !important; color:#7c88b2 !important; font-size:14px !important; line-height:1.45 !important; }
html body .aipe-app .aipe-loader-step em { font-style:normal !important; font-size:13px !important; font-weight:700 !important; color:#8c96b8 !important; background:#eef1fb !important; border-radius:999px !important; padding:8px 12px !important; white-space:nowrap !important; }
html body .aipe-app .aipe-loader-step.is-active { border-color: rgba(154,132,255,.55) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,243,255,.94)) !important; }
html body .aipe-app .aipe-loader-step.is-active .aipe-loader-step-dot { background: linear-gradient(135deg,#8d59ff 0%,#29c7ff 100%) !important; border-color: transparent !important; }
html body .aipe-app .aipe-loader-step.is-active em { background: #e7f3ff !important; color:#3476c4 !important; }
html body .aipe-app .aipe-loader-step.is-done .aipe-loader-step-dot { background:#b69bff !important; border-color:#b69bff !important; }
html body .aipe-app .aipe-loader-step.is-done em { background:#eef6eb !important; color:#4d8f54 !important; }
html body .aipe-app .aipe-loader-tip { padding:16px 18px !important; border-radius:18px !important; background: linear-gradient(135deg, rgba(241,235,255,.92), rgba(234,245,255,.94)) !important; border:1px solid rgba(205,214,255,.7) !important; }
html body .aipe-app .aipe-loader-tip strong { display:block !important; margin-bottom:4px !important; font-size:16px !important; color:#3e4c86 !important; }
html body .aipe-app .aipe-loader-tip span { color:#66729d !important; font-size:14px !important; }
html body .aipe-app .aipe-loader-actions { margin-top:6px !important; display:flex !important; justify-content:flex-start !important; }
html body .aipe-app .aipe-loader-actions .aipe-btn { min-width: 210px !important; justify-content:center !important; }
@media (max-width: 980px) {
  html body .aipe-app .aipe-loader-modal { grid-template-columns: 1fr !important; min-height: auto !important; padding: 24px !important; gap: 18px !important; }
  html body .aipe-app .aipe-loader-visual { min-height: 280px !important; }
  html body .aipe-app .aipe-loader .aipe-progress-ring { --size: 220px; }
  html body .aipe-app .aipe-loader .aipe-progress-ring span { font-size: 58px !important; }
  html body .aipe-app .aipe-loader-content h3 { font-size: 32px !important; }
  html body .aipe-app .aipe-loader-content p { font-size: 17px !important; }
}
@media (max-width: 640px) {
  html body .aipe-app .aipe-loader { padding: 10px !important; }
  html body .aipe-app .aipe-loader-modal { width: calc(100vw - 20px) !important; padding: 18px !important; border-radius: 24px !important; }
  html body .aipe-app .aipe-loader-visual { min-height: 220px !important; }
  html body .aipe-app .aipe-loader .aipe-progress-ring { --size: 180px; }
  html body .aipe-app .aipe-loader .aipe-progress-ring span { font-size: 46px !important; }
  html body .aipe-app .aipe-loader-step { grid-template-columns: 16px minmax(0,1fr) !important; }
  html body .aipe-app .aipe-loader-step em { grid-column: 2 / 3 !important; justify-self: start !important; margin-top: 6px !important; }
  html body .aipe-app .aipe-loader-actions .aipe-btn { width: 100% !important; min-width: 0 !important; }
}


/* v14 mobile full-width hero/panels + WebP background */
@media (max-width: 768px) {
  html body .page-app-ai-prompt-examples .app-stage-section,
  html body .page-app-ai-prompt-examples .app-stage-container:has(.aipe-app),
  html body .page-app-ai-prompt-examples .app-stage-panel:has(.aipe-app),
  html body .page-app-ai-prompt-examples .content-panel:has(.aipe-app),
  html body .page-app-ai-prompt-examples .aipe-stage-container,
  html body .page-app-ai-prompt-examples .aipe-stage-panel,
  html body .page-app-ai-prompt-examples .aipe-content-panel {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .aipe-app,
  html body .aipe-app * {
    box-sizing: border-box !important;
  }

  html body .aipe-app {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: clip !important;
  }

  html body .aipe-shell,
  html body .aipe-banner,
  html body .aipe-panel,
  html body .aipe-result,
  html body .aipe-toolbar,
  html body .aipe-card-grid,
  html body .aipe-generator,
  html body .aipe-form-grid,
  html body .aipe-hero-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .aipe-shell {
    gap: 12px !important;
  }

  html body .aipe-banner {
    margin: 0 !important;
    padding: 18px 12px !important;
    border-radius: 22px !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    background-position: 70% center !important;
  }

  html body .aipe-banner-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .aipe-banner h2 {
    font-size: clamp(40px, 12vw, 56px) !important;
    line-height: .95 !important;
    overflow-wrap: anywhere !important;
  }

  html body .aipe-banner p {
    max-width: 100% !important;
  }

  html body .aipe-hero-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  html body .aipe-hero-card,
  html body .aipe-field,
  html body .aipe-input-wrap,
  html body .aipe-custom-select,
  html body .aipe-custom-select-button,
  html body .aipe-clear-filters,
  html body .aipe-btn,
  html body .aipe-actions,
  html body .aipe-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .aipe-panel {
    padding: 14px 10px !important;
    border-radius: 22px !important;
  }

  html body .aipe-toolbar,
  html body .aipe-form-grid.two,
  html body .aipe-form-grid.three,
  html body .aipe-card-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v15 mobile hero center + remove textarea icon on mobile */
@media (max-width: 768px) {
  html body .aipe-app .aipe-banner-copy,
  html body .aipe-app .aipe-banner h2,
  html body .aipe-app .aipe-banner p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .aipe-app .aipe-banner h2 {
    justify-content: center !important;
  }

  html body .aipe-app .aipe-banner p {
    max-width: 96% !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
    min-height: 132px !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap .aipe-field-icon {
    display: none !important;
  }

  html body .aipe-app .aipe-generator .aipe-textarea-wrap textarea {
    width: 100% !important;
    min-height: 132px !important;
    padding: 14px 0 !important;
  }
}