.xp-page{ max-width:960px; margin:0 auto; padding:24px 16px 80px; display:flex; flex-direction:column; gap:24px; }
.xp-header{ display:flex; flex-direction:column; gap:8px; }
.xp-subtitle{ margin:0; color:#c7d4ff; font-size:1rem; }
.xp-card{ background:rgba(17,23,53,.82); border:1px solid var(--border); border-radius:20px; padding:24px; box-shadow:0 24px 48px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:16px; }
.xp-card__title{ margin:0; font-size:clamp(1.3rem,3vw,1.75rem); }
.xp-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; align-items:stretch; }
.xp-summary__metric{ background:rgba(9,12,30,.9); border:1px solid rgba(134,225,225,.18); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:6px; box-shadow:inset 0 1px 0 rgba(134,225,225,.15); }
.xp-summary__label{ font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; color:#86e1e1; }
.xp-summary__value{ font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; color:#f9fbff; }
.xp-progress{ display:flex; flex-direction:column; gap:12px; }
.xp-progress__bar{ width:100%; height:16px; border-radius:999px; background:rgba(13,18,43,.9); border:1px solid rgba(134,225,225,.2); overflow:hidden; position:relative; }
.xp-progress__fill{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#6ee7e7 0%,#a78bfa 100%); transition:width .4s ease; }
.xp-progress__details{ font-size:.95rem; color:#d8e4ff; }
.xp-details__text{ margin:0; color:#d8e4ff; }
.xp-details__hint{ margin:0; color:#9fb4ff; font-size:.9rem; }

@media (max-width:820px){
  .xp-page{ padding-top:16px; }
  .xp-card{ padding:20px; }
  .xp-summary{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}