.convertapro-pair-chart {
    --cp-chart-height: 340px;
    --cp-chart-accent: #155eef;
    --cp-chart-border-color: #d7e2f1;
    --cp-chart-text-color: #132033;
    --cp-chart-muted-color: #617086;
    --cp-chart-surface-color: #ffffff;
    --cp-chart-panel-color: #f8fbff;
    --cp-chart-control-color: #ffffff;
    --cp-chart-metric-color: #ffffff;
    --cp-chart-canvas-color: #ffffff;
    --cp-chart-notice-color: #eef4ff;
    --cp-chart-tooltip-bg-color: #111827;
    --cp-chart-tooltip-text-color: #f8fafc;
    --cp-chart-axis-color: #94a3b8;
    --cp-chart-grid-color: #dbe5f0;
    --cp-chart-series-line: #155eef;
    --cp-chart-series-area-start: #3b82f6;
    --cp-chart-series-area-end: #dbeafe;
    --cp-chart-series-bar: #2563eb;
    position: relative;
    overflow: visible;
    padding: var(--cp-chart-container-padding, 1.15rem);
    border: var(--cp-chart-container-border-w, 1px) solid var(--cp-chart-container-border, var(--cp-chart-border-color));
    border-radius: var(--cp-chart-container-radius, 24px);
    background: var(--cp-chart-container-bg, radial-gradient(circle at top right, color-mix(in srgb, var(--cp-chart-accent) 12%, transparent), transparent 34%), linear-gradient(180deg, var(--cp-chart-surface-color) 0%, var(--cp-chart-panel-color) 100%));
    box-shadow: var(--cp-chart-container-shadow, 0 24px 60px rgba(15, 23, 42, 0.14));
    color: var(--cp-chart-text-color);
}

.convertapro-pair-chart [hidden] {
    display: none !important;
}

.convertapro-pair-chart,
.convertapro-pair-chart *,
.convertapro-pair-chart *::before,
.convertapro-pair-chart *::after {
    box-sizing: border-box;
}

.convertapro-pair-chart.is-theme-auto {
    color-scheme: light dark;
}

.convertapro-pair-chart.is-window-panel-open {
    overflow: visible;
}

