Restyle main page: collapsible sections, theme-aware ticks, UI polish

- Make Devices and Displays sections collapsible with persistent state
- Move WLED config tip from footer to under Devices heading
- Add theme-aware colors for calibration canvas ticks and chevrons
- Rename sections to "Devices" and "Displays" with emoji prefix icons
- Fix display layout scaling to fill available space
- Remove unused footer-tip and modal code

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/style.css

@@ -374,6 +374,42 @@ section {
     font-size: 1.2rem;
 }
 
+/* Collapsible sections */
+.collapsible-header {
+    cursor: pointer;
+    user-select: none;
+}
+
+.collapsible-header:hover {
+    opacity: 0.8;
+}
+
+.collapsible-header .collapse-chevron {
+    display: inline-block;
+    font-size: 0.6em;
+    margin-left: 6px;
+    transition: transform 0.2s ease;
+    vertical-align: middle;
+}
+
+.collapsible-header.collapsed .collapse-chevron {
+    transform: rotate(-90deg);
+}
+
+.collapsible-content {
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.2s ease;
+    max-height: 2000px;
+    opacity: 1;
+}
+
+.collapsible-content.collapsed {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+}
+
 /* Display Layout Visualization */
 .display-layout-preview {
     background: var(--card-bg);
@@ -527,13 +563,29 @@ section {
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 8px;
 }
 
 .section-header h2 {
     margin-bottom: 0;
 }
 
+.section-tip {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    margin: 0 0 15px 0;
+    line-height: 1.5;
+    padding: 8px 12px;
+    background: rgba(33, 150, 243, 0.08);
+    border-left: 3px solid var(--info-color, #2196F3);
+    border-radius: 0 6px 6px 0;
+}
+
+.section-tip a {
+    color: var(--info-color, #2196F3);
+    text-decoration: underline;
+}
+
 .form-group {
     margin-bottom: 15px;
 }
@@ -794,19 +846,6 @@ input:-webkit-autofill:focus {
     margin: 0;
 }
 
-.footer-tip {
-    margin-bottom: 12px !important;
-    padding: 10px 16px;
-    background: rgba(33, 150, 243, 0.08);
-    border-radius: 6px;
-    font-size: 0.85rem;
-    display: inline-block;
-}
-
-.footer-tip a {
-    color: var(--info-color) !important;
-    text-decoration: underline;
-}
 
 .footer-content strong {
     color: var(--text-color);