.coin-title { --title-ink: #537448; --title-paper: #edf3e6; --title-line: #d4dfcb; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; border: 1px solid var(--title-line); border-radius: 6px; padding: 4px 7px; background: var(--title-paper); color: var(--title-ink); font-size: 10px; line-height: 1.15; font-weight: 600; white-space: nowrap; width: max-content; max-width: 100%; text-decoration: none; }
.coin-title-level { font-size: 8px; letter-spacing: .2px; opacity: .75; font-weight: 700; }
.coin-title[data-tone="bronze"] { --title-ink: #8b603c; --title-paper: #f6ece0; --title-line: #e5d3bf; }
.coin-title[data-tone="silver"] { --title-ink: #5f6a7c; --title-paper: #edf0f5; --title-line: #d5dde9; }
.coin-title[data-tone="gold"] { --title-ink: #8b671f; --title-paper: #fbefd2; --title-line: #e9d394; }
.coin-title[data-tone="teal"] { --title-ink: #29736d; --title-paper: #e2f2eb; --title-line: #bcddd2; }
.coin-title[data-tone="blue"] { --title-ink: #396c9b; --title-paper: #e6f1fb; --title-line: #bfd8ee; }
.coin-title[data-tone="violet"] { --title-ink: #76528e; --title-paper: #f0e6f8; --title-line: #d8c2e6; }
.account-identity { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.account-identity .coin-title { font-size: 9px; padding: 3px 6px; gap: 5px; }
.coin-title-progress { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.coin-title-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coin-title-heading > span:last-child { font-size: 9px; color: var(--muted); }
.coin-title-progress p { font-size: 10px; line-height: 1.8; margin: 9px 0 0; color: var(--muted); }
.coin-title-track { height: 4px; border-radius: 5px; background: var(--line); overflow: hidden; margin-top: 10px; }
.coin-title-fill { height: 100%; background: var(--deep); border-radius: inherit; width: 0; transition: width .25s; }
.title-guide-link { border: 0; background: transparent; color: var(--muted); font-size: 10px; padding: 10px 0 0; display: block; min-height: 34px; cursor: pointer; }
.title-guide-dialog { width: min(540px,calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.title-guide-row { display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); }
.title-guide-row.current { background: var(--surface-soft); margin: 0 -12px; padding-inline: 12px; border-radius: 9px; }
.title-guide-range { text-align: right; }
.title-guide-range strong { display: block; font-size: 12px; font-weight: 550; color: var(--ink); }
.title-guide-range small { display: block; font-size: 9px; margin-top: 6px; color: var(--muted); }
#title-guide-status { font-size: 11px; line-height: 1.9; }
.ranking-player { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; }
.ranking-player .coin-title { font-size: 9px; }
:root[data-theme="dark"] .coin-title { --title-ink: #bfd2a8; --title-paper: #30402c; --title-line: #4a6141; }
:root[data-theme="dark"] .coin-title[data-tone="bronze"] { --title-ink: #e4be98; --title-paper: #44362a; --title-line: #6b503a; }
:root[data-theme="dark"] .coin-title[data-tone="silver"] { --title-ink: #c5d0e5; --title-paper: #323b4b; --title-line: #515f75; }
:root[data-theme="dark"] .coin-title[data-tone="gold"] { --title-ink: #ecd28e; --title-paper: #473d26; --title-line: #776137; }
:root[data-theme="dark"] .coin-title[data-tone="teal"] { --title-ink: #9cd4c8; --title-paper: #2b443f; --title-line: #3b6d61; }
:root[data-theme="dark"] .coin-title[data-tone="blue"] { --title-ink: #b2d4f0; --title-paper: #2d4055; --title-line: #4a6b8c; }
:root[data-theme="dark"] .coin-title[data-tone="violet"] { --title-ink: #ddbfeb; --title-paper: #423149; --title-line: #6e4e7b; }
@media (max-width: 720px) { .account-identity { max-width: 90px; } .ranking-player { align-items: flex-start; flex-direction: column; gap: 6px; } .ranking-player .coin-title { font-size: 8px; gap: 4px; padding: 3px 5px; } .ranking-player .coin-title-level { font-size: 7px; } }
@media (max-width: 360px) { .account-identity { max-width: 76px; } .account-identity .coin-title { font-size: 8px; gap: 4px; padding: 3px 5px; } .title-guide-row { gap: 8px; } .title-guide-range strong { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .coin-title-fill { transition: none; } }