:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17211a;
  background: #edf1e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(219, 255, 106, .34), transparent 28rem),
    radial-gradient(circle at 86% 82%, rgba(34, 93, 60, .16), transparent 30rem),
    #edf1e9;
}

.shell { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 36px; }
header { max-width: 720px; margin-bottom: 32px; }
.eyebrow { color: #366044; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
h1 { max-width: 680px; margin: 8px 0 16px; font-size: clamp(2.25rem, 7vw, 4.9rem); line-height: .98; letter-spacing: -.055em; }
.lede { max-width: 620px; margin: 0; color: #58625a; font-size: 1.08rem; line-height: 1.7; }

.card {
  margin-top: 18px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(23, 33, 26, .12);
  border-radius: 22px;
  background: rgba(251, 252, 247, .9);
  box-shadow: 0 22px 60px rgba(32, 50, 37, .08);
  backdrop-filter: blur(18px);
}

label { display: block; margin-bottom: 10px; font-weight: 750; }
textarea {
  width: 100%; resize: vertical; min-height: 170px; padding: 16px;
  border: 1px solid #bcc6bc; border-radius: 14px; background: #fff; color: #17211a;
  font: inherit; line-height: 1.55; outline: none;
}
textarea:focus { border-color: #315f40; box-shadow: 0 0 0 4px rgba(49, 95, 64, .12); }
.form-row, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

button, .button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border: 1px solid #183a26; border-radius: 999px;
  background: #183a26; color: #f7ffe9; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(24, 58, 38, .18); }
button:disabled { opacity: .58; cursor: wait; transform: none; }
.secondary { border-color: #bec7be; background: transparent; color: #263329; }
#status { margin-left: auto; color: #546057; font-size: .92rem; }

.result { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 28px; }
.cover-wrap { min-height: 260px; overflow: hidden; border-radius: 16px; background: #dce3da; }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result h2 { margin: 8px 0 12px; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.25; }
.badge { display: inline-block; margin: 0; padding: 5px 10px; border-radius: 999px; background: #dff59d; color: #24412c; font-size: .78rem; font-weight: 800; }
.muted, .hint { color: #657068; }
.hint { margin: 18px 0 0; font-size: .86rem; line-height: 1.55; }
.text-link { padding: 10px; color: #315f40; font-weight: 700; }
.error { border-color: rgba(165, 51, 47, .28); background: rgba(255, 245, 242, .94); color: #7b2826; }
.error p { margin-bottom: 0; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 4px 0; color: #687269; font-size: .78rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (max-width: 680px) {
  .shell { padding-top: 42px; }
  .result { grid-template-columns: 1fr; }
  .cover-wrap { max-height: 420px; }
  #status { width: 100%; margin-left: 0; }
  footer { flex-direction: column; gap: 6px; }
}

@media (prefers-color-scheme: dark) {
  :root { color: #edf6eb; background: #111713; }
  body { background: radial-gradient(circle at 12% 15%, rgba(129, 163, 56, .18), transparent 28rem), #111713; }
  .lede, .muted, .hint, footer, #status { color: #a9b5ab; }
  .card { background: rgba(25, 34, 28, .92); border-color: rgba(230, 245, 232, .13); }
  textarea { background: #121a15; color: #eff7ee; border-color: #45534a; }
  .secondary { color: #eef6ec; border-color: #536158; }
  .error { background: rgba(78, 30, 28, .8); color: #ffd7d2; }
}