:root{
    --brand:#05CAAD; --brand-600:#04b39a; --brand-700:#039b86;
    --ink:#0f172a; --muted:#475569; --bg:#ffffff; --card:#ffffff; --outline:#e5e7eb;
    --pref:#05CAAD; --alt:#f97316; --blue:#0ea5e9; --warn:#b45309;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.5}
  header{gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
  h1{font-size:1.35rem;margin:0}
  .grid{display:grid;gap:14px}
  @media (min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
  .card{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(2,6,23,.04)}
  .card h2{font-size:1.1rem;margin:0 0 10px}
  label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
  input[type="number"],input[type="text"],select{width:100%;border:1px solid var(--outline);border-radius:10px;padding:10px 12px;font-size:1rem;background:#fff}
  input[type="search"]{width:100%;border:1px solid var(--outline);border-radius:999px;padding:10px 14px;font-size:1rem}
  .row{display:grid;gap:10px}
  @media (min-width:600px){.row-3{grid-template-columns:repeat(3,1fr)}}
  .btns{display:flex;gap:10px;flex-wrap:wrap}
  button{appearance:none;border:1px solid var(--brand-600);background:var(--brand);color:#003b33;font-weight:600;padding:10px 14px;border-radius:12px;cursor:pointer}
  button.secondary{background:#fff;color:var(--brand-700);border:1px solid var(--outline)}
  .help{font-size:.85rem;color:var(--muted)}
  .warn{color:var(--warn);font-weight:600}
  .pill{display:inline-block;font-size:.8rem;padding:2px 8px;border-radius:999px;border:1px solid}
  .pill.pref{background:rgba(5,202,173,.12);border-color:rgba(5,202,173,.35);color:var(--brand-700)}
  .pill.alt{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.35);color:#7c2d12}
  .divider{height:4px;background:var(--blue);border-radius:999px;margin:10px 0}

  /* Result entries */
  .result-list{display:grid;gap:12px}
  .entry{border:1px solid var(--outline);border-radius:14px;padding:12px}
  .entry h3{margin:0 0 6px;font-size:1.05rem}
  .kv{display:grid;grid-template-columns:160px 1fr;gap:6px;font-size:.95rem}
  .kv b{color:#0f172a}
  @media (max-width:520px){.kv{grid-template-columns:1fr}.kv b{display:block}}

  /* Drug table */
  .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .drug-table{width:100%;border-collapse:separate;border-spacing:0 6px;min-width:640px}
  .drug-table thead{display:table-header-group}
  .drug-table th{
    text-align:left; padding:8px 10px; color:var(--muted);
    font-weight:600; border-bottom:1px solid var(--outline);
    background:#fff;
  }
  .table-wrap thead th{position:sticky; top:0; z-index:1}

  .drug-row{display:table-row; background:#fff}
  .drug-row td{padding:8px 10px;vertical-align:top;border-bottom:1px dashed var(--outline)}
  .drug-name{font-weight:700}
  .control{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{border:1px solid var(--outline);padding:6px 10px;border-radius:999px;cursor:pointer;font-size:.9rem}
  .chip.active{border-color:var(--brand-600);box-shadow:0 0 0 2px rgba(5,202,173,.15)}
  .footer-note{font-size:.85rem;color:var(--muted);margin-top:8px}
  a.ref{color:#0369a1;text-decoration:underline}

  /* Tiny screens: stacked rows */
  @media (max-width:520px){
    .drug-table{min-width:0;border-spacing:0}
    .drug-table thead{display:none}
    .drug-row{display:block;margin:0;border-radius:0}
    .drug-row td{display:block;padding:10px 12px;border-top:1px dashed var(--outline)}
    .drug-row td:first-child{border-top:none}
    .drug-row td::before{
      content: attr(data-label);
      display:block; font-size:.78rem; color:var(--muted); margin-bottom:4px;
      text-transform:uppercase; letter-spacing:.02em;
    }
    .drug-name{font-size:1rem}
  }

  /* Summary block under each drug card */
  .dose-summary{margin:8px 0 6px;padding:10px;border:1px dashed var(--outline);border-radius:10px;background:#fff}
  .dose-summary ul{margin:0;padding-left:18px}
  .dose-summary li{margin:4px 0}
  .dose-summary .muted{color:var(--muted);font-size:.9rem}

  /* Multiple-drug scenario layout */
  .regimen-card{
    border:1px solid var(--outline);
    border-radius:12px;
    padding:10px;
    background:#fff;
    margin-top:8px;
  }
  .or-sep{
    display:flex; align-items:center; gap:8px; margin:8px 0;
    color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  }
  .or-sep::before,.or-sep::after{
    content:""; flex:1; height:1px; background:var(--outline);
  }

  /* Collapsible Alternative wrappers */
  details.alt-wrap{
    border:1px solid var(--outline);
    border-radius:12px;
    background:#fff;
    padding:0;
    overflow:hidden;
  }
  details.alt-wrap summary{
    cursor:pointer;
    list-style:none;
    padding:10px 12px;
    font-weight:600;
    color:#0f172a;
    background:rgba(249, 115, 22, .12);
    border-bottom:1px solid var(--outline);
  }
  details.alt-wrap .entry{ border:none; border-radius:0; margin:0; }
  /* Smooth open/close for Alternative <details> */
details.alt-wrap .alt-content{
  overflow: hidden;
  max-height: 0;                 /* closed */

}
@media (prefers-reduced-motion: reduce){
  details.alt-wrap .alt-content{ transition: none; }
}