body { font-family: system-ui, sans-serif; margin: 0; background: #f4f1ea; }
.card { max-width: 720px; margin: 2rem auto; padding: 1.5rem; background: #fff;
  border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
h1 { margin-top: 0; }
.titlebar { display: flex; align-items: center; gap: 1rem; }
.logo { width: 100px; height: 100px; object-fit: contain; }
.notice { color: #8a5a00; background: #fff6e0; padding: .5rem .75rem;
  border-radius: 6px; font-size: .9rem; }
textarea { width: 100%; min-height: 180px; box-sizing: border-box; padding: .5rem;
  font: inherit; }
.recipient { margin-top: .5rem; }
.recipient select { font: inherit; padding: .25rem; }
.row { display: flex; justify-content: space-between; align-items: center;
  margin: .5rem 0; }
#counter { color: #555; font-size: .9rem; }
button { padding: .5rem 1rem; font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
pre { white-space: pre-wrap; background: #f7f7f7; padding: .75rem; border-radius: 6px;
  min-height: 3rem; }
.error { color: #b00020; }