ui: fix search icon overlap, Display cards, compact view, dark dropdowns

Library
- Search icon overlapped placeholder text — legacy CSS positioned
  the icon absolutely (left: 0.6rem) inside a position: relative
  wrapper. Override now resets position: static (with !important)
  on icon, clear button, and wrapper, lets the flexbox order them
  naturally with gap: 10px, and zeroes the input's legacy
  padding: 0.4rem 2rem 0.4rem 2rem.
- Compact view now visually distinct from grid view: tighter
  grid (minmax(120px, 1fr) vs 200px), 18px gap, smaller sans-
  font name (13px sans 500 weight) instead of serif, smaller
  meta (9px), smaller browser-icon. The legacy
  .browser-grid-compact class was being applied but my
  .now-playing-styled rules ignored it.

Display tab — full card styling
- Cards: 360px min width (was 280px), serif name (17px) with
  copper monitor icon, mono uppercase resolution + manufacturer,
  copper-bordered "PRIMARY" badge.
- Power button: 38px circle, jade when ON (with copper-glow
  shadow), faint ink when OFF, copper on hover. Was previously
  unstyled / invisible.
- Brightness control: hairline divider above, copper hairline
  slider with copper handle and copper-glow, mono tabular-num
  percentage in copper.

Native form widgets readable on dark theme
- color-scheme: dark on :root (light on light theme) so native
  controls (select dropdowns, scrollbars) inherit dark colors.
- select option { background-color, color } so the popup list
  paints dark text on dark background instead of system white.

media_server/static/css/styles.css