@media (prefers-color-scheme: dark) {
    .convertapro-pair-chart.is-theme-auto {
        --cp-chart-accent: var(--cp-chart-auto-dark-accent, #7dd3fc);
        --cp-chart-border-color: var(--cp-chart-auto-dark-border-color, #334155);
        --cp-chart-text-color: var(--cp-chart-auto-dark-text-color, #e5eefc);
        --cp-chart-muted-color: var(--cp-chart-auto-dark-muted-color, #cbd5e1);
        --cp-chart-surface-color: var(--cp-chart-auto-dark-surface-color, #081120);
        --cp-chart-panel-color: var(--cp-chart-auto-dark-panel-color, #0f1f3d);
        --cp-chart-control-color: var(--cp-chart-auto-dark-control-color, #0f172a);
        --cp-chart-metric-color: var(--cp-chart-auto-dark-metric-color, #111c35);
        --cp-chart-canvas-color: var(--cp-chart-auto-dark-canvas-color, #0b1428);
        --cp-chart-notice-color: var(--cp-chart-auto-dark-notice-color, #13213d);
        --cp-chart-tooltip-bg-color: var(--cp-chart-auto-dark-tooltip-bg-color, #020617);
        --cp-chart-tooltip-text-color: var(--cp-chart-auto-dark-tooltip-text-color, #f8fafc);
        --cp-chart-axis-color: var(--cp-chart-auto-dark-axis-color, #94a3b8);
        --cp-chart-grid-color: var(--cp-chart-auto-dark-grid-color, #334155);
        --cp-chart-series-line: var(--cp-chart-auto-dark-series-line, #60a5fa);
        --cp-chart-series-area-start: var(--cp-chart-auto-dark-series-area-start, #38bdf8);
        --cp-chart-series-area-end: var(--cp-chart-auto-dark-series-area-end, #0f172a);
        --cp-chart-series-bar: var(--cp-chart-auto-dark-series-bar, #38bdf8);
    }
}

.convertapro-pair-chart.is-presentation-inherit {
    box-shadow: none;
}

.convertapro-pair-chart.is-presentation-inherit,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-section-heading h2,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-section-support,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-chart-control,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-chart-action,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-chart-metric-value,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-chart-metric-label,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-chart-legend-copy,
.convertapro-pair-chart.is-presentation-inherit .convertapro-pair-chart-upsell {
    color: inherit;
    font-family: inherit;
}

.convertapro-pair-chart .convertapro-pair-section-heading {
    margin-bottom: 1rem;
    padding: var(--cp-chart-header-padding, 0);
    border: var(--cp-chart-header-border-w, 0) solid var(--cp-chart-header-border, transparent);
    border-radius: var(--cp-chart-header-radius, 0);
    background: var(--cp-chart-header-bg, transparent);
    box-shadow: var(--cp-chart-header-shadow, none);
}

.convertapro-pair-chart .convertapro-pair-section-heading h2 {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--cp-chart-title-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-title-font-family, Georgia, "Times New Roman", serif);
    font-size: var(--cp-chart-title-font-size, 1.15rem);
}

.convertapro-pair-chart .convertapro-derived-disclosure-badge,
.convertapro-performance-widget .convertapro-derived-disclosure-badge,
.convertapro-pair-performance .convertapro-derived-disclosure-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(21, 94, 239, 0.18);
    background: rgba(21, 94, 239, 0.08);
    color: var(--cp-chart-text-color, #132033);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    vertical-align: middle;
    white-space: nowrap;
}

.convertapro-pair-chart .convertapro-pair-section-heading-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--cp-chart-cluster-gap, 0.85rem);
    row-gap: 0.35rem;
    align-items: center;
}

.convertapro-pair-chart .convertapro-pair-section-heading-copy h2,
.convertapro-pair-chart .convertapro-pair-section-heading-copy .convertapro-pair-section-support {
    grid-column: 2;
}

.convertapro-pair-chart-header-cluster {
    display: var(--cp-chart-cluster-display, inline-flex);
    align-items: center;
    gap: 0.85rem;
    grid-row: 1 / span 2;
    align-self: start;
    min-width: 0;
    padding: var(--cp-chart-cluster-wrapper-padding, 0.2rem 0.35rem 0.2rem 0);
    border: var(--cp-chart-cluster-wrapper-border-w, 0) solid var(--cp-chart-cluster-wrapper-border, transparent);
    border-radius: var(--cp-chart-cluster-wrapper-radius, 0);
    background: var(--cp-chart-cluster-wrapper-bg, transparent);
    box-shadow: var(--cp-chart-cluster-wrapper-shadow, none);
}

.convertapro-pair-chart-header-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.convertapro-pair-chart-header-cluster .convertapro-pair-trend-shell {
    width: var(--cp-chart-cluster-icon-size, 2.4rem);
    height: var(--cp-chart-cluster-icon-size, 2.4rem);
    border-radius: var(--cp-chart-cluster-icon-radius, 999px);
    border: var(--cp-chart-cluster-icon-border-w, 1px) solid var(--cp-chart-cluster-icon-border, color-mix(in srgb, var(--cp-chart-border-color) 75%, transparent));
    background: var(--cp-chart-cluster-icon-bg, color-mix(in srgb, var(--cp-chart-control-color) 82%, transparent));
    padding: var(--cp-chart-cluster-icon-padding, 0.2rem);
    box-shadow: none;
}

.convertapro-pair-chart-header-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--cp-chart-cluster-icon-size, 2.4rem) * 0.83);
    min-width: calc(var(--cp-chart-cluster-icon-size, 2.4rem) * 0.83);
    height: calc(var(--cp-chart-cluster-icon-size, 2.4rem) * 0.83);
    min-height: calc(var(--cp-chart-cluster-icon-size, 2.4rem) * 0.83);
    border-radius: 999px;
    border: 0;
    background: #ffffff;
    color: var(--cp-chart-cluster-icon-color, #155eef);
    padding: 0;
    font-size: calc(var(--cp-chart-cluster-icon-size, 2.4rem) * 0.42);
    font-weight: 800;
    line-height: 1;
}

.convertapro-pair-chart-header-state-icon.is-up {
    color: #0f766e;
}

.convertapro-pair-chart-header-state-icon.is-down {
    color: #b42318;
}

.convertapro-pair-chart-header-state-icon.is-neutral {
    color: #1d4ed8;
}

.convertapro-pair-chart-header-flags {
    display: inline-flex;
    align-items: center;
}

.convertapro-pair-chart-header-cluster .convertapro-pair-flag-shell,
.convertapro-pair-chart-header-flag-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    flex: 0 0 var(--cp-chart-cluster-flag-size, 3rem);
    width: var(--cp-chart-cluster-flag-size, 3rem);
    min-width: var(--cp-chart-cluster-flag-size, 3rem);
    height: var(--cp-chart-cluster-flag-size, 3rem);
    min-height: var(--cp-chart-cluster-flag-size, 3rem);
    border-radius: 999px;
    border: var(--cp-chart-cluster-flag-border-w, 2px) solid var(--cp-chart-cluster-flag-border, color-mix(in srgb, var(--cp-chart-border-color) 75%, transparent));
    background: #ffffff;
    box-sizing: border-box;
}

.convertapro-pair-chart-header-cluster .convertapro-pair-flag-shell + .convertapro-pair-flag-shell,
.convertapro-pair-chart-header-flag-shell + .convertapro-pair-chart-header-flag-shell {
    margin-left: calc(var(--cp-chart-cluster-flag-overlap, 0.8rem) * -1);
}

.convertapro-pair-chart-header-cluster .convertapro-pair-flag,
.convertapro-pair-chart-header-flag {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #ffffff;
}

.convertapro-pair-chart-header-cluster .convertapro-pair-flag-fallback,
.convertapro-pair-chart-header-flag-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--cp-chart-control-color);
    color: var(--cp-chart-text-color);
    font-size: 0.72rem;
    font-weight: 700;
}

.convertapro-pair-chart .convertapro-pair-section-support {
    color: var(--cp-chart-subtitle-font-color, var(--cp-chart-muted-color));
    font-family: var(--cp-chart-subtitle-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-subtitle-font-size, 0.92rem);
    line-height: 1.55;
}

.convertapro-pair-chart-tier-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cp-chart-tier-chip-padding, 0.45rem 0.85rem);
    border-radius: var(--cp-chart-tier-chip-radius, 999px);
    border: var(--cp-chart-tier-chip-border-w, 1px) solid var(--cp-chart-tier-chip-border, color-mix(in srgb, var(--cp-chart-border-color) 78%, transparent));
    background: var(--cp-chart-tier-chip-bg, color-mix(in srgb, var(--cp-chart-control-color) 78%, transparent));
    box-shadow: var(--cp-chart-tier-chip-shadow, none);
    color: var(--cp-chart-tier-chip-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-tier-chip-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-tier-chip-font-size, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.convertapro-pair-chart-shell {
    display: grid;
    gap: 1rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.convertapro-pair-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: var(--cp-chart-toolbar-padding, 0);
    border: var(--cp-chart-toolbar-border-w, 0) solid var(--cp-chart-toolbar-border, transparent);
    border-radius: var(--cp-chart-toolbar-radius, 0);
    background: var(--cp-chart-toolbar-bg, transparent);
    box-shadow: var(--cp-chart-toolbar-shadow, none);
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.convertapro-pair-chart-control-group,
.convertapro-pair-chart-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.convertapro-pair-chart-comparison-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.convertapro-pair-chart-comparison-stack {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.convertapro-pair-chart-compare-help,
.convertapro-pair-chart-compare-note {
    margin: 0;
    color: var(--cp-chart-muted-color);
    font: 600 0.76rem/1.35 ui-sans-serif, system-ui, sans-serif;
    max-width: 28rem;
}

.convertapro-pair-chart-compare-note {
    color: color-mix(in srgb, var(--cp-chart-muted-color) 86%, transparent);
}

.convertapro-pair-chart-comparison-empty {
    padding: 0.5rem 0.85rem;
    border: 1px dashed color-mix(in srgb, var(--cp-chart-border-color) 78%, transparent);
    border-radius: 14px;
    color: var(--cp-chart-muted-color);
    font: 600 0.82rem/1.35 ui-sans-serif, system-ui, sans-serif;
}

.convertapro-pair-chart-compare-select {
    min-width: 0;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--cp-chart-border-color) 75%, transparent);
    border-radius: 999px;
    background: var(--cp-chart-control-color);
    color: var(--cp-chart-text-color);
    font: 600 0.82rem/1.2 ui-sans-serif, system-ui, sans-serif;
}

.convertapro-pair-chart-comparison-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    align-content: flex-start;
    min-width: 0;
    width: 100%;
}

.convertapro-pair-chart-comparison-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cp-chart-accent) 36%, transparent);
    background: color-mix(in srgb, var(--cp-chart-accent) 12%, var(--cp-chart-control-color));
    color: var(--cp-chart-text-color);
    font: 700 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
}

.convertapro-pair-chart-comparison-chip:hover {
    transform: translateY(-1px);
}

.convertapro-pair-chart-control,
.convertapro-pair-chart-action {
    appearance: none;
    cursor: pointer;
    line-height: 1;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.convertapro-pair-chart-control.is-range {
    padding: var(--cp-chart-range-padding, 0.5rem 0.85rem);
    border-radius: var(--cp-chart-range-radius, 999px);
    border: var(--cp-chart-range-border-w, 1px) solid var(--cp-chart-range-border, color-mix(in srgb, var(--cp-chart-border-color) 75%, transparent));
    background: var(--cp-chart-range-bg, color-mix(in srgb, var(--cp-chart-control-color) 84%, transparent));
    box-shadow: var(--cp-chart-range-shadow, none);
    color: var(--cp-chart-range-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-range-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-range-font-size, 0.82rem);
}

.convertapro-pair-chart-control.is-view {
    padding: var(--cp-chart-mode-padding, 0.5rem 0.85rem);
    border-radius: var(--cp-chart-mode-radius, 999px);
    border: var(--cp-chart-mode-border-w, 1px) solid var(--cp-chart-mode-border, color-mix(in srgb, var(--cp-chart-border-color) 75%, transparent));
    background: var(--cp-chart-mode-bg, color-mix(in srgb, var(--cp-chart-control-color) 84%, transparent));
    box-shadow: var(--cp-chart-mode-shadow, none);
    color: var(--cp-chart-mode-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-mode-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-mode-font-size, 0.82rem);
}

.convertapro-pair-chart-action {
    padding: var(--cp-chart-export-padding, 0.5rem 0.85rem);
    border-radius: var(--cp-chart-export-radius, 999px);
    border: var(--cp-chart-export-border-w, 1px) solid var(--cp-chart-export-border, color-mix(in srgb, var(--cp-chart-border-color) 75%, transparent));
    background: var(--cp-chart-export-bg, color-mix(in srgb, var(--cp-chart-control-color) 84%, transparent));
    box-shadow: var(--cp-chart-export-shadow, none);
    color: var(--cp-chart-export-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-export-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-export-font-size, 0.82rem);
}

.convertapro-pair-chart-control.is-range:hover,
.convertapro-pair-chart-control.is-range.is-active {
    transform: translateY(-1px);
    background: var(--cp-chart-range-active, var(--cp-chart-range-hover, color-mix(in srgb, var(--cp-chart-accent) 16%, transparent)));
    border-color: color-mix(in srgb, var(--cp-chart-accent) 40%, var(--cp-chart-range-border, transparent));
    color: var(--cp-chart-range-font-color, var(--cp-chart-text-color));
}

.convertapro-pair-chart-control.is-range:focus-visible {
    outline: 2px solid var(--cp-chart-range-focus, color-mix(in srgb, var(--cp-chart-accent) 28%, transparent));
    outline-offset: 2px;
}

.convertapro-pair-chart-control.is-view:hover,
.convertapro-pair-chart-control.is-view.is-active {
    transform: translateY(-1px);
    background: var(--cp-chart-mode-active, var(--cp-chart-mode-hover, color-mix(in srgb, var(--cp-chart-accent) 18%, transparent)));
    border-color: color-mix(in srgb, var(--cp-chart-accent) 42%, var(--cp-chart-mode-border, transparent));
}

.convertapro-pair-chart-control.is-view:focus-visible {
    outline: 2px solid var(--cp-chart-mode-focus, color-mix(in srgb, var(--cp-chart-accent) 28%, transparent));
    outline-offset: 2px;
}

.convertapro-pair-chart-action:hover {
    transform: translateY(-1px);
    background: var(--cp-chart-export-active, var(--cp-chart-export-hover, color-mix(in srgb, var(--cp-chart-accent) 18%, transparent)));
    border-color: color-mix(in srgb, var(--cp-chart-accent) 42%, var(--cp-chart-export-border, transparent));
}

.convertapro-pair-chart-action:focus-visible {
    outline: 2px solid var(--cp-chart-export-focus, color-mix(in srgb, var(--cp-chart-accent) 28%, transparent));
    outline-offset: 2px;
}

.convertapro-pair-chart-stage {
    padding: var(--cp-chart-stage-padding, 0.75rem);
    border: var(--cp-chart-stage-border-w, 1px) solid var(--cp-chart-stage-border, color-mix(in srgb, var(--cp-chart-border-color) 70%, transparent));
    border-radius: var(--cp-chart-stage-radius, 24px);
    background: var(--cp-chart-stage-bg, linear-gradient(180deg, color-mix(in srgb, var(--cp-chart-surface-color) 88%, transparent), color-mix(in srgb, var(--cp-chart-panel-color) 96%, transparent)));
    box-shadow: var(--cp-chart-stage-shadow, none);
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.convertapro-pair-chart-canvas {
    width: 100%;
    height: min(var(--cp-chart-height), 72vh);
    min-height: 160px;
    max-width: 100%;
    padding: var(--cp-chart-canvas-padding, 0);
    border: var(--cp-chart-canvas-border-w, 0) solid var(--cp-chart-canvas-border, transparent);
    border-radius: var(--cp-chart-canvas-radius, 18px);
    background: var(--cp-chart-canvas-bg, var(--cp-chart-canvas-color));
    box-shadow: var(--cp-chart-canvas-shadow, none);
}

.convertapro-pair-chart-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    padding: var(--cp-chart-metrics-padding, 0);
    border: var(--cp-chart-metrics-border-w, 0) solid var(--cp-chart-metrics-border, transparent);
    border-radius: var(--cp-chart-metrics-radius, 0);
    background: var(--cp-chart-metrics-bg, transparent);
    box-shadow: var(--cp-chart-metrics-shadow, none);
    min-width: 0;
}

.convertapro-pair-chart-metric-card {
    display: grid;
    gap: 0.32rem;
    padding: var(--cp-chart-metric-card-padding, 0.9rem 0.95rem);
    border: var(--cp-chart-metric-card-border-w, 1px) solid var(--cp-chart-metric-card-border, color-mix(in srgb, var(--cp-chart-border-color) 70%, transparent));
    border-radius: var(--cp-chart-metric-card-radius, 18px);
    background: var(--cp-chart-metric-card-bg, color-mix(in srgb, var(--cp-chart-metric-color) 82%, transparent));
    box-shadow: var(--cp-chart-metric-card-shadow, none);
    min-width: 0;
}

.convertapro-pair-chart-metric-card.is-interactive {
    appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.convertapro-pair-chart-metric-card.is-interactive:hover,
.convertapro-pair-chart-metric-card.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cp-chart-accent) 42%, var(--cp-chart-metric-card-border, transparent));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--cp-chart-accent) 18%, transparent);
}

.convertapro-pair-chart-metric-card.is-interactive:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cp-chart-accent) 34%, transparent);
    outline-offset: 2px;
}

