.data-viewer { --viewer-font: "Segoe UI", system-ui, sans-serif; font-family: var(--viewer-font); }
.data-viewer .workspace { margin-left: 0; }
.data-viewer .topbar { height: 52px; padding: 0 24px; gap: 24px; }
.viewer-brand { color: #24354c; font-size: 18px; font-weight: 700; letter-spacing: -.6px; }
.data-viewer #connection-status { margin-left: auto; font-size: 11px; }
.data-viewer main { padding: 18px 24px; max-width: 2100px; margin: 0 auto; }
.data-viewer .page-heading { margin-bottom: 12px; gap: 16px; }
.data-viewer .page-heading > div:first-child { min-width: 0; }
.data-viewer .page-heading h1 { font-size: 19px; line-height: 1.4; letter-spacing: -.3px; overflow-wrap: anywhere; }
.data-viewer .page-heading .button { padding: 7px 11px; min-height: 34px; font-size: 12px; white-space: nowrap; }
.data-viewer .notice { margin: 0 0 14px; }
.viewer-actions, .viewer-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.viewer-filters { margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.viewer-filters > summary { cursor: pointer; padding: 9px 0 12px; font-size: 12px; color: #304059; }
#viewer-filter-summary { margin-left: 12px; color: #687484; font-weight: 400; }
.viewer-filterbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 8px 0 14px; }
.viewer-filterbar .viewer-help { flex-basis: 100%; margin: 0; }
.viewer-filterbar select[multiple] { min-width: 100px; }
.viewer-filterbar label, .viewer-toolbar label, .viewer-settings-grid label { display: grid; gap: 5px; color: #58687f; font-size: 12px; }
.data-viewer select, .data-viewer input:not([type="checkbox"]):not([type="color"]) { min-width: 0; max-width: 100%; border: 1px solid #ced7e4; border-radius: 5px; padding: 7px 9px; background: #fff; color: #24354c; font: inherit; }
.data-viewer input[type="checkbox"] { accent-color: #245cce; }
.viewer-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.viewer-catalog, .viewer-content, #viewer-panel { min-width: 0; }
.viewer-catalog .panel-heading { padding: 16px; align-items: center; }
#viewer-selected-count { font-size: 11px; color: #627187; white-space: nowrap; }
#viewer-test-search { padding: 0 14px 13px; }
#viewer-test-search > label { display: block; margin-bottom: 6px; color: #58687f; font-size: 12px; }
.search-line { display: flex; gap: 5px; }
.search-line input { width: 100%; }
.search-line .button { padding: 7px; min-height: 34px; }
.catalog-options { display: grid; gap: 8px; margin-top: 10px; color: #58687f; font-size: 11px; }
.catalog-options label { display: flex; align-items: center; gap: 6px; }
.catalog-options select { flex: 1; }
.viewer-test-list { border-top: 1px solid var(--border); max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; }
.viewer-test-choice { display: flex; align-items: start; gap: 8px; padding: 9px 13px; border-bottom: 1px solid #edf0f5; cursor: pointer; }
.viewer-test-choice:hover { background: #f6f8fc; }
.viewer-test-choice.is-selected { background: #edf3ff; }
.viewer-test-choice input { margin-top: 3px; }
.viewer-test-choice > span { min-width: 0; overflow-wrap: anywhere; }
.viewer-test-choice strong { font-size: 13px; color: #24354c; }
.viewer-test-choice small, .viewer-test-choice .test-name { display: block; font-size: 11px; line-height: 1.5; margin-top: 2px; color: #58687f; }
.viewer-test-choice small.health-warning { color: #9c303e; font-weight: 600; }
.viewer-test-choice small.health-clear { color: #236653; }
.viewer-health { border-top: 1px solid var(--border); padding: 12px; }
.viewer-health .button { font-size: 12px; }
.viewer-health > summary { padding: 0; }
.viewer-health[open] > summary { margin-bottom: 12px; }
.viewer-selection-details { padding: 0 12px; }
.viewer-transpose { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; color: #58687f; }
.selected-tests { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px 0; }
.selected-tests button { max-width: 100%; padding: 4px 7px; border-radius: 4px; background: #edf2ff; color: #254c92; font-size: 11px; overflow-wrap: anywhere; }
#viewer-clear-tests { margin: 10px 12px 13px; font-size: 12px; }
.viewer-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; }
.viewer-tabs button { padding: 9px 11px; border-radius: 5px; color: #58687f; font-size: 13px; }
.viewer-tabs button[aria-selected="true"] { color: #245cce; background: #e6edff; font-weight: 650; }
#viewer-panel { padding: 18px; }
.viewer-empty { padding: 25px 8px; color: #58687f; line-height: 1.7; }
.viewer-empty h2 { color: #24354c; font-size: 21px; margin-bottom: 8px; }
.viewer-section + .viewer-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.viewer-section h2, .viewer-section h3 { font-size: 16px; margin: 0 0 10px; color: #24354c; overflow-wrap: anywhere; }
.viewer-help { margin: 9px 0 14px; color: #58687f; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.viewer-selection-note { display: inline-block; border-radius: 4px; padding: 5px 8px; color: #254c92; background: #edf2ff; font-size: 12px; margin: 0 0 10px; }
.viewer-stat-summary { margin: 14px 0 3px; padding: 10px 0; border-top: 1px solid #e9edf4; border-bottom: 1px solid #e9edf4; }
.viewer-stat-row { display: flex; flex-wrap: wrap; gap: 7px 20px; color: #58687f; font-size: 12px; line-height: 1.6; }
.viewer-stat-row + .viewer-stat-row { margin-top: 8px; }
.viewer-stat-row strong { color: #304059; font-variant-numeric: tabular-nums; }
.viewer-stat-label { flex-basis: 100%; }
.viewer-stat-excluded { color: #795514; }
.data-viewer .chart-status:empty { display: none; }
.data-viewer .chart-tools .chart-controls { margin-top: 0; }
.data-viewer .chart-tools .chart-navigation { margin-top: 0; }
.viewer-warning { color: #795514; border-left: 3px solid #c4922e; padding: 8px 10px; background: #fffbef; font-size: 12px; line-height: 1.6; margin: 10px 0; }
.viewer-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0 0 16px; }
.viewer-toolbar input { max-width: 220px; }
.viewer-table-wrap { min-width: 0; max-height: 560px; overflow: auto; position: relative; border: 1px solid #e2e7ef; border-radius: 6px; }
.viewer-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.viewer-table th { position: sticky; top: 0; z-index: 1; color: #58687f; background: #f7f9fc; font-size: 11px; font-weight: 650; padding: 10px 12px; white-space: nowrap; }
.viewer-table td { padding: 10px 12px; border-top: 1px solid #e9edf4; color: #304059; vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
.viewer-table .text-wrap { min-width: 150px; max-width: 300px; white-space: pre-line; overflow-wrap: anywhere; }
.viewer-table button { color: #245cce; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.viewer-table .value-fail { color: #a02c3d; background: #fff0f1; }
.viewer-table .value-warning { color: #805811; background: #fff9e9; }
.viewer-table .value-retired { color: #687484; background: #f0f2f5; }
.viewer-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px; padding: 12px 0; color: #58687f; font-size: 11px; }
.viewer-catalog .viewer-pager { padding: 12px; }
.viewer-pager button { font-size: 11px; }
.viewer-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 12px; margin: 12px 0; }
.viewer-metrics article { padding: 12px; background: #f5f7fb; border-radius: 6px; }
.viewer-metrics small { display: block; color: #58687f; font-size: 11px; }
.viewer-metrics strong { display: block; font-size: 21px; margin-top: 5px; }
.viewer-detail { margin: 9px 0; }
.viewer-detail summary { cursor: pointer; color: #344b70; padding: 7px 0; font-size: 12px; overflow-wrap: anywhere; }
.viewer-detail pre, .viewer-record-bytes { max-height: 350px; overflow: auto; padding: 12px; background: #f6f8fb; color: #304059; border: 1px solid #e2e7ef; border-radius: 5px; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.6 Consolas,monospace; }
.viewer-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; color: #627187; font-size: 11px; }
.viewer-footer button { font-size: 12px; }
.viewer-dialog { width: min(1100px, calc(100vw - 40px)); max-width: none; max-height: 90vh; padding: 25px; overflow: auto; }
.viewer-dialog .dialog-heading { margin-bottom: 16px; }
.viewer-dialog h2 { overflow-wrap: anywhere; }
.viewer-group { padding: 15px; border: 1px solid #dce3ee; border-radius: 7px; margin: 14px 0; }
.viewer-group header, .viewer-group li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.viewer-group header input { flex: 1; }
.viewer-group ol { padding-left: 22px; margin: 12px 0; }
.viewer-group li { padding: 8px 0; border-bottom: 1px solid #edf0f5; }
.viewer-group li span { flex: 1 1 150px; overflow-wrap: anywhere; }
.viewer-group select { width: 100%; margin: 10px 0; }
.viewer-group button { color: #245cce; font-size: 12px; }
.viewer-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.viewer-settings-grid .checkbox-setting { display: flex; align-items: center; gap: 9px; }
.viewer-settings-grid input[type="color"] { width: 55px; height: 30px; border: 1px solid #ced7e4; background: white; }
#viewer-settings-form fieldset { border: 1px solid #dce3ee; border-radius: 6px; padding: 16px; margin: 16px 0; }
#viewer-settings-form legend { padding: 0 7px; font-size: 13px; font-weight: 600; }
.data-viewer :focus-visible { outline: 2px solid #245cce; outline-offset: 3px; }
.data-viewer button:disabled { cursor: default; opacity: .5; }
#viewer-export-dialog { width: min(680px, calc(100vw - 32px)); padding: 25px; }
#viewer-export-dialog fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; border: 1px solid #dce3ee; border-radius: 6px; padding: 15px; margin: 16px 0; }
#viewer-export-dialog legend { padding: 0 6px; font-size: 13px; }
#viewer-export-dialog .export-option { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
#viewer-export-dialog .muted { font-size: 12px; color: #58687f; line-height: 1.6; }
.viewer-downloads { padding: 18px 22px; margin-top: 20px; }
.viewer-downloads h2 { font-size: 16px; margin: 0 0 15px; }
.viewer-downloads a { overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 1180px) { .viewer-layout { grid-template-columns: 210px minmax(0,1fr); gap: 12px; } .data-viewer main { padding: 18px; } #viewer-panel { padding: 16px; } }
@media (max-width: 760px) { .viewer-layout { grid-template-columns: 1fr; } .viewer-test-list { max-height: 150px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .viewer-catalog .panel-heading { padding: 11px 13px; } .catalog-options { display: flex; flex-wrap: wrap; } .data-viewer .workspace { min-height: 100vh; } }
@media (max-width: 520px) { .data-viewer .topbar { padding: 0 12px; gap: 15px; } .data-viewer .topbar .breadcrumb { font-size: 11px; } .data-viewer main { padding: 12px; } .data-viewer .page-heading { gap: 10px; } .data-viewer .page-heading h1 { font-size: 17px; } .viewer-actions { flex-wrap: nowrap; } .viewer-filterbar label { flex: 1 1 120px; } .viewer-filterbar select { width: 100%; } #viewer-filter-summary { display: block; margin-left: 14px; margin-top: 5px; } .viewer-test-list { grid-template-columns: 1fr; max-height: 130px; } #viewer-panel { padding: 13px; } .viewer-tabs button { padding: 8px 9px; font-size: 12px; } .viewer-dialog { width: calc(100vw - 20px); padding: 17px; } .viewer-settings-grid { grid-template-columns: 1fr; } #viewer-export-dialog fieldset { grid-template-columns: 1fr; } }