body { font-family: Arial; background:#eef5ff; margin:0; }
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;}
.container{max-width:900px;margin:22px auto;padding:0 14px;}
.btn{padding:10px 14px;border:0;border-radius:10px;background:#3b82f6;color:#fff;cursor:pointer;text-decoration:none}
.btn.danger{background:#ef4444}
.btn.primary{background:#1d76d2;width:100%;margin-top:14px}
.panel{background:#fff;border-radius:14px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.filters{display:flex;gap:10px;margin-bottom:14px}
.filters input,.filters select{flex:1;padding:10px;border-radius:10px;border:1px solid #cfe2ff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{border:0;border-radius:14px;padding:14px;text-align:left;background:#fff;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.card-title{font-weight:700}
.card-sub{font-size:12px;opacity:.7;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chip{padding:10px 14px;border-radius:999px;border:1px solid #93c5fd;background:#eaf3ff;cursor:pointer}
.chip.active{background:#1d76d2;color:#fff;border-color:#1d76d2}
.badge{padding:6px 10px;border-radius:999px;color:#fff;font-weight:700;font-size:12px}
.badge.high{background:#dc2626}
.badge.medium{background:#f59e0b}
.badge.low{background:#16a34a}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #cfe2ff;padding:10px;text-align:left}
.group-title{
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.disease-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.disease-card{
  border: none;
  cursor: pointer;
  background: white;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  text-align: left;
}

.disease-img img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.disease-meta{
  padding: 14px;
}

.disease-name{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.disease-cat{
  font-size: 13px;
  color: #666;
}

.detail-card{
  background: white;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.detail-hero{
  display:flex;
  gap: 14px;
  align-items:center;
  margin-bottom: 14px;
}

.detail-hero img{
  width: 130px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
}
/* Risk colored bar like friend UI */

.risk-bar {
  height: 12px;
  border-radius: 10px;
  position: relative;
  margin-top: 6px;
  margin-bottom: 10px;
}

.risk-bar span {
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 12px;
  font-weight: 700;
}

/* colors */

.risk-bar.high {
  background: #e53935;
}

.risk-bar.medium {
  background: #f39c12;
}

.risk-bar.low {
  background: #43a047;
}.analysis-card{
  background:#fff;
  border-radius:16px;
  padding:18px 20px;
  margin:16px 0;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  max-width:820px;
  width:100%;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.dname{
  margin:0;
  font-size:20px;
  font-weight:700;
}

.risk-pill{
  color:#fff;             /* ✅ white text */
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  font-size:14px;
}

.risk-pill.high{ background:#d93025; }
.risk-pill.medium{ background:#f29900; }
.risk-pill.low{ background:#188038; }

.risk-bar{
  height:14px;            /* ✅ thicker bar */
  border-radius:10px;
  margin:12px 0 14px;
}

.risk-bar.high{ background:#d93025; }
.risk-bar.medium{ background:#f29900; }
.risk-bar.low{ background:#188038; }

.reason-title{
  font-weight:800;
  color:#1a73e8;
  margin-bottom:6px;
  font-size:15px;
}

.reason-text{
  font-size:14px;
  line-height:1.6;
  color:#333;
}

.matched{
  margin-top:10px;
  font-size:13px;
  color:#444;
}

/* Disease details page box/table style */
.detail-card{
  max-width: 900px;
  margin: 0 auto;
}

.detail-hero{
  display:flex;
  gap:14px;
  align-items:center;
}

.detail-hero img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid #e5e7eb;
}

/* Medicines table/box */
.meds-box{
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: 10px;
}

.meds-head{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 1.6fr;
  padding: 12px 14px;
  font-weight: 700;
  background: #eef2ff;
  color:#1e3a8a;
  border-bottom: 1px solid #c7d2fe;
}

.meds-row{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 1.6fr;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2ff;
}

.meds-row:last-child{
  border-bottom:none;
}

.meds-row div{
  font-size: 14px;
  color:#111827;
}
.detail-wrap{
  display:flex;
  justify-content:center;
  padding:30px 10px;
}

.detail-card{
  width: 650px;
  background:#fff;
  border-radius:10px;
  padding:22px;
  border:1px solid #b7d6d6;
}

.detail-title{
  text-align:center;
  margin:0 0 18px 0;
  color:#125b5b;
}

.detail-section{
  margin-top:16px;
}

.detail-section h3{
  margin:0 0 6px 0;
  color:#0f766e;
  font-size:15px;
  border-left:3px solid #0f766e;
  padding-left:8px;
}

.table-wrap{
  border:1px solid #8ecaca;
  border-radius:4px;
  overflow:hidden;
}

.med-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.med-table th{
  background:#dff2f1;
  text-align:left;
  padding:8px;
  border-right:1px solid #8ecaca;
}

.med-table td{
  padding:8px;
  border-top:1px solid #8ecaca;
  border-right:1px solid #8ecaca;
}

.med-table th:last-child,
.med-table td:last-child{
  border-right:none;
}
/* ===== Disease Detail UI (image top, title below) ===== */
.detail-card{
  max-width: 820px;
  margin: 24px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}

.detail-hero-img{
  width: 100%;
  height: 280px;
  background: #eee;
}

.detail-hero-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-title{
  padding: 18px 22px 8px;
}

.detail-title h2{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
}

.detail-cat{
  margin: 6px 0 0;
  color: #666;
  font-size: 14px;
}

.detail-section{
  padding: 14px 22px;
  border-top: 1px solid #f0f0f0;
}

.detail-section h3{
  margin: 0 0 10px;
  font-size: 16px;
}

.detail-section ul{
  margin: 0;
  padding-left: 18px;
}

.table-wrap{
  overflow-x: auto;
}

.med-table{
  width: 100%;
  border-collapse: collapse;
}

.med-table th, .med-table td{
  border: 1px solid #d9e7e4;
  padding: 10px;
  text-align: left;
  font-size: 14px;
}

.med-table th{
  background: #eaf7f4;
  font-weight: 700;
}
/* ---------- QUIZ UI ---------- */
.quiz-wrap { max-width: 720px; margin: 0 auto; }
.quiz-ul { margin: 10px 0 14px; padding-left: 18px; }
.quiz-actions { display:flex; gap:10px; align-items:center; }

.quiz-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.quiz-qno { font-weight: 700; }
.quiz-timer { color:#333; }

.quiz-question { margin: 10px 0 14px; font-size: 20px; }

.quiz-options { display:flex; flex-direction:column; gap:10px; }

.quiz-opt {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.08);
  background: #f5fbff;
  border-radius: 12px;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.quiz-opt:hover { transform: translateY(-1px); }

.quiz-letter {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e8f2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}

.quiz-text { flex: 1; font-weight: 600; }

.quiz-mark {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.quiz-opt.correct {
  background: #eaffea;
  border-color: rgba(0,128,0,0.25);
}

.quiz-opt.correct .quiz-letter { background:#c9f7c9; }

.quiz-opt.correct .quiz-mark { color: #0a7a0a; }

.quiz-opt.wrong {
  background: #ffecec;
  border-color: rgba(255,0,0,0.2);
}

.quiz-opt.wrong .quiz-letter { background:#ffd6d6; }

.quiz-opt.wrong .quiz-mark { color: #b00020; }

.quiz-bottom {
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}

.quiz-status .good { color:#0a7a0a; font-weight: 800; }
.quiz-status .bad { color:#b00020; font-weight: 800; }

/* ---------- TABLE UI ---------- */
.table-wrap { overflow-x:auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  border: 1px solid rgba(0,0,0,0.08);
  padding: 12px;
  text-align: center;
}
.tbl thead th { background: rgba(0, 128, 128, 0.10); }
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.category-card {
  background: #f5f9ff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.category-card span {
  font-weight: 700;
}

.category-card button {
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: #1d76d2;
  color: white;
  cursor: pointer;
}

.article-btn {
  display: inline-block;
  padding: 10px 15px;
  background: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 8px;
}

.article-btn:hover {
  background: #45a049;
}