body { font-family: system-ui, sans-serif; margin: 0; background:#fefdfb; }
.container { max-width:480px; margin:auto; padding:1rem; }
h1 { text-align:center; }
form { display:flex; flex-direction:column; gap:0.8rem; }
input, select, button { font-size:1rem; padding:0.5rem; }
button { cursor:pointer; background:#4b6bfb; color:white; border:0; border-radius:4px; }
article { white-space:pre-wrap; margin-top:1.5rem; line-height:1.4; }

.input-tip {
  font-size: 0.95em;
  color: #3b3b3b;
  background: #eeeefc;
  border-radius: 3px;
  margin-bottom: 0.7rem;
  padding: 0.3em 0.6em;
}

article img {
  max-width: 100%;
  display: block;
  margin: 0 auto 1.3em auto;
  border-radius: 12px;
  box-shadow: 0 3px 14px #8372;
}

#topicImageSuggestions {
  display: flex;
  gap: 0.5rem;
  margin: 0.4rem 0 0.7rem 0;
  justify-content: flex-start;
}
.topic-img-sugg {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 2px solid #c6d8ff;
  object-fit: cover;
  box-shadow: 0 2px 6px #8892;
  cursor: pointer;
  transition: border 0.15s, transform 0.12s;
}
.topic-img-sugg:hover, .topic-img-sugg.selected {
  border: 2.5px solid #4b6bfb;
  transform: scale(1.06);
}

.pageBtn {
  font-size: 1.02em;
  border-radius: 4px 4px 0 0;
  border: 0;
  padding: 0.6em 1.2em;
  background: #d3deff;
  color: #12327c;
  margin-bottom: -2px;
  border-bottom: 2px solid #d3deff;
  transition: 0.14s;
}
.pageBtn.activeBtn {
  background: #4b6bfb;
  color: #fff;
  border-bottom: 2px solid #4b6bfb;
}