:root { --site-account-accent: var(--site-accent, #62d7ff); }
.site-account { position: relative; z-index: 1000; font: inherit; color: var(--site-text, #f4f7fb); }
.site-account--floating { position: fixed; top: 18px; right: 18px; font: 500 14px/1.2 Inter, system-ui, sans-serif; color: #f7f5ff; }
.site-account__button { border: 1px solid var(--site-border-strong, rgba(255,255,255,.18)); border-radius: 10px; background: rgba(255,255,255,.04); color: inherit; padding: .55rem .8rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 700; line-height: 1.2; }
.site-account__button:hover { border-color: var(--site-account-accent); background: rgba(98,215,255,.1); }
.site-account__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 12px; }
.site-account__avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.site-account__avatar i { font-size: .82rem; }.site-account__avatar[data-platform="twitch"] { color: #b39bff; }.site-account__avatar[data-platform="youtube"] { color: #ff6b7b; }.site-account__avatar[data-platform="kick"] { color: #72e6a7; }.site-account__kick { font-weight: 800; font-size: .72rem; }
.site-account__panel { position: absolute; z-index: 1001; top: calc(100% + 10px); right: 0; width: min(340px, calc(100vw - 24px)); padding: 18px; border: 1px solid var(--site-border-strong, rgba(255,255,255,.14)); border-radius: 14px; background: #1A1D1A !important; box-shadow: var(--site-shadow, 0 18px 50px rgba(0,0,0,.35)); }
.site-account__panel[hidden] { display: none; }
.site-account__title { margin: 0 0 14px; text-align: center; font-weight: 700; }
.site-account__muted { margin: 0 0 14px; color: var(--site-muted, rgba(255,255,255,.68)); font-size: 12px; }
.site-account__providers { display: grid; gap: 8px; }
.site-account__providers button, .site-account__action { width: 100%; min-height: 34px; border: 1px solid var(--site-border, rgba(255,255,255,.14)); border-radius: 8px; background: rgba(255,255,255,.05); color: inherit; padding: 7px 10px; text-align: left; cursor: pointer; font: inherit; font-size: .78rem; }
.site-account__providers button { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.site-account__provider-prefix { color: var(--site-muted, rgba(255,255,255,.68)); font-size: .78rem; font-weight: 500; }.site-account__provider-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }.site-account__provider-name i { font-size: 1rem; }.site-account__provider-name .fa-twitch { color: #b39bff; }.site-account__provider-name .fa-youtube { color: #ff6b7b; }.site-account__provider-kick { color: #72e6a7; font-size: .78rem; font-weight: 800; }
.site-account__providers button:hover, .site-account__action:hover { background: rgba(98,215,255,.12); border-color: var(--site-account-accent); }
.site-account__identities { display: grid; gap: 7px; margin: 0 0 12px; }
.site-account__identity { min-width: 0; display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0; padding: 8px; color: rgba(255,255,255,.78); border: 1px solid var(--site-border, rgba(255,255,255,.14)); border-radius: 9px; background: rgba(255,255,255,.035); }
.site-account__identity-platform { width: 22px; height: 22px; display: grid; place-items: center; color: var(--site-account-accent); font-size: .9rem; }
.site-account__identity[data-account-identity="twitch"] .site-account__identity-platform { color: #a99cff; }
.site-account__identity[data-account-identity="youtube"] .site-account__identity-platform { color: #ff7182; }
.site-account__identity[data-account-identity="kick"] .site-account__identity-platform { color: #6ee6a6; }
.site-account__identity-platform .site-account__kick { font-size: .72rem; }
.site-account__kick-logo { width: 14px; height: 14px; fill: currentColor; }
.site-account__identity-avatar { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; color: var(--site-muted, rgba(255,255,255,.68)); background: rgba(255,255,255,.1); border-radius: 50%; font-size: .75rem; }
.site-account__identity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.site-account__identity-copy { min-width: 0; display: grid; gap: 1px; }
.site-account__identity-copy strong, .site-account__identity-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-account__identity-copy strong { color: var(--site-text, #f4f7fb); font-size: .8rem; }
.site-account__identity-copy small { color: var(--site-muted, rgba(255,255,255,.68)); font-size: .68rem; }
.site-account__unlink { min-height: 25px; padding: 3px 6px; color: var(--site-muted, rgba(255,255,255,.68)); border: 1px solid var(--site-border, rgba(255,255,255,.14)); border-radius: 6px; background: transparent; cursor: pointer; font: inherit; font-size: .62rem; }
.site-account__unlink:hover { color: #ff9ea9; border-color: #ff7182; background: rgba(255,113,130,.1); }
.site-account__unlink:disabled { opacity: .5; cursor: wait; }
.site-account__empty { margin: 0 0 12px; color: var(--site-muted, rgba(255,255,255,.68)); font-size: .75rem; }
.site-account__links { display: grid; gap: 6px; margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--site-border, rgba(255,255,255,.14)); }
.site-account__links[hidden] { display: none; }
.site-account__links > p { margin: 0 0 2px; color: var(--site-muted, rgba(255,255,255,.68)); font-size: .68rem; font-weight: 700; }
.site-account__links button { min-height: 32px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 8px; padding: 6px 9px; color: var(--site-text, #f4f7fb); border: 1px solid var(--site-border, rgba(255,255,255,.14)); border-radius: 8px; background: rgba(255,255,255,.035); cursor: pointer; font: inherit; font-size: .72rem; text-align: left; }
.site-account__links button:hover { border-color: var(--site-account-accent); background: rgba(98,215,255,.1); }
.site-account__links button:disabled { opacity: .5; cursor: wait; }
.site-account__links button > :first-child { color: var(--site-account-accent); justify-self: center; }
.site-account__links button > :last-child { color: var(--site-muted, rgba(255,255,255,.68)); justify-self: end; font-size: .62rem; }
.site-account__data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.site-account__action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.site-account__action--danger { color: #ff9ea9 !important; }
.site-account__action--danger:hover { border-color: #ff7182 !important; background: rgba(255,113,130,.1) !important; }
.site-account__delete-dialog { width: min(420px, calc(100vw - 28px)); padding: 0; color: var(--site-text, #f4f7fb); border: 1px solid var(--site-border-strong, rgba(255,255,255,.18)); border-radius: 14px; background: #1A1D1A; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.site-account__delete-dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.site-account__delete-dialog form { padding: 20px; background: transparent; }
.site-account__delete-dialog h3 { margin: 0 0 8px; font-size: 1.05rem; }
.site-account__delete-dialog p { margin: 0 0 14px; color: var(--site-muted, rgba(255,255,255,.68)); font-size: .78rem; line-height: 1.5; }
.site-account__delete-dialog label { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; color: var(--site-muted, rgba(255,255,255,.76)); border: 1px solid var(--site-border, rgba(255,255,255,.14)); border-radius: 8px; background: rgba(255,255,255,.025); font-size: .75rem; line-height: 1.4; }
.site-account__delete-dialog label input { appearance: none; box-sizing: border-box; flex: 0 0 16px; width: 16px !important; min-width: 16px; max-width: 16px; height: 16px !important; min-height: 16px; max-height: 16px; margin: 2px 0 0; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; outline: none; background: rgba(0,0,0,.18); cursor: pointer; }
.site-account__delete-dialog label:focus-within { outline: 2px solid color-mix(in srgb, var(--site-account-accent) 70%, transparent); outline-offset: 2px; }
.site-account__delete-dialog label input:checked { display: grid; place-items: center; border-color: var(--site-account-accent); background: var(--site-account-accent); }
.site-account__delete-dialog label input:checked::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #081018; border-bottom: 2px solid #081018; transform: rotate(-45deg) translate(1px, -1px); }
.site-account__delete-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--site-border, rgba(255,255,255,.14)); background: transparent; }
.site-account__delete-dialog footer .site-account__action { width: auto; min-height: 32px; padding: 7px 12px; color: var(--site-text, #f4f7fb); background: rgba(255,255,255,.055); }
.site-account__delete-dialog footer .site-account__action--danger { color: #ff9ea9 !important; border-color: rgba(255,113,130,.32); background: rgba(255,113,130,.07); }
.site-account__status { min-height: 18px; margin: 8px 0 0; color: #ffb4b4; font-size: 12px; }
.site-account__status:empty { display: none; }
@media (max-width: 560px) { .site-account--floating { top: 10px; right: 10px; } }
.site-account__admin-link { display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem; margin-bottom: .65rem; border: 1px solid rgba(145, 124, 255, .38); border-radius: .65rem; color: inherit; text-decoration: none; }
.site-account__admin-link:hover { border-color: rgba(145, 124, 255, .8); background: rgba(145, 124, 255, .1); }