:root {
  --ink: #263c4c;
  --muted: #64747d;
  --green: #386c8b;
  --green-dark: #2c5d79;
  --paper: #f4f7f3;
  --line: #dbe5e5;
  --white: #fff;
  --soft: #e7f1f3;
  --pink: #d88b9c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 50% 0%, #e4eff0 0%, transparent 47%),
    var(--paper);
}

button, input, textarea, select {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #9bc0ce;
  outline-offset: 3px;
}

.app-shell {
  width: 100%;
  max-width: 520px;
  min-height: 100dvh;
  padding: max(0px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.app-shell > header {
  height: 76px;
  flex: 0 0 auto;
}

.brand { font-size: 19px; }
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.brand-dot { color: var(--pink); }

.icon-button {
  width: 40px;
  height: 40px;
  border-color: #d8e3e3;
  background: #ffffffa8;
  color: var(--green);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.icon-button:hover {
  transform: translateY(-1px);
  border-color: #bfd4d9;
  background: #fff;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.intro {
  padding-top: clamp(24px, 5vh, 46px);
}
.eyebrow { color: #4b7181; letter-spacing: 1.55px; }
.little-line { background: #86a8aa; }
h1 {
  color: var(--ink);
  font-size: clamp(36px, 9vw, 43px);
  line-height: 1.13;
  letter-spacing: -1.3px;
  margin: 19px 0 13px;
}
.subtitle {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
  letter-spacing: -.1px;
  margin-bottom: 24px;
}

.input-card {
  padding: 17px 17px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 4px 14px #31545d09, inset 0 1px #ffffff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.input-card:focus-within {
  outline: 0;
  border-color: #96b8c1;
  box-shadow: 0 0 0 3px #cfe3e733, 0 5px 16px #31545d0c;
}
.input-card label {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.08px;
}
.input-card textarea {
  display: block;
  min-height: 116px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.58;
  resize: vertical;
}
.input-card textarea::placeholder { color: #87969a; }
.input-footer {
  padding-top: 11px;
  border-top-color: #edf1ef;
  color: #74838a;
}
.input-footer svg { color: #688b99; }

.primary {
  min-height: 52px;
  margin-top: 13px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--green);
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 3px 7px #2b5b771f, inset 0 1px #ffffff21;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, opacity .18s ease;
}
.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--green-dark);
  box-shadow: 0 5px 12px #2b5b7729, inset 0 1px #ffffff21;
}
.primary:active:not(:disabled) { transform: scale(.985); }
.primary:disabled { opacity: .58; box-shadow: none; }

.context-row { margin-top: 14px; }
.context-row select {
  min-height: 48px;
  border-color: var(--line);
  border-radius: 9px;
}

.gentle-note {
  justify-content: center;
  gap: 10px;
  margin: auto 0 15px;
  padding-top: 21px;
  color: #66777d;
}
.gentle-note svg { color: #ce8193; }
.gentle-note p { font-size: 11px; line-height: 1.65; }

footer {
  padding: 14px 0 max(18px, env(safe-area-inset-bottom));
  border-top-color: #e1e8e4;
  color: #78847f;
}
footer p {
  font-family: var(--serif);
  font-size: 13px;
}
footer nav { gap: 4px; }
footer button {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 21px;
  color: #6e7d82;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
footer button:hover {
  border-color: #e1e9e5;
  background: #ffffffa8;
  color: var(--green);
}
footer small { color: var(--muted); }

.result {
  margin-top: 20px;
  padding: 21px;
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 14px #31545d09;
}
.result blockquote {
  color: #30495a;
  font-size: clamp(23px, 6vw, 28px);
}
.why-icon { color: #688b99; }
.feedback-buttons button {
  min-height: 48px;
  border-radius: 9px;
  background: #f7f9f7;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.feedback-buttons button:hover {
  border-color: #bfd4d9;
  background: var(--soft);
}
.feedback-buttons button:active { transform: scale(.985); }
.text-button { color: var(--green); }
#acknowledgement { background: var(--soft); }

.profile-offer {
  border-color: #dce7e4;
  border-radius: 14px;
  background: #edf3ef;
}
.leaf { color: #678b83; }
.notice, .error { border-radius: 9px; }
.notice {
  border-color: #d7e3e2;
  background: #eaf2f2;
}
.error {
  border-color: #efd4da;
  background: #fbf0f2;
  color: #934b5b;
}
.loading { color: var(--muted); }
.loading-dot { background: var(--pink); }
.small-muted { color: var(--muted); }

dialog {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, 520px);
  max-height: min(88dvh, 720px);
  margin: 0 auto;
  padding: 27px 22px max(24px, env(safe-area-inset-bottom));
  border: 1px solid #dce7e4;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: #f9faf6;
  box-shadow: 0 -12px 42px #1e3a3a20;
  animation: native-sheet .28s cubic-bezier(.18,.75,.26,1) both;
}
dialog::backdrop {
  background: #263c4c45;
  backdrop-filter: blur(5px);
}
.dialog-head h2 {
  color: var(--ink);
  font-size: 26px;
}
.dialog-description, dialog > p { color: var(--muted); }
#profile-form > label:not(.consent) { font-weight: 650; }
#profile-form > input:not([type="hidden"]),
#profile-form > textarea {
  border-color: var(--line);
  border-radius: 9px;
}
.consent input { accent-color: var(--green); }
.saved-row { border-bottom-color: var(--line); }
.saved-row button {
  border-radius: 9px;
  color: var(--ink);
}
.privacy-copy h3 { color: var(--ink); }
.privacy-copy p { color: var(--muted); }
.danger-button {
  border-color: #e4c8ce;
  border-radius: 9px;
  background: #fbf0f2;
  color: #934b5b;
}
#delete-status { color: #477c69; }

@keyframes native-sheet {
  from { opacity: .6; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app-shell {
    min-height: calc(100dvh - 48px);
    padding: 0 30px 20px;
    border: 1px solid #e2eae6;
    border-radius: 27px;
    background: linear-gradient(158deg, #f9faf6 0%, #f6f8f4 54%, #f1f5f1 100%);
    box-shadow: 0 18px 60px #2d4c4b12, 0 2px 8px #2d4c4b08;
  }
  .app-shell > header { height: 76px; }
  .intro { padding-top: clamp(24px, 5vh, 46px); }
  .subtitle br { display: initial; }
  .gentle-note { margin-bottom: 15px; }
  dialog {
    inset: 50% auto auto;
    width: min(calc(100% - 40px), 520px);
    margin: 0;
    border-bottom: 1px solid #dce7e4;
    border-radius: 22px;
    transform: translateY(-50%);
    animation: none;
  }
}

@media (max-width: 380px) {
  .app-shell { padding-right: 18px; padding-left: 18px; }
  .intro { padding-top: 23px; }
  h1 { font-size: 36px; }
  .input-card { padding: 15px 14px 12px; }
  .input-footer { font-size: 9px; }
}

@media (max-height: 720px) {
  .intro { padding-top: 18px; }
  h1 { margin-top: 14px; font-size: 36px; }
  .subtitle { margin-bottom: 17px; }
  .input-card textarea { min-height: 88px; }
  .gentle-note { padding-top: 15px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef4f5;
    --muted: #a9b8bc;
    --green: #78b5cc;
    --green-dark: #659eb4;
    --paper: #172126;
    --line: #33444b;
    --white: #202d33;
    --soft: #263a42;
    --pink: #e3a0ad;
    color-scheme: dark;
  }
  body {
    background:
      radial-gradient(ellipse at 50% 0%, #28404a 0%, transparent 48%),
      var(--paper);
  }
  .brand, h1, .dialog-head h2, .privacy-copy h3 { color: var(--ink); }
  .icon-button { border-color: var(--line); background: #202d33; }
  .icon-button:hover, footer button:hover { background: #263a42; }
  .input-card, .result, .saved-row button, #profile-form > input:not([type="hidden"]),
  #profile-form > textarea { background: var(--white); }
  .input-card { box-shadow: 0 4px 14px #0002; }
  .input-card:focus-within { border-color: #6090a2; box-shadow: 0 0 0 3px #5b849433; }
  .input-card textarea, .result blockquote { color: var(--ink); }
  .input-card textarea::placeholder, input::placeholder { color: #8a9a9f; }
  .input-footer { border-top-color: #34434a; color: #a9b8bc; }
  .primary { color: #10222a; box-shadow: 0 3px 7px #0003, inset 0 1px #ffffff40; }
  .primary:hover:not(:disabled) { background: #8bc4d8; }
  .feedback-buttons button, .context-row select {
    color: var(--ink);
    border-color: var(--line);
    background: var(--soft);
  }
  .feedback-buttons button:hover, .context-row select:hover { background: #304852; }
  .saved-row button { color: var(--ink); border-color: var(--line); }
  footer { border-top-color: var(--line); color: var(--muted); }
  footer button { color: var(--muted); }
  footer button:hover { border-color: var(--line); color: #a9d8e8; }
  .gentle-note { color: #a9b8bc; }
  .profile-offer { border-color: var(--line); background: #24353b; }
  .notice { border-color: #40565e; background: #263a42; }
  .error, .danger-button { border-color: #714b55; background: #3a292e; color: #ffc0cb; }
  .loading-dot { background: var(--pink); }
  dialog { border-color: var(--line); background: #202d33; }
  .dialog-description, dialog > p, .privacy-copy p { color: var(--muted); }
  .dismiss { color: var(--muted); }
  #profile-form > input:not([type="hidden"]), #profile-form > textarea { border-color: var(--line); }
  .saved-row { border-bottom-color: var(--line); }
  .saved-row button { border-color: var(--line); }
  .small-muted { color: var(--muted); }
  .result { border-color: var(--line); }
  .why { border-bottom-color: var(--line); }
  #acknowledgement { background: var(--soft); }
  .app-shell { background: #172126; }
  @media (min-width: 700px) {
    .app-shell { border-color: var(--line); background: linear-gradient(158deg, #202d33, #1d292f); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}