.analysis-page-header .level-right {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.analysis-page {
    --analysis-underheated: #2563eb;
    --analysis-overheated: #dc2626;
    --analysis-kpi-info-light-bg: var(--stat-info-bg, var(--notification-info-light-bg, var(--info-light, #eef5fc)));
    --analysis-kpi-info-light-text: var(--notification-info-light-text, var(--text-primary, inherit));
    --analysis-kpi-info-light-border: color-mix(in srgb, var(--info, #3A9D91) 28%, var(--border, #dbdbdb));
}

.analysis-device-modal {
    width: min(860px, 92vw);
    max-height: 84vh;
}

.analysis-device-modal .modal-card-head,
.analysis-device-modal .modal-card-foot {
    padding: 0.75rem 1rem;
}

.analysis-device-modal .modal-card-body {
    padding: 0.85rem 1rem;
}

.analysis-header-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    row-gap: 0.4rem;
}

.analysis-section-heading,
.analysis-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.analysis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.65rem;
}

.analysis-kpi {
    display: block;
    color: var(--text-primary, inherit);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: 0.7rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border, #dbdbdb) 85%, transparent);
    background: var(--surface, rgba(255, 255, 255, 0.92));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--border, #0f172a) 18%, transparent);
}

.analysis-kpi.is-active {
    outline: 2px solid var(--primary, #3b82f6);
    outline-offset: 2px;
}

a.analysis-kpi:hover {
    background: var(--analysis-kpi-info-light-bg);
    border-color: var(--analysis-kpi-info-light-border);
    color: var(--analysis-kpi-info-light-text);
}

a.analysis-kpi:hover .analysis-kpi-label,
a.analysis-kpi:hover .analysis-kpi-helper,
a.analysis-kpi:hover .analysis-kpi-trend {
    color: currentColor;
}

.analysis-panel .table.is-narrow td,
.analysis-panel .table.is-narrow th {
    font-size: var(--text-sm);
    vertical-align: top;
}

.analysis-panel .table td .analysis-inline-meta {
    margin-top: 0.15rem;
}

.analysis-kpi.is-tone-good {
    border-color: color-mix(in srgb, var(--success, #22c55e) 35%, var(--border, #dbdbdb));
}

.analysis-kpi.is-tone-warning {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 38%, var(--border, #dbdbdb));
}

.analysis-kpi.is-tone-danger {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 36%, var(--border, #dbdbdb));
}

.analysis-kpi-label {
    margin: 0 0 0.3rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-secondary, #64748b);
}

.analysis-kpi-value {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
}

.analysis-kpi-helper {
    margin: 0.35rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary, #64748b);
}

.analysis-kpi-trend {
    margin: 0.18rem 0 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

.analysis-kpi-sparkline {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 0.35rem;
    overflow: visible;
}

.analysis-kpi-sparkline polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.78;
    vector-effect: non-scaling-stroke;
}

.analysis-help-box {
    margin-bottom: 1rem;
}

.analysis-timeline-summary,
.analysis-heating-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.analysis-heating-timeline {
    background: var(--surface, #fff);
    border-color: var(--border, #dee2e6);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.analysis-heating-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: var(--surface-alt, #f5f5f5);
    color: var(--text-primary, #4a4a4a);
    border-bottom-color: var(--border, #dee2e6);
}

.analysis-heating-panel-body {
    display: block;
    padding: 0.85rem;
    background: var(--surface, #fff);
    border-bottom: none;
}

.analysis-heating-panel-content {
    width: 100%;
    min-width: 0;
}

.analysis-heating-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1rem;
    align-items: stretch;
}

.analysis-heating-legend {
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.analysis-heating-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.analysis-legend-line {
    width: 1.5rem;
    height: 0;
    border-top: 3px solid var(--primary, #3273dc);
}

.analysis-legend-line.under {
    border-color: var(--analysis-underheated);
}

.analysis-legend-line.target-line {
    border-color: var(--success, #48c78e);
}

.analysis-legend-line.over {
    border-color: var(--analysis-overheated);
}

.analysis-legend-line.outside {
    border-color: var(--info, #3A9D91);
}

.analysis-legend-line.needle {
    border-color: color-mix(in srgb, var(--text-secondary, #64748b) 56%, transparent);
}

.analysis-legend-line.efficiency {
    border-color: #f97316;
}

.analysis-legend-swatch {
    width: 1.25rem;
    height: 0.6rem;
    border-radius: var(--radius-sm);
}

.analysis-legend-swatch.target {
    background: color-mix(in srgb, var(--success, #48c78e) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--success, #48c78e) 28%, transparent);
}

.analysis-heating-chart-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.analysis-heating-chart {
    display: block;
    width: 100%;
    min-width: 0;
    height: 304px;
    font-size: var(--text-sm);
}

.analysis-heating-target-band {
    fill: color-mix(in srgb, var(--success, #48c78e) 10%, transparent);
    stroke: color-mix(in srgb, var(--success, #48c78e) 18%, transparent);
}

.analysis-heating-zero-line {
    stroke: color-mix(in srgb, var(--text-secondary, #7a7a7a) 72%, transparent);
    stroke-width: 1.25;
}

.analysis-chart-grid.is-vertical {
    stroke-dasharray: 4 6;
    opacity: 0.75;
}

.analysis-chart-label.outside {
    fill: var(--info, #3A9D91);
}

.analysis-heating-delta-line,
.analysis-heating-outside-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analysis-heating-delta-needle {
    stroke: color-mix(in srgb, var(--text-secondary, #64748b) 58%, transparent);
    stroke-width: 1.35;
    stroke-linecap: round;
    opacity: 0.82;
    pointer-events: none;
}

.analysis-heating-delta-needle.is-target {
    stroke: color-mix(in srgb, var(--success, #48c78e) 72%, transparent);
}

.analysis-heating-delta-needle.is-under {
    stroke: color-mix(in srgb, var(--analysis-underheated) 72%, transparent);
}

.analysis-heating-delta-needle.is-over {
    stroke: color-mix(in srgb, var(--analysis-overheated) 72%, transparent);
}

.analysis-heating-delta-needle.is-mixed {
    stroke: color-mix(in srgb, #f59e0b 78%, transparent);
}

.analysis-heating-efficiency-needle {
    stroke: #f97316;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 4 3;
    opacity: 0.95;
}

.analysis-heating-hit-target {
    fill: transparent;
    stroke: transparent;
    pointer-events: all;
}

.analysis-heating-efficiency-point {
    fill: #f97316;
    stroke: var(--surface, #fff);
    stroke-width: 1.5;
}

.analysis-heating-efficiency-icon {
    fill: var(--surface, #fff);
    font-size: 0.48rem; /* off-scale on purpose: chart glyph, not text */
    font-weight: 800;
    pointer-events: none;
}

.analysis-heating-delta-line {
    stroke: color-mix(in srgb, var(--text-secondary, #64748b) 55%, transparent);
    stroke-width: 1.2;
}

.analysis-heating-outside-line {
    stroke: var(--info, #3A9D91);
    stroke-width: 2;
}

.analysis-heating-delta-point {
    stroke: var(--surface, #fff);
    stroke-width: 1.5;
}

.analysis-heating-delta-point.is-target {
    fill: var(--success, #48c78e);
}

.analysis-heating-delta-point.is-under {
    fill: var(--analysis-underheated);
}

.analysis-heating-delta-point.is-over {
    fill: var(--analysis-overheated);
}

.analysis-heating-delta-point.is-mixed {
    fill: #f59e0b;
}

.analysis-heating-outside-point {
    fill: var(--info, #3A9D91);
    stroke: var(--surface, #fff);
    stroke-width: 1.2;
}

.analysis-heating-empty-state {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    max-width: min(28rem, 80%);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    border: 1px solid var(--border, #dee2e6);
    color: var(--text-secondary, #64748b);
    text-align: center;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--border, #0f172a) 24%, transparent);
}

.analysis-delta-distribution {
    min-width: 0;
    border-left: 1px solid var(--border, #dee2e6);
    padding-left: 1rem;
}

.analysis-distribution-heading {
    margin-bottom: 0.85rem;
}

.analysis-distribution-bar {
    display: flex;
    height: 0.72rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--border, #dee2e6) 60%, transparent);
}

.analysis-distribution-bar span {
    min-width: 0;
}

.analysis-distribution-bar .is-under {
    background: var(--analysis-underheated);
}

.analysis-distribution-bar .is-target {
    background: var(--success, #48c78e);
}

.analysis-distribution-bar .is-over {
    background: var(--analysis-overheated);
}

.analysis-distribution-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.45rem;
    font-size: var(--text-sm);
    font-weight: 700;
}

.analysis-distribution-labels span,
.analysis-profile-delta-row strong {
    min-width: 0;
    white-space: nowrap;
}

.analysis-profile-delta-row strong {
    font-size: var(--text-sm);
}

.analysis-distribution-labels .is-under,
.analysis-profile-delta-row .is-under {
    color: var(--analysis-underheated);
}

.analysis-distribution-labels .is-target,
.analysis-profile-delta-row .is-target {
    color: var(--success, #48c78e);
}

.analysis-distribution-labels .is-over,
.analysis-profile-delta-row .is-over {
    color: var(--analysis-overheated);
}

.analysis-profile-delta-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 1rem;
}

.analysis-profile-delta-header,
.analysis-profile-delta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
}

.analysis-profile-delta-header {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border, #dee2e6);
    color: var(--text-secondary, #64748b);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.analysis-profile-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: 700;
}

.analysis-profile-delta-row.is-legacy-profile {
    opacity: 0.58;
}

.analysis-profile-delta-row.is-legacy-profile .analysis-profile-name,
.analysis-profile-delta-row.is-legacy-profile strong {
    color: var(--text-secondary, #64748b);
}

.analysis-reason-list,
.analysis-recommendation-list,
.analysis-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.analysis-panel > .analysis-recommendation-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.25rem;
}

.analysis-reason-item,
.analysis-vehicle-card,
.analysis-recommendation {
    border-radius: var(--radius-lg);
    padding: 0.8rem 0.85rem;
    background: color-mix(in srgb, var(--surface, #fff) 84%, var(--surface-alt, #f8fafc));
    border: 1px solid color-mix(in srgb, var(--border, #dee2e6) 64%, transparent);
}

.analysis-recommendation {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.analysis-recommendation .analysis-inline-meta:last-child {
    padding-top: 0.25rem;
}

.analysis-recommendation-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-alt, #f8fafc) 88%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--border, #dee2e6) 80%, transparent);
    color: var(--text-secondary, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
}

.analysis-recommendation-icon.scope-vehicle {
    color: var(--primary, #3273dc);
}

.analysis-recommendation-icon.scope-profile {
    color: var(--success, #48c78e);
}

.analysis-recommendation-icon.scope-fleet {
    color: var(--text-secondary, #64748b);
}

.analysis-recommendation-content {
    min-width: 0;
}

.analysis-recommendation-toggle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.analysis-recommendation.is-extra,
.analysis-toggle-less {
    display: none;
}

.analysis-recommendation-toggle:checked + .analysis-recommendation-list .analysis-recommendation.is-extra {
    display: grid;
}

.analysis-recommendation-toggle:checked ~ .analysis-recommendation-toggle-actions .analysis-toggle-more {
    display: none;
}

.analysis-recommendation-toggle:checked ~ .analysis-recommendation-toggle-actions .analysis-toggle-less {
    display: inline;
}

.analysis-recommendation-toggle-actions {
    margin-top: 1rem;
    margin-bottom: 0;
}

.analysis-recommendation-toggle-button {
    height: 1.85rem;
    padding-left: 0.55rem;
    padding-right: 0.65rem;
}

.analysis-reason-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.analysis-reason-title,
.analysis-vehicle-card h3,
.analysis-recommendation h3 {
    margin: 0;
    font-weight: 700;
}

.analysis-reason-meta,
.analysis-vehicle-meta,
.analysis-manual-profile-note,
.analysis-inline-meta {
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.analysis-reason-share {
    font-size: var(--text-lg);
    font-weight: 700;
}

.analysis-recommendation h3 {
    margin-bottom: 0.35rem;
}

.analysis-recommendation p,
.analysis-manual-profile p,
.analysis-vehicle-focus {
    margin: 0;
}

.analysis-recommendation.is-tone-warning {
    background: color-mix(in srgb, var(--surface, #fff) 84%, var(--surface-alt, #f8fafc));
    border-color: color-mix(in srgb, var(--border, #dee2e6) 64%, transparent);
}

.analysis-recommendation.is-tone-danger {
    background: color-mix(in srgb, var(--surface, #fff) 84%, var(--surface-alt, #f8fafc));
    border-color: color-mix(in srgb, var(--border, #dee2e6) 64%, transparent);
}

.analysis-vehicle-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.analysis-vehicle-focus {
    margin-top: 0.45rem;
    font-weight: 600;
}

.analysis-manual-profile {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.analysis-manual-profile ul {
    margin: 0;
    padding-left: 1.25rem;
}

.analysis-inline-meta {
    display: block;
    margin-top: 0.2rem;
}

.analysis-device-chart-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-xl);
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.85);
}

.analysis-outcome-preview {
    border: 1px solid color-mix(in srgb, var(--border, #dbdbdb) 82%, transparent);
    border-radius: var(--radius-xl);
    padding: 0.9rem;
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--surface-alt, #f4f6f6));
    color: var(--text-primary, inherit);
}

.analysis-outcome-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.analysis-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.analysis-outcome-kpi {
    min-width: 0;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    background: color-mix(in srgb, var(--surface-alt, #f4f6f6) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border, #dbdbdb) 70%, transparent);
    color: var(--text-primary, inherit);
}

.analysis-outcome-kpi.is-tone-good {
    border-color: color-mix(in srgb, var(--success, #22c55e) 34%, var(--border, #dbdbdb));
}

.analysis-outcome-kpi.is-tone-warning {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 38%, var(--border, #dbdbdb));
}

.analysis-outcome-kpi.is-tone-danger {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 36%, var(--border, #dbdbdb));
}

.analysis-device-chart-svg-wrap {
    width: 100%;
    overflow-x: auto;
}

.analysis-device-chart-svg {
    width: 100%;
    min-width: 640px;
    height: auto;
    display: block;
}

.analysis-device-technical {
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.analysis-device-technical summary {
    cursor: pointer;
    font-weight: 600;
}

.analysis-device-technical .analysis-inline-meta {
    margin-top: 0.35rem;
}

.analysis-chart-axis {
    stroke: color-mix(in srgb, var(--text-secondary, #7a7a7a) 78%, transparent);
    stroke-width: 1.5;
}

.analysis-chart-grid {
    stroke: color-mix(in srgb, var(--border, #dee2e6) 78%, transparent);
    stroke-width: 1;
}

.analysis-chart-label {
    fill: var(--text-secondary, #7a7a7a);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.analysis-chart-line {
    fill: none;
    stroke: var(--primary, #3273dc);
    stroke-width: 2;
}

.analysis-vehicle-link {
    font-weight: 600;
}

.analysis-vehicle-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.analysis-device-data-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    flex: 0 0 auto;
}

.analysis-row-actions-column {
    text-align: center;
    white-space: nowrap;
    width: 1%;
}

.analysis-row-actions {
    justify-content: center;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.analysis-row-actions .button {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
}

.analysis-device-data-inline-btn {
    height: 1.85rem;
    padding-left: 0.55rem;
    padding-right: 0.65rem;
}

.analysis-command-history-table td,
.analysis-command-history-table th {
    font-size: var(--text-xs);
    line-height: 1.15;
    padding: 0.22rem 0.35rem;
}

.analysis-vehicle-link.is-active {
    text-decoration: underline;
}

.analysis-page .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.analysis-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.analysis-panel .tag.mt-1 {
    margin-top: 0.35rem;
}

.analysis-details-page .analysis-details-hero {
    margin-bottom: 1rem;
}

.analysis-details-hero-grid,
.analysis-details-action .columns {
    align-items: flex-end;
}

.analysis-details-hero-grid {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.analysis-timeline-panel {
    overflow: hidden;
}

.analysis-timeline {
    margin-top: 1rem;
}

.analysis-timeline-track {
    position: relative;
    height: 4.4rem;
    margin: 0.5rem 0 0.35rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--surface-alt, #f4f6f6) 72%, transparent),
        color-mix(in srgb, var(--border, #dbdbdb) 36%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--border, #dbdbdb) 82%, transparent);
}

.analysis-timeline-track::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 50%;
    border-top: 2px solid color-mix(in srgb, var(--text-secondary, #64748b) 44%, transparent);
    transform: translateY(-50%);
}

.analysis-timeline-segment {
    position: absolute;
    top: 50%;
    height: 0.85rem;
    min-width: 0.5rem;
    border-radius: var(--radius-pill);
    transform: translateY(-50%);
    z-index: 1;
}

.analysis-timeline-segment.is-tone-plan {
    background: color-mix(in srgb, var(--info, #3b82f6) 46%, transparent);
}

.analysis-timeline-segment.is-tone-actual {
    background: color-mix(in srgb, var(--success, #22c55e) 52%, transparent);
}

.analysis-timeline-marker {
    position: absolute;
    top: calc(0.42rem + (var(--lane, 0) * 0.82rem));
    bottom: 0.42rem;
    width: 0;
    z-index: 2;
    transform: translateX(-1px);
}

.analysis-timeline-pin {
    position: absolute;
    left: -0.34rem;
    top: 0;
    width: 0.68rem;
    height: 0.68rem;
    border-radius: var(--radius-circle);
    background: #64748b;
    border: 2px solid var(--surface, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border, #dbdbdb) 78%, transparent);
}

.analysis-timeline-marker::after {
    content: "";
    position: absolute;
    top: 0.62rem;
    bottom: 0;
    border-left: 2px solid color-mix(in srgb, var(--text-secondary, #64748b) 72%, transparent);
}

.analysis-timeline-marker.is-tone-plan .analysis-timeline-pin,
.analysis-timeline-item.is-tone-plan .analysis-timeline-dot {
    background: #3b82f6;
}

.analysis-timeline-marker.is-tone-actual .analysis-timeline-pin,
.analysis-timeline-item.is-tone-actual .analysis-timeline-dot {
    background: #22c55e;
}

.analysis-timeline-marker.is-tone-departure .analysis-timeline-pin,
.analysis-timeline-item.is-tone-departure .analysis-timeline-dot {
    background: #f59e0b;
}

.analysis-timeline-marker.is-tone-danger .analysis-timeline-pin,
.analysis-timeline-item.is-tone-danger .analysis-timeline-dot {
    background: #ef4444;
}

.analysis-timeline-marker.is-tone-danger::after {
    border-left-color: color-mix(in srgb, #ef4444 72%, transparent);
}

.analysis-timeline-items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.analysis-timeline-axis {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.analysis-timeline-item {
    display: flex;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.5rem 0.55rem;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.035);
}

.analysis-timeline-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.2rem;
    border-radius: var(--radius-circle);
    background: #64748b;
}

.analysis-timeline-item strong {
    font-size: var(--text-sm);
    line-height: 1.2;
}

.analysis-timeline-item strong,
.analysis-timeline-item span,
.analysis-timeline-item small {
    display: block;
}

.analysis-timeline-item span,
.analysis-timeline-item small {
    color: var(--text-secondary, #64748b);
    font-size: var(--text-xs);
    line-height: 1.25;
}

.analysis-details-page .analysis-panel .table th {
    width: 42%;
    color: var(--text-secondary, #64748b);
    font-weight: 600;
}

.analysis-details-page .analysis-panel .table td {
    color: var(--text-primary, #0f172a);
}

.analysis-details-page .analysis-panel .table,
.analysis-details-page .analysis-panel .table tbody,
.analysis-details-page .analysis-panel .table tr,
.analysis-details-page .analysis-panel .table th,
.analysis-details-page .analysis-panel .table td {
    background-color: transparent;
}

.analysis-details-page .analysis-panel .analysis-inline-meta {
    margin-left: 0.4rem;
}

.analysis-process-timeline {
    margin-top: 1rem;
}

.analysis-anomaly-list {
    display: grid;
    gap: 0.55rem;
}

.analysis-anomaly-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 28%, var(--border, #dbdbdb));
    border-left: 4px solid var(--warning, #f59e0b);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--surface, #fff));
}

.analysis-anomaly-item.is-tone-danger {
    border-color: color-mix(in srgb, #ef4444 30%, var(--border, #dbdbdb));
    border-left-color: #ef4444;
    background: color-mix(in srgb, #ef4444 8%, var(--surface, #fff));
}

.analysis-anomaly-item strong,
.analysis-anomaly-item span,
.analysis-anomaly-item small {
    display: block;
}

.analysis-anomaly-item span,
.analysis-anomaly-item small {
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.analysis-timeline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.analysis-timeline-zoom {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.analysis-timeline-zoom input[type="range"] {
    width: 8rem;
}

.analysis-process-timeline-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.analysis-process-timeline-track {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: 4rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--border, #dbdbdb) 82%, transparent);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--surface-alt, #f4f6f6) 72%, transparent),
        color-mix(in srgb, var(--border, #dbdbdb) 36%, transparent)
    );
    overflow: hidden;
}

.analysis-process-timeline-track::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 50%;
    border-top: 2px solid color-mix(in srgb, var(--text-secondary, #64748b) 42%, transparent);
    transform: translateY(-50%);
}

.analysis-process-segment {
    position: absolute;
    top: 50%;
    height: 0.85rem;
    min-width: 0.4rem;
    border-radius: var(--radius-pill);
    transform: translateY(-50%);
    z-index: 1;
}

.analysis-process-segment.is-tone-plan {
    background: color-mix(in srgb, var(--info, #3b82f6) 44%, transparent);
}

.analysis-process-segment.is-tone-actual {
    background: color-mix(in srgb, var(--success, #22c55e) 58%, transparent);
}

.analysis-process-marker {
    position: absolute;
    top: 0.58rem;
    bottom: 0.58rem;
    width: 12px;
    border: 0;
    padding: 0;
    z-index: 2;
    background: transparent;
    cursor: pointer;
    transform: translateX(-50%);
}

.analysis-process-marker:focus-visible {
    outline: 2px solid var(--primary, #3b82f6);
    outline-offset: 2px;
}

.analysis-process-marker::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    border-radius: var(--radius-pill);
    background: #64748b;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface, #fff) 86%, transparent);
    transform: translateX(-50%);
}

.analysis-process-marker.has-pin-head::after,
.analysis-process-marker.has-source-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.analysis-process-marker.has-pin-head::after {
    top: -0.25rem;
    width: 0.62rem;
    height: 0.62rem;
    border: 2px solid var(--surface, #fff);
    border-radius: var(--radius-pill);
    background: #64748b;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-secondary, #64748b) 28%, transparent);
}

.analysis-process-marker.has-source-pin::before {
    width: 2px;
}

.analysis-process-marker.has-source-pin.is-pin-up::after {
    top: -0.35rem;
    width: 0;
    height: 0;
    border-left: 0.38rem solid transparent;
    border-right: 0.38rem solid transparent;
    border-bottom: 0.62rem solid #64748b;
}

.analysis-process-marker.has-source-pin.is-pin-down::after {
    bottom: -0.35rem;
    width: 0;
    height: 0;
    border-left: 0.38rem solid transparent;
    border-right: 0.38rem solid transparent;
    border-top: 0.62rem solid #64748b;
}

.analysis-process-marker.is-tone-plan,
.analysis-process-legend .is-tone-plan {
    background: #3b82f6;
}

.analysis-process-marker.is-tone-plan {
    background: transparent;
}

.analysis-process-marker.is-tone-plan::before {
    background: #3b82f6;
}

.analysis-process-marker.is-tone-plan.has-pin-head::after {
    background: #3b82f6;
}

.analysis-process-marker.is-tone-plan.has-source-pin.is-pin-up::after {
    border-bottom-color: #3b82f6;
}

.analysis-process-marker.is-tone-plan.has-source-pin.is-pin-down::after {
    border-top-color: #3b82f6;
}

.analysis-process-marker.is-tone-actual,
.analysis-process-legend .is-tone-actual {
    background: #22c55e;
}

.analysis-process-marker.is-tone-actual {
    background: transparent;
}

.analysis-process-marker.is-tone-actual::before {
    background: #22c55e;
}

.analysis-process-marker.is-tone-actual.has-pin-head::after {
    background: #22c55e;
}

.analysis-process-marker.is-tone-actual.has-source-pin.is-pin-up::after {
    border-bottom-color: #22c55e;
}

.analysis-process-marker.is-tone-actual.has-source-pin.is-pin-down::after {
    border-top-color: #22c55e;
}

.analysis-process-marker.is-tone-warning,
.analysis-process-legend .is-tone-warning {
    background: #f59e0b;
}

.analysis-process-marker.is-tone-warning {
    background: transparent;
}

.analysis-process-marker.is-tone-warning::before {
    background: #f59e0b;
}

.analysis-process-marker.is-tone-warning.has-pin-head::after {
    background: #f59e0b;
}

.analysis-process-marker.is-tone-warning.has-source-pin.is-pin-up::after {
    border-bottom-color: #f59e0b;
}

.analysis-process-marker.is-tone-warning.has-source-pin.is-pin-down::after {
    border-top-color: #f59e0b;
}

.analysis-process-marker.is-tone-danger,
.analysis-process-legend .is-tone-danger {
    background: #ef4444;
}

.analysis-process-marker.is-tone-danger {
    background: transparent;
}

.analysis-process-marker.is-tone-danger::before {
    background: #ef4444;
}

.analysis-process-marker.is-tone-danger.has-pin-head::after {
    background: #ef4444;
}

.analysis-process-marker.is-tone-danger.has-source-pin.is-pin-up::after {
    border-bottom-color: #ef4444;
}

.analysis-process-marker.is-tone-danger.has-source-pin.is-pin-down::after {
    border-top-color: #ef4444;
}

.analysis-process-marker.is-tone-log,
.analysis-process-marker.is-tone-snapshot,
.analysis-process-marker.is-tone-command,
.analysis-process-marker.is-tone-outcome,
.analysis-process-legend .is-tone-log {
    background: #64748b;
}

.analysis-process-marker.is-tone-log,
.analysis-process-marker.is-tone-snapshot,
.analysis-process-marker.is-tone-command,
.analysis-process-marker.is-tone-outcome {
    background: transparent;
}

.analysis-process-marker.is-tone-log::before,
.analysis-process-marker.is-tone-snapshot::before,
.analysis-process-marker.is-tone-command::before,
.analysis-process-marker.is-tone-outcome::before {
    background: #64748b;
}

.analysis-process-marker.is-tone-log.has-pin-head::after,
.analysis-process-marker.is-tone-snapshot.has-pin-head::after,
.analysis-process-marker.is-tone-command.has-pin-head::after,
.analysis-process-marker.is-tone-outcome.has-pin-head::after {
    background: #64748b;
}

.analysis-process-marker.is-tone-log.has-source-pin.is-pin-up::after,
.analysis-process-marker.is-tone-snapshot.has-source-pin.is-pin-up::after,
.analysis-process-marker.is-tone-command.has-source-pin.is-pin-up::after,
.analysis-process-marker.is-tone-outcome.has-source-pin.is-pin-up::after {
    border-bottom-color: #64748b;
}

.analysis-process-marker.is-tone-log.has-source-pin.is-pin-down::after,
.analysis-process-marker.is-tone-snapshot.has-source-pin.is-pin-down::after,
.analysis-process-marker.is-tone-command.has-source-pin.is-pin-down::after,
.analysis-process-marker.is-tone-outcome.has-source-pin.is-pin-down::after {
    border-top-color: #64748b;
}

.analysis-process-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.7rem;
    color: var(--text-secondary, #64748b);
    font-size: var(--text-sm);
}

.analysis-process-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.analysis-process-legend i {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-pill);
}

.analysis-process-log-table td,
.analysis-process-log-table th {
    vertical-align: top;
}

.analysis-table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.analysis-table-sort:hover,
.analysis-table-sort:focus-visible {
    color: var(--primary, #3b82f6);
}

.analysis-table-sort::after {
    content: "\2195";
    color: var(--text-secondary, #64748b);
    font-size: var(--text-xs);
}

.analysis-table-sort.is-sorted-asc::after {
    content: "\2191";
    color: currentColor;
}

.analysis-table-sort.is-sorted-desc::after {
    content: "\2193";
    color: currentColor;
}

.analysis-process-log-table tr.is-tone-danger td:first-child {
    border-left: 3px solid #ef4444;
}

.analysis-process-log-table tr.is-tone-warning td:first-child {
    border-left: 3px solid #f59e0b;
}

.analysis-process-log-table tr.is-tone-actual td:first-child {
    border-left: 3px solid #22c55e;
}

.analysis-process-log-table tr.is-tone-plan td:first-child {
    border-left: 3px solid #3b82f6;
}

.analysis-process-log-table tr.is-tone-warning td:first-child {
    border-left-color: #f59e0b;
}

.analysis-process-log-table tr.is-timeline-selected td {
    animation: analysisTimelineSelected 1.8s ease;
    background: color-mix(in srgb, var(--success-light, #edf9f6) 74%, transparent);
}

@keyframes analysisTimelineSelected {
    0% {
        background: color-mix(in srgb, var(--success, #48c78e) 22%, var(--success-light, #edf9f6));
    }

    100% {
        background: color-mix(in srgb, var(--success-light, #edf9f6) 74%, transparent);
    }
}

.analysis-process-log-table pre {
    max-height: 10rem;
    overflow: auto;
    margin-top: 0.35rem;
    padding: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-alt, #f4f6f6) 82%, transparent);
}

.analysis-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-color: var(--button-primary-bg, var(--primary, #3273dc));
    border-radius: var(--radius-pill);
    background: var(--button-primary-bg, var(--primary, #3273dc));
    color: var(--button-primary-text, #fff);
    box-shadow: 0 0.75rem 1.8rem color-mix(in srgb, var(--button-primary-bg, var(--primary, #3273dc)) 24%, transparent);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
}

.analysis-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.analysis-back-to-top:hover,
.analysis-back-to-top:focus-visible {
    filter: brightness(0.96);
    color: var(--button-primary-text, #fff);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media screen and (max-width: 1023px) {
    .analysis-page-header,
    .analysis-vehicle-topline,
    .analysis-reason-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .analysis-page-header .level-right {
        justify-content: flex-start;
    }

    .analysis-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .analysis-heating-grid {
        grid-template-columns: 1fr;
    }

    .analysis-panel > .analysis-recommendation-list {
        grid-template-columns: 1fr;
    }

    .analysis-delta-distribution {
        border-left: 0;
        border-top: 1px solid var(--border, #dee2e6);
        padding-left: 0;
        padding-top: 1rem;
    }

    .analysis-section-heading,
    .analysis-panel-heading,
    .analysis-outcome-heading {
        flex-direction: column;
    }

    .analysis-outcome-grid {
        grid-template-columns: 1fr;
    }

    .analysis-timeline-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 480px) {
    .analysis-kpi-grid {
        grid-template-columns: 1fr;
    }

    .analysis-timeline-items {
        grid-template-columns: 1fr;
    }
}