.title-badge.grade-4 { border-color: #9271dc; color: #6532a6; background: linear-gradient(120deg,#eee2ff,#daf9fa 52%,#fae7f3); box-shadow: inset 0 0 0 1px #ffffffa0,0 0 12px #b793ef36; }
.title-badge.grade-4 .title-tier { color:#fff; background:linear-gradient(140deg,#8174ce,#b74e97); }
[data-theme="dark"] .title-badge.grade-4 { color:#f2e4ff; background:linear-gradient(120deg,#413153,#254f57 52%,#533346); }
.title-unlock-toast { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:10050; width:min(360px,calc(100vw - 32px)); box-sizing:border-box; display:flex; align-items:center; gap:15px; padding:17px 20px 17px 15px; border-radius:20px; border:1px solid #ffffff40; background:linear-gradient(135deg,#293242f5,#171e2bf7); color:#f8f5ed; box-shadow:0 12px 40px #0004,inset 0 1px #ffffff12; pointer-events:none; animation:title-notice-enter .3s cubic-bezier(.2,.75,.25,1) both; }
.title-unlock-toast > div { min-width:0; display:grid; gap:5px; }
.title-unlock-toast > div > span { color:#c4cedd; font-size:12px; letter-spacing:.035em; }
.title-unlock-toast strong { font-size:17px; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.title-unlock-toast.is-leaving { animation:title-notice-leave .28s ease-in both; }
.title-medal { --medal:#c88e60; --medal-edge:#ffe0b2; flex:0 0 60px; position:relative; display:block; width:60px; height:60px; }
.title-medal.grade-2 { --medal:#97afc1; --medal-edge:#edf8ff; }
.title-medal.grade-3 { --medal:#e6b54d; --medal-edge:#fff4b2; }
.title-medal.grade-4 { --medal:#b3a1ed; --medal-edge:#bdfcf5; }
.title-medal svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 3px 4px #0005); }
.title-medal circle { fill:var(--medal); stroke:var(--medal-edge); stroke-width:1.5; }
.title-medal .medal-ring { fill:none; stroke-width:.7; opacity:.7; }
.title-medal .medal-star { fill:var(--medal-edge); }
.title-medal .medal-ribbon { fill:var(--medal); opacity:.65; }
.title-medal b { position:absolute; inset:21px 0 auto; text-align:center; font:900 12px Georgia,serif; color:#453152; }
.profile-coin-icon { padding:0; border:0; color:inherit; background:none; cursor:pointer; }
@keyframes title-notice-enter { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes title-notice-leave { to { opacity:0; transform:translateY(28px); } }
@media(max-width:600px) { .title-unlock-toast { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); padding:14px; } }
@media(prefers-reduced-motion:reduce) { .title-unlock-toast,.title-unlock-toast.is-leaving { animation:none; } .title-unlock-toast.is-leaving { opacity:0; } }