:root { color-scheme: light; --ink: #173d36; --muted: #667f78; --accent: #197963; }
* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif;
  background: radial-gradient(circle at 12% 8%, #dff5eb, transparent 37%),
    radial-gradient(circle at 92% 93%, #e4f0ff, transparent 37%), #f6faf8;
}
.topic-shell { width: min(640px, 100%); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.topic-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topic-header a { text-decoration: none; }
.topic-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 22px; font-weight: 850; }
.topic-brand span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: white; background: var(--accent); font-size: 23px; }
.topic-back { padding: 9px 2px; color: var(--accent); font-size: 14px; font-weight: 700; }
.topic-card { margin-top: clamp(42px, 10vh, 90px); padding: clamp(26px, 6vw, 46px); border: 1px solid rgba(255, 255, 255, .94); border-radius: 28px; background: rgba(255, 255, 255, .9); box-shadow: 0 28px 76px rgba(31, 78, 65, .11); }
.topic-kicker { margin: 0; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .15em; }
h1 { margin: 9px 0 10px; font-size: clamp(27px, 5vw, 38px); line-height: 1.22; letter-spacing: -.03em; }
.topic-intro { margin: 0; color: var(--muted); }
form { display: grid; gap: 10px; margin-top: 30px; }
label { font-size: 13px; font-weight: 750; }
textarea { width: 100%; min-height: 106px; padding: 14px 16px; border: 1px solid #cbded6; border-radius: 15px; outline: none; resize: vertical; color: var(--ink); background: #fbfdfc; font: inherit; }
textarea::placeholder { color: #91a69e; }
textarea:focus { border-color: #5eac91; box-shadow: 0 0 0 4px rgba(47, 157, 136, .13); }
button { min-height: 54px; margin-top: 8px; padding: 12px 18px; border: 0; border-radius: 14px; color: white; background: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #126d59; }
a:focus-visible, button:focus-visible { outline: 3px solid #4f9c84; outline-offset: 3px; }
.topic-error { margin: 0; color: #a94339; font-size: 13px; }
.topic-error[hidden] { display: none; }
.topic-free { display: inline-block; margin-top: 20px; color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.topic-free:hover, .topic-back:hover { text-decoration: underline; }
.topic-note { margin: 20px 12px 0; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 520px) {
  .topic-shell { padding-inline: 16px; }
  .topic-card { margin-top: 34px; padding: 28px 22px; border-radius: 24px; }
}