.score-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 900;
flex-shrink: 0;
line-height: 1;
}
.score-circle.sm { width: 32px; height: 32px; font-size: 12px; }
.score-circle.lg { width: 48px; height: 48px; font-size: 16px; }
.score-circle.xl { width: 56px; height: 56px; font-size: 20px; }
.score-circle.red { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.score-circle.yellow { background: linear-gradient(135deg, #F59E0B, #D97706); }
.score-circle.green { background: linear-gradient(135deg, #16A34A, #15803D); }
.score-circle.blue { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.score-circle.purple { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.score-circle.gray { background: linear-gradient(135deg, #94A3B8, #64748B); }
.rank-badge {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 900;
flex-shrink: 0;
line-height: 1;
}
.rank-badge.gold { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.rank-badge.silver { background: linear-gradient(135deg, #94A3B8, #64748B); color: #fff; }
.rank-badge.bronze { background: linear-gradient(135deg, #FDBA74, #F97316); color: #fff; }
.rank-badge.normal { background: #F1F5F9; color: #64748B; }
.card-accent { border-left: 3px solid transparent; }
.card-accent.primary { border-left-color: var(--primary, #2563EB); }
.card-accent.success { border-left-color: #16A34A; }
.card-accent.warning { border-left-color: #F59E0B; }
.card-accent.danger { border-left-color: #DC2626; }
.card-accent.purple { border-left-color: #7C3AED; }
.card-accent.cyan { border-left-color: #06B6D4; }
.card-accent.pink { border-left-color: #EC4899; }
.bg-gradient-red { background: linear-gradient(135deg, #FEF2F2, #FEE2E2); }
.bg-gradient-yellow { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); }
.bg-gradient-green { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); }
.bg-gradient-blue { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.bg-gradient-purple { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); }
.bg-gradient-cyan { background: linear-gradient(135deg, #ECFEFF, #CFFAFE); }
.bg-gradient-pink { background: linear-gradient(135deg, #FDF2F8, #FCE7F3); }
.bg-gradient-slate { background: linear-gradient(135deg, #F8FAFC, #F1F5F9); }
.border-red { border-color: #FECACA; }
.border-yellow { border-color: #FDE68A; }
.border-green { border-color: #BBF7D0; }
.border-blue { border-color: #BFDBFE; }
.border-purple { border-color: #DDD6FE; }
.hover-lift { transition: transform .2s; }
.hover-lift:hover { transform: translateY(-2px); }
.hover-lift-sm { transition: transform .2s; }
.hover-lift-sm:hover { transform: translateY(-1px); }
.hover-slide { transition: transform .2s; }
.hover-slide:hover { transform: translateX(2px); }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-2line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-28 { font-size: 28px; }
.fs-32 { font-size: 32px; }
.lh-1 { line-height: 1; }
.lh-11 { line-height: 1.1; }
.lh-12 { line-height: 1.2; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-17 { line-height: 1.7; }
.lh-18 { line-height: 1.8; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.gap-20 { gap: 20px; }
.radius-8 { border-radius: 8px; }
.radius-10 { border-radius: 10px; }
.radius-12 { border-radius: 12px; }
.radius-14 { border-radius: 14px; }
.radius-16 { border-radius: 16px; }
.radius-20 { border-radius: 20px; }
.opacity-85 { opacity: .85; }
.opacity-90 { opacity: .9; }
.opacity-95 { opacity: .95; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.shadow-md { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.text-red { color: #DC2626; }
.text-yellow { color: #D97706; }
.text-green { color: #16A34A; }
.text-blue { color: #2563EB; }
.text-purple { color: #7C3AED; }
.text-cyan { color: #06B6D4; }
.text-pink { color: #EC4899; }
.text-slate { color: #64748B; }
.progress-sm { height: 4px; border-radius: 2px; }
.progress-md { height: 6px; border-radius: 3px; }
.progress-lg { height: 8px; border-radius: 4px; }
.divider { height: 1px; background: rgba(60,60,67,.06); margin: 12px 0; }
.divider-lg { height: 1px; background: rgba(60,60,67,.08); margin: 16px 0; }
.list-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 6px;
background: #fff;
border: 1px solid rgba(60,60,67,.06);
}
.kpi-mini {
text-align: center;
padding: 10px 6px;
border-radius: 10px;
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.table-compact th,
.table-compact td {
padding: 8px 10px;
font-size: 13px;
}
@media(max-width:767px) {
.hide-sm { display: none !important; }
.full-sm { width: 100% !important; }
}
@media(max-width:1023px) {
.hide-md { display: none !important; }
}