Polish calibration UI: close buttons, icon footers, span/toggle sync, input toggle

- Add close X button to all modal headers (acts as Cancel)
- Replace Cancel/Save labels with icon buttons (✕/✓)
- Remove header/footer separator lines, reduce spacing
- Fix canvas re-render on resize via ResizeObserver
- Move calibration hint to top as section-tip
- Increase toggle zones to 16px, make borders more visible
- Differentiate min/max ticks (long) from intermediate (short)
- Sync toggle zones and ticks with span position
- Fix span handle z-index to stay above LED input
- Add total LED label click to toggle edge input visibility
- Remove corner icon scale on hover
- Direction arrows fixed at full-edge midpoint (unaffected by span)
- Span bars fill full edge area with 2px border radius

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

server/src/wled_controller/static/style.css

@@ -58,9 +58,8 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 0;
-    border-bottom: 2px solid var(--border-color);
-    margin-bottom: 30px;
+    padding: 20px 0 10px;
+    margin-bottom: 10px;
 }
 
 .header-title {
@@ -783,6 +782,9 @@ input:-webkit-autofill:focus {
 .modal-header {
     padding: 24px 24px 16px 24px;
     border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .modal-header h2 {
@@ -791,6 +793,27 @@ input:-webkit-autofill:focus {
     color: var(--text-color);
 }
 
+.modal-close-btn {
+    background: none;
+    border: none;
+    color: #777;
+    font-size: 1.2rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.2s, background 0.2s;
+    flex-shrink: 0;
+}
+
+.modal-close-btn:hover {
+    color: var(--text-color);
+    background: rgba(128, 128, 128, 0.15);
+}
+
 .modal-body {
     padding: 24px;
 }
@@ -850,11 +873,13 @@ input:-webkit-autofill:focus {
     padding: 16px 24px 24px 24px;
     display: flex;
     justify-content: flex-end;
-    gap: 12px;
+    gap: 8px;
 }
 
-.modal-footer .btn {
-    min-width: 100px;
+.modal-footer .btn-icon {
+    min-width: 60px;
+    padding: 10px 20px;
+    font-size: 1.4rem;
 }
 
 /* Theme Toggle */
@@ -875,9 +900,8 @@ input:-webkit-autofill:focus {
 
 /* Footer */
 .app-footer {
-    margin-top: 60px;
-    padding: 30px 0;
-    border-top: 1px solid var(--border-color);
+    margin-top: 20px;
+    padding: 15px 0;
     text-align: center;
 }
 
@@ -911,7 +935,7 @@ input:-webkit-autofill:focus {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
-    margin: 20px auto;
+    margin: 40px auto 20px;
     background: var(--card-bg);
     border: 2px solid var(--border-color);
     border-radius: 8px;
@@ -920,10 +944,10 @@ input:-webkit-autofill:focus {
 
 #calibration-preview-canvas {
     position: absolute;
-    top: -36px;
-    left: -36px;
-    width: calc(100% + 72px);
-    height: calc(100% + 72px);
+    top: -40px;
+    left: -40px;
+    width: calc(100% + 80px);
+    height: calc(100% + 80px);
     pointer-events: none;
     z-index: 3;
 }
@@ -950,12 +974,23 @@ input:-webkit-autofill:focus {
     font-weight: 600;
     opacity: 0.9;
     transition: color 0.2s;
+    cursor: pointer;
+    user-select: none;
+}
+
+.preview-screen-total:hover {
+    opacity: 1;
 }
 
 .preview-screen-total.mismatch {
     color: #FFC107;
 }
 
+.inputs-dimmed .edge-led-input {
+    opacity: 0.2;
+    pointer-events: none;
+}
+
 .preview-screen-controls {
     display: flex;
     align-items: center;
@@ -1011,8 +1046,8 @@ input:-webkit-autofill:focus {
     position: absolute;
     cursor: pointer;
     z-index: 1;
-    background: rgba(128, 128, 128, 0.08);
-    border: 1px solid rgba(128, 128, 128, 0.15);
+    background: rgba(128, 128, 128, 0.1);
+    border: 1px solid rgba(128, 128, 128, 0.35);
     border-radius: 3px;
     transition: background 0.2s, box-shadow 0.2s;
 }
@@ -1022,31 +1057,31 @@ input:-webkit-autofill:focus {
 }
 
 .toggle-top {
-    top: -12px;
+    top: -16px;
     left: 56px;
     right: 56px;
-    height: 12px;
+    height: 16px;
 }
 
 .toggle-bottom {
-    bottom: -12px;
+    bottom: -16px;
     left: 56px;
     right: 56px;
-    height: 12px;
+    height: 16px;
 }
 
 .toggle-left {
-    left: -12px;
+    left: -16px;
     top: 36px;
     bottom: 36px;
-    width: 12px;
+    width: 16px;
 }
 
 .toggle-right {
-    right: -12px;
+    right: -16px;
     top: 36px;
     bottom: 36px;
-    width: 12px;
+    width: 16px;
 }
 
 .edge-top {
@@ -1127,9 +1162,8 @@ input:-webkit-autofill:focus {
     position: absolute;
     background: rgba(76, 175, 80, 0.3);
     border: 1px solid rgba(76, 175, 80, 0.5);
-    border-radius: 3px;
+    border-radius: 2px;
     cursor: grab;
-    z-index: 1;
     transition: background 0.15s;
 }
 
@@ -1144,22 +1178,22 @@ input:-webkit-autofill:focus {
 /* Horizontal edges: bar spans left-right */
 .edge-top .edge-span-bar,
 .edge-bottom .edge-span-bar {
-    top: 2px;
-    bottom: 2px;
+    top: 0;
+    bottom: 0;
 }
 
 /* Vertical edges: bar spans top-bottom */
 .edge-left .edge-span-bar,
 .edge-right .edge-span-bar {
-    left: 2px;
-    right: 2px;
+    left: 0;
+    right: 0;
 }
 
 /* Resize handles — large transparent hit area with narrow visible strip */
 .edge-span-handle {
     position: absolute;
     background: transparent;
-    z-index: 2;
+    z-index: 3;
     opacity: 0;
     transition: opacity 0.15s;
 }
@@ -1255,7 +1289,6 @@ input:-webkit-autofill:focus {
 
 .preview-corner:hover {
     color: rgba(76, 175, 80, 0.6);
-    transform: scale(1.2);
 }
 
 .preview-corner.active:hover {
@@ -1321,12 +1354,8 @@ input:-webkit-autofill:focus {
         margin: 20px;
     }
 
-    .modal-footer {
-        flex-direction: column-reverse;
-    }
-
     .modal-footer .btn {
-        width: 100%;
+        min-width: 80px;
     }
 }