/* FAME — "signed in on too many devices" dialog.
 *
 * Deliberately not the auth popup's chrome: this is not a form the visitor
 * opened, it is a question the site is asking before it will go on, so it
 * covers the page and cannot be dismissed. Device rows read like the ones on
 * the Security tab, at one glance each: what it is, where it is, when it was
 * last used. */
.fame-slim {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fame-slim-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 26, .72);
    backdrop-filter: blur(3px);
}
.fame-slim-box {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(8, 15, 26, .35);
    padding: 26px 26px 20px;
}
.fame-slim.is-busy .fame-slim-box { opacity: .7; pointer-events: none; }

.fame-slim-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.fame-slim-ico {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #fdecef; color: #d13b53;
}
.fame-slim-ico svg { width: 22px; height: 22px; }
.fame-slim-title { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: #0f2033; line-height: 1.3; }
.fame-slim-sub { margin: 0; font-size: 14px; line-height: 1.5; color: #4b5b73; }

.fame-slim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fame-slim-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e6ebf3;
    border-radius: 12px;
    background: #f8fafc;
}
.fame-slim-item.is-gone { opacity: .45; }
.fame-slim-item-ico { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.fame-slim-item-ico svg, .fame-slim-item-ico img { width: 24px; height: 24px; }
.fame-slim-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fame-slim-item-name { font-size: 14px; font-weight: 700; color: #0f2033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fame-slim-item-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #6b7a90; }
.fame-slim-item-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.fame-slim-item-meta svg { width: 13px; height: 13px; flex: 0 0 auto; }

.fame-slim-signout {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border: 0; border-radius: 9px;
    background: #d13b53; color: #ffffff;
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer;
}
.fame-slim-signout:hover { background: #b62f45; }
.fame-slim-signout svg { width: 15px; height: 15px; }

.fame-slim-msg { margin-top: 14px; font-size: 13px; color: #1e7d52; }
.fame-slim-msg.is-error { color: #d13b53; }

.fame-slim-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e6ebf3;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.fame-slim-cancel {
    border: 1px solid #e6ebf3; border-radius: 9px;
    padding: 9px 14px;
    background: #ffffff; color: #4b5b73;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.fame-slim-cancel:hover { background: #f1f5f9; color: #0f2033; }
.fame-slim-note { font-size: 12px; color: #8b96a8; }

@media (max-width: 560px) {
    .fame-slim-item { flex-wrap: wrap; }
    .fame-slim-signout { width: 100%; justify-content: center; }
}