.dd-youtube-account{
    position:relative;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
    min-width:32px;
}

.dd-youtube-account *{
    box-sizing:border-box;
}

.dd-youtube-login{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:36px;
    padding:0 14px;
    border:1px solid #3f3f3f;
    border-radius:999px;
    background:transparent;
    color:#3ea6ff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    transition:background .14s ease,border-color .14s ease;
}

.dd-youtube-login:hover{
    border-color:#263850;
    background:#263850;
    color:#3ea6ff;
}

.dd-youtube-login svg{
    width:20px;
    height:20px;
    flex:0 0 20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.dd-youtube-avatar{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#3ea6ff;
    color:#0f0f0f;
    font:800 14px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    cursor:pointer;
    user-select:none;
}

.dd-youtube-avatar:focus-visible,
.dd-youtube-login:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}

.dd-youtube-account-menu{
    position:absolute;
    z-index:100000;
    top:calc(100% + 10px);
    right:0;
    width:min(300px,calc(100vw - 24px));
    overflow:hidden;
    border:1px solid #3f3f3f;
    border-radius:12px;
    background:#282828;
    color:#f1f1f1;
    box-shadow:0 10px 32px rgba(0,0,0,.55);
    font-family:Roboto,Arial,sans-serif;
}

.dd-youtube-account-menu[hidden]{
    display:none!important;
}

.dd-youtube-account-head{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    border-bottom:1px solid #3f3f3f;
}

.dd-youtube-account-avatar{
    display:grid;
    flex:0 0 40px;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#3ea6ff;
    color:#0f0f0f;
    font-weight:800;
}

.dd-youtube-account-copy{
    min-width:0;
    display:grid;
    gap:4px;
    padding-top:2px;
}

.dd-youtube-account-copy strong,
.dd-youtube-account-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.dd-youtube-account-copy strong{
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.dd-youtube-account-copy small{
    color:#aaa;
    font-size:13px;
}

.dd-youtube-account-links{
    display:grid;
    padding:8px 0;
}

.dd-youtube-account-links a,
.dd-youtube-account-menu form button{
    display:flex;
    width:100%;
    min-height:40px;
    align-items:center;
    gap:14px;
    padding:0 16px;
    border:0;
    background:transparent;
    color:#f1f1f1;
    text-decoration:none;
    font:400 14px/1.2 Roboto,Arial,sans-serif;
    text-align:left;
    cursor:pointer;
}

.dd-youtube-account-links a:hover,
.dd-youtube-account-menu form button:hover{
    background:#3f3f3f;
}

.dd-youtube-account-links svg,
.dd-youtube-account-menu form svg{
    width:20px;
    height:20px;
    flex:0 0 20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dd-youtube-account-menu form{
    margin:0;
    padding:8px 0;
    border-top:1px solid #3f3f3f;
}

@media(max-width:760px){
    .dd-youtube-login{
        width:40px;
        min-width:40px;
        height:40px;
        min-height:40px;
        padding:0;
        border:0;
        border-radius:50%;
    }

    .dd-youtube-login span{
        display:none;
    }

    .dd-youtube-login svg{
        width:22px;
        height:22px;
    }

    .dd-youtube-avatar{
        width:34px;
        height:34px;
    }

    .dd-youtube-account-menu{
        position:fixed;
        top:58px;
        right:8px;
        width:min(300px,calc(100vw - 16px));
    }
}