:root{
  --mp-deep:#3f315f;
  --mp-purple:#7453a5;
  --mp-violet:#9a76bf;
  --mp-pink:#f7e7ef;
  --mp-lilac:#f1eafa;
  --mp-gold:#d8b663;
  --mp-ink:#574f68;
  --mp-border:#dfd6e9;
}

.mps-mp-wrap{max-width:1180px;margin:28px auto;color:var(--mp-ink);font-family:inherit}
.mps-mp-wrap *{box-sizing:border-box}
.mps-mp-alert,.mps-mp-login{padding:18px 22px;margin-bottom:20px;text-align:center;border:1px solid var(--mp-border);border-radius:20px;background:linear-gradient(135deg,#fff,#f8f3fc);box-shadow:0 10px 28px rgba(63,49,95,.08)}
.mps-mp-login a{display:inline-block;margin-top:12px;padding:10px 20px;border-radius:999px;background:var(--mp-purple);color:#fff;text-decoration:none}

.mps-mp-hero{position:relative;display:grid;grid-template-columns:170px 1fr;gap:30px;align-items:center;overflow:hidden;padding:42px;border-radius:32px;background:radial-gradient(circle at 16% 20%,rgba(255,255,255,.15),transparent 22%),linear-gradient(145deg,#292141,#4d376b 55%,#8a5d91);color:#fff;box-shadow:0 22px 50px rgba(63,49,95,.26)}
.mps-mp-stars{position:absolute;right:25px;top:15px;color:#ecd184;font-size:26px;letter-spacing:1rem}
.mps-mp-avatar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,#fff9df 0 24%,#dcb96c 25% 49%,#75529d 50% 100%);font-size:74px;box-shadow:0 0 0 13px rgba(255,255,255,.06),0 18px 34px rgba(0,0,0,.24)}
.mps-mp-kicker{letter-spacing:.15em;font-size:13px;font-weight:800;color:#eadcf4}
.mps-mp-hero h2{margin:8px 0;font-size:clamp(36px,6vw,62px);font-weight:500}
.mps-mp-hero p{margin:0;color:#eee5f4;font-size:20px;line-height:1.62}

.mps-mp-level{display:grid;grid-template-columns:95px 1fr;gap:18px;align-items:center;margin:18px 0;padding:24px;border:1px solid #eadfc5;border-radius:24px;background:linear-gradient(135deg,#fff8dc,#fff,#f3ebfa);box-shadow:0 12px 32px rgba(63,49,95,.08)}
.mps-mp-level-icon{display:flex;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;background:#fff;font-size:42px;box-shadow:0 8px 20px rgba(63,49,95,.11)}
.mps-mp-level-copy small{letter-spacing:.12em;font-weight:800;color:#897758}
.mps-mp-level-copy h3{margin:4px 0 10px;color:var(--mp-deep);font-size:29px}
.mps-mp-progress{height:14px;overflow:hidden;border-radius:999px;background:#e7deec}
.mps-mp-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d9b85e,#8e66b5,#5b4084);transition:width .8s ease}
.mps-mp-level-copy p{margin:8px 0 0}

.mps-mp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.mps-mp-stats div{display:grid;grid-template-columns:auto auto;grid-template-areas:"icon number" "icon label";justify-content:center;align-items:center;column-gap:10px;padding:17px;border:1px solid var(--mp-border);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(63,49,95,.06)}
.mps-mp-stats span{grid-area:icon;font-size:28px}.mps-mp-stats strong{grid-area:number;color:var(--mp-deep);font-size:28px;line-height:1}.mps-mp-stats small{grid-area:label;color:#82788a}

.mps-mp-map,.mps-mp-badges,.mps-mp-next,.mps-mp-reflection{margin-top:18px;padding:25px;border:1px solid var(--mp-border);border-radius:24px;background:linear-gradient(145deg,#fff,#fbf8fd)}
.mps-mp-section-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px}
.mps-mp-section-head>div{display:flex;gap:12px;align-items:center}.mps-mp-section-head span{font-size:34px}.mps-mp-section-head h3{margin:0;color:var(--mp-deep);font-size:30px}.mps-mp-section-head p{margin:0;max-width:480px;text-align:right;color:#7e7487}

.mps-mp-map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mps-mp-map-grid article{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon title number" "icon label number";align-items:center;column-gap:10px;min-height:92px;padding:15px;border:1px solid #e5ddec;border-radius:17px;background:#f7f4f9;opacity:.55}
.mps-mp-map-grid article.is-active{background:linear-gradient(145deg,#fff,#f2eafa);opacity:1;box-shadow:0 8px 20px rgba(63,49,95,.07)}
.mps-mp-map-grid span{grid-area:icon;font-size:29px}.mps-mp-map-grid strong{grid-area:title;color:var(--mp-deep)}.mps-mp-map-grid b{grid-area:number;font-size:28px;color:var(--mp-purple)}.mps-mp-map-grid small{grid-area:label}

.mps-mp-badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.mps-mp-badge-grid article{padding:18px;text-align:center;border:1px solid #eadfc7;border-radius:20px;background:linear-gradient(145deg,#fff8dd,#f6eefb);box-shadow:0 9px 23px rgba(63,49,95,.08)}
.mps-mp-badge-grid article>div{display:flex;align-items:center;justify-content:center;width:75px;height:75px;margin:0 auto 10px;border-radius:50%;background:#fff;font-size:40px;box-shadow:0 8px 18px rgba(63,49,95,.10)}
.mps-mp-badge-grid strong{display:block;color:var(--mp-deep);font-size:18px}.mps-mp-badge-grid p{margin:7px 0 0;font-size:13px;line-height:1.45}
.mps-mp-locked{margin-top:18px}.mps-mp-locked summary{padding:12px 15px;border-radius:14px;background:#f3eef7;color:var(--mp-deep);font-weight:700;cursor:pointer}
.mps-mp-badge-grid--locked{margin-top:12px}.mps-mp-badge-grid--locked article{filter:grayscale(.8);opacity:.62}

.mps-mp-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.mps-mp-next-grid article{padding:20px;border:1px solid #e2d8eb;border-radius:19px;background:linear-gradient(145deg,#f4edf9,#fff)}
.mps-mp-next-grid span{font-size:34px}.mps-mp-next-grid strong{display:block;margin:7px 0;color:var(--mp-deep);font-size:20px}.mps-mp-next-grid p{margin:0;line-height:1.55}

.mps-mp-reflection form label{display:block;margin:0 0 8px;color:var(--mp-deep);font-weight:700}
.mps-mp-reflection textarea{width:100%;min-height:120px;margin-bottom:16px;padding:14px;border:1px solid #ddd3e7;border-radius:14px;background:#fff;color:var(--mp-ink);font:inherit;resize:vertical}
.mps-mp-reflection button{width:100%;padding:14px;border:0;border-radius:14px;background:linear-gradient(135deg,#815daf,#483566);color:#fff;font:inherit;font-weight:800;cursor:pointer}

.mps-mp-footer{display:grid;grid-template-columns:75px 1fr;gap:16px;align-items:center;margin-top:18px;padding:25px;border-radius:23px;background:linear-gradient(135deg,#e8dbf3,#f8e8ef,#fff4e6)}
.mps-mp-footer>div{font-size:52px}.mps-mp-footer p{margin:0;font-size:18px;line-height:1.55}.mps-mp-footer span{grid-column:1/-1;text-align:center;font-size:13px;color:#6f6680}
.mps-mp-note{margin-top:12px;padding:13px 15px;border:1px solid #e6dcc5;border-radius:14px;background:#fffaf0;color:#736347;font-size:13px;line-height:1.5}
.mps-mp-empty{padding:30px;text-align:center;border:1px dashed var(--mp-border);border-radius:18px;background:#fbf8fd}

@media(max-width:900px){
  .mps-mp-map-grid,.mps-mp-badge-grid{grid-template-columns:repeat(2,1fr)}
  .mps-mp-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .mps-mp-wrap{margin:16px 0}
  .mps-mp-hero{grid-template-columns:1fr;padding:65px 20px 28px}.mps-mp-avatar{width:125px;height:125px;font-size:58px}.mps-mp-stars{font-size:18px;letter-spacing:.4rem}
  .mps-mp-level{grid-template-columns:1fr}.mps-mp-level-icon{margin:auto}
  .mps-mp-section-head{align-items:flex-start;flex-direction:column}.mps-mp-section-head p{text-align:left}
  .mps-mp-map-grid,.mps-mp-badge-grid,.mps-mp-next-grid{grid-template-columns:1fr}
  .mps-mp-stats{gap:7px}.mps-mp-stats div{padding:13px 6px;column-gap:6px}.mps-mp-stats span{font-size:20px}.mps-mp-stats strong{font-size:21px}.mps-mp-stats small{font-size:11px}
  .mps-mp-footer{grid-template-columns:1fr;text-align:center}
}