.mobile-shell .user-title-summary{display:flex;align-items:center;gap:16px;padding:22px;margin-bottom:24px;border:1px solid #dbe8df;border-radius:17px;background:linear-gradient(110deg,var(--user-soft),#fff)}.user-title-emblem{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;border-radius:19px;background:#fff;color:var(--user-accent);box-shadow:0 3px 14px #426a6010}.user-title-summary>div{min-width:0}.user-title-summary small{font-size:11px;color:#82948a}.mobile-shell .user-title-summary h2{font-size:calc(19px * var(--user-text-scale,1))!important;color:var(--user-accent);margin:5px 0;line-height:1.6}.user-title-summary p{font-size:12px!important;color:#7d9084;line-height:1.8;margin:0}.user-title-summary>button{display:flex;align-items:center;gap:5px;margin-left:auto;color:var(--user-accent);font-size:12px;white-space:nowrap}.mobile-shell .user-title-hero{text-align:center;padding:35px 24px;border-radius:20px;background:var(--user-soft);border:1px solid #dbe8df}.user-title-hero-emblem{display:grid;place-items:center;margin:0 auto 18px;width:94px;height:94px;border-radius:32px;background:#fff;color:var(--user-accent);box-shadow:0 8px 24px #426a6010}.user-title-hero>small{color:#87998c;font-size:12px}.user-title-hero h2{color:var(--user-accent);line-height:1.6;margin:10px 0}.user-title-hero>p{line-height:1.9;color:#718579}.user-title-totals{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid #dbe8df;font-size:13px;color:#74897b}.user-title-totals b{margin-left:5px;color:var(--user-accent)}.user-title-stage-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.user-title-stage-list article{padding:20px;border:1px solid #e7eae5;border-radius:15px;background:var(--title-stage-bg)}.user-title-stage-list article>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--title-stage);font-size:17px}.user-title-stage-label{font-size:12px;border-radius:8px;background:white;padding:6px 9px;color:var(--title-stage)}.user-title-stage-list small{font-size:11px;font-weight:400}.user-title-stage-progress{height:9px;background:#ffffffc9;border-radius:8px;overflow:hidden;margin:17px 0}.user-title-stage-progress i{display:block;height:100%;background:var(--title-stage);border-radius:8px}.user-title-stage-list p{font-size:12px!important;color:#879184;line-height:1.8;margin:0}.mobile-shell .user-title-note{font-size:12px!important;color:#88988e;line-height:1.8;margin:18px 0 0}.user-title-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.user-title-collection article{display:flex;align-items:center;gap:12px;padding:18px;border:1px dashed #dce3dd;border-radius:15px;background:#f8faf8;color:#aab4ac}.user-title-collection article.earned{border:1px solid #dee7dd;background:var(--title-stage-bg);color:var(--title-stage)}.user-title-collection article>span{flex-shrink:0}.user-title-collection h3{font-size:15px!important;line-height:1.7;margin:5px 0;color:inherit}.user-title-collection small,.user-title-collection p{font-size:11px!important;line-height:1.7;margin:0}.user-title-milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.user-title-milestones>div{display:grid;justify-items:center;gap:9px;padding:18px 9px;border:1px solid #e3e9e4;border-radius:13px;color:#acb6ae}.user-title-milestones>div.earned{color:var(--user-accent);background:var(--user-soft);border-color:#cddfd2}.user-title-milestones small{font-size:11px}.user-title-bottom{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0}@media(max-width:720px){.mobile-shell .user-title-summary{padding:18px;gap:12px;flex-wrap:wrap}.user-title-emblem{width:45px;height:45px;border-radius:15px}.user-title-summary>button{margin-left:auto}.user-title-stage-list,.user-title-collection{grid-template-columns:1fr}.mobile-shell .user-title-summary h2{font-size:17px!important}.user-title-milestones{gap:7px}.user-title-milestones>div{padding:15px 5px}.user-title-summary p{font-size:11px!important}}

.mobile-shell .user-title-example-picker{padding:20px;border-radius:16px;border:1px solid #dae5df;background:#fff}.user-title-example-picker>div:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--user-accent);font-size:14px}.user-title-example-picker>div:first-child span{font-size:12px;color:#87988d}.user-title-example-picker [role=group]{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.user-title-example-picker button{min-height:38px;padding:8px 13px;border:1px solid #dbe5de;border-radius:10px;color:#758a7d;background:#f8faf8;font-family:inherit;font-size:13px}.user-title-example-picker button.active{background:var(--user-accent);border-color:var(--user-accent);color:white}.mobile-shell .user-title-example-picker>p{margin:13px 0 0;font-size:12px!important;color:#88988e;line-height:1.8}.user-title-example-picker button:focus-visible{outline:2px solid var(--user-accent);outline-offset:2px}
