Update 6 files

- /app/index.html
- /app/index.js
- /assets/style.css
- /assets/jsonqb/Chemistry 2025 QB merged.json
- /assets/jsonqb/Physics 2025 QB merged.json
- /assets/jsonqb/Biology 2025 QB merged.json

assets/style.css

@@ -46,9 +46,8 @@ body {
 }
 
 hr {
-  height: 0;
-  color: #000;
-  border-top-width: 1px
+  height: 2px;
+  background-color: #000;
 }
 
 abbr:where([title]) {
@@ -334,13 +333,66 @@ h4 {
   word-break: break-word;
 }
 
-#right-col {
+#right-wrapper {
   flex: 4;
+  display: flex;
+  flex-direction: column;
   width: 80%;
+  height: 100%;
+}
+
+#upper-right-col {
+  flex: 1;
+  /*overflow: hidden;*/
+  word-break: break-word;
+}
+
+#right-col {
+  flex: 9;
+  /*height: 90%;
+  width: 80%;*/
   overflow-y: auto;
   word-break: break-word;
 }
 
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.selectables {
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+@media (max-width: 480px) {
+  .selectables {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+}
+
+select {
+  min-width: 60px;
+}
+
+#subtopic-select, #topic-select {
+  max-width: 100px;
+}
+
+#topic-list, .topic-label {
+  display: block;
+}
+
+#topic-list label {
+  padding-bottom: 0.5rem;
+}
+
 #appContainer{
   display: flex;
   height: 100%;