feat(displays): expose DDC/CI contrast, input source, color preset, picture mode

Backend (routes/display.py, services/display_service.py):
- Probe DDC/CI capabilities per monitor at enumeration time
- New endpoints POST /api/display/{contrast,input_source,color_preset,picture_mode}/{id}
- Picture mode goes through raw VCP 0xDC since monitorcontrol has no
  high-level wrapper; labels follow MCCS spec with vendor-friendly fallbacks
- Each capability reports a *_supported flag so the UI can hide rows that
  the hardware does not advertise

Frontend (links.js, app.js, styles.css, locales):
- Monitor cards grow a contrast slider (same editorial copper treatment
  as brightness) and a "PICTURE TUNING" section beneath
- Picture tuning uses the IconSelect widget (matching the audio device
  selector): per-port icons (HDMI, DisplayPort, DVI, VGA, USB-C),
  thermometer for color temps, per-mode icons (movie reel, gamepad,
  ball, etc.) for picture modes
- Humanizers turn SHOUT_CASE enum names into readable labels
  (COLOR_TEMP_6500K -> "6500 K", HDMI1 -> "HDMI 1")
- 14 new i18n keys per locale (en/ru)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

media_server/static/css/styles.css

@@ -8022,24 +8022,36 @@ select option {
     background: rgba(var(--copper-rgb), 0.06) !important;
 }
 
-/* Brightness control row */
-.display-container .display-brightness-control {
-    display: flex;
+/* Slider rows (brightness + contrast share this layout) */
+.display-container .display-slider-row {
+    display: grid;
+    grid-template-columns: 18px minmax(0, auto) 1fr auto;
     align-items: center;
-    gap: 14px;
+    gap: 12px;
+}
+.display-container .display-slider-row.display-brightness-control {
     padding-top: 16px;
     border-top: 1px solid var(--rule);
 }
-.display-container .display-brightness-icon {
+.display-container .display-slider-icon {
     color: var(--ink-mute);
     width: 18px !important;
     height: 18px !important;
     flex-shrink: 0;
 }
-.display-container .display-brightness-slider {
+.display-container .display-slider-label {
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+    white-space: nowrap;
+}
+.display-container .display-slider {
     -webkit-appearance: none;
     appearance: none;
     flex: 1;
+    width: 100%;
     height: 2px !important;
     background: var(--rule-strong);
     border-radius: 0;
@@ -8049,7 +8061,7 @@ select option {
     border: 0 !important;
     min-width: 0;
 }
-.display-container .display-brightness-slider::-webkit-slider-thumb {
+.display-container .display-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 14px;
@@ -8059,20 +8071,24 @@ select option {
     box-shadow: 0 0 12px var(--copper-glow);
     border: 0;
     cursor: grab;
+    transition: transform 140ms var(--ease);
 }
-.display-container .display-brightness-slider::-moz-range-thumb {
+.display-container .display-slider::-moz-range-thumb {
     width: 14px;
     height: 14px;
     background: var(--copper);
     border-radius: 50%;
     border: 0;
     cursor: grab;
+    transition: transform 140ms var(--ease);
 }
-.display-container .display-brightness-slider:disabled {
+.display-container .display-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
+.display-container .display-slider:hover::-moz-range-thumb { transform: scale(1.15); }
+.display-container .display-slider:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
-.display-container .display-brightness-value {
+.display-container .display-slider-value {
     font-family: var(--mono);
     font-size: 12px;
     color: var(--copper);
@@ -8082,6 +8098,57 @@ select option {
     text-align: right;
     letter-spacing: 0.04em;
 }
+
+/* Picture tuning section — input source, color preset, picture mode.
+   The underlying <select> is hidden by IconSelect; the visible trigger
+   inherits the editorial .icon-select-trigger overrides defined later
+   in this file. */
+.display-container .display-tuning {
+    padding-top: 18px;
+    border-top: 1px solid var(--rule);
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+.display-container .display-tuning-title {
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    color: var(--ink-faint);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.display-container .display-tuning-title::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(to right, var(--rule), transparent);
+}
+.display-container .display-tuning-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+.display-container .display-tuning-field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.display-container .display-tuning-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+    white-space: nowrap;
+}
+/* Make the IconSelect trigger fill the field width (cards are narrow) */
+.display-container .display-tuning-field .icon-select-trigger {
+    width: 100%;
+    justify-content: flex-start;
+}
 .display-container .display-monitors > .empty-state-illustration {
     grid-column: 1 / -1;
     text-align: center;