:root{
    --ink:#0F172A;
    --slate:#475569;
    --slate-light:#94A3B8;
    --bg:#F8FAFC;
    --panel:#FFFFFF;
    --line:#E2E8F0;
    --teal:#0F766E;
    --teal-light:#CCFBF1;
    --amber:#B45309;
    --amber-bg:#FEF3C7;
    --red:#B91C1C;
    --red-bg:#FEE2E2;
    --green:#166534;
    --green-bg:#DCFCE7;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family: Georgia, 'Times New Roman', serif;
    background:var(--bg);
    color:var(--ink);
  }
  .sans{font-family: -apple-system, Helvetica, Arial, sans-serif;}
  header{
    padding:28px 32px 20px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
  }
  header h1{
    margin:0;
    font-size:26px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  header p{
    margin:6px 0 0;
    font-size:13.5px;
    color:var(--slate);
    font-family: -apple-system, Helvetica, Arial, sans-serif;
  }
  nav{
    display:flex;
    gap:2px;
    padding:0 32px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    overflow-x:auto;
  }
  nav button{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size:14px;
    padding:14px 16px;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    color:var(--slate);
    cursor:pointer;
    white-space:nowrap;
  }
  nav button.active{
    color:var(--teal);
    border-bottom:2px solid var(--teal);
    font-weight:600;
  }
  main{
    max-width:900px;
    margin:0 auto;
    padding:32px;
  }
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    padding:24px;
    margin-bottom:20px;
  }
  .panel h2{
    margin:0 0 4px;
    font-size:19px;
    font-weight:600;
  }
  .panel .sub{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size:13px;
    color:var(--slate);
    margin:0 0 18px;
  }
  .symptom-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-family: -apple-system, Helvetica, Arial, sans-serif;
  }
  .symptom-row:last-child{border-bottom:none;}
  .symptom-row label{font-size:14px; color:var(--ink);}
  .scale{display:flex; gap:4px;}
  .scale button{
    width:30px; height:30px;
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:3px;
    cursor:pointer;
    font-size:12px;
    color:var(--slate);
    font-family: -apple-system, Helvetica, Arial, sans-serif;
  }
  .scale button.sel{
    background:var(--teal);
    color:white;
    border-color:var(--teal);
  }
  .field-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
  }
  .field{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
  }
  .field label{
    display:block;
    font-size:12.5px;
    color:var(--slate);
    margin-bottom:6px;
    font-weight:600;
  }
  .field select, .field input{
    width:100%;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    font-size:14px;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    background:var(--bg);
  }
  .btn{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    background:var(--teal);
    color:white;
    border:none;
    padding:11px 20px;
    border-radius:3px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
  }
  .btn.secondary{
    background:none;
    color:var(--teal);
    border:1px solid var(--teal);
  }
  .btn.ghost{
    background:none;
    color:var(--slate);
    border:1px solid var(--line);
  }
  .row-actions{display:flex; gap:10px; margin-top:6px;}

  .callout{
    border-radius:4px;
    padding:16px 18px;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:1.5;
    margin-bottom:16px;
  }
  .callout.safe{background:var(--green-bg); color:var(--green); border:1px solid #86EFAC;}
  .callout.caution{background:var(--amber-bg); color:var(--amber); border:1px solid #FCD34D;}
  .callout.alert{background:var(--red-bg); color:var(--red); border:1px solid #FCA5A5;}
  .callout.neutral{background:var(--bg); color:var(--slate); border:1px solid var(--line);}

  .stage-track{
    display:flex;
    gap:4px;
    margin:18px 0;
  }
  .stage-step{
    flex:1;
    text-align:center;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
  }
  .stage-step .dot{
    width:100%;
    height:6px;
    border-radius:3px;
    background:var(--line);
    margin-bottom:8px;
  }
  .stage-step.done .dot{background:var(--teal);}
  .stage-step.current .dot{background:var(--amber);}
  .stage-step .label{font-size:11px; color:var(--slate-light);}
  .stage-step.done .label, .stage-step.current .label{color:var(--ink); font-weight:600;}

  table{width:100%; border-collapse:collapse; font-family: -apple-system, Helvetica, Arial, sans-serif; font-size:13.5px;}
  th{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--slate); font-size:12px; text-transform:none;}
  td{padding:9px 10px; border-bottom:1px solid var(--line);}
  .tag{
    display:inline-block;
    padding:2px 9px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
  }
  .tag.stable{background:var(--green-bg); color:var(--green);}
  .tag.watch{background:var(--amber-bg); color:var(--amber);}
  .tag.flag{background:var(--red-bg); color:var(--red);}

  .research-cite{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size:13.5px;
    line-height:1.6;
    color:var(--slate);
  }
  .research-cite strong{color:var(--ink);}

  .empty{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size:14px;
    color:var(--slate-light);
    text-align:center;
    padding:30px 0;
  }

  #reportOutput{
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    white-space:pre-wrap;
    font-size:13.5px;
    line-height:1.7;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:4px;
    padding:20px;
  }

  footer{
    text-align:center;
    padding:30px;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    font-size:12px;
    color:var(--slate-light);
  }

  @media(max-width:600px){
    .field-group{grid-template-columns:1fr;}
    main{padding:18px;}
    header{padding:20px 18px;}
    nav{padding:0 18px;}
  }