:root{
  --ok:#16a34a; --no:#dc2626; --var:#ca8a04; --unk:#6b7280;
  --diag:#e5e7eb; --empty:#ffffff; --grid:#e5e7eb; --sticky:#f8fafc;
  --hit:#fef08a;
}

body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC",Arial,sans-serif;margin:16px;}
h1{margin:0 0 8px;font-size:22px;}
h2{margin:8px 0;font-size:16px;color:#374151;}

.module-tabs{display:flex;gap:8px;margin-bottom:12px;}
.module-tabs .tab-btn{padding:6px 12px;border:1px solid var(--grid);border-radius:6px;background:#f9fafb;cursor:pointer;}
.module-tabs .tab-btn.active{background:#3b82f6;color:#fff;border-color:#2563eb;}
.module.hidden{display:none;}

.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
label{font-size:13px;color:#374151;}
select{padding:8px 10px;font-size:14px;border:1px solid var(--grid);border-radius:8px;min-width:220px;}

.group-buttons{margin-bottom:12px;}
.group-buttons button{margin-right:6px;padding:6px 12px;font-size:13px;border:1px solid var(--grid);border-radius:6px;background:#f9fafb;cursor:pointer;}
.group-buttons button.active{background:#3b82f6;color:#fff;border-color:#2563eb;}

.legend{display:flex;gap:12px;align-items:center;font-size:12px;color:#374151;margin:6px 0;}
.dot{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:4px;border:1px solid #0001;}

.tbl-wrap{border:1px solid var(--grid);border-radius:10px;overflow:auto;max-height:70vh;}
table{border-collapse:separate;border-spacing:0;min-width:100%;}
th,td{border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);padding:8px 10px;font-size:14px;text-align:center;white-space:nowrap;}
th:first-child,td:first-child{border-left:1px solid var(--grid);}
thead th{position:sticky;top:0;background:var(--sticky);z-index:2;}
tbody th{position:sticky;left:0;background:var(--sticky);text-align:left;z-index:3;}

.cell{border-radius:8px;display:inline-block;min-width:28px;padding:4px 10px;}
.v-Y{background:var(--ok);color:#fff;}
.v-N{background:var(--no);color:#fff;}
.v-exclaim{background:var(--var);color:#fff;}
.v-qmark{background:var(--unk);color:#fff;}
.v--{background:var(--diag);color:#111827;}
.v-empty{background:var(--empty);}
.hit-row{background:var(--hit)!important;}
.hit-col{background:var(--hit)!important;}
.hidden{display:none;}
.meta{margin-top:6px;color:#6b7280;font-size:12px;}

/* ---- Module 2 styles ---- */
.drug-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.drug-tabs button{padding:6px 12px;border:1px solid var(--grid);border-radius:6px;background:#f9fafb;cursor:pointer;}
.drug-tabs button.active{background:#3b82f6;color:#fff;border-color:#2563eb;}

.drug-info{
  border:1px solid var(--grid); border-radius:12px; padding:12px; background:#fff;
}
.drug-title{
  font-size:18px; font-weight:700; margin-bottom:8px;
}
.drug-title .brand{color:#475569;}
.kv-list{
  display:grid; grid-template-columns: 160px 1fr; gap:8px 12px;
}
.kv-key{
  color:#374151; font-weight:600; align-self:start; padding-top:2px;
}
.kv-val{
  color:#111827; line-height:1.5;
}
.kv-val ul{margin:4px 0 0 18px;}
.kv-val li{margin:2px 0;}
.kv-muted{color:#6b7280;font-size:12px;margin-top:6px;}
@media (max-width:640px){
  .kv-list{grid-template-columns: 1fr;}
  .kv-key{opacity:.85;}
}