/* Soft pastels, spacious and quiet. Agnes-inspired: cream, soft pink, warm brown, burgundy accent. */
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; background: #f6f1e7; color: #191714; line-height: 1.55; }
main { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 30px; margin: 0 0 6px; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.site-header .avatar { width: 84px; height: auto; background: transparent; flex-shrink: 0; }
.site-header h1 { flex: 1 1 auto; }
.site-header .intro, .site-header .banner { flex-basis: 100%; margin: 0; }
.card a { overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
h2 { font-size: 22px; margin: 0 0 6px; }
.intro { color: #555; font-size: 17px; max-width: 640px; }
.banner { padding: 12px 16px; border-radius: 12px; font-size: 16px; }
.banner.demo { background: #fdf6d8; border: 1px solid #e4d9c3; }
.banner.live { background: #fdf6f8; border: 1px solid #c98aa6; }
.tabs { display: flex; gap: 8px; margin: 24px 0 16px; flex-wrap: wrap; }
.tab { padding: 12px 20px; font-size: 17px; border-radius: 12px 12px 0 0; border: 1px solid #c9bfa8; border-bottom: none; background: #efe7d6; color: #191714; cursor: pointer; }
.tab.active { background: #fffdf8; font-weight: bold; }
.filters { margin: 0 0 20px; }
.filters label { font-size: 16px; }
.filters input { width: 100%; max-width: 420px; padding: 11px 12px; font-size: 16px; border: 1px solid #c9bfa8; border-radius: 10px; background: #fff; margin-top: 6px; }
.section-note { color: #555; font-size: 16px; }
.card { background: #fffdf8; border: 1px solid #e4d9c3; border-radius: 14px; padding: 20px 22px; margin: 16px 0; }
.card p { margin: 6px 0; font-size: 17px; }
.meta { color: #555; }
.why { background: #fdf6f8; border-left: 4px solid #c98aa6; padding: 10px 14px; border-radius: 0 10px 10px 0; }
.status { display: inline-block; background: #efe7d6; border: 1px solid #c9bfa8; padding: 4px 12px; border-radius: 20px; font-size: 15px; }
.status.ready { background: #fdf6f8; border-color: #c98aa6; }
.status.submitted { background: #eaf3e6; border-color: #8aae7f; }
.status.attention { background: #fdf6d8; border-color: #d8b84a; }
button { font-size: 17px; padding: 12px 20px; border-radius: 10px; cursor: pointer; border: 1px solid #7a1f1f; background: #7a1f1f; color: #fff; margin: 8px 8px 0 0; }
button.secondary { background: #fff; color: #191714; border-color: #c9bfa8; }
button.small { font-size: 15px; padding: 8px 14px; }
button:disabled { opacity: 0.55; cursor: default; }
.details { display: none; margin-top: 14px; border-top: 1px solid #e4d9c3; padding-top: 12px; }
.details.open { display: block; }
.askbox { display: none; margin-top: 14px; background: #faf5ef; border: 1px solid #e4d9c3; border-radius: 12px; padding: 14px; }
.askbox.open { display: block; }
.askbox textarea { width: 100%; min-height: 70px; font-size: 16px; padding: 10px; border: 1px solid #c9bfa8; border-radius: 10px; }
.thread { margin-top: 12px; }
.msg { padding: 10px 14px; border-radius: 12px; margin: 8px 0; max-width: 92%; }
.msg.you { background: #efe7d6; }
.msg.muse { background: #fdf6f8; border: 1px solid #e4d9c3; }
.draft { background: #fff; border: 1px solid #c9bfa8; border-radius: 12px; padding: 14px; white-space: pre-wrap; }
.undo { background: #fdf6d8; border: 1px solid #d8b84a; border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.empty { color: #555; font-size: 17px; }
.footer-note { color: #777; font-size: 15px; }
@media (max-width: 600px) {
  main { padding: 18px 14px 50px; }
  h1 { font-size: 26px; }
  .site-header .avatar { width: 64px; }
  .site-header { gap: 12px; }
  .tab { flex: 1; padding: 11px 8px; font-size: 15px; text-align: center; }
  button { width: 100%; margin-right: 0; }
  button.small { width: auto; }
}