/**
 * Network Quality Explorer Workbench
 * Visual owner for the resource navigator + single diagnostic workbench.
 * All surfaces and colors consume existing theme/glass semantic tokens.
 */

.network-quality-page .nq-explorer-root {
    width: 100%;
    min-width: 0;
}

.network-quality-page .nq-explorer-root[data-overview-empty="true"] .nq-explorer-shell { display: block; }
.network-quality-page .nq-explorer-root[data-overview-empty="true"] .nq-explorer-nav,
.network-quality-page .nq-explorer-root[data-overview-empty="true"] .nq-explorer-nav-handle,
.network-quality-page .nq-explorer-root[data-overview-empty="true"] .nq-explorer-viewbar,
.network-quality-page .nq-explorer-root[data-overview-empty="true"] .nq-explorer-panel,
.network-quality-page [data-role="empty-refresh"][hidden] { display: none; }

.network-quality-page .nq-explorer-shell {
    --nq-explorer-nav-width: 21.5rem;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--nq-explorer-nav-width)) minmax(0, 1fr);
    gap: 0.875rem;
    align-items: stretch;
    min-width: 0;
    transition: grid-template-columns var(--transition-normal), gap var(--transition-normal);
}

.network-quality-page .nq-explorer-nav,
.network-quality-page .nq-explorer-workspace {
    min-width: 0;
    border-color: var(--color-border);
}

