/* XP / level / streak widget — mirrors hub tokens (variables.css) */
.xpw {
  background: var(--gradient-primary, linear-gradient(135deg,#273e57,#1a2940));
  color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body, 'Manrope', system-ui, -apple-system, sans-serif);
  border: 1px solid rgba(198,163,84,0.14);
  box-shadow: 0 12px 32px rgba(11,20,36,0.18);
}
.xpw-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.xpw-level {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(198,163,84,0.2);
  border: 1px solid rgba(198,163,84,0.4);
  font-family: var(--font-display, 'Space Grotesk', 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #c6a354;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.xpw-level-silver { background: rgba(200,210,220,0.16); border-color: rgba(200,210,220,0.35); color: #d8e0ef; }
.xpw-level-gold   { background: rgba(232,201,122,0.2);  border-color: rgba(232,201,122,0.45); color: #e8c97a; }
.xpw-level-expert { background: rgba(169,119,255,0.22); border-color: rgba(169,119,255,0.5);  color: #c9b4ff; }

.xpw-xp {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.xpw-bar {
  height: 6px;
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  overflow: hidden;
}
.xpw-bar-fill {
  height: 100%;
  background: var(--gradient-gold, linear-gradient(90deg,#c6a354,#e8c97a));
  transition: width 0.6s ease;
  border-radius: 999px;
}
.xpw-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
}
.xpw-streak {
  font-weight: 600;
  color: #ffb77a;
}