/* Selection grid and general layout */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-bottom: 24px;
}

/* comic-style panel look for each selection box */
.selection-box {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,250,240,0.95) 100%);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 10px 16px 0 rgba(0,0,0,0.08);
  border: 4px solid var(--comic-outline);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* bold colored headers */
.selection-box h3 { 
  margin: 0 0 12px 0; 
  font-size: 22px; 
  color: var(--comic-blue); 
  text-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}

/* make item buttons chunky and comic */
.item-btn {
  padding: 10px 16px;
  border: 4px solid var(--comic-outline);
  background: linear-gradient(180deg, var(--comic-yellow), #ffd48a);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease;
  color: var(--comic-outline);
  box-shadow: 6px 8px 0 rgba(0,0,0,0.06);
}

.item-btn:hover { transform: translateY(-6px) rotate(-1deg); }

/* selected state: strong comic accent */
.item-btn.selected {
  background: linear-gradient(90deg, var(--comic-accent), #ff7b9c);
  color: white;
  border-color: #000;
  box-shadow: 12px 14px 0 rgba(0,0,0,0.12);
}

/* generate button bigger, like a popping comic CTA */
.generate-btn {
  padding: 18px 48px;
  background: linear-gradient(90deg, var(--comic-blue), #2ea3ff);
  color: white;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 800;
  border: 4px solid var(--comic-outline);
  box-shadow: 12px 14px 0 rgba(0,0,0,0.12);
}

.job-select {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 10px;
  font-size: 16px;
  background: linear-gradient(180deg,#fff,#fbfdff);
  cursor: pointer;
}

.job-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(79,70,229,0.06);
}

/* Gallery & results container spacing */
.gallery-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,23,42,0.04);
}

.results-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(15,23,42,0.04);
}

/* Index / table of contents at top of page */
.page-index {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 0 24px 0;
}

.page-index .index-link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(79,70,229,0.08), rgba(79,70,229,0.03));
  color: #07103a;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(79,70,229,0.08);
  transition: transform .12s ease, box-shadow .12s ease;
}

.page-index .index-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(79,70,229,0.06);
}