/* Audience labels and real-output preview presentation. */

#ageFilters [data-age="all"] { display: none !important; }
#ageFilters .chip { white-space: nowrap; }
.prompt-grid { align-items: start; }

/* Card art is actual Gemini Notebook output or nothing. The blanket override
   also neutralizes an older cached style-preview stylesheet during upgrades. */
.prompt-card::before,
.prompt-card::after { display: none !important; content: none !important; }

/* Real examples are rendered as native lazy-loaded images by app.js. This keeps
   the original 1376 × 768 canvas sharp without downloading every PNG up front. */

.card-preview {
  position: relative;
  margin: 0 0 15px;
  aspect-ratio: 1376 / 768;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 14px;
  background: var(--panel-2);
}

.card-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-preview figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .card-preview { border-radius: 12px; margin-bottom: 12px; }
}