/* ── Breadcrumb ── */
.ms-breadcrumb {
background: var(--brand);
padding: 10px 20px;
position: sticky;
top: 64px;
z-index: 20;
}
.ms-breadcrumb__inner {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: #9db8d8;
}
.ms-breadcrumb a { color: #c8d8f0; text-decoration: none; }
.ms-breadcrumb a:hover { color: #fff; }
.ms-breadcrumb i { font-size: 8px; color: #5a7a9a; }

/* ── Hero ── */
.ms-hero-sm {
background: var(--brand);
padding: 48px 0 56px;
text-align: center;
}
.ms-hero-sm__eyebrow {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(248,200,66,0.15); color: var(--gold);
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 6px 16px; border-radius: 100px; margin-bottom: 20px;
border: 1px solid rgba(248,200,66,0.25);
}
.ms-hero-sm__title {
font-size: clamp(28px, 5vw, 44px); font-weight: 700; color: #fff;
line-height: 1.15; margin-bottom: 10px;
}
.ms-hero-sm__title span { color: var(--gold); }
.ms-hero-sm__sub { color: #9db8d8; font-size: 15px; margin-bottom: 28px; }

.ms-stats-bar {
display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.ms-stats-bar__item { text-align: center; }
.ms-stats-bar__num { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; color: var(--gold); }
.ms-stats-bar__label { font-size: 12px; color: #9db8d8; margin-top: 2px; }

/* ── Layout ── */
.ms-layout {
max-width: 1000px; margin: 0 auto; padding: 40px 20px;
}

/* ── Tabs ── */
.ms-tabs {
display: flex; gap: 4px; background: var(--surface);
border-radius: var(--radius-md); padding: 4px; margin-bottom: 24px;
}
.ms-tabs__tab {
flex: 1; text-align: center; padding: 10px 20px;
font-size: 13px; font-weight: 500; color: var(--muted);
border-radius: var(--radius-sm); cursor: pointer;
transition: all 0.15s; border: none; background: transparent;
font-family: 'DM Sans', sans-serif;
}
.ms-tabs__tab:hover { color: var(--text); }
.ms-tabs__tab.active { background: var(--white); color: var(--brand); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ── Table ── */
.ms-table-wrap {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden;
}
.ms-table {
width: 100%; border-collapse: collapse;
}
.ms-table th {
text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
background: var(--surface); border-bottom: 1px solid var(--border);
}
.ms-table th.ms-right { text-align: right; }
.ms-table td {
padding: 14px 16px; border-bottom: 1px solid var(--surface);
font-size: 14px; vertical-align: middle;
}
.ms-table tr:last-child td { border-bottom: none; }
.ms-table tr:hover td { background: #fafbfc; }
.ms-table td.ms-right { text-align: right; }

/* ── Rank Badge ── */
.ms-rank {
width: 36px; height: 36px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
}
.ms-rank--gold { background: var(--gold); color: #3a2a00; }
.ms-rank--silver { background: #cbd5e1; color: #334155; }
.ms-rank--bronze { background: #d97706; color: #fff; }
.ms-rank--other { background: var(--surface); color: var(--muted); }

/* ── Avatar ── */
.ms-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--brand-light); color: var(--brand);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.ms-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Empty ── */
.ms-empty {
text-align: center; padding: 56px 20px;
}
.ms-empty__icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--surface); display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px; font-size: 24px; color: #cbd5e1;
}
.ms-empty h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.ms-empty p { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

/* ── CTA ── */
.ms-cta-card {
margin-top: 32px; background: var(--brand-light);
border: 1px solid #c5d5eb; border-radius: var(--radius-lg);
padding: 32px; text-align: center;
}
.ms-cta-card h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ms-cta-card p { font-size: 14px; color: var(--muted); margin-bottom: 20px; }

.ms-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px; border-radius: 100px;
font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600;
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
}
.ms-btn--brand { background: var(--brand); color: #fff; }
.ms-btn--brand:hover { background: #142f58; }
.ms-btn--outline { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.ms-btn--outline:hover { background: var(--brand); color: #fff; }
.ms-btn--accent { background: var(--accent); color: #fff; }
.ms-btn--accent:hover { background: #c73030; }

@media (max-width: 640px) {
.ms-hero-sm { padding: 36px 0 40px; }
.ms-stats-bar { gap: 24px; }
.ms-stats-bar__num { font-size: 20px; }
.ms-table th, .ms-table td { padding: 10px 12px; font-size: 12px; }
.ms-rank { width: 30px; height: 30px; font-size: 12px; }
}