.network-quality-page .nq-explorer-nav {
    position: sticky;
    top: 0.875rem;
    height: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.network-quality-page .nq-explorer-nav-head {
    flex: 0 0 auto;
    padding: 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.network-quality-page .nq-explorer-nav-heading,
.network-quality-page .nq-explorer-workspace-head,
.network-quality-page .nq-explorer-section-head,
.network-quality-page .nq-explorer-related-head,
.network-quality-page .nq-explorer-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.network-quality-page .nq-explorer-eyebrow {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
}

.network-quality-page .nq-explorer-nav-title {
    margin-top: 0.2rem;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
}

.network-quality-page .nq-explorer-icon-control {
    display: inline-grid;
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-small-element-surface);
    color: var(--color-text-secondary);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.network-quality-page .nq-explorer-icon-control:hover,
.network-quality-page .nq-explorer-icon-control:focus-visible {
    border-color: var(--color-border-accent);
    background: var(--color-small-element-hover-surface);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-nav-tabs {
    display: grid;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    background: var(--color-inner-surface);
}

.network-quality-page .nq-explorer-nav-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.75rem;
}

.network-quality-page .nq-explorer-nav-tabs button {
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.network-quality-page .nq-explorer-nav-tabs button {
    min-height: 2rem;
}

.network-quality-page .nq-explorer-nav-tabs button[data-state="active"] {
    background: var(--color-inner-active-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

.network-quality-page .nq-explorer-nav-search,
.network-quality-page .nq-explorer-manager-search {
    position: relative;
    display: block;
}

.network-quality-page .nq-explorer-nav-search {
    margin-top: 0.625rem;
}

.network-quality-page .nq-explorer-nav-search > i,
.network-quality-page .nq-explorer-manager-search > i {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.network-quality-page .nq-explorer-nav-search input,
.network-quality-page .nq-explorer-manager-search input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    outline: 0;
    background: var(--color-small-element-surface);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.network-quality-page .nq-explorer-nav-search input {
    height: 2.25rem;
    padding: 0 2.2rem;
    font-size: 0.75rem;
}

.network-quality-page .nq-explorer-manager-search input {
    height: 2.2rem;
    padding: 0 0.75rem 0 2rem;
    font-size: 0.75rem;
}

.network-quality-page .nq-explorer-nav-search input:focus,
.network-quality-page .nq-explorer-manager-search input:focus {
    border-color: var(--color-border-accent);
    background: var(--color-inner-active-surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.network-quality-page .nq-explorer-nav-search > button {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    transform: translateY(-50%);
    place-items: center;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-secondary);
}

.network-quality-page .nq-explorer-nav-search > button:hover {
    background: var(--color-small-element-hover-surface);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-focus-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--color-border);
}

.network-quality-page .nq-explorer-focus-back {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-small-element-surface);
    color: var(--color-text-secondary);
}

.network-quality-page .nq-explorer-focus-head strong,
.network-quality-page .nq-explorer-focus-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-focus-head strong {
    color: var(--color-text-primary);
    font-size: 0.75rem;
}

.network-quality-page .nq-explorer-focus-head span {
    margin-top: 0.15rem;
    color: var(--color-text-secondary);
    font-size: 0.65rem;
}

.network-quality-page .nq-explorer-nav-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.45rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.network-quality-page .nq-explorer-nav-foot {
    flex: 0 0 auto;
    padding: 0.55rem 0.8rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
}

.network-quality-page .nq-explorer-resource-group + .nq-explorer-resource-group,
.network-quality-page .nq-explorer-list-section + .nq-explorer-list-section {
    margin-top: 0.2rem;
}

.network-quality-page .nq-explorer-resource-row,
.network-quality-page .nq-explorer-target-row,
.network-quality-page .nq-explorer-target-catalog-row,
.network-quality-page .nq-explorer-issue-row,
.network-quality-page .nq-explorer-related-row {
    width: 100%;
    border: 1px solid transparent;
    color: var(--color-text-primary);
    text-align: left;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.network-quality-page .nq-explorer-resource-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) 5.2rem;
    gap: 0.45rem;
    align-items: center;
    min-height: 3.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.65rem;
    background: transparent;
    cursor: pointer;
}

.network-quality-page .nq-explorer-resource-row:hover,
.network-quality-page .nq-explorer-target-row:hover,
.network-quality-page .nq-explorer-target-catalog-row:hover,
.network-quality-page .nq-explorer-issue-row:hover,
.network-quality-page .nq-explorer-related-row:hover {
    background: var(--color-small-element-hover-surface);
}

.network-quality-page .nq-explorer-resource-group[data-selected="true"] > .nq-explorer-resource-row,
.network-quality-page .nq-explorer-target-row[data-selected="true"],
.network-quality-page .nq-explorer-target-catalog-row[data-selected="true"],
.network-quality-page .nq-explorer-related-row[data-selected="true"] {
    border-color: var(--color-border-accent);
    background: var(--color-inner-active-surface);
}

.network-quality-page .nq-explorer-expand-control {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-secondary);
}

.network-quality-page .nq-explorer-expand-control:hover {
    background: var(--color-small-element-hover-surface);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: var(--color-network-quality-no-data);
}

.network-quality-page .nq-explorer-status-dot[data-severity="good"] {
    background: var(--color-network-quality-good);
}

.network-quality-page .nq-explorer-status-dot[data-severity="warning"] {
    background: var(--color-network-quality-warning);
}

.network-quality-page .nq-explorer-status-dot[data-severity="critical"] {
    background: var(--color-network-quality-critical);
}

.network-quality-page .nq-explorer-resource-copy,
.network-quality-page .nq-explorer-target-copy,
.network-quality-page .nq-explorer-related-copy {
    min-width: 0;
}

.network-quality-page .nq-explorer-resource-copy strong,
.network-quality-page .nq-explorer-resource-copy span,
.network-quality-page .nq-explorer-target-copy strong,
.network-quality-page .nq-explorer-target-copy small,
.network-quality-page .nq-explorer-related-copy strong,
.network-quality-page .nq-explorer-related-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-resource-copy strong,
.network-quality-page .nq-explorer-target-copy strong,
.network-quality-page .nq-explorer-related-copy strong {
    font-size: 0.76rem;
    font-weight: 650;
}

.network-quality-page .nq-explorer-resource-copy span,
.network-quality-page .nq-explorer-target-copy small,
.network-quality-page .nq-explorer-related-copy small {
    margin-top: 0.18rem;
    color: var(--color-text-secondary);
    font-size: 0.64rem;
    font-weight: 500;
}

.network-quality-page .nq-explorer-resource-spark,
.network-quality-page .nq-explorer-target-spark,
.network-quality-page .nq-explorer-related-spark {
    color: var(--nq-member-color, var(--color-network-quality-no-data));
}

.network-quality-page .nq-explorer-resource-group[data-severity="good"] .nq-explorer-resource-spark,
.network-quality-page .nq-explorer-target-spark[data-severity="good"] {
    color: var(--color-network-quality-good);
}

.network-quality-page .nq-explorer-resource-group[data-severity="warning"] .nq-explorer-resource-spark,
.network-quality-page .nq-explorer-target-spark[data-severity="warning"] {
    color: var(--color-network-quality-warning);
}

.network-quality-page .nq-explorer-resource-group[data-severity="critical"] .nq-explorer-resource-spark,
.network-quality-page .nq-explorer-target-spark[data-severity="critical"] {
    color: var(--color-network-quality-critical);
}

.network-quality-page .nq-explorer-spark {
    display: block;
    width: 100%;
    height: 1.5rem;
}

.network-quality-page .nq-explorer-spark polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.network-quality-page .nq-explorer-spark-empty {
    display: block;
    color: var(--color-text-secondary);
    text-align: center;
    font-size: 0.7rem;
}

.network-quality-page .nq-explorer-inline-targets {
    margin: 0.15rem 0.3rem 0.4rem 1.8rem;
    padding-left: 0.45rem;
    border-left: 1px solid var(--color-border);
}

.network-quality-page .nq-explorer-target-row,
.network-quality-page .nq-explorer-target-catalog-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 4.6rem;
    gap: 0.45rem;
    align-items: center;
    min-height: 2.95rem;
    padding: 0.42rem 0.5rem;
    border-radius: 0.6rem;
    background: transparent;
}

.network-quality-page .nq-explorer-target-value,
.network-quality-page .nq-explorer-related-latency {
    color: var(--color-text-primary);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-list-section-label {
    padding: 0.5rem 0.55rem 0.3rem;
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 650;
}

.network-quality-page .nq-explorer-issue-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    min-height: 3rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.6rem;
    background: transparent;
}

.network-quality-page .nq-explorer-issue-row strong,
.network-quality-page .nq-explorer-issue-row small {
    display: block;
}

.network-quality-page .nq-explorer-issue-row strong {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-issue-row small {
    margin-top: 0.18rem;
    color: var(--color-text-secondary);
    font-size: 0.64rem;
}

.network-quality-page .nq-explorer-nav-empty,
.network-quality-page .nq-explorer-related-empty {
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

.network-quality-page .nq-explorer-workspace {
    position: relative;
    overflow: hidden;
}

.network-quality-page .nq-explorer-workspace-head {
    align-items: flex-start;
    padding: 1rem 1.125rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
}

.network-quality-page .nq-explorer-workspace-title-wrap {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.7rem;
}

.network-quality-page .nq-explorer-workspace-title-wrap h2 {
    max-width: min(58vw, 46rem);
    margin: 0.2rem 0 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 720;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-scope-sub {
    max-width: min(58vw, 52rem);
    margin-top: 0.3rem;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-scope-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.network-quality-page .nq-explorer-scope-metric {
    min-width: 5.65rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-inner-surface);
}

.network-quality-page .nq-explorer-scope-metric span,
.network-quality-page .nq-explorer-scope-metric strong {
    display: block;
}

.network-quality-page .nq-explorer-scope-metric span {
    color: var(--color-text-secondary);
    font-size: 0.6rem;
}

.network-quality-page .nq-explorer-scope-metric strong {
    margin-top: 0.16rem;
    color: var(--color-text-primary);
    font-size: 0.83rem;
    font-variant-numeric: tabular-nums;
}

.network-quality-page .nq-explorer-scope-metric[data-tone="warning"] strong,
.network-quality-page .nq-explorer-scope-metric[data-tone="warning"] {
    color: var(--color-network-quality-warning);
}

.network-quality-page .nq-explorer-scope-metric[data-tone="critical"] strong,
.network-quality-page .nq-explorer-scope-metric[data-tone="critical"] {
    color: var(--color-network-quality-critical);
}

.network-quality-page .nq-explorer-scope-metric[data-tone="good"] strong,
.network-quality-page .nq-explorer-scope-metric[data-tone="good"] {
    color: var(--color-network-quality-good);
}

.network-quality-page .nq-explorer-viewbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.75rem 1.125rem 0;
}

.network-quality-page .nq-explorer-resource-toggle {
    display: inline-flex;
    min-height: 2.125rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-small-element-surface);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.network-quality-page .nq-explorer-resource-toggle:hover,
.network-quality-page .nq-explorer-resource-toggle:focus-visible {
    border-color: var(--color-border-accent);
    background: var(--color-small-element-hover-surface);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-resource-toggle:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.network-quality-page .nq-explorer-resource-toggle[data-state="active"] {
    border-color: var(--color-border-accent);
    background: var(--color-inner-active-surface);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-nav-handle {
    display: none;
}

.network-quality-page .nq-explorer-panel {
    min-width: 0;
    padding: 0.8rem 1.125rem 1.125rem;
}

.network-quality-page .nq-explorer-chart-toolbar {
    min-height: 2.4rem;
}

.network-quality-page .nq-explorer-chart-caption,
.network-quality-page .nq-explorer-section-title {
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 680;
}

.network-quality-page .nq-explorer-chart-heading {
    min-width: 0;
}

.network-quality-page .nq-explorer-chart-summary {
    margin-top: 0.2rem;
    color: var(--color-text-secondary);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.network-quality-page .nq-explorer-chart-summary[data-tone="good"] {
    color: var(--color-network-quality-good);
}

.network-quality-page .nq-explorer-chart-summary[data-tone="warning"] {
    color: var(--color-network-quality-warning);
}

.network-quality-page .nq-explorer-chart-summary[data-tone="critical"] {
    color: var(--color-network-quality-critical);
}

.network-quality-page .nq-explorer-chart-actions,
.network-quality-page .nq-explorer-manager-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.network-quality-page .nq-explorer-chart-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: 13.5rem;
}

.network-quality-page .nq-explorer-line-count,
.network-quality-page .nq-explorer-section-sub,
.network-quality-page .nq-explorer-related-head span,
.network-quality-page .nq-explorer-manager-foot,
.network-quality-page .nq-explorer-diagnosis-note {
    color: var(--color-text-secondary);
    font-size: 0.65rem;
}

.network-quality-page .nq-explorer-chart-wrap {
    position: relative;
}

.network-quality-page .nq-explorer-chart {
    width: 100%;
    min-height: 27rem;
    margin-top: 0.35rem;
    transition: height var(--transition-normal);
}

.network-quality-page .nq-explorer-chart-hover-label {
    position: absolute;
    z-index: 3;
    left: var(--nq-chart-hover-x, 1rem);
    top: var(--nq-chart-hover-y, 1rem);
    max-width: min(15rem, 70%);
    padding: 0.3rem 0.48rem;
    transform: translate(-50%, calc(-100% - 0.5rem));
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: var(--color-overlay-surface);
    color: var(--color-text-primary);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.2;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-related {
    min-width: 0;
    margin-top: 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.network-quality-page .nq-explorer-related-list {
    --nq-legend-gap: 0.35rem;
    --nq-legend-card-min: 11.5rem;
    --nq-legend-card-max: 15.5rem;
    --nq-legend-card-width: var(--nq-legend-card-min);
    --nq-legend-track-width: 100%;
    display: grid;
    gap: var(--nq-legend-gap);
    margin-top: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.1rem;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.network-quality-page .nq-explorer-related-track {
    display: flex;
    width: var(--nq-legend-track-width);
    min-width: 100%;
    justify-content: center;
    gap: var(--nq-legend-gap);
}

.network-quality-page .nq-explorer-related-row {
    display: grid;
    flex: 0 0 var(--nq-legend-card-width);
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    width: var(--nq-legend-card-width);
    min-width: 0;
    min-height: 2.55rem;
    padding: 0.38rem 0.52rem;
    border-color: var(--color-border);
    border-radius: 0.62rem;
    background: var(--color-inner-surface);
    scroll-snap-align: start;
}

.network-quality-page .nq-explorer-member-swatch {
    width: 1rem;
    height: 0.18rem;
    border-radius: 9999px;
    background: var(--nq-member-color, var(--color-network-quality-no-data));
}

.network-quality-page .nq-explorer-related-row[data-enabled="false"] {
    opacity: 0.64;
}

.network-quality-page .nq-explorer-related-row[data-focused="true"],
.network-quality-page .nq-explorer-related-row[data-hovered="true"] {
    border-color: var(--color-border-accent);
    background: var(--color-inner-active-surface);
}

.network-quality-page .nq-explorer-honest-empty {
    display: flex;
    min-height: 18rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-text-secondary);
    text-align: left;
}

.network-quality-page .nq-explorer-honest-empty > i {
    font-size: 1.8rem;
}

.network-quality-page .nq-explorer-honest-empty strong,
.network-quality-page .nq-explorer-honest-empty span {
    display: block;
}

.network-quality-page .nq-explorer-honest-empty strong {
    color: var(--color-text-primary);
    font-size: 0.82rem;
}

.network-quality-page .nq-explorer-honest-empty span {
    max-width: 30rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.6;
}

.network-quality-page .nq-explorer-manager-search {
    margin-top: 0;
}

.network-quality-page .nq-explorer-manager-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.network-quality-page .nq-explorer-manager-preset {
    display: inline-flex;
    min-width: 0;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.network-quality-page .nq-explorer-manager-preset:hover,
.network-quality-page .nq-explorer-manager-preset[aria-pressed="true"] {
    border-color: var(--color-border-accent);
    background: var(--color-inner-active-surface);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-manager-preset:focus-visible {
    outline: 2px solid var(--color-border-accent);
    outline-offset: 2px;
}

.network-quality-page .nq-explorer-manager-list {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.55rem;
}

.network-quality-page .nq-explorer-manager-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    min-height: 2.65rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.55rem;
    cursor: pointer;
}

.network-quality-page .nq-explorer-manager-row:hover {
    background: var(--color-small-element-hover-surface);
}

.network-quality-page .nq-explorer-manager-row input {
    accent-color: var(--color-accent);
}

.network-quality-page .nq-explorer-manager-row strong,
.network-quality-page .nq-explorer-manager-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-quality-page .nq-explorer-manager-row strong {
    font-size: 0.72rem;
}

.network-quality-page .nq-explorer-manager-row small {
    margin-top: 0.14rem;
    color: var(--color-text-secondary);
    font-size: 0.63rem;
}

.network-quality-page .nq-explorer-manager-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border);
}

.network-quality-page .nq-explorer-diagnosis-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 0.8rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-inner-surface);
}

.network-quality-page .nq-explorer-diagnosis-result strong {
    font-size: 0.78rem;
}

.network-quality-page .nq-explorer-diagnosis-result p {
    margin: 0.3rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    line-height: 1.55;
}

.network-quality-page .nq-explorer-diagnosis-note {
    margin-top: 0.55rem;
}

.nq-explorer-peek {
    position: fixed;
    z-index: 90;
    width: 22.5rem;
    max-width: calc(100vw - 1.25rem);
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    color: var(--color-text-primary);
    box-shadow: var(--shadow-lg);
}

.nq-explorer-peek-head strong,
.nq-explorer-peek-head span {
    display: block;
}

.nq-explorer-peek-head strong {
    font-size: 0.78rem;
}

.nq-explorer-peek-head span {
    margin-top: 0.16rem;
    color: var(--color-text-secondary);
    font-size: 0.64rem;
}

.nq-explorer-peek-list {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.55rem;
}

.nq-explorer-peek-list button {
    display: grid;
    grid-template-columns: minmax(4.5rem, 1fr) 4.6rem 3.15rem 2.65rem;
    gap: 0.35rem;
    align-items: center;
    min-height: 2.15rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    text-align: left;
}

.nq-explorer-peek-list button:hover {
    background: var(--color-small-element-hover-surface);
}

.nq-explorer-peek-target {
    overflow: hidden;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nq-explorer-peek-spark {
    min-width: 0;
    color: var(--nq-member-color, var(--color-accent));
}

.nq-explorer-peek-spark .nq-explorer-spark {
    display: block;
    width: 100%;
    height: 1.45rem;
}

.nq-explorer-peek-spark .nq-explorer-spark polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.nq-explorer-peek-spark .nq-explorer-spark-empty {
    display: block;
    color: var(--color-text-secondary);
    text-align: center;
}

.nq-explorer-peek-list button b {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nq-explorer-peek-list button em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.nq-explorer-peek-all {
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.48rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-small-element-surface);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
}

.nq-explorer-peek-all:hover {
    border-color: var(--color-border-accent);
    color: var(--color-text-primary);
}

.network-quality-page .nq-explorer-mobile-backdrop {
    position: fixed;
    z-index: 64;
    inset: 0;
    background: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
    backdrop-filter: blur(2px);
}

.nq-chart-tooltip-time {
    margin-bottom: 0.3rem;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
}

.nq-chart-tooltip-row[data-focused="true"] span {
    color: var(--color-accent);
    font-weight: 650;
}

.nq-chart-tooltip-row {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto auto;
    gap: 0.65rem;
    align-items: center;
    min-width: 16rem;
    padding: 0.15rem 0;
}

.nq-chart-tooltip-row span {
    overflow: hidden;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nq-chart-tooltip-row b {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.nq-chart-tooltip-row em {
    color: var(--color-text-secondary);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.nq-chart-tooltip-note {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
}

@media (max-width: 1199px) {
    .network-quality-page .nq-explorer-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .network-quality-page .nq-explorer-nav {
        position: fixed;
        z-index: 70;
        top: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: min(22rem, calc(100vw - 1.5rem));
        height: auto;
        min-height: 0;
        transform: translateX(calc(-100% - 1rem));
        transition: transform var(--transition-normal);
    }

    .network-quality-page .nq-explorer-shell[data-mobile-nav-open="true"] .nq-explorer-nav {
        transform: translateX(0);
    }

    .network-quality-page .nq-explorer-scope-sub,
    .network-quality-page .nq-explorer-workspace-title-wrap h2 {
        max-width: 55vw;
    }

    .nq-explorer-peek {
        display: none;
    }
}

@media (min-width: 1200px) {
    .network-quality-page .nq-explorer-shell {
        grid-auto-rows: minmax(36rem, auto);
    }

    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] {
        grid-template-columns: 0 minmax(0, 1fr);
        gap: 0;
    }

    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] .nq-explorer-nav {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] .nq-explorer-nav-handle {
        position: absolute;
        z-index: 4;
        top: 1.25rem;
        left: calc(-1.5rem + 1px);
        display: inline-flex;
        width: 1.5rem;
        height: 3.5rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border-accent);
        border-right: 0;
        border-radius: 0.75rem 0 0 0.75rem;
        background: var(--color-card-surface);
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    }

    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] .nq-explorer-nav-handle > i {
        font-size: 1rem;
    }

    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] .nq-explorer-nav-handle > span {
        display: none;
    }

    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] .nq-explorer-nav-handle:hover,
    .network-quality-page .nq-explorer-shell[data-nav-collapsed="true"] .nq-explorer-nav-handle:focus-visible {
        border-color: var(--color-accent);
        outline: 0;
        background: var(--color-small-element-hover-surface);
        color: var(--color-text-primary);
    }
}

@media (max-width: 767px) {
    .network-quality-page .nq-explorer-manager-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .network-quality-page .nq-explorer-workspace {
        border-radius: 0.75rem;
    }

    .network-quality-page .nq-explorer-workspace-head {
        display: block;
        padding: 0.8rem;
    }

    .network-quality-page .nq-explorer-scope-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.7rem;
    }

    .network-quality-page .nq-explorer-scope-metric {
        min-width: 0;
    }

    .network-quality-page .nq-explorer-scope-sub,
    .network-quality-page .nq-explorer-workspace-title-wrap h2 {
        max-width: calc(100vw - 8rem);
    }

    .network-quality-page .nq-explorer-viewbar {
        margin: 0.65rem 0.8rem 0;
    }

    .network-quality-page .nq-explorer-resource-toggle {
        width: 2.125rem;
        padding: 0;
        justify-content: center;
    }

    .network-quality-page .nq-explorer-resource-toggle span {
        display: none;
    }

    .network-quality-page .nq-explorer-panel {
        padding: 0.65rem 0.8rem 0.85rem;
    }

    .network-quality-page .nq-explorer-chart-toolbar {
        align-items: flex-start;
        gap: 0.45rem;
    }

    .network-quality-page .nq-explorer-chart-summary {
        max-width: 58vw;
        line-height: 1.35;
    }

    .network-quality-page .nq-explorer-chart-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .network-quality-page .nq-explorer-line-count {
        width: 100%;
        text-align: right;
    }

    .network-quality-page .nq-explorer-chart {
        min-height: 25rem;
        overflow: hidden;
    }

    .network-quality-page .nq-explorer-related-list {
        --nq-legend-card-min: 10rem;
        --nq-legend-card-max: 18rem;
    }

    .network-quality-page .nq-explorer-related-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .network-quality-page .nq-explorer-related-spark {
        display: none;
    }

}

@media (max-width: 479px) {
    .network-quality-page .nq-explorer-target-row,
    .network-quality-page .nq-explorer-target-catalog-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .network-quality-page .nq-explorer-target-spark {
        display: none;
    }

    .network-quality-page .nq-explorer-nav {
        top: 0.4rem;
        bottom: 0.4rem;
        left: 0.4rem;
        width: calc(100vw - 0.8rem);
    }

    .network-quality-page .nq-explorer-workspace-title-wrap h2,
    .network-quality-page .nq-explorer-scope-sub {
        max-width: calc(100vw - 7rem);
    }

    .network-quality-page .nq-explorer-action-label {
        display: none;
    }

    .network-quality-page .nq-explorer-chart-controls {
        grid-template-columns: repeat(3, 2.25rem);
        width: auto;
    }
}

@media (hover: none), (pointer: coarse) {
    .nq-explorer-peek {
        display: none;
    }
}
.network-quality-page .nq-explorer-granularity {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
}

.network-quality-page .nq-explorer-granularity select {
    min-height: 1.875rem;
    max-width: 8.25rem;
    padding: 0 0.5rem;
    color: var(--color-text-primary);
    background: var(--color-inner-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}

.network-quality-page .nq-explorer-granularity[data-loading="true"] select {
    opacity: 0.65;
}