:root {
  color-scheme: light;
  --ink: #18302d;
  --muted: #61726f;
  --brand: #087f6a;
  --brand-dark: #056151;
  --paper: #ffffff;
  --wash: #f1f7f5;
  --line: #d9e6e2;
  --red: #b42318;
  --yellow: #a15c00;
  --green: #067647;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wash); color: var(--ink); }
header { background: linear-gradient(135deg, #075f53, #0e9179); color: white; padding: 28px 20px; }
header h1 { margin: 0 0 8px; font-size: 24px; }
header p { margin: 0; opacity: .9; }
main { width: min(920px, 100%); margin: 0 auto; padding: 18px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(20, 59, 52, .06); }
.card h2 { margin: 0 0 14px; font-size: 20px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
label { display: grid; gap: 7px; font-weight: 650; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid #b9cbc6; border-radius: 10px; background: white; }
textarea { min-height: 90px; resize: vertical; }
button, .button-link { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 46px; border: 0; border-radius: 11px; padding: 11px 18px; background: var(--brand); color: white; font-weight: 750; cursor: pointer; text-decoration: none; }
button:hover, .button-link:hover { background: var(--brand-dark); }
button.compact { width: auto; min-height: 34px; margin: 2px; padding: 6px 9px; font-size: 12px; }
button.secondary { color: var(--brand); background: #e6f3f0; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; }
.notice { border-left: 5px solid var(--yellow); background: #fff8e8; padding: 12px 14px; border-radius: 9px; line-height: 1.6; }
.notice.danger { border-color: var(--red); background: #fff1f0; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.55; }
.hidden { display: none !important; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 800; }
.pill.red { color: var(--red); background: #fee4e2; }
.pill.yellow { color: var(--yellow); background: #ffefc6; }
.pill.green { color: var(--green); background: #d9f3e6; }
.pill.gray { color: #475467; background: #eaecf0; }
.result { padding: 14px; border: 1px solid var(--line); border-radius: 12px; line-height: 1.65; }
.result.red { border-color: #f5aaa4; background: #fff4f3; }
.result.yellow { border-color: #f4d88d; background: #fffaf0; }
.result.green { border-color: #9bd6bb; background: #f1fbf6; }
.metric { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.metric strong { display: block; font-size: 26px; margin-top: 4px; }
.metric small { display: block; color: var(--muted); margin-top: 4px; }
.eyebrow { display: inline-block; color: var(--brand); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.hero-card { display: flex; justify-content: space-between; gap: 20px; align-items: center; background: linear-gradient(135deg, #fff, #edf8f5); }
.outcome-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.outcome { position: relative; min-height: 190px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fbfefd; }
.outcome h3 { margin: 32px 0 8px; font-size: 22px; }
.outcome p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.outcome-number { position: absolute; top: 14px; right: 14px; color: #91b7af; font-weight: 900; }
.tag { display: inline-block; padding: 4px 8px; color: var(--brand-dark); background: #ddf2ed; border-radius: 999px; font-size: 12px; font-weight: 800; }
.timeline { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 5px; }
.timeline span { flex: 0 0 auto; padding: 8px 11px; color: var(--brand-dark); background: #e5f4f0; border-radius: 999px; font-size: 13px; font-weight: 750; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.section-heading h2 { margin-top: 4px; }
.step-chip { padding: 7px 10px; color: var(--brand-dark); background: #e5f4f0; border-radius: 9px; font-size: 13px; font-weight: 750; }
.form-section { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; }
.form-section h3 { margin-top: 0; }
details.form-section summary { cursor: pointer; }
.license-note { padding: 10px 12px; color: #724b00; background: #fff7df; border-radius: 9px; font-size: 13px; line-height: 1.55; }
.question-list { display: grid; gap: 8px; }
.question-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 330px); align-items: center; gap: 12px; padding: 10px; border-bottom: 1px dashed var(--line); font-weight: 600; }
.question-row b { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 7px; color: white; background: var(--brand); border-radius: 50%; font-size: 12px; }
.question-row small { display: block; margin: 4px 0 0 34px; color: var(--muted); font-weight: 400; }
.question-row select { min-width: 110px; }
.official-question { display: block; margin: 3px 0 0 34px; color: #253275; line-height: 1.45; }
.official-question em { display: block; color: #645aa0; font-size: 12px; font-style: normal; text-transform: uppercase; }
.official-item select { font-size: 13px; }
.live-score { margin-top: 12px; padding: 12px; text-align: right; color: var(--brand-dark); background: #eaf7f4; border-radius: 10px; }
.live-score strong { font-size: 24px; }
.upload-status { min-height: 22px; color: var(--brand-dark); font-weight: 750; }
.team-banner { display: grid; gap: 5px; margin-bottom: 14px; padding: 14px; border: 1px solid #9bd6bb; border-radius: 12px; background: #f1fbf6; }
.team-banner .pill { width: max-content; }
.team-line { width: max-content; max-width: 100%; margin: 4px 0 8px; padding: 5px 9px; color: var(--brand-dark); background: #ddf2ed; border-radius: 8px; font-size: 13px; font-weight: 750; }
.demo-fill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; padding: 12px; border: 1px dashed #76b8aa; border-radius: 12px; background: #eef9f6; }
.demo-fill span { flex: 1 1 260px; color: var(--muted); font-size: 13px; }
.ai-panel { border-color: #b7a6e8; background: #f8f6ff; }
.ai-flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.ai-flow span { padding: 7px 10px; color: #4b3489; background: #ece7fb; border-radius: 8px; font-size: 13px; font-weight: 750; }
.ai-result { margin-top: 16px; padding: 15px; border: 1px solid #b7a6e8; border-radius: 13px; background: #f8f6ff; }
.ai-result.simulated { border-style: dashed; }
.ai-result h3 { margin: 0; }
.vas-label { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fbfefd; }
.vas-label > small { color: var(--muted); font-weight: 500; }
.vas-control { display: grid; grid-template-columns: 34px minmax(120px, 1fr) 34px 42px; align-items: center; gap: 8px; }
.vas-control .face { font-size: 28px; line-height: 1; }
.vas-control output { display: grid; place-items: center; min-height: 38px; color: white; background: var(--brand); border-radius: 10px; font-size: 20px; font-weight: 900; }
.vas-control input[type="range"] { appearance: none; height: 12px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, #4bbd8a 0%, #f1c75b 50%, #dc6259 100%); cursor: pointer; }
.vas-control input[type="range"]::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; border: 4px solid white; border-radius: 50%; background: var(--brand-dark); box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.vas-control input[type="range"]::-moz-range-thumb { width: 23px; height: 23px; border: 4px solid white; border-radius: 50%; background: var(--brand-dark); box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.score-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.report-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.team-card { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfefd; }
.team-card img { width: 130px; height: 130px; border: 1px solid var(--line); border-radius: 8px; }
.team-card h3 { margin: 8px 0 4px; }
.team-card p { margin: 5px 0; }
.team-url { max-width: 300px; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.button-link.compact { width: auto; min-height: 34px; padding: 6px 9px; font-size: 12px; }
.inline-filter { display: flex; align-items: center; gap: 8px; min-width: 250px; }
.inline-filter select { width: auto; }
@media (max-width: 560px) {
  header { padding: 22px 18px; }
  main { padding: 12px; }
  .card { border-radius: 13px; padding: 15px; }
  button, .button-link { width: 100%; }
  .hero-card { display: block; }
  .outcome-grid, .report-grid { grid-template-columns: 1fr 1fr; }
  .question-row { grid-template-columns: 1fr 138px; }
  .question-row small { margin-left: 0; }
  .official-question { margin-left: 0; }
  .vas-control { grid-template-columns: 30px minmax(100px, 1fr) 30px 38px; }
  .score-pair { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 96px 1fr; }
  .team-card img { width: 96px; height: 96px; }
  .inline-filter { display: grid; width: 100%; }
}

@media (min-width: 561px) and (max-width: 850px) {
  .outcome-grid { grid-template-columns: 1fr 1fr; }
}

/* 患者端：手机 App 式单列界面 */
.patient-app { min-width: 320px; background: #eef4f2; }
.patient-app .app-header { position: sticky; top: 0; z-index: 20; padding: 12px 16px; background: rgba(6, 97, 81, .97); box-shadow: 0 3px 16px rgba(16, 60, 52, .18); backdrop-filter: blur(12px); }
.patient-app .app-header-inner { display: flex; align-items: center; gap: 12px; width: min(620px, 100%); margin: 0 auto; }
.patient-app .app-logo { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; color: var(--brand-dark); background: white; border-radius: 14px; font-size: 21px; font-weight: 900; box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.patient-app .app-header h1 { margin: 0 0 3px; font-size: 19px; line-height: 1.25; }
.patient-app .app-header p { font-size: 12px; letter-spacing: .02em; }
.patient-app main { width: min(620px, 100%); padding: 14px 12px 54px; }
.patient-app .card { padding: 18px; border-radius: 20px; box-shadow: 0 8px 28px rgba(20, 59, 52, .08); }
.patient-app .hero-card { display: block; }
.patient-app .hero-card .actions { display: grid; grid-template-columns: 1fr 1fr; }
.patient-app .form-section { margin: 16px 0; padding: 16px; border-radius: 17px; }
.patient-app details.form-section > summary { min-height: 46px; padding: 8px 2px; line-height: 1.55; }
.patient-app input:not([type="checkbox"]):not([type="range"]),
.patient-app select,
.patient-app textarea { min-height: 50px; padding: 13px 14px; border-radius: 12px; font-size: 16px; }
.patient-app .question-list { gap: 0; }
.patient-app .question-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 11px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.patient-app .question-row:last-child { border-bottom: 0; }
.patient-app .question-copy { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 16px; font-weight: 650; line-height: 1.6; }
.patient-app .question-row b { width: 30px; height: 30px; margin: 0; font-size: 13px; }
.patient-app .official-question { margin: 0; color: var(--ink); line-height: 1.6; }
.patient-app .question-context,
.patient-app .question-row small.question-context { display: block; margin: 1px 0 3px; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.45; }
.patient-app .question-row select { width: 100%; min-width: 0; background: #fff; font-size: 16px; }
.patient-app .live-score { padding: 10px 13px; border: 1px solid #b8ddd5; box-shadow: 0 5px 16px rgba(20, 59, 52, .08); }
.patient-app .outcome-grid { grid-template-columns: 1fr 1fr; }
.patient-app .outcome { min-height: 156px; padding: 14px; }
.patient-app .outcome h3 { margin-top: 27px; font-size: 18px; }
.patient-app .outcome p { margin-bottom: 8px; font-size: 13px; }
.patient-app .ai-request-card { overflow: hidden; border: 1px solid #9e8cdf; background: linear-gradient(145deg, #fbfaff, #f2efff); }
.patient-app .ai-request-card.is-disabled { border-color: var(--line); background: #f7f9f8; }
.patient-app .ai-request-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.patient-app .ai-request-heading h3 { margin: 0 0 5px; }
.patient-app .ai-request-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.patient-app .ai-mark { display: grid; width: 44px; height: 44px; place-items: center; color: white; background: #6651b8; border-radius: 14px; font-weight: 900; letter-spacing: -.03em; }
.patient-app .ai-request-option { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 16px; padding: 15px; border: 1px solid #c4b8ec; border-radius: 14px; background: white; cursor: pointer; }
.patient-app .ai-request-option input { width: 26px; height: 26px; margin: 0; accent-color: #6651b8; }
.patient-app .ai-request-option strong { display: block; color: #3e2b83; font-size: 16px; line-height: 1.45; }
.patient-app .ai-request-option small { display: block; margin-top: 5px; color: var(--muted); font-weight: 500; line-height: 1.5; }
.patient-app .ai-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.patient-app .ai-input-grid span { padding: 9px 10px; color: #4b3489; background: #ebe7fb; border-radius: 9px; text-align: center; font-size: 12px; font-weight: 750; }
.patient-app .ai-choice-hint { margin: 12px 2px 0; color: #4b3489; font-size: 13px; font-weight: 750; }
.patient-app .is-disabled .ai-mark { background: #7a8986; }
.patient-app .is-disabled .ai-request-option { border-color: var(--line); }
.patient-app .is-disabled .ai-request-option strong,
.patient-app .is-disabled .ai-choice-hint { color: var(--muted); }
.patient-app .form-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.patient-app .form-actions button { min-height: 52px; }
.patient-app .ai-result { padding: 16px; border-style: solid; background: #f8f6ff; }
.patient-app .ai-summary { margin: 10px 0 14px; font-size: 16px; line-height: 1.65; }
.patient-app .ai-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.patient-app .ai-metric-grid .metric { min-width: 0; padding: 12px; }
.patient-app .ai-metric-grid .metric strong { font-size: 23px; }
.patient-app .ai-attention { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--yellow); border-radius: 10px; background: #fff8e8; }
.patient-app .ai-attention.calm { border-color: var(--green); background: #edf9f3; }
.patient-app .ai-attention p,
.patient-app .ai-attention ul { margin: 7px 0 0; padding-left: 20px; }
.patient-app .ai-attention p { padding-left: 0; }
.patient-app .ai-review-row { display: grid; gap: 7px; margin-top: 12px; padding: 12px; color: var(--muted); background: rgba(255, 255, 255, .72); border-radius: 10px; font-size: 13px; line-height: 1.5; }

@media (max-width: 560px) {
  .patient-app .app-header { padding: 10px 12px; }
  .patient-app main { padding: 10px 10px 46px; }
  .patient-app .card { padding: 14px; margin-bottom: 12px; border-radius: 18px; }
  .patient-app .form-section { padding: 14px; }
  .patient-app .grid { grid-template-columns: minmax(0, 1fr); }
  .patient-app .question-row { grid-template-columns: minmax(0, 1fr); padding: 15px 0; }
  .patient-app .question-row small { margin-left: 0; }
  .patient-app .hero-card .actions,
  .patient-app .form-actions { grid-template-columns: minmax(0, 1fr); }
  .patient-app .actions button,
  .patient-app .actions .button-link { width: 100%; }
  .patient-app .form-actions .secondary { min-height: 46px; }
}

@media (max-width: 370px) {
  .patient-app .outcome-grid,
  .patient-app .ai-metric-grid { grid-template-columns: minmax(0, 1fr); }
  .patient-app .outcome { min-height: 0; }
  .patient-app .ai-input-grid { grid-template-columns: minmax(0, 1fr); }
}