.scoring-page .scoring-hero{
    border-radius: 26px;
    padding: 1.9rem;
    border: 1px solid rgba(17, 24, 39, .12);
    background:
        linear-gradient(130deg, rgba(17, 24, 39, .97), rgba(31, 41, 55, .95));
    box-shadow: 0 24px 46px rgba(17, 24, 39, .25);
    position: relative;
    overflow: hidden;
}
.scoring-page .scoring-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(34, 197, 94, .16) 0 2px, transparent 2px 100%),
        linear-gradient(0deg, rgba(56, 189, 248, .09) 0 1px, transparent 1px 100%);
    background-size: 48px 100%, 100% 38px;
    pointer-events: none;
}
.scoring-page .scoring-hero-inner{
    position: relative;
    z-index: 1;
}
.scoring-page .hero-badge{
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .74rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 800;
    color: #86efac;
    border: 1px solid rgba(134, 239, 172, .45);
    background: rgba(34, 197, 94, .14);
}
.scoring-page .hero-title{
    font-size: 2.18rem;
    margin: .8rem 0 .38rem;
    color: #f8fafc;
    font-weight: 900;
}
.scoring-page .hero-subtitle{
    margin: 0;
    max-width: 79ch;
    color: rgba(226, 232, 240, .92);
}
.scoring-page .pill{
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .28rem .62rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 700;
    color: #d1fae5;
    border: 1px solid rgba(167, 243, 208, .35);
    background: rgba(16, 185, 129, .18);
}

.scoring-page .score-card{
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: rgba(15, 23, 42, .38);
    box-shadow: 0 16px 30px rgba(15, 23, 42, .2);
}
.scoring-page .score-tile{
    background: rgba(248, 250, 252, .95);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .35);
    padding: .95rem;
}
.scoring-page .score-label{
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #475569;
    font-weight: 800;
}
.scoring-page .score-value{
    font-size: 2rem;
    font-weight: 900;
    margin-top: .2rem;
    color: #0f172a;
}
.scoring-page .mini{
    font-size: .9rem;
    color: #64748b;
}

.scoring-page .toc,
.scoring-page .section-card{
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .09);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}
.scoring-page .toc{
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.scoring-page .toc a{
    text-decoration: none;
    color: #0f172a;
    font-weight: 600;
}
.scoring-page .section-card{
    overflow: hidden;
}
.scoring-page .section-card h3{
    font-weight: 900;
    font-size: 1.24rem;
}
.scoring-page .section-card .callout{
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, .25);
    background: linear-gradient(180deg, rgba(220, 252, 231, .5), rgba(236, 253, 245, .95));
    padding: .95rem 1rem;
}
.scoring-page .muted{
    color: #475569;
}
.scoring-page .scoring-hero .callout{
    border-radius: 14px;
    border: 1px solid rgba(110, 231, 183, .45);
    background: rgba(15, 23, 42, .5);
    padding: .9rem 1rem;
}
.scoring-page .scoring-hero .callout .fw-bold{
    color: #f8fafc;
}
.scoring-page .scoring-hero .callout .muted,
.scoring-page .scoring-hero .callout .small{
    color: rgba(226, 232, 240, .96) !important;
}

.scoring-page .card:hover,
.scoring-page .section-card:hover,
.scoring-page .score-tile:hover{
    transform: none;
}

@media (max-width: 576px){
    .scoring-page .scoring-hero{
        padding: 1.35rem;
    }
    .scoring-page .hero-title{
        font-size: 1.76rem;
    }
}