Implement flattened structure with in-page navigation and back-to-top links

custom.css

@@ -1,5 +1,57 @@
 /* Custom styling for IT Learning Notes */
 
+/* Table of Contents styling */
+.toc {
+    background-color: #f8f9fa;
+    border: 1px solid #eaecef;
+    border-radius: 4px;
+    padding: 1em;
+    margin-bottom: 2em;
+}
+
+.toc ul, .toc ol {
+    list-style-type: none;
+    padding-left: 1em;
+}
+
+.toc li {
+    margin: 0.5em 0;
+}
+
+/* Back to top link styling */
+a[href^="#"] {
+    text-decoration: none;
+    color: #4183c4;
+    font-weight: 600;
+}
+
+a[href^="#"]:hover {
+    text-decoration: underline;
+}
+
+/* Navigation links at bottom of sections */
+a[href="#user-management-solutions-"],
+a[href="#storage-management-solutions-"],
+a[href="#service-management-solutions-"],
+a[href="#network-solutions-"],
+a[href="#security-solutions-"],
+a[href="#container-management-solutions-"],
+a[href="#system-recovery-solutions-"],
+a[href="#shell-scripting-solutions-"] {
+    display: inline-block;
+    background-color: #f1f8ff;
+    padding: 0.3em 0.6em;
+    margin: 1.5em 0;
+    border-radius: 4px;
+    border-left: 4px solid #4183c4;
+    font-size: 0.9em;
+}
+
+/* Section anchor targets */
+div[id^="scenario-"] {
+    scroll-margin-top: 70px;
+}
+
 /* Ensure all sections are properly visible */
 .section {
     display: block !important;