* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f2f4f7;
  margin: 0;
  padding: 1rem;
  color: #1a1a1a;
}
.card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.sub { color: #666; margin: 0 0 1.5rem; }
.field { margin-bottom: 1.4rem; }
label { display: block; font-weight: 600; margin-bottom: .4rem; }
.opt { font-weight: 400; color: #999; }
textarea, input[type="text"] {
  width: 100%;
  font-size: 1.1rem;
  padding: .7rem;
  border: 1px solid #ccd2dc;
  border-radius: 10px;
  font-family: inherit;
}
textarea:focus, input:focus { outline: none; border-color: #2563eb; }

.rec-btn {
  margin-top: .5rem;
  font-size: 1rem;
  padding: .55rem 1rem;
  border: 1px solid #2563eb;
  background: #fff;
  color: #2563eb;
  border-radius: 10px;
  cursor: pointer;
}
.rec-btn.recording { background: #dc2626; border-color: #dc2626; color: #fff; }
.rec-status { margin-left: .6rem; color: #666; font-size: .9rem; }

.stars { font-size: 2.4rem; line-height: 1; user-select: none; }
.stars span { color: #d4d8e0; cursor: pointer; transition: color .1s; padding: 0 .1rem; }
.stars span.on { color: #f5b301; }

.consent { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin-top: .7rem; }
.consent input { width: 1.3rem; height: 1.3rem; }

.submit {
  width: 100%;
  font-size: 1.2rem;
  padding: .9rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: .5rem;
}
.submit:disabled { background: #9bb4ef; }
.saved-note { text-align: center; color: #0a7d28; min-height: 1.2rem; margin-top: .8rem; }