.mhcs-wrap {
--mhcs-orange: #ff6b00;
--mhcs-orange-light: #ffb347;
--mhcs-card: #132a3e;
--mhcs-border: rgba(255, 255, 255, 0.12);
--mhcs-text: #ffffff;
--mhcs-muted: #c7d1df;
color: var(--mhcs-text);
margin: 2rem 0;
}
.mhcs-heading-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1.5rem;
}
.mhcs-wrap h2,
.mhcs-wrap h3,
.mhcs-wrap p {
color: inherit;
}
.mhcs-wrap h2 {
margin: 0 0 0.6rem;
}
.mhcs-intro {
color: var(--mhcs-muted) !important;
margin: 0;
max-width: 760px;
}
.mhcs-total {
background: linear-gradient(135deg, var(--mhcs-orange), #b74721);
border-radius: 16px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
min-width: 210px;
padding: 1rem 1.2rem;
text-align: right;
}
.mhcs-total span {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
opacity: 0.88;
text-transform: uppercase;
}
.mhcs-total strong {
display: block;
font-size: clamp(1.75rem, 4vw, 2.4rem);
line-height: 1.1;
margin-top: 0.25rem;
}
.mhcs-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.mhcs-card {
background: var(--mhcs-card);
border: 1px solid var(--mhcs-border);
border-radius: 16px;
color: var(--mhcs-text) !important;
display: block;
min-height: 170px;
padding: 1.15rem;
text-decoration: none !important;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
a.mhcs-card:hover,
a.mhcs-card:focus-visible {
border-color: var(--mhcs-orange);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
color: var(--mhcs-text) !important;
transform: translateY(-3px);
}
.mhcs-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.mhcs-platform,
.mhcs-percentage {
font-size: 0.78rem;
font-weight: 750;
}
.mhcs-platform {
color: var(--mhcs-orange-light);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.mhcs-percentage {
color: var(--mhcs-muted);
}
.mhcs-card h3 {
font-size: 1.15rem;
margin: 1.1rem 0 0.3rem;
}
.mhcs-count {
color: var(--mhcs-muted) !important;
margin: 0;
}
.mhcs-count strong {
color: var(--mhcs-text);
font-size: 1.8rem;
line-height: 1;
}
.mhcs-bar {
background: rgba(255, 255, 255, 0.1);
border-radius: 999px;
height: 7px;
margin-top: 1.2rem;
overflow: hidden;
}
.mhcs-bar span {
background: linear-gradient(90deg, var(--mhcs-orange), var(--mhcs-orange-light));
border-radius: inherit;
display: block;
height: 100%;
min-width: 3px;
}
.mhcs-note,
.mhcs-updated,
.mhcs-empty {
color: var(--mhcs-muted) !important;
font-size: 0.85rem;
}
.mhcs-note {
margin: 1.2rem 0 0;
}
.mhcs-updated {
margin: 0.35rem 0 0;
}
.mhcs-empty {
background: var(--mhcs-card);
border: 1px solid var(--mhcs-border);
border-radius: 12px;
padding: 1rem;
}
@media (max-width: 680px) {
.mhcs-heading-row {
flex-direction: column;
gap: 1rem;
}
.mhcs-total {
min-width: 0;
text-align: left;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.mhcs-card {
transition: none;
}
}