/* R3ap3r Productions - shared integrated Account control */

.r3-account-host,
.r3-account-host *,
.r3-account-dropdown,
.r3-account-dropdown *{
    box-sizing:border-box;
}

.r3-account-host{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    width:max-content;
    max-width:100%;
    min-width:0;
    height:54px;
    margin:0;
    padding:5px 6px;
    border:1px solid rgba(0,216,255,.22);
    border-radius:17px;
    background:linear-gradient(180deg,rgba(4,18,29,.94),rgba(2,10,18,.90));
    box-shadow:
        0 8px 24px rgba(0,0,0,.22),
        0 0 18px rgba(0,216,255,.09),
        inset 0 0 13px rgba(0,216,255,.025);
    font-family:Inter,Segoe UI,Arial,sans-serif;
    line-height:1;
    isolation:isolate;
}

.r3-account-summary{
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    min-width:0;
    height:42px;
    margin:0;
    padding:0;
    white-space:nowrap;
}

.r3-account-presence{
    display:block;
    flex:0 0 9px;
    width:9px;
    height:9px;
    margin:0 2px;
    border-radius:50%;
    background:#22ff92;
    box-shadow:0 0 12px rgba(34,255,146,.90);
}

.r3-account-presence.guest{
    background:#ffb347;
    box-shadow:0 0 12px rgba(255,179,71,.80);
}

.r3-account-connected{
    color:#31f7ff;
    font-size:8px;
    font-weight:1000;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.r3-account-avatar,
.r3-account-avatar-fallback{
    display:block;
    flex:0 0 42px;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    max-width:42px;
    max-height:42px;
    margin:0;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(0,216,255,.34);
    border-radius:12px;
    background:linear-gradient(145deg,rgba(0,216,255,.17),rgba(0,0,0,.38));
    box-shadow:0 0 13px rgba(0,216,255,.10);
}

img.r3-account-avatar{
    object-fit:cover!important;
    object-position:50% 50%!important;
}

.r3-account-avatar-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d9fbff;
    font-size:17px;
    font-weight:1000;
    text-align:center;
}

.r3-account-crown{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:15px;
    height:15px;
    font-size:12px;
    filter:drop-shadow(0 0 6px rgba(255,215,70,.60));
}

.r3-account-name{
    display:block;
    max-width:145px;
    min-width:0;
    overflow:hidden;
    color:#f5fcff;
    font-size:10px;
    font-weight:1000;
    letter-spacing:.04em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.r3-account-role{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:27px;
    padding:0 9px;
    border:1px solid rgba(0,216,255,.21);
    border-radius:999px;
    background:rgba(0,216,255,.06);
    color:#8ef7ff;
    font-size:7px;
    font-weight:1000;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.r3-account-role.admin{
    border-color:rgba(255,215,70,.32);
    background:rgba(255,215,70,.09);
    color:#ffe88a;
}

button.r3-account-trigger{
    all:unset;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    min-width:110px;
    height:40px;
    margin:0;
    padding:0 13px;
    border:1px solid rgba(57,255,183,.31);
    border-radius:11px;
    background:linear-gradient(180deg,rgba(0,216,255,.13),rgba(0,216,255,.035));
    color:#aafaff;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    font-size:8px;
    font-weight:1000;
    letter-spacing:.11em;
    text-transform:uppercase;
    cursor:pointer;
}

button.r3-account-trigger:hover,
button.r3-account-trigger[aria-expanded="true"]{
    border-color:rgba(57,255,183,.50);
    background:linear-gradient(180deg,rgba(57,255,183,.14),rgba(0,216,255,.045));
    box-shadow:0 0 16px rgba(57,255,183,.09);
}

.r3-account-chevron{
    color:#6ef8ff;
    font-size:10px;
    transition:transform .14s ease;
}

button.r3-account-trigger[aria-expanded="true"] .r3-account-chevron{
    transform:rotate(180deg);
}

.r3-account-guest-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    padding:0 10px;
    border:1px solid rgba(0,216,255,.20);
    border-radius:9px;
    color:#a9f9ff!important;
    font-size:8px;
    font-weight:1000;
    letter-spacing:.09em;
    text-decoration:none!important;
    text-transform:uppercase;
}

/* The homepage gets its own utility row. It is NOT over the banner. */
.r3-home-account-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    min-height:54px;
    margin:0 0 10px;
    padding:0 3px;
}