.convertapro-pair-chart-metric-card[data-cp-chart-card="current"].is-up .convertapro-pair-chart-metric-value,
.convertapro-pair-chart-metric-value.is-up {
    color: #0f766e;
}

.convertapro-pair-chart-metric-card[data-cp-chart-card="current"].is-down .convertapro-pair-chart-metric-value,
.convertapro-pair-chart-metric-value.is-down {
    color: #b42318;
}

.convertapro-pair-chart-metric-card[data-cp-chart-card="current"].is-neutral .convertapro-pair-chart-metric-value,
.convertapro-pair-chart-metric-value.is-neutral {
    color: #1d4ed8;
}

.convertapro-pair-chart-metric-label {
    font-size: var(--cp-chart-metric-label-font-size, 0.76rem);
    font-family: var(--cp-chart-metric-label-font-family, ui-sans-serif, system-ui, sans-serif);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cp-chart-metric-label-font-color, var(--cp-chart-muted-color));
}

.convertapro-pair-chart-metric-value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--cp-chart-metric-value-font-size, 1rem);
    font-family: var(--cp-chart-metric-value-font-family, ui-sans-serif, system-ui, sans-serif);
    font-weight: 700;
    color: var(--cp-chart-metric-value-font-color, var(--cp-chart-text-color));
}

