/* ============================================================================
 * Zed PN polish — topbar + media header/search/toolbar + inspector (CT-315)
 * Covers PN3 (search) + PN4 (filter/toolbar) + PN6 (inspector shell) +
 * PN7 (param rows) + topbar refinement. Gated html.zed-ux (default OFF).
 * ==========================================================================*/

/* ===================== TOP BAR ===================== */
html.zed-ux .topBar {
  background: var(--zed-bg-panel);
  border-bottom: 1px solid var(--zed-border);
  color: var(--zed-text);
}
html.zed-ux .topBarBrand { color: var(--zed-accent); }

html.zed-ux .titleInput {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-md);
  font-weight: var(--zed-fw-medium);
  padding: var(--zed-space-1) var(--zed-space-2);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              border-color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .titleInput:hover { background: var(--zed-bg-hover); }
html.zed-ux .titleInput:focus {
  background: var(--zed-bg-inset);
  border-color: var(--zed-accent);
  outline: none;
}

html.zed-ux .topTextButton,
html.zed-ux .topIconButton {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-sm);
  font-weight: var(--zed-fw-medium);
  padding: var(--zed-space-1) var(--zed-space-3);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .topTextButton:hover,
html.zed-ux .topIconButton:hover {
  background: var(--zed-bg-hover);
  color: var(--zed-text);
}
html.zed-ux .topTextButton-primary {
  color: var(--zed-accent);
  border-color: var(--zed-border-strong);
}

html.zed-ux .cloudRenderButton {
  background: var(--zed-bg-elevated);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text-muted);
}
html.zed-ux .cloudRenderButton:hover { border-color: var(--zed-border-strong); }
html.zed-ux .cloudRenderButtonPro {
  background: var(--zed-accent);
  color: var(--zed-accent-contrast);
  border-radius: var(--zed-radius-pill);
  font-size: 9px;
  font-weight: var(--zed-fw-semibold);
  padding: 0 6px;
}

html.zed-ux .exportButton {
  background: var(--zed-accent);
  border: 1px solid transparent;
  border-radius: var(--zed-radius-sm);
  color: var(--zed-accent-contrast);
  font-weight: var(--zed-fw-semibold);
  box-shadow: var(--zed-shadow-sm);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              transform var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .exportButton:hover {
  background: var(--zed-accent-hover);
  transform: translateY(-1px);
}

html.zed-ux .accountAvatar {
  border-radius: 50%;
  border: 1px solid var(--zed-border-strong);
  overflow: hidden;
}

/* ===================== MEDIA: SEARCH (PN3) ===================== */
html.zed-ux .mediaSearch {
  display: flex;
  align-items: center;
  gap: var(--zed-space-2);
  height: var(--zed-control-h);
  padding: 0 var(--zed-space-3);
  background: var(--zed-bg-inset);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-pill);
  transition: border-color var(--zed-dur-fast) var(--zed-ease),
              box-shadow var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .mediaSearch:focus-within {
  border-color: var(--zed-accent);
  box-shadow: 0 0 0 3px rgba(var(--zed-accent-rgb), 0.18);
}
html.zed-ux .mediaSearchIcon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--zed-text-faint);
  background: none;
}
html.zed-ux .mediaSearchIcon::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  box-shadow: 6px 6px 0 -4.5px currentColor;
}
html.zed-ux #mediaSearchInput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--zed-text);
  font-size: var(--zed-fs-sm);
}
html.zed-ux #mediaSearchInput::placeholder { color: var(--zed-text-faint); }

/* ===================== MEDIA: TOOLBAR (PN4) ===================== */
html.zed-ux .mediaToolbar {
  display: flex;
  align-items: center;
  gap: var(--zed-space-1);
  margin-top: var(--zed-space-2);
}
html.zed-ux .mediaActionButton {
  background: var(--zed-accent);
  border: 1px solid transparent;
  border-radius: var(--zed-radius-sm);
  color: var(--zed-accent-contrast);
  font-size: var(--zed-fs-sm);
  font-weight: var(--zed-fw-semibold);
  height: var(--zed-control-h-sm);
  padding: 0 var(--zed-space-3);
  transition: background var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .mediaActionButton:hover { background: var(--zed-accent-hover); }
html.zed-ux .mediaIconButton {
  background: transparent;
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-xs);
  height: var(--zed-control-h-sm);
  padding: 0 var(--zed-space-2);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              color var(--zed-dur-fast) var(--zed-ease),
              border-color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .mediaIconButton:hover {
  background: var(--zed-bg-hover);
  color: var(--zed-text);
  border-color: var(--zed-border-strong);
}
html.zed-ux .mediaIconButton.is-active {
  background: rgba(var(--zed-accent-rgb), 0.14);
  border-color: var(--zed-accent);
  color: var(--zed-accent);
}
html.zed-ux .mediaIconButton.is-danger { color: var(--zed-danger); }
html.zed-ux .mediaIconButton.is-danger:hover { border-color: var(--zed-danger); }
html.zed-ux .mediaIconButton:disabled { opacity: 0.4; }
html.zed-ux .mediaToolbarSpacer { flex: 1; }

/* ===================== MEDIA: FILTER TABS (PN4) ===================== */
html.zed-ux .mediaShelfBar {
  display: flex;
  align-items: center;
  gap: var(--zed-space-2);
  margin-top: var(--zed-space-3);
}
html.zed-ux .mediaFilterTabs {
  display: flex;
  gap: var(--zed-space-1);
  padding: 3px;
  background: var(--zed-bg-inset);
  border-radius: var(--zed-radius-pill);
}
html.zed-ux .mediaFilterTab {
  background: transparent;
  border: none;
  border-radius: var(--zed-radius-pill);
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-xs);
  font-weight: var(--zed-fw-medium);
  padding: 4px var(--zed-space-3);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .mediaFilterTab:hover { color: var(--zed-text); }
html.zed-ux .mediaFilterTab.is-active {
  background: var(--zed-accent);
  color: var(--zed-accent-contrast);
}
html.zed-ux #mediaCountLabel {
  margin-left: auto;
  color: var(--zed-text-faint);
  font-size: var(--zed-fs-xs);
}