/* Account page right-side action cluster. */
.account-top-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:0;
    flex-wrap:wrap;
}

/* Dropdown is portaled under BODY by JS. */
.r3-account-dropdown{
    position:fixed!important;
    left:0;
    top:0;
    z-index:2147483000!important;
    display:block;
    width:310px;
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
    margin:0;
    padding:11px;
    overflow:auto;
    border:1px solid rgba(0,216,255,.28);
    border-radius:17px;
    background:
        radial-gradient(circle at 88% 0%,rgba(0,216,255,.08),transparent 36%),
        linear-gradient(180deg,rgba(5,18,29,.998),rgba(2,8,16,.998));
    box-shadow:
        0 24px 64px rgba(0,0,0,.62),
        0 0 29px rgba(0,216,255,.13),
        inset 0 0 21px rgba(0,216,255,.025);
    backdrop-filter:blur(17px);
    -webkit-backdrop-filter:blur(17px);
    font-family:Inter,Segoe UI,Arial,sans-serif;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-4px) scale(.99);
    transform-origin:top right;
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}

.r3-account-dropdown.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.r3-account-dropdown-profile{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    align-items:center;
    gap:13px;
    width:100%;
    margin:0 0 8px;
    padding:7px 7px 14px;
    border-bottom:1px solid rgba(120,220,255,.10);
}

.r3-account-dropdown-avatar,
.r3-account-dropdown-avatar-fallback{
    display:block;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    max-width:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden;
    border:1px solid rgba(0,216,255,.38);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(0,216,255,.18),rgba(0,0,0,.39));
    box-shadow:0 0 15px rgba(0,216,255,.11);
}

img.r3-account-dropdown-avatar{
    object-fit:cover!important;
    object-position:50% 50%!important;
}

.r3-account-dropdown-avatar-fallback{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#d8fbff;
    font-size:21px;
    font-weight:1000;
    text-align:center;
}

.r3-account-dropdown-identity{
    min-width:0;
}

.r3-account-dropdown-identity strong{
    display:block;
    overflow:hidden;
    color:#f5fdff;
    font-size:13px;
    font-weight:1000;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.r3-account-dropdown-identity span{
    display:block;
    margin-top:5px;
    color:#7897a7;
    font-size:8px;
    font-weight:700;
    letter-spacing:.07em;
    line-height:1.4;
    text-transform:uppercase;
}

.r3-account-dropdown-identity b.verified{
    color:#72ffd1;
    font-weight:1000;
}

.r3-account-dropdown-links{
    display:grid;
    grid-template-columns:1fr;
    gap:3px;
    width:100%;
}

.r3-account-dropdown-links a{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:38px!important;
    margin:0!important;
    padding:0 11px!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#d4f3fa!important;
    font-size:9px!important;
    font-weight:1000!important;
    letter-spacing:.08em!important;
    text-decoration:none!important;
    text-transform:uppercase!important;
}

.r3-account-dropdown-links a:hover{
    background:rgba(0,216,255,.075)!important;
    color:#fff!important;
}

.r3-account-dropdown-links a.admin{
    color:#ffe69b!important;
}

.r3-account-dropdown-links a.logout{
    margin-top:4px!important;
    border-top:1px solid rgba(255,80,110,.12)!important;
    color:#ffbecd!important;
}

.r3-account-dropdown-links i{
    color:#557786;
    font-size:15px;
    font-style:normal;
}

/* Responsive simplification before any overlap can occur. */
@media(max-width:1120px){
    .r3-account-connected{display:none}
}

@media(max-width:900px){
    .r3-account-role{display:none}
    .r3-account-name{max-width:105px}
    .account-top-actions{
        width:100%;
        justify-content:space-between;
    }
}

@media(max-width:650px){
    .r3-account-host{
        height:50px;
        padding:4px 5px;
    }

    .r3-account-summary{height:40px}

    .r3-account-name,
    .r3-account-crown{
        display:none;
    }

    .r3-account-avatar,
    .r3-account-avatar-fallback{
        flex-basis:40px;
        width:40px;
        height:40px;
        min-width:40px;
        min-height:40px;
        max-width:40px;
        max-height:40px;
    }

    button.r3-account-trigger{
        min-width:94px;
        height:38px;
        padding:0 10px;
    }

    .r3-home-account-row{
        justify-content:center;
        margin-bottom:8px;
    }
}

@media(max-width:390px){
    .r3-account-presence{display:none}
}