:root {
  --green: #1d4f2e;
  --green-dark: #123620;
  --green-mid: #2f6b42;
  --leaf: #5a9a4a;
  --leaf-dark: #3d7a38;
  --bg: #f4f7f1;
  --ink: #17221a;
  --muted: #4a5a4e;
  --line: #b9c4bb;
  --soft: #e5eee3;
  --danger: #8a2d16;
  --warn-bg: #fdf3e6;
  --warn-line: #e9c99a;
  --brown: #7a3b0c;
  --sky: #dceee0;
  --water: #4a9ec8;
  --shirt: #c45c26;
  --shirt-blue: #2a6f9a;
  --hat: #e8c15a;
  --skin: #c48a5a;
  /* CSP blocks remote fonts; stack stays local and distinct from Inter/Roboto. */
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 120% 60% at 100% -10%, #d9ead4 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 0% 100%, #e3efe0 0%, transparent 50%),
    var(--bg);
}
[hidden] { display: none !important; }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; }
.screen {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 20px 28px; min-height: 100vh;
}
.screen--center { justify-content: center; text-align: center; align-items: stretch; }
h1 {
  margin: 0; font-family: Georgia, "Palatino Linotype", Palatino, serif;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--green);
}
h2 { margin: 0; font-size: 22px; font-weight: 700; }
h3 { margin: 8px 0 0; font-size: 17px; }
p { margin: 0; line-height: 1.45; }
.muted { color: var(--muted); font-size: 15px; }
.note { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); font-size: 14px; }

.decor {
  position: absolute; width: 110px; height: 110px; pointer-events: none; opacity: 0.55; z-index: 0;
}
.decor--tr { top: -8px; right: -12px; }
.decor--bl { bottom: 8px; left: -16px; }
.decor__leaf { fill: var(--leaf); animation: leaf-breathe 5s ease-in-out infinite; transform-origin: center; }
.screen > *:not(.decor) { position: relative; z-index: 1; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.brand__mark { border-radius: 20px; box-shadow: 0 8px 24px rgba(29, 79, 46, 0.18); }
.stack { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
input[type="email"], input[type="password"], input[type="number"], textarea {
  min-height: 52px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  font: inherit; font-size: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 1px 0 rgba(23, 34, 26, 0.04);
}
textarea { resize: none; }
.btn {
  min-height: 52px; border-radius: 16px; border: 0; padding: 0 16px;
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(29, 79, 46, 0.22); }
.btn--primary:hover:not(:disabled) { background: var(--green-dark); }
.btn--danger { background: #fff; color: var(--danger); border: 2px solid #9a3a12; }
.btn--ghost { background: rgba(255,255,255,0.7); color: var(--ink); border: 1px solid var(--line); min-height: 44px; font-size: 14px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar__title { font-size: 17px; font-weight: 700; }

.mode-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border: 1px solid #cfe0cb; border-radius: 22px; overflow: hidden;
  background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit;
  box-shadow: 0 10px 28px rgba(29, 79, 46, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mode-card:active { transform: scale(0.985); }
.mode-card:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 2px; }
.mode-card__art {
  display: block; background: linear-gradient(180deg, var(--sky) 0%, #f2f8ef 100%);
  border-bottom: 1px solid #d7e5d3; padding: 8px 8px 0;
}
.mode-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.mode-card__title {
  font-family: Georgia, "Palatino Linotype", Palatino, serif; font-size: 22px; font-weight: 700; color: var(--green);
}
.mode-card__sub { font-size: 14px; color: var(--muted); line-height: 1.35; }
.mode-card--awd .mode-card__title { color: #1a4f6e; }

.scene { width: 100%; height: auto; display: block; }
.scene__ground { fill: #b7d0a8; }
.scene__leaf { fill: var(--leaf); }
.scene__leaf--dark { fill: var(--leaf-dark); }
.scene__vein { fill: none; stroke: #2f5c2a; stroke-width: 1.4; opacity: 0.45; }
.scene__palay { fill: #6aa84f; opacity: 0.9; }
.scene__skin { fill: var(--skin); }
.scene__hat { fill: var(--hat); }
.scene__shirt { fill: var(--shirt); }
.scene__shirt--blue { fill: var(--shirt-blue); }
.tube__body { fill: #eef5f2; stroke: #6a8a7a; stroke-width: 2; }
.tube__water { fill: var(--water); opacity: 0.85; }
.tube__mark { stroke: #4a5a4e; stroke-width: 1.5; }
.tube__label { fill: #4a5a4e; font-size: 8px; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }

.anim-sway { transform-origin: 50% 100%; animation: sway 3.6s ease-in-out infinite; }
.anim-sway--slow { animation-duration: 5.2s; animation-delay: -1.2s; }
.anim-bob { transform-origin: 50% 100%; animation: bob 2.8s ease-in-out infinite; }
.anim-water { transform-origin: center bottom; animation: water 2.4s ease-in-out infinite; }

@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes water {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.92) translateY(2px); }
}
@keyframes leaf-breathe {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.03); }
}

.drop {
  min-height: 280px; border: 2px dashed #8fa596; border-radius: 22px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 16px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
.drop__cam { width: 56px; height: 56px; color: var(--green-mid); margin-bottom: 4px; }
.drop__cta { font-size: 18px; font-weight: 700; color: var(--green); }
.drop__preview, .photo {
  width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; background: #c9d6c3;
}
.drop:has(.drop__preview:not([hidden])) .drop__cam,
.drop:has(.drop__preview:not([hidden])) .drop__cta,
.drop:has(.drop__preview:not([hidden])) #capture-limit { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tips {
  margin: 0; padding: 14px 16px 14px 34px; background: var(--soft);
  border-radius: 16px; font-size: 14px; color: #2f3c33;
}
.tips li + li { margin-top: 8px; }
.card {
  background: #fff; border: 1px solid #dde3dc; border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 14px rgba(23, 34, 26, 0.05);
}
.card--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-direction: row; }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.result-label { font-size: 30px; font-weight: 700; color: var(--brown); font-family: Georgia, "Palatino Linotype", Palatino, serif; }
.badge {
  align-self: flex-start; background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: #6b330b; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600;
}
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choices { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choices legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.choice {
  min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 15px;
}
.choice:has(input:checked) { border: 2px solid var(--green); background: var(--soft); font-weight: 600; }
.spinner {
  width: 48px; height: 48px; margin: 0 auto; border: 4px solid var(--soft);
  border-top-color: var(--green); border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.check {
  width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; background: var(--green);
  color: #fff; font-size: 44px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(29, 79, 46, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .anim-sway, .anim-bob, .anim-water, .decor__leaf { animation: none; }
}