body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 10px; 
  background-color: #f9f9fa;
  font-size: 13px; 
}
.controls {
  margin-bottom: 15px;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
label { font-weight: bold; cursor: pointer; }

.table-container {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; 
}
th, td {
  padding: 8px 4px; 
  border-bottom: 1px solid #eee;
  text-align: center; 
  word-wrap: break-word;
}
th { 
  background-color: #f1f3f5; 
  font-size: 12px;
}

.col-topic { width: 40%; text-align: left; }
.col-dse, .col-ib, .col-ial { width: 20%; }

.main-topic {
  background-color: #e9ecef;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}
.main-topic td { text-align: left; }
.toggle-icon {
  display: inline-block;
  width: 15px;
  transition: transform 0.2s;
  font-size: 10px;
}
.is-open .toggle-icon { transform: rotate(90deg); }

.sub-topic td.col-topic { 
  padding-left: 20px; 
  font-size: 12px; 
  color: #444; 
}
.hidden { display: none; }
.has-content { font-weight: bold; color: #0d6efd; }