.r4it-career-chart-card {
    overflow: hidden;
}

.r4it-career-chart-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.r4it-career-chart-copy {
    max-width: 760px;
}

.r4it-career-chart-heading {
    margin: 0 0 0.35rem;
}

.r4it-career-chart-intro {
    margin: 0;
}

.r4it-career-chart-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.r4it-career-chart-toolbar button {
    background: #1b6b73;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.r4it-career-chart-toolbar button:last-child {
    background: #fff;
    color: #1f2a30;
    border: 1px solid rgba(31, 42, 48, 0.18);
}

.r4it-career-chart-full-preview-row {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.r4it-career-chart-full-preview-btn {
    background: #fff;
    color: #1b6b73;
    border: 1px solid rgba(27, 107, 115, 0.35);
    border-radius: 999px;
    padding: 0.6rem 1.05rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.r4it-career-chart-full-preview-btn:hover {
    background: rgba(27, 107, 115, 0.06);
}

.r4it-career-chart-full-preview-hint {
    margin: 0;
    font-size: 0.9rem;
}

.r4it-career-chart-frame {
    margin-top: 1rem;
    border: 1px solid rgba(31, 42, 48, 0.08);
    border-radius: 16px;
    overflow: auto;
    background: linear-gradient(180deg, rgba(244, 248, 250, 0.9), rgba(255, 255, 255, 0.96));

    --r4it-career-axis-label-color: #4f6169;
    --r4it-career-year-label-color: var(--r4it-career-axis-label-color);
    --r4it-career-track-label-color: var(--r4it-career-axis-label-color);
}

.r4it-career-chart-frame svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 900px) {
    .r4it-career-chart-frame:not([data-r4it-chart-readonly="1"]) svg {
        min-width: 980px;
    }
}

.r4it-career-chart-bar-label {
    fill: #1f2a30;
    font-family: Georgia, serif;
    font-size: 10px;
}

.r4it-career-chart-bar-label tspan {
    font-family: Georgia, serif;
}

.r4it-career-chart-bar-label-range {
    fill: #4f6169;
    font-style: italic;
}

.r4it-career-chart-bar {
    rx: 6;
    ry: 6;
}

.r4it-career-chart-title {
    fill: #1f2a30;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 700;
}

.r4it-career-chart-axis text {
    fill: currentColor;
    color: var(--r4it-career-axis-label-color);
    font-family: Georgia, serif;
    font-size: 12px;
}

.r4it-career-chart-year-label {
    color: var(--r4it-career-year-label-color);
}

.r4it-career-chart-track-label {
    color: var(--r4it-career-track-label-color);
}

.r4it-career-chart-grid {
    stroke: #d9e4e8;
    stroke-width: 1;
}

.r4it-career-chart-track-line {
    stroke: #c7d6dc;
    stroke-width: 1.5;
}

.r4it-career-chart-export-note {
    margin-top: 0.85rem;
}

.r4it-career-chart-qr-overlay {
    pointer-events: none;
}

.r4it-career-chart-qr-label {
    fill: #3b4950;
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: 700;
}

.r4it-career-chart-qr-logo-text {
    font-family: Georgia, serif;
}