[hidden] { display: none !important; }
#child-form label { display: block; line-height: 1.7; }
#child-form input[type=number], #child-form select, #family-code, #child-text {
  padding: 10px; border: 1px solid #ccd0dc; border-radius: 10px; font: inherit;
  color: var(--ink); background: white; max-width: 100%;
}
#child-form select { display: block; width: 100%; margin-top: 5px; }
#child-form fieldset { border: 1px solid #ccd0dc; border-radius: 12px; }
#family-login input { display: block; width: 100%; margin: 10px 0; }
#family-return { margin-top: 16px; padding: 10px; border-radius: 10px; cursor: pointer; }
#pane section.kid .btn { margin: 5px 8px 5px 0; }
#child-chat-shell { max-width: 780px; margin: 0 auto; }
#child-messages {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 4px 18px;
  max-height: min(58vh, 620px); overflow-y: auto; scroll-behavior: smooth;
}
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.me { justify-content: flex-end; }
.chat-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover;
  background: #fff4b8; border: 1px solid #eadb85;
}
.chat-bubble {
  max-width: min(78%, 610px); padding: 11px 14px; border-radius: 18px 18px 18px 5px;
  background: #fff; border: 1px solid #e1e4ed; box-shadow: 0 2px 8px rgba(20,35,66,.06);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
}
.chat-row.me .chat-bubble {
  color: white; background: #172640; border-color: #172640; border-radius: 18px 18px 5px 18px;
}
.chat-name { display: block; margin-bottom: 3px; font-size: .78rem; font-weight: 700; opacity: .7; }
.chat-time { display: block; margin-top: 4px; font-size: .7rem; opacity: .56; text-align: right; }
.chat-typing .chat-bubble { color: #667085; font-style: italic; }
.chat-empty { color: #667085; text-align: center; padding: 20px; }
#child-chat-form { position: sticky; bottom: 0; padding: 12px; background: rgba(255,255,255,.96); border: 1px solid #e1e4ed; border-radius: 16px; }
#child-chat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.chat-starters button { border: 1px solid #cdd7ea; border-radius: 999px; padding: 8px 12px; background: #f5f8ff; color: #243b67; cursor: pointer; font: inherit; }
#child-feedback { margin-top: 18px; padding: 16px; border: 1px solid #dfe3ec; border-radius: 16px; background: #fffdf5; }
#child-feedback fieldset { display: flex; gap: 14px; flex-wrap: wrap; border: 0; padding: 8px 0; }
#child-feedback label { display: block; margin: 8px 0; }
#child-feedback textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid #ccd0dc; border-radius: 10px; font: inherit; }
.child-review { padding: 10px 12px; border-radius: 12px; background: #fff8dc; }
.upload-box { margin: 14px 0; padding: 14px; border: 1px dashed #9fb2d3; border-radius: 16px; background: #f7faff; }
.upload-box h3 { margin-top: 0; }
.upload-box input[type=file] { display: block; width: 100%; margin: 10px 0; }
.upload-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: white; font-size: .9rem; }
.upload-row span { color: #667085; text-align: right; }
.curriculum-box { margin-top: 12px; padding: 14px; border: 1px solid #dfe3ec; border-radius: 14px; background: #fafbfe; }
.curriculum-box label { display: block; margin: 10px 0 4px; font-weight: 700; }
.curriculum-box textarea { width: 100%; min-height: 72px; padding: 10px; border: 1px solid #ccd0dc; border-radius: 10px; font: inherit; resize: vertical; }
.curriculum-status { min-height: 1.4em; color: #315b35; }
@media (max-width: 600px) {
  #child-form button { white-space: normal; width: 100%; }
  #pane section.kid .btn { width: 100%; }
  #child-messages { max-height: 54vh; padding-inline: 0; }
  .chat-bubble { max-width: 86%; }
  #child-chat-form { position: static; }
  #child-chat-actions .btn { flex: 1 1 auto; }
  #tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  #tabs button { flex: 0 0 auto; scroll-snap-align: start; }
}