.convertapro-pair-chart-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0.9rem;
    color: inherit;
}

.convertapro-pair-chart-footnote {
    display: grid;
    gap: 0.8rem;
    align-items: start;
    padding: var(--cp-chart-footer-padding, 0.9rem 1rem);
    border: var(--cp-chart-footer-border-w, 1px) solid var(--cp-chart-footer-border, color-mix(in srgb, var(--cp-chart-border-color) 68%, transparent));
    border-radius: var(--cp-chart-footer-radius, 18px);
    background: var(--cp-chart-footer-bg, color-mix(in srgb, var(--cp-chart-notice-color) 86%, transparent));
    box-shadow: var(--cp-chart-footer-shadow, none);
}

.convertapro-pair-chart-legend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: var(--cp-chart-footer-badge-padding, 0.38rem 0.72rem);
    border: var(--cp-chart-footer-badge-border-w, 1px) solid var(--cp-chart-footer-badge-border, color-mix(in srgb, var(--cp-chart-border-color) 70%, transparent));
    border-radius: var(--cp-chart-footer-badge-radius, 999px);
    background: var(--cp-chart-footer-badge-bg, color-mix(in srgb, var(--cp-chart-control-color) 82%, transparent));
    box-shadow: var(--cp-chart-footer-badge-shadow, none);
    color: var(--cp-chart-footer-badge-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-footer-badge-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-footer-badge-font-size, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.convertapro-pair-chart-legend-copy {
    line-height: 1.6;
    color: var(--cp-chart-footer-text-font-color, var(--cp-chart-muted-color));
    font-family: var(--cp-chart-footer-text-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-footer-text-font-size, 0.92rem);
}

.convertapro-pair-chart-upsell {
    padding: var(--cp-chart-upsell-padding, 0.85rem 1rem);
    border: var(--cp-chart-upsell-border-w, 1px) solid var(--cp-chart-upsell-border, color-mix(in srgb, var(--cp-chart-accent) 35%, transparent));
    border-radius: var(--cp-chart-upsell-radius, 16px);
    background: var(--cp-chart-upsell-bg, color-mix(in srgb, var(--cp-chart-accent) 10%, transparent));
    box-shadow: var(--cp-chart-upsell-shadow, none);
    color: var(--cp-chart-upsell-font-color, var(--cp-chart-text-color));
    font-family: var(--cp-chart-upsell-font-family, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--cp-chart-upsell-font-size, 0.88rem);
    line-height: 1.55;
    font-weight: 600;
}

.convertapro-pair-chart-window-shell {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.convertapro-pair-chart-window-shell.is-open {
    z-index: 14;
}

.convertapro-pair-chart-window-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.6rem);
    z-index: 12;
    width: min(320px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--cp-chart-border-color) 78%, transparent);
    border-radius: 16px;
    background: var(--cp-chart-panel-color);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.convertapro-pair-chart-window-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.convertapro-pair-chart-window-field {
    display: grid;
    gap: 0.35rem;
    color: var(--cp-chart-muted-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.convertapro-pair-chart-window-field input {
    appearance: none;
    width: 100%;
    min-width: 0;
    padding: 0.62rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--cp-chart-border-color) 76%, transparent);
    border-radius: 12px;
    background: var(--cp-chart-control-color);
    color: var(--cp-chart-text-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.convertapro-pair-chart-window-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    align-items: center;
}

.convertapro-pair-chart-window-button {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.58rem 0.84rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cp-chart-border-color) 76%, transparent);
    background: var(--cp-chart-control-color);
    color: var(--cp-chart-text-color);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

