:root { --bg: #0f172a; --card: #111827; --text: #e5e7eb; --muted: #9ca3af; --accent: #8b5cf6; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); }
.container { max-width: 960px; margin: 0 auto; padding: 24px; }
h1 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--card); padding: 16px; border-radius: 12px; border: 1px solid #1f2937; }
label { display: block; font-weight: 600; margin-bottom: 8px; }
.options { margin: 16px 0; }
button { background: var(--accent); color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
button.secondary { background: #374151; }
.option-btn.selected { outline: 2px solid var(--accent); box-shadow: 0 0 0 2px rgba(139,92,246,0.4) inset; }
.hidden { display: none; }
.warning { background: #f59e0b22; color: #fbbf24; padding: 8px 12px; border-radius: 8px; border: 1px solid #f59e0b44; }

/* Utility layout helpers for selection flows */
.choice-group { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; }
.section-actions { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* Cards grid for Gemini selections */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Selection visuals */
.card.selectable { border-color: #374151; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card.selectable:hover { border-color: #4b5563; }
.card.selectable.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5) inset; }

/* Large responsive images for mobile (95% width) */
.choice-img { width: 95%; height: auto; border-radius: 8px; object-fit: cover; }
#summaryImage { width: 95%; height: auto; max-width: 720px; }