:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17352f; background: #f2f0ea; --ink: #17352f; --green: #1d7565;
  --muted: #71817c; --paper: #fffdfa; --line: #dbe3de;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
header {
  width: min(1100px, calc(100% - 40px)); height: 72px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
header a { color: var(--muted); font-size: 11px; font-weight: 700; }
.brand { color: var(--ink); font: 800 17px Georgia, serif; letter-spacing: .09em; text-decoration: none; }
.brand span { color: #51a995; }
main { width: min(820px, calc(100% - 32px)); margin: 25px auto 80px; }
.diagnostic-progress { margin: 0 auto 29px; display: flex; align-items: center; gap: 15px; }
.diagnostic-progress > div { height: 4px; flex: 1; overflow: hidden; border-radius: 10px; background: #dce3de; }
.diagnostic-progress span { width: 12.5%; height: 100%; display: block; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.diagnostic-progress small { min-width: 95px; color: var(--muted); font-size: 9px; font-weight: 800; text-align: right; }
#diagnostic-form {
  min-height: 590px; padding: clamp(28px, 5vw, 55px); border: 1px solid rgba(23,53,47,.08);
  border-radius: 27px; background: var(--paper); box-shadow: 0 20px 60px rgba(23,53,47,.09);
}
.diagnostic-step { border: 0; animation: step-in .24s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(7px); } }
.eyebrow { color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.diagnostic-step h1 { max-width: 680px; margin: 10px 0 10px; font: 500 clamp(32px, 4.2vw, 47px)/1.02 Georgia, serif; letter-spacing: -.035em; }
.diagnostic-step > p { max-width: 620px; margin: 0 0 27px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.choice-grid label, .choice-list label {
  position: relative; border: 2px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.choice-grid label { min-height: 105px; padding: 16px; display: flex; align-items: center; gap: 13px; }
.choice-grid input, .choice-list input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid label:has(input:checked), .choice-list label:has(input:checked) { border-color: var(--green); background: #edf5f1; }
.domain-choices img {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 3px 11px rgba(23,53,47,.16);
}
.choice-grid span, .choice-list span { display: grid; gap: 4px; }
.choice-grid strong, .choice-list strong { font-size: 12px; }
.choice-grid small, .choice-list small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.choice-list { display: grid; gap: 9px; }
.choice-list label { min-height: 60px; padding: 14px 17px; display: flex; align-items: center; }
.choice-list label::after { content: ""; width: 14px; height: 14px; margin-left: auto; border: 1px solid #aab8b2; border-radius: 50%; }
.choice-list label:has(input:checked)::after { border: 4px solid var(--green); }
.diagnostic-step > textarea, .diagnostic-step > input {
  width: 100%; padding: 16px; border: 1px solid #c9d5cf; border-radius: 12px;
  color: var(--ink); background: white; outline: none; resize: vertical;
}
.diagnostic-step > textarea:focus, .diagnostic-step > input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,117,101,.1); }
.field-label { margin: 18px 0 7px; display: block; font-size: 10px; font-weight: 800; }
.diagnostic-actions { margin-top: 30px; display: flex; justify-content: flex-end; gap: 10px; }
.diagnostic-actions button {
  min-height: 45px; padding: 11px 18px; border: 0; border-radius: 10px;
  color: white; background: var(--green); font-weight: 800; cursor: pointer;
}
.secondary-button { border: 1px solid var(--line) !important; color: var(--ink) !important; background: white !important; }
.form-error { padding: 11px 13px; border-radius: 9px; color: #8d2b29; background: #fff0ef; font-size: 11px; }
.recommendation-card {
  margin: 23px 0 15px; padding: 20px; border-radius: 15px;
  display: flex; align-items: center; gap: 18px; color: white; background: var(--ink);
}
.recommendation-card img {
  width: 82px; height: 82px; flex: 0 0 82px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 5px 20px rgba(0,0,0,.22);
}
.recommendation-card span { color: #8ed1c0; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.recommendation-card h2 { margin: 7px 0; font: 500 25px Georgia, serif; }
.recommendation-card p { margin: 0; color: #bacbc6; font-size: 10px; line-height: 1.55; }
.diagnostic-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.summary-item { min-height: 75px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; display: grid; align-content: start; gap: 5px; }
.summary-item span { color: var(--green); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.summary-item p { margin: 0; font-size: 10px; line-height: 1.45; }
.summary-item button { width: max-content; padding: 0; border: 0; color: var(--green); background: transparent; font-size: 8px; font-weight: 800; }
@media (max-width: 620px) {
  header { height: 60px; }
  main { margin-top: 12px; }
  #diagnostic-form { min-height: calc(100vh - 125px); padding: 27px 18px 105px; border-radius: 20px; }
  .diagnostic-step h1 { font-size: 31px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-grid label { min-height: 78px; }
  .diagnostic-summary { grid-template-columns: 1fr; }
  .recommendation-card { align-items: flex-start; }
  .recommendation-card img { width: 64px; height: 64px; flex-basis: 64px; }
  .diagnostic-actions {
    position: fixed; z-index: 5; right: 10px;
    bottom: calc(10px + var(--keyboard-offset, 0px)); left: 10px; margin: 0;
    padding: 10px; border: 1px solid var(--line); border-radius: 13px;
    display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,253,250,.97);
    box-shadow: 0 8px 30px rgba(23,53,47,.15); backdrop-filter: blur(10px);
  }
  .diagnostic-actions button:only-child, #diagnostic-next:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .diagnostic-step { animation: none; } }