.creator__name-with-badge { min-width: 0; }
.creator__name-with-badge strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.creator-preview-trigger { position: relative; display: flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--content-tertiary); }
.creator-preview-trigger::before { position: absolute; inset: -12px 0; content: ""; }
.creator-preview-icon { display: block; width: 16px; height: 16px; background: currentColor; mask: url("assets/creator-preview.svg") center / 16px 16px no-repeat; pointer-events: none; }
.creator-preview-trigger[aria-expanded="true"], .creator-preview-trigger:active { color: var(--content-primary); }
.ranking-row[data-creator-selected]::before { opacity: 1; background: oklch(0.45 0.035 175 / 0.035); }
.creator-panel { position: fixed; z-index: 30; display: flex; flex-direction: column; width: 420px; height: auto; max-height: var(--creator-panel-max-height); overflow: clip; border: 0.5px solid var(--border-secondary); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px -8px rgb(0 0 0 / 10%), 0 2px 5px -1px rgb(0 0 0 / 5%), 0 0 0 1px rgb(0 0 0 / 4%), inset 0 0 0 1px rgb(255 255 255 / 80%); }
.creator-panel[hidden] { display: none; }
.creator-panel { opacity: 0; transform: translateX(6px); transition: opacity 130ms ease-in, transform 130ms ease-in; pointer-events: none; }
.creator-panel[data-open] { opacity: 1; transform: translateX(0); transition-duration: 180ms; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); pointer-events: auto; }
.creator-panel[data-instant] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .creator-panel { transition: none; }
}
.creator-panel__scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.creator-panel__hero { position: relative; }
.creator-panel__cover { display: block; width: 100%; height: 144px; object-fit: cover; }
.creator-panel__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 56px; padding: 8px 24px; }
.creator-panel__share { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-primary); border-radius: 9999px; background: var(--surface); }
.creator-panel__share img, .creator-panel__link img, .creator-panel__close img { display: block; flex: 0 0 16px; }
.creator-panel__open { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 0; border-radius: 9999px; background: linear-gradient(180deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 5.5%) 45%, rgb(0 0 0 / 12%)), var(--button-primary-bg-default); box-shadow: inset 0 -1px 2px rgb(0 0 0 / 18%), inset 0 1px 1px rgb(255 255 255 / 22%), 0 2px 3px rgb(0 0 0 / 12%); color: var(--content-inverse-primary); font-size: 14px; line-height: 20px; white-space: nowrap; }
.creator-panel__identity { display: flex; flex-direction: column; gap: 2px; padding: 8px 24px 0; }
.creator-panel__name { margin: 0; color: var(--content-primary); font-size: 18px; font-weight: 600; line-height: 26px; }
.creator-panel__handle { margin: 0; color: var(--content-secondary); font-size: 14px; line-height: 20px; }
.creator-panel__avatar-ring { position: absolute; top: 100px; left: 20px; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; padding: 4px; border-radius: 50%; background: var(--surface); filter: drop-shadow(0 2px 4px rgb(0 0 0 / 6%)); }
.creator-panel__avatar { display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.creator-panel__close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.creator-panel__close::before { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); content: ""; }
.creator-panel__close img { position: relative; }
.creator-panel__details { display: flex; flex-direction: column; gap: 24px; padding: 0 24px 24px; margin-top: 12px; }
.creator-panel__about { margin: 0; color: var(--content-primary); font-size: 14px; line-height: 20px; }
.creator-panel__meta { display: flex; flex-direction: column; gap: 4px; color: var(--content-secondary); font-size: 12px; line-height: 18px; }
.creator-panel__meta p { margin: 0; }
.creator-panel__links { display: flex; gap: 8px; }
.creator-panel__link { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border-primary); border-radius: 9999px; background: var(--surface); color: var(--content-secondary); font-size: 14px; line-height: 20px; white-space: nowrap; }
.creator-panel__works { display: flex; flex-direction: column; gap: 16px; }
.creator-panel__works h3 { margin: 0; color: var(--content-primary); font-size: 14px; font-weight: 600; line-height: 20px; }
.creator-panel__work-list { display: flex; flex-direction: column; gap: 20px; }
.creator-panel__work { display: flex; gap: 12px; height: 48px; }
.creator-panel__work-cover { display: block; flex: 0 0 85.333px; width: 85.333px; height: 48px; border-radius: 4px; object-fit: contain; }
.creator-panel__work-caption { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-width: 0; height: 48px; }
.creator-panel__work-type { padding: 0 6px; border: 1px solid var(--border-secondary); border-radius: 4px; color: var(--content-secondary); font-size: 10px; line-height: 14px; }
.creator-panel__work-title { overflow: hidden; max-width: 100%; color: var(--content-primary); font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .creator-preview-trigger { opacity: 0; pointer-events: none; }
  .ranking-row:hover .creator-preview-trigger,
  .creator-preview-trigger:focus-visible,
  .creator-preview-trigger[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
  .creator-preview-trigger:hover { color: var(--content-primary); }
  .creator-panel__share:hover, .creator-panel__link:hover, .creator-panel__close:hover::before { background: var(--button-secondary-bg-hover); }
  .creator-panel__open:hover { background-color: var(--button-primary-bg-hover); }
}
.creator-panel__share:active, .creator-panel__link:active, .creator-panel__close:active::before { background: var(--button-bg-pressed); }