/* ===================== INSPECTOR: TABS (PN6) ===================== */
html.zed-ux .inspectorTabs {
  display: flex;
  gap: var(--zed-space-1);
  padding: var(--zed-space-2) var(--zed-space-3) 0;
  border-bottom: 1px solid var(--zed-border);
}
html.zed-ux .inspectorTab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-sm);
  font-weight: var(--zed-fw-medium);
  padding: var(--zed-space-2) var(--zed-space-2) var(--zed-space-3);
  transition: color var(--zed-dur-fast) var(--zed-ease),
              border-color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .inspectorTab:hover { color: var(--zed-text); }
html.zed-ux .inspectorTab.is-active {
  color: var(--zed-accent);
  border-bottom-color: var(--zed-accent);
}

/* ===================== INSPECTOR: PANES + ROWS (PN6/PN7) ===================== */
html.zed-ux .inspectorPane { padding: var(--zed-space-4); }
html.zed-ux .controlRow {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: var(--zed-space-3);
  margin-bottom: var(--zed-space-3);
}
html.zed-ux .controlRow > span {
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-sm);
}

/* Selects / dropdowns */
html.zed-ux .inspectorPane select,
html.zed-ux .controlRow select {
  background: var(--zed-bg-inset);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-sm);
  height: var(--zed-control-h);
  padding: 0 var(--zed-space-2);
  transition: border-color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .inspectorPane select:hover { border-color: var(--zed-border-strong); }
html.zed-ux .inspectorPane select:focus {
  border-color: var(--zed-accent);
  outline: none;
}

/* Param label + readout (audio/color) */
html.zed-ux .audioControlTop > span:first-child,
html.zed-ux .colorControlTop > span:first-child {
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-sm);
}
html.zed-ux .audioControlTop output {
  background: var(--zed-bg-inset);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-xs);
  padding: 1px 6px;
}
html.zed-ux .audioNumber {
  background: var(--zed-bg-inset);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-xs);
}

/* Audio mode segmented tabs */
html.zed-ux .audioModeTabs {
  display: flex;
  gap: var(--zed-space-1);
  padding: 3px;
  background: var(--zed-bg-inset);
  border-radius: var(--zed-radius-md);
  margin-bottom: var(--zed-space-3);
}
html.zed-ux .audioModeButton {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text-muted);
  font-size: var(--zed-fs-sm);
  padding: var(--zed-space-1) var(--zed-space-2);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .audioModeButton.is-active {
  background: var(--zed-bg-elevated);
  color: var(--zed-text);
  box-shadow: var(--zed-shadow-sm);
}

/* Feature rows + secondary buttons */
html.zed-ux .audioFeature {
  border-radius: var(--zed-radius-sm);
  padding: var(--zed-space-2);
  transition: background var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .audioFeature:hover { background: var(--zed-bg-hover); }
html.zed-ux .audioFeatureText strong {
  color: var(--zed-text);
  font-size: var(--zed-fs-sm);
}
html.zed-ux .audioFeatureText em {
  color: var(--zed-text-faint);
  font-size: var(--zed-fs-xs);
}
html.zed-ux .secondaryWide {
  background: var(--zed-bg-elevated);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text);
  font-size: var(--zed-fs-sm);
  font-weight: var(--zed-fw-medium);
  height: var(--zed-control-h);
  transition: background var(--zed-dur-fast) var(--zed-ease),
              border-color var(--zed-dur-fast) var(--zed-ease);
}
html.zed-ux .secondaryWide:hover {
  background: var(--zed-bg-hover);
  border-color: var(--zed-border-strong);
}

/* Color inspector header + reset mini buttons */
html.zed-ux .colorInspectorHeader {
  color: var(--zed-text);
  font-size: var(--zed-fs-md);
  font-weight: var(--zed-fw-semibold);
  padding-bottom: var(--zed-space-2);
}
html.zed-ux .colorMiniButton,
html.zed-ux .audioMiniButton {
  background: var(--zed-bg-elevated);
  border: 1px solid var(--zed-border);
  border-radius: var(--zed-radius-sm);
  color: var(--zed-text-muted);
}
html.zed-ux .colorMiniButton:hover,
html.zed-ux .audioMiniButton:hover {
  border-color: var(--zed-border-strong);
  color: var(--zed-text);
}