/* 舞萌工作台及共享舞萌控件。 */
/* UI_Icon_350101: a 10px corner on the 128px purple frame. */
.page-maimai { --mai-avatar-radius: 7.8125%; }
.maimai-feature { border-top: 3px solid #72a39c; }
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
body { overflow-y: scroll; }
}
:where(.page-maimai) .maimai-workspace { padding-top: 36px; padding-bottom: 64px; }
:where(.page-maimai) .maimai-workspace, :where(.page-maimai) .mai-dialog { letter-spacing: 0; }
:where(.page-maimai) .maimai-workspace h1 { font-size: 30px; letter-spacing: 0; margin: 0; line-height: 1.3; }
:where(.page-maimai) .maimai-workspace h2, :where(.page-maimai) .mai-dialog h2 { font-size: 20px; letter-spacing: 0; line-height: 1.4; }
:where(.page-maimai) .maimai-workspace h3 { font-size: 15px; margin: 0; line-height: 1.5; }
:where(.page-maimai) .mai-heading, :where(.page-maimai) .mai-section-head, :where(.page-maimai) .mai-identity, :where(.page-maimai) .mai-submit-row, :where(.page-maimai) .mai-score-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
:where(.page-maimai) .mai-heading { margin-bottom: 24px; }
:where(.page-maimai) .mai-eyebrow { font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
:where(.page-maimai) .mai-identity { justify-content: flex-end; font-size: 13px; }
:where(.page-maimai) .mai-identity-state { display: inline-flex; align-items: center; gap: 7px; color: #c8794e; font-size: 12px; font-weight: 400; transition: color .2s ease, filter .2s ease, transform .2s ease, text-shadow .2s ease; }
:where(.page-maimai) .mai-identity-state::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #d77b4c; box-shadow: 0 0 0 3px #fbe9dc; transition: box-shadow .18s ease; }
:where(.page-maimai) .mai-identity-state:hover { transform: scale(1.04); text-shadow: 0 0 10px rgba(127, 184, 194, .38); }
:where(.page-maimai) .mai-identity-state:hover::before { box-shadow: 0 0 0 3px #fbe9dc, 0 0 12px rgba(215, 123, 76, .68); }
:where(.page-maimai) .mai-identity-state[data-state="connected"] { color: #668b96; }
:where(.page-maimai) .mai-identity-state[data-state="connected"]::before { background: var(--ui-online); box-shadow: 0 0 0 3px #edf5f8; }
:where(.page-maimai) .mai-identity-state[data-state="connected"]:hover::before { box-shadow: 0 0 0 3px #edf5f8, 0 0 12px rgba(127, 184, 194, .78); }
:where(.page-maimai) .mai-link:disabled { opacity: .48; cursor: not-allowed; }
:where(.page-maimai) .mai-button .mai-platform-arrow { align-self: center; margin-top: 0; color: currentColor; }
:where(.page-maimai) .mai-button:hover:not(:disabled) .mai-platform-arrow, :where(.page-maimai) .mai-button:focus-visible:not(:disabled) .mai-platform-arrow { transform: translate(1px, -1px); }
:where(.page-maimai) .mai-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--ui-accent); cursor: pointer; }
:where(.page-maimai) .mai-link:hover:not(:disabled) { color: var(--ui-accent-strong); text-decoration: underline; }
:where(.page-maimai) .mai-link.danger { color: #a95151; }
:where(.page-maimai) .maimai-workspace :focus-visible:not(.ui-search-input, .ui-search-button), :where(.page-maimai) .mai-dialog :focus-visible:not(.ui-dialog-heading) { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
:where(.page-maimai) .mai-notice, :where(.page-maimai) .mai-feedback { padding: 10px 14px; font-size: 13px; border-left: 3px solid #b6985a; background: #fbf6e9; margin-bottom: 16px; overflow-wrap: anywhere; }
:where(.page-maimai) .mai-feedback { border-color: var(--ui-online); background: #edf5f8; }
:where(.page-maimai) .mai-feedback.error { border-color: #bb6262; background: #fff1f1; }
:where(.page-maimai) .mai-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
:where(.page-maimai) .mai-tabs button { flex: 0 0 auto; border: 0; border-bottom: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; padding: 12px 0; cursor: pointer; }
:where(.page-maimai) #mai-login-guide { margin: -8px 0 28px; }
:where(.page-maimai) .mai-import-guide::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 0; pointer-events: none; }
:where(.page-maimai) .mai-import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
:where(.page-maimai) .mai-main, :where(.page-maimai) .mai-side { min-width: 0; }
:where(.page-maimai) .mai-side { border-left: 1px solid var(--line); padding-left: 28px; }
:where(.page-maimai) .mai-section-head { margin-bottom: 18px; }
:where(.page-maimai) .mai-subtle { color: var(--muted); font-size: 11px; }
:where(.page-maimai) .maimai-workspace fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.page-maimai) .maimai-workspace fieldset:disabled { opacity: .58; }
:where(.page-maimai) .mai-segment { display: inline-flex; margin-bottom: 20px; background: #e9eff3; padding: 3px; border-radius: 5px; }
:where(.page-maimai) .mai-segment button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 3px; background: transparent; color: #68768a; font: inherit; font-size: 12px; cursor: pointer; }
:where(.page-maimai) .mai-segment button.selected { background: #fff; color: var(--ui-accent); box-shadow: 0 1px 4px #35415414; }
:where(.page-maimai) .mai-field { margin-bottom: 20px; }
:where(.page-maimai) .mai-field label, :where(.page-maimai) .mai-dialog label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
:where(.page-maimai) .mai-field small { display: block; margin-top: 9px; font-size: 11px; color: var(--muted); }
:where(.page-maimai) .mai-import-guide { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -2px 0 16px; padding: 13px 18px 13px 18px; border: 0; border-radius: 0; box-shadow: inset 0 1px 0 #e8d7b5, inset 0 -1px 0 #e8d7b5, inset -1px 0 0 #e8d7b5; background: #fffaf0; }
:where(.page-maimai) .mai-import-guide::before { background: #c69c60; }
:where(.page-maimai) .mai-import-guide > div { min-width: 0; }
:where(.page-maimai) .mai-import-guide strong, :where(.page-maimai) .mai-import-guide span { display: block; }
:where(.page-maimai) .mai-import-guide strong { color: #785f39; font-size: 12px; font-weight: 700; }
:where(.page-maimai) .mai-import-guide span { margin-top: 3px; color: #8b7860; font-size: 11px; line-height: 1.6; text-wrap: pretty; }
:where(.page-maimai) .mai-import-guide-break { display: none !important; }
:where(.page-maimai) .mai-import-guide .mai-link { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
:where(.page-maimai) .mai-import-guide .mai-link .mai-platform-arrow { color: inherit; }
:where(.page-maimai) .maimai-workspace textarea, :where(.page-maimai) .mai-dialog textarea { width: 100%; resize: vertical; min-height: 120px; line-height: 1.6; }
:where(.page-maimai) .mai-targets { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
:where(.page-maimai) .mai-targets label, :where(.page-maimai) .mai-consent { display: flex; align-items: center; gap: 6px; }
:where(.page-maimai) .mai-targets .mai-link { margin-left: auto; }
:where(.page-maimai) .maimai-workspace input[type="checkbox"] { accent-color: var(--ui-accent); width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
:where(.page-maimai) .mai-agreement { font-size: 12px; margin-top: 16px; color: #69778a; }
:where(.page-maimai) .mai-agreement summary { cursor: pointer; width: fit-content; }
:where(.page-maimai) .mai-agreement p { margin: 10px 0 12px; line-height: 1.9; }
:where(.page-maimai) .mai-consent { font-size: 12px; margin: 16px 0 22px; align-items: flex-start; }
:where(.page-maimai) .mai-consent input { margin-top: 2px !important; }
:where(.page-maimai) .mai-submit-row { justify-content: flex-start; flex-wrap: wrap; }
:where(.page-maimai) .mai-platform { --platform-accent: #347c99; --platform-tint: #eaf5fa; --platform-border: #abcfdc; display: block; padding: 18px; background: #fff; color: var(--ink); border: 1px solid #dce6eb; border-radius: 8px; margin-bottom: 14px; box-shadow: 0 2px 5px #35415404; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
:where(.page-maimai) .mai-platform.lxns { --platform-accent: #77619b; --platform-tint: #f1edf8; --platform-border: #cec2e0; }
:where(.page-maimai) .mai-platform-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
:where(.page-maimai) .mai-platform-avatar { flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; }
:where(.page-maimai) .fish .mai-platform-avatar { padding: 10px; }
:where(.page-maimai) .mai-platform-title { flex: 1; min-width: 0; }
:where(.page-maimai) .mai-platform-title h3 { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
:where(.page-maimai) .mai-platform-domain { display: block; margin-top: 3px; font-size: 10px; color: #84909e; overflow-wrap: anywhere; }
:where(.page-maimai) .mai-platform-arrow { flex: 0 0 16px; width: 16px; height: 16px; align-self: flex-start; margin-top: 3px; color: #98a5b0; background: currentColor; transition: color .18s, transform .18s; }
:where(.page-maimai) .mai-platform-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 11px; line-height: 1.6; }
:where(.page-maimai) .mai-platform-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #85909d; overflow-wrap: anywhere; }
:where(.page-maimai) .mai-platform-status::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #bac4cd; }
:where(.page-maimai) .mai-platform-status[data-state="connected"] { color: #668b96; }
:where(.page-maimai) .mai-platform-status[data-state="connected"]::before { background: var(--ui-online); }
:where(.page-maimai) .mai-platform-status[data-state="unbound"]::before { background: #c69c60; }
:where(.page-maimai) .mai-platform-visit { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--platform-accent); }
:where(.page-maimai) .mai-platform:hover, :where(.page-maimai) .mai-platform:focus-visible { border-color: var(--platform-border); box-shadow: 0 7px 18px #3541540d; transform: translateY(-2px); text-decoration: none; }
:where(.page-maimai) .maimai-workspace .mai-platform:focus-visible { outline-color: var(--platform-accent); }
:where(.page-maimai) .mai-platform:hover .mai-platform-arrow, :where(.page-maimai) .mai-platform:focus-visible .mai-platform-arrow { color: var(--platform-accent); transform: translate(2px, -2px); }
:where(.page-maimai) .mai-platform:active { transform: translateY(0); box-shadow: 0 2px 5px #35415404; }
:where(.page-maimai) .mai-summary { margin: 24px 0 0; font-size: 12px; }
:where(.page-maimai) .mai-summary div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; }
:where(.page-maimai) .mai-summary dt { color: var(--muted); flex-shrink: 0; }
:where(.page-maimai) .mai-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
:where(.page-maimai) .mai-job { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
:where(.page-maimai) .mai-job ul { list-style: none; padding: 0; margin-bottom: 0; font-size: 13px; }
:where(.page-maimai) .mai-job li { padding: 6px 0; overflow-wrap: anywhere; }
:where(.page-maimai) .mai-job li.failed { color: #a95151; }
:where(.page-maimai) .mai-image-preview { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
:where(.page-maimai) .mai-image-preview img { width: 128px; height: 128px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
:where(.page-maimai) .mai-empty { text-align: center; padding: 60px 16px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
:where(.page-maimai) .mai-score-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
:where(.page-maimai) .mai-score-group { min-width: 0; }
:where(.page-maimai) .mai-score-group h3 { margin-bottom: 12px; }
:where(.page-maimai) .mai-score-list { list-style: none; margin: 0; padding: 0; }
:where(.page-maimai) .mai-score-list li { display: grid; grid-template-columns: 24px 48px minmax(0, 1fr) 85px; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
:where(.page-maimai) .mai-score-list li > * { min-width: 0; }
:where(.page-maimai) .mai-score-list li.mai-score-cover-missing { grid-template-columns: 24px minmax(0, 1fr) 85px; }
:where(.page-maimai) .mai-score-cover { display: block; width: 48px; height: 48px; border-radius: 5px; object-fit: cover; background: #edf2f4; box-shadow: 0 1px 3px #35415414; }
:where(.page-maimai) .mai-score-cover-missing .mai-score-cover { display: none; }
:where(.page-maimai) .mai-score-rank { color: var(--muted); font-size: 11px; }
:where(.page-maimai) .mai-score-song { min-width: 0; }
:where(.page-maimai) .mai-score-song strong { display: block; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: break-word; word-break: normal; }
:where(.page-maimai) .mai-score-song small { display: block; color: var(--muted); font-size: 10px; }
:where(.page-maimai) .mai-score-value { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
:where(.page-maimai) .mai-score-value small { display: block; font-size: 10px; color: var(--ui-accent); }
:where(.page-maimai) .mai-b50-image { padding: 24px 0 28px; border-block: 1px solid var(--line); }
:where(.page-maimai) .mai-b50-image-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
:where(.page-maimai) .mai-b50-image-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
:where(.page-maimai) .mai-image-save { display: none; }
:where(.page-maimai) .mai-b50-image-head h3 { font-size: 15px; }
:where(.page-maimai) .mai-b50-image-status { margin: 12px 0 0; }
:where(.page-maimai) .mai-save-hint { margin: 12px 0 0; }
:where(.page-maimai) .mai-b50-image img { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 10px; }
:where(.page-maimai) #panel-account > .mai-section-head { margin-bottom: 0; }
:where(.page-maimai) .mai-account-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
:where(.page-maimai) .mai-account-identity h3 { font-size: 13px; color: var(--muted); font-weight: 500; }
:where(.page-maimai) .mai-account-platforms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 28px; }
:where(.page-maimai) .mai-account-provider { min-width: 0; }
:where(.page-maimai) .mai-account-provider + .mai-account-provider { border-left: 1px solid var(--line); padding-left: 48px; }
:where(.page-maimai) .mai-provider-heading { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 6px; }
:where(.page-maimai) .mai-provider-heading > img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
:where(.page-maimai) .mai-provider-heading h3 { font-size: 16px; }
:where(.page-maimai) .mai-provider-heading > a { margin-left: auto; }
:where(.page-maimai) .mai-account-row { display: grid; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
:where(.page-maimai) .mai-account-provider > .mai-account-row:last-child { border-bottom: 0; }
:where(.page-maimai) .mai-account-meta { min-width: 0; }
:where(.page-maimai) .mai-account-meta h4 { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.6; }
:where(.page-maimai) .mai-account-label { display: flex; align-items: center; gap: 16px; }
:where(.page-maimai) .mai-account-label .danger { margin-left: auto; font-weight: 500; }
:where(.page-maimai) .mai-account-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: 6px 0 0; white-space: nowrap; line-height: 1.6; }
:where(.page-maimai) .mai-account-identity .mai-account-status { margin: 0; }
:where(.page-maimai) .mai-account-status::before { content: ""; flex: 0 0 5px; height: 5px; border-radius: 50%; background: #bac4cd; }
:where(.page-maimai) .mai-account-status[data-state="connected"] { color: #668b96; }
:where(.page-maimai) .mai-account-status[data-state="connected"]::before { background: var(--ui-online); }
:where(.page-maimai) .mai-account-status[data-state="unbound"]::before, :where(.page-maimai) .mai-account-status[data-state="disconnected"]::before { background: #c69c60; }
:where(.page-maimai) .mai-account-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-height: 40px; }
:where(.page-maimai) .mai-account-value { font: inherit; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:where(.page-maimai) #panel-account .mai-button { height: 40px; min-height: 40px; min-width: 88px; }
:where(.page-maimai) .mai-account-link { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
:where(.page-maimai) .mai-account-row input { min-width: 0; }
:where(.page-maimai) .mai-token-controls { min-width: 0; width: 100%; }
:where(.page-maimai) .mai-token-controls #mai-token-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
:where(.page-maimai) .mai-token-controls #mai-token { width: 100%; height: 40px; min-height: 40px; padding-block: 8px; }
:where(.page-maimai) .mai-token-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
:where(.page-maimai) .mai-token-form-actions .mai-button { min-width: 0; }
:where(.page-maimai) .mai-token-footer { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; }
:where(.page-maimai) .mai-token-footer > .mai-link { flex-shrink: 0; }
:where(.page-maimai) .mai-token-help { position: relative; flex: 1; min-width: 0; }
:where(.page-maimai) .mai-token-help > summary { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 28px; font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; border-radius: 3px; }
:where(.page-maimai) .mai-token-help > summary::-webkit-details-marker { display: none; }
:where(.page-maimai) .mai-token-help > summary img { flex-shrink: 0; }
:where(.page-maimai) .mai-token-help > summary:hover, :where(.page-maimai) .mai-token-help[open] > summary { color: var(--ui-accent); }
:where(.page-maimai) .mai-token-guide { position: absolute; z-index: 5; left: 0; top: calc(100% + 8px); width: 320px; max-width: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 8px 24px #3541541a; }
:where(.page-maimai) .mai-token-guide h4 { margin: 0; font-size: 14px; font-weight: 600; }
:where(.page-maimai) .mai-token-guide ol { margin: 16px 0 18px; padding-left: 20px; font-size: 13px; line-height: 1.7; }
:where(.page-maimai) .mai-token-guide li { padding-left: 4px; margin-top: 8px; }
:where(.page-maimai) .mai-token-guide li::marker { color: var(--ui-accent); font-weight: 600; }
:where(.page-maimai) .mai-token-link { display: inline-flex; align-items: center; gap: 4px; }
:where(.page-maimai) .mai-token-link .mai-platform-arrow, :where(.page-maimai) .mai-account-link .mai-platform-arrow, :where(.page-maimai) .mai-import-guide .mai-link .mai-platform-arrow { width: 14px; height: 14px; flex-basis: 14px; align-self: center; margin-top: 0; color: inherit; }
:where(.page-maimai) .mai-token-link:hover .mai-platform-arrow, :where(.page-maimai) .mai-token-link:focus-visible .mai-platform-arrow, :where(.page-maimai) .mai-account-link:hover .mai-platform-arrow, :where(.page-maimai) .mai-account-link:focus-visible .mai-platform-arrow, :where(.page-maimai) .mai-import-guide .mai-link:hover .mai-platform-arrow, :where(.page-maimai) .mai-import-guide .mai-link:focus-visible .mai-platform-arrow { transform: translate(1px, -1px); }
:where(.page-maimai) .mai-dialog .mai-button .mai-platform-arrow { width: 14px; height: 14px; flex-basis: 14px; }
:where(.page-maimai) .mai-dialog { max-width: min(460px, calc(100% - 32px)); width: 460px; max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: 8px; padding: 28px; color: var(--ink); overflow: auto; box-shadow: 0 20px 60px #515e8230; }
:where(.page-maimai) .mai-dialog::backdrop { background: #343d6055; backdrop-filter: blur(2px); }
:where(.page-maimai) .mai-dialog-close { text-align: right; margin: -10px -4px 8px 0; }
:where(.page-maimai) .mai-dialog h2 { margin-bottom: 24px; }
:where(.page-maimai) .mai-dialog input { width: 100%; margin-bottom: 16px; }
:where(.page-maimai) .mai-dialog textarea { min-height: 100px; margin-bottom: 12px; }
:where(.page-maimai) .mai-dialog p { margin: 16px 0 0; font-size: 12px; color: var(--muted); }
:where(.page-maimai) .mai-dialog #mai-oauth-form { margin-top: 22px; }
:where(.page-maimai) .mai-dialog .mai-error { color: #a95151; }
:where(.page-maimai) .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.page-maimai) .maimai-workspace [hidden], :where(.page-maimai) .mai-dialog [hidden] { display: none !important; }
@media (max-width: 850px) {
:where(.page-maimai) .mai-account-platforms { gap: 28px; }
:where(.page-maimai) .mai-account-provider + .mai-account-provider { padding-left: 28px; }
:where(.page-maimai) .mai-import-layout { grid-template-columns: minmax(0, 1fr) 245px; gap: 24px; }
:where(.page-maimai) .mai-side { padding-left: 20px; }
:where(.page-maimai) .mai-platform { padding: 16px 14px; }
:where(.page-maimai) .mai-platform-avatar { flex-basis: 44px; width: 44px; height: 44px; }
:where(.page-maimai) .fish .mai-platform-avatar { padding: 6px; }
}
@media (max-width: 700px) {
:where(.page-maimai) .maimai-workspace { padding-top: 24px; }
:where(.page-maimai) .mai-heading { display: block; margin-bottom: 22px; }
:where(.page-maimai) .mai-heading > div:first-child { margin-bottom: 14px; }
:where(.page-maimai) .mai-heading .mai-identity { width: 100%; justify-content: space-between; gap: 12px; }
:where(.page-maimai) .maimai-workspace h1 { font-size: 26px; }
:where(.page-maimai) .mai-identity { justify-content: space-between; }
:where(.page-maimai) .mai-import-guide { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 13px 12px 16px; }
:where(.page-maimai) .mai-import-guide .mai-link { align-self: flex-start; }
:where(.page-maimai) .mai-import-guide-break { display: block !important; }
:where(.page-maimai) .mai-import-layout { grid-template-columns: 1fr; gap: 32px; }
:where(.page-maimai) .mai-side { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
:where(.page-maimai) .mai-tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
:where(.page-maimai) .mai-tabs::-webkit-scrollbar { display: none; }
:where(.page-maimai) .mai-image-save { display: inline-flex; }
:where(.page-maimai) .mai-b50-image-head { align-items: flex-start; }
:where(.page-maimai) .mai-b50-image-actions { justify-content: flex-start; }
:where(.page-maimai) .mai-score-groups { grid-template-columns: 1fr; }
:where(.page-maimai) .mai-score-list li { grid-template-columns: 22px 44px minmax(0, 1fr) 76px; gap: 8px; }
:where(.page-maimai) .mai-score-list li.mai-score-cover-missing { grid-template-columns: 22px minmax(0, 1fr) 76px; }
:where(.page-maimai) .mai-score-cover { width: 44px; height: 44px; }
:where(.page-maimai) .mai-score-value { font-size: 12px; }
:where(.page-maimai) .mai-score-value small { font-size: 9px; }
:where(.page-maimai) .mai-account-platforms { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
:where(.page-maimai) .mai-account-provider + .mai-account-provider { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
:where(.page-maimai) .mai-account-identity { gap: 10px 14px; padding-bottom: 20px; }
:where(.page-maimai) #panel-account .mai-refresh-button { min-width: 0; padding-inline: 10px; font-size: 12px; }
:where(.page-maimai) .mai-token-footer { flex-wrap: wrap; }
:where(.page-maimai) .mai-token-help[open] { flex-basis: 100%; }
:where(.page-maimai) .mai-account-row input { width: 100%; }
:where(.page-maimai) .mai-token-form-actions { justify-content: flex-start; }
:where(.page-maimai) .mai-token-guide { position: static; width: 100%; max-width: none; margin-top: 8px; box-shadow: none; border: 0; border-left: 2px solid var(--ui-line); border-radius: 0; padding: 6px 0 6px 16px; background: transparent; }
:where(.page-maimai) .mai-segment { display: flex; }
:where(.page-maimai) .mai-segment button { flex: 1; padding-inline: 7px; }
:where(.page-maimai) .mai-dialog { padding: 22px; }
}
@media (max-width: 380px) {
:where(.page-maimai) .mai-heading .mai-identity { font-size: 12px; }
:where(.page-maimai) .mai-heading .mai-identity .mai-button { padding-inline: 12px; }
:where(.page-maimai) .mai-tabs { gap: 16px; }
:where(.page-maimai) .mai-tabs button { font-size: 13px; }
:where(.page-maimai) .mai-score-list li { grid-template-columns: 18px 38px minmax(0, 1fr) 68px; gap: 6px; }
:where(.page-maimai) .mai-score-list li.mai-score-cover-missing { grid-template-columns: 18px minmax(0, 1fr) 68px; }
:where(.page-maimai) .mai-score-cover { width: 38px; height: 38px; border-radius: 4px; }
:where(.page-maimai) .mai-score-rank { font-size: 10px; }
:where(.page-maimai) .mai-score-song strong { font-size: 12px; }
:where(.page-maimai) .mai-score-song small { font-size: 9px; }
:where(.page-maimai) .mai-score-value { font-size: 11px; }
:where(.page-maimai) .mai-provider-heading { gap: 9px; }
:where(.page-maimai) .mai-provider-heading h3 { font-size: 15px; }
:where(.page-maimai) .mai-provider-heading > a { font-size: 11px; }
:where(.page-maimai) .mai-account-platforms { margin-top: 18px; }
:where(.page-maimai) .mai-account-row { padding: 20px 0; }
:where(.page-maimai) .mai-token-form-actions { width: 100%; }
:where(.page-maimai) .mai-token-form-actions .mai-button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
:where(.page-maimai) .mai-job-track span { animation: none; }
:where(.page-maimai) .mai-platform, :where(.page-maimai) .mai-platform-arrow { transition: none; }
:where(.page-maimai) .mai-platform:hover, :where(.page-maimai) .mai-platform:focus-visible, :where(.page-maimai) .mai-platform:hover .mai-platform-arrow, :where(.page-maimai) .mai-platform:focus-visible .mai-platform-arrow { transform: none; }
:where(.page-maimai) .mai-token-link:hover .mai-platform-arrow, :where(.page-maimai) .mai-token-link:focus-visible .mai-platform-arrow, :where(.page-maimai) .mai-account-link:hover .mai-platform-arrow, :where(.page-maimai) .mai-account-link:focus-visible .mai-platform-arrow, :where(.page-maimai) .mai-import-guide .mai-link:hover .mai-platform-arrow, :where(.page-maimai) .mai-import-guide .mai-link:focus-visible .mai-platform-arrow { transform: none; }
}
.mai-dialog { background: #fff; border-color: var(--ui-line); border-radius: 12px; box-shadow: 0 20px 60px #515e8230; }
.mai-dialog::backdrop { background: #343d6055; backdrop-filter: blur(3px); }
.mai-segment { background: var(--ui-soft); border-radius: 7px; }
.mai-segment button { border-radius: 5px; }
#mai-score-rating, #mai-player-rating { background: linear-gradient(110deg, #6faddb, #a284d0 70%, #cf8fab); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mai-score-group h3 { color: #8b91c9; }

@media (forced-colors: active) {
#mai-score-rating, #mai-player-rating { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

.mai-tabs { overflow: visible; }
.mai-tabs { align-items: stretch; }
#mai-image { --qr-picker-height: 52px; --qr-picker-font-size: 13px; }

/* Best 50 overview follows the homepage's quiet card surfaces. */
.mai-score-card { padding: 0 22px 18px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 8px 26px rgba(75, 111, 145, .035); }
.mai-score-banner { position: relative; isolation: isolate; overflow: hidden; margin: 0 -22px; padding: 18px 22px; border-radius: 9px 9px 0 0; background: var(--ui-soft); }
.mai-score-banner-art { position: absolute; z-index: -2; top: 0; right: 0; width: 43%; height: 100%; object-fit: cover; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); mask-image: linear-gradient(90deg, transparent, #000 65%); }
.mai-score-banner::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, var(--ui-soft) 54%, transparent 85%); }
.mai-score-banner .mai-score-card-kicker { color: var(--ui-accent-strong); }
.mai-score-banner .mai-score-summary { max-width: 73%; grid-template-columns: minmax(0, 1.2fr) minmax(80px, .7fr) minmax(0, 1fr); align-items: center; gap: 18px; margin: 14px 0 0; }
.mai-score-banner .mai-score-summary strong { display: flex; align-items: center; min-height: 38px; }
.mai-score-banner .mai-score-summary strong { font-size: 22px; }
.mai-score-banner .mai-score-rating-stat strong { font-size: 28px; }
.mai-score-banner .mai-score-contribution { padding-left: 18px; }
.mai-score-banner .mai-score-contribution strong { font-size: 19px; }
.mai-score-card-kicker { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .14em; }
.mai-score-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(100px, .65fr) minmax(0, 1fr); gap: 24px; margin: 22px 0 26px; }
.mai-score-summary span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.mai-score-summary strong { display: block; color: var(--ink); font-size: 25px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.mai-score-player strong { letter-spacing: .035em; }
.mai-score-rating-stat strong { font-size: 30px; }
#mai-score-rating { width: fit-content; }
.mai-score-contribution { padding-left: 24px; border-left: 1px solid var(--line); }
.mai-score-contribution strong { font-size: 21px; }
.mai-score-settings { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 24px; padding-top: 16px; margin-top: 0; align-items: start; }
.mai-score-provider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mai-score-source-group { min-width: 0; }
.mai-score-theme-picker { min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.mai-score-source-group > label, .mai-background-heading, .mai-score-theme-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 400; }
.mai-score-theme-head > span:last-child { color: var(--ink); font-weight: 600; }
.mai-score-source-picker { position: relative; max-width: 240px; }
.mai-score-source-picker img { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); object-fit: contain; pointer-events: none; }
.mai-score-source-picker select { width: 100%; height: 46px; --ui-field-padding: 0 30px 0 45px; --ui-field-size: 13px; }
.mai-score-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mai-theme-option { display: grid; place-items: center; min-width: 0; height: 46px; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; background: #f5f6fc; cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mai-theme-option img { width: 100%; height: 34px; object-fit: contain; }
.mai-theme-option[aria-pressed="true"] { border-color: #bfcee8; background: #eef1fb; }
.mai-theme-option:is(:hover, :focus-visible):not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(53, 65, 84, .12); }
.mai-theme-option:active:not(:disabled) { transform: none; }
.mai-theme-option:disabled { opacity: .5; cursor: not-allowed; }
.mai-background-picker { min-width: 0; max-width: 240px; }
.mai-background-trigger { width: 100%; min-height: 46px; justify-content: flex-start; --ui-button-padding: 5px 8px 5px 12px; --ui-button-font-size: 13px; --ui-button-weight: 400; --ui-button-gap: 10px; }
.mai-background-trigger img { width: 44px; height: 26px; flex-shrink: 0; object-fit: cover; border-radius: 4px; }
#mai-background-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-background-change { width: 17px; height: 8px; margin-left: auto; flex-shrink: 0; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: left 0 center, left 5px center; background-size: 5px 5px; background-repeat: no-repeat; }
.mai-background-dialog { --mai-dialog-padding: 24px; --mai-close-size: 34px; --mai-heading-height: 31px; width: min(700px, calc(100% - 32px)); max-width: min(700px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: var(--mai-dialog-padding); color: var(--ink); }
.mai-background-dialog[open] { display: flex; flex-direction: column; overflow: hidden; --mai-glass-bg: rgba(255, 255, 255, .62); --mai-glass-border: rgba(217, 224, 240, .7); --mai-glass-active: rgba(231, 237, 252, .72); }
html[data-color-theme="dark"] .mai-background-dialog[open] { --mai-glass-bg: rgba(29, 36, 53, .62); --mai-glass-border: rgba(156, 174, 209, .35); --mai-glass-active: rgba(53, 66, 94, .72); }
.mai-background-dialog .mai-dialog-close { position: absolute; top: calc(var(--mai-dialog-padding) - (var(--mai-close-size) - var(--mai-heading-height)) / 2); right: calc(var(--mai-dialog-padding) - 6px); margin: 0; }
.mai-background-dialog h2 { padding-right: 44px; margin: 0 0 16px; font-size: 22px; line-height: var(--mai-heading-height); }
@media (pointer: coarse) { .mai-background-dialog { --mai-close-size: 44px; } }
.mai-background-dialog fieldset { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; min-width: 0; min-height: 0; }
.mai-background-preview { position: relative; overflow: hidden; flex-shrink: 0; height: 140px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--ui-soft); }
.mai-background-preview img { width: 100%; height: 100%; object-fit: cover; }
.mai-background-preview-caption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 10px; border: 1px solid var(--mai-glass-border); border-radius: 6px; background: var(--mai-glass-bg); -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); color: var(--ink); font-size: 12px; line-height: 1.5; box-shadow: 0 2px 8px #25345110; }
.mai-background-preview-caption span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#mai-background-preview-number, #mai-avatar-preview-number) { color: var(--muted); font-size: 11px; margin-top: 3px; }
:is(#mai-background-preview-number, #mai-avatar-preview-number):empty { display: none; }
.mai-background-filters { display: flex; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
.mai-background-filters .ui-button { --ui-button-height: 30px; --ui-button-padding: 4px 12px; --ui-button-font-size: 12px; --ui-button-weight: 400; }
.mai-background-filters [aria-pressed="true"] { background: var(--ui-soft); color: var(--ui-accent-strong); border-color: var(--ui-accent); }
.mai-background-item { position: relative; min-width: 0; }
.mai-background-item .mai-background-favorite { -webkit-backdrop-filter: none; backdrop-filter: none; }
.mai-background-item .mai-background-option { width: 100%; }
.mai-background-favorite { position: absolute; right: 9px; top: 9px; width: 30px; --ui-button-height: 30px; --ui-button-padding: 0; --ui-button-text: var(--ink); --ui-button-border: var(--mai-glass-border); --ui-button-bg: var(--mai-glass-bg); --ui-button-hover-bg: var(--mai-glass-active); background: var(--mai-glass-bg); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); box-shadow: 0 2px 8px #25345110; }
.mai-background-favorite[aria-pressed="true"] { --ui-button-text: var(--ui-accent-strong); --ui-button-border: var(--mai-glass-border); --ui-button-bg: var(--mai-glass-active); background: var(--mai-glass-active); }
.mai-background-favorite[aria-pressed="true"] .icon-star { mask-image: none; background: currentColor; clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
.mai-background-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.mai-background-modes .ui-button { flex: 1; }
.mai-background-modes [aria-pressed="true"] { background: var(--ui-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); }
:is(#mai-background-search, #mai-avatar-search) { width: 100%; margin-bottom: 12px; }
.mai-background-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px; min-height: 0; height: min(32dvh, 320px); overflow: auto; overscroll-behavior: contain; padding: 2px 4px 4px 2px; }
.mai-background-dialog h2, .mai-background-modes, :is(#mai-background-search, #mai-avatar-search), .mai-background-list-footer, .mai-background-dialog-actions, .mai-background-status { flex-shrink: 0; }
.mai-background-option { display: block; min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--muted); font: inherit; cursor: pointer; text-align: left; transition: border-color .18s, box-shadow .18s; }
.mai-background-option img { display: block; width: 100%; aspect-ratio: 1080 / 452; object-fit: cover; border-radius: 4px; background: var(--ui-soft); }
.mai-background-option > span { display: block; padding: 6px 3px 2px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-background-option[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent-strong); box-shadow: 0 0 0 1px var(--ui-accent); }
.mai-background-option:is(:hover, :focus-visible), .mai-background-item:hover .mai-background-option { border-color: var(--ui-accent); background: var(--ui-soft); }
@media (hover: hover) and (pointer: fine) {
  .mai-background-item { transition: transform .2s ease; }
  .mai-background-item:hover, .mai-background-item:focus-within { transform: translateY(-2px); }
  .mai-background-item:hover .mai-background-option, .mai-background-item:focus-within .mai-background-option { box-shadow: 0 4px 12px #657aa32b; }
}
.mai-background-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; margin-top: 8px; color: var(--muted); font-size: 11px; }
#mai-background-count { flex-shrink: 0; }
.mai-background-status { flex: 1; margin: 0; min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: right; }
.mai-background-status:empty { visibility: hidden; }
.mai-background-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 460px) {
  .mai-score-provider { grid-template-columns: 1fr; }
  .mai-background-dialog { --mai-dialog-padding: 18px; }
  .mai-background-preview { height: 105px; margin-bottom: 12px; }
  .mai-background-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mai-background-dialog-actions .ui-button { flex: 1; }
}
@media (max-height: 600px) {
  .mai-background-dialog { --mai-dialog-padding: 16px; --mai-heading-height: 28px; }
  .mai-background-preview { height: 70px; margin-bottom: 10px; }
  .mai-background-dialog h2 { margin-bottom: 10px; font-size: 20px; }
  .mai-background-modes .ui-button, .mai-background-dialog-actions .ui-button { --ui-button-height: 34px; --ui-button-padding: 5px 10px; }
}
@media (max-height: 520px) { .mai-background-preview { display: none; } }
@media (max-height: 520px) and (min-width: 560px) {
  .mai-background-dialog { --mai-dialog-padding: 12px; --mai-heading-height: 26px; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  .mai-background-dialog h2 { font-size: 18px; margin-bottom: 6px; }
  .mai-background-dialog fieldset { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) 20px; gap: 6px 10px; }
  .mai-background-modes { grid-column: 1; margin: 0; }
  .mai-background-modes .ui-button, .mai-background-dialog-actions .ui-button { --ui-button-height: 32px; --ui-button-padding: 4px 10px; }
  :is(#mai-background-search, #mai-avatar-search) { grid-column: 2; grid-row: 1; margin: 0; height: 32px; min-height: 32px; }
  .mai-background-filters { grid-column: 1 / -1; margin: 0; }
  .mai-background-filters .ui-button { --ui-button-height: 26px; --ui-button-padding: 3px 10px; }
  .mai-background-grid { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
  .mai-background-grid .mai-background-option img { aspect-ratio: 3 / 1; }
  .mai-background-list-footer { grid-column: 1 / -1; height: 20px; margin: 0; }
  .mai-background-dialog-actions { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mai-background-option, .mai-background-item, .mai-background-option img { transition: none; }
  .mai-background-item:hover, .mai-background-item:focus-within { transform: none; }
}
.mai-score-card-footer { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; margin-top: 16px; }
#mai-score-time { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
#mai-score-time:empty { display: none; }
.mai-score-card .mai-score-actions { display: grid; grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: end; width: calc((100% - 24px - 1px - 8px) / 2); gap: 8px; margin-left: 0; }
.mai-score-card .mai-score-actions .ui-button { width: 100%; min-width: 0; min-height: 46px; padding-inline: 8px; font-size: clamp(10px, 1.1vw, 12px); }
html[data-color-theme="dark"] .mai-theme-option { background: var(--ui-soft); }
html[data-color-theme="dark"] .mai-theme-option[aria-pressed="true"] { border-color: #657aa3; background: #303d58; }
@media (max-width: 700px) {
  .mai-score-card { padding: 0 16px 16px; }
  .mai-score-banner { margin-inline: -16px; padding: 16px; }
  .mai-score-banner-art { width: 52%; }
  .mai-score-banner::after { background: linear-gradient(90deg, var(--ui-soft) 25%, transparent 100%); }
  .mai-score-banner .mai-score-summary { max-width: none; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); gap: 14px; margin: 12px 0 0; }
  .mai-score-banner .mai-score-player { max-width: 72%; }
  .mai-score-banner .mai-score-rating-stat, .mai-score-banner .mai-score-contribution { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
  .mai-score-banner .mai-score-contribution strong { font-size: clamp(16px, 4.3vw, 19px); }
  .mai-score-summary { grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); gap: 18px; margin: 20px 0; }
  .mai-score-player { grid-column: 1 / -1; }
  .mai-score-player strong { font-size: 24px; }
  .mai-score-rating-stat strong { font-size: 28px; }
  .mai-score-contribution { padding-left: 18px; }
  .mai-score-contribution strong { font-size: clamp(16px, 4.3vw, 18px); white-space: nowrap; }
  .mai-score-settings { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
  .mai-score-theme-picker { padding-left: 0; border-left: 0; }
  .mai-score-source-picker { max-width: none; }
  .mai-background-picker { max-width: none; }
  .mai-score-card-footer { grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .mai-score-card .mai-score-actions { grid-column: 1; width: 100%; margin-left: 0; }
  .mai-score-card .mai-score-actions .ui-button { padding-inline: 8px; font-size: 12px; min-height: 42px; }
}
@media (max-width: 820px) and (orientation: portrait) {
  .mai-score-banner-art { width: 100%; height: auto; object-fit: contain; object-position: top center; opacity: .65; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
  .mai-score-banner::after { background: linear-gradient(90deg, var(--ui-soft), transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
  .mai-theme-option { transition: none; }
  .mai-theme-option:is(:hover, :focus-visible):not(:disabled) { transform: none; }
}

/* Player details use theme-aware glass surfaces over the selected background. */
.mai-score-banner .mai-score-summary { max-width: 90%; grid-template-columns: minmax(0, 360px) minmax(130px, 1fr); gap: 28px; }
.mai-score-player { min-width: 0; }
.mai-player-card { position: relative; display: flex; align-items: center; gap: 12px; height: 122px; padding: 8px 0; min-width: 0; }
.mai-player-plate { display: none; }
/* Add 2 * (1 - 10/128) px so the 2px border encloses the image radius. */
.mai-player-avatar { position: relative; flex: 0 0 88px; width: 88px; height: 88px; overflow: hidden; border: 2px solid #ffffffe0; border-radius: calc(var(--mai-avatar-radius) + 1.6875px); background: #e1e7f4; }
.mai-player-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--mai-avatar-radius); }
.mai-player-card:not(.has-icon) .mai-player-avatar { display: none; }
.mai-player-details { --mai-badge-column: 60px; --mai-badge-gap: 8px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; flex: 0 1 260px; min-width: 0; }
/* Keep badges out of the row height so the visible frames share the same gap. */
.mai-player-rating-row { position: relative; display: flex; align-items: center; width: 100%; padding-right: 6px; }
.has-class .mai-player-rating-row { padding-right: calc(var(--mai-badge-column) + var(--mai-badge-gap) + 6px); }
.mai-player-class { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: var(--mai-badge-column); height: 38px; object-fit: contain; }
.mai-player-name-row { position: relative; width: 100%; }
.mai-player-course { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: var(--mai-badge-column); height: 23px; object-fit: contain; }
.mai-score-banner .has-course .mai-player-details #mai-score-name { padding-right: calc(var(--mai-badge-column) + 12px); }
.mai-player-rating:not(.has-rating-art)::before { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; content: "DX Rating"; color: var(--muted); font-size: 10px; }
.mai-score-banner .mai-player-details #mai-score-name { display: block; width: 100%; min-height: 34px; margin: 0; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--white) 88%, transparent); color: var(--ink); font-size: 18px; line-height: 26px; font-weight: 650; letter-spacing: .025em; overflow: hidden; }
/* Light capsule tints distinguish trophy types without dimensional shading. */
.mai-player-trophy { --mai-trophy-tint: #f0f2f6; --mai-trophy-ink: #7b8497; --mai-trophy-opacity: 88%; display: flex; align-items: center; width: 100%; height: 25px; padding: 0 12px; overflow: hidden; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--mai-trophy-tint) var(--mai-trophy-opacity), transparent); -webkit-backdrop-filter: blur(8px) saturate(110%); backdrop-filter: blur(8px) saturate(110%); color: var(--mai-trophy-ink); }
.mai-player-trophy[data-color="Bronze"] { --mai-trophy-tint: #faecdf; --mai-trophy-ink: #b8794b; }
.mai-player-trophy[data-color="Silver"] { --mai-trophy-tint: #edf2f8; --mai-trophy-ink: #7084a0; }
.mai-player-trophy[data-color="Gold"] { --mai-trophy-tint: #fff2dc; --mai-trophy-ink: #f39800; }
.mai-player-trophy[data-color="Rainbow"] { --mai-trophy-ink: #9b7cba; background: linear-gradient(105deg, #f9e7eddf, #fff2dfdf 25%, #eaf4e3df 50%, #e7f0fadf 75%, #efe7f8df); }
.mai-score-summary #mai-player-trophy-name { display: block; width: 100%; min-width: 0; margin: 0; color: inherit; font-size: 11px; font-weight: 400; line-height: 25px; white-space: nowrap; }
#mai-player-trophy-name > .ui-scroll-text-track { display: flex; width: max-content; min-width: 100%; justify-content: space-between; gap: .12em; }
#mai-player-trophy-name .mai-trophy-letter { flex: none; margin: 0; color: inherit; font-size: inherit; line-height: inherit; white-space: pre; }
.mai-player-rating { --mai-rating-numeral-gradient: linear-gradient(110deg, #6faddb, #a284d0 70%, #cf8fab); position: relative; isolation: isolate; width: 186px; max-width: 100%; margin-right: 7px; flex-shrink: 1; aspect-ratio: 664 / var(--mai-rating-height, 130); }
.mai-player-rating > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Cut out a rounded slot, preserving the source artwork at all four corners. */
#mai-player-rating-art { -webkit-mask-image: var(--mai-rating-cutout); mask-image: var(--mai-rating-cutout); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* Glass and gradient border share the native rounded slot geometry. */
.mai-player-rating.has-rating-art::before { position: absolute; z-index: 2; content: ""; left: 46.084337%; right: 12.801205%; top: calc(var(--mai-slot-top, 16.923077%) - 1.538462%); bottom: calc(var(--mai-slot-bottom, 16.923077%) - 1.538462%); padding: 1.5px; border-radius: 8.791209% / 26.666667%; background: linear-gradient(110deg, #6faddb, #a284d0 70%, #cf8fab); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.mai-player-rating.has-rating-art::after { position: absolute; z-index: 0; content: ""; left: 46.084337%; right: 12.801205%; top: calc(var(--mai-slot-top, 16.923077%) - 1.538462%); bottom: calc(var(--mai-slot-bottom, 16.923077%) - 1.538462%); border: 1.5px solid transparent; border-radius: 8.791209% / 26.666667%; background: #f4f8ff5c; box-shadow: 0 1px 4px #8ba9d52b, 0 0 6px #a284d01f; -webkit-backdrop-filter: blur(1.5px) saturate(105%); backdrop-filter: blur(1.5px) saturate(105%); }
.mai-score-banner .mai-player-details #mai-score-rating { position: absolute; z-index: 1; left: 46.385542%; right: 13.102410%; top: var(--mai-slot-top, 16.923077%); bottom: var(--mai-slot-bottom, 16.923077%); display: flex; justify-content: center; align-items: center; width: auto; min-height: 0; margin: 0; background: var(--mai-rating-numeral-gradient); background-clip: text; -webkit-background-clip: text; color: #879bd4; -webkit-text-fill-color: transparent; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px; line-height: 1; font-weight: 700; transform: translate(-1%, 1%); }
/* Equal side insets keep the numeral group clear of the glass border. */
#mai-player-rating-digits { position: absolute; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 0; left: calc(46.385542% + 2%); right: calc(13.102410% + 2%); top: var(--mai-slot-top, 16.923077%); bottom: var(--mai-slot-bottom, 16.923077%); }
#mai-player-rating-digits > .mai-rating-digit { position: relative; display: grid; place-items: center; height: 100%; min-width: 0; margin: 0; }
#mai-player-rating-digits img { width: 100%; height: 58%; object-fit: contain; min-width: 0; min-height: 0; opacity: 0; }
/* Optical adjustment balances the narrow leading digit and top-heavy strokes. */
.mai-rating-digit::after { position: absolute; inset: 21% 0; content: ""; background: var(--mai-rating-numeral-gradient); background-size: 500% 100%; background-position: var(--mai-digit-offset) center; transform: translate(-5%, 2%); -webkit-mask: var(--mai-digit-mask) center / contain no-repeat; mask: var(--mai-digit-mask) center / contain no-repeat; }
.has-rating-art.has-digit-art #mai-score-rating { opacity: 0; }
#mai-player-rating-digits { visibility: hidden; }
.has-rating-art.has-digit-art #mai-player-rating-digits { visibility: visible; }
.mai-player-rating #mai-player-rating-star { z-index: 2; inset: 3% -7px auto auto; width: 12%; height: 94%; object-fit: contain; }
.mai-player-details .ui-scroll-text-track { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
/* Brighter dark-mode numerals and more opaque trophy tints retain the original ink colors. */
html[data-color-theme="dark"] .mai-player-rating { --mai-rating-numeral-gradient: linear-gradient(110deg, #bbdcfa, #d7c8f4 70%, #f2cada); }
html[data-color-theme="dark"] .mai-player-trophy { --mai-trophy-opacity: 96%; }
html[data-color-theme="dark"] .mai-player-trophy[data-color="Rainbow"] { background: linear-gradient(105deg, #f9e7edf5, #fff2dff5 25%, #eaf4e3f5 50%, #e7f0faf5 75%, #efe7f8f5); }
html[data-color-theme="dark"] .mai-player-rating.has-rating-art::before { background: linear-gradient(110deg, #91c2ed, #b39be3 70%, #dca9c4); }
html[data-color-theme="dark"] .mai-player-rating.has-rating-art::after { background: #d5e4f81a; box-shadow: 0 1px 4px #809bc833, 0 0 7px #aa97e52e; }
.mai-score-banner .mai-score-contribution { min-width: 0; padding: 8px 0 8px 24px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; }
.mai-score-banner .mai-score-contribution strong { white-space: nowrap; font-size: clamp(17px, 1.65vw, 22px); }
@media (max-width: 1000px) and (min-width: 701px) {
  .mai-score-banner .mai-score-summary { max-width: 100%; grid-template-columns: minmax(0, 360px) minmax(130px, 1fr); gap: 18px; }
  .mai-score-banner .mai-score-contribution { padding-left: 18px; }
}
@media (max-width: 700px) {
  .mai-score-banner .mai-score-summary { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mai-score-banner .mai-score-player { grid-column: 1; max-width: none; }
  .mai-player-card { height: 120px; gap: 10px; padding: 7px 0; }
  .mai-player-avatar { flex-basis: 68px; width: 68px; height: 68px; }
  .mai-player-details { flex: 1; max-width: 260px; }
  .mai-player-rating { width: 166px; }
  .mai-score-banner .mai-player-details #mai-score-name { font-size: 17px; }
  .mai-score-banner .mai-score-contribution { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; }
  .mai-score-summary .mai-score-contribution span { margin: 0; }
  .mai-score-banner .mai-score-contribution strong { min-height: 28px; font-size: 17px; }
}
@media (max-width: 360px) {
  .mai-player-details { --mai-badge-column: 48px; --mai-badge-gap: 6px; }
  .mai-player-class { height: 32px; }
  .mai-player-rating { margin-right: 5px; }
  .mai-player-rating #mai-player-rating-star { right: -5px; }
}
@media (forced-colors: active) {
  .mai-player-plate, .mai-player-rating img { display: none; }
  .has-digit-art #mai-score-rating { opacity: 1; }
  .mai-score-banner .mai-player-details #mai-score-rating { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; text-shadow: none; }
  .mai-player-details #mai-score-name { background: Canvas; color: CanvasText; }
  .mai-player-rating.has-rating-art::before, .mai-player-rating.has-rating-art::after, .mai-rating-digit::after { display: none; }
  html[data-color-theme] .mai-score-banner .mai-player-trophy { background: Canvas; color: CanvasText; border-color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Avatar selection shares the background picker, with square collection images. */
button.mai-player-avatar { padding: 0; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
button.mai-player-avatar:hover { border-color: var(--ui-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 20%, transparent); }
button.mai-player-avatar:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.mai-avatar-empty-open { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); z-index: 1; width: 24px; --ui-button-height: 24px; --ui-button-padding: 0; }
.mai-avatar-empty-open .ui-icon { margin: 0; }
.mai-avatar-empty-open:active:not(:disabled) { transform: translateY(-50%); }
.has-icon .mai-avatar-empty-open { display: none; }
.mai-player-card:not(.has-icon) .mai-player-details #mai-score-name { padding-left: 34px; }
.mai-avatar-preview { display: flex; align-items: center; gap: 16px; height: 108px; padding: 12px; }
.mai-avatar-preview img { flex: 0 0 82px; width: 82px; height: 82px; object-fit: contain; border-radius: var(--mai-avatar-radius); }
.mai-avatar-preview .mai-background-preview-caption { position: static; min-width: 0; max-width: calc(100% - 140px); background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.mai-avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mai-avatar-grid .mai-background-option img { aspect-ratio: 1; object-fit: contain; border-radius: var(--mai-avatar-radius); }
@media (max-width: 460px) {
  .mai-avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mai-avatar-preview { height: 90px; }
  .mai-avatar-preview img { flex-basis: 64px; width: 64px; height: 64px; }
}
@media (max-height: 520px) { .mai-avatar-preview { display: none; } }
@media (prefers-reduced-motion: reduce) { button.mai-player-avatar { transition: none; } }