@@ -93,6 +93,10 @@
    ============================================================ */
 
 :root {
+    /* Tells browsers we're using a dark UI so native widgets
+       (select dropdowns, scrollbars, form controls) match. */
+    color-scheme: dark;
+
     /* Studio Reference (warm dark) */
     --bg-deep:       #0E0D0B;
     --bg-paper:      #18150F;
@@ -146,6 +150,7 @@
 }
 
 :root[data-theme="light"] {
+    color-scheme: light;
     /* Paper Edition (warm cream) */
     --bg-deep:       #F5F1EA;
     --bg-paper:      #EDE7DC;
@@ -7300,11 +7305,15 @@ body.audio-spectrum-live .now-playing .spectrum span {
     border-bottom: 1px solid var(--rule-strong) !important;
     border-radius: 0 !important;
     padding: 4px 0 !important;
-    display: inline-flex;
+    /* override legacy position: relative so the absolutely-positioned
+       icon doesn't overlap the input */
+    position: static !important;
+    display: inline-flex !important;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     transition: border-color 180ms var(--ease);
     min-width: 220px;
+    max-width: none !important;
 }
 .browser-container .browser-search-wrapper:focus-within {
     border-bottom-color: var(--copper) !important;
@@ -7313,23 +7322,40 @@ body.audio-spectrum-live .now-playing .spectrum span {
     background: transparent !important;
     border: 0 !important;
     color: var(--ink) !important;
-    font-family: var(--sans);
+    font-family: var(--sans) !important;
-    font-size: 14px;
+    font-size: 14px !important;
+    /* defeat legacy padding: 0.4rem 2rem 0.4rem 2rem */
     padding: 4px 0 !important;
-    outline: none;
+    outline: none !important;
     flex: 1;
     min-width: 0;
+    width: auto !important;
 }
 .browser-container .browser-search-input::placeholder { color: var(--ink-mute); }
-.browser-container .browser-search-icon { color: var(--ink-mute); flex-shrink: 0; }
+.browser-container .browser-search-icon {
+    /* defeat legacy position: absolute */
+    position: static !important;
+    transform: none !important;
+    left: auto !important;
+    top: auto !important;
+    color: var(--ink-mute);
+    flex-shrink: 0;
+    pointer-events: none;
+}
 .browser-container .browser-search-clear {
+    /* defeat legacy position: absolute */
+    position: static !important;
+    transform: none !important;
+    right: auto !important;
+    top: auto !important;
     background: transparent !important;
     border: 0 !important;
-    color: var(--ink-mute);
+    color: var(--ink-mute) !important;
     cursor: pointer;
     padding: 0 !important;
+    flex-shrink: 0;
 }
-.browser-container .browser-search-clear:hover { color: var(--copper); }
+.browser-container .browser-search-clear:hover { color: var(--copper) !important; }
 
 /* Items per page label + select */
 .browser-container .items-per-page-label {
@@ -7343,7 +7369,7 @@ body.audio-spectrum-live .now-playing .spectrum span {
     gap: 8px;
 }
 .browser-container .items-per-page-label select {
-    background: transparent !important;
+    background: var(--bg-card) !important;
     border: 1px solid var(--rule-strong) !important;
     color: var(--ink) !important;
     border-radius: 0 !important;
@@ -7352,14 +7378,44 @@ body.audio-spectrum-live .now-playing .spectrum span {
     padding: 6px 10px !important;
     cursor: pointer;
 }
+/* Native <select> popup options — paint dark so they don't read
+   as white-on-dark blocks. Most browsers respect bg/color on <option>. */
+select option {
+    background-color: var(--bg-card);
+    color: var(--ink);
+}
 
-/* Browser grid — editorial cards */
+/* Browser grid — editorial cards (default = grid view) */
 .browser-container .browser-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 32px 24px;
     padding: 0 !important;
 }
+/* Compact view — denser grid with smaller cards */
+.browser-container .browser-grid.browser-grid-compact {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 18px 14px;
+}
+.browser-container .browser-grid-compact .browser-thumb-wrapper {
+    margin-bottom: 8px;
+}
+.browser-container .browser-grid-compact .browser-item-name {
+    font-size: 13px;
+    font-family: var(--sans);
+    font-weight: 500;
+    letter-spacing: -0.005em;
+    line-height: 1.2;
+}
+.browser-container .browser-grid-compact .browser-item-meta,
+.browser-container .browser-grid-compact .browser-item-type {
+    font-size: 9px;
+    letter-spacing: 0.1em;
+}
+.browser-container .browser-grid-compact .browser-icon {
+    width: 28px;
+    height: 28px;
+}
 .browser-container .browser-item {
     background: transparent !important;
     border: 0 !important;
@@ -7870,8 +7926,172 @@ body.audio-spectrum-live .now-playing .spectrum span {
 /* ─── DISPLAY tab ─────────────────────────────────────────── */
 .display-container .display-monitors {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-    gap: 18px;
+    gap: 22px;
+}
+
+/* Full monitor card — header (icon + name + power) + brightness control */
+.display-container .display-monitor-card {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--rule) !important;
+    border-radius: 0 !important;
+    padding: 24px 26px !important;
+    display: flex !important;
+    flex-direction: column;
+    gap: 22px;
+    transition: border-color 200ms var(--ease);
+}
+.display-container .display-monitor-card:hover {
+    border-color: var(--rule-strong) !important;
+}
+
+.display-container .display-monitor-header {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+.display-container .display-monitor-icon {
+    color: var(--copper);
+    flex-shrink: 0;
+    width: 22px !important;
+    height: 22px !important;
+}
+.display-container .display-monitor-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.display-container .display-monitor-name {
+    font-family: var(--serif);
+    font-style: normal;
+    font-weight: 400;
+    font-size: 17px;
+    color: var(--ink);
+    font-variation-settings: 'opsz' 30;
+    letter-spacing: -0.005em;
+    line-height: 1.2;
+    display: inline-flex;
+    align-items: baseline;
+    gap: 10px;
+    /* Allow text to wrap so we don't ellipsis-truncate the model name */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.display-container .display-monitor-details {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+}
+.display-container .display-primary-badge {
+    font-family: var(--mono);
+    font-size: 8px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--copper);
+    border: 1px solid var(--copper);
+    padding: 2px 6px;
+}
+
+/* Power button — visible & state-coloured (on = jade, off = ink-mute) */
+.display-container .display-power-btn {
+    background: transparent !important;
+    border: 1px solid var(--rule-strong) !important;
+    color: var(--ink-mute) !important;
+    border-radius: 50% !important;
+    width: 38px !important;
+    height: 38px !important;
+    padding: 0 !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 200ms var(--ease);
+}
+.display-container .display-power-btn svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+.display-container .display-power-btn.on {
+    color: var(--jade) !important;
+    border-color: var(--jade) !important;
+    box-shadow: 0 0 12px rgba(122, 178, 148, 0.25);
+}
+.display-container .display-power-btn.off {
+    color: var(--ink-faint) !important;
+    border-color: var(--rule-strong) !important;
+}
+.display-container .display-power-btn:hover {
+    color: var(--copper) !important;
+    border-color: var(--copper) !important;
+    background: rgba(224, 128, 56, 0.06) !important;
+}
+
+/* Brightness control row */
+.display-container .display-brightness-control {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding-top: 16px;
+    border-top: 1px solid var(--rule);
+}
+.display-container .display-brightness-icon {
+    color: var(--ink-mute);
+    width: 18px !important;
+    height: 18px !important;
+    flex-shrink: 0;
+}
+.display-container .display-brightness-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    flex: 1;
+    height: 2px !important;
+    background: var(--rule-strong);
+    border-radius: 0;
+    cursor: pointer;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+    min-width: 0;
+}
+.display-container .display-brightness-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: var(--copper);
+    border-radius: 50%;
+    box-shadow: 0 0 12px var(--copper-glow);
+    border: 0;
+    cursor: grab;
+}
+.display-container .display-brightness-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: var(--copper);
+    border-radius: 50%;
+    border: 0;
+    cursor: grab;
+}
+.display-container .display-brightness-slider:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.display-container .display-brightness-value {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--copper);
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    min-width: 44px;
+    text-align: right;
+    letter-spacing: 0.04em;
 }
 .display-container .display-monitors > .empty-state-illustration {
     grid-column: 1 / -1;