body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: #f4f4f4;
      display: flex;
      height: 100vh;
    }

    .sidebar {
      width: 240px;
      background: #1e1e1e;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding-top: 20px;
    }
    	
	.sidebar h2 {
	  text-align: center;
	  margin-bottom: 20px;
	  font-size: 1.2rem;
	  color: white;
	}

    .sidebar button {
      background: none;
      border: none;
      color: white;
      padding: 15px 20px;
      text-align: left;
      font-size: 1rem;
      cursor: pointer;
      width: 100%;
    }
    .sidebar button:hover,
    .sidebar .active {
      background: #333;
    }
	
	.sidebar a.nav-btn {
	  display: block;
	  color: white;
	  padding: 15px 20px;
	  text-decoration: none;
	}

    .main {
      flex-grow: 1;
      padding: 20px;
      overflow-y: auto;
    }

    h2 {
      margin-top: 0;
      color: #333;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      background: white;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: center;
    }
    th {
      background: #eee;
    }

    .alert-row {
      background: #ffe6e6;
    }

    form input, form select, form button {
      padding: 8px;
      margin: 5px;
    }
    form button { cursor: pointer; }

    .hidden { display: none; }

    #connectPanel {
      margin-bottom: 20px;
    }
    #connectPanel button {
      padding: 10px 15px;
      margin-right: 10px;
    }
	
	.loading {
	  padding: 15px;
	  color: #777;
	  font-style: italic;
	}

	.empty-state {
	  padding: 20px;
	  text-align: center;
	  color: #666;
	  background: #fafafa;
	  border: 1px dashed #ccc;
	  margin-top: 10px;
	}
	
	.insights-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	  gap: 16px;
	  margin-top: 12px;
	}

	.insight-card {
	  background: #fff;
	  border-radius: 10px;
	  padding: 16px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	  border-left: 5px solid #4CAF50;
	}

	.insight-card.warning {
	  border-left-color: #e74c3c;
	}

	.insight-title {
	  font-weight: 600;
	  margin-bottom: 6px;
	}

	.insight-confidence {
	  font-size: 12px;
	  margin-bottom: 10px;
	  color: #555;
	}

	.insight-metric {
	  font-size: 14px;
	  margin: 4px 0;
	}

	.hidden {
	  display: none;
	}	
	
	.clinical-card {
	  background: #ffffff;
	  border: 1px solid #dcdcdc;
	  padding: 28px;
	  margin-bottom: 32px;
	  border-radius: 4px;
	  font-family: Georgia, "Times New Roman", serif;
	  font-size: 15px;
	  color: #111;
	  line-height: 1.6;
	}

	.clinical-header {
	  border-bottom: 2px solid #000;
	  margin-bottom: 18px;
	  padding-bottom: 8px;
	}

	.clinical-title {
	  font-size: 20px;
	  font-weight: 600;
	  margin: 0;
	}

	.clinical-period {
	  font-size: 13px;
	  color: #555;
	  margin-top: 4px;
	}

	.clinical-block {
	  margin-top: 20px;
	}

	.clinical-block h3 {
	  font-size: 14px;
	  text-transform: uppercase;
	  letter-spacing: 0.5px;
	  border-bottom: 1px solid #ccc;
	  padding-bottom: 4px;
	  margin-bottom: 8px;
	}

	.clinical-block ul {
	  padding-left: 18px;
	  margin: 0;
	}

	.clinical-block li {
	  margin-bottom: 6px;
	}

	.clinical-disclaimer {
	  margin-top: 20px;
	  font-size: 12px;
	  color: #555;
	  border-top: 1px solid #ccc;
	  padding-top: 8px;
	}	
	
	.clinical-sentence {
	  margin-top: 10px;
	  padding: 10px;
	  background: #f6f9fc;
	  border-left: 4px solid #2b6cb0;
	  font-size: 14px;
	  line-height: 1.4;
	  color: #1a202c;
	}	

	.clinical-card h2 {
	  margin-top: 0;
	  font-size: 20px;
	}

	.clinical-meta {
	  font-size: 13px;
	  color: #555;
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 16px;
	}

	
	@media print {
	  body * {
		visibility: hidden;
	  }

	  #doctorSummary,
	  #doctorSummary * {
		visibility: visible;
	  }

	  #doctorSummary {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		border: none;
		box-shadow: none;
	  }

	  button {
		display: none;
	  }
	}


    .summary-container {
	  display: flex;
	  gap: 16px;
	  margin-bottom: 20px;
	}

	.summary-card {
	  background: #f9fafb;
	  border-radius: 8px;
	  padding: 12px 16px;
	  min-width: 200px;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}

	.summary-title {
	  font-size: 13px;
	  color: #555;
	  margin-bottom: 4px;
	}
	
	#toast {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  background: #333;
	  color: white;
	  padding: 12px 18px;
	  border-radius: 6px;
	  display: none;
	  z-index: 9999;
	  font-size: 14px;
	}
	
	.medication-effectiveness {
	  margin-top: 30px;
	}

	.med-card {
	  background: #f9fafb;
	  border-left: 4px solid #4caf50;
	  padding: 15px;
	  margin-bottom: 15px;
	  border-radius: 8px;
	}

	.med-card h4 {
	  margin-top: 0;
	}

	.med-card .delta {
	  font-weight: bold;
	  margin-top: 8px;
	}
	
	#patientList {
	  list-style: none;
	  padding: 0;
	}

	.patient-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 14px 16px;
	  margin-bottom: 10px;
	  background: white;
	  border-radius: 6px;
	  border: 1px solid #ddd;
	  cursor: pointer;
	  transition: all 0.2s ease;
	}

	.patient-row:hover {
	  background: #f5f7fa;
	  border-color: #bbb;
	}

	.patient-info {
	  display: flex;
	  flex-direction: column;
	}

	.granted-date {
	  font-size: 12px;
	  color: #777;
	}

	.patient-arrow {
	  font-size: 18px;
	  color: #999;
	}
	
	.patient-card {
	  display: flex;
	  border-radius: 12px;
	  background: #fff;
	  margin-bottom: 12px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	}

	.card-left {
	  width: 6px;
	  border-radius: 12px 0 0 12px;
	}

	.card-left.red { background: #e74c3c; }
	.card-left.orange { background: #f39c12; }
	.card-left.green { background: #2ecc71; }

	.card-content {
	  padding: 16px;
	  flex: 1;
	}

	.card-header {
	  display: flex;
	  justify-content: space-between;
	}

	.risk-box {
	  text-align: right;
	}

	.risk-score {
	  font-size: 24px;
	  font-weight: bold;
	}

	.risk-action {
	  background: #fceaea;
	  padding: 4px 8px;
	  border-radius: 8px;
	  font-size: 12px;
	}

	.metrics {
	  margin-top: 10px;
	  display: flex;
	  gap: 20px;
	  font-size: 14px;
	}