.tm-performance-provider,
.tm-performance-provider * {
    box-sizing: border-box;
}

.tm-performance-provider {
    margin: 18px 0;
    scroll-margin-top: 24px;
}

.tm-performance-hero {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 170px;
    gap: 24px;
    padding: 26px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.13), transparent 26%),
        linear-gradient(135deg, #081521, #1e293b 62%, #081521);
    color: #fff;
    box-shadow: 0 18px 45px rgba(15,23,42,.17);
    align-items: center;
}

.tm-performance-ring {
    --tm-score: 0;
    display: grid;
    width: 128px;
    height: 128px;
    padding: 10px;
    border-radius: 50%;
    background:
        conic-gradient(
            #22c55e calc(var(--tm-score) * 1%),
            rgba(255,255,255,.13) 0
        );
    place-items: center;
}

.tm-performance-ring > div {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #081521;
    place-items: center;
    align-content: center;
}

.tm-performance-ring strong,
.tm-performance-ring span {
    display: block;
}

.tm-performance-ring strong {
    color: #fff;
    font-size: 38px;
    line-height: 1;
}

.tm-performance-ring span {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 10px;
}

.tm-performance-hero-copy p {
    margin: 0;
    color: #FF8F26;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.tm-performance-hero-copy h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: clamp(28px,4vw,42px);
}

.tm-performance-hero-copy > span {
    display: block;
    max-width: 700px;
    margin-top: 9px;
    color: #cbd5e1;
    line-height: 1.6;
}

.tm-performance-confidence {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
    gap: 12px;
    max-width: 520px;
    margin-top: 16px;
    align-items: center;
}

.tm-performance-confidence span,
.tm-performance-confidence strong {
    display: block;
}

.tm-performance-confidence span {
    color: #94a3b8;
    font-size: 9px;
    text-transform: uppercase;
}

.tm-performance-confidence strong {
    margin-top: 3px;
    color: #fff;
}

.tm-performance-confidence-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.tm-performance-confidence-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #60a5fa;
}

.tm-performance-trend {
    padding: 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(15,23,42,.35);
}

.tm-performance-trend span,
.tm-performance-trend strong,
.tm-performance-trend small {
    display: block;
}

.tm-performance-trend span {
    color: #94a3b8;
    font-size: 9px;
    text-transform: uppercase;
}

.tm-performance-trend strong {
    margin-top: 6px;
    color: #cbd5e1;
    font-size: 28px;
}

.tm-performance-trend strong.is-up {
    color: #86efac;
}

.tm-performance-trend strong.is-down {
    color: #FF8F26;
}

.tm-performance-trend small {
    margin-top: 5px;
    color: #94a3b8;
    line-height: 1.4;
}

.tm-performance-dimensions {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 8px;
    margin-top: 11px;
}

.tm-performance-dimensions article {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
}

.tm-performance-dimensions header {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: space-between;
    align-items: flex-end;
}

.tm-performance-dimensions span,
.tm-performance-dimensions strong {
    display: block;
}

.tm-performance-dimensions span {
    color: #64748b;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.tm-performance-dimensions strong {
    color: #081521;
    font-size: 10px;
    white-space: nowrap;
}

.tm-performance-dimensions article > div {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.tm-performance-dimensions article > div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#FF7A00,#22c55e);
}

.tm-performance-lower {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 11px;
}

.tm-performance-metrics,
.tm-performance-actions {
    padding: 17px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
}

.tm-performance-metrics h3,
.tm-performance-actions h3 {
    margin: 0 0 12px;
    color: #081521;
}

.tm-performance-metrics > div {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.tm-performance-metrics article {
    padding: 10px;
    border-radius: 9px;
    background: #f8fafc;
}

.tm-performance-metrics span,
.tm-performance-metrics strong {
    display: block;
}

.tm-performance-metrics span {
    color: #64748b;
    font-size: 8px;
    text-transform: uppercase;
}

.tm-performance-metrics strong {
    margin-top: 5px;
    color: #081521;
    font-size: 16px;
}

.tm-performance-actions > div {
    display: grid;
    gap: 7px;
}

.tm-performance-actions a {
    display: block;
    padding: 10px;
    border-left: 3px solid #FF7A00;
    border-radius: 8px;
    background: #f8fafc;
    text-decoration: none;
}

.tm-performance-actions strong,
.tm-performance-actions span {
    display: block;
}

.tm-performance-actions strong {
    color: #081521;
    font-size: 11px;
}

.tm-performance-actions span {
    margin-top: 4px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.45;
}

.tm-performance-disclosure {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 1150px) {
    .tm-performance-dimensions {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

@media (max-width: 850px) {
    .tm-performance-hero {
        grid-template-columns: 130px minmax(0,1fr);
    }

    .tm-performance-trend {
        grid-column: 1 / -1;
    }

    .tm-performance-lower {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .tm-performance-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .tm-performance-ring {
        width: 112px;
        height: 112px;
    }

    .tm-performance-confidence {
        grid-template-columns: 1fr;
    }

    .tm-performance-dimensions,
    .tm-performance-metrics > div {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}