:root {
  --ui-primary: #5365e9;
  --ui-primary-hover: #4658d8;
  --ui-primary-soft: #eef0ff;
  --ui-surface: #fff;
  --ui-surface-subtle: #f7f9fc;
  --ui-surface-muted: #eef2f7;
  --ui-border: #dfe4ed;
  --ui-border-strong: #cdd5e2;
  --ui-text: #172033;
  --ui-text-secondary: #59657a;
  --ui-muted: #7f899b;
  --ui-success: #198553;
  --ui-success-soft: #e7f7ef;
  --ui-warning: #94620e;
  --ui-warning-soft: #fff4dc;
  --ui-danger: #b83c49;
  --ui-danger-soft: #ffeaed;
  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 11px;
  --ui-control-height: 34px;
  --ui-shadow-popover: 0 18px 48px #17203326;
  --ui-focus: 0 0 0 3px #5365e92e;
}

html { color-scheme: light; scroll-behavior: smooth; }
body { overflow-x: hidden; color: var(--ui-text); }
button, input, select, textarea, summary, a { transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .1s ease; }
button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), summary, a[href] { cursor: pointer; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled, button[aria-busy="true"] { cursor: not-allowed; opacity: .5; }
button[aria-busy="true"] { position: relative; }
button[aria-busy="true"]::before { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; vertical-align: -1px; animation: ui-spin .65s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

:where(button, input, select, textarea, summary, a[href]):focus-visible { outline: 0; box-shadow: var(--ui-focus); }
:where(input, select, textarea):focus { border-color: var(--ui-primary) !important; }
::placeholder { color: #9aa3b3; opacity: 1; }
::selection { color: var(--ui-text); background: #dfe4ff; }

.skipLink { position: fixed; z-index: 9999; top: 8px; left: 12px; padding: 8px 12px; border-radius: var(--ui-radius-md); color: #fff; background: var(--ui-primary); transform: translateY(-150%); }
.skipLink:focus { transform: none; }

body > aside nav button { border: 1px solid transparent; }
body > aside nav button:hover { color: #fff; background: #202a40; }
body > aside nav button.active { border-color: #34405c; background: #27314a; }
body > aside nav button:focus-visible { box-shadow: 0 0 0 3px #8290ff5c; }
body > aside .system { background: #111929; }

body > .shell > header { gap: 18px; }
.headerActions { min-width: 0; }
.headerActions > button,
.steamIdentity > button { min-height: 30px; border-color: var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); color: #25314a; }
.headerActions > button:hover,
.steamIdentity > button:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-subtle); }
.remote { white-space: nowrap; }

.taskWorkspace,
.reviewWorkspace,
.programWorkspace,
.publishWorkspace,
.metricsWorkspace,
.commentsWorkspace,
.operationsWorkspace,
.library { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: 0 1px 1px #17203308; overflow: hidden; }

.workspaceHead { min-height: 58px; padding: 11px 15px !important; border-bottom: 1px solid #e9edf3; background: var(--ui-surface); }
.workspaceHead h2 { margin: 1px 0 0 !important; color: var(--ui-text); font-size: 17px !important; line-height: 1.25; }
.workspaceHead small { color: var(--ui-muted); font-size: 10px !important; }
.workspaceHead > button,
.bridgeState button,
.libraryHead button,
.taskSectionHead button,
.taskActions button,
.taskQueueHead button,
.reviewSummaryActions button,
.reviewFooter button,
.programWorkspace button,
.publishWorkspace button,
.metricsWorkspace button,
.commentsWorkspace button,
.operationsWorkspace button,
dialog button:not(.thumb) { min-height: 32px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); padding: 6px 10px; color: #26324a; background: var(--ui-surface); font-size: 11px; font-weight: 600; line-height: 1.2; }
.workspaceHead > button:hover,
.bridgeState button:hover,
.libraryHead button:hover,
.taskSectionHead button:hover,
.taskActions button:hover,
.taskQueueHead button:hover,
.reviewSummaryActions button:hover,
.reviewFooter button:hover,
.programWorkspace button:hover,
.publishWorkspace button:hover,
.metricsWorkspace button:hover,
.commentsWorkspace button:hover,
.operationsWorkspace button:hover,
dialog button:not(.thumb):hover { border-color: var(--ui-border-strong); background: var(--ui-surface-subtle); }

:where(.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) button.primary,
.taskActions button.primary,
.filterActions .apply { border-color: var(--ui-primary) !important; color: #fff !important; background: var(--ui-primary) !important; }
:where(.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) button.primary:hover,
.taskActions button.primary:hover,
.filterActions .apply:hover { border-color: var(--ui-primary-hover) !important; background: var(--ui-primary-hover) !important; }
:where(.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) button.danger { border-color: #f0cbd0; color: var(--ui-danger); background: #fff; }
:where(.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) button.danger:hover { background: var(--ui-danger-soft); }

:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) input:not([type="checkbox"]):not([type="radio"]),
:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) select,
:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.commentsWorkspace,.operationsWorkspace,dialog) textarea { min-height: var(--ui-control-height); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); padding: 7px 9px; color: var(--ui-text); background: var(--ui-surface); font-size: 11px; }
:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace,dialog) input:disabled,
:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace,dialog) select:disabled,
:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace,dialog) textarea:disabled { color: #8b95a7; background: var(--ui-surface-muted); }
:where(.advanced,.taskWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace,dialog) label { color: var(--ui-text-secondary); }

input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; accent-color: var(--ui-primary); }
fieldset { border-color: var(--ui-border) !important; }
summary { border-radius: var(--ui-radius-sm); }

.empty, .markerEmpty { min-height: 70px; padding: 24px 14px !important; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-muted); background: var(--ui-surface-subtle); text-align: center; }
.assets > .empty, .reviewList > .empty, .editingTaskList > .empty, .metricsVideoList > .empty, .integrationTable > .empty { margin: 8px; }

.status,
.editingTaskStatus,
.publicationStatus,
.sourceBadge,
.qualityBadge,
.serviceState,
.stageBadge,
.trackerItem > span { border-radius: 999px !important; font-weight: 650; }

.asset,
.editingTaskRow,
.reviewSummary,
.programItem,
.publicationCard,
.metricsVideoRow,
.serviceMonitorCard,
.integrationRow,
.trackerItem { transition: background-color .15s ease, border-color .15s ease; }
.asset:hover,
.editingTaskRow:hover,
.reviewSummary:hover,
.programItem:hover,
.metricsVideoRow:hover,
.serviceMonitorCard:hover,
.integrationRow:hover { background-color: #fafbfe; }

.libraryHead { min-height: 64px; padding: 12px 15px; }
.libraryHead h2 { margin-bottom: 2px; font-size: 17px; }
.libraryHead small { font-size: 10px; }
.controls { align-items: center; gap: 6px; }
.controls input { min-height: var(--ui-control-height); border-color: var(--ui-border); border-radius: var(--ui-radius-md); padding: 7px 9px; font-size: 11px; }
.controls button { min-height: var(--ui-control-height); border-color: var(--ui-border); border-radius: var(--ui-radius-md); padding: 6px 9px; font-size: 11px; font-weight: 600; }
.controls button:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-subtle); }
.advanced { gap: 9px; padding: 12px 15px; }
.advanced label { gap: 4px; font-size: 10px; }
.advanced input, .advanced select, .advanced fieldset select { min-height: var(--ui-control-height); padding: 6px 8px; }
.advanced fieldset { border-radius: var(--ui-radius-md); padding: 7px 9px; }
.savedSearches, .chips, .libraryTools { min-height: 42px; padding-left: 15px; padding-right: 15px; }
.pager { min-height: 48px; padding: 8px 15px; border-top: 1px solid #edf0f5; }
.pager button { min-height: 32px; border-color: var(--ui-border); border-radius: var(--ui-radius-md); padding: 6px 10px; background: var(--ui-surface); }
.pager button:not(:disabled):hover { background: var(--ui-surface-subtle); }

.taskComposer,
.taskCandidates,
.reviewEditor,
.programEditor,
.publicationForm,
.progressPanel { background: var(--ui-surface-subtle); }
.taskTagFilters > summary:hover { background: #f3f5f9; }
.taskChoice label:hover { color: var(--ui-text); background: #f1f3ff; }

dialog { border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-popover); }
dialog::backdrop { background: #11182799; backdrop-filter: blur(2px); }
dialog > .close { display: grid; place-items: center; width: 30px; min-height: 30px !important; height: 30px; padding: 0 !important; border-radius: 50% !important; font-size: 18px !important; }

.toast { z-index: 10000; max-width: min(420px, calc(100vw - 30px)); padding: 10px 14px; border: 1px solid #34415c; border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-popover); font-size: 12px; pointer-events: none; }
.toast[data-tone="success"] { border-color: #48a77e; background: #176642; }
.toast[data-tone="error"] { border-color: #df7a84; background: #8f2d38; }

@media (max-width: 1100px) {
  body > aside nav button { text-align: center; }
  body > aside nav button small { display: none; }
  body > .shell > header { padding-left: 18px; padding-right: 18px; }
  .headerActions { gap: 5px; }
  .headerActions .steamIdentity span { display: none; }
}

@media (max-width: 720px) {
  :root { --ui-control-height: 36px; }
  body > .shell > header { height: auto; min-height: 76px; align-items: flex-start; flex-direction: column; }
  .headerActions { width: 100%; flex-wrap: wrap; }
  .workspaceHead { align-items: flex-start; gap: 8px; }
  .libraryHead, .controls { width: 100%; }
  .controls { align-items: stretch; }
  .controls input { width: 100%; }
  .taskWorkspace, .reviewWorkspace, .programWorkspace, .publishWorkspace, .metricsWorkspace, .operationsWorkspace, .library { border-radius: 9px; }
  .toast { right: 15px; bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Playback source identity: all browser playback is a low-bitrate proxy, never the NAS master. */
.proxyPlayerFrame { position: relative; overflow: hidden; background: #000; }
.quickPreview .proxyPlayerFrame { border-radius: 16px 16px 0 0; }
.quickPreview .proxyPlayerFrame video { display: block; border-radius: 0; }
.playbackSourceBadge {
  position: absolute; z-index: 3; top: 14px; left: 14px;
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid #ffffff42; border-radius: 999px;
  background: #0c1220d9; color: #fff; box-shadow: 0 5px 18px #0005;
  backdrop-filter: blur(8px); pointer-events: none;
  font-size: 11px; letter-spacing: .03em;
}
.playbackSourceBadge b { padding: 2px 6px; border-radius: 999px; background: #b6f24a; color: #15220a; font-size: 9px; letter-spacing: .11em; }
.proxyOpeningCue {
  position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; gap: 8px;
  text-align: center; background: radial-gradient(circle at 50% 42%, #26334acc, #05070bee 72%);
  color: #fff; opacity: 0; visibility: hidden; pointer-events: none;
}
.proxyOpeningCue b { font-size: clamp(22px, 4vw, 44px); letter-spacing: .08em; }
.proxyOpeningCue span { color: #d7deeb; font-size: clamp(12px, 1.6vw, 17px); letter-spacing: .06em; }
.proxyOpeningCue.show { visibility: visible; animation: proxyOpeningCue 2.8s ease both; }
@keyframes proxyOpeningCue { 0% { opacity: 0; } 12%, 68% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.playerPanel { position: relative; }
.timelineDialog[open] .playerPanel::before {
  content: 'PROXY  ·  预览代理'; position: absolute; z-index: 4; top: 38px; left: 38px;
  padding: 7px 11px; border: 1px solid #ffffff42; border-radius: 999px;
  background: #0c1220d9; color: #fff; box-shadow: 0 5px 18px #0005;
  backdrop-filter: blur(8px); pointer-events: none;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.timelineDialog[open] .playerPanel::after {
  content: 'NotGG PROXY\A低码率预览 · 非原片'; white-space: pre;
  position: absolute; z-index: 3; top: 24px; left: 24px; right: 24px;
  display: grid; place-content: center; height: min(63vh, calc((100vw - 470px) * .5625)); min-height: 260px;
  border-radius: 12px; text-align: center;
  background: radial-gradient(circle at 50% 42%, #26334acc, #05070bee 72%); color: #fff;
  opacity: 0; visibility: hidden; pointer-events: none;
  font-size: clamp(14px, 1.6vw, 18px); font-weight: 600; line-height: 2; letter-spacing: .06em;
}
.timelineDialog[open] .playerPanel.proxyOpeningActive::after { visibility: visible; animation: proxyOpeningCue 2.8s ease both; }

@media (max-width: 1000px) {
  .playerPanel::after { height: auto; aspect-ratio: 16/9; min-height: 0; }
  .playerPanel::before { top: 36px; left: 36px; }
}
@media (max-width: 620px) {
  .playbackSourceBadge { top: 10px; left: 10px; padding: 5px 8px; }
  .playbackSourceBadge span { display: none; }
}


/* v1.52.4 readable typography baseline across all operator workspaces */
:root {
  --ui-font-caption: 12px;
  --ui-font-control: 13px;
  --ui-font-body: 14px;
  --ui-font-card-title: 16px;
  --ui-font-workspace-title: 20px;
}

.workspaceHead h2, .libraryHead h2 { font-size: var(--ui-font-workspace-title) !important; }
.workspaceHead small, .libraryHead small { font-size: var(--ui-font-caption) !important; }
.workspaceHead > button, .libraryHead button, .controls button,
:where(.recordingWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace) button { font-size: var(--ui-font-control) !important; }
.controls input, .advanced label,
:where(.recordingWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: var(--ui-font-control) !important; }
.advanced label,
:where(.recordingWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace) label { font-size: var(--ui-font-caption) !important; }
:where(.recordingWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace) small { font-size: var(--ui-font-caption) !important; }
:where(.recordingWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace) :where(p,li,dd) { font-size: var(--ui-font-body) !important; }
:where(.recordingWorkspace,.reviewWorkspace,.programWorkspace,.publishWorkspace,.metricsWorkspace,.operationsWorkspace) :where(h3,h4) { font-size: var(--ui-font-card-title) !important; }

/* Asset overview keeps the dense layout, but no operational text falls below the shared baseline. */
.assetMode header small, .assetStatusGrid small, .assetMode .metrics small, .assetMode .metrics span,
.assetMode .savedSearches > small, .assetMode .chips > small, .assetMode .libraryTools small,
.assetGrid .tech, .assetGrid .tech small, .assetList .tech { font-size: var(--ui-font-caption) !important; }
.assetStatusGrid strong, .assetMode .metrics article > small { font-size: var(--ui-font-body) !important; }
.assetStatusGrid .enrichmentStats small, .assetStatusGrid .qualityScore small,
.assetStatusGrid .scanner > b, .assetMode .chips span, .assetGrid .meta b, .assetList .meta b,
.assetGrid .status, .assetList .status, .asset .reconciliationReason { font-size: var(--ui-font-caption) !important; }
.assetMode .controls input, .assetMode .controls button, .assetMode .libraryTools select,
.assetGrid .assetAction button, .assetList .assetAction button, .assetAction .sourceDownload { font-size: var(--ui-font-control) !important; }
.assetGrid .meta h3, .assetList .meta h3 { font-size: var(--ui-font-card-title) !important; }
.assetGrid .meta p, .assetList .meta p { font-size: var(--ui-font-body) !important; }

/* Recording dispatch and immutable logs. */
.recordingTaskRow b, .recordingMeta b, .recordingCheck, .recordingLog, .recordingIngestLogRow,
.recorderNode, .recordingAssignmentRow, .dispatchSectionHead, .recordingDispatchHistory article,
.recorderNodeCredential { font-size: var(--ui-font-body) !important; }
.recorderNode button, .recorderNodeForm label, .recorderNodeToken code, .recordingIngestLogRow code,
.recordingBadge, .dispatchState { font-size: var(--ui-font-caption) !important; }

/* Review, programme and publication cards. */
.reviewLegend span, .reviewSummaryMain p, .reviewSummaryMeta span, .reviewStatus,
.programChoice small, .programStats span, .programItem p, .programItem .sourceBadge,
.publishWorkspace .publicationStatus, .publishWorkspace .publicationMeta,
.publishWorkspace .publicationCard > div:first-child small { font-size: var(--ui-font-caption) !important; }
.reviewSummaryMain h3, .programChoice b, .programItem h4,
.publishWorkspace .publicationHead h3, .publishWorkspace .publicationCard h4 { font-size: var(--ui-font-card-title) !important; }

/* Metrics and system monitoring are tables, not miniature dashboards. */
.metricsWorkspace .metricsSyncStatus, .metricsWorkspace .metricsSummary small, .metricsWorkspace .metricsSummary span,
.metricsWorkspace .metricsSectionHead small, .metricsWorkspace .metricsValue small, .metricsWorkspace .metricsSyncAction small,
.operationsWorkspace .environmentBanner, .operationsWorkspace .summaryTile small, .operationsWorkspace .summaryTile span,
.operationsWorkspace .operationsSectionHead small, .operationsWorkspace .integrationFilters button,
.operationsWorkspace .trackerItem small, .operationsWorkspace .trackerItem > em, .operationsWorkspace .trackerItem > span,
.integrationTableHead, .integrationIdentity em, .integrationBusiness small, .integrationPhase small,
.integrationCompletion small, .integrationRuntime small, .integrationPhase > span, .integrationRuntime > span,
.integrationDetails small, .integrationDetails p, .integrationDetails code, .integrationDetails a, .integrationDetails span,
.serviceMonitorCard > div small, .serviceMonitorCard > div em, .serviceMonitorCard > small,
.monitorAlert small, .pipelineCard span, .pipelineCard small { font-size: var(--ui-font-caption) !important; }
.metricsWorkspace .metricsVideoTitle h4, .operationsWorkspace .operationsSectionHead h3,
.serviceMonitorCard > div b, .monitorAlert b, .pipelineCard b, .trackerItem b { font-size: var(--ui-font-card-title) !important; }
.metricsWorkspace .metricsVideoTitle p, .serviceMonitorCard > p, .monitorAlert span { font-size: var(--ui-font-body) !important; }
.metricsWorkspace .metricsValue b, .integrationCompletion > b, .pipelineCard footer strong { font-size: var(--ui-font-body) !important; }

/* v1.55.10 content-sized asset filters: short values no longer consume full columns. */
.advancedCompact { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: end; gap: 6px 8px; padding: 10px 14px 9px; overflow: visible; }
.advancedCompact .filterSpan1 { grid-column: span 1; }
.advancedCompact .filterSpan2 { grid-column: span 2; }
.advancedCompact .filterSpan3 { grid-column: span 3; }
.advancedCompact .filterSpan4 { grid-column: span 4; }
.advancedCompact .filterField { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 4px; margin: 0; color: var(--ui-text-secondary); font-size: var(--ui-font-caption) !important; }
.advancedCompact .filterField > span, .advancedCompact .compactMultiField > span { display: flex; min-height: 17px; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; }
.advancedCompact .filterField > span small, .advancedCompact .compactMultiField > span small { color: #8a94a8; font-size: 11px; font-weight: 400; }
.advancedCompact input, .advancedCompact select, .advancedCompact .compactMulti summary { height: 36px; min-height: 36px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-font-control) !important; }
.advancedCompact input, .advancedCompact select { padding: 6px 8px; }
.advancedCompact .compactMulti { position: relative; min-width: 0; }
.advancedCompact .compactMulti summary { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 30px 6px 9px; cursor: pointer; list-style: none; user-select: none; }
.advancedCompact .compactMulti summary::-webkit-details-marker { display: none; }
.advancedCompact .compactMulti summary::after { position: absolute; right: 10px; content: "⌄"; color: #667187; font-size: 14px; }
.advancedCompact .compactMulti summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advancedCompact .compactMulti summary > b { display: inline-grid; flex: none; min-width: 19px; height: 19px; place-items: center; border-radius: 99px; background: #202a40; color: #fff; font-size: 10px; }
.advancedCompact .compactMulti summary > b[hidden] { display: none !important; }
.advancedCompact .compactMulti[open] { z-index: 12; }
.advancedCompact .compactMulti[open] summary { border-color: #7c8cff; box-shadow: 0 0 0 3px #5b6cff1a; }
.advancedCompact .compactMulti[open] summary::after { content: "⌃"; }
.advancedCompact .compactMulti select { position: absolute; z-index: 14; top: calc(100% + 5px); left: 0; width: max(100%, 260px); height: auto !important; min-height: 76px; max-height: 220px; padding: 5px; border-color: #b8c1d2; background: #fff; box-shadow: 0 14px 34px #17203324; }
.advancedCompact .compactMulti #assetStageFilter { min-height: 68px; }
.advancedCompact .compactMulti option { padding: 6px 8px; border-radius: 5px; }
.advancedCompact .matchupField { grid-column: span 4; min-width: 0; height: 53px; min-height: 53px; padding: 6px 8px; }
.advancedCompact .matchupField legend { padding: 0 4px; }
.advancedCompact .matchupField select { height: 34px; min-height: 34px; }
.advancedCompact .filterFooter { display: contents; }
.advancedCompact .filterFooter .sortField { grid-column: span 2; }
.advancedCompact .filterActions { grid-column: span 4; align-self: end; align-items: end; justify-content: flex-end; gap: 7px; }
.advancedCompact .filterActions button { height: 36px; min-height: 36px; padding: 6px 13px; font-size: var(--ui-font-control); }
@media (max-width: 1180px) { .advancedCompact { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 900px) { .advancedCompact { grid-template-columns: repeat(4, minmax(0, 1fr)); } .advancedCompact .filterActions { grid-column: span 2; } }
@media (max-width: 620px) { .advancedCompact { grid-template-columns: 1fr; } .advancedCompact :where(.filterSpan1,.filterSpan2,.filterSpan3,.filterSpan4,.matchupField,.filterFooter .sortField,.filterActions) { grid-column: span 1; } .advancedCompact .filterActions button { flex: 1; } .advancedCompact .compactMulti select { width: 100%; } }