.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px }
.dash-stat { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px; text-align: center; transition: all .3s var(--ease); box-shadow: var(--shadow-sm) }
.dash-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) }
.dash-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 12px; color: #fff }
.dash-stat-icon.blue { background: linear-gradient(135deg, var(--primary), #3b82f6) }
.dash-stat-icon.green { background: linear-gradient(135deg, var(--success), #34d399) }
.dash-stat-icon.purple { background: linear-gradient(135deg, var(--purple), #a78bfa) }
.dash-stat-icon.amber { background: linear-gradient(135deg, var(--accent), #fbbf24) }
.dash-stat-value { font-size: 28px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: var(--text-primary) }
.dash-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500 }

.steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 32px }
.step-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px; cursor: pointer; transition: all .3s var(--ease); box-shadow: var(--shadow-sm); position: relative; overflow: hidden }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); border-color: #93c5fd }
.step-card.completed { border-color: rgba(16, 185, 129, .3) }
.step-card.completed::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--success), #34d399) }
.step-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px }
.step-card-num { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #3b82f6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: 'Space Grotesk', sans-serif; color: #fff }
.step-card-ring { position: relative; width: 48px; height: 48px }
.step-card-ring svg { width: 48px; height: 48px }
.step-card-ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif }
.step-card-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary) }
.step-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px }
.step-card-footer { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-muted) }
.step-card-footer i { font-size: 10px }
.step-card-time, .step-card-xp { display: flex; align-items: center; gap: 4px }
.step-card-chevron { margin-left: auto; color: var(--text-muted); transition: transform .2s }
.step-card:hover .step-card-chevron { transform: translateX(4px); color: var(--primary) }

.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px }
.badge-card { text-align: center; padding: 24px 14px; border-radius: var(--radius-lg); border: 2px solid var(--card-border); background: var(--card-bg); transition: all .3s var(--ease) }
.badge-card.unlocked { border-color: rgba(245, 158, 11, .3); background: rgba(245, 158, 11, .02) }
.badge-card.locked { opacity: .5; filter: grayscale(.5) }
.badge-card.unlocked:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 32px rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .5) }
.badge-card-icon { font-size: 40px; display: block; margin-bottom: 10px }
.badge-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); font-family: 'Space Grotesk', sans-serif }
.badge-card-desc { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4 }

.lb-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--card-border); transition: background .2s }
.lb-item:hover { background: rgba(241, 245, 249, .5) }
.lb-item.me { background: var(--primary-light); border-radius: var(--radius-sm) }
.lb-rank { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; background: #f1f5f9; color: var(--text-secondary) }
.lb-rank.gold { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #fff }
.lb-rank.silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #fff }
.lb-rank.bronze { background: linear-gradient(135deg, #fed7aa, #f97316); color: #fff }
.lb-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; color: var(--text-secondary) }
.lb-info { flex: 1; min-width: 0 }
.lb-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--text-primary) }
.lb-level { font-size: 12px; color: var(--text-muted) }
.lb-badge-you { font-size: 10px; padding: 2px 8px; background: var(--primary); color: #fff; border-radius: 10px; font-weight: 700 }
.lb-progress { flex: 1; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; max-width: 200px }
.lb-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: 3px }
.lb-xp { font-weight: 700; font-size: 14px; font-family: 'Space Grotesk', sans-serif; color: var(--primary); flex-shrink: 0 }

@media (max-width: 1200px) { .dash-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr }
  .dash-grid { grid-template-columns: 1fr 1fr; gap: 12px }
  .dash-stat { padding: 16px }
  .dash-stat-icon { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; margin-bottom: 8px }
  .dash-stat-value { font-size: 22px }
  .step-card { padding: 18px }
  .step-card-title { font-size: 14px }
  .step-card-desc { font-size: 11px; margin-bottom: 12px }
  .badges-grid { grid-template-columns: repeat(2, 1fr); gap: 10px }
  .badge-card { padding: 16px 10px }
  .badge-card-icon { font-size: 30px }
  .lb-item { padding: 12px 14px; gap: 10px }
  .lb-progress { display: none }
}
@media (max-width: 480px) {
  .dash-grid { grid-template-columns: 1fr }
}