.convertapro-pair-chart-window-button.is-apply {
    border-color: color-mix(in srgb, var(--cp-chart-accent) 40%, transparent);
    background: color-mix(in srgb, var(--cp-chart-accent) 14%, var(--cp-chart-control-color));
}

.convertapro-pair-chart-window-message {
    margin: 0;
    color: #b42318;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

.cp-chart-tooltip {
    display: grid;
    gap: 0.45rem;
    min-width: 320px;
    max-width: min(520px, calc(100vw - 28px));
    overflow: hidden;
    box-sizing: border-box;
}

.cp-chart-tooltip-date {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.88;
}

.cp-chart-tooltip-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.cp-chart-tooltip-export {
    appearance: none;
    border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #ffffff 10%, transparent);
    color: inherit;
    font: 700 0.66rem/1.1 ui-sans-serif, system-ui, sans-serif;
    padding: 0.32rem 0.52rem;
    cursor: pointer;
    white-space: nowrap;
}

.cp-chart-tooltip-export:hover {
    background: color-mix(in srgb, #ffffff 18%, transparent);
}

.cp-chart-tooltip-export:focus-visible {
    outline: 2px solid color-mix(in srgb, #ffffff 44%, transparent);
    outline-offset: 2px;
}

.cp-chart-tooltip-note {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    opacity: 0.78;
}

.cp-chart-tooltip-muted {
    font-size: 0.76rem;
    font-weight: 700;
    opacity: 0.72;
}

.cp-chart-tooltip-strong {
    font-weight: 800;
}

.cp-chart-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: center;
}

.cp-chart-tooltip-series {
    display: grid;
    gap: 0.2rem;
    padding-top: 0.35rem;
    padding-bottom: 0.1rem;
    border-top: 1px dashed color-mix(in srgb, #ffffff 24%, transparent);
}

.cp-chart-tooltip-series-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-width: 0;
}

.cp-chart-tooltip-series-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.cp-chart-tooltip-series:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.cp-chart-tooltip-series-title {
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.96;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cp-chart-tooltip-series-meta {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cp-chart-tooltip-label {
    font-size: 0.76rem;
    opacity: 0.78;
    min-width: 0;
}

.cp-chart-tooltip-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: inherit;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cp-chart-tooltip-state {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.cp-chart-tooltip-state.is-up {
    color: #0f766e;
}

.cp-chart-tooltip-state.is-down {
    color: #b42318;
}

.cp-chart-tooltip-state.is-neutral {
    color: #1d4ed8;
}

.cp-chart-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0.9rem;
}

.cp-chart-tooltip-rate {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

.cp-chart-tooltip-rate-value {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.convertapro-pair-chart-fallback {
    display: grid;
    place-items: center;
    height: 100%;
    text-align: center;
    color: var(--cp-chart-muted-color);
    font-weight: 600;
}

@media (max-width: 900px) {
    .convertapro-pair-chart-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .convertapro-pair-chart {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .convertapro-pair-chart .convertapro-pair-section-heading-copy {
        grid-template-columns: 1fr;
        row-gap: 0.45rem;
    }

    .convertapro-pair-chart .convertapro-pair-section-heading-copy h2,
    .convertapro-pair-chart .convertapro-pair-section-heading-copy .convertapro-pair-section-support {
        grid-column: auto;
    }

    .convertapro-pair-chart-header-cluster {
        grid-row: auto;
        margin-bottom: 0.1rem;
    }

    .convertapro-pair-chart-header-state-icon {
        width: calc(min(var(--cp-chart-cluster-icon-size, 2.4rem), 2.2rem) * 0.83);
        min-width: calc(min(var(--cp-chart-cluster-icon-size, 2.4rem), 2.2rem) * 0.83);
        height: calc(min(var(--cp-chart-cluster-icon-size, 2.4rem), 2.2rem) * 0.83);
        min-height: calc(min(var(--cp-chart-cluster-icon-size, 2.4rem), 2.2rem) * 0.83);
    }

    .convertapro-pair-chart-header-flag-shell {
        width: min(var(--cp-chart-cluster-flag-size, 3rem), 2.35rem);
        min-width: min(var(--cp-chart-cluster-flag-size, 3rem), 2.35rem);
        height: min(var(--cp-chart-cluster-flag-size, 3rem), 2.35rem);
        min-height: min(var(--cp-chart-cluster-flag-size, 3rem), 2.35rem);
    }

    .convertapro-pair-chart-toolbar,
    .convertapro-pair-chart-control-group,
    .convertapro-pair-chart-action-group,
    .convertapro-pair-chart-comparison-group,
    .convertapro-pair-chart-comparison-chips {
        width: 100%;
    }

    .convertapro-pair-chart-comparison-chips {
        align-items: flex-start;
        gap: 0.42rem;
        justify-content: flex-start;
    }

    .convertapro-pair-chart-comparison-chip {
        font-size: 0.74rem;
        padding: 0.38rem 0.6rem;
    }

    .convertapro-pair-chart-toolbar {
        justify-content: flex-start;
    }

    .convertapro-pair-chart-canvas {
        height: min(var(--cp-chart-height), 62vh);
    }

    .convertapro-pair-chart-metrics {
        grid-template-columns: 1fr;
    }

    .convertapro-pair-chart-metric-card,
    .convertapro-pair-chart-metric-value,
    .convertapro-pair-chart-metric-label,
    .convertapro-pair-chart-window-shell {
        min-width: 0;
    }

    .convertapro-pair-chart-window-panel {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 0.6rem;
        right: auto;
        bottom: auto;
    }

    .convertapro-pair-chart-window-grid {
        grid-template-columns: 1fr;
    }

    .convertapro-pair-chart-window-actions {
        width: 100%;
    }

    .cp-chart-tooltip {
        min-width: 0;
        max-width: min(94vw, 420px);
    }

    .cp-chart-tooltip-series-main {
        grid-template-columns: 1fr;
        gap: 0.38rem;
    }

    .cp-chart-tooltip-rate {
        justify-content: flex-start;
        white-space: normal;
        flex-wrap: wrap;
    }

    .cp-chart-tooltip-rate-value {
        font-size: 0.9rem;
    }

    .convertapro-pair-chart-footnote {
        gap: 0.65rem;
    }
}